/* ═══════════════════════════════════════════════════════════════════════════
   CVS COBIÁN CONSULTORES — home
   Paleta: blanco · plata · azul de marca · terracota SOLO como acento.
   Movimiento: arquetipo Premium — 350/500/800 ms, cubic-bezier(.4,0,.2,1),
   0% de rebote. Capas: primaria + secundaria (+80 ms) + ambiental.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* Blanco y plata */
  --w:        #FFFFFF;
  --s-50:     #F8FAFB;
  --s-100:    #F1F4F6;
  --s-200:    #E4E9ED;
  --s-300:    #D2DAE0;
  --s-400:    #B4C0C8;

  /* Azul de marca */
  --b-900:    #01222D;
  --b-800:    #012F3D;
  --b-700:    #004E64;
  --b-600:    #016380;
  --b-500:    #007C9A;   /* marca de dato — validada */
  --b-100:    #E6F0F4;

  /* Terracota — sólo acentos */
  --t:        #C2542A;   /* marca de dato — validada */
  --t-soft:   #D9714A;
  --t-wash:   #FBEFE9;

  /* Tinta */
  --ink:      #0B1F27;
  --ink-2:    #4C6169;
  --ink-3:    #7B8C95;
  --on-b:     #EAF2F5;
  --on-b-2:   #9DB6C0;

  /* Líneas */
  --line:     #E4E9ED;
  --line-2:   #D2DAE0;
  --line-inv: rgba(234,242,245,.16);

  /* Tipografía */
  --disp: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Movimiento — Premium */
  --e:    cubic-bezier(.4,0,.2,1);
  --t-q:  350ms;
  --t-s:  500ms;
  --t-l:  800ms;
  --t-m:  200ms;   /* micro-feedback */

  /* Medidas */
  --wrap: 1320px;
  --gut:  clamp(1.25rem, 4vw, 4rem);
  --topH: 74px;
  --r:    16px;
  --r-sm: 10px;

  /* Sombras en capas */
  --sh-1: 0 1px 2px rgba(11,31,39,.04), 0 2px 8px rgba(11,31,39,.04);
  --sh-2: 0 2px 4px rgba(11,31,39,.05), 0 12px 28px -12px rgba(11,31,39,.16);
  --sh-3: 0 4px 8px rgba(11,31,39,.06), 0 28px 56px -20px rgba(11,31,39,.24);
}

