/* ============================================================
   JNL Seguros — web pública · sistema visual v2 (piloto: Inicio)
   Aplica skill jnl-frontend-premium sobre la identidad ya
   establecida: navy #314E87 + dorado #C9A961 + papel cálido.
   Cambios vs v1: profundidad con gradientes navy (nada de bloques
   planos), hero navy editorial, grilla de coberturas bento
   asimétrica, motion de entrada al scroll, un solo dorado
   protagonista por pantalla (el CTA de WhatsApp en el hero).
   Sin dependencias nuevas — CSS + IntersectionObserver vanilla.
   ============================================================ */

@font-face { font-family:'Montserrat'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/Montserrat-Regular.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:600; font-style:normal; font-display:swap; src:url('/assets/fonts/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:700; font-style:normal; font-display:swap; src:url('/assets/fonts/Montserrat-Bold.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/SourceSerif4-Regular.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-weight:400; font-style:italic;  font-display:swap; src:url('/assets/fonts/SourceSerif4-Italic.woff2') format('woff2'); }

:root{
  --navy:#314E87;
  --navy-deep:#1E3159;
  --navy-900:#16274A;
  --navy-950:#101d3a;
  --gold:#C9A961;
  --gold-dark:#A9863F;
  --gold-soft:#e6d3a8;
  --paper:#FBFAF7;
  --paper-warm:#F4F0E6;
  --grey:#A9ABAE;
  --ink:#1B2333;
  --slate:#64708A;
  --line:rgba(30,49,89,0.13);
  --line-soft:rgba(30,49,89,0.07);
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap:1140px;
  --trama: repeating-linear-gradient(135deg, rgba(30,49,89,0.038) 0 1px, transparent 1px 28px);
  --sombra-suave: 0 24px 60px -32px rgba(22,39,74,0.30), 0 8px 22px -16px rgba(22,39,74,0.18);
  --sombra-flotante: 0 34px 74px -30px rgba(16,29,58,0.42), 0 12px 30px -18px rgba(16,29,58,0.24);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); background-image:var(--trama);
  color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--navy-950); }
*:focus-visible{ outline:2.5px solid var(--gold-dark); outline-offset:3px; border-radius:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,48px); }

/* ---------- tipografía base ---------- */
.regla{ width:44px; height:3px; background:var(--gold); margin:0 0 1.5rem; border:0; border-radius:2px; }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:.76rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--slate); margin:0 0 .9rem;
}
h1,h2,h3{ font-family:var(--sans); font-weight:700; color:var(--navy-deep); margin:0; letter-spacing:-.02em; line-height:1.07; text-wrap:balance; }
h1{ font-size:clamp(2.6rem,6.2vw,4.4rem); max-width:16ch; }
h2{ font-size:clamp(1.85rem,3.7vw,2.8rem); max-width:22ch; }
h3{ font-size:clamp(1.08rem,1.7vw,1.28rem); letter-spacing:-.006em; line-height:1.3; }
h1 em, h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold-dark); letter-spacing:0; }
p{ margin:0 0 1.1em; }
.lede{ font-family:var(--serif); font-size:clamp(1.12rem,1.5vw,1.34rem); line-height:1.6; max-width:54ch; }
strong{ font-weight:700; color:var(--navy-deep); }

