@import url(../../css/base/fuentes.css);

/* ======================= */
/* == V A R I A B L E S == */
/* ======================= */

:root {
    --colorPrincipal: white;

    /* == C O N T O R N O S == */
    /* Opacidad de todos los bordes "dashed" del sitio (marco, opciones...)
       — bajada un 70% respecto al 100% original. Tocar solo esta variable
       aclara/oscurece todos los contornos a la vez. */
    --opacidadContornos: .3;
    --colorContorno: color-mix(in srgb, var(--colorPrincipal) calc(var(--opacidadContornos) * 100%), transparent);
    /* Grosor de esos mismos contornos (marco, opciones). */
    --grosorContorno: 8px;

    /* == T A M A Ñ O S == */
    /* Tamaño de partida del que cuelgan casi todos los tamaños de texto
       del sitio (el resto están en % relativos al font-size del body). */
    --tamanoBaseTexto: 24px;
    /* Tamaño (en pantallas normales) de los iconos grandes de sección
       (.nodo-svg) y de los pequeños y siempre visibles de las opciones
       (.opcion-icono). En pantallas grandes crecen en proporción — ver
       los clamp() que los usan más abajo. */
    --tamanoIconoNodo: 90px;
    --tamanoIconoOpcion: 44px;

    /* == F U E N T E S ==*/
    --fuente-creativa: hypermonosaturation;
    --fuente-elegante: ;
    --fuente-tecnologica: ;
    --fuente-normal: playfairDisplay;
    --fuente-molona: martius;
}

*{box-sizing: border-box;}

/* =============== */
/* == R E S E T == */
/* =============== */

body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    font-family: var(--fuente-normal);
    font-size: var(--tamanoBaseTexto);
    transition: background-color .4s ease, color .4s ease;
}


.elDocumento-contenedor {
    padding-bottom: 15vh;
}


/* =============== */
/* == T E M A S == */
/* =============== */

body.elDocumento-temaDefecto {
    --fondo-tema: #121214;
    background-color: var(--fondo-tema);
    color: #a0a0a5;
}

body.elDocumento-temaHabitacion {
    --fondo-tema: cadetblue;
    background-color: var(--fondo-tema);
    color: antiquewhite;
}

body.elDocumento-temaPortfolio {
    --fondo-tema: rgb(228, 181, 26);
    background-color: var(--fondo-tema);
    color: antiquewhite;
}

/* ============================================== */
/* == M A R C O   ( N A V E G A C I Ó N )       == */
/* ============================================== */
/* Sustituye al HUD + "← Volver" + "↑ Volver" + los dos botones laterales
   flotantes: un único marco de puntitos, fijo, a modo de plano/passe-
   partout, con hasta 4 zonas de texto (arriba/abajo/izquierda/derecha)
   pegadas a su borde. Arriba y abajo existen siempre (llevan hacia
   atrás/adelante); los laterales solo si la sección/encrucijada actual
   los declara (ver actualizarMarco en main.js). El propio texto de cada
   zona dice adónde lleva — no hace falta icono. */
.marco-borde {
    position: fixed;
    inset: 36px;
    border: var(--grosorContorno) dashed var(--colorContorno);
    pointer-events: none;
    z-index: 998;
}

