/* ============================================================
   TeEntiendo — Theme v8 (capa de diseño)
   Carga DESPUÉS del CSS inline de cada página. Sobrescribe tokens,
   tipografía, espaciado y componentes sin tocar la lógica (calculadora,
   cotizador, formularios). Quitar este archivo = volver al diseño v7.
   ============================================================ */

:root{
  /* Tokens de marca (sin cambio de identidad, sí de disciplina) */
  --te-navy:#16233F;
  --te-navy-2:#1F2F52;
  --te-gold:#C08A34;
  --te-gold-deep:#8C631F;
  --te-paper:#F7F6F2;
  --te-white:#FFFFFF;
  --te-ink:#1B1F27;
  --te-ink-soft:#586173;
  --te-line:#E4E1DA;
  --te-ok:#1F7A4D;

  /* Escala tipográfica (1.25) */
  --te-fs-xs:12.5px; --te-fs-sm:14px; --te-fs-md:16px; --te-fs-lg:18px;
  --te-fs-h3:22px; --te-fs-h2:30px; --te-fs-h1:40px;

  /* Espaciado 8pt */
  --te-s2:8px; --te-s3:16px; --te-s4:24px; --te-s5:32px; --te-s6:48px; --te-s7:64px;

  --te-radius:6px;
  --te-shadow:0 1px 2px rgba(22,35,63,.06), 0 8px 24px rgba(22,35,63,.06);
}

/* ---------- Base ---------- */
html{scroll-snap-type:none !important;}
body{background:var(--te-paper); color:var(--te-ink); -webkit-font-smoothing:antialiased;}
section{min-height:auto !important; scroll-snap-align:none !important; padding:var(--te-s7) 0 !important;}
@media(max-width:720px){ section{padding:var(--te-s6) 0 !important;} }
h1,h2,h3{letter-spacing:-0.01em;}
h2{font-size:var(--te-fs-h2) !important; line-height:1.2;}
.lead{font-size:var(--te-fs-md); color:var(--te-ink-soft); max-width:640px;}
.wrap{max-width:1120px;}

/* Accesibilidad: foco visible y tamaño táctil */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--te-gold); outline-offset:3px;
}
.btn{min-height:48px; border-radius:var(--te-radius); font-weight:700; letter-spacing:0;}
.btn-primary{background:var(--te-gold); color:var(--te-white) !important;}
.btn-primary:hover{background:var(--te-gold-deep);}
.btn-dark{border-color:var(--te-navy); color:var(--te-navy);}

/* ---------- Header ---------- */
header{background:rgba(247,246,242,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--te-line);}
.brand{font-size:19px;}

/* ---------- Hero v8 ---------- */
.hero{padding:0 !important; background:var(--te-navy) !important; color:var(--te-white);}
.hero-v8{display:grid; grid-template-columns:1.05fr .95fr; min-height:560px;}
.hero-v8 .copy{padding:72px 48px 64px 0; display:flex; flex-direction:column; justify-content:center;}
.hero-v8 .eyebrow{color:var(--te-gold); margin-bottom:14px;}
.hero-v8 h1{font-size:var(--te-fs-h1); line-height:1.15; color:var(--te-white); margin:0;}
.hero-v8 h1 .accent{color:var(--te-gold);}
.hero-v8 .sub{color:rgba(255,255,255,.78); font-size:var(--te-fs-lg); line-height:1.55; margin:18px 0 0; max-width:560px;}
.hero-v8 .ctarow{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}
.hero-v8 .btn-ghost{border:1px solid rgba(255,255,255,.35); color:var(--te-white);}
.hero-v8 .btn-ghost:hover{border-color:var(--te-gold); color:var(--te-gold);}
.hero-v8 .photo{position:relative; min-height:420px; overflow:hidden;}
.hero-v8 .photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero-v8 .photo::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, var(--te-navy) 0%, rgba(22,35,63,.35) 28%, rgba(22,35,63,0) 60%);}
.hero-v8 .photo .stat{position:absolute; z-index:2; left:24px; bottom:24px; background:rgba(22,35,63,.88); border:1px solid rgba(192,138,52,.6); padding:14px 16px; backdrop-filter:blur(6px); max-width:280px;}
.hero-v8 .photo .stat b{display:block; font-family:'IBM Plex Mono',monospace; color:var(--te-gold); font-size:20px;}
.hero-v8 .photo .stat span{font-size:13px; color:rgba(255,255,255,.85);}
@media(max-width:900px){
  .hero-v8{grid-template-columns:1fr; min-height:auto;}
  .hero-v8 .copy{padding:48px 0 32px; order:2;}
  .hero-v8 .photo{min-height:260px; order:1; margin:0 -20px;}
  .hero-v8 .photo::after{background:linear-gradient(180deg, rgba(22,35,63,0) 40%, var(--te-navy) 100%);}
  .hero-v8 h1{font-size:32px;}
}

/* ---------- Franja de confianza ---------- */
.trust-strip{background:var(--te-white); border-bottom:1px solid var(--te-line);}
.trust-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.trust-strip .item{display:flex; gap:12px; align-items:flex-start; padding:20px 20px 20px 0; border-right:1px solid var(--te-line);}
.trust-strip .item:last-child{border-right:none;}
.trust-strip .item + .item{padding-left:20px;}
.trust-strip svg{width:22px; height:22px; flex:0 0 22px; margin-top:2px;}
.trust-strip b{display:block; font-size:var(--te-fs-sm); color:var(--te-navy);}
.trust-strip span{font-size:var(--te-fs-xs); color:var(--te-ink-soft);}
@media(max-width:900px){
  .trust-strip .wrap{grid-template-columns:1fr 1fr;}
  .trust-strip .item{border-right:none; border-bottom:1px solid var(--te-line); padding:16px 0;}
  .trust-strip .item + .item{padding-left:0;}
  .trust-strip .item:nth-child(odd){padding-right:16px;}
  .trust-strip .item:nth-child(even){padding-left:16px; border-left:1px solid var(--te-line);}
}

