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

:root{

    --azul-fondo:#051426;
    --azul-fondo-secundario:#081c33;
    --azul-card:#0b213a;

    --azul:#008fd5;
    --celeste:#14c8ff;
    --dorado:#f5c451;
    --dorado-claro:#ffe394;

    --blanco:#ffffff;
    --texto:#d7e2ec;
    --texto-suave:#94a8ba;

    --borde:rgba(255,255,255,.10);
    --sombra:0 24px 70px rgba(0,0,0,.35);

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    scroll-padding-top:105px;

}

body{

    min-height:100vh;

    font-family:'Poppins',sans-serif;

    background:var(--azul-fondo);
    color:var(--blanco);

    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

button,
input,
select,
textarea{

    font:inherit;

}

ul{

    list-style:none;

}

.contenedor{

    width:90%;
    max-width:1240px;

    margin:0 auto;

}


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

.header-principal{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(3,14,28,.86);

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

}

.header-contenido{

    width:90%;
    max-width:1240px;

    min-height:96px;

    margin:auto;

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

    gap:35px;

}

.logo-principal{

    display:inline-flex;
    align-items:center;

}

.logo-principal img{

    width:auto;
    height:68px;

}

.menu-principal{

    display:flex;
    align-items:center;

    gap:34px;

}

.menu-principal a{

    position:relative;

    padding:12px 0;

    color:#e9f4fb;

    font-size:.98rem;
    font-weight:600;

    transition:.3s ease;

}

.menu-principal a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:6px;

    width:0;
    height:2px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        var(--celeste),
        var(--dorado)
    );

    transition:.3s ease;

}

.menu-principal a:hover{

    color:var(--celeste);

}

.menu-principal a:hover::after{

    width:100%;

}


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

.boton{

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

    gap:12px;

    min-height:56px;

    padding:15px 30px;

    border:0;
    border-radius:50px;

    color:var(--blanco);

    font-weight:700;
    text-align:center;

    cursor:pointer;

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

}

.boton i{

    transition:transform .3s ease;

}

.boton:hover{

    transform:translateY(-4px);

}

.boton:hover i{

    transform:translateX(4px);

}

.boton-principal{

    background:linear-gradient(
        105deg,
        var(--azul),
        var(--celeste)
    );

    box-shadow:0 18px 45px rgba(0,174,235,.30);

}

.boton-principal:hover{

    box-shadow:0 24px 55px rgba(0,174,235,.42);

}

.boton-evento{

    width:100%;

    margin-top:auto;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.07);

}

.boton-evento:hover{

    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.12);

}


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

.hero{

    position:relative;

    min-height:100vh;

    padding:
        175px
        5%
        115px;

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

    text-align:center;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 15%,
            rgba(32,180,255,.26),
            transparent 32%
        ),

        radial-gradient(
            circle at 18% 55%,
            rgba(0,161,224,.20),
            transparent 36%
        ),

        radial-gradient(
            circle at 82% 58%,
            rgba(246,197,80,.14),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #041021 0%,
            #062846 48%,
            #061425 100%
        );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.22;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 22%,
        #000 75%,
        transparent
    );

}

.hero::after{

    content:"100K";

    position:absolute;

    left:50%;
    bottom:-12%;

    transform:translateX(-50%);

    color:rgba(255,255,255,.028);

    font-size:clamp(17rem,38vw,37rem);
    font-weight:800;

    line-height:1;

    letter-spacing:-35px;

    pointer-events:none;

}

.hero-contenido{

    position:relative;

    z-index:5;

    width:100%;
    max-width:1050px;

}

.hero-etiqueta{

    display:inline-flex;
    align-items:center;

    gap:10px;

    margin-bottom:30px;

    padding:10px 20px;

    border:1px solid rgba(20,200,255,.65);
    border-radius:50px;

    background:rgba(20,200,255,.09);

    color:#7ce2ff;

    font-size:.88rem;
    font-weight:700;

    letter-spacing:2px;

    box-shadow:0 0 30px rgba(20,200,255,.10);

}

.hero-etiqueta i{

    color:var(--dorado);

}

.hero h1{

    max-width:1000px;

    margin:0 auto 28px;

    font-size:clamp(3rem,7.2vw,6.6rem);
    font-weight:300;

    line-height:1.03;

    letter-spacing:-4px;

}

