/* Pixelio — sitio. Solo tokens del sistema: ningún hex suelto. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
[data-theme] { background: var(--fondo); color: var(--tinta); }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Enlaces: Producción y Firma clara en acento; Firma de noche en tinta (el granate nunca es texto ahí). */
:root, [data-theme="produccion"], [data-theme="firma-clara"] { --enlace: var(--acento); --enlace-hover: var(--acento); }
[data-theme="firma"] { --enlace: var(--tinta); --enlace-hover: var(--tinta-tecnica); }
a {
  color: var(--enlace);
  text-decoration: underline;
  text-decoration-thickness: var(--trazo-fino);
  text-underline-offset: 3px;
  transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out, background-color 150ms ease-out;
}
a:hover { color: var(--enlace-hover); text-decoration-thickness: 2px; }
a:active { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Cursor pegaso: solo con puntero fino; en enlaces y botones vuelve la mano. */
@media (pointer: fine) {
  body {
    cursor: url("/img/pegaso-cursor.png?v=ca10aaaf") 2 7, auto;
    cursor: image-set(url("/img/pegaso-cursor.png?v=ca10aaaf") 1x, url("/img/pegaso-cursor-2x.png?v=2a1beec0") 2x) 2 7, auto;
  }
  a, button, [role="button"], label, summary, input[type="radio"] { cursor: pointer; }
  input[type="text"], input[type="email"], textarea { cursor: text; }
}

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--espacio-3); top: var(--espacio-2); z-index: 100;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--fondo); color: var(--tinta);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* Pendientes de contenido: visibles a propósito, para encontrarlos y reemplazarlos. */
.pendiente {
  font-family: var(--font-mono); font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinta-tecnica); border: var(--trazo-fino) solid var(--linea);
  padding: 0 0.35em; font-style: normal; font-weight: 400;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Retícula ---------- */
.reticula {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--espacio-3);
  padding-inline: var(--reticula-margen-movil);
  max-width: 1440px;
  margin-inline: auto;
  width: 100%;
}
.reticula > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .reticula { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--reticula-medianil); padding-inline: var(--espacio-5); }
}
@media (min-width: 1024px) {
  .reticula { grid-template-columns: repeat(var(--reticula-columnas), minmax(0, 1fr)); padding-inline: var(--reticula-margen); }
}

/* Regla de columnas: la retícula visible, como en una hoja técnica. Decorativa. */
.regla {
  display: grid; grid-template-columns: inherit; column-gap: inherit;
  height: var(--espacio-2);
  border-top: var(--trazo-fino) solid var(--linea);
}
.regla i { border-left: var(--trazo-fino) solid var(--linea); border-right: var(--trazo-fino) solid var(--linea); }
.regla i:nth-child(n+5) { display: none; }
@media (min-width: 768px) { .regla i:nth-child(n+5) { display: block; } .regla i:nth-child(n+9) { display: none; } }
@media (min-width: 1024px) { .regla i:nth-child(n+9) { display: block; } }

.seccion { padding-block: var(--espacio-6); }
@media (min-width: 1024px) { .seccion { padding-block: var(--espacio-7); } }
.seccion--firma { padding-block: var(--espacio-8); }
.barrido-sep { max-width: 1440px; margin-inline: auto; padding-inline: var(--reticula-margen-movil); }
@media (min-width: 768px) { .barrido-sep { padding-inline: var(--espacio-5); } }
@media (min-width: 1024px) { .barrido-sep { padding-inline: var(--reticula-margen); } }

.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espacio-3); margin-bottom: var(--espacio-5); flex-wrap: wrap; }
.etiqueta { color: var(--tinta-tecnica); }
.etiqueta + * { margin-top: var(--espacio-2); }
.parrafos > * + * { margin-top: var(--espacio-3); }
.mt-3 { margin-top: var(--espacio-3); }
.mt-4 { margin-top: var(--espacio-4); }
.mt-5 { margin-top: var(--espacio-5); }
.mt-6 { margin-top: var(--espacio-6); }
.medida { max-width: 40em; }

/* ---------- Símbolo ---------- */
.simbolo { display: block; height: 48px; width: auto; color: var(--tinta); }
[data-theme="firma"] .simbolo--metal { color: var(--plata-fria); }

/* ---------- Cabecera y navegación ---------- */
.cabecera { position: relative; z-index: 20; border-bottom: var(--trazo-fino) solid var(--linea); }
.cabecera__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4);
  max-width: 1440px; margin-inline: auto;
  padding: var(--espacio-3) var(--reticula-margen-movil);
  min-height: 72px;
}
@media (min-width: 768px) { .cabecera__barra { padding-inline: var(--espacio-5); } }
@media (min-width: 1024px) { .cabecera__barra { padding-inline: var(--reticula-margen); } }
.cabecera__simbolo { display: block; padding: 6px; margin: -6px; color: var(--tinta); }
.cabecera__simbolo .simbolo { height: 32px; }

.nav__lista { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-4); }
.nav__lista a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tinta-tecnica); text-decoration: none;
}
.nav__lista a:hover { color: var(--tinta); }
.nav__lista a[aria-current="page"] {
  color: var(--tinta); text-decoration: underline; text-decoration-thickness: var(--trazo-fino); text-underline-offset: 6px;
}
.nav__boton {
  display: none; min-height: 44px; min-width: 44px; padding: 0 var(--espacio-2);
  background: none; border: 0; color: var(--tinta);
}
@media (max-width: 767px) {
  .js .nav { display: none; }
  .js .nav__boton { display: inline-flex; align-items: center; margin-right: calc(var(--espacio-2) * -1); }
}

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--fondo); color: var(--tinta);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 200ms ease-out;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu.abierto { opacity: 1; }
.menu .cabecera__barra { width: 100%; max-width: none; margin: 0; border-bottom: var(--trazo-fino) solid var(--linea); }
.menu__lista { padding: var(--espacio-5) var(--reticula-margen-movil); display: grid; gap: var(--espacio-2); }
.menu__lista a {
  display: block; padding-block: var(--espacio-2);
  font-family: var(--font-sans-display); font-weight: 500; font-size: 40px; line-height: 1.1;
  color: var(--tinta); text-decoration: none;
}
[data-theme="firma"] .menu__lista a { font-family: var(--font-serif); font-weight: 400; }
.menu__lista a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--trazo-fino); text-underline-offset: 8px; }
.menu__pie { margin-top: auto; padding: var(--espacio-5) var(--reticula-margen-movil); color: var(--tinta-tecnica); }
.menu__pie a { color: inherit; }
html.menu-abierto { overflow: hidden; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--espacio-2) var(--espacio-4);
  border: var(--trazo-fino) solid var(--tinta); border-radius: var(--radio-0);
  background: transparent; color: var(--tinta);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.boton:hover, .boton:active { background: var(--tinta); color: var(--fondo); text-decoration: none; }
.boton[aria-disabled="true"], .boton:disabled {
  border-color: var(--linea); color: var(--tinta-tecnica); background: transparent; pointer-events: none;
}
.boton--negro { background: var(--obsidiana); border-color: var(--obsidiana); color: var(--hueso); }
.boton--negro:hover, .boton--negro:active { background: var(--hueso); border-color: var(--obsidiana); color: var(--obsidiana); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-5); }

/* ---------- Portada (hero) ---------- */
.portada { padding-top: var(--espacio-6); padding-bottom: var(--espacio-5); row-gap: var(--espacio-4); }
@media (min-width: 1024px) {
  .portada { padding-top: var(--espacio-7); }
  .portada > * { grid-column: 1 / span 9; }
  .portada .texto-grande { grid-column: 1 / span 7; }
}
.portada__pre { color: var(--tinta-tecnica); }

/* ---------- Portada de inicio con Dither (React Bits) ---------- */
.portada-dither { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; background: var(--fondo); }
.portada-dither > .portada-dither__fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-dither > .portada { position: relative; z-index: 1; padding-block: var(--espacio-7); }
.portada__titular { font-size: clamp(64px, 4.5vw + 32px, 96px); }
/* Titular que se revela en píxeles de tramado (revelar.js, 15 oct). Mientras corre, el texto real está
   transparente debajo del lienzo; si el JS no llega, se destapa solo a los 4 s. Con «reducir movimiento», nada. */