/* ---------- Planes ---------- */
.plan-grid{margin-top:var(--te-s6) !important; gap:20px;}
.plan{background:var(--te-white) !important; border:1px solid var(--te-line) !important; border-radius:var(--te-radius); box-shadow:var(--te-shadow); padding:32px 28px;}
.plan.feat{background:var(--te-navy) !important; border-color:var(--te-navy) !important; transform:none !important; box-shadow:0 16px 40px rgba(22,35,63,.22);}
.plan.feat::before{content:"MÁS ELEGIDO"; position:absolute; top:-12px; left:24px; background:var(--te-gold); color:var(--te-white); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; padding:5px 10px; border-radius:2px;}
.plan h3{font-size:var(--te-fs-h3);}
.plan .price{font-size:36px;}
.plan .desc{min-height:0;}
/* La ilustración "pointing_woman" se retira en v8 (tono más sobrio). Para volver a usarla: elimina estas dos líneas. */
.plan-pointer, .plan-pointer-text{display:none !important;}
.comparativa table{border-radius:var(--te-radius);}
.fee-nota, .exclusiones{background:var(--te-white); border:1px solid var(--te-line); border-left:3px solid var(--te-gold); border-radius:var(--te-radius);}

/* ---------- Calculadora embebida ---------- */
.calc-embed{background:var(--te-white); border-top:1px solid var(--te-line);}

/* ---------- Franja de imagen + CTA (antes del footer) ---------- */
.cta-photo{position:relative; color:var(--te-white); overflow:hidden; background:var(--te-navy);}
.cta-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28;}
.cta-photo .wrap{position:relative; text-align:center; padding:var(--te-s7) 20px;}
.cta-photo h2{color:var(--te-white) !important;}
.cta-photo p{color:rgba(255,255,255,.8); margin:12px auto 0; max-width:560px;}

/* ---------- Footer ---------- */
footer{background:#0F1830;}
footer .fine{max-width:820px; line-height:1.6;}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* ---------- Impresión ---------- */
@media print{ header, .wa-float, .mobile-panel{display:none !important;} }

/* ---------- v8.1: medios de marca en portadas de subpáginas ---------- */
.page-hero.has-media .wrap{max-width:1120px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
.page-hero .media{position:relative; border:1px solid rgba(192,138,52,.55); border-radius:6px; overflow:hidden; background:#1F2F52; box-shadow:0 18px 40px rgba(0,0,0,.35);}
.page-hero .media img, .page-hero .media video{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
.page-hero .media.portrait img{aspect-ratio:3/4;}
.page-hero .media.wide img{aspect-ratio:16/7;}
.page-hero .media .badge{position:absolute; left:14px; bottom:14px; background:rgba(22,35,63,.9); border:1px solid #C08A34; color:#fff; padding:10px 14px; font-size:13px; backdrop-filter:blur(6px);}
.page-hero .media .badge b{display:block; font-family:'IBM Plex Mono',monospace; color:#C08A34; font-size:18px;}
@media(max-width:900px){
  .page-hero.has-media .wrap{grid-template-columns:1fr;}
  .page-hero .media{order:-1; margin-bottom:8px;}
  .page-hero .media img, .page-hero .media video{aspect-ratio:16/9 !important; max-height:260px;}
}
/* Banda de ilustración entre portada y contenido */
.brand-band{background:#16233F; border-top:1px solid #33436A; border-bottom:1px solid #33436A;}
.brand-band img{display:block; width:100%; max-width:1120px; margin:0 auto; height:auto;}
/* Material descargable (asesores) */
.kit{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; background:#fff; border:1px solid #E4E1DA; border-left:3px solid #C08A34; padding:24px; margin-top:32px;}
.kit img{width:140px; height:140px;}
.kit h3{font-family:'Roboto Slab',serif; font-size:18px; margin:0 0 6px; color:#16233F;}
.kit p{color:#586173; font-size:14px; margin:0;}
@media(max-width:600px){.kit{grid-template-columns:1fr;}}
/* Sello dorado en el bloque de confianza */
.digital img.sello{width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #C08A34;}

/* v4.3.12 — contraste consistente en superficies azul marino */
.como, .ctafinal, .cotizador, .hero, .page-hero, .brand-band {
  color: var(--te-white) !important;
}
.como h1, .como h2, .como h3, .como h4,
.ctafinal h1, .ctafinal h2, .ctafinal h3, .ctafinal h4,
.cotizador h1, .cotizador h2, .cotizador h3, .cotizador h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4 {
  color: var(--te-white) !important;
}
.como p, .como .lead, .como .sub, .como .step p,
.ctafinal p, .ctafinal .lead, .ctafinal .sub,
.cotizador p, .cotizador .lead, .cotizador .sub,
.hero p, .hero .lead, .hero .sub,
.page-hero p, .page-hero .lead, .page-hero .sub {
  color: rgba(255,255,255,.86) !important;
}
.como .eyebrow, .como .brand-kicker, .como .num,
.ctafinal .eyebrow, .ctafinal .brand-kicker,
.cotizador .eyebrow, .cotizador .brand-kicker,
.hero .eyebrow, .hero .brand-kicker,
.page-hero .eyebrow, .page-hero .brand-kicker {
  color: var(--te-gold) !important;
}
/* El problema conserva superficie clara; sólo su portada azul usa blanco. */
.problema h1, .problema h2, .problema h3, .problema p, .problema .lead { color: inherit; }