/* ============================================================
   GOLD STAR INSURANCE — SISTEMA DE DISEÑO
   Tokens de marca. Cambiar aquí propaga a todo el sitio.
   ============================================================ */
:root{
  /* Color de marca */
  --navy:#133c5c;
  --navy-900:#0b2537;
  --navy-800:#0f3049;
  --navy-600:#1c5178;
  --red:#691922;
  --red-600:#83232f;
  --sky:#b5c7d1;
  --sky-100:#e3ebef;
  --sky-50:#f0f5f7;
  --grey:#f6f6f6;
  --white:#fff;
  --gold-1:#c8992d;
  --gold-2:#fbde8e;
  --gold-grad:linear-gradient(120deg,#c8992d 0%,#fbde8e 55%,#c8992d 100%);

  /* Texto */
  --ink:#12283a;
  --body:#41576a;
  --muted:#6b8091;
  --line:#e2e9ee;

  /* Tipografía: --font-display es el único punto de cambio si el
     cliente prefiere Schibsted Grotesk también para titulares. */
  --font-display:'Outfit', 'Schibsted Grotesk', -apple-system, Arial, sans-serif;
  --font-sans:'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --r-sm:8px; --r:14px; --r-lg:22px;
  --sh-1:0 2px 8px rgba(19,60,92,.06);
  --sh-2:0 10px 30px rgba(19,60,92,.10);
  --sh-3:0 24px 60px rgba(19,60,92,.16);
  --wrap:1180px;
  --pad:clamp(64px,7.5vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--font-sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;line-height:1.14;font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2.35rem,4.6vw,3.65rem)}
h2{font-size:clamp(1.85rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.28}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--gold-1);outline-offset:3px;border-radius:4px}

/* ---------- Utilidades de layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:var(--pad) 0}
.sec--tight{padding:calc(var(--pad)*.62) 0}
.bg-grey{background:var(--grey)}
.bg-sky{background:var(--sky-50)}
.bg-navy{background:var(--navy);color:#cfe0ea}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}
.bg-red{background:var(--red);color:#f0d8db}
.bg-red h1,.bg-red h2,.bg-red h3{color:#fff}
.center{text-align:center}
.mw-60{max-width:60ch}
.mw-70{max-width:70ch}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---------- Eyebrow + encabezados de sección ---------- */
.eyebrow{
  font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-1);
  margin:0 0 14px;display:flex;align-items:center;gap:9px;
}
/* Dos formas de centrarlo: con .center en un ancestro, o con .center en el propio epígrafe.
   El epígrafe es flex, así que `text-align` no lo mueve: hay que actuar sobre justify-content. */
.center .eyebrow,.eyebrow.center{justify-content:center}
.bg-navy .eyebrow,.bg-red .eyebrow{color:var(--gold-2)}
.lead{font-size:1.09rem;color:var(--body);max-width:62ch}
.bg-navy .lead,.bg-red .lead{color:inherit;opacity:.92}
.sec-head{margin-bottom:clamp(34px,4vw,54px)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--font-sans);font-weight:700;font-size:.97rem;
  padding:15px 26px;border-radius:10px;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s;
  text-align:center;line-height:1.2;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold-grad);background-size:180% 100%;color:var(--navy-900);box-shadow:0 6px 18px rgba(200,153,45,.32)}
.btn-gold:hover{background-position:100% 0;box-shadow:0 10px 26px rgba(200,153,45,.42)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-600)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-600)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-wa{background:#25d366;color:#0a2e17}
.btn-sm{padding:11px 18px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--red);font-size:.93rem}
.link-arrow svg{width:15px;height:15px;transition:transform .2s}
.link-arrow:hover svg{transform:translateX(4px)}
.bg-navy .link-arrow{color:var(--gold-2)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:900;background:var(--red);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 2px 14px rgba(105,25,34,.18)}
.hdr-in{display:flex;align-items:center;gap:26px;height:74px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* Logotipo oficial (estrella + palabra), un solo PNG. El alto manda; el ancho lo pone la
   proporción del archivo. El texto del logo es blanco, así que solo funciona sobre los
   fondos oscuros del menú y del pie. */
.logo{display:flex;align-items:center;flex:none}
/* El alto manda y el ancho lo pone la proporción del archivo (929 × 237 ≈ 3,9:1). Si se
   cambia el logo por uno de proporción distinta, revisa este alto y el de .ftr .logo img:
   con un bloque más ancho, el mismo alto se come el espacio del menú y el de su columna
   en el pie. */
.logo img{display:block;height:50px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
/* El anclaje va en cada pieza del menú y no en «los hijos de .nav»: desde que los enlaces
   viven dentro de .nav-links ya no son hijos directos. Sin esto, lo que se posiciona respecto
   a ellos se posicionaba respecto al grupo entero: el desplegable salía centrado sobre los
   tres enlaces en vez de sobre su botón, y el subrayado del ítem activo se estiraba de punta
   a punta del grupo en vez de quedarse bajo su enlace. */
.has-drop,.nav .navlink{position:relative}
.nav>*{position:relative}
.nav a.navlink,.nav button.navlink{
  background:none;border:0;display:flex;align-items:center;gap:5px;
  padding:10px 13px;border-radius:8px;font-size:.93rem;font-weight:600;color:#fff;
}
.nav a.navlink:hover,.nav button.navlink:hover{background:rgba(255,255,255,.14);color:#fff}
.nav .is-current{color:var(--gold-2)}
.nav .is-current::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--gold-grad);border-radius:2px}
.caret{width:11px;height:11px;transition:transform .2s}
.has-drop[data-open="1"] .caret{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);
  padding:10px;min-width:280px;opacity:0;visibility:hidden;transition:.2s;
}
.has-drop[data-open="1"] .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:10px;font-size:.92rem;font-weight:600;color:var(--ink)}
.drop a:hover{background:var(--sky-50);color:var(--navy)}
.drop a svg{width:20px;height:20px;color:var(--red);flex:none}
/* La separación del botón de cita respecto al resto del menú. Estaba puesta en un `style` en
   línea del HTML, pero ahí ganaba a todo y en el panel móvil desbordaba el ancho por esos
   mismos 12 px, sacando una barra de desplazamiento horizontal. */
.hdr .btn{padding:12px 20px;font-size:.9rem}

/* Piezas que solo existen en el panel móvil: la cabecera con logo y aspa, el velo que
   oscurece la página detrás, y las redes del pie del panel. En escritorio, fuera. */
/* .nav-redes lleva también la clase .socials para heredar el aspecto del pie, y esa regla
   trae su propio display:flex. Por eso aquí va con un selector más pesado que el suyo. */
.nav-cab,.nav-velo{display:none}
.nav .nav-redes{display:none}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.38);border-radius:9px;padding:9px 11px;margin-left:auto}
.burger svg{width:20px;height:20px;display:block;color:#fff}

/* ---------- Hero home ---------- */
.hero{position:relative;background:var(--navy);color:#d3e2ec;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% 12%,rgba(28,81,120,.85),transparent 62%),
    radial-gradient(600px 400px at 0% 100%,rgba(105,25,34,.42),transparent 60%);
}
.stars{position:absolute;inset:0;opacity:.13;pointer-events:none}

/* Video de fondo. Mismo tratamiento que las fotos de las páginas internas: ocupa la mitad
   derecha, sangra hasta el borde de la pantalla y se funde por la izquierda con el navy del
   hero. No se lee como un recuadro pegado sino como parte del propio fondo, y la mitad
   izquierda queda limpia para el titular.
   El póster va como fondo del contenedor: se ve mientras el video carga y es lo que queda
   si el navegador no reproduce en automático o si el usuario pidió menos animación. */
/* Mismo enfoque que en .phero-art: el fundido se hace con máscara sobre el propio video, no
   con un velo encima, para que el degradado no se re-mezcle en cada scroll. Aquí la máscara no
   llega a opacidad total por la derecha: el metraje es muy claro y sin ese resto de
   transparencia el lado derecho se despegaría del azul de la sección.
   z-index:1 lo sube por encima de .hero::after, para que los degradados radiales decorativos
   del hero tiñan solo el fondo y no vuelvan a mezclarse sobre el video. */
.hero-media{position:absolute;top:0;right:0;bottom:0;left:44%;z-index:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 14%,rgba(0,0,0,.26) 32%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.7) 74%,rgba(0,0,0,.76) 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 14%,rgba(0,0,0,.26) 32%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.7) 74%,rgba(0,0,0,.76) 100%)}
/* El 64% horizontal no es un número redondo por casualidad: el metraje es 16:9 y este panel es
   más alto que ancho, así que `cover` recorta bastante por los lados. La asesora está a la
   derecha del encuadre original, y centrando el recorte se quedaba pegada al borde en escritorio
   y con media cara fuera en móvil, donde la ventana visible es mucho más estrecha. Desplazándolo
   a 64% entra ella entera y además cabe el letrero de la pared. Si se cambia el video, hay que
   volver a mirar este número. */
.hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:64% 32%}
/* Sustituido por la máscara de .hero-media. Se conserva un tinte PLANO, sin degradado: un
   color liso no tiene tramado que baile al re-rasterizar, así que no reintroduce el parpadeo,
   y mantiene el metraje dentro de la gama azul de la sección. */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(19,60,92,.18);mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){
  .hero-media{background:url(../img/home-hero-poster.jpg) 64% 32%/cover no-repeat}
  .hero-media video{display:none}
}
/* A una columna no queda mitad libre donde ponerlo: el video pasa a fondo completo y el velo
   se vuelve mucho más opaco, así sigue leyéndose como textura sin restarle contraste al
   titular, que ahora le pasa por encima. */