.marco-zona {
    position: fixed;
    z-index: 1000;
    background: var(--fondo-tema, #121214);
    border: none;
    color: var(--colorPrincipal);
    font-family: martius;
    text-transform: uppercase;
    font-size: 44px;
    letter-spacing: .04em;
    padding: 8px 28px;
    cursor: pointer;
    transition: opacity .2s;
}

.marco-zona:hover {
    opacity: 1;
}

.marco-zona:disabled {
    opacity: .3;
    cursor: default;
}

.marco-arriba,
.marco-abajo {
    left: 50%;
    transform: translateX(-50%);
    max-width: 70vw;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marco-arriba { top: 10px; }
.marco-abajo { bottom: 10px; }

.marco-izquierda,
.marco-derecha {
    top: 50%;
    writing-mode: vertical-rl;
    padding: 14px 4px;
    max-height: 60vh;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
}

.marco-izquierda.visible,
.marco-derecha.visible {
    opacity: .85;
    pointer-events: auto;
}

.marco-izquierda.visible:hover,
.marco-derecha.visible:hover {
    opacity: 1;
}

.marco-izquierda {
    left: 20px;
    transform: translateY(-50%) rotate(180deg);
}

.marco-derecha {
    right: 20px;
    transform: translateY(-50%);
}

.marco-cerrar {
    top: 20px;
    right: 20px;
    padding: 4px 10px;
    line-height: 1;
}

/* ======================= */
/* == S E C C I O N E S == */
/* ======================= */

.elDocumento-seccion {
    min-height: 100vh;
    padding: 10vh 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =================== */
/* == P R Ó L O G O == */
/* =================== */
.prologo-etiqueta {
    font-family: martius;
    font-size: 90%;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 24px;
}

.prologo-titulo {
    font-family: hypermonosaturation;
    font-size: 800%;
    text-transform: uppercase;
}

.prologo-texto {
    line-height: 1.5;
    opacity: .9;

    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 100%;
}

.prologo-texto p {
    margin-bottom: 84px;
    font-size: 200%;
}

/* Posiciones en % del section #presentacion (position:relative), no en
   px, para que la composicion escale con la ventana — mismo cambio que
   los dos <p> absolutos de index.html (punto 1 de MEJORAS-PENDIENTES,
   resuelto 2026-07-27). Los % salen de los px originales medidos sobre
   la calibracion de ~900x950. */
#prologo-jon {
    font-size: 600%;
    font-family: var(--fuente-creativa);
    position: absolute;
    top: 17%;
    left: 7%;
    transform: rotate(2deg);
}

#prologo-kosmiko {
    font-size: 846%;
    font-family: var(--fuente-creativa);
    position: absolute;
    top: 32%;
    left: 3%;
    transform: rotate(-3deg);
}

.destacado {
    font-family: martius;
}

body.elDocumento-temaHabitacion .destacado {
    color: white;
}

body.elDocumento-temaPortfolio .destacado {
    color: black;
}

.texto-enfasis {
    font-style: italic;
    opacity: .7;
    border: 3px dashed var(--colorContorno);
    margin: 32px 0;
}

.prologo-invitacion {
    font-family: martius;
    font-size: 200%;
    margin-top: 50px;
}

.prologo-texto p,
.prologo-invitacion {
    opacity: 0;
    transform: translateY(40px);
}

/* PRESENTACIÓN / INTRODUCCIÓN / INTRODUCCIÓN DETALLADA: al contrario que
   los .elDocumento-nodo que llegan por fetch (ya animados por JS antes de
   pintarse), estas tres viven en el HTML desde el principio — sin esta
   base, se ven un instante a opacidad completa antes de que main.js
   corra en DOMContentLoaded y las oculte con gsap.set. Mismo patrón
   anti-FOUC que .prologo-texto p arriba. */
#presentacion .nodo-titulo,
#presentacion .nodo-texto p,
#presentacion [data-animacion],
#introduccion .nodo-titulo,
#introduccion .nodo-texto p,
#introduccion [data-animacion],
#introduccion-detallada .nodo-titulo,
#introduccion-detallada .nodo-texto p,
#introduccion-detallada [data-animacion] {
    opacity: 0;
    transform: translateY(40px);
}

/* =========================== */
/* == E N C R U C I J A D A == */
/* =========================== */
.elDocumento-encrucijada {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.elDocumento-encrucijada-pregunta {
    font-family: martius;
    font-size: 110%;
    text-transform: uppercase;
    opacity: .65;
    margin: 60px 0 20px;
}

.elDocumento-encrucijada-opciones {
    position: relative;
    display: flex;
    /* Antes 100vw (de borde a borde de la pantalla) — el borde de las
       opciones sobresalía por fuera del marco (.marco-borde). Se
       descuenta el mismo margen a cada lado que tenga el marco en ese
       momento (inset:36px en escritorio, calc(...) x2) para que quede
       por dentro. .elDocumento-encrucijada ya centra a sus hijos (flex,
       align-items:center), así que basta con encoger el ancho. */
    width: calc(100vw - 72px);
    height: 40vh;
    overflow: hidden;
}

.elDocumento-encrucijada-opciones .opcion {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mismo trazo que .marco-borde (grosor/opacidad via variables).
       Arriba/abajo se explican en .opcion.elegida más abajo. Los lados NO
       van aquí — ver .opcion-borde-izquierdo justo debajo. */
    border-bottom: var(--grosorContorno) dashed var(--colorContorno);
    transition: border 0.3s ease;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}

/* Borde lateral, opcional por opción — se decide desde el HTML con esta
   clase, no automáticamente por posición: en encrucijadas de más de 2
   opciones (como "Elementos Habitación") "cuál va primero" no basta,
   hace falta poder marcar cada hueco a mano. Actúa de separador entre
   opciones vecinas: cada una solo lleva SU izquierdo (nunca un derecho
   propio), así dos opciones contiguas no acaban con doble línea entre
   medias — la de la izquierda no necesita repetir lo que ya pinta el
   izquierdo de la de al lado. La opción más a la izquierda de cada
   encrucijada nunca lleva esta clase: ese borde coincidiría con la zona
   .marco-izquierda del marco de navegación. Por el mismo motivo no
   existe una clase "borde derecho" — la opción más a la derecha
   coincidiría con .marco-derecha, y el resto ya queda separado por el
   izquierdo de su vecina. */
.opcion-borde-izquierdo {
    border-left: var(--grosorContorno) dashed var(--colorContorno);
}

/* El "pulsar/seleccionar" ya no toca la caja de la opción (ni fondo ni
   transform) — solo su contenido se apaga/enciende, y el borde cambia
   de forma según el estado (ver .opcion.elegida más abajo). */
.opcion-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: .4;
    transition: opacity .3s ease;
}

