/* ============================================================
   SICF — Tokens de diseño
   ============================================================ */
:root{
  /* Paleta */
  --blanco-hueso:#F7F4ED;
  --hueso-claro:#FDFCF8;
  --cobalto:#0047AB;
  --cobalto-profundo:#002D6B;
  --cobalto-claro:#3B82D6;
  --cobalto-tenue:#E4EDF9;
  --tinta:#1A2332;
  --gris-texto:#5A6472;
  --dorado:#C9A227;

  /* Bordes de apoyo derivados de la marca */
  --linea:#DCD7CA;
  --linea-cobalto:rgba(0,71,171,.18);

  /* Tipografía — una sola familia: IBM Plex Sans. Grotesca de esqueleto
     racional, remates planos y curvatura mínima; se diseñó para documentación
     técnica y financiera. La jerarquía se construye con peso, tamaño y
     tracking, no con contraste entre dos estilos. */
  --display:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;

  /* Escala de espaciado 4/8px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;

  /* Radios: casi rectos. Las esquinas redondeadas suavizan; un despacho
     fiscal comunica precisión, no amabilidad. Nada de píldoras. */
  --r-sm:2px; --r-md:2px; --r-lg:3px; --r-full:2px;

  /* Sombras suaves azuladas */
  --s1:0 1px 1px rgba(0,45,107,.04);
  --s2:0 1px 2px rgba(0,45,107,.06), 0 6px 14px rgba(0,45,107,.05);
  --s3:0 2px 4px rgba(0,45,107,.07), 0 14px 28px rgba(0,45,107,.08);

  /* Movimiento: recorridos amplios y lentos, sin rebote. Una sola curva de
     salida para todo, de modo que la página se sienta gobernada por un mismo
     criterio y no por efectos sueltos. */
  --ease:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,.84,.24,1);
  --t-entrada:900ms;
  --t-ui:280ms;

  --header-h:68px;
  --ancho:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}

body{
  font-family:var(--sans);
  background:var(--blanco-hueso);
  color:var(--tinta);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* La slab es monolineal y de caja ancha: pide tracking casi neutro (una serif de
   alto contraste toleraba -.015/-.03em; aquí eso apiñaría los remates). */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.16;letter-spacing:-.021em;margin:0;color:var(--cobalto-profundo)}
h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.06;letter-spacing:-.035em;font-weight:600}
h2{font-size:clamp(1.75rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.25}
p{margin:0}
a{color:var(--cobalto);text-decoration-thickness:1px;text-underline-offset:3px}
img,svg{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:600;color:var(--cobalto-profundo)}

:focus-visible{outline:3px solid var(--cobalto);outline-offset:3px;border-radius:var(--e1)}
.oscuro :focus-visible{outline-color:#FFFFFF}

/* Utilidades ------------------------------------------------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--e5)}
@media (min-width:768px){.contenedor{padding-inline:var(--e6)}}
@media (min-width:1280px){.contenedor{padding-inline:var(--e7)}}

.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.salto-contenido{
  position:absolute;left:var(--e4);top:-100px;z-index:200;
  background:var(--cobalto);color:#fff;padding:var(--e3) var(--e5);
  border-radius:var(--r-sm);font-weight:600;text-decoration:none;
  transition:top .2s var(--ease);
}
.salto-contenido:focus{top:var(--e3)}

section{position:relative}
.seccion{padding-block:clamp(var(--e7),6vw,var(--e8))}

/* Numeración de sección tipo 01/02/03 */
.etiqueta-seccion{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4)}
.etiqueta-seccion .num{
  font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:.06em;
  color:var(--cobalto);background:var(--cobalto-tenue);
  border-radius:var(--r-full);padding:2px 12px;line-height:1.7;
}
.etiqueta-seccion .txt{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-texto);
}
.oscuro .etiqueta-seccion .num{color:#EAF1FB;background:rgba(255,255,255,.14)}
.oscuro .etiqueta-seccion .txt{color:#B9C7DC}

.intro-seccion{max-width:60ch;margin-top:var(--e4);color:var(--gris-texto);font-size:clamp(1rem,1.4vw,1.125rem)}
.oscuro{background:var(--cobalto-profundo);color:#E8EEF7}
.oscuro h2,.oscuro h3{color:#FFFFFF}
.oscuro .intro-seccion{color:#C3D0E2}

/* Botones ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.2;
  padding:var(--e3) var(--e5);min-height:48px;
  border-radius:var(--r-full);border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn svg{flex:0 0 auto}
.btn-primario{background:var(--cobalto);color:#fff;box-shadow:var(--s1)}
.btn-primario:hover{background:var(--cobalto-profundo);box-shadow:var(--s2);transform:translateY(-2px)}
.btn-secundario{background:transparent;color:var(--cobalto);border-color:var(--linea-cobalto)}
.btn-secundario:hover{background:var(--cobalto-tenue);border-color:var(--cobalto)}
.btn-claro{background:#fff;color:var(--cobalto-profundo);box-shadow:var(--s2)}
.btn-claro:hover{background:var(--cobalto-tenue);transform:translateY(-2px)}
.btn-grande{font-size:clamp(1rem,1.6vw,1.15rem);padding:var(--e4) var(--e6);min-height:60px}
.btn:active{transform:translateY(0)}

/* Filas de botones: envuelven solas, nunca desbordan la tarjeta */
.fila-btn{display:flex;flex-wrap:wrap;gap:var(--e3)}
.fila-btn>.btn{flex:1 1 auto;min-width:0}

/* ============================================================
   Header sticky + barra de progreso
   ============================================================ */
.cabecera{
  position:sticky;top:0;z-index:90;
  background:rgba(247,244,237,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.cabecera-fila{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  min-height:var(--header-h);
}
.logo{
  font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:.06em;
  color:var(--cobalto-profundo);text-decoration:none;display:flex;flex-direction:column;
}
.logo span{
  font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris-texto);margin-top:-4px;
}
.nav-escritorio{display:none}
@media (min-width:1024px){
  .nav-escritorio{display:flex;align-items:center;gap:var(--e5)}
}
.nav-escritorio a{
  position:relative;font-size:.9rem;font-weight:500;color:var(--tinta);
  text-decoration:none;padding-block:var(--e2);
}
.nav-escritorio a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;
  background:var(--cobalto);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-escritorio a:hover{color:var(--cobalto)}
.nav-escritorio a:hover::after,.nav-escritorio a.activo::after{transform:scaleX(1)}
.nav-escritorio a.activo{color:var(--cobalto);font-weight:600}

.acciones-cabecera{display:flex;align-items:center;gap:var(--e2)}
.cta-cabecera{display:none}
@media (min-width:640px){.cta-cabecera{display:inline-flex;font-size:.9rem;padding:var(--e2) var(--e4);min-height:44px}}

.btn-menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;background:transparent;border:1px solid var(--linea);
  border-radius:var(--r-sm);cursor:pointer;color:var(--cobalto-profundo);
}
@media (min-width:1024px){.btn-menu{display:none}}
.btn-menu:hover{background:var(--cobalto-tenue);border-color:var(--cobalto)}
.btn-menu svg{width:22px;height:22px}
.btn-menu .icono-cerrar{display:none}
.btn-menu[aria-expanded="true"] .icono-abrir{display:none}
.btn-menu[aria-expanded="true"] .icono-cerrar{display:block}

.progreso{
  position:absolute;left:0;bottom:-1px;height:3px;width:100%;
  background:transparent;overflow:hidden;
}
.progreso i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--cobalto),var(--cobalto-claro));
  transform:scaleX(0);transform-origin:0 50%;
}

/* Menú móvil */
.nav-movil{
  display:none;border-top:1px solid var(--linea);
  background:var(--hueso-claro);padding-block:var(--e4);
}
.nav-movil.abierto{display:block}
@media (min-width:1024px){.nav-movil,.nav-movil.abierto{display:none}}
.nav-movil ul{display:flex;flex-direction:column}
.nav-movil a{
  display:block;padding:var(--e3) 0;font-size:1.05rem;font-weight:500;
  color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea);
}
.nav-movil a:hover{color:var(--cobalto)}
.nav-movil .btn{margin-top:var(--e5);width:100%;border-bottom:2px solid transparent}
/* El CTA del menú móvil conserva el color del botón (gana a `.nav-movil a`) */
.nav-movil a.btn-primario{color:#fff}
.nav-movil a.btn-primario:hover{color:#fff}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(var(--e8),10vw,var(--e10)) clamp(var(--e7),7vw,var(--e9));
  background:
    radial-gradient(900px 520px at 88% -10%,var(--cobalto-tenue) 0%,rgba(228,237,249,0) 62%),
    linear-gradient(180deg,var(--hueso-claro) 0%,var(--blanco-hueso) 60%);
}
.hero-rejilla{display:grid;gap:clamp(var(--e7),6vw,var(--e9));align-items:center}
@media (min-width:1024px){.hero-rejilla{grid-template-columns:1.08fr .92fr}}

.hero-marca{
  display:inline-flex;align-items:center;gap:var(--e2);
  background:var(--cobalto-tenue);color:var(--cobalto);
  border:1px solid var(--linea-cobalto);border-radius:var(--r-full);
  padding:6px 14px;font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:var(--e5);
}
.hero-marca .punto{width:6px;height:6px;background:var(--cobalto);flex:0 0 auto}
.hero h1{margin-bottom:var(--e5)}
/* Regla recta bajo el énfasis, no un marcador: una línea, no una mancha. */
.hero h1 em{font-style:normal;color:var(--cobalto);border-bottom:4px solid var(--cobalto-tenue)}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--gris-texto);max-width:56ch}
.hero-sub strong{color:var(--cobalto-profundo)}
.hero .fila-btn{margin-top:var(--e7);max-width:560px}
@media (min-width:480px){.hero .fila-btn>.btn{flex:0 1 auto}}

