/* ============================================================
   MOLCAWORLD FINAL · "El estadio de noche", edición brandbook
   Fusión aprobada: hero cinemático scroll-scrubbed (v4) + sitio
   oscuro completo (v3) + archivo de 57 proyectos.
   Paleta EXACTA del BRAND BOOK 2021: Pantone 199 C #DB0A34 y
   escala 200/201/202/497 C + Process Black C #1D1D1B.
   Tipografía del manual: Montserrat (titulares Bold en minúsculas,
   bandera izquierda) + Spline Sans Mono como voz de marcador.
   Octubre de 2026, lo pidió la clienta: Montserrat en títulos y
   subtítulos, Aptos en el cuerpo. Desde la noche del 1 de octubre Aptos
   se aloja en fonts/ (MolcaWorld declara tener licencia, informe 06k) y
   detrás van las de sistema de antes. Montserrat y Spline Sans Mono
   siguen llegando de Google Fonts (partials/documento.php).
   Racional y mapeo viejo→nuevo: ../03-design-system.md
   Regla del reveal: sin JS hay web; los estados ocultos viven
   solo bajo .js-anim. reduced-motion desactiva TODO el motion.
   ============================================================ */

/* Aptos, la letra del cuerpo, alojada aquí (informe 06k). Cuatro estilos,
   los que usa el cuerpo medidos en las 157 rutas: normal, cursiva (el texto
   de las noticias admite énfasis), seminegrita (las opciones marcadas del
   configurador) y negrita. Cada fichero lleva solo el subconjunto latino de
   su unicode-range, más la flecha y el signo menos que el cuerpo usa hoy. Lo
   que caiga fuera lo pinta la siguiente fuente de la pila. El navegador solo
   descarga un estilo cuando alguna página lo pinta, y la normal se precarga
   en partials/head.php. Los ficheros salen de _cms/fuentes/convertir_aptos.py. */