.opcion:hover .opcion-contenido {
    opacity: 1;
}

/* Distinta de .nodo-svg a propósito: un icono de opción es solo
   decorativo y siempre visible, no algo que revelar/dibujar al hacer
   scroll — si llevara la clase .nodo-svg, aplicarTransiciones (y el modo
   pin) lo confundirían con contenido de la sección y lo animarían/
   ocultarían igual que a un icono real, además de intentar pinearlo
   dentro de la timeline pineada de una sección que ni siquiera es esta.
   renderizarIconosEn ya inyecta cualquier [data-icono] sin importar la
   clase, así que basta con el atributo para que aparezca el SVG. */
.opcion-icono {
    width: clamp(var(--tamanoIconoOpcion), 3vw, calc(var(--tamanoIconoOpcion) * 2.73));
    height: clamp(var(--tamanoIconoOpcion), 3vw, calc(var(--tamanoIconoOpcion) * 2.73));
    margin-bottom: 12px;
    opacity: .85;
}

.opcion-icono svg {
    width: 100%;
    height: 100%;
}

/* Seleccionada: el contenido se queda encendido y arriba/abajo se
   invierte — pasa a tener borde arriba, no abajo, como si la opción se
   abriera hacia el contenido nuevo que aparece justo debajo. El lateral
   (si lo tiene, vía .opcion-borde-izquierdo) no se toca aquí. */
.opcion.elegida {
    border-top: var(--grosorContorno) dashed var(--colorContorno);
    border-bottom: none;
}

.opcion.elegida .opcion-contenido {
    opacity: 1;
}

@keyframes opcionFlotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.opcion.elegida .opcion-contenido h3 {
    font-size: 130%;
    transition: font-size .3s ease;
    animation: opcionFlotar 2.6s ease-in-out infinite;
}

.opcion.cargando {
    opacity: .6;
    cursor: wait;
}

body.elDocumento-temaHabitacion .opcion.elegida {
    color: var(--colorPrincipal);
    border-color: var(--colorContorno);
}

body.elDocumento-temaPortfolio .opcion.elegida {
    color: var(--colorPrincipal);
    border-color: var(--colorContorno);
}

/* ================================= */
/* == N O D O   G E N É R I C O   == */
/* ================================= */
.elDocumento-nodo {
    width: 100%;
    max-width: 700px;
    min-height: 100vh;
    padding: 12vh 40px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Ancla estable para un .fondo-dibujo hijo (position:absolute) antes
       de que arranque el pin — en cuanto GSAP pinea este nodo le pone su
       propio position:fixed inline, que también sirve de ancla, pero sin
       esto de por medio el fondo se posicionaría contra el siguiente
       ancestro posicionado (el envoltorio) durante ese instante previo. */
    position: relative;
}

/* clamp() en vez de un tamaño fijo: en pantallas normales se queda en
   el mínimo (90px, igual que antes), pero a partir de cierto ancho de
   viewport empieza a crecer solo, sin depender de un @media aparte —
   en un 4K (~3840px) llega a rondar los 250px, casi 3 veces el tamaño
   de partida. */
.nodo-svg {
    width: clamp(var(--tamanoIconoNodo), 6.5vw, calc(var(--tamanoIconoNodo) * 2.78));
    height: clamp(var(--tamanoIconoNodo), 6.5vw, calc(var(--tamanoIconoNodo) * 2.78));
    margin-bottom: 24px;
}