.cinta-prueba{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e4);
  margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid var(--linea);
  font-size:.875rem;color:var(--gris-texto);
}
.cinta-prueba li{display:flex;align-items:center;gap:var(--e2)}
.cinta-prueba svg{width:16px;height:16px;color:var(--cobalto);flex:0 0 auto}

/* Composición abstracta del hero */
.hero-arte{position:relative;justify-self:center;width:100%;max-width:440px}
.hero-arte svg{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,45,107,.16))}
.hero-arte .flotante{
  position:absolute;background:var(--hueso-claro);border:1px solid var(--linea-cobalto);
  border-radius:var(--r-md);box-shadow:var(--s2);padding:var(--e3) var(--e4);
}
.hero-arte .f1{left:-6px;top:14%}
.hero-arte .f2{right:-6px;bottom:12%}
.hero-arte .flotante .k{
  font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--cobalto);
  display:block;line-height:1.1;
}
.hero-arte .flotante .v{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-texto)}
@media (max-width:480px){
  .hero-arte .f1{left:0} .hero-arte .f2{right:0}
  .hero-arte .flotante{padding:var(--e2) var(--e3)}
  .hero-arte .flotante .k{font-size:1.05rem}
}

/* ============================================================
   01 · Problemas
   ============================================================ */
.rejilla-dolores{display:grid;gap:var(--e5);margin-top:var(--e8)}
@media (min-width:640px){.rejilla-dolores{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.rejilla-dolores{grid-template-columns:repeat(4,1fr);gap:var(--e4)}}

.tarjeta-dolor{
  background:var(--hueso-claro);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--e6) var(--e5);
  box-shadow:var(--s1);
  display:flex;flex-direction:column;gap:var(--e3);
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.tarjeta-dolor:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--cobalto)}
.icono-dolor{
  width:48px;height:48px;flex:0 0 auto;border-radius:var(--r-md);
  background:var(--cobalto-tenue);color:var(--cobalto);
  display:grid;place-items:center;margin-bottom:var(--e2);
}
.icono-dolor svg{width:24px;height:24px}
.tarjeta-dolor p{color:var(--gris-texto);font-size:.95rem}

.nota-filtro{
  margin-top:var(--e7);padding:var(--e5) var(--e6);
  background:var(--cobalto-tenue);border-left:4px solid var(--cobalto);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--cobalto-profundo);
  font-family:var(--display);
}

/* ============================================================
   02 · Solución
   ============================================================ */
.rejilla-solucion{display:grid;gap:var(--e5);margin-top:var(--e8)}
@media (min-width:768px){.rejilla-solucion{grid-template-columns:repeat(3,1fr)}}

.pilar{
  position:relative;background:var(--hueso-claro);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--e6);box-shadow:var(--s1);
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.pilar:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--cobalto)}
.pilar.destacado{background:var(--cobalto-tenue);border-color:var(--linea-cobalto)}
.pilar-num{
  font-family:var(--display);font-size:2.5rem;font-weight:700;line-height:1;
  color:var(--cobalto);opacity:.28;margin-bottom:var(--e3);
}
.pilar h3{margin-bottom:var(--e3)}
.pilar p{color:var(--gris-texto);font-size:.95rem}
.pilar .sello{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--e3);
  background:var(--cobalto);color:#fff;border-radius:var(--r-full);
  padding:4px 12px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}

