/* ============================================================================
   Storf Agency — sistema de diseño
   Mundo: El Conmutador. La página entera es un rack continuo de equipo
   atornillado, borde a borde. No hay tarjetas, no hay cajas con sombra, no hay
   celdas bento. Cada sección es una unidad del rack.

   Los tokens son la única fuente de valores. Un literal fuera de :root falla
   el gate test — ver tests/gate.mjs.
   ========================================================================= */

/* Fuentes auto-hospedadas. Generado por tools/fuentes.mjs — no editar a mano. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-700.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-400-600.woff2") format("woff2");
}

:root {
  /* --- Paleta, del manual de marca firmado. No se inventan colores. ------ */
  --negro:          #0D0D0C;
  --saffron:        #EEBA0B;
  --saffron-hover:  #C99A08;
  --off-white:      #F4F3EF;
  --granito:        #847979;
  --uva:            #6B4E71;

  /* --- Derivados de material -------------------------------------------
     Muestreados del comp aprobado. Ninguno es un color nuevo: todos caen
     dentro de la familia de un token bajo luz cálida. El token manda, el
     material aporta la variación. Ver .impeccable/surfaces/index-html.md. */
  --acero:          #4A453E;   /* acero cepillado del marco */
  --acero-riel:     #2C251A;   /* riel del nav, más oscuro y cálido */
  --hammertone:     #6F695D;   /* chasis inferior, pintura martillada */
  --bronce:         #8A6B3A;   /* placas grabadas del nav y el pie */
  --bronce-oscuro:  #483522;   /* bronce en sombra */
  --ventana-glow:   #A1712C;   /* ámbar detrás del bisel de la ventana */
  --luz-calida:     #FFF6D0;   /* luz que se filtra: halo, no color de paleta */
  --tinta-grabada:  #2A1608;   /* leyenda impresa sobre tapa retroiluminada */
  --cordon-sombra:  #7A4A08;   /* flanco en sombra del cable trenzado */
  --cordon-lomo:    #CCA161;   /* lomo iluminado, muestreado del comp */

  /* --- Derivados HUD ------------------------------------------------------
     El nav vive en un lenguaje aparte del resto de la página: vidrio oscuro
     con blur y borde de luz saffron, en vez de metal y bronce grabado. Es el
     contraste deliberado contra El Conmutador — ver .riel--hud. Se declaran
     acá porque son la excepción real del sistema: el resto de la página
     sigue en el mundo físico hasta que le toque su propia pasada. */
  --hud-vidrio:       color-mix(in srgb, var(--negro) 80%, transparent);
  --hud-borde:        color-mix(in srgb, var(--saffron) 35%, transparent);
  --hud-borde-fuerte: color-mix(in srgb, var(--saffron) 75%, transparent);
  --hud-glow:         color-mix(in srgb, var(--saffron) 45%, transparent);
  --hud-superficie:   color-mix(in srgb, var(--saffron) 8%, transparent);

  /* Dos pasos por debajo del HUD normal, para las cinco fugas de servicios.html
     cerradas: son cinco cajas apiladas, y al 35%/8% cinco bordes saffron son
     cinco acentos compitiendo con el único CTA de la fila. El acento se lo
     queda la caja abierta, que sí sube a --hud-borde-fuerte. */
  --hud-borde-suave:      color-mix(in srgb, var(--saffron) 22%, transparent);
  --hud-superficie-tenue: color-mix(in srgb, var(--saffron) 4%, transparent);
  --hud-superficie-viva:  color-mix(in srgb, var(--saffron) 7%, transparent);

  /* Granito sobre una superficie teñida, no sobre el negro pelado.
     --granito sobre --negro da 4.62:1: pasa AA por 0,12. El tinte saffron de
     las fugas sube el fondo de (13,13,12) a (22,20,12) cerrada y (29,25,12)
     abierta, y ese margen se evapora — medido en el navegador aplanando las
     capas: 4.38:1 y 4.17:1, las dos por debajo de 4.5. Es el punto que el
     handoff marcó para mirar sí o sí, y falla.
     88% y no 94%: 94 es el primer valor que pasa (4.60) y pasa por 0,10, o sea
     un umbral elegido en el borde. 88 da 5.32:1 cerrada y 5.07:1 abierta, y
     desplaza el granito 13/255 — sigue siendo el mismo rosa de la marca. */
  --granito-claro: color-mix(in srgb, var(--granito) 88%, var(--off-white));

  /* --- Derivados de pantalla ---------------------------------------------
     La unidad 1 de servicios.html no es una ventana retroiluminada sino un
     campo de circuito: retícula, nodos y un barrido que corre por detrás del
     monitor. Ningún color nuevo — es el mismo saffron sobre negro del HUD,
     bajado a intensidades de fondo para que compita con el video y pierda. */
  --circuito-linea: color-mix(in srgb, var(--saffron) 12%, transparent);
  --circuito-nodo:  color-mix(in srgb, var(--saffron) 42%, transparent);
  --barrido:        color-mix(in srgb, var(--luz-calida) 6%, transparent);
  --velo:           color-mix(in srgb, var(--negro) 45%, transparent);

  /* --- Tinta ------------------------------------------------------------ */
  --tinta:          var(--off-white);
  --tinta-suave:    color-mix(in srgb, var(--off-white) 62%, transparent);
  --tinta-oscura:   var(--negro);

  /* --- Costuras físicas -------------------------------------------------
     La línea de este mundo no es un borde de 1px: es una ranura oscura con
     un reflejo debajo, como el encuentro entre dos unidades del rack. */
  --costura-sombra: rgba(0, 0, 0, 0.72);
  --costura-luz:    rgba(255, 255, 255, 0.10);

  /* --- Tipografía, fijada por el manual --------------------------------- */
  --fuente-titulo: "Space Grotesk", "Archivo", "Helvetica Neue", sans-serif;
  --fuente-cuerpo: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* Escala fluida. Razón mínima de 1.3 entre pasos: una jerarquía plana es
     una jerarquía que no existe. */
  --t-display: clamp(2.6rem, 1.4rem + 5.4vw, 6.5rem);
  --t-titulo:  clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --t-sub:     clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  --t-cuerpo:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-menor:   0.875rem;
  --t-placa:   0.6875rem;   /* rótulos grabados en bronce */

  /* El header abre por debajo de --t-display a propósito: el tipo más grande
     de la página se lo queda el cierre, no la apertura. */
  --t-hero:    clamp(2.4rem, 1.3rem + 4.2vw, 5rem);

  /* --- Geometría --------------------------------------------------------
     Las esquinas son duras. Este mundo está hecho de chapa doblada y
     tornillos, no de tarjetas redondeadas. */
  --radio:       2px;
  --radio-tecla: 3px;
  --medida:      64ch;

  /* --- Ritmo ------------------------------------------------------------ */
  --u:      8px;
  --unidad: clamp(3rem, 2rem + 4vw, 6rem);  /* aire entre unidades del rack */

  /* --- Movimiento -------------------------------------------------------
     Una sola curva para todo. El movimiento es electromecánico: las cosas
     tienen peso y se asientan, no rebotan. */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tecla: cubic-bezier(0.34, 0.8, 0.28, 1);
  --dur-rapida: 140ms;

  /* --- La marca como viñeta ---------------------------------------------
     El isotipo, usado como máscara: el color lo pone el fondo del elemento,
     así sale del mismo archivo de marca en blanco o como hueco de una tapa
     saffron.

     El archivo trae aire: la S ocupa el 62% del ancho y el 69% del alto de su
     lienzo (medido sobre los píxeles: x 182 a 852, y 160 a 836 de 1075 × 975).
     Con "contain" una caja de 24px dibujaba una S de 16. Las dos recetas la
     ubican por su tinta, no por su lienzo:
       --isotipo-justo    la S llena la caja de alto
       --isotipo-en-tapa  la S al 80% de la caja, la proporción del favicon
     --marca es el alto de la S: 24px, el mínimo del manual (§ 02). Más chica
     se empasta: a 12 o 14px es una mancha. */
  --isotipo: url("/assets/logo/isotipo.svg");
  --isotipo-justo: var(--isotipo) 44.9% 53.6% / auto 144.3% no-repeat;
  --isotipo-en-tapa: var(--isotipo) 41.1% 58.3% / auto 115.4% no-repeat;
  --marca: 1.5rem;
  --marca-tapa: 1.875rem;   /* la tapa del acordeón: 30px, con la S a 24 */
  --dur-media:  340ms;
  --dur-lenta:  900ms;

  /* --riel-alto es la fila del riel. --cinta-alto es la franja de la promo,
     que en pantallas angostas va debajo del riel dentro del mismo bloque (en
     escritorio ancho entra en la fila y vale cero; sin promo vigente, también).
     --nav-alto es lo que hay que despejar arriba: las dos juntas. */
  --riel-alto: 4.5rem;
  --cinta-alto: 2rem;
  --nav-alto: calc(var(--riel-alto) + var(--cinta-alto));

  /* --- El tablero -------------------------------------------------------
     El negro del JPG del header, muestreado del archivo: rgb(2,2,2). Es más
     oscuro que --negro, y esos 11/255 de diferencia son exactamente lo que
     dibuja un rectángulo alrededor de la imagen cuando el fondo no la iguala.
     Igualarlo es lo que hace que la imagen y las tarjetas sean una pieza. */
  --negro-lienzo: #030303;

  --tablero-margen:  clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --tablero-costura: clamp(1.5rem, 1rem + 1.5vw, 3rem);

  /* El logotipo sobre el círculo que el cuadro deja vacío. No son valores a
     ojo: el centro y el radio los mide tools/huecos.mjs, y el gate verifica
     que la caja del logo siga entrando entera adentro de ese círculo. Los
     nombres dicen iso- por el isotipo que iba acá antes; lo que cambia es el
     arte, no la geometría que lo ubica. */
  --iso-centro-x: 49.96%;
  --iso-centro-y: 48.35%;
  --iso-ancho:    26%;

  color-scheme: dark;
  scrollbar-color: var(--bronce) var(--negro);
}

