/*==================================================
GO KART RUN
Autor: Luis Angel
Style.css
==================================================*/

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

:root{

    --azulOscuro:#03132C;
    --azul:#0066FF;
    --rojo:#E63946;
    --amarillo:#FFD60A;
    --verde:#38B000;
    --blanco:#FFFFFF;
    --gris:#EAEAEA;
    --negro:#101010;

    --sombra:0px 8px 20px rgba(0,0,0,.25);
    --borde:18px;

    --transicion:.35s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;

}

html{

    scroll-behavior:smooth;

}

body{

    background:
    linear-gradient(
    135deg,
    #02101F,
    #06336D,
    #0657B8);

    color:var(--blanco);

    min-height:100vh;

    overflow-x:hidden;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#02101F;

}

::-webkit-scrollbar-thumb{

    background:var(--amarillo);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ffe45c;

}

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

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

    backdrop-filter:blur(14px);

    z-index:1000;

    transition:.4s;

}

.logo h1{

    font-size:2rem;

    color:var(--amarillo);

    letter-spacing:2px;

    cursor:pointer;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:white;

    text-decoration:none;

    font-size:1rem;

    transition:var(--transicion);

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0%;

    height:3px;

    background:var(--amarillo);

    transition:.3s;

}

nav a:hover{

    color:var(--amarillo);

}

nav a:hover::after{

    width:100%;

}

/*==================================================
BOTON
==================================================*/

.btn{

    text-decoration:none;

    color:white;

    background:var(--rojo);

    padding:12px 28px;

    border-radius:50px;

    font-weight:bold;

    transition:.35s;

    box-shadow:var(--sombra);

}

.btn:hover{

    transform:translateY(-5px);

    background:var(--amarillo);

    color:#000;

    box-shadow:
    0px 0px 20px var(--amarillo);

}

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

#hero{

    width:100%;

    min-height:100vh;

    display:grid;

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

    align-items:center;

    gap:60px;

    padding:150px 8% 80px;

}

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

.hero-text h2{

    font-size:4rem;

    margin-bottom:20px;

    line-height:1.1;

}

.hero-text p{

    font-size:1.15rem;

    color:#ECECEC;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-text a{

    text-decoration:none;

    display:inline-block;

    background:var(--verde);

    color:white;

    padding:15px 40px;

    border-radius:50px;

    font-size:1rem;

    font-weight:bold;

    transition:.35s;

}

.hero-text a:hover{

    transform:scale(1.08);

    box-shadow:

    0px 0px 25px var(--verde);

}

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

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:650px;

    border-radius:30px;

    box-shadow:

    0px 25px 50px rgba(0,0,0,.35);

    transition:.5s;

}

.hero-image img:hover{

    transform:

    scale(1.03)

    rotate(-2deg);

}

/*==================================================
DECORACION
==================================================*/

body::before{

    content:"";

    position:fixed;

    width:350px;

    height:350px;

    background:rgba(255,214,10,.12);

    border-radius:50%;

    top:-100px;

    left:-100px;

    filter:blur(80px);

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    width:400px;

    height:400px;

    background:rgba(0,102,255,.18);

    border-radius:50%;

    bottom:-120px;

    right:-100px;

    filter:blur(90px);

    z-index:-1;

}

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

.hero-text{

    animation:entradaIzquierda 1.2s;

}

.hero-image{

    animation:entradaDerecha 1.2s;

}

@keyframes entradaIzquierda{

    from{

        opacity:0;

        transform:

        translateX(-100px);

    }

    to{

        opacity:1;

        transform:

        translateX(0);

    }

}

@keyframes entradaDerecha{

    from{

        opacity:0;

        transform:

        translateX(100px);

    }

    to{

        opacity:1;

        transform:

        translateX(0);

    }

}

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

@media(max-width:1100px){

    #hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-image{

        order:-1;

    }

    nav{

        gap:20px;

    }

}