/* Franja de cifras (dorado sólo sobre fondo oscuro) */
.franja-cifras{padding-block:clamp(var(--e7),6vw,var(--e8))}
.rejilla-cifras{display:grid;gap:var(--e6);text-align:center}
@media (min-width:640px){.rejilla-cifras{grid-template-columns:repeat(3,1fr)}}
.cifra{display:flex;flex-direction:column;gap:var(--e2);align-items:center}
.cifra .n{
  font-family:var(--display);font-size:clamp(2.5rem,5.5vw,3.75rem);font-weight:700;
  line-height:1;color:var(--dorado);font-variant-numeric:tabular-nums;
}
.cifra .d{font-size:.95rem;color:#C3D0E2;max-width:26ch}
.cifra+.cifra{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--e6)}
@media (min-width:640px){
  .cifra+.cifra{border-top:0;border-left:1px solid rgba(255,255,255,.14);padding-top:0}
}

/* ============================================================
   03 · Método (timeline)
   ============================================================ */
.linea-tiempo{position:relative;margin-top:var(--e8);padding-left:var(--e7)}
@media (min-width:768px){.linea-tiempo{padding-left:var(--e8)}}
.linea-tiempo::before{
  content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;
  background:var(--linea);
}
@media (min-width:768px){.linea-tiempo::before{left:19px}}
.linea-tiempo::after{
  content:"";position:absolute;left:15px;top:12px;width:2px;
  height:var(--alto-linea,0px);
  background:linear-gradient(180deg,var(--cobalto),var(--cobalto-claro));
  transition:height 1200ms var(--ease-out);
}
@media (min-width:768px){.linea-tiempo::after{left:19px}}

.paso{position:relative;padding-bottom:var(--e7)}
.paso:last-child{padding-bottom:0}
.paso .nodo{
  position:absolute;left:calc(var(--e7) * -1);top:6px;
  width:34px;height:34px;
  background:var(--hueso-claro);border:2px solid var(--linea);
  display:grid;place-items:center;
  font-family:var(--display);font-size:.85rem;font-weight:700;color:var(--gris-texto);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
@media (min-width:768px){.paso .nodo{left:calc(var(--e8) * -1);width:40px;height:40px;font-size:.95rem}}
.paso.activo .nodo{background:var(--cobalto);border-color:var(--cobalto);color:#fff}
.paso h3{margin-bottom:var(--e2)}
.paso p{color:var(--gris-texto);max-width:62ch}
.paso .marca-mes{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--e3);
  background:var(--cobalto-tenue);color:var(--cobalto);border-radius:var(--r-full);
  padding:4px 12px;font-size:.75rem;font-weight:600;letter-spacing:.04em;
}

/* ============================================================
   04 · Servicios
   ============================================================ */
.rejilla-servicios{display:grid;gap:var(--e5);margin-top:var(--e8)}
@media (min-width:640px){.rejilla-servicios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.rejilla-servicios{grid-template-columns:repeat(3,minmax(0,1fr))}}

.servicio{
  display:flex;flex-direction:column;
  background:var(--hueso-claro);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--e6) var(--e5);box-shadow:var(--s1);
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.servicio:hover{transform:translateY(-2px);box-shadow:var(--s3);border-color:var(--cobalto)}
.servicio .icono{
  width:52px;height:52px;border-radius:var(--r-md);
  background:var(--cobalto-tenue);color:var(--cobalto);
  display:grid;place-items:center;margin-bottom:var(--e4);
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.servicio .icono svg{width:26px;height:26px}
.servicio:hover .icono{background:var(--cobalto);color:#fff}
.servicio h3{margin-bottom:var(--e3)}
.servicio p{color:var(--gris-texto);font-size:.95rem;flex:1 1 auto}
.badge-mensual{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  margin-bottom:var(--e3);background:var(--cobalto-profundo);color:#fff;
  border-radius:var(--r-full);padding:4px 12px;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.mini-cta{
  display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e5);
  font-size:.9rem;font-weight:600;color:var(--cobalto);text-decoration:none;
  align-self:flex-start;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:gap .2s var(--ease),border-color .2s var(--ease);
}
.mini-cta:hover{gap:var(--e3);border-color:var(--cobalto)}
.mini-cta svg{width:15px;height:15px}

/* ============================================================
   05 · Socios
   ============================================================ */
.rejilla-socios{display:grid;gap:var(--e5);margin-top:var(--e8)}
@media (min-width:900px){.rejilla-socios{grid-template-columns:repeat(2,1fr)}}

.socio{
  background:var(--hueso-claro);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--e6);box-shadow:var(--s1);display:flex;flex-direction:column;gap:var(--e4);
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.socio:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--cobalto)}
.socio-cabeza{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap}
.retrato{
  width:80px;height:80px;flex:0 0 auto;border-radius:var(--r-md);
  /* color sólido de respaldo: las iniciales siguen legibles si el degradado no pinta */
  background-color:var(--cobalto);
  background-image:linear-gradient(145deg,var(--cobalto),var(--cobalto-profundo));
  color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--s1);
}
.socio-cabeza h3{margin-bottom:2px}
.socio-rol{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalto)}
.socio p{color:var(--gris-texto);font-size:.95rem}
.socio-tels{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:auto;padding-top:var(--e2)}
.tel-chip{
  display:inline-flex;align-items:center;gap:var(--e2);
  background:var(--cobalto-tenue);color:var(--cobalto);
  border:1px solid var(--linea-cobalto);border-radius:var(--r-full);
  padding:var(--e2) var(--e4);font-size:.9rem;font-weight:600;
  text-decoration:none;min-height:44px;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.tel-chip:hover{background:var(--cobalto);color:#fff;border-color:var(--cobalto)}
.tel-chip svg{width:15px;height:15px;flex:0 0 auto}

/* Franja de valores */
.franja-valores{padding-block:clamp(var(--e7),6vw,var(--e8))}
.lista-valores{display:grid;gap:var(--e5);margin-top:var(--e6)}
@media (min-width:640px){.lista-valores{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.lista-valores{grid-template-columns:repeat(5,1fr);gap:var(--e4)}}
.valor{display:flex;flex-direction:column;gap:var(--e2)}
.valor .t{
  font-family:var(--display);font-size:1.1rem;font-weight:600;color:#fff;
  padding-top:var(--e3);border-top:2px solid var(--dorado);
}
.valor .d{font-size:.875rem;color:#C3D0E2}

/* ============================================================
   06 · Ubicación y contacto
   ============================================================ */
.rejilla-contacto{display:grid;gap:var(--e6);margin-top:var(--e8);align-items:start}
@media (min-width:900px){.rejilla-contacto{grid-template-columns:1fr 1fr;gap:var(--e8)}}

.bloque-contacto{
  background:var(--hueso-claro);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--e6);box-shadow:var(--s1);
}
.bloque-contacto h3{margin-bottom:var(--e4)}
.dato{display:flex;gap:var(--e4);padding-block:var(--e4);border-bottom:1px solid var(--linea)}
.dato:last-of-type{border-bottom:0;padding-bottom:0}
.dato .ic{
  width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-sm);
  background:var(--cobalto-tenue);color:var(--cobalto);display:grid;place-items:center;
}
.dato .ic svg{width:20px;height:20px}
.dato .k{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-texto);margin-bottom:2px}
.dato .v{font-size:1rem;color:var(--tinta)}
.dato .v a{font-weight:600;text-decoration:none}
.dato .v a:hover{text-decoration:underline}

.aviso-cita{
  display:flex;gap:var(--e3);align-items:flex-start;margin-top:var(--e5);
  background:var(--cobalto-tenue);border-radius:var(--r-md);padding:var(--e4);
  font-size:.9rem;color:var(--cobalto-profundo);
}
.aviso-cita svg{width:20px;height:20px;flex:0 0 auto;color:var(--cobalto);margin-top:2px}

/* Mapa abstracto */
.mapa-abstracto{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--linea-cobalto);background:var(--cobalto-tenue);
  box-shadow:var(--s2);
}
.mapa-abstracto svg{width:100%;height:auto;display:block}
.mapa-pin{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  background:var(--hueso-claro);border-radius:var(--r-md);box-shadow:var(--s2);
  padding:var(--e3) var(--e4);text-align:center;max-width:76%;
}
.mapa-pin .t{font-family:var(--display);font-weight:700;color:var(--cobalto-profundo);font-size:.95rem;line-height:1.3}
.mapa-pin .s{font-size:.78rem;color:var(--gris-texto);margin-top:2px}