/* ---------- header con glass navy + estado al hacer scroll ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(251,250,247,0.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.nav--scrolled{
  background:rgba(251,250,247,0.9);
  border-bottom-color:var(--line);
  box-shadow:0 14px 34px -24px rgba(22,39,74,0.4);
}
.nav .wrap{ display:flex; align-items:center; gap:14px; height:72px; }
.nav__marca{ flex:none; display:inline-flex; }
.nav__marca img{ height:40px; width:auto; transition:transform .3s var(--ease); }
.nav--scrolled .nav__marca img{ transform:scale(.94); }
.nav__menu{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.nav__links{ display:flex; gap:2px; }
.nav__links a{
  font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; color:var(--slate); padding:8px 10px; border-radius:7px; white-space:nowrap;
  transition:color .18s, background .18s;
}
.nav__links a:hover,.nav__links a:focus-visible{ color:var(--navy-deep); background:rgba(30,49,89,.06); }
.nav__corredores{
  font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); text-decoration:none; white-space:nowrap; padding:4px 2px;
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav__corredores:hover,.nav__corredores:focus-visible{ color:var(--navy); border-color:var(--gold); }
/* Dos copias del link (una adentro del menú mobile, otra junto al CTA en
   desktop) — solo una está visible a la vez según el breakpoint, ver media
   query de abajo. Evita duplicar el link para lectores de pantalla en desktop
   (donde el de --menu quedaría oculto) y viceversa en mobile. */
.nav__corredores--menu{ display:none; }
.nav__cta{ flex:none; display:flex; align-items:center; gap:16px; }
.nav__cta .pill{ padding:9px 16px; font-size:12.5px; }

/* Home: el logo chico de la barra arranca invisible/colapsado (barra más
   centrada) y aparece recién al scrollear — reusa .nav--scrolled, que ya
   togglea el JS compartido de layout.html a los 12px. El logo grande vive en
   el propio hero de inicio.html (.hero__logo-grande). Solo esta página. */
body.pagina-inicio .nav .wrap{ justify-content:center; gap:0; }
body.pagina-inicio .nav--scrolled .wrap{ justify-content:flex-start; gap:14px; }
body.pagina-inicio .nav__marca{
  opacity:0; width:0; overflow:hidden; pointer-events:none;
  transition:opacity .3s ease, width .3s ease;
}
body.pagina-inicio .nav--scrolled .nav__marca{ opacity:1; width:auto; pointer-events:auto; }
body.pagina-inicio .nav__menu{ margin-left:0; }
body.pagina-inicio .nav--scrolled .nav__menu{ margin-left:auto; }

/* Espejado con el logo chico de la barra: mientras el de la barra ENTRA
   (ver regla de arriba), el del hero SALE — mismo trigger (.nav--scrolled,
   ya togglea el scroll listener de layout.html a los 12px) y mismo timing
   .3s, para que se sientan como un solo movimiento, no dos independientes.
   Puro CSS, sin JS nuevo. #nav y <main> son hermanos directos en el DOM. */
body.pagina-inicio .hero__logo-grande{ transition:opacity .3s ease, transform .3s ease; }
body.pagina-inicio .nav--scrolled ~ main .hero__logo-grande{ opacity:0; transform:translateY(-6px); }

.hero__logo-grande{ display:block; height:48px; width:auto; margin-bottom:24px; }
@media (min-width:640px){ .hero__logo-grande{ height:63px; margin-bottom:30px; } }
.nav__toggle{
  display:none; flex:none; width:44px; height:44px; padding:0; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:9px; color:var(--navy-deep); cursor:pointer;
}