.nodo-svg svg {
    width: 100%;
    height: 100%;
}

.nodo-titulo {
    font-family: hypermonosaturation;
    font-size: 220%;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.nodo-texto {
    line-height: 1.5;
    opacity: .9;
}

.nodo-texto p {
    margin-bottom: 32px;
}

/* CARRUSEL DE DIAPOSITIVAS — usado por data-diapositiva en modo pin (ver
   aplicarTransicionesPineadas en transiciones.js). Cada .diapositiva-
   carrusel se saca del flujo normal y se superpone en el MISMO hueco que
   las demás (position:absolute dentro de un padre position:relative) —
   así solo hace falta que quepa UNA diapositiva en pantalla, no todas
   juntas; el JS ya se encarga de que solo una esté a opacity:1 a la vez.
   min-height calculado para la diapositiva más alta que haya en el sitio
   — si se añade una diapositiva más alta todavía, hay que subirlo (la
   de comoCotillear.html, icono+título+7 líneas, es la que fija este
   valor ahora mismo; antes bastaba con 400px para las de habitacion.html). */
.diapositivas-carrusel {
    position: relative;
    width: 100%;
    min-height: 760px;
}

.diapositiva-carrusel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 48px;
    /* Mismo bucle que .opcion.elegida .opcion-contenido h3 (ver
       @keyframes opcionFlotar más arriba) — reutilizado aquí para que
       toda la diapositiva (icono+texto juntos) flote suavemente en vez
       de quedarse estática una vez revelada. */
    animation: opcionFlotar 2.6s ease-in-out infinite;
}

/* Icono y texto de una diapositiva del carrusel, al doble de su tamaño
   habitual — el mismo clamp() responsivo que .nodo-svg/.nodo-titulo/etc.
   usan en el resto del sitio, pero *2 en cada extremo, para que sigan
   creciendo en pantallas grandes igual de proporcionados. Selectores más
   específicos que .nodo-svg/.nodo-titulo a propósito (para ganarles por
   especificidad sin tocar sus reglas base, que se siguen usando fuera de
   un carrusel). */
.diapositiva-carrusel .nodo-svg {
    width: calc(clamp(var(--tamanoIconoNodo), 6.5vw, calc(var(--tamanoIconoNodo) * 2.78)) * 2);
    height: calc(clamp(var(--tamanoIconoNodo), 6.5vw, calc(var(--tamanoIconoNodo) * 2.78)) * 2);
}

.diapositiva-carrusel .nodo-titulo {
    font-size: 440%;
}

/* h2/h3 sin la clase .nodo-titulo también existen sueltos dentro de un
   .nodo-texto (ej. el "¡y hasta un peluche!" de comoCotillear.html) —
   .nodo-titulo gana por especificidad donde coincidan (dos clases vs.
   clase+etiqueta), así que esto solo afecta a los que van sin ella. */
.diapositiva-carrusel h2,
.diapositiva-carrusel h3 {
    font-size: 240%;
}

.diapositiva-carrusel p {
    font-size: 200%;
}

.diapositiva-carrusel .nodo-titulo,
.diapositiva-carrusel h2,
.diapositiva-carrusel h3,
.diapositiva-carrusel p {
    font-weight: 700;
}

/* ============================================== */
/* == B O T Ó N   " V I S I T A R "             == */
/* ============================================== */
/* Salta de la sección de Manuel a la ilustración real de ese elemento en
   la habitación (ver activarBotonesVisitarEn en js/main.js). Reutiliza el
   lenguaje visual del marco de navegación (trazo dashed con las mismas
   variables, martius en mayúsculas) para que se lea como parte del
   sistema y no como un botón de formulario suelto. */
.boton-visitar {
    margin-top: 48px;
    padding: 16px 40px;
    background: transparent;
    color: inherit;
    border: var(--grosorContorno) dashed var(--colorContorno);
    font-family: martius;
    font-size: 120%;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    opacity: .65;
    transition: opacity .3s ease, transform .3s ease;
}

.boton-visitar:hover {
    opacity: 1;
    transform: translateY(-4px);
}

