/* ===========================================================
   DF CONSULTORES — Landing · estilos de layout
   Requiere tokens.css + components.css
   =========================================================== */
.container{ max-width:1180px; margin:0 auto; padding:0 28px; }
.section{ padding:104px 0; }
.section.lino{ background:var(--lino); }
.section.tight{ padding:80px 0; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ text-wrap:balance; }
p{ text-wrap:pretty; }

.sec-intro{ max-width:680px; margin:0 auto 56px; text-align:center; }
.sec-intro.left{ text-align:left; margin-left:0; }
.sec-intro h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4.4vw,var(--fs-h2)); line-height:1.06; letter-spacing:-.02em; margin:16px 0 16px; color:var(--ink); }
.sec-intro p{ font-size:var(--fs-body-lg); color:var(--muted); margin:0; }
.sec-intro .eyebrow{ justify-content:center; }
.sec-intro.left .eyebrow{ justify-content:flex-start; }
.accent{ font-family:var(--font-accent); font-style:italic; font-weight:500; color:var(--burgundy); }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(252,251,250,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; height:92px; gap:24px; }
.nav .brand{ display:flex; align-items:center; gap:0; flex:0 0 auto; }
.nav .brand img{ height:62px; width:auto; flex:0 0 auto; max-width:none; }
.nav .links{ display:flex; align-items:center; gap:32px; flex:0 0 auto; }
.nav .links a{ font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; transition:color .15s ease; white-space:nowrap; }
.nav .links a:hover{ color:var(--burgundy); }
.nav .nav-cta{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.nav .btn{ padding:12px 22px; font-size:14.5px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; border-radius:2px; }
.nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; background:
    radial-gradient(1100px 520px at 88% -8%, var(--mauve-100), transparent 60%),
    var(--white); }
.hero .container{ display:grid; grid-template-columns:1.04fr .96fr; gap:64px; align-items:center; padding-top:84px; padding-bottom:96px; }
.hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5.6vw,68px); line-height:1.02; letter-spacing:-.025em; margin:22px 0 22px; color:var(--ink); }
.hero h1 .accent{ display:inline; }
.hero .lede{ font-size:var(--fs-body-lg); color:var(--muted); margin:0 0 32px; max-width:33ch; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero .trust{ display:flex; align-items:center; gap:20px; margin-top:28px; flex-wrap:wrap; }
.hero .trust .t-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); font-weight:600; }
.hero .trust .tick{ width:18px; height:18px; border-radius:50%; background:var(--champagne-100); color:var(--champagne-600); display:grid; place-items:center; font-size:11px; border:1px solid var(--champagne); }
.hero-visual{ position:relative; }
.hero-visual .tablero{ transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.hero-visual .float-badge{ position:absolute; left:-26px; bottom:-26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-card); padding:14px 18px; display:flex; gap:12px; align-items:center; }
.hero-visual .float-badge .fb-ic{ width:38px; height:38px; border-radius:10px; background:var(--burgundy); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; }
.hero-visual .float-badge b{ font-size:14px; color:var(--ink); display:block; }
.hero-visual .float-badge span{ font-size:12px; color:var(--muted); }

