/* =========================================
   NEUROEXPERIENCE
   Sistema visual base
   ========================================= */

:root {

    --color-bg: #05070A;
    --color-surface: #0D1218;

    --color-text: #F4F5F3;
    --color-text-soft: #DDE1E0;
    --color-text-secondary: #A9B1BA;

    --color-blue-deep: #063B69;
    --color-blue: #078CB0;
    --color-turquoise: #32D3BC;

    --page-padding: clamp(24px, 6vw, 96px);
}


/* =========================================
   BASE
   ========================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background: var(--color-bg);

    color: var(--color-text);

    font-family: "Inter", sans-serif;

    -webkit-font-smoothing: antialiased;

}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


/* =========================================
   NAVEGACIÓN
   ========================================= */

.site-header {

    position: absolute;

    top: 0;
    left: 0;

    z-index: 100;

    width: 100%;

    min-height: 84px;

    display: grid;

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

    align-items: center;

    padding: 0 var(--page-padding);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}


.brand {

    justify-self: start;

    font-family: "Manrope", sans-serif;

    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: -0.02em;

}


.brand-placeholder {
    opacity: 0.95;
}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: clamp(22px, 2.5vw, 38px);

}


.desktop-nav a {

    color: rgba(244, 245, 243, 0.65);

    font-size: 0.75rem;

    transition: color 250ms ease;

}


.desktop-nav a:hover {
    color: var(--color-text);
}


.experience-link {

    justify-self: end;

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 18px;

    border: 1px solid rgba(244, 245, 243, 0.25);

    border-radius: 999px;

    font-size: 0.65rem;

    font-weight: 500;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transition:
        border-color 250ms ease,
        background-color 250ms ease;

}


.experience-link:hover {

    border-color: rgba(50, 211, 188, 0.6);

    background: rgba(50, 211, 188, 0.04);

}


.menu-button {
    display: none;
}


/* =========================================
   HERO
   ========================================= */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        130px
        var(--page-padding)
        110px;

}


.hero-content {

    position: relative;

    z-index: 2;

    width: min(100%, 950px);

}


.hero-label {

    margin-bottom: 24px;

    color: rgba(244, 245, 243, 0.55);

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.24em;

    text-transform: uppercase;

}


.hero-title {

    max-width: 900px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.4rem, 6.2vw, 6.6rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.055em;

}


.hero-title span {
    display: block;
}


.hero-title-secondary {

    color: var(--color-text-soft);

}


.hero-description {

    max-width: 610px;

    margin-top: 34px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.7;

}


.hero-cta {

    width: fit-content;

    min-height: 50px;

    margin-top: 40px;

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding: 0 22px;

    border: 1px solid rgba(244, 245, 243, 0.28);

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 500;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition:
        border-color 250ms ease,
        background-color 250ms ease;

}


.hero-cta:hover {

    border-color: rgba(50, 211, 188, 0.6);

    background: rgba(50, 211, 188, 0.04);

}


.hero-cta-arrow {

    color: var(--color-turquoise);

    font-size: 1.1rem;

}


.hero-continue {

    position: absolute;

    left: var(--page-padding);

    bottom: 34px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #A9B1BA;

    font-size: 0.55rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;

}


.hero-continue-line {

    width: 38px;

    height: 1px;

    background: linear-gradient(
        90deg,
        var(--color-blue),
        var(--color-turquoise)
    );

}


/* =========================================
   SIGUIENTE SECCIÓN
   Temporalmente vacía
   ========================================= */

.section-placeholder {
    min-height: 20vh;
}


/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 820px) {

    :root {
        --page-padding: 22px;
    }


    .site-header {

        min-height: 72px;

        grid-template-columns: 1fr auto;

    }


    .desktop-nav,
    .experience-link {
        display: none;
    }


    .menu-button {

        justify-self: end;

        width: 44px;
        height: 44px;

        display: flex;

        flex-direction: column;

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

        gap: 7px;

        border: 1px solid rgba(244, 245, 243, 0.14);

        border-radius: 50%;

        background: transparent;

        cursor: pointer;

    }


    .menu-button span {

        width: 17px;
        height: 1px;

        display: block;

        background: var(--color-text);

    }


    .hero {

        min-height: 100svh;

        padding-top: 120px;

        padding-bottom: 105px;

    }


    .hero-label {
        margin-bottom: 20px;
    }


    .hero-title {

        max-width: 650px;

        font-size: clamp(2.7rem, 12vw, 4.2rem);

        line-height: 1.01;

    }


    .hero-description {

        max-width: 470px;

        margin-top: 28px;

        font-size: 0.95rem;

        line-height: 1.65;

    }


    .hero-cta {

        min-height: 52px;

        margin-top: 34px;

        padding: 0 20px;

    }


    .hero-continue {
        bottom: 27px;
    }

}

/* =========================================
   AJUSTES HERO V1
   ========================================= */


/* Escritorio */

@media (min-width: 821px) {

    .hero-content {
        width: min(100%, 1100px);
    }

    .hero-title {
        max-width: 1100px;
        font-size: clamp(3.4rem, 5.5vw, 5.8rem);
    }

    .hero-title > span {
        white-space: nowrap;
    }

}


/* Móvil */

@media (max-width: 820px) {

    .hero {
        padding-top: 105px;
    }

    .hero-title-secondary {
        color: #E4E6E5;
    }

}

/* =========================================
   HERO
   Fragmento gráfico NeuroExperience
   ========================================= */

.hero-fragment {

    position: absolute;

    z-index: 1;

    width: min(75vw, 900px);

    aspect-ratio: 1;

    top: 50%;

    right: -18%;

    transform: translateY(-50%);

    opacity: 0.18;

    pointer-events: none;

}


.hero-fragment svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}


.hero-fragment path {

    fill: none;

    stroke: url(#fragment-gradient);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.fragment-secondary {
    opacity: 0.55;
}


.fragment-tertiary {
    opacity: 0.3;
}


/* =========================================
   Fragmento en móvil
   ========================================= */

@media (max-width: 820px) {

    .hero-fragment {

        width: 650px;

        top: 43%;

        right: -470px;

        opacity: 0.13;

    }

}

/* =========================================
   REFINAMIENTO DEL FRAGMENTO
   ========================================= */

.hero-fragment {

    opacity: 0.12;

    filter: blur(0.15px);

}


/* Algunas rutas se esconden más que otras */

.fragment-secondary {
    opacity: 0.38;
}

.fragment-tertiary {
    opacity: 0.18;
}


/* Móvil */

@media (max-width: 820px) {

    .hero-fragment {

        opacity: 0.09;

        right: -500px;

    }

}

/* =========================================
   HERO
   Luz de revelación
   ========================================= */

.hero-reveal-light {

    position: absolute;

    z-index: 0;

    width: min(52vw, 720px);

    aspect-ratio: 1;

    top: 46%;

    right: -5%;

    transform: translateY(-50%);

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(50, 211, 188, 0.075) 0%,
        rgba(7, 140, 176, 0.045) 28%,
        rgba(6, 59, 105, 0.025) 48%,
        rgba(5, 7, 10, 0) 72%
    );

    filter: blur(18px);

    pointer-events: none;

}


/* Luz en móvil */

@media (max-width: 820px) {

    .hero-reveal-light {

        width: 420px;

        top: 44%;

        right: -260px;

        opacity: 0.8;

        filter: blur(22px);

    }

}

/* =========================================
   HERO
   Movimiento de revelación
   ========================================= */

.hero-reveal-light {

    animation: reveal-breathe 12s ease-in-out infinite;

}


@keyframes reveal-breathe {

    0%,
    100% {

        transform:
            translateY(-50%)
            translateX(0);

        opacity: 0.72;

    }


    50% {

        transform:
            translateY(-47%)
            translateX(-32px);

        opacity: 1;

    }

}


/* Accesibilidad:
   si una persona prefiere menos movimiento,
   detenemos la animación
*/

@media (prefers-reduced-motion: reduce) {

    .hero-reveal-light {
        animation: none;
    }

}

/* =========================================
   HERO
   Revelación inicial del contenido
   ========================================= */

.hero-label,
.hero-title,
.hero-description,
.hero-cta,
.hero-continue {

    opacity: 0;

    transform: translateY(12px);

    animation: hero-content-reveal 700ms ease forwards;

}


/* Secuencia */

.hero-label {
    animation-delay: 100ms;
}


.hero-title {
    animation-delay: 220ms;
}


.hero-description {
    animation-delay: 420ms;
}


.hero-cta {
    animation-delay: 580ms;
}


.hero-continue {
    animation-delay: 760ms;
}


/* Movimiento */

@keyframes hero-content-reveal {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

    .hero-label,
    .hero-title,
    .hero-description,
    .hero-cta,
    .hero-continue {

        opacity: 1;

        transform: none;

        animation: none;

    }

}

/* =========================================
   SECCIÓN 2
   OCIO COGNITIVO · MANIFIESTO
   ========================================= */

.manifesto {

    position: relative;

    overflow: hidden;

    padding:
        clamp(120px, 14vw, 190px)
        var(--page-padding)
        clamp(130px, 15vw, 210px);

    background:
        linear-gradient(
            180deg,
            var(--color-bg) 0%,
            #070B0F 48%,
            #090E12 100%
        );

}


.manifesto-container {

    width: min(100%, 1200px);

    margin: 0 auto;

}


/* ---------- ENCABEZADO ---------- */

.manifesto-header {

    max-width: 900px;

}


.manifesto-label {

    margin: 0 0 28px;

    color: rgba(244, 245, 243, 0.46);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.24em;

    text-transform: uppercase;

}


.manifesto-title {

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.6rem, 7vw, 6.8rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.055em;

}


.manifesto-title span {
    display: block;
}


.manifesto-title-accent {
    color: var(--color-turquoise);
}


/* ---------- CUERPO DEL MANIFIESTO ---------- */

.manifesto-content {

    width: min(100%, 760px);

    margin-top: clamp(80px, 10vw, 140px);

    margin-left: auto;

}


.manifesto-content > p {

    margin-bottom: 56px;

    color: #C3C8CA;

    font-size: clamp(1.1rem, 1.8vw, 1.45rem);

    line-height: 1.7;

}


.manifesto-content strong {

    color: var(--color-text);

    font-weight: 500;

}


/* ---------- FRASE CENTRAL ---------- */

.manifesto-content .manifesto-thought {

    margin:
        clamp(90px, 11vw, 145px)
        0;

    color: var(--color-text);

    font-family: "Manrope", sans-serif;

    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 500;

    line-height: 1.18;

    letter-spacing: -0.035em;

}


/* ---------- JUGAR · DESAFIAR · SORPRENDER ---------- */

.manifesto-verbs {

    margin:
        clamp(100px, 13vw, 170px)
        0;

}


.manifesto-verbs > p {

    margin-bottom: 28px;

    color: rgba(244, 245, 243, 0.42);

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.2em;

    text-transform: uppercase;

}


.manifesto-verb {

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.3rem, 7vw, 6.6rem);

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.055em;

    color: rgba(244, 245, 243, 0.32);

}


.manifesto-verb:nth-of-type(2) {
    color: rgba(244, 245, 243, 0.62);
}


.manifesto-verb-accent {
    color: var(--color-text);
}


.manifesto-verb-accent::first-letter {
    color: var(--color-turquoise);
}


/* ---------- DEFINICIÓN ---------- */

.manifesto-definition {

    padding-top: 56px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}


.manifesto-definition > p:first-child {

    margin-bottom: 14px;

    color: #DDE1E0;

    font-size: clamp(1.3rem, 2vw, 1.8rem);

}


.manifesto-brand {

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.6rem, 7vw, 6.8rem);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.055em;

}


/* ---------- TRANSICIÓN HACIA EXPERIENCIAS ---------- */

.manifesto-transition {

    margin-top: clamp(140px, 17vw, 220px);

    padding-top: 58px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

}


.manifesto-places {

    display: flex;

    flex-wrap: wrap;

    column-gap: 22px;

    row-gap: 8px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(1.8rem, 3.7vw, 3.2rem);

    font-weight: 500;

    line-height: 1.25;

    letter-spacing: -0.035em;

    color: #D5D9DA;

}


.manifesto-promise {

    max-width: 620px;

    margin-top: 30px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 1.5vw, 1.2rem);

    line-height: 1.65;

}


/* =========================================
   MANIFIESTO · MÓVIL
   ========================================= */

@media (max-width: 820px) {

    .manifesto {

        padding-top: 110px;

        padding-bottom: 125px;

    }


    .manifesto-title {

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

        line-height: 1;

    }


    .manifesto-content {

        margin-top: 80px;

        margin-left: 0;

    }


    .manifesto-content > p {

        margin-bottom: 46px;

        font-size: 1.05rem;

        line-height: 1.7;

    }


    .manifesto-content .manifesto-thought {

        margin: 90px 0;

        font-size: clamp(2rem, 8.5vw, 2.7rem);

    }


    .manifesto-verbs {

        margin: 100px 0;

    }


    .manifesto-verb {

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

    }


    .manifesto-definition {
        padding-top: 44px;
    }


    .manifesto-brand {

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

    }


    .manifesto-transition {

        margin-top: 120px;

        padding-top: 46px;

    }


    .manifesto-places {

        display: block;

        font-size: clamp(2rem, 8.5vw, 2.6rem);

    }


    .manifesto-places span {

        display: block;

        margin-bottom: 8px;

    }


    .manifesto-promise {

        margin-top: 30px;

        font-size: 1rem;

    }

}

/* =========================================
   MANIFIESTO
   Refinamiento de ritmo V1
   ========================================= */


/* Menos vacío al entrar a la sección */

.manifesto {

    padding-top: clamp(85px, 9vw, 125px);

}


/* El título y el manifiesto se relacionan más */

.manifesto-content {

    margin-top: clamp(60px, 7vw, 90px);

}


/* Los primeros párrafos forman un mismo bloque */

.manifesto-content > p {

    margin-bottom: 34px;

}


/* La reflexión y los verbos forman una sola idea */

.manifesto-content .manifesto-thought {

    margin:
        clamp(75px, 8vw, 105px)
        0
        clamp(50px, 6vw, 75px);

}


.manifesto-verbs {

    margin:
        0
        0
        clamp(90px, 10vw, 125px);

}


/* Eliminamos la línea de "Eso es NeuroExperience" */

.manifesto-definition {

    padding-top: 0;

    border-top: none;

}


/* Acercamos la transición final */

.manifesto-transition {

    margin-top: clamp(95px, 11vw, 145px);

}


/* =========================================
   MANIFIESTO
   Refinamiento específico móvil
   ========================================= */

@media (max-width: 820px) {

    .manifesto {

        padding-top: 75px;

        padding-bottom: 105px;

    }


    .manifesto-content {

        margin-top: 60px;

    }


    .manifesto-content > p {

        margin-bottom: 30px;

    }


    .manifesto-content .manifesto-thought {

        margin:
            70px
            0
            42px;

    }


    .manifesto-verbs {

        margin:
            0
            0
            85px;

    }


    .manifesto-verbs > p {

        margin-bottom: 24px;

    }


    .manifesto-definition {

        padding-top: 0;

    }


    .manifesto-transition {

        margin-top: 90px;

        padding-top: 0;

        border-top: none;

    }


    /*
       Ya no queremos que los lugares
       parezcan una lista vertical
    */

    .manifesto-places {

        display: flex;

        flex-wrap: wrap;

        column-gap: 10px;

        row-gap: 4px;

        font-size: clamp(1.9rem, 8vw, 2.45rem);

        line-height: 1.2;

    }


    .manifesto-places span {

        display: inline;

        margin-bottom: 0;

    }


    .manifesto-promise {

        margin-top: 26px;

    }

}

/* =========================================
   MENÚ MÓVIL
   ========================================= */

.mobile-menu {
    display: none;
}