/* ---------- botones ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; text-decoration:none; cursor:pointer; border:0;
  font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.015em;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s, color .2s, border-color .2s;
  will-change:transform;
}
.pill svg{ width:16px; height:16px; flex:none; transition:transform .28s var(--ease); }
.pill--gold{ background:var(--gold); color:var(--navy-950); box-shadow:0 14px 32px -14px rgba(201,169,97,.75); }
.pill--gold:hover,.pill--gold:focus-visible{ transform:translateY(-2px) scale(1.03); box-shadow:0 22px 44px -16px rgba(201,169,97,.8); }
.pill--gold:hover svg{ transform:translateX(3px); }
.pill--navy{ background:linear-gradient(180deg, #35548f, var(--navy-deep)); color:#fff; box-shadow:var(--sombra-suave); }
.pill--navy:hover,.pill--navy:focus-visible{ transform:translateY(-2px) scale(1.03); box-shadow:var(--sombra-flotante); }
.pill--navy:hover svg{ transform:translateX(3px); }
.pill--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.32); }
.pill--ghost:hover,.pill--ghost:focus-visible{ border-color:var(--gold); background:rgba(201,169,97,.12); transform:translateY(-2px) scale(1.02); }
.pill--linea{ background:transparent; color:var(--navy-deep); border:1.5px solid var(--line); }
.pill--linea:hover,.pill--linea:focus-visible{ border-color:var(--gold); background:rgba(201,169,97,.09); transform:translateY(-2px) scale(1.02); }
.acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.enlace{
  font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.enlace svg{ width:14px; height:14px; transition:transform .22s var(--ease); }
.enlace:hover svg,.enlace:focus-visible svg{ transform:translateX(5px); }

/* ---------- HERO navy editorial (profundidad, no bloque plano) ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(201,169,97,.18), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(83,116,180,.32), transparent 50%),
    linear-gradient(168deg, #35548f 0%, var(--navy-deep) 42%, var(--navy-950) 100%);
  color:#EEF1F6;
  padding:clamp(72px,11vw,140px) 0 clamp(64px,9vw,116px);
}
/* motivo "recorrido" gigante, sutil, detrás del texto — elemento gráfico de marca, no decoración vacía */
.hero::before{
  content:""; position:absolute; z-index:-1; right:-8%; top:-12%;
  width:min(60vw,620px); aspect-ratio:1; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 61%, rgba(201,169,97,.28) 61.5%, rgba(201,169,97,.28) 63%, transparent 63.5%),
    radial-gradient(circle at 50% 50%, transparent 41%, rgba(255,255,255,.10) 41.5%, rgba(255,255,255,.10) 42.6%, transparent 43%);
  mask:linear-gradient(200deg, #000 20%, transparent 78%);
  -webkit-mask:linear-gradient(200deg, #000 20%, transparent 78%);
}
.hero::after{ /* filo dorado inferior: rima con la regla y la línea del recorrido */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-soft) 50%, var(--gold) 78%, transparent);
}
.hero .eyebrow{ color:rgba(232,237,246,.84); }
.hero .regla{ background:var(--gold); }
.hero h1{ color:#fff; margin:0 0 22px; text-wrap:balance; }
.hero h1 em{ color:var(--gold-soft); }
.hero .lede{ color:rgba(233,238,246,.9); max-width:50ch; }
.hero .lede strong{ color:#fff; }
.hero .acciones{ margin-top:38px; }

/* mosaico de fotos a la derecha del hero de home — 4 rubros, mismo duotono que las páginas internas */
.hero .wrap{ display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:36px; }
.hero__mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:360px; }
.hero__mosaic img{
  width:100%; height:100%; object-fit:cover; border-radius:18px;
  filter:url(#duo) contrast(1.08) brightness(.88); box-shadow:0 18px 36px -18px rgba(0,0,0,.5);
}
.hero__mosaic img:nth-child(2){ margin-top:22px; }
.hero__mosaic img:nth-child(3){ margin-top:-22px; }
@media (max-width:860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero__mosaic{ display:none; }
}

/* ---------- secciones sobre papel ---------- */
.seccion{ padding:clamp(48px,7vw,88px) 0; position:relative; }
.seccion--warm{ background:var(--paper-warm); }
.seccion__cab{ max-width:54ch; margin-bottom:clamp(34px,5vw,54px); }

/* ---------- coberturas: bento asimétrico que llena la grilla, sin huecos ----------
   Fila 1: [Auto ▸ span 2] [Hogar]
   Fila 2: [Comercio] [Garantía] [Vida]
   Fila 3: [Viaje] [Otros seguros ▸ span 2, navy]                        */
.cob-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; grid-auto-rows:1fr; }
.cob{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding:26px 26px 22px; border-radius:16px; text-decoration:none; color:var(--ink);
  background:linear-gradient(168deg, #ffffff, #faf8f2);
  border:1px solid var(--line-soft);
  box-shadow:0 3px 14px -8px rgba(22,39,74,.18);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s;
  overflow:hidden; will-change:transform;
}
.cob::before{ /* hairline dorada arriba, aparece en hover */
  content:""; position:absolute; inset:0 0 auto 0; height:2px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition:transform .34s var(--ease);
}
.cob::after{ /* brillo navy sutil desde abajo, en hover */
  content:""; position:absolute; inset:auto 0 0 0; height:0;
  background:linear-gradient(0deg, rgba(49,78,135,.07), transparent);
  transition:height .32s var(--ease);
}
.cob:hover,.cob:focus-visible{ transform:translateY(-5px); box-shadow:var(--sombra-suave); border-color:var(--line); }
.cob:hover::before,.cob:focus-visible::before{ transform:scaleX(1); }
.cob:hover::after,.cob:focus-visible::after{ height:78px; }
.cob__ico{
  width:66px; height:66px; flex:none; padding:11px; border-radius:14px;
  background:radial-gradient(circle at 40% 35%, rgba(49,78,135,.10), rgba(49,78,135,.045));
  transition:transform .32s var(--ease), background .32s;
}
.cob:hover .cob__ico{ transform:scale(1.06) rotate(-3deg); background:radial-gradient(circle at 40% 35%, rgba(201,169,97,.18), rgba(49,78,135,.05)); }
.cob h3{ font-size:1.22rem; }
.cob p{ margin:0; font-size:14px; color:var(--slate); line-height:1.5; }
.cob__ir{
  margin-top:auto; color:var(--navy); display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding-top:4px;
}
.cob__ir svg{ width:14px; height:14px; transition:transform .22s var(--ease); }
.cob:hover .cob__ir svg{ transform:translateX(4px); }

/* Auto: protagonista — ancho, tipografía más grande, filo dorado permanente + tag */
.cob--feat{
  grid-column:span 2; flex-direction:row; align-items:center; gap:28px; padding:32px;
  border-left:3px solid var(--gold);
  background:linear-gradient(120deg, #ffffff 0%, #fbf7ec 100%);
}
.cob--feat .cob__ico{ width:99px; height:99px; padding:15px; border-radius:20px; }
.cob--feat .cob__body{ display:flex; flex-direction:column; gap:9px; }
.cob--feat .cob__tag{
  font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-dark);
}
.cob--feat h3{ font-size:1.7rem; }
.cob--feat p{ font-size:15px; max-width:44ch; }
.cob--feat .cob__ir{ margin-top:8px; }

/* "Otros seguros" — ahora tile de la grilla (span 2), navy con profundidad */
.cob-todo{
  grid-column:span 2; display:flex; align-items:center; gap:24px; padding:24px 30px;
  border-radius:16px; text-decoration:none; color:rgba(255,255,255,.92);
  background:linear-gradient(140deg, #3a5c99, var(--navy-deep) 62%, var(--navy-900));
  box-shadow:var(--sombra-suave);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.cob-todo:hover,.cob-todo:focus-visible{ transform:translateY(-4px); box-shadow:var(--sombra-flotante); }
.cob-todo strong{ color:#fff; }
.cob-todo__iconos{ display:flex; flex:none; }
.cob-todo__iconos img{ width:44px; height:44px; margin-left:-14px; background:var(--paper); border-radius:50%; box-shadow:0 0 0 2px var(--navy-deep); }
.cob-todo__iconos img:first-child{ margin-left:0; }
.cob-todo__txt{ flex:1; font-size:14.5px; line-height:1.5; }
.cob-todo .cob__ir{ color:var(--gold); flex:none; margin:0; padding:0; }

/* ---------- "Por qué con nosotros": encabezado a la izq, recorrido a la der ---------- */
.porque{ display:grid; grid-template-columns:minmax(0,25rem) 1fr; gap:clamp(36px,6vw,80px); align-items:start; }
.porque__cab{ position:sticky; top:104px; margin:0; max-width:none; }
.porque__cab h2{ max-width:14ch; }

/* ---------- FIRMA: el recorrido ---------- */
.recorrido{ position:relative; padding-left:44px; }
.recorrido::before{
  content:""; position:absolute; left:11px; top:8px; bottom:14px; width:2px;
  background:linear-gradient(180deg, var(--gold), rgba(201,169,97,.15));
  transform-origin:top; transform:scaleY(var(--linea,1));
  transition:transform 1s var(--ease);
}
.parada{ position:relative; padding:0 0 clamp(30px,4.5vw,44px); }
.parada:last-child{ padding-bottom:0; }
.parada::before{
  content:""; position:absolute; left:-38px; top:4px; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:2px solid var(--navy-deep); box-shadow:0 0 0 5px var(--paper);
}
.parada--meta::before{ background:var(--gold); border-color:var(--gold-dark); }
.parada__tramo{ font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-dark); display:block; margin-bottom:7px; }
.parada h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.24rem,2.1vw,1.58rem); letter-spacing:-.005em; color:var(--navy-deep); margin-bottom:8px; }
.parada--meta h3{ font-family:var(--sans); font-weight:700; }
.parada p{ font-family:var(--serif); color:var(--ink); max-width:58ch; margin:0; }

/* .cta (cinta de cierre) — la sección navy la provee .seccion--navy, más abajo.
   Acá solo el layout centrado. Ver bloque "PÁGINAS DE COBERTURA". */

/* ---------- footer ---------- */
.pie{ background:var(--navy-950); color:rgba(255,255,255,.62); padding:clamp(32px,4vw,44px) 0 28px; font-size:13.5px; background-image:var(--trama); background-blend-mode:soft-light; }
.pie__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12); }
.pie h4{ font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
.pie a{ color:rgba(255,255,255,.78); text-decoration:none; transition:color .18s; }
.pie a:hover,.pie a:focus-visible{ color:var(--gold); }
.pie__links{ display:flex; flex-direction:column; gap:9px; }
.pie__marca img{ height:40px; margin-bottom:14px; }
.pie__marca p{ max-width:42ch; }
.pie__contacto p{ margin:0 0 8px; }
.pie__social{ display:flex; gap:11px; margin-top:8px; }
.pie__social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s, transform .2s var(--ease); }
.pie__social a:hover,.pie__social a:focus-visible{ border-color:var(--gold); transform:translateY(-2px); }
.pie__social svg{ width:16px; height:16px; }
.pie__abajo{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:22px; font-size:11.5px; letter-spacing:.03em; color:rgba(255,255,255,.42); }
.pie__abajo a{ color:rgba(255,255,255,.42); text-decoration:underline; text-underline-offset:2px; }