/* ============================================== */
/* == G A L E R Í A   D E   F O T O S           == */
/* ============================================== */
/* Filas horizontales de fotos que se deslizan como carrusel (ver
   inicializarGaleriaFotos en js/galeria.js) — una fila por categoría.
   Ocupa el 100% del VIEWPORT, de punta a punta de la pantalla (no solo
   el ancho de .elDocumento-nodo, que es angosto) para que las fotos
   entren y salgan de verdad por el borde de la ventana; el texto de la
   sección sigue centrado en su columna normal alrededor.
   SIN el truco de "full bleed" (margin-left:calc(50% - 50vw)) a
   propósito, aunque sea la fórmula habitual: aquí NO hace falta, y
   ponerla rompe el centrado. El padre (.elDocumento-nodo) es un
   contenedor flex en columna con align-items:center, así que ya centra
   por su cuenta la caja de 100vw respecto a su propio contenido — y
   como el padre a su vez está centrado en la página (margin:0 auto),
   ese centrado coincide con el centro del viewport, que es justo lo que
   se busca. Sumarle además el margin-left negativo lo desplaza una
   segunda vez: la galería acaba sobresaliendo por la izquierda
   exactamente lo mismo que le falta por la derecha (bug real). */
.galeria-fotos {
    width: 100vw;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.galeria-fila-titulo {
    font-family: martius;
    text-transform: uppercase;
    font-size: 70%;
    opacity: .6;
    margin-bottom: 12px;
}

/* .galeria-fila es la "ventana": ancho fijo (el de la fila), recorta
   todo lo que la tira de fotos saque por fuera. .galeria-tira es la
   franja de verdad — más ancha que la ventana a propósito (tantas fotos
   como haga falta, en una sola línea sin envolver) — y es a ELLA a la
   que inicializarGaleriaFotos (js/galeria.js) le anima translateX,
   atado a scrub: a medida que avanza el scroll, la tira se desliza hacia
   la izquierda dentro de la ventana, revelando las fotos siguientes,
   como un carrusel de verdad (no solo una entrada puntual). */
.galeria-fila {
    overflow: hidden;
    width: 100%;
}

.galeria-tira {
    display: flex;
    gap: 12px;
    width: max-content;
}

.galeria-foto {
    flex: 0 0 auto;
    /* "Apaisadas": ancho fijo con proporción de foto horizontal clásica
       (como un sensor 3:2), independientemente de la orientación real
       del archivo — object-fit:cover recorta lo que sobre. Ancho fijo
       (no flex:1 repartiendo la ventana) a propósito: con más fotos de
       las que caben, cada una necesita su propio tamaño para que sobre
       tira que deslizar — si se repartieran el ancho de la ventana entre
       todas, ya no sobraría nada que recorrer. */
    width: clamp(240px, 22vw, 420px);
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.galeria-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================== */
/* == SECCIONES REVELADAS                  == */
/* ========================================== */
/* display:block a propósito, no flex: si este contenedor es flex, GSAP
   cambia de estrategia al pinear un hijo suyo (usa transform en vez de
   position:fixed) y el pin-spacer deja de reservar el hueco de "end"
   correctamente — bug real encontrado y documentado en el ejercicio de
   Manuel (Hito 7). No hace falta flex para centrar: .elDocumento-nodo y
   .elDocumento-encrucijada ya se centran solos (margin:auto / su propio
   flex interno), así que el padre puede ser block sin perder nada. */
.elDocumento-seccion-revelada {
    min-height: 80vh;
    padding: 10vh 0;
    display: block;
    text-align: center;
    position: relative;
    /* Contiene su propio stacking context, para que el z-index negativo de
       .fondo-dibujo (más abajo) se quede detrás del texto de ESTA sección
       sin arriesgarse a colarse detrás de contenido de otras secciones. */
    isolation: isolate;
}

/* ============================================== */
/* == FONDO ANIMADO (dibujo progresivo, SVG)    == */
/* ============================================== */
/* Ilustración de fondo de una sección: ocupa el alto de pantalla (no el
   alto total, que puede ser mayor si la sección pinea varios nodos), a
   opacidad baja para no competir con el texto que va encima. Fuera del
   flujo (no afecta el layout) y sin recibir clicks (pointer-events:none),
   para que la encrucijada que pueda venir después siga siendo clicable. */
.fondo-dibujo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: .2;
}

.fondo-dibujo svg {
    width: min(85%, 520px);
    height: 90%;
    overflow: visible;
}

.fondo-dibujo path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    /* stroke-linecap:butt a propósito (no round): con round, el hueco del
       dasharray que oculta un path CERRADO (pétalos, destellos...) deja un
       puntito residual visible justo en su punto de cierre, por pequeño
       que sea el hueco — con butt ese extremo no pinta nada de más. */
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* ============================================== */
/* == C A M I N O   D E C O R A T I V O         == */
/* == (MotionPathPlugin, ver data-animacion="recorrido") == */
/* ============================================== */
.camino-decorativo {
    width: 100%;
    max-width: 400px;
    margin: 24px auto 0;
    opacity: .5;
}

.camino-decorativo svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* La curva-guía es decorativa (discontinua, para que se lea como "ruta" y
   no como un trazo más de ilustración) — el propio <path> no se anima, el
   marcador se mueve SOBRE él vía motionPath. */
/* Variante de fondo PERSISTENTE del camino decorativo (ver trayectoria.html):
   en vez de ser una diapositiva suelta que aparece y desaparece por su
   cuenta, vive de fondo durante TODO el carrusel — mismo patrón que
   .fondo-dibujo (hijo directo de .elDocumento-nodo, position:absolute,
   z-index:-1 para quedar detrás del texto gracias al isolation:isolate de
   .elDocumento-seccion-revelada, pointer-events:none). El recorrido del
   marcador lo controla construirTimelineCamino() en transiciones.js. */
.fondo-camino {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: .35;
}

.fondo-camino svg {
    width: min(70%, 340px);
    height: 90%;
    overflow: visible;
}

.ruta-decorativa {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
}

.marcador-recorrido {
    fill: currentColor;
}

.diapositiva-carrusel h3 {
    margin-top: -30px;
}

#trayectoria-carrusel p {
    font-size: 160%;  
}