@media (max-width:900px){
  .hero-media{left:0;-webkit-mask-image:none;mask-image:none}
  /* A pantalla completa el texto pasa por encima del video: aquí sí hace falta un velo fuerte,
     pero plano, para no reintroducir el parpadeo del degradado. */
  /* El z-index y el translateZ NO son adorno: sin ellos el velo no se ve hasta el primer
     scroll. El navegador promociona el <video> a su propia capa de composición y, mientras
     nada obligue a recalcular el árbol de capas, la pinta POR ENCIMA de este pseudoelemento,
     que no está promocionado. Al abrir la página el titular quedaba sobre el video a plena luz
     y solo se oscurecía al desplazarse un poco, que es lo que dispara el recálculo. El
     translateZ(0) saca el velo a su propia capa y el z-index fija el orden, así que los dos se
     componen bien desde el primer fotograma.
     A los otros heros con video no les pasa porque no dependen solo del velo: bajan además el
     brillo del propio metraje con un filter, que va en la capa del video y no puede quedarse
     debajo de nada. */
  .hero-media::after{background:rgba(11,34,52,.86);mix-blend-mode:normal;
    z-index:1;transform:translateZ(0)}
}

.hero-in{position:relative;z-index:2;display:flex;align-items:center;min-height:clamp(440px,54vh,580px);
  max-width:var(--wrap);margin:0 auto;padding:clamp(56px,7vw,92px) 24px clamp(96px,9vw,128px)}
.hero-copy{max-width:min(620px,100%)}
.hero h1{color:#fff;font-size:clamp(2.5rem,4.7vw,3.75rem)}
.hero .sub{font-size:1.13rem;max-width:47ch;margin:20px 0 30px;color:#c5d8e4}
/* Los tres en una sola fila. Con align-items:flex-start los iconos quedan alineados entre sí
   aunque un texto ocupe una línea y el de al lado dos. */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 24px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(181,199,209,.22)}
.badge{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;font-weight:600;color:#cfe1ec}
.badge svg{width:19px;height:19px;color:var(--gold-2);flex:none;margin-top:1px}

/* ---------- Servicios del home: lista enlazada junto a la foto ----------
   En media columna las cinco tarjetas verticales dejarían al texto en 90 px de ancho. Como
   filas, cada servicio conserva su nombre y su descripción, y la fila entera es el enlace. */
.svc-list{display:grid;gap:12px}
.svc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
  transition:border-color .22s,box-shadow .22s,transform .22s}
.svc-row:hover{border-color:transparent;box-shadow:var(--sh-2);transform:translateX(5px)}
.svc-ic{display:block;width:52px;height:52px;flex:none}
.svc-ic img{display:block;width:100%;height:100%}
.svc-txt b{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:600;
  color:var(--ink);margin-bottom:2px;line-height:1.3}
.svc-txt>span{display:block;font-size:.88rem;color:var(--muted);line-height:1.5}
.svc-arrow{width:18px;height:18px;color:var(--red);flex:none;transition:transform .22s}
.svc-row:hover .svc-arrow{transform:translateX(4px)}
/* En móvil la flecha sobra: la fila entera ya es el enlace y el ancho hace falta. */
@media (max-width:620px){
  .svc-row{grid-template-columns:auto minmax(0,1fr);gap:15px;padding:15px 17px}
  .svc-arrow{display:none}
  .svc-ic{width:46px;height:46px}
}

/* Enlace a las redes donde se publican los videos. Cada botón lleva el color de su plataforma
   en el icono y el borde, no en el fondo: en fondo pleno competirían con el CTA dorado. */
.redes-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.redes-cta>span{font-size:.9rem;font-weight:600;color:var(--muted);margin-right:2px}
.red-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;font-size:.92rem;font-weight:700;color:var(--navy);
  transition:border-color .2s,color .2s,transform .2s,box-shadow .2s}
.red-btn svg{width:19px;height:19px;flex:none}
.red-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
.red-btn--ig svg{color:#c9338c}
.red-btn--ig:hover{border-color:#c9338c;color:#c9338c}
.red-btn--tt svg{color:#111}
.red-btn--tt:hover{border-color:#111;color:#111}

/* Placeholder de foto — sustituir por imagen real */
.ph{position:relative;background:linear-gradient(135deg,var(--sky-100),var(--sky));border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--navy);
  min-height:280px;overflow:hidden;text-align:center;padding:26px}
.ph::after{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(19,60,92,.28);border-radius:calc(var(--r-lg) - 6px);pointer-events:none}
.ph svg{width:34px;height:34px;opacity:.5}
.ph small{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72;max-width:26ch;line-height:1.5}
.ph--dark{background:linear-gradient(135deg,var(--navy-600),var(--navy-900));color:var(--sky)}
.ph--dark::after{border-color:rgba(181,199,209,.3)}

/* ---------- Reel vertical ----------
   Los videos se graban para Instagram y TikTok, así que llegan en 9:16. Se muestran con su
   proporción original —enmarcados como un teléfono— en vez de recortarlos a un hueco
   horizontal, que le comería la cabeza y los subtítulos quemados. */
.reel{width:min(320px,100%);margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-900);box-shadow:0 18px 44px rgba(19,60,92,.22);line-height:0}
.reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
@media (max-width:900px){.reel{width:min(288px,100%)}}

/* ---------- Retrato de fundadores (nuestra-historia.html) ---------- */
/* Espejo del tratamiento del home: la foto sale del contenedor hasta el borde derecho de la
   pantalla y se funde por la izquierda con el rojo de la sección. El overflow de .founders
   evita que el desborde genere barra horizontal. */
.founders{overflow:hidden}
/* Anula el padding vertical de .sec para que la foto llegue al alto completo de la sección:
   con cortes arriba y abajo se seguiría viendo como una foto pegada, no como el mismo fondo. */
/* Sangra por la IZQUIERDA: la sección de apertura de la página ya lleva su foto a la derecha,
   y si las dos caen del mismo lado la página se lee como una sola columna de imágenes. Al
   cambiar de lado hay que mover el margen negativo y girar el degradado 180°. */
.founders-media{position:relative;min-height:420px;overflow:hidden;background:var(--red);
  align-self:stretch;margin-top:calc(-1 * var(--pad));margin-bottom:calc(-1 * var(--pad));
  margin-left:calc(-1 * ((100vw - min(var(--wrap),100vw))/2 + 24px))}
.founders-media img{display:block;width:100%;height:100%;position:absolute;inset:0;
  object-fit:cover;object-position:center 20%}
.founders-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(105,25,34,0) 28%,
    rgba(105,25,34,.16) 48%,
    rgba(105,25,34,.44) 66%,
    rgba(105,25,34,.72) 80%,
    rgba(105,25,34,.92) 91%,
    var(--red) 100%)}
/* Se coloca a la izquierda con `order`, no cambiando el orden del HTML: en una columna la foto
   tiene que seguir yendo DEBAJO del texto, que es para lo que está hecho el degradado móvil. */
@media (min-width:901px){
  .founders-media{order:-1}
}

/* ---------- Franja aseguradoras ---------- */
.carriers{max-width:var(--wrap);margin:-58px auto 0;padding:0 24px;position:relative;z-index:5}
.carriers-in{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);border:1px solid var(--line);
  padding:26px 34px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}
.carriers-in p{margin:0;font-size:.86rem;font-weight:700;color:var(--navy);max-width:150px;line-height:1.35}
.carrier{font-weight:800;font-size:1.05rem;color:#8fa4b3;letter-spacing:-.01em;filter:grayscale(1);opacity:.85;transition:.25s}
.carrier:hover{filter:none;opacity:1;color:var(--navy)}

/* Variante de una sola frase, mientras no haya logotipos de aseguradoras.
   Sigue la referencia del cliente: banda en el rojo de marca con borde dorado, la estrella del
   logotipo en su medallón a la izquierda y la frase en una sola línea.
   Va en rojo y no en dorado a propósito: la franja cae justo debajo del botón «Agenda una
   asesoría», que es dorado, y una placa dorada de este tamaño se lo comía. El rojo es el otro
   color de la marca —el de la cabecera— y deja el dorado como la señal de «pulsa aquí».
   El fondo es un rojo liso con un degradado muy suave, sin textura: la versión con franjas
   diagonales se probó y ensuciaba la frase. */
.carriers--frase .carriers-in{
  background:linear-gradient(118deg,#5c151d 0%,var(--red) 46%,#7a2029 100%);
  border:2px solid var(--gold-1);
  gap:clamp(16px,1.8vw,24px);
  padding:clamp(16px,2vw,22px) clamp(22px,3vw,36px);
  flex-wrap:nowrap}
/* El medallón. El aspect-ratio mantiene el círculo redondo aunque el texto de al lado crezca.
   Nada de fill aquí: #i-shield es un símbolo de trazo y trae fill="none" como atributo de
   presentación, que un fill en CSS pisaría dejando el escudo macizo. Con el color basta. */
.cob-ic{flex:none;display:grid;place-items:center;
  width:clamp(42px,4.2vw,54px);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--gold-1);color:var(--gold-2)}
.cob-ic svg{width:54%;height:54%}
.carriers--frase .carriers-in p{max-width:none;text-align:left;color:#fff;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.5vw,1.85rem);line-height:1.15}
.carriers--frase .carriers-in .accent{color:var(--gold-2)}
/* En el móvil el medallón se va. Ahí la frase no cabe de una línea por mucho que se encoja, y
   con el círculo encima de un texto de dos líneas la banda se volvía un bloque alto con un
   adorno flotando. Sin él queda una tira limpia con el texto centrado. De 560 px para arriba sí
   entra todo en una línea, así que el medallón se queda. */
@media (max-width:560px){
  .carriers--frase .cob-ic{display:none}
  .carriers--frase .carriers-in{justify-content:center}
  .carriers--frase .carriers-in p{text-align:center}
}

/* ---------- Grillas y tarjetas ---------- */
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
/* Sección del mapa: 40% texto / 60% mapa. En fr y no en %, para que el reparto se haga sobre
   el espacio que queda tras el gap; con 40%/60% la suma se pasaría de 100. */
.split--map{grid-template-columns:2fr 3fr}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;transition:.24s;position:relative}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--sky)}
.card h3{margin-bottom:9px}
.card p{font-size:.94rem;color:var(--body)}
.ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;background:var(--navy);color:#fff}
.ico svg{width:24px;height:24px}
.ico--red{background:var(--red)}
.ico--gold{background:var(--gold-grad);color:var(--navy-900)}
.ico--soft{background:var(--sky-100);color:var(--navy)}
/* Iconos de servicios del home: la imagen ya trae el círculo de color, así que el contenedor
   no aporta fondo ni forma propia. Va después de .ico para anular su background. */