/* ═══════════ PÁGINAS DE COBERTURA (auto, hogar, comercio, garantía, vida, viaje, otros) ═══════════ */

.prosa{ font-family:var(--serif); max-width:62ch; color:var(--ink); }
.prosa p{ margin:0 0 1em; }
.prosa a, .lede a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold); }
.enlace-mail{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold); }

/* hero de cobertura: texto izq + foto a sangrado der en DUOTONO navy→crema.
   La foto sangra al borde derecho, se funde en el papel por la izquierda,
   filo dorado en la unión. En navegadores sin filtro SVG, fallback a tinte navy. */
.hero-cob{
  display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch;
  background:linear-gradient(120deg, var(--paper-warm) 0%, #efe9db 100%);
  border-bottom:1px solid var(--line);
  min-height:clamp(380px,46vw,500px); overflow:hidden; position:relative;
}
.hero-cob__col{
  display:flex; align-items:center;
  padding:clamp(48px,6vw,80px) clamp(28px,4vw,56px) clamp(48px,6vw,80px)
          max(clamp(20px,5vw,48px), calc((100vw - var(--wrap)) / 2 + clamp(20px,5vw,48px)));
}
.hero-cob__ico{
  width:64px; height:64px; margin-bottom:18px; padding:11px; border-radius:16px;
  background:radial-gradient(circle at 40% 35%, rgba(49,78,135,.12), rgba(49,78,135,.05));
}
.hero-cob__txt h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); }
.hero-cob__fig{ position:relative; margin:0; background:var(--navy-deep); }
.hero-cob__fig img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:url(#duo) contrast(1.08) brightness(.92);
}
@supports not (filter: url(#duo)){
  .hero-cob__fig img{ filter:grayscale(1) contrast(1.1) brightness(.85); }
}
/* capa navy: que la foto lea como imagen de marca navy, no como crema lavada */
.hero-cob__fig::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, #efe9db 0%, rgba(239,233,219,.4) 8%, transparent 24%),
    linear-gradient(115deg, rgba(24,42,78,.42) 12%, rgba(24,42,78,.12) 55%, rgba(24,42,78,.34) 100%);
}
.hero-cob__fig::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-left:3px solid var(--gold);
  box-shadow:inset 0 -80px 80px -55px rgba(16,29,58,.6);
}
.hero-cob__credito{ position:absolute; right:10px; bottom:8px; z-index:4; font-family:var(--sans); font-size:10px; color:rgba(245,240,228,.9); background:rgba(20,32,58,.5); padding:3px 8px; border-radius:4px; }
.hero-cob__credito a{ color:inherit; text-decoration:underline; }