[data-revelar] { position: relative; }
.revelar__lienzo { position: absolute; pointer-events: none; max-width: none; max-height: none; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar]:not(.revelado) { color: transparent; animation: revelar-seguro 0s 4s forwards; }
}
@keyframes revelar-seguro { to { color: var(--tinta); } }
.sobre-fondo { background: var(--fondo); padding: 2px var(--espacio-2); margin-left: calc(var(--espacio-2) * -1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.portada-dither .portada__pre { color: var(--tinta); }
.portada-dither .sobre-fondo { display: inline-block; padding: var(--espacio-1) var(--espacio-2); }
/* Cédula de la portada (15 oct): en lugar de un rectángulo, cada renglón del párrafo lleva su franja de hueso,
   del ancho de sus caracteres; entre renglón y renglón se asoma el Dither. La franja sobresale 8 px a cada lado
   (el margen negativo deja el texto alineado a la retícula). */
.portada__cedula { margin-left: calc(var(--espacio-2) * -1); }
.renglones {
  background: var(--fondo); padding: 2px var(--espacio-2);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.portada__cedula .acciones { margin-left: var(--espacio-2); }
.portada-dither .boton:not(.boton--negro) { background: var(--fondo); }
.portada-dither .boton:not(.boton--negro):hover, .portada-dither .boton:not(.boton--negro):active { background: var(--tinta); color: var(--fondo); }
/* Etiqueta de arriba: píldora de hueso (13 oct). */
.portada-dither .sobre-fondo { border-radius: 999px; padding: 6px 14px; margin-left: -14px; }
@media (max-width: 767px) { .portada-dither .sobre-fondo { border-radius: 20px; padding: 6px 12px; margin-left: -12px; } }
@media (min-width: 1024px) { .portada-dither .portada__cedula { grid-column: 1 / span 7; } }

/* ---------- Las dos líneas (inicio) ---------- */
.lineas { row-gap: var(--espacio-4); }
@media (min-width: 1024px) { .lineas > * { grid-column: span 6; } }
.linea { display: grid; min-height: 100%; }
@media (min-width: 560px) { .linea { grid-template-columns: auto 1fr; } }
.linea--produccion { border: var(--trazo-fino) solid var(--linea); }
/* Esfera tramada (esfera.js, 15 oct): el lienzo ocupa toda la tarjeta, detrás del texto.
   Sin WebGL2 o sin JS no hay lienzo y la tarjeta queda en hueso liso. */
[data-esfera] { position: relative; overflow: hidden; isolation: isolate; }
/* Dónde va la esfera (15 oct): más chica y en una esquina, para no quedar detrás de las etiquetas chicas ni del
   enlace (sobre su gris quedaban en 3:1). Escritorio: abajo a la derecha. Teléfono: a media altura,
   asomando por la derecha (abajo las etiquetas ocupan todo el ancho y arriba choca con la etiqueta en 360 px). */
.linea--produccion { --esfera-x: 0.9; --esfera-y: 0.92; --esfera-tamano: 0.78; }
@media (max-width: 767px) { .linea--produccion { --esfera-x: 1; --esfera-y: 0.36; --esfera-tamano: 0.64; } }
[data-esfera] > .esfera__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
.lineas > .linea { margin-top: 0; } /* la regla .etiqueta + * bajaba solo la primera tarjeta 8 px */
.linea__foto { position: relative; width: 100%; height: 372px; overflow: hidden; display: flex; justify-content: center; }
@media (max-width: 559px) { .linea__foto { padding-top: var(--espacio-4); height: 396px; } }
@media (min-width: 560px) { .linea__foto { width: 300px; } }
/* Entre 1024 y 1299 px las tarjetas miden menos de 560 de ancho: imagen arriba y texto abajo, para que no se salga. */
@media (min-width: 1024px) and (max-width: 1299px) {
  .linea { grid-template-columns: minmax(0, 1fr); }
  .linea__foto { width: 100%; }
}
/* Secuencia de «Proyectos de autor»: cuatro cuadros apilados; se ve uno a la vez (data-paso 0–3). */
.secuencia { display: grid; width: 300px; height: 372px; flex: none; }
.secuencia > .secuencia__cuadro { grid-area: 1 / 1; width: 300px; height: 372px; opacity: 0; }
.secuencia > img.secuencia__cuadro { image-rendering: pixelated; }
.secuencia__foto img { display: block; width: 300px; height: 372px; object-fit: cover; }
/* Sin JavaScript, o antes de que cargue: la foto. */
.secuencia > .secuencia__foto { opacity: 1; }
.js .secuencia[data-paso] > .secuencia__foto { opacity: 0; }
.js .secuencia[data-paso="0"] > :nth-child(1),
.js .secuencia[data-paso="1"] > :nth-child(2),
.js .secuencia[data-paso="2"] > :nth-child(3),
.js .secuencia[data-paso="3"] > :nth-child(4) { opacity: 1; }
.linea__texto { padding: var(--espacio-4); display: flex; flex-direction: column; gap: var(--espacio-3); }
.linea__texto .px-ficha { margin-top: auto; }
.linea__texto .px-ficha a { color: inherit; }
.linea__texto .px-ficha a:hover { color: var(--tinta); }
.linea__nombre-firma { font-family: var(--font-serif); font-weight: 400; font-size: 48px; line-height: 1; }
.linea__nombre-prod { font-family: var(--font-sans-display); font-weight: 500; font-size: 40px; line-height: 1.05; }
.linea--produccion .linea__texto { padding: var(--espacio-4); }
.cifra { display: grid; gap: var(--espacio-1); }
.cifra__num { font-family: var(--font-sans-display); font-weight: 500; font-size: 56px; line-height: 1; }
.cifra__num--acento { color: var(--acento); }
.cifra__et { color: var(--tinta-tecnica); }

/* ---------- Tramado y fotos ---------- */
.tramado {
  width: 100%; height: 100%;
  object-fit: none;
  image-rendering: pixelated;
}
.marco-tramado { position: relative; width: 100%; overflow: hidden; }
.foto { display: grid; gap: var(--espacio-3); }
.foto__marco { position: relative; margin: var(--espacio-2); }
.foto__marco img, .foto__marco picture { width: 100%; height: auto; }
.js .foto__marco img.carga { opacity: 0; transition: opacity 200ms ease-out; }
.js .foto__marco img.carga.lista { opacity: 1; }
.foto-pendiente {
  position: relative; margin: var(--espacio-2);
  aspect-ratio: 4 / 5; width: calc(100% - var(--espacio-3));
  border: var(--trazo-fino) solid var(--linea);
  display: grid; place-items: center; text-align: center; padding: var(--espacio-4);
  color: var(--tinta-tecnica);
}
.foto-pendiente--ancha { aspect-ratio: 16 / 9; }

/* Pixelado que se resuelve (solo Firma): lo dibuja sitio.js sobre la foto. */
.px-resuelve { position: relative; }
.px-resuelve canvas.px-lienzo {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  image-rendering: pixelated;
}
.js .px-resuelve:not(.resuelta) img { opacity: 0; }

/* ---------- Índice de casos ---------- */
/* Listas de Inicio («Qué hacemos» y «Casos») con el corrimiento en x de «Line Sidebar» (linea-lateral.js):
   en escritorio según la cercanía del cursor, en móvil según la cercanía al centro de la pantalla al bajar. */
[data-linea-lateral] { --corrimiento: 20px; overflow-x: clip; }
@media (hover: hover) and (pointer: fine) { [data-linea-lateral] { --corrimiento: 30px; } }
/* Se recorre y se angosta lo mismo, para que lo alineado a la derecha no se salga. */
[data-linea-lateral] > li > a {
  transform: translateX(calc(var(--effect, 0) * var(--corrimiento)));
  width: calc(100% - var(--effect, 0) * var(--corrimiento));
}
@media (prefers-reduced-motion: reduce) { [data-linea-lateral] > li > a { transform: none; } }
/* Lista de Casos de Inicio (20 oct): al recorrerse el renglón, detrás aparece de izquierda a derecha una tira
   tramada con las fotos del caso (obsidiana con puntos hueso) y el texto pasa a hueso. El barrido empieza cuando
   el renglón va a un cuarto de su recorrido y termina antes de que el texto cambie de color. */
.indice[data-fondos] > li { position: relative; isolation: isolate;
  --revelar: clamp(0, calc((var(--effect, 0) - 0.25) / 0.3), 1);
  --a-hueso: clamp(0%, calc((var(--effect, 0) - 0.5) * 1000%), 100%);
  --activo: clamp(0, calc((var(--effect, 0) - 0.5) * 10), 1); }
/* 21 oct: tira en humo sobre hueso (una foto girada 90°, trama más fina); el texto sigue negro y sin halo. */
.indice[data-fondos] > li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hueso) var(--fondo-ancho) center / 1920px 150px no-repeat;
  clip-path: inset(0 calc((1 - var(--revelar)) * 100%) 0 0);
}
@media (max-width: 767px) { .indice[data-fondos] > li::before { background-image: var(--fondo-angosto); background-size: 800px 260px; } }
.indice { border-bottom: var(--trazo-fino) solid var(--linea); }
.indice__fila { border-top: var(--trazo-fino) solid var(--linea); }
.indice__fila a {
  display: grid; gap: var(--espacio-2) var(--reticula-medianil);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--espacio-4);
  color: var(--tinta); text-decoration: none;
}
.indice__num, .indice__linea { color: var(--tinta-tecnica); }
.indice__fila a:hover .indice__nombre { text-decoration: underline; text-decoration-thickness: var(--trazo-fino); text-underline-offset: 6px; }
.indice__que { color: var(--tinta); }
@media (min-width: 768px) {
  .indice__fila a { grid-template-columns: 1fr 3fr 3fr 1fr; align-items: baseline; }
  .indice__linea { text-align: right; }
}
@media (min-width: 1024px) {
  .indice__fila a { grid-template-columns: 1fr 4fr 5fr 2fr; }
}

/* ---------- Servicios ---------- */
.servicios-corta { border-bottom: var(--trazo-fino) solid var(--linea); }
@media (min-width: 768px) { .servicios-corta { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--reticula-medianil); } }
@media (min-width: 1024px) { .servicios-corta { grid-template-columns: repeat(3, 1fr); } }
.servicios-corta li { border-top: var(--trazo-fino) solid var(--linea); }
.servicios-corta__fila {
  display: flex; flex-direction: column; gap: var(--espacio-1);
  padding-block: var(--espacio-3) var(--espacio-4); min-height: 44px;
  color: var(--tinta); text-decoration: none;
}
.servicios-corta__nombre { font-family: var(--font-sans-display); font-weight: 500; font-size: 24px; line-height: 1.15; }
.servicios-corta__modo { color: var(--tinta-tecnica); }
.servicios-corta__fila:hover .servicios-corta__nombre { text-decoration: underline; text-decoration-thickness: var(--trazo-fino); text-underline-offset: 5px; }

