/* ==========================================================================
   Pclient CRM B2B — styles.css (corregido)
   Cambios aplicados:
   - Incrustados estilos de .video-frame (Opción A: vídeo con controles nativos)
   - Eliminadas reglas obsoletas de .video-poster / .poster-one / .poster-two
   - Corregidos errores de sintaxis (espacios rotos en propiedades y selectores)
   ========================================================================== */

:root{--navy:#071a2f;--navy2:#0b2948;--blue:#176b87;--teal:#15989b;--mint:#56c8b9;--cream:#f5f5f0;--ink:#122033;--muted:#617082;--line:#dce4e7;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}

/* ---------- Header ---------- */
.site-header{height:82px;display:flex;align-items:center;gap:38px;padding:0 clamp(24px,5vw,82px);position:absolute;z-index:10;width:100%;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}
.brand small{display:block;font-size:8px;letter-spacing:2.3px;font-weight:600;color:#85d7d1}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid #61c9c3;border-radius:9px;color:#7de0d3;font-size:20px}
.site-header nav{display:flex;gap:27px;margin-left:auto;font-size:13px}
.site-header nav a{opacity:.76;transition:.2s}
.site-header nav a:hover{opacity:1;color:#79dbd3}
.header-cta{border:1px solid rgba(255,255,255,.4);padding:11px 17px;border-radius:7px;font-size:12px;font-weight:700}

/* ---------- Hero ---------- */
.hero{min-height:720px;background:radial-gradient(circle at 75% 35%,#164d64 0,transparent 30%),linear-gradient(122deg,#06172a 22%,#0a2944 100%);color:#fff;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:50px;padding:125px clamp(28px,7vw,112px) 75px;overflow:hidden;position:relative}
.hero:before{content:" ";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to right,black,transparent)}
.hero-copy{position:relative;z-index:1}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.3px;text-transform:uppercase;color:#177783;display:flex;align-items:center;gap:10px;margin:0 0 22px}
.eyebrow span{width:24px;height:2px;background:#26a7a1}
.eyebrow.light{color:#6dd5cd}
.hero h1{font-family:Georgia,serif;font-size:clamp(48px,5vw,73px);line-height:1.03;letter-spacing:-2.8px;margin:0;max-width:680px;font-weight:500}
.hero h1 em{display:block;color:#62cbbf;font-style:italic}
.hero-lead{font-size:17px;line-height:1.7;color:#bdcbd6;max-width:570px;margin:27px 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:15px 21px;border-radius:7px;font-size:13px;font-weight:800;display:inline-flex;gap:16px;align-items:center;border:none;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#168f97,#1a718e);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.btn.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.play{font-size:9px;width:23px;height:23px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center}
.hero-proof{display:flex;gap:0;margin-top:44px}
.hero-proof div{display:flex;flex-direction:column;padding:0 30px;border-right:1px solid rgba(255,255,255,.16)}
.hero-proof div:first-child{padding-left:0}
.hero-proof div:last-child{border:0}
.hero-proof strong{font:500 24px Georgia,serif;color:#68d0c5}
.hero-proof span{font-size:10px;color:#94a8b8;margin-top:5px}

/* ---------- Dashboard visual ---------- */
.product-visual{position:relative;z-index:1;min-height:490px;display:grid;place-items:center}
.visual-glow{position:absolute;width:440px;height:440px;background:#1d8590;filter:blur(110px);opacity:.19;border-radius:50%}
.dashboard{width:min(100%,640px);height:390px;background:#f7fafb;border:7px solid rgba(255,255,255,.11);border-radius:17px;box-shadow:0 36px 80px rgba(0,0,0,.42);overflow:hidden;transform:perspective(1300px) rotateY(-4deg) rotateX(2deg)}
.dash-top{height:45px;background:#fff;color:#26364b;display:flex;align-items:center;gap:10px;padding:0 15px;font-size:9px}
.dash-top i{margin-left:auto;width:25px;height:25px;border-radius:50%;background:#dfe9eb}
.mini-brand,.mini-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#10364c;color:#68d2c7;font-weight:bold}
.dash-body{display:grid;grid-template-columns:55px 1fr;height:calc(100% - 45px)}
.dash-body aside{background:#09283e;padding:15px;display:flex;flex-direction:column;gap:18px}
.dash-body aside b,.dash-body aside span{display:block;width:22px;height:6px;border-radius:4px;background:#315469}
.dash-body aside b{background:#4bc1b7;height:22px}
.dash-content{color:#192c3d;padding:24px}
.dash-content > p{font-size:8px;color:#758493;margin:0}
.dash-content h3{font-size:15px;margin:5px 0 18px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.kpis div{background:#fff;border-radius:8px;padding:13px;box-shadow:0 4px 14px #dbe4e7}
.kpis small,.kpis strong,.kpis em{display:block}
.kpis small{font-size:7px;color:#71808d}
.kpis strong{font-size:18px;margin:8px 0}
.kpis em{font-size:7px;color:#15989b;font-style:normal}
.chart-card{height:160px;margin-top:14px;background:#fff;border-radius:8px;padding:15px}
.chart-card > div:first-child{display:flex;justify-content:space-between;font-size:8px}
.chart-card small{color:#8a969f}
.bars{height:105px;display:flex;align-items:end;gap:11px;padding-top:15px;border-bottom:1px solid #dde5e8}
.bars i{flex:1;background:linear-gradient(#55c9bd,#1a718b);border-radius:3px 3px 0 0}
.float-card{position:absolute;background:#fff;color:#17283a;border-radius:9px;padding:12px 16px;box-shadow:0 15px 36px rgba(0,0,0,.24);display:flex;gap:10px;align-items:center}
.float-card > span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ddf5f0;color:#13847e;font-weight:bold}
.float-card b,.float-card small{display:block}
.float-card b{font-size:10px}
.float-card small{font-size:7px;color:#85909a;margin-top:3px}
.fc-one{left:-15px;bottom:55px}
.fc-two{right:-14px;top:70px}

/* ---------- Trust strip / secciones ---------- */
.trust-strip{height:85px;background:#f3f5f2;display:flex;align-items:center;justify-content:center;gap:34px;color:#7a878a;font-size:14px}
.trust-strip span{font-size:8px;letter-spacing:2px}
.trust-strip b{font-family:Georgia,serif;font-weight:500;font-size:17px;color:#43515a}
.trust-strip i{font-style:normal;color:#36aaa4}
.section{padding:110px clamp(28px,8vw,125px)}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px;align-items:center}
.portrait-card{position:relative;min-height:450px}
.portrait-art{height:430px;background:linear-gradient(145deg,#0b2b44,#15596e);border-radius:3px 80px 3px 3px;position:relative;overflow:hidden;display:grid;place-items:center;color:#70d1c8;font:italic 90px Georgia,serif}
.portrait-art:before{content:" ";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.15);border-radius:50%}
.orbit{position:absolute;border:1px solid rgba(86,200,185,.35);border-radius:50%}
.orbit-one{width:420px;height:220px;transform:rotate(30deg)}
.orbit-two{width:300px;height:410px;transform:rotate(-25deg)}
.quote-card{position:absolute;right:-45px;bottom:-28px;background:#fff;width:260px;padding:25px;font:italic 15px/1.5 Georgia,serif;box-shadow:0 18px 45px rgba(18,32,51,.14);border-left:3px solid #30aaa3}

/* ---------- Secciones de texto y presentación (.section-copy) ---------- */
.section-copy h2, .section-heading h2, .center-heading h2, .why-copy h2, .contact h2 {
  font: 500 clamp(34px, 4vw, 51px)/1.1 Georgia, serif;
  letter-spacing: -1.3px;
  margin: 0 0 25px;
  color: #10273b;
}

.section-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.8;
  font-size: 15px;
}

/* Reglas añadidas para h3, listas y textos en negrita */
.section-copy h3 {
  font: 500 18px Georgia, serif;
  color: var(--ink);
  margin: 28px 0 10px;
}

.section-copy ul {
  margin: 0 0 24px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.section-copy ul li {
  margin-bottom: 8px;
}

.section-copy ul strong,
.section-copy p strong {
  color: var(--ink);
  font-weight: bold;
}
.signature{border-top:1px solid var(--line);margin-top:29px;padding-top:21px}
.signature span,.signature small{display:block}
.signature span{font:italic 22px Georgia,serif;color:#0d6f78}
.signature small{font-size:10px;color:#84909a;margin-top:5px;text-transform:uppercase;letter-spacing:1px}
.solution{background:#f5f6f3}
.section-heading{display:grid;grid-template-columns:1.4fr .6fr;gap:100px;align-items:end}
.section-heading > p{color:var(--muted);line-height:1.7;font-size:14px;padding-bottom:20px}

/* ---------- Features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;border:1px solid #d9e1e1}
.feature-grid article{padding:32px 27px;background:#fff;border-right:1px solid #d9e1e1;min-height:320px;position:relative;transition:.25s}
.feature-grid article:last-child{border:0}
.feature-grid article.featured,.feature-grid article:hover{background:#0e3852;color:#fff;transform:translateY(-8px);box-shadow:0 20px 45px rgba(10,38,58,.2)}
.feature-icon{font-size:31px;color:#1b9597}
.feature-grid article > small{float:right;font:italic 12px Georgia,serif;color:#9ba6aa}
.feature-grid h3{font:500 20px Georgia,serif;margin:65px 0 16px}
.feature-grid p{font-size:12px;line-height:1.7;color:#78858d}
.feature-grid .featured p,.feature-grid article:hover p{color:#b7c9d0}
.feature-grid a{position:absolute;bottom:27px;font-size:10px;font-weight:bold;color:#299a9b}

/* ---------- Why / módulos ---------- */
.why-section{background:linear-gradient(130deg,#071a2f,#0c3a52);padding:105px clamp(28px,10vw,155px);display:grid;grid-template-columns:1fr 1fr;gap:120px;color:#fff}
.why-copy h2,.contact h2{color:#fff}
.why-copy > p:not(.eyebrow){color:#aec0ca;font-size:14px;line-height:1.75}
.why-copy ul{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:33px 0}
.why-copy li{font-size:12px}
.why-copy li span{color:#6bd3c8;margin-right:8px}
.btn.white{background:#fff;color:#103149}
.modules-card{background:#fff;color:#193044;border-radius:4px;padding:30px;box-shadow:0 25px 60px rgba(0,0,0,.24)}
.modules-card > p{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#70808d}
.modules-card > div{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.modules-card span{padding:14px 12px;background:#f3f6f5;font-size:10px;display:flex;align-items:center;gap:10px}
.modules-card i{font-style:normal;font:italic 10px Georgia,serif;color:#16918f}
.modules-card b{margin-left:auto;color:#159b93}
.center-heading{text-align:center;max-width:680px;margin:0 auto 48px}
.center-heading .eyebrow{justify-content:center}
.center-heading > p:last-child{color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- Vídeos (Opción A: <video> con controles nativos) ----------
   Sustituye a los antiguos pósters (.video-poster, .poster-one, .poster-two),
   cuyas reglas han sido eliminadas por quedar obsoletas. */

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  max-width: 1155px; /* Aumentado un 10% (antes 1050px) */
  margin: auto;
}

.video-frame {
  overflow: hidden;
  border-radius: inherit; /* hereda el redondeo de .video-card si lo tiene */
  background-color: #0a263e; /* mismo fondo que tenían los pósters */
}

.video-frame video {
  width: 100%;
  aspect-ratio: 16 / 9; /* equivale a los 285px de altura del póster original */
  object-fit: cover;
  display: block;
  background: #000;
}

.video-card h3 {
  font: 500 19px Georgia, serif;
  margin: 18px 0 7px;
}

.video-card p {
  font-size: 12px;
  color: #7b8890;
  margin: 0;
}

/* ---------- Integraciones ---------- */
.integrations{background:#f4f5f2}
.integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:1050px;margin:auto}
.integration-grid > article{background:#fff;padding:36px;box-shadow:0 9px 30px rgba(12,40,58,.07)}
.integration-badge{display:inline-block;background:#e4f4f1;color:#168b87;font-size:8px;letter-spacing:1.4px;font-weight:bold;padding:7px 10px;border-radius:30px}
.integration-grid h3{font:500 25px Georgia,serif;margin:18px 0 10px}
.integration-grid > article > p{font-size:12px;color:#71808a;line-height:1.6}
.mini-form{border-top:1px solid var(--line);margin-top:25px;padding-top:20px}
.mini-form label{display:block;font-size:9px;font-weight:bold;margin:10px 0;color:#495967}
.mini-form input{display:block;width:100%;padding:11px;border:1px solid #dce3e5;margin-top:6px;font-size:10px}
.mini-form button{width:100%;background:#117a85;color:#fff;border:0;padding:12px;font-size:10px;font-weight:bold;margin-top:7px}
.mini-landing{margin-top:22px;height:225px;background:linear-gradient(135deg,#071b2e,#0c4558);color:#fff;padding:25px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden}
.mini-landing:after{content:" ";position:absolute;width:220px;height:220px;border:45px solid rgba(81,204,191,.15);border-radius:50%;right:-60px;bottom:-90px}
.mini-landing small{font-size:7px;letter-spacing:1.5px;color:#5bc8bf;margin-top:27px}
.mini-landing b{font:500 23px Georgia,serif;margin-top:8px;max-width:240px;z-index:1}
.mini-landing button{font-size:8px;background:#fff;color:#15364b;border:0;padding:8px 13px;margin-top:auto;z-index:1}

/* ---------- Contacto ---------- */
.contact{padding:105px clamp(28px,10vw,155px);background:#0b2338;color:#fff;display:grid;grid-template-columns:.9fr 1.1fr;gap:110px}
.contact > div > p:not(.eyebrow){color:#a8bbc7;line-height:1.7;font-size:14px}
.contact-data{margin-top:33px}
.contact-data > a,.contact-data > div{display:flex;gap:14px;align-items:center;margin:17px 0;font-size:12px}
.contact-data span{width:37px;height:37px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:grid;place-items:center;color:#68d0c5}
.contact-data small{display:block;color:#8297a5;font-size:8px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.contact-form{background:#fff;color:#1c3042;padding:34px;box-shadow:0 20px 55px rgba(0,0,0,.3)}
.contact-form label{font-size:9px;font-weight:bold;display:block;margin-bottom:15px}
.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #dae2e4;padding:12px;margin-top:6px;resize:vertical;font-size:11px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form .btn{width:100%;justify-content:center}
.contact-form > small{display:block;color:#8b979e;font-size:8px;text-align:center;margin-top:12px;line-height:1.5}

/* ---------- Footer ---------- */
footer{background:#061525;color:#fff;min-height:160px;padding:38px clamp(28px,7vw,110px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;border-top:1px solid rgba(255,255,255,.1)}
footer > p{font:italic 14px Georgia,serif;color:#8499a8}
footer > div{display:flex;gap:20px;font-size:10px}
footer > small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;color:#617586;font-size:8px}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .site-header nav{display:none}
  .header-cta{margin-left:auto}
  .hero{grid-template-columns:1fr;padding-top:140px}
  .hero-copy{text-align:center}
  .hero .eyebrow,.hero-actions{justify-content:center}
  .hero h1,.hero-lead{margin-left:auto;margin-right:auto}
  .hero-proof{justify-content:center}
  .product-visual{min-height:430px}
  .split{gap:60px}
  .feature-grid{grid-template-columns:1fr 1fr}
  .feature-grid article{border-bottom:1px solid #d9e1e1}
  .why-section,.contact{gap:60px}
  .section-heading{gap:45px}
}

@media(max-width:720px){
  .site-header{height:70px;padding:0 20px}
  .header-cta{display:none}
  .hero{padding:115px 22px 60px}
  .hero h1{font-size:46px}
  .hero-lead{font-size:15px}
  .hero-proof div{padding:0 14px}
  .product-visual{min-height:330px}
  .dashboard{height:270px}
  .dash-body aside{display:none}
  .dash-body{grid-template-columns:1fr}
  .dash-content{padding:15px}
  .chart-card{height:95px}
  .bars{height:55px}
  .fc-two{right:0;top:28px}
  .fc-one{left:0;bottom:20px}
  .trust-strip{height:auto;padding:22px;flex-wrap:wrap;gap:16px}
  .section{padding:75px 22px}
  .split,.section-heading,.why-section,.contact{grid-template-columns:1fr}
  .split{gap:65px}
  .portrait-card{min-height:370px}
  .portrait-art{height:350px}
  .quote-card{right:0}
  .section-heading{gap:0}
  .feature-grid{grid-template-columns:1fr}
  .feature-grid article{min-height:270px;border-right:0}
  .why-section,.contact{padding:75px 22px;gap:55px}
  .why-copy ul,.modules-card > div{grid-template-columns:1fr}
  .video-grid,.integration-grid{grid-template-columns:1fr}
  /* Nota: la antigua regla .video-poster{height:220px} ya no es necesaria;
     la altura del vídeo se ajusta sola vía aspect-ratio:16/9 */
  .integration-grid > article{padding:25px}
  .form-row{grid-template-columns:1fr}
  footer{grid-template-columns:1fr;text-align:center;justify-items:center}
  footer > div{flex-wrap:wrap;justify-content:center}
  .hero h1{letter-spacing:-1.5px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feature-grid article{transition:none}
}

/* ---------- Extras (folleto / formulario embebido) ---------- */
.mini-landing > a{font-size:8px;background:#fff;color:#15364b;border:0;padding:9px 13px;margin-top:auto;z-index:1;font-weight:bold;display:inline-flex;align-items:center;gap:10px}
.brochure-preview{height:245px}
.brochure-preview b{max-width:290px}
.pdf-pill{position:absolute;right:22px;top:22px;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 9px;font-size:7px;letter-spacing:1px;color:#9be2dc;z-index:1}
.download-note{font-size:9px!important;margin:14px 0 0!important;color:#7d8a92!important;line-height:1.5!important}
.embedded-form{padding:0;overflow:hidden}
.embedded-form-head{padding:23px 28px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8ea}
.embedded-form-head span{font-size:7px;letter-spacing:1.6px;color:#168e91;font-weight:bold}
.embedded-form-head h3{font:500 21px Georgia,serif;margin:5px 0 0}
.embedded-form-head > small{background:#eef5f3;color:#168e91;border-radius:20px;padding:7px 10px;font-size:7px;font-weight:bold;letter-spacing:1px}
.embedded-form iframe{display:block;border:0;width:100%;background:#f7f9f8}
.iframe-fallback{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 28px;background:#f5f7f6;border-top:1px solid #e2e8ea}
.iframe-fallback p{font-size:9px;color:#74828b;margin:0}
.iframe-fallback a{font-size:9px;color:#117c85;font-weight:bold;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}

@media(max-width:720px){
  .embedded-form iframe{height:720px}
  .embedded-form-head,.iframe-fallback{padding-left:18px;padding-right:18px}
  .iframe-fallback{align-items:flex-start;flex-direction:column}
}