@font-face { font-family: "Aptos"; src: url("../fonts/aptos-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-017F, U+2000-206F, U+20AC, U+2192, U+2212; }
@font-face { font-family: "Aptos"; src: url("../fonts/aptos-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-017F, U+2000-206F, U+20AC, U+2192, U+2212; }
@font-face { font-family: "Aptos"; src: url("../fonts/aptos-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-017F, U+2000-206F, U+20AC, U+2192, U+2212; }
@font-face { font-family: "Aptos"; src: url("../fonts/aptos-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-017F, U+2000-206F, U+20AC, U+2192, U+2212; }

/* Tokens */
:root {
  --rojo: #DB0A34;          /* Pantone 199 C */
  --rojo-2: #BA0E2B;        /* Pantone 200 C (hover) */
  --rojo-3: #980F21;        /* Pantone 201 C */
  --rojo-4: #750D15;        /* Pantone 202 C */
  --rojo-noche: #4E0503;    /* Pantone 497 C */
  --rojo-brasa: #F64669;    /* derivado funcional: 199 C a L62 para texto pequeño sobre negro */
  --negro: #0B0B0A;         /* Process Black profundizado (fondo base) */
  --carbon: #1D1D1B;        /* Process Black C oficial (superficies) */
  --carbon-2: #282826;
  --cal: #FBFAFA;
  --niebla: #B9B9B4;
  --hormigon: #6E6E68;
  --linea: rgba(251, 250, 250, 0.14);
  --linea-fuerte: rgba(251, 250, 250, 0.28);

  --f-impacto: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-body: "Aptos", "Segoe UI", system-ui, Arial, sans-serif;
  --f-mono: "Spline Sans Mono", "Courier New", monospace;

  --t-display: clamp(2.25rem, 5vw, 4.3rem);
  --t-h2: clamp(1.6rem, 3vw, 2.5rem);
  --t-h3: 1.25rem;
  --t-body: 1.0625rem;
  --t-label: 0.8125rem;
  --t-dorsal: clamp(4rem, 15vw, 12rem);

  --esp-seccion: clamp(5.5rem, 14vh, 10rem);
  --esp-1: 0.5rem; --esp-2: 1rem; --esp-3: 1.5rem; --esp-4: 2rem; --esp-6: 3rem;
  --ancho-max: 1280px;
  --pad-lateral: clamp(1.25rem, 4.5vw, 4rem);
  --rail-top: 5.5rem;   /* cápsula fija (4.4rem) + aire */
  --fila-alto: 36px;    /* fila del rail en escritorio; en el drawer sube a 46px */
  --medida: 68ch;
  --sombra-flotante: 0 20px 60px rgba(0, 0, 0, 0.55);
  --grad-marca: linear-gradient(150deg, #3A0712 0%, #1D1D1B 55%, #4E0503 100%);

  --z-flotante: 5; --z-nav: 10; --z-panel: 20; --z-cortina: 30;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-cortina: cubic-bezier(0.76, 0, 0.24, 1);

  background-color: var(--negro);
}

/* Transición de página (cortina roja) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-fuera 0.26s var(--curva-cortina) both; }
  ::view-transition-new(root) { animation: vt-dentro 0.42s var(--curva-cortina) both; }
  @keyframes vt-fuera { to { opacity: 0.35; } }
  @keyframes vt-dentro { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--cal);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--rojo); color: #fff; }
img, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rojo-brasa); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { margin: 0 0 0.5em; text-wrap: balance; }
/* Títulos y subtítulos en Montserrat aunque no lleven clase: el cuerpo ya no
   lo es. Entran como subtítulo la entradilla bajo el H1 de cada página
   (hero__apoyo, y entradilla en los legales) y la línea que acompaña al
   título de una cabecera de sección. */
h1, h2, h3, h4, h5, h6,
.hero__apoyo, .entradilla, .cabecera-seccion .texto-secundario { font-family: var(--f-titulo); }
p { text-wrap: pretty; }

.salto {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--rojo); color: #fff; padding: 0.75rem 1.25rem;
  font-family: var(--f-mono); text-decoration: none;
}
.salto:focus-visible { left: 0; }

.contenedor { max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--pad-lateral); }
.seccion { padding-block: var(--esp-seccion); position: relative; }
main { display: block; }

/* Polo claro (respiro: artículos, legales, algún bloque editorial).
   El texto sobre claro es Process Black, como en los Libros Rojos. */
.cal { background: var(--cal); color: #1D1D1B; }
.cal p { color: #3B3B38; }
.cal a { color: var(--rojo-2); }
.cal .kicker { color: var(--rojo-2); }
.cal h1, .cal h2, .cal h3 { color: #1D1D1B; }
.cal :focus-visible { outline-color: var(--rojo); }

/* Tipografía (Montserrat per manual: Bold, minúsculas) */
.display, h1.display {
  font-family: var(--f-impacto);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 0.35em;
}
.display--h2 { font-size: var(--t-h2); }
h2.titulo, .titulo {
  font-family: var(--f-impacto);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h3.subtitulo, .subtitulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.prosa-titulo { /* títulos en zonas de lectura (cal): menos grito */
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
}
.punto { color: var(--rojo); }
.cal .punto { color: var(--rojo); }

.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--niebla); margin: 0 0 1.25rem;
}
/* Sin rayita delante (Rafa, 2026-09-29, regla del estudio del 16-09): el
   kicker se distingue por la mono, las mayusculas y el color, no por un adorno. */
.kicker b { color: var(--rojo-brasa); font-weight: 500; }

.texto-secundario { color: var(--niebla); }
.cal .texto-secundario { color: #5E5E58; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--cal); max-width: 46ch; }
.cal .lede { color: #2C2C29; }
.prosa { max-width: var(--medida); }
.prosa p { margin: 0 0 1.25em; }

/* Numeral gigante (elemento gráfico, aria-hidden) */
.dorsal {
  font-family: var(--f-impacto); font-weight: 900;
  font-size: var(--t-dorsal); line-height: 0.85;
  letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 2px var(--linea-fuerte);
  user-select: none; pointer-events: none;
}
.dorsal--rojo { -webkit-text-stroke: 2px var(--rojo); }
.dorsal--solido { color: var(--cal); -webkit-text-stroke: 0; }

/* Botones */
.btn {
  --bg: var(--rojo); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bg);
  padding: 0.85rem 1.6rem; border-radius: 999px; min-height: 48px;
  transition: background 0.2s var(--curva), border-color 0.2s var(--curva), color 0.2s var(--curva), transform 0.2s var(--curva);
}
.btn:hover { background: var(--rojo-2); border-color: var(--rojo-2); }
/* En una sección clara, ".cal a" (texto rojo oscuro) pesaba más que el color
   del botón: el "Iniciar proyecto" del final de las noticias salía rojo oscuro
   sobre rojo y, con el ratón encima, del mismo color que su fondo (informe
   06k). Así cada botón dentro de .cal pinta el texto de su variante. Los de
   contorno llevan además su tinta oscura, la de abajo. */
.cal .btn { color: var(--fg); }
.btn--linea { --bg: transparent; --fg: var(--cal); border-color: var(--linea-fuerte); }
.btn--linea:hover { background: var(--cal); border-color: var(--cal); color: var(--negro); }
.cal .btn--linea, .cal .btn--cal { --fg: #1D1D1B; border-color: rgba(29,29,27,.35); }
.cal .btn--linea:hover, .cal .btn--cal:hover { background: var(--negro); color: var(--cal); border-color: var(--negro); }
/* alias heredados del hero v4 */
.btn--rojo { --bg: var(--rojo); --fg: #fff; }
.btn--cal { --bg: transparent; --fg: var(--cal); border-color: var(--linea-fuerte); }
.btn--cal:hover { background: var(--cal); border-color: var(--cal); color: var(--negro); }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-titulo); font-weight: 700;
  letter-spacing: 0; text-decoration: none; color: var(--cal);
  padding-bottom: 0.15em; border-bottom: 2px solid var(--rojo);
  transition: color 0.2s var(--curva), gap 0.2s var(--curva);
}
.enlace-flecha::after { content: "→"; transition: transform 0.2s var(--curva); }
.enlace-flecha:hover { color: var(--rojo-brasa); }
.enlace-flecha:hover::after { transform: translateX(5px); }
.cal .enlace-flecha { color: #1D1D1B; }
.cal .enlace-flecha:hover { color: var(--rojo-2); }

/* Cápsula de navegación (estadio de noche) */
.barra { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); padding: 0.9rem var(--pad-lateral) 0; pointer-events: none; }
.capsula {
  pointer-events: auto; position: relative;
  max-width: var(--ancho-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: rgba(29, 29, 27, 0.84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--linea);
  border-radius: 999px;
  box-shadow: var(--sombra-flotante);
  padding: 0.4rem 0.6rem 0.4rem 1.15rem; min-height: 3.5rem;
}
.marca { display: flex; align-items: center; text-decoration: none; color: var(--cal); min-height: 44px; flex-shrink: 0; }
.marca img { width: 132px; height: 40px; object-fit: contain; object-position: left center; }
.marca__texto { display: none; font-family: var(--f-impacto); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; text-transform: uppercase; }
.marca__texto b { color: var(--rojo); }
.marca.sin-logo img { display: none; }
.marca.sin-logo .marca__texto { display: inline; }

.nav { display: flex; align-items: center; gap: 0.9rem; }
.nav > ul { list-style: none; display: flex; align-items: center; gap: clamp(0.1rem, 0.7vw, 0.5rem); margin: 0; padding: 0; }
.nav > ul > li { position: relative; }
.nav a:not(.btn) {
  font-family: var(--f-titulo); font-size: 0.95rem; font-weight: 600; letter-spacing: 0;
  text-decoration: none; color: var(--cal); padding: 0.6rem 0.55rem; display: inline-block; border-radius: 999px;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"]:not(.btn) { color: var(--rojo-brasa); }
/* La sección en la que se está (Sobre nosotros, en Noticias): mismo color que
   la página actual. Solo el primer nivel, que el idioma activo también lleva
   aria-current="true" y tiene su propio estilo. */
.nav > ul > li > a[aria-current="true"] { color: var(--rojo-brasa); }
.sub-boton { background: transparent; border: 0; cursor: pointer; color: var(--niebla); font-size: 0.75rem; line-height: 1; padding: 0.6rem 0.3rem; margin-left: -0.4rem; min-width: 28px; min-height: 44px; border-radius: 999px; }
.sub-boton:hover { color: var(--rojo-brasa); }
.sub {
  list-style: none; margin: 0; padding: 0.5rem; display: none;
  position: absolute; top: calc(100% + 0.6rem); left: 0; min-width: 260px;
  background: var(--carbon); border: 1px solid var(--linea);
  box-shadow: var(--sombra-flotante); z-index: var(--z-panel); border-radius: 14px;
}
.sub a { display: block; padding: 0.65rem 0.85rem !important; border-radius: 8px; }
.sub a:hover { background: var(--carbon-2); color: var(--rojo-brasa) !important; }
li.sub-abierto > .sub { display: block; }

.nav__acciones { display: flex; align-items: center; gap: 0.75rem; }
.nav__cta.btn { padding: 0.55rem 1.25rem; min-height: 44px; font-size: 0.92rem; }
/* Boton del configurador (2026-09-29): contorno y no relleno, para que no
   compita con Inicia tu proyecto, que sigue siendo el unico boton rojo. */
.nav__config.btn { padding: 0.55rem 1.1rem; min-height: 44px; font-size: 0.92rem; white-space: nowrap; }
.nav__config.btn[aria-current="page"] { border-color: var(--rojo); }
.nav__idiomas { display: flex; gap: 0.1rem; align-items: center; font-family: var(--f-mono); font-size: 0.8125rem; }
.nav__idiomas a { text-decoration: none; color: var(--niebla); padding: 0.65rem 0.4rem; }
.nav__idiomas a[aria-current="true"] { color: var(--cal); text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nav__idiomas a:hover { color: var(--rojo-brasa); }
.nav-boton {
  display: none; font-family: var(--f-titulo); font-weight: 700; font-size: 0.95rem;
  background: var(--cal); color: var(--negro); border: 0; border-radius: 999px;
  padding: 0.55rem 1.15rem; min-height: 44px; min-width: 44px; cursor: pointer;
}
.nav-boton[aria-expanded="true"] { background: var(--rojo); color: #fff; }

@media (min-width: 1101px) and (hover: hover) {
  /* Desplegable con gracia de cierre. El panel queda pintado (display: block)
     y se muestra u oculta con visibility + opacity: al salir del conjunto
     trigger + panel, la visibility tarda 0.28s en caer, tiempo de sobra para
     cruzar hasta una opcion, y reentrar durante ese margen lo mantiene abierto.
     Antes el display: none era instantaneo y el panel moria a mitad de camino. */
  .nav > ul > li.tiene-sub > .sub {
    display: block; visibility: hidden; opacity: 0;
    transition: opacity 0.16s var(--curva) 0.12s, visibility 0s linear 0.28s;
  }
  /* Puente invisible sobre el hueco de 0.6rem entre la capsula y el panel:
     sin el, cruzar ese vacio rompia el :hover del li y cerraba el panel. */
  .nav > ul > li.tiene-sub > .sub::before {
    content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem;
  }
  .nav > ul > li.tiene-sub:hover > .sub,
  .nav > ul > li.tiene-sub:focus-within > .sub,
  .nav > ul > li.tiene-sub.sub-abierto > .sub {
    visibility: visible; opacity: 1; transition-delay: 0s;
  }
}
/* Móvil/tablet: panel ABSOLUTO anclado a la cápsula (regla dura del motor:
   nunca overlay fixed dentro de header con backdrop-filter). */
@media (max-width: 1100px) {
  .nav-boton { display: inline-flex; align-items: center; }
  .capsula { border-radius: 26px; }
  .nav {
    display: none; position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0;
    background: var(--carbon); border: 1px solid var(--linea);
    box-shadow: var(--sombra-flotante); border-radius: 16px;
    padding: 0.75rem 1rem 1.25rem; z-index: var(--z-panel);
    max-height: calc(100dvh - 6rem); overflow-y: auto;
  }
  .nav.abierta { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .nav > ul > li:last-child { border-bottom: 0; }
  .nav a:not(.btn) { display: block; padding: 0.85rem 0.25rem; font-size: 1.1rem; flex: 1; }
  .sub-boton { font-size: 0.9rem; padding: 0.85rem 0.9rem; margin: 0; color: var(--cal); }
  .sub { position: static; display: none; min-width: 0; width: 100%; border: 0; box-shadow: none; background: var(--carbon-2); border-radius: 10px; margin-bottom: 0.75rem; padding: 0.35rem; }
  li.sub-abierto > .sub { display: block; }
  .nav__acciones { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .nav__cta.btn { width: 100%; }
  .nav__config.btn { width: 100%; }
  /* ES / EN juntos a la izquierda. Hace falta la especificidad de
     .nav a:not(.btn), que les ponia flex 1 y los repartia a lo ancho (ES a un
     lado y "/ EN" en el centro). El margen negativo alinea ES con el texto de
     las entradas del menu sin perder los 44 px de zona tactil. */
  .nav__idiomas { justify-content: flex-start; margin-left: -0.5rem; }
  .nav .nav__idiomas a { padding: 0.75rem; flex: 0 0 auto; }
}
/* Franja intermedia 1101-1439: capsula compacta en UNA linea (bug 2026-07-28).
   Con el menu completo (7 items + CTA + ES/EN) el tamano de 1440+ no cabe y la
   capsula envolvia a ~130px, tapando lo que el site reserva con rail-top
   (88px): numeral sticky del timeline, rail de proyectos, anclas. Medido con
   Playwright: sin esto ES no cabe hasta 1401px y EN hasta 1281px. Con esto,
   ES y EN caben en una linea desde 1101px (capsula 58.8px, tactiles >=44px).
   El li pasa a flex con shrink 0: siendo block, su min-content apilaba el
   enlace y el boton del submenu en dos lineas. nowrap en enlaces de primer
   nivel y CTA, los items del panel desplegable siguen envolviendo normal.
   Logo a 104px, sobre el minimo digital de 100px del manual (pag 13). */
@media (min-width: 1101px) and (max-width: 1439px) {
  .capsula { padding: 0.4rem 0.5rem 0.4rem 0.65rem; gap: 0.35rem; }
  .marca img { width: 104px; }
  .nav { gap: 0.35rem; }
  .nav > ul { gap: 0; }
  .nav > ul > li { display: flex; align-items: center; flex-shrink: 0; }
  .nav a:not(.btn) { font-size: 0.85rem; padding: 0.65rem 0.34rem; white-space: nowrap; }
  .nav .sub a { white-space: normal; font-size: 0.9rem; }
  .sub-boton { min-width: 22px; padding: 0.65rem 0.15rem; margin-left: -0.3rem; }
  .nav__acciones { gap: 0.35rem; }
  .nav__cta.btn { padding: 0.5rem 0.75rem; font-size: 0.85rem; white-space: nowrap; }
  .nav__config.btn { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
  .nav__idiomas { font-size: 0.75rem; }
  .nav__idiomas a { padding: 0.65rem 0.25rem; }
}

/* Lienzos de imagen (degradación: degradado de marca 202/497 C) */
.ph {
  position: relative; margin: 0; overflow: hidden;
  background: var(--grad-marca);
}
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; }
.ph .img-caida { visibility: hidden; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph::after { /* viñeta de foco: ayuda a que la foto reviente contra el negro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(11,11,10,0.35) 100%);
}
figcaption { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--hormigon); padding-top: 0.6rem; }

/* FIRMA: escena cinemática (scroll-escena, motor propio) */
.escena { position: relative; height: var(--escena-altura, 300vh); background: var(--negro); }
.escena__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(155deg, #1D1D1B 0%, #0B0B0A 55%, #3A0712 100%); }
.escena__poster.img-caida { visibility: hidden; }
.escena__lienzo { display: none; width: 100%; height: 100%; }
.escena__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.escena-activa .escena__lienzo { display: block; }
.escena-activa .escena__poster { display: none; }
.escena__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,10,0.55) 0%, rgba(11,11,10,0.15) 40%, rgba(11,11,10,0.65) 100%);
}
.escena__texto {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; pointer-events: none; padding-inline: var(--pad-lateral);
  color: var(--cal);
}
.escena-activa .escena__texto [data-in] { opacity: 0; }
.escena .hero__bloque .display { margin: 0 auto 0.4em; max-width: 18ch; font-size: clamp(2.3rem, 5.2vw, 4.4rem); text-shadow: 0 2px 30px rgba(11,11,10,0.55); }
.escena .hero__apoyo { max-width: 46ch; margin: 0 auto 1.75rem; font-size: 1.1rem; color: var(--cal); text-shadow: 0 1px 20px rgba(11,11,10,0.6); }
.escena .hero__ctas { pointer-events: auto; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero__estadios {
  display: none; /* solo aparece dentro del scrub de la firma */
  font-family: var(--f-mono); font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cal);
}
.escena-activa .hero__estadios { display: block; }
.crono {
  position: absolute; bottom: 1.5rem; right: var(--pad-lateral);
  display: none; align-items: baseline; gap: 0.5rem; pointer-events: none;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--rojo-brasa); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.crono::before { content: "MIN"; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--niebla); }
.escena-activa .crono { display: flex; }

/* Escena a una pantalla cuando el motor no corre (sin JS, móvil, reduced-motion) */
.no-js .escena, .sin-escena .escena { height: 100vh; height: 100svh; }
@media (max-width: 767px) { .escena { height: 100vh; height: 100svh; } }
@media (prefers-reduced-motion: reduce) {
  .escena { height: 100vh; height: 100svh; }
  .escena__texto [data-in] { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 420px) { .escena .hero__ctas .btn { width: 100%; } }

/* Hero de páginas internas */
.hero {
  position: relative; padding-top: clamp(8.5rem, 18vh, 13rem);
  padding-bottom: clamp(3rem, 7vh, 5rem); overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: end; }
.hero .display { max-width: 22ch; }
.hero__apoyo { max-width: 56ch; font-size: 1.2rem; color: var(--niebla); margin: 0.5rem 0 2rem; }
.hero__ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hero__dorsal { position: absolute; right: var(--pad-lateral); top: 20%; z-index: 0; opacity: 0.9; }
.hero--media { padding: 0; min-height: min(76vh, 760px); display: flex; align-items: flex-end; }
.hero--media .hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero--media .hero__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,10,0.95), rgba(11,11,10,0.5) 45%, rgba(11,11,10,0.35)); }
.hero--media .contenedor { position: relative; z-index: 1; padding-bottom: clamp(3rem, 8vh, 6rem); padding-top: clamp(8rem, 16vh, 12rem); }
.hero--media .display { color: var(--cal); }
/* Hero de vídeo ambient (patrón data-ambient del sitio: mismo velo de
   legibilidad que la variante imagen; el póster es el fallback y el estado en
   reduced-motion). El fondo cae a carbón si vídeo y póster fallan. */
/* Hero del archivo: más bajo que un hero de landing a propósito. En un
   portfolio el producto es la foto, así que la rejilla tiene que asomar
   en el primer pantallazo, no esperar a un scroll completo. */
.hero--archivo { min-height: min(58vh, 580px); }
.hero--archivo .contenedor { padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.hero--video .hero__fondo { background: var(--carbon); }
.hero--video .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* El vídeo varía de luminosidad frame a frame (cielos, gráficas claras): velo
   algo más denso que la variante imagen para asegurar contraste del copy en
   cualquier fotograma, sin apagar el movimiento. */
.hero--video .hero__fondo::after { background: linear-gradient(to top, rgba(11,11,10,0.96) 8%, rgba(11,11,10,0.66) 48%, rgba(11,11,10,0.5)); }
.breadcrumb { font-family: var(--f-mono); font-size: var(--t-label); color: var(--niebla); margin-bottom: 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; color: var(--niebla); }
.breadcrumb a:hover { color: var(--rojo-brasa); }

/* Cifras (numerales + baseline roja) */
.cifras { border-block: 1px solid var(--linea); padding-block: clamp(3rem, 8vh, 5.5rem); }
.cifras__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; }
.cifra { position: relative; padding-top: 1rem; }
.cifra::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--linea); }
.cifra .baseline { position: absolute; top: 0; left: 0; height: 2px; background: var(--rojo); width: 0; }
.cifra__valor { display: block; font-family: var(--f-impacto); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--cal); }
.cifra__texto { display: block; font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--niebla); margin-top: 0.5rem; }
.cifra--premio { grid-column: 1 / -1; padding-top: 1.5rem; }
.cifra--premio .cifra__valor { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -0.01em; line-height: 1.35; color: var(--niebla); }
.cifra--premio em { color: var(--cal); font-style: italic; }
/* Premios en una sola línea en escritorio (arreglo aprobado); en móvil envuelve sin overflow */
@media (min-width: 1024px) { .cifra--premio .cifra__valor { white-space: nowrap; } }
/* Premios con su logo, su nombre y su año (contrato, 4.9 y 4.11). Solo se
   pintan cuando hay algún logo en media/premios/: sin ninguno, la portada y
   Sobre nosotros enseñan el texto de siempre, y un premio sin logo sale sin
   hueco. Los dos sitios donde salen tienen fondo oscuro, así que cada logo va
   en una placa oscura, la de los escudos de la cinta pero al revés: el de
   FESPA es blanco sobre transparente y en una placa clara no se veía, y el de
   The Stadium Business trae su propio fondo. Ningún logo se retoca. Todas las
   placas tienen la misma altura y un ancho mínimo común, para que los nombres
   arranquen a la misma altura cuando la lista se apila, y el año va en el
   rojo de las etiquetas, para que la fila se lea como premios y no como el
   pie de las cifras. */
.premios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.premio { display: flex; align-items: center; gap: 1.25rem; }
.premio__logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 9.5rem; background: var(--carbon); border: 1px solid var(--linea); border-radius: 14px; padding: 0.75rem 1rem; }
.premio__logo img { display: block; height: 4.25rem; width: auto; max-width: 10rem; object-fit: contain; }
.premio__texto { display: flex; flex-direction: column; gap: 0.3rem; }
.premio__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--cal); max-width: 32ch; }
.premio__anio { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.08em; color: var(--rojo-brasa); }
.premios--hito { margin-top: 1.75rem; }
@media (max-width: 640px) { .cifras__grid { grid-template-columns: 1fr 1fr; } }

/* Cabecera de sección */
.cabecera-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.cabecera-seccion .titulo { max-width: 24ch; }

/* Bandas (dos terrenos, parallax) */
.banda { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 8vh, 6rem); }
.banda:last-child { margin-bottom: 0; }
.banda--invertida .banda__media { order: 2; }
.banda__media { position: relative; overflow: hidden; }
.banda__media .ph { aspect-ratio: 4 / 3; }
.banda__media .parallax-inner { position: absolute; inset: -12% 0; }
.banda__media .parallax-inner img { width: 100%; height: 100%; object-fit: cover; }
.banda__texto .subtitulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -0.02em; }
.banda__texto p { color: var(--niebla); max-width: 44ch; margin: 0.75rem 0 1.5rem; }
@media (max-width: 820px) {
  .banda { grid-template-columns: 1fr; gap: 1.5rem; }
  .banda--invertida .banda__media { order: 0; }
}

/* Alineación (filas de sectores con wipe rojo) */
.alineacion-filas { border-top: 1px solid var(--linea); }
.alineacion-filas li { list-style: none; border-bottom: 1px solid var(--linea); }
.alineacion-filas a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: clamp(1.5rem, 3vh, 2.4rem) 0; text-decoration: none; color: var(--cal); position: relative; }
.alineacion-filas .fila-num { font-family: var(--f-mono); font-size: var(--t-label); color: var(--rojo-brasa); }
.alineacion-filas .subtitulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; margin: 0; transition: transform 0.3s var(--curva); }
.alineacion-filas p { color: var(--niebla); margin: 0.35rem 0 0; max-width: 60ch; grid-column: 2; }
.alineacion-filas .flecha { font-size: 1.6rem; color: var(--niebla); transition: transform 0.3s var(--curva), color 0.3s var(--curva); }
.alineacion-filas a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--rojo); transition: width 0.4s var(--curva); }
.alineacion-filas a:hover::after, .alineacion-filas a:focus-visible::after { width: 100%; }
.alineacion-filas a:hover .subtitulo { transform: translateX(0.5rem); color: var(--rojo-brasa); }
.alineacion-filas a:hover .flecha { transform: translateX(0.5rem); color: var(--rojo-brasa); }
@media (max-width: 640px) {
  .alineacion-filas a { grid-template-columns: auto 1fr auto; gap: 0.75rem 1rem; }
  .alineacion-filas p { grid-column: 1 / -1; }
}