/* ============================================================================
   Base
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--tinta);
  font: 400 var(--t-cuerpo)/1.6 var(--fuente-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Un control no hereda la tipografía: el navegador le impone la suya, que en
   Chrome es Arial de 13,333px. Solo se ve cuando el control muestra texto, y
   por eso el sitio convivió con tres botones en Arial sin que nadie los viera
   —.descenso__pulsador, .pantalla__tecla y .agente__cerrar—: los tres tienen su
   leyenda en otro lado (impresa en la foto, en un <span> interno con font
   propia, o solo para lectores de pantalla). El día que alguno muestre texto
   propio sale en Arial, y en el editor se va a seguir viendo bien.

   font: inherit borra la clase entera de falla, para esos tres y para el botón
   que todavía no existe. A los que sí muestran texto no les cambia nada: cada
   uno declara su propia `font:` con un token, y una clase le gana a un selector
   de elemento. El check "controles" del gate lo verifica. */
button,
input,
select,
textarea { font: inherit; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-sub); letter-spacing: -0.01em; }

p { margin: 0; max-width: var(--medida); }

a { color: var(--saffron); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg, canvas { display: block; max-width: 100%; }

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

.saltar {
  position: absolute;
  left: var(--u);
  top: calc(var(--u) * -8);
  z-index: 100;
  background: var(--saffron);
  color: var(--negro);
  font: 700 var(--t-menor)/1 var(--fuente-titulo);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  text-decoration: none;
  transition: top var(--dur-rapida) var(--ease);
}
.saltar:focus { top: var(--u); }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================================
   Chip — etiqueta chica en vidrio HUD
   Reemplaza a las placas de bronce grabadas para rótulos cortos: precios,
   notas, badges. El texto es HTML real, nunca rasterizado.
   ========================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.75);
  /* 24px de alto mínimo: es el piso de WCAG 2.5.8 para un objetivo puntero, y
     los chips medían 21. Algunos son rótulos inertes y otros son links de
     verdad ("Ver servicios"), y el que es link tiene que poder tocarse.
     10px de relleno lateral y no 7,2: por debajo de 8 el texto de 11px queda
     pegado al borde de la caja. */
  min-height: calc(var(--u) * 3);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.25);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--hud-superficie);
  color: var(--tinta-suave);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