.ico--img{width:64px;height:64px;background:none;border-radius:0}
.ico--img img{display:block;width:100%;height:100%}
.card .link-arrow{margin-top:16px}

/* Tarjeta de servicio del home */
.svc{display:flex;flex-direction:column}
.svc p{flex:1}

/* Razones (por qué elegirnos) */
.reason{position:relative;text-align:center;padding:26px 16px;border-radius:var(--r);transition:.24s;border:1px solid transparent}
.reason:hover{background:#fff;border-color:var(--line);box-shadow:var(--sh-1)}
.reason svg{width:34px;height:34px;color:var(--gold-1);margin-bottom:14px}
.reason b{display:block;font-size:.95rem;color:var(--navy);margin-bottom:7px;font-weight:700}

/* Línea divisoria vertical, centrada en el gap de 22px de la rejilla. Se dibuja con un
   pseudoelemento y no con border-left porque el borde propio de la tarjeta ya lo usa el hover. */
.reason::before{content:"";position:absolute;left:-11px;top:18px;bottom:18px;width:1px;background:var(--line)}
/* Se oculta en el primer elemento de cada fila, que cambia con el número de columnas de .g-6.
   Los índices van enumerados: son solo 6 tarjetas y así cada corte se lee de un vistazo.
   Todos los selectores tienen la misma especificidad, así que manda el orden del archivo. */
.reason:nth-child(1)::before{display:none}                       /* 6 columnas: filas [1..6] */

.reason span{font-size:.85rem;color:var(--muted);line-height:1.5;display:block}

/* Volteo en hover: el frente lleva icono y título, el dorso solo la descripción. El dorso está
   en posición absoluta, así que no cuenta para el alto: la tarjeta mide lo que mide el frente
   y no queda el hueco vacío que dejaba la versión con opacity. */
.reason{display:grid;perspective:900px}
.reason-flip{position:relative;height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.15,.2,1)}
.reason:hover .reason-flip{transform:rotateY(180deg)}
.reason-cara{backface-visibility:hidden;display:grid;align-content:center;justify-items:center}
.reason-dorso{position:absolute;inset:0;transform:rotateY(180deg)}

/* Sin cursor no hay volteo posible: en táctiles se apilan las dos caras como antes. */
@media (hover:none){
  .reason{perspective:none}
  .reason:hover .reason-flip{transform:none}
  .reason-flip{transform-style:flat}
  .reason-cara{backface-visibility:visible}
  .reason-dorso{position:static;transform:none;margin-top:7px}
}
/* Quien pide menos animación recibe un cambio simple, sin giro. */
@media (prefers-reduced-motion:reduce){
  .reason-flip{transition:none}
}

/* Lista con check */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem}
.checks li svg{width:21px;height:21px;color:var(--gold-1);flex:none;margin-top:2px}
.bg-navy .checks li svg,.bg-red .checks li svg{color:var(--gold-2)}
.checks--bullets li svg{color:var(--red)}

/* Estadísticas */
.stats{display:flex;gap:clamp(24px,4vw,50px);flex-wrap:wrap;margin-top:36px}
.stat{display:flex;gap:14px;align-items:flex-start}
.stat svg{width:26px;height:26px;color:var(--gold-1);flex:none;margin-top:4px}
.stat b{font-family:var(--font-display);font-size:2rem;color:var(--navy);display:block;line-height:1;font-weight:700}
.stat span{font-size:.83rem;color:var(--muted);display:block;margin-top:5px;line-height:1.35;max-width:14ch}
.bg-navy .stat b{color:#fff}.bg-navy .stat span{color:var(--sky)}
/* En la sección del mapa los tres stats van siempre en una fila. La columna es estrecha (40%),
   así que se aprieta el gap y se deja que las etiquetas envuelvan en varias líneas. */
.split--map .stats{flex-wrap:nowrap;gap:clamp(14px,1.8vw,26px)}
.split--map .stat{min-width:0}
.split--map .stat span{max-width:none}

/* ---------- Mapa interactivo ---------- */
.map-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:.83rem;color:var(--muted)}
.map-legend i{width:13px;height:13px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:-2px}
.state-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--sky);
  color:var(--navy);border-radius:999px;padding:9px 17px;font-size:.88rem;font-weight:700;margin-top:20px;box-shadow:var(--sh-1)}
.state-pill svg{width:16px;height:16px;color:var(--red)}

/* ---------- Historia (split rojo) ---------- */
.story{display:grid;grid-template-columns:1fr 1fr}
.story .ph{border-radius:0;min-height:100%}

/* La foto se funde con el panel rojo de al lado: el degradado del ::after va de transparente
   al mismo var(--red), así que no se ve el corte entre imagen y panel. */
.story-media{position:relative;overflow:hidden;background:var(--red)}
.story-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
/* Las paradas intermedias dibujan una curva suave. Con un degradado de dos paradas, el punto
   donde deja de aclarar se percibe como una línea vertical (banda de Mach). */
.story-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(105,25,34,0) 28%,
    rgba(105,25,34,.16) 48%,
    rgba(105,25,34,.44) 66%,
    rgba(105,25,34,.72) 80%,
    rgba(105,25,34,.92) 91%,
    var(--red) 100%)}
.story-copy{background:var(--red);color:#f3dade;padding:clamp(40px,5.4vw,76px)}
.story-copy h2{color:#fff;margin-bottom:6px}
.story-copy .role{color:var(--gold-2);font-weight:700;font-size:.92rem;margin:0 0 22px;font-family:var(--font-sans)}

/* ---------- Testimonios ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:16px}
.stars-row{display:flex;gap:3px;color:var(--gold-1)}
.stars-row svg{width:16px;height:16px}
.quote p{font-size:.96rem;color:var(--ink);font-style:italic;flex:1}
.quote footer{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--sky-100);display:grid;place-items:center;color:var(--navy);font-weight:800;font-size:.9rem;flex:none}
.quote b{display:block;font-size:.9rem;color:var(--ink)}
.quote small{color:var(--muted);font-size:.8rem}

/* ---------- Páginas internas: hero compacto ---------- */
.phero{position:relative;background:var(--navy);color:#c9dbe7;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 88% 0%,rgba(28,81,120,.9),transparent 60%);pointer-events:none}
.phero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:clamp(30px,4vw,44px) 24px clamp(56px,6.5vw,84px);
  display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.crumb{display:flex;gap:9px;align-items:center;font-size:.8rem;color:#93b3c8;margin-bottom:26px;flex-wrap:wrap}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb svg{width:12px;height:12px;opacity:.6}
.phero h1{color:#fff}
.phero .sub{margin:18px 0 28px;font-size:1.08rem;max-width:48ch;color:#c5d8e4}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:#dbe9f2;
  background:rgba(181,199,209,.13);border:1px solid rgba(181,199,209,.26);border-radius:999px;padding:8px 15px}
.chip svg{width:15px;height:15px;color:var(--gold-2)}

/* ---------- Bloques de contenido ---------- */
.feat{display:grid;gap:22px;grid-template-columns:repeat(4,1fr)}
.feat-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px}
.feat-item svg{width:28px;height:28px;color:var(--red);margin-bottom:13px}
.feat-item b{display:block;color:var(--ink);font-size:.97rem;margin-bottom:5px;font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.feat-item span{font-size:.87rem;color:var(--muted);line-height:1.5}

.callout{background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold-1);border-radius:var(--r);
  padding:clamp(26px,3.4vw,40px);box-shadow:var(--sh-1)}
.callout h3{margin-bottom:12px}
/* En las páginas legales el aviso del recuadro es el único apartado que hay bajo el <h1>, así
   que le toca ser <h2>; con h3 la página saltaba un nivel. El tamaño no lo decide la etiqueta:
   aquí se le devuelve el del h3, que es el que pide un recuadro. Los h3 de los recuadros del
   resto del sitio sí cuelgan de un h2 anterior y se quedan como están. */
.callout h2{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.28;margin-bottom:12px}
.callout--navy{background:var(--navy);border-color:transparent;border-left-color:var(--gold-1);color:#cfe0ea}
.callout--navy h3{color:#fff}
.note{font-size:.83rem;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);margin-top:22px;padding-top:16px}
.bg-navy .note{border-color:rgba(181,199,209,.22);color:#9fbccd}

/* Pasos numerados */
.steps{counter-reset:s;display:grid;gap:18px}
.step{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 26px 78px;position:relative}
.step::before{content:counter(s);position:absolute;left:24px;top:24px;width:38px;height:38px;border-radius:11px;
  background:var(--gold-grad);color:var(--navy-900);display:grid;place-items:center;font-weight:800;font-size:1.02rem;font-family:var(--font-sans)}
.step b{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--ink);margin-bottom:6px;font-weight:600}
.step span{font-size:.94rem;color:var(--body)}

/* Tabla comparativa */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
.tbl thead th{background:var(--navy);color:#fff;font-family:var(--font-display);font-size:1.02rem;font-weight:600}
.tbl thead th:first-child{background:var(--navy-900)}
.tbl tbody th{font-weight:700;color:var(--ink);background:var(--sky-50);width:24%}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl .yes{color:#17794b;font-weight:700}
.tbl .no{color:var(--muted);font-weight:600}

/* Acordeón FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
/* Cada pregunta es un <h3> dentro de su <summary>: así quien navega por titulares recorre la
   lista de preguntas, que es como se lee una FAQ. Va dentro del summary y no envolviendo al
   <details> para que el titular y el botón que se pulsa sean el mismo elemento.
   Un <h3> trae de serie su tamaño y su color, que aquí sobran: el aspecto ya lo fija
   «.faq summary». Con font:inherit y color:inherit el titular se pinta como el texto que había
   antes —y el color heredado es además lo que mantiene vivo el rojo de «.faq summary:hover»,
   que de otro modo se quedaría a las puertas del h3. */
.faq summary h3{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.faq summary::after{content:"";position:absolute;right:14px;top:29px;width:10px;height:10px;
  border-right:2.4px solid var(--red);border-bottom:2.4px solid var(--red);transform:rotate(45deg);transition:.25s}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq summary:hover{color:var(--red)}
.faq .ans{padding:0 40px 24px 0;font-size:.97rem;color:var(--body)}

/* Formulario */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,42px);box-shadow:var(--sh-2)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:.18s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 4px rgba(19,60,92,.09)}
.field textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--sky-50);border:1px solid var(--sky-100);
  border-radius:10px;padding:15px;font-size:.83rem;color:var(--body);line-height:1.55;margin-bottom:20px}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--navy)}
.form-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:7px}
.form-note svg{width:14px;height:14px}

/* Canales de contacto */
.chan{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.24s}
.chan:hover{box-shadow:var(--sh-2);border-color:var(--sky);transform:translateY(-3px)}
.chan .ico{margin-bottom:0;flex:none;width:46px;height:46px;border-radius:12px}
.chan b{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--ink);margin-bottom:4px;font-weight:600}
.chan span{font-size:.9rem;color:var(--body);display:block}
.chan small{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}

