/* =========================================================
   MOVE HYBRID GAMES
   STYLE.CSS
========================================================= */

:root {
    /* =========================================
       MOVE HYBRID GAMES
       PALETA OFICIAL
    ========================================= */

    --bg: #02050b;

    --bg-soft: #050b16;

    --panel: rgba(5, 13, 28, 0.82);

    --line: rgba(0, 87, 217, 0.25);


    /* BLANCO */

    --white: #f4f6fa;


    /* GRISES AZULADOS */

    --muted: #66738a;


    /* AZUL MARINO */

    --navy: #071a3a;

    --navy-dark: #031027;


    /* AZUL ELÉCTRICO */

    --cyan: #0057d9;

    --cyan-dark: #003b9a;


    /* REEMPLAZAMOS EL MORADO
       POR AZULES */

    --purple: #003b9a;

    --purple-light: #0a6cff;


    /* AZUL DE BRILLO */

    --electric-blue: #0a6cff;

    --electric-blue-light: #2584ff;


    /* ROJO ELIMINADO DE LA IDENTIDAD */

    --red: #0057d9;
}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    overflow-x: hidden;

    color: var(--white);

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(0, 59, 154, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 50%,
            rgba(0, 87, 217, 0.08),
            transparent 30%
        ),
        #02050b;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;
}



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


button {
    font-family: inherit;
}


/* =========================================================
   DECORACIÓN GENERAL
========================================================= */

.page-glow {
    position: fixed;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    opacity: 0.11;

    z-index: -2;
}


.page-glow--one {
    background: #003b9a;
}

.page-glow--two {
    background: #0057d9;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 50;
}


/* =========================================================
   BARRA PRÓXIMO EVENTO
========================================================= */

.event-bar {
    height: 30px;

    display: flex;

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

    gap: 13px;

    background: rgba(5, 7, 14, 0.88);

    border-bottom:
        1px solid rgba(124, 81, 255, 0.20);

    color: #8e6cff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 6px;

    text-transform: uppercase;

    animation:
        eventBlink 1.35s infinite;
}


.event-bar strong {
    color: #9668ff;
}


.event-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 14px rgba(229, 43, 53, 0.85);

    animation:
        dotPulse 0.8s infinite;
}


/* =========================================================
   ANIMACIÓN DEL EVENTO
========================================================= */

@keyframes eventBlink {

    0%,
    45%,
    100% {
        opacity: 1;

        text-shadow:
            0 0 15px rgba(139, 88, 255, 0.85);
    }

    55%,
    75% {
        opacity: 0.24;

        text-shadow: none;
    }
}


@keyframes dotPulse {

    50% {
        transform: scale(0.55);

        opacity: 0.55;
    }
}


/* =========================================================
   NAVBAR
========================================================= */

.nav-shell {
    width: min(
        1220px,
        calc(100% - 48px)
    );

    height: 72px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        245px
        1fr
        68px;

    align-items: center;

    gap: 20px;

    padding:
        0 12px 0 0;

 background:
    linear-gradient(
        135deg,
        rgba(4, 12, 27, 0.96),
        rgba(2, 7, 17, 0.92)
    );

   border:
    1px solid rgba(0, 87, 217, 0.28);

    border-top: 0;

    border-radius:
        0 0 28px 28px;

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   LOGO
========================================================= */

.brand {
    display: flex;

    align-items: center;

    gap: 13px;

    padding-left: 15px;
}


.brand-mark {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    grid-template-columns:
        1fr 1fr;

    border:
        1px solid rgba(22, 213, 244, 0.55);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(123, 44, 255, 0.45),
            rgba(0, 172, 211, 0.15)
        );

    box-shadow:
        inset 0 0 25px rgba(22, 213, 244, 0.10),
        0 0 22px rgba(123, 44, 255, 0.10);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: -1px;
}


.brand-mark span:last-child {
    color: var(--cyan);
}


.brand-name {
    display: flex;

    flex-direction: column;

    letter-spacing: 4px;
}


.brand-name b {
    font-size: 19px;
}


.brand-name small {
    margin-top: 2px;

    color: #9aa6c0;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;
}


/* =========================================================
   NAV MENU
========================================================= */

.main-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;
}


.nav-link {
    position: relative;

    padding:
        27px 18px 24px;

    color: #76829b;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    transition:
        0.25s ease;
}


.nav-link::after {
    content: "";

    position: absolute;

    left: 16px;
    right: 16px;

    bottom: 9px;

    height: 2px;

    transform:
        scaleX(0);

    transform-origin:
        center;

   background:
        #0057d9;

    box-shadow:
        0 0 12px
        rgba(0, 87, 217, 0.8);

    transition:
        0.25s ease;
}


.nav-link:hover,
.nav-link.active {
    color: var(--cyan);
}


.nav-link:hover::after,
.nav-link.active::after {
    transform:
        scaleX(1);
}


/* =========================================================
   BOTÓN PERFIL
========================================================= */

.profile-button {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(103, 126, 194, 0.35);

    border-radius: 13px;

    color: #8392b2;

    transition:
        0.25s ease;
}


.profile-button:hover {
    color: var(--cyan);

    border-color:
        rgba(22, 213, 244, 0.55);

    box-shadow:
        0 0 22px rgba(22, 213, 244, 0.12);
}


.profile-button svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}


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

.menu-toggle {
    display: none;
}


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

.hero {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: grid;

    place-items: center;

    padding:
        145px 24px 75px;

    isolation: isolate;
}


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

.hero-bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

   background:
    linear-gradient(
        180deg,
        rgba(2, 5, 11, 0.42),
        rgba(2, 5, 11, 0.88)
    ),
    radial-gradient(
        ellipse at center,
        rgba(0, 59, 154, 0.20),
        transparent 65%
    ),
    linear-gradient(
        110deg,
        #02050b,
        #061126 48%,
        #02050b
    );
}


.hero-bg::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.25;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 85px,
            rgba(108, 124, 164, 0.08) 86px 87px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 85px,
            rgba(108, 124, 164, 0.07) 86px 87px
        );

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );
}


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

.arena-light {
    position: absolute;

    width: 800px;
    height: 500px;

    filter: blur(60px);

    opacity: 0.16;

    transform:
        rotate(-18deg);
}

.arena-light--left {
    left: -420px;

    top: 25%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #003b9a,
            transparent
        );
}