a.chip,
button.chip {
  cursor: pointer;
  transition:
    color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease);
}
a.chip:hover,
button.chip:hover { color: var(--saffron); border-color: var(--hud-borde-fuerte); }
/* Un chip de lista que lleva a una página (el "Diseño web" de la home va a /web).
   El <li class="chip"> queda igual, así el test de la máquina lee los mismos tres
   rótulos; el enlace se come el relleno con margen negativo para que se toque
   en cualquier parte de la caja. */
.chip__link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin: calc(var(--u) * -0.5) calc(var(--u) * -1.25);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.25);
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}
/* La flecha dice que este chip se toca; va por CSS para que el texto siga
   siendo "Diseño web" a secas. */
.chip__link { color: var(--tinta); }
.chip__link::after { content: "→"; margin-left: 0.5em; color: var(--saffron); }
.chip__link:hover { color: var(--saffron); }
.chip:has(> .chip__link:hover) { border-color: var(--hud-borde-fuerte); }

/* ============================================================================
   La tecla — el elemento más importante de la página

   Vidrio saffron sólido con glow, no metal embutido: el CTA tiene que seguir
   leyéndose como la marca en cualquier sección, con el mismo mecanismo que
   el botón del nav pero a la escala de un cierre de página.
   ========================================================================= */