/* Recursos / blog */
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.24s}
.post:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.post .ph{border-radius:0;min-height:170px}
.post-body{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.tag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.post h3{font-size:1.12rem}
.post p{font-size:.9rem;color:var(--muted);flex:1}

/* Línea de tiempo inscripción */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--sky)}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-31px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--gold-grad);border:3px solid #fff;box-shadow:0 0 0 2px var(--sky)}
.tl-item b{display:block;font-family:var(--font-display);font-size:1.08rem;color:var(--ink);font-weight:600}
.tl-item time{font-size:.8rem;font-weight:700;color:var(--red);letter-spacing:.04em;text-transform:uppercase}
.tl-item p{font-size:.92rem;margin:6px 0 0}

/* CTA final */
.cta-band{position:relative;overflow:hidden;background:var(--red)}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 88% 50%,rgba(131,35,47,.9),transparent 65%);pointer-events:none}
.cta-in{position:relative;z-index:2}
/* El 46% del texto y el 47% donde arranca la foto están calculados para que el texto termine
   justo antes de la zona opaca del degradado, en todo el rango de anchos. */
.cta-copy{max-width:min(560px,46%)}

/* En el CTA con foto se quita el velo radial de .cta-band. Era la decoración de una banda roja
   vacía y aquí estorba por partida doble: es 90% opaco en su centro (88% 50%), justo donde cae
   la foto, y además tintaría el fondo a ~#80222e mientras la foto funde hacia #691922, dejando
   una costura. Sin él, el fondo es rojo plano y el degradado casa exacto. */
.cta-band--foto::after{display:none}

/* La foto va por debajo del texto (.cta-in tiene z-index:2) y por encima del fondo. */
.cta-media{position:absolute;top:0;bottom:0;right:0;left:47%;overflow:hidden}
.cta-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.cta-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(270deg,
    rgba(105,25,34,0) 28%,
    rgba(105,25,34,.16) 48%,
    rgba(105,25,34,.44) 66%,
    rgba(105,25,34,.72) 80%,
    rgba(105,25,34,.92) 91%,
    var(--red) 100%)}