@media (max-width: 820px) {

    .site-header {
        z-index: 1000;
    }


    .brand,
    .menu-button {
        position: relative;
        z-index: 1002;
    }


    .mobile-menu {

        position: fixed;

        z-index: 1001;

        inset: 0;

        display: flex;

        align-items: center;

        padding:
            110px
            var(--page-padding)
            55px;

        background:
            rgba(5, 7, 10, 0.97);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 300ms ease,
            visibility 300ms ease;

    }


    .mobile-nav {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

    }


    .mobile-nav > a:not(.mobile-experience-link) {

        padding: 10px 0;

        font-family: "Manrope", sans-serif;

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

        font-weight: 500;

        line-height: 1.15;

        letter-spacing: -0.04em;

        color: rgba(244, 245, 243, 0.72);

    }


    .mobile-menu-divider {

        width: 100%;

        height: 1px;

        margin: 34px 0;

        background:
            rgba(255, 255, 255, 0.08);

    }


    .mobile-experience-link {

        width: 100%;

        min-height: 58px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0 20px;

        border:
            1px solid
            rgba(244, 245, 243, 0.25);

        border-radius: 999px;

        font-size: 0.72rem;

        font-weight: 600;

        letter-spacing: 0.12em;

        text-transform: uppercase;

    }


    .mobile-experience-link span {

        color: var(--color-turquoise);

        font-size: 1.4rem;

    }


    /* Menú abierto */

    body.menu-open {
        overflow: hidden;
    }


    body.menu-open .mobile-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    /* Hamburguesa → X */

    .menu-button span {

        transition:
            transform 250ms ease,
            opacity 250ms ease;

    }


    body.menu-open .menu-button span:first-child {

        transform:
            translateY(4px)
            rotate(45deg);

    }


    body.menu-open .menu-button span:last-child {

        transform:
            translateY(-4px)
            rotate(-45deg);

    }

}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

    .mobile-menu,
    .menu-button span {
        transition: none;
    }

}

/* =========================================
   SECCIÓN 3 · EXPERIENCIAS
========================================= */

.experiences {
    position: relative;
    overflow: hidden;
    background: #05070A;
}


/* INTRODUCCIÓN
----------------------------------------- */

.experiences-intro {
    width: min(100% - (var(--page-padding) * 2), 1180px);
    margin: 0 auto;
    padding: 105px 0 75px;
}

.experiences-label {
    margin: 0 0 24px;
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #32D3BC;
}

.experiences-heading {
    max-width: 900px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(2.3rem, 4.3vw, 4.7rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.045em;
    color: #F4F5F3;
}

.experiences-heading span {
    display: block;
}

.experiences-heading span:last-child {
    color: rgba(244, 245, 243, 0.48);
}


/* EXPERIENCIA DESTACADA
----------------------------------------- */

.experience-featured {
    position: relative;
}


/* IMAGEN PRINCIPAL */

.experience-visual {
    position: relative;
    width: 100%;
    height: clamp(620px, 78vh, 850px);
    overflow: hidden;
    background: #05070A;
}

.experience-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}


/*
   La fotografía entra desde el universo oscuro
   de NeuroExperience sin perder sus colores reales.
*/

.experience-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            #05070A 0%,
            rgba(5, 7, 10, 0.72) 9%,
            rgba(5, 7, 10, 0.18) 25%,
            rgba(5, 7, 10, 0.04) 50%,
            rgba(5, 7, 10, 0.28) 72%,
            rgba(5, 7, 10, 0.88) 100%
        );
}


/* IDENTIDAD DE ESCAPE PARK SOBRE LA FOTO */

.experience-identity {
    position: absolute;
    z-index: 2;
    left: max(var(--page-padding), calc((100vw - 1180px) / 2));
    right: var(--page-padding);
    bottom: clamp(65px, 9vh, 105px);
    max-width: 920px;
}

.experience-location {
    margin: 0 0 18px;
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(244, 245, 243, 0.72);
}

.experience-title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(3.4rem, 7vw, 7.3rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    color: #F4F5F3;
}

.experience-tagline {
    max-width: 650px;
    margin: 27px 0 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: rgba(244, 245, 243, 0.9);
}


/* INFORMACIÓN BAJO LA IMAGEN
----------------------------------------- */

.experience-info {
    width: min(100% - (var(--page-padding) * 2), 1180px);
    margin: 0 auto;
    padding: 90px 0 125px;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: clamp(60px, 9vw, 130px);
    align-items: start;
}

.experience-description p {
    max-width: 650px;
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;

    color: rgba(244, 245, 243, 0.82);
}


/* RECORRE · OBSERVA · DESCUBRE · RESUELVE */

.experience-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 17px;

    margin: 0 0 38px;

    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;

    color: #F4F5F3;
}

.experience-steps span:not(:last-child)::after {
    content: "·";
    margin-left: 17px;
    color: #32D3BC;
}


/* BOTÓN */

.experience-button {
    width: 100%;
    min-height: 62px;

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

    padding: 0 24px;

    border: 1px solid rgba(244, 245, 243, 0.24);
    border-radius: 999px;

    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #F4F5F3;
    text-decoration: none;

    transition:
        border-color 250ms ease,
        background-color 250ms ease,
        transform 250ms ease;
}

.experience-button:hover {
    border-color: rgba(50, 211, 188, 0.7);
    background: rgba(50, 211, 188, 0.06);
    transform: translateY(-2px);
}

.experience-button-arrow {
    flex: 0 0 auto;
    font-size: 1.45rem;
    font-weight: 400;
    color: #32D3BC;
}

.experience-note {
    margin: 20px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    line-height: 1.5;

    color: rgba(169, 177, 186, 0.62);
}


/* =========================================
   SECCIÓN 3 · MOBILE
========================================= */

@media (max-width: 820px) {

    .experiences-intro {
        width: auto;
        margin: 0 var(--page-padding);
        padding: 75px 0 55px;
    }

    .experiences-label {
        margin-bottom: 19px;
        font-size: 0.67rem;
    }

    .experiences-heading {
        max-width: 100%;
        font-size: clamp(2rem, 10vw, 3.15rem);
        line-height: 1.08;
    }

    .experiences-heading span:last-child {
        margin-top: 8px;
    }


    /* FOTO */

    .experience-visual {
        height: min(78vh, 690px);
        min-height: 570px;
    }

    .experience-image {
        /*
           En móvil damos protagonismo a la zona
           central de la fotografía.
        */
        object-position: 50% center;
    }

    .experience-image-overlay {
        background:
            linear-gradient(
                to bottom,
                #05070A 0%,
                rgba(5, 7, 10, 0.58) 10%,
                rgba(5, 7, 10, 0.06) 30%,
                rgba(5, 7, 10, 0.08) 52%,
                rgba(5, 7, 10, 0.42) 72%,
                rgba(5, 7, 10, 0.94) 100%
            );
    }


    /* TEXTO SOBRE FOTO */

    .experience-identity {
        left: var(--page-padding);
        right: var(--page-padding);
        bottom: 52px;
        max-width: none;
    }

    .experience-location {
        margin-bottom: 15px;
        font-size: 0.65rem;
        line-height: 1.4;
    }

    .experience-title {
        font-size: clamp(3rem, 15vw, 5rem);
        line-height: 0.92;
    }

    .experience-tagline {
        max-width: 420px;
        margin-top: 21px;
        font-size: 1.08rem;
        line-height: 1.4;
    }


    /* INFORMACIÓN */

    .experience-info {
        width: auto;
        margin: 0 var(--page-padding);
        padding: 58px 0 90px;

        display: block;
    }

    .experience-description p {
        max-width: none;
        font-size: 1.25rem;
        line-height: 1.55;
    }

    .experience-action {
        margin-top: 48px;
    }

    .experience-steps {
        gap: 7px 11px;
        margin-bottom: 34px;
        font-size: 0.92rem;
    }

    .experience-steps span:not(:last-child)::after {
        margin-left: 11px;
    }

    .experience-button {
        min-height: 60px;
        padding: 0 20px;
        font-size: 0.67rem;
        letter-spacing: 0.08em;
    }

    .experience-note {
        margin-top: 17px;
        font-size: 0.73rem;
    }
}


/* Evitamos movimiento innecesario si el usuario
   prefiere reducir animaciones */

@media (prefers-reduced-motion: reduce) {

    .experience-button {
        transition: none;
    }
}

/* =========================================
   CONTINUIDAD MANIFIESTO → EXPERIENCIAS
========================================= */

.manifesto,
.experiences {
    background: #05070A;
}

/* Acercamos el final del manifiesto
   al comienzo de Nuestras experiencias */

.manifesto-transition {
    margin-bottom: 0;
    padding-bottom: 70px;
}

.experiences-intro {
    padding-top: 65px;
}

@media (max-width: 820px) {

    .manifesto-transition {
        padding-bottom: 45px;
    }

    .experiences-intro {
        padding-top: 45px;
    }

}

/* =========================================
   SECCIÓN 4 · SOBRE NEUROEXPERIENCE
========================================= */

