/* ============ Kelvo · prototipo del rediseño (IA privada) · el recorrido ============
   La parte narrativa (portada, tres historias, segundo cerebro, Oye Kelvo) son seis
   pantallas sobre un solo fondo persistente con pausas (RECORRIDO.md, ESCENAS.md).
   El acto claro empieza en «Ver el video» y llega hasta el pie, y tapa el fondo.
   Fuente de verdad visual: la maqueta aprobada por Diego (Main / Movil / Sistema).
   Sin cuadrícula de fondo ni patrones. Los únicos degradados son las capas oscuras
   del lado del texto y la franja de la parada 3.
   Elementos fijos: solo el menú y el fondo (los dos fixed). En computador (desde 960 px) la parte
   narrativa se fija pantalla a pantalla con scroll-snap (decisión de Diego, 4-oct noche); en celular
   no hay ajuste. Sin listeners de rueda o toque, nada atado a la posición continua del scroll. */

/* ---------- Fuentes locales ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Acto oscuro */
  --suelo: #0D0B09;
  --elevado: #17140F;
  --elevado-2: #221E17;
  --linea-n: rgba(255, 253, 248, 0.10);
  --borde-n: rgba(255, 253, 248, 0.12);
  --borde-n-2: rgba(255, 253, 248, 0.22);
  --borde-fantasma: rgba(255, 253, 248, 0.28);
  --blanco: #FAF9F6;
  --cuerpo-n: #C9C3BB;
  --secundario-n: #97918A;
  --naranjo: #FF4D00;
  --naranjo-hover: #FF6A24;
  /* Acto claro */
  --papel: #FCFBF9;
  --arena: #F5F3EE;
  --marcador: #ECE8E1;
  --linea: #DDD8CF;
  --tinta: #12100D;
  --cuerpo: #44403C;
  --secundario: #6E6862;
  --naranjo-texto: #B23300;
  --campo: #8A837B;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ancho: 1200px;
  --margen: 40px;
  --alto-header: 80px;
  --seccion: 128px;
  --fundido: 100px;
}
@media (max-width: 959px) { :root { --margen: 24px; --seccion: 96px; } }
@media (max-width: 760px) { :root { --margen: 20px; --alto-header: 64px; --seccion: 72px; --fundido: 60px; } }

/* ---------- Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: var(--alto-header); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--sans); font-size: 18px; font-weight: 400; line-height: 1.55; background: var(--suelo); color: var(--cuerpo-n);
  -webkit-font-smoothing: antialiased; }
@media (max-width: 760px) { body { font-size: 17px; } }
h1, h2, h3, h4 { text-wrap: balance; font-weight: inherit; }
p, li { text-wrap: pretty; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: var(--naranjo); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--naranjo); outline-offset: 3px; }
.claro :focus-visible, .pie :focus-visible { outline-color: var(--naranjo-texto); }

.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 60; background: var(--blanco); color: var(--tinta); padding: .6rem 1rem;
  border-radius: 4px; font-size: 15px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: .75rem; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 4px;
  border: 1px solid transparent; font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
.btn-primario { background: var(--naranjo); color: var(--tinta); }
.btn-primario:hover { background: var(--naranjo-hover); }
.btn-fantasma { border-color: var(--borde-fantasma); color: var(--blanco); background: transparent; }
.btn-fantasma:hover { border-color: rgba(255, 253, 248, 0.6); }
.btn-fantasma svg path { fill: none; stroke: var(--blanco); stroke-width: 1.5; stroke-linejoin: round; }
.btn-chico { height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 760px) { .btn-chico { height: 40px; padding: 0 14px; } } /* 40 px: área de toque mínima del CTA del menú */
@media (max-width: 400px) { .header-fila { gap: 12px; } }

/* ---------- Marca ---------- */
.marca { display: inline-flex; align-items: baseline; gap: 3px; color: var(--blanco); text-decoration: none; font-size: 26px; font-weight: 760;
  letter-spacing: -0.04em; line-height: 1; }
.marca-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--naranjo); }
.marca-clara { color: var(--tinta); font-size: 22px; }
.marca-clara .marca-punto { width: 6px; height: 6px; }
@media (max-width: 760px) { .marca { font-size: 22px; } .marca .marca-punto { width: 6px; height: 6px; } }

/* ---------- Menú: siempre pegado arriba ----------
   Va fixed y no sticky: sticky depende de que ningún ancestro recorte o desplace (overflow distinto de
   visible, como el overflow-x: clip que tenía el body) y en la página real se despegaba. El main reserva
   su alto con padding-top, así las pantallas empiezan justo debajo. */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--alto-header); background: rgba(13, 11, 9, 0.94); border-bottom: 1px solid var(--linea-n); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.header-fila { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 14px; line-height: 1; color: var(--cuerpo-n); text-decoration: none; white-space: nowrap; transition: color 140ms ease; }
.nav a:hover { color: var(--blanco); }
.header-acciones { display: flex; align-items: center; gap: 8px; }
/* Cambio de idioma: mono chico, 40 px de alto para el toque; se ve en computador y en celular */
.idioma { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--cuerpo-n); text-decoration: none; border-radius: 4px; transition: color 140ms ease; }
.idioma:hover { color: var(--blanco); }
.menu-movil { display: none; }
.menu-movil summary { list-style: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 253, 248, 0.18); border-radius: 4px; cursor: pointer; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg path { fill: none; stroke: var(--blanco); stroke-width: 1.5; }
.menu-movil .icono-cerrar, .menu-movil[open] .icono-abrir { display: none; }
.menu-movil[open] .icono-cerrar { display: block; }
.menu-movil[open] summary { border-color: rgba(255, 253, 248, 0.5); }
.menu-movil-lista { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; background: var(--suelo);
  border-bottom: 1px solid var(--linea-n); padding: 8px max(var(--margen), (100% - var(--ancho)) / 2) 16px;
  max-height: calc(100svh - var(--alto-header)); overflow-y: auto; } /* en horizontal, las últimas secciones siguen alcanzables */
.menu-movil-lista a { padding: 14px 0; color: var(--blanco); font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--linea-n); }
.menu-movil-lista a:last-child { border-bottom: 0; }
@media (max-width: 1199px) {
  .nav { display: none; }
  .menu-movil { display: block; }
}

/* ---------- Tipografía común ---------- */
.numeral { font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--naranjo); }
.claro .numeral { color: var(--naranjo-texto); }
.titulo { font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--blanco); }
.titulo em { color: var(--naranjo); }
.titulo-claro { color: var(--tinta); margin-top: 24px; max-width: 900px; }
.texto { font-size: 18px; line-height: 1.55; color: var(--cuerpo-n); }
.texto-claro { color: var(--cuerpo); margin-top: 24px; max-width: 690px; }
.etiqueta { display: inline-block; padding: 4px 8px; border: 1px solid var(--naranjo); border-radius: 3px; font-family: var(--mono); font-size: 13px;
  line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--naranjo); white-space: nowrap; }
.claro .etiqueta { border-color: var(--naranjo-texto); color: var(--naranjo-texto); padding: 3px 8px; }
@media (max-width: 760px) {
  .titulo-claro { margin-top: 18px; }
  .texto { font-size: 17px; }
  .texto-claro { margin-top: 18px; }
}

/* ============ El recorrido: fondo persistente y pantallas ============
   La parte narrativa es un solo fondo con pausas (RECORRIDO.md). Cada sección narrativa es una
   pantalla transparente con su texto en una columna; detrás corre un único fondo fijo (.fondo)
   que app.js cambia de parada cuando la sección pasa a ser la dominante (ESCENAS.md).
   Sin JavaScript (html sin .js) el fondo no se muestra y cada pantalla trae su propio cuadro
   fijo y su capa oscura: la página es la misma con cuadros quietos.
   Únicos elementos fijos: el menú y .fondo. Desde 960 px las pantallas se fijan con scroll-snap (bloque
   «Computador» más abajo); nada se ata a la posición continua del scroll. */

