/* ═══════════════════════════════════════════════════════════════════════
   ITER — v6
   Registro TÉCNICO DE ARCHIVO. El sistema de marca define dos registros y
   prohíbe mezclarlos: el corporativo juguetón (candy/savvy a sangre,
   stickers) y este. La v5.1 estaba construida en el primero, con el 58% de
   la superficie de la página en color saturado de marca.

   Las tres reglas vienen del propio sistema de marca, y la versión anterior
   incumplía las tres:
     · el fondo es carbón o papel — nunca un plano de color de marca
     · el azul aparece UNA VEZ por pantalla, como acento
     · el rosa NUNCA sale al exterior: vive en un rótulo, un número, un filo
   El color lo pone la fotografía.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Radlush";
  src: url("fonts/Radlush-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --carbon: #0e0f13;
  --carbon-2: #16171d;
  --paper: #edebe6;
  --paper-2: #e2dfd8;

  --savvy: #1b03ff;
  /* ⚠️ ESTO NO ES OTRO COLOR: es savvy. Mismo tono (245,7°) y misma saturación
     (100%), solo más claro. Existe porque #1b03ff sobre carbón da 2,28:1 — no
     ya como texto, es que ni un filo de 2px se ve. Lightear un azul-violeta lo
     acerca al lavanda, así que este token va al punto MÁS PROFUNDO que todavía
     pasa el mínimo de contraste (3,73:1, suficiente para display y para
     gráficos). Bajarlo más devuelve la ilegibilidad; subirlo lo vuelve morado.
     El azul de marca puro vive en `--accent-solid`, donde va de FONDO y el
     blanco encima da 8,39:1. */
  --savvy-lit: #6050ff;
  --candy: #ffbbda;
  --candy-ink: #b8306e;  /* el rosa tampoco lo es sobre papel */

  --f-display: "Radlush", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Geologica", ui-sans-serif, system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Movimiento. Cuatro duraciones y dos curvas para toda la web: si un
     efecto necesita una curva propia es que no pertenece al sistema. */
  --t-tap: .14s;
  --t-fast: .22s;
  --t-mid: .40s;
  --t-slow: .62s;
  --ease: cubic-bezier(.2, .7, .3, 1);      /* entra rápido y se posa */
  --ease-soft: cubic-bezier(.33, .02, .2, 1);

  /* El campo de formulario tiene su propio filo. Un separador decorativo puede
     ser un susurro; la caja donde alguien tiene que escribir, no: el mínimo
     para el contorno de un componente es 3:1 y `--hair` sobre papel daba
     1,46:1 — literalmente no se veía dónde había que escribir. */
  --campo: rgba(255,255,255,.04);
  --campo-filo: rgba(233,231,226,.42);   /* 3,54:1 sobre carbón */

  --shell: 1240px;
  --measure: 64ch;
  --pad: clamp(20px, 5vw, 64px);
  --gap: clamp(16px, 2.2vw, 28px);
  --step: clamp(60px, 8.5vw, 124px);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--carbon);
  color: #e9e7e2;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }

/* ── Las dos superficies. Un sistema, dos platos. ────────────────────── */
.s-carbon {
  --ink: #e9e7e2; --ink-soft: #9b9ea9; --ink-faint: #6b6e79;
  --accent: var(--savvy-lit); --accent-solid: var(--savvy); --mark: var(--candy);
  --hair: rgba(233,231,226,.16); --hair-soft: rgba(233,231,226,.08);
  --well: var(--carbon-2); --surface: var(--carbon); --drop: var(--candy);
  --block: var(--savvy); --block-ink: #fff; --block-mark: var(--candy);
  --hover: #1a1c24;
  background: var(--carbon); color: var(--ink);
}
.s-candy {
  --ink: #14151a; --ink-soft: #5d4552; --ink-faint: #6e4f5c;
  --accent: var(--savvy); --accent-solid: var(--savvy); --mark: var(--savvy);
  --hair: rgba(20,21,26,.24); --hair-soft: rgba(20,21,26,.13);
  --well: #ffa8ce; --surface: var(--candy); --drop: #14151a;
  --block: #14151a; --block-ink: #f4f2ee; --block-mark: var(--candy);
  --hover: #ffa8ce;
  background: var(--candy); color: var(--ink);
}
.s-savvy {
  --ink: #f4f2ee; --ink-soft: #cfc9ff; --ink-faint: #c4bcff;
  --accent: var(--candy); --accent-solid: var(--candy); --mark: var(--candy);
  --hair: rgba(255,255,255,.32); --hair-soft: rgba(255,255,255,.17);
  --well: #1500d4; --surface: var(--savvy); --drop: #14151a;
  --block: #14151a; --block-ink: #f4f2ee; --block-mark: var(--savvy-lit);
  --hover: #1500d4;
  background: var(--savvy); color: var(--ink);
}
.s-carbon-2 {
  --ink: #e9e7e2; --ink-soft: #9b9ea9; --ink-faint: #6b6e79;
  --accent: var(--savvy-lit); --accent-solid: var(--savvy); --mark: var(--candy);
  --hair: rgba(233,231,226,.16); --hair-soft: rgba(233,231,226,.08);
  --well: #22242e; --surface: #16181f; --drop: var(--candy);
  --block: var(--savvy); --block-ink: #fff; --block-mark: var(--candy);
  --hover: #202330;
  background: #16181f; color: var(--ink);
}
.s-paper {
  --ink: #14151a; --ink-soft: #55585f; --ink-faint: #86898f;
  --accent: var(--savvy); --accent-solid: var(--savvy); --mark: var(--candy-ink);
  --hair: rgba(20,21,26,.18); --hair-soft: rgba(20,21,26,.09);
  --well: var(--paper-2); --surface: var(--paper); --drop: var(--candy);
  --block: var(--candy); --block-ink: #14151a; --block-mark: var(--savvy);
  --hover: #e4e1da;
  --campo: #fff;                         /* el campo se levanta del papel */
  --campo-filo: rgba(20,21,26,.55);      /* 4,05:1 sobre el propio campo */
  background: var(--paper); color: var(--ink);
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.plate { padding: var(--step) 0; }
.plate--tight { padding: calc(var(--step) * .6) 0; }

/* ── Tipografía ──────────────────────────────────────────────────────
   Radlush 900 minúscula se queda y se usa MENOS veces. El problema no era
   el peso: era la frecuencia. Tres tamaños, y uno solo por sección.      */
.d1, .d2, .d3 {
  font-family: var(--f-display); font-weight: 900; text-transform: lowercase;
  line-height: .95; letter-spacing: -.015em; margin: 0; text-wrap: balance;
}
.d1 { font-size: clamp(2.25rem, 6vw, 4.4rem); max-width: 15ch; }
.d2 { font-size: clamp(1.7rem, 4vw, 2.8rem); max-width: 20ch; }
/* El peso callado. Existe para que no todas las secciones pesen lo mismo:
   Perspectivas es la penúltima y tiene que ceder ante el cierre. */
.d2--quiet { font-size: clamp(1.4rem, 2.8vw, 2rem); max-width: 24ch; }
.d3 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1; max-width: 26ch; }
.d1 em, .d2 em, .d3 em { font-style: normal; color: var(--accent); }

/* El versionado y los rótulos: la señal técnica más barata de la marca, y
   la que hace que la página parezca documentación de un sistema. */
.micro {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.micro--mark { color: var(--mark); }
.micro--accent { color: var(--accent); }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-soft); max-width: var(--measure); margin: 0; }
p { max-width: var(--measure); margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* Encabezado de sección. Numerar aquí sí dice algo: el home es una
   secuencia y las fases del método también. */
.hd {
  position: relative;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--hair); padding-top: 14px; margin-bottom: 30px;
}
.hd::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 120px; height: 3px; background: var(--mark);
}
.hd { align-items: center; padding-top: 20px; }
.hd__no {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: .8;
  letter-spacing: -.02em; color: var(--mark); flex: none;
  align-self: center; margin-right: 2px;
}
.hd__name {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
}
.hd__name { color: var(--ink-faint); }

/* ── Botones y enlaces de continuidad ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none; padding: 13px 24px; border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink); background: transparent; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .14s, box-shadow .14s;
}
.btn:hover { border-color: var(--ink); }
.btn--solid { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.btn--solid:hover { background: #1400c9; border-color: #1400c9; color: #fff; }
.s-savvy .btn--solid { color: #14151a; }
.s-savvy .btn--solid:hover { background: #fff; border-color: #fff; color: #14151a; }
.s-candy .btn--solid { color: #fff; }
.more {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .18s;
}
/* A 11,5 px hace falta 4,5:1 y el azul sobre carbón no llega ni de lejos. El
   texto va en tinta y el color se queda en la flecha, que es decorativa
   (`aria-hidden`) y por tanto no tiene que cumplir contraste. */
.more span { color: var(--accent); }
.more:hover { border-bottom-color: var(--accent); }

/* ── Barra ───────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14,15,19,.92); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(233,231,226,.12);
}
.bar__in {
  max-width: var(--shell); margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.lockup { width: 86px; height: auto; --lk-word: #e9e7e2; --lk-star: var(--candy); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.nav a {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: #9b9ea9; transition: color .18s;
}
.nav a:hover, .nav a[aria-current="page"] { color: #e9e7e2; }
.nav__cta {
  padding: 10px 18px; border: 1px solid rgba(233, 231, 226, 0.3); border-radius: 999px;
  color: #e9e7e2 !important; transition: background .18s, border-color .18s, color .18s;
}
.nav__cta:hover { background: var(--savvy); border-color: var(--savvy); color: #fff !important; }
@media (max-width: 900px) { .nav__links { display: none; } }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--pad); top: 10px; z-index: 60; background: var(--savvy); color: #fff;
  padding: 10px 16px; font-family: var(--f-mono); font-size: 12px;
}

/* ── El trabajo ──────────────────────────────────────────────────────── */
.work {
  display: grid; gap: 1px; background: var(--hair-soft);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
@media (min-width: 720px) { .work { grid-template-columns: repeat(2, 1fr); } }
.work__item {
  --work-pad: clamp(24px, 3.2vw, 38px);
  position: relative; overflow: hidden;
  background: var(--surface); padding: var(--work-pad);
  display: flex; flex-direction: column; gap: 18px;
  text-decoration: none; color: inherit; min-height: 200px;
  transition: background var(--t-mid) var(--ease-soft);
}
.work__item:hover, .work__item:focus-visible { background: var(--hover); }

/* TRAZAR · el filo de acento se dibuja al pasar el ratón. Es el mismo
   gesto que la marca del encabezado, y por eso la web tiene UN lenguaje
   de hover y no uno por componente. */
.work__item::after, .sit::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.work__item:hover::after, .work__item:focus-visible::after,
.sit:hover::after { transform: scaleX(1); }

/* La imagen sangra contra los tres bordes de la ficha: es la lámina, no
   una ilustración metida dentro del texto. */
.work__shot {
  display: block; position: relative; overflow: hidden;
  margin: calc(var(--work-pad) * -1) calc(var(--work-pad) * -1) 2px;
  aspect-ratio: 16 / 10; background: var(--well);
}
/* ENFOCAR · en reposo la lámina está en gris de archivo; el color es la
   recompensa de acercarse. Lo mismo que ya hacían los logotipos. */
.work__shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04); opacity: .82;
  transition: filter .55s var(--ease-soft), opacity .55s var(--ease-soft), transform .8s var(--ease-soft);
}
/* v10 · En escritorio la recompensa sigue siendo acercarse. En táctil no hay
   «acercarse»: el :hover se queda PEGADO tras un toque accidental y la lámina
   no vuelve a apagarse, que es peor que no tener el efecto. Ahí manda
   `.is-focus`, que pone el observador cuando la ficha entra en la banda
   central del viewport. Mismo patrón que ya usaba el ensamblaje con
   `data-fase`: el sistema no es nuevo, se generaliza. */
