/* =============================================================
   SKY BROKER — hoja de estilos única
   Archetype: Brutalist Grid (adaptado a marca roja/negra)
   1 Tokens · 2 Fuentes · 3 Reset · 4 Utilidades · 5 Tipografía
   6 Componentes · 7 Secciones · 8 Efectos · 9 Responsive
   10 Reduced-motion
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Marca — manual Cráneo Estudio, Pantone 185 C */
  --red:        #ff0019;   /* marca: acentos, bordes, numeros */
  --red-fill:   #d9000f;   /* relleno con texto blanco encima: 5.31:1 AA */
  --red-ink:    #d9000f;   /* variante accesible para texto sobre blanco */
  --black:      #000000;
  --white:      #ffffff;

  /* Superficies — NO son el negro y el blanco de marca.
     #000 puro contra #fff puro es la combinación más dura que existe y
     se lee barata en pantallas grandes. El negro de marca sigue siendo
     #000 (logo, isotipo); estas dos son solo el papel sobre el que se
     imprime todo lo demás. */
  --surface-dark:  #0b0b0c;   /* casi negro, apenas frío */
  --surface-light: #f3f1ed;   /* casi blanco, apenas cálido */

  /* Semánticos — sección oscura (por defecto) */
  --bg:         var(--surface-dark);
  --fg:         var(--white);
  --fg-soft:    rgba(255, 255, 255, .62);
  --line:       rgba(255, 255, 255, .20);
  --line-solid: #262628;

  /* Escala de z-index. Sin esto terminan apareciendo 9999 sueltos. */
  --z-fab:    400;
  --z-mnav:   490;
  --z-header: 500;
  --z-grain:  900;
  --z-splash: 9000;
  --z-skip:   9500;

  /* Tipografía
     --display : titulares y cifras. Nohemi, la fuente de marca.
     --text    : todo lo que se lee de corrido. Una grotesca de texto.
     --mono    : kickers, numeración y datos. */
  --display: "Nohemi", "Arial Black", Impact, sans-serif;
  --text:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Kerning de titulares — tocá solo este valor para abrir o cerrar
     todos los títulos del sitio a la vez. Más negativo = más junto. */
  --track-display: -.012em;

  /* Métrica */
  --gutter:   clamp(1.15rem, 4vw, 3rem);
  --maxw:     1560px;
  --nav-h:    68px;
  --slant:    -2.1deg;      /* eco de la inclinación del logotipo */

  /* Easings */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-in:    cubic-bezier(.7, 0, .84, 0);
  --ease-soft:  cubic-bezier(.25, .46, .45, .94);
}

/* Bloques sobre papel blanco */
.paper {
  --bg:         var(--surface-light);
  --fg:         #17171a;
  --fg-soft:    rgba(23, 23, 26, .62);
  --line:       rgba(23, 23, 26, .17);
  --line-solid: #dedbd5;
  --red:        var(--red-ink);
  --red-fill:   var(--red-ink);
}

/* =============================================================
   2. FUENTES — todas autoalojadas.

   Ninguna se pide a un servidor de terceros: el navegador del visitante
   no contacta a Google, asi que su IP no sale del sitio. Nohemi tiene
   licencia web comprada; Archivo y JetBrains Mono son SIL Open Font
   License 1.1, que permite el autoalojamiento (ver assets/fonts/OFL.txt).

   Solo se incluye el subconjunto latino, que es lo unico que usa el
   castellano: 198 KB en total, cacheados un año por vercel.json.
   ============================================================= */