/* ── 2. Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Proximidad, NO obligatorio: engancha igual al soltar cerca de un borde,
     pero no secuestra el scroll ni reposiciona la página cuando cambia el
     foco o crece el contenido de una diapositiva. */
  scroll-snap-type:y proximity;
}
body{
  margin:0; background:var(--w); color:var(--ink);
  font:400 1rem/1.6 var(--body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* En pantallas bajas o angostas el contenido no cabe: sin anclaje. */
@media (max-height:720px), (max-width:900px){
  html{ scroll-snap-type:none; }
}
/* Cuando el salto por JS está activo, él manda. Sin JS queda el `proximity`.
   `scroll-behavior:auto` es imprescindible: con `smooth`, cada scrollTo del
   tween se volvía a animar y el resultado quedaba a medio camino. */
html.js-deck{ scroll-snap-type:none; scroll-behavior:auto; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; scroll-snap-type:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* El atributo hidden manda sobre cualquier display de componente.
   Sin esto, .drawer{display:flex} y .chart__table{display:flex} ganaban al
   display:none del navegador: el menú quedaba invisible pero cubriendo la
   pantalla y se tragaba todos los clics. */
[hidden]{ display:none !important; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--disp); font-weight:600; letter-spacing:-.028em; margin:0; line-height:1.04; }
p{ margin:0; }
::selection{ background:var(--b-700); color:#fff; }
:focus-visible{ outline:2px solid var(--t); outline-offset:3px; border-radius:4px; }

.skip{ position:absolute; left:-9999px; z-index:200; background:var(--b-700); color:#fff; padding:.75rem 1.25rem; }
.skip:focus{ left:0; top:0; }
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

/* ── 2b. Precargador ─────────────────────────────────────────────────────── */
.preload{
  position:fixed; inset:0; z-index:300; background:var(--b-900);
  display:grid; place-items:center;
  transition:opacity var(--t-l) var(--e), visibility 0s linear var(--t-l);
  /* Red de seguridad: si el JS falla, se retira igual. */
  animation:preload-failsafe 0s linear 4s forwards;
}
.preload.is-done{ opacity:0; visibility:hidden; }
@keyframes preload-failsafe{ to{ opacity:0; visibility:hidden; } }

.preload__in{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.preload__in img{
  height:34px; width:auto; filter:brightness(0) invert(1); opacity:.95;
  animation:preload-in 700ms var(--e) both;
}
.preload__bar{
  width:132px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.14);
  animation:preload-in 700ms var(--e) 120ms both;
}
.preload__bar span{
  display:block; height:100%; width:0; background:var(--t-soft);
  transition:width var(--t-s) var(--e);
}
@keyframes preload-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .preload__in img,.preload__bar{ animation:none; }
}

/* ── 3. Animación de entrada ─────────────────────────────────────────────── */
/* Premium: opacidad + 18 px + escala 98→100. Sin rebote. */
.a{
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity var(--t-l) var(--e), transform var(--t-l) var(--e);
  transition-delay:var(--d,0ms);
}
.a.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .a{ transform:none; transition:opacity var(--t-m) linear; }
}

/* ── 4. Estructura del deck ──────────────────────────────────────────────── */
.deck{ display:block; }
.slide{
  min-height:100vh; min-height:100svh;
  scroll-snap-align:start; scroll-snap-stop:normal;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--topH) + clamp(1.5rem,4vh,3rem)) 0 clamp(1.5rem,4vh,3rem);
  position:relative; isolation:isolate;
}
.slide__in{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.slide--soft{ background:var(--s-50); }
.slide--dark{ background:var(--b-900); color:var(--on-b); }
.slide--dark h2,.slide--dark h3{ color:var(--on-b); }
.slide--end{ justify-content:space-between; }

/* Regla plata entre diapositivas claras */
.slide + .slide:not(.slide--dark)::before{
  content:""; position:absolute; inset:0 var(--gut) auto; height:1px; background:var(--line);
}

/* ── 5. Tipografía de sección ────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:flex-start; gap:.6rem; margin:0 0 1.4rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.slide--dark .eyebrow{ color:var(--on-b-2); }
.eyebrow .num{
  font-style:normal; color:var(--t); border:1px solid currentColor;
  border-radius:99px; padding:.18rem .5rem; font-size:.625rem;
}
.eyebrow .pip{ width:6px; height:6px; border-radius:50%; background:var(--t); flex:none; margin-top:.42em; }
.eyebrow .num{ flex:none; }

.hl{ display:block; color:var(--b-600); }
.slide--dark .hl{ color:var(--b-500); }

.shead{ margin-bottom:clamp(1.75rem,3.8vh,2.9rem); max-width:64ch; }
.shead h2{ font-size:clamp(1.9rem,4vw,3.4rem); }
.shead__lede{ margin-top:1.25rem; color:var(--ink-2); font-size:1.0625rem; max-width:52ch; }
.slide--dark .shead__lede{ color:var(--on-b-2); }
.shead--row{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:end; max-width:none;
}
.shead--row .shead__lede{ margin-top:0; }
.shead--c{ text-align:center; margin-inline:auto; }
/* Diapositivas densas: el encabezado cede altura al contenido. */
.shead--tight{ margin-bottom:clamp(1.25rem,2.5vh,2rem); }
.shead--tight h2{ font-size:clamp(1.7rem,3vw,2.6rem); }
.shead--tight .shead__lede{ font-size:.9375rem; }

/* ── 6. Botones ──────────────────────────────────────────────────────────── */
.btn{
  --bg:var(--b-700); --fg:#fff; --bd:var(--b-700);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-family:var(--disp); font-size:.9375rem; font-weight:500; text-decoration:none;
  border-radius:99px; cursor:pointer;
  transition:background var(--t-q) var(--e), border-color var(--t-q) var(--e),
             color var(--t-q) var(--e), box-shadow var(--t-q) var(--e), transform var(--t-m) var(--e);
}
.btn svg{ width:16px; height:16px; transition:transform var(--t-q) var(--e); }
.btn:hover{ box-shadow:var(--sh-2); }         /* secundaria: la sombra crece */
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.985); }

.btn--accent{ --bg:var(--t); --bd:var(--t); }
.btn--accent:hover{ --bg:#A9451F; --bd:#A9451F; }
.btn--line{ --bg:transparent; --fg:var(--ink); --bd:var(--line-2); }
.btn--line:hover{ --bd:var(--b-700); --fg:var(--b-700); }
.slide--dark .btn--line{ --fg:var(--on-b); --bd:var(--line-inv); }
.btn--sm{ padding:.65rem 1.15rem; font-size:.875rem; }
.btn--full{ width:100%; }

/* ── 7. Vidrio líquido ───────────────────────────────────────────────────── */
/* Cápsula translúcida: desenfoque + saturación, brillo interior arriba,
   sombra interior abajo y sombra exterior suave. Se adapta a fondo claro u oscuro. */
.glass{
  position:relative; border-radius:999px;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  backdrop-filter:blur(22px) saturate(190%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 1px 1px rgba(11,31,39,.04),
    0 10px 28px -12px rgba(11,31,39,.22),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.24);
  transition:background var(--t-s) var(--e), border-color var(--t-s) var(--e),
             box-shadow var(--t-s) var(--e);
}
.glass::before{   /* reflejo especular */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%);
  opacity:.85; transition:opacity var(--t-s) var(--e);
}
/* Sobre imagen o video sí hay materia que desenfocar: vidrio completo. */
.on-glass .glass{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);
  box-shadow:
    0 10px 32px -12px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.08);
}
.on-glass .glass::before{ opacity:.3; }

