/* «Equipo» (v5.2): la oficina. Clases eq-* (spec §6). */
.eq-oficina { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #DCEAF0; }
.eq-escena { position: absolute; inset: 0; isolation: isolate; background: center / cover no-repeat; }
.eq-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* Corte seco (reproductor.js): el que entra encima; el que sale, opaco debajo hasta que el nuevo pinta. Índices
   negativos dentro de la escena aislada: los dos vídeos quedan siempre bajo las zonas, la campana y las vacantes. */
.eq-video.eq-activo { opacity: 1; z-index: -1; }
.eq-video.eq-saliendo { opacity: 1; z-index: -2; }
/* Fundido de salida de un bucle (reproductor.js, fundidoSalida): el que sale, encima y opaco hasta que el nuevo pinta;
   luego una animación lo lleva a 0. */
.eq-video.eq-fundiendo { opacity: 1; z-index: 0; }
.eq-zonas { position: absolute; }
.eq-zona { fill: transparent; stroke: transparent; cursor: pointer; transition: fill .2s, stroke .2s; }
.eq-zona:hover, .eq-zona:focus-visible { fill: rgb(242 154 74 / .18); stroke: #F29A4A; stroke-width: .004; outline: none; }
.eq-oficina[data-fase="yendo"] .eq-zonas, .eq-oficina[data-fase="volviendo"] .eq-zonas,
.eq-oficina[data-fase="zona"] .eq-zonas { pointer-events: none; opacity: 0; }
.eq-volver { position: absolute; top: 16px; left: 16px; display: none; }
.eq-oficina[data-fase="zona"] .eq-volver { display: inline-flex; }
.eq-pista { position: relative; }
.eq-oficina.eq-fija { position: sticky; top: 0; }
.eq-indice { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.eq-indice button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--texto-tenue); background: transparent; padding: 0; cursor: pointer; }
.eq-indice button:hover, .eq-indice button:focus-visible { background: #F29A4A; border-color: #F29A4A; }
.eq-oficina.eq-fija .eq-volver { display: none; }
/* En «scroll» puro las zonas no se pulsan: se llega con la rueda o con el índice (Q17). */
.eq-oficina[data-modo="scroll"] .eq-zonas { display: none; }

/* ── Piezas de interfaz sobre la oficina (L14) ─────────────────────────────
   La escena es un diorama de arcilla, cálido y blando: las piezas flotan
   sobre ella como fichas de papel claro, con la tipografía de la casa. El
   naranja de la escena marca lo que se puede tocar; el texto va en los
   tokens de .tono-claro (AA sobre #F2F7FA). */
:where(.eq-oficina, .eq-panel) { --eq-naranja: #F29A4A; --eq-papel: rgb(242 247 250 / 0.94); --eq-sombra: 0 18px 44px -12px rgb(31 29 43 / 0.28), 0 2px 6px rgb(31 29 43 / 0.08); }
.eq-oficina ::selection, .eq-panel ::selection { background: rgb(242 154 74 / 0.35); color: var(--texto); }

/* Zonas: halo naranja al pasar o con foco, trazo de ancho fijo aunque la capa se estire. */
.eq-zona { stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.eq-zona:hover, .eq-zona:focus-visible { fill: rgb(242 154 74 / 0.16); stroke: var(--eq-naranja); stroke-width: 2; }

/* Panel de zona */
.eq-panel {
  position: fixed; z-index: 20; right: clamp(16px, 3vw, 40px); top: 50%;
  width: min(360px, calc(100vw - 32px)); padding: 28px 28px 26px;
  background: var(--eq-papel); border-radius: 14px; box-shadow: var(--eq-sombra);
  color: var(--texto); translate: 0 -50%;
  animation: eq-panel-entra 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.eq-panel[hidden] { display: none; }
@keyframes eq-panel-entra { from { opacity: 0; transform: translateX(24px); } }
.eq-panel-ante {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--tipo-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento);
}
.eq-panel-ante::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eq-naranja); flex: none; }
.eq-panel-titulo {
  margin: 0; font-family: var(--tipo-display); font-weight: var(--peso-display); text-transform: var(--caja-display);
  letter-spacing: var(--tracking-display); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.08; text-wrap: balance;
}
.eq-panel-titulo:focus { outline: none; }
.eq-panel-cuerpo { margin: 14px 0 22px; font-family: var(--tipo-cuerpo); font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--texto-tenue); }
.eq-panel-enlace {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--acento); border-radius: 2px;
  font-family: var(--tipo-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}
.eq-panel-enlace:hover { background: var(--acento); color: var(--fondo-alt); }
.eq-flecha { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.eq-panel-enlace:hover .eq-flecha { translate: 3px 0; }

/* «← Oficina» */
.eq-volver.boton {
  top: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 40px); z-index: 21; gap: 10px;
  background: var(--eq-papel); border-color: transparent; color: var(--texto); box-shadow: var(--eq-sombra); font-size: 12px;
}
.eq-volver.boton:hover { background: var(--texto); color: var(--fondo-alt); }
.eq-volver .eq-flecha { rotate: 180deg; }

/* Índice de zonas (scroll y ambos): a la izquierda, porque el panel va a la derecha. */
.eq-indice { right: auto; left: clamp(16px, 3vw, 40px); gap: 14px; }
.eq-indice button { position: relative; width: 12px; height: 12px; border: 1.5px solid var(--texto-tenue); background: var(--eq-papel); transition: background-color 0.3s, border-color 0.3s, scale 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.eq-indice button[aria-current="true"] { background: var(--eq-naranja); border-color: var(--eq-naranja); scale: 1.25; }
.eq-indice button::after {
  content: attr(aria-label); position: absolute; left: 22px; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none;
  padding: 4px 10px; border-radius: 999px; background: var(--eq-papel); box-shadow: var(--eq-sombra);
  font-family: var(--tipo-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--texto); opacity: 0; transition: opacity 0.2s;
}
.eq-indice button:hover::after, .eq-indice button:focus-visible::after { opacity: 1; }

/* Foco visible en todo lo que se toca */
.eq-oficina :focus-visible, .eq-panel :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.eq-zona:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .eq-panel { animation: none; }
  .eq-flecha, .eq-indice button { transition: none; }
}
/* El titular recibe el foco al abrir el panel (para lectores de pantalla), pero no es un control. */
.eq-panel .eq-panel-titulo:focus-visible { outline: none; }

/* La pantalla gigante (L15 y ronda 4, Julio 2026-09-30): el fondo oscuro de la marca, como el hero de la web,
   en perspectiva sobre la pared. Logo a la izquierda y campana a la derecha; se apaga mientras la cámara se
   mueve y debajo queda el mismo reparto grabado en el vídeo (motor/campana.js). Dentro, los colores del tema
   oscuro: la página va en tono claro. */
.eq-pantalla { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; --eq-p-texto: #DFE6EB; --eq-p-cian: #67E8F9;
  background: radial-gradient(120% 90% at 50% 40%, #34314a 0%, #282637 70%); transition: opacity 1.4s ease-in-out; }
.eq-pantalla.eq-apagada { opacity: 0; }
.eq-campana { position: absolute; left: 57%; top: 6%; width: 38%; height: 88%; }
.eq-pantalla-logo { position: absolute; left: 7%; top: 50%; width: 45%; translate: 0 -50%; color: var(--eq-p-texto); }
.eq-logo { display: block; width: 100%; height: auto; overflow: visible; }
.eq-logo-guias path { stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.eq-logo-alambres path { stroke: var(--eq-p-cian); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
/* El montaje (campana.js pone .eq-montando cada vez que la cámara se para): las caras se trazan de izquierda a
   derecha con un alambre cian delante, el alambre se apaga y la palabra se descubre. El hueco del trazo es un
   pelo más largo que el trazo: con los dos iguales asoma el remate redondo al empezar. */
.eq-montando .eq-logo-guias path { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; animation: eq-trazar .9s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * 90ms) forwards; }
.eq-montando .eq-logo-alambres path { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; opacity: 1;
  animation: eq-trazar .9s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * 90ms) forwards, eq-apagar .6s ease-out calc(1.9s + var(--i) * 40ms) forwards; }
.eq-montando .eq-logo-palabra { animation: eq-descubrir .9s cubic-bezier(.16, 1, .3, 1) 1.1s both; }
@keyframes eq-trazar { to { stroke-dashoffset: 0; } }
@keyframes eq-apagar { to { opacity: 0; } }
@keyframes eq-descubrir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .eq-pantalla { transition: none; } }

/* Revisión ui-ux-pro-max (L14):
   · WCAG 2.5.8: el índice da 24 × 24 px de objetivo; el punto visible sigue siendo de 12 px (::before).
   · WCAG 1.4.11: el foco de teclado en una zona necesita 3:1; el trazo naranja da 1,8:1 sobre el
     diorama, así que con foco el trazo pasa a acento (4,9:1) y el relleno naranja se queda. */
.eq-indice button { width: 24px; height: 24px; border: 0; background: transparent; display: grid; place-items: center; }
.eq-indice button::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--texto-tenue); background: var(--eq-papel);
  transition: background-color .3s, border-color .3s, scale .3s cubic-bezier(.16, 1, .3, 1);
}
.eq-indice button:hover, .eq-indice button:focus-visible, .eq-indice button[aria-current="true"] { background: transparent; scale: 1; }
.eq-indice button:hover::before, .eq-indice button:focus-visible::before { background: var(--eq-naranja); border-color: var(--eq-naranja); }
.eq-indice button[aria-current="true"]::before { background: var(--eq-naranja); border-color: var(--eq-naranja); scale: 1.25; }
.eq-indice button::after { left: 28px; }
.eq-zona:focus-visible { stroke: var(--acento); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .eq-indice button::before { transition: none; } }