.hero h1 span{

    display:block;

    margin:8px 0;

    color:transparent;

    font-size:1.35em;
    font-weight:800;

    letter-spacing:-7px;

    background:linear-gradient(
        110deg,
        #fff4bb 0%,
        var(--dorado) 38%,
        #b87918 76%,
        #fff0a5 100%
    );

    background-clip:text;
    -webkit-background-clip:text;

    filter:drop-shadow(
        0 10px 24px rgba(246,196,70,.16)
    );

}

.hero-descripcion{

    max-width:830px;

    margin:0 auto 42px;

    color:#d6e3ec;

    font-size:clamp(1rem,2vw,1.27rem);
    font-weight:400;

    line-height:1.85;

}

.hero-indicador{

    position:absolute;

    left:50%;
    bottom:32px;

    z-index:5;

    transform:translateX(-50%);

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

    gap:6px;

    color:#8ea6b9;

    font-size:.8rem;

    animation:flotar 2s infinite ease-in-out;

}

.hero-indicador i{

    color:var(--celeste);

}

@keyframes flotar{

    0%,
    100%{

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

    }

    50%{

        transform:translateX(-50%) translateY(8px);

    }

}


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

.hero-decoracion{

    position:absolute;

    z-index:1;

    border-radius:50%;

    filter:blur(2px);

    pointer-events:none;

}

.hero-decoracion-uno{

    top:16%;
    left:-110px;

    width:330px;
    height:330px;

    border:65px solid rgba(20,200,255,.09);

}

.hero-decoracion-dos{

    top:13%;
    right:-145px;

    width:410px;
    height:410px;

    border:85px solid rgba(246,196,70,.08);

}

.hero-decoracion-tres{

    bottom:18%;
    left:16%;

    width:17px;
    height:17px;

    background:var(--dorado);

    box-shadow:

        160px -100px 0 rgba(20,200,255,.65),
        440px 55px 0 rgba(246,196,70,.65),
        640px -155px 0 rgba(255,255,255,.38),
        805px 35px 0 rgba(20,200,255,.45);

}


/*==================================================
ENCABEZADOS DE SECCIÓN
==================================================*/

.sobre-titulo{

    display:inline-block;

    margin-bottom:13px;

    color:var(--dorado);

    font-size:.85rem;
    font-weight:700;

    letter-spacing:2.4px;

}

.encabezado-seccion{

    max-width:820px;

    margin:0 auto 65px;

    text-align:center;

}

.encabezado-seccion h2,
.cierre h2{

    margin-bottom:20px;

    font-size:clamp(2.25rem,4vw,3.65rem);
    font-weight:700;

    line-height:1.16;

    letter-spacing:-2px;

}

.encabezado-seccion p,
.cierre p{

    color:var(--texto);

    font-size:1.08rem;
    line-height:1.8;

}


/*==================================================
SECCIÓN EVENTOS
==================================================*/

.seccion-eventos{

    position:relative;

    padding:115px 0 125px;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(0,143,213,.11),
            transparent 29%
        ),

        radial-gradient(
            circle at 85% 68%,
            rgba(245,196,81,.07),
            transparent 26%
        ),

        var(--azul-fondo);

}

.eventos-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}


/*==================================================
TARJETAS DE EVENTOS
==================================================*/

.evento-card{

    position:relative;

    min-width:0;

    padding:38px 32px 32px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--borde);
    border-radius:28px;

    background:

        linear-gradient(
            150deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        ),

        var(--azul-card);

    box-shadow:var(--sombra);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.evento-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:var(--card-accent);

}

.evento-card::after{

    content:"";

    position:absolute;

    top:-85px;
    right:-85px;

    width:230px;
    height:230px;

    border-radius:50%;

    background:var(--card-glow);

    filter:blur(6px);

    pointer-events:none;

}

.evento-card:hover{

    transform:translateY(-12px);

    border-color:var(--card-border);

    box-shadow:
        0 34px 85px rgba(0,0,0,.45),
        0 0 0 1px var(--card-border);

}

.evento-mega{

    --card-accent:linear-gradient(
        90deg,
        #ffc953,
        #fff0a1
    );

    --card-glow:rgba(245,196,81,.14);
    --card-border:rgba(245,196,81,.42);

}