/* ============================================================
   Cierre de conversión + FAQ
   ============================================================ */
.cierre{text-align:center}
.cierre h2{max-width:22ch;margin-inline:auto}
.cierre .intro-seccion{margin-inline:auto;text-align:center}
.cierre .fila-btn{justify-content:center;margin-top:var(--e7)}
.cierre .fila-btn>.btn{flex:0 1 auto}
.micro-copy{margin-top:var(--e4);font-size:.9rem;color:#B9C7DC}

.faq{max-width:760px;margin:clamp(var(--e8),8vw,var(--e9)) auto 0;text-align:left}
.faq-titulo{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#B9C7DC;text-align:center;margin-bottom:var(--e5);
}
.acordeon{border-top:1px solid rgba(255,255,255,.18)}
.acordeon-item{border-bottom:1px solid rgba(255,255,255,.18)}
.acordeon-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  background:transparent;border:0;cursor:pointer;
  padding:var(--e5) var(--e2);text-align:left;
  font-family:var(--display);font-size:clamp(1rem,1.6vw,1.15rem);font-weight:600;color:#fff;
  transition:color .2s var(--ease);
}
.acordeon-btn:hover{color:#BFD6F5}
.acordeon-btn .cruz{
  position:relative;width:20px;height:20px;flex:0 0 auto;
}
.acordeon-btn .cruz::before,.acordeon-btn .cruz::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.acordeon-btn .cruz::before{width:16px;height:2px}
.acordeon-btn .cruz::after{width:2px;height:16px}
.acordeon-btn[aria-expanded="true"] .cruz::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acordeon-panel{
  overflow:hidden;height:0;
  transition:height 520ms var(--ease-out);
}
.acordeon-panel>div{padding:0 var(--e2) var(--e5);color:#C3D0E2;font-size:.975rem}
.acordeon-panel>div strong{color:#fff}

/* ============================================================
   Footer
   ============================================================ */
.pie{background:#001B41;color:#C3D0E2;padding-block:var(--e8) var(--e6);font-size:.9rem}
.pie-rejilla{display:grid;gap:var(--e6)}
@media (min-width:768px){.pie-rejilla{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{color:#fff;font-size:.78rem;font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--e4)}
.pie a{color:#C3D0E2;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .logo{color:#fff;margin-bottom:var(--e3)}
.pie .logo span{color:#8FA8C9}
.pie ul li{padding-block:var(--e1)}
.pie-legal{
  margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);justify-content:space-between;
  font-size:.82rem;color:#8FA8C9;
}

/* ============================================================
   CTA "Asociémonos" con mini menú de socios
   ============================================================ */
.cta-asociarse{position:relative;display:inline-block}
.menu-socios{
  position:absolute;top:calc(100% + 8px);left:0;z-index:70;
  min-width:min(340px,calc(100vw - 48px));
  background:var(--hueso-claro);border:1px solid var(--linea-cobalto);
  border-radius:var(--r-lg);box-shadow:var(--s3);padding:var(--e4);
  opacity:0;transform:translateY(-10px);
  transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);
}
.menu-socios[hidden]{display:none}
.menu-socios.abierto{opacity:1;transform:none}
.menu-socios-tit{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-texto);margin-bottom:var(--e3);padding-inline:var(--e2);
}
.socio-opcion{
  display:flex;align-items:center;gap:var(--e3);
  padding:var(--e3);border-radius:var(--r-sm);text-decoration:none;
  border:1px solid transparent;
  transition:background-color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.socio-opcion+.socio-opcion{margin-top:var(--e2)}
.socio-opcion:hover,.socio-opcion:focus-visible{background:var(--cobalto-tenue);border-color:var(--linea-cobalto)}
.socio-opcion .ini{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  background-color:var(--cobalto);color:#fff;border-radius:var(--r-sm);
  font-weight:600;font-size:.95rem;letter-spacing:.02em;
}
.socio-opcion .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.socio-opcion .txt strong{color:var(--cobalto-profundo);font-size:.98rem;font-weight:600}
.socio-opcion .txt small{color:var(--gris-texto);font-size:.8rem;line-height:1.35}
@media (max-width:479px){
  .cta-asociarse{display:block;width:100%}
  .cta-asociarse>.btn{width:100%}
  .menu-socios{left:0;right:0;min-width:0}
}

/* ============================================================
   Modal de cotización
   ============================================================ */
.capa-modal{
  position:fixed;inset:0;z-index:110;
  display:none;align-items:center;justify-content:center;padding:var(--e4);
  background:rgba(0,27,65,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease);
}
.capa-modal.montado{display:flex}
.capa-modal.visible{opacity:1}
.modal{
  position:relative;width:100%;max-width:520px;
  background:var(--hueso-claro);border-radius:var(--r-lg);
  box-shadow:var(--s3);padding:var(--e8) var(--e6) var(--e6);
  text-align:center;
  transform:translateY(24px);opacity:0;
  transition:transform 480ms var(--ease-out),opacity 480ms var(--ease-out);
  max-height:calc(100dvh - 32px);overflow-y:auto;
}
.capa-modal.visible .modal{transform:none;opacity:1}
.capa-modal.saliendo{transition-duration:280ms}
.capa-modal.saliendo .modal{transition-duration:280ms}
.modal-cerrar{
  position:absolute;top:12px;right:12px;
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--linea);border-radius:var(--r-sm);
  color:var(--gris-texto);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.modal-cerrar:hover{background:var(--cobalto-tenue);color:var(--cobalto);border-color:var(--cobalto)}
.modal-cerrar svg{width:20px;height:20px}
.modal-marca{
  display:inline-flex;align-items:center;gap:var(--e2);margin-bottom:var(--e4);
  background:var(--cobalto-tenue);color:var(--cobalto);border-radius:var(--r-full);
  padding:5px 14px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.modal h2{font-size:clamp(1.4rem,3.4vw,1.8rem);margin-bottom:var(--e4)}
.modal p{color:var(--gris-texto);font-size:1rem;max-width:42ch;margin-inline:auto}
.modal .btn{width:100%;margin-top:var(--e6)}
.modal .nota{margin-top:var(--e4);font-size:.82rem;color:var(--gris-texto)}

/* ============================================================
   04 · Quiénes somos
   ============================================================ */
.rejilla-nosotros{display:grid;gap:var(--e5);margin-top:var(--e8)}
@media (min-width:640px){.rejilla-nosotros{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.rejilla-nosotros{grid-template-columns:repeat(4,1fr);gap:var(--e4)}}
.dato-empresa{display:flex;flex-direction:column;gap:var(--e2)}
.dato-empresa .k{
  font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--cobalto-profundo);
  padding-top:var(--e3);border-top:2px solid var(--cobalto);
}
.dato-empresa .v{font-size:.9rem;color:var(--gris-texto)}

/* ============================================================
   05 · Carrusel de socios y servicios
   Base sin JS: lista con scroll-snap. Los controles los inyecta
   el JS, así que nunca aparecen botones que no hacen nada.
   ============================================================ */
.carrusel-marco{position:relative;margin-top:var(--e8)}
.carrusel{
  display:flex;gap:var(--e5);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:var(--e1) var(--e1) var(--e5);
  scrollbar-width:thin;scrollbar-color:var(--linea-cobalto) transparent;
}
.carrusel::-webkit-scrollbar{height:6px}
.carrusel::-webkit-scrollbar-thumb{background:var(--linea-cobalto)}
.carrusel:focus-visible{outline:3px solid var(--cobalto);outline-offset:4px}
.diapo{
  flex:0 0 86%;max-width:430px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--e3);
  background:var(--hueso-claro);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--e6) var(--e5);box-shadow:var(--s1);
  transition:border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease);
}
@media (min-width:640px){.diapo{flex-basis:47%}}
@media (min-width:1024px){.diapo{flex-basis:31.5%}}
.diapo:hover{border-color:var(--cobalto);box-shadow:var(--s2)}
.diapo p{color:var(--gris-texto);font-size:.95rem}
.diapo .socio-tels{margin-top:auto}
.diapo .mini-cta{margin-top:auto}
.diapo .icono{
  width:48px;height:48px;border-radius:var(--r-md);background:var(--cobalto-tenue);
  color:var(--cobalto);display:grid;place-items:center;
}
.diapo .icono svg{width:24px;height:24px}

/* Ilustración de cabecera de cada diapositiva */
.diapo-ilustra{margin:calc(var(--e6) * -1) calc(var(--e5) * -1) var(--e4);overflow:hidden}
.diapo-ilustra svg,.diapo-ilustra img{width:100%;height:auto;display:block}
.diapo-dir{
  display:flex;align-items:flex-start;gap:var(--e2);margin-top:var(--e3);
  padding-top:var(--e3);border-top:1px solid var(--linea);
  font-size:.82rem;color:var(--gris-texto);
}
.diapo-dir svg{width:15px;height:15px;flex:0 0 auto;color:var(--cobalto);margin-top:2px}
/* Entrada lateral de las diapositivas: acompaña la dirección del carrusel */
.carrusel .revelar{transform:translateX(48px)}
.carrusel .revelar.dentro{transform:none}
.carrusel-ctrl{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e5)}
.car-btn{
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--hueso-claro);border:1px solid var(--linea-cobalto);
  border-radius:var(--r-sm);color:var(--cobalto);cursor:pointer;
  transition:background-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.car-btn:hover:not(:disabled){background:var(--cobalto);color:#fff;border-color:var(--cobalto)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-btn svg{width:20px;height:20px}
.car-puntos{display:flex;gap:var(--e2);flex-wrap:wrap;flex:1 1 auto}
.car-punto{
  width:26px;height:4px;padding:0;border:0;background:var(--linea);cursor:pointer;
  transition:background-color var(--t-ui) var(--ease);
}
.car-punto[aria-current="true"]{background:var(--cobalto)}
.car-punto:hover{background:var(--cobalto-claro)}
.car-estado{font-size:.8rem;color:var(--gris-texto);font-variant-numeric:tabular-nums;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  .carrusel{scroll-behavior:auto}
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.revelar{opacity:0;transform:translateY(40px);transition:opacity var(--t-entrada) var(--ease-out),transform var(--t-entrada) var(--ease-out)}
.revelar.dentro{opacity:1;transform:none}

/* ============================================================
   Movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revelar{opacity:1 !important;transform:none !important}
  .btn:hover,.servicio:hover,.tarjeta-dolor:hover,.pilar:hover,.socio:hover,.diapo:hover{transform:none}
  .linea-tiempo::after{transition:none}
  .modal{transform:none}
}

/* ============================================================
   Multipágina: migas, índice del recorrido y paso siguiente
   ============================================================ */
.migas{border-bottom:1px solid var(--linea);background:var(--hueso-claro)}
.migas .contenedor{display:flex;align-items:center;gap:var(--e2);padding-block:var(--e3);font-size:.82rem;color:var(--gris-texto)}
.migas a{color:var(--cobalto);text-decoration:none;font-weight:500}
.migas a:hover{text-decoration:underline}
.migas span[aria-hidden]{color:#8A8478}

/* Índice del recorrido en la portada */
.rejilla-recorrido{display:grid;gap:var(--e5);margin-top:var(--e8);counter-reset:paso}
@media (min-width:768px){.rejilla-recorrido{grid-template-columns:repeat(3,1fr)}}
.paso-recorrido{display:flex}
.paso-recorrido>a{
  display:flex;flex-direction:column;gap:var(--e3);width:100%;
  background:var(--hueso-claro);border:1px solid var(--linea);
  border-radius:var(--r-lg);padding:var(--e6) var(--e5);box-shadow:var(--s1);
  text-decoration:none;
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.paso-recorrido>a:hover{transform:translateY(-2px);box-shadow:var(--s2);border-color:var(--cobalto)}
.paso-recorrido .num{
  font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:.06em;
  color:var(--cobalto);background:var(--cobalto-tenue);align-self:flex-start;
  padding:2px 10px;line-height:1.7;
}
.paso-recorrido h3{color:var(--cobalto-profundo)}
.paso-recorrido p{color:var(--gris-texto);font-size:.95rem;flex:1 1 auto}
.paso-recorrido .ir{
  display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e3);
  font-size:.9rem;font-weight:600;color:var(--cobalto);
  border-bottom:1px solid transparent;padding-bottom:2px;align-self:flex-start;
  transition:gap var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.paso-recorrido>a:hover .ir{gap:var(--e3);border-color:var(--cobalto)}
.paso-recorrido .ir svg{width:15px;height:15px}

/* Cierre de subpágina: el paso siguiente del recorrido */
.seccion-siguiente{padding-block:clamp(var(--e7),7vw,var(--e9));background:var(--hueso-claro);border-top:1px solid var(--linea)}
.bloque-siguiente{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e5);
}
.bloque-siguiente .txt{
  font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:600;
  color:var(--cobalto-profundo);letter-spacing:-.015em;flex:1 1 320px;
}
.bloque-siguiente .btn{flex:0 0 auto}

/* El h1 de una subpágina es el título de su sección, no un titular de portada:
   conserva la semántica de nivel 1 con el tamaño visual de un h2. */
h1.titulo-pagina{font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.16;letter-spacing:-.021em}

/* ============================================================
   Logotipo real en cabecera y pie
   ============================================================ */
.logo{flex-direction:row;align-items:center;gap:var(--e3)}
.logo img{width:auto;height:42px;flex:0 0 auto}
.logo-txt{
  display:flex;flex-direction:column;line-height:1;
  font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:.07em;
}
.logo-txt small{
  font-size:.54rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gris-texto);margin-top:3px;
}
.pie .logo img{height:52px;filter:brightness(0) invert(1)}
.pie .logo-txt small{color:#8FA8C9}
@media (max-width:479px){.logo img{height:34px}.logo-txt{font-size:1.15rem}}

/* ============================================================
   Hero sobre fotografía
   La imagen es un <img> real, no un fondo CSS: se indexa y admite alt.
   El velo es un color sólido con alfa, no un degradado, para que el
   contraste del texto blanco sea calculable y no dependa del píxel
   que quede debajo. Con .84 sobre #001D44 el peor caso posible
   (fotografía blanca) sigue dando 10:1 con texto blanco.
   ============================================================ */
.hero{position:relative;isolation:isolate;background:var(--cobalto-profundo)}
.hero-fondo{position:absolute;inset:0;z-index:-2;display:block}
.hero-fondo img{
  width:100%;height:100%;object-fit:cover;
  /* La catedral vive en la derecha del lienzo. En escritorio no hay recorte
     horizontal, así que se ve entera junto al texto; en móvil, donde cover
     recorta a lo ancho, el 88 % centra la ventana sobre ella en lugar de
     ampliar un trozo cualquiera. */
  object-position:88% 50%;
}
@media (max-width:700px){
  /* La composición vertical ya viene centrada: no hace falta desplazarla. */
  .hero-fondo img{object-position:50% 42%}
}
.hero-velo{position:absolute;inset:0;z-index:-1;background-color:rgba(0,29,68,.72)}
.hero-sobre-foto{grid-template-columns:1fr !important;max-width:760px}
.hero .hero-marca{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
.hero .hero-marca .punto{background:#fff}
.hero h1{color:#fff}
.hero h1 em{color:#BFD6F5;border-bottom-color:rgba(191,214,245,.45)}
.hero .hero-sub{color:#D6E2F2}
.hero .hero-sub strong{color:#fff}
.hero .cinta-prueba{color:#C3D0E2;border-top-color:rgba(255,255,255,.2)}
.hero .cinta-prueba svg{color:#BFD6F5}
.hero .btn-secundario{color:#fff;border-color:rgba(255,255,255,.42)}
.hero .btn-secundario:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* El titular cede el protagonismo a la fotografía */
.titulo-hero-menor{
  font-size:clamp(1.45rem,2.7vw,2.15rem);
  line-height:1.22;letter-spacing:-.018em;font-weight:600;
  max-width:24ch;
}

/* ============================================================
   Hero: el nombre de la firma en primera plana
   La marca es ahora el h1 —es la declaración principal de la
   portada— y la pregunta baja a subtítulo, conservando su tamaño
   anterior. Sigue habiendo un solo h1 por página.
   ============================================================ */
.titulo-marca{display:flex;flex-direction:column;gap:var(--e2);margin-bottom:var(--e4)}
.marca-sigla{
  font-size:clamp(3rem,7vw,5rem);font-weight:700;line-height:.92;
  letter-spacing:.02em;color:#fff;
}
.marca-nombre{
  font-size:clamp(.82rem,1.5vw,1.05rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#BFD6F5;
  line-height:1.35;
}
.hero-pregunta{
  font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.24;
  letter-spacing:-.018em;font-weight:600;color:#fff;
  max-width:26ch;margin-bottom:var(--e5);
}
.hero-pregunta em{
  font-style:normal;color:#BFD6F5;
  border-bottom:3px solid rgba(191,214,245,.45);
}
@media (max-width:479px){.marca-nombre{letter-spacing:.14em}}

/* ============================================================
   Bienvenida (/hola): página del QR de las tarjetas
   ============================================================ */
.intro-bienvenida p+p{margin-top:var(--e3)}
.tarjeta-dolor .mini-cta{margin-top:auto;padding-top:var(--e2)}
.micro-copy a{color:#FFFFFF}

/* ============================================================
   Calendario fiscal (/calendario-fiscal)
   ============================================================ */
.nota-cal{margin-top:var(--e3);font-size:.9rem;color:var(--gris-texto)}
.cal-portada .fila-btn{margin-top:var(--e6)}
.cal-rejilla{display:grid;gap:var(--e7);align-items:center}
@media (min-width:900px){.cal-rejilla{grid-template-columns:1.25fr 1fr;gap:var(--e8)}}

/* Hoja de calendario de pared: el vencimiento más cercano */
.hoja{
  max-width:380px;width:100%;justify-self:center;background:var(--hueso-claro);
  border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 2px 0 var(--linea),0 5px 0 -1px #EFEBE1,0 6px 0 -1px var(--linea),0 22px 44px rgba(0,45,107,.14);
}
.hoja-mes{
  background:var(--cobalto);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:var(--e3) var(--e5);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;
}
.hoja-mes .aro{width:12px;height:12px;border-radius:50%;background:var(--cobalto-profundo);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.hoja-cuerpo{padding:var(--e5) var(--e6) var(--e6);text-align:center;display:grid;gap:var(--e2)}
.hoja-dia{font-size:clamp(5rem,11vw,7.5rem);font-weight:700;line-height:.95;color:var(--cobalto-profundo);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hoja-semana{text-transform:capitalize;color:var(--gris-texto);font-weight:500}
.hoja-cuenta{
  justify-self:center;margin-top:var(--e2);padding:4px 12px;border-radius:var(--r-sm);
  background:var(--cobalto-tenue);color:var(--cobalto);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.hoja-titulo{font-size:1.2rem;margin-top:var(--e2)}
.hoja-detalle{color:var(--gris-texto);font-size:.93rem}

/* Los siguientes, como hojas pequeñas */
.despues{margin-top:var(--e8)}
.subtitulo-cal{font-size:clamp(1.15rem,1.8vw,1.35rem)}
.rejilla-vencimientos{list-style:none;display:grid;gap:var(--e4);margin-top:var(--e4);padding:0}
@media (min-width:768px){.rejilla-vencimientos{grid-template-columns:repeat(3,1fr)}}
.vencimiento{
  background:var(--hueso-claro);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--e4);display:flex;gap:var(--e4);align-items:flex-start;box-shadow:var(--s1);
}
.mini-hoja{flex:0 0 58px;border:1px solid var(--linea);border-radius:var(--r-md);overflow:hidden;text-align:center;background:#fff}
.mini-hoja .m{display:block;background:var(--cobalto);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 0}
.mini-hoja .d{display:block;font-size:1.6rem;font-weight:700;color:var(--cobalto-profundo);padding:4px 0 6px;font-variant-numeric:tabular-nums}
.venc-cuenta{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cobalto)}
.vencimiento h3{font-size:1rem;margin-top:2px}
.venc-detalle{color:var(--gris-texto);font-size:.88rem;margin-top:2px}

/* El año de un vistazo */
.leyenda-anual{font-weight:600;color:var(--cobalto-profundo);border-bottom:3px solid var(--dorado)}
.anio{list-style:none;padding:0;margin-top:var(--e6);display:grid;gap:var(--e3)}
@media (min-width:480px){.anio{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){.anio{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.anio{grid-template-columns:repeat(4,1fr)}}
.mes{background:var(--hueso-claro);border:1px solid var(--linea);border-radius:var(--r-lg);padding:var(--e4)}
.mes h3{font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:var(--e2);padding-bottom:var(--e2);border-bottom:1px solid var(--linea)}
.mes ul{list-style:none;padding:0;margin-top:var(--e2);display:grid;gap:6px}
.mes li{display:flex;gap:var(--e2);align-items:baseline;font-size:.86rem;color:var(--gris-texto)}
.mes .dia{flex:0 0 30px;font-weight:700;color:var(--cobalto-profundo);font-variant-numeric:tabular-nums}
.mes li.anual{color:var(--tinta);font-weight:600}
.mes li.anual .dia{color:#8A6D12}
.mes li.anual::before{content:"";flex:0 0 4px;align-self:stretch;background:var(--dorado);border-radius:1px;margin-right:-4px}
.mes.actual{border-color:var(--cobalto);box-shadow:0 0 0 2px var(--cobalto),var(--s2);background:#fff}
.mes-marca{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--cobalto);padding:2px 8px;border-radius:var(--r-sm)}

.lista-novedades{list-style:none;margin-top:var(--e5);padding:0;display:grid;gap:var(--e3)}
.lista-novedades li{padding:var(--e4) var(--e5);border-left:4px solid var(--cobalto);background:var(--hueso-claro);border-radius:0 var(--r-md) var(--r-md) 0}

.car-punto[hidden]{display:none}
.linea-tiempo{list-style:none}

/* Portada: la catedral se ve. El velo es fuerte bajo el texto (izquierda)
   y se abre hacia la derecha, donde está la ilustración. En móvil el texto
   va encima de la catedral, así que el velo vuelve a ser parejo. */
.hero-velo{background:linear-gradient(90deg,rgba(0,29,68,.9) 0%,rgba(0,29,68,.78) 42%,rgba(0,29,68,.15) 72%,rgba(0,29,68,0) 100%)}
@media (max-width:700px){.hero-velo{background:rgba(0,29,68,.72)}}

/* Cabecera: el logo manda; el nombre en texto queda sólo para lectores de pantalla */
.cabecera .logo img{height:58px}
.cabecera .logo-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:479px){.cabecera .logo img{height:46px}}

/* ============================================================
   Portada: casos como diapositivas + diálogo con cotizador
   ============================================================ */
.cinta-prueba a{color:inherit;text-underline-offset:3px}
.problemas-pin{background:linear-gradient(180deg,var(--blanco-hueso),var(--hueso-claro))}
.problemas-escena{padding-block:clamp(var(--e7),6vw,var(--e8))}
.dialogo-problema{
  width:min(560px,calc(100% - 32px));max-height:calc(100vh - 32px);overflow:auto;
  border:1px solid var(--linea);border-radius:var(--r-lg);padding:var(--e6) var(--e5) var(--e5);
  background:var(--hueso-claro);color:var(--tinta);box-shadow:0 24px 64px rgba(0,29,68,.28);
}
.dialogo-problema::backdrop{background:rgba(0,29,68,.55)}
.dialogo-cerrar-form{position:absolute;top:var(--e3);right:var(--e3);margin:0}
.dialogo-problema h2{font-size:clamp(1.3rem,2.4vw,1.6rem);padding-right:var(--e7)}
.dialogo-problema h4{margin-top:var(--e5);font-size:.95rem;color:var(--cobalto-profundo)}
.dialogo-problema p,.dialogo-problema li{color:var(--gris-texto);font-size:.95rem}
.dialogo-problema ul{margin-top:var(--e2);padding-left:1.2em;display:grid;gap:var(--e1)}
.detalle-pasa{margin-top:var(--e3);font-style:italic}
.cotizador{margin-top:var(--e6);padding:var(--e5);background:var(--cobalto-tenue);border-radius:var(--r-md);display:grid;gap:var(--e2)}
.cotizador h4{margin-top:0}
.cotizador label{font-size:.85rem;font-weight:600;color:var(--cobalto-profundo);margin-top:var(--e2)}
.cotizador select{font:inherit;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--r-sm);background:#fff;color:var(--tinta)}
.cotizador .btn{margin-top:var(--e3);justify-content:center}
.cot-nota{font-size:.82rem !important}
/* Foto de la catedral: en escritorio entra completa y anclada a la derecha;
   sus orillas ya son del azul del fondo, así que no se nota el borde. */
@media (min-width:701px){.hero-fondo{left:42%}.hero-fondo img{object-fit:contain;object-position:center center}}

/* Casos como diapositivas (portada) */
.casos-rejilla{display:grid;gap:var(--e6)}
.casos-indice{list-style:none;padding:0;margin-top:var(--e5);display:grid;gap:var(--e1)}
.casos-indice button{
  width:100%;display:flex;gap:var(--e3);align-items:baseline;text-align:left;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:500;color:var(--gris-texto);
  background:none;border:0;border-left:3px solid var(--linea);padding:var(--e2) var(--e3);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.casos-indice button:hover{color:var(--cobalto-profundo)}
.casos-indice button:focus-visible{outline:3px solid var(--cobalto);outline-offset:2px}
.casos-indice button[aria-current="step"]{color:var(--cobalto-profundo);font-weight:700;border-left-color:var(--cobalto);background:var(--cobalto-tenue)}
.casos-indice .n{font-size:.78rem;font-weight:700;color:var(--cobalto);font-variant-numeric:tabular-nums}
.casos-diapos{list-style:none;padding:0;margin:0;display:grid;gap:var(--e5)}
.caso{
  background:var(--hueso-claro);border:1px solid var(--linea);border-top:4px solid var(--cobalto);
  border-radius:var(--r-lg);box-shadow:var(--s2);padding:var(--e6) var(--e5);
  display:flex;flex-direction:column;gap:var(--e3);
}
.caso-cabeza{display:flex;justify-content:space-between;align-items:center}
.caso-cabeza .icono-dolor{margin:0}
.caso-num{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--cobalto);font-variant-numeric:tabular-nums}
.caso h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2;text-wrap:balance}
.caso-pasa{color:var(--gris-texto);font-size:1.02rem}
.caso-columnas{display:grid;gap:var(--e5);margin-top:var(--e2);padding-top:var(--e4);border-top:1px solid var(--linea)}
.caso h4{font-size:.9rem;color:var(--cobalto-profundo);margin-bottom:var(--e2)}
.caso-columnas p,.caso-columnas li{font-size:.93rem;color:var(--gris-texto)}
.caso-columnas ul{list-style:disc;padding-left:1.2em;display:grid;gap:var(--e1)}
.caso-cotizar{align-self:flex-start;margin-top:var(--e3)}
@media (min-width:768px){.caso-columnas{grid-template-columns:1fr 1fr}}
/* Sin escena fija (JS apagado, pantalla muy baja, móvil o movimiento reducido):
   carrusel que se desliza de lado con scroll-snap nativo. Cada ficha ya dice
   «03 / 08», así que no hace falta contador ni índice. */
.casos-desliza{display:none;margin-top:var(--e3);font-size:.85rem;font-weight:600;color:var(--cobalto)}
.problemas-pin:not(.pin-activo) .casos-indice{display:none}
.problemas-pin:not(.pin-activo) .casos-desliza{display:block}
.problemas-pin:not(.pin-activo) .casos-diapos{
  --pad-lado:var(--e5);
  display:flex;gap:var(--e3);overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--pad-lado));padding:var(--e2) var(--pad-lado) var(--e4);
  scroll-padding-inline:var(--pad-lado);-webkit-overflow-scrolling:touch;
}
.problemas-pin:not(.pin-activo) .caso{flex:0 0 min(86%,460px);scroll-snap-align:start;padding:var(--e5) var(--e4)}
.problemas-pin:not(.pin-activo) .caso h3{font-size:1.25rem}
@media (min-width:768px){.problemas-pin:not(.pin-activo) .casos-diapos{--pad-lado:var(--e6)}}
@media (min-width:1280px){.problemas-pin:not(.pin-activo) .casos-diapos{--pad-lado:var(--e7)}}

/* Escena fija: transición «Empujar» de PowerPoint. Desde 560 px de alto, que es
   lo que deja una laptop de 1366x768 con la barra del navegador. */
@media (min-width:1024px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  .problemas-pin.pin-activo{height:calc(100vh + 8 * 50vh)}
  .problemas-pin.pin-activo .problemas-escena{position:sticky;top:72px;height:calc(100vh - 72px);display:flex;align-items:center;overflow:hidden;padding-block:var(--e5)}
  .problemas-pin.pin-activo .problemas-escena>.contenedor{width:100%}
  .problemas-pin.pin-activo .casos-rejilla{grid-template-columns:minmax(260px,.8fr) 1.6fr;align-items:center;gap:var(--e8)}
  /* El recuadro recorta: al pasar rápido, las fichas no cruzan sobre el índice.
     Las fichas se apilan en la misma celda de la rejilla, así el recuadro mide
     lo que la ficha más alta, aunque el navegador tenga la letra más grande. */
  .problemas-pin.pin-activo .casos-diapos{display:grid;overflow:hidden;margin:-12px;padding:12px}
  .problemas-pin.pin-activo .caso{
    grid-area:1/1;
    transform:translateX(110%);opacity:0;
    transition:transform .75s cubic-bezier(.22,.8,.2,1),opacity .6s ease;
  }
  .problemas-pin.pin-activo .caso.activo{transform:none;opacity:1}
  .problemas-pin.pin-activo .caso.pasado{transform:translateX(-110%);opacity:0}
}
/* Laptops de poca altura: la misma escena, más compacta */
@media (min-width:1024px) and (min-height:560px) and (max-height:780px) and (prefers-reduced-motion:no-preference){
  .problemas-pin.pin-activo .casos-lado h2{font-size:clamp(1.6rem,2.4vw,2rem)}
  .problemas-pin.pin-activo .casos-lado .intro-seccion{font-size:.95rem;margin-top:var(--e2)}
  .problemas-pin.pin-activo .casos-indice{margin-top:var(--e3)}
  .problemas-pin.pin-activo .casos-indice button{padding:5px var(--e3);font-size:.88rem}
  .problemas-pin.pin-activo .caso{padding:var(--e5)}
  .problemas-pin.pin-activo .caso h3{font-size:1.35rem}
  .problemas-pin.pin-activo .caso-columnas{padding-top:var(--e3);margin-top:0}
}

/* Presentación de la portada: título y texto en dos columnas */
#problemas{padding-bottom:var(--e5)}
@media (min-width:1024px){
  .intro-dos{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--e8);align-items:end}
  .intro-dos .intro-seccion{margin-top:0}
}

/* Portal de clientes (entrada al CRM) */
.cta-portal{display:none}
@media (min-width:1024px){.cta-portal{display:inline-flex;gap:var(--e2);font-size:.9rem;padding:var(--e2) var(--e4);min-height:44px}}
.portal-corto{display:none}
@media (min-width:1024px) and (max-width:1099px){.portal-largo{display:none}.portal-corto{display:inline}}
.nav-movil .enlace-portal{display:flex;align-items:center;gap:var(--e2);font-weight:600;color:var(--cobalto)}
.nav-movil .enlace-portal::before{content:"";width:8px;height:8px;border:2px solid currentColor;border-radius:2px}

/* Servicio como etiqueta sobre el título-beneficio (10 oct 2026). Mismo color
   que el texto de la ficha, que ya cumple AA sobre el hueso claro. */
.diapo .servicio-nombre{
  margin:0;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris-texto);
}