.tecla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--hud-borde-fuerte);
  border-radius: var(--radio);
  background: var(--saffron);
  color: var(--negro);
  font: 700 var(--t-sub)/1.08 var(--fuente-titulo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 40px var(--hud-glow);
  transition:
    background var(--dur-rapida) var(--ease),
    box-shadow var(--dur-rapida) var(--ease),
    transform var(--dur-rapida) var(--ease-tecla);
}

.tecla:hover { background: var(--saffron-hover); box-shadow: 0 0 55px var(--hud-glow); }
.tecla:active { transform: scale(0.97); }

/* ============================================================================
   Placeholders

   Declaran qué va a ocupar su lugar: formato, proporción, duración y qué
   tiene que mostrar. No son cajas vacías, y por eso reemplazarlos después es
   cambiar un archivo en vez de rediseñar la sección.
   ========================================================================= */

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--u);
  padding: calc(var(--u) * 3);
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--saffron) 55%, transparent);
  border-radius: var(--radio);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--saffron) 6%, transparent) 0 12px,
    transparent 12px 24px);
  color: var(--tinta-suave);
}

.placeholder__etiqueta {
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron);
}

.placeholder__spec {
  font-size: var(--t-menor);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Riel de navegación
   ========================================================================= */

/* La promo es parte del riel (Axel, 2026-09-26: "que se vea como parte de la
   barra, no una franja amarilla aparte"). En escritorio ancho es un elemento
   más de la fila; en pantallas angostas baja a una franja delgada dentro del
   mismo bloque de vidrio, y el riel le reserva el alto con padding-bottom. */
.riel {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-bottom: var(--cinta-alto);
}
:root:has(.cinta[hidden]) { --cinta-alto: 0px; }

/* Vidrio oscuro con blur y borde de luz: el lenguaje nuevo, deliberadamente
   distinto al metal y al bronce grabado del resto de la página. Flota sobre
   El Conmutador en vez de ser una unidad más del rack — ese es el punto. */
.riel--hud {
  background: var(--hud-vidrio);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--hud-borde);
  box-shadow:
    0 1px 0 var(--hud-borde),
    0 12px 30px -12px rgba(0, 0, 0, 0.85);
  transition: background var(--dur-media) var(--ease);
}