/* Mosaico de proyectos (home) */
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.tarjeta-proyecto { display: block; text-decoration: none; color: var(--cal); position: relative; }
.tarjeta-proyecto .ph { aspect-ratio: 4 / 3; overflow: hidden; }
.tarjeta-proyecto .ph img { transition: transform 0.7s var(--curva); }
.tarjeta-proyecto:hover .ph img { transform: scale(1.05); }
.tarjeta-proyecto .label { display: block; font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rojo-brasa); margin: 1rem 0 0.35rem; }
.tarjeta-proyecto .subtitulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.tarjeta-proyecto .ver { font-family: var(--f-titulo); font-weight: 700; font-size: 0.9rem; color: var(--niebla); }
.tarjeta-proyecto:hover .ver { color: var(--rojo-brasa); }
@media (max-width: 720px) { .mosaico { grid-template-columns: 1fr; } }

/* Método (numeral sticky, sin pin: arreglo aprobado) */
.metodo { background: var(--carbon); position: relative; overflow: clip; }
/* overflow: clip (no 'hidden') clipa el desborde del numeral gigante SIN crear
   un scroll container, que anularía el position: sticky del numeral. */
.metodo__wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: 62vh; }
.metodo__sticky { position: relative; }
.metodo__pasos { list-style: none; margin: 0; padding: 0; }
.metodo__paso { padding: clamp(1.5rem, 4vh, 3rem) 0; border-top: 1px solid var(--linea); position: relative; }
.metodo__paso:first-child { border-top: 0; }
.metodo__paso .num { font-family: var(--f-mono); font-size: var(--t-label); color: var(--rojo-brasa); display: block; margin-bottom: 0.6rem; }
.metodo__paso .subtitulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.metodo__paso p { color: var(--niebla); margin: 0; max-width: 48ch; }
.metodo__dorsal {
  width: max-content; max-width: 100%;
  font-family: var(--f-impacto); font-weight: 900; font-size: clamp(7rem, 20vw, 14rem);
  /* line-height y padding generosos: con line-height 0.85 la caja quedaba MÁS BAJA
     que el glifo, el pie de los números (2/3/4) sobresalía y el relleno
     (background-clip, pintado sobre la caja) no llegaba a cubrirlo. Con la caja más
     grande que el glifo, el relleno cubre el número entero, pies y puntas incluidos. */
  line-height: 1.05; letter-spacing: -0.05em; padding: 0.06em 0.06em 0.14em;
  color: transparent; -webkit-text-stroke: 2px var(--rojo);
  /* Relleno de ARRIBA a ABAJO recortando la SILUETA EXACTA del número con
     background-clip:text: el rojo (gradiente) rellena justo la forma del glifo,
     puntas incluidas, sin depender de superponer un segundo número que no casaba
     al pixel. El text-stroke marca el contorno de la parte aún no rellena. */
  background-image: linear-gradient(to bottom, var(--rojo), var(--rojo) var(--wipe, 0%), transparent var(--wipe, 0%));
  -webkit-background-clip: text; background-clip: text;
  position: relative;
}
.metodo__etiqueta { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--niebla); margin-top: 1rem; }
@media (min-width: 901px) {
  .metodo__wrap { align-items: start; }
  /* El RUNWAY del último numeral va en la COLUMNA del grid (padding-bottom de la
     lista de pasos), no en el padding del wrap: el sticky se limita al área del
     grid, así que solo un grid más alto extiende su recorrido y mantiene el
     numeral 04 fijo y visible mientras se rellena de 0 a 100%. */
  .metodo__pasos { padding-bottom: clamp(26rem, 55vh, 40rem); }
  .metodo__sticky { position: sticky; top: clamp(6rem, 16vh, 10rem); align-self: start; }
}
@media (max-width: 900px) {
  .metodo__wrap { grid-template-columns: 1fr; min-height: 0; gap: 1rem; }
  .metodo__sticky { display: none; } /* en móvil, lista limpia sin numeral */
}
@media (prefers-reduced-motion: reduce) {
  /* sin scrub ni transición: numeral estático con el relleno rojo completo */
  .metodo__dorsal { --wipe: 100%; }
}