/* ---------- Footer ---------- */
.ftr{background:var(--navy-900);color:#9fbccd;font-size:.9rem}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:40px;padding:clamp(48px,6vw,72px) 0 44px}
/* Los rótulos de columna del pie son <h2>, no <h4>: el pie es una región hermana de <main> y
   sus columnas son secciones de primer nivel dentro de ella. Con h4 la página saltaba de h2 a
   h4 en las 24 páginas, porque nada llenaba el h3 intermedio. El tamaño no lo marca la
   etiqueta: esta regla lo fija igual que antes, así que el pie se ve exactamente igual. */
.ftr h2{color:#fff;font-family:var(--font-sans);font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
/* Los botones quedan fuera: tienen su propio color de texto y en dorado sobre dorado
   el texto desaparecería. */
.ftr a:not(.btn):hover{color:var(--gold-2)}
.ftr .logo img{height:58px;margin-left:-4px}
.ftr p{font-size:.88rem;line-height:1.6;margin-top:18px;max-width:34ch}
.ftr-contact li{display:flex;gap:10px;align-items:flex-start}
.ftr-contact svg{width:16px;height:16px;color:var(--gold-2);flex:none;margin-top:4px}
.socials{display:flex;gap:9px;margin-top:22px}
.socials a{width:34px;height:34px;border-radius:9px;background:rgba(181,199,209,.12);display:grid;place-items:center;transition:.2s}
/* Va prefijado con .ftr para ganarle en especificidad a `.ftr a:not(.btn):hover`, que si no
   pinta el icono de dorado sobre el fondo dorado y lo hace desaparecer. */
.ftr .socials a:hover{background:var(--gold-grad);color:var(--navy-900)}
.socials svg{width:16px;height:16px}
/* Va prefijado con .ftr (0-2-0) para ganarle a `.ftr p` (0-1-1), que impone max-width:34ch y
   margin-top:18px. Sin el prefijo, `.disclaimer` (0-1-0) pierde y el texto queda en una
   columna estrecha. Así ocupa la sección completa, igual que la fila del copyright. */
.ftr .disclaimer{border-top:1px solid rgba(181,199,209,.16);padding:20px 0;font-size:.7rem;
  line-height:1.6;color:#7fa0b4;font-style:italic;max-width:none;margin:0}
.ftr-bot{border-top:1px solid rgba(181,199,209,.16);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}

/* ---------- WhatsApp flotante ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:800;display:flex;align-items:center;gap:10px;
  background:#25d366;color:#07331a;font-weight:700;font-size:.9rem;padding:14px 20px;border-radius:999px;
  box-shadow:0 10px 30px rgba(37,211,102,.4);transition:.22s}
.wa:hover{transform:translateY(-3px) scale(1.02)}
.wa svg{width:21px;height:21px}
/* Al llegar al final de la página el botón sube por encima de la barra inferior del pie: es
   donde está el selector de idioma y, en ventanas estrechas, lo tapaba. La clase la pone
   main.js cuando esa barra entra en pantalla. Mientras tanto el botón se queda en su sitio
   de siempre, abajo a la derecha. */
.wa.is-alto{bottom:96px}



/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .g-6,.g-5{grid-template-columns:repeat(3,1fr)}
  .reason:nth-child(4)::before{display:none}                     /* 3 columnas: filas [1-3][4-6] */
  .feat{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* --- Panel lateral a pantalla completa ---
     El menú deja de ser una lengüeta bajo la cabecera y pasa a ser un cajón que entra desde
     la izquierda: logo arriba, enlaces centrados en el hueco de en medio, idioma debajo y
     redes al pie.

     El centrado no lleva justify-content, que colocaría todo junto: la cabecera empuja con
     `margin-bottom:auto` y las redes con `margin-top:auto`, y lo de en medio queda centrado
     entre ambos aunque cambie el número de enlaces.

     Se esconde con transform y no con display:none para que pueda deslizarse; visibility lo
     saca además del recorrido del tabulador mientras está cerrado. */
  .nav{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;top:0;left:0;bottom:0;right:auto;
    width:min(86vw,380px);max-height:none;overflow:auto;overscroll-behavior:contain;
    background:var(--red);box-shadow:0 0 60px rgba(0,0,0,.45);color:#fff;
    padding:20px 22px 34px;gap:0;z-index:1000;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .3s ease,visibility .3s
  }
  .nav.is-open{transform:none;visibility:visible}

  .nav-velo{
    display:block;position:fixed;inset:0;z-index:999;background:rgba(9,20,30,.55);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s
  }
  .nav-velo.is-open{opacity:1;visibility:visible}
  body.menu-abierto{overflow:hidden}

  /* Cabecera del panel: logo y aspa. */
  .nav-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:auto}
  .nav-cab .logo img{height:54px}
  .nav-cerrar{background:none;border:0;padding:6px;margin:-4px -6px 0 0;color:#fff;cursor:pointer;line-height:0}
  .nav-cerrar svg{width:26px;height:26px;display:block}

  /* Los enlaces, centrados y sueltos: ni fondos ni cajas, como en la referencia. */
  .nav a.navlink,.nav button.navlink{
    justify-content:center;font-size:1.16rem;font-weight:600;padding:13px 8px;width:100%
  }
  .nav a.navlink:hover,.nav button.navlink:hover{background:none;color:var(--gold-2)}
  .nav .is-current{color:var(--gold-2)}
  .nav .is-current::after{display:none}

  /* El botón de cita sigue siendo botón: es la única llamada a la acción del panel y la
     razón de que el menú exista. Solo cambia de sitio, centrado y con aire alrededor. */
  .hdr .nav .btn{width:auto;align-self:center;margin:18px 0 4px;padding:13px 28px;font-size:1rem}

  /* Orden dentro del panel, que no es el del HTML. */
  .nav-cab{order:0}
  .nav .has-drop{order:1}
  .nav [data-nav="nosotros"]{order:2}
  .nav [data-nav="contacto"]{order:3}
  .hdr .nav .btn{order:4}
  .nav .lang{order:5}
  .nav .nav-redes{order:6}
  /* Los grupos de escritorio no existen aquí: sus hijos vuelven a ser piezas sueltas del
     panel, que es lo que necesita el orden de arriba para colocarlas una a una. */
  .nav-links,.nav-acciones{display:contents}

  /* El submenú de Servicios se abre embutido, no flotando. */
  .nav .drop{position:static;transform:none;opacity:1;visibility:visible;background:transparent;box-shadow:none;border:0;
    border-radius:0;margin:0;padding:0;display:none;min-width:0;text-align:center}
  .has-drop[data-open="1"] .drop{display:block;transform:none}
  .nav .drop a{color:rgba(255,255,255,.82);justify-content:center;font-size:1rem;padding:9px 8px}
  .nav .drop a:hover{background:rgba(255,255,255,.10);color:#fff}
  .nav .drop a svg{color:var(--gold-2)}

  /* Idioma centrado bajo los enlaces. */
  .nav .lang{align-self:center;margin:22px 0 0}

  /* Redes al pie del panel. El aspecto no se define aquí: el contenedor lleva también la
     clase .socials, la misma del pie de página, así que salen idénticas a las de siempre.
     Aquí solo se las coloca. */
  .nav .nav-redes{display:flex;justify-content:center;margin-top:auto;padding-top:30px}

  .burger{display:block}
  .phero-in,.split,.split--wide,.split--map,.story{grid-template-columns:1fr}
  /* A una columna la foto queda encima del panel rojo, así que el degradado gira hacia abajo. */
  .story-media{height:clamp(300px,52vw,420px)}
  /* La foto del CTA vuelve al flujo, debajo del texto, y funde hacia arriba. */
  .cta-copy{max-width:none}
  .cta-media{position:static;height:clamp(240px,52vw,340px);
    margin-top:36px;margin-bottom:calc(-1 * var(--pad))}
  .cta-media::after{background:linear-gradient(180deg,
    rgba(105,25,34,1) 0%,
    rgba(105,25,34,.92) 9%,
    rgba(105,25,34,.72) 20%,
    rgba(105,25,34,.44) 34%,
    rgba(105,25,34,.16) 52%,
    rgba(105,25,34,0) 72%)}
  /* El retrato de nuestra-historia.html queda debajo del texto: sangra a ambos lados y funde por arriba. */
  .founders-media{min-height:clamp(300px,52vw,420px);
    margin-top:0;margin-right:-24px;margin-left:-24px;margin-bottom:calc(-1 * var(--pad))}
  .founders-media::after{background:linear-gradient(180deg,
    rgba(105,25,34,1) 0%,
    rgba(105,25,34,.92) 9%,
    rgba(105,25,34,.72) 20%,
    rgba(105,25,34,.44) 34%,
    rgba(105,25,34,.16) 52%,
    rgba(105,25,34,0) 72%)}
  .story-media::after{background:linear-gradient(180deg,
    rgba(105,25,34,0) 34%,
    rgba(105,25,34,.18) 54%,
    rgba(105,25,34,.48) 70%,
    rgba(105,25,34,.76) 83%,
    rgba(105,25,34,.93) 92%,
    var(--red) 100%)}
  .g-3,.g-4,.g-5,.g-6{grid-template-columns:repeat(2,1fr)}
  /* 2 columnas: filas [1-2][3-4][5-6]. El 4 deja de abrir fila y recupera su línea. */
  .reason:nth-child(4)::before{display:block}
  .reason:nth-child(3)::before,.reason:nth-child(5)::before{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .g-2,.g-3,.g-4,.g-5,.g-6,.feat{grid-template-columns:1fr}
  /* 1 columna: no hay nada que separar en vertical. `:nth-child(n)` iguala la especificidad
     de las reglas de arriba, que si no seguirían mostrando alguna línea suelta. */
  .reason:nth-child(n)::before{display:none}
  .badges{grid-template-columns:1fr}
  /* Por debajo de este ancho los tres stats ya no caben en una fila sin desbordar. */
  .split--map .stats{flex-wrap:wrap}
  .carriers{margin-top:-40px}
  .carriers-in{padding:22px;gap:20px}
  .tbl thead th,.tbl th,.tbl td{padding:12px 13px;font-size:.87rem}
  .ftr-top{grid-template-columns:1fr;gap:32px}
  .wa span{display:none}
  .wa{padding:15px;border-radius:50%}
  .step{padding:22px 20px 22px 20px}
  .step::before{position:static;margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* ============================================================
   REDISEÑO DE PÁGINAS INTERNAS (según mockups de referencia)
   ============================================================ */

/* Hero interno claro con foto sangrada a la derecha */
.phero{position:relative;background:var(--grey);color:var(--body);overflow:hidden;border-bottom:1px solid var(--line)}
.phero::after{display:none}
/* .phero-art y .phero-in son dos capas independientes, no dos columnas: el arte va detrás
   (z-index 1) y el texto encima (z-index 2). Por eso el arte puede ser más ancho que la mitad
   libre y pasar por debajo del texto — de eso se encarga el tramo opaco del degradado. Es lo
   que hace que la foto o el video ocupen más pantalla sin robarle sitio al titular. */
/* El fundido con el fondo se hace con MÁSCARA sobre el propio arte, no con un velo pintado
   encima. Un degradado semitransparente sobre un <video> obliga a Chrome a re-mezclar dos
   capas en cada tile al hacer scroll: el tramado del degradado baila entre fotogramas y se
   percibe como si aclarara y oscureciera. La máscara se aplica a la capa del arte, se genera
   una vez y no se vuelve a mezclar. Además el fundido acierta siempre con el color de la
   sección, porque lo que hay debajo se ve de verdad en lugar de imitarse con un velo. */
.phero-art{position:absolute;top:0;right:0;bottom:0;width:65%;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 26%,rgba(0,0,0,.38) 38%,rgba(0,0,0,1) 52%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 26%,rgba(0,0,0,.38) 38%,rgba(0,0,0,1) 52%)}
.phero-art .ph{height:100%;min-height:0;border-radius:0;background:linear-gradient(135deg,var(--sky-100),var(--sky))}
/* Foto o video real en el hueco del hero. Llena el espacio y se recorta; el encuadre fino de
   cada página se ajusta con object-position en la propia etiqueta. El degradado de
   .phero-art::after ya lo funde con el fondo por la izquierda, igual que en el resto del sitio.
   Cuando es video, el póster va como fondo del contenedor para cubrir la carga y para quedarse
   en su sitio si el sistema pide menos animación. */
.phero-art img,.phero-art video{display:block;width:100%;height:100%;object-fit:cover}
/* El póster NO va como fondo permanente del contenedor. Con el video encima, cuando Chrome
   deja de componerlo durante el scroll asoma ese fotograma fijo, con otro brillo que el
   fotograma en curso: se ve como si la imagen se aclarara y oscureciera. Solo se usa como
   respaldo cuando el video no se muestra; la URL llega en la variable --poster de cada página. */
@media (prefers-reduced-motion:reduce){
  .phero-art{background:var(--poster) center 25%/cover no-repeat}
  .phero-art video{display:none}
}
/* El velo pintado encima ya no existe: lo sustituye la máscara de .phero-art. Los cortes de
   la máscara son los mismos que tenía este degradado —invisible hasta el 26%, que es el trozo
   que queda bajo la columna de texto, y a plena intensidad desde el 52%. */
.phero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:40px;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:clamp(26px,3.4vw,40px) 24px clamp(54px,6vw,84px)}
.phero h1{color:var(--navy)}
.phero h1 .accent,.accent{color:var(--red)}
.phero .sub{color:var(--body);margin:18px 0 26px;font-size:1.05rem;max-width:44ch}
.phero .crumb{color:var(--muted)}
.phero .crumb a:hover{color:var(--red);text-decoration:underline}
.phero .crumb span[style]{color:var(--navy) !important}
.phero .eyebrow svg{width:15px;height:15px}
.phero .chip{background:#fff;border-color:var(--line);color:var(--navy)}
.phero .chip svg{color:var(--gold-1)}
.phero .btn-ghost{border-color:var(--line);color:var(--navy);background:#fff}
.phero .btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Tríada de atributos bajo el hero. Rejilla de tres columnas iguales en vez de flex con wrap:
   así nunca salta ninguna a una segunda fila y los tres miden lo mismo. El ancho lo fija la
   columna, por eso ya no hace falta el max-width que tenía cada elemento. */
.hfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px;margin-top:32px}
.hfeat>div{display:flex;gap:11px;align-items:center;font-size:.82rem;font-weight:700;color:var(--navy);line-height:1.32}
/* Reserva dos líneas (2 × line-height) para todos los rótulos. Sin esto, los que caben en una
   línea quedan más bajos que los que envuelven y los iconos se desalinean entre sí. */
.hfeat>div span{display:grid;align-content:center;min-height:2.64em}
.hfeat i{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--gold-1);color:var(--gold-1);display:grid;place-items:center;flex:none}
.hfeat i svg{width:17px;height:17px}
/* Tres columnas no caben en un móvil estrecho; ahí se apilan y cada rótulo ocupa lo que necesite. */
@media (max-width:620px){
  .hfeat{grid-template-columns:1fr;gap:14px}
  .hfeat>div span{min-height:0}
}

/* Franja de aseguradoras en internas */
.carriers--inner{margin-top:-38px;margin-bottom:0}
.carriers--inner .carriers-in{gap:34px}

/* Encabezado de sección centrado a dos tonos */
.head-c{text-align:center;max-width:44ch;margin:0 auto clamp(34px,4vw,52px)}
.head-c h2{line-height:1.2}
.head-c p{margin-top:14px;color:var(--body)}

/* Tarjeta centrada con icono de línea */
.ico--line{background:transparent;color:var(--red);width:auto;height:auto;margin:0 auto 16px}
.ico--line svg{width:32px;height:32px}
.card--center{text-align:center;padding:30px 22px}
.card--center h3{font-size:1.05rem;margin-bottom:10px}
.card--center p{font-size:.86rem;color:var(--muted)}

/* Mini-items con icono dorado */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mini{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.4}
.mini i{width:38px;height:38px;border-radius:10px;background:#fdf3dd;color:var(--gold-1);display:grid;place-items:center;flex:none}
.mini i svg{width:18px;height:18px}

/* Dos tarjetas de plan destacadas */
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:32px 32px 32px 96px;position:relative}
.plan .plan-ic{position:absolute;left:-30px;top:34px;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-2)}
.plan .plan-ic svg{width:30px;height:30px}
/* Variante con imagen: el archivo ya trae el círculo de color, así que llena el contenedor.
   Se conserva el background del .plan-ic detrás (mismo color) para que no se note el borde,
   y el border-radius:50% del contenedor mantiene circular la sombra. */
.plan .plan-ic img{display:block;width:100%;height:100%;border-radius:50%}
.plan--red .plan-ic{background:var(--red)}
.plan--navy .plan-ic{background:var(--navy)}
.plan h3{font-size:1.35rem;margin-bottom:8px}
.plan h3 span{display:block}
.plan>p{font-size:.92rem;color:var(--muted);margin-bottom:18px}
.plan .checks li{font-size:.9rem}
.plan--red .checks li svg{color:var(--red)}
.plan--navy .checks li svg{color:var(--navy)}
.plan .btn{margin-top:24px}

/* Proceso numerado */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.proc::before{content:"";position:absolute;top:44px;left:13%;right:13%;height:2px;background:var(--sky);z-index:0}
.proc-item{text-align:center;position:relative;z-index:1}
.proc-ic{width:82px;height:82px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  display:grid;place-items:center;margin:0 auto 18px;color:var(--navy);position:relative}
.proc-ic svg{width:30px;height:30px}
.proc-n{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  background:var(--gold-grad);color:var(--navy-900);font-size:.76rem;font-weight:800;display:grid;place-items:center;font-family:var(--font-sans)}
.proc-item b{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--ink);margin-bottom:7px;font-weight:600}
.proc-item span{font-size:.85rem;color:var(--muted);line-height:1.5;display:block;max-width:26ch;margin:0 auto}

/* ------------------------------------------------------------
   ACOMPAÑAMIENTO (seguro de salud)
   Lista de servicios con icono en pastilla, al lado de la promesa.
   ------------------------------------------------------------ */
.acomp{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.acomp li{display:flex;gap:16px;align-items:flex-start}
/* El icono va sobre una pastilla blanca: la sección tiene fondo celeste y sin ella los trazos
   quedarían flotando sobre el color, sin la unidad que dan las tarjetas del resto del sitio. */
.acomp i{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);
  color:var(--red);display:grid;place-items:center;flex:none;box-shadow:var(--sh-1)}
.acomp i svg{width:21px;height:21px}
.acomp b{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:600;
  color:var(--ink);margin-bottom:3px;line-height:1.3}
.acomp span{display:block;font-size:.92rem;color:var(--muted);line-height:1.55}

/* ------------------------------------------------------------
   TARJETA DE COBERTURA (seguros suplementarios)
   Icono + promesa arriba, beneficios en medio y el dato al pie.
   ------------------------------------------------------------ */
.cob{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;transition:.24s}
.cob:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cob-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
/* El icono es una imagen que ya trae su propio círculo de color, igual que los de servicios
   del home y los de la esencia: el contenedor solo reserva el sitio. */
.cob-head i{display:block;width:62px;height:62px;flex:none}
.cob-head i img{display:block;width:100%;height:100%}
.cob h3{font-size:1.24rem;margin-bottom:8px}
.cob-head p{font-size:.94rem;color:var(--body);margin:0}
.cob .checks{margin-bottom:22px}
.cob .checks li{font-size:.93rem}
/* `margin-top:auto` empuja el dato al fondo: así todas las tarjetas de una fila lo alinean
   abajo aunque tengan distinta cantidad de texto arriba. */
.cob-dato{margin-top:auto;background:#fdf6ea;border-left:3px solid var(--gold-1);
  border-radius:0 10px 10px 0;padding:15px 18px;font-size:.87rem;color:var(--body);line-height:1.55}
.cob-dato b{color:var(--ink);font-weight:700}

/* La quinta tarjeta ocupa la fila entera —queda impar— y reparte su contenido en dos
   columnas para no convertirse en una franja bajísima y vacía. */
.cob--wide{grid-column:1/-1}
@media (min-width:901px){
  .cob--wide{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.4vw,48px);align-items:center}
  .cob--wide .checks{margin-bottom:0}
  .cob--wide .cob-dato{margin-top:0}
}

/* Declaración de cierre de página. Sin filete ni marca decorativa encima: el bloque se
   sostiene con el tamaño del texto y el aire de la sección. */
.cierre{max-width:900px;margin:0 auto;text-align:center}
.cierre-claim{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.45rem,2.8vw,2.15rem);line-height:1.3;color:var(--ink);margin:0}
.cierre-sub{margin:20px auto 0;max-width:60ch;font-size:1.04rem;color:var(--body)}

/* Panel crema */
.panel-cream{background:#fdf6ea;border-radius:var(--r-lg);padding:clamp(28px,3.6vw,46px)}
.panel-cream .card{box-shadow:none}

/* Bloque de video */
.videoblock{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.videoblock .vb-copy{padding:clamp(26px,3.2vw,40px)}
.videoblock .ph{border-radius:0;min-height:230px}
.play-badge{width:44px;height:44px;border-radius:50%;background:var(--gold-grad);color:var(--navy-900);display:grid;place-items:center;margin-bottom:16px}
.play-badge svg{width:16px;height:16px}

/* FAQ en dos columnas, estilo caja */
.faq--boxed{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:0;align-content:start}
.faq--boxed details{border:1px solid var(--line);border-radius:10px;background:#fff;height:fit-content}
.faq--boxed summary{padding:17px 46px 17px 18px;font-family:var(--font-sans);font-size:.93rem;font-weight:600}
.faq--boxed summary::after{content:"";right:18px;top:24px;width:12px;height:12px;border:0;transform:none;
  background:linear-gradient(var(--red),var(--red)) center/12px 2px no-repeat,linear-gradient(var(--red),var(--red)) center/2px 12px no-repeat;transition:.25s}
.faq--boxed details[open] summary::after{background:linear-gradient(var(--red),var(--red)) center/12px 2px no-repeat;top:24px}
.faq--boxed .ans{padding:0 18px 18px;font-size:.9rem}

/* Cierre oscuro con foto */
.cta-photo{position:relative;background:var(--navy);color:#cfe0ea;overflow:hidden}
.cta-photo .cta-art{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:1}
.cta-photo .cta-art .ph{height:100%;min-height:0;border-radius:0;background:linear-gradient(135deg,var(--navy-600),var(--navy-900));color:var(--sky)}
/* Foto real en el cierre. Igual que en el hero: llena el hueco, se recorta, y el degradado de
   .cta-art::after la funde con el navy por la izquierda. */
.cta-photo .cta-art img{display:block;width:100%;height:100%;object-fit:cover}
/* Aquí el texto y la foto son columnas contiguas, no se solapan: el velo solo tiene que
   fundir el borde izquierdo con el navy, no proteger la lectura. Por eso el tramo opaco es
   corto y a partir del 42% ya no queda nada — con el velo largo de antes, la cara de la
   persona que queda más cerca del texto caía justo en la zona oscura. */
.cta-photo .cta-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--navy) 0%,
    rgba(19,60,92,.74) 9%,
    rgba(19,60,92,.28) 24%,
    rgba(19,60,92,0) 42%)}
.cta-photo .cta-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center}
.cta-photo h2{color:#fff}

/* Banda roja con icono (contacto) */
.cta-inline{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cta-inline .ci-ic{width:74px;height:74px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;flex:none}
.cta-inline .ci-ic svg{width:30px;height:30px}
.cta-inline .ci-copy{flex:1;min-width:260px}
.cta-inline b{display:block;font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.55rem);color:#fff;font-weight:600;margin-bottom:4px}
.cta-inline span{font-size:.94rem;color:#f0d8db}

/* Hero de contacto con formulario */
.chero{position:relative;background:var(--navy);color:#d3e2ec;overflow:hidden}
.chero-art{position:absolute;inset:0;z-index:1}
.chero-art .ph{height:100%;min-height:0;border-radius:0}
/* Velo plano sobre el video. Antes eran dos degradados que lo fundían con el fondo por los
   costados, porque el video vivía en una franja estrecha; ahora cubre el banco entero y lo que
   hace falta es bajarle el contraste de forma uniforme para que el texto se lea encima.

   Plano y no degradado a propósito: un degradado sobre un video en movimiento vuelve a traer
   el parpadeo que costó quitar en los otros heros. Para aclararlo en vez de oscurecerlo, este
   es el único valor que hay que cambiar —y entonces hay que devolver el texto a los colores
   oscuros de más abajo. */
.chero-art::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:rgba(11,34,52,.55)}
.chero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,5vw,70px);align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:clamp(30px,4vw,48px) 24px clamp(44px,5vw,64px)}
.chero .sub{color:#c5d8e4;margin:18px 0 0;font-size:1.02rem;max-width:40ch}
.chero h1{color:#fff;font-size:clamp(2rem,3.5vw,2.9rem)}
/* El rojo de marca no se lee sobre el velo oscuro; aquí el acento va en dorado, como en los
   demás heros oscuros del sitio. */
.chero h1 .accent{color:var(--gold-2)}
.formpanel{background:var(--navy);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);box-shadow:var(--sh-3);color:#cfe0ea}
.formpanel h2{color:#fff;font-size:1.6rem}
.formpanel>p{font-size:.9rem;margin:10px 0 22px;color:#b8d0df}
.formpanel input,.formpanel select,.formpanel textarea{border-color:transparent;background:#fff;font-size:.9rem;padding:12px 14px}
.formpanel textarea{min-height:92px}
.formpanel .field{margin-bottom:12px}
.formpanel .fp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formpanel .fp-note{display:flex;gap:8px;align-items:center;font-size:.78rem;color:#b8d0df;margin-top:14px}
.formpanel .fp-note svg{width:14px;height:14px;color:var(--gold-2)}

/* Tarjetas de canal de contacto */
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:.24s;display:block}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.ccard .cico{width:48px;height:48px;border-radius:50%;border:1.6px solid currentColor;display:grid;place-items:center;margin-bottom:18px;color:var(--gold-1)}
.ccard .cico svg{width:21px;height:21px}
.ccard .cico--wa{color:#25d366}
.ccard b{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--ink);font-weight:600;margin-bottom:6px}
.ccard p{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.ccard .link-arrow{font-size:.88rem}

/* Barra de cifras */
.statbar{background:var(--grey);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 20px;
  display:grid;grid-template-columns:repeat(5,1fr)}
.statbar>div{display:flex;gap:13px;align-items:center;padding:4px 22px;border-right:1px solid var(--line)}
.statbar>div:last-child{border-right:0}
.statbar i{color:var(--gold-1);flex:none}
.statbar i svg{width:30px;height:30px}
.statbar b{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--navy);line-height:1.1;font-weight:700}
.statbar span{display:block;font-size:.78rem;color:var(--muted);line-height:1.35;margin-top:3px}

/* Oficina */
.office{display:grid;grid-template-columns:.85fr 1.15fr 1fr;gap:26px;align-items:center}
.office .ph{min-height:225px}

/* ------------------------------------------------------------
   NUESTRA HISTORIA
   Piezas propias de nuestra-historia.html. Todo lo demás de esa página
   reutiliza componentes ya existentes (.phero, .split, .proc…).
   ------------------------------------------------------------ */

/* Barra de cifras de cuatro columnas. La base son cinco; con cuatro elementos
   la quinta quedaría vacía y el reparto descuadrado. */
.statbar--4{grid-template-columns:repeat(4,1fr)}

/* Foto vertical dentro de un .split. Va sin recortar: es un retrato de cuerpo entero y
   cualquier corte a una altura fija se lleva por delante justo lo que hay que ver. Queda más
   alta que la columna de texto, que .split centra a su lado. */
.foto-split{display:block;width:100%;height:auto;border-radius:var(--r-lg)}

/* Proceso numerado de cinco pasos. Va antes de las consultas de medios del final
   para que esas puedan seguir reduciendo columnas sin !important. */
.proc--5{grid-template-columns:repeat(5,1fr);gap:18px}
.proc--5::before{left:10%;right:10%}
.proc--5 .proc-item span{max-width:22ch}

/* Relevo de marca: Con Tu Salud → Gold Star Insurance.
   Los dos nombres hacen de titular. El contraste de tamaño y color entre uno y otro es lo que
   cuenta el cambio de etapa: el nombre viejo en gris y pequeño, el nuevo grande y en azul. */
.relevo{max-width:820px;margin:0 auto;text-align:center}
.relevo-marcas{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,32px);flex-wrap:wrap;margin-bottom:28px}
.relevo-old{font-family:var(--font-display);font-weight:500;color:var(--muted);
  font-size:clamp(1.15rem,2.2vw,1.65rem);line-height:1.2}
.relevo-new{font-family:var(--font-display);font-weight:700;color:var(--navy);
  font-size:clamp(1.6rem,3.2vw,2.45rem);line-height:1.15;letter-spacing:-.02em}
.relevo-marcas svg{width:clamp(26px,3vw,38px);height:clamp(26px,3vw,38px);color:var(--gold-1);flex:none}
.relevo>p:not(.relevo-marcas){font-size:1.02rem;color:var(--body);max-width:64ch;margin-inline:auto}
/* Sobre azul: el nombre nuevo en blanco y el viejo apagado con transparencia, no con el gris
   de texto, que sobre oscuro se vuelve ilegible. La flecha sube al dorado claro. */
.bg-navy .relevo-old{color:rgba(207,224,234,.5)}
.bg-navy .relevo-new{color:#fff}
.bg-navy .relevo-marcas svg{color:var(--gold-2)}
.bg-navy .relevo>p:not(.relevo-marcas){color:#cfe0ea}

/* Frase destacada a banda completa. La comilla decorativa es un pseudoelemento:
   no es texto que deba leer un lector de pantalla. */
.pullquote{max-width:940px;margin:0 auto;text-align:center}
.pullquote::before{content:"\201C";display:block;font-family:var(--font-display);font-size:5.2rem;
  line-height:.62;color:var(--gold-1);margin-bottom:14px}
.pullquote blockquote{margin:0}
.pullquote p{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.28;color:#fff;margin:0}
.pullquote cite{display:block;margin-top:24px;font-style:normal;font-family:var(--font-sans);
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}

/* Esencia en tres palabras */
.esencia{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,30px)}
.esencia>div{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(28px,3.2vw,40px) 24px;text-align:center;transition:.24s}
.esencia>div:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* El icono es una imagen que ya trae su propio círculo de color, igual que los de servicios
   en el home: el contenedor no pone fondo ni forma, solo reserva el sitio. */
.esencia i{display:block;width:72px;height:72px;margin:0 auto 18px}
.esencia i img{display:block;width:100%;height:100%}
.esencia b{display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.3vw,1.85rem);color:var(--navy);margin-bottom:10px;line-height:1.15}
.esencia span{display:block;font-size:.92rem;color:var(--muted);line-height:1.5;max-width:24ch;margin:0 auto}

@media (max-width:1040px){
  .proc{grid-template-columns:repeat(2,1fr)}
  .proc::before{display:none}
  /* Con cinco pasos, dos columnas dejan una fila suelta de uno: tres reparten mejor. */
  .proc--5{grid-template-columns:repeat(3,1fr)}
  .statbar,.statbar--4{grid-template-columns:repeat(2,1fr);gap:18px}
  .statbar>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}
  .office{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .phero-art{position:static;width:100%;height:240px;margin-bottom:-1px}
  .phero-art::after{background:linear-gradient(0deg,rgba(246,246,246,.9),rgba(246,246,246,0) 55%)}
  .phero-in{grid-template-columns:1fr;padding-bottom:clamp(40px,6vw,56px)}
  .cta-photo .cta-art{position:static;width:100%;height:200px;margin-top:26px}
  .cta-photo .cta-art::after{display:none}
  .cta-photo .cta-in{grid-template-columns:1fr}
  /* A una columna el gap general se queda en su mínimo de 30 px, y en ese hueco no cabe ni
     el fundido del video ni el aire que pide el formulario. Aquí manda el de las filas. */
  .chero-in{grid-template-columns:1fr;row-gap:clamp(64px,14vw,88px)}
  /* A una columna el video ya no cubre el banner entero: se queda detrás del texto y termina
     antes de que empiece el formulario, que a partir de ahí va sobre fondo claro. Cubriéndolo
     todo, el panel del formulario quedaba flotando sobre el video y se leía mal.

     La altura la mide main.js y la escribe en --alto-video: depende del texto, que cambia de
     largo con el idioma y con el ancho de la pantalla, así que no puede ser un número fijo.
     El porcentaje de reserva es para si el JS no llega.

     El corte al fondo blanco se hace con máscara, no con un degradado pintado encima: sobre
     un video en movimiento el degradado reintroduce el parpadeo, y la máscara no. */
  .chero{background:#fff}
  /* Corte limpio, sin fundido: el video termina y empieza el blanco. Además de ser lo que
     se buscaba, quita el problema que traía el degradado —se comía la última línea del texto
     si el bloque crecía— y el acoplamiento entre este porcentaje y el cálculo de main.js. */
  .chero-art{bottom:auto;height:var(--alto-video,64%)}
  .chero-art::after{background:rgba(11,34,52,.66)}
  .videoblock{grid-template-columns:1fr}
  .faq--boxed{grid-template-columns:1fr}
  .plan{padding:32px 26px}
  .plan .plan-ic{position:static;margin-bottom:18px}
  .office{grid-template-columns:1fr}
  .proc--5{grid-template-columns:repeat(2,1fr)}
  .esencia{grid-template-columns:1fr}
}
@media (max-width:620px){
  .mini-grid{grid-template-columns:1fr}
  .proc,.proc--5{grid-template-columns:1fr}
  .statbar,.statbar--4{grid-template-columns:1fr}
  .formpanel .fp-row{grid-template-columns:1fr}
}

/* ============================================================
   MAPA INTERACTIVO (código base del cliente + ajustes)
   ============================================================ */
.usa-map-container{position:relative;display:inline-block;max-width:1000px;width:100%;margin:0 auto;overflow:hidden}
.usa-map-container img{width:100%;height:auto;display:block}
.state-hover-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.state-shape{fill:#133c5c;fill-opacity:0;stroke:#b5c7d1;stroke-width:0;cursor:pointer;pointer-events:all;
  transition:fill-opacity .3s ease,filter .3s ease,transform .3s ease;will-change:transform}
.state-shape:hover,.state-shape:focus{fill-opacity:1;stroke-width:3;
  filter:brightness(1.3) drop-shadow(0 -3px 12px rgba(181,199,209,1));transform:translateY(-4px);outline:none}
#state-tooltip{position:fixed;background:#133c5c;color:#fff;padding:10px 16px;border-radius:6px;font-size:15px;
  font-weight:700;font-family:var(--font-sans);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:10000;white-space:nowrap}

/* Accesibilidad: salto al contenido */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold-grad);color:var(--navy-900);
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;z-index:2000}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   MOVIMIENTO AL HACER SCROLL
   ============================================================
   El HTML no lleva ni una sola clase de esto: main.js marca los elementos al arrancar y un
   IntersectionObserver los va destapando. Si el JS falla o no llega, la clase `anim` nunca se
   pone y la página entera queda visible, que es como debe degradarse.

   La clase `anim` la pone un script en línea al principio del <body>, no main.js: main.js va
   con `defer` y llegaría después de pintar, así que se vería el contenido y luego el salto.

   Cuando una animación termina, main.js le quita el atributo `data-rv` al elemento. Sin eso,
   la regla `.is-in{transform:none}` pesa más que los `:hover{transform:…}` de tarjetas y
   botones y se quedarían sin su micro-movimiento para siempre. */

/* La transición va en el estado final (.is-in) y NO en el de partida. Puesta en el de
   partida, el momento en que main.js marca el elemento ya es un cambio de estilo y el
   navegador lo anima: al cargar la página, todo lo marcado se desvanecía hacia fuera
   durante tres cuartos de segundo antes de quedarse esperando su turno. Declarada aquí, el
   elemento se esconde de golpe y solo se anima el viaje de vuelta, que es el que se ve. */
/* Mientras un bloque espera su turno está desplazado 34 px hacia un lado. Por la izquierda no
   se nota, pero por la derecha ese desplazamiento sí cuenta para el ancho de la página: el
   contenedor solo deja 24 px de acolchado, así que sobresalen 10 px y el navegador saca barra
   horizontal. Ocurre en cuanto la ventana es más estrecha que el contenedor, o sea casi
   siempre.

   Se recorta en <main> porque todo lo que se anima vive ahí dentro: la cabecera y el pie están
   excluidos del reparto de marcadores. Recortar en <html> o <body> alcanzaría también a la
   cabecera pegajosa, al panel del menú y al botón flotante.

   Y es `clip`, no `hidden`: `hidden` convertiría <main> en un contenedor desplazable y
   arrastraría el eje vertical a `auto`, dándole su propia barra. `clip` recorta y ya. */
main{overflow-x:clip}

.anim [data-rv]{opacity:0}
.anim [data-rv="up"]{transform:translateY(26px)}
.anim [data-rv="left"]{transform:translateX(-34px)}
.anim [data-rv="right"]{transform:translateX(34px)}
.anim [data-rv="zoom"]{transform:scale(.965)}
.anim [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rv-d,0ms)
}

/* La cabecera se compacta al bajar: 74 px de alto pasan a 62 y el logo encoge con ella.
   Es el único movimiento permanente de la página, así que va suave y corto. */
.hdr{transition:box-shadow .3s ease}
.hdr-in{transition:height .28s ease}
.logo img{transition:height .28s ease}
.hdr.is-scrolled{box-shadow:0 6px 26px rgba(105,25,34,.30)}
.hdr.is-scrolled .hdr-in{height:62px}
.hdr.is-scrolled .logo img{height:40px}

/* Cifras que suben desde cero al entrar en pantalla. El ancho se fija con ch para que el
   contador no ensanche la columna mientras corre y la fila baile. */
.stat b,.statbar b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  /* Nada de destapar ni de contar: se ve todo, quieto, desde el primer momento. */
  .anim [data-rv],.anim [data-rv].is-in{opacity:1;transform:none;transition:none}
  .hdr-in,.logo img,.hdr{transition:none}
}

/* Entrada del hero. No pasa por el observador: está a la vista desde el primer momento, así
   que se anima con keyframes al cargar y no al hacer scroll. El video y su máscara quedan
   fuera a propósito —costó quitarles el parpadeo y no se tocan—; solo se mueve el texto. */
@keyframes gs-entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.anim .hero-copy>*,
.anim .phero-in>div>*{animation:gs-entra .8s cubic-bezier(.22,.61,.36,1) backwards}
.anim .hero-copy>*:nth-child(1),.anim .phero-in>div>*:nth-child(1){animation-delay:.10s}
.anim .hero-copy>*:nth-child(2),.anim .phero-in>div>*:nth-child(2){animation-delay:.20s}
.anim .hero-copy>*:nth-child(3),.anim .phero-in>div>*:nth-child(3){animation-delay:.30s}
.anim .hero-copy>*:nth-child(4),.anim .phero-in>div>*:nth-child(4){animation-delay:.40s}
.anim .phero-in>div>*:nth-child(5){animation-delay:.50s}
.anim .phero-in>div>*:nth-child(6){animation-delay:.60s}

@media (prefers-reduced-motion:reduce){
  .anim .hero-copy>*,.anim .phero-in>div>*{animation:none}
}

/* ============================================================
   SELECTOR DE IDIOMA
   ============================================================
   No es un desplegable: es un enlace de un solo clic que lleva a esta misma página en el otro
   idioma. Por eso rotula el idioma de destino —«English» en el sitio en español y «Español»
   en el inglés— y no el que se está viendo: en un control de un clic lo que hay que anunciar
   es adónde lleva.

   Aparece dos veces por página, en el menú y en la barra inferior del pie, y las dos salen de
   parciales distintos. La dirección la pone build.js sustituyendo {{ALT}}, así que apunta a la
   traducción de esa página concreta y no a la portada del otro idioma.

   Va sobre fondo oscuro en los dos sitios (menú rojo, pie azul), así que el texto es blanco. */
.lang{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);border-radius:999px;
  padding:7px 15px;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  line-height:1.2;transition:background .2s,border-color .2s
}
.lang:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.55)}
.lang svg{width:16px;height:16px;flex:none;color:var(--gold-2)}