/* Vacantes (Julio, 2026-09-30): una ficha de papel sobre la silla vacía con una flecha que baja hasta
   el asiento. El ancla es el asiento; la ficha queda encima. Solo con la cámara en la vista general. */
.eq-vacantes { position: absolute; pointer-events: none; }
.eq-vacante {
  --eq-flecha-alto: 44px;
  position: absolute; translate: -50% calc(-100% - var(--eq-flecha-alto)); pointer-events: auto;
  /* Los títulos reales son largos: dos líneas como mucho, para que las dos etiquetas no se pisen. */
  display: grid; gap: 4px; padding: 10px 14px; border-radius: 10px; width: max-content; max-width: 13.5rem;
  background: var(--eq-papel); box-shadow: var(--eq-sombra); color: var(--texto); text-decoration: none;
  transition: opacity .25s linear, background-color .3s, color .3s;
}
.eq-vacante::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: var(--eq-flecha-alto); translate: -50% 0;
  background: linear-gradient(var(--eq-naranja), var(--eq-naranja)) top / 2px calc(100% - 8px) no-repeat;
}
.eq-vacante::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + var(--eq-flecha-alto) - 9px); translate: -50% 0;
  border: 6px solid transparent; border-top: 9px solid var(--eq-naranja); border-bottom: 0;
}
.eq-vacante-ante { display: flex; align-items: center; gap: 8px; font-family: var(--tipo-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }
.eq-vacante-ante::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eq-naranja); flex: none; }
.eq-vacante-titulo { font-family: var(--tipo-cuerpo); font-weight: 700; font-size: 14px; line-height: 1.25; text-wrap: balance; }
.eq-vacante:hover { background: var(--texto); color: var(--fondo-alt); }
.eq-vacante:hover .eq-vacante-ante { color: var(--fondo-alt); }
.eq-oficina:not([data-camara="general"]) .eq-vacante, .eq-oficina[data-fase="zona"] .eq-vacante { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .eq-vacante { transition: none; } }