/* Capas oscuras del lado del texto: #0D0B09 donde va el texto, transparente hacia el otro lado,
   más un fundido inferior. Con estos valores el texto #FAF9F6, el cuerpo #C9C3BB y el naranjo
   #FF4D00 pasan AA sobre los cuadros reales (medido con Playwright: ESCENAS.md). En celular la
   capa es pareja y de alfa 0,9: con menos, el naranjo chico no llega a 4,5:1 sobre las ventanas. */
:root {
  --capa-fundido: linear-gradient(to top, var(--suelo) 0, rgba(13, 11, 9, 0) 120px);
  --capa-izquierda: var(--capa-fundido), linear-gradient(90deg, rgba(13, 11, 9, 0.94) 0%, rgba(13, 11, 9, 0.88) 50%, rgba(13, 11, 9, 0.35) 72%, rgba(13, 11, 9, 0.12) 100%);
  --capa-derecha: var(--capa-fundido), linear-gradient(270deg, rgba(13, 11, 9, 0.94) 0%, rgba(13, 11, 9, 0.88) 50%, rgba(13, 11, 9, 0.35) 72%, rgba(13, 11, 9, 0.12) 100%);
  --capa-abajo: linear-gradient(to top, rgba(13, 11, 9, 0.94) 0%, rgba(13, 11, 9, 0.6) 38%, rgba(13, 11, 9, 0.1) 62%, rgba(13, 11, 9, 0.1) 100%);
  --capa-ambos: var(--capa-fundido), linear-gradient(90deg, rgba(13, 11, 9, 0.94) 0%, rgba(13, 11, 9, 0.9) 38%, rgba(13, 11, 9, 0.25) 46%, rgba(13, 11, 9, 0.25) 54%, rgba(13, 11, 9, 0.9) 62%, rgba(13, 11, 9, 0.94) 100%);
  --col: min(560px, 46vw);      /* columna de texto de una pantalla */
  --col-cerebro: min(420px, 30vw); /* las dos columnas de la parada 5 */
  --borde-contenedor: max(var(--margen), (100% - var(--ancho)) / 2);
}
/* Bajo 960 px el texto ocupa todo el ancho: la capa pasa a ser pareja en las pantallas de columna */
@media (max-width: 959px) {
  :root {
    --capa-izquierda: var(--capa-fundido), linear-gradient(rgba(13, 11, 9, 0.9), rgba(13, 11, 9, 0.9));
    --capa-derecha: var(--capa-izquierda);
    --capa-ambos: var(--capa-izquierda);
    --col: 100%;
  }
}

/* ---------- El fondo persistente ---------- */
.fondo { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--suelo); }
.js .fondo { display: block; }
main, .pie { position: relative; z-index: 1; }
main { padding-top: var(--alto-header); }
.fondo-cuadro, .fondo-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Dos <img>: el entrante se funde encima del saliente en 400 ms; el saliente se quita después */
.fondo-cuadro { z-index: 0; opacity: 0; transition: opacity 200ms ease; transform: scale(1); transform-origin: 50% 45%; }
.fondo-cuadro.es-saliente { z-index: 0; opacity: 1; transition: none; }
.fondo-cuadro.es-vigente { z-index: 1; opacity: 1; transition: opacity 200ms ease, transform 250ms cubic-bezier(.2, .7, .2, 1), filter 900ms ease; }
/* Zoom leve al elegir una vista (app.js pone con-zoom en el <img>; el origen sigue a la parada vigente) */
.fondo-cuadro.con-zoom { transform: scale(1.06); }
.fondo.origen-sala .fondo-cuadro { transform-origin: 70% 40%; }
@media (prefers-reduced-motion: reduce) { .fondo-cuadro.con-zoom { transform: none; } }
.fondo.sin-fundido .fondo-cuadro { transition: filter 900ms ease; } /* sin fundido de imagen, pero el atenuado de la parada 3 sí se anima */
/* Parada 3: el escritorio queda detrás, atenuado, mientras la captura sale del monitor (app.js, sacarPantalla) */
.fondo-cuadro { transition: opacity 200ms ease, filter 900ms ease; }
.fondo.atenuado .fondo-cuadro { filter: brightness(.5) saturate(.85) blur(2px); }
/* Dos <video>: uno a la vista y otro libre para precargar el tramo siguiente. Solo uno corre a la vez. */
.fondo-video { z-index: 2; opacity: 0; }
.fondo-video.es-visible { z-index: 3; opacity: 1; }
.fondo-capa { position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.capa-izquierda { background: var(--capa-izquierda); }
.capa-derecha { background: var(--capa-derecha); }
.capa-abajo { background: var(--capa-abajo); }
.capa-ambos { background: var(--capa-ambos); }
.fondo[data-lado="izquierda"] .capa-izquierda, .fondo[data-lado="derecha"] .capa-derecha,
.fondo[data-lado="abajo"] .capa-abajo, .fondo[data-lado="ambos"] .capa-ambos { opacity: 1; }
/* ?borrador=1: qué parada y qué archivo están puestos. Va fuera de .fondo (que queda detrás del
   contenido) y solo existe en borrador: no es parte de la página publicada. */
.fondo-rotulo { display: none; position: fixed; right: 12px; bottom: 12px; z-index: 45; max-width: calc(100% - 24px); padding: 6px 10px;
  background: rgba(13, 11, 9, 0.9); border: 1px solid var(--borde-n-2); border-radius: 3px; font-family: var(--mono); font-size: 12px;
  line-height: 1.4; letter-spacing: 0.04em; color: var(--blanco); pointer-events: none; }
.js .borrador .fondo-rotulo { display: block; }

/* ---------- Pantallas ---------- */
.pantalla { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 72px 0; background: transparent; }
.pantalla > .contenedor { position: relative; z-index: 1; }
/* Sin JavaScript: el cuadro y la capa van dentro de cada pantalla (no fijos) */
.pantalla-cuadro, .pantalla-capa { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; }
.pantalla-cuadro { object-fit: cover; background: var(--elevado); }
.pantalla-bucle { display: none; } /* solo en celular, y solo la portada (ver el bloque de la franja al final) */
.pantalla[data-lado="izquierda"] .pantalla-capa { background: var(--capa-izquierda); }
.pantalla[data-lado="derecha"] .pantalla-capa { background: var(--capa-derecha); }
.pantalla[data-lado="abajo"] .pantalla-capa { background: var(--capa-abajo); }
.pantalla[data-lado="ambos"] .pantalla-capa { background: var(--capa-ambos); }
.js .pantalla-cuadro, .js .pantalla-capa { display: none; }
/* Navegador sin IntersectionObserver: se queda como sin JavaScript */
.sin-io .fondo { display: none; }
.sin-io .pantalla-cuadro, .sin-io .pantalla-capa { display: block; }

/* La columna de texto, del lado de la capa oscura */
.columna { width: var(--col); display: flex; flex-direction: column; gap: 20px; }
.pantalla[data-lado="derecha"] .columna { margin-left: auto; }
.columna .titulo { font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem); }
.columna .numeral { margin-top: 8px; }
.columna .puntos { margin-top: 4px; }
.columna .cierre { margin-top: 12px; }

/* Frase de apertura: arriba del titular, en mono, con el punto naranjo */
.apertura { display: flex; align-items: flex-start; gap: 10px; font-family: var(--mono); font-size: 15px;
  line-height: 1.4; letter-spacing: 0; color: var(--cuerpo-n); }
.apertura::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: calc((1.4em - 6px) / 2); border-radius: 50%; background: var(--naranjo); }
.apertura + .apertura { margin-top: -8px; }
@media (max-width: 760px) {
  .pantalla { padding: 56px 0; }
  .apertura { font-size: 14px; }
}

/* Vistas de las paradas 3 y 7: las tarjetas (las pestañas) en la columna y la captura real, grande, a la derecha.
   Aquí va lo común (celular y sin JavaScript: todo en el flujo, las capturas apiladas); el diseño de computador está
   en el bloque «Computador» del final. */