/* Sobre color plano el desenfoque no aporta nada y el reflejo se ve postizo:
   aquí la cápsula es un chip sobrio, sin brillo especular. */
.on-dark .glass{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);
  box-shadow:none;
}
.on-dark .glass::before{ opacity:0; }

/* Sin soporte de desenfoque: se cae a un sólido legible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(255,255,255,.94); }
  .on-dark .glass{ background:rgba(1,34,45,.9); }
}

/* ── 8. Barra superior flotante ──────────────────────────────────────────── */
.progress{ position:fixed; inset:0 0 auto; height:2px; z-index:101; }
.progress span{ display:block; height:100%; width:0; background:var(--t); transition:width 120ms linear; }

.top{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center;
  padding-top:clamp(.85rem,1.6vh,1.15rem);
  pointer-events:none;                     /* el hueco entre cápsulas no bloquea el scroll */
}
.top__brand,.top__pill,.top__end{ pointer-events:auto; }
.top__in{
  pointer-events:none;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
}
.top__brand img{ height:31px; width:auto; transition:filter var(--t-s) var(--e); }

.top__pill{ display:flex; gap:.25rem; padding:.35rem; }
.top__pill a{
  font-size:.8438rem; font-weight:500; text-decoration:none; color:var(--ink-2);
  padding:.5rem .95rem; border-radius:999px; position:relative; z-index:1;
  transition:color var(--t-m) var(--e), background var(--t-q) var(--e);
}
/* Sobre vidrio claro un hover blanco es invisible: se tiñe de azul. */
.top__pill a:hover{ color:var(--b-700); background:rgba(0,78,100,.1); }
.top__pill a[aria-current]{ color:var(--w); background:var(--b-700); }

.on-glass .top__pill a,.on-dark .top__pill a{ color:rgba(255,255,255,.82); }
.on-glass .top__pill a:hover,.on-dark .top__pill a:hover{ color:var(--w); background:rgba(255,255,255,.16); }
.on-glass .top__pill a[aria-current],.on-dark .top__pill a[aria-current]{
  color:var(--w); background:rgba(255,255,255,.22);
}

.on-glass .top__brand img,.on-dark .top__brand img{ filter:brightness(0) invert(1); }
.on-glass .burger span,
.top__end{ display:flex; align-items:center; gap:.6rem; }

.burger{
  display:none; width:42px; height:42px; border:none; cursor:pointer; position:relative;
  background:none; padding:0;
}
.burger span{
  position:absolute; left:12px; width:18px; height:1.5px; background:var(--ink); z-index:1;
  transition:transform var(--t-q) var(--e), background var(--t-s) var(--e);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:22px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:95; background:var(--w);
  padding:calc(var(--topH) + 2rem) var(--gut) 2rem;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity var(--t-q) var(--e);
}
.drawer.open{ opacity:1; }
.drawer nav{ display:flex; flex-direction:column; }
.drawer nav a{
  font-family:var(--disp); font-size:clamp(1.6rem,6.5vw,2.2rem); font-weight:600;
  letter-spacing:-.025em; text-decoration:none; padding-block:.7rem;
  border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:1rem;
}
.drawer nav a i{ font-family:var(--mono); font-style:normal; font-size:.7rem; color:var(--t); }
.drawer__foot{ display:flex; flex-direction:column; gap:.4rem; font-size:.875rem; color:var(--ink-2); }
.drawer__foot a{ text-decoration:none; }

/* ── 8. Riel de progreso ─────────────────────────────────────────────────── */
.rail{
  position:fixed; right:clamp(.9rem,2vw,1.9rem); top:50%; transform:translateY(-50%);
  z-index:90; display:flex; flex-direction:column; gap:.85rem;
}
.rail a{ display:block; padding:.25rem; position:relative; }
.rail a span{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--line-2); transition:background var(--t-q) var(--e), transform var(--t-q) var(--e);
}
.rail a:hover span{ transform:scale(1.35); }
.rail a[aria-current] span{ background:var(--t); transform:scale(1.35); }
.rail a::after{
  content:attr(data-label); position:absolute; right:calc(100% + .7rem); top:50%;
  transform:translateY(-50%) translateX(6px); white-space:nowrap;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(255,255,255,.9); padding:.25rem .5rem; border-radius:4px;
  opacity:0; pointer-events:none; transition:opacity var(--t-q) var(--e), transform var(--t-q) var(--e);
}
.rail a:hover::after{ opacity:1; transform:translateY(-50%); }
.rail.inv a span{ background:rgba(234,242,245,.28); }
.rail.inv a[aria-current] span{ background:var(--t-soft); }
.rail.inv a::after{ color:var(--on-b-2); background:rgba(1,34,45,.9); }

