/*======================================================
                    WORLD LEGENDS
      La historia completa de la Copa Mundial FIFA
======================================================*/


/*========================

RESET

========================*/

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


html{

    scroll-behavior:smooth;

}


body{

    background:#071320;

    color:#ffffff;

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

    overflow-x:hidden;

}



/*========================

VARIABLES

========================*/

:root{

    --azul:#071320;

    --azul2:#10273d;

    --dorado:#d4af37;

    --gris:#d9d9d9;

    --blanco:#ffffff;

    --negro:#000000;

    --sombra:0 15px 40px rgba(0,0,0,.35);

    --radio:20px;

}



/*========================

SCROLL

========================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#08131d;

}

::-webkit-scrollbar-thumb{

    background:var(--dorado);

    border-radius:50px;

}



/*========================

ENLACES

========================*/

a{

    text-decoration:none;

    color:white;

}



/*========================

IMAGENES

========================*/

img{

    display:block;

    width:100%;

}



/*========================

CONTENEDOR PRINCIPAL

========================*/

.explora-contenido{

    margin-left:18rem;

    width:calc(100% - 18rem);

    min-height:100vh;

}



/*========================

MENU LATERAL

========================*/

.menu-lateral{

    position:fixed;

    top:0;

    left:0;

    width:18rem;

    height:100vh;

    background:#08131d;

    border-right:.15rem solid rgba(212,175,55,.25);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:2rem;

    z-index:999;

}



/*========================

LOGO

========================*/

.logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.logo img{

    width:7rem;

    margin-bottom:1rem;

}

.logo h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:2.6rem;

    color:var(--blanco);

    letter-spacing:.15rem;

    line-height:2.3rem;

}

.logo p{

    margin-top:.8rem;

    color:var(--dorado);

    font-size:.95rem;

}



/*========================

MENU

========================*/

.menu{

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

.menu a{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1rem;

    border-radius:15px;

    transition:.35s;

    font-size:1rem;

    font-weight:500;

}

.menu a:hover{

    background:rgba(212,175,55,.12);

    transform:translateX(.4rem);

}

.menu .activo{

    background:var(--dorado);

    color:#000;

    font-weight:700;

}



/*========================

PIE MENU

========================*/

.menu-footer{

    text-align:center;

}

.menu-footer h3{

    font-family:'Bebas Neue';

    letter-spacing:.1rem;

    color:var(--dorado);

    font-size:1.7rem;

}

.menu-footer p{

    margin-top:.5rem;

    font-size:.85rem;

    line-height:1.5rem;

    color:#cfcfcf;

}

/*======================================================

                HERO - PORTADA PRINCIPAL

======================================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:90px 0;

}

.hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:right center;

    filter:brightness(.38);

}

.capa{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(7,19,32,.96) 0%,

        rgba(7,19,32,.88) 35%,

        rgba(7,19,32,.55) 65%,

        rgba(7,19,32,.25) 100%

    );

    z-index:1;

}

.hero-texto{

    position:relative;

    z-index:2;

    width:100%;

    max-width:760px;

    margin-left:90px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.subtitulo{

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

    font-size:16px;

    font-weight:700;

    letter-spacing:5px;

    color:#d4af37;

    text-transform:uppercase;

    display:inline-block;

    margin-bottom:20px;

    text-shadow:0 0 15px rgba(212,175,55,.45);

}

.hero-texto h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:110px;

    line-height:.88;

    margin:18px 0;

    color:#fff;

}

.hero-texto h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:58px;

    line-height:1;

    margin-bottom:25px;

    color:#ffffff;

    max-width:700px;

}

.descripcion{
    max-width:700px;
    line-height:1.8;
    color:#f5f5f5;
    font-size:22px;
}

.botones{

    display: flex;

    gap: 1.5rem;

    margin-top: 1rem;

    flex-wrap: wrap;

}

.botones a{

    position:relative;

    overflow:hidden;

    padding:18px 42px;

    border-radius:50px;

    font-weight:700;

    letter-spacing:1px;

    transition:.35s;

}

.botones a:first-child{

    background: var(--dorado);

    color: black;

}

.botones a:last-child{

    border: .15rem solid white;

    color: white;

}

.botones a:first-child:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(255,215,0,.35);

}

.botones a:last-child:hover{

    background: white;

    color: black;

}


/*======================================================

                TITULOS GENERALES

======================================================*/

.titulo-seccion{

    width: 90%;

    max-width: 80rem;

    margin: 0 auto 3rem;

    margin-top:90px;

    margin-bottom:50px;

}

.titulo-seccion h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:62px;

    letter-spacing:3px;

    color:white;

    position:relative;

    display:inline-block;

    margin-bottom:20px;

}