@font-face {
  font-family: "Nohemi"; font-style: normal; font-weight: 900;
  font-display: swap; src: url("assets/fonts/Nohemi-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/Archivo-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/Archivo-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("assets/fonts/Archivo-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("assets/fonts/Archivo-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/JetBrainsMono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/JetBrainsMono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================
   3. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  background: var(--surface-dark);
  color: var(--white);
  font-family: var(--text);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  text-wrap: balance;
  line-height: .96;
  letter-spacing: var(--track-display);
  font-weight: 900;
  text-transform: uppercase;
}

::selection { background: var(--red-fill); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* Grano: una capa fija de ruido al 3.5%. Rompe la planicie digital de
   los fondos planos — es lo que separa una superficie "impresa" de un
   relleno de color. No intercepta clicks. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Brutalist: cero curvas en todo el sitio */
* { border-radius: 0 !important; }

/* =============================================================
   4. UTILIDADES
   ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: fixed; top: -120px; left: 1rem; z-index: var(--z-skip);
  padding: .7rem 1.1rem; background: var(--red-fill); color: var(--white);
  font-weight: 700; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em;
}
.skip-link:focus { top: 1rem; }

.section {
  background: var(--bg);
  color: var(--fg);
  position: relative;
  /* Asimetrico a proposito: el ojo pide un poco mas de aire abajo que
     arriba. Simetrico matematico se ve alto de arriba. */
  padding-block: clamp(3.4rem, 8.4vw, 7.4rem) clamp(4rem, 9.6vw, 8.6rem);
  border-top: 1px solid var(--line-solid);
}

.rule { height: 1px; background: var(--line); border: 0; }


/* --- 4.1 Ritmo de sección -------------------------------------
   Reemplazan los 121 style="" sueltos que había en el HTML. Con esto
   el espaciado vive en un solo lugar y se cambia una vez. */
.sec-lead  { margin-top: 1.1rem; }
.sec-grid  { margin-top: clamp(2rem, 4vw, 3.2rem); }
.sec-grid--tight { margin-top: clamp(1.4rem, 3vw, 2.1rem); }
.sec-btn   { margin-top: clamp(1.7rem, 3vw, 2.5rem); }
.flush     { margin-top: 0; }

.mw-14 { max-width: 14ch; }
.mw-15 { max-width: 15ch; }
.mw-16 { max-width: 16ch; }
.mw-20 { max-width: 20ch; }
.mw-56 { max-width: 56ch; }
.mw-60 { max-width: 60ch; }
.mw-62 { max-width: 62ch; }

.prosa      { color: var(--fg-soft); margin-top: 1.2rem; }
.card-t     { margin: .65rem 0 .45rem; }
.card-p     { color: var(--fg-soft); font-size: .9rem; }
.paso .card-t { margin: 0 0 .5rem; }
.paso p     { color: var(--fg-soft); font-size: .92rem; }
.ftr__desc  { color: var(--fg-soft); font-size: .9rem; max-width: 34ch; }
.ftr__dato  { color: var(--fg-soft); }
.cov-t      { margin-bottom: 1.4rem; }

/* =============================================================
   5. TIPOGRAFÍA
   ============================================================= */
.kicker {
  font-family: var(--mono);
  font-size: clamp(.66rem, 1.5vw, .76rem);
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.5rem;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.num {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--red);
}

.h-xl { font-size: clamp(2.7rem, 9.2vw, 8.2rem); }
.h-lg { font-size: clamp(2.1rem, 6vw, 4.6rem); }
.h-md { font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.h-sm { font-size: clamp(1.05rem, 2vw, 1.32rem); letter-spacing: var(--track-display); }

.lead {
  font-size: clamp(1.04rem, 1.9vw, 1.3rem);
  line-height: 1.56;
  letter-spacing: -.008em;   /* Archivo cierra bien un pelo en tamaños grandes */
  color: var(--fg-soft);
  max-width: 46ch;
}

.accent { color: var(--red); }

/* =============================================================
   6. COMPONENTES
   ============================================================= */

/* --- 6.1 Botones (hover invert, sin curvas) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.55rem;
  font-family: var(--text);
  font-size: clamp(.82rem, 1.5vw, .93rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid currentColor;
  transition: background-color .22s var(--ease-out),
              color .22s var(--ease-out),
              border-color .22s var(--ease-out),
              transform .22s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

.btn--wa {
  background: var(--red-fill);
  border-color: var(--red-fill);
  color: var(--white);
}
.btn--ghost {
  background: transparent;
  border-color: var(--fg);
  color: var(--fg);
}

@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover   { background: var(--fg); border-color: var(--fg); color: var(--bg); transform: translateY(-3px); }
  .btn--ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-3px); }
}
.btn:active { transform: translateY(0) scale(.978); }
.ramo:active, .cia:active, .miembro:active { transform: scale(.995); }

/* --- 6.2 Header --- */
.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface-dark);
  border-bottom: 1px solid var(--line-solid);
  transform: translateZ(0);
}
.hdr__in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img { height: 27px; width: auto; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .2rem; }
.nav__link {
  display: block;
  padding: .5rem .78rem;
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .74);
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.nav__link[aria-current="page"] { color: var(--white); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { background: var(--white); color: var(--black); }
}

.hdr__cta { display: none; }

.burger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  flex: none;
}
.burger span {
  display: block; width: 19px; height: 2px; background: var(--white);
  transition: transform .28s var(--ease-out), opacity .18s linear;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 6.3 Menú móvil --- */
.mnav {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: var(--z-mnav);
  background: var(--surface-dark);
  border-top: 1px solid var(--line-solid);
  padding: 1.4rem var(--gutter) 2.4rem;
  overflow-y: auto;
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform .42s var(--ease-out), visibility 0s linear .42s;
}
.mnav.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .42s var(--ease-out), visibility 0s linear 0s;
}
.mnav__link {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
}
.mnav__link .num { font-size: .7rem; }
.mnav .btn { margin-top: 1.6rem; width: 100%; justify-content: center; }