@media (hover: hover) {
  .work__item:hover .work__shot img { filter: none; opacity: 1; transform: scale(1.045); }
}
.work__item:focus-visible .work__shot img {
  filter: none; opacity: 1; transform: scale(1.045);
}
/* Solo donde no hay ratón. La marca la pone el observador en todas partes;
   quien decide si significa algo es esta media query, que se reevalúa sola
   si el dispositivo cambia de modo de entrada. */
@media (hover: none) {
  .work__item.is-focus .work__shot img { filter: none; opacity: 1; transform: scale(1.045); }
}
/* La señal de que la ficha lleva a algún sitio. Sin palabras: la fila de
   sistemas de abajo ya gasta las que había. */
.work__go {
  position: absolute; right: 14px; bottom: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-solid); color: #fff;
  font-size: 14px; line-height: 1;
  opacity: 0; transform: translate(6px, 6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.work__item:hover .work__go, .work__item:focus-visible .work__go { opacity: 1; transform: none; }
@media (hover: none) { .work__go { opacity: 1; transform: none; } }

/* Jerarquía en la rejilla de /proyectos: la primera ficha ocupa el ancho
   completo y su lámina es panorámica. Seis columnas y no dos, para que
   1 + 3 encaje sin dejar una celda gris (el fondo de la rejilla dibuja
   las líneas: un hueco se ve como error). */
@media (min-width: 900px) {
  .work--lead { grid-template-columns: repeat(6, 1fr); }
  .work--lead > :first-child { grid-column: span 6; }
  .work--lead > :first-child .work__shot { aspect-ratio: 21 / 8; }
  .work--lead > :not(:first-child) { grid-column: span 2; }
}
/* Dos versiones del logotipo, una por tipo de fondo: así la rejilla de clientes
   puede vivir sobre carbón o sobre papel sin que nada desaparezca. En reposo
   van en gris; al pasar el ratón recuperan su color de marca. */
.work__logo {
  height: 32px; width: auto; max-width: 180px; object-fit: contain; object-position: left center;
  transition: filter .25s, opacity .25s;
}
/* ⭐ v10 · En el teléfono los cuatro logotipos son la respuesta más rápida a
   «¿qué hace ITER?», y estaban apagados por defecto justo donde el lector
   tiene menos tiempo. El gris de archivo se gana su sitio en escritorio,
   donde hay un gesto que lo revela; sin ese gesto solo cobra sin dar. */
@media (hover: hover) {
  .work__logo { filter: grayscale(1); opacity: .88; }
}
.s-carbon .work__logo.on-light, .s-carbon-2 .work__logo.on-light, .s-savvy .work__logo.on-light,
.s-paper .work__logo.on-dark, .s-candy .work__logo.on-dark { display: none; }

.work__item:hover .work__logo { filter: none; opacity: 1; }
/* Marca sin logotipo disponible: se escribe, no se inventa. */
.work__name {
  font-family: var(--f-body); font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em;
  color: var(--ink); height: 32px; display: flex; align-items: center;
}
.work__txt { margin-top: auto; }
/* La categoría, antes del argumento: dice de qué negocio se trata sin gastar
   una línea del texto en explicarlo. */
.work__cat {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); display: block; margin-bottom: 8px;
}
.work__txt p { font-size: .95rem; color: var(--ink-soft); margin: 0; max-width: none; }
.work__sys {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 10px; display: block;
}

/* ── Ficha de proyecto ───────────────────────────────────────────────── */
.beats { border-top: 1px solid var(--hair); }
.beat { display: grid; gap: 6px 28px; padding: 22px 0; border-bottom: 1px solid var(--hair-soft); }
@media (min-width: 800px) { .beat { grid-template-columns: 180px minmax(0,1fr); } }
.beat__k {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 4px;
}
.beat__v { margin: 0; max-width: var(--measure); }