@media(max-width:850px){

    header{

        flex-direction:column;

        gap:20px;

        padding:20px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero-text h2{

        font-size:3rem;

    }

}

@media(max-width:600px){

    .hero-text h2{

        font-size:2.3rem;

    }

    .hero-text p{

        font-size:1rem;

    }

    .btn{

        padding:12px 20px;

    }

    .hero-text a{

        padding:14px 25px;

    }

}

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

#eventos{

    padding:100px 8%;

}

#eventos h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;

    color:var(--amarillo);

    text-transform:uppercase;

    letter-spacing:2px;

}

/*==================================================
CARDS
==================================================*/

.cards{

    display:grid;

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

    gap:35px;

}

/*==================================================
CARD
==================================================*/

.cards article{

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

    backdrop-filter:blur(10px);

    border-radius:25px;

    padding:35px;

    text-align:center;

    transition:.4s;

    box-shadow:var(--sombra);

    border:2px solid transparent;

    cursor:pointer;

}

.cards article:hover{

    transform:translateY(-12px);

    border-color:var(--amarillo);

    box-shadow:

    0px 15px 35px rgba(255,214,10,.35);

}

/*==================================================
ICONOS
==================================================*/

.cards article h3{

    font-size:3rem;

    margin-bottom:20px;

    color:var(--amarillo);

}

.cards article p{

    color:#ececec;

    line-height:1.8;

}

/*==================================================
COLORES INDIVIDUALES
==================================================*/

.cards article:nth-child(1){

    border-top:6px solid var(--verde);

}

.cards article:nth-child(2){

    border-top:6px solid var(--azul);

}

.cards article:nth-child(3){

    border-top:6px solid var(--rojo);

}

/*==================================================
PREMIOS
==================================================*/

#premios{

    padding:100px 8%;

}

#premios h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;

    color:var(--amarillo);

}

.premios{

    display:grid;

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

    gap:35px;

}

.premios div{

    background:white;

    color:black;

    padding:40px;

    border-radius:25px;

    text-align:center;

    font-size:1.5rem;

    font-weight:bold;

    transition:.4s;

    box-shadow:var(--sombra);

}

.premios div:hover{

    transform:scale(1.05);

}

/*==================================================
MEDALLAS
==================================================*/

.premios div:nth-child(1){

    background:linear-gradient(

    135deg,

    #FFD700,

    #FFEF8C);

}

.premios div:nth-child(2){

    background:linear-gradient(

    135deg,

    #C9CED6,

    #F4F4F4);

}

.premios div:nth-child(3){

    background:linear-gradient(

    135deg,

    #B87333,

    #DFA878);

}

/*==================================================
CONVOCATORIA
==================================================*/

#convocatoria{

    padding:100px 8%;

}

#convocatoria h2{

    text-align:center;

    font-size:3rem;

    color:var(--amarillo);

    margin-bottom:40px;

}

#convocatoria p{

    max-width:900px;

    margin:auto;

    text-align:center;

    line-height:2;

    font-size:1.1rem;

    color:#ECECEC;

}

#convocatoria{

    position:relative;

}

#convocatoria::before{

    content:"🏁";

    position:absolute;

    font-size:7rem;

    opacity:.08;

    left:5%;

    top:20%;

}

#convocatoria::after{

    content:"⭐";

    position:absolute;

    font-size:7rem;

    opacity:.08;

    right:5%;

    bottom:15%;

}

/*==================================================
RUTA
==================================================*/

.ruta-container{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    box-shadow:var(--sombra);

}

.ruta-container img{

    width:100%;

    display:block;

    border-radius:25px;

    transition:.4s;

}

.ruta-container:hover img{

    transform:scale(1.03);

}

/*==================================================
ANIMACION
==================================================*/

.cards article,

.premios div,

#ruta div{

    animation:aparecer .8s ease;

}

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:900px){

    #eventos h2,

    #premios h2,

    #convocatoria h2,

    #ruta h2{

        font-size:2.4rem;

    }

}