/* ============================================== */
/* == M O R F I D O   D E C O R A T I V O       == */
/* == (MorphSVGPlugin, ver data-animacion="morfido") == */
/* ============================================== */
.morfido-decorativo {
    width: 100%;
    max-width: 160px;
    margin: 24px auto 0;
    opacity: .5;
}

.morfido-decorativo svg {
    width: 100%;
    height: auto;
}

.forma-morfido {
    fill: currentColor;
}

/* ============================================== */
/* == P A N T A L L A S   G R A N D E S          == */
/* ============================================== */
/* En monitores grandes, el texto a 24px dentro de una columna de 700px
   se quedaba perdido/pequeño en medio de tanto espacio vacío alrededor.
   En vez de un salto fijo a un único tamaño, crece de forma continua
   con el ancho real de pantalla (clamp con vw) — cuanto más grande el
   monitor, más grande el contenido, hasta un tope. En un 4K (~3840px)
   la letra base llega a ser 3 veces --tamanoBaseTexto; .nodo-titulo,
   .prologo-titulo y el resto de tamaños en % escalan solos porque son
   relativos al font-size del body. No toca nada por debajo de 1200px —
   ahí sigue mandando la sección de MÓVIL de más abajo, o el valor base
   de --tamanoBaseTexto entre medias. */
@media (min-width: 1200px) {
    body {
        font-size: clamp(var(--tamanoBaseTexto), 1.8vw, calc(var(--tamanoBaseTexto) * 3));
    }

    .elDocumento-nodo {
        max-width: clamp(900px, 45vw, 1600px);
    }
}

/* ============================================== */
/* == M Ó V I L                                 == */
/* ============================================== */
/* Hasta ahora no había ni un solo @media en todo el archivo — lo pensado
   para escritorio (títulos del prólogo a 800% de 24px = 192px, opciones
   de encrucijada una al lado de otra en 100vw...) se rompía sin más en
   pantallas estrechas. */
@media (max-width: 700px) {
    .elDocumento-nodo,
    .elDocumento-seccion {
        padding: 8vh 20px;
    }

    /* Los títulos del prólogo estaban pensados para sobrar espacio de
       escritorio (hasta 800% = 192px) — en un móvil se salen de pantalla
       y fuerzan scroll horizontal. */
    .prologo-titulo {
        font-size: 280%;
    }

    #prologo-jon {
        font-size: 180%;
    }

    #prologo-kosmiko {
        font-size: 280%;
    }

    .prologo-texto p {
        font-size: 130%;
    }

    /* Las opciones de una encrucijada iban una al lado de otra a lo ancho
       de toda la pantalla — con 2 opciones ya queda apretado en un móvil,
       y con encrucijadas de más opciones (como "Elementos Habitación",
       con 7) el texto de cada una no tenía sitio ni para respirar. Se
       apilan en vertical en su lugar. */
    .elDocumento-encrucijada-opciones {
        flex-direction: column;
        height: auto;
        /* .marco-borde reduce su inset a 10px en este breakpoint (más
           abajo) — el mismo descuento que en escritorio, pero a juego. */
        width: calc(100vw - 20px);
    }

    .elDocumento-encrucijada-opciones .opcion {
        width: 100%;
        min-height: 22vh;
    }

    .marco-borde {
        inset: 10px;
    }

    .marco-zona {
        font-size: 34px;
        padding: 6px 20px;
    }

    .marco-arriba,
    .marco-abajo {
        max-width: 60vw;
    }

    .marco-izquierda {
        left: 10px;
    }

    .marco-derecha,
    .marco-cerrar {
        right: 10px;
    }

    .marco-cerrar {
        top: 10px;
    }
}