.titulo-seccion h2::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-10px;

    width:120px;

    height:5px;

    border-radius:30px;

    background:#FFD700;

}

.titulo-seccion p{

    max-width:850px;

    margin:auto;

    color:#d7d7d7;

    font-size:21px;

    line-height:1.9;

}

/*======================================
        EFECTO GOLD SHINE
======================================*/

.video-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.video-card:hover::before{

    left:160%;

}


/*======================================================

                ESTADISTICAS

======================================================*/

.estadisticas{

    padding: 6rem 0;

    background: #0c1b2c;

}

.contenedor-estadisticas{

    width: 90%;

    max-width: 80rem;

    margin: auto;

    display: flex;

    justify-content: center;

    gap: 2rem;

    flex-wrap: wrap;

}

.card-estadistica{

    flex: 1 1 15rem;

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

    backdrop-filter: blur(.6rem);

    border: .08rem solid rgba(255,255,255,.08);

    border-radius: 1.5rem;

    padding: 2rem;

    text-align: center;

    transition: .35s;

}

.card-estadistica:hover{

    transform: translateY(-.6rem);

    border-color: var(--dorado);

}

.card-estadistica h3{

    font-family: 'Bebas Neue';

    font-size: 4rem;

    color: var(--dorado);

}

.card-estadistica p{

    margin-top: .8rem;

    color: #ececec;

    font-size: 1rem;

}


/*======================================================
                BIENVENIDA PREMIUM
======================================================*/

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

.bienvenida-texto{

    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:30px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;

}

.bienvenida-header{

    position:relative;
    text-align:center;
    margin-bottom:55px;

}

.bienvenida-header::before{

    content:"WORLD";

    position:absolute;

    top:-70px;

    left:-15px;

    font-size:180px;

    font-weight:900;

    font-family:'Bebas Neue',sans-serif;

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

    letter-spacing:8px;

    pointer-events:none;

    z-index:-1;

}

.etiqueta{

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

    color:#FFD700;
    font-size:15px;
    font-weight:700;
    letter-spacing:6px;
    text-transform:uppercase;

}

.etiqueta::before{

    content:"";

    width:70px;
    height:2px;

    background:#FFD700;

}

.bienvenida-header h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:82px;

    line-height:.9;

    margin:25px auto;

    text-align:center;

    max-width:650px;

    color:#fff;

    text-shadow:

    0 10px 30px rgba(0,0,0,.45),

    0 0 50px rgba(255,215,0,.08);

}

.bienvenida-header:hover h2{

    color:#ffffff;

    transform:translateX(8px);

}

.linea-premium{

    width:160px;

    height:5px;

    margin:35px auto;

    border-radius:30px;

    background:linear-gradient(90deg,#FFD700,#fff,#FFD700);

}

/*========================================*/

.bienvenida-descripcion{

    max-width:720px;

    margin:0 auto 55px;

    padding:40px;

    text-align:center;

    border-radius:25px;

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

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

    backdrop-filter:blur(18px);

}

.bienvenida-descripcion::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#FFD700;

}

.bienvenida-descripcion p{

    color:#d7d7d7;

    font-size:19px;

    line-height:2;

    margin-bottom:28px;

}

.bienvenida-descripcion p:last-child{

    margin-bottom:0;

}

/*========================================*/

.bienvenida-datos{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin:60px auto;

}