/* Hover de las zonas. El polígono sigue siendo el área de clic, pero no se pinta; se ilumina la tapa de un mueble
   («forma») o late un punto («puntos»). Ronda 4 (Julio): solo la cara de arriba y sin líneas. La luz es una
   máscara del tablero (tapa-<zona>.png) que aclara el vídeo en modo screen, con un halo cálido: una lámpara sobre
   la mesa, y lo que hay encima (una persona, un monitor, una taza) sin teñir. Entra despacio y sale rápido. El
   contorno de la tapa solo se pinta con foco de teclado (WCAG 2.4.7 y 1.4.11: el acento da 4,9:1 sobre el
   diorama; el naranja, 1,8:1). */
.eq-oficina[data-hover] .eq-zona, .eq-oficina[data-hover] .eq-zona:hover, .eq-oficina[data-hover] .eq-zona:focus-visible { fill: transparent; stroke: transparent; }
.eq-luces { position: absolute; pointer-events: none; }
.eq-luz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgb(242 154 74 / 0.55)) drop-shadow(0 0 20px rgb(242 154 74 / 0.3)); transition: opacity .18s ease-out; }
.eq-oficina[data-hover="forma"] .eq-luz.eq-encendida { opacity: 0.75; transition: opacity .35s cubic-bezier(.16, 1, .3, 1); }
.eq-oficina:not([data-hover="forma"]) .eq-luces, .eq-oficina[data-fase="zona"] .eq-luces,
.eq-oficina[data-fase="yendo"] .eq-luces, .eq-oficina[data-fase="volviendo"] .eq-luces { display: none; }
.eq-tapa { fill: none; stroke: transparent; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.eq-oficina[data-hover="forma"] .eq-encendida .eq-zona:focus-visible + .eq-tapa { stroke: var(--acento); }
.eq-puntos { position: absolute; pointer-events: none; }
.eq-oficina:not([data-hover="puntos"]) .eq-puntos { display: none; }
.eq-punto { position: absolute; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--eq-naranja);
  border: 2px solid var(--eq-papel); animation: eq-latido 2.4s cubic-bezier(.16, 1, .3, 1) infinite; transition: scale .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes eq-latido { 0% { box-shadow: 0 0 0 0 rgb(242 154 74 / 0.6); } 70%, 100% { box-shadow: 0 0 0 18px rgb(242 154 74 / 0); } }
.eq-punto::after {
  content: attr(data-nombre); position: absolute; left: 22px; top: 50%; translate: 0 -50%; white-space: nowrap; padding: 4px 10px;
  border-radius: 999px; background: var(--eq-papel); box-shadow: var(--eq-sombra); font-family: var(--tipo-mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--texto); opacity: 0; transition: opacity .25s; }
.eq-punto.eq-encendida { scale: 1.35; }
.eq-punto.eq-encendida::after { opacity: 1; }
.eq-oficina:not([data-camara="general"]) .eq-puntos, .eq-oficina[data-fase="zona"] .eq-puntos { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .eq-punto { animation: none; } .eq-luz, .eq-punto { transition: none; } }

/* Ficha de persona: foto redonda y el «Acerca de» de LinkedIn bajo el cargo. */
.eq-panel-foto { display: block; width: 88px; height: 88px; margin: 0 0 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--eq-papel), 0 0 0 4px var(--eq-naranja); }
.eq-panel-ficha .eq-panel-cuerpo { margin-bottom: 10px; }
.eq-panel-bio { margin: 0 0 22px; font-family: var(--tipo-cuerpo); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--texto-tenue);
  max-height: 11.5em; overflow-y: auto; }

/* El titular de la página «Equipo», solo para lectores de pantalla: la oficina ocupa la primera pantalla. */
.eq-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }