@import url(
    "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap"
);

/* ========================================
   VARIABLES
======================================== */

:root {
    --fondo-oscuro: #071f22;
    --fondo-secundario: #0b3033;
    --turquesa: #43c1ba;
    --turquesa-claro: #8bd8d2;
    --crema: #f2e7d5;
    --ambar: #d79a5b;
    --rojo-oscuro: #6b3040;
    --negro-calido: #151718;
    --texto-suave: #c9d5d3;
}

/* ========================================
   GENERAL
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow: hidden;
    background: var(--fondo-oscuro);
    color: var(--crema);
    font-family: "Montserrat", sans-serif;
}

button,
input {
    font-family: inherit;
}

button {
    border: none;
    cursor: pointer;
}

/* ========================================
   PANTALLAS
======================================== */

.contenedor-pantallas {
    position: relative;
    width: 100%;
    height: 100vh;
}

.pantalla {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px 8%;

    background:
        radial-gradient(
            circle at top right,
            rgba(67, 193, 186, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--fondo-oscuro),
            var(--fondo-secundario)
        );

    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        visibility 0.7s;
}

.pantalla.activa {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.contenido-pantalla {
    width: min(850px, 100%);
    text-align: center;
}

.subtitulo,
.numero-seccion {
    margin-bottom: 15px;
    color: var(--turquesa-claro);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

h1,
h2 {
    font-family: "Cormorant Garamond", serif;
    line-height: 1;
}

h1 {
    margin-bottom: 25px;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 600;
}

h2 {
    margin-bottom: 25px;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 600;
}

.descripcion,
.contenido-pantalla p {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    color: var(--texto-suave);
    font-size: 1rem;
    line-height: 1.9;
}

/* ========================================
   BOTONES GENERALES
======================================== */

.boton-principal,
.controles button,
.final button {
    padding: 14px 28px;
    border: 1px solid var(--turquesa);
    background: transparent;
    color: var(--crema);
    font-size: 0.9rem;
    letter-spacing: 1px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.boton-principal:hover,
.controles button:hover,
.final button:hover {
    background: var(--turquesa);
    color: var(--fondo-oscuro);
    transform: translateY(-3px);
    box-shadow:
        0 10px 30px rgba(67, 193, 186, 0.2);
}

.controles {
    position: absolute;
    right: 8%;
    bottom: 50px;
    left: 8%;
    display: flex;
    justify-content: space-between;
}

/* ========================================
   MENÚ
======================================== */

.boton-menu {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 20;

    width: 48px;
    height: 48px;
    padding: 12px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    border: 1px solid rgba(139, 216, 210, 0.45);
    border-radius: 50%;

    background: rgba(7, 31, 34, 0.75);
    backdrop-filter: blur(10px);

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease,
        transform 0.3s ease,
        background 0.3s ease;
}

.boton-menu:hover {
    background: rgba(11, 48, 51, 0.95);
    transform: scale(1.05);
}

.boton-menu span {
    width: 100%;
    height: 2px;
    background: var(--crema);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.boton-menu.abierto span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.boton-menu.abierto span:nth-child(2) {
    opacity: 0;
}

.boton-menu.abierto span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

body.introduccion-abierta .boton-menu,
body.introduccion-abierta .boton-audio,
body.prologo-abierto .boton-menu,
body.prologo-abierto .boton-audio {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.menu-lateral {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;

    width: min(340px, 85%);
    height: 100vh;
    padding: 110px 35px 40px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    background: rgba(7, 31, 34, 0.97);
    backdrop-filter: blur(16px);

    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.menu-lateral.abierto {
    transform: translateX(0);
}

.menu-lateral h2 {
    margin-bottom: 15px;
    color: var(--turquesa-claro);
    font-size: 2.1rem;
}

.menu-lateral button {
    padding: 12px 0;
    background: transparent;
    color: var(--texto-suave);
    text-align: left;
    font-size: 0.9rem;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.menu-lateral button:hover {
    color: var(--turquesa-claro);
    transform: translateX(8px);
}

.fondo-menu {
    position: fixed;
    inset: 0;
    z-index: 10;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s;
}

.fondo-menu.activo {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   INTRODUCCIÓN
======================================== */

.introduccion {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 25px;
    overflow: hidden;
    background: #050909;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.introduccion.activa {
    opacity: 1;
    visibility: visible;
}

.introduccion.saliendo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fondo-introduccion {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(38, 110, 108, 0.18),
            transparent 40%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(107, 48, 64, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #030707,
            #071516 60%,
            #080d0e
        );
}

.fondo-introduccion::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}

.fondo-introduccion::after {
    content: "";
    position: absolute;
    top: -150px;
    left: 50%;

    width: 550px;
    height: 550px;

    border: 1px solid rgba(139, 216, 210, 0.08);
    border-radius: 50%;

    transform: translateX(-50%);
}

.contenido-introduccion {
    position: relative;
    z-index: 2;
    width: min(720px, 100%);
    text-align: center;
}

.detalle-introduccion {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    opacity: 0;

    animation:
        aparecerIntroduccion 1s ease 0.3s forwards;
}

.detalle-introduccion span {
    width: 60px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--turquesa-claro)
        );
}

.detalle-introduccion span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            var(--turquesa-claro)
        );
}

.detalle-introduccion p {
    color: var(--turquesa-claro);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.contenido-introduccion h1 {
    margin-bottom: 30px;
    color: var(--crema);
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 500;
    line-height: 0.95;

    opacity: 0;
    transform: translateY(25px);

    animation:
        aparecerIntroduccion 1.1s ease 0.6s forwards;
}

.texto-introduccion {
    max-width: 590px;
    margin: 0 auto;
    color: rgba(242, 231, 213, 0.76);
    font-size: 1rem;
    font-weight: 300;
    line-height: 2;

    opacity: 0;
    transform: translateY(20px);

    animation:
        aparecerIntroduccion 1.1s ease 0.9s forwards;
}

.texto-secundario-introduccion {
    max-width: 530px;
    margin: 18px auto 0;
    color: rgba(201, 213, 211, 0.48);
    font-size: 0.84rem;
    font-weight: 300;
    line-height: 1.8;

    opacity: 0;
    transform: translateY(20px);

    animation:
        aparecerIntroduccion 1.1s ease 1.1s forwards;
}

.boton-introduccion {
    min-width: 190px;
    margin-top: 45px;
    padding: 15px 25px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border: 1px solid rgba(139, 216, 210, 0.65);

    background: rgba(7, 31, 34, 0.25);
    color: var(--crema);

    font-size: 0.82rem;
    letter-spacing: 1.5px;

    opacity: 0;
    transform: translateY(20px);

    animation:
        aparecerIntroduccion 1.1s ease 1.35s forwards;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.boton-introduccion:hover {
    background: var(--turquesa);
    color: var(--fondo-oscuro);
    transform: translateY(-3px);
}

.fecha-introduccion {
    position: absolute;
    right: 35px;
    bottom: 30px;
    z-index: 2;

    color: rgba(242, 231, 213, 0.28);
    font-family: "Cormorant Garamond", serif;
    font-size: 0.78rem;
    letter-spacing: 4px;

    opacity: 0;

    animation:
        aparecerIntroduccion 1s ease 1.7s forwards;
}

/* ========================================
   PRÓLOGO MUSICAL
======================================== */

.prologo-musical {
    position: fixed;
    inset: 0;
    z-index: 95;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 25px;

    overflow: hidden;

    background: #030707;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.prologo-musical.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.prologo-musical.saliendo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fondo-prologo {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(55, 139, 135, 0.15),
            transparent 36%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(107, 48, 64, 0.11),
            transparent 28%
        ),
        linear-gradient(
            160deg,
            #020505,
            #071314 55%,
            #030708
        );
}

.fondo-prologo::before {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );

    background-size: 60px 60px;
}

.escenas-prologo {
    position: relative;
    z-index: 2;
    width: min(850px, 100%);
    min-height: 360px;
}

.escena-prologo {
    position: absolute;
    inset: 0;

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

    text-align: center;

    opacity: 0;
    visibility: hidden;
    transform: translateY(22px);

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease,
        transform 0.9s ease;
}

.escena-prologo.escena-activa {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.escena-prologo > p:first-child {
    margin-bottom: 18px;

    color: var(--turquesa-claro);

    font-size: 0.72rem;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.escena-prologo h2 {
    max-width: 760px;
    margin: 0;

    color: var(--crema);

    font-size: clamp(3.2rem, 7vw, 6.2rem);
    font-weight: 500;
    line-height: 0.98;
}

.escena-final-prologo h2 {
    margin-bottom: 25px;
}

.prologo-linea {
    margin-top: 4px;

    color: rgba(242, 231, 213, 0.72);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.5;
}

.prologo-cierre {
    max-width: 560px;
    margin-top: 28px;

    color: rgba(201, 213, 211, 0.55);

    font-size: 0.82rem;
    line-height: 1.8;
    letter-spacing: 1px;
}

.prologo-cierre strong {
    display: block;
    margin-top: 7px;

    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 500;
    letter-spacing: 0;
}

.boton-continuar-prologo {
    position: absolute;
    right: 35px;
    bottom: 30px;
    z-index: 4;

    padding: 12px 17px;

    display: flex;
    align-items: center;
    gap: 15px;

    border: 1px solid rgba(139, 216, 210, 0.42);

    background: rgba(7, 31, 34, 0.24);
    color: var(--crema);

    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease,
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.prologo-musical.activo .boton-continuar-prologo {
    opacity: 1;
    visibility: visible;
}

.boton-continuar-prologo:hover {
    background: var(--turquesa);
    color: var(--fondo-oscuro);
    transform: translateY(-2px);
}

/* ========================================
   PORTADA
======================================== */

.portada {
    isolation: isolate;
    overflow: hidden;
    perspective: 1000px;
}

.fondo-portada {
    position: absolute;
    inset: -15px;
    z-index: -4;

    background-image: url("../img/portada.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.05);

    animation:
        acercamientoFondo 14s ease-out forwards;

    transition:
        transform 1s ease,
        filter 1s ease;

    will-change: transform;
}

.capa-portada {
    position: absolute;
    inset: 0;
    z-index: -3;

    background:
        linear-gradient(
            90deg,
            rgba(4, 22, 24, 0.96) 0%,
            rgba(4, 22, 24, 0.82) 45%,
            rgba(4, 22, 24, 0.52) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 31, 34, 0.82),
            transparent 55%
        );
}

.textura-portada {
    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}

.contenido-portada {
    width: min(780px, 100%);
    margin-right: auto;
    margin-left: 5%;
    text-align: left;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

    will-change: transform;
}

.contenido-portada .subtitulo {
    margin-right: 0;
    margin-left: 0;
}

.contenido-portada h1 {
    margin-bottom: 18px;
    font-size: clamp(4.2rem, 8vw, 7.5rem);
    line-height: 0.82;
    letter-spacing: -3px;
}

.contenido-portada h1 span {
    color: var(--turquesa-claro);
    font-style: italic;
    font-weight: 500;
}

.contenido-portada .descripcion {
    max-width: 590px;
    margin: 0;
    color: rgba(242, 231, 213, 0.82);
}

.portada.saliendo-portada .fondo-portada {
    transform: scale(1.1) !important;
    filter: brightness(0.6);
}

.portada.saliendo-portada .contenido-portada {
    opacity: 0;
    transform: translateY(-20px) !important;
}

/* ========================================
   TULIPÁN Y LÍNEA
======================================== */

.linea-decorativa {
    width: min(360px, 80%);
    margin: 26px 0;

    display: flex;
    align-items: center;
    gap: 14px;
}

.linea-decorativa > span {
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(139, 216, 210, 0.7)
        );
}

.linea-decorativa > span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(139, 216, 210, 0.7)
        );
}

.tulipan-svg {
    width: 38px;
    height: 55px;
}

.tulipan-svg svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tallo-svg {
    fill: none;
    stroke: var(--turquesa-claro);
    stroke-width: 4;
    stroke-linecap: round;

    stroke-dasharray: 120;
    stroke-dashoffset: 120;

    animation:
        dibujarTulipan 1.3s ease 1s forwards;
}

.hoja-svg {
    fill: rgba(67, 193, 186, 0.75);
    opacity: 0;

    transform-box: fill-box;
    transform-origin: center bottom;

    animation:
        aparecerHoja 0.7s ease forwards;
}

.hoja-svg-izquierda {
    animation-delay: 1.8s;
}

.hoja-svg-derecha {
    animation-delay: 2s;
}

.petalo-svg {
    opacity: 0;

    transform-box: fill-box;
    transform-origin: center bottom;

    animation:
        florecerTulipan 0.8s ease forwards;
}

.petalo-svg-centro {
    fill: #bc706c;
    animation-delay: 2.1s;
}

.petalo-svg-izquierda {
    fill: #8e4350;
    animation-delay: 2.25s;
}

.petalo-svg-derecha {
    fill: #d18a76;
    animation-delay: 2.4s;
}

/* ========================================
   CONTADOR
======================================== */

.contador-relacion {
    margin-top: 30px;
}

.contador-relacion > p {
    margin: 0 0 12px;
    color: rgba(201, 213, 211, 0.68);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contador-datos {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contador-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.contador-item strong {
    min-width: 28px;
    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-size: 2.2rem;
    font-weight: 500;
}

.contador-item span {
    color: var(--turquesa-claro);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.separador-contador {
    color: var(--ambar);
    font-size: 1.4rem;
}

.contenido-portada .boton-principal {
    min-width: 260px;
    margin-top: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    background: rgba(7, 31, 34, 0.3);
    backdrop-filter: blur(8px);
}

.flecha-boton {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.contenido-portada .boton-principal:hover .flecha-boton {
    transform: translateX(6px);
}

/* ========================================
   INDICADOR Y PÉTALOS
======================================== */

.indicador-inferior {
    position: absolute;
    right: 45px;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    color: rgba(242, 231, 213, 0.48);
}

.indicador-inferior span {
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.linea-vertical {
    width: 1px;
    height: 75px;

    background:
        linear-gradient(
            to bottom,
            var(--turquesa-claro),
            transparent
        );

    animation:
        pulsoLinea 2.2s ease-in-out infinite;
}

.petalo {
    position: absolute;
    z-index: -1;

    width: 12px;
    height: 20px;

    border-radius:
        80% 20% 70% 30%;

    background:
        linear-gradient(
            135deg,
            rgba(208, 138, 118, 0.7),
            rgba(112, 47, 63, 0.45)
        );

    opacity: 0;

    animation:
        caerPetalo 12s linear infinite;
}

.petalo-1 {
    top: -10%;
    left: 14%;
}

.petalo-2 {
    top: -15%;
    left: 32%;
    animation-delay: 3s;
    animation-duration: 15s;
}

.petalo-3 {
    top: -10%;
    left: 52%;
    animation-delay: 7s;
    animation-duration: 13s;
}

.petalo-4 {
    top: -20%;
    left: 69%;
    animation-delay: 1.5s;
    animation-duration: 17s;
}

.petalo-5 {
    top: -10%;
    left: 83%;
    animation-delay: 5s;
    animation-duration: 14s;
}

.petalo-6 {
    top: -15%;
    left: 94%;
    animation-delay: 9s;
    animation-duration: 18s;
}

.portada-elemento {
    opacity: 0;
    transform: translateY(24px);

    animation:
        aparecerPortada 0.9s ease forwards;
}

.portada-elemento:nth-child(1) {
    animation-delay: 0.2s;
}

.portada-elemento:nth-child(2) {
    animation-delay: 0.4s;
}

.portada-elemento:nth-child(3) {
    animation-delay: 0.6s;
}

.portada-elemento:nth-child(4) {
    animation-delay: 0.8s;
}

.portada-elemento:nth-child(5) {
    animation-delay: 1s;
}

.portada-elemento:nth-child(6) {
    animation-delay: 1.2s;
}

/* ========================================
   TRANSICIÓN DE CAPÍTULOS
======================================== */

.transicion-capitulo {
    position: fixed;
    inset: 0;
    z-index: 90;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(38, 110, 108, 0.16),
            transparent 42%
        ),
        #040909;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}

.transicion-capitulo.activa {
    opacity: 1;
    visibility: visible;
}

.contenido-transicion {
    width: min(650px, 85%);
    text-align: center;
}

.contenido-transicion p {
    margin-bottom: 18px;
    color: var(--turquesa-claro);
    font-size: 0.72rem;
    letter-spacing: 5px;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(15px);
}

.contenido-transicion h2 {
    margin-top: 22px;
    margin-bottom: 0;
    color: var(--crema);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 500;

    opacity: 0;
    transform: translateY(20px);
}

.linea-transicion {
    display: block;
    width: 0;
    height: 1px;
    margin: 0 auto;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--turquesa-claro),
            transparent
        );
}

.transicion-capitulo.animando .contenido-transicion p {
    animation:
        aparecerTextoCapitulo 0.55s ease forwards;
}

.transicion-capitulo.animando .linea-transicion {
    animation:
        extenderLineaCapitulo 0.75s ease 0.2s forwards;
}

.transicion-capitulo.animando .contenido-transicion h2 {
    animation:
        aparecerTextoCapitulo 0.65s ease 0.4s forwards;
}

/* ========================================
   ELEGIRNOS
======================================== */

.pantalla-elegirnos {
    background:
        radial-gradient(
            circle at center,
            rgba(107, 48, 64, 0.12),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #030606,
            #091617
        );
}

/* ========================================
   CONTROL DE AUDIO
======================================== */

.boton-audio {
    position: fixed;
    right: 25px;
    top: 25px;
    z-index: 30;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(139, 216, 210, 0.35);
    border-radius: 50%;

    background: rgba(6, 24, 26, 0.8);
    color: var(--crema);

    backdrop-filter: blur(12px);

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease,
        transform 0.3s ease,
        background 0.3s ease;
}

.boton-audio:hover {
    transform: scale(1.06);
    background: rgba(11, 48, 51, 0.95);
}

.panel-audio {
    position: fixed;
    top: 78px;
    right: 25px;
    z-index: 29;

    width: 220px;
    padding: 15px;

    border: 1px solid rgba(139, 216, 210, 0.28);

    background: rgba(6, 24, 26, 0.95);
    color: var(--crema);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}

.panel-audio.abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.panel-audio p {
    margin-bottom: 12px;
    color: var(--turquesa-claro);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.panel-audio button {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 13px;

    border: 1px solid rgba(139, 216, 210, 0.35);

    background: transparent;
    color: var(--crema);

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.panel-audio button:hover {
    background: var(--turquesa);
    color: var(--fondo-oscuro);
}

.panel-audio label {
    display: block;
    margin-bottom: 7px;

    color: rgba(201, 213, 211, 0.55);
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.panel-audio input {
    width: 100%;
    accent-color: var(--turquesa);
}

/* ========================================
   ANIMACIONES
======================================== */

@keyframes aparecerIntroduccion {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aparecerPortada {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes acercamientoFondo {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1.02);
    }
}

@keyframes pulsoLinea {
    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }
}

@keyframes caerPetalo {
    0% {
        opacity: 0;

        transform:
            translateY(-30px)
            translateX(0)
            rotate(0deg);
    }

    10% {
        opacity: 0.55;
    }

    50% {
        transform:
            translateY(55vh)
            translateX(45px)
            rotate(190deg);
    }

    90% {
        opacity: 0.35;
    }

    100% {
        opacity: 0;

        transform:
            translateY(110vh)
            translateX(-35px)
            rotate(380deg);
    }
}

@keyframes dibujarTulipan {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes aparecerHoja {
    from {
        opacity: 0;
        transform: scale(0.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes florecerTulipan {
    from {
        opacity: 0;

        transform:
            scale(0.1)
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }
}

@keyframes aparecerTextoCapitulo {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes extenderLineaCapitulo {
    to {
        width: min(300px, 70%);
    }
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 700px) {

    .pantalla {
        padding:
            90px 24px
            120px;
    }

    h2 {
        font-size: 3.2rem;
    }

    .boton-menu {
        top: 20px;
        left: 20px;
    }

    .controles {
        right: 24px;
        bottom: 30px;
        left: 24px;
    }

    .controles button {
        padding: 11px 14px;
        font-size: 0.72rem;
    }

    .introduccion {
        padding: 45px 22px;
    }

    .detalle-introduccion span {
        width: 35px;
    }

    .contenido-introduccion h1 {
        font-size: clamp(3.2rem, 16vw, 4.6rem);
    }

    .texto-introduccion {
        font-size: 0.9rem;
        line-height: 1.8;
    }

    .texto-secundario-introduccion {
        font-size: 0.77rem;
    }

    .fecha-introduccion {
        right: auto;
        bottom: 20px;
        left: 50%;

        width: max-content;

        transform: translateX(-50%);
    }

    .contenido-portada {
        margin-left: 0;
        text-align: center;
    }

    .contenido-portada .subtitulo,
    .contenido-portada .descripcion {
        margin-right: auto;
        margin-left: auto;
    }

    .contenido-portada h1 {
        font-size: clamp(3.7rem, 17vw, 5rem);
        line-height: 0.88;
    }

    .linea-decorativa {
        margin-right: auto;
        margin-left: auto;
    }

    .contador-datos {
        justify-content: center;
        gap: 9px;
    }

    .contador-item {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .contador-item strong {
        font-size: 1.8rem;
    }

    .separador-contador {
        margin-bottom: 17px;
    }

    .contenido-portada .boton-principal {
        width: min(310px, 100%);
        min-width: 0;
    }

    .indicador-inferior {
        display: none;
    }

    .capa-portada {
        background:
            linear-gradient(
                rgba(4, 22, 24, 0.76),
                rgba(4, 22, 24, 0.95)
            );
    }

    .transicion-capitulo {
        padding: 30px 20px;
    }

    .contenido-transicion h2 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .escena-prologo h2 {
        font-size: clamp(3rem, 15vw, 4.8rem);
    }

    .escenas-prologo {
        min-height: 440px;
    }

    .boton-continuar-prologo {
        right: 20px;
        bottom: 20px;
    }

    .boton-audio {
        top: 20px;
        right: 20px;
    }

    .panel-audio {
        top: 72px;
        right: 20px;
    }
}

@media (max-width: 430px) {

    .pantalla {
        padding:
            78px 18px
            105px;
    }

    .contenido-portada h1 {
        font-size: 3.5rem;
    }

    .contenido-portada .descripcion {
        font-size: 0.8rem;
        line-height: 1.65;
    }

    .contador-relacion {
        margin-top: 20px;
    }

    .contenido-portada .boton-principal {
        padding: 12px 17px;
        font-size: 0.73rem;
    }

    .prologo-linea {
        font-size: 1.2rem;
    }

    .prologo-cierre {
        font-size: 0.72rem;
    }

    .panel-audio {
        width: calc(100vw - 40px);
    }
}


/* ========================================
   CARGA MODULAR
======================================== */

.cargando-proyecto,
.error-proyecto {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at center,
            rgba(67, 193, 186, 0.12),
            transparent 35%
        ),
        var(--fondo-oscuro);

    color: var(--texto-suave);

    font-size: 0.72rem;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
}

.error-proyecto {
    color: var(--crema);
    line-height: 1.8;
}

/* ========================================
   HISTORIA LIMPIA — SIN SUPERPOSICIONES
======================================== */

.pantalla-historia {
    isolation: isolate;
    overflow: hidden;

    padding: 0;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(67, 193, 186, 0.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(215, 154, 91, 0.08),
            transparent 31%
        ),
        linear-gradient(
            150deg,
            #061416,
            #0a272a 58%,
            #071b1e
        );
}

.historia-textura {
    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: 0.15;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;
}

.historia-lluvia {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;

    opacity: 0;

    transition: opacity 1s ease;
}

.pantalla-historia.lluvia-visible
.historia-lluvia {
    opacity: 0.34;
}

.historia-lluvia span {
    position: absolute;

    top: -18%;
    left: var(--x);

    width: 1px;
    height: 76px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(139, 216, 210, 0.55),
            transparent
        );

    transform: rotate(13deg);

    animation:
        historiaLluvia
        var(--t)
        linear
        var(--d)
        infinite;
}

.historia-layout {
    width: 100%;
    height: 100%;

    padding:
        32px 4.5%
        25px;

    display: grid;
    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    gap: 10px;
}

.historia-header,
.historia-footer {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.historia-header {
    align-items: flex-start;
}

.historia-etiqueta {
    color: var(--turquesa-claro);

    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.historia-subtitulo {
    margin-top: 5px;

    color: rgba(242, 231, 213, 0.43);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 0.95rem;
    font-style: italic;
}

.historia-contador {
    display: flex;
    align-items: baseline;
    gap: 7px;

    color: rgba(201, 213, 211, 0.34);

    font-family:
        "Cormorant Garamond",
        serif;

    letter-spacing: 2px;
}

.historia-contador strong {
    color: var(--crema);
    font-size: 1.45rem;
    font-weight: 500;
}

.historia-paneles {
    position: relative;

    width: min(1180px, 100%);
    min-height: 0;

    margin: 0 auto;

    overflow: hidden;
}

.historia-panel {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px 5%;

    overflow-y: auto;
    scrollbar-width: none;
}

.historia-panel::-webkit-scrollbar {
    display: none;
}

.historia-panel[hidden] {
    display: none !important;
}

.historia-panel.activo {
    animation:
        historiaEntrar
        0.75s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.historia-centro {
    width: 100%;
    max-width: 850px;

    margin: auto;

    text-align: center;
}

.historia-dos-columnas {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.82fr);

    align-items: center;
    gap: clamp(45px, 7vw, 110px);
}

.historia-invertida {
    grid-template-columns:
        minmax(280px, 0.82fr)
        minmax(0, 1fr);
}

.historia-bloque-texto {
    max-width: 650px;
}

.historia-kicker {
    margin-bottom: 15px;

    color: var(--turquesa-claro);

    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.historia-panel h2 {
    margin: 0;

    color: var(--crema);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            3.4rem,
            6.4vw,
            6.8rem
        );

    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -2px;
}

.historia-panel h2 em {
    color: var(--turquesa-claro);
    font-weight: 500;
}

.historia-frases {
    margin-top: 28px;
}

.historia-frases p {
    max-width: 630px;

    margin:
        9px 0
        0;

    color:
        rgba(
            242,
            231,
            213,
            0.68
        );

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            1.1rem,
            2vw,
            1.55rem
        );

    line-height: 1.45;

    opacity: 0;
    transform: translateY(12px);

    animation:
        historiaFrase
        0.7s ease forwards;
}

.historia-centro
.historia-frases p {
    margin-right: auto;
    margin-left: auto;
}

.historia-frases p:nth-child(1) {
    animation-delay: 0.15s;
}

.historia-frases p:nth-child(2) {
    animation-delay: 0.45s;
}

.historia-frases p:nth-child(3) {
    animation-delay: 0.75s;
}

.historia-frases
.historia-destacada {
    color: var(--crema);

    font-size:
        clamp(
            1.7rem,
            3.6vw,
            2.8rem
        );

    font-style: italic;
}

.historia-linea {
    width: min(360px, 70%);

    margin: 38px auto 0;

    display: flex;
    align-items: center;
    gap: 15px;
}

.historia-linea span {
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(139, 216, 210, 0.55)
        );
}

.historia-linea span:last-child {
    background:
        linear-gradient(
            to left,
            transparent,
            rgba(139, 216, 210, 0.55)
        );
}

.historia-linea i {
    width: 8px;
    height: 8px;

    border:
        1px solid
        rgba(215, 154, 91, 0.72);

    border-radius: 50%;
}

.historia-cursos {
    position: relative;

    min-height: 300px;

    padding:
        35px 30px
        70px;

    display: grid;
    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    border:
        1px solid
        rgba(139, 216, 210, 0.18);

    background:
        rgba(4, 18, 20, 0.42);

    backdrop-filter: blur(10px);
}

.historia-cursos > div {
    text-align: center;
}

.historia-cursos > div span {
    display: block;

    color: rgba(201, 213, 211, 0.55);

    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.historia-cursos > div strong {
    display: block;

    color: var(--crema);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            4.5rem,
            9vw,
            7.5rem
        );

    font-weight: 500;
    line-height: 0.9;
}

.historia-cursos > div:last-of-type strong {
    color: var(--turquesa-claro);
}

.historia-cursos > i {
    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--ambar),
            transparent
        );
}

.historia-cursos > p {
    position: absolute;

    right: 20px;
    bottom: 20px;
    left: 20px;

    color: rgba(242, 231, 213, 0.55);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

.historia-ilustracion {
    width: min(420px, 100%);

    margin: auto;

    color: rgba(242, 231, 213, 0.77);
}

.historia-ilustracion svg {
    display: block;

    width: 100%;
    max-height: 330px;

    overflow: visible;
}

.historia-ilustracion > p {
    margin-top: 5px;

    color: rgba(139, 216, 210, 0.65);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1.13rem;
    font-style: italic;
    text-align: center;
}

.historia-trazo {
    fill: none;

    stroke: currentColor;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;

    animation:
        historiaDibujar
        2s ease
        0.1s forwards;
}

.historia-notebook {
    width: min(390px, 100%);
}

.historia-naranja {
    width: min(250px, 68%);

    margin-top: 8px;
}

.naranja-relleno {
    fill: rgba(215, 154, 91, 0.5);

    opacity: 0;

    animation:
        historiaRelleno
        1s ease
        1.1s forwards;
}

.naranja-movimiento {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        historiaNaranja
        8s ease-in-out
        2s infinite;
}

.historia-celular {
    width: min(230px, 58%);
}

.historia-celular svg {
    max-height: 280px;
}

.celular-rotado {
    transform-box: fill-box;
    transform-origin: center;

    transform: rotate(-7deg);
}

.disco-hockey {
    fill: var(--turquesa-claro);

    animation:
        historiaDisco
        2.5s ease-in-out
        1.4s infinite alternate;
}

.historia-palabras {
    margin-top: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    color: rgba(201, 213, 211, 0.36);

    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.historia-palabras i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--ambar);
}

.historia-proximo {
    margin-top: 38px;

    color: rgba(139, 216, 210, 0.5);

    font-size: 0.63rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.historia-footer {
    min-height: 46px;
}

.historia-grupo-controles {
    display: flex;
    align-items: center;
    gap: 10px;
}

.historia-control {
    min-height: 42px;

    padding: 10px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border:
        1px solid
        rgba(139, 216, 210, 0.42);

    background:
        rgba(4, 20, 22, 0.86);

    color: var(--crema);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.25);

    font-size: 0.68rem;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

.historia-control:hover:not(:disabled) {
    border-color: var(--turquesa-claro);

    background:
        rgba(67, 193, 186, 0.18);

    transform: translateY(-2px);
}

.historia-control:disabled {
    opacity: 0.28;
    cursor: default;
}

.historia-anterior {
    width: 43px;
    padding: 10px;
}

.historia-siguiente {
    min-width: 140px;
}

@keyframes historiaEntrar {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes historiaFrase {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes historiaLluvia {
    from {
        transform:
            translateY(-20vh)
            rotate(13deg);
    }

    to {
        transform:
            translateY(130vh)
            rotate(13deg);
    }
}

@keyframes historiaDibujar {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes historiaRelleno {
    to {
        opacity: 1;
    }
}

@keyframes historiaNaranja {
    0%,
    100% {
        transform: rotate(0deg);
    }

    48% {
        transform: rotate(350deg);
    }

    62% {
        transform: rotate(330deg);
    }
}

@keyframes historiaDisco {
    0% {
        transform:
            translate(-48px, -50px);
    }

    50% {
        transform:
            translate(25px, 45px);
    }

    100% {
        transform:
            translate(42px, -18px);
    }
}

@media (max-width: 850px) {

    .historia-layout {
        padding:
            24px 22px
            18px;
    }

    .historia-dos-columnas,
    .historia-invertida {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .historia-invertida
    .historia-ilustracion {
        order: 2;
    }

    .historia-invertida
    .historia-bloque-texto {
        order: 1;
    }

    .historia-bloque-texto {
        margin: auto;
        text-align: center;
    }

    .historia-frases p {
        margin-right: auto;
        margin-left: auto;
    }

    .historia-ilustracion {
        width: min(300px, 76%);
    }

    .historia-ilustracion svg {
        max-height: 215px;
    }

    .historia-cursos {
        width: min(420px, 100%);
        min-height: 220px;

        margin: auto;
    }

    .historia-panel h2 {
        font-size:
            clamp(
                3rem,
                11vw,
                5rem
            );
    }

}

@media (max-width: 560px) {

    .historia-layout {
        padding:
            17px 15px
            13px;
    }

    .historia-subtitulo {
        display: none;
    }

    .historia-panel {
        padding:
            12px 0
            10px;
    }

    .historia-panel h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4.2rem
            );

        letter-spacing: -1px;
    }

    .historia-frases {
        margin-top: 20px;
    }

    .historia-frases p {
        font-size: 1.05rem;
    }

    .historia-frases
    .historia-destacada {
        font-size: 1.7rem;
    }

    .historia-ilustracion {
        width: min(250px, 78%);
    }

    .historia-ilustracion svg {
        max-height: 175px;
    }

    .historia-celular {
        width: min(175px, 58%);
    }

    .historia-cursos {
        min-height: 190px;

        padding:
            17px 14px
            55px;
    }

    .historia-cursos > div strong {
        font-size: 3.8rem;
    }

    .historia-cursos > i {
        width: 45px;
    }

    .historia-texto-volver {
        display: none;
    }

    .historia-salir {
        width: 43px;
        padding: 10px;
    }

    .historia-siguiente {
        min-width: 125px;
    }

    .historia-palabras {
        flex-wrap: wrap;
        gap: 9px;

        margin-top: 28px;
    }

}


/* ========================================
   HISTORIA — NAVEGACIÓN SUPERIOR
======================================== */

/*
    Los controles están dentro de la cabecera,
    que siempre es visible. No existe footer.
*/

.historia-layout {
    grid-template-rows:
        auto
        minmax(0, 1fr) !important;

    padding-bottom: 28px;
}

.historia-header {
    min-height: 55px;
}

.historia-navegacion-superior {
    display: flex;
    align-items: center;
    gap: 9px;
}

.historia-control-superior {
    min-height: 39px;

    padding: 9px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border:
        1px solid
        rgba(139, 216, 210, 0.4);

    background:
        rgba(4, 20, 22, 0.88);

    color: var(--crema);

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.24);

    font-size: 0.66rem;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

.historia-control-superior:hover:not(:disabled) {
    border-color: var(--turquesa-claro);

    background:
        rgba(67, 193, 186, 0.18);

    transform: translateY(-2px);
}

.historia-control-superior:disabled {
    opacity: 0.25;
    cursor: default;
}

.historia-salir-superior,
.historia-anterior-superior {
    width: 39px;
    padding: 9px;
}

.historia-siguiente-superior {
    min-width: 125px;
}

.historia-contador {
    min-width: 66px;
    justify-content: center;
}

@media (max-width: 720px) {

    .historia-header {
        gap: 12px;
    }

    .historia-navegacion-superior {
        gap: 6px;
    }

    .historia-siguiente-superior {
        min-width: 42px;
        width: 42px;
        padding: 9px;
    }

    .historia-siguiente-superior
    #historiaTextoSiguiente {
        display: none;
    }

    .historia-contador {
        min-width: 58px;
    }

}

@media (max-width: 430px) {

    .historia-etiqueta {
        letter-spacing: 2px;
    }

    .historia-salir-superior {
        display: none;
    }

    .historia-control-superior {
        min-height: 36px;
    }

}


/* ========================================
   MOTOR ÚNICO — VISIBILIDAD DEFINITIVA
======================================== */

/*
    hidden es la única autoridad para decidir
    qué pantalla o escena existe visualmente.
*/

[hidden] {
    display: none !important;
}

#contenedorPantallas {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#contenedorPantallas > .pantalla {
    position: absolute;
    inset: 0;

    display: none !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: none !important;
}

#contenedorPantallas > .pantalla.activa:not([hidden]) {
    z-index: 5;

    display: flex !important;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*
    Historia también usa hidden para sus
    ocho paneles internos.
*/

#pantallaHistoria
[data-panel-historia] {
    display: none !important;
}

#pantallaHistoria
[data-panel-historia].activo:not([hidden]) {
    display: flex !important;
}

/*
    La cabecera de Historia siempre queda
    por encima de su contenido.
*/

#pantallaHistoria
.historia-header {
    position: relative;
    z-index: 20;
}

#pantallaHistoria
.historia-navegacion-superior {
    position: relative;
    z-index: 21;
}

/*
    Evita que controles genéricos de otra
    pantalla atraviesen la pantalla activa.
*/

#contenedorPantallas >
.pantalla[hidden]
.controles,
#contenedorPantallas >
.pantalla[hidden]
button {
    pointer-events: none !important;
}

/*
    En Historia no hay footer inferior.
*/

#pantallaHistoria
.historia-footer {
    display: none !important;
}



/* ========================================
   BUILD ESTÁTICO — SIN FETCH
======================================== */

html::after {
    content: "v-estática";
    position: fixed;
    right: 8px;
    bottom: 5px;
    z-index: 2147483647;

    color: rgba(139, 216, 210, 0.18);

    font-family: monospace;
    font-size: 9px;
    letter-spacing: 1px;

    pointer-events: none;
}


/* ========================================
   NUESTRA PRIMERA SALIDA
======================================== */

.salida-pelicula {
    margin-top: 26px;
    color: rgba(139, 216, 210, 0.58);
    font-size: 0.64rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.salida-mascara {
    width: min(165px, 38%);
    margin: 0 auto 18px;
    color: rgba(242, 231, 213, 0.74);
}

.salida-mascara svg {
    display: block;
    width: 100%;
    max-height: 180px;
}

.salida-trazo-mascara {
    stroke-width: 4.2;
}

.salida-trazo-mascara .ojo-mascara {
    stroke-width: 8;
}

.salida-texto-svg {
    fill: rgba(139, 216, 210, 0.64);
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 1.5px;
}

.salida-boletos {
    width: min(390px, 100%);
}

.salida-foto-composicion {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(270px, .82fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(45px, 7vw, 105px);
}

.salida-foto-marco {
    position: relative;
    width: min(415px, 100%);
    margin: auto;
    padding: 14px 14px 45px;
    border: 1px solid rgba(242, 231, 213, .24);
    background: #e8ddca;
    box-shadow: 0 25px 65px rgba(0, 0, 0, .38);
    transform: rotate(-2.2deg);
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), box-shadow .65s ease;
}

.salida-foto-marco:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .45);
}

.salida-foto {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    filter: saturate(.88) contrast(.97);
}

.salida-foto-placeholder {
    min-height: 380px;
    display: grid;
    place-content: center;
    gap: 8px;
    border: 1px dashed rgba(7, 27, 30, .3);
    color: rgba(7, 27, 30, .62);
    text-align: center;
}

.salida-foto-placeholder span {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
}

.salida-foto-placeholder small {
    font-family: monospace;
    font-size: .65rem;
}

.salida-foto-marco > p {
    position: absolute;
    right: 20px;
    bottom: 14px;
    left: 20px;
    color: rgba(7, 27, 30, .65);
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

.salida-foto-vidrio {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 45px;
    left: 14px;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.salida-foto-vidrio::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -70%;
    width: 38%;
    height: 190%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: rotate(18deg);
    animation: salidaBrilloFoto 7s ease-in-out infinite;
}

.salida-colores-marciano {
    margin: 28px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.salida-colores-marciano span {
    display: block;
    border: 1px solid rgba(205, 255, 92, .55);
    background: rgba(157, 255, 53, .14);
    box-shadow: 0 0 34px rgba(157, 255, 53, .08);
}

.salida-chaqueta {
    width: 70px;
    height: 80px;
    clip-path: polygon(20% 12%,38% 0,62% 0,80% 12%,100% 42%,80% 52%,73% 100%,27% 100%,20% 52%,0 42%);
}

.salida-gorro {
    width: 70px;
    height: 42px;
    border-radius: 50% 50% 18% 18%;
}

.salida-manos {
    width: min(360px, 75%);
    margin: 34px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.salida-manos .mano {
    width: 92px;
    height: 46px;
    border: 2px solid rgba(242, 231, 213, .58);
    border-radius: 55% 45% 45% 55%;
    opacity: .78;
}

.salida-manos i {
    width: 28px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ambar), transparent);
}

.mano-izquierda { transform: rotate(12deg); }
.mano-derecha { transform: rotate(168deg); }

.salida-silla-cine {
    position: relative;
    width: min(300px, 70%);
    height: 330px;
    margin: auto;
}

.silla-respaldo,
.silla-asiento,
.silla-brazos {
    position: absolute;
    border: 2px solid rgba(242, 231, 213, .62);
    background: rgba(242, 231, 213, .025);
}

.silla-respaldo {
    top: 20px;
    left: 65px;
    width: 170px;
    height: 205px;
    border-radius: 46% 46% 16% 16%;
}

.silla-asiento {
    bottom: 35px;
    left: 58px;
    width: 184px;
    height: 78px;
    border-radius: 20% 20% 35% 35%;
}

.silla-brazos {
    top: 173px;
    left: 28px;
    width: 244px;
    height: 36px;
    border-right: 0;
    border-left: 0;
}

.silla-mano {
    position: absolute;
    top: 151px;
    right: 22px;
    width: 63px;
    height: 34px;
    border: 2px solid var(--turquesa-claro);
    border-radius: 55%;
    transform: rotate(-20deg);
}

.salida-helado {
    width: min(270px, 70%);
}

.salida-linea-metro {
    width: min(620px, 82%);
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
}

.salida-linea-metro span {
    height: 2px;
    flex: 1;
    background: linear-gradient(to right, transparent, rgba(139, 216, 210, .58));
}

.salida-linea-metro span:last-child {
    background: linear-gradient(to left, transparent, rgba(139, 216, 210, .58));
}

.salida-linea-metro i {
    width: 15px;
    height: 15px;
    border: 2px solid var(--ambar);
    border-radius: 50%;
}

@keyframes salidaBrilloFoto {
    0%, 72% { left: -70%; }
    100% { left: 140%; }
}

@media (max-width: 850px) {
    .salida-foto-composicion {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .salida-foto-marco {
        width: min(330px, 72%);
    }

    .salida-foto-placeholder {
        min-height: 275px;
    }

    .salida-foto-composicion .historia-bloque-texto {
        text-align: center;
    }
}

@media (max-width: 560px) {
    .salida-mascara {
        width: min(120px, 34%);
        margin-bottom: 10px;
    }

    .salida-mascara svg {
        max-height: 125px;
    }

    .salida-foto-marco {
        width: min(270px, 82%);
        padding: 10px 10px 38px;
    }

    .salida-foto-placeholder {
        min-height: 220px;
    }

    .salida-foto-vidrio {
        top: 10px;
        right: 10px;
        bottom: 38px;
        left: 10px;
    }

    .salida-silla-cine {
        transform: scale(.68);
        transform-origin: center;
    }

    .salida-helado {
        width: min(180px, 58%);
    }
}


/* ========================================
   NUESTROS RECUERDOS — MESA DE FOTOS
======================================== */

.pantalla-recuerdos {
    padding: 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 20%,
            rgba(67, 193, 186, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 83% 78%,
            rgba(215, 154, 91, 0.1),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #071719,
            #0b2a2d 57%,
            #071b1e
        );
}

.recuerdos-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 58px 58px;
}

.recuerdos-layout {
    width: 100%;
    height: 100%;

    padding:
        28px 4.5%
        24px;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    gap: 10px;
}

.recuerdos-header {
    position: relative;
    z-index: 20;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    min-height: 50px;
}

.recuerdos-etiqueta {
    color: var(--turquesa-claro);

    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.recuerdos-subtitulo {
    margin-top: 4px;

    color: rgba(242, 231, 213, 0.45);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1rem;
    font-style: italic;
}

.recuerdos-header-controles {
    display: flex;
    align-items: center;
    gap: 9px;
}

.recuerdos-boton {
    min-height: 40px;

    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border:
        1px solid
        rgba(139, 216, 210, 0.42);

    background:
        rgba(4, 20, 22, 0.86);

    color: var(--crema);

    font-size: 0.67rem;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.recuerdos-boton:hover {
    border-color: var(--turquesa-claro);

    background:
        rgba(67, 193, 186, 0.18);

    transform: translateY(-2px);
}

.recuerdos-contenido {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;

    padding:
        30px 2%
        90px;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(139, 216, 210, 0.3)
        transparent;
}

.recuerdos-intro {
    width: min(860px, 100%);

    margin:
        25px auto
        85px;

    text-align: center;
}

.recuerdos-kicker {
    margin-bottom: 13px;

    color: var(--turquesa-claro);

    font-size: 0.64rem;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.recuerdos-intro h2 {
    margin: 0;

    color: var(--crema);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -1.5px;
}

.recuerdos-intro > p {
    max-width: 640px;

    margin:
        24px auto
        0;

    color: rgba(242, 231, 213, 0.64);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.4rem
        );

    line-height: 1.55;
}

.recuerdos-indicacion {
    display: block;

    margin-top: 27px;

    color: rgba(139, 216, 210, 0.43);

    font-size: 0.58rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mesa-recuerdos {
    position: relative;

    width: min(1220px, 100%);
    min-height: 1620px;

    margin:
        0 auto
        105px;
}

.mesa-recuerdos::before {
    content: "";

    position: absolute;
    inset: 2% 1%;

    border:
        1px solid
        rgba(139, 216, 210, 0.08);

    background:
        radial-gradient(
            circle at center,
            rgba(242, 231, 213, 0.025),
            transparent 70%
        );

    transform: rotate(-0.4deg);
}

.foto-recuerdo {
    position: absolute;
    z-index: 2;

    width: 280px;

    outline: none;

    transform:
        translate(var(--tx), var(--ty))
        rotate(var(--rot));

    transition:
        z-index 0s,
        transform 0.55s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.foto-recuerdo:hover,
.foto-recuerdo:focus {
    z-index: 30;

    transform:
        translate(var(--tx), calc(var(--ty) - 16px))
        rotate(0deg)
        scale(1.08);
}

.foto-papel {
    position: relative;

    padding:
        11px 11px
        39px;

    background:
        #e8ddca;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.35);

    transition:
        box-shadow 0.5s ease;
}

.foto-recuerdo:hover
.foto-papel,
.foto-recuerdo:focus
.foto-papel {
    box-shadow:
        0 30px 75px
        rgba(0, 0, 0, 0.48);
}

.foto-papel img {
    display: block;

    width: 100%;
    height: 300px;

    object-fit: cover;

    filter:
        saturate(0.88)
        contrast(0.97);
}

.foto-fecha {
    position: absolute;

    right: 13px;
    bottom: 12px;
    left: 13px;

    color: rgba(7, 27, 30, 0.63);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
}

.foto-brillo {
    position: absolute;

    top: 11px;
    right: 11px;
    bottom: 39px;
    left: 11px;

    overflow: hidden;
    pointer-events: none;
}

.foto-brillo::after {
    content: "";

    position: absolute;

    top: -50%;
    left: -80%;

    width: 32%;
    height: 210%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transform: rotate(18deg);

    transition: left 0.85s ease;
}

.foto-recuerdo:hover
.foto-brillo::after,
.foto-recuerdo:focus
.foto-brillo::after {
    left: 145%;
}

.foto-texto {
    position: absolute;

    top: calc(100% + 12px);
    left: 50%;

    width: 320px;

    padding:
        14px 17px
        15px;

    border:
        1px solid
        rgba(139, 216, 210, 0.18);

    background:
        rgba(4, 18, 20, 0.94);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 10px);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}

.foto-recuerdo:hover
.foto-texto,
.foto-recuerdo:focus
.foto-texto {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}

.foto-texto span {
    display: block;

    color: var(--turquesa-claro);

    font-size: 0.64rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.foto-texto p {
    margin-top: 7px;

    color: rgba(242, 231, 213, 0.7);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1rem;
    line-height: 1.42;
}

.foto-texto-corto {
    width: 285px;
}

.foto-1 {
    --tx: 30px;
    --ty: 20px;
    --rot: -5deg;
}

.foto-2 {
    --tx: 430px;
    --ty: 0px;
    --rot: 4deg;
}

.foto-3 {
    --tx: 825px;
    --ty: 75px;
    --rot: -3deg;
}

.foto-4 {
    --tx: 185px;
    --ty: 430px;
    --rot: 3deg;
}

.foto-5 {
    --tx: 590px;
    --ty: 395px;
    --rot: -5deg;
}

.foto-6 {
    --tx: 895px;
    --ty: 525px;
    --rot: 5deg;
}

.foto-7 {
    --tx: 10px;
    --ty: 840px;
    --rot: -4deg;
}

.foto-8 {
    --tx: 395px;
    --ty: 805px;
    --rot: 4deg;
}

.foto-9 {
    --tx: 765px;
    --ty: 915px;
    --rot: -3deg;
}

.foto-10 {
    --tx: 335px;
    --ty: 1230px;
    --rot: 2deg;

    width: 315px;
}

.foto-10
.foto-papel img {
    height: 330px;
}

.recuerdos-cierre {
    width: min(760px, 100%);

    margin:
        0 auto
        35px;

    text-align: center;
}

.recuerdos-cierre > p {
    color: rgba(139, 216, 210, 0.55);

    font-size: 0.66rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.recuerdos-cierre h3 {
    margin:
        18px auto
        28px;

    color: var(--crema);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.5rem
        );

    font-weight: 500;
    line-height: 1;
}

.recuerdos-cierre-boton {
    min-width: 180px;
}

@media (max-width: 1180px) {

    .mesa-recuerdos {
        min-height: auto;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            70px 45px;

        padding:
            20px 5%
            60px;
    }

    .foto-recuerdo,
    .foto-10 {
        position: relative;

        width: min(320px, 100%);

        margin: auto;

        transform: rotate(var(--rot));
    }

    .foto-recuerdo:hover,
    .foto-recuerdo:focus {
        transform:
            translateY(-12px)
            rotate(0deg)
            scale(1.04);
    }

    .foto-papel img,
    .foto-10
    .foto-papel img {
        height: 330px;
    }

}

@media (max-width: 720px) {

    .recuerdos-layout {
        padding:
            18px 15px
            14px;
    }

    .recuerdos-header {
        gap: 12px;
    }

    .recuerdos-header-controles {
        gap: 6px;
    }

    .recuerdos-boton span:first-child {
        max-width: 105px;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .recuerdos-contenido {
        padding:
            15px 0
            70px;
    }

    .recuerdos-intro {
        margin-bottom: 55px;

        padding:
            0 12px;
    }

    .mesa-recuerdos {
        grid-template-columns: 1fr;

        gap: 65px;

        padding:
            10px 20px
            50px;
    }

    .foto-recuerdo,
    .foto-10 {
        width: min(330px, 88vw);
    }

    .foto-texto,
    .foto-texto-corto {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;

        margin-top: 10px;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .foto-papel img,
    .foto-10
    .foto-papel img {
        height: auto;
        max-height: 420px;
    }

    .recuerdos-indicacion {
        display: none;
    }

}

@media (max-width: 500px) {

    .recuerdos-subtitulo {
        display: none;
    }

    .recuerdos-volver span:last-child,
    .recuerdos-continuar span:first-child {
        display: none;
    }

    .recuerdos-volver,
    .recuerdos-continuar {
        width: 40px;
        padding: 9px;
    }

}

/* ===== LO QUE AMO DE TI ===== */
.pantalla-amor{padding:0;overflow:hidden;background:radial-gradient(circle at 13% 15%,rgba(86,151,126,.12),transparent 32%),radial-gradient(circle at 87% 83%,rgba(215,154,91,.07),transparent 35%),linear-gradient(145deg,#050d0e,#091a1c 48%,#071416)}
.amor-fondo{position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:62px 62px}
.amor-header{position:absolute;top:0;right:0;left:0;z-index:30;min-height:78px;padding:22px 4.5% 14px;display:flex;align-items:flex-start;justify-content:space-between;background:linear-gradient(to bottom,rgba(5,13,14,.96),rgba(5,13,14,.68),transparent);pointer-events:none}
.amor-header>*{pointer-events:auto}.amor-capitulo{color:var(--turquesa-claro);font-size:.62rem;letter-spacing:3px;text-transform:uppercase}.amor-subtitulo{margin-top:5px;color:rgba(242,231,213,.45);font-family:"Cormorant Garamond",serif;font-size:1rem;font-style:italic}.amor-header-controles{display:flex;gap:9px}
.amor-boton{min-height:40px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(116,184,151,.4);background:rgba(5,19,18,.88);color:var(--crema);font-size:.67rem;letter-spacing:1px;backdrop-filter:blur(12px);transition:.3s ease}.amor-boton:hover{border-color:rgba(139,216,180,.8);background:rgba(86,151,126,.18);transform:translateY(-2px)}
.amor-scroll{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:rgba(116,184,151,.3) transparent}
.amor-portada,.amor-bloque,.amor-pequenas,.amor-cierre{position:relative;width:min(1240px,91%);margin:0 auto;scroll-snap-align:start}
.amor-portada{min-height:100vh;padding:150px 5% 90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.amor-kicker,.amor-numero{color:rgba(125,198,163,.72);font-size:.64rem;letter-spacing:3.5px;text-transform:uppercase}
.amor-portada h2{margin:17px 0 25px;color:var(--crema);font-family:"Cormorant Garamond",serif;font-size:clamp(4.5rem,10vw,9.5rem);font-weight:500;line-height:.84;letter-spacing:-3px}.amor-portada-texto{color:rgba(242,231,213,.62);font-family:"Cormorant Garamond",serif;font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.55}.amor-portada-texto p+p{color:var(--crema);font-style:italic}
.amor-bajar{position:absolute;bottom:42px;display:grid;justify-items:center;gap:10px;color:rgba(125,198,163,.42);font-size:.56rem;letter-spacing:2px;text-transform:uppercase}.amor-bajar i{width:1px;height:42px;background:linear-gradient(to bottom,transparent,rgba(125,198,163,.7));animation:amorIndicador 2s ease-in-out infinite}
.amor-bloque{min-height:96vh;padding:125px 4% 100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);align-items:center;gap:clamp(60px,9vw,145px);border-top:1px solid rgba(125,198,163,.09)}.amor-invertido{grid-template-columns:minmax(280px,.75fr) minmax(0,1fr)}.amor-hogar{grid-template-columns:1fr;text-align:center}.amor-texto{max-width:690px}.amor-centro{max-width:850px;margin:auto}
.amor-texto h3,.amor-pequenas h3{margin:13px 0 30px;color:var(--crema);font-family:"Cormorant Garamond",serif;font-size:clamp(3.8rem,7vw,7.2rem);font-weight:500;line-height:.88;letter-spacing:-2px}.amor-texto h3 em,.amor-pequenas h3 em{display:block;color:rgba(137,207,173,.9);font-weight:500}.amor-parrafos{max-width:680px}.amor-parrafos p{color:rgba(242,231,213,.67);font-family:"Cormorant Garamond",serif;font-size:clamp(1.05rem,1.75vw,1.35rem);line-height:1.62}.amor-parrafos p+p{margin-top:17px}.amor-parrafos strong{color:var(--crema);font-weight:500}.amor-parrafos em{color:rgba(137,207,173,.9)}
.amor-ilustracion{width:min(430px,100%);margin:auto;color:rgba(116,184,151,.78)}.amor-ilustracion svg{display:block;width:100%;max-height:430px;overflow:visible}.amor-ilustracion>p{margin-top:10px;color:rgba(137,207,173,.48);font-family:"Cormorant Garamond",serif;font-size:1rem;font-style:italic;text-align:center}.amor-trazo{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2600;stroke-dashoffset:2600}.amor-visible .amor-trazo{animation:amorDibujar 2.5s cubic-bezier(.22,1,.36,1) .15s forwards}.amor-svg-texto{fill:rgba(116,184,151,.75);font-family:"Montserrat",sans-serif;font-size:21px;letter-spacing:3px;opacity:0}.amor-visible .amor-svg-texto{animation:amorAparecer .7s ease 1.4s forwards}
.amor-audifonos{width:min(350px,78%)}.amor-puerta{width:min(370px,82%)}.amor-arbol{width:min(620px,78%);margin-bottom:25px}.amor-arbol svg{max-height:440px}.amor-planta{width:min(330px,70%)}
.amor-pequenas{min-height:100vh;padding:130px 5% 115px;border-top:1px solid rgba(125,198,163,.09)}.amor-pequenas-titulo{max-width:850px}.amor-pequenas-titulo>p:last-child{max-width:560px;color:rgba(242,231,213,.6);font-family:"Cormorant Garamond",serif;font-size:1.25rem;line-height:1.5}.amor-notas{margin-top:65px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 55px}.amor-notas article{min-height:150px;padding:25px 27px;border:1px solid rgba(125,198,163,.13);background:rgba(7,25,24,.3);backdrop-filter:blur(8px)}.amor-notas span{color:rgba(137,207,173,.48);font-size:.6rem;letter-spacing:2px}.amor-notas p{margin-top:16px;color:rgba(242,231,213,.7);font-family:"Cormorant Garamond",serif;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45}.amor-manos-mini{width:min(580px,80%);margin:55px auto 15px}.amor-manos-mini svg{max-height:190px}.amor-pequenas-cierre{color:rgba(242,231,213,.58);font-family:"Cormorant Garamond",serif;font-size:clamp(1.3rem,2.4vw,1.8rem);text-align:center}.amor-pequenas-cierre strong{display:block;margin-top:5px;color:var(--crema);font-weight:500}
.amor-cierre{min-height:100vh;padding:145px 9% 110px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid rgba(125,198,163,.09);text-align:center}.amor-cierre>p{color:rgba(137,207,173,.68);font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-style:italic}.amor-cierre h3{max-width:950px;margin:23px auto 20px;color:var(--crema);font-family:"Cormorant Garamond",serif;font-size:clamp(3rem,6vw,6.2rem);font-weight:500;line-height:.97}.amor-cierre>strong{color:rgba(137,207,173,.9);font-family:"Cormorant Garamond",serif;font-size:clamp(1.8rem,3.8vw,3rem);font-style:italic;font-weight:500}.amor-cierre-boton{min-width:210px;margin-top:55px}
.amor-revelar{opacity:0;transform:translateY(42px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)}.amor-revelar.amor-visible{opacity:1;transform:none}.amor-revelar .amor-parrafos p,.amor-revelar .amor-notas article{opacity:0;transform:translateY(18px)}.amor-visible .amor-parrafos p,.amor-visible .amor-notas article{animation:amorSubir .75s ease forwards}.amor-visible .amor-parrafos p:nth-child(2),.amor-visible .amor-notas article:nth-child(2){animation-delay:.2s}.amor-visible .amor-parrafos p:nth-child(3),.amor-visible .amor-notas article:nth-child(3){animation-delay:.4s}.amor-visible .amor-notas article:nth-child(4){animation-delay:.6s}
@keyframes amorDibujar{to{stroke-dashoffset:0}}@keyframes amorAparecer{to{opacity:1}}@keyframes amorSubir{to{opacity:1;transform:none}}@keyframes amorIndicador{0%,100%{opacity:.25;transform:scaleY(.72);transform-origin:top}50%{opacity:.9;transform:scaleY(1)}}
@media(max-width:900px){.amor-bloque,.amor-invertido{grid-template-columns:1fr;min-height:auto;padding:120px 5% 95px;gap:45px}.amor-invertido .amor-ilustracion{order:2}.amor-invertido .amor-texto{order:1}.amor-texto{max-width:780px;margin:auto;text-align:center}.amor-parrafos{margin:auto}.amor-ilustracion{width:min(350px,62%)}.amor-arbol{width:min(540px,85%)}}
@media(max-width:650px){.amor-header{min-height:65px;padding:15px}.amor-subtitulo{display:none}.amor-header-controles button span:first-child{max-width:0;overflow:hidden}.amor-portada,.amor-bloque,.amor-pequenas,.amor-cierre{width:calc(100% - 30px)}.amor-portada{min-height:100svh;padding:110px 8px 75px}.amor-portada h2{font-size:clamp(4rem,20vw,6rem);letter-spacing:-2px}.amor-bloque,.amor-invertido{padding:100px 4px 80px}.amor-texto h3,.amor-pequenas h3{font-size:clamp(3.35rem,16vw,5rem);letter-spacing:-1px}.amor-parrafos p{font-size:1.05rem}.amor-ilustracion{width:min(275px,78%)}.amor-arbol{width:min(370px,92%)}.amor-notas{grid-template-columns:1fr;gap:16px;margin-top:45px}.amor-notas article{min-height:0}.amor-pequenas{padding:105px 4px 90px}.amor-cierre{min-height:100svh;padding:110px 10px 90px}}


/* ========================================
   LO QUE HEMOS CONSTRUIDO
======================================== */

.pantalla-construido {
    padding: 0;
    overflow: hidden;

    background:
        radial-gradient(circle at 10% 22%, rgba(109, 157, 137, 0.12), transparent 34%),
        radial-gradient(circle at 88% 77%, rgba(215, 154, 91, 0.08), transparent 34%),
        linear-gradient(145deg, #061012, #0a2022 52%, #071517);
}

.construido-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: 0.14;

    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

    background-size: 64px 64px;
}

.construido-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 40;

    min-height: 78px;
    padding: 22px 4.5% 14px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    background:
        linear-gradient(
            to bottom,
            rgba(6,16,18,.97),
            rgba(6,16,18,.68),
            transparent
        );

    pointer-events: none;
}

.construido-header > * {
    pointer-events: auto;
}

.construido-capitulo,
.construido-numero,
.construido-kicker {
    color: rgba(139, 206, 174, .76);

    font-size: .63rem;
    letter-spacing: 3.3px;
    text-transform: uppercase;
}

.construido-subtitulo {
    margin-top: 5px;

    color: rgba(242,231,213,.45);

    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
}

.construido-header-controles {
    display: flex;
    gap: 9px;
}

.construido-boton {
    min-height: 40px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid rgba(139,206,174,.4);

    background: rgba(5,19,18,.88);
    color: var(--crema);

    font-size: .67rem;
    letter-spacing: 1px;

    backdrop-filter: blur(12px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.construido-boton:hover {
    border-color: rgba(151,226,190,.82);
    background: rgba(81,146,117,.18);
    transform: translateY(-2px);
}

.construido-scroll {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: y proximity;

    scrollbar-width: thin;
    scrollbar-color: rgba(139,206,174,.3) transparent;
}

.construido-portada,
.construido-bloque,
.construido-dificil,
.construido-cotidiano,
.construido-cierre {
    position: relative;

    width: min(1240px, 91%);
    margin: 0 auto;

    scroll-snap-align: start;
}

.construido-portada {
    min-height: 100vh;
    padding: 140px 5% 90px;

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

    text-align: center;
}

.construido-caminos {
    width: min(760px, 88%);
    margin-bottom: 20px;

    color: rgba(126, 190, 159, .76);
}

.construido-caminos svg {
    display: block;
    width: 100%;
}

.construido-portada h2,
.construido-texto h3,
.construido-dificil h3,
.construido-cotidiano h3 {
    margin: 14px 0 28px;

    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    line-height: .88;
    letter-spacing: -2px;
}

.construido-portada h2 {
    font-size: clamp(4.5rem, 9vw, 9rem);
}

.construido-texto h3,
.construido-dificil h3,
.construido-cotidiano h3 {
    font-size: clamp(3.7rem, 7vw, 7rem);
}

.construido-portada h2 em,
.construido-texto h3 em,
.construido-dificil h3 em,
.construido-cotidiano h3 em {
    display: block;

    color: rgba(143, 213, 179, .92);
    font-weight: 500;
}

.construido-portada-texto {
    max-width: 720px;

    color: rgba(242,231,213,.66);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.1rem, 2.1vw, 1.55rem);
    line-height: 1.55;
}

.construido-portada-texto p + p {
    margin-top: 11px;
}

.construido-bajar {
    position: absolute;
    bottom: 38px;

    display: grid;
    justify-items: center;
    gap: 9px;

    color: rgba(139,206,174,.42);

    font-size: .56rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.construido-bajar i {
    width: 1px;
    height: 40px;

    background: linear-gradient(to bottom, transparent, rgba(139,206,174,.72));

    animation: construidoIndicador 2s ease-in-out infinite;
}

.construido-bloque {
    min-height: 96vh;
    padding: 125px 4% 100px;

    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(280px,.76fr);
    align-items: center;

    gap: clamp(55px, 8vw, 135px);

    border-top: 1px solid rgba(139,206,174,.09);
}

.construido-bloque-edificio {
    grid-template-columns: minmax(280px,.72fr) minmax(0,1fr);
}

.construido-texto {
    max-width: 700px;
}

.construido-parrafos {
    max-width: 680px;
}

.construido-parrafos p {
    color: rgba(242,231,213,.67);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.05rem, 1.7vw, 1.34rem);
    line-height: 1.62;
}

.construido-parrafos p + p {
    margin-top: 17px;
}

.construido-ilustracion,
.construido-edificio {
    width: min(430px, 100%);
    margin: auto;

    color: rgba(126,190,159,.78);
}

.construido-ilustracion svg,
.construido-edificio svg {
    display: block;
    width: 100%;
    max-height: 520px;

    overflow: visible;
}

.construido-ilustracion > p {
    margin-top: 10px;

    color: rgba(143,213,179,.48);

    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

.construido-trazo {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 3200;
    stroke-dashoffset: 3200;
}

.construido-visible .construido-trazo {
    animation:
        construidoDibujar 2.45s cubic-bezier(.22,1,.36,1) .12s forwards;
}

.construido-trazo-a,
.construido-trazo-b,
.construido-trazo-union {
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
}

.construido-visible .construido-trazo-a {
    animation: construidoDibujar 1.4s ease .15s forwards;
}

.construido-visible .construido-trazo-b {
    animation: construidoDibujar 1.4s ease .32s forwards;
}

.construido-visible .construido-trazo-union {
    animation: construidoDibujar 1.7s ease 1.05s forwards;
}

.construido-puntos-luz {
    fill: rgba(209, 139, 192, .68);
    opacity: 0;
}

.construido-visible .construido-puntos-luz {
    animation: construidoAparecer .7s ease 1.5s forwards;
}

.construido-luces {
    width: min(390px, 80%);
}

.construido-edificio {
    width: min(355px, 82%);
}

.ventana-nosotros {
    fill: rgba(228, 195, 91, .08);
    stroke: rgba(228,195,91,.25);
    stroke-width: 2;

    opacity: .2;
}

.ventana-etiqueta {
    fill: rgba(234,216,151,.92);

    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    letter-spacing: 2px;

    opacity: 0;
}

.construido-conexion-pisos {
    fill: none;
    stroke: rgba(143,213,179,.72);
    stroke-width: 3;
    stroke-linecap: round;

    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

.construido-visible .ventana-tu {
    animation: construidoVentana 1s ease 1.05s forwards;
}

.construido-visible .etiqueta-tu {
    animation: construidoAparecer .55s ease 1.45s forwards;
}

.construido-visible .ventana-yo {
    animation: construidoVentana 1s ease 1.8s forwards;
}

.construido-visible .etiqueta-yo {
    animation: construidoAparecer .55s ease 2.18s forwards;
}

.construido-visible .construido-conexion-pisos {
    animation: construidoDibujar .7s ease 2.45s forwards;
}

.construido-frase-gigante {
    margin-top: 35px;

    color: rgba(242,231,213,.57);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3.5vw, 3.4rem);
    line-height: 1;
}

.construido-frase-gigante strong {
    display: block;

    margin-top: 5px;

    color: var(--crema);
    font-weight: 500;
    font-style: italic;
}

.construido-patita {
    width: min(310px, 72%);
}

.construido-etiqueta-especial {
    margin-top: 30px;

    color: rgba(143,213,179,.68);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    font-style: italic;
}

.construido-dificil {
    min-height: 100vh;
    padding: 135px 8% 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-top: 1px solid rgba(139,206,174,.09);
}

.construido-dificil-contenido {
    width: min(900px, 100%);
}

.construido-linea-rota {
    width: min(730px, 88%);

    margin: 60px auto 38px;

    display: flex;
    align-items: center;
    gap: 18px;
}

.construido-linea-rota span {
    height: 1px;
    flex: 1;

    background: linear-gradient(to right, transparent, rgba(139,206,174,.46));
}

.construido-linea-rota span:last-child {
    background: linear-gradient(to left, transparent, rgba(139,206,174,.46));
}

.construido-linea-rota i {
    width: 42px;
    height: 25px;

    border-top: 1px solid rgba(215,154,91,.62);

    transform: rotate(-14deg);
}

.construido-aun {
    color: rgba(242,231,213,.62);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.4rem, 5vw, 5rem);
    text-align: center;
}

.construido-aun strong {
    display: block;

    color: var(--crema);
    font-weight: 500;
}

.construido-seguimos {
    margin-top: 30px;

    color: rgba(143,213,179,.82);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-style: italic;
    text-align: center;
}

.construido-crecimiento {
    width: min(390px, 78%);
}

.construido-juguetes {
    width: min(470px, 92%);
}

.construido-cotidiano {
    min-height: 100vh;
    padding: 125px 5% 115px;

    border-top: 1px solid rgba(139,206,174,.09);
}

.construido-cotidiano-titulo {
    max-width: 920px;
}

.construido-cosas {
    margin-top: 65px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    gap: 18px;
}

.construido-cosas article {
    min-height: 230px;
    padding: 27px 24px;

    border: 1px solid rgba(139,206,174,.13);

    background: rgba(7,25,24,.28);

    backdrop-filter: blur(8px);
}

.construido-cosas span {
    color: rgba(143,213,179,.45);

    font-size: .6rem;
    letter-spacing: 2px;
}

.construido-cosas h4 {
    margin-top: 28px;

    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-size: 2.1rem;
    font-weight: 500;
}

.construido-cosas p {
    margin-top: 11px;

    color: rgba(242,231,213,.62);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.08rem;
    line-height: 1.5;
}

.construido-consideracion {
    max-width: 850px;

    margin: 70px auto 0;

    color: rgba(242,231,213,.65);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.2;
    text-align: center;
}

.construido-consideracion strong {
    display: block;

    margin-top: 7px;

    color: var(--crema);
    font-weight: 500;
}

.construido-natural {
    margin-top: 25px;

    color: rgba(143,213,179,.76);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    font-style: italic;
    text-align: center;
}

.construido-cierre {
    min-height: 100vh;
    padding: 145px 9% 110px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.construido-cierre-pre {
    color: rgba(143,213,179,.64);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.45rem;
    font-style: italic;
}

.construido-cierre h3 {
    max-width: 930px;

    margin: 25px auto 35px;

    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 6vw, 6.1rem);
    font-weight: 500;
    line-height: .97;
}

.construido-puente {
    width: 1px;
    height: 85px;

    margin: 5px auto 25px;

    position: relative;

    background: rgba(139,206,174,.4);
}

.construido-puente i {
    position: absolute;
    bottom: -1px;
    left: -4px;

    width: 9px;
    height: 9px;

    border-right: 1px solid rgba(139,206,174,.6);
    border-bottom: 1px solid rgba(139,206,174,.6);

    transform: rotate(45deg);
}

.construido-cierre-palabra {
    color: rgba(143,213,179,.94);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.2rem, 7vw, 6rem);
    font-style: italic;
}

.construido-cierre-boton {
    min-width: 145px;
    margin-top: 45px;
}

/* reveals */
.construido-revelar {
    opacity: 0;
    transform: translateY(42px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}

.construido-revelar.construido-visible {
    opacity: 1;
    transform: none;
}

.construido-revelar .construido-parrafos p,
.construido-revelar .construido-cosas article {
    opacity: 0;
    transform: translateY(18px);
}

.construido-visible .construido-parrafos p,
.construido-visible .construido-cosas article {
    animation: construidoSubir .75s ease forwards;
}

.construido-visible .construido-parrafos p:nth-child(2),
.construido-visible .construido-cosas article:nth-child(2) {
    animation-delay: .18s;
}

.construido-visible .construido-parrafos p:nth-child(3),
.construido-visible .construido-cosas article:nth-child(3) {
    animation-delay: .36s;
}

.construido-visible .construido-parrafos p:nth-child(4),
.construido-visible .construido-cosas article:nth-child(4) {
    animation-delay: .54s;
}

@keyframes construidoDibujar {
    to { stroke-dashoffset: 0; }
}

@keyframes construidoAparecer {
    to { opacity: 1; }
}

@keyframes construidoSubir {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes construidoVentana {
    from {
        opacity: .2;
        fill: rgba(228,195,91,.08);
        filter: drop-shadow(0 0 0 rgba(228,195,91,0));
    }

    to {
        opacity: 1;
        fill: rgba(228,195,91,.46);
        stroke: rgba(242,219,128,.9);
        filter: drop-shadow(0 0 12px rgba(228,195,91,.38));
    }
}

@keyframes construidoIndicador {
    0%,100% {
        opacity: .25;
        transform: scaleY(.72);
        transform-origin: top;
    }

    50% {
        opacity: .9;
        transform: scaleY(1);
    }
}

@media (max-width: 980px) {

    .construido-bloque,
    .construido-bloque-edificio {
        grid-template-columns: 1fr;
        min-height: auto;

        padding: 115px 5% 95px;

        gap: 45px;
    }

    .construido-bloque-edificio .construido-edificio {
        order: 2;
    }

    .construido-bloque-edificio .construido-texto {
        order: 1;
    }

    .construido-texto {
        max-width: 800px;
        margin: auto;

        text-align: center;
    }

    .construido-parrafos {
        margin: auto;
    }

    .construido-ilustracion {
        width: min(390px, 64%);
    }

    .construido-cosas {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 650px) {

    .construido-header {
        min-height: 65px;
        padding: 15px;
    }

    .construido-subtitulo {
        display: none;
    }

    .construido-header-controles button span:first-child {
        max-width: 0;
        overflow: hidden;
    }

    .construido-portada,
    .construido-bloque,
    .construido-dificil,
    .construido-cotidiano,
    .construido-cierre {
        width: calc(100% - 30px);
    }

    .construido-portada {
        min-height: 100svh;
        padding: 110px 4px 75px;
    }

    .construido-caminos {
        width: 100%;
    }

    .construido-portada h2 {
        font-size: clamp(4rem, 19vw, 6rem);
        letter-spacing: -2px;
    }

    .construido-texto h3,
    .construido-dificil h3,
    .construido-cotidiano h3 {
        font-size: clamp(3.3rem, 15vw, 5rem);
        letter-spacing: -1px;
    }

    .construido-bloque,
    .construido-bloque-edificio {
        padding: 100px 4px 80px;
    }

    .construido-parrafos p {
        font-size: 1.05rem;
    }

    .construido-ilustracion {
        width: min(280px, 78%);
    }

    .construido-edificio {
        width: min(260px, 76%);
    }

    .construido-dificil {
        padding: 105px 8px 90px;
    }

    .construido-cotidiano {
        padding: 105px 4px 90px;
    }

    .construido-cosas {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .construido-cosas article {
        min-height: 0;
    }

    .construido-cierre {
        min-height: 100svh;
        padding: 110px 8px 90px;
    }

}
/* ===== ELEGIRNOS ===== */
.pantalla-elegirnos{padding:0;overflow:hidden;background:radial-gradient(circle at 14% 18%,rgba(92,135,126,.11),transparent 32%),radial-gradient(circle at 86% 78%,rgba(115,89,117,.10),transparent 33%),linear-gradient(145deg,#050b0d,#09171a 50%,#071113)}
.elegirnos-fondo{position:absolute;inset:0;z-index:-1;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:66px 66px}
.elegirnos-header{position:absolute;top:0;left:0;right:0;z-index:40;min-height:78px;padding:22px 4.5% 14px;display:flex;justify-content:space-between;background:linear-gradient(to bottom,rgba(5,11,13,.97),rgba(5,11,13,.68),transparent);pointer-events:none}.elegirnos-header>*{pointer-events:auto}.elegirnos-capitulo,.elegirnos-numero,.elegirnos-kicker{color:rgba(132,191,171,.76);font-size:.63rem;letter-spacing:3.3px;text-transform:uppercase}.elegirnos-subtitulo{margin-top:5px;color:rgba(242,231,213,.45);font-family:"Cormorant Garamond",serif;font-size:1rem;font-style:italic}.elegirnos-header-controles{display:flex;gap:9px}.elegirnos-boton{min-height:40px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(132,191,171,.4);background:rgba(5,16,17,.88);color:var(--crema);font-size:.67rem;letter-spacing:1px;backdrop-filter:blur(12px);transition:.3s}.elegirnos-boton:hover{border-color:rgba(151,226,190,.82);background:rgba(81,146,117,.18);transform:translateY(-2px)}
.elegirnos-scroll{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:rgba(132,191,171,.3) transparent}.elegirnos-portada,.elegirnos-bloque,.elegirnos-dificil,.elegirnos-centro,.elegirnos-pasitas,.elegirnos-cierre{position:relative;width:min(1240px,91%);margin:0 auto;scroll-snap-align:start}.elegirnos-portada{min-height:100vh;padding:145px 6% 90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.elegirnos-portada h2,.elegirnos-texto h3,.elegirnos-dificil h3,.elegirnos-centro h3,.elegirnos-pasitas h3{margin:14px 0 28px;color:var(--crema);font-family:"Cormorant Garamond",serif;font-weight:500;line-height:.88;letter-spacing:-2px}.elegirnos-portada h2{font-size:clamp(4.8rem,10vw,9.5rem)}.elegirnos-texto h3,.elegirnos-dificil h3,.elegirnos-centro h3,.elegirnos-pasitas h3{font-size:clamp(3.8rem,7vw,7rem)}.elegirnos-portada h2 em,.elegirnos-texto h3 em,.elegirnos-dificil h3 em,.elegirnos-centro h3 em,.elegirnos-pasitas h3 em{display:block;color:rgba(143,213,179,.92);font-weight:500}.elegirnos-portada-texto{max-width:760px;color:rgba(242,231,213,.67);font-family:"Cormorant Garamond",serif;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.55}.elegirnos-portada-texto p+p{margin-top:11px;color:var(--crema);font-style:italic}.elegirnos-bajar{position:absolute;bottom:38px;display:grid;justify-items:center;gap:9px;color:rgba(132,191,171,.42);font-size:.56rem;letter-spacing:2px;text-transform:uppercase}.elegirnos-bajar i{width:1px;height:40px;background:linear-gradient(to bottom,transparent,rgba(132,191,171,.72));animation:elegirnosIndicador 2s ease-in-out infinite}
.elegirnos-bloque{min-height:96vh;padding:125px 4% 100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.76fr);align-items:center;gap:clamp(55px,8vw,135px);border-top:1px solid rgba(132,191,171,.09)}.elegirnos-invertido{grid-template-columns:minmax(280px,.76fr) minmax(0,1fr)}.elegirnos-texto{max-width:700px}.elegirnos-parrafos{max-width:680px}.elegirnos-parrafos p{color:rgba(242,231,213,.67);font-family:"Cormorant Garamond",serif;font-size:clamp(1.05rem,1.7vw,1.34rem);line-height:1.62}.elegirnos-parrafos p+p{margin-top:17px}.elegirnos-parrafos-centro{margin:auto;text-align:center}.elegirnos-ilustracion{width:min(430px,100%);margin:auto;color:rgba(126,190,159,.78)}.elegirnos-ilustracion svg{display:block;width:100%;max-height:520px;overflow:visible}.elegirnos-trazo{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3200;stroke-dashoffset:3200}.elegirnos-visible .elegirnos-trazo{animation:elegirnosDibujar 2.5s cubic-bezier(.22,1,.36,1) .12s forwards}.elegirnos-caminos{width:min(410px,82%)}.elegirnos-manos{width:min(450px,88%)}
.elegirnos-dificil{min-height:100vh;padding:135px 8% 115px;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(132,191,171,.09)}.elegirnos-dificil-contenido{width:min(900px,100%)}.elegirnos-decision{margin-top:65px;color:rgba(242,231,213,.58);font-family:"Cormorant Garamond",serif;font-size:clamp(2.8rem,5.5vw,5.4rem);text-align:center}.elegirnos-decision strong{display:block;margin-top:5px;color:var(--crema);font-weight:500}.elegirnos-frase-grande{margin-top:42px;color:rgba(242,231,213,.6);font-family:"Cormorant Garamond",serif;font-size:clamp(1.9rem,3.6vw,3.5rem);line-height:1.05}.elegirnos-frase-grande strong{display:block;color:var(--crema);font-weight:500;font-style:italic}.elegirnos-centro{min-height:100vh;padding:135px 8% 115px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid rgba(132,191,171,.09);text-align:center}.elegirnos-palabras{margin:22px 0 36px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}.elegirnos-palabras span{color:rgba(143,213,179,.78);font-family:"Cormorant Garamond",serif;font-size:clamp(1.7rem,3vw,2.7rem);font-style:italic}.elegirnos-manifiesto{max-width:900px;margin-top:55px;color:rgba(242,231,213,.62);font-family:"Cormorant Garamond",serif;font-size:clamp(2.4rem,4.8vw,4.8rem);line-height:1}.elegirnos-manifiesto strong{display:block;margin-top:8px;color:var(--crema);font-weight:500}.elegirnos-secundario{max-width:680px;margin-top:30px;color:rgba(242,231,213,.5);font-family:"Cormorant Garamond",serif;font-size:1.2rem;line-height:1.5}.elegirnos-faro{width:min(300px,70%);margin:auto;display:flex;align-items:center;justify-content:center;gap:16px}.elegirnos-faro span{width:90px;height:1px;background:linear-gradient(to right,transparent,rgba(132,191,171,.6))}.elegirnos-faro span:last-child{background:linear-gradient(to left,transparent,rgba(132,191,171,.6))}.elegirnos-faro i{width:16px;height:16px;border:2px solid rgba(143,213,179,.78);border-radius:50%;box-shadow:0 0 25px rgba(143,213,179,.18)}
.elegirnos-pasitas{min-height:100vh;padding:135px 7% 115px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid rgba(132,191,171,.09);text-align:center}.elegirnos-pasitas-dibujo{width:min(520px,80%);margin-top:45px}.elegirnos-pasitas-texto{margin-top:25px;color:rgba(242,231,213,.58);font-family:"Cormorant Garamond",serif;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.35}.elegirnos-pasitas-texto span{display:block;color:var(--crema);font-style:italic}.elegirnos-cierre{min-height:100vh;padding:145px 9% 110px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid rgba(132,191,171,.09);text-align:center}.elegirnos-cierre-linea{color:rgba(242,231,213,.58);font-family:"Cormorant Garamond",serif;font-size:clamp(1.55rem,3vw,2.6rem);line-height:1.4}.elegirnos-cierre h3{max-width:900px;margin:55px auto 30px;color:var(--crema);font-family:"Cormorant Garamond",serif;font-size:clamp(2.8rem,5.8vw,5.8rem);font-weight:500;line-height:.98}.elegirnos-final{color:rgba(143,213,179,.68);font-family:"Cormorant Garamond",serif;font-size:clamp(2.3rem,4.7vw,4.7rem);font-style:italic;line-height:1}.elegirnos-final strong{display:block;margin-top:8px;color:var(--crema);font-weight:500}.elegirnos-transicion{width:1px;height:85px;margin:45px auto 32px;background:linear-gradient(to bottom,rgba(132,191,171,.5),transparent)}.elegirnos-antes-carta{max-width:700px;color:rgba(242,231,213,.55);font-family:"Cormorant Garamond",serif;font-size:1.35rem;line-height:1.5}.elegirnos-antes-carta strong{display:block;margin-top:6px;color:var(--crema);font-weight:500}.elegirnos-cierre-boton{min-width:140px;margin-top:40px}
.elegirnos-revelar{opacity:0;transform:translateY(42px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)}.elegirnos-revelar.elegirnos-visible{opacity:1;transform:none}.elegirnos-revelar .elegirnos-parrafos p{opacity:0;transform:translateY(18px)}.elegirnos-visible .elegirnos-parrafos p{animation:elegirnosSubir .75s ease forwards}.elegirnos-visible .elegirnos-parrafos p:nth-child(2){animation-delay:.18s}.elegirnos-visible .elegirnos-parrafos p:nth-child(3){animation-delay:.36s}.elegirnos-visible .elegirnos-parrafos p:nth-child(4){animation-delay:.54s}@keyframes elegirnosDibujar{to{stroke-dashoffset:0}}@keyframes elegirnosSubir{to{opacity:1;transform:none}}@keyframes elegirnosIndicador{0%,100%{opacity:.25;transform:scaleY(.72);transform-origin:top}50%{opacity:.9;transform:scaleY(1)}}
@media(max-width:930px){.elegirnos-bloque,.elegirnos-invertido{grid-template-columns:1fr;min-height:auto;padding:115px 5% 95px;gap:45px}.elegirnos-invertido .elegirnos-ilustracion{order:2}.elegirnos-invertido .elegirnos-texto{order:1}.elegirnos-texto{max-width:800px;margin:auto;text-align:center}.elegirnos-parrafos{margin:auto}.elegirnos-ilustracion{width:min(390px,66%)}}
@media(max-width:650px){.elegirnos-header{min-height:65px;padding:15px}.elegirnos-subtitulo{display:none}.elegirnos-header-controles button span:first-child{max-width:0;overflow:hidden}.elegirnos-portada,.elegirnos-bloque,.elegirnos-dificil,.elegirnos-centro,.elegirnos-pasitas,.elegirnos-cierre{width:calc(100% - 30px)}.elegirnos-portada{min-height:100svh;padding:110px 4px 75px}.elegirnos-portada h2{font-size:clamp(4rem,19vw,6rem);letter-spacing:-2px}.elegirnos-texto h3,.elegirnos-dificil h3,.elegirnos-centro h3,.elegirnos-pasitas h3{font-size:clamp(3.3rem,15vw,5rem);letter-spacing:-1px}.elegirnos-bloque,.elegirnos-invertido{padding:100px 4px 80px}.elegirnos-parrafos p{font-size:1.05rem}.elegirnos-ilustracion{width:min(290px,82%)}.elegirnos-dificil,.elegirnos-centro,.elegirnos-pasitas{padding:105px 8px 90px}.elegirnos-cierre{min-height:100svh;padding:110px 8px 90px}.elegirnos-palabras{gap:8px 18px}}

/* ========================================
   AJUSTES MANUALES CONSOLIDADOS
   Elegirnos + header responsive global
======================================== */

.elegirnos-linea-carretera {
    fill: none;
    stroke: rgba(242, 231, 213, 0.55);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 18 18;
    stroke-dashoffset: 1000;
}

.elegirnos-visible .elegirnos-linea-carretera {
    animation: elegirnosCarretera 2.3s ease 0.8s forwards;
}

.elegirnos-manos {
    width: min(560px, 100%) !important;
}

.elegirnos-manos .elegirnos-trazo {
    stroke-width: 4.5;
}

@keyframes elegirnosCarretera {
    to { stroke-dashoffset: 0; }
}

/* ========================================
   CARTA DIGITAL
======================================== */

.pantalla-carta {
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(126, 91, 72, .12), transparent 34%),
        radial-gradient(circle at 84% 76%, rgba(94, 143, 128, .08), transparent 36%),
        linear-gradient(145deg, #080c0d, #101615 52%, #090f10);
}

.carta-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 65%, rgba(255,255,255,.035) 0 1px, transparent 1.5px);
    background-size: 44px 44px, 57px 57px;
}

.carta-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 40;
    min-height: 78px;
    padding: 22px 4.5% 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(8,12,13,.97), rgba(8,12,13,.72), transparent);
    pointer-events: none;
}

.carta-header > * { pointer-events: auto; }

.carta-capitulo,
.carta-kicker {
    color: rgba(183, 150, 119, .82);
    font-size: .63rem;
    letter-spacing: 3.3px;
    text-transform: uppercase;
}

.carta-subtitulo {
    margin-top: 5px;
    color: rgba(242,231,213,.45);
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
}

.carta-header-controles {
    display: flex;
    gap: 9px;
}

.carta-boton {
    min-height: 40px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(183,150,119,.38);
    background: rgba(15,16,15,.88);
    color: var(--crema);
    font-size: .67rem;
    letter-spacing: 1px;
    backdrop-filter: blur(12px);
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.carta-boton:hover {
    border-color: rgba(222,190,155,.78);
    background: rgba(151,112,80,.14);
    transform: translateY(-2px);
}

.carta-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(183,150,119,.28) transparent;
}

.carta-apertura,
.carta-papel,
.carta-cierre {
    position: relative;
    width: min(1120px, 90%);
    margin: 0 auto;
    scroll-snap-align: start;
}

.carta-apertura {
    min-height: 100vh;
    padding: 145px 7% 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.carta-apertura h2 {
    margin: 16px 0 25px;
    color: var(--crema);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(4.7rem, 10vw, 9.3rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -3px;
}

.carta-apertura > p:last-of-type {
    max-width: 650px;
    color: rgba(242,231,213,.62);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    line-height: 1.55;
}

.carta-bajar {
    position: absolute;
    bottom: 38px;
    display: grid;
    justify-items: center;
    gap: 9px;
    color: rgba(183,150,119,.45);
    font-size: .56rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.carta-bajar i {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(183,150,119,.75));
    animation: cartaIndicador 2s ease-in-out infinite;
}

.carta-papel {
    min-height: 100vh;
    margin-top: 80px;
    margin-bottom: 100px;
    padding: clamp(70px, 8vw, 115px) clamp(55px, 9vw, 125px) 105px;
    border: 1px solid rgba(213,190,160,.17);
    border-radius: 2px;
    background:
        linear-gradient(rgba(225,210,184,.018) 1px, transparent 1px),
        rgba(232, 217, 188, .055);
    background-size: 100% 34px;
    box-shadow:
        0 28px 90px rgba(0,0,0,.28),
        inset 0 0 70px rgba(221,194,155,.018);
}

.carta-papel::before,
.carta-papel::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.carta-papel::before {
    inset: 18px;
    border: 1px solid rgba(213,190,160,.06);
}

.carta-papel::after {
    top: 0;
    bottom: 0;
    left: clamp(34px, 5vw, 70px);
    width: 1px;
    background: rgba(180,105,96,.10);
}

.carta-papel-cabecera {
    margin-bottom: 64px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgba(213,190,160,.48);
    font-size: .62rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.carta-papel-cabecera i {
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, rgba(213,190,160,.25), transparent);
}

.carta-contenido {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 0 auto;
}

.carta-contenido p {
    color: rgba(242,231,213,.76);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.12rem, 1.7vw, 1.38rem);
    line-height: 1.78;
}

.carta-contenido p + p {
    margin-top: 24px;
}

.carta-contenido strong {
    color: var(--crema);
    font-weight: 500;
}

.carta-saludo {
    margin-bottom: 38px;
    color: var(--crema) !important;
    font-size: clamp(2.7rem, 5vw, 4.8rem) !important;
    line-height: 1 !important;
    font-style: italic;
}

.carta-separador {
    margin: 55px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(183,150,119,.52);
}

.carta-separador span {
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(183,150,119,.38));
}

.carta-separador span:last-child {
    background: linear-gradient(to left, transparent, rgba(183,150,119,.38));
}

.carta-separador i {
    font-family: serif;
    font-style: normal;
}

.carta-momento {
    margin: 72px 0 64px;
    padding: 48px 0;
    border-top: 1px solid rgba(183,150,119,.14);
    border-bottom: 1px solid rgba(183,150,119,.14);
    text-align: center;
}

.carta-momento span {
    display: block;
    margin-bottom: 12px;
    color: rgba(242,231,213,.45);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-style: italic;
}

.carta-momento strong {
    display: block;
    color: var(--crema);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(4.4rem, 9vw, 8rem);
    font-weight: 500;
    line-height: .9;
}

.carta-aparte {
    color: rgba(183,150,119,.68) !important;
    font-style: italic;
    text-align: right;
}

.carta-frase,
.carta-infinito {
    margin: 62px auto !important;
    color: var(--crema) !important;
    font-size: clamp(2.4rem, 4.6vw, 4.4rem) !important;
    line-height: 1.02 !important;
    text-align: center;
}

.carta-infinito {
    color: rgba(222,190,155,.92) !important;
    font-style: italic;
}

.carta-hilo {
    width: 1px;
    height: 95px;
    margin: 10px auto 55px;
    background: linear-gradient(to bottom, rgba(183,150,119,.5), transparent);
}

.carta-despedida {
    margin-top: 45px !important;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
    line-height: 1.5 !important;
    text-align: center;
}

.carta-despedida strong {
    display: block;
    margin-top: 8px;
    color: rgba(222,190,155,.94);
    font-style: italic;
}

.carta-firma {
    margin-top: 75px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: rgba(242,231,213,.55);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-style: italic;
}

.carta-firma strong {
    margin-top: 4px;
    color: var(--crema);
    font-size: 2rem;
    font-weight: 500;
}

.carta-anotacion {
    position: absolute;
    z-index: 1;
    color: rgba(183,150,119,.26);
    font-family: "Cormorant Garamond", serif;
    font-size: .98rem;
    font-style: italic;
    letter-spacing: .4px;
    transform: rotate(-7deg);
    pointer-events: none;
}

.carta-anotacion-1 { top: 31%; left: 2.5%; }
.carta-anotacion-2 { top: 50%; right: 2.2%; transform: rotate(6deg); }
.carta-anotacion-3 { top: 74%; left: 2.7%; transform: rotate(-5deg); }

.carta-cierre {
    min-height: 100vh;
    padding: 145px 9% 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.carta-cierre > p {
    color: rgba(183,150,119,.65);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    font-style: italic;
}

.carta-cierre h3 {
    max-width: 920px;
    margin: 24px auto 28px;
    color: var(--crema);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 500;
    line-height: .98;
}

.carta-cierre-detalle {
    color: rgba(242,231,213,.42);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
}

.carta-cierre-boton {
    min-width: 185px;
    margin-top: 42px;
}

.carta-revelar,
.carta-linea {
    opacity: 0;
    transform: translateY(28px);
}

.carta-revelar.carta-visible {
    opacity: 1;
    transform: none;
    transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}

.carta-linea.carta-visible {
    animation: cartaSubir .78s ease forwards;
}

@keyframes cartaSubir {
    to { opacity: 1; transform: none; }
}

@keyframes cartaIndicador {
    0%,100% { opacity: .25; transform: scaleY(.72); transform-origin: top; }
    50% { opacity: .9; transform: scaleY(1); }
}

/* ========================================
   HEADER GLOBAL EN CELULAR — AJUSTE FINAL
======================================== */

@media (max-width: 650px) {

    .boton-menu {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        top: 13px !important;
        left: 13px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    .boton-menu span {
        position: static !important;
        width: 21px !important;
        height: 2px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .boton-audio {
        width: 44px !important;
        height: 44px !important;
        top: 15px !important;
        right: 14px !important;
        z-index: 100 !important;
    }

    .historia-header,
    .recuerdos-header,
    .amor-header,
    .construido-header,
    .elegirnos-header,
    .carta-header {
        min-height: 92px !important;
        padding: 14px 66px 10px 14px !important;
    }

    .historia-header > div:first-child,
    .recuerdos-header > div:first-child,
    .amor-header > div:first-child,
    .construido-header > div:first-child,
    .elegirnos-header > div:first-child,
    .carta-header > div:first-child {
        position: absolute !important;
        top: 58px !important;
        left: 18px !important;
        max-width: 170px !important;
    }

    .historia-etiqueta,
    .recuerdos-etiqueta,
    .amor-capitulo,
    .construido-capitulo,
    .elegirnos-capitulo,
    .carta-capitulo {
        font-size: .55rem !important;
        letter-spacing: 2px !important;
        line-height: 1.15 !important;
    }

    .historia-subtitulo,
    .recuerdos-subtitulo,
    .amor-subtitulo,
    .construido-subtitulo,
    .elegirnos-subtitulo,
    .carta-subtitulo {
        display: block !important;
        margin-top: 2px !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
    }

    .historia-navegacion-superior,
    .recuerdos-header-controles,
    .amor-header-controles,
    .construido-header-controles,
    .elegirnos-header-controles,
    .carta-header-controles {
        position: absolute !important;
        top: 14px !important;
        right: 66px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .historia-control-superior,
    .recuerdos-header-controles .recuerdos-boton,
    .amor-header-controles .amor-boton,
    .construido-header-controles .construido-boton,
    .elegirnos-header-controles .elegirnos-boton,
    .carta-header-controles .carta-boton {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }

    .historia-siguiente-superior #historiaTextoSiguiente,
    .recuerdos-header-controles .recuerdos-volver span:last-child,
    .recuerdos-header-controles .recuerdos-continuar span:first-child,
    .amor-header-controles button:first-child span:last-child,
    .amor-header-controles button:last-child span:first-child,
    .construido-header-controles button:first-child span:last-child,
    .construido-header-controles button:last-child span:first-child,
    .elegirnos-header-controles button:first-child span:last-child,
    .elegirnos-header-controles button:last-child span:first-child,
    .carta-header-controles button:first-child span:last-child,
    .carta-header-controles button:last-child span:first-child {
        display: none !important;
    }

    .recuerdos-header-controles .recuerdos-volver span:first-child,
    .recuerdos-header-controles .recuerdos-continuar span:last-child,
    .amor-header-controles button:first-child span:first-child,
    .amor-header-controles button:last-child span:last-child,
    .construido-header-controles button:first-child span:first-child,
    .construido-header-controles button:last-child span:last-child,
    .elegirnos-header-controles button:first-child span:first-child,
    .elegirnos-header-controles button:last-child span:last-child,
    .carta-header-controles button:first-child span:first-child,
    .carta-header-controles button:last-child span:last-child {
        display: inline !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .historia-anterior-superior {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--crema) !important;
        font-size: .9rem !important;
    }

    .historia-contador {
        margin: 0 3px !important;
        white-space: nowrap;
        font-size: .74rem !important;
    }

    .carta-apertura,
    .carta-papel,
    .carta-cierre {
        width: calc(100% - 30px);
    }

    .carta-apertura {
        min-height: 100svh;
        padding: 120px 4px 80px;
    }

    .carta-apertura h2 {
        font-size: clamp(4rem, 19vw, 6rem);
        letter-spacing: -2px;
    }

    .carta-papel {
        margin-top: 45px;
        margin-bottom: 60px;
        padding: 72px 25px 80px 36px;
        background-size: 100% 31px;
    }

    .carta-papel::before { inset: 10px; }
    .carta-papel::after { left: 22px; }

    .carta-papel-cabecera {
        margin-bottom: 48px;
        gap: 8px;
        font-size: .52rem;
        letter-spacing: 1.3px;
    }

    .carta-contenido p {
        font-size: 1.08rem;
        line-height: 1.72;
    }

    .carta-saludo {
        font-size: clamp(2.8rem, 14vw, 4rem) !important;
    }

    .carta-momento strong {
        font-size: clamp(4rem, 20vw, 6.1rem);
    }

    .carta-frase,
    .carta-infinito {
        font-size: clamp(2.5rem, 12vw, 3.8rem) !important;
    }

    .carta-anotacion {
        display: none;
    }

    .carta-cierre {
        min-height: 100svh;
        padding: 115px 8px 90px;
    }

    .carta-cierre h3 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }
}


/* ========================================
   NUESTRO FUTURO
======================================== */

.pantalla-futuro {
    padding: 0;
    overflow: hidden;

    background:
        radial-gradient(circle at 14% 22%, rgba(105, 165, 147, .12), transparent 34%),
        radial-gradient(circle at 83% 77%, rgba(164, 131, 103, .09), transparent 35%),
        linear-gradient(145deg, #061012, #0a1d20 51%, #071416);
}

.futuro-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: .12;

    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);

    background-size: 66px 66px;
}

.futuro-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 40;

    min-height: 78px;
    padding: 22px 4.5% 14px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    background:
        linear-gradient(
            to bottom,
            rgba(6,16,18,.97),
            rgba(6,16,18,.68),
            transparent
        );

    pointer-events: none;
}

.futuro-header > * {
    pointer-events: auto;
}

.futuro-capitulo,
.futuro-numero,
.futuro-kicker {
    color: rgba(139, 206, 174, .76);

    font-size: .63rem;
    letter-spacing: 3.3px;
    text-transform: uppercase;
}

.futuro-subtitulo {
    margin-top: 5px;

    color: rgba(242,231,213,.45);

    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
}

.futuro-header-controles {
    display: flex;
    gap: 9px;
}

.futuro-boton {
    min-height: 40px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid rgba(139,206,174,.4);

    background: rgba(5,19,18,.88);
    color: var(--crema);

    font-size: .67rem;
    letter-spacing: 1px;

    backdrop-filter: blur(12px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.futuro-boton:hover {
    border-color: rgba(151,226,190,.82);
    background: rgba(81,146,117,.18);
    transform: translateY(-2px);
}

.futuro-scroll {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: y proximity;

    scrollbar-width: thin;
    scrollbar-color: rgba(139,206,174,.3) transparent;
}

.futuro-apertura,
.futuro-bloque,
.futuro-sur,
.futuro-real,
.futuro-cerca,
.futuro-pasitas,
.futuro-cierre {
    position: relative;

    width: min(1240px, 91%);
    margin: 0 auto;

    scroll-snap-align: start;
}

.futuro-apertura {
    min-height: 100vh;
    padding: 145px 6% 95px;

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

    text-align: center;
}

.futuro-apertura h2,
.futuro-texto h3,
.futuro-sur h3,
.futuro-real h3,
.futuro-cerca h3,
.futuro-pasitas h3,
.futuro-cierre h3 {
    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    letter-spacing: -2px;
}

.futuro-apertura h2 {
    margin: 15px 0 28px;

    font-size: clamp(4.8rem, 10vw, 9.5rem);
    line-height: .88;
}

.futuro-apertura h2 em,
.futuro-texto h3 em,
.futuro-sur h3 em,
.futuro-cerca h3 em,
.futuro-pasitas h3 em,
.futuro-cierre h3 em {
    display: block;

    color: rgba(143,213,179,.92);
    font-weight: 500;
}

.futuro-apertura-pausa {
    margin-top: 8px;

    color: rgba(242,231,213,.54);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
}

.futuro-apertura-frase {
    margin: 18px 0 34px;

    color: rgba(242,231,213,.67);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.4rem, 5vw, 4.9rem);
    line-height: 1;
}

.futuro-apertura-frase strong {
    display: block;

    color: var(--crema);
    font-weight: 500;
    font-style: italic;
}

.futuro-apertura-texto {
    max-width: 720px;

    color: rgba(242,231,213,.61);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.08rem, 1.9vw, 1.42rem);
    line-height: 1.55;
}

.futuro-apertura-texto p + p {
    margin-top: 12px;
}

.futuro-bajar {
    position: absolute;
    bottom: 38px;

    display: grid;
    justify-items: center;
    gap: 9px;

    color: rgba(139,206,174,.42);

    font-size: .56rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.futuro-bajar i {
    width: 1px;
    height: 40px;

    background: linear-gradient(to bottom, transparent, rgba(139,206,174,.72));

    animation: futuroIndicador 2s ease-in-out infinite;
}

.futuro-bloque {
    min-height: 96vh;
    padding: 125px 4% 100px;

    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(280px,.75fr);
    align-items: center;

    gap: clamp(55px, 8vw, 130px);

    border-top: 1px solid rgba(139,206,174,.09);
}

.futuro-texto {
    max-width: 700px;
}

.futuro-texto h3,
.futuro-sur h3,
.futuro-real h3,
.futuro-cerca h3,
.futuro-pasitas h3 {
    margin: 14px 0 28px;

    font-size: clamp(3.8rem, 7vw, 7rem);
    line-height: .89;
}

.futuro-parrafos {
    max-width: 680px;
}

.futuro-parrafos p {
    color: rgba(242,231,213,.67);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.05rem, 1.7vw, 1.34rem);
    line-height: 1.62;
}

.futuro-parrafos p + p {
    margin-top: 17px;
}

.futuro-parrafos-centro {
    margin: auto;
    text-align: center;
}

.futuro-frase-grande {
    margin-top: 38px;

    color: rgba(242,231,213,.58);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 3.7vw, 3.6rem);
    line-height: 1.05;
}

.futuro-frase-grande strong {
    display: block;

    color: var(--crema);
    font-weight: 500;
    font-style: italic;
}

.futuro-ilustracion {
    width: min(430px, 100%);
    margin: auto;

    color: rgba(126,190,159,.78);
}

.futuro-ilustracion svg,
.futuro-paisaje svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.futuro-ilustracion > p {
    margin-top: 10px;

    color: rgba(143,213,179,.44);

    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

.futuro-trazo {
    fill: none;

    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 4800;
    stroke-dashoffset: 4800;
}

.futuro-visible .futuro-trazo {
    animation:
        futuroDibujar 2.55s cubic-bezier(.22,1,.36,1) .12s forwards;
}

.futuro-edificio {
    width: min(345px, 82%);
}

.futuro-ventana-luz {
    fill: rgba(232,200,86,.08);
    stroke: rgba(232,200,86,.45);
    stroke-width: 2;

    opacity: .18;
}

.futuro-familia-ventana {
    fill: none;

    stroke: rgba(25,49,44,.92);
    stroke-width: 2.5;
    stroke-linecap: round;

    opacity: 0;
}

.futuro-visible .futuro-ventana-luz {
    animation: futuroVentana 1.2s ease 1.6s forwards;
}

.futuro-visible .futuro-familia-ventana {
    animation: futuroAparecer .8s ease 2.15s forwards;
}

.futuro-sur {
    min-height: 105vh;
    padding: 125px 4% 105px;

    border-top: 1px solid rgba(139,206,174,.09);
}

.futuro-sur-cabecera {
    max-width: 880px;
    margin: 0 auto;

    text-align: center;
}

.futuro-paisaje {
    width: min(1050px, 98%);
    margin: 58px auto 0;

    color: rgba(126,190,159,.75);
}

.futuro-montanas {
    stroke-width: 3;
    opacity: .66;
}

.futuro-suelo {
    stroke-width: 2.2;
    opacity: .38;
}

.futuro-casa {
    stroke-width: 4.2;
}

.futuro-auto,
.futuro-personitas,
.futuro-animales {
    stroke-width: 3.3;
}

.futuro-familia-frase {
    margin-top: 35px;

    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-style: italic;
    text-align: center;
}

.futuro-familia-frase span {
    display: block;

    margin-top: 5px;

    color: rgba(143,213,179,.7);
}

.futuro-real {
    min-height: 105vh;
    padding: 140px 7% 120px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.futuro-real h3 {
    font-size: clamp(3.5rem, 7vw, 6.8rem);
    line-height: .93;
}

.futuro-real-lista {
    max-width: 780px;
    margin-top: 34px;
}

.futuro-real-lista p {
    color: rgba(242,231,213,.45);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.6;
}

.futuro-real-lista p + p {
    margin-top: 9px;
}

.futuro-real-centro {
    max-width: 900px;

    margin: 68px auto 40px;

    color: rgba(242,231,213,.62);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.6rem, 5vw, 5rem);
    line-height: .98;
}

.futuro-real-centro strong {
    display: block;

    margin-top: 8px;

    color: var(--crema);
    font-weight: 500;
}

.futuro-puede-cambiar {
    margin-top: 55px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 12px 26px;
}

.futuro-puede-cambiar span {
    color: rgba(143,213,179,.55);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-style: italic;
}

.futuro-permanecer {
    margin-top: 42px;

    color: rgba(242,231,213,.62);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 4vw, 3.8rem);
}

.futuro-permanecer strong {
    display: block;

    color: var(--crema);
    font-weight: 500;
    font-style: italic;
}

.futuro-cerca {
    min-height: 100vh;
    padding: 135px 7% 115px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.futuro-casa-final {
    margin-top: 60px;

    color: rgba(242,231,213,.57);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.3rem, 4.6vw, 4.6rem);
    line-height: 1;
}

.futuro-casa-final strong {
    display: block;

    margin-top: 7px;

    color: var(--crema);
    font-weight: 500;
}

.futuro-tiempo {
    margin-top: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;
}

.futuro-tiempo span {
    color: rgba(143,213,179,.7);

    font-size: .68rem;
    letter-spacing: 2px;
}

.futuro-tiempo i {
    width: clamp(25px, 7vw, 85px);
    height: 1px;

    background: rgba(139,206,174,.24);
}

.futuro-pasitas {
    min-height: 105vh;
    padding: 135px 6% 115px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.futuro-pasitas-pre {
    margin-bottom: 40px;

    color: rgba(242,231,213,.5);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.4rem;
    font-style: italic;
}

.futuro-pasitas-dibujo {
    width: min(620px, 80%);
}

.futuro-pasitas h3 {
    margin-top: 35px;
}

.futuro-pasitas-texto {
    max-width: 760px;

    color: rgba(242,231,213,.58);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    line-height: 1.45;
}

.futuro-pasitas-texto strong {
    display: block;

    margin-top: 7px;

    color: var(--crema);
    font-weight: 500;
}

.futuro-cierre {
    min-height: 100vh;
    padding: 145px 9% 110px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.futuro-cierre-pequeno {
    color: rgba(143,213,179,.57);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    font-style: italic;
}

.futuro-cierre h3 {
    max-width: 950px;

    margin: 28px auto;

    font-size: clamp(3.2rem, 6.6vw, 6.5rem);
    line-height: .94;
}

.futuro-cierre-texto {
    color: rgba(242,231,213,.58);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.45rem, 2.8vw, 2.2rem);
    line-height: 1.5;
}

.futuro-linea-final {
    width: 1px;
    height: 90px;

    margin: 45px auto 25px;

    position: relative;

    background: linear-gradient(to bottom, rgba(139,206,174,.55), transparent);
}

.futuro-linea-final i {
    position: absolute;
    bottom: 0;
    left: -4px;

    width: 9px;
    height: 9px;

    border-right: 1px solid rgba(139,206,174,.7);
    border-bottom: 1px solid rgba(139,206,174,.7);

    transform: rotate(45deg);
}

.futuro-cierre-boton {
    min-width: 145px;
    margin-top: 12px;
}

/* reveals */

.futuro-revelar {
    opacity: 0;
    transform: translateY(42px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}

.futuro-revelar.futuro-visible {
    opacity: 1;
    transform: none;
}

.futuro-revelar .futuro-parrafos p,
.futuro-revelar .futuro-real-lista p,
.futuro-revelar .futuro-puede-cambiar span {
    opacity: 0;
    transform: translateY(16px);
}

.futuro-visible .futuro-parrafos p,
.futuro-visible .futuro-real-lista p,
.futuro-visible .futuro-puede-cambiar span {
    animation: futuroSubir .72s ease forwards;
}

.futuro-visible .futuro-parrafos p:nth-child(2),
.futuro-visible .futuro-real-lista p:nth-child(2),
.futuro-visible .futuro-puede-cambiar span:nth-child(2) {
    animation-delay: .18s;
}

.futuro-visible .futuro-parrafos p:nth-child(3),
.futuro-visible .futuro-real-lista p:nth-child(3),
.futuro-visible .futuro-puede-cambiar span:nth-child(3) {
    animation-delay: .36s;
}

@keyframes futuroDibujar {
    to { stroke-dashoffset: 0; }
}

@keyframes futuroAparecer {
    to { opacity: 1; }
}

@keyframes futuroSubir {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes futuroVentana {
    from {
        opacity: .18;
        fill: rgba(232,200,86,.08);
        filter: drop-shadow(0 0 0 rgba(232,200,86,0));
    }

    to {
        opacity: 1;
        fill: rgba(244,210,87,.76);
        stroke: rgba(252,227,128,.96);
        filter: drop-shadow(0 0 15px rgba(232,200,86,.42));
    }
}

@keyframes futuroIndicador {
    0%,100% {
        opacity: .25;
        transform: scaleY(.72);
        transform-origin: top;
    }

    50% {
        opacity: .9;
        transform: scaleY(1);
    }
}

@media (max-width: 930px) {

    .futuro-bloque {
        grid-template-columns: 1fr;
        min-height: auto;

        padding: 115px 5% 95px;

        gap: 45px;
    }

    .futuro-texto {
        max-width: 800px;
        margin: auto;

        text-align: center;
    }

    .futuro-parrafos {
        margin-left: auto;
        margin-right: auto;
    }

    .futuro-ilustracion {
        width: min(390px, 68%);
    }

    .futuro-paisaje {
        width: 100%;
    }

}

@media (max-width: 650px) {

    .futuro-header {
        min-height: 92px !important;
        padding: 14px 66px 10px 14px !important;
    }

    .futuro-header > div:first-child {
        position: absolute !important;
        top: 58px !important;
        left: 18px !important;
        max-width: 170px !important;
    }

    .futuro-capitulo {
        font-size: .55rem !important;
        letter-spacing: 2px !important;
        line-height: 1.15 !important;
    }

    .futuro-subtitulo {
        display: block !important;
        margin-top: 2px !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
    }

    .futuro-header-controles {
        position: absolute !important;
        top: 14px !important;
        right: 66px !important;

        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .futuro-header-controles .futuro-boton {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;

        padding: 0 !important;
    }

    .futuro-header-controles button:first-child span:last-child,
    .futuro-header-controles button:last-child span:first-child {
        display: none !important;
    }

    .futuro-header-controles button:first-child span:first-child,
    .futuro-header-controles button:last-child span:last-child {
        display: inline !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .futuro-apertura,
    .futuro-bloque,
    .futuro-sur,
    .futuro-real,
    .futuro-cerca,
    .futuro-pasitas,
    .futuro-cierre {
        width: calc(100% - 30px);
    }

    .futuro-apertura {
        min-height: 100svh;
        padding: 120px 4px 80px;
    }

    .futuro-apertura h2 {
        font-size: clamp(4rem, 19vw, 6rem);
        letter-spacing: -2px;
    }

    .futuro-texto h3,
    .futuro-sur h3,
    .futuro-real h3,
    .futuro-cerca h3,
    .futuro-pasitas h3 {
        font-size: clamp(3.2rem, 15vw, 5rem);
        letter-spacing: -1px;
    }

    .futuro-bloque {
        padding: 105px 4px 85px;
    }

    .futuro-parrafos p {
        font-size: 1.05rem;
    }

    .futuro-ilustracion {
        width: min(290px, 82%);
    }

    .futuro-edificio {
        width: min(245px, 72%);
    }

    .futuro-sur {
        min-height: auto;
        padding: 110px 4px 85px;
    }

    .futuro-paisaje {
        width: 110%;
        margin-left: -5%;
        margin-top: 35px;
    }

    .futuro-real,
    .futuro-cerca,
    .futuro-pasitas {
        min-height: 100svh;
        padding: 110px 7px 90px;
    }

    .futuro-puede-cambiar {
        flex-direction: column;
        gap: 8px;
    }

    .futuro-tiempo {
        gap: 8px;
    }

    .futuro-tiempo span {
        font-size: .57rem;
    }

    .futuro-pasitas-dibujo {
        width: min(330px, 92%);
    }

    .futuro-cierre {
        min-height: 100svh;
        padding: 115px 8px 90px;
    }

}


/* ========================================
   EPÍLOGO / FINAL
======================================== */

.pantalla-final {
    padding: 0;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 15%, rgba(116, 176, 151, .10), transparent 35%),
        radial-gradient(circle at 20% 78%, rgba(183, 143, 112, .07), transparent 30%),
        linear-gradient(155deg, #061012, #09191b 48%, #050d0f);
}

.final-fondo {
    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: .14;

    background-image:
        radial-gradient(circle, rgba(244,232,213,.22) 1px, transparent 1.2px);
    background-size: 36px 36px;

    mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent);
}

.final-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;

    min-height: 78px;
    padding: 22px 4.5% 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    background: linear-gradient(to bottom, rgba(5,13,15,.96), rgba(5,13,15,.62), transparent);

    pointer-events: none;
}

.final-header > * {
    pointer-events: auto;
}

.final-capitulo,
.final-kicker {
    color: rgba(143,213,179,.68);

    font-size: .63rem;
    letter-spacing: 3.2px;
    text-transform: uppercase;
}

.final-subtitulo {
    margin-top: 5px;

    color: rgba(242,231,213,.43);

    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-style: italic;
}

.final-header-controles {
    display: flex;
    gap: 9px;
}

.final-boton {
    min-height: 40px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid rgba(139,206,174,.4);

    background: rgba(5,19,18,.88);
    color: var(--crema);

    font-size: .67rem;
    letter-spacing: 1px;

    backdrop-filter: blur(12px);

    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.final-boton:hover {
    transform: translateY(-2px);
    border-color: rgba(151,226,190,.82);
    background: rgba(81,146,117,.18);
}

.final-scroll {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: y proximity;

    scrollbar-width: thin;
    scrollbar-color: rgba(139,206,174,.28) transparent;
}

.final-apertura,
.final-elliot,
.final-cierre {
    position: relative;

    width: min(1180px, 91%);
    margin: 0 auto;

    scroll-snap-align: start;
}

.final-apertura {
    min-height: 110vh;
    padding: 145px 6% 120px;

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

    text-align: center;
}

.final-apertura h2,
.final-elliot h3,
.final-declaracion h3 {
    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    letter-spacing: -2px;
}

.final-apertura h2 {
    max-width: 950px;
    margin: 15px auto 55px;

    font-size: clamp(4rem, 8vw, 8rem);
    line-height: .9;
}

.final-apertura h2 em,
.final-elliot h3 em,
.final-declaracion h3 em {
    display: block;

    color: rgba(143,213,179,.9);

    font-weight: 500;
}

.final-foto-marco {
    position: relative;

    padding: 12px 12px 42px;

    background: #e8dfcf;

    box-shadow:
        0 24px 70px rgba(0,0,0,.32),
        0 2px 0 rgba(255,255,255,.18) inset;

    transform: rotate(-1.4deg);
}

.final-foto-marco::before {
    content: "";

    position: absolute;
    top: -13px;
    left: 50%;

    width: 88px;
    height: 27px;

    background: rgba(219,203,169,.62);

    transform: translateX(-50%) rotate(1deg);

    box-shadow: 0 2px 7px rgba(0,0,0,.12);
}

.final-foto-marco img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #162326;
}

.final-foto-marco > p {
    position: absolute;
    right: 14px;
    bottom: 12px;
    left: 14px;

    color: rgba(38,42,39,.72);

    font-family: "Cormorant Garamond", serif;
    font-size: .95rem;
    font-style: italic;
    text-align: center;
}

.final-foto-placeholder {
    display: none;

    min-height: 100%;

    align-items: center;
    justify-content: center;

    padding: 25px;

    color: rgba(242,231,213,.55);
    background: #132326;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-style: italic;
}

.final-foto-marco.foto-faltante img {
    display: none;
}

.final-foto-marco.foto-faltante .final-foto-placeholder {
    display: flex;
}

.final-foto-principal {
    width: min(510px, 78%);
    aspect-ratio: 4 / 3;
}

.final-texto-principal {
    max-width: 770px;
    margin: 65px auto 0;
}

.final-texto-principal p,
.final-elliot-texto p {
    color: rgba(242,231,213,.64);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.08rem, 1.9vw, 1.4rem);
    line-height: 1.62;
}

.final-texto-principal p + p,
.final-elliot-texto p + p {
    margin-top: 18px;
}

.final-conclusion {
    margin-top: 45px;

    color: rgba(242,231,213,.55);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.3rem, 4.7vw, 4.5rem);
    line-height: 1;
}

.final-conclusion strong {
    display: block;

    color: var(--crema);

    font-weight: 500;
    font-style: italic;
}

.final-elliot {
    min-height: 110vh;
    padding: 135px 6% 120px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.final-elliot h3 {
    max-width: 920px;
    margin: 15px auto 60px;

    font-size: clamp(3.7rem, 7vw, 7rem);
    line-height: .9;
}

.final-elliot-crecer {
    width: min(950px, 100%);

    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px minmax(220px, 1fr);
    align-items: center;

    gap: 30px;
}

.final-elliot-foto {
    width: 100%;
    aspect-ratio: 4 / 5;
}

.final-elliot-foto:last-child {
    transform: rotate(1.5deg);
}

.final-crecer-linea {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;

    gap: 15px;
}

.final-crecer-linea span {
    width: 1px;
    height: 70px;

    background: linear-gradient(to bottom, transparent, rgba(143,213,179,.48), transparent);
}

.final-crecer-linea i {
    color: rgba(143,213,179,.48);

    font-family: "Cormorant Garamond", serif;
    font-size: .95rem;
    font-style: italic;
}

.final-elliot-texto {
    max-width: 760px;
    margin: 65px auto 0;
}

.final-familia {
    margin-top: 45px;

    color: rgba(242,231,213,.6);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1;
}

.final-familia strong {
    display: block;

    margin-top: 7px;

    color: var(--crema);
    font-weight: 500;
}

.final-cierre {
    min-height: 130vh;
    padding: 150px 7% 100px;

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

    border-top: 1px solid rgba(139,206,174,.09);

    text-align: center;
}

.final-frases {
    width: 100%;
    min-height: 65vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.final-frases > i {
    width: 1px;
    height: 55px;

    background: linear-gradient(to bottom, transparent, rgba(143,213,179,.45), transparent);
}

.final-frase {
    color: rgba(242,231,213,.52);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.3rem, 5vw, 4.7rem);
    line-height: 1;
}

.final-frase span {
    display: block;

    color: var(--crema);
    font-size: 1.18em;
    font-style: italic;
}

.final-declaracion {
    min-height: 75vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.final-declaracion > p:first-child {
    color: rgba(143,213,179,.52);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    font-style: italic;
}

.final-declaracion h3 {
    margin: 20px auto 30px;

    font-size: clamp(5rem, 11vw, 10rem);
    line-height: .82;
}

.final-pasitas {
    color: rgba(242,231,213,.64);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-style: italic;
}

.final-firma {
    margin-top: 25px;
}

.final-firma p {
    color: var(--crema);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-style: italic;
}

.final-firma p span {
    margin: 0 9px;

    color: rgba(143,213,179,.7);
}

.final-firma small {
    display: block;

    margin-top: 8px;

    color: rgba(143,213,179,.48);

    font-size: .65rem;
    letter-spacing: 2.4px;
}

.final-volver {
    margin-top: 75px;
    padding: 11px 17px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    border: 1px solid rgba(143,213,179,.28);

    background: transparent;
    color: rgba(242,231,213,.48);

    font-size: .65rem;
    letter-spacing: 1.2px;

    transition: color .3s ease, border-color .3s ease, transform .3s ease;
}

.final-volver:hover {
    color: var(--crema);
    border-color: rgba(143,213,179,.65);
    transform: translateY(-2px);
}

/* aparición */

.final-revelar {
    opacity: 0;
    transform: translateY(42px);

    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(.22,1,.36,1);
}

.final-revelar.final-visible {
    opacity: 1;
    transform: none;
}

.final-revelar .final-foto-marco {
    opacity: 0;
    transform: translateY(25px) rotate(-1.4deg) scale(.97);
}

.final-revelar.final-visible .final-foto-marco {
    animation: finalFoto .95s cubic-bezier(.22,1,.36,1) .25s forwards;
}

.final-revelar.final-visible .final-elliot-foto:last-child {
    animation-delay: .65s;
}

.final-frase {
    opacity: 0;
    transform: translateY(20px);
}

.final-visible .final-frase {
    animation: finalSubir .8s ease forwards;
}

.final-visible .final-frase-2 {
    animation-delay: .25s;
}

.final-visible .final-frase-3 {
    animation-delay: .5s;
}

@keyframes finalFoto {
    to {
        opacity: 1;
        transform: rotate(-1.4deg) scale(1);
    }
}

@keyframes finalSubir {
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 780px) {

    .final-elliot-crecer {
        grid-template-columns: minmax(180px,1fr) 65px minmax(180px,1fr);
        gap: 15px;
    }

    .final-crecer-linea i {
        font-size: .78rem;
    }

}

@media (max-width: 650px) {

    .final-header {
        min-height: 92px !important;
        padding: 14px 66px 10px 14px !important;
    }

    .final-header > div:first-child {
        position: absolute !important;
        top: 58px !important;
        left: 18px !important;
        max-width: 170px !important;
    }

    .final-capitulo {
        font-size: .55rem !important;
        letter-spacing: 2px !important;
        line-height: 1.15 !important;
    }

    .final-subtitulo {
        margin-top: 2px !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
    }

    .final-header-controles {
        position: absolute !important;
        top: 14px !important;
        right: 66px !important;
    }

    .final-header-controles .final-boton {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }

    .final-header-controles .final-boton span:last-child {
        display: none !important;
    }

    .final-header-controles .final-boton span:first-child {
        display: inline !important;
    }

    .final-apertura,
    .final-elliot,
    .final-cierre {
        width: calc(100% - 30px);
    }

    .final-apertura {
        min-height: auto;
        padding: 125px 4px 95px;
    }

    .final-apertura h2 {
        margin-bottom: 42px;

        font-size: clamp(3.6rem, 17vw, 5.4rem);
        letter-spacing: -1.5px;
    }

    .final-foto-principal {
        width: min(330px, 92%);
    }

    .final-texto-principal {
        margin-top: 50px;
    }

    .final-conclusion {
        margin-top: 35px;
    }

    .final-elliot {
        min-height: auto;
        padding: 115px 4px 95px;
    }

    .final-elliot h3 {
        margin-bottom: 45px;

        font-size: clamp(3.3rem, 15vw, 5rem);
        letter-spacing: -1px;
    }

    .final-elliot-crecer {
        width: min(330px, 92%);

        grid-template-columns: 1fr;
        gap: 26px;
    }

    .final-crecer-linea {
        grid-template-columns: 55px auto 55px;
        align-items: center;
        gap: 10px;
    }

    .final-crecer-linea span {
        width: 55px;
        height: 1px;

        background: linear-gradient(to right, transparent, rgba(143,213,179,.48), transparent);
    }

    .final-elliot-foto {
        aspect-ratio: 4 / 5;
    }

    .final-elliot-texto {
        margin-top: 50px;
    }

    .final-cierre {
        min-height: auto;
        padding: 120px 5px 85px;
    }

    .final-frases {
        min-height: 80svh;
    }

    .final-declaracion {
        min-height: 85svh;
    }

    .final-declaracion h3 {
        font-size: clamp(4.6rem, 21vw, 7rem);
        letter-spacing: -2px;
    }

    .final-volver {
        margin-top: 65px;
    }

}