.vista-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.vista-tarjetas { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tab-linea { display: none; }
.vista-captura { max-width: 760px; }
.captura { border: 1px solid var(--borde-n); border-radius: 8px; overflow: hidden; background: var(--elevado); }
.captura picture { display: block; }
.captura img { width: 100%; height: auto; }

/* ============ Parada 1 · Portada ============ */
.pantalla-portada { min-height: calc(100vh - var(--alto-header)); min-height: calc(100svh - var(--alto-header)); padding: 40px 0; }
.portada-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.portada-texto { grid-column: span 7; }
.portada-texto > * { max-width: 620px; }
.pantalla-portada h1 { font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem); font-weight: 760; letter-spacing: -0.035em; line-height: 0.98; color: var(--blanco); }
.pantalla-portada h1 em { display: block; color: var(--naranjo); }
.portada-bajada { margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--cuerpo-n); }
.portada-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.suena-caja { grid-column: span 5; background: rgba(23, 20, 15, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--borde-n); border-radius: 8px; padding: 22px 24px; }
.suena-titulo { margin-bottom: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cuerpo-n); }
.suena li + li a { border-top: 1px solid var(--linea-n); }
.suena a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; color: var(--blanco); text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.4; }
.suena a:hover span:first-child { text-decoration: underline; text-decoration-color: var(--naranjo); text-underline-offset: 4px; }
.suena-flecha { flex: none; font-size: 13px; line-height: 1; color: var(--naranjo); }
@media (max-width: 959px) {
  .portada-texto, .suena-caja { grid-column: 1 / -1; }
  .portada-grid { gap: 40px; }
}
@media (max-width: 760px) {
  .pantalla-portada { padding: 40px 0 48px; }
  .portada-bajada { font-size: 17px; }
  .portada-botones { flex-direction: column; align-items: stretch; }
  .suena-caja { padding: 18px 20px; }
  .suena a { font-size: 16px; padding: 12px 0; }
}

/* ============ Puntos y cierre (paradas 2, 4 y 6) ============ */
.puntos { border-top: 1px solid var(--linea-n); }
.puntos li { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--linea-n); }
.puntos .n { flex: none; width: 28px; padding-top: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--naranjo); }
.puntos li > div { display: flex; flex-direction: column; gap: 8px; }
.puntos h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--blanco); }
.puntos p { font-size: 18px; line-height: 1.55; color: var(--cuerpo-n); }
.puntos-compactos li { gap: 20px; padding: 18px 0; }
.puntos-compactos .n { padding-top: 4px; }
.puntos-compactos li > div { gap: 4px; }
.puntos-compactos h3 { font-size: 19px; letter-spacing: 0; }
.puntos-compactos p { font-size: 16px; }

.cierre { display: flex; align-items: center; gap: 24px; margin-top: 64px; }
.cierre p { font-size: 15px; line-height: 1.5; color: var(--cuerpo-n); }
.cierre-corto { margin-top: 28px; }
@media (max-width: 760px) {
  .puntos li, .puntos-compactos li { gap: 16px; padding: 18px 0; }
  .puntos .n { width: 22px; padding-top: 4px; letter-spacing: 0.04em; }
  .puntos h3, .puntos-compactos h3 { font-size: 19px; }
  .puntos p, .puntos-compactos p { font-size: 16px; }
  .cierre { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
  .cierre .btn { width: 100%; }
}

/* ============ Parada 3 · Trabaja con lo tuyo ============
   La captura real va en primer plano (bloque «Computador»); el monitor acercado queda detrás como contexto.
   Aquí solo el celular y el modo sin JavaScript: la columna y, debajo, las cuatro capturas apiladas. */

/* ============ Parada 5 · Segundo cerebro ============
   Dos columnas a los costados y el centro libre para el cerebro. Los cuatro rótulos de las
   entradas van pegados a los bordes de la ventana que deja libre el texto; al elegir un punto
   de la lista se resalta el suyo (.activa). */
.cerebro-grid { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cerebro-izq, .cerebro-der { width: var(--col-cerebro); }
.pantalla-cerebro .titulo { font-size: clamp(1.875rem, 1.2rem + 1.4vw, 2.5rem); }
.pantalla-cerebro .titulo em { color: var(--naranjo); }
.ocho-lista { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--linea-n); }
.ocho-tab { display: flex; gap: 12px; padding: 9px 0; background: none; border: 0; border-bottom: 1px solid var(--linea-n); text-align: left;
  font-family: var(--mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario-n);
  cursor: pointer; transition: color 140ms ease, padding 140ms ease; }
.ocho-tab:hover { color: var(--cuerpo-n); }
.ocho-tab[aria-selected="true"] { padding-left: 12px; color: var(--blanco); box-shadow: inset 2px 0 0 var(--naranjo); }
.ocho-tab:focus-visible { outline-offset: -2px; }
.ocho-panel { display: flex; flex-direction: column; gap: 14px; padding-left: 20px; border-left: 2px solid var(--naranjo); }
.ocho-panel:focus-visible { outline-offset: 6px; }
html:not(.js) .ocho-lista { display: none; }
html:not(.js) .ocho-panel + .ocho-panel { margin-top: 28px; }
.ocho-panel h3 { font-size: clamp(1.75rem, 1.1rem + 1.4vw, 2.375rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--blanco); }
.ocho-panel p { font-size: 20px; line-height: 1.5; color: var(--cuerpo-n); }
.destacada { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linea-n); font-size: 17px;
  font-weight: 500; line-height: 1.45; color: var(--cuerpo-n); }
.destacada em { color: var(--naranjo); }
@media (max-width: 959px) {
  /* En una columna, la respuesta va justo debajo de la lista de puntos (antes quedaba 300 px más abajo, tras la frase
     destacada, y al tocar un punto no se veía qué cambiaba): las dos columnas se disuelven y el orden lo da `order`. */
  .cerebro-grid { flex-direction: column; align-items: stretch; gap: 20px; }
  .cerebro-izq, .cerebro-der { display: contents; }
  .cerebro-grid .ocho-paneles { order: 1; }
  .cerebro-grid .destacada { order: 2; margin-top: 8px; }
  .cerebro-grid .cierre-corto { order: 3; margin-top: 0; }
  .ocho-lista { gap: 6px; }
  .ocho-tab { min-height: 44px; align-items: center; } /* área de toque */
}

/* ============ Parada 6 · Oye Kelvo ============ */
@media (max-width: 760px) { .etiqueta { padding: 3px 8px; } }

/* ============ Ver el video (abre el acto claro) ============ */
.ver-video-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.ver-video-texto { grid-column: span 4; }
.video-bloque { grid-column: span 8; }
.video-pitch { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #0D0B09; }
@media (max-width: 959px) { .ver-video-texto, .video-bloque { grid-column: 1 / -1; } }

/* ---------- Pestañas (vitrina y galería) ---------- */
.tabs-lista { display: flex; gap: 32px; margin-top: 16px; border-bottom: 1px solid var(--linea-n); overflow-x: auto; scrollbar-width: none; }
.tabs-lista::-webkit-scrollbar { display: none; }
.tab { flex: none; display: flex; gap: 10px; margin: 0; padding: 16px 0; background: none; border: 0; text-align: left; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario-n);
  cursor: pointer; transition: color 140ms ease; }