/* --- 6.4 Grid brutalista (líneas de 1px como elemento gráfico) --- */
.gridlines {
  display: grid;
  gap: 1px;
  background: var(--line-solid);
  border: 1px solid var(--line-solid);
}
.gridlines > * {
  background: var(--bg);
  padding: clamp(1.35rem, 3vw, 2.3rem);
}

.g-2 { grid-template-columns: 1fr; }
.g-3 { grid-template-columns: 1fr; }
.g-4 { grid-template-columns: repeat(2, 1fr); }
.g-8 { grid-template-columns: repeat(2, 1fr); }   /* tira compacta de retratos */
.g-5 { grid-template-columns: repeat(2, 1fr); }   /* los otros 5 ramos, en una fila */

/* --- 6.5 Tarjeta de ramo (signature: hover invert) --- */
.ramo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 172px;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.ramo__t {
  font-size: clamp(1.35rem, 3.4vw, 2.05rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: .96;
}
.ramo__d { font-size: .89rem; color: var(--fg-soft); transition: color .2s var(--ease-out); }
.ramo__go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  transition: color .2s var(--ease-out), transform .24s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ramo:hover { background: var(--red-fill); color: var(--white); }
  .ramo:hover .ramo__d,
  .ramo:hover .ramo__go,
  .ramo:hover .num { color: var(--white); }
  .ramo:hover .ramo__go { transform: translateX(7px); }
}

/* --- 6.5b Equipo --- */
/* Variante sin padding: la foto llega hasta el borde de la celda.
   Además cambia cómo se dibujan las líneas: el resto de las grillas usa
   "gap de 1px sobre fondo pintado", que delata las celdas vacías cuando
   los ítems no llenan la última fila. Con 11 personas eso pasa siempre.
   Acá cada tarjeta trae su propio borde, así el hueco sobrante no se ve. */
.gridlines--flush {
  background: transparent;
  gap: 0;
  border: 0;
  border-top: 1px solid var(--line-solid);
  border-left: 1px solid var(--line-solid);
}
.gridlines--flush > * {
  padding: 0;
  border-right: 1px solid var(--line-solid);
  border-bottom: 1px solid var(--line-solid);
}

.miembro {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.miembro img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 12%;   /* deja aire sobre la cabeza al recortar */
  /* Blanco y negro por defecto, color al pasar el mouse: mismo lenguaje
     que el resto del sitio, donde todo se invierte al tocarlo. */
  filter: grayscale(1) contrast(1.04);
  transition: filter .4s var(--ease-out);
}
.miembro { position: relative; }

.miembro__pie {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .6rem .7rem .72rem;
  border-top: 1px solid var(--line-solid);
}
.miembro__n {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: -.004em;
  line-height: 1.22;
  color: var(--fg-soft);
  transition: color .25s var(--ease-out);
}
.miembro__rol {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red);
  transition: color .25s var(--ease-out);
}