.bienvenida-datos div{

    width:180px;

    height:180px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-radius:30px;

    background:linear-gradient(180deg,#1b2433,#111827);

    border:1px solid rgba(255,215,0,.15);

    transition:.4s;

}


.bienvenida-datos div:hover{

    transform:translateY(-10px);

    border-color:#FFD700;

    box-shadow:

    0 20px 45px rgba(0,0,0,.35),

    0 0 30px rgba(255,215,0,.15);

}

.bienvenida-datos strong{

    display:block;

    font-size:48px;

    color:#FFD700;

    margin-bottom:12px;

    font-weight:800;

}

.bienvenida-datos span{

    color:#fff;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*========================================*/

.boton-premium{

    display:flex;

    width:280px;

    height:65px;

    margin:20px auto 0;

    justify-content:center;

    align-items:center;

    border-radius:60px;

    background:linear-gradient(135deg,#FFD700,#d69f00);

    color:#111;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}


.boton-premium:hover::before{

    left:140%;

}

.boton-premium:hover{

    transform:translateY(-6px);

    box-shadow:

    0 25px 55px rgba(255,215,0,.45);

}
/*======================================================

            EXPLORA WORLD LEGENDS

======================================================*/

.explorar{

    padding:7rem 5%;

    background:#08131d;

}

.contenedor-explorar{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:2rem;

    margin-top:3rem;

}

.tarjeta{

    flex:1 1 18rem;

    max-width:22rem;

    background:#10273d;

    border-radius:1.5rem;

    overflow:hidden;

    transition:.40s;

    box-shadow:var(--sombra);

    border:2px solid transparent;

}

.tarjeta:hover{

    transform:translateY(-12px);

    border-color:var(--dorado);

}

.tarjeta img{

    height:240px;

    object-fit:cover;

    transition:.45s;

}

.tarjeta:hover img{

    transform:scale(1.08);

}

.tarjeta h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:2rem;

    color:var(--dorado);

    padding:1.2rem 1.5rem .5rem;

}

.tarjeta p{

    padding:0 1.5rem;

    color:#dddddd;

    line-height:1.8rem;

    min-height:100px;

}

.tarjeta a{

    display:inline-block;

    margin:1.5rem;

    padding:.9rem 2rem;

    background:var(--dorado);

    color:#000;

    font-weight:bold;

    border-radius:40px;

    transition:.35s;

}

.tarjeta a:hover{

    background:white;

}



/*======================================================

                LINEA DEL TIEMPO

======================================================*/

.timeline{

    padding:7rem 5%;

    background:#071320;

}

.timeline-contenedor{

    display:flex;

    gap:2rem;

    overflow-x:auto;

    padding:2rem 0;

    scroll-behavior:smooth;

}

.timeline-contenedor::-webkit-scrollbar{

    height:10px;

}

.timeline-contenedor::-webkit-scrollbar-thumb{

    background:var(--dorado);

}

.timeline-card{

    min-width:320px;

    background:#10273d;

    border-radius:1.5rem;

    overflow:hidden;

    transition:.4s;

    border:2px solid transparent;

    box-shadow:var(--sombra);

}

.timeline-card:hover{

    transform:translateY(-10px);

    border-color:var(--dorado);

}

.timeline-card img{

    height:220px;

    object-fit:cover;

}

.timeline-card h3{

    margin-top:1.2rem;

    text-align:center;

    color:var(--dorado);

    font-family:'Bebas Neue';

    font-size:2.5rem;

}

.timeline-card h4{

    text-align:center;

    margin:.5rem;

    color:white;

}

.timeline-card p{

    padding:1rem 1.5rem 2rem;

    line-height:1.8rem;

    color:#dddddd;

}



/*======================================================

                FRASE

======================================================*/

.frase{

    padding:7rem 10%;

    background:linear-gradient(135deg,#10273d,#071320);

    text-align:center;

}

.frase h2{

    font-family:'Bebas Neue';

    font-size:4rem;

    color:white;

    letter-spacing:.15rem;

    line-height:4.5rem;

}

.frase p{

    margin-top:2rem;

    font-size:1.1rem;

    color:#d9d9d9;

    line-height:2rem;

}



/*======================================================

                GALERIA

======================================================*/

.galeria{

    padding:7rem 5%;

    background:#08131d;

}

.galeria-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1.5rem;

    margin-top:3rem;

}

.foto{

    flex:1 1 20rem;

    max-width:24rem;

    overflow:hidden;

    border-radius:1.2rem;

    box-shadow:var(--sombra);

}

.foto img{

    height:260px;

    object-fit:cover;

    transition:.45s;

}

.foto:hover img{

    transform:scale(1.12);

}



/*======================================================

            ANIMACION GENERAL

======================================================*/

.hero-texto,
.card-estadistica,
.tarjeta,
.timeline-card,
.foto{

    animation:aparecer .8s ease;

}

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================================

                    FOOTER

======================================================*/

.footer{

    background:#050b12;

    padding:5rem 5% 2rem;

    border-top:2px solid rgba(212,175,55,.20);

}

.footer-contenedor{

    display:flex;

    justify-content:space-between;

    gap:3rem;

    flex-wrap:wrap;

    max-width:1400px;

    margin:auto;

}

.footer-columna{

    flex:1 1 250px;

}

.footer-columna h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:2rem;

    color:var(--dorado);

    margin-bottom:1rem;

    letter-spacing:.1rem;

}

.footer-columna p{

    color:#d6d6d6;

    line-height:1.9rem;

}

.footer-columna a{

    display:block;

    color:#e8e8e8;

    margin:.7rem 0;

    transition:.30s;

}

.footer-columna a:hover{

    color:var(--dorado);

    padding-left:.5rem;

}

.footer-copy{

    text-align:center;

    margin-top:3rem;

    padding-top:2rem;

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

    color:#aaaaaa;

}



/*======================================================

                REPRODUCTOR

======================================================*/

.spotify{

    position:fixed;

    bottom:0;

    left:18rem;

    width:calc(100% - 18rem);

    background:#0b1622;

    border-top:2px solid rgba(212,175,55,.20);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    padding:1rem 2rem;

    z-index:9999;

    box-shadow:0 -10px 25px rgba(0,0,0,.45);

}

.spotify-info{

    display:flex;

    align-items:center;

    gap:1rem;

}

.spotify-info img{

    width:65px;

    height:65px;

    object-fit:cover;

    border-radius:.8rem;

}

.spotify-info h4{

    font-size:1rem;

    color:white;

}

.spotify-info p{

    color:#bbbbbb;

    font-size:.85rem;

}

.spotify audio{

    width:380px;

}

.spotify select{

    background:#071320;

    color:white;

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

    padding:.8rem 1rem;

    border-radius:.6rem;

    outline:none;

}



/*======================================================

            BOTON VOLVER ARRIBA

======================================================*/

.arriba{

    position:fixed;

    right:30px;

    bottom:120px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--dorado);

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    font-weight:bold;

    cursor:pointer;

    transition:.35s;

    box-shadow:var(--sombra);

}

.arriba:hover{

    transform:translateY(-5px);

}



/*======================================================

            RESPONSIVE

======================================================*/

@media(max-width:1200px){

.menu-lateral{

    width:15rem;

}

.contenido{

    margin-left:15rem;

    width:calc(100% - 15rem);

}

.spotify{

    left:15rem;

    width:calc(100% - 15rem);

}

.hero-texto h2{

    font-size:5.5rem;

    line-height:5rem;

}

}



@media(max-width:992px){

.menu-lateral{

    position:relative;

    width:100%;

    height:auto;

}

.contenido{

    margin-left:0;

    width:100%;

}

.spotify{

    left:0;

    width:100%;

}

.hero{

    min-height:80vh;

}

.hero-texto{

    text-align:center;

    align-items:center;

}

.bienvenida{

    flex-direction:column;

}

.footer-contenedor{

    flex-direction:column;

}

}



@media(max-width:768px){

.hero-texto h2{

    font-size:4rem;

    line-height:4rem;

}

.hero-texto h3{

    font-size:1.5rem;

}

.subtitulo{

    letter-spacing:.15rem;

}

.spotify{

    flex-direction:column;

    gap:1rem;

    padding:1rem;

}

.spotify audio{

    width:100%;

}

.spotify select{

    width:100%;

}

}

@media(max-width:500px){

.hero-texto h2{

    font-size:3rem;

    line-height:3rem;

}

.titulo-seccion h2{

    font-size:2.3rem;

}

.bienvenida-texto h2{

    font-size:2.5rem;

    line-height:2.5rem;

}

.card-estadistica h3{

    font-size:3rem;

}

}

/*======================================================
            TABLA DE CAMPEONES
======================================================*/

.tabla-campeones{

    width:90%;

    max-width:1200px;

    margin:60px auto;

    overflow-x:auto;

}

.tabla-campeones table{

    width:100%;

    border-collapse:collapse;

    background:#111;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 0 30px rgba(255,215,0,.15);

}

.tabla-campeones thead{

    background:#d4af37;

}

.tabla-campeones thead th{

    color:#111;

    padding:18px;

    font-size:18px;

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

    letter-spacing:1px;

}

.tabla-campeones tbody td{

    padding:16px;

    text-align:center;

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

    color:#eee;

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

}

.tabla-campeones tbody tr{

    transition:.3s;

}

.tabla-campeones tbody tr:hover{

    background:#1c1c1c;

    transform:scale(1.01);

}

.campeones-page .titulo-seccion h2{

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

    letter-spacing:3px;

    color:#FFD700;

}

.campeones-page .timeline-card h3{

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

}

.campeones-page .timeline-card h4{

    color:#FFD700;

}

/*======================================================
            BOTÓN SIGUIENTE PÁGINA
======================================================*/

.contenedor-explorar{

    width:90%;

    max-width:1200px;

    margin:70px auto;

    display:flex;

    justify-content:center;

}

.contenedor-explorar .tarjeta{

    max-width:500px;

    text-align:center;

}

.contenedor-explorar .tarjeta img{

    width:100%;

    border-radius:18px;

}

.contenedor-explorar .btn-principal{

    display:inline-block;

    margin-top:25px;

}

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

.campeones-page .hero-texto{

    left:90px;

    max-width:720px;

}

.campeones-page .hero-texto h2{

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

    font-size:88px;

    color:#FFD700;

    text-shadow:0 0 20px rgba(255,215,0,.4);

}

.campeones-page .hero-texto h3{

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

    color:#ffffff;

}

.campeones-page .subtitulo{

    color:#FFD700;

    letter-spacing:5px;

}

.campeones-page .descripcion{

    color:#ffffff;

}

/*======================================================
        FICHAS DE ESTADIOS
======================================================*/

.estadios-page .timeline-card strong{

    color:#42A5F5;

    font-weight:700;

}

.estadios-page .timeline-card p{

    line-height:1.8;

}

.estadios-page .timeline-card{

    transition:.35s;

}

.estadios-page .timeline-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(66,165,245,.25);

}

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