.tab:hover { color: var(--cuerpo-n); }
.tab[aria-selected="true"] { color: var(--blanco); box-shadow: inset 0 -2px 0 var(--naranjo); }
.tab[aria-selected="true"] .tab-n { color: var(--naranjo); }
.tab:focus-visible { outline-offset: -2px; }
html:not(.js) .tabs-lista { display: none; }
.tab-panel { margin-top: 24px; }
.tab-panel:focus-visible { outline-offset: 6px; }
html:not(.js) .tab-panel + .tab-panel { margin-top: 48px; }
.tab-pie { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--cuerpo-n); }
.tab-pie strong { font-weight: 600; color: var(--blanco); }
@media (max-width: 760px) {
  /* En celular las pestañas van apiladas: en una tira horizontal la segunda quedaba cortada y la tercera, invisible */
  .tabs-lista { flex-direction: column; gap: 0; margin-top: 12px; border-bottom: 0; overflow: visible; }
  .tab { padding: 13px 0 13px 12px; gap: 8px; white-space: normal; border-bottom: 1px solid var(--linea-n); box-shadow: none; }
  .tab[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--naranjo); }
  .tab-panel { margin-top: 16px; }
  .tab-pie { margin-top: 16px; font-size: 17px; }
}


/* ============ Acto claro: de «Ver el video» al pie ============ */
.claro { background: var(--papel); color: var(--cuerpo); }
.claro.arena { background: var(--arena); }
.seccion { padding: var(--seccion) 0; }
/* Desde 960 px el titular de cada sección clara queda al menos 96 px bajo el menú cuando el ajuste de scroll deja la
   sección con su borde de arriba bajo él (scroll-padding-top de html). Usos pide 96 justos para caber en una pantalla. */
@media (min-width: 960px) {
  .claro.seccion { padding-top: max(96px, var(--seccion)); }
  .claro.seccion-usos { padding-top: 96px; padding-bottom: 48px; }
  .seccion-usos .titulo-claro { max-width: none; margin-top: 16px; font-size: clamp(2rem, 1rem + 2.2vw, 2.75rem); }
  /* Con el ajuste de scroll, una sección clara más baja que la ventana dejaba asomar cortado el titular de la siguiente
     (6-oct). Cada una ocupa al menos la ventana bajo el menú, como las pantallas; «Ver el video» centra su contenido. */
  html.js .claro.seccion { min-height: calc(100vh - var(--alto-header)); min-height: calc(100svh - var(--alto-header)); }
  html.js .claro.ver-video { display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
  html.js .claro.ver-video > .contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); }
}

/* 7. Usos: cinco filas en dos columnas, todo en una pantalla */
.usos-lista { margin-top: 40px; border-bottom: 1px solid var(--linea); }
.uso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 48px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linea); }
.uso-que h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--tinta); }
.uso-que p { margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--cuerpo); }
.uso-q { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--naranjo-texto); }
.enlace-claro { align-self: flex-start; font-size: 16px; font-weight: 600; color: var(--naranjo-texto); text-decoration: none; }
.enlace-claro:hover { text-decoration: underline; text-underline-offset: 4px; }
.nota-ficticio { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--secundario); }
@media (max-width: 860px) { .uso { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) {
  .usos-lista { margin-top: 32px; }
  .uso { padding: 18px 0; }
  .uso-que h3 { font-size: 18px; }
  .uso-que p { font-size: 16px; }
  .uso-q { font-size: 14px; }
  .nota-ficticio { margin-top: 24px; }
}

/* 8. Dónde vive tu cómputo: dos tarjetas con foto, lado a lado */
.lugares-fotos { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lugar-tarjeta { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.lugar-tarjeta .foto { position: relative; flex: none; aspect-ratio: 16 / 9; max-height: 230px; overflow: hidden; background: var(--suelo); }
.lugar-tarjeta .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El servidor en la oficina (cuadro propio, 7-oct): el equipo queda a la izquierda del centro */
.lugar-tarjeta .foto-servidor img { object-position: 30% 8%; }
.lugar-tarjeta .foto-contenedor img { object-position: 62% 50%; }
.lugar-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; }
.lugar-cuerpo h3 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta); }
.lugar-cuerpo > p { font-size: 15px; line-height: 1.5; color: var(--cuerpo); }
.lugar-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.donde-pie { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.mismo { font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--tinta); }
@media (max-width: 860px) { .lugares-fotos { grid-template-columns: 1fr; gap: 24px; } .lugar-tarjeta .foto { max-height: none; } }
@media (min-width: 961px) { #donde-vive.claro.seccion { padding-bottom: 48px; } #donde-vive .titulo { font-size: clamp(26px, 2.4vw, 34px); } }
@media (min-width: 961px) and (max-height: 760px) { #donde-vive.claro.seccion { padding-top: 56px; padding-bottom: 32px; } .lugar-tarjeta .foto { max-height: 150px; } .lugares-fotos { margin-top: 12px; } .donde-pie { margin-top: 12px; } .lugar-cuerpo { padding: 12px 16px 14px; } }
@media (max-width: 760px) {
  .lugares-fotos { margin-top: 32px; }
  .lugar-cuerpo { padding: 20px 20px 22px; }
  .lugar-cuerpo h3 { font-size: 22px; letter-spacing: 0; }
  .lugar-cuerpo > p { font-size: 16px; }
  .donde-pie { margin-top: 24px; flex-direction: column; align-items: flex-start; }
  .mismo { font-size: 18px; }
}


/* 10. Quiénes somos */
.personas { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.persona { display: flex; flex-direction: column; gap: 18px; }
.persona-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--marcador); border: 1px solid var(--linea); }
.persona-nombre { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.persona-cargo { margin-top: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
.persona-resena { margin-top: 14px; max-width: 340px; font-size: 15px; line-height: 1.55; color: var(--cuerpo); }
@media (max-width: 860px) {
  .personas { grid-template-columns: 1fr; }
  .persona { flex-direction: row; align-items: flex-start; }
}
@media (max-width: 760px) {
  .personas { margin-top: 32px; gap: 28px; }
  .persona-foto { flex: none; width: 72px; height: 72px; }
  .persona-nombre { font-size: 19px; }
  .persona-cargo { margin-top: 4px; }
  .persona-resena { margin-top: 8px; }
}

/* 11. Preguntas */
.preguntas-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.preguntas-cab { grid-column: span 4; }
.faq { grid-column: span 8; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer;
  font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 22px; line-height: 1; color: var(--naranjo-texto); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--naranjo-texto); }
.faq-r { display: flex; flex-direction: column; gap: 12px; padding: 0 48px 28px 0; }
.faq-r p { font-size: 16px; line-height: 1.6; color: var(--cuerpo); }
@media (max-width: 959px) {
  .preguntas-cab, .faq { grid-column: 1 / -1; }
  .faq { margin-top: 16px; }
}
@media (max-width: 760px) {
  .faq summary { align-items: flex-start; gap: 16px; padding: 20px 0; font-size: 17px; }
  .faq summary::after { font-size: 20px; line-height: 1.2; }
  .faq-r { gap: 10px; padding: 0 0 24px; }
}

/* 12. Contacto */
.contacto { padding-bottom: var(--seccion); }
.contacto-grid { padding-top: var(--seccion); border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px; align-items: start; }
.contacto-texto { grid-column: span 5; }
.directo { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.directo a { font-size: 18px; font-weight: 500; color: var(--naranjo-texto); text-decoration: none; }
.directo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.formulario { grid-column: 7 / span 6; padding: 40px; background: var(--arena); border-radius: 8px; display: flex; flex-direction: column; gap: 28px; }
.campos-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; align-items: end; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
.campo input, .campo select, .campo textarea { width: 100%; height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--campo); border-radius: 0;
  background: transparent; font-family: var(--sans); font-size: 17px; color: var(--tinta); }
/* El select sin el control nativo: el texto alinea con las etiquetas y la flecha cierra con el filete */
.campo select { -webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%2312100D' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 2px center; }
.campo textarea { height: auto; padding-top: 10px; line-height: 1.5; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--tinta); box-shadow: 0 1px 0 var(--tinta); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--naranjo-texto); outline-offset: 4px; }
.caso-k { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); }
.formulario-envio { display: flex; flex-direction: column; gap: 14px; }
.formulario-envio .btn { align-self: flex-start; padding: 0 28px; }
.privacidad { font-size: 13px; line-height: 1.5; color: var(--secundario); }
@media (max-width: 959px) {
  .contacto-texto, .formulario { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .directo { margin-top: 24px; gap: 0; }
  .directo a { font-size: 17px; padding: 8px 0; } /* área de toque */
  .formulario { margin: 16px calc(-1 * var(--margen)) 0; padding: 28px var(--margen); border-radius: 0; gap: 24px; }
  .campos-dos { grid-template-columns: 1fr; gap: 24px; }
  .formulario-envio .btn { align-self: stretch; }
}

/* Pie */
.pie { background: var(--papel); border-top: 1px solid var(--linea); }
.pie-fila { padding: 40px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.pie-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 15px; color: var(--secundario); }
.pie-datos a { color: var(--cuerpo); text-decoration: none; }
.pie-datos a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .pie-fila { flex-direction: column; align-items: flex-start; padding: 32px 0 40px; }
  .pie-datos { gap: 4px 20px; }
  .pie-datos a { padding: 8px 0; } /* área de toque */
}

/* Al final, para ganar por orden: bajo 960 px las retículas de 12 columnas pasan a una sola columna */
@media (max-width: 959px) {
  .portada-grid, .ver-video-grid, .preguntas-grid, .contacto-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Celular (bajo 960 px): diseño propio, no la versión de computador escalada ============
   Decisión del 7-oct. En computador el recorrido es un solo fondo que avanza; en celular repetir una franja de foto
   por sección mostraba la misma oficina cinco veces sin decir nada nuevo. Aquí cada imagen se gana su lugar:
   - Portada: la oficina (con su bucle) a pantalla completa detrás del titular. Es la única foto de ambiente.
   - Second brain: el cerebro (con su bucle) arriba de la sección, con el titular encima. Es la imagen firma.
   - Paradas 3 y 7: las capturas reales del producto, de borde a borde, con «Ampliar» para verlas a tamaño real.
   - Paradas 2, 4 y 6: solo texto, separadas por un filete. La frase de apertura hace de entrada.
   Sin botones «Agenda una demo» dentro de las secciones: el del menú está siempre a la vista.
   Sin JavaScript es igual (los cuadros de las paradas sin foto no se muestran ni se descargan: son lazy). */
@media (max-width: 959px) {
  .js .fondo, .fondo-rotulo, .js .borrador .fondo-rotulo { display: none; }
  .pantalla { min-height: 0; justify-content: flex-start; padding: 56px 0 56px; }
  .pantalla + .pantalla { border-top: 1px solid var(--linea-n); }
  .pantalla .pantalla-cuadro, .js .pantalla .pantalla-cuadro, .pantalla .pantalla-capa, .js .pantalla .pantalla-capa { display: none; }
  .pantalla .cierre, .portada-botones .btn-primario { display: none; } /* el CTA vive en el menú */

  /* Portada: foto a pantalla completa, el texto abajo sobre la parte oscura del degradado */
  .pantalla-portada { position: relative; min-height: 0; padding: 0 0 48px; border-top: 0; }
  .pantalla-portada .pantalla-cuadro, .js .pantalla-portada .pantalla-cuadro,
  .franja .pantalla-portada .pantalla-bucle.es-visible { display: block; position: absolute; left: 0; top: 0; width: 100%;
    height: calc(100vh - var(--alto-header)); height: calc(100svh - var(--alto-header)); max-height: 760px; object-fit: cover; object-position: 60% 50%; }
  .pantalla-portada .pantalla-capa, .js .pantalla-portada .pantalla-capa { display: block; position: absolute; left: 0; top: 0; width: 100%;
    height: calc(100vh - var(--alto-header)); height: calc(100svh - var(--alto-header)); max-height: 760px;
    background: linear-gradient(to bottom, rgba(13, 11, 9, 0.2) 0%, rgba(13, 11, 9, 0.35) 30%, rgba(13, 11, 9, 0.86) 52%, rgba(13, 11, 9, 0.95) 68%, var(--suelo) 100%); }
  .pantalla-portada .portada-texto { min-height: calc(100vh - var(--alto-header) - 24px); min-height: min(calc(100svh - var(--alto-header) - 24px), 736px);
    display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8px; }
  .portada-grid { gap: 32px; }

  /* Second brain: el cerebro arriba, el titular entra sobre su parte baja */
  .pantalla-cerebro { position: relative; padding-top: 0; }
  .pantalla-cerebro .pantalla-cuadro, .js .pantalla-cerebro .pantalla-cuadro,
  .franja .pantalla-cerebro .pantalla-bucle.es-visible { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 340px; object-fit: cover; object-position: 50% 45%; }
  .pantalla-cerebro .pantalla-capa, .js .pantalla-cerebro .pantalla-capa { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 340px;
    background: linear-gradient(to bottom, var(--suelo) 0%, rgba(13, 11, 9, 0) 16%, rgba(13, 11, 9, 0.25) 45%, rgba(13, 11, 9, 0.9) 80%, var(--suelo) 100%); } /* fundido arriba y abajo: las fibras no se cortan en seco */
  .pantalla-cerebro > .contenedor { padding-top: 220px; }

  /* El bucle reemplaza a su cuadro solo cuando ya corre (app.js le pone es-visible) */
  .pantalla-bucle.es-visible + .pantalla-cuadro { display: none !important; }

  /* Capturas del producto: de borde a borde, con el enlace «Ampliar» debajo */
  .vista-tarjetas { margin-top: 0; }
  #oye-pantalla .tabs-lista { margin-top: 0; }
  .vista-captura .captura { margin-inline: calc(-1 * var(--margen)); border-radius: 0; border-left: 0; border-right: 0; }
  /* Toda la captura es el enlace «Ampliar» (se superpone a ella, mismo 16:10), con un chip en la esquina que lo dice */
  .vista-captura .tab-panel { position: relative; }
  .captura-ampliar { position: absolute; top: 0; left: calc(-1 * var(--margen)); width: calc(100% + 2 * var(--margen)); aspect-ratio: 16 / 10;
    display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; box-sizing: border-box; text-decoration: none; }
  .captura-ampliar span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
    background: rgba(13, 11, 9, 0.86); border: 1px solid rgba(255, 77, 0, 0.7); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--blanco); }
  .captura-ampliar:focus-visible { outline-offset: -3px; }
  /* Jerarquía: Oye Kelvo es la sección principal y Reunión en vivo la subordinada */
  #t-oye { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.125rem); }
  .titulo.titulo-movil { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem); }
  /* El menú abierto se separa del contenido */
  .menu-movil-lista { box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.7); }

  /* Dos secciones claras seguidas del mismo color no suman sus dos rellenos (quedaban 144 px vacíos sin ningún corte) */
  .claro.seccion + .claro.seccion:not(.arena), .claro.arena + .claro.arena { padding-top: 8px; } /* 8 y no 0: con 0 el margen del titular se escapa y asoma el fondo oscuro */
  .contacto-grid { border-top: 0; padding-top: 8px; } /* el filete doble: el último «details» ya cierra las preguntas */
}
/* Pantallas táctiles: el hover se queda «pegado» en el último elemento tocado y parecía un segundo punto elegido */
@media (hover: none) {
  .ocho-tab:not([aria-selected="true"]):hover { color: var(--cuerpo-n); border-color: var(--linea-n); }
  .ocho-tab:not([aria-selected="true"]):hover::after { color: var(--secundario-n); transform: none; }
  .tab:not([aria-selected="true"]):hover { color: var(--secundario-n); }
}
@media (min-width: 960px) { .captura-ampliar { display: none; } } /* solo en celular */
@media (max-width: 760px) {
  .pantalla { padding: 48px 0; }
  .pantalla-portada { padding: 0 0 40px; }
  .pantalla-cerebro { padding-top: 0; }
}

/* ============ Computador (desde 960 px): la parte narrativa se fija pantalla a pantalla ============
   Decisión de Diego (4-oct, noche). Con JavaScript, el scroll se ajusta (scroll-snap mandatory) a cada
   pantalla y a cada sección de la parte clara; el pie no se ajusta. Cada pantalla mide exactamente lo que
   queda de la ventana bajo el menú y su contenido tiene que caber ahí (1440×900 y 1280×720): los tamaños
   y los espacios de la columna bajan con el alto de la ventana (svh), no con el ancho.
   Sin JavaScript no hay ajuste: las pantallas mantienen su alto y crecen si hace falta. */
@media (min-width: 960px) {
  html.js { scroll-snap-type: y mandatory; }
  html.js .pantalla, html.js main > .claro { scroll-snap-align: start; }
  html.js .pie { scroll-snap-align: end; } /* sin ajuste de inicio; solo marca el fin para que el scroll pueda llegar al final del pie */
  html.js .pantalla { scroll-snap-stop: always; } /* de a una pantalla: así el tramo siempre parte del cuadro anterior */

  :root {
    --col: min(600px, 46vw);                       /* columna de texto: llega a la mitad de la ventana, no la pasa */
    --f-texto: clamp(13px, calc(5px + 1.11svh), 16px);     /* texto corrido de la columna: 13 px a 720 de alto, 15 px a 900 */
    --f-titulo: clamp(1.5rem, calc(6px + 3.4svh), 2.75rem);  /* titular de la columna */
    --f-punto: clamp(14.5px, calc(8.5px + 0.83svh), 18px);    /* subtítulo de cada punto */
    --sep: clamp(5px, calc(2.4svh - 10px), 14px);            /* espacio entre bloques de la columna */
  }

  .pantalla { min-height: calc(100vh - var(--alto-header)); min-height: calc(100svh - var(--alto-header)); padding: 12px 0 46px; }
  .pantalla-portada { padding: 12px 0 46px; }

  .columna { gap: var(--sep); }
  .columna .titulo { font-size: var(--f-titulo); }
  .columna .numeral { margin-top: 0; font-size: 12px; }
  .columna .puntos { margin-top: 0; }
  .columna .cierre { margin-top: 0; }
  .apertura { font-size: clamp(13px, calc(4px + 1.2svh), 15px); }
  .texto, .puntos p, .puntos-compactos p { font-size: var(--f-texto); line-height: 1.4; }
  .puntos-compactos li { gap: 16px; padding: clamp(4px, 0.95svh, 10px) 0; }
  .puntos-compactos .n { padding-top: 2px; font-size: 12px; }
  .puntos-compactos li > div { gap: 2px; }
  .puntos-compactos h3 { font-size: var(--f-punto); line-height: 1.25; }
  .cierre { gap: 20px; }
  .cierre p { font-size: clamp(13px, 1.8svh, 15px); line-height: 1.4; }
  .btn { height: clamp(42px, 5.6svh, 52px); }

  /* Portada */
  .pantalla-portada h1 { font-size: min(clamp(2.25rem, 1.2rem + 3.2vw, 4.5rem), 9.2svh); }
  .portada-bajada { margin-top: var(--sep); font-size: max(14px, var(--f-texto)); }
  .portada-botones { margin-top: calc(var(--sep) * 1.4); }
  .suena-caja { padding: clamp(12px, 2.4svh, 22px) 24px; }
  .suena a { padding: clamp(6px, 1.5svh, 11px) 0; font-size: clamp(13.5px, 1.9svh, 15px); }

  /* Paradas 3 y 7: la captura real en primer plano. El monitor del fondo queda detrás, de contexto. A la izquierda una
     columna angosta (300 px) con la frase, el numeral, el titular y las tarjetas (las pestañas); a la derecha la captura
     grande: ancho = el menor entre 72 % de la ventana, lo que da el alto disponible menos 120 px a 16:10 y la celda.
     Solo con fondo persistente (html.js sin .sin-io); sin JavaScript y en celular las capturas siguen apiladas. */
  html.js:not(.sin-io) .pantalla-vista > .contenedor { width: min(100% - 64px, 1680px); flex: 1; display: grid; grid-template-columns: var(--col-vista, 300px) minmax(0, 1fr);
    column-gap: var(--hueco-vista, 32px); align-items: center; }
  html.js:not(.sin-io) .columna-vista { width: var(--col-vista, 300px); max-width: var(--col-vista, 300px); align-self: center; }
  html.js:not(.sin-io) .columna-vista .texto, html.js:not(.sin-io) .pantalla-vista .cierre, html.js:not(.sin-io) .pantalla-vista .titulo-movil { display: none; } /* las tarjetas reemplazan el texto */
  html.js:not(.sin-io) .vista-tarjetas { margin-top: 0; gap: clamp(4px, 0.9svh, 8px); }

  /* Tarjetas: una por vista, con número, nombre y una línea; la activa lleva borde naranjo */
  html.js:not(.sin-io) .vista-tarjetas .tabs-lista { flex-direction: column; flex-wrap: nowrap; gap: clamp(5px, 0.9svh, 8px); margin: 0; border-bottom: 0; overflow: visible; }
  html.js:not(.sin-io) .vista-tarjetas .tab { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; row-gap: 1px; align-items: baseline; width: 100%;
    padding: clamp(6px, 1.15svh, 11px) 12px; white-space: normal; font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; text-align: left;
    background: rgba(13, 11, 9, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--linea-n); border-radius: 8px;
    box-shadow: none; transition: border-color 140ms ease, color 140ms ease; }
  html.js:not(.sin-io) .vista-tarjetas .tab:hover { border-color: var(--borde-n-2); }
  html.js:not(.sin-io) .vista-tarjetas .tab[aria-selected="true"] { border-color: var(--naranjo); box-shadow: none; }
  html.js:not(.sin-io) .vista-tarjetas .tab:focus-visible { outline-offset: 2px; }
  html.js:not(.sin-io) .vista-tarjetas .tab-n { font-size: 12px; letter-spacing: 0.04em; color: var(--naranjo); }
  html.js:not(.sin-io) .vista-tarjetas .tab-nombre { font-size: clamp(14px, 1.85svh, 16px); font-weight: 600; line-height: 1.25; color: var(--cuerpo-n); }
  html.js:not(.sin-io) .vista-tarjetas .tab[aria-selected="true"] .tab-nombre { color: var(--blanco); }
  html.js:not(.sin-io) .vista-tarjetas .tab-linea { display: block; grid-column: 2; font-size: clamp(12px, 1.5svh, 13.5px); font-weight: 400; line-height: 1.35; color: var(--secundario-n); }

  /* La captura grande: borde fino, radio 8, sombra suave; 16:10 como los archivos */
  html.js:not(.sin-io) .vista-captura { max-width: none; justify-self: end; width: min(72vw, calc((100svh - var(--alto-header) - 120px) * 1.6), 100%); aspect-ratio: 16 / 10; }
  /* Laptop chico (hasta 1199 px): la columna cede ancho para que la captura se lea */
  @media (max-width: 1199px) {
    html.js:not(.sin-io) .pantalla-vista > .contenedor { --col-vista: 264px; --hueco-vista: 24px; width: min(100% - 40px, 1680px); }
  }
  html.js:not(.sin-io) .vista-captura > .tab-panel { margin: 0; height: 100%; }
  /* Cuadros explicativos sobre la captura: la clave de la sección arriba a la izquierda y la explicación de la vista elegida abajo */
  html.js:not(.sin-io) .vista-captura { position: relative; }
  html.js:not(.sin-io) .vista-captura > .tab-panel { position: relative; }
  html.js:not(.sin-io) .vista-captura .tab-pie { position: absolute; left: 20px; z-index: 3; margin: 0; max-width: min(460px, 60%); padding: 14px 18px; border: 1px solid var(--linea-n); border-left: 3px solid var(--naranjo); border-radius: 8px; background: rgba(13, 11, 9, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: clamp(14px, 1.8svh, 16px); line-height: 1.5; color: var(--cuerpo-n); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
  html.js:not(.sin-io) .vista-captura .tab-pie { display: none; } /* repetía la tarjeta elegida y tapaba la captura */
  html.js:not(.sin-io) .vista-captura .tab-pie strong { color: var(--naranjo); }
  html.js:not(.sin-io) .vista-captura .captura { width: 100%; height: 100%; border-color: var(--linea-n); border-radius: 8px; box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.3); }
  html.js:not(.sin-io) .vista-captura .captura picture { height: 100%; }
  html.js:not(.sin-io) .vista-captura .captura img { width: 100%; height: 100%; object-fit: cover; }
  /* Al cambiar de vista, la captura nueva se funde en 250 ms */
  @keyframes vista-aparece { from { opacity: 0; } to { opacity: 1; } }
  html.js:not(.sin-io) .vista-captura .tab-panel:not([hidden]) .captura { animation: vista-aparece 120ms ease both; }

  /* Parada 5 */
  .pantalla-cerebro .titulo { font-size: clamp(1.5rem, 4.2svh, 2.5rem); }
  .ocho-tab { padding: clamp(4px, 1.1svh, 9px) 0; }
  .ocho-panel h3 { font-size: clamp(1.5rem, calc(4px + 3svh), 2.375rem); }
  .ocho-panel p { font-size: clamp(15px, calc(6px + 1.45svh), 20px); }
  .destacada { margin-top: calc(var(--sep) * 1.5); padding-top: var(--sep); font-size: clamp(13px, 1.8svh, 16px); }
  .cierre-corto { margin-top: max(16px, var(--sep)); } /* el botón no se pega a la tarjeta en ventanas bajas */

  /* Flechas «↓ siguiente» y «↑ anterior» (las crea app.js, solo con JavaScript) */
  .pasar { position: absolute; right: 24px; bottom: 9px; z-index: 3; display: flex; gap: 8px; }
  .pasar-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: rgba(13, 11, 9, 0.6); border: 1px solid var(--linea-n);
    border-radius: 4px; font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario-n);
    cursor: pointer; transition: color 140ms ease, border-color 140ms ease; }
  .pasar-btn:hover { color: var(--blanco); border-color: var(--borde-n-2); }

  /* El texto de una pantalla con tramo espera a que el tramo termine (app.js pone data-texto="oculto"
     cuando corre el tramo y "visible" cuando termina): fundido de 250 ms, sin desplazamiento. La opacidad
     va en los hijos del contenedor y no en el contenedor, para no romper el backdrop-filter de las tarjetas. */
  html.js .pantalla > .contenedor > * { transition: opacity 250ms ease; }
  html.js .pantalla[data-texto="oculto"] > .contenedor > * { opacity: 0; transition: none; pointer-events: none; }
  /* La captura grande de las paradas 3 y 7 sale del monitor: de scale(.82) a 1 y de 0 a 1 de opacidad, 600 ms */
  html.js:not(.sin-io) .pantalla > .contenedor > .vista-captura { transition: opacity 300ms cubic-bezier(.2, .7, .2, 1), transform 300ms cubic-bezier(.2, .7, .2, 1); }
  html.js:not(.sin-io) .pantalla[data-texto="oculto"] > .contenedor > .vista-captura { opacity: 0; transform: scale(.82); transition: none; }
  /* Mientras la copia vuela, la captura real está en su lugar pero invisible; al llegar aparece sin transición debajo */
  html.js:not(.sin-io) .pantalla[data-saliendo] > .contenedor > .vista-captura { opacity: 1; transform: none; transition: none; visibility: hidden; }
  html.js:not(.sin-io) .pantalla[data-saliendo="listo"] > .contenedor > .vista-captura { visibility: visible; }
  html.js:not(.sin-io) .pantalla[data-saliendo] .vista-captura .captura { animation: none; }
}
@media (max-width: 959px) { .pasar { display: none; } }