.about {
    position: relative;
    overflow: hidden;
    background: #0D1218;
}

.about-container {
    width: min(100% - (var(--page-padding) * 2), 1180px);
    margin: 0 auto;
    padding: 45px 0 70px;
}


/* CABECERA
----------------------------------------- */

.about-header {
    max-width: 1050px;
}

.about-label {
    margin: 0 0 27px;

    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #32D3BC;
}

.about-title {
    max-width: 1000px;
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.05em;

    color: #F4F5F3;
}

.about-title span {
    display: block;
    color: rgba(244, 245, 243, 0.45);
}


/* CUERPO
----------------------------------------- */

.about-body {
    display: grid;
    grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1.55fr);
    gap: clamp(50px, 8vw, 120px);

    max-width: 950px;
    margin: clamp(85px, 10vw, 135px) 0 0 auto;
}


/* PEQUEÑO ELEMENTO VISUAL */

.about-marker {
    position: relative;
    min-height: 100%;
}

.about-marker::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;

    width: 1px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        rgba(50, 211, 188, 0.85),
        rgba(7, 140, 176, 0.28),
        rgba(7, 140, 176, 0)
    );
}

.about-marker span {
    position: absolute;
    top: 3px;
    left: -4px;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #32D3BC;

    box-shadow: 0 0 20px rgba(50, 211, 188, 0.25);
}


/* TEXTO */

.about-copy {
    max-width: 720px;
}

.about-copy p {
    margin: 0 0 38px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.02em;

    color: rgba(244, 245, 243, 0.7);
}

.about-copy p:last-child {
    margin-bottom: 0;
}

.about-copy strong {
    font-weight: 500;
    color: #F4F5F3;
}


/* CIERRE
----------------------------------------- */

.about-ending {
    margin-top: clamp(110px, 13vw, 180px);
    padding-top: 55px;

    border-top: 1px solid rgba(244, 245, 243, 0.09);
}

.about-beginning {
    margin: 0 0 23px;

    font-family: "Inter", sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: rgba(169, 177, 186, 0.7);
}

.about-statement {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(3rem, 6.5vw, 7rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.055em;

    color: #F4F5F3;
}

.about-statement span {
    display: block;
}

.about-statement-accent {
    color: #32D3BC;
}


/* =========================================
   SECCIÓN 4 · MOBILE
========================================= */

@media (max-width: 820px) {

    .about-container {
        width: auto;
        margin: 0 var(--page-padding);
        padding: 85px 0 100px;
    }

    .about-label {
        margin-bottom: 21px;
        font-size: 0.67rem;
    }

    .about-title {
        font-size: clamp(2.25rem, 10.5vw, 3.5rem);
        line-height: 1.06;
    }

    .about-title span {
        margin-top: 7px;
    }


    /* CUERPO */

    .about-body {
        display: block;
        max-width: none;
        margin-top: 70px;
    }

    .about-marker {
        width: 70px;
        height: 1px;
        min-height: 0;
        margin-bottom: 35px;

        background: linear-gradient(
            to right,
            #32D3BC,
            rgba(7, 140, 176, 0)
        );
    }

    .about-marker::before {
        display: none;
    }

    .about-marker span {
        top: -4px;
        left: 0;
    }

    .about-copy {
        max-width: none;
    }

    .about-copy p {
        margin-bottom: 30px;
        font-size: 1.18rem;
        line-height: 1.55;
    }


    /* CIERRE */

    .about-ending {
        margin-top: 85px;
        padding-top: 40px;
    }

    .about-beginning {
        margin-bottom: 20px;
        font-size: 0.7rem;
    }

    .about-statement {
        font-size: clamp(2.7rem, 13vw, 4.6rem);
        line-height: 1;
    }

    .about-statement-accent {
        margin-top: 5px;
    }
}

/* =========================================
   SECCIÓN 5 · CIERRE
========================================= */

.closing {
    position: relative;
    overflow: hidden;
    background: #05070A;
}

.closing::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: 50%;
    bottom: -520px;
    transform: translateX(-50%);
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(7, 140, 176, 0.12) 0%,
        rgba(50, 211, 188, 0.035) 38%,
        transparent 70%
    );

    pointer-events: none;
}

.closing-container {
    position: relative;
    z-index: 1;

    width: min(100% - (var(--page-padding) * 2), 1180px);
    margin: 0 auto;

    padding: clamp(120px, 14vw, 190px) 0
             clamp(110px, 12vw, 160px);

    text-align: center;
}


/* FRASE FINAL
----------------------------------------- */

.closing-message {
    max-width: 1050px;
    margin: 0 auto;
}

