/* =====================================
   ESPINOSA 86
   Portal del Piloto
   Main Styles
===================================== */


/* ---------- Variables ---------- */

:root {

    --background: #0b0b0b;

    --surface: #151515;

    --surface-hover: #1d1d1d;

    --border: #2a2a2a;

    --text-primary: #ffffff;

    --text-secondary: #a1a1aa;

    --accent: #FFD400;

    --accent-hover: #FFE566;

}


/* ---------- Reset ---------- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at top,
            #1c1c1c 0%,
            var(--background) 45%
        );


    color: var(--text-primary);

    font-family:

        Inter,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;


    display: flex;

    justify-content: center;

    align-items: center;


    padding: 24px;

}



/* ---------- Container ---------- */


.portal {

    width: 100%;

    max-width: 420px;

    text-align: center;

}



/* ---------- Header ---------- */


.header {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.logo {

    width: 220px;

    max-width: 80%;

    height: auto;

    margin-bottom: 24px;

}



.header h2 {

    font-size: 1.2rem;

    font-weight: 600;

    margin-top: 8px;

}






/* ---------- Championship Section ---------- */


.championship-section {

    margin-top: 28px;

    width: 100%;

}



.championship-section h3 {

    color: var(--text-secondary);

    font-size: 0.9rem;

    font-weight: 500;

    margin-bottom: 18px;

}



/* Contenedor de botones */

.championships {

    display: flex;

    flex-direction: column;

    gap: 18px;

    width: 100%;

}



/* ---------- Championship Buttons ---------- */


.championship {

    width: 100%;

    min-height: 72px;


    padding: 22px 20px;


    background: var(--surface);


    border: 1px solid var(--border);


    border-radius: 20px;


    color: var(--text-primary);


    font-family: inherit;


    font-size: 1rem;


    font-weight: 500;


    cursor: pointer;


    display: flex;


    justify-content: center;


    align-items: center;


    appearance: none;


    transition:

        transform .25s ease,

        background .25s ease,

        border-color .25s ease,

        box-shadow .25s ease;


}



.championship:hover {

    background: var(--surface-hover);

    transform: translateY(-3px);

}



.championship.selected {

    border-color: var(--accent);

    color: var(--accent);

    box-shadow:

        0 0 0 1px var(--accent);
        

}



/* ---------- Access Section ---------- */


.access-section {

    margin-top: 40px;


    display: flex;

    flex-direction: column;


    gap: 14px;

}



.access-section label {


    text-align: left;


    color: var(--text-secondary);


    font-size: .9rem;


}



input {


    width: 100%;


    padding: 17px;


    border-radius: 16px;


    background: var(--surface);


    border: 1px solid var(--border);


    color: white;


    font-family: inherit;


    font-size: 1rem;


    outline: none;


}



input:focus {


    border-color: var(--accent);


}




/* ---------- Main Button ---------- */


#accessButton {


    margin-top: 8px;


    padding: 17px;


    border-radius: 16px;


    border: none;


    background: var(--accent);


    color: #000;


    font-family: inherit;


    font-size: 1rem;


    font-weight: 700;


    cursor: pointer;


    transition:

        transform .2s ease,

        opacity .2s ease;


}



#accessButton:hover {


    transform: translateY(-2px);


}



#accessButton:disabled {


    opacity: .35;


    cursor: not-allowed;


}



/* ---------- Mobile / Desktop ---------- */


@media(min-width:700px){


    .portal {

        max-width: 460px;

    }

}
/* ---------- Button Loading ---------- */


#accessButton.loading {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}


.loader {


    width: 16px;

    height: 16px;


    border: 2px solid rgba(0,0,0,.3);


    border-top-color: #000;


    border-radius: 50%;


    display: none;


    animation: spin .8s linear infinite;

}



#accessButton.loading .loader {

    display: block;

}



@keyframes spin {

    from {

        transform: rotate(0deg);

    }


    to {

        transform: rotate(360deg);

    }

}