/* IMARA Group — PÁGINA ÚNICA (27-oct-2026, aprobado por Robin). Ver js/una-pagina.js y REFERENTES.md ("Los 4 referentes principales").
   Inicio, Construcción & Desarrollo, Formación & Recursos y ¿Quiénes somos? son grandes secciones (.bloque) de index.html, bajo un mismo scroll.
   - El menú flota encima de todo (transparente) y las escenas ocupan la pantalla completa.
   - Detrás hay un solo espacio con dos versiones, clara y oscura (.mundo), que se funden según la sección que se ve.
   Para volver a las páginas separadas: ver prototipo/_respaldo-antes-de-una-sola-pagina/LEEME.txt */

/* las escenas usan toda la pantalla: el menú ya no ocupa una franja propia (su barra conserva su altura) */
/* (0.01px y no 0: los scripts leen este valor y, si es 0, usan 72 por defecto) */
html:has(body.una-pagina) { --alto-menu: 0.01px; background: var(--fondo-html, #EFEEEC); }
body.una-pagina { background: transparent; }
body.una-pagina .menu__barra { height: 72px; }
body.una-pagina .menu { position: fixed; left: 0; right: 0; top: 0; }
@media (max-width: 900px) { body.una-pagina .menu__barra { height: 64px; } }

/* scroll suave (Lenis): no se mezcla con el scroll suave del navegador */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }

/* las grandes secciones */
.bloque { position: relative; }
.bloque.tema-oscuro, .bloque.tema-claro { background: transparent; }
/* los títulos de arriba de cada escena no quedan debajo del menú */
body.una-pagina .cab, body.una-pagina .tunel__cab, body.una-pagina .fm__cab, body.una-pagina .nomesc__cab { scroll-margin-top: 80px; }
body.una-pagina .ov__cab, body.una-pagina .tunel__cab, body.una-pagina .fm__cab, body.una-pagina .nomesc__cab, body.una-pagina .t3d__pq-cab { padding-top: 64px; }
body.una-pagina .estacion__escena { padding-top: 56px; box-sizing: border-box; }

/* el espacio de fondo: la versión clara y la oscura, una encima de la otra; js/una-pagina.js decide cuánto se ve cada una según el scroll */
body.una-pagina .mundo { opacity: var(--ver, 0); }
body.una-pagina .mundo__luz--a { translate: calc(var(--mx, 0) * 5vw) calc(var(--my, 0) * 4vh); }
body.una-pagina .mundo__luz--b { translate: calc(var(--mx, 0) * -4vw) calc(var(--my, 0) * -3vh); }
body.una-pagina .mundo__luz { transition: translate 1.4s cubic-bezier(.22, 1, .36, 1); }
/* luz que sigue al mouse, muy suave (los referentes siempre tienen "algo vivo") */
.mundo__foco { position: absolute; left: 0; top: 0; width: 38vw; height: 38vw; margin: -19vw 0 0 -19vw; border-radius: 50%; pointer-events: none;
  transform: translate(calc(var(--fx, 50) * 1vw), calc(var(--fy, 40) * 1vh)); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
  background: radial-gradient(circle, rgba(209, 201, 183, .10), rgba(209, 201, 183, 0) 62%); }
.mundo--claro .mundo__foco { background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%); }