/* dos columnas (adicionales + qué tenemos en cuenta / form + WhatsApp) */
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:start; }
.dos-col--form{ grid-template-columns:1.45fr 1fr; }

/* contacto: hero más compacto (poco contenido) + aside con panel para que el
   espacio libre lea como "columna secundaria", no como vacío */
.hero--compacto{ padding-bottom:clamp(40px,5vw,60px); }
.contacto-aside{
  background:linear-gradient(165deg, rgba(49,78,135,.055), rgba(49,78,135,.02));
  border:1px solid var(--line-soft); border-radius:18px; padding:clamp(24px,3vw,32px);
  position:sticky; top:100px;
}
.contacto-aside .regla{ margin-bottom:1.1rem; }
@media (max-width:860px){ .contacto-aside{ position:static; } }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }
.chip{
  font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--navy-deep);
  background:linear-gradient(180deg,#fff,#fbf8f1); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  box-shadow:0 2px 8px -6px rgba(22,39,74,.2);
}

/* datos: cuadrícula con filo dorado arriba de cada uno */
.datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px 30px; margin-top:8px; }
.dato{ border-top:2px solid var(--gold); padding-top:14px; }
.dato h3{ font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:.01em; margin:0 0 5px; }
.dato p{ font-family:var(--sans); font-size:14px; color:var(--slate); margin:0; line-height:1.5; }