/* ── 9. Marcadores de imagen ─────────────────────────────────────────────── */
/* Malla de degradados + grano. Sustituir .ph por <img> cuando haya foto. */
.ph{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--s-100); }
.ph__art{
  position:absolute; inset:-8%;
  background:
    radial-gradient(62% 70% at 24% 16%, #12A0C4 0%, transparent 56%),
    radial-gradient(58% 64% at 84% 30%, #013D4E 0%, transparent 58%),
    radial-gradient(70% 76% at 58% 96%, rgba(194,84,42,.55) 0%, transparent 54%),
    linear-gradient(152deg, #DDE8ED 0%, #7C99A8 44%, #1F4557 100%);
  animation:drift 22s var(--e) infinite alternate;   /* ambiental: 10–20% de amplitud */
}
.ph__art--b{ background:
    radial-gradient(60% 66% at 78% 18%, #0E93B6 0%, transparent 56%),
    radial-gradient(66% 70% at 16% 78%, #012A38 0%, transparent 58%),
    linear-gradient(205deg, #E4EDF1 0%, #6F8E9E 48%, #17384A 100%); }
.ph__art--c{ background:
    radial-gradient(64% 70% at 28% 82%, #005B76 0%, transparent 58%),
    radial-gradient(56% 60% at 80% 14%, #9FB6C2 0%, transparent 56%),
    linear-gradient(124deg, #EAF1F4 0%, #86A2B0 46%, #265063 100%); }
.ph__art--d{ background:
    radial-gradient(62% 68% at 52% 20%, #0B7F9E 0%, transparent 56%),
    radial-gradient(72% 76% at 20% 92%, rgba(194,84,42,.5) 0%, transparent 56%),
    linear-gradient(172deg, #E2EBEF 0%, #799AA9 46%, #1C4356 100%); }

.ph::after{   /* grano */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@keyframes drift{
  from{ transform:translate3d(-1.2%,-1%,0) scale(1.04); }
  to  { transform:translate3d(1.4%,1.2%,0) scale(1.09); }
}

.ph__tag{
  position:absolute; left:.75rem; bottom:.75rem; z-index:2;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:rgba(1,34,45,.55); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.3rem .55rem; border-radius:99px;
}

.ph--hero{ aspect-ratio:4/5; box-shadow:var(--sh-3); }
/* Fotografía real dentro del marco */
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph .img--top{ object-position:center 30%; }
.ph .img--mid{ object-position:center 45%; }
.ph:has(img)::after{ opacity:.18; }   /* el grano se atenúa sobre foto real */

.ph--card{ aspect-ratio:16/9; margin-bottom:1.1rem; border-radius:var(--r-sm); }
.ph--portrait{ aspect-ratio:16/10; border-radius:var(--r) var(--r) 0 0; }
.ph--logo{ width:56px; height:56px; border-radius:var(--r-sm); margin-bottom:1rem; }
.ph--logo .ph__tag{ display:none; }

/* ── 10. Hero: imagen a sangre ───────────────────────────────────────────── */
/* Sin margen ni esquinas redondas: la imagen ocupa toda la diapositiva. */
.slide--hero{
  padding:0; justify-content:flex-end; overflow:hidden; background:var(--b-900);
}
.hero-img{
  position:absolute; inset:0; z-index:0;   /* contiene sus propias capas */
  margin:0; overflow:hidden;
  background:var(--b-900);
}

/* Capa 1 · el video, desaturado para que el duotono lo tiña limpio */
.hero-img__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:54% 50%;
  filter:grayscale(1) contrast(1.06) brightness(.92);
}
/* En vertical el recorte es agresivo: se encuadra hacia el documento. */
@media (max-width:820px){ .hero-img__video{ object-position:44% 46%; } }

/* Capa 2 · duotono: el degradado aporta el tono, el video la luminancia */
.hero-img__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(148deg, #0E6E8C 0%, #01394A 58%, #0A1A22 100%);
  mix-blend-mode:color;
}
.hero-img__grade::after{   /* un respiro de terracota, sin robar protagonismo */
  content:""; position:absolute; inset:0;
  background:radial-gradient(66% 60% at 88% 92%, rgba(194,84,42,.5) 0%, transparent 62%);
  mix-blend-mode:soft-light;
}

/* Capa 3 · cuadrícula técnica, más marcada arriba y disuelta donde va el texto */
.hero-img__grid{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:clamp(56px,5.2vw,84px) clamp(56px,5.2vw,84px);
  -webkit-mask-image:linear-gradient(200deg, #000 8%, rgba(0,0,0,.35) 48%, transparent 78%);
  mask-image:linear-gradient(200deg, #000 8%, rgba(0,0,0,.35) 48%, transparent 78%);
}

/* Capa 4 · grano */
.hero-img::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.34; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Capa 5 · degradado de legibilidad */
.hero-img__scrim{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(1,34,45,.5) 0%, rgba(1,34,45,0) 26%),
    linear-gradient(0deg,  rgba(1,34,45,.9) 0%, rgba(1,34,45,.42) 46%, rgba(1,34,45,0) 74%);
}

/* Sin blend en el navegador: el degradado se aplica encima con transparencia. */
@supports not (mix-blend-mode:color){
  .hero-img__video{ filter:contrast(1.04) brightness(.7) saturate(.35); }
  .hero-img__grade{ mix-blend-mode:normal; opacity:.55; }
}

.hero-copy{
  position:relative; z-index:2; color:var(--w);
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gut) clamp(4.5rem,10vh,7rem);
}
.hero__h1{
  font-size:clamp(2.4rem,5.4vw,4.8rem); font-weight:600; color:var(--w);
  text-wrap:balance; max-width:18ch;
}
.hero__h1 .hl{ color:#7FD3EA; }
.hero__lede{
  margin-top:1.4rem; font-size:clamp(1rem,1.3vw,1.1875rem);
  color:rgba(255,255,255,.82); max-width:46ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }

.btn--glass{
  --bg:rgba(255,255,255,.12); --fg:#fff; --bd:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
}
.btn--glass:hover{ --bg:rgba(255,255,255,.22); --bd:rgba(255,255,255,.5); }

.scroll-hint{
  position:absolute; left:50%; bottom:clamp(1.1rem,2.4vh,1.9rem); transform:translateX(-50%);
  z-index:2; display:flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.scroll-hint span{
  width:20px; height:32px; border:1px solid rgba(255,255,255,.4); border-radius:99px; position:relative;
}
.scroll-hint span::after{
  content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; border-radius:2px;
  background:var(--t); transform:translateX(-50%);
  animation:nudge 2.4s var(--e) infinite;
}
@keyframes nudge{ 0%,100%{ transform:translate(-50%,0); opacity:1 } 50%{ transform:translate(-50%,9px); opacity:.35 } }

/* ── 11. Panorama y gráfica ──────────────────────────────────────────────── */
/* Fondo fotográfico desvanecido: entra por arriba a la derecha y se disuelve
   antes de llegar a la gráfica, que es donde hay que leer. */
#s2{ overflow:hidden; }
#s2 .slide__in{ position:relative; z-index:1; }
.panorama__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/panorama-sat.jpg") center 28% / cover no-repeat;
  opacity:.34; filter:grayscale(.35) contrast(1.04);
  -webkit-mask-image:linear-gradient(212deg, #000 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,.12) 62%, transparent 82%);
  mask-image:linear-gradient(212deg, #000 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,.12) 62%, transparent 82%);
}

.panorama__grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.5rem,3.5vw,3rem); align-items:start;
}
.chart{
  margin:0; background:rgba(255,255,255,.045); border:1px solid var(--line-inv);
  border-radius:var(--r); padding:clamp(1.1rem,2.2vw,1.75rem);
}
.chart__head{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.chart__head h3{ font-size:1.0625rem; font-weight:600; }
.chart__legend{ display:flex; gap:1.1rem; font-size:.8125rem; color:var(--on-b-2); }
.chart__legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.key{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.key--rev{ background:var(--b-500); }
.key--can{ background:var(--t); }

.chart__plot{ width:100%; }
.chart__plot svg{ width:100%; height:auto; display:block; overflow:visible; }
.gridline{ stroke:rgba(234,242,245,.12); stroke-width:1; }
/* En unidades del viewBox: se escalan con la gráfica. */
.axis-lbl{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; fill:#9DB6C0; }
.bar{ transition:opacity var(--t-q) var(--e); cursor:pointer; }
.bar rect{ transition:y var(--t-l) var(--e), height var(--t-l) var(--e); }
.chart__plot:hover .bar{ opacity:.42; }
.chart__plot .bar:hover, .chart__plot .bar.on{ opacity:1; }
.bar-lbl{ font-family:var(--disp); font-size:16px; font-weight:600; fill:#EAF2F5; }

.chart__tip{
  position:absolute; z-index:5; pointer-events:none; opacity:0;
  background:var(--w); color:var(--ink); border-radius:var(--r-sm); box-shadow:var(--sh-3);
  padding:.6rem .8rem; font-size:.8125rem; white-space:nowrap;
  transition:opacity var(--t-m) var(--e);
}
.chart__tip.on{ opacity:1; }
.chart__tip b{ display:block; font-family:var(--disp); font-size:.75rem; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.3rem; }
.chart__tip i{ width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:.4rem; }

.chart__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line-inv);
}
.chart__foot p{ font-family:var(--mono); font-size:.625rem; color:var(--on-b-2); letter-spacing:.04em; }
/* Contorno que recorre el borde: sin él, el botón no se lee como pulsable. */
.chart__toggle{
  position:relative; isolation:isolate;
  background:rgba(255,255,255,.04); border:none; border-radius:99px; padding:.5rem 1rem;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-b); cursor:pointer;
  transition:color var(--t-m) var(--e), background var(--t-m) var(--e);
}
.chart__toggle::before{           /* el trazo giratorio */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
  background:conic-gradient(from var(--ang),
    rgba(255,255,255,.14) 0deg, rgba(255,255,255,.14) 250deg,
    var(--t-soft) 300deg, #FFC9AE 330deg, var(--t-soft) 350deg, rgba(255,255,255,.14) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin-ang 3.4s linear infinite;
}
.chart__toggle::after{            /* halo tenue que respira */
  content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-2;
  background:radial-gradient(closest-side, rgba(217,113,74,.4), transparent 72%);
  opacity:0; animation:glow-breathe 3.4s var(--e) infinite;
}
.chart__toggle:hover{ color:var(--w); background:rgba(255,255,255,.1); }

@property --ang{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes spin-ang{ to{ --ang:360deg } }
@keyframes glow-breathe{ 0%,100%{ opacity:.15 } 50%{ opacity:.55 } }

/* Sin @property el ángulo no anima: queda un contorno fijo, igual visible. */
@supports not (background:conic-gradient(from var(--ang), #000, #fff)){
  .chart__toggle::before{ background:linear-gradient(100deg, rgba(255,255,255,.16), var(--t-soft), rgba(255,255,255,.16)); animation:none; }
}
@media (prefers-reduced-motion:reduce){
  .chart__toggle::before,.chart__toggle::after{ animation:none; }
  .chart__toggle::after{ opacity:.3; }
}
/* Ocupa el hueco de la gráfica; nunca la empuja hacia abajo. */
.chart__table{ min-height:230px; max-height:46vh; overflow:auto; display:flex; align-items:center; }
.chart__table table{ width:100%; border-collapse:collapse; font-size:.8125rem; }
.chart__table th,.chart__table td{ text-align:right; padding:.5rem .7rem; border-bottom:1px solid var(--line-inv); }
.chart__table th:first-child,.chart__table td:first-child{ text-align:left; }
.chart__table th{ font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-b-2); font-weight:500; }

.panorama__aside{ display:flex; flex-direction:column; gap:1.5rem; }
.bigstat{ background:rgba(194,84,42,.12); border:1px solid rgba(194,84,42,.3);
  border-radius:var(--r); padding:1.5rem; }
.bigstat b{
  display:block; font-family:var(--disp); font-size:clamp(3rem,6vw,4.5rem); font-weight:700;
  letter-spacing:-.04em; line-height:.9; color:var(--t-soft); font-variant-numeric:tabular-nums;
}
.bigstat p{ margin-top:.9rem; font-size:.875rem; line-height:1.6; color:var(--on-b); }

.notes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.notes li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding-bottom:.9rem; border-bottom:1px solid var(--line-inv); }
.notes li:last-child{ border-bottom:none; padding-bottom:0; }
.notes .num{
  font-family:var(--mono); font-style:normal; font-size:.625rem; letter-spacing:.08em;
  color:var(--t-soft); border:1px solid rgba(217,113,74,.4); border-radius:99px;
  padding:.25rem .5rem; white-space:nowrap;
}
.notes span{ font-size:.8125rem; line-height:1.55; color:var(--on-b-2); }

/* ── 12. Tarjetas ────────────────────────────────────────────────────────── */
.cards{ display:grid; gap:clamp(1rem,2vw,1.5rem); }
.cards--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--w); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.25rem,2vw,1.75rem); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--t-q) var(--e), box-shadow var(--t-q) var(--e), transform var(--t-q) var(--e);
}
.card::before{   /* secundaria: la línea de acento crece al pasar el cursor */
  content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--t);
  transition:height var(--t-s) var(--e) 80ms;
}
.card:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px); }
.card:hover::before{ height:100%; }
.card__n{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; color:var(--ink-3);
  margin-bottom:1rem; display:block;
}
.card h3{ font-size:1.25rem; margin-bottom:.7rem; }
.card > p{ font-size:.9375rem; color:var(--ink-2); margin-bottom:1.25rem; }
.card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; margin-top:auto; }
.card li{
  font-size:.8438rem; color:var(--ink-2); padding-left:1.1rem; position:relative; line-height:1.5;
}
.card li::before{
  content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%;
  background:var(--b-500);
}

/* Equipo */
.tcard{
  background:var(--w); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--t-q) var(--e), box-shadow var(--t-q) var(--e), transform var(--t-q) var(--e);
}
.tcard:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px); }
.tcard__body{ padding:clamp(1.25rem,2vw,1.6rem); display:flex; flex-direction:column; flex:1; }
.tcard__role{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t); margin-bottom:.6rem;
}
.tcard h3{ font-size:1.1875rem; line-height:1.15; margin-bottom:.85rem; }
.tcard__bio{ font-size:.875rem; color:var(--ink-2); line-height:1.6; }
.chips{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.chips li{
  font-family:var(--mono); font-size:.5938rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--b-100); color:var(--b-700); border-radius:99px; padding:.32rem .6rem;
}

/* ── 13. Confianza ───────────────────────────────────────────────────────── */
.trust{ display:flex; flex-direction:column; align-items:center; }
.orgs{
  list-style:none; margin:0 0 clamp(2rem,5vh,3.5rem); padding:0; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,2vw,1.25rem);
}
/* Marquesina de logos. Los propios logos ya llevan el nombre escrito,
   así que las etiquetas sobraban. */
.marquee{
  width:100vw; margin-inline:calc(50% - 50vw);
  margin-bottom:clamp(2.5rem,6vh,4rem); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; width:max-content; will-change:transform;
  animation:slide-x 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide-x{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

.marquee__item{
  flex:none; display:grid; place-items:center;
  padding-inline:clamp(2rem,5vw,4.5rem);
}
.marquee__item img{
  height:clamp(54px,5.8vw,80px); width:auto; max-width:250px; object-fit:contain;
  opacity:.72; transition:opacity var(--t-q) var(--e);
}
.marquee__item:hover img{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
}

.pull{ margin:0; max-width:60ch; text-align:center; }
.pull p{
  font-family:var(--disp); font-size:clamp(1.35rem,2.9vw,2.3rem); font-weight:500;
  letter-spacing:-.022em; line-height:1.26; color:var(--on-b);
}
.pull footer{ color:var(--t-soft) !important; }
.pull footer{
  margin-top:1.25rem; font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--t);
}

/* ── 13b. Preguntas ──────────────────────────────────────────────────────── */
/* Lista + panel, NO acordeón: al abrirse un acordeón crece la diapositiva y
   descuadra la rejilla de anclaje. Aquí el alto no cambia nunca. */
.faq{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.25rem,2.5vw,2.25rem); align-items:start;
}
.faq__list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.faq__list button{
  width:100%; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  padding:1.05rem 1.1rem; font-size:.9375rem; line-height:1.4; color:var(--ink-2);
  transition:background var(--t-q) var(--e), color var(--t-q) var(--e),
             border-color var(--t-q) var(--e);
}
.faq__n{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.08em; color:var(--ink-3);
  transition:color var(--t-q) var(--e);
}
.faq__list button svg{ width:14px; height:14px; opacity:0; transform:translateX(-4px);
  transition:opacity var(--t-q) var(--e), transform var(--t-q) var(--e); }
.faq__list button:hover{ background:var(--w); border-color:var(--line); color:var(--ink); }
.faq__list button[aria-selected="true"]{
  background:var(--w); border-color:var(--line-2); color:var(--ink); font-weight:500;
  box-shadow:var(--sh-1);
}
.faq__list button[aria-selected="true"] .faq__n{ color:var(--t); }
.faq__list button[aria-selected="true"] svg{ opacity:1; transform:none; color:var(--t); }

.faq__panel{
  background:var(--w); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.5rem,2.8vw,2.25rem); min-height:clamp(340px,46vh,430px);
  display:flex; flex-direction:column;
  box-shadow:var(--sh-1);
}
.faq__panel.is-swap{ opacity:0; transform:translateY(6px); }
.faq__panel{ transition:opacity var(--t-q) var(--e), transform var(--t-q) var(--e); }
.faq__panel h3{ font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.2; margin-bottom:1rem; color:var(--b-700); }
.faq__panel p{ font-size:.9375rem; line-height:1.72; color:var(--ink-2); }
.faq__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t); text-decoration:none; width:fit-content;
  border-bottom:1px solid transparent; transition:border-color var(--t-m) var(--e), gap var(--t-q) var(--e);
}
.faq__more svg{ width:14px; height:14px; flex:none; }
.faq__more:hover{ border-color:currentColor; gap:.75rem; }

/* ── 14. Contacto ────────────────────────────────────────────────────────── */
/* Sin flex:1 — estiraba el bloque y el contenido se pegaba arriba
   dejando un hueco, ahora que el pie vive fuera de la diapositiva. */
.cta{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.cta__h{ font-size:clamp(2rem,4.4vw,3.6rem); }
.cta__lede{ margin-top:1.35rem; color:var(--on-b-2); max-width:44ch; font-size:1.0625rem; }
.cta__data{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:.9rem; }
.cta__data li{
  display:grid; grid-template-columns:96px 1fr; gap:1rem; align-items:baseline;
  padding-bottom:.9rem; border-bottom:1px solid var(--line-inv);
}
.cta__data li > span:first-child{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-b-2);
}
.cta__data a,.cta__data .v{ color:var(--on-b); word-break:break-word; }
/* Subrayado por text-decoration, no border-bottom: como celda de rejilla el
   enlace se estira al 100% y su borde duplicaba la línea de la fila. */
.cta__data a{
  justify-self:start; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:rgba(234,242,245,.3);
  transition:text-decoration-color var(--t-m) var(--e);
}
.cta__data a:hover{ text-decoration-color:var(--t-soft); }

.form{ background:rgba(255,255,255,.05); border:1px solid var(--line-inv);
  border-radius:var(--r); padding:clamp(1.25rem,2.5vw,1.9rem); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.fr{ margin-bottom:.9rem; }
.form label{
  display:block; font-family:var(--mono); font-size:.5938rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-b-2); margin-bottom:.45rem;
}
.form input,.form select{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line-inv);
  border-radius:var(--r-sm); padding:.8rem .9rem; color:var(--on-b);
  font:400 .9375rem/1.5 var(--body);
  transition:border-color var(--t-m) var(--e), background var(--t-m) var(--e);
}
.form select{ appearance:none; cursor:pointer; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5l4-4' fill='none' stroke='%239DB6C0' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:12px; }
.form select option{ background:var(--b-900); color:var(--on-b); }
.form input::placeholder{ color:rgba(157,182,192,.55); }
.form input:focus,.form select:focus{ border-color:var(--t-soft); background:rgba(255,255,255,.09); outline:none; }
.form input[aria-invalid="true"]{ border-color:#E0906E; }
.fr__err{ display:block; font-style:normal; font-family:var(--mono); font-size:.625rem;
  color:#E0906E; margin-top:.35rem; min-height:1em; }
.form__ok{ margin-top:.9rem; font-size:.875rem; color:var(--on-b);
  background:rgba(0,124,154,.22); border:1px solid rgba(0,124,154,.5);
  padding:.8rem .95rem; border-radius:var(--r-sm); }

/* ── 18b. Pie ────────────────────────────────────────────────────────────── */
/* Fuera del deck: no engancha con el scroll ni compite con la diapositiva de
   contacto, que necesita su alto completo para el formulario. */
.site-foot{
  background:var(--b-900); color:var(--on-b);
  border-top:1px solid var(--line-inv);
  padding-top:clamp(2.75rem,6vh,4.5rem);
  scroll-snap-align:none;
}
.site-foot__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.85fr)) minmax(0,1.05fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  padding-bottom:clamp(2.25rem,5vh,3.5rem);
}

.site-foot__brand img{ height:34px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.site-foot__brand p{ margin-top:1.25rem; font-size:.875rem; line-height:1.65; color:var(--on-b-2); max-width:38ch; }
.site-foot__claim{
  font-family:var(--mono) !important; font-size:.625rem !important; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t-soft) !important; margin-top:1rem !important;
}

.social{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; gap:.6rem; flex-wrap:wrap; }
.social a{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-size:.8125rem; color:var(--on-b);
  border:1px solid var(--line-inv); border-radius:999px; padding:.45rem .85rem;
  transition:border-color var(--t-q) var(--e), background var(--t-q) var(--e);
}
.social a:hover{ border-color:var(--t-soft); background:rgba(255,255,255,.06); }
.social svg{ width:14px; height:14px; }

.site-foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.site-foot__col h2{
  font-family:var(--mono); font-size:.625rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-b-2); margin:0 0 .35rem;
}
.site-foot__col a{
  font-size:.875rem; color:var(--on-b); text-decoration:none; opacity:.84;
  transition:opacity var(--t-m) var(--e), color var(--t-m) var(--e);
}
.site-foot__col a:hover{ opacity:1; color:var(--t-soft); }
.site-foot__col p{ font-size:.875rem; color:var(--on-b-2); }
.site-foot__hours{ font-size:.8125rem !important; color:var(--on-b-2); }
.site-foot__col--contact a[href^="mailto"]{ word-break:break-word; }
.site-foot__cta{ margin-top:.75rem; opacity:1 !important; }
.site-foot__cta:hover{ color:#fff !important; }

.site-foot__bar{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:1.25rem var(--gut); border-top:1px solid var(--line-inv);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em; color:var(--on-b-2);
}
.site-foot__legal{ display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; }
.site-foot__bar a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-inv); }
.site-foot__bar a:hover{ color:var(--t-soft); border-color:currentColor; }