/* barra de avance vertical a la derecha, con una marca por sección (como Oryzo) */
.avance { position: fixed; right: clamp(10px, 1.4vw, 22px); top: 50%; z-index: 40; height: 34vh; width: 14px; transform: translateY(-50%); pointer-events: none; color: var(--m-tinta, #1c1c1c); opacity: .75; transition: opacity .4s ease; }
.avance__riel { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .25; }
.avance__lleno { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: currentColor; transform-origin: top; transform: scaleY(var(--p, 0)); }
.avance__marca { position: absolute; left: 50%; width: 7px; height: 1px; margin-left: -3px; background: currentColor; opacity: .6; }
.avance__punto { position: absolute; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: currentColor; top: calc(var(--p, 0) * 100%); }
@media (max-width: 760px) { .avance { display: none; } }

/* cuando la persona está quieta al comienzo de una sección: "desliza" con la flecha (se apaga al moverse) */
.desliza { position: fixed; left: 50%; bottom: clamp(16px, 3.4vh, 30px); z-index: 40; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--m-tinta, #1c1c1c); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.desliza svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; animation: desliza-flota 2.2s ease-in-out infinite; }
.desliza--ver { opacity: .8; }
@keyframes desliza-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* títulos de portada en el tamaño grande (quinto tamaño, --t-display) */
/* (solo nombres cortos: "Taller IMARA". Las frases largas, como la de ¿Quiénes somos?, se quedan en el tamaño de título) */
body.una-pagina .t3d__marca { font-size: var(--t-display); line-height: .98; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  html:not(.ver-efectos) .mundo__luz, html:not(.ver-efectos) .mundo__foco { transition: none; }
  html:not(.ver-efectos) .desliza svg { animation: none; }
}

/* arrastrar para pasar (js/arrastre.js) */
[data-arrastre] { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
html.arrastrando, html.arrastrando * { cursor: grabbing !important; }

/* la retícula clara siempre va DEBAJO y la oscura encima (se mezcla con su opacidad o, en la cortina, con su recorte) */
body.una-pagina .mundo--claro { z-index: -2; opacity: 1; }

/* ===================== TANDA 1 (27-oct-2026): referente Oryzo ===================== */
/* PANTALLA DE CARGA (js/cargador.js) */
html.cargando, html.cargando body { overflow: hidden; }
.cargador { position: fixed; inset: 0; z-index: 200; background: #EFEEEC; display: grid; place-items: center; transition: opacity .45s ease; }
.cargador--fuera { opacity: 0; pointer-events: none; }
.cargador__velo-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cargador__velo { fill: #EFEEEC; }
.cargador__centro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cargador__marco { position: relative; width: clamp(130px, 14vw, 175px); aspect-ratio: 1; }
.cargador__svg, .cargador__tri { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cargador__lineas line, .cargador__lineas circle { fill: none; stroke: rgba(28, 28, 28, .3); stroke-width: 1.4; stroke-dasharray: 8 9; vector-effect: non-scaling-stroke; animation: cargador-dibuja 1s cubic-bezier(.22, 1, .36, 1) both; }
.cargador__lineas line:nth-child(2) { animation-delay: .1s; } .cargador__lineas line:nth-child(3) { animation-delay: .18s; } .cargador__lineas line:nth-child(4) { animation-delay: .24s; }
.cargador__lineas circle { stroke: rgba(28, 28, 28, .22); animation-delay: .3s; }
@keyframes cargador-dibuja { from { opacity: 0; } to { opacity: 1; } }
/* el triángulo cerrado, negro; el "hueco" es una cuña del color del fondo que gira (js/cargador.js) */
.cargador__tri path { fill: none; stroke: #1c1c1c; stroke-width: 85; stroke-linejoin: miter; stroke-miterlimit: 10; }
.cargador__tri { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: cargador-dibuja .6s ease .3s both; }
/* el isotipo original, en su lugar exacto dentro del dibujo (izq. 11,06 %, arriba 4,94 %, ancho 77,89 %, alto 67,56 %) */
.cargador__img { position: absolute; left: 11.06%; top: 4.94%; width: 77.89%; height: 67.56%; max-width: none; display: block; opacity: 0; }
/* nubes del final: cubren y se abren hacia la portada */
.cargador__nube { position: absolute; top: 50%; width: max(120vw, 1300px); max-width: none; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.cargador__nube--izq { right: 35%; transform: translateY(-50%); }
.cargador__nube--der { left: 35%; transform: translateY(-50%) scaleX(-1); }.cargador__texto { margin: 0; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #1c1c1c; font-weight: 400; white-space: nowrap; }
.cargador__cifra { display: inline-block; min-width: 4.2ch; text-align: left; font-variant-numeric: tabular-nums; }

/* MENÚ CON FOCO: al pasar el mouse por el menú, la página se oscurece y solo el menú queda iluminado (como Oryzo) */
.foco-menu { position: fixed; inset: 0; z-index: 45; background: rgba(12, 12, 11, .52); opacity: 0; pointer-events: none; transition: opacity .45s cubic-bezier(.22, 1, .36, 1); }
html.menu-en-foco .foco-menu { opacity: 1; }
html.menu-en-foco .menu { --m-tinta: #fff !important; --m-gris: rgba(255, 255, 255, .72) !important; }

/* TEXTO SELECCIONADO en verde de la marca (como el naranja de Oryzo) */
::selection { background: var(--fern); color: #fff; }

/* "DESLIZA" SIEMPRE ABAJO (como el "Scroll to continue" de Oryzo); se esconde al final, con un producto abierto o donde hay otra flecha */
body.una-pagina .desliza { opacity: .78; }
body.una-pagina .desliza.desliza--fuera { opacity: 0; }
body.una-pagina .portada__flecha, body.una-pagina .ca__flecha { display: none; }

/* MOVIMIENTO CON EL MOUSE O EL GIROSCOPIO (js/interaccion.js): --ptr-x / --ptr-y van de -1 a 1 */
/* portada: cada capa se mueve distinto (profundidad); el logo y la ventana del isotipo no se mueven, para que sigan exactos */
body.una-pagina .escena__cielo { translate: calc(var(--ptr-x, 0) * -6px) calc(var(--ptr-y, 0) * -4px); }
body.una-pagina .escena__nube--lejos { translate: calc(var(--ptr-x, 0) * -12px) calc(var(--ptr-y, 0) * -6px); }
body.una-pagina .escena__nube--cerca, body.una-pagina .escena__nube--ini { translate: calc(var(--ptr-x, 0) * -24px) calc(var(--ptr-y, 0) * -10px); }
body.una-pagina .escena__edificio, body.una-pagina .escena__ventana img { translate: calc(var(--ptr-x, 0) * -16px) calc(var(--ptr-y, 0) * -8px); }   /* el edificio visto por la ventana se mueve igual que el de afuera */
body.una-pagina .escena__texto { translate: calc(var(--ptr-x, 0) * 8px) calc(var(--ptr-y, 0) * 5px); }
body.una-pagina .ca__foto img { translate: calc(var(--ptr-x, 0) * -12px) calc(var(--ptr-y, 0) * -8px); }
body.una-pagina .obh__foto img { translate: calc(var(--ptr-x, 0) * -10px) calc(var(--ptr-y, 0) * -6px + var(--vy, 0px)); }
body.una-pagina .fm__foto img, body.una-pagina .paq__foto, body.una-pagina .mvv__foto, body.una-pagina .acc__foto, body.una-pagina .gal img, body.una-pagina .persona__marco img, body.una-pagina .respaldo__fotos img, body.una-pagina .historia__foto img, body.una-pagina .espera__foto img { translate: calc(var(--ptr-x, 0) * -7px) calc(var(--ptr-y, 0) * -5px + var(--vy, 0px)); scale: 1.1; }
body.una-pagina .areas__titulo, body.una-pagina .obh__palabras { translate: calc(var(--ptr-x, 0) * 4px) calc(var(--ptr-y, 0) * 3px); }

/* con "menos movimiento" la página se lee de corrido: el aviso "Desliza" no hace falta y podía quedar encima del texto */
@media (prefers-reduced-motion: reduce) { html:not(.ver-efectos) .desliza { display: none; } }

/* ===================== TANDA 2 (27-oct-2026): escenas con transiciones tipo Oryzo ===================== */
/* Portada → isotipo: la niebla del final ya no se va a blanco; se queda y se OSCURECE con la luz hasta el espacio oscuro del isotipo (sin cortina) */
/* brillo verde muy tenue detrás del isotipo 3D (como el resplandor naranja de Oryzo); sigue un poco al mouse */
body.una-pagina .n3d__escena::before { content: ""; position: absolute; left: 50%; top: 52%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(81, 107, 56, .42), rgba(81, 107, 56, .12) 45%, rgba(81, 107, 56, 0) 70%); filter: blur(30px);
  translate: calc(var(--ptr-x, 0) * 4vw) calc(var(--ptr-y, 0) * 3vh); transition: translate .6s cubic-bezier(.22, 1, .36, 1); }
body.una-pagina .n3d__lienzo { z-index: 1; }
/* El nombre IMARA: detrás, el boceto a mano alzada del logo (dibujo de Robin) casi invisible; se ILUMINA donde pasa el mouse
   (o hacia donde se inclina el teléfono) y gira muy despacio en sentido contrario a las manecillas del reloj (como los dibujos de Oryzo) */
.nomesc__boceto { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at calc(50% + var(--ptr-x, 0) * 50%) calc(50% + var(--ptr-y, 0) * 50%), #000 0, rgba(0, 0, 0, .55) 9vmax, rgba(0, 0, 0, .1) 26vmax);
          mask-image: radial-gradient(circle at calc(50% + var(--ptr-x, 0) * 50%) calc(50% + var(--ptr-y, 0) * 50%), #000 0, rgba(0, 0, 0, .55) 9vmax, rgba(0, 0, 0, .1) 26vmax); }
.nomesc__boceto-giro { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 100vmax; margin: -50vmax 0 0 -75vmax;
  background: url(../img/boceto-logo-mano-alzada.jpg) center / contain no-repeat; filter: invert(1) grayscale(1) contrast(1.25); mix-blend-mode: screen; opacity: .7;
  animation: boceto-gira 160s linear infinite; }
@keyframes boceto-gira { to { rotate: -360deg; } }
.nomesc__logo, .nomesc__cab, .nomesc__principios, .nomesc__pista { z-index: 2; }
@media (prefers-reduced-motion: reduce) { html:not(.ver-efectos) .nomesc__boceto { display: none; } }
/* Las cuatro líneas como galería tipo Oryzo (js/escena-construccion.js): marco punteado y fotos que son "ventanas" */
.ca__marco { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; }
.ca__marco rect { fill: none; stroke: var(--carbon); stroke-width: 1.2; stroke-dasharray: 5 6; opacity: .7; }
.ca__foto { opacity: 0; visibility: hidden; }
.ca__hero { opacity: 0; visibility: hidden; }
.ca--quieta .ca__foto, .ca--quieta .ca__hero { opacity: 1; visibility: visible; }
.ca__tarjeta .proy__foto { scale: 1.16; }
body.una-pagina .proy__foto { translate: calc(var(--ptr-x, 0) * -7px + var(--vx, 0px)) calc(var(--ptr-y, 0) * -5px + var(--vy, 0px)); }
/* el único fundido a negro (js/interaccion.js) */
.fundido { height: 150svh; }
.fundido__negro { position: fixed; inset: 0; z-index: 30; background: #0d0d0c; opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html:not(.ver-efectos) .fundido { height: 0; } }

/* ===================== TANDA 3 (27-oct-2026) ===================== */
/* piezas de maqueta que bajan flotando en el cierre (js/particulas.js); el texto y los enlaces quedan por encima */
.particulas { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; pointer-events: none; display: block; }
#contacto-final .cuentanos, body.una-pagina .pie { position: relative; z-index: 2; }
#contacto-final { overflow: visible; }

/* ===================== RONDA 22 (27-oct-2026): observaciones de Robin tras las tres tandas ===================== */
html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; }              /* sin barra nativa: la propia barra de avance la reemplaza (y todo queda exactamente centrado) */
/* LAS CUATRO LÍNEAS: proporciones del referente (Oryzo) */
.ca__fondo { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 8% 108%, rgba(81, 107, 56, .62), rgba(81, 107, 56, .18) 45%, rgba(81, 107, 56, 0) 72%), radial-gradient(ellipse 80% 70% at 50% 45%, #1d1d1b, #121211 75%); }
.ca__escena { color: #fff; }
.ca__cab { top: 13vh; right: auto; max-width: min(23vw, 340px); color: #fff; }
.ca__cab .areas__etiqueta { color: rgba(255, 255, 255, .6); }
.ca__cab .areas__titulo { color: #fff; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; }
.ca__marco rect { stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 1; }
.ca__tarjeta .proy__tarjeta { aspect-ratio: 4 / 5; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.ca__tarjeta .proy__texto { opacity: var(--luz, 1); transition: opacity .3s ease; }
.ca__foto { z-index: 1; }
.ca__foto-b { position: absolute; inset: 0; opacity: 0; }
.ca__hero { z-index: 3; }
@media (max-width: 760px) { .ca__cab { top: 9vh; max-width: 70vw; } .ca__cab .areas__titulo { font-size: 24px; } }
.ca--quieta .ca__fondo, .ca--quieta .ca__marco { display: none; }
.ca--quieta .ca__foto-b { display: none; }
.ca--quieta .ca__cab, .ca--quieta .ca__cab .areas__titulo, .ca--quieta .ca__tarjeta .proy__texto { color: var(--tinta); }
.nomesc__escena .ca__marco rect { stroke: rgba(255, 255, 255, .85); }

/* dibujos a mano alzada en órbita alrededor del isotipo (js/orbita.js) */
.orbita { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orbita__dib { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; opacity: 0; filter: invert(1) grayscale(1) contrast(1.3); mix-blend-mode: screen; will-change: transform, opacity; }
.n3d__lienzo { z-index: 1; } .n3d__nota { z-index: 3; } .n3d__intro { z-index: 3; } .n3d__lineas, .n3d__plano { z-index: 1; }

/* Preguntas frecuentes y Lista de espera: sus dos columnas viven dentro del contenedor de la estación (antes quedaban arrinconadas a la izquierda) */
.faqbanda, .espera { display: block; }
.faqbanda > .estacion__escena > .estacion__contenido { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.espera > .estacion__escena > .estacion__contenido { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
@media (max-width: 900px) { .faqbanda > .estacion__escena > .estacion__contenido, .espera > .estacion__escena > .estacion__contenido { grid-template-columns: 1fr; } }

/* Cierre muy oscuro (como en Oryzo): la retícula casi desaparece y las piezas solo se ven donde las ilumina el mouse */
#contacto-final { background: linear-gradient(to bottom, rgba(7, 7, 6, 0), rgba(7, 7, 6, .94) 38%); }
body.una-pagina .pie { background: transparent; }
body.una-pagina main + .bloque { background: rgba(7, 7, 6, .94); }

@media (max-width: 760px) {
  body.una-pagina .t3d__intro { top: 10vh; bottom: auto; transform: none; right: var(--margen); }
  body.una-pagina .t3d__marca { font-size: 40px; }
  body.una-pagina .t3d__texto { display: none; }
}

/* ===================== RONDA 23 (27-oct-2026) ===================== */
/* menú: al pasar el mouse el texto solo se agranda un poco (sin rodar ni saltar) */
.menu__enlace { transition: color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .menu__lista > .menu__item > .menu__enlace:hover, .menu__lista > .menu__item > .menu__enlace:focus-visible { transform: scale(1.07); } }
/* las capas que se mueven con el mouse tienen margen (un poco de zoom): nunca se ve su borde */
body.una-pagina .escena__cielo, body.una-pagina .escena__nube, body.una-pagina .escena__edificio img, body.una-pagina .escena__ventana img { scale: 1.07; }
/* cuatro líneas: sin giro 3D; el texto de la tarjeta sigue un poco al mouse */
.ca__tarjeta .proy__texto { translate: calc(var(--ptr-x, 0) * 7px) calc(var(--ptr-y, 0) * 5px); transition: opacity .3s ease, translate .5s cubic-bezier(.22, 1, .36, 1); }
.ca__tarjeta .proy__tarjeta:hover .proy__foto { transform: none; }
/* CIERRE A PANTALLA COMPLETA: contacto abajo, pie debajo, piezas por toda la ventana; aparece suave sobre el final de "Formamos" */
#contacto-final { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(6, 6, 5, .93); }
#contacto-final .cuentanos, #contacto-final .pie, #contacto-final .particulas { transition: opacity 1s cubic-bezier(.22, 1, .36, 1); }
#contacto-final.encadena:not(.llego) .cuentanos, #contacto-final.encadena:not(.llego) .pie, #contacto-final.encadena:not(.llego) .particulas { opacity: 0; }

/* Cuatro líneas, mecánica del referente: ventana fija con las fotos grandes por dentro; fila de miniaturas por fuera (js/escena-construccion.js) */
.ca__ventana { position: absolute; z-index: 2; overflow: hidden; opacity: 0; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .85); }
.ca__ventana .ca__tarjetas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ca__ventana .ca__tarjeta { position: absolute; left: 50%; top: 50%; opacity: 1; }
.ca__ventana .ca__tarjeta .proy__tarjeta { box-shadow: none; }
.ca__minis { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ca__minis img { position: absolute; left: 0; top: 0; object-fit: cover; max-width: none; opacity: 0; filter: brightness(.62); will-change: transform, clip-path; }
.ca--quieta .ca__minis { display: none; }