/* Video de los tramos: se funde sobre el cuadro de la parada al terminar (200 ms). */
.fondo-video { transition: opacity 200ms ease; }
/* Al entrar no hay fundido: app.js muestra el video cuando su primer cuadro (el mismo de la parada anterior) ya está pintado,
   y recién entonces pone debajo el cuadro de destino. Con fundido, ese cuadro se asomaba antes del tramo (servidor → cerebro). */
.fondo-video.es-visible { transition: none; }

/* Movimiento reducido: la captura grande solo cambia de opacidad (sin escala) */
@media (prefers-reduced-motion: reduce) {
  html.js:not(.sin-io) .pantalla[data-texto="oculto"] > .contenedor > .vista-captura { transform: none; }
  html.js:not(.sin-io) .pantalla > .contenedor > .vista-captura { transition: opacity 300ms ease; }
}

/* La copia de la captura que sale del monitor (parada 3). La mueve app.js con una matriz 3D por cuadro. */
.pantalla-sale { --sombra: 0; position: fixed; z-index: 5; overflow: hidden; transform-origin: 0 0; pointer-events: none;
  border-radius: calc(8px * var(--sombra)); background: #0D0B09; will-change: transform;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, calc(.55 * var(--sombra))), 0 4px 14px rgba(0, 0, 0, calc(.3 * var(--sombra))); }
.pantalla-sale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Preguntas en ventana (app.js): la lista queda fija y cada pregunta abre su respuesta encima de la página */
.faq-lista { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; list-style: disc; }
.faq-lista li { font-size: 16px; line-height: 1.6; color: var(--cuerpo); }
.faq-lista strong { color: var(--tinta); font-weight: 600; }
.faq.faq-ventana summary::after { content: "→"; font-size: 18px; }
.faq.faq-ventana details[open] summary::after { content: "→"; }
.faq-modal { margin: auto; width: min(720px, calc(100% - 32px)); max-height: min(92svh, 760px); padding: 0; border: 0; border-radius: 12px;
  background: var(--papel); color: var(--tinta); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); overflow: hidden; }
.faq-modal::backdrop { background: rgba(13, 11, 9, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.faq-modal[open] { animation: faq-entra 200ms ease-out; }
@keyframes faq-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-modal[open] { animation: none; } }
.faq-modal-caja { display: flex; flex-direction: column; max-height: inherit; overflow-y: auto; }
/* La pregunta: una banda arena arriba, como encabezado */
.faq-modal-pregunta { padding: 22px 32px 26px; background: var(--arena, #F1EDE6); border-bottom: 1px solid var(--linea); }
.faq-modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.faq-modal-cerrar { width: 40px; height: 40px; flex: none; border: 1px solid var(--linea); border-radius: 50%; background: var(--papel);
  font-size: 22px; line-height: 1; color: var(--tinta); cursor: pointer; }
.faq-modal-cerrar:hover { border-color: var(--naranjo-texto); color: var(--naranjo-texto); }
.faq-modal h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--tinta); }
/* La respuesta: su rótulo y una línea naranja al costado */
.faq-modal-cuerpo { padding: 24px 32px 8px; }
.faq-modal-rotulo { margin-bottom: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--naranjo-texto); }
.faq-modal-r { display: flex; flex-direction: column; gap: 14px; padding-left: 18px; border-left: 2px solid var(--naranjo); }
.faq-modal-r p { font-size: 17px; line-height: 1.6; color: var(--cuerpo); }
/* El pie queda pegado abajo: en ventanas bajas la respuesta hace scroll dentro de la ventana y «anterior / siguiente» se veían a medias o no se veían */
.faq-modal-pie { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0; padding: 14px 32px 18px; border-top: 1px solid var(--linea); background: var(--papel); }
@media (max-height: 760px) {
  .faq-modal-pregunta { padding: 16px 32px 18px; }
  .faq-modal-cuerpo { padding-top: 18px; }
  .faq-modal-r p, .faq-lista li { font-size: 16px; line-height: 1.5; }
  .faq-modal-pie { padding: 10px 32px 12px; }
}
.faq-modal-paso { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px;
  background: none; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; }