/* La barra sube desde el pie de la foto al pasar el mouse. Vive dentro
   del recorte de la foto, así que nunca se ve fuera de lugar. */
.miembro__foto { position: relative; display: block; overflow: hidden; }

.miembro__barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .5rem;
  background: var(--red-fill);
  color: var(--white);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: translateY(101%);
  transition: transform .3s var(--ease-out);
}
.miembro__barra svg { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* Flecha del pie: es la señal donde no hay mouse. En escritorio se oculta,
   porque ahí el trabajo lo hace la barra. */
.miembro__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
}
/* En celular no hay hover y la barra nunca aparece: esta es la única
   señal de que la tarjeta se toca. Va el ícono de WhatsApp y no una
   flecha, porque además de decir "esto lleva a algún lado" dice a dónde.
   Vive en la línea del rol, dentro de la grilla — nunca sobre la foto. */
.miembro__ir {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: var(--red);
  align-self: center;
}
.miembro__ir svg { width: 17px; height: 17px; fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .miembro__ir { display: none; }
  .miembro:hover .miembro__barra { transform: translateY(0); }
  /* La barra es el acento. Si además se pintara toda la tarjeta de rojo
     serían dos rojos peleando y la barra dejaría de leerse. */
  .miembro:hover { background: var(--bg); color: inherit; }
  .miembro:hover .miembro__n { color: var(--white); }
}
@media (hover: none) {
  .miembro__barra { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .miembro:hover img { filter: grayscale(0) contrast(1); }
}

/* --- 6.5c Bento de ramos ---------------------------------------
   La grilla pareja de seis cajas iguales era el mayor delator de
   "plantilla": Auto, que es el foco del negocio, pesaba lo mismo que
   Salud. Acá Auto ocupa 2x2, cuatro van chicas y Salud cierra a lo
   ancho. Móvil sigue en una columna. */
.bento { grid-template-columns: 1fr; }

.ramo--xl .ramo__t { font-size: clamp(1.8rem, 4.6vw, 3.4rem); }
.ramo--xl .ramo__d { font-size: 1rem; max-width: 34ch; }

/* Número gigante de fondo: da profundidad sin necesitar fotos */
.ramo { overflow: hidden; }
.ramo__ghost {
  position: absolute;
  right: -.06em;
  bottom: -.34em;
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--fg);
  opacity: .055;
  pointer-events: none;
  user-select: none;
  transition: opacity .25s var(--ease-out), color .2s var(--ease-out);
}
.ramo--xl .ramo__ghost { font-size: clamp(8rem, 20vw, 17rem); }
@media (hover: hover) and (pointer: fine) {
  .ramo:hover .ramo__ghost { opacity: .16; color: var(--white); }
}

/* --- 6.5d Frase suelta -----------------------------------------
   Rompe el ritmo kicker→titular→grilla. Va en minúscula y en la
   tipografía de texto, justo al revés que todos los títulos del
   sitio: ese contraste es lo que hace que se lea como una pausa. */
.statement {
  padding-block: clamp(4rem, 11vw, 9rem);
}
.statement p {
  font-family: var(--text);
  font-size: clamp(1.6rem, 4.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.028em;
  text-transform: none;
  max-width: 21ch;
}
.statement em { font-style: normal; color: var(--red); }
.statement .firma {
  max-width: none;   /* si no, hereda el 21ch del parrafo grande */
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* --- 6.5e Paso con cifra grande --- */
.paso { position: relative; overflow: hidden; }
.paso__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--red);
  margin-bottom: .8rem;
}

/* --- 6.5f Bloque de contenido largo --- */
.detalle {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.detalle__t {
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.08;
}
.detalle__p {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--fg-soft);
  transition: color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .detalle:hover { background: var(--fg); color: var(--bg); }
  .detalle:hover .detalle__p { color: var(--bg); opacity: .78; }
}