/* --hud-vidrio es 80% de --negro + blur: apoyado sobre el negro de un hero al
   abrir la página se ve bien, pero deja pasar cualquier titular grande que
   scrollee por debajo como un fantasma de letras a medio camino — medido en
   vivo, "MÁS CLIENTES." y "Primero te" legibles detrás del vidrio a 100px de
   scroll, en index.html y en como-trabajamos.html los dos. main.js alterna
   esta clase con scrollY: el vidrio sigue siendo el lenguaje visual en el
   tope de la página, y en cuanto hay algo detrás que tapar deja de serlo. */
.riel--hud.riel--opaca {
  background: color-mix(in srgb, var(--negro) 97%, transparent);
  /* Al 97% de opacidad el blur no se ve, y sobre contenido animado cuesta
     unos 7 fps (medido en /web y en la home). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.riel__interior {
  width: 100%;
  min-height: var(--riel-alto);
  display: flex;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  flex-wrap: wrap;
}

.riel__marca { display: inline-flex; align-items: center; }
.riel__logotipo { height: 1.75rem; width: auto; display: block; }

.riel__links {
  display: flex;
  gap: calc(var(--u) * 0.5);
  margin: 0 auto 0 calc(var(--u) * 2);
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.riel__link {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 1.25);
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease),
    background var(--dur-rapida) var(--ease);
}

.riel__link:hover,
.riel__link:focus-visible {
  color: var(--tinta);
  border-color: var(--hud-borde);
  background: var(--hud-superficie);
}

.riel__link[aria-current="page"] {
  color: var(--saffron);
  border-color: var(--hud-borde-fuerte);
  background: var(--hud-superficie);
}


/* El CTA se queda saffron sólido — es la única acción real del nav y tiene
   que seguir leyéndose como la marca, no como parte del vidrio. El glow lo
   ancla al lenguaje HUD en vez de a la tecla física del resto del sitio. */
.riel__cta-boton {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 0.85) calc(var(--u) * 1.75);
  border: 1px solid var(--hud-borde-fuerte);
  border-radius: var(--radio);
  background: var(--saffron);
  color: var(--negro);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 22px var(--hud-glow);
  transition:
    background var(--dur-rapida) var(--ease),
    box-shadow var(--dur-rapida) var(--ease),
    transform var(--dur-rapida) var(--ease-tecla);
}

.riel__cta-boton:hover {
  background: var(--saffron-hover);
  box-shadow: 0 0 30px var(--hud-glow);
}

.riel__cta-boton:active { transform: scale(0.96); }
.riel__cta-corto { display: none; }

/* El link a /web lleva el acento: es la oferta del sitio (decisión de Axel,
   2026-09-26), no un link más del menú. */
.riel__link--web { color: var(--tinta); border-color: var(--hud-borde); }

/* El menú plegado del teléfono. En escritorio no existe: los links entran en
   una fila. Es un <details> y no un botón con JS a propósito: abre y cierra
   sin JavaScript, y el teclado y el lector de pantalla ya lo entienden. */
.riel__menu { display: none; }
.riel__menu-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--u);
  min-height: calc(var(--u) * 5.5);
  padding-inline: calc(var(--u) * 1.25);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  color: var(--tinta);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.riel__menu-boton::-webkit-details-marker { display: none; }
/* Tres rayas que pasan a una cruz al abrir: el estado se lee sin leer. */
.riel__menu-icono,
.riel__menu-icono::before,
.riel__menu-icono::after {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-rapida) var(--ease), background var(--dur-rapida) var(--ease);
}
.riel__menu-icono { position: relative; }
.riel__menu-icono::before,
.riel__menu-icono::after { content: ''; position: absolute; left: 0; }
.riel__menu-icono::before { top: -5px; }
.riel__menu-icono::after { top: 5px; }
.riel__menu[open] .riel__menu-icono { background: transparent; }
.riel__menu[open] .riel__menu-icono::before { transform: translateY(5px) rotate(45deg); }
.riel__menu[open] .riel__menu-icono::after { transform: translateY(-5px) rotate(-45deg); }
.riel__menu[open] .riel__menu-boton { border-color: var(--hud-borde-fuerte); background: var(--hud-superficie); }