/* mini-grilla de íconos (otros seguros) */
.mini-iconos{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; align-items:flex-start; }
.mini-icono{ display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; text-align:center; }
.mini-icono img{
  width:58px; height:58px; padding:9px; border-radius:15px;
  background:radial-gradient(circle at 40% 35%, rgba(49,78,135,.09), rgba(49,78,135,.04));
  transition:transform .3s var(--ease), background .3s;
}
.mini-icono img:hover{ transform:translateY(-4px) scale(1.05); background:radial-gradient(circle at 40% 35%, rgba(201,169,97,.18), rgba(49,78,135,.05)); }
.mini-icono__label{ font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.03em; color:var(--slate); line-height:1.25; }

/* sección navy (CTA de cierre en las páginas de cobertura) — mismo gradiente que la home */
.seccion--navy{
  position:relative; overflow:hidden; color:#EEF1F6;
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(201,169,97,.16), transparent 60%),
    linear-gradient(180deg, var(--navy-deep), var(--navy-950));
}
.seccion--navy::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); }
.seccion--navy h2, .seccion--navy h3{ color:#fff; }
.seccion--navy .eyebrow{ color:rgba(232,237,246,.72); }
.seccion--navy .prosa, .seccion--navy .lede{ color:rgba(233,238,246,.9); }
.seccion--navy strong{ color:#fff; }
.seccion--navy .pill--linea{ color:#fff; border-color:rgba(255,255,255,.3); }
.seccion--navy .pill--linea:hover,.seccion--navy .pill--linea:focus-visible{ border-color:var(--gold); background:rgba(201,169,97,.14); }

.cta{ text-align:center; max-width:640px; margin:0 auto; }
.cta .regla{ margin:0 auto 1.4rem; }
.cta h2{ margin:0 auto 14px; }
.cta p{ max-width:44ch; margin:0 auto 26px; font-family:var(--serif); }
.cta .acciones{ justify-content:center; margin-top:0; }

/* formulario (contacto) */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo--full{ grid-column:1/-1; }
.campo-check{ display:flex; align-items:center; gap:9px; grid-column:1/-1; }
.campo[hidden],.campo-check[hidden]{ display:none; }
.campo-check input{ width:18px; height:18px; flex:none; }
.campo-check label{ font-family:var(--sans); font-size:14px; color:var(--ink); }
/* form-nota puede quedar como <p> suelto DENTRO de .form (grid) en el form
   unificado — que ocupe todo el ancho igual que .campo--full. */
p.form-nota.campo--full{ grid-column:1/-1; }
.campo label{ font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--navy-deep); }
.campo input,.campo select,.campo textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; width:100%;
  transition:border-color .18s, box-shadow .18s;
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:0; border-color:var(--gold-dark); box-shadow:0 0 0 4px rgba(201,169,97,.16); }
.form-nota{ font-family:var(--sans); font-size:12.5px; color:var(--slate); margin:14px 0 0; }

/* indicador de paso — solo Auto, único ramo partido en 2 pantallas */
.pasos-ind{ display:flex; align-items:center; gap:10px; margin-bottom:20px; font-family:var(--sans); }
.pasos-ind__paso{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--slate); }
.pasos-ind__num{ width:24px; height:24px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--paper-warm); border:1.5px solid var(--line); font-size:12px; color:var(--slate); }
.pasos-ind__paso.activo{ color:var(--navy-deep); }
.pasos-ind__paso.activo .pasos-ind__num{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }
.pasos-ind__paso.hecho .pasos-ind__num{ background:var(--gold); border-color:var(--gold); color:var(--navy-950); }
.pasos-ind__linea{ flex:1; height:1.5px; background:var(--line); max-width:40px; }
.form-estado{ font-family:var(--sans); font-size:14px; font-weight:600; margin-top:14px; padding:12px 15px; border-radius:11px; display:none; }
.form-estado.ok{ display:block; background:rgba(31,143,76,.1); color:#166534; border:1px solid rgba(31,143,76,.28); }
.form-estado.err{ display:block; background:rgba(190,40,40,.09); color:#a1201f; border:1px solid rgba(190,40,40,.28); }
.hp{ position:absolute; left:-9999px; }

/* ---------- MOTION: entrada al scroll (opt-in por JS) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js-anim .reveal,
  .js-anim .parada,
  .js-anim .seccion__cab:not(.porque__cab){ opacity:0; transform:translateY(22px); }
  .js-anim .reveal.visible,
  .js-anim .parada.visible,
  .js-anim .seccion__cab.visible{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .js-anim .porque__cab{ opacity:0; transform:translateY(22px); }
  .js-anim .porque__cab.visible{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .js-anim .reveal-stagger > *{ opacity:0; transform:translateY(20px); }
  .js-anim .reveal-stagger.visible > *{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .js-anim .reveal-stagger.visible > *:nth-child(2){ transition-delay:.06s; }
  .js-anim .reveal-stagger.visible > *:nth-child(3){ transition-delay:.12s; }
  .js-anim .reveal-stagger.visible > *:nth-child(4){ transition-delay:.18s; }
  .js-anim .reveal-stagger.visible > *:nth-child(5){ transition-delay:.24s; }
  .js-anim .reveal-stagger.visible > *:nth-child(6){ transition-delay:.30s; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .recorrido::before{ transform:none !important; }
}

/* ---------- responsive: mobile / tablet / desktop con intención ---------- */
/* tablet: el nav completo ya no entra cómodo → hamburguesa; bento a 2 col */
@media (max-width:1000px){
  .nav__menu{ display:none; position:absolute; left:0; right:0; top:72px; background:var(--paper); border-bottom:1px solid var(--line); padding:10px 0 16px; box-shadow:0 18px 34px -22px rgba(22,39,74,.35); }
  .nav__menu.abierto{ display:block; }
  .nav__menu .nav__links{ flex-direction:column; gap:0; padding:0 clamp(20px,5vw,48px); }
  .nav__menu .nav__links a{ padding:13px 0; font-size:12.5px; }
  .nav__corredores--top{ display:none; }
  .nav__corredores--menu{ display:inline-flex; margin:12px clamp(20px,5vw,48px) 0; }
  .nav__toggle{ display:inline-flex; order:3; }
  .nav__cta{ order:2; margin-left:auto; }
  .nav__marca{ order:1; }
  /* Header a 3 elementos (logo + CTA + hamburguesa) en un ancho angosto —
     achica gap y el CTA lo justo para que entren los tres sin scroll
     horizontal, sin sacar ninguno (ver ANALISIS-QA 28/09/2026 #1). */
  .nav .wrap{ gap:10px; }
  .nav__cta .pill{ padding:11px 14px; font-size:12px; gap:6px; min-height:44px; }
}
/* Debajo de este ancho el logo + el CTA + la hamburguesa ya no entran ni
   achicando el CTA solo — se reduce también el logo del header (no el del
   hero de home, ese es aparte). */
@media (max-width:400px){
  .nav__marca img{ height:27px; }
  .nav .wrap{ gap:6px; }
  .nav__cta .pill{ padding:10px 11px; font-size:11px; gap:4px; min-height:44px; }
}
@media (max-width:1000px){
  .porque{ grid-template-columns:1fr; gap:30px; }
  .porque__cab{ position:static; }

  .cob-bento{ grid-template-columns:1fr 1fr; }
  .cob--feat{ grid-column:span 2; }
  .cob-todo{ grid-column:span 2; }

  .dos-col{ grid-template-columns:1fr; gap:34px; }
}
/* hero de cobertura: apila foto arriba / texto abajo apenas la foto queda muy angosta */
@media (max-width:860px){
  .hero-cob{ grid-template-columns:1fr; min-height:0; }
  .hero-cob__fig{ order:-1; height:clamp(220px,44vw,320px); }
  .hero-cob__fig::before{ background:linear-gradient(0deg, #efe9db, transparent 22%); }
  .hero-cob__fig::after{ border-left:0; border-bottom:3px solid var(--gold); box-shadow:none; }
  .hero-cob__col{ padding:clamp(30px,6vw,46px) clamp(20px,5vw,48px); }
}
/* mobile: bento a 1 col; el tile "Auto" deja de ser horizontal; hero sin motivo lateral */
@media (max-width:640px){
  body{ font-size:16px; }
  .hero::before{ display:none; }
  .hero .acciones .pill{ width:100%; }               /* CTAs full-width, más fáciles de tocar */
  .cob-bento{ grid-template-columns:1fr; }
  .cob--feat{ grid-column:span 1; flex-direction:column; align-items:flex-start; gap:15px; padding:24px; }
  .cob--feat .cob__ico{ width:76px; height:76px; }
  .cob--feat h3{ font-size:1.36rem; }
  .cob-todo{ grid-column:span 1; flex-wrap:wrap; gap:14px; }
  .cob-todo__txt{ flex:1 1 100%; }
  .pie__top{ grid-template-columns:1fr; gap:26px; }
  .recorrido{ padding-left:34px; }
  .parada::before{ left:-30px; }
  .form{ grid-template-columns:1fr; }
  .seccion--navy .acciones .pill{ width:100%; }
}