/* --- 6.6 Compañía --- */
.cia {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  justify-content: center;
  min-height: 150px;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

/* Los nueve logos llegan en colores, formatos y calidades distintas.
   Sin normalizar, la grilla queda sucia. Este filtro los lleva a todos
   a una silueta plana del color del texto de la sección.
   ¿Los querés en su color original? Borrá la línea `filter` de acá abajo. */
.cia__logo {
  /* Caja fija + object-fit: los nueve logos tienen proporciones muy
     distintas (Sancor es 4:1, La Caja es casi cuadrado). Con una caja
     común, cada uno se acomoda dentro sin deformarse.
     `align-self: start` es obligatorio: sin eso el flex column estira
     la imagen a todo el ancho y se pierde la proporción. */
  /* 78 de alto y no 54: los logotipos anchos (Sancor, Galicia, Berkley…)
     los limita el ancho, así que no cambian. Solo crecen los cuadrados
     — La Caja y Mercantil Andina —, que a 54 quedaban ilegibles. */
  align-self: start;
  width: 186px;
  height: 78px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: .95rem;
  filter: brightness(0) invert(1);   /* sección oscura → logo blanco */
  opacity: .93;
  transition: filter .2s var(--ease-out), opacity .2s var(--ease-out);
}
.paper .cia__logo { filter: brightness(0); }   /* sección blanca → logo negro */

.cia__r {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--fg-soft);
  transition: color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cia:hover { background: var(--fg); color: var(--bg); }
  .cia:hover .cia__r { color: var(--bg); opacity: .7; }
  /* al invertirse la tarjeta, el logo se invierte con ella */
  .cia:hover .cia__logo { filter: brightness(0); opacity: 1; }
  .paper .cia:hover .cia__logo { filter: brightness(0) invert(1); opacity: 1; }
}