.faq-modal-paso.faq-sig { text-align: right; align-items: flex-end; }
.faq-modal-paso > span:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--naranjo-texto); }
.faq-modal-otra { font-size: 14px; line-height: 1.35; color: var(--cuerpo); }
.faq-modal-paso:hover { border-color: var(--linea); }
@media (max-width: 760px) {
  .faq-modal-pregunta { padding: 18px 20px 20px; }
  .faq-modal-cuerpo { padding: 20px 20px 4px; }
  .faq-modal-pie { margin: 16px 0 0; padding: 12px 20px 14px; }
  .faq-modal-otra { display: none; }
  .faq-modal-r p, .faq-lista li { font-size: 16px; }
}
.faq.faq-ventana summary { padding: 15px 0; }

/* Second brain (5-oct): el nombre en grande y la lista de puntos con una elegida que se nota */
.pantalla-cerebro .titulo.cerebro-titulo { font-size: clamp(2.75rem, 1.6rem + 3.2vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.cerebro-bajada { margin-top: -4px; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); line-height: 1.35; color: var(--cuerpo-n); }
/* En computador el titular y la bajada también bajan con el alto de la ventana: a 1024×640 la columna se salía de la pantalla */
@media (min-width: 960px) {
  .pantalla-cerebro .titulo.cerebro-titulo { font-size: min(clamp(2.75rem, 1.6rem + 3.2vw, 4.5rem), 8.4svh); }
  .cerebro-bajada { font-size: min(clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem), 2.6svh); }
  .pantalla-cerebro { padding-top: 24px; } /* la frase de apertura no queda pegada al menú */
  :root { --col-cerebro: min(420px, 33vw); } /* «¿Trabaja aunque nadie le pregunte?» cabe en una línea a 1024 */
}
.ocho-lista { gap: 4px; border-top: 0; }
.ocho-tab { padding: clamp(6px, 1.1svh, 11px) 14px; border: 1px solid var(--linea-n); border-radius: 6px; font-size: 13px; color: var(--cuerpo-n);
  background: rgba(13, 11, 9, 0.55); transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.ocho-tab:hover { color: var(--blanco); border-color: rgba(255, 77, 0, 0.5); }
.ocho-tab[aria-selected="true"] { padding-left: 14px; color: var(--blanco); background: rgba(255, 77, 0, 0.16); border-color: var(--naranjo); box-shadow: none; }
.ocho-tab[aria-selected="true"]::after { content: "→"; margin-left: auto; color: var(--naranjo); }
.pantalla-cerebro .titulo.cerebro-titulo em { white-space: nowrap; }

/* Second brain (5-oct, tarde): que se note que los puntos se eligen y que el texto de la derecha cambia.
   Una pista arriba de la lista, todos los puntos con su flecha, y el punto elegido en una tarjeta con su número. */
.ocho-tab::after { content: "→"; margin-left: auto; color: var(--secundario-n); transition: transform 140ms ease, color 140ms ease; }
.ocho-tab:hover::after { color: var(--naranjo); transform: translateX(3px); }
.ocho-tab[aria-selected="true"]::after { color: var(--naranjo); transform: translateX(3px); }
.ocho-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario-n); }
html.js .ocho-panel { padding: clamp(18px, 2.6svh, 28px) clamp(20px, 2vw, 28px); border: 1px solid var(--linea-n); border-left: 3px solid var(--naranjo); border-radius: 8px;
  background: rgba(13, 11, 9, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.5); }
html:not(.js) .ocho-k { display: none; }
@keyframes ocho-entra { from { opacity: 0; transform: translateX(-14px); border-color: var(--naranjo); } to { opacity: 1; transform: none; } }
.js .ocho-panel:not([hidden]) { animation: ocho-entra 380ms cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .js .ocho-panel:not([hidden]) { animation: none; } }
.cerebro-izq .destacada { margin-top: clamp(14px, 2.4svh, 28px); }

/* Aviso chico de datos ficticios bajo las tarjetas de las paradas 3 y 7 */
.nota-captura { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario-n); }

/* Vitrina, vista del chat: recuadros numerados sobre la captura que explican salas, conversaciones, cerebro y chat.
   En pantallas chicas los recuadros quedan solo con su número y la explicación va en la leyenda de abajo. */
.captura { position: relative; }
.captura-recs { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.rec { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--naranjo); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 77, 0, 0.25); }
.rec-n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--naranjo); color: var(--tinta); font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1; } /* tinta sobre naranjo: 5,7:1 (blanco daba 3,3) */
.rec > .rec-n { position: absolute; left: -11px; top: -11px; }
.rec-t { position: absolute; left: 0; display: block; width: max-content; max-width: 260px; padding: 5px 9px; border: 1px solid rgba(255, 77, 0, 0.6); border-radius: 6px; background: rgba(13, 11, 9, 0.92); color: var(--blanco); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: normal; line-height: 1.3; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.rec-abajo .rec-t { top: calc(100% + 8px); }
.rec-arriba .rec-t { bottom: calc(100% + 8px); }
/* Las etiquetas tapaban el texto del chat (6-oct): la 3 se queda angosta dentro de la barra lateral, y la 4 va dentro del
   campo de pregunta, donde solo cubre el texto de ejemplo. */
.rec-angosta .rec-t { max-width: 170px; }
.rec-dentro .rec-t { top: 50%; left: 10px; transform: translateY(-50%); }
.rec-leyenda { display: none; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--cuerpo-n); }
.rec-leyenda li { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; }
@media (max-width: 959px) {
  .rec-t { display: none; }
  .rec > .rec-n { width: 16px; height: 16px; left: 2px; top: 2px; font-size: 9.5px; }
  .rec { border-width: 1.5px; border-radius: 4px; }
  .rec-leyenda { display: block; }
}
/* Los recuadros aparecen después de que la pantalla llega a su lugar */
.captura-recs { transition: opacity 400ms ease 150ms; }
html.js:not(.sin-io) .pantalla[data-saliendo] .captura-recs, html.js:not(.sin-io) .pantalla[data-texto="oculto"] .captura-recs { opacity: 0; transition: none; }

/* ============ Ventanas bajas en computador ============
   Va al final para ganar por orden a las reglas de cada sección. A 720 de alto o menos, menos aire para que Usos, Preguntas,
   Quiénes somos y Contacto quepan en una pantalla; a 640 (laptop chico con la barra del navegador), todavía menos. */
@media (min-width: 960px) and (max-height: 760px) {
  .claro.seccion, .claro.seccion-usos { padding-top: 72px; padding-bottom: 40px; }
  .claro .contacto-grid { padding-top: 56px; }
  .claro.contacto { padding-bottom: 64px; }
  :root { --col: min(600px, 44vw); } /* la columna de la parada 4 no pisa el servidor del cuadro a 1024 */
  .claro.seccion .titulo-claro { margin-top: 0; }
  .usos-lista { margin-top: 24px; }
  .uso { padding: 13px 0; }
  .nota-ficticio { margin-top: 14px; }
  .personas { margin-top: 40px; }
  .preguntas-grid { gap: 24px 32px; }
  .faq.faq-ventana summary { padding: 11px 0; font-size: 17px; }
}
@media (min-width: 960px) and (max-height: 680px) {
  .claro.seccion, .claro.seccion-usos { padding-top: 56px; padding-bottom: 32px; }
  .seccion-usos .titulo-claro { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.25rem); }
  .usos-lista { margin-top: 16px; }
  .uso { padding: 9px 0; gap: 4px 32px; }
  .uso-que p { font-size: 15px; }
  .faq.faq-ventana summary { padding: 8px 0; font-size: 16px; }
  .claro .contacto-grid { padding-top: 32px; }
  .pantalla-cerebro { padding-top: 14px; }
  .pantalla-cerebro .titulo.cerebro-titulo { font-size: min(clamp(2.75rem, 1.6rem + 3.2vw, 4.5rem), 7.6svh); }
}