/* ============================================================
   FASE 4 SEGUROS · Núcleo del sistema de diseño
   Tokens, reset, tipografía, header, botones.

   NOTA: index.html duplica este bloque INLINE a propósito, para que
   la landing pinte sin esperar ninguna petición de red (es la página
   que recibe el tráfico de campañas). Si tocas un token aquí,
   tócalo también en el <style> de index.html.
   Las páginas internas (blog, legal) sí cargan este archivo.
   ============================================================ */

@font-face{
  font-family:'Source Sans 3';
  src:url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --axa-blue:#00008F; --axa-red:#FF1721; --axa-red-dark:#E00F1C;
  --ink:#1A1A2E; --muted:#5B5B6E;
  --bg:#FFFFFF; --surface:#F4F5F7; --border:#E3E5EA;
  --fase4:#8F28AB;
  --ok:#0A7B3E; --err:#C81E1E; --wa:#25D366;
  --font:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font);
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem; --s7:4.5rem;
  --r1:8px; --r2:14px;
  --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);font-size:17px;line-height:1.55;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(1.75rem,5.5vw,2.75rem)}
h2{font-size:clamp(1.5rem,4vw,2.25rem)}
img{max-width:100%;height:auto;display:block}
a{color:var(--axa-blue)}
:focus-visible{outline:3px solid var(--axa-blue);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---- Header: logotipos centrados y menú debajo ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s ease
}
.site-header.is-stuck{box-shadow:0 4px 24px rgba(0,0,40,.08)}
.header-in{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:10px 0 8px;
  transition:padding .3s cubic-bezier(.2,.8,.3,1)
}
.brands{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;flex:none
}
.brands img.f4{height:30px;width:auto;transition:height .3s cubic-bezier(.2,.8,.3,1)}
/* Divisor con ½X de aire a cada lado (Política de Marca AXA, pág. 9) */
.brand-sep{width:1px;height:26px;background:var(--border);flex:none;transition:height .3s ease}
.brands img.axa{height:34px;width:34px;transition:height .3s cubic-bezier(.2,.8,.3,1),width .3s cubic-bezier(.2,.8,.3,1)}

/* Al hacer scroll el encabezado se compacta con suavidad */
.site-header.is-compact .header-in{padding:5px 0 6px}
.site-header.is-compact .brands img.f4{height:21px}
.site-header.is-compact .brands img.axa{height:25px;width:25px}
.site-header.is-compact .brand-sep{height:19px}

.site-nav{
  display:flex;align-items:center;gap:10px;
  width:100%;justify-content:center;min-width:0
}
.nav-list{
  display:flex;align-items:center;gap:2px;list-style:none;
  /* flex:1 + min-width:0 son imprescindibles: sin ellos la lista no cede
     espacio y empuja el botón de WhatsApp fuera de la barra en móvil. */
  flex:1 1 auto;min-width:0;justify-content:center;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;padding:2px
}
.nav-list::-webkit-scrollbar{display:none}
.nav-list a{
  display:block;padding:7px 13px;border-radius:99px;
  font-size:.9375rem;font-weight:600;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color .2s ease,background-color .2s ease
}
.nav-list a:hover{color:var(--axa-blue);background:var(--surface)}
.nav-list a.is-active{color:var(--axa-blue);background:rgba(0,0,143,.08)}

/* WhatsApp del menú: destacado con halo propio */
.nav-wa{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:9px 16px;border-radius:99px;
  background:var(--wa);color:#fff;text-decoration:none;
  font-size:.9375rem;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 12px rgba(37,211,102,.45);
  animation:wa-glow 3.2s ease-in-out infinite;
  transition:transform .2s ease,box-shadow .25s ease
}
.nav-wa svg{width:18px;height:18px}
.nav-wa:hover{transform:translateY(-1px);box-shadow:0 6px 26px rgba(37,211,102,.75)}
.nav-wa:active{transform:translateY(0)}
@keyframes wa-glow{
  0%,100%{box-shadow:0 2px 12px rgba(37,211,102,.42)}
  50%{box-shadow:0 4px 22px rgba(37,211,102,.72)}
}

/* ---- Botones ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 var(--s4);border:0;border-radius:var(--r1);
  font-family:var(--font);font-size:1.1875rem;font-weight:700;
  cursor:pointer;text-decoration:none;transition:background .18s ease,transform .12s ease
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--axa-red);color:#fff}
.btn-primary:hover{background:var(--axa-red-dark)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--axa-blue);color:var(--axa-blue)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1EBE5A}
.btn[disabled]{opacity:.55;cursor:not-allowed}
/* El atributo hidden debe ganar a display:inline-flex de .btn */
[hidden]{display:none!important}

/* ---- Encabezados de sección ---- */
.sec-head{max-width:60ch}
.sec-n{
  display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  color:var(--axa-blue);margin-bottom:var(--s2);font-variant-numeric:tabular-nums
}
.sec-lead{font-size:1.0625rem;color:var(--muted);margin-top:var(--s3);max-width:56ch}

@media (min-width:900px){
  .brands img.f4{height:34px}
  .brands img.axa{height:38px;width:38px}
}


/* En móviles estrechos el WhatsApp del menú se queda solo con el icono */
@media (max-width:520px){
  .nav-wa span{display:none}
  .nav-wa{padding:9px 12px}
  .nav-wa svg{width:20px;height:20px}
  .nav-list a{padding:7px 11px;font-size:.875rem}
}

/* En móvil la lista se desplaza en horizontal: el desvanecido del borde
   avisa de que hay más secciones y el WhatsApp nunca se recorta. */
@media (max-width:760px){
  .site-nav{gap:8px}
  .nav-list{
    justify-content:flex-start;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)
  }
}