/* «Equipo» (web v5.2, página v0-2): la historia en scroll en tres zonas (spec
   docs/superpowers/specs/2026-09-30-equipo-historia-scroll-design.md §5). (1) El texto, anclado abajo a la izquierda a
   propósito (en scroll-world cae ahí porque su motor pisa el centrado: TEARDOWN §9.1); (2) la oficina en una ventana
   16:9 en el centro-derecha que nunca ocupa la pantalla; (3) el raíl de puntos a la derecha. El escenario va `sticky`
   dentro de la pista: al acabar la historia se va con ella, raíl incluido. La ventana cuelga de --alto-barra (la barra
   flota); por debajo de 720 px la barra ocupa flujo y, con el escenario pegado arriba, ya no está. */
.hi { background: var(--fondo-hondo); color: var(--texto); }
.hi-pista { position: relative; height: calc(var(--hi-pantallas) * 100svh); }
/* --hi-w y --hi-alto son el ancho y el alto del marco: el vídeo, 16:9, va dentro a --hi-bisel de cada borde. */
.hi-escenario {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  --hi-bisel: 14px;
  --hi-w: min(60vw, 71.5vw - 225px, (100svh - var(--alto-barra, 89px) - 6svh - 2 * var(--hi-bisel)) * 16 / 9 + 2 * var(--hi-bisel));
  --hi-alto: calc((var(--hi-w) - 2 * var(--hi-bisel)) * 9 / 16 + 2 * var(--hi-bisel));
}

/* (2) La ventana: el 60 % del ancho desde el 28,5 % (la caja que dibujó Julio: a 1857 px, 1103 × 620 frente a sus
   1110 × 618), o menos si no cabe de alto. Y nunca bajo la etiqueta más larga del raíl («Estamos contratando»): 225 px
   desde el borde derecho, medidos a 1440 y 1366 con 20 px de margen. Es un marco (Julio, 2026-10-01: «me gusta el marco
   B»): el de la pantalla gigante de la propia escena, gris pizarra (#66727B, medido en el fotograma) con su labio interior
   más oscuro, plano, sin sombra ni degradado; el vídeo, 16:9, va dentro y se ve entero. */
.hi-ventana {
  position: absolute; left: 28.5vw; top: calc(var(--alto-barra, 89px) + 2svh); box-sizing: border-box;
  width: var(--hi-w); height: var(--hi-alto); background: #66727B; border-radius: 8px;
  --eq-naranja: #F29A4A;
}
/* El póster del punto va en el vídeo, no en el marco: es el cartel de la escena hasta que el clip pinta. */
.hi-ventana .eq-escena { inset: var(--hi-bisel); overflow: hidden; border-radius: 3px; outline: 3px solid #3E4A54;
  background-color: var(--fondo); }
/* Las sillas vacías del último punto: una marca que late sobre cada una. */
.hi-sillas { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.hi-sillas.hi-visible { opacity: 1; }
.hi-silla { position: absolute; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--eq-naranja);
  box-shadow: 0 0 0 0 rgb(242 154 74 / .6); animation: hi-latido 1.8s ease-out infinite; }
@keyframes hi-latido { to { box-shadow: 0 0 0 16px rgb(242 154 74 / 0); } }
.hi-silla { transition: scale .3s cubic-bezier(.16, 1, .3, 1); }
.hi-silla.hi-encendida { scale: 1.6; }
/* El cartel de las vacantes (spec 2026-10-01 §6): la ficha de papel de la ronda 4 sobre el ventanal, centrada entre las dos
   sillas, y una flecha recta a cada una que se queda 10 px por encima del asiento (9 de punta). Flota con sus flechas: el
   movimiento señala la llamada del punto. Texto oscuro: el cian de acento no se lee sobre el papel. */
.hi-cartel { position: absolute; inset: 0; animation: hi-flota 3s ease-in-out infinite alternate; }
@keyframes hi-flota { to { translate: 0 -4px; } }
.hi-cartel-ficha { position: absolute; top: 5%; translate: -50% 0; box-sizing: border-box; height: 34px; padding: 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 10px;
  background: rgb(242 247 250 / .94); box-shadow: 0 18px 44px -12px rgb(31 29 43 / .28), 0 2px 6px rgb(31 29 43 / .08);
  font: 12px var(--tipo-mono); letter-spacing: .12em; text-transform: uppercase; color: #1F1D2B; }
.hi-cartel-ficha::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eq-naranja); flex: none; }
.hi-cartel-flecha { position: absolute; top: calc(5% + 34px); height: calc(var(--hasta) - 5% - 53px); width: 2px;
  translate: -50% 0; background: var(--eq-naranja); transition: background-color .3s; }