/* Ticker de clientes (banda LED: mayúsculas deliberadas de señalética)
   Octubre de 2026: cada club o marca lleva su escudo y enlaza a su proyecto
   (contrato, 4.9). La lista sale dos veces del PHP, la segunda escondida al
   lector y fuera del tabulador, y la cinta se mueve con CSS media vuelta y
   vuelve a empezar sin salto. Ya no la mueve main.js, que buscaba la pista
   vieja (ticker__pista) y ahora no la encuentra.
   Velocidad: unos 60 px por segundo, como antes. La duración es el número de
   elementos (cinta-n, del PHP) por los segundos de cada uno, que crecen con
   el tamaño de letra de la cinta.
   Se para al pasar el ratón y con el foco. Con el foco del teclado, además,
   vuelve al principio: así el enlace que recibe el foco está siempre en la
   primera lista, y js/cinta.js lo trae entero a la vista (el margen de
   scroll-padding evita que quede pegado al borde). Sin movimiento
   (reduced-motion), la lista va entera y quieta, en varias filas. */
.ticker { border-block: 1px solid var(--linea); padding-block: clamp(1.5rem, 4vh, 2.6rem); overflow: hidden; scroll-padding-inline: var(--pad-lateral); }
.ticker__cinta { --cinta-s: 4.6s; display: flex; width: max-content; animation: cinta calc(var(--cinta-n, 14) * var(--cinta-s)) linear infinite; }
.ticker__lista { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ticker__item { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 2.1rem); text-transform: uppercase; letter-spacing: -0.01em; color: var(--niebla); padding: 0 1.5rem; display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap; }
.ticker__item::after { content: "·"; color: var(--rojo); }
.ticker__marca { display: inline-flex; align-items: center; gap: 0.55em; color: inherit; text-decoration: none; border-radius: 0.3em; }
/* El escudo sobre una pastilla clara: los hay negros (Ferrari, Estadio
   Azteca) y azul oscuro (Panasonic), y sobre el negro de la cinta no se
   verían. Así cada marca sale con sus colores, sin retocar ninguna. La altura
   la da el escudo, y los logotipos apaisados bajan con escudo-h (PHP). */
.ticker__escudo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 2.1em; padding: 0 0.5em; background: var(--cal); border-radius: 999px; transition: box-shadow 0.2s var(--curva); }
.ticker__escudo img { display: block; height: calc(var(--escudo-h, 1) * 1.5em); width: auto; }
a.ticker__marca:hover .ticker__nombre { color: var(--rojo-brasa); }
a.ticker__marca:hover .ticker__escudo { box-shadow: 0 0 0 3px var(--rojo); }
.ticker:hover .ticker__cinta, .ticker:focus-within .ticker__cinta { animation-play-state: paused; }
.ticker:has(:focus-visible) .ticker__cinta { animation: none; }
@keyframes cinta { to { transform: translate3d(-50%, 0, 0); } }
/* Segundos por elemento medidos con los 14 de hoy para que la cinta corra a
   unos 60 px por segundo en cada ancho (entre 56 y 64). */
@media (min-width: 900px) { .ticker__cinta { --cinta-s: 4.9s; } }
@media (min-width: 1024px) { .ticker__cinta { --cinta-s: 5.5s; } }
@media (min-width: 1200px) { .ticker__cinta { --cinta-s: 6s; } }
@media (min-width: 1300px) { .ticker__cinta { --cinta-s: 6.4s; } }
@media (min-width: 1400px) { .ticker__cinta { --cinta-s: 6.6s; } }
@media (prefers-reduced-motion: reduce) {
  .ticker__cinta { animation: none; width: auto; }
  .ticker__lista { flex-wrap: wrap; justify-content: center; row-gap: 1.25rem; padding-inline: var(--pad-lateral); }
  .ticker__lista[aria-hidden="true"] { display: none; }
  /* En filas, el punto de final de línea se queda colgando: fuera. */
  .ticker__item::after { display: none; }
}

/* Lista de clientes (sin foto flotante: arreglo aprobado) */
.clientes-lista { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 3rem; }
.clientes-lista li { break-inside: avoid; padding: 0.9rem 0; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; }
.clientes-lista .club { font-family: var(--f-impacto); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--cal); }
.clientes-lista .proyecto { font-family: var(--f-mono); font-size: 0.82rem; color: var(--niebla); }
.clientes-otros { color: var(--niebla); margin-top: 2rem; max-width: 70ch; }
@media (max-width: 640px) { .clientes-lista { column-count: 1; } }

/* Servicios numerados */
.servicios { list-style: none; margin: 0; padding: 0; }
.servicio { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem 1.5rem; padding: clamp(1.75rem, 4vh, 2.75rem) 0; border-top: 1px solid var(--linea); align-items: start; }
.servicio .indice { font-family: var(--f-mono); font-size: 1rem; color: var(--rojo-brasa); padding-top: 0.35rem; }
.servicio .subtitulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.65rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.servicio p { color: var(--niebla); margin: 0; max-width: 66ch; }
.servicio .prueba { display: inline-block; margin-top: 0.6rem; font-family: var(--f-mono); font-size: 0.85rem; color: var(--cal); border-left: 2px solid var(--rojo); padding-left: 0.75rem; }
.servicio .prueba a { color: var(--rojo-brasa); }

/* Manifiesto (claim sobre foto) */
.manifiesto { position: relative; overflow: hidden; }
.manifiesto .ph { aspect-ratio: 21 / 9; }
.manifiesto__inner { position: absolute; inset: 0; display: flex; align-items: center; }
.manifiesto__inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,10,0.9) 0%, rgba(11,11,10,0.55) 55%, rgba(11,11,10,0.2) 100%); }
.manifiesto__claim { position: relative; z-index: 1; }
.manifiesto__claim .titulo { max-width: 24ch; color: var(--cal); }
.manifiesto__claim p { color: var(--niebla); max-width: 52ch; margin-top: 1rem; }
@media (max-width: 640px) { .manifiesto .ph { aspect-ratio: 4/5; } .manifiesto__inner::before { background: linear-gradient(to top, rgba(11,11,10,0.92), rgba(11,11,10,0.5)); } }
/* Bloque de proyectos de la portada (octubre de 2026): el mismo manifiesto
   de las soluciones, con un botón al archivo y el nombre del estadio de la
   foto abajo a la derecha, sobre la foto. */
.portada-proyectos .hero__ctas { margin-top: 1.75rem; }
.portada-proyectos__pie { position: absolute; right: var(--pad-lateral); bottom: 1rem; z-index: 2; padding: 0; color: var(--niebla); text-shadow: 0 1px 10px rgba(11,11,10,0.85); }

/* Dolores (numerados, tarjetas oscuras) */
.bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); gap: 1.5rem; }
.bloque { border: 1px solid var(--linea); padding: clamp(1.5rem, 3vw, 2.2rem); position: relative; }
.bloque .num { font-family: var(--f-impacto); font-weight: 900; font-size: 2.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--rojo); display: block; margin-bottom: 0.75rem; }
.bloque .subtitulo { margin: 0 0 0.5rem; }
.bloque p { color: var(--niebla); margin: 0; }

/* FAQ */
.faq { max-width: 60rem; }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0; position: relative; font-family: var(--f-titulo); font-weight: 600; font-size: 1.15rem; color: var(--cal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 1.25rem; font-family: var(--f-mono); color: var(--rojo-brasa); font-size: 1.5rem; line-height: 1; transition: transform 0.25s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--niebla); margin: 0 0 1.4rem; max-width: 68ch; }

/* CTA final (oscura con foto) */
.cta-final { position: relative; overflow: hidden; padding-block: clamp(5rem, 12vh, 9rem); }
.cta-final .cta-fondo { position: absolute; inset: 0; z-index: 0; }
.cta-final .cta-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,10,0.95), rgba(11,11,10,0.78)); }
.cta-final .contenedor { position: relative; z-index: 1; }
.cta-final .display { max-width: 22ch; }
.cta-final p { color: var(--niebla); max-width: 52ch; margin: 0 0 2rem; }
.cta-final .hero__ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.cta-simple { text-align: left; }

/* Interludio (frase editorial grande) */
.interludio { border-top: 1px solid var(--linea); }
.interludio__frase { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.6rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; color: var(--cal); margin: 0 0 1rem; }
.interludio p { color: var(--niebla); max-width: 52ch; margin: 0 0 1.5rem; }

/* Caso de estudio / ficha de proyecto */
.ficha-tecnica { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; background: transparent; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.ficha-tecnica li { background: var(--negro); padding: 1rem 1.2rem; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.ficha-tecnica dt { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hormigon); margin-bottom: 0.35rem; }
.ficha-tecnica dd { margin: 0; font-family: var(--f-titulo); font-weight: 600; color: var(--cal); }
.caso-bloque { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.caso-bloque + .caso-bloque { margin-top: clamp(3rem, 7vh, 5rem); }
.caso-bloque .caso-texto p { color: var(--niebla); }
.caso-bloque--invertido .caso-media { order: -1; }
.secuencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); gap: 1rem; }
.siguiente-caso { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--linea); padding-top: 2rem; text-decoration: none; color: var(--cal); }
.siguiente-caso:hover .display { color: var(--rojo-brasa); }
.siguiente-caso .etq { font-family: var(--f-mono); font-size: var(--t-label); color: var(--niebla); }
@media (max-width: 760px) { .caso-bloque { grid-template-columns: 1fr; } .caso-bloque--invertido .caso-media { order: 0; } }

/* Ficha de archivo: cuerpo + navegación anterior/siguiente */
.ficha-datos { font-family: var(--f-mono); font-size: 0.92rem; color: var(--niebla); letter-spacing: 0.02em; margin: 0.75rem 0 0; }
.volver { margin: 0 0 1.5rem; }
.volver a { font-family: var(--f-mono); font-size: 0.9rem; color: var(--niebla); text-decoration: none; }
.volver a:hover { color: var(--rojo-brasa); }
.ficha-cuerpo { max-width: var(--medida); }
.ficha-cuerpo p { color: var(--niebla); margin: 0 0 1.35em; }
.nota-render { font-family: var(--f-mono); font-size: 0.82rem; color: var(--niebla); border: 1px solid var(--linea); display: inline-block; padding: 0.4rem 0.8rem; margin-top: 1.25rem; }
.ficha-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.ficha-nav a { background: var(--negro); text-decoration: none; color: var(--cal); padding: clamp(1.5rem, 4vh, 2.5rem) var(--esp-3); display: flex; flex-direction: column; gap: 0.4rem; }
.ficha-nav a:hover .ficha-nav__titulo { color: var(--rojo-brasa); }
.ficha-nav .etq { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--niebla); }
.ficha-nav__titulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; transition: color 0.2s var(--curva); }
.ficha-nav a.ficha-nav--sig { text-align: right; align-items: flex-end; }
@media (max-width: 640px) { .ficha-nav { grid-template-columns: 1fr; } .ficha-nav a.ficha-nav--sig { text-align: left; align-items: flex-start; } }