.estadios-page .frase-final h2{

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

    color:#42A5F5;

    letter-spacing:2px;

}

.estadios-page .contenedor-explorar .tarjeta{

    border:2px solid rgba(66,165,245,.25);

}

.estadios-page .contenedor-explorar .tarjeta:hover{

    box-shadow:0 15px 35px rgba(66,165,245,.30);

}

/*======================================================
            FRASE FINAL ESTADIOS
======================================================*/

.estadios-page .frase-final{

    text-align:center;

    max-width:900px;

    margin:100px auto;

    padding:20px;

}

.estadios-page .frase-icono{

    display:inline-block;

    color:#FFD700;

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

    font-size:15px;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.estadios-page .frase-final h2{

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

    font-size:58px;

    color:#ffffff;

    margin-bottom:25px;

    line-height:1.15;

}

.estadios-page .frase-final p{

    font-size:22px;

    color:#d5d5d5;

    line-height:1.9;

    max-width:760px;

    margin:auto;

}

/*======================================================
        GALERÍA 3 COLUMNAS
======================================================*/

.tres-columnas{

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

}

@media(max-width:1000px){

.tres-columnas{

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

}

}

@media(max-width:700px){

.tres-columnas{

    grid-template-columns:1fr;

}

}

/*======================================================
            VIDEOS - WORLD LEGENDS
======================================================*/

.videos-page{

    --video-dorado:#FFD700;

    --video-fondo:#08111f;

    background:

    radial-gradient(circle at top,#1d3557 0%,#08111f 35%,#05080f 100%);

}

.hero-videos .hero-texto{

    max-width:780px;

}

.hero-videos h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:110px;

    line-height:.9;

    letter-spacing:5px;

    color:#FFD700;

    text-shadow:

    0 0 15px rgba(255,215,0,.35),

    0 0 40px rgba(255,215,0,.20);

}

.hero-videos h3{

    font-size:34px;

    color:white;

    font-weight:500;

    line-height:1.5;

}

.titulo-mini{

    display:block;

    color:#FFD700;

    letter-spacing:6px;

    font-size:15px;

    margin-bottom:15px;

}

.galeria-videos{

    display:grid;

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

    gap:35px;

    margin:60px 0 100px;

}

.video-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,215,0,.20);

    transition:.45s;

    box-shadow:

    0 20px 45px rgba(0,0,0,.45),

    inset 0 0 0 1px rgba(255,255,255,.05);

}