.hi-cartel-flecha::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0;
  border: 6px solid transparent; border-top: 9px solid var(--eq-naranja); border-bottom: 0; transition: border-color .3s; }
.hi-cartel-flecha.hi-encendida { background: var(--acento); }
.hi-cartel-flecha.hi-encendida::after { border-top-color: var(--acento); }

/* (1) El texto de cada punto. Se enciende con la opacidad que le da historia.js; invisible, no se pulsa. */
.hi-panel { position: absolute; left: clamp(16px, 4.4vw, 64px); bottom: clamp(24px, 6svh, 56px); width: min(23vw, 420px);
  opacity: 0; pointer-events: none; }
.hi-panel.hi-visible { pointer-events: auto; }
.hi-num { margin: 0; font: 12px var(--tipo-mono); letter-spacing: .12em; color: var(--texto-tenue); }
.hi-ante { margin: 16px 0 0; font: 700 12px var(--tipo-cuerpo); letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }
.hi-cara { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.hi-cara img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.hi-titulo { margin: 12px 0 0; font: 700 clamp(30px, 3.1vw, 54px) / 1.04 var(--tipo-cuerpo); letter-spacing: -.01em; text-wrap: balance; }
.hi-cara .hi-titulo { margin: 0; }
.hi-cuerpo { margin: 16px 0 0; font: 400 clamp(15px, 1.15vw, 18px) / 1.55 var(--tipo-cuerpo); opacity: .85; }
.hi-fuente { display: inline-block; margin-top: 14px; font: 700 13px var(--tipo-cuerpo); color: var(--acento); }
.hi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.hi-chips a { display: inline-block; padding: 7px 12px; border: 1px solid rgb(103 232 249 / .3); background: rgb(103 232 249 / .06);
  color: var(--texto); font: 700 13px / 1.3 var(--tipo-cuerpo); text-decoration: none; }
.hi-chips a:hover, .hi-chips a:focus-visible { background: var(--acento); color: var(--fondo-hondo); }

/* El aviso de la retención (spec docs/superpowers/specs/2026-10-01-equipo-salidas-design.md §5): en la zona del texto,
   donde estaba el del punto 1, con una línea de acento que se llena con lo que les falta para sentarse, sin pista de
   fondo. `?aviso=ventana` lo lleva dentro de la ventana, abajo y sobre un velo, para compararlo. */
.hi-aviso { position: absolute; left: clamp(16px, 4.4vw, 64px); bottom: clamp(24px, 6svh, 56px); width: min(23vw, 420px);
  opacity: 0; pointer-events: none; transition: opacity .15s linear; }
.hi-aviso.hi-visible { opacity: 1; }
.hi-aviso-texto { margin: 0; font: 700 clamp(20px, 1.6vw, 28px) / 1.2 var(--tipo-cuerpo); text-wrap: balance; }
.hi-aviso-barra { display: block; height: 2px; margin-top: 16px; background: var(--acento); transform-origin: left;
  transform: scaleX(var(--progreso, 0)); }
.hi-ventana .hi-aviso { left: 50%; bottom: 16px; translate: -50% 0; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 18px; background: rgb(31 29 43 / .82); }
.hi-ventana .hi-aviso-texto { font-size: 18px; }

/* (3) El raíl: cuatro puntos y la etiqueta del actual a su izquierda. */
.hi-rail { position: absolute; right: clamp(14px, 2.4vw, 30px); top: 50%; translate: 0 -50%; display: grid; gap: 22px; padding: 18px 10px; }
.hi-rail::before { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; translate: -50% 0; background: var(--acento); opacity: .28; }
.hi-rail button { position: relative; width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hi-rail button:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.hi-rail i { width: 9px; height: 9px; border-radius: 50%; background: rgb(103 232 249 / .4); transition: transform .3s, background .3s, box-shadow .3s; }
.hi-rail [aria-current="true"] i { background: var(--acento); transform: scale(1.4); box-shadow: 0 0 0 5px rgb(103 232 249 / .2); }
.hi-rail span { position: absolute; right: 26px; top: 50%; translate: 6px -50%; white-space: nowrap; padding: 5px 11px;
  font: 700 12px var(--tipo-cuerpo); color: var(--texto); background: rgb(31 29 43 / .85); border: 1px solid rgb(223 230 235 / .14);
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; }
.hi-rail button:hover span, .hi-rail [aria-current="true"] span { opacity: 1; translate: 0 -50%; }

/* Por debajo de 1081 px, apilado: la ventana arriba, centrada y tan ancha como deje el texto (se le reservan 340 px de
   alto), el texto debajo y el raíl pegado al borde, sin etiquetas y con dedo de 28 px. */
@media (max-width: 1080px) {
  .hi-escenario { --hi-bisel: 8px; --hi-arriba: calc(var(--alto-barra, 77px) + 12px);
    --hi-w: min(100vw - 32px, (100svh - var(--alto-barra, 77px) - 340px - 2 * var(--hi-bisel)) * 16 / 9 + 2 * var(--hi-bisel)); }
  .hi-ventana { left: 50%; translate: -50% 0; top: var(--hi-arriba); }
  .hi-panel { left: 16px; right: 48px; width: auto; bottom: auto; top: calc(var(--hi-arriba) + var(--hi-alto) + 16px); }
  .hi-rail { right: 2px; gap: 16px; padding: 14px 6px; }
  .hi-rail button { width: 28px; height: 28px; }
  .hi-rail span { display: none; }
  .hi-cartel { display: none; }
}
@media (max-width: 720px) {
  .hi-escenario { --hi-arriba: 12px; --hi-w: min(100vw - 32px, (100svh - 340px - 2 * var(--hi-bisel)) * 16 / 9 + 2 * var(--hi-bisel)); }
}
/* El teléfono en apaisado (bajo y ancho): apilado no cabe —la ventana se quedaba a cero—, así que lado a lado: la ventana
   a la derecha, a toda la altura que deja la barra, y el texto a la izquierda, con la letra algo más pequeña (≥ 12 px).
   Por debajo de 720 px de ancho la barra ocupa flujo y, con el escenario pegado arriba, ya no está. */
@media (max-width: 1080px) and (orientation: landscape) and (max-height: 500px) {
  .hi-escenario { --hi-arriba: calc(var(--alto-barra, 75px) + 8px);
    --hi-w: min(56vw, (100svh - var(--hi-arriba) - 8px - 2 * var(--hi-bisel)) * 16 / 9 + 2 * var(--hi-bisel)); }
  .hi-ventana { left: auto; right: 44px; translate: none; top: var(--hi-arriba); }
  .hi-panel { left: 16px; right: auto; bottom: auto; top: var(--hi-arriba); width: calc(44vw - 76px); }
  .hi-ante { margin-top: 10px; }
  .hi-cara { margin-top: 10px; gap: 10px; }
  .hi-cara img { width: 40px; height: 40px; }
  .hi-titulo { font-size: 22px; }
  .hi-cuerpo { margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .hi-fuente { margin-top: 8px; }
  .hi-chips { margin-top: 12px; }
}
@media (max-width: 720px) and (orientation: landscape) and (max-height: 500px) {
  .hi-escenario { --hi-arriba: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hi-silla { animation: none; }
  .hi-aviso { transition: none; }
  .hi-cartel { animation: none; }
  .hi-silla, .hi-cartel-flecha, .hi-cartel-flecha::after { transition: none; }
  .hi-rail i, .hi-rail span, .hi-sillas { transition: none; }
}

/* El cierre de «Equipo» (2026-10-02): la cita de Cajal en el sitio del cierre de la casa, con su `.display`. Averox
   dibuja « » … y las tildes (medido con fontTools); la firma va en mono, sin cifras en display. */
.equipo-cita blockquote { margin: 0; }
.equipo-cita .display { margin: 0 auto; max-width: 24ch; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.25; text-wrap: balance; }
.equipo-cita footer { margin-top: 28px; font: 13px var(--tipo-mono); letter-spacing: .06em; color: var(--texto-tenue); }
.equipo-cita cite { font-style: normal; color: var(--texto); }
.equipo-cita footer a { color: inherit; text-underline-offset: 3px; }
.equipo-cita footer a:hover, .equipo-cita footer a:focus-visible { color: var(--acento); }
.equipo-cita .acciones { margin-top: 44px; }