.riel__menu-lista {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: var(--u) calc(var(--u) * 1.5) calc(var(--u) * 2);
  list-style: none;
  background: var(--negro);
  border-bottom: 1px solid var(--hud-borde);
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.9);
}
.riel__menu-lista .riel__link {
  display: flex;
  min-height: calc(var(--u) * 6);
  font-size: var(--t-menor);
}

/* ============================================================================
   La cinta de la promo

   Va dentro del <header>, en todas las páginas, y lleva a /web. Todo lo que
   dice sale de PROMO en assets/js/promo.mjs; el HTML trae escrita la promo
   vigente con su fecha de fin, y el módulo cambia la fecha por el reloj. Sin
   JS se lee "hasta el 31 de octubre"; con JS, "termina en 35d 08:12:44".
   ========================================================================= */

/* Angosta (por defecto): una franja dentro del riel, abajo, del ancho de la
   barra. Mismo vidrio, una costura arriba y el acento solo en el precio y el
   reloj. */
.cinta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.25);
  height: var(--cinta-alto);
  padding-inline: calc(var(--u) * 1.5);
  overflow: hidden;
  border-top: 1px solid var(--costura-luz);
  color: var(--tinta-suave);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-rapida) var(--ease), background var(--dur-rapida) var(--ease);
}
.cinta[hidden] { display: none; }
.cinta:hover { color: var(--tinta); background: var(--hud-superficie); }
.cinta__nombre { color: var(--tinta); }
.cinta s { text-decoration-color: var(--saffron); text-decoration-thickness: 2px; }
.cinta b { color: var(--saffron); }
.cinta__oferta,
.cinta__cuenta { display: inline-flex; align-items: center; gap: 0.4em; }
.cinta__reloj {
  display: none;
  padding: 3px 6px;
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--hud-superficie);
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.cuenta--viva .cinta__reloj { display: inline; }
/* La fecha escrita se queda para el lector de pantalla: el reloj va con
   aria-hidden, porque anunciar un número que cambia cada segundo es ruido. */
.cuenta--viva .cinta__fin {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.cinta__ir { color: var(--saffron); transition: translate var(--dur-rapida) var(--ease); }
.cinta:hover .cinta__ir { translate: 3px 0; }

/* Ancha: un elemento más de la fila, entre los links y el botón del agente. */
@media (min-width: 1280px) {
  :root { --cinta-alto: 0px; }
  .cinta {
    position: static;
    height: auto;
    min-height: calc(var(--u) * 4.5);
    margin-right: var(--u);
    padding-inline: calc(var(--u) * 1.5);
    border: 1px solid var(--hud-borde);
    border-radius: var(--radio);
  }
}

/* ============================================================================
   Pie
   ========================================================================= */

/* Una barra delgada, no un bloque (Axel, 2026-09-17: "barra final más delgada,
   con menos espacio muerto"). Medía 94px en escritorio y 134 en un teléfono, y
   en la home esa altura es lo que empuja al panel final hacia arriba en el
   último tramo de scroll. El alto lo pone la fila de links (24px, piso de WCAG). */
.pie { padding: calc(var(--u) * 1.25) calc(var(--u) * 2.5); }

/* Mismo vidrio que el riel — el pie cierra la página en el lenguaje nuevo,
   no en el metal atornillado del resto del sitio. Sin blur: acá abajo no
   hay nada scrolleando detrás que valga la pena difuminar. */
.pie--hud {
  background: color-mix(in srgb, var(--negro) 94%, transparent);
  border-top: 1px solid var(--hud-borde);
}

.pie__interior {
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
}

.pie__marca { display: inline-flex; align-items: center; }
.pie__logotipo { height: 1.25rem; width: auto; display: block; }

.pie__links {
  display: flex;
  gap: var(--u);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.pie__link {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 3);   /* 24px, piso de WCAG 2.5.8; medían 22,6 */
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.1);
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease),
    background var(--dur-rapida) var(--ease);
}