.arena-light--right {
    right: -420px;

    top: 10%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0057d9,
            transparent
        );

    transform:
        rotate(18deg);
}


/* =========================================================
   GRID DEL PISO
========================================================= */

.grid-floor {
    position: absolute;

    width: 160%;
    height: 50%;

    left: -30%;

    bottom: -27%;

    transform:
        perspective(600px)
        rotateX(62deg);

    transform-origin:
        center top;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 70px,
            rgba(22, 213, 244, 0.10) 71px 72px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 70px,
            rgba(123, 44, 255, 0.10) 71px 72px
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1),
            transparent
        );
}


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

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

    text-align:
        center;

    transform:
        translateY(-10px);
}


.eyebrow {
    margin-bottom: 17px;

    color: #78849e;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 7px;
}


/* =========================================================
   TÍTULO
========================================================= */

.hero h1 {
    display: flex;

    flex-direction: column;

    align-items: center;

    font-size:
        clamp(
            72px,
            11vw,
            155px
        );

    line-height: 0.80;

    font-weight: 900;

    letter-spacing: -7px;

    text-transform: uppercase;

    text-shadow:
        0 10px 45px rgba(0, 0, 0, 0.40);
}


.title-white {
    color: #f8f9ff;
}


.title-cyan {
    color: #0057d9;

    font-style: italic;

    letter-spacing: -9px;

    text-shadow:
        0 0 12px rgba(0, 87, 217, 0.45),
        0 0 35px rgba(0, 59, 154, 0.30);
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.hero-subtitle {
    margin-top: 28px;

    color: #77839d;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 7px;
}


.hero-subtitle span {
    margin:
        0 8px;

    color:
        var(--red);
}


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

.hero-actions {
    width:
        min(800px, 100%);

    display:
        flex;

    justify-content:
        center;

    gap:
        35px;

    margin:
        65px auto 0;
}


.btn {
    min-height: 70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    padding:
        0 40px;

    border-radius:
        38px;

    font-size:
        15px;

    font-weight:
        900;

    letter-spacing:
        4px;

    transition:
        0.3s ease;
}


/* BOTÓN INSCRIBIRME */


.btn-primary {
    min-width:
        420px;

    background:
        linear-gradient(
            105deg,
            #003b9a,
            #0057d9,
            #003b9a
        );

    border:
        1px solid
        rgba(10, 108, 255, 0.55);

    box-shadow:
        0 15px 45px
        rgba(0, 59, 154, 0.30);
}


.btn-primary:hover {
    transform:
        translateY(-4px);

    background:
        linear-gradient(
            105deg,
            #0057d9,
            #0a6cff,
            #0057d9
        );

    box-shadow:
        0 20px 55px
        rgba(0, 87, 217, 0.42);
}




.btn-primary:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 20px 55px
        rgba(123, 44, 255, 0.42);
}


/* BOTÓN PDF */


.btn-secondary {
    min-width:
        420px;

    border:
        2px solid
        rgba(0, 87, 217, 0.55);

    background:
        rgba(3, 10, 24, 0.60);

    color:
        #0a6cff;
}


.btn-secondary:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(10, 108, 255, 0.90);

    box-shadow:
        0 20px 50px
        rgba(0, 87, 217, 0.20);
}




.download-icon {
    margin-left:
        auto;

    font-size:
        24px;
}


/* =========================================================
   CUENTA REGRESIVA
========================================================= */

.countdown-wrap {
    margin:
        55px auto 0;
}


.countdown-title {
    margin-bottom:
        15px;

    color:
        #63718d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        5px;
}


.countdown {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        14px;
}


.time-box {
    min-width:
        85px;
}


.time-box strong {
    display:
        block;

    font-size:
        38px;

    font-weight:
        800;

    line-height:
        1;

    color:
        #e9ecf8;
}


.time-box span {
    display:
        block;

    margin-top:
        7px;

    color:
        #687692;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        3px;
}


.time-separator {
    color:
        #0057d9;

    font-size:
        28px;

    opacity:
        0.75;

    margin-bottom:
        18px;

    text-shadow:
        0 0 10px
        rgba(0, 87, 217, 0.45);
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-hint {
    position:
        absolute;

    bottom:
        25px;

    left:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

    transform:
        translateX(-50%);

    color:
        #4f5d77;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        3px;
}


.scroll-hint i {
    width:
        1px;

    height:
        30px;

    background:
        linear-gradient(
            var(--cyan),
            transparent
        );
}


/* =========================================================
   SECCIÓN INTRO
========================================================= */

.demo-section {
    min-height:
        48vh;

    display:
        grid;

    place-items:
        center;

    align-content:
        center;

    text-align:
        center;

    padding:
        100px 24px;

    background:
        linear-gradient(
            rgba(6, 9, 16, 0.84),
            rgba(6, 9, 16, 0.95)
        ),
        radial-gradient(
            circle at 50% 0,
            rgba(123, 44, 255, 0.13),
            transparent 55%
        );

    border-top:
        1px solid
        rgba(119, 143, 198, 0.10);
}


.section-kicker {
    color:
        var(--cyan);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        7px;
}


.demo-section h2 {
    margin:
        17px 0;

    font-size:
        clamp(
            38px,
            6vw,
            82px
        );

    line-height:
        0.95;

    font-weight:
        900;

    letter-spacing:
        -3px;
}


.demo-section h2 em {
    color:
        var(--cyan);

    font-style:
        normal;
}


.demo-section p {
    max-width:
        650px;

    color:
        #74819b;

    font-size:
        15px;

    line-height:
        1.8;
}


/* =========================================================
   TARJETAS
========================================================= */

.info-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

    width:
        min(
            1200px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        0 0 110px;
}


.info-card {
    position:
        relative;

    min-height:
        290px;

    padding:
        38px;

    overflow:
        hidden;

   border:
    1px solid
    rgba(0, 87, 217, 0.22);

    border-radius:
        22px;

   background:
    linear-gradient(
        145deg,
        rgba(7, 20, 43, 0.88),
        rgba(2, 7, 17, 0.92)
    );
}


.info-card--featured {
    border-color:
        rgba(0, 87, 217, 0.55);

    box-shadow:
        inset 0 0 55px
        rgba(0, 87, 217, 0.06),

        0 0 30px
        rgba(0, 59, 154, 0.08);
}


.card-number {
    color:
        #3d4960;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        3px;
}


.info-card h3 {
    margin-top:
        45px;

    font-size:
        27px;

    letter-spacing:
        3px;
}


.info-card p {
    margin-top:
        13px;

    color:
        #71809a;

    font-size:
        13px;

    line-height:
        1.7;
}


.info-card a {
    position:
        absolute;

    left:
        38px;

    bottom:
        32px;

    color:
        var(--cyan);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        3px;
}


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

footer {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        32px 6%;

    border-top:
        1px solid
        rgba(113, 137, 194, 0.12);

    color:
        #4e5a70;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.footer-brand {
    color:
        #dce2f1;

    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        3px;
}


.footer-brand span {
    color:
        var(--cyan);
}


/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 1050px) {

    .nav-shell {
        grid-template-columns:
            210px
            1fr
            55px;
    }


    .nav-link {
        padding-left:
            10px;

        padding-right:
            10px;

        letter-spacing:
            2px;
    }


    .nav-link::after {
        left:
            10px;

        right:
            10px;
    }


    .brand-name b {
        font-size:
            16px;
    }


    .hero h1 {
        font-size:
            clamp(
                68px,
                12vw,
                120px
            );
    }


    .btn-primary,
    .btn-secondary {
        min-width:
            330px;
    }
}


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