.video-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    border-color:#FFD700;

    box-shadow:

    0 25px 70px rgba(255,215,0,.35);

}

.video-card video{

    width:100%;

    display:block;

    transition:.55s;

}

.video-card:hover video{

    transform:scale(1.05);

}

.video-info{

    padding:28px;

    text-align:center;

}

.video-info h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:40px;

    color:white;

    letter-spacing:2px;

    position:relative;

    margin-bottom:18px;

}

.video-info h3::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin:12px auto 0;

    border-radius:30px;

    background:#FFD700;

}

.video-info h4{

    color:#FFD700;

    font-size:22px;

    font-weight:600;

    margin:18px 0 12px;

}

.video-info span{

    display:inline-block;

    padding:8px 18px;

    margin-top:10px;

    border-radius:30px;

    background:rgba(255,215,0,.15);

    color:#FFD700;

    font-weight:600;

    letter-spacing:1px;

    font-size:14px;

}

/*=========================================
        GALERÍA DE 3 COLUMNAS
=========================================*/

.tres-columnas{

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

}

@media(max-width:1000px){

.tres-columnas{

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

}

}

@media(max-width:700px){

.tres-columnas{

    grid-template-columns:1fr;

}

}

/*=========================================
        CONTENIDO PREMIUM
=========================================*/

.video-card{

    position:relative;

}