.closing-statement {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(3rem, 6vw, 6.3rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.055em;

    color: #F4F5F3;
}

.closing-statement span {
    display: block;
}

.closing-statement span:last-child {
    color: rgba(244, 245, 243, 0.48);
}


/* EXPERIENCIA
----------------------------------------- */

.closing-experience {
    max-width: 720px;
    margin: clamp(90px, 10vw, 130px) auto 0;
}

.closing-intro {
    margin: 0 0 24px;

    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;

    color: rgba(169, 177, 186, 0.75);
}

.closing-title {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.7rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.045em;
    text-transform: uppercase;

    color: #F4F5F3;
}


/* IDENTIDAD DEL LUGAR */

.closing-place {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;

    margin: 19px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(169, 177, 186, 0.62);
}

.closing-place span {
    color: #32D3BC;
}


/* CTA */

.closing-button {
    width: min(100%, 440px);
    min-height: 64px;

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

    margin: 43px auto 0;
    padding: 0 25px;

    border: 1px solid rgba(244, 245, 243, 0.25);
    border-radius: 999px;

    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #F4F5F3;
    text-decoration: none;

    transition:
        border-color 250ms ease,
        background-color 250ms ease,
        transform 250ms ease;
}

.closing-button:hover {
    border-color: rgba(50, 211, 188, 0.7);
    background: rgba(50, 211, 188, 0.06);
    transform: translateY(-2px);
}

.closing-button-arrow {
    font-size: 1.45rem;
    color: #32D3BC;
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
    position: relative;
    background: #05070A;

    border-top: 1px solid rgba(244, 245, 243, 0.08);
}

.footer-container {
    width: min(100% - (var(--page-padding) * 2), 1180px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 90px;

    padding: 80px 0 70px;
}


/* MARCA */

.footer-logo {
    margin: 0 0 18px;

    font-family: "Manrope", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.025em;

    color: #F4F5F3;
}

.footer-claim {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 0.83rem;
    line-height: 1.7;

    color: #A9B1BA;
}


/* NAVEGACIÓN */

.footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-heading {
    margin: 0 0 21px;

    font-family: "Inter", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #A9B1BA;
}

.footer-column a {
    margin-bottom: 12px;

    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;

    color: rgba(244, 245, 243, 0.72);
    text-decoration: none;

    transition: color 200ms ease;
}

.footer-column a:hover {
    color: #32D3BC;
}


/* PARTE INFERIOR */

.footer-bottom {
    width: min(100% - (var(--page-padding) * 2), 1180px);
    margin: 0 auto;

    padding: 24px 0 32px;

    border-top: 1px solid rgba(244, 245, 243, 0.06);
}

.footer-bottom p {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 0.7rem;

    color: #A9B1BA;
}


/* =========================================
   CIERRE + FOOTER · MOBILE
========================================= */

@media (max-width: 820px) {

    .closing-container {
        width: auto;
        margin: 0 var(--page-padding);

        padding: 100px 0 95px;
    }

    .closing-statement {
        font-size: clamp(2.6rem, 12vw, 4.4rem);
        line-height: 1.03;
    }

    .closing-statement span:last-child {
        margin-top: 8px;
    }

    .closing-experience {
        margin-top: 80px;
    }

    .closing-intro {
        margin-bottom: 20px;
        font-size: 0.76rem;
    }

    .closing-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .closing-place {
        max-width: 350px;
        margin: 17px auto 0;

        gap: 4px 7px;

        font-size: 0.65rem;
        line-height: 1.7;
    }

    .closing-button {
        min-height: 61px;
        margin-top: 37px;
        padding: 0 21px;

        font-size: 0.67rem;
    }


    /* FOOTER */

    .footer-container {
        width: auto;
        margin: 0 var(--page-padding);

        display: block;

        padding: 65px 0 55px;
    }

    .footer-brand {
        margin-bottom: 55px;
    }

    .footer-navigation {
        grid-template-columns: 1fr 1fr;
        gap: 45px 30px;
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        width: auto;
        margin: 0 var(--page-padding);

        padding: 22px 0 28px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .closing-button,
    .footer-column a {
        transition: none;
    }
}

/* =========================================
   REFINAMIENTO GLOBAL · HOME
   Universo visual NeuroExperience
========================================= */

/*
   Todas las secciones corporativas comparten
   exactamente el mismo fondo.
*/

html,
body {
    background: #05070A;
}

.hero,
.manifesto,
.experiences,
.about,
.closing,
.site-footer {
    background-color: #05070A;
}


/*
   Evitamos que textos y contenedores puedan
   desbordar horizontalmente en determinados
   tamaños de pantalla o niveles de zoom.
*/

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
}


/*
   Los contenedores principales mantienen
   una anchura coherente entre secciones.
*/

.manifesto-container,
.experiences-intro,
.experience-info,
.about-container,
.closing-container,
.footer-container,
.footer-bottom {
    max-width: 1180px;
}


/*
   Evitamos que palabras/títulos muy grandes
   generen desbordamientos inesperados.
*/

.hero-title,
.manifesto-title,
.experiences-heading,
.experience-title,
.about-title,
.about-statement,
.closing-statement,
.closing-title {
    overflow-wrap: normal;
    word-break: normal;
}

/* =========================================
   SOBRE NEUROEXPERIENCE · CIERRE MESURADO
========================================= */

.about-ending {
    max-width: 760px;
    margin: 75px 0 0 auto;
    padding-top: 0;
    border-top: 0;
}

.about-beginning {
    margin-bottom: 14px;
}

.about-statement {
    font-size: clamp(2rem, 3.3vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.about-statement span {
    display: inline;
}

.about-statement-accent {
    color: rgba(244, 245, 243, 0.58);
}


/* MOBILE */

@media (max-width: 820px) {

    .about-ending {
        margin-top: 55px;
    }

    .about-statement {
        font-size: clamp(2rem, 8.5vw, 2.8rem);
        line-height: 1.1;
    }

    .about-statement span {
        display: inline;
    }

    .about-statement-accent {
        margin-top: 0;
    }
}

/* =========================================
   SOBRE NEUROEXPERIENCE · CONCLUSIÓN
========================================= */

.about-conclusion {
    margin-top: 48px !important;
    margin-bottom: 0 !important;
}

.about-conclusion strong {
    display: inline-block;
    margin-top: 7px;

    font-weight: 500;
    color: #F4F5F3;
}

@media (max-width: 820px) {

    .about-conclusion {
        margin-top: 40px !important;
    }

}

/* =========================================
   IDENTIDAD DE MARCA · HEADER
========================================= */

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    flex-shrink: 0;
}

.brand-isotipo {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-logotipo {
    display: block;
    width: auto;
    height: 31px;
    object-fit: contain;
}


/* TABLET / PANTALLAS INTERMEDIAS */

@media (max-width: 1050px) {

    .site-header .brand {
        gap: 9px;
    }

    .brand-isotipo {
        width: 34px;
        height: 34px;
    }

    .brand-logotipo {
        height: 27px;
    }
}


/* MOBILE */

@media (max-width: 820px) {

    .site-header .brand {
        gap: 8px;
    }

    .brand-isotipo {
        width: 31px;
        height: 31px;
    }

    .brand-logotipo {
        height: 24px;
    }
}

/* =========================================
   AJUSTE DE TAMAÑO · LOGO HEADER
========================================= */

.brand-isotipo {
    width: 52px;
    height: 52px;
}

.brand-logotipo {
    width: auto;
    height: 43px;
}

.site-header .brand {
    gap: 14px;
}


/* PANTALLAS INTERMEDIAS */

@media (max-width: 1050px) {

    .brand-isotipo {
        width: 46px;
        height: 46px;
    }

    .brand-logotipo {
        height: 38px;
    }

    .site-header .brand {
        gap: 11px;
    }
}


/* MÓVIL */

@media (max-width: 820px) {

    .brand-isotipo {
        width: 40px;
        height: 40px;
    }

    .brand-logotipo {
        height: 33px;
    }

    .site-header .brand {
        gap: 9px;
    }
}

/* =========================================
   HEADER RESPONSIVE · BREAKPOINT REAL
========================================= */

/*
   Con el logo oficial, el header necesita pasar
   antes a navegación móvil para evitar solapamientos.
*/

@media (max-width: 1150px) {

    .desktop-nav,
    .header-experience-link {
        display: none;
    }

    .menu-button {
        display: flex;
    }

    .site-header {
        justify-content: space-between;
    }
}

/* =========================================
   MANIFIESTO · FIRMA NEUROEXPERIENCE
========================================= */

.manifesto-definition {
    margin-top: 90px;
    padding: 0;
    border: 0;
}

.manifesto-definition-intro {
    margin: 0 0 24px !important;

    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: #A9B1BA;
}

.manifesto-signature {
    display: flex;
    align-items: center;
    gap: 22px;

    width: fit-content;
    max-width: 100%;
}

.manifesto-logo-isotipo {
    display: block;

    width: 92px;
    height: 92px;

    object-fit: contain;
    flex-shrink: 0;
}

.manifesto-logo-logotipo {
    display: block;

    width: auto;
    height: 67px;

    max-width: min(520px, 70vw);
    object-fit: contain;
}


/* MOBILE */

@media (max-width: 820px) {

    .manifesto-definition {
        margin-top: 70px;
    }

    .manifesto-definition-intro {
        margin-bottom: 18px !important;
    }

    .manifesto-signature {
        gap: 14px;
    }

    .manifesto-logo-isotipo {
        width: 65px;
        height: 65px;
    }

    .manifesto-logo-logotipo {
        height: 47px;
        max-width: calc(100vw - 125px);
    }
}

/* =========================================
   MANIFIESTO · AJUSTE DE JERARQUÍA
========================================= */

/* Los tres verbos siguen siendo protagonistas,
   pero sin competir con la firma de la marca */

.manifesto-verb {
    font-size: clamp(3.2rem, 6.2vw, 6.5rem);
    line-height: 0.98;
}


/* Acercamos la firma al pensamiento anterior */

.manifesto-definition {
    margin-top: 55px;
}


/* "ESO ES" acompaña; no protagoniza */

.manifesto-definition-intro {
    margin-bottom: 22px !important;
}


/* La firma de NeuroExperience gana presencia */

.manifesto-signature {
    gap: 26px;
}

.manifesto-logo-isotipo {
    width: 125px;
    height: 125px;
}

.manifesto-logo-logotipo {
    width: auto;
    height: 90px;
    max-width: min(650px, 72vw);
}


/* MÓVIL */

@media (max-width: 820px) {

    .manifesto-verb {
        font-size: clamp(2.8rem, 13vw, 4.5rem);
        line-height: 1;
    }

    .manifesto-definition {
        margin-top: 45px;
    }

    .manifesto-signature {
        gap: 16px;
    }

    .manifesto-logo-isotipo {
        width: 78px;
        height: 78px;
    }

    .manifesto-logo-logotipo {
        height: 57px;
        max-width: calc(100vw - 145px);
    }
}

/* =========================================
   UNIVERSO NEUROEXPERIENCE · MANIFIESTO
========================================= */

.manifesto {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.manifesto-container {
    position: relative;
    z-index: 2;
}


/* CAPA AMBIENTAL */

.manifesto-atmosphere {
    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}


/* =========================================
   LUCES
========================================= */

.manifesto-light {
    position: absolute;

    border-radius: 50%;
    filter: blur(80px);

    opacity: 0.13;

    animation: neuroLightBreath 12s ease-in-out infinite alternate;
}

.manifesto-light-one {
    width: 520px;
    height: 520px;

    top: 15%;
    right: -260px;

    background: rgba(7, 140, 176, 0.32);
}

.manifesto-light-two {
    width: 420px;
    height: 420px;

    bottom: 8%;
    left: -250px;

    background: rgba(50, 211, 188, 0.18);

    animation-delay: -6s;
}


/* =========================================
   GEOMETRÍAS
========================================= */

.manifesto-geometry {
    position: absolute;

    opacity: 0.14;

    transform: rotate(-8deg);
}

.manifesto-geometry span {
    position: absolute;

    display: block;

    border: 1px solid rgba(7, 140, 176, 0.55);
}


/* GEOMETRÍA SUPERIOR DERECHA */

.manifesto-geometry-one {
    width: 580px;
    height: 580px;

    top: 12%;
    right: -260px;
}

.manifesto-geometry-one span:nth-child(1) {
    width: 420px;
    height: 420px;

    top: 0;
    left: 0;

    border-radius: 50%;
}

.manifesto-geometry-one span:nth-child(2) {
    width: 310px;
    height: 310px;

    top: 55px;
    left: 55px;

    border-radius: 50%;
}

.manifesto-geometry-one span:nth-child(3) {
    width: 200px;
    height: 200px;

    top: 110px;
    left: 110px;

    border-radius: 50%;
}


/* GEOMETRÍA INFERIOR IZQUIERDA */

.manifesto-geometry-two {
    width: 460px;
    height: 460px;

    bottom: 5%;
    left: -250px;

    transform: rotate(18deg);
}

.manifesto-geometry-two span:nth-child(1) {
    width: 330px;
    height: 170px;

    top: 80px;
    left: 60px;

    border-right: 0;
}

.manifesto-geometry-two span:nth-child(2) {
    width: 220px;
    height: 280px;

    top: 0;
    left: 115px;

    border-bottom: 0;
}


/* =========================================
   RESPIRACIÓN DE LA LUZ
========================================= */

@keyframes neuroLightBreath {

    0% {
        opacity: 0.08;
        transform: scale(0.94);
    }

    100% {
        opacity: 0.16;
        transform: scale(1.06);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 820px) {

    .manifesto-light {
        filter: blur(65px);
    }

    .manifesto-light-one {
        width: 340px;
        height: 340px;

        right: -220px;
        top: 18%;
    }

    .manifesto-light-two {
        width: 300px;
        height: 300px;

        left: -210px;
        bottom: 10%;
    }

    .manifesto-geometry-one {
        width: 390px;
        height: 390px;

        right: -280px;
        top: 14%;

        opacity: 0.08;
    }

    .manifesto-geometry-two {
        width: 330px;
        height: 330px;

        left: -245px;
        bottom: 8%;

        opacity: 0.07;
    }

}


/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .manifesto-light {
        animation: none;
    }

}

/* =========================================
   MANIFIESTO · UNIVERSO IZQUIERDO
========================================= */

.manifesto-geometry-left {
    width: 650px;
    height: 650px;

    left: -300px;
    top: 34%;

    opacity: 0.12;
    transform: rotate(28deg);
}


/* Fragmentos inspirados en el isotipo */

.manifesto-geometry-left span {
    border-color: rgba(7, 140, 176, 0.48);
}


/* Arco exterior */

.manifesto-geometry-left span:nth-child(1) {
    width: 520px;
    height: 520px;

    top: 0;
    left: 0;

    border-radius: 50%;

    border-right-color: transparent;
    border-bottom-color: transparent;
}


/* Segundo recorrido */

.manifesto-geometry-left span:nth-child(2) {
    width: 390px;
    height: 390px;

    top: 65px;
    left: 65px;

    border-radius: 50%;

    border-left-color: transparent;
    border-bottom-color: transparent;
}


/* Recorrido angular */

.manifesto-geometry-left span:nth-child(3) {
    width: 240px;
    height: 340px;

    top: 155px;
    left: 200px;

    border-left: 0;
    border-bottom: 0;
}


/* Fragmento interior */

.manifesto-geometry-left span:nth-child(4) {
    width: 150px;
    height: 220px;

    top: 210px;
    left: 245px;

    border-top: 0;
    border-right: 0;
}


/* =========================================
   LUZ IZQUIERDA
========================================= */

.manifesto-light-left {
    width: 500px;
    height: 500px;

    left: -330px;
    top: 38%;

    background: rgba(7, 140, 176, 0.28);

    opacity: 0.11;

    animation-delay: -3s;
}

/* =========================================
   CONTROL RESPONSIVE · GEOMETRÍA IZQUIERDA
========================================= */

@media (max-width: 1200px) {

    .manifesto-geometry-left {
        left: -420px;
        opacity: 0.08;
    }

    .manifesto-light-left {
        left: -390px;
        opacity: 0.07;
    }

}

@media (max-width: 820px) {

    .manifesto-geometry-left,
    .manifesto-light-left {
        display: none;
    }

}

/* =========================================
   UNIVERSO NEUROEXPERIENCE · ABOUT
========================================= */

.about {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #05070A;
}

.about-container {
    position: relative;
    z-index: 2;
}

.about-atmosphere {
    position: absolute;
    inset: 0;

    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}


/* =========================================
   LUCES
========================================= */

.about-light {
    position: absolute;

    border-radius: 50%;
    filter: blur(95px);

    animation: aboutLightBreath 14s ease-in-out infinite alternate;
}


/* Luz principal: derecha */

.about-light-one {
    width: 560px;
    height: 560px;

    right: -300px;
    top: 18%;

    background: rgba(7, 140, 176, 0.28);
    opacity: 0.12;
}


/* Segunda luz: inferior izquierda */

.about-light-two {
    width: 420px;
    height: 420px;

    left: -260px;
    bottom: -100px;

    background: rgba(50, 211, 188, 0.17);
    opacity: 0.09;

    animation-delay: -7s;
}


/* =========================================
   RECORRIDOS GEOMÉTRICOS
========================================= */

.about-path {
    position: absolute;

    opacity: 0.14;

    transform: rotate(-7deg);
}

.about-path span {
    position: absolute;
    display: block;

    border: 1px solid rgba(7, 140, 176, 0.48);
}


/* -----------------------------------------
   RECORRIDO DERECHO
----------------------------------------- */

.about-path-one {
    width: 620px;
    height: 620px;

    right: -210px;
    top: 15%;
}

.about-path-one span:nth-child(1) {
    width: 420px;
    height: 180px;

    top: 40px;
    left: 60px;

    border-left: 0;
}

.about-path-one span:nth-child(2) {
    width: 260px;
    height: 390px;

    top: 130px;
    left: 220px;

    border-top: 0;
}

.about-path-one span:nth-child(3) {
    width: 340px;
    height: 210px;

    top: 310px;
    left: 70px;

    border-right: 0;
}


/* -----------------------------------------
   RECORRIDO INFERIOR IZQUIERDO
----------------------------------------- */

.about-path-two {
    width: 470px;
    height: 400px;

    left: -250px;
    bottom: -80px;

    transform: rotate(14deg);
}

.about-path-two span:nth-child(1) {
    width: 360px;
    height: 160px;

    top: 30px;
    left: 40px;

    border-bottom: 0;
}

.about-path-two span:nth-child(2) {
    width: 190px;
    height: 290px;

    top: 60px;
    left: 190px;

    border-left: 0;
}


/* =========================================
   MOVIMIENTO DE LUZ
========================================= */

@keyframes aboutLightBreath {

    0% {
        opacity: 0.07;
        transform: scale(0.95);
    }

    100% {
        opacity: 0.14;
        transform: scale(1.06);
    }

}


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

@media (max-width: 1200px) {

    .about-path-one {
        right: -350px;
        opacity: 0.08;
    }

    .about-light-one {
        right: -380px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 820px) {

    .about-light {
        filter: blur(70px);
    }

    .about-light-one {
        width: 330px;
        height: 330px;

        right: -230px;
        top: 22%;

        opacity: 0.09;
    }

    .about-light-two {
        width: 280px;
        height: 280px;

        left: -210px;
        bottom: 2%;
    }

    .about-path-one {
        width: 370px;
        height: 370px;

        right: -285px;
        top: 20%;

        opacity: 0.06;
    }

    .about-path-two {
        display: none;
    }

}


/* =========================================
   ACCESIBILIDAD
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about-light {
        animation: none;
    }

}

/* =========================================
   UNIVERSO NEUROEXPERIENCE · CIERRE
========================================= */

.closing {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #05070A;
}

.closing-container {
    position: relative;
    z-index: 2;
}

.closing-atmosphere {
    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}


/* =========================================
   LUZ PRINCIPAL
========================================= */

.closing-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);

    animation: closingLightBreath 15s ease-in-out infinite alternate;
}


/*
   Esta es la luz más importante.
   Queda aproximadamente detrás del mensaje final.
*/

.closing-light-main {
    width: 680px;
    height: 680px;

    left: 50%;
    top: 5%;

    transform: translateX(-50%);

    background: rgba(7, 140, 176, 0.22);
    opacity: 0.11;
}


/*
   Una última presencia turquesa hacia abajo.
*/

.closing-light-bottom {
    width: 440px;
    height: 440px;

    right: -220px;
    bottom: -200px;

    background: rgba(50, 211, 188, 0.16);
    opacity: 0.08;

    animation-delay: -7s;
}


/* =========================================
   ÚLTIMOS RECORRIDOS
========================================= */

.closing-path {
    position: absolute;
    opacity: 0.075;
}

.closing-path span {
    position: absolute;
    display: block;

    border: 1px solid rgba(7, 140, 176, 0.45);
}


/* -----------------------------------------
   FRAGMENTO IZQUIERDO
----------------------------------------- */

.closing-path-left {
    width: 520px;
    height: 520px;

    left: -310px;
    top: 12%;

    transform: rotate(22deg);
}

.closing-path-left span:nth-child(1) {
    width: 390px;
    height: 160px;

    top: 50px;
    left: 50px;

    border-right: 0;
}

.closing-path-left span:nth-child(2) {
    width: 220px;
    height: 330px;

    top: 110px;
    left: 170px;

    border-top: 0;
}

.closing-path-left span:nth-child(3) {
    width: 150px;
    height: 190px;

    top: 210px;
    left: 90px;

    border-left: 0;
    border-bottom: 0;
}


/* -----------------------------------------
   FRAGMENTO DERECHO
----------------------------------------- */

.closing-path-right {
    width: 440px;
    height: 440px;

    right: -300px;
    bottom: 4%;

    transform: rotate(-18deg);
}

.closing-path-right span:nth-child(1) {
    width: 330px;
    height: 150px;

    top: 70px;
    left: 30px;

    border-left: 0;
}

.closing-path-right span:nth-child(2) {
    width: 180px;
    height: 280px;

    top: 100px;
    left: 110px;

    border-bottom: 0;
}


/* =========================================
   RESPIRACIÓN
========================================= */

@keyframes closingLightBreath {

    0% {
        opacity: 0.07;
    }

    100% {
        opacity: 0.13;
    }

}


/* =========================================
   TRANSICIÓN HACIA EL FOOTER
========================================= */

.closing::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    background: linear-gradient(
        to bottom,
        rgba(5, 7, 10, 0),
        #05070A 90%
    );

    z-index: 1;
    pointer-events: none;
}


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

@media (max-width: 1200px) {

    .closing-path-left {
        left: -390px;
    }

    .closing-path-right {
        right: -350px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 820px) {

    .closing-light-main {
        width: 420px;
        height: 420px;

        top: 12%;

        filter: blur(80px);
    }

    .closing-light-bottom {
        width: 300px;
        height: 300px;

        right: -210px;
        bottom: -100px;

        filter: blur(70px);
    }

    .closing-path-left {
        width: 330px;
        height: 330px;

        left: -260px;
        top: 15%;

        opacity: 0.055;
    }

    .closing-path-right {
        display: none;
    }

    .closing::after {
        height: 120px;
    }

}


/* =========================================
   ACCESIBILIDAD
========================================= */

@media (prefers-reduced-motion: reduce) {

    .closing-light {
        animation: none;
    }

}

/* =========================================
   FOOTER · LOGOTIPO OFICIAL
========================================= */

.footer-brand-logo {
    display: block;

    width: auto;
    height: 54px;

    max-width: 290px;

    object-fit: contain;
    object-position: left center;

    margin-bottom: 24px;
}


/* MOBILE */

@media (max-width: 820px) {

    .footer-brand-logo {
        height: 46px;
        max-width: 250px;

        margin-bottom: 20px;
    }

}


/* =========================================
   NEUROEXPERIENCE
   PULIDO GLOBAL HOME · V1
========================================= */


/* 1. MANIFIESTO: ESPACIOS */

.manifesto {
    padding-top: clamp(75px, 7vw, 105px);
    padding-bottom: 0;
}

.manifesto-content {
    margin-top: clamp(42px, 5vw, 65px);
}

.manifesto-content > p {
    margin-bottom: 26px;
}

.manifesto-thought {
    margin-top: 70px !important;
    margin-bottom: 38px !important;
}

.manifesto-verbs {
    margin-bottom: 0;
}

.manifesto-definition {
    margin-top: 38px;
}

.manifesto-transition {
    margin-top: 90px;
    padding-top: 55px;
    padding-bottom: 35px;
}


/* 2. MANIFIESTO: JERARQUÍA */

.manifesto-title {
    font-size: clamp(3.2rem, 6.2vw, 6.2rem);
}

.manifesto-thought {
    font-size: clamp(2rem, 3.8vw, 3.5rem);
}

.manifesto-verb {
    font-size: clamp(3rem, 5.6vw, 5.8rem);
}

.manifesto-places {
    font-size: clamp(1.8rem, 3.5vw, 3.1rem);
}


/* 3. EXPERIENCIAS: TRANSICIÓN */

.experiences-intro {
    padding-top: 35px;
    padding-bottom: 55px;
}

.experiences-heading {
    font-size: clamp(2.5rem, 4.2vw, 4.3rem);
}


/* 4. ESCAPE PARK: INFORMACIÓN */

.experience-info {
    padding-top: 65px;
    padding-bottom: 65px;
}


/* 5. SOBRE NEUROEXPERIENCE */

.about {
    padding-top: 90px;
    padding-bottom: 65px;
}

.about-title {
    font-size: clamp(2.7rem, 4.6vw, 4.8rem);
}

.about-body {
    margin-top: 75px;
}

.about-copy p {
    margin-bottom: 32px;
}

.about-ending {
    margin-top: 0;
    padding-top: 0;
}


/* 6. CIERRE */

.closing {
    padding-top: 85px;
    padding-bottom: 90px;
}

.closing-statement {
    font-size: clamp(3rem, 5.6vw, 5.8rem);
}

.closing-experience {
    margin-top: 75px;
}


/* =========================================
   INTENSIDAD DE GEOMETRÍAS
========================================= */

.manifesto-geometry {
    opacity: 0.18;
}

.manifesto-geometry-left {
    opacity: 0.19;
}

.about-path {
    opacity: 0.17;
}

.closing-path {
    opacity: 0.12;
}


/* =========================================
   INTENSIDAD DE LUCES
========================================= */

.manifesto-light,
.about-light,
.closing-light {
    filter: blur(75px);
}


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

@media (max-width: 820px) {

    .manifesto {
        padding-top: 70px;
    }

    .manifesto-content {
        margin-top: 45px;
    }

    .manifesto-content > p {
        margin-bottom: 25px;
    }

    .manifesto-thought {
        margin-top: 55px !important;
        margin-bottom: 30px !important;
    }

    .manifesto-definition {
        margin-top: 35px;
    }

    .manifesto-transition {
        margin-top: 65px;
        padding-top: 35px;
        padding-bottom: 30px;
    }

    .experiences-intro {
        padding-top: 35px;
        padding-bottom: 45px;
    }

    .experience-info {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .about {
        padding-top: 75px;
        padding-bottom: 55px;
    }

    .about-body {
        margin-top: 55px;
    }

    .closing {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    .closing-experience {
        margin-top: 55px;
    }

    .manifesto-geometry-left,
    .manifesto-light-left {
        display: none;
    }

}


/* =========================================
   MANIFIESTO · LÍNEA DE RECORRIDO
========================================= */

.manifesto-thought {
    position: relative;
    padding-left: 28px;
}

.manifesto-thought::before {
    content: "";
    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 1px;

    background: linear-gradient(
        to bottom,
        #32D3BC,
        rgba(50, 211, 188, 0.08)
    );
}

.manifesto-thought::after {
    content: "";
    position: absolute;

    left: -3px;
    top: 5px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #32D3BC;
}


/* =========================================
   TRANSICIÓN · EXPERIENCIAS
========================================= */

.experiences-intro {
    position: relative;
}

.experiences-intro::before {
    content: "";
    display: block;

    width: 65px;
    height: 1px;

    margin-bottom: 28px;

    background: linear-gradient(
        to right,
        #32D3BC,
        rgba(50, 211, 188, 0)
    );
}


/* =========================================
   LUCES · AJUSTE DE PRESENCIA
========================================= */

.manifesto-light-one {
    background: rgba(7, 140, 176, 0.42);
}

.manifesto-light-two {
    background: rgba(50, 211, 188, 0.25);
}

.manifesto-light-left {
    background: rgba(7, 140, 176, 0.38);
}

.about-light-one {
    background: rgba(7, 140, 176, 0.38);
}

.about-light-two {
    background: rgba(50, 211, 188, 0.23);
}

.closing-light-main {
    background: rgba(7, 140, 176, 0.30);
}

.closing-light-bottom {
    background: rgba(50, 211, 188, 0.21);
}


/* =========================================
   NEUROEXPERIENCE · RITMO VERTICAL V2
========================================= */

/* Escape Park: evitar espacio sobrante
   después de la información */

.experience-info {
    padding-top: 55px;
    padding-bottom: 45px;
    min-height: 0;
}

/* Sobre NeuroExperience:
   acercar el título y el contenido */

.about {
    padding-top: 65px;
    padding-bottom: 25px;
    min-height: 0;
}

.about-container {
    padding-bottom: 0;
}

.about-body {
    margin-top: 55px;
    margin-bottom: 0;
}

.about-copy p:last-child {
    margin-bottom: 0;
}

/* Cierre: acercarlo al final del bloque anterior */

.closing {
    padding-top: 55px;
    padding-bottom: 75px;
    min-height: 0;
}

.closing-container {
    padding-top: 0;
}

/* Adaptación móvil */

@media (max-width: 820px) {

    .experience-info {
        padding-top: 42px;
        padding-bottom: 40px;
    }

    .about {
        padding-top: 55px;
        padding-bottom: 25px;
    }

    .about-body {
        margin-top: 42px;
    }

    .closing {
        padding-top: 55px;
        padding-bottom: 65px;
    }
}


/* =========================================
   NEUROEXPERIENCE · DIVISORES DE SECCIÓN
========================================= */

/* Líneas discretas entre secciones */

.manifesto,
.experiences,
.about,
.closing {
    position: relative;
}

/* Divisores de ancho controlado */

.manifesto::before,
.about::before,
.closing::before {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: min(1180px, calc(100% - 48px));
    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(50, 211, 188, 0.32),
        rgba(169, 177, 186, 0.14) 45%,
        rgba(169, 177, 186, 0.08) 85%,
        transparent
    );

    pointer-events: none;
}

/* No duplicar el separador que ya
   existe al terminar el manifiesto */

.experiences::before {
    content: none;
}

/* El footer conserva su propia línea */


/* =========================================
   NEUROEXPERIENCE · AJUSTE FINAL DE ESPACIOS
========================================= */

/* 1. Escape Park → Sobre NeuroExperience */

.about {
    padding-top: 35px;
}

/* 2. Cierre → Footer */

.closing {
    padding-bottom: 30px;
}

/* Adaptación para celulares */

@media (max-width: 820px) {

    .about {
        padding-top: 35px;
    }

    .closing {
        padding-bottom: 35px;
    }

}


/* =========================================
   ESCAPE PARK LOTA · LEGIBILIDAD SOBRE FOTO
========================================= */

.experience-title {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.55),
        0 5px 24px rgba(0, 0, 0, 0.35);
}

.experience-tagline,
.experience-location {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7);
}


/* ESCAPE PARK LOTA · TÍTULO SOBRE FOTOGRAFÍA */

.experience-title {
    letter-spacing: 0.025em;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.85),
        0 5px 18px rgba(0, 0, 0, 0.65);
}

@media (max-width: 820px) {
    .experience-title {
        letter-spacing: 0.01em;
    }
}


/* =========================================
   NEUROEXPERIENCE · AJUSTES RESPONSIVE
   Pantallas intermedias y accesibilidad
========================================= */

/* Evita que el contenido exceda su contenedor */
.hero-content,
.manifesto-container,
.experiences-intro,
.experience-info,
.about-container,
.closing-container {
    min-width: 0;
}

/* Pantallas intermedias: notebooks y tablets */
@media (min-width: 821px) and (max-width: 1200px) {

    .hero-title > span {
        white-space: normal;
    }

    .hero-title {
        font-size: clamp(3rem, 5.3vw, 4.8rem);
        max-width: 100%;
    }

    .experience-title {
        font-size: clamp(3.2rem, 6.3vw, 5.8rem);
    }
}

/* Celulares pequeños */
@media (max-width: 480px) {

    .experience-title {
        font-size: clamp(2.3rem, 11vw, 3.5rem);
        letter-spacing: 0.01em;
        overflow-wrap: normal;
    }

    .experience-identity {
        max-width: 100%;
    }

    .manifesto-signature {
        max-width: 100%;
    }

    .manifesto-logo-isotipo {
        width: 58px;
        height: 58px;
    }

    .manifesto-logo-logotipo {
        width: auto;
        height: 43px;
        max-width: calc(100vw - 120px);
    }
}


/* =========================================
   NEUROEXPERIENCE · REVELADO AL DESPLAZARSE
========================================= */

.scroll-reveal {
    opacity: 1;
    transform: none;
}

/* Solo se ocultan los elementos cuando
   JavaScript confirma que puede animarlos */

.reveal-ready .scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 850ms ease,
        transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-ready .scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accesibilidad: respetar movimiento reducido */

@media (prefers-reduced-motion: reduce) {
    .reveal-ready .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================
   NEUROEXPERIENCE · MICROINTERACCIONES
========================================= */

/* Botones principales */

.experience-button,
.closing-button,
.hero-button,
.header-experience-link {
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

/* Efecto al pasar el cursor */

@media (hover: hover) and (pointer: fine) {

    .experience-button:hover,
    .closing-button:hover,
    .hero-button:hover,
    .header-experience-link:hover {
        transform: translateY(-2px);
        border-color: rgba(50, 211, 188, 0.55);
        box-shadow: 0 8px 28px rgba(50, 211, 188, 0.07);
    }

    /* Flechas de los botones */

    .experience-button-arrow,
    .closing-button-arrow {
        transition: transform 300ms ease;
    }

    .experience-button:hover .experience-button-arrow,
    .closing-button:hover .closing-button-arrow {
        transform: translateX(5px);
    }
}

/* Navegación con teclado */

.experience-button:focus-visible,
.closing-button:focus-visible,
.hero-button:focus-visible,
.header-experience-link:focus-visible {
    outline: 2px solid #32D3BC;
    outline-offset: 4px;
}

/* Personas que prefieren menos movimiento */

@media (prefers-reduced-motion: reduce) {

    .experience-button,
    .closing-button,
    .hero-button,
    .header-experience-link,
    .experience-button-arrow,
    .closing-button-arrow {
        transition: none;
    }
}


/* =========================================
   MICROINTERACCIONES · BOTONES INICIALES
========================================= */

.hero-cta,
.header-experience-link {
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease,
        background-color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .hero-cta:hover,
    .header-experience-link:hover {
        transform: translateY(-2px);
        border-color: rgba(50, 211, 188, 0.55);
        box-shadow: 0 8px 28px rgba(50, 211, 188, 0.07);
    }

    .hero-cta:hover .hero-cta-arrow {
        transform: translateX(5px);
    }
}

.hero-cta:focus-visible,
.header-experience-link:focus-visible {
    outline: 2px solid #32D3BC;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta,
    .header-experience-link,
    .hero-cta-arrow {
        transition: none;
    }
}


/* =========================================
   MICROINTERACCIONES · HERO Y NAVEGACIÓN
========================================= */

.hero-cta,
.experience-link {
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

/* Movimiento de la flecha del Hero */
.hero-cta-arrow {
    display: inline-block;
    transition: transform 300ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .hero-cta:hover,
    .experience-link:hover {
        transform: translateY(-2px);
        border-color: rgba(50, 211, 188, 0.55);
        box-shadow: 0 8px 28px rgba(50, 211, 188, 0.07);
    }

    .hero-cta:hover .hero-cta-arrow {
        transform: translateX(5px);
    }
}

/* Navegación con teclado */
.hero-cta:focus-visible,
.experience-link:focus-visible {
    outline: 2px solid #32D3BC;
    outline-offset: 4px;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .hero-cta,
    .experience-link,
    .hero-cta-arrow {
        transition: none;
    }
}