@media (max-width: 820px) {

    .event-bar {
        height:
            34px;

        gap:
            7px;

        padding:
            0 10px;

        font-size:
            8px;

        letter-spacing:
            2px;
    }


    .nav-shell {
        width:
            calc(100% - 20px);

        height:
            65px;

        grid-template-columns:
            1fr 48px;

        padding-right:
            9px;

        border-radius:
            0 0 20px 20px;
    }


    .brand-mark {
        width:
            40px;

        height:
            40px;
    }


    .brand-name small {
        letter-spacing:
            2px;
    }


    /* MENÚ */

    .main-nav {
        position:
            absolute;

        top:
            72px;

        left:
            0;

        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            10px;

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        border:
            1px solid
            rgba(100, 126, 190, 0.22);

        border-radius:
            18px;

        background:
            rgba(7, 10, 18, 0.96);

        backdrop-filter:
            blur(18px);

        transition:
            0.25s ease;
    }


    .main-nav.open {
        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);
    }


    .nav-link {
        padding:
            17px;

        border-radius:
            10px;
    }


    .nav-link::after {
        display:
            none;
    }


    .nav-link:hover,
    .nav-link.active {
        background:
            rgba(22, 213, 244, 0.07);
    }


    .profile-button {
        display:
            none;
    }


    /* BOTÓN HAMBURGUESA */

    .menu-toggle {
        width:
            44px;

        height:
            44px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid
            rgba(105, 127, 187, 0.30);

        border-radius:
            11px;

        background:
            transparent;

        cursor:
            pointer;
    }


    .menu-toggle span {
        width:
            19px;

        height:
            2px;

        margin:
            0 auto;

        background:
            #94a2bd;

        transition:
            0.2s ease;
    }


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


    .menu-toggle.active span:nth-child(2) {
        opacity:
            0;
    }


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


    /* HERO */

    .hero {
        padding-top:
            140px;
    }


    .hero h1 {
        font-size:
            clamp(
                55px,
                15vw,
                105px
            );

        letter-spacing:
            -4px;
    }


    .title-cyan {
        letter-spacing:
            -5px;
    }


    .hero-subtitle {
        font-size:
            9px;

        letter-spacing:
            3px;
    }


    /* BOTONES */

    .hero-actions {
        flex-direction:
            column;

        align-items:
            center;

        gap:
            13px;

        margin-top:
            40px;
    }


    .btn-primary,
    .btn-secondary {
        width:
            min(
                430px,
                100%
            );

        min-width:
            0;

        min-height:
            62px;

        font-size:
            11px;

        letter-spacing:
            2.5px;
    }


    /* COUNTDOWN */

    .countdown {
        gap:
            4px;
    }


    .time-box {
        min-width:
            61px;
    }


    .time-box strong {
        font-size:
            29px;
    }


    .time-separator {
        font-size:
            20px;
    }


    /* CARDS */

    .info-grid {
        grid-template-columns:
            1fr;
    }


    /* FOOTER */

    footer {
        flex-direction:
            column;

        gap:
            12px;

        text-align:
            center;
    }
.brand-logo {
    width: 52px;
    height: 52px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 0 10px
            rgba(0, 87, 217, 0.30)
        );

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


.brand:hover .brand-logo {
    transform:
        scale(1.06);

    filter:
        drop-shadow(
            0 0 18px
            rgba(10, 108, 255, 0.55)
        );
}
   
}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    .brand-name b {
        font-size:
            14px;
    }


    .brand-name small {
        font-size:
            7px;
    }


    .hero {
        padding-left:
            15px;

        padding-right:
            15px;
    }


    .eyebrow {
        font-size:
            8px;

        letter-spacing:
            4px;
    }


    .hero h1 {
        font-size:
            16vw;
    }


    .hero-subtitle {
        letter-spacing:
            2px;
    }


    .time-box {
        min-width:
            54px;
    }


    .time-box strong {
        font-size:
            24px;
    }


    .time-box span {
        font-size:
            6px;

        letter-spacing:
            2px;
    }


    .info-grid {
        width:
            calc(100% - 30px);
    }


    .info-card {
        padding:
            30px;
    }


    .info-card a {
        left:
            30px;
    }
}

/* =========================================================
   ANIMACIONES DE ENTRADA
========================================================= */

.info-card,
.demo-section {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.info-card.visible,
.demo-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   LOGO REAL MOVE
========================================================= */

.brand-logo {
    width: 52px;
    height: 52px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 0 10px
            rgba(22, 213, 244, 0.18)
        );

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


.brand:hover .brand-logo {
    transform:
        scale(1.06);

    filter:
        drop-shadow(
            0 0 15px
            rgba(22, 213, 244, 0.40)
        );
}

/* =========================================================
   FORMULARIO DE INSCRIPCIÓN
========================================================= */

.registration-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;

    overflow-y: auto;
}


.registration-modal.active {
    display: flex;
}


/* =========================================================
   FONDO
========================================================= */

.registration-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(1, 4, 10, 0.88);

    backdrop-filter:
        blur(12px);
}