.video-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#FFD700,#ff9800);

    transform:scaleX(0);

    transition:.4s;

}

.video-card:hover::after{

    transform:scaleX(1);

}

/*======================================================
            VIDEO DESTACADO
======================================================*/

.video-principal{

    max-width:1400px;

    margin:140px auto;

    padding:70px;

    background:linear-gradient(135deg,#0b1220,#111827);

    border-radius:30px;

    border:2px solid rgba(255,215,0,.25);

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.video-destacado-info{

    text-align:center;

    margin-bottom:50px;

}

.video-badge{

    display:inline-block;

    padding:12px 24px;

    background:#d4af37;

    color:#ffffff;

    border-radius:40px;

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

    font-size:14px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    box-shadow:0 8px 25px rgba(255, 255, 255, 0.35);

}

.video-principal h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:70px;

    color:#ffffff;

    letter-spacing:3px;

    margin-bottom:25px;

}

.video-principal p{

    max-width:900px;

    margin:auto;

    color:#d9d9d9;

    font-size:22px;

    line-height:1.9;

}

.video-destacado{

    margin-top:60px;

    border-radius:25px;

    overflow:hidden;

    border:3px solid rgba(255,215,0,.35);

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.video-destacado video{

    width:100%;

    display:block;

}

.video-destacado:hover{

    transform:scale(1.01);

    transition:.35s;

    box-shadow:0 25px 70px rgba(255,215,0,.30);

}

.frase-final{

    max-width:1200px;

    margin:140px auto 80px;

    text-align:center;

    padding:60px 30px;

}

.frase-final h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:56px;

    color:#ffffff;

    letter-spacing:2px;

    line-height:1.3;

    text-shadow:0 0 18px rgba(255,215,0,.20);

}

.frase-final h2::before{

    content:"❝";

    color:#FFD700;

    font-size:70px;

    margin-right:10px;

}

.frase-final h2::after{

    content:"❞";

    color:#FFD700;

    font-size:70px;

    margin-left:10px;

}

/*====================================================
        CURIOSIDADES PREMIUM
====================================================*/

.curiosidades{

    padding:130px 8%;

    background:linear-gradient(180deg,#071320 0%,#0b1b2d 100%);

}

.subtitulo-seccion{

    display:block;

    color:#FFD700;

    letter-spacing:6px;

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:15px;

}

.curiosidades-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    margin-top:70px;

}

.curiosidad{

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

    border:1px solid rgba(255,215,0,.15);

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    backdrop-filter:blur(12px);

    transition:.45s;

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

}

.curiosidad:hover{

    transform:translateY(-12px);

    border-color:#FFD700;

    box-shadow:0 25px 55px rgba(255,215,0,.25);

}

.icono-curiosidad{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#FFD700,#C79A00);

    font-size:42px;

    box-shadow:0 0 30px rgba(255,215,0,.35);

}

.curiosidad h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:36px;

    color:#FFD700;

    letter-spacing:1px;

    margin-bottom:15px;

}

.curiosidad p{

    color:#e9e9e9;

    line-height:1.8;

    font-size:17px;

}

/*======================================================
        LA MAGIA DE LA COPA MUNDIAL
======================================================*/

.magia-mundial{

    width:90%;

    max-width:1350px;

    margin:140px auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

}

.magia-imagen{

    position:relative;

}

.magia-imagen img{

    border-radius:25px;

    border:2px solid rgba(255,215,0,.25);

    box-shadow:0 25px 60px rgba(0,0,0,.45);

    transition:.45s;

}

.magia-imagen:hover img{

    transform:scale(1.04);

    box-shadow:0 30px 80px rgba(255,215,0,.18);

}

.magia-etiqueta{

    display:inline-block;

    color:#FFD700;

    letter-spacing:6px;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.magia-contenido h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:72px;

    color:#ffffff;

    letter-spacing:2px;

    margin-bottom:25px;

}

.magia-intro{

    font-size:24px;

    color:#f3f3f3;

    line-height:1.8;

    margin-bottom:35px;

}

.magia-linea{

    width:120px;

    height:5px;

    background:#FFD700;

    border-radius:50px;

    margin-bottom:35px;

}

.magia-contenido h3{

    color:#FFD700;

    font-size:38px;

    margin-bottom:18px;

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

}

.magia-contenido p{

    color:#d9d9d9;

    font-size:19px;

    line-height:2;

    margin-bottom:22px;

}

.boton-magia{

    display:inline-block;

    margin-top:18px;

    background:linear-gradient(135deg,#FFD700,#C79A00);

    color:#000;

    padding:18px 40px;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

}

.boton-magia:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(255,215,0,.35);

}

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