.servicios { border-bottom: var(--trazo-fino) solid var(--linea); }
.servicio {
  display: grid; gap: var(--espacio-2) var(--reticula-medianil);
  border-top: var(--trazo-fino) solid var(--linea); padding-block: var(--espacio-4);
  scroll-margin-top: var(--espacio-4);
}
.servicio__modo { color: var(--tinta-tecnica); }
.servicio__nombre { font-family: var(--font-sans-display); font-weight: 500; font-size: 28px; line-height: 1.15; }
.servicio__casos .capa-tecnica { color: var(--tinta-tecnica); }
@media (min-width: 1024px) {
  .servicio { grid-template-columns: 2fr 4fr 4fr 2fr; align-items: baseline; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .servicio { grid-template-columns: 1fr 2fr; }
  .servicio__texto { grid-column: 2; }
  .servicio__casos { grid-column: 2; }
}

.preguntas { display: grid; gap: 0; border-top: var(--trazo-fino) solid var(--linea); }
.preguntas div { display: grid; gap: var(--espacio-2) var(--reticula-medianil); padding-block: var(--espacio-4); border-bottom: var(--trazo-fino) solid var(--linea); }
@media (min-width: 768px) { .preguntas div { grid-template-columns: 1fr 2fr; align-items: baseline; } }
.preguntas dt { font-family: var(--font-sans-display); font-weight: 500; font-size: 24px; line-height: 1.2; }

/* ---------- Método ---------- */
.metodo__cols { display: grid; gap: var(--espacio-5); border-top: var(--trazo-fino) solid var(--linea); padding-top: var(--espacio-4); }
@media (min-width: 768px) { .metodo__cols { grid-template-columns: 1fr 1fr; gap: var(--reticula-medianil); } }

/* ---------- Bloques de dos columnas ---------- */
@media (min-width: 1024px) {
  .col-izq { grid-column: 1 / span 5; }
  .col-der { grid-column: 7 / span 6; }
  .col-texto { grid-column: 1 / span 7; }
  .col-lateral { grid-column: 9 / span 4; }
  .col-foto { grid-column: 1 / span 6; }
  .col-junto-foto { grid-column: 8 / span 5; align-self: end; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .col-izq, .col-der, .col-texto, .col-lateral { grid-column: 1 / -1; }
}
.dos-cols { row-gap: var(--espacio-5); }

/* Listas técnicas: una entrada por línea, como en una cédula. */
.lista-tecnica { border-top: var(--trazo-fino) solid var(--linea); }
.lista-tecnica li { border-bottom: var(--trazo-fino) solid var(--linea); padding-block: var(--espacio-3); display: grid; gap: var(--espacio-1); }
@media (min-width: 768px) {
  .lista-tecnica--pares li { grid-template-columns: 1fr 2fr; gap: var(--reticula-medianil); align-items: baseline; }
}
.lista-tecnica .capa-tecnica { color: var(--tinta-tecnica); }

.pasos { counter-reset: paso; display: grid; gap: var(--espacio-4); }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(2, 1fr); gap: var(--espacio-5) var(--reticula-medianil); } }
@media (min-width: 1024px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos li { border-top: var(--trazo-fino) solid var(--linea); padding-top: var(--espacio-3); display: grid; gap: var(--espacio-2); align-content: start; }
.pasos li::before { counter-increment: paso; content: "Paso " counter(paso, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-tecnica); }
.pasos h3 { font-family: var(--font-sans-display); font-weight: 500; font-size: 24px; line-height: 1.15; }

.precio { display: grid; gap: var(--espacio-2); border: var(--trazo-fino) solid var(--linea); padding: var(--espacio-4); align-content: start; }

/* ---------- Firma ---------- */
.firma-portada { padding-top: var(--espacio-7); padding-bottom: var(--espacio-8); row-gap: var(--espacio-5); }
@media (min-width: 1024px) {
  .firma-portada > * { grid-column: 1 / span 10; }
  .firma-portada .parrafos { grid-column: 1 / span 7; }
}
.firma-portada .px-mixto { font-size: clamp(64px, 4.5vw + 32px, 96px); }
.cierre-camp { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 64px; line-height: 1; }
.destacado { padding-block: var(--espacio-8); row-gap: var(--espacio-5); }
.destacado__foto { width: 100%; max-width: 560px; }
.destacado__foto .marco-tramado { aspect-ratio: 560 / 720; }
.destacado__foto .tramado { object-position: 60% 25%; }

/* ---------- Caso ---------- */
.caso-portada { padding-top: var(--espacio-6); padding-bottom: var(--espacio-5); row-gap: var(--espacio-4); }
@media (min-width: 1024px) { .caso-portada > * { grid-column: 1 / span 9; } }
.migas { color: var(--tinta-tecnica); }
.migas a { color: inherit; }
.caso-cuerpo { row-gap: var(--espacio-6); padding-bottom: var(--espacio-7); }
.caso-ficha { display: grid; gap: 0; border-top: var(--trazo-fino) solid var(--linea); }
.caso-ficha div { display: grid; grid-template-columns: 1fr 2fr; gap: var(--espacio-3); padding-block: var(--espacio-2); border-bottom: var(--trazo-fino) solid var(--linea); }
.caso-ficha dt { color: var(--tinta-tecnica); }
.caso-ficha dd { font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.caso-nav { display: flex; justify-content: space-between; gap: var(--espacio-4); flex-wrap: wrap; border-top: var(--trazo-fino) solid var(--linea); padding-top: var(--espacio-4); }

/* ---------- Galería de caso ---------- */
.galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5) var(--reticula-medianil); align-items: start; }
@media (min-width: 768px) {
  .galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .galeria__item { grid-column: span 3; }
  .galeria--impar .galeria__item:nth-last-child(-n+3) { grid-column: span 2; }
}
.galeria__item { margin: 0; display: grid; gap: var(--espacio-3); }
.galeria[hidden] { display: none; }
/* Mosaico (masonry.js, solo escritorio): cada foto en la columna más baja, con su proporción real. */
.galeria--mosaico { display: block; position: relative; }
.galeria--mosaico .galeria__item { position: absolute; display: block; overflow: hidden; will-change: transform; }
.galeria--mosaico .galeria__item:hover { scale: 0.95; }
.galeria--mosaico .galeria__marco, .galeria--mosaico .galeria__marco picture { width: 100%; height: 100%; }
.galeria--mosaico .galeria__marco img { width: 100%; height: 100%; object-fit: cover; }
.galeria--mosaico figcaption {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Carrusel cóncavo (carrusel.js): muro WebGL sobre la cuadrícula, que queda como respaldo. */
.carrusel {
  position: relative; width: 100%; margin-top: var(--espacio-3);
  height: clamp(480px, 74vh, 640px);
  overflow: hidden; outline: none;
}
@media (min-width: 768px) { .carrusel { height: clamp(560px, 80vh, 860px); } }
.carrusel:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.carrusel__escenario {
  position: absolute; inset: 0; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.carrusel__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.carrusel__rotulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.carrusel__rotulo {
  position: absolute; left: 0; top: 0; flex-wrap: nowrap; white-space: nowrap;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.carrusel__controles {
  position: absolute; left: 0; right: 0; top: 82%;
  display: flex; justify-content: center; align-items: center; gap: var(--espacio-3);
  pointer-events: none; opacity: 0; transition: opacity 400ms ease;
}
.carrusel__controles--listos { opacity: 1; }
.carrusel__boton {
  min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 var(--espacio-2);
  border: 0; border-radius: var(--radio-0); pointer-events: auto; cursor: pointer;
  background: color-mix(in oklch, currentColor 10%, transparent); color: inherit;
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 160ms ease;
}
.carrusel__boton:hover { background: color-mix(in oklch, currentColor 17%, transparent); }
.carrusel__boton[hidden] { display: none; }
.carrusel__boton--texto { margin-left: var(--espacio-2); }
.carrusel__contador {
  min-width: 64px; text-align: center; font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--tinta-tecnica);
}
.carrusel__actual { color: var(--tinta); }
.galeria__marco { position: relative; }
.galeria__marco img { display: block; width: 100%; height: auto; }
.caso-ficha dd a { color: var(--enlace); }

/* ---------- Clips de video de un caso ---------- */
.clips__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-4) var(--espacio-3); }
@media (min-width: 768px) { .clips__rejilla { gap: var(--espacio-5) var(--reticula-medianil); } }
.clip { margin: 0; display: grid; gap: var(--espacio-3); align-content: start; }
.clip__marco { position: relative; aspect-ratio: 9 / 16; background: var(--obsidiana); }
.clip__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip__controles { position: absolute; left: var(--espacio-2); bottom: var(--espacio-2); display: flex; flex-wrap: wrap; gap: var(--espacio-1); }
.clip__boton {
  min-height: 32px; padding: var(--espacio-1) var(--espacio-2);
  border: 0; border-radius: var(--radio-0);
  background: var(--obsidiana); color: var(--hueso);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; font-synthesis: none;
}
.clip__boton[aria-pressed="true"] { background: var(--hueso); color: var(--obsidiana); }
@media (min-width: 1024px) { .caso-cuerpo--videos .col-junto-foto { align-self: start; } }
/* Libera Casa (15 oct): en escritorio, la cuadrícula de videos mide lo mismo de alto que la columna de la derecha
   (texto y ficha técnica). La columna de videos no aporta altura a la fila (contain: size); la fila la marca el
   texto, y los clips se ajustan a ese alto conservando su 9:16. */