/* Fotografía: aquí es donde entra el color. */
.shot { margin: 0; background: var(--well); }
.shot img { width: 100%; height: auto; }
.shot figcaption {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 10px 2px 0;
}
.shot--crop img { height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: top center; }
.bleed { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
.duo { display: grid; gap: var(--gap); }
@media (min-width: 760px) {
  .duo { grid-template-columns: repeat(2, 1fr); }
  .duo--wide { grid-template-columns: 1.3fr 1fr; align-items: center; }
  /* La foto acompaña, no manda: a plomo entero se comía la sección. */
  .duo--aside { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
}
.trio { display: grid; gap: var(--gap); }
/* Tres piezas reales de cliente rara vez comparten proporción, y en una rejilla
   de tres columnas eso deja el borde inferior escalonado: parece un fallo de
   maquetación. La banda las iguala anclando por arriba, que es donde vive el
   titular de una pieza. */
.trio--banda img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }

/* ── Pozo de énfasis ─────────────────────────────────────────────────── */
.well {
  background: var(--block); color: var(--block-ink);
  padding: clamp(24px, 3.2vw, 38px);
  border: 0;
}
.well .d3 { margin-bottom: 12px; color: var(--block-ink); }
.well p { color: var(--block-ink); opacity: .92; }
.well strong { color: var(--block-ink); }
.well .micro { color: var(--block-mark); opacity: 1; }
.well .more { color: var(--block-mark); }

/* ── Situaciones ─────────────────────────────────────────────────────── */
.sits { display: grid; gap: 1px; background: var(--hair-soft); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
@media (min-width: 820px) {
  .sits { grid-template-columns: repeat(2, 1fr); }
  .sits--3 { grid-template-columns: repeat(3, 1fr); }
}
.sit { background: var(--surface); padding: clamp(22px, 2.8vw, 32px); }
.sit h3 { font-size: 1.08rem; font-weight: 600; margin: 12px 0 10px; letter-spacing: -.005em; }

/* ── Formulario ──────────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
/* 🐛 Esto usaba `.full`, que en la hoja significa A SANGRE (`width: 100vw` y
   márgenes negativos). Dos significados para una clase: en móvil el textarea y
   el botón se salían del margen porque la utilidad global aplicaba siempre y el
   `grid-column` solo a partir de 720 px. La clase del formulario ahora es suya. */
.form__ancho { grid-column: 1 / -1; }
@media (min-width: 720px) { .form { grid-template-columns: repeat(2, 1fr); } }
.field label {
  /* Estaba en `--ink-faint`: 2,94:1 sobre papel, por debajo del mínimo de 4,5:1
     para texto. A 10,5 px eso es una etiqueta que hay que adivinar. */
  display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; background: var(--campo); border: 1px solid var(--campo-filo); color: var(--ink);
  /* El peso 300 a 1rem se leía tan tenue como el borde. */
  font-family: var(--f-body); font-size: 1rem; font-weight: 400; padding: 13px 14px; border-radius: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus {
  border-color: var(--accent-solid); outline: none;
  /* Un borde de 1 px cambiando de color es poca señal para decir «estás aquí».
     El aro lo dobla sin mover el maquetado. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 22%, transparent);
}
/* El borde rojo solo aparece tras el primer intento de envío: señalar campos
   mientras alguien escribe es regañarlo por adelantado. */
.form.is-checked .field input:invalid,
.form.is-checked .field textarea:invalid { border-color: #d4456a; }
.form__send { justify-self: start; }
.form__send:disabled { opacity: .5; cursor: default; }
.form__note { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hair); padding: 48px 0 90px; }
.foot__grid { display: grid; gap: 32px; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot nav { display: flex; flex-direction: column; gap: 9px; }
.foot nav a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
}
.foot nav a:hover { color: var(--ink); }
.foot__end {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hair-soft);
}

/* ── Acceso rápido en móvil: arriba no cabe la navegación ───────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  background: rgba(14,15,19,.96); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(233,231,226,.14);
}
.dock a {
  flex: 1; text-align: center; padding: 12px 6px calc(12px + env(safe-area-inset-bottom));
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: #9b9ea9;
}
.dock a[aria-current="page"] { color: #e9e7e2; }
@media (max-width: 900px) { .dock { display: flex; } body { padding-bottom: 50px; } }
@media (max-width: 900px) { body:has(.acc) { padding-bottom: 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   MOVIMIENTO — el sistema, y solo cuatro verbos
   ─────────────────────────────────────────────────────────────────────
   El registro es TÉCNICO DE ARCHIVO: una lámina se DESTAPA, no vuela. De
   ahí sale la regla que decide todo lo demás — nada entra desde fuera del
   lienzo, nada rebota, nada se mueve más de 12 px.

     REVELAR  una máscara se abre de arriba abajo  → titulares y láminas
     TRAZAR   una línea se dibuja desde su origen  → filos, marcas, pistas
     ENFOCAR  gris → color, desenfoque → nitidez   → fotografía y logotipos
     HUNDIR   el sticker se apoya y se hunde       → botones, y solo botones

   Y las zonas quietas, que son parte del sistema y no un descuido: la
   portada, los bloques saturados (.well), el formulario y el pie NO se
   animan al entrar. Si todo se mueve, nada destaca.
   ═══════════════════════════════════════════════════════════════════════ */

/* REVELAR · por defecto — desplazamiento corto, para bloques de texto. */
.js .rise { opacity: 0; transform: translateY(10px); }
.js .rise.seen {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-soft), transform var(--t-slow) var(--ease);
}

/* REVELAR · titular — no se desvanece: se destapa.
   🐛 La máscara va en un envoltorio INTERIOR, nunca en el elemento que
   observa el script. Un elemento con `clip-path` no tiene área visible, así
   que el IntersectionObserver no lo considera nunca en pantalla y el titular
   se quedaba tapado para siempre: se tapa a sí mismo el disparador.
   Los insets laterales negativos evitan que la máscara recorte las colas de
   Radlush, que con `line-height: .95` sobresalen de su caja. */
.js .rise--wipe { opacity: 1; transform: none; }
.js .rise--wipe > .wipe { display: block; clip-path: inset(-14% -14% 100% -14%); }
.js .rise--wipe.seen > .wipe { clip-path: inset(-14%); transition: clip-path .78s var(--ease); }

/* REVELAR · en secuencia — para rejillas. El orden de lectura se hace
   visible; el retraso muere en la sexta ficha para no volverse espera. */
/* Sin desplazamiento a propósito: estas rejillas dibujan sus líneas con el
   fondo del contenedor, así que mover una ficha abre un hueco y la rejilla
   parece rota. La secuencia la marca el retraso, que ya es suficiente. */
.js .rise--seq > * { opacity: 0; }
.js .rise--seq.seen > * { opacity: 1; transition: opacity .55s var(--ease-soft); }
.js .rise--seq.seen > :nth-child(2) { transition-delay: .07s; }
.js .rise--seq.seen > :nth-child(3) { transition-delay: .14s; }
.js .rise--seq.seen > :nth-child(4) { transition-delay: .21s; }
.js .rise--seq.seen > :nth-child(5) { transition-delay: .28s; }
.js .rise--seq.seen > :nth-child(n+6) { transition-delay: .35s; }

/* TRAZAR · la marca del encabezado de sección. Es lo único que se repite
   en toda la web, y por eso se lee como firma y no como efecto: 3 px de
   alto, sin retraso, y en la mayoría de secciones es lo único que ocurre. */
.hd::before { transform-origin: left; }
.js .hd::before { transform: scaleX(0); }
.js .hd.seen::before { transform: scaleX(1); transition: transform .55s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .rise--seq > * { opacity: 1; transform: none; }
  .js .rise--wipe > .wipe { clip-path: none; }
  .js .hd::before { transform: none; }
}

/* ── Cambio de página ─────────────────────────────────────────────────
   La web son diez URLs: sin esto, cada clic del menú es un parpadeo a
   blanco y un repintado completo, que es el delator más barato de que una
   web está hecha de páginas sueltas. La barra, el pie y el acceso móvil
   se declaran persistentes: no se redibujan, se quedan. Donde el
   navegador no lo soporta, navega como siempre.
   ───────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

.bar { view-transition-name: bar; }
.foot { view-transition-name: foot; }
.dock { view-transition-name: dock; }

/* Un fundido corto y nada más: el trabajo de entrada lo hacen los reveles
   de la página nueva, y dos animaciones a la vez se estorban. */
::view-transition-old(root) { animation: vt-sale .2s ease both; }
::view-transition-new(root) { animation: vt-entra .34s ease both; }
@keyframes vt-sale { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* La barra no lleva filo mientras se lee la portada: la línea aparece
   cuando hay contenido pasando por debajo, que es cuando significa algo. */
.bar { background: transparent; border-bottom-color: transparent; transition: background var(--t-mid), border-color var(--t-mid); }
.bar.is-stuck { background: rgba(14,15,19,.92); border-bottom-color: rgba(233,231,226,.12); }

/* ── Utilidades ──────────────────────────────────────────────────────── */
.mt { margin-top: clamp(26px, 4vw, 44px); }
.mt-lg { margin-top: clamp(40px, 6vw, 72px); }
.rule { border: 0; border-top: 1px solid var(--hair); margin: clamp(30px, 4vw, 48px) 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ⭐ v13 · LA PORTADA SE QUEDA LA PRIMERA PANTALLA ENTERA. Medido: el hero
   media 0,57 pantallas en el teléfono y 0,68 en escritorio, así que antes de
   tocar el scroll ya se veían 293 px de papel por debajo — el blanco entraba
   en el mismo cuadro que el neón. No era un problema de orden de secciones:
   era que la portada no llenaba su pantalla. */
/* ⚠️ SOLO LA PORTADA. `.hero` es la primera sección de las once páginas: sin
   acotar, esto le añadía una pantalla de aire a cada una — justo lo contrario
   de lo que se buscaba. La portada es la única que tiene que quedarse su
   primera pantalla entera, porque es la única donde el blanco de la siguiente
   sección entraba en el mismo cuadro que el neón. */
.hero--llena { min-height: calc(100svh - 70px); display: flex; align-items: center; }

/* En móvil la foto del hero es vertical y se comía una pantalla entera antes
   de que asomara el trabajo. Se recorta a banda: la atmósfera se mantiene, el
   scroll no. Con el hero a pantalla completa la banda puede respirar un poco
   más — el alto sobrante se lo lleva la fotografía, no el aire. */
@media (max-width: 760px) {
  .hero .shot img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 58%; }
}


/* ── Sticker: el componente de la marca. Contorno, esquina de píldora y sombra
   dura desplazada, que se hunde al pulsar. La sombra toma --drop de la
   superficie: sobre carbón es savvy, sobre papel es candy, sobre los planos
   saturados es negro. Pintarla siempre en negro la hacía invisible en el hero. */
.btn--solid {
  border: 2px solid var(--drop);
  box-shadow: 5px 5px 0 var(--drop);
}
.btn--solid:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--drop);
}
.btn--solid:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--drop);
}
.s-candy .btn--solid { color: #fff; }
.s-savvy .btn--solid { color: #14151a; }
.s-savvy .btn--solid:hover { background: #fff; border-color: #14151a; color: #14151a; }
.s-candy .btn { border-color: rgba(20, 21, 26, 0.45); }

/* Los logotipos de cliente son PNG blancos: viven sobre fondo oscuro. Sobre
   savvy se quedan en blanco y al pasar el ratón recuperan su color. */

.s-savvy .work__item:hover { background: var(--hover); }

.sit { position: relative; overflow: hidden; }
.sit:hover { background: var(--hover); }
/* El enlace de continuidad avanza. Es el único movimiento horizontal de
   la web y significa siempre lo mismo: hay algo más allá. */
.more span { display: inline-block; transition: transform var(--t-mid) var(--ease); }
.more:hover span, a:hover > .more span { transform: translateX(5px); }
.work__item:hover .more span { transform: translateX(5px); }


/* ── Marca de agua: el destello de la marca, grande y sangrando por el borde.
   Solo en superficies oscuras y solo donde se pide con .plate--mark.        */
.plate--mark { position: relative; overflow: hidden; }
.plate--mark > .shell { position: relative; z-index: 1; }
.plate--mark::after {
  content: ""; position: absolute; pointer-events: none;
  right: -6vw; top: 50%; transform: translateY(-50%);
  width: min(46vw, 620px); aspect-ratio: 214.3 / 284.8;
  background: var(--accent-solid);
  -webkit-mask: url("img/destello.svg") no-repeat center / contain;
  mask: url("img/destello.svg") no-repeat center / contain;
  opacity: .14;
}
@media (max-width: 760px) {
  .plate--mark::after { right: -30vw; opacity: .1; }
}

/* ── El equipo: la foto de grupo y los retratos, conectados ───────────
   Cuatro retratos sueltos son cuatro fotos de archivo; una foto de grupo
   sola no dice quién es quién. Puestos a trabajar juntos, cada uno
   resuelve el problema del otro: al señalar a una persona en la lista, la
   luz viaja hasta su cara en la foto. Ese viaje —una sola luz que se
   mueve entre los cuatro— es lo que hace que se lean como un equipo y no
   como cuatro fichas.
   ───────────────────────────────────────────────────────────────────── */
@property --fx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --fy { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.team { display: grid; gap: clamp(26px, 4vw, 48px); align-items: stretch; }
@media (min-width: 900px) { .team { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); } }
/* La columna del registro va centrada contra la lámina: alineada arriba
   dejaba un hueco muerto de media foto debajo. */
.team__side { display: flex; flex-direction: column; justify-content: center; }

.team__group { position: relative; margin: 0; overflow: hidden; background: var(--well); }
.team__group img { width: 100%; height: auto; display: block; }
.team__lens {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: rgba(10, 11, 15, .72);
  -webkit-mask: radial-gradient(ellipse 11% 8.6% at var(--fx) var(--fy), transparent 58%, #000 100%);
  mask: radial-gradient(ellipse 11% 8.6% at var(--fx) var(--fy), transparent 58%, #000 100%);
  transition: opacity var(--t-mid) var(--ease), --fx .52s var(--ease), --fy .52s var(--ease);
}
.team.is-on .team__lens { opacity: 1; }
/* El filo del círculo: sin él la luz es una mancha; con él es un visor.
   ⚠️ NO declara su propia transición de --fx/--fy. Con una transición
   propia, el filo y el agujero interpolan por separado y durante medio
   segundo el círculo señala a una persona y el filo a otra. Al no
   declararla, hereda el valor YA animado del padre y van pegados. */
.team__lens::after {
  content: ""; position: absolute; left: var(--fx); top: var(--fy);
  width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
}

/* El registro al margen de la lámina: cuatro filas seguidas, no repartidas.
   Repartidas por el alto de la foto, cada nombre quedaba flotando lejos de
   su filo y la lista se leía como cuatro cosas sueltas. */
.team__list { list-style: none; margin: 0; padding: 0; }
.team__person {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--hair-soft);
  padding: 16px 6px; cursor: pointer; color: inherit; font: inherit;
  transition: background var(--t-fast), padding-left var(--t-mid) var(--ease);
}
.team__list li:last-child .team__person { border-bottom: 1px solid var(--hair-soft); }
.team__person img {
  width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--t-mid) var(--ease-soft);
}
.team__person.is-on { background: var(--hover); padding-left: 14px; }
.team__person.is-on img { filter: grayscale(0) contrast(1.02); }
/* v10 · En móvil los cuatro van en rejilla y están en pantalla a la vez: no
   hay protagonista que destacar, así que el gris solo resta. El foco de la
   foto de grupo sigue funcionando igual al tocar. */
@media (hover: none) {
  .team__person img { filter: grayscale(0) contrast(1.02); }
}
.team__person b { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.005em; }
.team__role {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); display: block; margin-top: 6px;
}
.team__hint { margin: 16px 0 0; }
@media (min-width: 900px) { .team__hint { margin-top: 20px; } }
/* La pista tiene que decir la verdad en cada modo: con ratón se señala,
   en táctil la mueve el scroll. Decir «tócalos» donde el gesto real es
   desplazarse era pedirle al usuario justo lo que no funcionaba. */
.team__hint--tac { display: none; }
@media (hover: none) {
  .team__hint--rat { display: none; }
  .team__hint--tac { display: inline; }
}

/* En móvil la foto manda y los cuatro van debajo en fila, como la
   credencial que ya eran. La luz sigue funcionando al tocar. */
@media (max-width: 899px) {
  .team__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .team__person {
    flex-direction: column; align-items: flex-start; gap: 10px;
    border-top: 0; padding: 0;
  }
  .team__list li:last-child .team__person { border-bottom: 0; }
  .team__person.is-on { background: transparent; padding-left: 0; }
  .team__person img { width: 100%; height: auto; aspect-ratio: 1; }
  .team__person b { font-size: .88rem; }
  /* En la fila de cuatro, la SEGUNDA PALABRA baja de línea siempre — tanto
     el apellido como la segunda del rol. Sin esto, las que caben en una
     línea suben respecto a las que se parten solas, y la fila entera se ve
     descuadrada aunque cada ficha mida lo mismo. */
  .team__brk { display: block; }
  .team__person img { width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   01 · DOS TERRITORIOS — marca y presencia + pauta
   ─────────────────────────────────────────────────────────────────────
   Aquí vivía `.ln`, la línea de dos tramos con sus paneles (226 líneas).
   Se fue entera con el componente: era una tira de PESTAÑAS, y una pestaña
   apagada se lee como una función desactivada, no como el otro servicio.

   ⚠️ Superficie fija y oscura, fuera del reparto de `superficies()`: el
   color lo pone el material. Y COLUMNAS, no bandas apiladas — las bandas
   son el gesto de `/entrar` y repetirlo aquí volvería el sitio monótono.
   ═══════════════════════════════════════════════════════════════════════ */

.terr-sec {
  --ink: #e9e7e2; --ink-soft: #9b9ea9; --ink-faint: #6b6e79;
  --accent: var(--savvy-lit); --accent-solid: var(--savvy); --mark: var(--candy);
  --hair: rgba(233,231,226,.16); --hair-soft: rgba(233,231,226,.08);
  background: #16181f; color: var(--ink);
  padding-block: clamp(48px, 6vw, 86px) 0;
}
.terr-sec .hd { border-color: var(--hair); }
/* Titular y bajada en paralelo: la cabecera pasa de 360 px a 210. */
.terr__cab { display: grid; gap: clamp(14px, 2vw, 30px); align-items: end; }
@media (min-width: 900px) { .terr__cab { grid-template-columns: 1.15fr .85fr; } }
.terr__cab .lede { margin: 0; }

.terr {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: clamp(30px, 4vw, 52px); border-top: 1px solid var(--hair-soft);
  transition: grid-template-columns var(--t-slow) var(--ease);
}
.terr:has(.tr:nth-child(1).is-on) { grid-template-columns: 1.18fr .82fr; }
.terr:has(.tr:nth-child(2).is-on) { grid-template-columns: .82fr 1.18fr; }

.tr {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(24px, 3vw, 40px) clamp(18px, 2.6vw, 34px) clamp(30px, 3.4vw, 44px);
  min-height: clamp(360px, 44vh, 470px);
  color: inherit; text-decoration: none; overflow: hidden;
  border-left: 1px solid var(--hair-soft);
}
.tr:first-child { border-left: 0; }
.tr:focus-visible { outline: 2px solid var(--candy); outline-offset: -3px; }
/* Cada territorio trae su luz: savvy la marca, candy la presencia. */
.tr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 70% at 70% 30%, rgba(27,3,255,.22), transparent 70%);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.tr:nth-child(2)::after { background: radial-gradient(80% 70% at 70% 30%, rgba(255,187,218,.16), transparent 70%); }
.tr.is-on::after { opacity: 1; }

.tr__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-faint); }
.tr.is-on .tr__no { color: var(--candy); }
.tr__nom {
  font-family: var(--f-display); font-weight: 900; text-transform: lowercase;
  font-size: clamp(30px, 4.4vw, 58px); line-height: .9; letter-spacing: -.03em;
  color: var(--ink); margin: 0; transition: color var(--t-mid) var(--ease);
}
html.js .tr__nom { color: #6d7180; }
html.js .tr.is-on .tr__nom { color: #f2f0eb; }
.tr__dice {
  font-weight: 200; font-size: clamp(15px, 1.5vw, 18.5px); line-height: 1.4;
  color: var(--ink-soft); max-width: 26ch; transition: color var(--t-mid) var(--ease);
}
.tr.is-on .tr__dice { color: var(--ink); }
.tr__cap {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.9;
}
.tr__ir { margin-top: auto; }

/* El material: láminas reales en el gris de archivo hasta que se señala. Es
   ENFOCAR, el verbo que ya usan la fotografía y los logotipos del sitio. */
.tr__mat { position: relative; height: clamp(140px, 14vw, 180px); margin-block: 4px; }
.tr__mat img {
  position: absolute; border-radius: 6px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  filter: grayscale(1) contrast(1.06) brightness(.7);
  transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.tr.is-on .tr__mat img { filter: none; }
.tr__mat img:nth-child(1) { left: 0;   top: 8%;  width: 40%; height: 80%; }
.tr__mat img:nth-child(2) { left: 31%; top: 0;   width: 38%; height: 100%; z-index: 2; }
.tr__mat img:nth-child(3) { left: 64%; top: 10%; width: 36%; height: 78%; }
.tr.is-on .tr__mat img:nth-child(2) { transform: translateY(-6px); }

/* ── Táctil: los dos territorios, anunciados en la primera pantalla ─────
   El nombre de `02` cae a 614 px de la entrada de la sección: dentro de la
   pantalla, sin hover y sin acordeón. El material baja al final de cada
   territorio para que los dos nombres queden lo más arriba posible.
   🐛 La anulación de columnas tiene que IGUALAR la especificidad de
   `.terr:has(.tr:nth-child(1).is-on)` (0,3,0) o el teléfono se queda con
   dos columnas de 195 px. */
@media (max-width: 760px) {
  .terr,
  .terr:has(.tr:nth-child(1).is-on),
  .terr:has(.tr:nth-child(2).is-on) { grid-template-columns: 1fr; }
  .tr {
    min-height: 0; gap: 10px; border-left: 0; border-top: 1px solid var(--hair-soft);
    padding: 18px clamp(18px, 5vw, 26px) 20px;
  }
  /* En táctil el apagado sube de tono: el activo lo elige el scroll, y en el
     primer vistazo los dos nombres tienen que leerse como dos territorios
     —no como uno encendido y otro desactivado—. El aviso de cuál está en foco
     lo da el material a color, que es más fuerte que el gris. */
  html.js .tr__nom { color: #9aa0ae; }
  .tr__nom { font-size: clamp(30px, 9vw, 44px); }
  .tr__dice { font-size: 15px; max-width: 32ch; order: 3; }
  .tr__cap { order: 4; }
  .tr__mat { height: 92px; order: 5; margin: 2px 0 0; }
  .tr__ir { order: 6; margin-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EL MONTAJE — la firma de motion de ITER (la primitiva)
   ─────────────────────────────────────────────────────────────────────
   Del focus group salió que ésta es la mejor animación de la web. Así que
   deja de ser «la animación de Flash Box» y pasa a ser un sistema con
   nombre, separado de su contenido. Lo que la hace funcionar, y lo que
   hay que respetar al reutilizarla:

     1 · NADA APARECE DE LA NADA. Todas las piezas están en pantalla desde
         el primer fotograma; lo único que cambia es su ESTADO. Por eso no
         se siente como contenido que aparece de golpe, sino como algo que
         se ordena.
     2 · EL SCROLL ES EL TRANSPORTE. La escena se fija (`sticky`) y la fase
         sale del PROGRESO del contenedor, así que el lector no mira: monta.
     3 · LA FASE ES UN ENTERO, no un valor escrubeado. Cada estado es una
         transición CSS con la curva de la casa — por eso se siente
         dirigido y no atado al dedo.
     4 · SOLO SE ANIMAN `transform` Y `filter`. Nada toca el layout.
     5 · EL ESCALONADO ES CORTO: `--o * .045s`. Nueve piezas caben en 400 ms
         — se lee como secuencia sin volverse lento.
     6 · EL MISMO OBJETO CAMBIA DE SIGNIFICADO. La retícula es plano en una
         fase y cable en otra. Ahí está el argumento, no en el efecto.

   CONTRATO (lo que controla el movimiento):
     `data-fases`   cuántos estados tiene la escena (lo lee el script)
     `data-fase`    el estado actual, 1..n — lo escribe el script
     alto de `.montaje`   cuánto scroll dura el fijado (2,2 pantallas es el
                    techo: por encima deja de ser dirección y es secuestro)
     `--o`          orden de la pieza en el escalonado
     `--dx --dy --r --s`  su desorden de partida
     `--gr --gc`    su celda de destino (`--mgr --mgc` en móvil)

   ⚠️ DISCIPLINA: reutilizar el PRINCIPIO, no el componente. Si aparecen
   tarjetas idénticas por toda la web, un recurso especial se convierte en
   un gimmick. Aparece pocas veces y siempre por una razón — capas,
   sistemas, piezas, trabajo construido.
   ═══════════════════════════════════════════════════════════════════════ */
.montaje { position: relative; }
.montaje__stage {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 78px 0 26px; overflow: hidden;
}
/* 🐛 `.shell` lleva `margin: 0 auto`, y en un contenedor flex en COLUMNA los
   márgenes automáticos del eje transversal hacen que el elemento se encoja
   al contenido en vez de estirarse: el tablero salía de 51 px de ancho. El
   ancho explícito lo devuelve, y el `auto` sigue centrándolo. */
.montaje__stage > .shell { width: 100%; }

/* La escena trae su propio suelo: no depende de qué superficie le toque en
   el reparto de `superficies()`, y por eso su clase no empieza por `s-`. */
.asm-sec {
  --ink: #e9e7e2; --ink-soft: #9b9ea9; --ink-faint: #6b6e79;
  --accent: var(--savvy-lit); --accent-solid: var(--savvy); --mark: var(--candy);
  --hair: rgba(233,231,226,.16); --hair-soft: rgba(233,231,226,.08);
  --well: var(--carbon-2);
  background: var(--carbon); color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   EL ENSAMBLAJE — una interpretación del montaje: Flash Box construyéndose
   ─────────────────────────────────────────────────────────────────────
   Cinco fases sobre una sola pantalla fija, con NUEVE FRAGMENTOS REALES de
   Flash Box. La regla que lo ordena todo: nada aparece de la nada. Los
   nueve están en pantalla desde el primer momento; lo que cambia es su
   ESTADO.

     01 levantamiento  piezas dispersas, giradas, en gris de archivo
     02 especificación aparece la retícula y cada pieza recibe su rótulo.
                       NO se mueven todavía: se les asigna sitio.
     03 construcción   encajan y recuperan color, en el orden real en que
                       se construyeron: primero el logotipo, al final la
                       operación
     04 puesta en marcha la retícula se vuelve conexión —la misma línea que
                       era plano ahora es cable— y los nodos se rellenan
     05 operación      una señal de vida, una sola y verdadera: la cifra
                       que la web ya publica de Flash Box

   El plano y el cableado son EL MISMO OBJETO en dos estados. Ahí está el
   argumento entero de la sección.
   ═══════════════════════════════════════════════════════════════════════ */
/* v11 · 3,2 → 2,0 pantallas. Con los rótulos de fase fuera, el lector ya no
   tiene nada que leer en cada estado, así que el recorrido que antes daba
   tiempo a leer ahora solo sobraba. La animación es la misma; el peaje no. */
.asm { height: 220svh; }
/* 2,2 pantallas de fijado — por encima de eso deja de ser dirección y
   empieza a ser secuestro. La fase la calcula el script desde el progreso
   del contenedor; aquí no hace falta ningún elemento marcador. */

/* ── El sello ─────────────────────────────────────────────────────────
   Aquí vivían las cinco cabeceras de fase. La escena ya no explica lo que
   hace: solo dice, al final, de quién es la marca que acaba de montarse.
   Identificar es demostrar; rotular la fase era explicar.               */
.asm__sello {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: flex; align-items: baseline; gap: 10px;
  background: #0b0c11; border-left: 2px solid var(--mark);
  padding: 9px 13px; margin: 0; opacity: 0; transform: translateY(6px);
  font-family: var(--f-display); font-weight: 900; font-size: 1.15rem;
  color: #f2f0ec; letter-spacing: -.01em;
  transition: opacity .5s var(--ease-soft) .1s, transform .5s var(--ease) .1s;
}
.asm__sello span {
  font-family: var(--f-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #9b9ea9;
}
.asm[data-fase="3"] .asm__sello, .asm[data-fase="4"] .asm__sello { opacity: 1; transform: none; }

/* ── El tablero ───────────────────────────────────────────────────────── */
.asm__board {
  position: relative; flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: clamp(6px, .8vw, 12px);
}

/* La retícula: primero plano, después cable. El mismo objeto. */
.asm__net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.asm__net--m { display: none; }
@media (max-width: 719px) { .asm__net--m { display: block; } }
.asm__net line {
  stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .5s var(--ease-soft), stroke .5s var(--ease);
}
.asm[data-fase="2"] .asm__net line,
.asm[data-fase="3"] .asm__net line { opacity: 1; }
.asm[data-fase="4"] .asm__net line {
  opacity: 1; stroke: var(--accent);
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: opacity .4s, stroke .5s var(--ease), stroke-dashoffset .8s var(--ease-soft);
}
.asm[data-fase="2"] .asm__net line,
.asm[data-fase="3"] .asm__net line { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ── Los fragmentos ───────────────────────────────────────────────────── */
.fr {
  position: relative; margin: 0; overflow: hidden;
  /* 🐛 NO usar `grid-area` aquí: con `--gr: 1/2` y `--gc: 3/4` la sustitución
     produce `grid-area: 1/2/3/4`, que el navegador lee como
     fila-inicio/columna-inicio/fila-fin/columna-fin y descoloca las nueve
     piezas. Con las propiedades separadas cada rango va a su eje. */
  grid-row: var(--gr); grid-column: var(--gc);
  background: var(--well);
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  filter: grayscale(1) brightness(.62) contrast(.92);
  transition:
    transform .85s var(--ease) calc(var(--o) * .045s),
    filter .7s var(--ease-soft) calc(var(--o) * .045s);
}
.fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 03 · construcción: encajan y recuperan color, en orden de construcción */
.asm[data-fase="3"] .fr, .asm[data-fase="4"] .fr {
  transform: none; filter: none;
}
/* 02 · especificación: se les asigna sitio y rótulo, pero NO se mueven */
.fr__tag {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase;
  color: #f2f0ec; background: rgba(10,11,15,.78); padding: 5px 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease);
}
.asm[data-fase="2"] .fr__tag, .asm[data-fase="3"] .fr__tag,
.asm[data-fase="4"] .fr__tag { opacity: 1; transform: none; }

/* ── Los nodos ────────────────────────────────────────────────────────── */
.asm__nd {
  position: absolute; left: var(--nx); top: var(--ny);
  height: 20px; aspect-ratio: 214.3 / 284.8;
  transform: translate(-50%, -50%);
  background: var(--ink-faint); opacity: 0;
  -webkit-mask: url("img/destello.svg") no-repeat center / contain;
  mask: url("img/destello.svg") no-repeat center / contain;
  transition: opacity .45s var(--ease-soft), background .5s var(--ease), transform .5s var(--ease);
}
.asm[data-fase="2"] .asm__nd, .asm[data-fase="3"] .asm__nd { opacity: .5; }
.asm[data-fase="4"] .asm__nd {
  opacity: 1; background: var(--accent); transform: translate(-50%, -50%) scale(1.3);
}

/* ── 05 · la única señal de vida, y es verdadera ──────────────────────── */
.asm__dato {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: flex; align-items: baseline; gap: 8px;
  /* Sólido, no translúcido: cae encima de la foto de la furgoneta y con
     alfa la cifra se perdía contra el amarillo. */
  background: #0b0c11; border-left: 2px solid var(--accent);
  padding: 9px 13px; opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-soft) .25s, transform .5s var(--ease) .25s;
}
.asm[data-fase="4"] .asm__dato { opacity: 1; transform: none; }
.asm__dato b {
  font-family: var(--f-display); font-weight: 900; font-size: 1.15rem;
  color: #f2f0ec; font-variant-numeric: tabular-nums;
}
.asm__dato span {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #9b9ea9;
}

@media (prefers-reduced-motion: reduce) {
  .fr { transform: none; filter: none; transition: none; }
  .asm__net line { opacity: 1; stroke-dashoffset: 0; }
  .asm__nd { opacity: 1; }
  .fr__tag, .asm__dato, .asm__sello { opacity: 1; transform: none; }
}

/* ── Móvil: seis fragmentos, no nueve. Con nueve no se distingue ninguno,
      y el fijado baja a 1,6 pantallas.                                   */
@media (max-width: 719px) {
  .asm { height: 180svh; }
  .montaje__stage { padding: 70px 0 20px; }
  .asm__board { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  .fr--off, .asm__nd--off, .asm__net--d { display: none; }
  .fr { grid-row: var(--mgr); grid-column: var(--mgc); }
  .asm__nd { left: var(--mnx); top: var(--mny); }
  .asm__nd { height: 15px; }
  /* En una columna estrecha la cifra y su rótulo no caben en línea: se
     apilan en vez de salirse por el borde. */
  .asm__dato { right: 6px; bottom: 6px; padding: 7px 10px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .asm__sello { left: 6px; bottom: 6px; padding: 7px 10px; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 1rem; }
  .asm__sello span { font-size: 8.5px; letter-spacing: .08em; }
  .asm__dato b { font-size: 1rem; }
  .asm__dato span { font-size: 8.5px; letter-spacing: .08em; }
}
.asm__wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ESCALA — los tres registros que le faltaban a la web
   ─────────────────────────────────────────────────────────────────────
   El diagnóstico medido contra Corkidi y El Joint fue que ITER no es
   conservador en color ni en movimiento: lo es en RANGO. Ninguna imagen
   pasaba del 43% del ancho de pantalla y no había una sola a sangre.
   Estas tres piezas existen para abrir ese rango, y solo se usan donde el
   salto de tamaño ES el argumento.
   ═══════════════════════════════════════════════════════════════════════ */

/* A SANGRE TOTAL. Rompe el shell y ocupa el ancho del viewport.
   ⚠️ Necesita `overflow-x: clip` en el contenedor, y CLIP y no HIDDEN:
   `hidden` convierte al ancestro en contenedor de scroll y rompería el
   `position: sticky` del ensamblaje. */
main { overflow-x: clip; }
.full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }
.full img { width: 100%; height: auto; display: block; }
.full--banda img { aspect-ratio: 21 / 8; object-fit: cover; }
@media (max-width: 719px) { .full--banda img { aspect-ratio: 4 / 3; } }

/* EL DETALLE MÍNIMO. Justo después de una lámina a sangre: el salto de
   100% a 8% en dos pantallas es lo que hace que se note el sistema. El
   aire alrededor no es decorativo, es la mitad del efecto. */
.mote { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (min-width: 820px) { .mote { grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); } }
.mote__pza { margin: 0; }
.mote__pza img { width: clamp(76px, 7vw, 104px); height: auto; display: block; }
.mote__pza figcaption {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 14px;
}

/* EL TITULAR MÁXIMO. Un solo uso por página y siempre solo en pantalla:
   si comparte espacio con otra cosa deja de ser un cambio de escala y
   pasa a ser un titular grande. */
.d0 {
  font-family: var(--f-display); font-weight: 900; text-transform: lowercase;
  font-size: clamp(2.5rem, 8.4vw, 6.4rem); line-height: .9; letter-spacing: -.028em;
  margin: 0; max-width: 16ch; text-wrap: balance;
}
.d0 em { font-style: normal; color: var(--accent); }

/* TRES A LA VEZ, EN TRES TAMAÑOS. Alineadas por la base para que la
   diferencia de tamaño se lea como decisión y no como descuadre. */
.trio--desigual { display: grid; gap: clamp(14px, 2.2vw, 30px); }
@media (min-width: 860px) {
  .trio--desigual { grid-template-columns: 1.35fr .95fr .58fr; align-items: end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA SEÑAL QUE VIAJA — ITER OS y ITER Screens
   ─────────────────────────────────────────────────────────────────────
   Una agencia que construye sus propias herramientas cambia de categoría
   en la cabeza del que lee, y eso estaba contado en tres columnas de texto
   dentro de un bloque rosa, sin una sola imagen.

   ⚠️⚠️ LA REGLA QUE NO SE PUEDE ROMPER AQUÍ: los dos productos NO están
   conectados por ninguna tubería, y la escena no puede insinuarlo. Lo que
   viaja es LA PIEZA a través de la operación —se aprueba en un sitio y se
   publica en otro—, no un dato entre dos APIs. Cada ventana hace solo lo
   que su producto hace de verdad.

   Las interfaces van RECONSTRUIDAS en HTML, no como capturas: pesan una
   fracción, se ven nítidas a cualquier tamaño, permiten que algo se mueva
   de verdad de una a otra, y así se controla cada dato que aparece —de las
   capturas reales no puede salir ni un nombre de pieza sin publicar ni un
   número de cola de trabajo.
   ═══════════════════════════════════════════════════════════════════════ */
.sig { display: grid; gap: 0; align-items: center; }
@media (min-width: 900px) { .sig { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); } }

/* ── La ventana ───────────────────────────────────────────────────────── */
.win {
  background: #0b0c11; border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.win__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #8b8b9c; background: rgba(255,255,255,.02);
}
.win__bar i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a48; flex: none; }
.win__body { padding: 16px; }

/* ── ITER OS: el plan, y una pieza esperando aprobación ───────────────── */
.os__marca {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: #6f6f80; margin: 0 0 12px;
}
.os__lista { list-style: none; margin: 0; padding: 0; }
.os__pza {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px; color: #9b9bac;
}
.os__pza i { width: 7px; height: 7px; border-radius: 2px; background: #3ddc97; flex: none; }
.os__pza b { margin-left: auto; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: #5f6070; font-weight: 400; }
.os__pza--foco { color: #eceaf2; }
.os__pza--foco i { background: var(--candy); }
.os__pza--foco b { color: var(--candy); }
.sig[data-estado="1"] .os__pza--foco i,
.sig[data-estado="2"] .os__pza--foco i { background: #3ddc97; }
.sig[data-estado="1"] .os__pza--foco b,
.sig[data-estado="2"] .os__pza--foco b { color: #3ddc97; }
.os__btn {
  margin-top: 16px; width: 100%;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  padding: 11px 14px; border-radius: 999px; cursor: pointer;
  background: var(--candy); color: #14151a; border: 1.5px solid #14151a;
  box-shadow: 3px 3px 0 var(--savvy);
  transition: transform var(--t-tap), box-shadow var(--t-tap), background var(--t-fast), color var(--t-fast);
}
.os__btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--savvy); }
.os__btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--savvy); }
/* Al terminar deja de ser la acción principal y pasa a ser la de repetir:
   sigue siendo pulsable, pero ya no compite con el resto de la página. */
.sig[data-estado="2"] .os__btn {
  background: transparent; color: #8b8b9c; border-color: rgba(255,255,255,.14); box-shadow: none;
  transform: none;
}
.sig[data-estado="2"] .os__btn:hover { color: #eceaf2; border-color: rgba(255,255,255,.3); transform: none; }
.os__btn:disabled { cursor: default; }
.sig__token { width: 68px; }

/* ── El cable, y la pieza que lo recorre ──────────────────────────────── */
.sig__cable { position: relative; height: 74px; }
@media (min-width: 900px) { .sig__cable { height: 100%; min-height: 74px; } }
.sig__cable::before {
  content: ""; position: absolute; background: var(--hair);
  left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
}
.sig__cable::after {
  content: ""; position: absolute; background: var(--accent);
  left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%) scaleY(0);
  transform-origin: top; transition: transform .5s var(--ease);
}
.sig[data-estado="1"] .sig__cable::after,
.sig[data-estado="2"] .sig__cable::after { transform: translateX(-50%) scaleY(1); }
@media (min-width: 900px) {
  .sig__cable::before, .sig__cable::after {
    left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%);
  }
  .sig__cable::after { transform: translateY(-50%) scaleX(0); transform-origin: left; }
  .sig[data-estado="1"] .sig__cable::after,
  .sig[data-estado="2"] .sig__cable::after { transform: translateY(-50%) scaleX(1); }
}
/* La pieza en tránsito. No es un punto abstracto: es la creatividad real
   que se acaba de aprobar, y por eso se reconoce al llegar. */
.sig__token {
  position: absolute; left: 50%; top: 0; z-index: 2;
  width: 68px; aspect-ratio: 16/10; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--accent); background: #000;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  transition: top .62s var(--ease-soft), left .62s var(--ease-soft),
              opacity .2s var(--ease), transform .3s var(--ease);
}
.sig__token img { width: 100%; height: 100%; object-fit: cover; }
.sig[data-estado="1"] .sig__token { opacity: 1; top: 100%; transform: translate(-50%, -50%) scale(1); }
@media (min-width: 900px) {
  .sig__token { left: 0; top: 50%; }
  .sig[data-estado="1"] .sig__token { left: 100%; top: 50%; }
}
.sig[data-estado="2"] .sig__token { opacity: 0; transition: opacity .2s; }

/* ── ITER Screens: la pantalla del local ──────────────────────────────── */
.tv {
  position: relative; aspect-ratio: 16/9; background: #08080c;
  border: 1px solid rgba(255,255,255,.08); border-radius: 5px; overflow: hidden;
  display: grid; place-items: center;
}
.tv img, .tv .pza-demo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease-soft), transform .7s var(--ease-soft); }
.sig[data-estado="2"] .tv img,
.sig[data-estado="2"] .tv .pza-demo { opacity: 1; transform: none; }

/* La pieza que viaja por el cable y la que acaba reproduciéndose. Es
   contenido de ITER —campo Savvy y el destello propio—, no el arte de la
   campaña de un cliente: en la portada pública no hace falta la marca de
   nadie para demostrar que una pieza aprobada acaba en una pantalla. */
.pza-demo { display: grid; place-items: center; border-radius: 4px; background: var(--savvy); color: #fff; }
.sig__token .pza-demo { aspect-ratio: 16 / 10; }
.pza-demo .astro { width: 30%; }
.tv__vacio {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #4a4a58; transition: opacity .3s;
}
.sig[data-estado="2"] .tv__vacio { opacity: 0; }
.scr__pie {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #6f6f80;
}
.scr__pie i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a48; flex: none; transition: background .4s; }
.sig[data-estado="2"] .scr__pie i { background: #3ddc97; }
.sig[data-estado="2"] .scr__pie { color: #9b9bac; }

@media (prefers-reduced-motion: reduce) {
  .sig__token { display: none; }
  .tv img, .sig__cable::after { transition: none; }
}

/* ── Lo transversal del equipo, sin manifiesto ────────────────────────
   Tres especialidades y una que es de los cuatro. Se dice con la
   maquetación: los roles van en gris y a su lado; esta va en el color de
   marca y cruza el ancho entero.                                        */
.team__todos {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 15px 6px 0;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mark);
}
.team__todos::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; }
.team__todos b { font-weight: 400; color: var(--ink-faint); order: 3; }

/* ═══════════════════════════════════════════════════════════════════════
   PERSPECTIVAS — la capa editorial
   ─────────────────────────────────────────────────────────────────────
   Tiene que leerse como conocimiento de la casa y NO como «el blog de una
   agencia». Dos decisiones sostienen eso:

   · sin cajas y sin miniaturas — solo filos. Una rejilla de tarjetas con
     foto compite de tú a tú con Proyectos, y Proyectos tiene que ganar;
   · el titular va en el peso callado del display, no en el fuerte. En la
     portada este bloque es el penúltimo y debe ceder ante el cierre.

   Si algún día pide más presencia, lo que crece es /perspectivas, no el
   bloque de la portada.
   ═══════════════════════════════════════════════════════════════════════ */
.posts { display: grid; gap: 0; border-top: 1px solid var(--hair); }
@media (min-width: 820px) {
  .posts { grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 4vw, 60px); }
}
.post {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--hair-soft);
  text-decoration: none; color: inherit;
  transition: padding-left var(--t-mid) var(--ease), background var(--t-fast);
}
@media (hover: hover) {
  .post:hover { padding-left: 12px; background: var(--hover); }
}
.post:focus-visible { padding-left: 12px; background: var(--hover); }
.post__cat {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mark);
}
.post__t {
  font-family: var(--f-display); font-weight: 900; text-transform: lowercase;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.06; letter-spacing: -.02em;
  color: var(--ink); margin: 0; max-width: 24ch;
}
.post__pie {
  margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.post__leer { color: var(--ink-soft); white-space: nowrap; }   /* 9,5 px: ver .more */
.post__leer i { color: var(--accent); }
.post__leer i { font-style: normal; display: inline-block; transition: transform var(--t-mid) var(--ease); }
@media (hover: hover) { .post:hover .post__leer i { transform: translateX(4px); } }
/* El índice respira más que la portada: allí sí es el contenido principal. */
.posts--indice .post__t { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }

/* ── La ruta ──────────────────────────────────────────────────────────── */
.migas {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 18px;
}
.migas a { color: var(--ink-soft); text-decoration: none; }
.migas a:hover { color: var(--ink); }
.migas span { margin: 0 8px; opacity: .5; }

/* ── La ficha del artículo ────────────────────────────────────────────── */
.art__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── El cuerpo del artículo ───────────────────────────────────────────
   Medida corta a propósito: 66 caracteres es donde el ojo deja de saltar
   de línea. Es la única parte del sitio pensada para leerse entera.     */
.art { max-width: 66ch; }
.art > * { max-width: none; }
.art p { margin: 0 0 1.15em; font-size: clamp(1rem, 1.35vw, 1.08rem); line-height: 1.7; color: var(--ink-soft); }
.art .lede {
  font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.55; color: var(--ink);
  margin-bottom: 1.5em; max-width: none;
}
.art h2 {
  font-family: var(--f-display); font-weight: 900; text-transform: lowercase;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.02; letter-spacing: -.025em;
  color: var(--ink); margin: 2.1em 0 .6em;
}
.art h3 {
  font-family: var(--f-body); font-weight: 600; font-size: 1.04rem; letter-spacing: -.005em;
  color: var(--ink); margin: 1.9em 0 .5em;
}
.art h2 + h3 { margin-top: 1.1em; }
.art strong { color: var(--ink); font-weight: 600; }
.art em { font-style: italic; }
.art a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art code {
  font-family: var(--f-mono); font-size: .86em; background: var(--well);
  padding: 2px 6px; border-radius: 3px; color: var(--ink);
}

/* ── El transversal del equipo gana su frase ──────────────────────────── */
/* (.team__nota salió: la frase del equipo vive una sola vez por página) */

/* ── Preguntas frecuentes ─────────────────────────────────────────────
   ⚠️ Este bloque se DIBUJA a propósito. El `FAQPage` de schema.org exige que
   la pregunta y la respuesta estén visibles en la página: marcar lo que no se
   ve no es un atajo de posicionamiento, es motivo de penalización. Y de paso
   es lo que un motor generativo cita mejor — una pregunta con su respuesta
   corta al lado.                                                          */
.faq { display: grid; gap: 0; border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .faq { grid-template-columns: repeat(2, 1fr); column-gap: clamp(30px, 4vw, 64px); } }
.faq__q { padding: clamp(20px, 2.6vw, 28px) 0; border-bottom: 1px solid var(--hair-soft); }
.faq__q h3 {
  font-family: var(--f-body); font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 8px; max-width: 34ch;
}
.faq__q p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }

/* El isotipo de los círculos en el pie. Va más ancho que el logotipo que había
   antes porque el monograma pide aire: a la medida del lockup los tres círculos
   se tocaban y perdía el gesto. */
.sello { width: 132px; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   CASOS — las dos piezas que faltaban para que los cuatro proyectos no
   sean la misma plantilla con otro logotipo
   ─────────────────────────────────────────────────────────────────────
   El resto se compone con lo que ya existe (.shot, .duo, .trio, .full,
   .well). Estas dos existen porque resuelven cosas que el sistema no podía:

   · LA TIRA — una secuencia que se recorre. Es la forma de enseñar que una
     marca PRODUCE: seis piezas seguidas dicen «esto sale todas las semanas»
     mejor que cualquier frase sobre consistencia. Y en móvil se arrastra,
     que es como se miran las piezas de redes de verdad.
   · EL MOSAICO — una grande y dos pequeñas. Rompe el «título + párrafo +
     imagen» sin pedir arte nueva: cambia la ESCALA, que era el registro que
     [rango de escala] señaló como el que le faltaba a la web.
   ═══════════════════════════════════════════════════════════════════════ */
.tira {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 30vw, 330px);
  gap: clamp(10px, 1.4vw, 18px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 14px;
  /* El riel se sale del shell por la derecha: una secuencia que termina justo
     en el margen parece que se acabó. Cortada, invita a seguir. */
  margin-right: calc(50% - 50vw); padding-right: var(--pad);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.tira > * { scroll-snap-align: start; margin: 0; }
/* ⚠️ Proporción FIJA. Las piezas reales de un cliente vienen en todas las
   relaciones —un logotipo apaisado, una paleta baja, un arte cuadrado— y con
   `height: auto` la tira sale escalonada: parece un error de maquetación, no
   una secuencia. La banda uniforme es lo que la hace leer como archivo. */
.tira img {
  width: 100%; height: 100%; display: block; background: var(--well);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.tira--alta { grid-auto-columns: clamp(170px, 24vw, 250px); }
.tira--alta img { aspect-ratio: 9 / 16; }
.tira--cuadro img { aspect-ratio: 1; }
.tira::-webkit-scrollbar { height: 6px; }
.tira::-webkit-scrollbar-thumb { background: var(--hair); }

/* El mosaico: la primera manda y las otras dos la acompañan. */
.mosaico { display: grid; gap: clamp(10px, 1.4vw, 18px); }
@media (min-width: 820px) {
  .mosaico { grid-template-columns: 1.9fr 1fr; grid-template-rows: repeat(2, 1fr); }
  .mosaico > :first-child { grid-row: 1 / 3; }
  .mosaico > :first-child img { height: 100%; object-fit: cover; }
}
.mosaico figure { margin: 0; }
.mosaico img { width: 100%; height: auto; display: block; background: var(--well); aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 820px) { .mosaico > :first-child img { aspect-ratio: auto; } }

/* El rótulo que va ENCIMA de un bloque visual. Nombra lo que se está viendo
   sin abrir un párrafo debajo: es la etiqueta de un expediente, no un pie. */
.rotulo {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mark); margin: 0 0 14px; display: flex; align-items: center; gap: 12px;
}
.rotulo::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ═══════════════════════════════════════════════════════════════════════
   ITER / — LA PUERTA Y EL SELECTOR DE ENTORNOS
   ─────────────────────────────────────────────────────────────────────
   Dos piezas: el epílogo de la portada (`.puerta`) y la pantalla completa
   de `/entrar` (`.acc`).

   ⚠️ Ninguna de las dos es una superficie `s-*`, así que redeclaran el
   contrato de tinta a mano: `superficies()` no las toca a propósito —el
   fondo tiene que ser fijo— y sin el contrato, `.micro` y `.more` se
   quedan sin color.

   ⚠️ El fondo es VOID (#0b0c11), más hondo que carbón. En la portada es
   lo que despega el epílogo del pie, que también es oscuro; en `/entrar`
   es lo que hace que el material de cada entorno tenga contra qué brillar.

   ⚠️ TODO LO QUE ESCONDE EL SELECTOR CUELGA DE `html.js`. Sin script la
   página se lee entera: los cuatro nombres en blanco, sus estados y sus
   enlaces, uno debajo de otro. Lo que se apaga es el juego, no el
   contenido — la misma regla que el resto del sitio.
   ═══════════════════════════════════════════════════════════════════════ */

.puerta, .acc {
  --ink: #e9e7e2; --ink-soft: #9b9ea9; --ink-faint: #6b6e79;
  --accent: var(--savvy-lit); --accent-solid: var(--savvy); --mark: var(--candy);
  --hair: rgba(233,231,226,.16); --hair-soft: rgba(233,231,226,.08);
  --void: #0b0c11;
  background: #0b0c11; color: var(--ink);
}

/* ── El epílogo de la portada ─────────────────────────────────────────── */
.puerta { border-top: 1px solid rgba(233,231,226,.08); }
.puerta__in {
  padding-block: clamp(48px, 7vw, 92px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(18px, 3vw, 34px);
}
.puerta__marca { display: flex; align-items: center; gap: .2em; }
.puerta__marca .lockup { width: clamp(132px, 15vw, 200px); }
/* La barra es tipografía de la casa al lado del logotipo, no un glifo del
   sistema: Radlush, y en Candy, que es el color de lo que rotula. */
.puerta__marca b {
  font-family: var(--f-display); font-weight: 900; color: var(--candy);
  font-size: clamp(40px, 5.4vw, 66px); line-height: .74;
}
/* Deliberadamente en cuerpo de texto y no en display: si esta línea grita,
   le quita el ojo a «Conversemos», que está en la sección de encima. */
.puerta__linea {
  margin: 16px 0 0; font-weight: 200; color: var(--ink-soft);
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.45;
}
.puerta__cta { flex: none; }

/* ── /entrar ──────────────────────────────────────────────────────────── */
.acc { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
html.js .acc { height: 100vh; height: 100svh; overflow: hidden; }

.acc__top, .acc__pie {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px clamp(16px, 3vw, 34px);
}
.acc__top { border-bottom: 1px solid rgba(255,255,255,.07); }
.acc__pie { border-top: 1px solid rgba(255,255,255,.07); }
.acc__marca { display: flex; align-items: center; gap: .2em; text-decoration: none; }
.acc__marca .lockup { width: clamp(64px, 7vw, 92px); }
.acc__marca b {
  font-family: var(--f-display); font-weight: 900; color: var(--candy);
  font-size: clamp(22px, 2.6vw, 32px); line-height: .74;
}
/* ⛔ Aquí vivía el traspaso escrito en la cabecera: `iter ✦ /` se completaba
   con el nombre del destino. SALIÓ. Con `iter ✦ / screens` arriba, el portal
   entero parecía ser de Screens —que es uno de los cuatro— y la cabecera tiene
   que representar el ecosistema, no a uno de sus productos. El traspaso ahora
   ocurre en la banda: la elegida crece hasta ocupar la pantalla y el resto se
   retira. Se lee como entrar, y no toca la marca. */
.acc.is-yendo .acc__top, .acc.is-yendo .acc__pie { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.acc.is-yendo .banda:not(.is-on) { opacity: 0; transition: opacity var(--t-mid) var(--ease); }
@media (min-width: 761px) {
  html.js .acc.is-yendo[data-act="0"] .acc__bandas { grid-template-rows: 1fr 0fr 0fr 0fr; }
  html.js .acc.is-yendo[data-act="1"] .acc__bandas { grid-template-rows: 0fr 1fr 0fr 0fr; }
  html.js .acc.is-yendo[data-act="2"] .acc__bandas { grid-template-rows: 0fr 0fr 1fr 0fr; }
  html.js .acc.is-yendo[data-act="3"] .acc__bandas { grid-template-rows: 0fr 0fr 0fr 1fr; }
}
.acc__volver { text-decoration: none; white-space: nowrap; }
.acc__volver:hover { color: var(--ink); }
.acc__pista--tac { display: none; }
.acc__pie p { margin: 0; }

.acc__bandas { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.js .acc__bandas {
  display: grid; grid-template-rows: repeat(4, 1fr);
  transition: grid-template-rows var(--t-slow) var(--ease);
}
@media (min-width: 761px) {
  html.js .acc[data-act="0"] .acc__bandas { grid-template-rows: 2.35fr .885fr .885fr .885fr; }
  html.js .acc[data-act="1"] .acc__bandas { grid-template-rows: .885fr 2.35fr .885fr .885fr; }
  html.js .acc[data-act="2"] .acc__bandas { grid-template-rows: .885fr .885fr 2.35fr .885fr; }
  html.js .acc[data-act="3"] .acc__bandas { grid-template-rows: .885fr .885fr .885fr 2.35fr; }
}

/* ── La banda ─────────────────────────────────────────────────────────── */
.banda {
  position: relative; display: block; width: 100%; min-height: 0; overflow: hidden;
  border: 0; border-top: 1px solid rgba(255,255,255,.07);
  background: transparent; color: inherit; font: inherit; text-align: left;
  text-decoration: none; padding: 0; appearance: none; cursor: pointer;
}
.banda:first-child { border-top: 0; }
.banda--bloq { cursor: default; }
.banda:focus-visible { outline: 2px solid var(--candy); outline-offset: -3px; }
html:not(.js) .banda { min-height: 132px; }

/* El material se DESTAPA: una máscara que se abre de izquierda a derecha.
   Nada entra desde fuera del lienzo — es la regla de movimiento de la casa. */
.banda__mat, .banda__ver { display: none; }
html.js .banda__mat {
  display: block; position: absolute; inset: 0; opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-slow) var(--ease), opacity var(--t-mid) var(--ease);
}
html.js .banda.is-on .banda__mat { opacity: 1; clip-path: inset(0 0 0 0); }
.banda__mat--os      { background: linear-gradient(90deg, #0b0c11 4%, rgba(11,12,17,.9) 44%, rgba(24,20,74,.62) 100%); }
.banda__mat--studio  { background: linear-gradient(90deg, #0b0c11 4%, rgba(11,12,17,.88) 46%, rgba(52,43,9,.5) 100%); }
.banda__mat--screens { background: linear-gradient(90deg, #0b0c11 2%, rgba(11,12,17,.78) 38%, rgba(11,12,17,.2) 100%); }
.banda__mat--origins { background: linear-gradient(90deg, #08090f 4%, rgba(8,9,15,.94) 50%, rgba(40,12,34,.62) 100%); }

/* 🐛 EL MATERIAL NO PUEDE SER MÁS ALTO QUE SU BANDA. La banda recorta
   (`overflow: hidden`), y una ventana cortada por arriba y por abajo se lee
   como un fallo, no como un encuadre. Medido a 1280×720: la banda abierta mide
   284 px y la ventana de Studio medía 336 — 52 px fuera.

   El alto de la banda depende del alto de la PANTALLA (es una fracción del
   escenario), así que las piezas altas —el marco de Studio y la pared de
   Screens— también tienen que medirse en alto de pantalla. Con un alto fijo o
   una proporción, cualquier portátil bajo las vuelve a sacar. El tope de aquí
   es el cinturón de seguridad, no la solución. */
html.js .banda__ver {
  display: block; position: absolute; z-index: 2;
  right: clamp(16px, 3vw, 34px); top: 50%; transform: translateY(-50%);
  width: min(46%, 430px); max-height: calc(100% - 24px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease) .1s;
}
html.js .banda.is-on .banda__ver { opacity: 1; }

.banda__in {
  position: relative; z-index: 3; height: 100%;
  display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px);
  padding: 0 clamp(16px, 3vw, 34px);
  transition: padding-right var(--t-slow) var(--ease);
}
/* Con la banda abierta el material ocupa la derecha: el estado y el botón se
   apartan, o quedan ENCIMA de la ventana. */
@media (min-width: 761px) {
  html.js .banda.is-on .banda__in { padding-right: min(50%, 470px); }
}
.banda__no {
  flex: none; width: 26px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; color: var(--ink-faint); transition: color var(--t-mid) var(--ease);
}
html.js .banda.is-on .banda__no { color: var(--candy); }
.banda__id { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.banda__nom {
  font-family: var(--f-display); font-weight: 900; text-transform: lowercase;
  font-size: clamp(34px, 5.6vw, 68px); line-height: .92; letter-spacing: -.03em;
  color: var(--ink); transition: color var(--t-mid) var(--ease);
}
html.js .banda__nom { color: #5a5d69; }
html.js .banda.is-on .banda__nom { color: #f2f0eb; }
/* `iter /` arriba y `/os`, `/studio`, `/screens` debajo: leído en vertical es
   la ruta del producto. La jerarquía se dibuja en vez de explicarse. */
.banda__nom b { color: var(--candy); font-weight: 900; margin-right: .04em; opacity: .5;
  transition: opacity var(--t-mid) var(--ease); }
.banda.is-on .banda__nom b { opacity: 1; }
.banda__desc {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); transition: color var(--t-mid) var(--ease);
}
html.js .banda.is-on .banda__desc { color: var(--ink-soft); }
.banda__fin { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.banda__est {
  display: none; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
}
@media (min-width: 620px) { .banda__est { display: flex; } }
.banda__est i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc97; flex: none; }
.banda--bloq .banda__est i { background: var(--candy); }
.banda__cta {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--hair);
  color: var(--ink-soft); white-space: nowrap;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
html.js .banda__cta { color: var(--ink-faint); }
html.js .banda.is-on .banda__cta { background: #f2f0eb; border-color: #f2f0eb; color: var(--void); }
html.js .banda--bloq.is-on .banda__cta { background: transparent; color: var(--candy); border-color: rgba(255,187,218,.42); }
.banda__cta span { display: inline-block; transition: transform var(--t-mid) var(--ease); }
.banda.is-on .banda__cta span { transform: translateX(4px); }
.banda--bloq .banda__cta span { display: none; }

/* Con ORIGINS abierto se apaga TODO lo demás. Es la única banda que cambia
   la sala entera, y por eso funciona el candado. */
html.js .acc.is-dim { background: #08090f; }
html.js .acc.is-dim .banda:not(.is-on) .banda__nom { color: #3a3c46; }

/* ── El material de cada entorno ──────────────────────────────────────── */
/* `.win` es el componente que ya usa la escena de la portada; aquí va sobre
   `<span>` para poder vivir dentro de un enlace, así que hay que devolverle
   el bloque. Las interfaces van reconstruidas, nunca capturas. */
.acc .win, .acc .win__body { display: block; }
.acc .win__bar { display: flex; }
.pza {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; color: #9b9bac;
}
.pza:last-child { border-bottom: 0; }
.pza i { width: 7px; height: 7px; border-radius: 2px; background: #3ddc97; flex: none; }
.pza b {
  margin-left: auto; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #5f6070; font-weight: 400;
}
.pza--foco { color: #eceaf2; }
.pza--foco i { background: var(--savvy-lit); }
.pza--foco b { color: var(--savvy-lit); }
.pza--frio i { background: #3a3a48; }

/* ITER Studio: el portal se pinta con la tinta de la marca del cliente. Aquí
   esa banda es un MARCADOR DE POSICIÓN —«tu marca»— y no la de nadie: cuenta
   lo que hace el producto sin decir con quién lo está haciendo. */
.win--stu { border-color: rgba(255,255,255,.13); }
.stu__banda {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  background: var(--paper); color: #14151a; font-size: 12.5px; font-weight: 600;
}
.stu__banda i {
  width: 20px; height: 20px; border-radius: 5px; flex: none;
  background: repeating-linear-gradient(135deg, #c9c5bc 0 4px, #b9b5ac 4px 8px);
}
.stu__banda b {
  margin-left: auto; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .11em;
  text-transform: uppercase; font-weight: 400; opacity: .62;
}
/* La pieza que espera visto bueno: un marco, no un dato. */
.stu__pieza {
  display: grid; place-items: center; border-radius: 6px;
  height: clamp(84px, 15vh, 160px);
  background: #15161d; border: 1px solid rgba(255,255,255,.09);
}
.stu__pieza .astro { height: 62%; width: auto; color: var(--savvy-lit); }
.stu__acts { display: flex; gap: 7px; padding-top: 10px; }
.stu__acts b {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 400; padding: 7px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); color: #9b9bac;
}
.stu__acts .stu__si { background: var(--candy); color: #14151a; border-color: #14151a; }

/* ITER Screens: la pared. Cuatro marcos con las cuatro superficies de la marca
   y el destello propio.
   ⛔ Aquí había fotos de campañas de clientes con el rótulo del sitio de cada
   pantalla («Counter 1», «Cancha»): eso es el plano de un local ajeno en una
   URL pública. Esto enseña igual de bien CÓMO se ve el contenido en una pared,
   con material de ITER — y de paso quita 215 KB de la página. */
.pared { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, clamp(66px, 11vh, 112px)); gap: 7px; }
.pantalla {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.12); min-height: 0;
}
.pantalla .astro { height: 66%; width: auto; }
.pantalla--savvy  { background: var(--savvy);  color: #fff; }
.pantalla--candy  { background: var(--candy);  color: #14151a; }
.pantalla--paper  { background: var(--paper);  color: var(--savvy); }
.pantalla--carbon { background: #16181f;       color: var(--candy); }
.pantalla b {
  position: absolute; left: 6px; bottom: 6px; font-family: var(--f-mono); font-size: 8px;
  letter-spacing: .11em; text-transform: uppercase; font-weight: 400; color: #fff;
  background: rgba(0,0,0,.55); padding: 3px 6px; border-radius: 3px;
}
.pantalla--paper b, .pantalla--candy b { color: #14151a; background: rgba(255,255,255,.6); }
/* La única señal de vida de la pared: una pantalla en aire. */
.pantalla em {
  position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: #3ddc97; box-shadow: 0 0 0 0 rgba(61,220,151,.55); animation: late 2.4s ease-out infinite;
}
@keyframes late {
  70%  { box-shadow: 0 0 0 9px rgba(61,220,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}

/* El destello, en cualquier color: la máscara ignora el `fill` del archivo, así
   que el mismo SVG sirve sobre Savvy, sobre papel y sobre carbón. */
.astro {
  display: block; aspect-ratio: 214.3 / 284.8; background: currentColor;
  -webkit-mask: url(/assets/destello.svg) center / contain no-repeat;
          mask: url(/assets/destello.svg) center / contain no-repeat;
}

/* ITER Origins: censura, no desenfoque. El desenfoque es el «próximamente»
   de cualquier plantilla; el tachado pertenece al registro de archivo que ya
   es de ITER. Se leen los RÓTULOS y nunca los valores. Las casillas de abajo
   son el código de emparejamiento del player de Screens, sin código. */
.ficha {
  display: grid; gap: 9px; padding: 14px 16px; border-radius: 9px;
  background: #0d0e11; border: 1px solid rgba(255,187,218,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.ficha__l { display: flex; align-items: center; gap: 10px; }
.ficha__l em {
  font-style: normal; flex: none; width: 66px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; color: #6f6f80;
}
.ficha__l b {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 400; color: var(--candy);
}
.tacha {
  flex: 1; height: 11px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #2b2c36 0 7px, #22232b 7px 12px);
}
.tacha--corta { max-width: 44%; }
.ficha__cod { display: flex; gap: 5px; margin-top: 2px; }
.ficha__cod i {
  width: 22px; height: 28px; border-radius: 4px; background: #15161d;
  border: 1px solid rgba(255,255,255,.09); border-bottom: 2px solid var(--savvy-lit);
}

/* ── Táctil ───────────────────────────────────────────────────────────
   Sin hover no se pierde nada: manda la posición en pantalla. La banda es
   un panel alto con el nombre arriba y el material abajo, y las dos capas
   van ANCLADAS —no apiladas—, o el alto de la ventana empuja el titular
   fuera de la pantalla.
   ⚠️ La banda mide lo que mide su CONTENEDOR, no el selector entero: la
   cabecera y el pie ya ocupan sitio. */
@media (max-width: 760px) {
  .acc__pista--rat { display: none; }
  .acc__pista--tac { display: block; }
  .acc__pie p:last-child { display: none; }
  .acc__pie p { font-size: 8.5px; }
  html.js .acc__bandas {
    display: block; overflow-y: auto; scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }
  html.js .banda { scroll-snap-align: center; min-height: 78%; }
  html.js .banda__ver {
    left: 16px; right: 16px; top: auto; bottom: 22px; transform: none; width: auto;
  }
  html.js .banda__in {
    position: absolute; top: 0; left: 0; right: 0; height: auto;
    align-items: flex-start; padding-top: 22px;
  }
  html.js .banda__nom { font-size: clamp(38px, 11.5vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .pantalla em { animation: none; }
}

/* El descriptor de Origins: los otros tres se presentan, este va tachado
   desde la línea del índice. Misma lengua que su ficha, y ni una palabra
   sobre lo que es. */
.tacha--desc { display: inline-block; width: 58px; height: 9px; vertical-align: middle; }