.hero{

    overflow:hidden;

}

.hero img{

    animation:zoomHero 18s ease-in-out infinite alternate;

}

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

.hero-brillo{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(rgba(255,215,0,.18),transparent 70%);

    right:-180px;

    top:-120px;

    z-index:2;

    pointer-events:none;

    animation:brilloHero 6s ease-in-out infinite;

}

@keyframes brilloHero{

    0%{

        opacity:.4;

        transform:scale(.9);

    }

    50%{

        opacity:.9;

        transform:scale(1.1);

    }

    100%{

        opacity:.4;

        transform:scale(.9);

    }

}

.hero-texto{

    animation:entradaHero 1.3s ease;

}

@keyframes entradaHero{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.scroll-indicador span{

    width:3px;

    height:60px;

    background:#FFD700;

    border-radius:50px;

    position:relative;

    overflow:hidden;

}

.scroll-indicador span::after{

    content:"";

    position:absolute;

    width:100%;

    height:18px;

    background:white;

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    from{

        top:-18px;

    }

    to{

        top:100%;

    }

}

.botones a{

    position:relative;

    overflow:hidden;

}

.botones a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

}

.botones a:hover::before{

    left:170%;

    transition:.8s;

}

/*==========================================
      ESTADÍSTICAS PREMIUM FIFA
==========================================*/

.estadisticas-premium{

    padding:140px 8%;

    text-align:center;

    background:linear-gradient(180deg,#071320,#0d2034);

}

.estadisticas-subtitulo{

    display:inline-block;

    color:#FFD700;

    letter-spacing:8px;

    font-size:15px;

    font-weight:700;

    margin-bottom:25px;

}

.estadisticas-premium h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:78px;

    color:#fff;

    letter-spacing:3px;

    margin-bottom:25px;

}

.estadisticas-premium h2::after{

    content:"";

    display:block;

    width:140px;

    height:5px;

    background:#FFD700;

    margin:25px auto 0;

    border-radius:50px;

}

.estadisticas-descripcion{

    max-width:850px;

    margin:40px auto 90px;

    font-size:22px;

    color:#dddddd;

    line-height:1.9;

}

.estadisticas-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.dato{

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

    border:1px solid rgba(255,215,0,.18);

    border-radius:28px;

    padding:60px 35px;

    backdrop-filter:blur(14px);

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.dato::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,transparent,rgba(255,215,0,.08),transparent);

    opacity:0;

    transition:.45s;

}

.dato:hover{

    transform:translateY(-15px);

    border-color:#FFD700;

    box-shadow:0 25px 60px rgba(255,215,0,.20);

}

.dato:hover::before{

    opacity:1;

}

.dato h3{

    font-family:'Bebas Neue',sans-serif;

    font-size:95px;

    color:#FFD700;

    line-height:1;

    margin-bottom:15px;

}

.dato span{

    display:block;

    color:#fff;

    font-size:32px;

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:2px;

    margin-bottom:20px;

}

.dato p{

    color:#d6d6d6;

    font-size:18px;

    line-height:1.8;

}

/*==========================================
        EXPLORA PREMIUM
==========================================*/

.explorar-premium{

    padding:140px 8%;

    text-align:center;

    background:#08131d;

}

.explora-subtitulo{

    color:#FFD700;

    letter-spacing:8px;

    font-size:14px;

    font-weight:700;

}

.explorar-premium h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:80px;

    color:white;

    margin:20px 0;

}

.explorar-premium p{

    max-width:900px;

    margin:auto;

    color:#d7d7d7;

    font-size:22px;

    line-height:1.8;

}

.explora-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

.explora-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:25px;

    border:1px solid rgba(255,215,0,.15);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

    transition:.45s;

}

.explora-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.20));

}

.contenido{

    position:absolute;

    left:35px;

    bottom:35px;

    text-align:left;

}

.explora-contenido span{

    color:#FFD700;

    letter-spacing:3px;

    font-size:14px;

}

.explora-contenido h3{

    margin-top:10px;

    font-family:'Bebas Neue',sans-serif;

    font-size:52px;

    color:white;

    letter-spacing:2px;

}

.explora-card:hover{

    transform:translateY(-12px);

    border-color:#FFD700;

    box-shadow:0 25px 70px rgba(255,215,0,.25);

}