/* ============================================================
   MOVIMIENTO DE LOS BLOQUES DE IMAGEN Y DEL MAPA
   ============================================================ */

/* El mapa y las franjas con foto a un lado crecen y encogen siguiendo al scroll. La escala la
   escribe main.js directamente en el atributo style, fotograma a fotograma; aquí solo van el
   punto de anclaje y el aviso al navegador de que ese elemento va a moverse.

   Quién se escala en cada caso, con qué recorrido y por qué, está explicado en el bloque
   «Escala ligada al scroll» de main.js. */
.anim .usa-map-container,
.anim .story-media img,
.anim .founders-media img,
.anim .cta-media img{transform-origin:center center;will-change:transform}

/* Video en la franja del hero de contacto. Mismo trato que .phero-art: llena el hueco y se
   recorta. La diferencia es el encuadre que hay que darle al archivo: .chero-art es una banda
   vertical estrecha que se funde por los DOS lados, así que solo se ve limpio su centro y el
   sujeto tiene que ir centrado en el video, no a un lado.
   Igual que allí, el póster no va de fondo permanente —asomaría durante el scroll con otro
   brillo— sino solo como respaldo cuando el video no se muestra. */
.chero-art img,.chero-art video{display:block;width:100%;height:100%;object-fit:cover;
  /* Baja el brillo del propio video. Un velo más opaco también daría contraste, pero aplasta
     el movimiento; el filtro multiplica, así que hunde las zonas quemadas —la pared blanca y
     el logo iluminado, que son las que se comían el texto— sin aplanar la escena. Medido: con
     velo solo, el subtítulo caía a 3,1 de contraste en esos puntos, por debajo del 4,5 exigido. */
  filter:brightness(.62)}