@media(max-width:600px){

    #eventos,

    #premios,

    #convocatoria,

    #ruta{

        padding:70px 6%;

    }

    .cards{

        gap:25px;

    }

    .premios{

        gap:25px;

    }

    .cards article h3{

        font-size:2.4rem;

    }

    #ruta div{

        min-height:300px;

        font-size:1.3rem;

    }

}

/*==================================================
SLIDER
==================================================*/

#slider{

    padding:100px 8%;

}

#slider h2{

    text-align:center;

    font-size:3rem;

    color:var(--amarillo);

    margin-bottom:50px;

}

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

.slider{

    width:100%;

    max-width:1200px;

    margin:auto;

    overflow:hidden;

    border-radius:25px;

    box-shadow:

    0px 15px 40px rgba(0,0,0,.35);

    border:4px solid rgba(255,255,255,.15);

}

/*==================================================
FIGURE
==================================================*/

.slider figure{

    display:flex;

    width:500%;

    animation:slider 25s infinite;

}

/*==================================================
IMAGENES
==================================================*/

.slider img{

    width:20%;

    height:600px;

    object-fit:cover;

    user-select:none;

}

/*==================================================
PAUSA
==================================================*/

.slider:hover figure{

    animation-play-state:paused;

}

/*==================================================
ANIMACION
==================================================*/

@keyframes slider{

    0%{

        margin-left:0;

    }

    15%{

        margin-left:0;

    }

    20%{

        margin-left:-100%;

    }

    35%{

        margin-left:-100%;

    }

    40%{

        margin-left:-200%;

    }

    55%{

        margin-left:-200%;

    }

    60%{

        margin-left:-300%;

    }

    75%{

        margin-left:-300%;

    }

    80%{

        margin-left:-400%;

    }

    95%{

        margin-left:-400%;

    }

    100%{

        margin-left:0;

    }

}

/*==================================================
EFECTO
==================================================*/

.slider{

    transition:.4s;

}

.slider:hover{

    transform:scale(1.01);

}

/*==================================================
BORDE LUMINOSO
==================================================*/

.slider::before{

    content:"";

    position:absolute;

}

.slider{

    position:relative;

}

.slider::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:25px;

    pointer-events:none;

    box-shadow:

    inset 0px 0px 50px rgba(255,214,10,.08);

}

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

@media(max-width:1000px){

    .slider img{

        height:500px;

    }

}

@media(max-width:700px){

    .slider img{

        height:350px;

    }

}

@media(max-width:500px){

    #slider{

        padding:70px 6%;

    }

    #slider h2{

        font-size:2.2rem;

    }

    .slider img{

        height:240px;

    }

}

/*==================================================
FORMULARIO
==================================================*/

#registro{

    padding:100px 8%;

}

#registro h2{

    text-align:center;

    font-size:3rem;

    color:var(--amarillo);

    margin-bottom:50px;

}

/*==================================================
FORM
==================================================*/

form{

    max-width:700px;

    margin:auto;

    padding:45px;

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

    backdrop-filter:blur(12px);

    border-radius:25px;

    box-shadow:var(--sombra);

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==================================================
INPUTS
==================================================*/

form input,
form select{

    width:100%;

    padding:18px;

    border:none;

    outline:none;

    border-radius:12px;

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

    color:var(--blanco);

    font-size:1rem;

    transition:.3s;

}

form input::placeholder{

    color:#ddd;

}

form select{

    cursor:pointer;

}

form option{

    color:#000;

}

form input:focus,
form select:focus{

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

    box-shadow:0 0 18px rgba(255,214,10,.4);

}

/*==================================================
BOTON
==================================================*/

form button{

    border:none;

    cursor:pointer;

    padding:18px;

    border-radius:50px;

    background:var(--rojo);

    color:white;

    font-size:1rem;

    font-weight:bold;

    transition:.35s;

}

form button:hover{

    background:var(--verde);

    transform:translateY(-4px);

    box-shadow:0 0 20px rgba(56,176,0,.5);

}

/*==================================================
CONTACTO
==================================================*/

#contacto{

    padding:100px 8%;

}