/* Plantilla de ficha unificada (case study homogéneo) */
.hero--ficha .ficha-datos { margin-top: 1rem; }
.ficha-kicker { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--rojo-brasa); margin: 0 0 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem; }
/* metadatos: ficha técnica (hechos) + alcance (qué hicimos) */
.ficha-meta__cols { display: grid; grid-template-columns: 1.55fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.ficha-meta__cols .ficha-tecnica { margin-top: 0; }
@media (max-width: 860px) { .ficha-meta__cols { grid-template-columns: 1fr; gap: 2rem; } }
.ficha-alcance { padding-top: 0.25rem; }
.ficha-alcance .kicker { margin-bottom: 1.1rem; }
.alcance-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.alcance-lista li { position: relative; padding-left: 1.7rem; font-family: var(--f-titulo); font-weight: 600; font-size: 0.98rem; color: var(--cal); line-height: 1.35; }
.alcance-lista li::before { content: ""; position: absolute; left: 0.25rem; top: 0.15em; width: 0.38rem; height: 0.66rem; border: solid var(--rojo); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* relato: bloques de texto y texto+imagen alternando (case study) */
.ficha-relato .ficha-h2 { margin-bottom: 1.1rem; }
.ficha-bloque-texto { max-width: var(--medida); }
.ficha-bloque-texto p, .ficha-relato .caso-texto p { color: var(--niebla); }
.ficha-relato > .contenedor > .ficha-bloque-texto + .ficha-bloque-texto,
.ficha-relato > .contenedor > .caso-bloque + .ficha-bloque-texto,
.ficha-relato > .contenedor > .ficha-bloque-texto + .caso-bloque { margin-top: clamp(3rem, 7vh, 5rem); }
.ficha-galeria { margin-top: clamp(3rem, 7vh, 5rem); }
.ficha-galeria .kicker { margin-bottom: 1.1rem; }
.ph .nota-render { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; margin: 0; padding: 0.3rem 0.65rem; background: rgba(11,11,10,0.82); }
/* más proyectos: rejilla de 3 tarjetas relacionadas */
.ficha-relacionados .ficha-h2 { margin-bottom: 1.75rem; }
.rel-grid { list-style: none; margin: 0 0 clamp(2.5rem, 6vh, 4rem); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 860px) { .rel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rel-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ARCHIVO DE PROYECTOS - rail lateral + rejilla
   Concepto: el índice de una revista, no el sidebar de una tienda.
   Sin cajas ni grises de catálogo: una regla fina por eje, versalitas
   en mono para los rótulos, filas de texto con su cifra a la derecha y
   el rojo 199 C reservado a UNA cosa: la marca del estado activo.
   La foto es el producto, así que los controles ocupan una columna de
   290px y la rejilla empieza a la altura del primer titular.
   ============================================================ */
.archivo-seccion { padding-top: clamp(1.75rem, 4.5vh, 3.25rem); }
.archivo-layout { display: grid; grid-template-columns: clamp(250px, 24vw, 290px) minmax(0, 1fr); }
/* nada de overflow: hidden en la cadena de ancestros del rail: mataría el
   sticky de .rail__interior (ya nos mordió en .metodo, arreglado con clip). */
.archivo-col { min-width: 0; padding-left: clamp(1.5rem, 3vw, 2.75rem); }

/* Rail: la columna-índice */
.rail { border-right: 1px solid var(--linea); padding-right: clamp(1.25rem, 2.2vw, 1.75rem); }
.rail__interior {
  position: sticky; top: var(--rail-top);
  max-height: calc(100dvh - var(--rail-top) - 0.75rem);
  overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent;
}
/* la cabecera calza exactamente con la barra de resultados de la derecha:
   así la primera regla del rail y la del recuento son la misma línea. */
.rail__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 48px; margin-bottom: 1rem; }
.rail__titulo { margin: 0; font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hormigon); }
.rail__cerrar { display: none; background: transparent; border: 0; color: var(--niebla); font-size: 1.5rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; border-radius: 999px; }
.rail__cerrar:hover { color: var(--rojo-brasa); }
.rail__landing { display: inline-block; font-family: var(--f-mono); font-size: 0.75rem; color: var(--rojo-brasa); text-decoration: none; padding: 0.5rem 0 0.5rem 0.9rem; border-bottom: 1px solid transparent; }
.rail__landing:hover { border-bottom-color: var(--rojo-brasa); }

/* Un acordeón por eje (<details>: abre sin JS) */
.eje { border-top: 1px solid var(--linea); }
.eje:last-child { border-bottom: 1px solid var(--linea); }
.eje__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0; padding: 0.7rem 0; min-height: 40px; cursor: pointer; list-style: none;
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--niebla);
}
.eje__cabeza::-webkit-details-marker { display: none; }
.eje__cabeza::after { content: "+"; font-size: 1rem; line-height: 1; color: var(--hormigon); }
.eje[open] > .eje__cabeza::after { content: "–"; }
.eje__cabeza:hover { color: var(--cal); }
.eje__cabeza:hover::after { color: var(--rojo-brasa); }
.eje__cabeza:focus-visible { outline-offset: -2px; }
.eje__cabeza--fijo { cursor: default; }
.eje__cabeza--fijo::after { content: none; }
.eje__cuerpo { padding-bottom: 0.5rem; }
/* Sports / Corporate: los dos libros rojos como subtítulo NO clicable.
   Ya no gastan un eje de filtro, solo ordenan la lectura de Categoría. */
.eje__mundo {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.65rem 0 0.15rem;
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--hormigon);
}
.eje__mundo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* Opción: fila de índice, no chip de tienda */
.opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  position: relative; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 0;
  padding: 0.35rem 0 0.35rem 0.9rem; min-height: var(--fila-alto);
  font-family: var(--f-titulo); font-weight: 600; font-size: 0.9rem; line-height: 1.3;
  color: var(--niebla); transition: color 0.18s var(--curva);
}
/* EL acento: una pleca roja en el margen, como la marca de un índice */
.opcion::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0; background: var(--rojo);
  transition: height 0.22s var(--curva);
}
.opcion:hover:not(:disabled) { color: var(--cal); }
.opcion[aria-pressed="true"] { color: var(--cal); font-weight: 700; }
.opcion[aria-pressed="true"]::before { height: calc(100% - 0.6rem); }
.opcion[aria-pressed="true"] .opcion__n { color: var(--rojo-brasa); }
.opcion:disabled { color: var(--hormigon); opacity: 0.45; cursor: not-allowed; }
/* outline hacia dentro: el rail scrollea y un outline-offset positivo se recorta */
.opcion:focus-visible { outline-offset: -2px; }
.opcion__n { font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--hormigon); flex-shrink: 0; }

/* Barra de resultados (sobre la rejilla) */
.barra-resultados { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-bottom: 1rem; }
.buscador { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 240px; min-width: 0; position: relative; }
.buscador input {
  flex: 1; font-family: var(--f-body); font-size: 1rem; color: var(--cal);
  background: var(--carbon); border: 1px solid var(--linea); border-radius: 999px;
  padding: 0.8rem 2.9rem 0.8rem 1.25rem; min-height: 48px; width: 100%;
}
.buscador input::placeholder { color: var(--hormigon); opacity: 1; }
.buscador input:focus { outline: none; border-color: var(--rojo); }
.buscador__limpiar {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--niebla); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0.6rem; min-width: 40px; min-height: 40px;
  border-radius: 999px; display: none;
}
.buscador__limpiar.visible { display: block; }
.buscador__limpiar:hover { color: var(--rojo-brasa); }
.orden { display: flex; align-items: center; gap: 0.6rem; }
.orden label { font-family: var(--f-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--niebla); }
.orden select {
  font-family: var(--f-titulo); font-weight: 600; font-size: 0.92rem; color: var(--cal);
  background: var(--carbon); border: 1px solid var(--linea); border-radius: 999px;
  padding: 0.6rem 1rem; min-height: 44px; cursor: pointer;
}
.orden select:focus { outline: none; border-color: var(--rojo); }

/* botón del rail: solo móvil/tablet (en escritorio el rail está siempre a la vista) */
.filtros-boton { display: none; align-items: center; gap: 0.5rem; flex: 0 0 auto; font-family: var(--f-titulo); font-weight: 700; font-size: 0.9rem; background: transparent; color: var(--cal); border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 0.5rem 1.1rem; min-height: 44px; cursor: pointer; }
.filtros-boton:hover { border-color: var(--cal); }
.filtros-boton[aria-expanded="true"] { border-color: var(--rojo); }
.filtros-boton__n { font-family: var(--f-mono); font-size: 0.72rem; background: var(--rojo); color: #fff; border-radius: 999px; min-width: 1.35rem; padding: 0.1rem 0.35rem; text-align: center; }

/* Recuento + filtros activos 
   La regla superior es la misma línea que abre el rail. Los chips solo
   existen si hay filtros puestos: sin filtros, aquí solo hay una cifra. */
.archivo-estado { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center; margin-bottom: clamp(1.25rem, 2.5vh, 2rem); border-top: 1px solid var(--linea); padding-top: 0.9rem; }
.contador { font-family: var(--f-mono); font-size: 0.9rem; color: var(--cal); margin: 0; flex: 0 0 auto; }
.activos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.activos__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-family: var(--f-titulo); font-weight: 600; font-size: 0.84rem;
  background: transparent; color: var(--cal);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: 0.35rem 0.85rem; min-height: 44px;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva), background 0.2s var(--curva);
}
.chip--quitar:hover { border-color: var(--rojo); background: rgba(219, 10, 52, 0.14); }
.chip__x { font-size: 1.05rem; line-height: 1; color: var(--rojo-brasa); }
.quitar-filtros { background: transparent; border: 0; cursor: pointer; font-family: var(--f-titulo); font-weight: 600; font-size: 0.84rem; color: var(--niebla); text-decoration: underline; text-underline-offset: 3px; padding: 0.4rem 0; min-height: 44px; display: none; }
.quitar-filtros.visible { display: inline-block; }
.quitar-filtros:hover { color: var(--rojo-brasa); }

.archivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%),1fr)); gap: clamp(1.25rem,2.5vw,2rem) clamp(1rem,2.5vw,1.75rem); list-style: none; margin: 0; padding: 0; transition: opacity 0.15s var(--curva); }
.archivo.filtrando { opacity: 0.35; }
.archivo li.filtrado { display: none; }
.pieza { display: block; text-decoration: none; color: var(--cal); position: relative; }
.pieza .ph { aspect-ratio: 4/3; }
.pieza .ph img { transition: transform 0.6s var(--curva); }
.pieza:hover .ph img { transform: scale(1.05); }
.pieza__badges { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; display: flex; gap: 0.4rem; }
.badge { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(11,11,10,0.78); color: var(--cal); border: 1px solid var(--linea); }
.badge--destacado { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.pieza__titulo { display: block; font-family: var(--f-impacto); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.25; margin: 0.9rem 0 0.3rem; transition: color 0.2s var(--curva); }
.pieza:hover .pieza__titulo { color: var(--rojo-brasa); }
.pieza__meta { display: block; font-family: var(--f-mono); font-size: 0.8rem; color: var(--niebla); }
.pieza__meta .anio { color: var(--hormigon); }
.pieza .etiquetas { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pieza .etq { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rojo-brasa); border: 1px solid var(--linea); padding: 0.15rem 0.5rem; border-radius: 999px; }
.pieza .ver { display: inline-block; margin-top: 0.55rem; font-family: var(--f-titulo); font-weight: 700; font-size: 0.85rem; color: var(--niebla); }
.pieza:hover .ver { color: var(--rojo-brasa); }
.estado-vacio { display: none; font-family: var(--f-mono); color: var(--niebla); padding: 2.5rem 0; max-width: 52ch; }
.estado-vacio.visible { display: block; }

/* Formulario · "La mesa de dibujo" (2026-07-27) 
   El contacto es donde nace el siguiente proyecto: el plano de Mestalla
   como ambiente (.plano), el formulario como la hoja tecnica (marcas de
   registro de imprenta en las esquinas, campos que se trazan al foco) y
   el lateral como cajetin de cifras. Racional: ../03-design-system.md,
   seccion "La mesa de dibujo". Todo el motion cuelga de patrones ya
   existentes (data-rev, data-rev-img, data-parallax-fondo, data-contador,
   .baseline): cero JS nuevo. */

/* El ambiente: plano azul de Mestalla tras hero + formulario */
.plano { position: relative; overflow: clip; }
.plano > .hero, .plano > .seccion { position: relative; z-index: 1; }
.plano > .hero { overflow: visible; } /* el plano ya clipa; el hero no debe cortar nada */
.plano__fondo {
  /* bleed vertical de 80px por lado: data-parallax-fondo (GSAP, scrub) mueve
     ESTE div; la animacion de trazado vive en los paths del SVG -> nunca se
     pisan los transforms y el borde del dibujo no asoma en el parallax */
  position: absolute; top: -80px; left: 0; right: 0;
  height: calc(min(105vh, 980px) + 160px); z-index: 0; pointer-events: none;
  background: linear-gradient(178deg, #101A26 0%, var(--negro) 82%); /* la noche azul: el papel del plano */
}
/* Iteracion 2026-07-27 (feedback cliente): el fondo pasa de la foto-wireframe
   de Mestalla (demasiado literal, competia con el hero) a un SVG vectorial
   propio: curvas de nivel de un bowl ABSTRACTO (aros concentricos, sectores
   de grada, curvas de terreno, cotas sin numero y cruces de registro), trazo
   de 1px a muy bajo contraste. Cada elemento lleva pathLength="1" y un orden
   de trazado tr: el plano SE DIBUJA SOLO al entrar (stroke-dashoffset por
   CSS, una vez, escalonado). Sin texto, sin landmark, sin loops. */
.plano-svg { width: 100%; height: 100%; display: block; }
.plano-svg ellipse, .plano-svg path { vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .plano-svg ellipse, .js-anim .plano-svg path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: trazo 2s cubic-bezier(0.45, 0.05, 0.35, 0.95) forwards;
    animation-delay: calc(0.35s + var(--tr, 0) * 0.22s);
  }
  @keyframes trazo { to { stroke-dashoffset: 0; } }
}
.plano__fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,11,10,0.7) 6%, rgba(11,11,10,0.26) 46%, rgba(11,11,10,0.05) 78%),
    linear-gradient(to bottom, rgba(11,11,10,0.82), rgba(11,11,10,0.18) 26%, rgba(11,11,10,0.12) 52%, var(--negro) 97%);
}

.form-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* La hoja tecnica: marcas de registro (vocabulario de imprenta de gran formato) */
form.formulario { display: grid; gap: 1.25rem; position: relative; padding: clamp(1.4rem, 3vw, 2.4rem); }
.formulario::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --esq: var(--linea-fuerte); --esq-l: 18px; --esq-g: 2px;
  background:
    linear-gradient(var(--esq), var(--esq)) top left / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) top left / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) top right / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) top right / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) bottom left / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) bottom left / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) bottom right / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) bottom right / var(--esq-g) var(--esq-l);
  background-repeat: no-repeat;
}
/* mientras se rellena, el documento esta "vivo": esquinas en rojo */
.formulario:focus-within::before { --esq: var(--rojo); }

.campo { display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.campo label { font-family: var(--f-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--niebla); transition: color 0.2s var(--curva); }
.campo:focus-within label { color: var(--cal); }
.campo input, .campo select, .campo textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--cal);
  background: var(--carbon); border: 1px solid var(--linea); border-radius: 4px;
  padding: 0.85rem 1rem; min-height: 48px;
  transition: border-color 0.2s var(--curva);
}
.campo ::placeholder { color: #8F8F89; opacity: 1; } /* AA sobre carbon (5.2:1); hormigon se quedaba en 3.3 */
/* El select hereda el ancho intrinseco de su opcion mas larga y desbordaba
   el grid del formulario en movil (390/360). Mismo arreglo que .orden select. */
.campo select { min-width: 0; max-width: 100%; width: 100%; }
.campo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9B9B4' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 12px 8px;
  padding-right: 2.6rem;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--rojo); }
/* La linea que se traza: el foco dibuja el borde inferior como una linea de plano */
.campo:not(.campo--check)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--rojo); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--curva); pointer-events: none;
}
.campo:not(.campo--check):focus-within::after { transform: scaleX(1); }
.campo--check { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.campo--check input { width: 1.35rem; height: 1.35rem; min-height: 0; margin-top: 0.15rem; accent-color: var(--rojo); flex-shrink: 0; }
.campo--check label { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 0.95rem; color: var(--niebla); }
.campo--check a { color: var(--rojo-brasa); }

/* Boton de envio: ancho completo (la firma del documento) + wipe 199C -> 201C */
.campo-envio .btn { width: 100%; position: relative; overflow: hidden; z-index: 0; }
.campo-envio .btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--rojo-3); transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s var(--curva);
}
.campo-envio .btn:hover, .campo-envio .btn:focus-visible { background: var(--rojo); border-color: var(--rojo); }
.campo-envio .btn:hover::before, .campo-envio .btn:focus-visible::before { transform: scaleX(1); }
.campo-envio .btn:active { transform: translateY(1px) scale(0.99); }
.campo-envio .btn:disabled { opacity: 0.55; cursor: default; }

/* Reveal escalonado de los campos (la hoja se dibuja): delay por rev-i */
.js-anim .formulario [data-rev] { transform: translateY(16px); }
.js-anim .formulario [data-rev].en-escena { transition-delay: calc(var(--rev-i, 0) * 55ms); }

/* El sello: mensaje de estado que se estampa sobre el documento */
.form-mensaje { display: none; border: 2px solid var(--rojo); padding: 1.25rem; font-family: var(--f-mono); font-size: 0.95rem; }
.form-mensaje.visible { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .form-mensaje.visible { animation: sello 0.38s var(--curva) both; }
  @keyframes sello {
    0% { opacity: 0; transform: scale(1.06); }
    65% { transform: scale(0.995); }
    100% { opacity: 1; transform: none; }
  }
}

/* El cajetin: cifras con la mecanica exacta de la home + nota + contacto */
.form-lateral { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--rail-top) + 0.5rem); }
.form-lateral .ph { aspect-ratio: 4/3; }
.cifras-lateral { display: grid; gap: 1.35rem; }
.form-lateral .cifra__valor { font-size: clamp(2.1rem, 3.1vw, 3rem); }
.cifras-lateral__nota { font-family: var(--f-titulo); font-weight: 600; font-size: 1.02rem; line-height: 1.55; color: var(--niebla); margin: 0.15rem 0 0; }
.form-lateral .texto-secundario { font-family: var(--f-mono); font-size: 0.85rem; margin: 0; }

@media (max-width: 820px) {
  .form-split { grid-template-columns: 1fr; gap: 3.5rem; }
  .form-lateral { position: static; }
  .plano-svg { opacity: 0.75; }
}

/* reduced-motion: la mesa de dibujo, quieta pero entera */
@media (prefers-reduced-motion: reduce) {
  .campo label, .campo input, .campo select, .campo textarea,
  .campo:not(.campo--check)::after, .campo-envio .btn, .campo-envio .btn::before { transition: none; }
}

/* Prosa (artículos + legales, en cal) */
.articulo-cuerpo { max-width: var(--medida); }
.articulo-cuerpo h2 { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.4rem,2.4vw,1.9rem); margin: 2.5rem 0 0.75rem; }
.articulo-cuerpo p { margin: 0 0 1.35em; }
.articulo-cuerpo .entradilla { font-size: 1.25rem; line-height: 1.5; color: #2C2C29; }
/* Listas y fotos dentro del texto de las noticias, las que mete el panel (CMS,
   decision 9): el mismo aire que los parrafos, la vineta en el rojo de marca y
   la foto a lo ancho de la columna de texto, con el lienzo .ph de la web. */
.articulo-cuerpo ul, .articulo-cuerpo ol { margin: 0 0 1.35em; padding-left: 1.35em; color: #3B3B38; }
.articulo-cuerpo li { margin: 0 0 0.55em; padding-left: 0.25em; }
.articulo-cuerpo li::marker { color: var(--rojo); }
.articulo-cuerpo ol li::marker { font-weight: 700; }
.articulo-cuerpo .ph { margin: 2.25rem 0 2.5rem; }
.grid-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px,100%),1fr)); gap: 2rem; list-style: none; margin: 0; padding: 0; }
.grid-noticias .categoria { font-family: var(--f-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rojo-2); }

/* Footer (logo real en blanco: sustituye al wordmark tipográfico) */
.pie { background: var(--negro); color: var(--niebla); overflow: hidden; border-top: 1px solid var(--linea); }
.pie__claim { font-family: var(--f-impacto); font-weight: 800; color: var(--cal); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; margin: 0; padding-top: var(--esp-seccion); }
.pie__claim b { color: var(--rojo); }
.pie__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-4); padding-block: var(--esp-6); }
.pie__titulo { font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hormigon); margin: 0 0 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding: 0.25rem 0; }
.pie a { color: var(--niebla); text-decoration: none; padding-block: 0.3rem; display: inline-block; }
.pie a:hover { color: var(--rojo-brasa); }
.pie__legal { border-top: 1px solid var(--linea); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; font-size: 0.9rem; font-family: var(--f-mono); }
.pie__marca { display: block; margin: clamp(2.5rem, 6vh, 4rem) auto clamp(2rem, 5vh, 3.5rem); text-align: center; }
.pie__logo { display: inline-block; width: clamp(200px, 30vw, 340px); height: auto; }
.pie__logo.img-caida { display: none; }
/* fallback tipográfico si el PNG no carga */
.pie__wordmark { display: none; font-family: var(--f-impacto); font-weight: 900; text-transform: uppercase; color: var(--cal); white-space: nowrap; font-size: clamp(2rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.02em; margin: 0; text-align: center; user-select: none; }
.pie__wordmark b { color: var(--rojo); }
.pie__marca.sin-logo .pie__wordmark { display: block; }

/* Reveals (regla del reveal: solo bajo .js-anim) */
.js-anim [data-rev] { opacity: 0; transform: translateY(28px); }
.js-anim [data-rev].en-escena { opacity: 1; transform: none; transition: opacity 0.6s var(--curva), transform 0.6s var(--curva); }
.js-anim [data-rev-img] { clip-path: inset(0 0 100% 0); }
.js-anim [data-rev-img].en-escena { clip-path: inset(0 0 0 0); transition: clip-path 0.8s var(--curva-cortina); }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-rev], .js-anim [data-rev-img] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* Utilidades */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--esp-6); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--esp-4); }
.triptico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.triptico .ph { aspect-ratio: 3/4; }
@media (max-width: 720px) { .triptico { grid-template-columns: 1fr; } }
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-3 { margin-top: var(--esp-3); } .mt-6 { margin-top: var(--esp-6); }
.mb-6 { margin-bottom: var(--esp-6); }
.centrado { text-align: center; }
[hidden] { display: none !important; }