.explora-card:hover img{

    transform:scale(1.10);

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.titulo-seccion{

    animation:fadeUp 1s ease both;

}

.hero-texto{

    animation:fadeUp 1.2s ease both;

}

.card-estadistica,
.dato,
.curiosidad,
.explora-card,
.banner-premium,
.magia-mundial,
.tarjeta{

    animation:fadeUp 1s ease both;

}

.card-estadistica:nth-child(2),
.dato:nth-child(2),
.curiosidad:nth-child(2),
.explora-card:nth-child(2){

    animation-delay:.15s;

}

.card-estadistica:nth-child(3),
.dato:nth-child(3),
.curiosidad:nth-child(3),
.explora-card:nth-child(3){

    animation-delay:.30s;

}

.card-estadistica:nth-child(4),
.dato:nth-child(4),
.curiosidad:nth-child(4),
.explora-card:nth-child(4){

    animation-delay:.45s;

}

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

.footer-premium{

    margin-top:120px;

    padding:80px 8%;

    background:#06111b;

    border-top:1px solid rgba(255,215,0,.15);

    display:grid;

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

    gap:70px;

}

.footer-logo img{

    width:90px;

    margin-bottom:20px;

}

.footer-logo h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:48px;

    color:#FFD700;

    letter-spacing:2px;

}

.footer-logo p{

    color:#cfcfcf;

    margin-top:15px;

    line-height:1.8;

}

.footer-links h3,

.footer-info h3{

    color:#FFD700;

    margin-bottom:20px;

    font-size:24px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:#d8d8d8;

    transition:.30s;

}

.footer-links a:hover{

    color:#FFD700;

    padding-left:8px;

}

.footer-info p{

    color:#d7d7d7;

    line-height:2;

}

.copyright{

    background:#040c13;

    text-align:center;

    color:#a8a8a8;

    padding:22px;

    font-size:15px;

    letter-spacing:1px;

}

/* ===========================
   HISTORIA PREMIUM
=========================== */

.hero-historia .hero-texto{

    max-width:700px;

    padding:40px;

    background:rgba(8,17,31,.35);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,215,0,.20);

    border-radius:24px;

}

.hero-historia .hero-texto h2{

    font-family:'Cinzel',serif;

    font-size:70px;

    color:#FFD700;

}

.hero-historia .hero-texto p{

    color:#f2f2f2;

    font-size:20px;

    line-height:1.8;

}

/*==========================================
        CAMPEONES
==========================================*/

.hero-campeones .hero-texto{

    max-width:720px;

    padding:40px;

    background:rgba(8,17,31,.40);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,215,0,.25);

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.35);

}

.hero-campeones .hero-texto h2{

    font-family:'Cinzel',serif;

    font-size:72px;

    color:#FFD700;

    line-height:1.1;

    text-shadow:
    0 0 18px rgba(255,215,0,.35);

}

.hero-campeones .hero-texto p{

    color:#f5f5f5;

    font-size:20px;

    line-height:1.8;

}

/*==========================================
            ESTADIOS
==========================================*/

.hero-estadios .hero-texto{

    max-width:720px;

    padding:40px;

    background:rgba(8,17,31,.45);

    backdrop-filter:blur(14px);

    border:1px solid rgba(0,200,255,.25);

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.35);

}

.hero-estadios .hero-texto h2{

    font-family:'Cinzel',serif;

    font-size:72px;

    color:#00D4FF;

    line-height:1.1;

    text-shadow:
    0 0 18px rgba(0,212,255,.35);

}

.hero-estadios .hero-texto p{

    color:#f5f5f5;

    font-size:20px;

    line-height:1.8;

}

/*==========================================
            VIDEOS
==========================================*/

.hero-videos .hero-texto{

    max-width:760px;

    padding:40px;

    background:rgba(8,17,31,.40);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,215,0,.20);

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.35);

}

.hero-texto h2{

    font-family:'Barlow Condensed',sans-serif;

    font-size:88px;

    font-weight:800;

    line-height:.9;

    text-transform:uppercase;

    color:#fff;

    letter-spacing:2px;

    margin-bottom:25px;

    text-shadow:0 8px 30px rgba(0,0,0,.55);

}

/*=========================
   TEXTO PRINCIPAL
=========================*/

.hero-texto h3{
    max-width: 820px;
    margin: 35px 0 28px;
    padding-left: 22px;

    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .4px;

    color: #ffffff;

    border-left: 5px solid #ffd700;

    text-shadow:
        0 2px 10px rgba(0,0,0,.35);

    animation: fadeUp .8s ease;
}

/*=========================
   DESCRIPCIÓN
=========================*/

.hero-texto .descripcion{
    max-width: 760px;

    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    line-height: 2;

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

    letter-spacing: .3px;

    text-shadow:
        0 1px 6px rgba(0,0,0,.25);

    animation: fadeUp 1.1s ease;
}