/* ---------- VIDEO ---------- */
.video-block{ max-width:920px; margin:0 auto; }
.video-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, var(--mauve-100) 0 14px, #efe3ec 14px 28px); display:grid; place-items:center; cursor:pointer; }
.video-frame::after{ content:"VIDEO · PRESENTACIÓN DEL ESTUDIO · 60 s"; position:absolute; bottom:16px; left:16px; font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.04em; color:var(--burgundy-700); background:rgba(255,255,255,.8); padding:6px 12px; border-radius:999px; }
.play-btn{ width:84px; height:84px; border-radius:50%; background:var(--burgundy); display:grid; place-items:center; box-shadow:0 18px 44px -16px rgba(143,19,97,.6); transition:transform .2s ease; }
.video-frame:hover .play-btn{ transform:scale(1.06); }
.play-btn::before{ content:""; border-left:24px solid #fff; border-top:15px solid transparent; border-bottom:15px solid transparent; margin-left:7px; }

/* ---------- PROBLEMAS ---------- */
.problems{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.problem{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px; position:relative; }
.problem .quote{ font-family:var(--font-accent); font-style:italic; font-weight:500; font-size:21px; line-height:1.4; color:var(--ink); margin:0 0 18px; }
.problem .pl{ font-size:14.5px; color:var(--muted); margin:0; }
.problem .mk{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--mauve); line-height:1; margin-bottom:18px; }

/* ---------- SOLUCIÓN ---------- */
.solucion{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.solucion .vlist{ display:flex; flex-direction:column; gap:30px; }
.solucion .panel{ background:var(--burgundy-900); border-radius:var(--r-lg); padding:40px; color:#fff; }
.solucion .panel .pe{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne); margin:0 0 16px; }
.solucion .panel h3{ font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.1; margin:0 0 14px; }
.solucion .panel p{ color:rgba(255,255,255,.74); font-size:16px; margin:0 0 26px; }
.solucion .panel .mini-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px; }
.solucion .panel .mini-row:last-child{ border-bottom:none; }
.solucion .panel .mini-row b{ font-variant-numeric:tabular-nums; }
.solucion .panel .mini-row .ok{ color:var(--salvia); }

/* ---------- PILARES ---------- */
.pilares-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* ---------- QUIÉNES SOMOS ---------- */
.quienes{ display:grid; grid-template-columns:.82fr 1.18fr; gap:64px; align-items:center; }
.quienes .photo-wrap{ position:relative; }
.quienes .photo-wrap img{ width:100%; border-radius:var(--r-lg); border:1px solid var(--line); }
.quienes .photo-wrap .cred{ position:absolute; right:-18px; bottom:-18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card); border-radius:var(--r-md); padding:16px 20px; }
.quienes .photo-wrap .cred b{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--burgundy); display:block; }
.quienes .photo-wrap .cred span{ font-size:12.5px; color:var(--muted); }
.quienes h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4vw,42px); line-height:1.05; letter-spacing:-.02em; margin:14px 0 20px; }
.quienes .bio{ font-size:17px; color:var(--ink); margin:0 0 18px; max-width:54ch; }
.quienes .bio.muted{ color:var(--muted); }
.quienes .creds{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.quienes .creds .c{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; }
.quienes .creds .c .n{ font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--burgundy); line-height:1; }
.quienes .creds .c .l{ font-size:12.5px; color:var(--muted); margin-top:4px; }

/* ---------- TESTIMONIOS ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px; display:flex; flex-direction:column; }
.testi .stars{ color:var(--champagne-600); font-size:15px; letter-spacing:2px; margin-bottom:16px; }
.testi .txt{ font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 24px; flex:1; }
.testi .who{ display:flex; align-items:center; gap:13px; }
.testi .av{ width:46px; height:46px; border-radius:50%; background:var(--mauve-100); color:var(--burgundy); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:17px; border:1px solid var(--mauve-200); }
.testi .who b{ font-size:14.5px; color:var(--ink); display:block; }
.testi .who span{ font-size:12.5px; color:var(--muted); }

/* ---------- FORM CTA ---------- */
.formcta{ background:var(--burgundy-900); }
.formcta .container{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.formcta .copy .eyebrow{ color:var(--champagne); }
.formcta .copy .eyebrow::before{ background:var(--champagne); }
.formcta .copy h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4.2vw,46px); line-height:1.04; letter-spacing:-.02em; color:#fff; margin:16px 0 18px; }
.formcta .copy h2 .accent{ color:var(--champagne); }
.formcta .copy p{ color:rgba(255,255,255,.74); font-size:17px; margin:0 0 26px; max-width:42ch; }
.formcta .copy .checklist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.formcta .copy .checklist li{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.9); font-size:15.5px; }
.formcta .copy .checklist .tick{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--champagne); color:var(--burgundy-900); display:grid; place-items:center; font-size:12px; font-weight:800; margin-top:1px; }