@media (max-width: 420px) { :root { --t-body: 1rem; } }

/* Archivo en móvil/tablet: el rail colapsa en drawer off-canvas 
   Aquí el rail SÍ es un overlay fixed, y puede serlo porque ningún ancestro
   crea containing block (nada de transform/filter/backdrop-filter en la cadena:
   .seccion solo es position: relative). El del header es otro caso y por eso
   aquel va absolute anclado a la cápsula. Cerrado = display:none, así que no
   hay nada fuera de pantalla que pueda provocar scroll horizontal. */
@media (max-width: 1023px) {
  :root { --fila-alto: 46px; }
  /* el dedo manda: filas y cabeceras del rail por encima de 44px, fijado
     aquí a mano y no heredado del line-height, que es un accidente */
  .eje__cabeza { min-height: 46px; }
  .archivo-layout { display: block; }
  .archivo-col { padding-left: 0; }
  .filtros-boton { display: inline-flex; }
  /* la búsqueda se queda fuera del drawer: es la acción nº1 y no debe pedir
     dos toques. El orden se queda con ella y suelta su rótulo (el propio
     select se autodescribe: "Destacados primero"). */
  .orden { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .orden label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .orden select { min-width: 0; max-width: 100%; }
  .rail-velo { position: fixed; inset: 0; z-index: var(--z-panel); background: rgba(11, 11, 10, 0.72); touch-action: none; }
  .rail {
    display: none; position: fixed; top: 0; bottom: 0; left: 0;
    width: min(86vw, 340px); z-index: calc(var(--z-panel) + 1);
    background: var(--carbon); border-right: 1px solid var(--linea);
    box-shadow: var(--sombra-flotante);
    padding: 0.75rem 1.25rem 2rem; overflow: hidden auto; overscroll-behavior: contain;
  }
  .rail.abierto { display: block; animation: rail-entra 0.26s var(--curva) both; }
  .rail__interior { position: static; max-height: none; overflow: visible; }
  .rail__cabecera { min-height: 44px; margin-bottom: 0.5rem; }
  .rail__cerrar { display: inline-flex; align-items: center; justify-content: center; }
  body.sin-scroll { overflow: hidden; }
}
@media (min-width: 1024px) {
  .rail-velo { display: none; }
}
@keyframes rail-entra { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rail.abierto { animation: none; }
  .opcion, .opcion::before, .chip { transition: none; }
}

/* ============================================================
   BLOG DE NOTICIAS - portada editorial, no archivo
   Concepto: la portada de un diario deportivo, no el índice del
   archivo. El último artículo abre a doble columna con extracto,
   la rejilla del resto debajo. Los filtros son chips píldora
   horizontales (piel opuesta a las filas-pleca del rail) y el
   buscador es un campo subrayado a todo el ancho, no una cápsula.
   El rojo 199 C sigue reservado al estado activo.
   Datos y copy: noticias-data.json + noticias-blog-contrato.md.
   ============================================================ */
.blog-seccion { padding-top: 0; }
.blog-controles { display: flex; flex-direction: column; gap: 1.1rem; border-top: 1px solid var(--linea); padding-top: clamp(1.25rem, 3vh, 2rem); margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
/* sin JS el blog degrada a la lista completa: los controles no funcionarían */
.no-js .blog-controles { display: none; }
.blog-buscador { position: relative; display: flex; }
.blog-buscador input {
  flex: 1; width: 100%; min-height: 54px;
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--cal); background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--linea-fuerte); padding: 0.6rem 3rem 0.6rem 0;
  transition: border-color 0.2s var(--curva);
}
.blog-buscador input::placeholder { color: var(--hormigon); opacity: 1; }
.blog-buscador input:focus { outline: none; border-bottom-color: var(--rojo); }
.blog-buscador input::-webkit-search-cancel-button { display: none; }
.blog-buscador__limpiar {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer; color: var(--niebla);
  font-size: 1.4rem; line-height: 1; min-width: 44px; min-height: 44px; border-radius: 999px;
}
.blog-buscador__limpiar:hover { color: var(--rojo-brasa); }
.blog-temas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tema-chip {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-family: var(--f-titulo); font-weight: 600; font-size: 0.88rem;
  background: transparent; color: var(--niebla);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: 0.4rem 1rem; min-height: 44px;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva), background 0.2s var(--curva);
}
.tema-chip:hover { color: var(--cal); border-color: var(--cal); }
.tema-chip[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.tema-chip__n { font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--hormigon); }
.tema-chip[aria-pressed="true"] .tema-chip__n { color: rgba(255, 255, 255, 0.8); }
.blog-contador { margin: 0; font-family: var(--f-mono); font-size: 0.9rem; color: var(--cal); }

/* Rejilla editorial: portada + resto */
/* 2 columnas deliberadas (no auto-fill): escala editorial, con 3 articulos la
   fila bajo la portada queda llena y con 30 sigue siendo lectura, no catalogo */
.blog-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.25rem, 5vh, 3.5rem) clamp(1.5rem, 3.5vw, 2.75rem); }
@media (max-width: 700px) { .blog-lista { grid-template-columns: 1fr; } }
.noticia__enlace { display: block; text-decoration: none; color: var(--cal); }
.noticia .ph { aspect-ratio: 3 / 2; overflow: hidden; }
.noticia .ph img { transition: transform 0.7s var(--curva); }
.noticia:hover .ph img, .noticia .noticia__enlace:focus-visible .ph img { transform: scale(1.04); }
.noticia__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 1rem 0 0.55rem; font-family: var(--f-mono); font-size: 0.8rem; color: var(--niebla); }
.noticia__tema { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rojo-brasa); border: 1px solid var(--linea); padding: 0.15rem 0.5rem; border-radius: 999px; }
.noticia__titulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.015em; line-height: 1.22; margin: 0 0 0.55rem; transition: color 0.2s var(--curva); }
.noticia:hover .noticia__titulo { color: var(--rojo-brasa); }
.noticia__extracto { margin: 0 0 0.8rem; color: var(--niebla); font-size: 0.98rem; max-width: 58ch; }
.noticia .ver { font-family: var(--f-titulo); font-weight: 700; font-size: 0.88rem; color: var(--niebla); }
.noticia:hover .ver { color: var(--rojo-brasa); }
/* la portada: el último artículo, a doble columna sobre toda la rejilla */
.noticia--destacada { grid-column: 1 / -1; }
.noticia--destacada .noticia__enlace { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.noticia--destacada .noticia__meta { margin-top: 0; }
.noticia--destacada .noticia__titulo { font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1; }
.noticia--destacada .noticia__extracto { font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
@media (max-width: 860px) {
  .noticia--destacada .noticia__enlace { grid-template-columns: 1fr; gap: 0; align-items: start; }
}
.blog-vacio { padding: 1.5rem 0 0.5rem; }
.blog-vacio p { font-family: var(--f-mono); color: var(--niebla); max-width: 52ch; margin: 0 0 1.5rem; }
@media (prefers-reduced-motion: reduce) {
  .tema-chip, .noticia .ph img, .noticia__titulo { transition: none; }
}

/* Artículo: línea de atributos bajo el H1 */
.articulo-meta { font-family: var(--f-mono); font-size: 0.9rem; color: var(--niebla); margin: 0.25rem 0 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.articulo-meta__tema { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rojo-brasa); border: 1px solid var(--linea); padding: 0.35rem 0.65rem; border-radius: 999px; text-decoration: none; transition: border-color 0.2s var(--curva); }
.articulo-meta__tema:hover { border-color: var(--rojo); }

/* Modo demo (ver demo/modo-demo.mjs y 03-design-system.md) 
   Los enlaces apagados conservan su href en data-demo-href y pierden el href,
   así que ya no navegan ni son focables. Lo único que hay que corregir es el
   cursor: un <a> sin href hereda el de texto, y .btn trae cursor:pointer, que
   sugeriría destino. a[data-demo-href] es (0,1,1) y .btn es (0,1,0), así que
   gana por especificidad y no hace falta !important.
   Regla inerte: sin modo demo no existe ningún elemento con data-demo-href. */
a[data-demo-href] { cursor: default; }

/* ============================================================
   SOBRE NOSOTROS · "El libro se levanta" (2026-07-28)
   Timeline de #historia: eje de obra que se pinta de rojo, ano
   gigante que se rellena (mecanica wipe de .metodo__dorsal,
   scrub SIN pin) e hitos que se montan por partes escalonadas.
   El LADO del boceto codifica el libro de origen (sports IZQ,
   corporate DER, ambos a lo ancho). Bocetos = hojas de papel
   claro con marcas de registro (vocabulario "mesa de dibujo").
   Racional: ../03-design-system.md, "El libro se levanta".
   Regla del reveal: estados ocultos SOLO bajo .js-anim.
   ============================================================ */

/* anclas del menu: que la capsula fija no tape el destino (site entero) */
[id] { scroll-margin-top: var(--rail-top); }

/* El cuerpo del timeline: eje + lista de anios */
.tiempo-cuerpo { position: relative; margin-top: clamp(2.5rem, 6vh, 4rem); }
.tiempo-eje { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--linea); }
.tiempo-eje__progreso { position: absolute; inset: 0; background: var(--rojo); transform-origin: top center; will-change: transform; }
.tiempo { list-style: none; margin: 0; padding: 0 0 0 clamp(1.4rem, 4vw, 3.5rem); }
.tiempo__anio { display: grid; grid-template-columns: clamp(150px, 17vw, 230px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(3rem, 8vh, 5.5rem); border-top: 1px solid var(--linea); }
.tiempo__anio:first-child { border-top: 0; padding-top: 0.5rem; }
.tiempo__anio:last-child { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }

/* El anio: outline que se rellena de rojo de arriba a abajo (wipe).
   Leccion del metodo (decision 11) reaplicada 2026-07-28: el gradiente pinta la
   CAJA, no el glifo. Con max-width: 100% la columna (clamp 150-230px) clampaba
   la caja y la tinta de los anios anchos ("2000" = 242px a 96px de cuerpo)
   quedaba fuera por la derecha: ultimo digito a medio rellenar (bug del
   cliente). Caja = glifo: sin max-width (desborda como mucho ~13-17px hacia el
   gap de la fila, que mide >=24px) y padding derecho/inferior que envuelven el
   glifo entero (stroke de 2px + letter-spacing negativo tras el ultimo digito). */
.tiempo__num {
  margin: 0; width: max-content;
  font-family: var(--f-impacto); font-weight: 900;
  font-size: clamp(3rem, 7.5vw, 6rem); line-height: 1.05; letter-spacing: -0.04em;
  padding: 0.04em 0.14em 0.14em 0.05em;
  color: transparent; -webkit-text-stroke: 2px var(--linea-fuerte);
  background-image: linear-gradient(to bottom, var(--rojo), var(--rojo) var(--wipe, 100%), transparent var(--wipe, 100%));
  -webkit-background-clip: text; background-clip: text;
}
@media (min-width: 861px) {
  /* el anio acompana la lectura de sus hitos (sticky CSS, no pin) */
  .tiempo__num { position: sticky; top: calc(var(--rail-top) + 1rem); }
}

/* Hito: etiqueta mono + titulo + texto + boceto */
.hito { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; }
.hito + .hito { margin-top: clamp(2.5rem, 6vh, 4rem); }
.hito--sports .boceto { order: -1; } /* el lado ES el libro de origen */
/* pasada de espejo: sin guion rojo delante (repetido x16 competia con el rojo
   del eje y del anio, que son la firma). El color de la etiqueta ya codifica. */
.hito__tag { margin: 0 0 0.8rem; font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--niebla); }
.hito--sports .hito__tag { color: var(--rojo-brasa); }
.hito__titulo { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.6rem; }
.hito__p { color: var(--niebla); margin: 0; max-width: 52ch; }

/* La lamina: hoja de papel claro fijada sobre la mesa negra */
.boceto { position: relative; margin: 0; padding: clamp(0.7rem, 1.6vw, 1.1rem); background: linear-gradient(160deg, #F0EEE8 0%, #E4E1D8 100%); }
.boceto::before { /* marcas de registro, como en la hoja tecnica del formulario */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  --esq: rgba(29, 29, 27, 0.4); --esq-l: 14px; --esq-g: 2px;
  background:
    linear-gradient(var(--esq), var(--esq)) top left / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) top left / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) top right / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) top right / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) bottom left / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) bottom left / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) bottom right / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) bottom right / var(--esq-g) var(--esq-l);
  background-repeat: no-repeat;
}
.boceto .ph { background: transparent; aspect-ratio: 3 / 2; }
.boceto .ph::after { background: none; } /* sin vineta nocturna: es papel */