@media (prefers-reduced-motion:reduce){
  .chero-art{background:var(--poster) center/cover no-repeat}
  .chero-art::after{background:rgba(11,34,52,.80)}
  .chero-art video{display:none}
}

/* Mapa embebido de la oficina. El iframe de Google llega con un tamaño fijo de 600 × 450 que
   no cabe en la rejilla, así que se manda al ancho de su columna y se le da la altura de las
   otras dos celdas. El borde redondeado y el recorte los pone esta regla, no Google. */
.mapa{display:block;width:100%;min-height:235px;height:100%;border:0;border-radius:var(--r-lg)}

/* La foto de la oficina y el mapa, a la misma altura.
   Se consigue estirando la fila en lugar de darles un alto fijo: así siguen igualadas aunque
   cambie el texto de la columna de al lado o el ancho de la ventana, y no hay números mágicos
   que revisar. La foto recorta —object-fit:cover— en vez de deformarse; el texto se queda
   centrado, que estirado quedaría pegado arriba. */
.office{align-items:stretch}
.office>div:first-child{align-self:center}
.office .foto-split,.office .mapa{height:100%}
.office .foto-split{object-fit:cover}

@media (max-width:900px){
  /* A dos columnas y a una, cada celda va por su cuenta y estirar deformaría el encuadre.
     El mapa sí necesita un alto explícito: un iframe no tiene altura propia. */
  .office{align-items:center}
  .office .foto-split{height:auto}
  .office .mapa{height:235px}
}

/* ============================================================
   CABECERA EN ESCRITORIO: MENÚ CENTRADO
   ============================================================
   Tres columnas: logo, enlaces y acciones. Las laterales son 1fr y la del medio auto, que es
   lo que centra los enlaces respecto a la fila entera y no respecto al hueco que sobra. Con
   márgenes automáticos el grupo queda «a espacios iguales», que no es lo mismo: se iba a la
   derecha porque el logo mide menos que el idioma más el botón.

   Las acciones van a la derecha. A la izquierda no caben: el grupo logo + idioma + botón mide
   516 px de los 1180 de la fila, y un menú centrado empezaría en el 539 — 107 px por dentro.

   Todo esto vive bajo min-width:901px; por debajo el menú vuelve a ser el panel lateral. */
@media (min-width:901px){
  .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
  .nav{display:contents}
  .hdr-in>.logo{grid-column:1;justify-self:start}
  .nav-links{grid-column:2;display:flex;align-items:center;gap:4px}
  .nav-acciones{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}
  .hdr .nav-acciones .btn{margin-left:0}
}