.pie__link:hover,
.pie__link:focus-visible {
  color: var(--tinta);
  border-color: var(--hud-borde);
  background: var(--hud-superficie);
}

.pie__zona {
  color: var(--tinta-suave);
  font-size: var(--t-menor);
  margin: 0;
}

/* ============================================================================
   Responsive — dos puntos de quiebre, no una escalera
   ========================================================================= */

/* El riel en un teléfono: UNA fila. Hasta el 2026-09-26 los links bajaban a
   una segunda línea: el riel medía 103px y --nav-alto subía a 6.5rem para
   despejarlo. Con "Páginas web" en el menú eran cuatro links en esa segunda
   fila; ahora queda a la vista el de /web, que es la oferta, y el resto entra
   en el menú plegado. --nav-alto vuelve a ser el de escritorio porque el riel
   vuelve a medir lo mismo. */
@media (max-width: 760px) {
  .riel__interior { gap: calc(var(--u) * 0.75); padding-inline: calc(var(--u) * 1.5); }
  .riel__links { margin: 0 0 0 auto; }
  .riel__links > li + li { display: none; }
  .riel__links .riel__link { min-height: calc(var(--u) * 5.5); padding-inline: var(--u); letter-spacing: 0.06em; }
  .riel__menu { display: block; }

  /* La tecla HABLAR existe para que el que no quiera bajar veinte pantallas no
     tenga que hacerlo: es la salida de emergencia de toda la apuesta del
     descenso. Medía 77x27 en un teléfono, o sea que la salida de emergencia
     era lo más difícil de tocar de la página. 44px es el mínimo cómodo para un
     pulgar; en escritorio se queda compacta, que es donde la proporción del
     riel importa y el mouse no falla. */
  .riel__cta-boton {
    min-height: calc(var(--u) * 5.5);
    padding-inline: calc(var(--u) * 1.25);
    letter-spacing: 0.05em;
  }
  .riel__cta-largo { display: none; }
  .riel__cta-corto { display: inline; }

  /* La cinta en un teléfono dice lo justo: la promo, el precio y el reloj. */
  .cinta { gap: var(--u); letter-spacing: 0.05em; }
  .cinta s { display: none; }
}

/* En un teléfono chico el menú queda en su ícono (la palabra sigue ahí para
   el lector de pantalla), y así el link a /web entra en la fila hasta 340px. */
@media (max-width: 399px) {
  .riel__menu-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .riel__menu-boton { min-width: calc(var(--u) * 5.5); justify-content: center; padding-inline: var(--u); }
}

/* Por debajo de 370px no entran el link a /web, el menú y el botón del agente
   junto al logotipo: /web sigue en el menú y en la cinta, que es un link. */
@media (max-width: 369px) {
  .riel__links { display: none; }
  .riel__menu { margin-left: auto; }
}

/* La flecha de la cinta se va por debajo de 380px, y el nombre de la promo
   por debajo de 350: se queda con el precio y el reloj. */
@media (max-width: 379px) {
  .cinta__ir { display: none; }
}
@media (max-width: 349px) {
  .cinta__nombre { display: none; }
}

@media (max-width: 620px) {
  .pie__links { margin: 0; order: 3; width: 100%; }
  /* Dos filas (marca y zona, links) pegadas: con el gap de 16px de escritorio
     el pie en un teléfono volvía a ser un bloque. */
  .pie__interior { row-gap: calc(var(--u) * 0.5); }
}

/* El descenso con movimiento reducido vive en home.css: solo lo usa la
   home, y acá lo pagaban las cuatro páginas en su ruta crítica. */