/* ================================= */
/* == D O R S O   (la carta)      == */
/* ================================= */
/* La otra cara del documento: mapa de secciones en arbol.
   El giro lo anima js/dorso.js (GSAP, rotationY en dos mitades);
   aqui solo vive el aspecto. La ilustracion de fondo ira en
   .dorso-fondo como SVG dibujado a mano (pendiente). */

.marco-dorso {
    top: 20px;
    right: 90px;
    padding: 4px 10px;
    line-height: 1;
}

.dorso {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--fondo-tema, #121214);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    /* Al girar, que no ensanche la pagina con su proyeccion 3D */
    backface-visibility: hidden;
}

.dorso-fondo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* El SVG ilustrado ocupara esta capa entera */
}

.dorso-volver {
    position: fixed;
    top: 20px;
    /* Mismo hueco que .marco-dorso: deja libre la esquina de la ✕ */
    right: 90px;
    z-index: 910;
    background: none;
    border: none;
    color: var(--colorPrincipal);
    font-family: martius;
    text-transform: uppercase;
    font-size: 34px;
    padding: 4px 10px;
    line-height: 1;
    cursor: pointer;
}

/* Mientras el dorso esta abierto (o girando), el marco de navegacion
   del frente no pinta nada ahi detras.
   La ✕ es la excepcion: salir de Manuel debe poder hacerse tambien
   desde el dorso, sin obligar a girar antes. Sobrevive sin tocar nada
   mas porque .marco-zona tiene z-index 1000 y .dorso 900, asi que
   queda por encima de la carta. Para que quepa, .dorso-volver se
   aparta al hueco de al lado — el mismo que ya usa .marco-dorso. */
body.dorso-abierto .marco-zona:not(.marco-cerrar),
body.dorso-abierto .marco-borde {
    opacity: 0;
    pointer-events: none;
}

/* Mientras el dorso esta ejecutando un viaje por ruta (clicando
   encrucijadas paso a paso), ningun click del usuario debe colarse:
   un click a mitad de cadena elige otra rama y rompe el recorrido.
   pointer-events en el body anula todo el raton; el teclado y la
   rueda no se ven afectados. La clase la pone/quita viajarPorRuta
   en dorso.js. */
body.dorso-viajando {
    pointer-events: none;
    cursor: progress;
}

/* == El arbol (esquema descendente estilo manualidad) == */
/* Organigrama en flex: cada <ul> es una fila de hermanos centrada
   bajo su padre; los conectores son lineas discontinuas dibujadas
   con borders en pseudoelementos. Si el esquema no cabe en pantalla,
   dorso.js lo encoge entero (ajustarEscalaArbol) para verlo de un
   vistazo, sin scroll. */

.dorso-arbol {
    position: relative;
    z-index: 905;
    padding: 12px;
    transform-origin: center center;
}

.dorso-arbol ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.dorso-rama {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 26px 9px 0;
}

.dorso-raiz > .dorso-rama {
    padding-top: 0;
}

/* Conectores hacia el padre: ::before = mitad izquierda de la linea
   horizontal que recorre a los hermanos, ::after = mitad derecha + la
   bajada vertical hasta este nodo. Primer y ultimo hermano recortan
   la horizontal por su lado exterior. */
.dorso-rama::before,
.dorso-rama::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 26px;
    border-top: 1px dashed var(--colorPrincipal);
    opacity: .5;
}

.dorso-rama::after {
    right: auto;
    left: 50%;
    border-left: 1px dashed var(--colorPrincipal);
}

.dorso-rama:first-child::before { border-top: none; }
.dorso-rama:last-child::after { border-top: none; }

.dorso-raiz > .dorso-rama::before,
.dorso-raiz > .dorso-rama::after { display: none; }