/* =========================================================
   CONTENEDOR
========================================================= */

.registration-container {
    position: relative;

    width:
        min(900px, 100%);

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    padding:
        45px;

    border:
        1px solid
        rgba(0, 87, 217, 0.45);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(6, 18, 40, 0.98),
            rgba(2, 7, 17, 0.99)
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.75),

        inset 0 0 80px
        rgba(0, 59, 154, 0.06);

    z-index: 2;

    animation:
        registrationOpen
        0.35s ease;
}


@keyframes registrationOpen {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(0.97);
    }

    to {
        opacity: 1;

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

}


/* =========================================================
   BOTÓN CERRAR
========================================================= */

.registration-close {
    position: absolute;

    top: 18px;
    right: 20px;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(0, 87, 217, 0.35);

    border-radius: 50%;

    background:
        rgba(0, 20, 48, 0.65);

    color:
        #8da0bd;

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        0.25s ease;
}


.registration-close:hover {
    color:
        #ffffff;

    border-color:
        #0057d9;

    background:
        rgba(0, 59, 154, 0.35);

    transform:
        rotate(90deg);
}


/* =========================================================
   ENCABEZADO
========================================================= */

.registration-header {
    text-align:
        center;

    margin-bottom:
        45px;
}


.registration-kicker {
    display:
        inline-block;

    color:
        #0a6cff;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        5px;
}


.registration-header h2 {
    margin-top:
        12px;

    color:
        #f4f6fa;

    font-size:
        clamp(40px, 7vw, 68px);

    line-height:
        0.95;

    font-weight:
        900;

    letter-spacing:
        -3px;
}


.registration-header p {
    max-width:
        520px;

    margin:
        18px auto 0;

    color:
        #66738a;

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   SECCIONES
========================================================= */

.form-section {
    padding:
        30px 0;

    border-top:
        1px solid
        rgba(0, 87, 217, 0.14);
}


.form-section-title {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        25px;
}


.form-section-title span {
    color:
        #0057d9;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.form-section-title h3 {
    color:
        #e8edf7;

    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        3px;
}


/* =========================================================
   GRID
========================================================= */

.form-grid {
    display:
        grid;

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

    gap:
        18px;
}


.form-full {
    grid-column:
        1 / -1;
}


/* =========================================================
   CAMPOS
========================================================= */

.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.form-group label {
    color:
        #8997af;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.form-group input,
.form-group select {
    width:
        100%;

    height:
        52px;

    padding:
        0 16px;

    outline:
        none;

    border:
        1px solid
        rgba(92, 118, 166, 0.25);

    border-radius:
        10px;

    background:
        rgba(1, 7, 17, 0.72);

    color:
        #edf2fa;

    font-family:
        inherit;

    font-size:
        13px;

    transition:
        0.25s ease;
}


.form-group input::placeholder {
    color:
        #46546c;
}


.form-group input:focus,
.form-group select:focus {
    border-color:
        #0057d9;

    box-shadow:
        0 0 0 3px
        rgba(0, 87, 217, 0.10),

        0 0 20px
        rgba(0, 59, 154, 0.10);
}


.form-group select {
    cursor:
        pointer;
}


.form-group select option {
    background:
        #050b16;

    color:
        #ffffff;
}


/* =========================================================
   PAGO
========================================================= */

.payment-section {
    display:
        grid;

    grid-template-columns:
        40px 1fr;

    gap:
        15px;

    margin:
        20px 0 0;

    padding:
        35px;

    border:
        1px solid
        rgba(0, 87, 217, 0.28);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 59, 154, 0.11),
            transparent 65%
        ),

        rgba(1, 8, 20, 0.65);
}


.payment-number {
    color:
        #0057d9;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.payment-content {
    text-align:
        center;
}


.payment-content h3 {
    margin-top:
        10px;

    color:
        #f4f6fa;

    font-size:
        25px;

    font-weight:
        900;

    letter-spacing:
        2px;
}


.payment-content > p {
    max-width:
        500px;

    margin:
        12px auto 25px;

    color:
        #66738a;

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   QR
========================================================= */

.payment-qr {
    width:
        210px;

    height:
        210px;

    margin:
        0 auto;

    padding:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        rgba(0, 87, 217, 0.60);

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 0 35px
        rgba(0, 87, 217, 0.18);
}


.payment-qr img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.payment-note {
    margin-top:
        20px !important;

    color:
        #52637c !important;

    font-size:
        10px !important;

    letter-spacing:
        1px;
}


/* =========================================================
   CHECKBOX
========================================================= */

.checkbox-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}


.checkbox-label {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        #77859d;

    font-size:
        11px;

    line-height:
        1.6;

    cursor:
        pointer;
}


.checkbox-label input {
    position:
        absolute;

    opacity:
        0;
}


.custom-checkbox {
    flex:
        0 0 18px;

    width:
        18px;

    height:
        18px;

    margin-top:
        1px;

    border:
        1px solid
        #43536d;

    border-radius:
        4px;

    transition:
        0.2s ease;
}


.checkbox-label input:checked + .custom-checkbox {
    border-color:
        #0057d9;

    background:
        #0057d9;

    box-shadow:
        0 0 12px
        rgba(0, 87, 217, 0.35);
}


.checkbox-label input:checked + .custom-checkbox::after {
    content:
        "✓";

    display:
        block;

    color:
        white;

    text-align:
        center;

    font-size:
        12px;

    line-height:
        17px;
}


/* =========================================================
   BOTÓN ENVIAR
========================================================= */

.registration-submit {
    padding-top:
        35px;

    text-align:
        center;
}