.evento-build{

    --card-accent:linear-gradient(
        90deg,
        #117fd0,
        #1bd5ff
    );

    --card-glow:rgba(20,200,255,.14);
    --card-border:rgba(20,200,255,.42);

}

.evento-run{

    --card-accent:linear-gradient(
        90deg,
        #0fbdf6,
        #f1c452
    );

    --card-glow:rgba(0,161,224,.14);
    --card-border:rgba(75,205,255,.42);

}

.evento-numero{

    position:absolute;

    top:8px;
    right:19px;

    z-index:0;

    color:rgba(255,255,255,.045);

    font-size:6.4rem;
    font-weight:800;

    line-height:1;

}

.evento-icono{

    position:relative;

    z-index:2;

    width:70px;
    height:70px;

    margin-bottom:27px;

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

    border:1px solid var(--card-border);
    border-radius:21px;

    color:var(--dorado);

    font-size:2rem;

    background:rgba(255,255,255,.055);

    box-shadow:0 14px 28px rgba(0,0,0,.20);

}

.evento-build .evento-icono{

    color:var(--celeste);

}

.evento-run .evento-icono{

    color:#75dfff;

}

.evento-contenido{

    position:relative;

    z-index:2;

}

.evento-tipo{

    display:block;

    margin-bottom:9px;

    color:var(--dorado);

    font-size:.77rem;
    font-weight:700;

    letter-spacing:2px;

}

.evento-build .evento-tipo{

    color:var(--celeste);

}

.evento-run .evento-tipo{

    color:#66d8ff;

}

.evento-card h3{

    margin-bottom:18px;

    font-size:clamp(1.65rem,2.5vw,2.2rem);
    line-height:1.18;

}

.evento-resumen{

    min-height:116px;

    margin-bottom:28px;

    color:var(--texto);

    font-size:.98rem;
    line-height:1.75;

}

.evento-datos{

    margin-bottom:30px;

    display:flex;
    flex-direction:column;

    gap:17px;

}

.evento-datos li{

    display:flex;
    align-items:flex-start;

    gap:13px;

    color:#d9e5ee;

    font-size:.91rem;
    line-height:1.45;

}

.evento-datos i{

    width:20px;

    margin-top:3px;

    color:var(--celeste);

    text-align:center;

}

.evento-mega .evento-datos i{

    color:var(--dorado);

}

.evento-datos span{

    display:flex;
    flex-direction:column;

}

.evento-datos strong{

    color:#fff;
    font-weight:600;

}


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

.countdown{

    position:relative;

    z-index:2;

    margin-top:auto;
    margin-bottom:24px;

    padding:20px 17px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    background:rgba(0,0,0,.17);

}

.countdown-titulo{

    margin-bottom:13px;

    color:var(--texto-suave);

    font-size:.75rem;
    font-weight:600;

    text-align:center;
    text-transform:uppercase;

    letter-spacing:1.8px;

}

.countdown-valores{

    display:grid;

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

    gap:7px;

}

.countdown-bloque{

    min-width:0;

    padding:10px 5px;

    border-radius:11px;

    background:rgba(255,255,255,.055);

    text-align:center;

}

.countdown-bloque strong{

    display:block;

    color:#fff;

    font-size:1.3rem;
    line-height:1.1;

}

.countdown-bloque span{

    display:block;

    margin-top:6px;

    color:var(--texto-suave);

    font-size:.62rem;
    font-weight:600;

    text-transform:uppercase;

}

.countdown-estado{

    display:none;

    margin:4px 0 0;

    color:#fff;

    font-size:1rem;
    font-weight:700;

    text-align:center;

}

.countdown.activo .countdown-valores,
.countdown.finalizado .countdown-valores{

    display:none;

}

.countdown.activo .countdown-titulo,
.countdown.finalizado .countdown-titulo{

    display:none;

}

.countdown.activo .countdown-estado,
.countdown.finalizado .countdown-estado{

    display:block;

}

.countdown.activo{

    border-color:rgba(20,200,255,.45);

    background:rgba(20,200,255,.10);

}

.countdown.activo .countdown-estado{

    color:#6ee1ff;

}