/* --- 6.7 Estadísticas --- */
.stat { display: flex; flex-direction: column; gap: .35rem; }
.stat__v {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  font-weight: 900;
  letter-spacing: -.018em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.stat__l {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* --- 6.8 Lista de coberturas --- */
.cov { display: grid; gap: 1px; background: var(--line-solid); border-block: 1px solid var(--line-solid); }
.cov li {
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.02rem clamp(.2rem, 2vw, 1rem);
  font-size: .95rem;
}
.cov li::before {
  content: "→";
  color: var(--red);
  font-weight: 700;
  flex: none;
  line-height: 1.55;
}

/* --- 6.9 Acordeón FAQ --- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(.98rem, 2vw, 1.12rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  transition: color .18s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--red);
  flex: none;
  transition: transform .28s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 1.35rem; color: var(--fg-soft); max-width: 68ch; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--red); } }

/* --- 6.10 Marquee (banda inclinada, eco del logotipo) --- */
.band {
  background: var(--red-fill);
  color: var(--white);
  overflow: hidden;
  padding-block: .85rem;
  transform: rotate(var(--slant));
  transform-origin: center;
  width: 108%;
  margin-left: -4%;
  position: relative;
  z-index: 2;
}
.band__track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.band__item {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.6rem;
}
.band__item::after { content: "◆"; font-size: .6rem; opacity: .8; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 6.11 Footer --- */
.ftr { background: var(--surface-dark); color: var(--white); border-top: 2px solid var(--red); }
.ftr a { color: rgba(255, 255, 255, .74); transition: color .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ftr a:hover { color: var(--red); } }
.ftr__grid {
  display: grid;
  gap: 2.4rem;
  padding-block: clamp(2.6rem, 6vw, 4.2rem);
}
.ftr__h {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.ftr__logo { width: 208px; margin-bottom: 1.15rem; }
.ftr__li { padding: .28rem 0; font-size: .9rem; }
.ftr__legal {
  border-top: 1px solid var(--line-solid);
  padding-block: 1.5rem 2.2rem;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.85;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .48);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.ftr__mat { color: rgba(255, 255, 255, .78); }

/* --- 6.12 Botón flotante de WhatsApp --- */
.wafab {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.7rem);
  bottom: clamp(.9rem, 3vw, 1.7rem);
  z-index: var(--z-fab);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--red-fill);
  color: var(--white);
  border: 2px solid var(--surface-dark);
  box-shadow: 0 0 0 1px var(--red-fill);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out),
              background-color .2s var(--ease-out);
  pointer-events: none;
}
.wafab.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wafab svg { width: 27px; height: 27px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .wafab:hover { background: var(--white); color: var(--red); }
}

/* =============================================================
   7. SECCIONES
   ============================================================= */

/* --- 7.1 Logo reveal ---
   Una sola vez por visita. El movimiento lo maneja lib/reveal.js; acá
   solo va la escena. Ver tools/build_reveal.py para el guion. */
.lr { position: fixed; inset: 0; z-index: var(--z-splash); }
.sin-reveal .lr { display: none; }
/* Red de seguridad: si el JS nunca toma el control, el negro se va solo a
   los 1,2 s. Cuando reveal.js arranca agrega .lr-activo y esto se anula.
   reveal.js, por su lado, se saltea la animación si llega después de 1 s. */
html:not(.lr-activo) .lr { animation: lrSeguridad .01s 1.2s forwards; }
@keyframes lrSeguridad { to { visibility: hidden; pointer-events: none; } }

.lr-telon {
  position: absolute; inset: 0; overflow: hidden;
  /* Apenas más luz en el centro: profundidad sin que se note el truco. */
  background: radial-gradient(120% 90% at 50% 48%, #0d0d0e 0%, #000 62%);
}
/* El mismo grano que el resto del sitio: el paso a la página no se nota. */
.lr-telon::after {
  content: ""; position: absolute; inset: 0; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.lr-brillo {
  position: absolute; left: 50%; top: 50%;
  width: min(120vw, 1100px); aspect-ratio: 2.4;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 0, 25, .55), rgba(255, 0, 25, .14) 55%, rgba(255, 0, 25, 0));
  opacity: 0; filter: blur(8px);
}
.lr-escena { position: absolute; inset: 0; display: grid; place-items: center; }
.lr-avion { width: min(74vw, 680px); transform-origin: 0 0; will-change: transform; }
.lr-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- 7.2 Hero --- */
.hero {
  position: relative;
  background: var(--surface-dark);
  padding-top: clamp(2.6rem, 7vw, 5.2rem);
  /* La banda va rotada: sus esquinas bajan ~30px respecto del centro.
     Sin este colchón, el `overflow: hidden` le corta el texto abajo a la
     izquierda. */
  padding-bottom: clamp(1.9rem, 3.2vw, 2.8rem);
  overflow: hidden;
}
.hero__in { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.85rem, 10.2vw, 9.4rem);
  line-height: .93;
  letter-spacing: var(--track-display);
  max-width: 15ch;
}
.hero h1 .accent { display: inline-block; }
.hero__lead { margin-top: clamp(1.5rem, 3vw, 2.1rem); }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.9rem, 4vw, 2.7rem);
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-solid);
  border: 1px solid var(--line-solid);
  margin-top: clamp(2.8rem, 6vw, 4.4rem);
}
.hero__stats .stat { background: var(--surface-dark); padding: clamp(1.2rem, 2.6vw, 1.9rem); }
.hero__band { margin-top: clamp(2.6rem, 5vw, 3.6rem); }

/* --- 7.3 Cabecera de página interior --- */
.phead {
  background: var(--surface-dark);
  padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(2.2rem, 5vw, 3.4rem);
  position: relative;
  overflow: hidden;
}
.phead h1 {
  font-size: clamp(2.3rem, 7.6vw, 6rem);
  line-height: .95;
  letter-spacing: var(--track-display);
  max-width: 16ch;
}
.phead__lead { margin-top: 1.3rem; }