.registration-button {
    width:
        100%;

    height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        25px;

    border:
        1px solid
        #0057d9;

    border-radius:
        12px;

    background:
        linear-gradient(
            105deg,
            #003b9a,
            #0057d9,
            #003b9a
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        4px;

    cursor:
        pointer;

    box-shadow:
        0 15px 40px
        rgba(0, 59, 154, 0.25);

    transition:
        0.3s ease;
}


.registration-button:hover {
    transform:
        translateY(-3px);

    background:
        linear-gradient(
            105deg,
            #0057d9,
            #0a6cff,
            #0057d9
        );

    box-shadow:
        0 20px 50px
        rgba(0, 87, 217, 0.35);
}


.registration-button:disabled {
    opacity:
        0.55;

    cursor:
        wait;

    transform:
        none;
}


.submit-arrow {
    font-size:
        22px;

    transition:
        transform 0.25s ease;
}


.registration-button:hover .submit-arrow {
    transform:
        translateX(6px);
}


.required-note {
    margin-top:
        15px;

    color:
        #46546c;

    font-size:
        9px;

    letter-spacing:
        1px;
}


/* =========================================================
   MENSAJE
========================================================= */

.registration-message {
    display:
        none;

    margin-top:
        20px;

    padding:
        16px;

    border:
        1px solid
        rgba(0, 87, 217, 0.30);

    border-radius:
        10px;

    color:
        #91b9ff;

    background:
        rgba(0, 59, 154, 0.08);

    text-align:
        center;

    font-size:
        12px;

    line-height:
        1.6;
}


.registration-message.active {
    display:
        block;
}


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

@media (max-width: 700px) {

    .registration-modal {
        padding:
            10px;
    }


    .registration-container {
        max-height:
            calc(100vh - 20px);

        padding:
            30px 20px;
    }


    .registration-header {
        padding:
            0 20px;

        margin-bottom:
            25px;
    }


    .registration-header h2 {
        font-size:
            42px;
    }


    .form-grid {
        grid-template-columns:
            1fr;
    }


    .form-full {
        grid-column:
            auto;
    }


    .payment-section {
        grid-template-columns:
            1fr;

        padding:
            25px 15px;

        text-align:
            center;
    }


    .payment-number {
        display:
            none;
    }


    .payment-qr {
        width:
            190px;

        height:
            190px;
    }


    .registration-button {
        font-size:
            10px;

        letter-spacing:
            2px;
    }

}

/* =========================================================
   PÁGINA DE INSCRIPCIÓN
========================================================= */

.registration-page {
    min-height: 100vh;

    padding:
        145px 24px 80px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(0, 59, 154, 0.16),
            transparent 40%
        );
}


.registration-page .registration-container {
    width:
        min(900px, 100%);

    max-height:
        none;

    overflow:
        visible;

    margin:
        30px auto 0;

    animation:
        registrationOpen
        0.45s ease;
}


/* TITULOS DE SECCIÓN */

.registration-page .form-section-title h2 {
    color: #e8edf7;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 3px;
}


/* MOBILE */

@media (max-width: 700px) {

    .registration-page {
        padding:
            120px 10px 50px;
    }

    .registration-page .registration-container {
        margin-top: 10px;

        padding:
            30px 20px;
    }

}

/* ==========================================
   QUITAR EFECTO NEÓN DEL TÍTULO PRINCIPAL
========================================== */

.hero h1,
.hero h1 span,
.title-white,
.title-cyan {
    text-shadow: none !important;
    filter: none !important;
}

/* =========================================================
   EVENTOS PASADOS
   NEGATIVO FOTOGRÁFICO REAL
========================================================= */

.past-events {
    position: absolute;

    top: 37%;
    transform: translateY(-50%);

    width: 175px;

    z-index: 3;

    text-align: center;

    pointer-events: none;
}

/* POSICIÓN DESKTOP */

.past-events--left {
    left: 2.2%;
}

.past-events--right {
    right: 2.2%;
}

/* =========================================================
   TÍTULO EVENTOS PASADOS
========================================================= */

.past-events-title {
    margin-bottom: 10px;

    color: rgba(255,255,255,0.58);

    font-size: 8px;
    font-weight: 800;

    line-height: 1.5;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.past-events-title span {
    color: #0057d9;

    font-size: 8px;

    letter-spacing: 4px;
}

/* =========================================================
   NEGATIVO
========================================================= */

.film-strip {
    position: relative;

    width: 165px;
    height: 405px;

    margin: 0 auto;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #050609 0%,
            #11151c 8%,
            #11151c 92%,
            #050609 100%
        );

    border-left: 13px solid #07090d;
    border-right: 13px solid #07090d;

    box-shadow:
        0 20px 45px rgba(0,0,0,0.65),
        inset 0 0 25px rgba(0,0,0,0.9);
}

/* =========================================================
   PERFORACIONES DEL NEGATIVO
========================================================= */

.film-strip::before,
.film-strip::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 13px;

    z-index: 30;

    background:
        repeating-linear-gradient(
            to bottom,
            #020307 0px,
            #020307 8px,
            transparent 8px,
            transparent 18px
        );

    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.05);
}

.film-strip::before {
    left: -13px;
}

.film-strip::after {
    right: -13px;
}

/* =========================================================
   PISTA DEL ROLLO
========================================================= */

.film-track {
    position: relative;

    width: 100%;

    animation:
        filmRollDesktop 16s ease-in-out infinite;
}

/* =========================================================
   FOTOGRAMA
========================================================= */

.film-photo {
    position: relative;

    width: 100%;
    height: 135px;

    padding: 6px 5px;

    background:
        linear-gradient(
            180deg,
            #181b22,
            #0b0e14
        );

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

    box-sizing: border-box;
}

/* =========================================================
   FOTO HORIZONTAL
========================================================= */