/* 1998 (ambos): texto a lo ancho + par de laminas */
.hito--duo { grid-template-columns: 1fr; }
.hito__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }

/* 2000 sin foto: la alineacion fundacional (pieza tipografica) */
.hito--roster { grid-template-columns: 1fr; }
.roster { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--linea); }
.roster li { display: flex; align-items: baseline; gap: clamp(0.75rem, 2vw, 1.5rem); border-bottom: 1px solid var(--linea); padding: clamp(0.7rem, 1.8vh, 1rem) 0; }
.roster__num { font-family: var(--f-mono); font-size: 0.75rem; color: var(--rojo-brasa); flex-shrink: 0; }
.roster__nombre { font-family: var(--f-impacto); font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; text-transform: uppercase; color: var(--cal); line-height: 1.15; }

/* HOY: cierre en presente (rojo solido + foto real) */
.tiempo__num--hoy { color: var(--rojo); -webkit-text-stroke: 0; background-image: none; -webkit-background-clip: initial; background-clip: initial; font-size: clamp(2.6rem, 6vw, 5rem); text-transform: uppercase; }
.hito--hoy { grid-template-columns: 1fr; align-items: start; }
.hito--hoy .hito__media { margin: 0 0 clamp(1.5rem, 4vh, 2.5rem); }
.hito--hoy .ph { aspect-ratio: 21 / 9; }
.hito--hoy .hito__titulo { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.hito--hoy .hito__p { max-width: 62ch; }
.premios-pendientes { list-style: none; margin: 1.25rem 0 0; padding: 0; font-family: var(--f-mono); font-size: 0.85rem; color: var(--niebla); }
.premios-pendientes li { padding: 0.35rem 0; display: flex; gap: 0.6rem; align-items: baseline; }
.premios-pendientes li::before { content: "+"; color: var(--rojo-brasa); flex-shrink: 0; }

/* Equipo: sub-bloques dentro de la seccion ancla */
.equipo-sub { margin-top: clamp(4rem, 10vh, 7rem); }
#equipo, #team { border-top: 1px solid var(--linea); }

/* Montaje por partes (estados ocultos SOLO bajo .js-anim) */
.js-anim .tiempo__num { --wipe: 0%; }
.js-anim .hito [data-parte] { opacity: 0; transform: translateY(26px); }
.js-anim .hito .boceto[data-parte] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js-anim .hito.montado [data-parte] { opacity: 1; transform: none; transition: opacity 0.6s var(--curva), transform 0.6s var(--curva); transition-delay: calc(var(--p, 0) * 90ms); }
.js-anim .hito.montado .boceto[data-parte] { clip-path: inset(0 0 0 0); transition: clip-path 0.85s var(--curva-cortina); transition-delay: calc(var(--p, 0) * 90ms); }
/* fallback IO (sin GSAP no hay scrub): el anio del bloque montado se rellena */
.js-anim .tiempo__anio.construido .tiempo__num { --wipe: 100%; }

/* Movil / tablet */
@media (max-width: 860px) {
  .tiempo { padding-left: clamp(1.1rem, 5vw, 2rem); }
  .tiempo__anio { grid-template-columns: 1fr; gap: 1.25rem; padding-block: clamp(2.5rem, 7vh, 4rem); }
  .tiempo__num { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hito { grid-template-columns: 1fr; gap: 1.25rem; }
  .hito--sports .boceto { order: 0; } /* en columna: texto y debajo la lamina */
  .hito__duo { grid-template-columns: 1fr; }
  .hito--hoy .ph { aspect-ratio: 16 / 9; }
}

/* reduced-motion: el timeline entero, quieto y legible */
@media (prefers-reduced-motion: reduce) {
  .js-anim .tiempo__num { --wipe: 100%; }
  .js-anim .hito [data-parte], .js-anim .hito .boceto[data-parte] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .tiempo-eje__progreso { transform: none !important; }
}

/* =============================================================================
   SOSTENIBILIDAD v2 (2026-07-29): tríptico reutilizable (pasos de huella y
   ámbitos ESG). Mismo lenguaje del sitio: hairline + mono de señalética.
   Sin motion propio: los reveals los dan los data-rev existentes.
   ========================================================================== */
.trio { list-style: none; display: grid; gap: 2.25rem 2rem; margin: 0; padding: 0; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio__item { border-top: 1px solid var(--linea); padding-top: 1.1rem; }
.trio__num { display: block; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.08em; color: var(--rojo-brasa); margin-bottom: 0.7rem; }
.trio__item .subtitulo { margin: 0 0 0.6rem; }
.trio__item p { margin: 0; color: var(--niebla); font-size: 0.98rem; line-height: 1.65; }

/* =============================================================================
   FICHA DEL SELLO MITECO (2026-07-29, feedback cliente: "mas integrado").
   El sello oficial deja de ser una imagen suelta en el flujo y pasa a ser una
   ficha de certificacion. Clave tecnica: el arte es un PNG OPACO con fondo
   blanco, asi que se monta sobre una hoja blanca pura y su propio fondo se
   funde con el soporte. Integracion total SIN tocar el fichero (manual MITECO:
   nada de filtros, recortes ni recolor). El marco es el vocabulario de
   imprenta de la casa: hairline de tinta + marcas de registro de esquina
   (.formulario / .boceto), y los datos del registro van en mono (la voz de
   marcador), en filas con hairline como el roster. Sin motion propio: la
   ficha es un documento, se queda quieta. Vive en seccion .cal (claro).
   ========================================================================== */
.ficha-sello {
  position: relative;
  margin: 2rem 0 2.25rem;
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
  background: #fff;
  border: 1px solid rgba(29, 29, 27, 0.18);
  display: grid;
  grid-template-columns: minmax(9rem, 11.5rem) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 2.5rem);
  align-items: center;
}
.ficha-sello::before { /* marcas de registro pisando las esquinas del marco */
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  --esq: rgba(29, 29, 27, 0.5); --esq-l: 16px; --esq-g: 2px;
  background:
    linear-gradient(var(--esq), var(--esq)) top left / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) top left / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) top right / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) top right / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) bottom left / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) bottom left / var(--esq-g) var(--esq-l),
    linear-gradient(var(--esq), var(--esq)) bottom right / var(--esq-l) var(--esq-g),
    linear-gradient(var(--esq), var(--esq)) bottom right / var(--esq-g) var(--esq-l);
  background-repeat: no-repeat;
}
.ficha-sello__arte { margin: 0; }
.ficha-sello__arte img { width: 100%; height: auto; }
/* cabecera y filas: especificidad de 2 clases para ganar a .prosa p / .cal p */
.ficha-sello__datos .ficha-sello__cab {
  margin: 0 0 0.5rem; font-family: var(--f-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: #66665F;
  text-wrap: balance; /* en movil parte en dos lineas parejas, sin "· MITECO" huerfano */
}
.ficha-sello__lista { margin: 0; }
.ficha-sello__lista > div {
  display: grid; grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr);
  gap: 0.35rem 1rem; align-items: baseline;
  padding-block: 0.55rem; border-top: 1px solid rgba(29, 29, 27, 0.14);
}
.ficha-sello__lista dt {
  font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: #66665F;
}
.ficha-sello__lista dd {
  margin: 0; font-family: var(--f-mono); font-size: 0.9rem; font-weight: 500;
  color: #1D1D1B; overflow-wrap: anywhere;
}
@media (max-width: 640px) { /* apilado: el arte arriba, la lista debajo */
  .ficha-sello { grid-template-columns: 1fr; gap: 1.4rem; }
  .ficha-sello__arte { max-width: 10.5rem; }
  .ficha-sello__lista > div { grid-template-columns: minmax(7rem, 8.5rem) minmax(0, 1fr); }
}

/* Configurador 3D en la portada (2026-09-29)
   La clienta pide darle mas peso al configurador: banda propia justo despues
   de las cifras, sobre carbon (un escalon de tono sobre el negro de la pagina,
   que es como esta web separa superficies) y con la imagen mandando. La imagen
   es un render del propio configurador, no una ilustracion: enseña lo que el
   visitante se va a encontrar al entrar. La etiqueta va sin la rayita roja del
   kicker (regla del estudio desde el 2026-09-16): la distinguen la tipografia
   mono y el color. */
.cfg-portada { background: var(--carbon); border-block: 1px solid var(--linea); }
.cfg-portada.seccion { padding-block: clamp(3.5rem, 10vh, 7rem); }
.cfg-portada__rejilla {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.cfg-portada__etiqueta {
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--rojo-brasa); margin: 0 0 1.25rem;
}
.cfg-portada__entrada { color: var(--niebla); max-width: 46ch; margin: 1.25rem 0 2rem; }
.cfg-portada__acciones { margin: 0; }
.cfg-portada__imagen { display: block; }
.cfg-portada__imagen .ph { aspect-ratio: 16 / 10; border: 1px solid var(--linea); }
.cfg-portada__imagen .ph img { transition: transform 0.7s var(--curva); }
.cfg-portada__imagen:hover .ph img { transform: scale(1.03); }
@media (max-width: 900px) {
  .cfg-portada__rejilla { grid-template-columns: 1fr; }
  .cfg-portada__imagen { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cfg-portada__imagen .ph img { transition: none; }
  .cfg-portada__imagen:hover .ph img { transform: none; }
}