/* Bajada desde el nodo padre hacia la fila de sus hijos */
.dorso-rama > .dorso-hijos {
    padding-top: 22px;
}

.dorso-rama > .dorso-hijos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 22px;
    border-left: 1px dashed var(--colorPrincipal);
    opacity: .5;
}

/* == El nodo: icono monolinea + nombre en pequeño == */

.dorso-nodo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--colorPrincipal);
    cursor: pointer;
    padding: 2px;
    opacity: .8;
    transition: opacity .15s, transform .15s;
}

.dorso-nodo:hover {
    opacity: 1;
    transform: scale(1.12);
}

.dorso-nodo-icono {
    width: 30px;
    height: 30px;
}

.dorso-nodo-icono svg {
    width: 100%;
    height: 100%;
    stroke-width: 5;
}

.dorso-nodo-texto {
    font-family: var(--fuente-creativa);
    font-size: 12px;
    letter-spacing: .03em;
    max-width: 86px;
    line-height: 1.15;
    text-align: center;
}

@media (max-width: 700px) {
    .marco-dorso {
        top: 10px;
        right: 64px;
    }

    .dorso-volver {
        top: 10px;
        /* Igual que arriba: el hueco de .marco-dorso en movil */
        right: 64px;
        font-size: 28px;
    }

    /* El auto-escalado de dorso.js ya encoge el esquema para que
       quepa; aqui solo se compacta un poco el punto de partida */
    .dorso-nodo-icono {
        width: 24px;
        height: 24px;
    }

    .dorso-nodo-texto {
        font-size: 10px;
        max-width: 68px;
    }

    .dorso-rama {
        padding: 20px 5px 0;
    }
}


/* ===================================== */
/* == F L O T A D O   (data-flotar)   == */
/* ===================================== */
/* El vaiven vive en el envoltorio interior que crea prepararFlotante()
   (transiciones.js), NUNCA en el propio elemento: su entrada la anima
   GSAP con transforms inline y una animacion CSS en el mismo sitio los
   pisaria. GSAP anima el de fuera; esto flota al de dentro. */

[data-flotar="true"] > .flotante-interior {
    display: inline-block;
    animation: flotar-elemento 3.4s ease-in-out infinite alternate;
}

/* Compas distinto en diapositivas alternas, para que los titulos no
   floten todos al unisono */
.diapositiva-carrusel:nth-child(even) [data-flotar="true"] > .flotante-interior {
    animation-duration: 4.1s;
    animation-delay: -1.6s;
}

@keyframes flotar-elemento {
    from { transform: translateY(-4px) rotate(-1deg); }
    to   { transform: translateY(5px) rotate(1.4deg); }
}

/* ============================================== */
/* == T R A Y E C T O R I A  (carrusel)        == */
/* ============================================== */
/* Titulos de hito y spans destacados: tipografia propia y flotado.
   Los spans no necesitan envoltorio (GSAP anima su <p>, no el span),
   asi que flotan directamente. */

#trayectoria-carrusel h3 {
    font-family: var(--fuente-creativa);
    font-size: 210%;
    letter-spacing: .02em;
}

#trayectoria-carrusel p span {
    font-family: var(--fuente-molona);
    display: inline-block;
    animation: flotar-elemento 3.8s ease-in-out infinite alternate;
}

#trayectoria-carrusel p span:nth-of-type(even) {
    animation-duration: 4.5s;
    animation-delay: -2s;
}

body.elDocumento-temaPortfolio #trayectoria-carrusel h3,
body.elDocumento-temaPortfolio #trayectoria-carrusel p span {
    color: black;
}


/* == Nodo "estas aqui" del esquema del dorso == */
/* Lo marca marcarNodoActual() en dorso.js (la rama abierta mas profunda).
   Mas grande, a plena opacidad y con un halo que late suavemente. El
   brillo usa currentColor, asi que sigue el color del tema. */
.dorso-nodo-actual {
    opacity: 1;
    transform: scale(1.35);
}

.dorso-nodo-actual .dorso-nodo-icono {
    animation: dorso-brillo-actual 1.8s ease-in-out infinite alternate;
}

.dorso-nodo-actual .dorso-nodo-texto {
    opacity: 1;
    text-shadow: 0 0 6px currentColor;
}

@keyframes dorso-brillo-actual {
    from { filter: drop-shadow(0 0 3px currentColor); }
    to   { filter: drop-shadow(0 0 11px currentColor); }
}