@media (min-width: 1024px) {
  .caso-cuerpo--videos > .col-foto { align-self: stretch; contain: size; }
  .caso-cuerpo--videos .clips { height: 100%; display: flex; flex-direction: column; }
  .caso-cuerpo--videos .clips__rejilla { flex: 1; min-height: 0; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, minmax(0, 1fr)); justify-content: start; }
  .caso-cuerpo--videos .clip { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .caso-cuerpo--videos .clip__marco { height: 100%; width: auto; aspect-ratio: 9 / 16; min-height: 0; }
}
/* Identidad de marca (Boycot): logotipo e isotipo chicos y sin fondo, sobre el hueso de la página,
   y las combinaciones de color en una tira de tarjetas pequeñas. */
.identidad__marcas { margin: 0; }
.identidad__logos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-4); }
.identidad__logo { display: block; width: auto; height: 84px; }
@media (min-width: 768px) { .identidad__logos { column-gap: var(--espacio-6); } .identidad__logo { height: 120px; } }
.identidad__combinaciones { margin: var(--espacio-6) 0 0; }
.identidad__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-2); max-width: 360px; }
@media (min-width: 768px) { .identidad__rejilla { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--espacio-3); max-width: 1000px; } }
.identidad__rejilla img { display: block; width: 100%; height: auto; }
/* La paleta toma la forma de las tarjetas de Boycot Lab: mismas proporciones y esquinas. */
.identidad__paleta { display: flex; aspect-ratio: 845 / 374; border-radius: 8.6% / 19.4%; overflow: hidden; }
.identidad__paleta i { flex: 1; }

/* Un video junto a su texto (Boycot): el clip en un tercio, el texto al lado. */
.caso-video__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5) var(--reticula-medianil); align-items: end; }
@media (min-width: 768px) {
  .caso-video__fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .caso-video__clip { grid-column: span 2; }
  .caso-video__texto { grid-column: 4 / span 3; }
}
.clip__boton:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; box-shadow: 0 0 0 4px var(--obsidiana); }

/* ---------- Estudio ---------- */
.retrato { width: fit-content; max-width: 100%; }
/* Retrato de Estudio en secuencia: los tramados a escala entera, 300 x 375 o 600 x 750. */
.secuencia--retrato,
.secuencia--retrato > .secuencia__cuadro,
.secuencia--retrato .secuencia__cuadro img { width: 300px; height: 375px; }
.secuencia--retrato > .secuencia__cuadro,
.secuencia--retrato .secuencia__cuadro img { display: block; }
.secuencia--retrato .secuencia__cuadro:not(.secuencia__foto) img { image-rendering: pixelated; }
.secuencia--retrato .secuencia__foto img { object-fit: cover; }
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1152px) {
  .secuencia--retrato,
  .secuencia--retrato > .secuencia__cuadro,
  .secuencia--retrato .secuencia__cuadro img { width: 600px; height: 750px; }
}
@media (min-width: 1024px) { .col-foto--retrato, .col-foto--secuencia { grid-column: 1 / span 7; } }
/* Portadas de caso en secuencia inversa: la foto y luego los tramados, a escala entera (completa o a la mitad). */
.portada-tramada { width: fit-content; max-width: 100%; }
.secuencia--portada,
.secuencia--portada > .secuencia__cuadro,
.secuencia--portada .secuencia__cuadro img { width: var(--ancho-mitad); height: var(--alto-mitad); }
.secuencia--portada > .secuencia__cuadro,
.secuencia--portada .secuencia__cuadro img { display: block; }
.secuencia--portada .secuencia__cuadro:not(.secuencia__foto) img { image-rendering: pixelated; }
.secuencia--portada .secuencia__foto img { object-fit: cover; }
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1152px) {
  .secuencia--portada,
  .secuencia--portada > .secuencia__cuadro,
  .secuencia--portada .secuencia__cuadro img { width: var(--ancho); height: var(--alto); }
}
.prensa { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); }
/* «Trabajo publicado en» como cinta curva (curva.js). La lista de texto queda para lectores de pantalla. */
.curva { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.curva--lista { cursor: grab; }
.curva--arrastrando { cursor: grabbing; }
.curva--lista .prensa {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.curva__svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: var(--espacio-3); }
.curva__texto { font-family: var(--font-serif); font-size: 96px; font-weight: 400; fill: currentColor; }

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: var(--espacio-5); }
.campo { display: grid; gap: var(--espacio-2); }
.campo label, .campo legend { color: var(--tinta-tecnica); }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  width: 100%; border: 0; border-bottom: var(--trazo-fino) solid var(--linea); border-radius: var(--radio-0);
  background: transparent; padding: var(--espacio-2) 0;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--tinta);
}
.campo textarea { min-height: 160px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--tinta); margin-bottom: -1px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.campo [aria-invalid="true"] { border-bottom: 2px solid var(--tinta); margin-bottom: -1px; }
.campo__error { color: var(--tinta); }
.campo__error:empty { display: none; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: var(--espacio-2); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); }
.opciones label {
  display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: 44px;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--tinta);
  text-transform: none; letter-spacing: 0;
}
.opciones input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 16px; height: 16px; border: var(--trazo-fino) solid var(--tinta); border-radius: var(--radio-0);
  display: grid; place-content: center;
}
.opciones input[type="radio"]::before { content: ""; width: 8px; height: 8px; background: var(--tinta); transform: scale(0); transition: transform 150ms ease-out; }
.opciones input[type="radio"]:checked::before { transform: scale(1); }
/* Casillas (brief, 19 oct): mismo cuadro que las opciones de radio, con una palomita en vez del cuadro lleno. */
.opciones input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 16px; height: 16px; border: var(--trazo-fino) solid var(--tinta); border-radius: var(--radio-0);
  display: grid; place-content: center;
}
.opciones input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; background: var(--tinta);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0); transition: transform 150ms ease-out;
}
.opciones input[type="checkbox"]:checked::before { transform: scale(1); }
.opciones input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
/* Opciones en lista, una por renglón (Contacto y brief): las etiquetas largas no se amontonan en el teléfono. */
.opciones--lista { flex-direction: column; gap: 0; }
.opciones--lista label { align-items: flex-start; padding-block: 10px; min-height: 44px; }
.opciones--lista input { margin-top: 4px; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { color: var(--tinta-tecnica); }

/* ---------- Documento (aviso de privacidad) ---------- */
.documento { max-width: 44em; }
.documento h2 { font-family: var(--font-sans-display); font-weight: 500; font-size: 24px; line-height: 1.2; margin-top: var(--espacio-6); }
.documento p, .documento ul { margin-top: var(--espacio-3); }
.documento ul { list-style: none; }
.documento li { padding-left: var(--espacio-4); position: relative; }
.documento li + li { margin-top: var(--espacio-2); }
.documento li::before { content: "·"; position: absolute; left: var(--espacio-2); }

/* ---------- Pie ---------- */
.pie { margin-top: auto; padding-top: var(--espacio-7); }
.pie__interior { padding-block: var(--espacio-5) var(--espacio-6); row-gap: var(--espacio-5); align-items: end; }
.px-descriptor .simbolo { height: 48px; width: auto; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-4); }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-tecnica); }
.pie__enlaces a:hover { color: var(--tinta); }
.pie__legal { color: var(--tinta-tecnica); }
@media (min-width: 1024px) {
  .pie__descriptor { grid-column: 1 / span 5; }
  .pie__enlaces { grid-column: 6 / span 5; }
  .pie__legal { grid-column: 11 / span 2; text-align: right; }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* ---------- Brief en línea (/brief/, 19 oct) ---------- */
.brief { gap: 0; }
.brief > .miel + .brief-avance, .brief > .brief-avance { margin-bottom: var(--espacio-4); }
.brief-seccion { border-top: var(--trazo-fino) solid var(--linea); }
.brief-seccion:last-of-type { border-bottom: var(--trazo-fino) solid var(--linea); }
.brief-seccion[hidden] { display: none; }
.brief-seccion__titulo {
  display: flex; align-items: baseline; gap: var(--espacio-3); min-height: 56px; padding-block: var(--espacio-3);
  list-style: none; cursor: pointer;
}
.brief-seccion__titulo::-webkit-details-marker { display: none; }
.brief-seccion__titulo::after { content: "+"; margin-left: auto; font-family: var(--font-mono, monospace); font-size: 20px; line-height: 1; }
.brief-seccion[open] > .brief-seccion__titulo::after { content: "–"; }
.brief-seccion__titulo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.brief-seccion__nombre { font-family: var(--font-sans-display); font-weight: 500; font-size: 24px; line-height: 1.2; }
@media (min-width: 768px) { .brief-seccion__nombre { font-size: 32px; } }
.brief-seccion__cuerpo { display: grid; gap: var(--espacio-5); padding: var(--espacio-2) 0 var(--espacio-5); }
.brief-seccion__pie { margin: 0; }
.brief .campo textarea { min-height: 96px; }
.brief-num { display: inline-block; min-width: 1.5em; color: var(--tinta); }
.brief-subtitulo { margin: var(--espacio-2) 0 calc(var(--espacio-3) * -1); color: var(--tinta); }
.brief-nota { margin-top: var(--espacio-2); padding: var(--espacio-3); border: var(--trazo-fino) solid var(--linea); }
.brief-sinjs { margin-top: var(--espacio-2); }
.brief .aviso-form { margin-top: var(--espacio-5); }
.brief > p:last-child { margin-top: var(--espacio-4); }
@keyframes brief-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.brief-seccion--nueva { animation: brief-entra 320ms ease-out; }
/* Avance: pegado abajo en el teléfono, arriba del formulario en pantallas grandes. */
.brief-avance { position: sticky; z-index: 5; bottom: 0; background: var(--fondo); padding: var(--espacio-2) 0; display: grid; gap: var(--espacio-1); order: 99; }
.brief-avance[hidden] { display: none; }
.brief-avance__barra { height: 4px; background: var(--linea); }
.brief-avance__barra > span { display: block; height: 100%; width: 0; background: var(--tinta); transition: width 200ms ease-out; }
@media (max-width: 767px) {
  .brief { display: flex; flex-direction: column; }
  .brief-avance { border-top: var(--trazo-fino) solid var(--linea); margin-inline: calc(var(--reticula-margen-movil) * -1); padding-inline: var(--reticula-margen-movil); margin-bottom: 0; }
}
@media (min-width: 768px) { .brief-avance { top: 0; bottom: auto; } }
/* Preguntas del brief en letra de texto: en mayúsculas monoespaciadas se leían mal al ser largas. */
.campo--pregunta > label { font-family: var(--font-sans); font-size: 16px; line-height: 24px; text-transform: none; letter-spacing: 0; color: var(--tinta); display: flex; gap: var(--espacio-2); }
.campo--pregunta .brief-num { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--tinta-tecnica); min-width: 1.4em; padding-top: 2px; }