.film-photo img {
    display: block;

    width: 100%;
    height: 123px;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(0.78)
        contrast(1.10)
        brightness(0.88);

    opacity: 0.94;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

/* =========================================================
   MARCO DEL FOTOGRAMA
========================================================= */

.film-photo::after {
    content: "";

    position: absolute;

    inset: 6px 5px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    pointer-events: none;
}

/* =========================================================
   NÚMERO DEL NEGATIVO
========================================================= */

.film-photo::before {
    position: absolute;

    right: 9px;
    bottom: 9px;

    z-index: 10;

    color:
        rgba(255,255,255,0.48);

    font-family:
        monospace;

    font-size: 7px;

    letter-spacing: 1px;
}

.film-photo:nth-child(1)::before {
    content: "01";
}

.film-photo:nth-child(2)::before {
    content: "02";
}

.film-photo:nth-child(3)::before {
    content: "03";
}

.film-photo:nth-child(4)::before {
    content: "04";
}

/* =========================================================
   ROLLO IZQUIERDO
========================================================= */

.past-events--left .film-track {
    animation:
        filmRollUp 16s ease-in-out infinite;
}

@keyframes filmRollUp {

    0%,
    10% {
        transform: translateY(0);
    }

    16%,
    26% {
        transform: translateY(-135px);
    }

    32%,
    42% {
        transform: translateY(-270px);
    }

    48%,
    58% {
        transform: translateY(-405px);
    }

    64%,
    100% {
        transform: translateY(0);
    }
}

/* =========================================================
   ROLLO DERECHO
========================================================= */

.past-events--right .film-track {
    animation:
        filmRollDown 16s ease-in-out infinite;

    animation-delay:
        -5s;
}

@keyframes filmRollDown {

    0%,
    10% {
        transform: translateY(-405px);
    }

    16%,
    26% {
        transform: translateY(-270px);
    }

    32%,
    42% {
        transform: translateY(-135px);
    }

    48%,
    58% {
        transform: translateY(0);
    }

    64%,
    100% {
        transform: translateY(-405px);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .past-events {
        width: 145px;

        top: 31%;
    }

    .film-strip {
        width: 125px;
        height: 235px;

        border-left-width: 10px;
        border-right-width: 10px;
    }

    .film-strip::before,
    .film-strip::after {
        width: 10px;
    }

    .film-strip::before {
        left: -10px;
    }

    .film-strip::after {
        right: -10px;
    }

    .film-photo {
        height: 118px;
    }

    .film-photo img {
        height: 106px;
    }

    .past-events--left {
        left: 1%;
    }

    .past-events--right {
        right: 1%;
    }
}

/* =========================================================
   MOBILE
   ROLLOS ARRIBA DEL TÍTULO
========================================================= */

@media (max-width: 820px) {

    .hero {

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        padding-top: 118px;

        padding-left: 10px;
        padding-right: 10px;
    }

    /* =========================================
       CONTENEDORES DE EVENTOS
    ========================================= */

   

    .past-events--left {

        left: 2%;
        right: auto;
    }

  /* =========================================================
   MOBILE
   UNA SOLA CINTA DE EVENTOS
========================================================= */

@media (max-width: 820px) {

    .hero {
        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        padding-top: 115px;

        padding-left: 10px;
        padding-right: 10px;
    }

    /* =========================================
       EVENTOS PASADOS
    ========================================= */

    .past-events {
        position: absolute;

        top: 92px;

        left: 0;

        width: 100%;

        height: 125px;

        transform: none;

        margin: 0;

        z-index: 5;

        text-align: left;

        overflow: hidden;
    }

    /* SOLO MOSTRAMOS EL IZQUIERDO */

    .past-events--left {
        display: block;
    }

    .past-events--right {
        display: none;
    }

    /* =========================================
       TÍTULO
    ========================================= */

    .past-events-title {

        position: relative;

        z-index: 10;

        margin:

            0 0 6px 18px;

        font-size: 7px;

        letter-spacing: 2px;
    }

    .past-events-title span {

        font-size: 7px;

        letter-spacing: 3px;
    }

    /* =========================================
       CINTA HORIZONTAL
    ========================================= */

    .past-events--left .film-strip {

        width: 100%;

        max-width: none;

        height: 92px;

        margin: 0;

        border-left: 0;

        border-right: 0;

        border-top: 8px solid #07090d;

        border-bottom: 8px solid #07090d;

        box-shadow:
            0 15px 35px rgba(0,0,0,0.65),
            inset 0 0 25px rgba(0,0,0,0.85);
    }

    /* =========================================
       PERFORACIONES ARRIBA Y ABAJO
    ========================================= */

    .past-events--left .film-strip::before,
    .past-events--left .film-strip::after {

        left: 0;
        right: 0;

        top: auto;
        bottom: auto;

        width: 100%;
        height: 8px;

        background:
            repeating-linear-gradient(
                to right,
                #020307 0px,
                #020307 9px,
                transparent 9px,
                transparent 20px
            );
    }

    .past-events--left .film-strip::before {

        top: -8px;
    }

    .past-events--left .film-strip::after {

        bottom: -8px;
    }

    /* =========================================
       TRACK HORIZONTAL
    ========================================= */

    .past-events--left .film-track {

        display: flex;

        width: max-content;

        padding: 0;

        animation:
            filmSlideMobile
            18s linear infinite;
    }

    /* =========================================
       FOTOGRAMAS
    ========================================= */

    .past-events--left .film-photo {

        flex: 0 0 145px;

        width: 145px;

        height: 76px;

        padding: 4px;

        border-right:
            1px solid
            rgba(255,255,255,0.10);

        border-bottom: 0;
    }

    .past-events--left .film-photo img {

        width: 100%;

        height: 68px;

        object-fit: cover;

        filter:
            saturate(0.80)
            contrast(1.08)
            brightness(0.90);
    }

    .past-events--left .film-photo::after {

        inset: 4px;
    }

    /* =========================================
       TÍTULO CENTRAL
    ========================================= */

    .hero-content {

        position: relative;

        z-index: 10;

        width: 100%;

        margin-top: 125px;
    }

    .hero h1 {

        position: relative;

        z-index: 20;
    }
}
   @keyframes filmSlideMobile {

    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(-720px);
    }
}

    /* =========================================
       TÍTULO
    ========================================= */

    .past-events-title {

        margin-bottom: 6px;

        font-size: 6px;

        letter-spacing: 2px;
    }

    .past-events-title span {

        font-size: 6px;

        letter-spacing: 2.5px;
    }

    /* =========================================
       ROLLO HORIZONTAL
    ========================================= */

    .film-strip {

        width: 100%;

        max-width: 145px;

        height: 105px;

        border-left-width: 8px;
        border-right-width: 8px;
    }

    /* PERFORACIONES */

    .film-strip::before,
    .film-strip::after {

        width: 8px;
    }

    .film-strip::before {
        left: -8px;
    }

    .film-strip::after {
        right: -8px;
    }

    /* =========================================
       FOTOGRAMAS HORIZONTALES
    ========================================= */

    .film-photo {

        width: 100%;

        height: 105px;

        padding: 5px;
    }

    .film-photo img {

        width: 100%;

        height: 95px;

        object-fit: cover;
    }

    .film-photo::after {

        inset: 5px;
    }

    /* =========================================
       ANIMACIÓN MOBILE
    ========================================= */

    .past-events--left .film-track {

        animation:
            filmRollMobileLeft
            15s ease-in-out infinite;
    }

    .past-events--right .film-track {

        animation:
            filmRollMobileRight
            15s ease-in-out infinite;

        animation-delay:
            -4s;
    }

    /* =========================================
       TÍTULO CENTRAL
    ========================================= */

    .hero-content {

        position: relative;

        z-index: 10;

        width: 100%;

        margin-top: 145px;
    }
}

/* =========================================================
   ANIMACIÓN MOBILE IZQUIERDA
========================================================= */

@keyframes filmRollMobileLeft {

    0%,
    12% {
        transform: translateY(0);
    }

    18%,
    30% {
        transform: translateY(-105px);
    }

    36%,
    48% {
        transform: translateY(-210px);
    }

    54%,
    66% {
        transform: translateY(-315px);
    }

    72%,
    100% {
        transform: translateY(0);
    }
}

/* =========================================================
   ANIMACIÓN MOBILE DERECHA
========================================================= */

@keyframes filmRollMobileRight {

    0%,
    12% {
        transform: translateY(-315px);
    }

    18%,
    30% {
        transform: translateY(-210px);
    }

    36%,
    48% {
        transform: translateY(-105px);
    }

    54%,
    66% {
        transform: translateY(0);
    }

    72%,
    100% {
        transform: translateY(-315px);
    }
}

/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 430px) {

    .hero {
        padding-top: 112px;
    }

    .past-events {

        top: 87px;

        width: 47%;
    }

    .film-strip {

        max-width: 125px;

        height: 92px;
    }

    .film-photo {

        height: 92px;
    }

    .film-photo img {

        height: 82px;
    }

    .hero-content {

        margin-top: 135px;
    }
}