/* Nota de cobertura: nacional primero, oficina después. */
.cobertura-nota {
  margin-top: 1.15rem;
  font-family: var(--mono);
  font-size: .71rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.cobertura-nota span { color: var(--red); margin-inline: .35rem; }
.phead__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.crumb {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.35rem;
}
.crumb a { color: var(--red); }

/* --- 7.4 Bloque de dos columnas --- */
.two {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}
.two__head { position: relative; }

/* --- 7.5 CTA final --- */
.cta {
  background: var(--red-fill);
  color: var(--white);
  padding-block: clamp(3.2rem, 8vw, 6rem);
  border-top: 1px solid var(--red);
}
.cta h2 {
  font-size: clamp(2rem, 6.4vw, 4.6rem);
  line-height: .96;
  letter-spacing: var(--track-display);
  max-width: 17ch;
}
.cta p { margin-top: 1.15rem; font-size: clamp(.98rem, 2vw, 1.16rem); max-width: 48ch; opacity: .92; }
.cta .btn {
  margin-top: 2rem;
  background: var(--white);
  border-color: var(--white);
  /* Rojo sobre blanco: aca va el tono oscuro (5.31:1). El de marca
     da 3.99:1 y no llega al minimo AA para texto de este tamano. */
  color: var(--red-ink);
}
@media (hover: hover) and (pointer: fine) {
  .cta .btn:hover { background: var(--black); border-color: var(--black); color: var(--white); }
}
.cta__meta {
  margin-top: 2.1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .84;
}

/* CTA a dos columnas: la mitad derecha estaba vacía. Una cara al lado
   del botón es lo que más levanta la conversión en este rubro. */
.cta { overflow: hidden; }
.cta__in { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: end; }
.cta__foto { display: none; }
.cta__foto img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 10%;
  filter: grayscale(1) contrast(1.08);
  margin-bottom: calc(clamp(3.2rem, 8vw, 6rem) * -1);
}

/* =============================================================
   8. EFECTOS
   ============================================================= */

/* Reveal al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ⚠ Defensa obligatoria: si un elemento tiene .reveal Y data-split,
   el handler de reveal lo ignora y quedaría invisible para siempre. */
.reveal[data-split] { opacity: 1; transform: none; }

/* Escalonado dentro de un grupo */
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }
.reveal[data-delay="5"] { transition-delay: .35s; }

/* Sin JS, todo visible */
.no-js .reveal { opacity: 1; transform: none; }

/* Transiciones entre páginas */
@view-transition { navigation: auto; }

/* =============================================================
   8bis. PAGINAS LEGALES
   Texto largo para leer, no para mirar: medida corta, interlineado
   amplio y listas con viñeta propia. Hereda color de .prosa.
   ============================================================= */
.legal__fecha {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.legal__ul {
  margin-top: 1.2rem;
  padding-left: 0;
  list-style: none;
  color: var(--fg-soft);
  display: grid;
  gap: .7rem;
}

.legal__ul li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.75;
}

/* Viñeta dibujada a mano: el cuadrado sigue la geometría del sitio,
   donde no hay un solo borde redondeado. */
.legal__ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--red);
}

.legal__ul strong { color: var(--fg); font-weight: 600; }

/* El nombre de la clave de almacenamiento se cita literal. */
.prosa code, .legal__ul code {
  font-family: var(--mono);
  font-size: .86em;
  padding: .12em .4em;
  background: rgba(255, 255, 255, .09);
  color: var(--fg);
}
.paper .prosa code, .paper .legal__ul code { background: rgba(23, 23, 26, .08); }

.prosa a, .legal__ul a {
  color: inherit;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.prosa a:hover, .legal__ul a:hover { color: var(--red); }

/* Los avisos legales obligatorios (art. 14 Ley 25.326 y leyenda de la
   AAIP) van en cursiva y algo mas chicos: son cita textual de la norma. */
.prosa em {
  display: block;
  margin-top: .2rem;
  font-size: .92em;
  font-style: italic;
  opacity: .88;
}

/* Fila de enlaces legales en el pie. */
.ftr__legales {
  list-style: none;
  padding: 0;
  margin: 0 0 .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}

.ftr__legales a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.ftr__legales a:hover,
.ftr__legales a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--red);
}

/* =============================================================
   8ter. INDICE DE RAMAS
   Filas a lo ancho en vez de tarjetas: es un indice, se lee de arriba
   abajo, y no deja celdas huerfanas cuando cambia el numero de ramos.
   ============================================================= */
.indice { border-top: 1px solid var(--line); }

.indice__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "n t go"
    ". d .";
  align-items: baseline;
  gap: .15rem 1.1rem;
  padding: 1.5rem 1rem 1.5rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background .22s var(--ease-out), color .22s var(--ease-out),
              padding-left .22s var(--ease-out);
}

.indice__n {
  grid-area: n;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--red);
  transition: color .22s var(--ease-out);
}

.indice__t {
  grid-area: t;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  letter-spacing: var(--track-display);
  line-height: 1.05;
}