.countdown.finalizado{

    opacity:.76;

}

.countdown.finalizado .countdown-estado{

    color:#aebbc5;

}


/*==================================================
CIERRE
==================================================*/

.cierre{

    padding:105px 0;

    background:

        linear-gradient(
            120deg,
            rgba(0,143,213,.18),
            rgba(245,196,81,.09)
        ),

        var(--azul-fondo-secundario);

    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);

}

.cierre-contenido{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:40px;

    align-items:center;

}

.cierre-icono{

    width:115px;
    height:115px;

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

    border:1px solid rgba(245,196,81,.35);
    border-radius:32px;

    color:var(--dorado);

    font-size:3.2rem;

    background:rgba(255,255,255,.055);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25),
        0 0 45px rgba(245,196,81,.08);

}


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

.footer-principal{

    padding:43px 0;

    background:#020c17;

}

.footer-contenido{

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

    gap:30px;

}

.logo-footer{

    width:auto;
    height:72px;

}

.footer-principal p{

    color:#8398a9;

    font-size:.9rem;

}


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

@media(max-width:1100px){

    .eventos-grid{

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

    }

    .evento-run{

        grid-column:1 / -1;

        width:calc(50% - 15px);

        justify-self:center;

    }

}


@media(max-width:850px){

    .header-contenido{

        min-height:88px;

    }

    .logo-principal img{

        height:60px;

    }

    .menu-principal{

        gap:22px;

    }

    .menu-principal a{

        font-size:.9rem;

    }

    .hero{

        padding-top:160px;

    }

    .hero h1{

        letter-spacing:-2px;

    }

    .hero h1 span{

        letter-spacing:-4px;

    }

    .hero::after{

        letter-spacing:-20px;

    }

    .cierre-contenido{

        grid-template-columns:90px 1fr;

        gap:30px;

    }

    .cierre-icono{

        width:90px;
        height:90px;

        border-radius:25px;

        font-size:2.5rem;

    }

}


@media(max-width:700px){

    html{

        scroll-padding-top:82px;

    }

    .header-principal{

        position:absolute;

    }

    .header-contenido{

        min-height:84px;

    }

    .logo-principal img{

        height:54px;

    }

    .menu-principal{

        display:none;

    }

    .hero{

        min-height:100svh;

        padding:
            130px
            6%
            95px;

    }

    .hero-etiqueta{

        padding:9px 16px;

        font-size:.73rem;

        letter-spacing:1.4px;

    }

    .hero h1{

        font-size:clamp(2.8rem,14vw,4.6rem);

        letter-spacing:-2px;

    }

    .hero h1 span{

        letter-spacing:-4px;

    }

    .hero-descripcion{

        font-size:1rem;
        line-height:1.7;

    }

    .hero-indicador{

        bottom:22px;

    }

    .hero-indicador span{

        display:none;

    }

    .seccion-eventos{

        padding:85px 0 95px;

    }

    .encabezado-seccion{

        margin-bottom:48px;

    }

    .encabezado-seccion h2,
    .cierre h2{

        letter-spacing:-1px;

    }

    .eventos-grid{

        grid-template-columns:1fr;

    }

    .evento-run{

        grid-column:auto;

        width:100%;

    }

    .evento-card{

        padding:34px 25px 26px;

    }

    .evento-resumen{

        min-height:auto;

    }

    .cierre{

        padding:80px 0;

        text-align:center;

    }

    .cierre-contenido{

        display:flex;
        flex-direction:column;

        gap:28px;

    }

    .footer-contenido{

        flex-direction:column;

        text-align:center;

    }

}


@media(max-width:430px){

    .contenedor{

        width:92%;

    }

    .hero{

        padding-left:5%;
        padding-right:5%;

    }

    .boton{

        width:100%;

        padding-left:22px;
        padding-right:22px;

    }

    .evento-card{

        border-radius:23px;

    }

    .evento-numero{

        font-size:5.3rem;

    }

    .countdown{

        padding:17px 11px;

    }

    .countdown-valores{

        gap:5px;

    }

    .countdown-bloque{

        padding:9px 2px;

    }

    .countdown-bloque strong{

        font-size:1.08rem;

    }

    .countdown-bloque span{

        font-size:.52rem;

    }

}