/* ---------- Consola de «Qué hacemos» (Inicio) · versión 3, 22 oct ----------
   Banda de noche (registro Firma) a todo lo ancho. El escenario queda fijo una pantalla mientras el scroll cambia de
   canal (seis). Escritorio: a la izquierda el número del canal como sello (Fayte Pixel), el nombre en la serif, la
   descripción de venta y su ficha; a la derecha la consola como foto, con guías de recorte, ficha al pie y un cuadro de
   selección que salta a la tecla activa; abajo, los seis canales como índice (también son la barra de avance).
   Celular y tableta: la consola vertical a sangre arriba y, debajo, número, nombre, texto corto, canales y botón.
   El tablero es una imagen por tecla (no video: Safari con bajo consumo no carga videos); la pantalla, un video por
   servicio con póster. Sin JS se ve la lista de servicios de siempre. */
html:not(.js) .consola { display: none; }
.js .consola-lista { display: none; }
.banda-consola { background: var(--fondo); color: var(--tinta); }
.consola-seccion { padding-bottom: 0; }
.consola { grid-column: 1 / -1; position: relative; }
.consola__escenario { display: grid; }
.consola__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3);
  border-bottom: var(--trazo-fino) solid var(--linea); padding-bottom: var(--espacio-2); }
.consola__titulo, .consola__contador { margin: 0; color: var(--tinta-tecnica); }
.consola__titulo { color: var(--tinta); }
.consola__info p { margin: 0; }
.consola__numero { font-size: clamp(88px, min(13vw, 19vh), 200px); line-height: 0.82; color: var(--tinta); letter-spacing: 0.02em; }
.consola__nombre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, min(5.4vw, 9vh), 88px); line-height: 0.95; color: var(--tinta); }
.consola__nombre em { font-style: italic; }
.consola__resuelve { color: var(--tinta); max-width: 34rem; }
.consola__para { color: var(--tinta-tecnica); max-width: 34rem; }
.consola__enlace-p { margin-top: var(--espacio-2) !important; }
.consola__enlace { color: var(--tinta); font-size: 18px; }
.consola__enlace::after { content: " →"; }
.consola__contador { display: flex; gap: var(--espacio-4); align-items: baseline; }
.consola__saltar { color: var(--tinta-tecnica); text-decoration: none; }
.consola__saltar:hover, .consola__saltar:focus-visible { color: var(--tinta); text-decoration: underline; }
.consola__cuadro { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.consola__servicio.activo:not(.listo) { visibility: hidden; }
.consola__ficha { color: var(--tinta-tecnica); }
.consola__acciones { margin: 0; }
.consola__acciones .boton { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.consola__acciones .boton:hover, .consola__acciones .boton:active { background: var(--fondo); color: var(--tinta); }
.consola__cambia { animation: consola-cambia 360ms cubic-bezier(.2, .7, .2, 1); }
@keyframes consola-cambia { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* La consola como foto: rectángulo limpio, guías de recorte fuera y ficha al pie. */
.consola__objeto { margin: 0; position: relative; justify-self: center; align-self: center; }
.consola__tablero { position: relative; container-type: inline-size; overflow: hidden; background: var(--obsidiana);
  aspect-ratio: 1982 / 1330; width: 100%; }
/* El fondo de la foto ya es obsidiana; este borde desvanecido borra las pequeñas diferencias de tono contra la banda. */
.consola__tablero::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 3cqw 2.5cqw var(--obsidiana); }
.consola__recorte { inset: -12px -12px auto -12px; height: calc(100% - var(--pie-alto, 0px) + 24px); }
.consola__pie-foto { margin-top: var(--espacio-3); color: var(--tinta-tecnica); display: flex; flex-wrap: wrap; }
.consola__pie-foto [data-pie-canal] { color: var(--tinta); }
/* Canales: índice de seis, también barra de avance (la línea de arriba se llena con el scroll del canal activo). */
.consola__canales ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--reticula-medianil, 24px); }
.consola__canal-btn { position: relative; display: flex; gap: var(--espacio-2); align-items: baseline; width: 100%; min-height: 44px;
  padding: var(--espacio-3) 0 0; background: none; border: 0; border-top: var(--trazo-fino) solid var(--linea); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinta-tecnica); text-align: left; }
.consola__canal-num { color: var(--tinta-tecnica); }
.consola__canal-btn:hover .consola__canal-nombre, .consola__canal-btn[aria-current="true"] .consola__canal-nombre { color: var(--tinta); }
.consola__canal-btn[aria-current="true"] .consola__canal-num { background: var(--acento); color: var(--sobre-acento, var(--hueso)); padding: 0 4px; margin-left: -4px; }
.consola__canal-avance { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--tinta);
  transform-origin: left; transform: scaleX(0); }
.consola__canal-btn[aria-current="true"] .consola__canal-avance { transform: scaleX(var(--u, 0)); }
.consola__canal-btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.consola__desliza { margin: 0; color: var(--tinta-tecnica); }
.consola__desliza[hidden] { visibility: hidden; display: block; }

/* Escritorio: retícula de 12 columnas dentro del escenario. */
@media (min-width: 1024px) {
  .consola__escenario { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--reticula-medianil, 24px);
    grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: var(--espacio-4);
    padding-block: var(--espacio-5) var(--espacio-4); box-sizing: border-box; }
  .consola__cabeza { grid-column: 1 / -1; grid-row: 1; }
  .consola__info { grid-column: 1 / 6; grid-row: 2; align-self: center; display: grid; gap: var(--espacio-3); }
  .consola__nombre { margin-top: var(--espacio-2) !important; }
  .consola__acciones { grid-column: 1 / 6; grid-row: 3; align-self: end; }
  .consola__objeto { grid-column: 6 / -1; grid-row: 2 / 4; --pie-alto: 40px;
    width: min(100%, (100svh - 300px) * 1982 / 1330); }
  .consola__canales { grid-column: 1 / -1; grid-row: 4; }
}
@media (min-width: 1024px) and (max-height: 760px) { .consola__resuelve { font-size: 16px; line-height: 24px; } }

/* Celular y tableta: consola vertical a sangre arriba; abajo la información compacta. */
@media (max-width: 1023px) {
  .consola-seccion { padding-top: var(--espacio-5); }
  .consola__escenario { grid-template-columns: minmax(0, 1fr) auto; align-content: start; row-gap: var(--espacio-3);
    margin-inline: calc(var(--reticula-margen-movil) * -1); }
  .consola__cabeza { grid-column: 1 / -1; padding-inline: var(--reticula-margen-movil); border-bottom: 0; padding-bottom: 0; }
  .consola__cabeza { grid-row: 1; padding-top: var(--espacio-3); }
  .consola__objeto { grid-column: 1 / -1; grid-row: 2; width: min(100vw, (100svh - 200px) * 1322 / 2015); }
  .consola__canales { grid-row: 3; }
  .consola__info { grid-row: 4; }
  .consola__acciones { grid-row: 5; padding-bottom: var(--espacio-5); }
  .consola__tablero { aspect-ratio: 1322 / 2015; }
  .consola__recorte, .consola__pie-foto { display: none; }
  .consola__info { grid-column: 1 / -1; padding-inline: var(--reticula-margen-movil); display: grid;
    grid-template-columns: auto minmax(0, 1fr); column-gap: var(--espacio-3); align-items: end; }
  .consola__numero { font-size: 64px; grid-row: 1 / 3; }
  .consola__nombre { font-size: clamp(32px, 9vw, 44px); }
  .consola__resuelve { grid-column: 1 / -1; margin-top: var(--espacio-3) !important; }
  .consola__para { grid-column: 1 / -1; margin-top: var(--espacio-2) !important; }
  .consola__enlace-p { grid-column: 1 / -1; }
  .consola__ficha { grid-column: 1 / -1; margin-top: var(--espacio-1) !important; }
  .consola__canales { grid-column: 1 / -1; padding-inline: var(--reticula-margen-movil); }
  .consola__canales ol { gap: 6px; }
  .consola__canal-btn { justify-content: center; padding-top: var(--espacio-2); }
  .consola__canal-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consola__acciones { grid-column: 1 / -1; padding-inline: var(--reticula-margen-movil); }
}
@media (min-width: 600px) and (max-width: 1023px) { .consola__objeto { justify-self: center; } }

/* Tablero: imágenes por tecla y etiquetas grabadas (Departure Mono en humo, en coordenadas de la imagen). */
.consola__estados { position: absolute; inset: 0; }
.consola__estado { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.consola__estado.activo { opacity: 1; }
.consola__estados--vertical { display: none; }
@media (max-width: 1023px) { .consola__estados--horizontal { display: none; } .consola__estados--vertical { display: block; } }
.consola__grabado { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.consola__grabado text { font-family: var(--font-mono); font-size: var(--letra); letter-spacing: 0.08em; fill: var(--plata-fria); }
.consola__grabado--vertical { display: none; }
@media (max-width: 1023px) { .consola__grabado--horizontal { display: none; } .consola__grabado--vertical { display: block; } }
/* Pantalla: sobre el cristal, con sus esquinas; reflejo del vidrio encima; estática al cambiar de canal. */
.consola__pantalla { position: absolute; left: var(--hx); top: var(--hy); width: var(--hw); height: var(--hh);
  border-radius: 7% / 9%; overflow: hidden; background: var(--obsidiana); container-type: inline-size; }
.consola__pantalla::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: url("/img/consola-reflejo-horizontal.jpg?v=2281a6b8") center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: 0.55; }
@media (max-width: 1023px) {
  .consola__pantalla { left: var(--vx); top: var(--vy); width: var(--vw); height: var(--vh); border-radius: 7% / 9%; }
  .consola__pantalla::after { background-image: url("/img/consola-reflejo-vertical.jpg?v=f6f7c3f5"); }
}
.consola__servicio { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; visibility: hidden; }
.consola__servicio.activo { visibility: visible; }
.consola__estatica { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; image-rendering: pixelated; opacity: 0; pointer-events: none; }
.consola__osd { position: absolute; inset: 0; z-index: 3; padding: 5cqw; pointer-events: none; font-family: var(--font-mono); color: var(--hueso); letter-spacing: 0.06em; }
.consola__osd p { margin: 0; display: inline-block; background: rgba(14, 12, 11, 0.55); padding: 0.35em 0.6em; }
.consola__canal { font-size: max(9px, 4cqw); text-transform: uppercase; }
@media (max-width: 1023px) { .consola__osd { padding: 4cqw; } .consola__canal { font-size: max(8px, 3.4cqw); } }
/* Encendido: la primera vez que la consola entra en pantalla, la imagen se abre desde una línea, como un CRT. */
.consola__cortina { position: absolute; inset: 0; z-index: 5; background: var(--obsidiana); pointer-events: none; opacity: 0; }
.consola--encender .consola__cortina { animation: consola-crt 700ms steps(14) both; }
@keyframes consola-crt {
  0% { opacity: 1; clip-path: inset(0 0 0 0); background: var(--obsidiana); }
  30% { opacity: 1; clip-path: inset(0 0 0 0); background: var(--obsidiana); }
  45% { opacity: 1; clip-path: inset(49% 0 49% 0); background: var(--hueso); }
  100% { opacity: 1; clip-path: inset(50% 0 50% 0); background: var(--hueso); }
}
/* Cuadro de selección sobre la tecla activa (marca de interfaz), con su etiqueta; salta de tecla en tecla. */
.consola__seleccion { --px-marca: var(--obsidiana); z-index: 5; left: var(--sx, 0); top: var(--sy, 0); width: var(--sw, 0); height: var(--sh, 0);
  transition: left 380ms cubic-bezier(.2, .7, .2, 1), top 380ms cubic-bezier(.2, .7, .2, 1), width 380ms cubic-bezier(.2, .7, .2, 1), height 380ms cubic-bezier(.2, .7, .2, 1); }
.consola__seleccion .px-etiqueta { background: var(--granate); color: var(--hueso); padding: 0 4px; font-size: max(9px, 1cqw); }
/* En escritorio la etiqueta va a la izquierda de la tecla, para no tapar el nombre grabado de la de arriba. */
@media (min-width: 1024px) {
  .consola__seleccion .px-etiqueta { left: auto; right: 100%; bottom: auto; top: -1px; margin: 0 6px 0 0; }
  .consola__seleccion--der .px-etiqueta { right: auto; left: 100%; margin: 0 0 0 6px; }
}
/* Teclas: botones invisibles del tamaño de cada tecla (mínimo 44 × 44 px), con anillo de foco. */
.consola__teclas { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.consola__tecla { position: absolute; left: var(--hx); top: var(--hy); width: var(--hw); height: var(--hh);
  min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; border-radius: 6px; }
@media (max-width: 1023px) { .consola__tecla { left: var(--vx); top: var(--vy); width: var(--vw); height: var(--vh); } }
.consola__tecla:focus-visible { outline: 3px solid var(--obsidiana); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .consola__cambia, .consola--encender .consola__cortina { animation: none; }
  .consola__seleccion { transition: none; }
}

/* 21 oct · Selector de idioma (EN / ES) en la cabecera y en el menú del teléfono. */
.idioma { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--tinta-tecnica); text-decoration: none; }
.idioma:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 6px; }
.cabecera__barra > .nav { margin-left: auto; }
.cabecera__barra > .idioma { margin-left: calc(var(--espacio-4) * -1 + var(--espacio-2)); border-left: var(--trazo-fino) solid var(--linea); padding-left: var(--espacio-2); min-height: 24px; }
@media (max-width: 767px) { .js .cabecera__barra > .idioma { margin-left: auto; border-left: 0; } }
.menu__pie .idioma { margin-left: var(--espacio-3); }

/* 21 oct · «En resumen» al inicio del texto de cada caso (auditoría SEO/AEO): los hechos en una frase. */
.caso-resumen { margin: 0 0 var(--espacio-4); padding-left: var(--espacio-3); border-left: 2px solid var(--acento); }
.caso-resumen .etiqueta { color: var(--tinta-tecnica); }

/* ---------- Fotografía de moda (21 oct) · registro Firma, página de servicio ----------
   Portada con titular mixto, hoja de datos y collage de tres fotos que se resuelven del píxel; ficha técnica;
   calendario por semanas como diagrama (las barras se dibujan al entrar en pantalla, solo con CSS); casos. */
