/* ===================================================
   RAYCKINGTON FC
   STYLE CSS - GLOBAL
=================================================== */


/* ===================================================
   VARIABLES DEL CLUB
=================================================== */

:root{

    --red:#C8102E;

    --blue:#003DA5;

    --yellow:#FFD100;

    --black:#0F0F0F;

    --dark:#1B1B1B;

    --gray:#F4F4F4;

    --white:#FFFFFF;


    --gradient-primary:
    linear-gradient(
        135deg,
        var(--red),
        var(--blue)
    );


    --gradient-club:
    linear-gradient(
        90deg,
        var(--red),
        var(--yellow),
        var(--blue)
    );


    --shadow-soft:
    0 15px 40px rgba(0,0,0,.15);


    --radius:
    20px;

}


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


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    padding:0;

    margin:0;

    list-style:none;

}


/* ===================================================
   TIPOGRAFÍA
=================================================== */


h1,
h2,
h3,
h4,
h5,
h6{

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

    font-weight:700;

}


p{

    color:#cfcfcf;

    line-height:1.8;

}


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


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



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


.section{

    padding:100px 0;

}


.section.dark{

    background:#111;

}


.section-title{

    text-align:center;

    margin-bottom:60px;

}


.section-title h2{

    font-size:3rem;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:15px;

}


.section-title h2::after{

    content:"";

    width:90px;

    height:4px;

    display:block;

    margin:20px auto 0;

    background:var(--gradient-club);

    border-radius:20px;

}


.section-title p{

    max-width:600px;

    margin:auto;

}



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


.btn{

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

    font-weight:600;

    padding:14px 35px;

    border-radius:50px;

    transition:.35s ease;

}


.btn-primary-club{

    background:var(--red);

    color:white;

    border:none;

}


.btn-primary-club:hover{

    background:var(--blue);

    color:white;

    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(200,16,46,.35);

}



.btn-outline-club{

    border:2px solid var(--yellow);

    color:white;

}


.btn-outline-club:hover{

    background:var(--yellow);

    color:#111;

}



/* ===================================================
   BADGES
=================================================== */


.club-badge{

    display:inline-block;

    padding:8px 20px;

    background:var(--red);

    border-radius:50px;

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}



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


.card-custom{

    background:

    linear-gradient(
        145deg,
        #202020,
        #111
    );


    padding:35px;

    border-radius:var(--radius);

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

    transition:.35s;


}


.card-custom:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-soft);

}



/* ===================================================
   IMÁGENES REDONDEADAS
=================================================== */


.rounded-club{

    border-radius:var(--radius);

    overflow:hidden;

}



/* ===================================================
   TEXTOS ESPECIALES
=================================================== */


.text-red{

    color:var(--red)!important;

}


.text-blue{

    color:var(--blue)!important;

}


.text-yellow{

    color:var(--yellow)!important;

}



/* ===================================================
   FONDOS
=================================================== */


.bg-club{

    background:var(--gradient-primary);

}


.bg-dark{

    background:var(--black);

}



/* ===================================================
   OVERLAY
=================================================== */


.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,.45)
    );

}



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


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#111;

}


::-webkit-scrollbar-thumb{

    background:var(--red);

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--yellow);

}



/* ===================================================
   SELECCIÓN DE TEXTO
=================================================== */


::selection{

    background:var(--yellow);

    color:#111;

}



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


@media(max-width:992px){


    .section{

        padding:80px 0;

    }


    .section-title h2{

        font-size:2.3rem;

    }


}



@media(max-width:576px){


    .section{

        padding:60px 0;

    }


    .section-title h2{

        font-size:1.8rem;

    }


    .container{

        width:92%;

    }


}