/* ── 15. Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .panorama__grid{ grid-template-columns:1fr; }
  .shead--row{ grid-template-columns:1fr; align-items:start; }
  .cards--3{ grid-template-columns:repeat(2,1fr); }
  .orgs{ grid-template-columns:repeat(2,1fr); }
  .faq{ grid-template-columns:1fr; }
  .faq__panel{ min-height:0; }
  .cta{ grid-template-columns:1fr; }
  .rail{ display:none; }
  .site-foot__in{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
  .site-foot__brand{ grid-column:1 / -1; }
}

@media (max-width:820px){
  .top__pill{ display:none; }
  .burger{ display:block; }
  .slide{ min-height:auto; padding-block:calc(var(--topH) + 2.5rem) 3.5rem; }
  .slide--hero{ min-height:100svh; padding:0; }
  .hero-copy{ padding-bottom:clamp(3.5rem,9vh,5rem); }
}

@media (max-width:620px){
  .eyebrow{ font-size:.625rem; letter-spacing:.1em; }
  .cards--3{ grid-template-columns:1fr; }
  .orgs{ grid-template-columns:1fr; }
  .form__grid{ grid-template-columns:1fr; gap:0; }
  .top__end .btn{ display:none; }
  .cta__data li{ grid-template-columns:1fr; gap:.25rem; }
  .hero__cta .btn{ width:100%; }
  .scroll-hint{ display:none; }
  .site-foot__in{ grid-template-columns:1fr; gap:2rem; }
  .site-foot__bar{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .site-foot__legal{ gap:.9rem; }
  .site-foot__cta{ width:100%; }
}