.form-card{ background:#fff; border-radius:var(--r-lg); padding:36px; box-shadow:0 30px 70px -30px rgba(0,0,0,.5); }
.form-card h3{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 6px; }
.form-card .fsub{ font-size:14px; color:var(--muted); margin:0 0 24px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; font-family:var(--font-body); font-size:15.5px; color:var(--ink); padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:border-color .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--burgundy); }
.field.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:0; }
.field .err{ font-size:12.5px; color:#c0392b; margin-top:6px; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#c0392b; }
.field.invalid .err{ display:block; }
.form-card .fineprint{ font-size:12px; color:var(--muted); margin:14px 0 0; line-height:1.5; }
.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success .ic{ width:64px; height:64px; border-radius:50%; background:var(--champagne-100); color:var(--burgundy); display:grid; place-items:center; font-size:30px; margin:0 auto 18px; border:1px solid var(--champagne); }
.form-success h3{ font-family:var(--font-display); font-weight:800; font-size:24px; margin:0 0 8px; }
.form-success p{ color:var(--muted); font-size:15px; margin:0; }

/* ---------- FAQ section ---------- */
.faq-wrap{ max-width:820px; margin:0 auto; }

/* ---------- FINAL CTA ---------- */
.finalcta{ background:radial-gradient(900px 500px at 50% 120%, var(--burgundy), var(--burgundy-900)); color:#fff; text-align:center; padding:120px 0; }
.finalcta .badge{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.finalcta h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(38px,6vw,72px); line-height:1.0; letter-spacing:-.025em; margin:22px auto 20px; max-width:16ch; }
.finalcta h2 .accent{ color:var(--champagne); }
.finalcta p{ font-size:var(--fs-body-lg); color:rgba(255,255,255,.78); margin:0 auto 36px; max-width:48ch; }
.finalcta .cupos{ margin-top:26px; font-size:13.5px; color:rgba(255,255,255,.6); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--burgundy-900); color:rgba(255,255,255,.6); padding:56px 0 40px; border-top:1px solid rgba(255,255,255,.1); }
.footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .lkD{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:24px; letter-spacing:.1em; }
.footer .lkD .slash{ color:var(--champagne); }
.footer p.fp{ font-size:13.5px; line-height:1.6; margin:14px 0 0; max-width:34ch; }
.footer .fcol h4{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 14px; }
.footer .fcol a, .footer .fcol span{ display:block; font-size:14px; color:rgba(255,255,255,.78); text-decoration:none; margin-bottom:9px; }
.footer .fcol a:hover{ color:#fff; }
.footer .legal{ padding-top:26px; font-size:12px; line-height:1.7; color:rgba(255,255,255,.45); }
.footer .legal a{ color:rgba(255,255,255,.7); }

/* ---------- Acceso clientes (portal) ---------- */
.btn-portal{ background:var(--ciruela); color:#fff; border-color:var(--ciruela); display:inline-flex; align-items:center; gap:8px; }
.btn-portal:hover{ background:var(--ciruela-900); border-color:var(--ciruela-900); color:#fff; }
.btn-portal .ic{ font-size:12px; color:var(--champagne); line-height:1; }
.btn-portal .soon-tag{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--champagne); color:var(--ciruela); padding:3px 7px; border-radius:999px; }
.btn-portal.soon{ cursor:not-allowed; opacity:.9; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:80; display:inline-flex; align-items:center; gap:10px;
  background:var(--burgundy); color:#fff; border-radius:999px; padding:14px 22px 14px 17px;
  box-shadow:0 16px 40px -14px rgba(143,19,97,.65); text-decoration:none; font-weight:700; font-size:14.5px;
  transition:all .18s ease; }
.wa-float:hover{ background:var(--burgundy-700); transform:translateY(-2px); }
.wa-float svg{ width:24px; height:24px; flex:none; }
.wa-float .lbl{ white-space:nowrap; }
@media (max-width:620px){ .wa-float{ padding:15px; right:16px; bottom:16px; } .wa-float .lbl{ display:none; } }

/* ---------- reveal anim (progressive enhancement — visible by default) ---------- */
.reveal{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
html.js .reveal{ opacity:0; transform:translateY(22px); }
html.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .container{ grid-template-columns:1fr; gap:48px; padding-top:54px; padding-bottom:64px; }
  .hero-visual .tablero{ transform:none; }
  .solucion, .quienes, .formcta .container{ grid-template-columns:1fr; gap:40px; }
  .problems, .pilares-grid, .testi-grid{ grid-template-columns:1fr; }
  .footer .top{ grid-template-columns:1fr 1fr; }
  .section{ padding:72px 0; }
}
@media (max-width:1280px){
  .nav .nav-cta .btn-secondary{ display:none; }
}
@media (max-width:1140px){
  .nav .links{ gap:22px; }
  .nav .btn-portal .soon-tag{ display:none; }
}
@media (max-width:1080px){
  .nav .nav-cta .btn-secondary{ display:none; }
  .nav .btn-portal .soon-tag{ display:none; }
}
@media (max-width:760px){
  .nav .links{ display:none; }
  .nav .nav-cta .btn-secondary{ display:none; }
  .nav .btn-portal{ padding:12px 16px; }
  .nav .btn-portal span:not(.ic){ display:none; }
  .nav-toggle{ display:flex; }
  .nav.open .links{ display:flex; position:absolute; top:92px; left:0; right:0; background:var(--lino); flex-direction:column; gap:0; padding:8px 28px 20px; border-bottom:1px solid var(--line); }
  .nav.open .links a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .pilares-grid{ grid-template-columns:1fr; }
  .tablero .tb-kpis{ grid-template-columns:repeat(2,1fr); }
  .tablero .kpi:nth-child(2n){ border-right:none; }
  .footer .top{ grid-template-columns:1fr; }
  .hero-visual .float-badge{ left:8px; top:auto; bottom:-20px; }
}

/* Ajuste celular: evitar desborde horizontal */
@media (max-width:560px){
  .nav .container{ gap:10px; height:76px; }
  .nav .brand img{ height:48px; }
  .nav .nav-cta{ gap:8px; }
  .nav .nav-cta .btn-primary{ display:none; }
  .hero-copy, .hero-copy > *{ min-width:0; max-width:100%; }
  .cta-row{ flex-wrap:wrap; }
  .hero .container{ grid-template-columns:minmax(0,1fr); }
  .hero-visual, .tablero{ min-width:0; max-width:100%; }
  .btn{ white-space:normal; text-align:center; }
  .container > *{ min-width:0; }
  .formcta .container, .solucion, .quienes{ grid-template-columns:minmax(0,1fr); }
  .form-card{ padding:26px 20px; }
  .kpi{ min-width:0; }
  .tablero .kpis, .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Opciones del formulario de contacto */
.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice label{ margin:0; cursor:pointer; position:relative; min-width:0; }
.choice input{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.choice span{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:52px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:14.5px; font-weight:600; color:var(--ink); background:#fff; transition:all .15s ease; line-height:1.25; }
.choice label:hover span{ border-color:var(--burgundy); }
.choice input:checked + span{ border-color:var(--burgundy); background:var(--burgundy); color:#fff; }
.choice input:focus-visible + span{ outline:2px solid var(--burgundy); outline-offset:2px; }
.field.invalid .choice span{ border-color:#c0392b; }
@media (max-width:380px){ .choice{ grid-template-columns:1fr; } }

/* Quiénes somos sin foto + firma chica en contacto */
.quienes.solo{ grid-template-columns:minmax(0,1fr); max-width:820px; }
.quienes.solo .bio{ max-width:68ch; }
.formcta .firma{ display:flex; align-items:center; gap:14px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.formcta .firma img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 30%; border:2px solid var(--champagne); flex:none; }
.formcta .firma b{ display:block; color:#fff; font-size:16px; font-weight:700; }
.formcta .firma span{ display:block; color:rgba(255,255,255,.7); font-size:13px; line-height:1.45; }
.quienes.solo{ max-width:900px; margin:0 auto; text-align:center; }
.quienes.solo .eyebrow{ justify-content:center; }
.quienes.solo .bio{ margin-left:auto; margin-right:auto; }
.quienes.solo .creds{ justify-content:center; }
.formcta .firma img{ width:76px; height:76px; }
.formcta .firma{ gap:20px; }
.formcta .firma img{ width:120px; height:120px; object-position:50% 40%; border-width:3px; }
.formcta .firma b{ font-size:19px; }
.formcta .firma span{ font-size:14px; }
@media (max-width:560px){ .formcta .firma img{ width:96px; height:96px; } }
.form-card .mail-line{ text-align:center; font-size:16px; color:var(--ink); margin:16px 0 0; }
.form-card .mail-line a{ color:var(--burgundy); font-weight:700; text-decoration:none; border-bottom:1.5px solid currentColor; }
/* Etiquetas de sección más grandes */
.eyebrow{ font-size:15px; letter-spacing:.16em; }
.hero .eyebrow{ font-size:18px; }
@media (max-width:560px){ .eyebrow{ font-size:13.5px; } .hero .eyebrow{ font-size:15px; } }