.boton--claro { background: var(--hueso); border-color: var(--hueso); color: var(--obsidiana); }
.boton--claro:hover, .boton--claro:active { background: transparent; color: var(--hueso); }
.moda-portada { padding-block: var(--espacio-6) var(--espacio-7); row-gap: var(--espacio-6); align-items: center; }
.moda-portada__texto { display: grid; gap: var(--espacio-4); grid-column: 1 / -1; }
.moda-portada__titular { font-size: clamp(56px, 4.6vw + 24px, 104px); line-height: 0.95; margin: 0; }
.moda-portada .texto-grande { max-width: 34rem; margin: 0; }
.moda-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--espacio-2) 0 0; border-top: var(--trazo-fino) solid var(--linea); }
.moda-datos div { padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) 0; border-bottom: var(--trazo-fino) solid var(--linea); }
.moda-datos dt { color: var(--tinta-tecnica); }
.moda-datos dd { margin: var(--espacio-1) 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.moda-datos__cifra { font-family: var(--font-serif); font-size: clamp(36px, 3vw + 12px, 56px); line-height: 1; color: var(--tinta); }
.moda-datos .capa-tecnica { color: var(--tinta-tecnica); }
.moda-datos div:nth-child(odd) { border-right: var(--trazo-fino) solid var(--linea); }
.moda-datos div:nth-child(even) { padding-left: var(--espacio-4); }
/* Collage: tres fotos desfasadas, como hojas sobre la mesa de luz. */
.moda-collage { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); column-gap: 12px; aspect-ratio: 1 / 1.12; }
.moda-collage__foto { margin: 0; position: relative; }
.moda-collage__foto .galeria__marco, .moda-collage__foto picture, .moda-collage__foto img { display: block; width: 100%; height: 100%; }
.moda-collage__foto img { object-fit: cover; }
.moda-collage__foto .galeria__marco { height: calc(100% - 28px); }
.moda-collage__foto .px-ficha { margin-top: 8px; color: var(--tinta-tecnica); }
.moda-collage__foto--a { grid-column: 1 / 8; grid-row: 1 / 10; z-index: 1; }
.moda-collage__foto--b { grid-column: 8 / 13; grid-row: 1 / 7; z-index: 1; }
.moda-collage__foto--c { grid-column: 5 / 11; grid-row: 8 / 13; z-index: 2; }
/* La foto de enfrente se separa de la de atrás con un filo del color del fondo (no es sombra). */
.moda-collage__foto--c .galeria__marco { outline: 10px solid var(--fondo); }
@media (min-width: 1024px) {
  .moda-portada__texto { grid-column: 1 / 7; }
  .moda-collage { grid-column: 7 / -1; }
}
.moda-h2 { margin: 0; font-size: clamp(44px, 3vw + 24px, 72px); line-height: 1; }
.moda-para { margin: 0; }
.moda-para a { color: inherit; }
/* Calendario (diagrama de Gantt): ocho semanas; cada fase, una barra; la del set en granate (el acento). */
.moda-gantt-intro { grid-column: 1 / -1; max-width: 46rem; margin: var(--espacio-3) 0 var(--espacio-5); }
.gantt { grid-column: 1 / -1; --col-fase: minmax(0, 1fr); }
.gantt__cabeza, .gantt__fila { display: grid; grid-template-columns: 1fr; gap: var(--espacio-2) var(--reticula-medianil); }
.gantt__semanas, .gantt__pista { display: grid; grid-template-columns: repeat(var(--semanas, 8), minmax(0, 1fr)); }
.gantt__semana { color: var(--tinta-tecnica); padding-bottom: var(--espacio-2); border-left: var(--trazo-fino) solid var(--linea); padding-left: 6px; }
.gantt__cabeza { display: none; }
.gantt__filas { list-style: none; margin: 0; padding: 0; border-top: var(--trazo-fino) solid var(--linea); }
.gantt__fila { padding-block: var(--espacio-4); border-bottom: var(--trazo-fino) solid var(--linea); }
.gantt__fase { margin: 0; color: var(--tinta); }
.gantt__fase span { color: var(--tinta-tecnica); margin-right: 6px; }
.gantt__cuando { margin: 0; color: var(--tinta-tecnica); }
.gantt__pista { height: 14px; background: repeating-linear-gradient(to right, transparent 0 calc(100% / var(--semanas, 8) - 1px), var(--linea) calc(100% / var(--semanas, 8) - 1px) calc(100% / var(--semanas, 8))); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 50%; }
.gantt__barra { grid-column: var(--de) / var(--a); background: var(--tinta); height: 100%; transform-origin: left; }
.gantt__fila--set .gantt__barra { background: var(--acento); outline: var(--trazo-fino) solid var(--tinta); outline-offset: 2px; }
.gantt__quien { margin: 0; display: grid; gap: var(--espacio-2); }
.gantt__quien div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--espacio-2); align-items: baseline; }
.gantt__quien dt { color: var(--tinta-tecnica); }
.gantt__quien dd { margin: 0; }
@media (min-width: 1024px) {
  .gantt__cabeza { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 4fr); }
  .gantt__cabeza > span { grid-column: 1; }
  .gantt__semanas { grid-column: 2; }
  .gantt__fila { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 4fr); align-items: start; }
  .gantt__fase { grid-column: 1; grid-row: 1; }
  .gantt__cuando { grid-column: 1; grid-row: 2; }
  .gantt__pista { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 18px; }
  .gantt__quien { grid-column: 3; grid-row: 1 / span 2; }
}
/* Las barras se dibujan de izquierda a derecha al entrar en pantalla (donde el navegador lo permite). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gantt__barra { animation: gantt-dibuja linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  }
}
@keyframes gantt-dibuja { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Casos publicados */
.moda-casos { grid-column: 1 / -1; list-style: none; margin: var(--espacio-4) 0 0; padding: 0; display: grid; gap: var(--espacio-5) var(--reticula-medianil); }
@media (min-width: 768px) { .moda-casos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.moda-caso a { color: inherit; text-decoration: none; display: grid; gap: var(--espacio-2); }
.moda-caso__foto { aspect-ratio: 4 / 5; overflow: hidden; background: #1b1918; }
.moda-caso__foto picture, .moda-caso__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.moda-caso a:hover img { transform: scale(1.03); }
.moda-caso__num { color: var(--tinta-tecnica); margin: var(--espacio-2) 0 0; }
.moda-caso .nombre-caso { margin: 0; }
.moda-caso .texto { margin: 0; color: var(--tinta-tecnica); }
@media (prefers-reduced-motion: reduce) { .moda-caso a:hover img { transform: none; } }

/* ---------- Páginas de servicio (21 oct): Video con IA, Branding y Sitios web ----------
   Misma plantilla que Fotografía de moda; cada una con su registro y su pieza visual:
   Video en Producción (hueso y azul): tira de tres clips desfasados y la cifra 160 / 45.
   Branding en Firma clara (hueso y granate): lámina de identidad de Boycot y la identidad aplicada.
   Sitios web en Firma (noche y granate): la computadora en llamas y el esquema de este sitio. */
.consola__enlace { color: var(--tinta); }
.consola__pantalla-enlace { position: absolute; inset: 0; z-index: 5; display: block; text-decoration: none; }
.consola__ver { position: absolute; right: 5cqw; bottom: 5cqw; font-family: var(--font-mono); font-size: max(9px, 3.6cqw);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hueso); background: var(--granate); padding: 0.35em 0.6em;
  opacity: 0; transition: opacity 200ms; }
.consola__pantalla-enlace:hover .consola__ver { opacity: 1; }
@media (hover: none) { .consola__ver { opacity: 1; } }
@media (max-width: 1023px) { .consola__acciones { flex-wrap: wrap; row-gap: var(--espacio-2); } }

/* Producción: titular en la grotesca, con «IA» en la pixel; cifras en la grotesca. */
.servicio-titular--prod { margin: 0; font-family: var(--font-sans-display); font-weight: 500; font-size: clamp(52px, 4.4vw + 20px, 104px);
  line-height: 0.92; letter-spacing: -0.02em; color: var(--tinta); }
.servicio-titular--prod .px-pixel { font-family: var(--font-sello); font-weight: 400; letter-spacing: 0; color: var(--acento); }
[data-theme="produccion"] .moda-datos__cifra { font-family: var(--font-sans-display); font-weight: 500; letter-spacing: -0.02em; }
.moda-h2--prod { font-size: clamp(36px, 2.4vw + 20px, 60px); line-height: 1; letter-spacing: -0.01em; }
.moda-h2--prod em { font-style: normal; }
.servicio-cierre__titular { font-size: clamp(44px, 3.4vw + 20px, 80px); line-height: 1; letter-spacing: -0.02em; margin: 0; }

/* Video: tres clips verticales desfasados, como una tira de contactos. */
.video-tira { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; padding-bottom: 72px; }
.video-tira__clip--2 { margin-top: 36px; }
.video-tira__clip--3 { margin-top: 72px; }
.video-tira .clip { gap: var(--espacio-2); }
.video-tira .px-ficha { color: var(--tinta-tecnica); }
@media (min-width: 1024px) { .video-tira { grid-column: 7 / -1; gap: 16px; } .video-tira__clip--2 { margin-top: 56px; } .video-tira__clip--3 { margin-top: 112px; } .video-tira { padding-bottom: 112px; } }

.video-volumen { row-gap: var(--espacio-6); align-items: start; }
.video-volumen__cifra { grid-column: 1 / -1; }
.video-volumen__num { margin: 0; display: flex; align-items: baseline; gap: var(--espacio-3); font-family: var(--font-sans-display); font-weight: 500;
  font-size: clamp(120px, 15vw, 248px); line-height: 0.84; letter-spacing: -0.045em; color: var(--tinta); }
.video-volumen__num .capa-tecnica { font-size: 14px; letter-spacing: 0.06em; color: var(--tinta-tecnica); }
.video-volumen__num--b { color: var(--acento); }
.video-volumen__cifra .etiqueta { margin-bottom: var(--espacio-4); }
.video-volumen__texto { grid-column: 1 / -1; }
.video-volumen__marca { background: var(--acento); color: var(--sobre-acento); padding: 0 0.12em; }
.video-principios { list-style: none; margin: 0; padding: 0; border-top: var(--trazo-fino) solid var(--linea); }
.video-principios li { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: var(--espacio-3); padding-block: var(--espacio-3);
  border-bottom: var(--trazo-fino) solid var(--linea); align-items: baseline; }
.video-principios .capa-tecnica { color: var(--tinta-tecnica); }
.video-principios p { margin: 0; }
.video-principios strong { font-weight: 500; }
@media (min-width: 1024px) {
  .video-volumen__cifra { grid-column: 1 / 7; }
  .video-volumen__texto { grid-column: 7 / -1; padding-top: var(--espacio-7); }
}

/* Branding: lámina de identidad (foto de campaña, logotipo, isotipo y paleta con sus códigos). */
.marca-lamina { grid-column: 1 / -1; margin: 0; display: grid; gap: var(--espacio-2); }
.marca-lamina__tablero { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; aspect-ratio: 1 / 1; }
.marca-lamina__foto { grid-column: 1 / 4; grid-row: 1 / 4; overflow: hidden; background: #0f0f0f; }
.marca-lamina__foto picture, .marca-lamina__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.marca-lamina__logo { grid-column: 4 / 7; grid-row: 1 / 2; background: #f5f5f5; display: grid; place-items: center; padding: 0 12%;
  outline: var(--trazo-fino) solid var(--linea); outline-offset: -1px; }
.marca-lamina__logo img, .marca-lamina__iso img { display: block; height: auto; }
.marca-lamina__logo img { width: 100%; }
.marca-lamina__iso { grid-column: 4 / 7; grid-row: 2 / 4; background: #0000ff; display: grid; place-items: center; }
.marca-lamina__iso img { width: 38%; filter: invert(0.96); }
.marca-lamina__paleta { grid-column: 1 / -1; grid-row: 4 / 5; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.marca-lamina__paleta li { background: var(--c); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 10px; color: #f5f5f5; }
.marca-lamina__paleta li:nth-child(n+3) { color: #0f0f0f; }
.marca-lamina__paleta li:nth-child(3) { outline: var(--trazo-fino) solid var(--linea); outline-offset: -1px; }
.marca-lamina__paleta .capa-tecnica { font-size: 10px; line-height: 14px; }
.marca-lamina .px-ficha { color: var(--tinta-tecnica); }
@media (min-width: 1024px) { .marca-lamina { grid-column: 7 / -1; } .marca-lamina__paleta .capa-tecnica { font-size: 11px; } }
.marca-aplicada__rejilla { grid-column: 1 / -1; display: grid; gap: var(--espacio-5) var(--reticula-medianil); align-items: start; }
.marca-aplicada__foto { margin: 0; display: grid; gap: var(--espacio-2); }
.marca-aplicada__foto .galeria__marco { aspect-ratio: 3 / 4; overflow: hidden; }
.marca-aplicada__foto picture, .marca-aplicada__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.marca-aplicada__foto .px-ficha { color: var(--tinta-tecnica); }
@media (min-width: 768px) { .marca-aplicada__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marca-aplicada__foto:nth-child(2) { margin-top: var(--espacio-7); } }

/* Sitios web: la computadora en llamas, con guías de recorte; y el esquema de este sitio. */
.web-pantalla { grid-column: 1 / -1; margin: 0; display: grid; gap: var(--espacio-4); padding: var(--espacio-2); }
.web-pantalla__marco { position: relative; aspect-ratio: 640 / 500; background: var(--obsidiana); }
.web-pantalla__marco video { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.web-pantalla .px-ficha { color: var(--tinta-tecnica); }
@media (min-width: 1024px) { .web-pantalla { grid-column: 7 / -1; } }
.web-anatomia__figura { grid-column: 1 / -1; margin: 0 0 var(--espacio-6); }
.web-esquema { display: block; width: 100%; height: auto; overflow: visible; }
.web-esquema__marco, .web-esquema__vacio, .web-esquema__linea, .web-esquema__tecla { fill: none; stroke: var(--plata-fria); stroke-width: 1.5; }
.web-esquema__cel { fill: var(--obsidiana); }
.web-esquema__lleno { fill: var(--hueso); }
.web-esquema__noche { fill: #1d1a19; }
.web-esquema__pantalla { fill: var(--obsidiana); stroke: var(--plata-fria); stroke-width: 1.5; }
.web-esquema__linea--clara { stroke: var(--humo); stroke-width: 1.5; }
.web-esquema__mono { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; fill: var(--plata-fria); }
.web-esquema__sello { font-family: var(--font-sello); font-size: 66px; fill: var(--hueso); }
.web-esquema__sello--s { font-size: 30px; }
.web-esquema__serif { font-family: var(--font-serif); font-size: 66px; fill: var(--hueso); }
.web-esquema__puntos rect { fill: var(--plata-fria); opacity: 0.55; }
.web-esquema__marca rect { fill: var(--granate); stroke: var(--hueso); stroke-width: 1.5; }
.web-esquema__marca text { font-family: var(--font-mono); font-size: 14px; fill: var(--hueso); text-anchor: middle; }
.web-anatomia__lista { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--reticula-medianil);
  border-top: var(--trazo-fino) solid var(--linea); }
.web-anatomia__lista li { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: var(--espacio-3); align-items: baseline;
  padding-block: var(--espacio-3); border-bottom: var(--trazo-fino) solid var(--linea); }
.web-anatomia__lista p { margin: 0; }
.web-anatomia__lista strong { font-weight: 500; }
.web-anatomia__n { justify-self: start; background: var(--acento); color: var(--sobre-acento); padding: 0 4px; }
@media (min-width: 768px) { .web-anatomia__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video-principios { margin-top: var(--espacio-5); }
.moda-trabajo__cabeza { grid-column: 1 / -1; display: grid; gap: var(--espacio-3); align-content: start; margin-bottom: var(--espacio-5); }
.moda-trabajo--par .moda-casos { margin-top: 0; }
@media (min-width: 768px) { .moda-trabajo--par .moda-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .moda-trabajo__cabeza { grid-column: 1 / 5; margin-bottom: 0; }
  .moda-trabajo--par .moda-casos { grid-column: 5 / -1; }
}
@media (max-width: 599px) {
  .video-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 48px; }
  .video-tira__clip--3 { display: none; }
  .video-tira__clip--2 { margin-top: 48px; }
}

/* ---------- Submenú de Servicios (21 oct) ----------
   «Servicios» ya no es página: es un botón que despliega las páginas de cada servicio con su precio «desde».
   Escritorio: se abre al pasar el cursor, al hacer clic o con Enter; un panel con filete fino, sin sombra.
   Celular: dentro del menú, «Servicios» se abre al tocarlo y la lista aparece debajo. Sin JS: cursor o foco. */
.nav__desplegar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--tinta-tecnica); cursor: pointer; }
.nav__desplegar:hover, .nav__desplegar[aria-expanded="true"] { color: var(--tinta); }
.nav__desplegar--activo { color: var(--tinta); text-decoration: underline; text-decoration-thickness: var(--trazo-fino); text-underline-offset: 6px; }
.nav__flecha { width: 6px; height: 6px; border-right: var(--trazo-fino) solid currentColor; border-bottom: var(--trazo-fino) solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease-out; }
.nav__desplegar[aria-expanded="true"] .nav__flecha { transform: translateY(2px) rotate(-135deg); }
.nav__con-submenu { position: relative; }
.submenu__lista { list-style: none; margin: 0; padding: 0; }
.nav .submenu { display: none; position: absolute; z-index: 30; top: calc(100% + 14px); left: calc(var(--espacio-4) * -1); width: 320px;
  background: var(--fondo); border: var(--trazo-fino) solid var(--linea); padding: var(--espacio-2) 0; }
.nav .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; } /* puente para el cursor */
.nav .nav__con-submenu:hover .submenu,
.nav .nav__desplegar[aria-expanded="true"] + .submenu,
html:not(.js) .nav .nav__con-submenu:focus-within .submenu { display: block; }
.nav .nav__con-submenu:hover .nav__flecha { transform: translateY(2px) rotate(-135deg); }
.nav .submenu__enlace { display: grid; gap: 2px; min-height: 0; padding: 12px var(--espacio-4); text-decoration: none; }
.submenu__nombre { font-family: var(--font-sans); font-size: 16px; line-height: 22px; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.submenu__dato { color: var(--tinta-tecnica); }
.nav .submenu__enlace:hover, .nav .submenu__enlace:focus-visible, .nav .submenu__enlace[aria-current="page"] { box-shadow: inset 2px 0 0 var(--acento); }
.nav .submenu__enlace:hover .submenu__nombre, .submenu__enlace[aria-current="page"] .submenu__nombre { text-decoration: underline; text-decoration-thickness: var(--trazo-fino); text-underline-offset: 4px; }
.nav .submenu__enlace[aria-current="page"] { text-decoration: none; }
/* Celular: dentro del menú a pantalla completa. */
.menu__lista .nav__desplegar { display: flex; width: 100%; justify-content: space-between; padding-block: var(--espacio-2);
  font-family: var(--font-sans-display); font-weight: 500; font-size: 40px; line-height: 1.1; text-transform: none; letter-spacing: 0; color: var(--tinta); }
[data-theme="firma"] .menu__lista .nav__desplegar { font-family: var(--font-serif); font-weight: 400; }
.menu__lista .nav__flecha { width: 12px; height: 12px; margin-right: 6px; }
.menu .submenu { display: none; padding: 0 0 var(--espacio-3); border-left: var(--trazo-fino) solid var(--linea); margin-left: 2px; }
.menu .nav__desplegar[aria-expanded="true"] + .submenu, html:not(.js) .menu .submenu { display: block; }
.menu__lista .submenu__enlace { display: grid; gap: 2px; padding: 10px 0 10px var(--espacio-3); font-size: inherit; text-decoration: none; }
.menu__lista .submenu__nombre { font-size: 22px; line-height: 28px; }
.menu__lista .submenu__enlace[aria-current="page"] { text-decoration: none; }
.sin-corte { white-space: nowrap; }

/* 23 oct: «Para quién es» en tres renglones, arriba de «Qué incluye»; línea de valor bajo los datos (Web). */
.servicio-para { row-gap: var(--espacio-4); padding-bottom: 0; }
.servicio-para__etiqueta { grid-column: 1 / -1; margin: 0; }
.servicio-para__lista { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: var(--trazo-fino) solid var(--linea); }
.servicio-para__lista li { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: var(--espacio-3); align-items: baseline;
  padding-block: var(--espacio-3); border-bottom: var(--trazo-fino) solid var(--linea); margin: 0; }
.servicio-para__lista .capa-tecnica { color: var(--tinta-tecnica); }
.servicio-para__mas { grid-column: 1 / -1; margin: 0; color: var(--tinta-tecnica); }
.servicio-para__mas a { color: var(--tinta); }
@media (min-width: 1024px) { .servicio-para__lista li { font-size: 24px; line-height: 32px; } }
.servicio-valor { margin: 0; max-width: 34rem; color: var(--tinta-tecnica); }

/* 23 oct: «Cotiza tu proyecto» siempre a la derecha de la cabecera (en celular, dentro del menú). */
.cabecera__cotiza { min-height: 40px; padding: 8px 16px; font-size: 14px; line-height: 20px; white-space: nowrap;
  background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.cabecera__cotiza:hover, .cabecera__cotiza:active { background: var(--fondo); color: var(--tinta); }
.cabecera__barra > .idioma { margin-right: calc(var(--espacio-4) * -1 + var(--espacio-3)); }
@media (max-width: 767px) { .js .cabecera__cotiza { display: none; } }
.menu__cotiza { margin: 0; padding: 0 var(--reticula-margen-movil) var(--espacio-5); }
.menu__cotiza-boton { width: 100%; justify-content: center; background: var(--tinta); color: var(--fondo); border-color: var(--tinta);
  min-height: 56px; font-size: 18px; }
/* 23 oct: la consola ya no atrapa el scroll; ocupa una pantalla en escritorio y baja normal. */
@media (min-width: 1024px) { .consola__escenario { min-height: min(100svh, 1000px); } }
/* 23 oct: etiqueta de la portada de Inicio más grande. */
.portada-dither .portada__pre { font-size: 14px; line-height: 20px; }
@media (max-width: 767px) { .portada-dither .portada__pre { font-size: 12px; line-height: 18px; } }
.indice__giro { color: var(--tinta); }

/* 23 oct · Eslogan de Inicio como «Tech Text» (titular.js): el HTML queda transparente debajo del lienzo. */
[data-tecnico] { position: relative; touch-action: pan-y; }
.tecnico__lienzo { position: absolute; pointer-events: none; max-width: none; max-height: none; z-index: 1; }
.tecnico--activo { color: transparent; -webkit-user-select: none; user-select: none; }
.tecnico--activo em { color: transparent; }