#contacto h2{

    text-align:center;

    font-size:3rem;

    color:var(--amarillo);

    margin-bottom:50px;

}

#contacto{

    display:flex;

    flex-direction:column;

    align-items:center;

}

#contacto p{

    margin:12px 0;

    font-size:1.15rem;

    color:#f5f5f5;

    transition:.3s;

}

#contacto p:hover{

    color:var(--amarillo);

    transform:scale(1.05);

}

/*==================================================
ICONOS SOCIALES
==================================================*/

.social{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:35px;

}

.social a{

    width:60px;

    height:60px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:white;

    font-size:1.4rem;

    transition:.35s;

}

.social a:hover{

    background:var(--amarillo);

    color:black;

    transform:translateY(-8px);

}

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

footer{

    margin-top:70px;

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

    backdrop-filter:blur(10px);

    padding:35px 8%;

    text-align:center;

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

}

footer p{

    color:#ddd;

    line-height:1.8;

}

footer span{

    color:var(--amarillo);

    font-weight:bold;

}

/*==================================================
LINEA DECORATIVA
==================================================*/

footer::before{

    content:"";

    display:block;

    width:120px;

    height:4px;

    background:var(--amarillo);

    margin:0 auto 20px;

    border-radius:20px;

}

/*==================================================
ANIMACION
==================================================*/

form,
#contacto{

    animation:subir .8s ease;

}

@keyframes subir{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:800px){

    #registro h2,
    #contacto h2{

        font-size:2.4rem;

    }

    form{

        padding:30px;

    }

}

@media(max-width:500px){

    #registro,
    #contacto{

        padding:70px 6%;

    }

    form{

        padding:25px;

    }

    form input,
    form select,
    form button{

        padding:15px;

        font-size:.95rem;

    }

    .social{

        gap:15px;

    }

    .social a{

        width:50px;

        height:50px;

        font-size:1.2rem;

    }

}

.volver{

    position:fixed;

    top:25px;

    left:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:2rem;

    color:white;

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

    backdrop-filter:blur(12px);

    z-index:3000;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.3);

}

.volver:hover{

    background:var(--amarillo);

    color:black;

    transform:translateX(-5px) scale(1.1);

}

.track-name{

    position:absolute;

    right:25px;

    bottom:25px;

    background:#fff;

    color:#000;

    padding:14px 26px;

    border-left:8px solid var(--rojo);

    border-radius:12px;

    font-size:1.1rem;

    font-weight:700;

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

}

.track-name{

    position:absolute;

    right:25px;

    bottom:25px;

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

    color:#111;

    padding:12px 22px;

    border-radius:15px;

    font-size:1rem;

    font-weight:bold;

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

    letter-spacing:1px;

}

.slider figure{

    display:flex;

    width:500%;

    animation:slider 25s infinite;

}

.slide{

    position:relative;

    width:20%;

    flex-shrink:0;

}

.slide img{

    width:100%;

    height:600px;

    object-fit:cover;

    display:block;

}

/*==================================================
CONVOCATORIA INFO
==================================================*/

.convocatoria-info{

    margin-top:50px;

    display:grid;

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

    gap:30px;

}

.info-card{

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

    backdrop-filter:blur(10px);

    padding:30px;

    border-radius:20px;

    text-align:center;

    border-top:6px solid var(--amarillo);

    transition:.35s;

    box-shadow:var(--sombra);

}

.info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 12px 25px rgba(0,0,0,.3);

}

.info-card h3{

    margin-bottom:15px;

    color:var(--amarillo);

    font-size:1.3rem;

}

.info-card p{

    font-size:1.05rem;

    color:#ECECEC;

}

/*==================================================
ETIQUETA RUTA
==================================================*/

.ruta-tag{

    position:absolute;

    right:25px;

    bottom:25px;

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

    color:#111;

    padding:12px 22px;

    border-radius:15px;

    font-size:1rem;

    font-weight:bold;

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

}