@media (max-width: 430px) {

    .past-events {
        top: 88px;

        height: 118px;
    }

    .past-events-title {
        margin-left: 15px;
    }

    .past-events--left .film-strip {
        height: 86px;
    }

    .past-events--left .film-photo {
        flex-basis: 130px;

        width: 130px;

        height: 70px;
    }

    .past-events--left .film-photo img {
        height: 62px;
    }

    .hero-content {
        margin-top: 118px;
    }
}

/* =========================================================
   MOVE HYBRID GAMES
   CORRECCIÓN FINAL — ROLLOS FOTOGRÁFICOS
   ========================================================= */


/* =========================================================
   DESKTOP
   4 FOTOS POR LADO
   3 FOTOS VISIBLES
   SIN ESPACIOS VACÍOS
   ========================================================= */

@media (min-width: 821px) {

    .past-events {
        position: absolute;
        top: 30%;
        width: 175px;
        transform: translateY(-50%);
        z-index: 3;
        text-align: center;
        pointer-events: none;
    }


    .past-events--left {
        left: 2.2%;
        right: auto;
    }


    .past-events--right {
        right: 2.2%;
        left: auto;
    }


    /* TÍTULO */

    .past-events-title {
        margin-bottom: 10px;
        color: rgba(255,255,255,0.58);
        font-size: 8px;
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: 3px;
        text-transform: uppercase;
    }


    .past-events-title span {
        color: #0057d9;
        font-size: 8px;
        letter-spacing: 4px;
    }


    /* =====================================================
       ROLLO
       3 FOTOS VISIBLES
       ===================================================== */

    .film-strip {
        position: relative;

        width: 165px;

        /*
           3 fotos x 135px
        */
        height: 405px;

        margin: 0 auto;

        overflow: hidden;

        background:
            linear-gradient(
                90deg,
                #050609 0%,
                #11151c 8%,
                #11151c 92%,
                #050609 100%
            );

        border-left: 13px solid #07090d;
        border-right: 13px solid #07090d;

        box-shadow:
            0 20px 45px rgba(0,0,0,0.65),
            inset 0 0 25px rgba(0,0,0,0.9);
    }


    /* =====================================================
       PERFORACIONES DEL NEGATIVO
       ===================================================== */

    .film-strip::before,
    .film-strip::after {

        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        width: 13px;

        z-index: 30;

        background:
            repeating-linear-gradient(
                to bottom,
                #020307 0px,
                #020307 8px,
                transparent 8px,
                transparent 18px
            );

        box-shadow:
            inset 0 0 4px rgba(255,255,255,0.05);
    }


    .film-strip::before {
        left: -13px;
    }


    .film-strip::after {
        right: -13px;
    }


    /* =====================================================
       TRACK
       ===================================================== */

    .film-track {
        position: relative;
        width: 100%;
        animation: none;
    }


    /* =====================================================
       FOTOGRAMAS
       ===================================================== */

    .film-photo {

        position: relative;

        width: 100%;
        height: 135px;

        padding: 6px 5px;

        background:
            linear-gradient(
                180deg,
                #181b22,
                #0b0e14
            );

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

        box-sizing: border-box;
    }


    .film-photo img {

        display: block;

        width: 100%;
        height: 123px;

        object-fit: cover;
        object-position: center;

        filter:
            saturate(0.78)
            contrast(1.10)
            brightness(0.88);

        opacity: 0.94;
    }


    /* MARCO */

    .film-photo::after {

        content: "";

        position: absolute;

        inset: 6px 5px;

        border:
            1px solid
            rgba(255,255,255,0.10);

        pointer-events: none;
    }


    /* NÚMEROS */

    .film-photo::before {

        position: absolute;

        right: 9px;
        bottom: 9px;

        z-index: 10;

        color:
            rgba(255,255,255,0.48);

        font-family: monospace;

        font-size: 7px;

        letter-spacing: 1px;
    }


    .film-photo:nth-child(1)::before {
        content: "01";
    }

    .film-photo:nth-child(2)::before {
        content: "02";
    }

    .film-photo:nth-child(3)::before {
        content: "03";
    }

    .film-photo:nth-child(4)::before {
        content: "04";
    }


    /* =====================================================
       ROLLO IZQUIERDO
       ARRIBA → ABAJO
       ===================================================== */

    .past-events--left .film-track {

        animation:
            filmRollLeft
            12s
            ease-in-out
            infinite;
    }


    @keyframes filmRollLeft {

        0%,
        18% {
            transform: translateY(0);
        }

        25%,
        43% {
            transform: translateY(-135px);
        }

        50%,
        68% {
            transform: translateY(-270px);
        }

        /*
           Volvemos directamente al inicio.
           NUNCA llegamos a -405px.
        */

        75%,
        100% {
            transform: translateY(0);
        }
    }


    /* =====================================================
       ROLLO DERECHO
       SENTIDO CONTRARIO
       ===================================================== */

    .past-events--right .film-track {

        animation:
            filmRollRight
            12s
            ease-in-out
            infinite;
    }


    @keyframes filmRollRight {

        0%,
        18% {
            transform: translateY(-270px);
        }

        25%,
        43% {
            transform: translateY(-135px);
        }

        50%,
        68% {
            transform: translateY(0);
        }

        75%,
        100% {
            transform: translateY(-270px);
        }
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 821px) and (max-width: 1100px) {

    .past-events {
        width: 145px;
    }

    .film-strip {

        width: 125px;

        /*
           3 fotos visibles
        */

        height: 354px;

        border-left-width: 10px;
        border-right-width: 10px;
    }


    .film-strip::before,
    .film-strip::after {
        width: 10px;
    }


    .film-strip::before {
        left: -10px;
    }


    .film-strip::after {
        right: -10px;
    }


    .film-photo {
        height: 118px;
    }


    .film-photo img {
        height: 106px;
    }


    .past-events--left {
        left: 1%;
    }


    .past-events--right {
        right: 1%;
    }


    .past-events--left .film-track {

        animation:
            filmRollLeftTablet
            12s
            ease-in-out
            infinite;
    }


    @keyframes filmRollLeftTablet {

        0%,
        18% {
            transform: translateY(0);
        }

        25%,
        43% {
            transform: translateY(-118px);
        }

        50%,
        68% {
            transform: translateY(-236px);
        }

        75%,
        100% {
            transform: translateY(0);
        }
    }


    .past-events--right .film-track {

        animation:
            filmRollRightTablet
            12s
            ease-in-out
            infinite;
    }


    @keyframes filmRollRightTablet {

        0%,
        18% {
            transform: translateY(-236px);
        }

        25%,
        43% {
            transform: translateY(-118px);
        }

        50%,
        68% {
            transform: translateY(0);
        }

        75%,
        100% {
            transform: translateY(-236px);
        }
    }
}


/* =========================================================
   CELULAR
   SOLO IZQUIERDO
   SIN MOVIMIENTO
   EXTREMO A EXTREMO
   ========================================================= */

@media (max-width: 820px) {

    /*
       HERO
    */

    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;

        padding-top: 115px;
        padding-left: 0;
        padding-right: 0;
    }


    /*
       CONTENEDOR
    */

    .past-events {

        position: absolute;

        top: 92px;
        left: 0;

        width: 100%;
        height: 105px;

        margin: 0;

        transform: none;

        z-index: 5;

        overflow: hidden;

        text-align: left;
    }


    /*
       SOLO IZQUIERDO
    */

    .past-events--left {
        display: block;

        left: 0;
        right: auto;

        width: 100%;
    }


    /*
       EL DERECHO DESAPARECE
    */

    .past-events--right {
        display: none !important;
    }


    /*
       TÍTULO
    */

    .past-events-title {

        position: absolute;

        top: -1px;
        left: 15px;

        z-index: 50;

        margin: 0;

        color: rgba(255,255,255,0.65);

        font-size: 7px;

        line-height: 1.4;

        letter-spacing: 2px;
    }


    .past-events-title span {

        color: #0057d9;

        font-size: 7px;

        letter-spacing: 3px;
    }


    /*
       ROLLO COMPLETO
       DE BORDE A BORDE
    */

    .past-events--left .film-strip {

        position: absolute;

        left: 0;
        top: 14px;

        width: 100vw;

        max-width: none;

        height: 88px;

        margin: 0;

        overflow: hidden;

        border-left: 0;
        border-right: 0;

        border-top: 8px solid #07090d;
        border-bottom: 8px solid #07090d;

        box-shadow:
            0 15px 35px rgba(0,0,0,0.65),
            inset 0 0 25px rgba(0,0,0,0.85);
    }


    /*
       PERFORACIONES ARRIBA
    */

    .past-events--left .film-strip::before,
    .past-events--left .film-strip::after {

        left: 0;
        right: 0;

        width: 100%;

        height: 8px;

        background:
            repeating-linear-gradient(
                to right,
                #020307 0px,
                #020307 9px,
                transparent 9px,
                transparent 20px
            );
    }


    .past-events--left .film-strip::before {

        top: -8px;
        bottom: auto;
    }


    /*
       PERFORACIONES ABAJO
    */

    .past-events--left .film-strip::after {

        top: auto;
        bottom: -8px;
    }


    /*
       TRACK ESTÁTICO
    */

    .past-events--left .film-track {

        display: grid;

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

        width: 100%;
        height: 100%;

        transform: none !important;

        animation: none !important;
    }


    /*
       4 FOTOS
       OCUPANDO TODA LA PANTALLA
    */

    .past-events--left .film-photo {

        width: 100%;
        height: 72px;

        padding: 4px;

        border-right:
            1px solid
            rgba(255,255,255,0.12);

        border-bottom: 0;

        overflow: hidden;
    }


    .past-events--left .film-photo:last-child {
        border-right: none;
    }


    /*
       IMAGEN
    */

    .past-events--left .film-photo img {

        width: 100%;
        height: 64px;

        object-fit: cover;

        filter:
            saturate(0.80)
            contrast(1.08)
            brightness(0.90);

        opacity: 0.94;
    }


    /*
       MARCO
    */

    .past-events--left .film-photo::after {

        inset: 4px;

        border:
            1px solid
            rgba(255,255,255,0.10);
    }


    /*
       NÚMERO
    */

    .past-events--left .film-photo::before {

        right: 7px;
        bottom: 7px;

        font-size: 6px;
    }


    /*
       EL TÍTULO PRINCIPAL BAJA
       PARA NO CHOCAR CON EL ROLLO
    */

    .hero-content {

        position: relative;

        z-index: 10;

        width: 100%;

        margin-top: 115px;
    }
}


/* =========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 430px) {

    .past-events {

        top: 88px;

        height: 105px;
    }


    .past-events--left .film-strip {

        top: 14px;

        width: 100vw;

        height: 86px;
    }


    .past-events--left .film-photo {

        height: 70px;

        padding: 4px;
    }


    .past-events--left .film-photo img {

        height: 62px;
    }


    .hero-content {

        margin-top: 112px;
    }
}

/* ==========================================
   LOGO PRINCIPAL DEL HERO
========================================== */

.hero-logo {
  width: min(760px, 52vw);
  margin: 20px auto 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}