.indice__d {
  grid-area: d;
  color: var(--fg-soft);
  font-size: .92rem;
  line-height: 1.6;
  max-width: 56ch;
  transition: color .22s var(--ease-out);
}

.indice__go {
  grid-area: go;
  display: inline-flex;
  align-self: center;
  opacity: .35;
  transform: translateX(-.4rem);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

/* Hover-invert, igual que el resto del sitio. */
.indice__row:hover,
.indice__row:focus-visible {
  background: var(--red-fill);
  color: var(--white);
  padding-left: 1rem;
}
.indice__row:hover .indice__n,
.indice__row:focus-visible .indice__n,
.indice__row:hover .indice__d,
.indice__row:focus-visible .indice__d { color: var(--white); }
.indice__row:hover .indice__go,
.indice__row:focus-visible .indice__go { opacity: 1; transform: translateX(0); }

@media (min-width: 720px) {
  .indice__row {
    grid-template-columns: 3.5rem 15rem 1fr auto;
    grid-template-areas: "n t d go";
    align-items: center;
    gap: 1.4rem;
  }
  .indice__d { margin: 0; }
}

/* =============================================================
   9. RESPONSIVE (mobile-first, 5 pasos fijos)
   ============================================================= */
@media (min-width: 540px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-8 { grid-template-columns: repeat(4, 1fr); }
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .ftr__legal { flex-direction: row; flex-wrap: wrap; gap: 1.6rem; }
}

@media (min-width: 720px) {
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :nth-child(7) { grid-column: span 2; }  /* impar: no la dejamos sola */
  .cta__in { grid-template-columns: 1.35fr .65fr; }
  .cta__foto { display: block; justify-self: end; }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); gap: 2.8rem; }
  .cov { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  :root { --nav-h: 76px; }

  /* Bento: Auto ocupa 2x2, cuatro chicas al costado y la fila de abajo
     se reparte entre las dos ultimas (hoy Salud y Agro). */
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "xl xl a  b"
      "xl xl c  d"
      "w1 w1 w2 w2";
  }
  .bento > :nth-child(1) { grid-area: xl; }
  .bento > :nth-child(2) { grid-area: a; }
  .bento > :nth-child(3) { grid-area: b; }
  .bento > :nth-child(4) { grid-area: c; }
  .bento > :nth-child(5) { grid-area: d; }
  .bento > :nth-child(6) { grid-area: w1; }
  /* grid-area declarado despues del span 2 de la query anterior: le
     devuelve las dos columnas sin necesidad de resetear grid-column,
     que anularia el area. */
  .bento > :nth-child(7) { grid-area: w2; }

  /* Las dos de la fila de abajo van en horizontal: no necesitan los
     172px de alto de las tarjetas verticales. */
  .bento > :nth-child(6),
  .bento > :nth-child(7) {
    flex-direction: row; align-items: baseline;
    gap: 1.6rem; min-height: 0;
  }
  .bento > :nth-child(6) .ramo__d,
  .bento > :nth-child(7) .ramo__d { flex: 1; margin-top: .2rem; }
  .bento > :nth-child(6) .ramo__go,
  .bento > :nth-child(7) .ramo__go { margin-top: 0; }
  .g-8 { grid-template-columns: repeat(6, 1fr); }
  .g-5 { grid-template-columns: repeat(5, 1fr); }
  .nav { display: block; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
  .mnav { display: none; }
  .hdr__logo img { height: 30px; }

  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
  .two { grid-template-columns: 1fr 1.32fr; gap: clamp(2.6rem, 5vw, 5rem); }
  .two__head { position: sticky; top: calc(var(--nav-h) + 2.4rem); }
  .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
}

@media (min-width: 1280px) {
  .hero h1 { max-width: 13ch; }
  .g-8 { grid-template-columns: repeat(8, 1fr); }   /* los ocho en una sola fila */
}

/* =============================================================
   10. REDUCED-MOTION
   Solo efectos intrusivos. Los micro-efectos (hover, invert,
   fade, contadores) siguen funcionando: Windows trae esta
   preferencia activada por defecto en muchas configuraciones.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band__track { animation: none; }
  .hero__mark { transform: none; }
}