/****************************************************************/
/*                                                              */
/*      CLUB DEPORTIVO SAN LORENZO                              */
/*      NORLOSOFT                                               */
/****************************************************************/

:root{

    --azul:#071E3D;

    --azul2:#0B2E59;

    --rojo:#D61F26;

    --rojoHover:#B8181F;

    --gris:#F5F6F8;

    --grisOscuro:#555;

    --blanco:#FFFFFF;

    --negro:#202020;

    --radio:12px;

    --sombra:0 8px 25px rgba(0,0,0,.12);

    --transicion:.35s;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:#fff;

    color:#222;

    font-family:

    "Segoe UI",

    Arial,

    Helvetica,

    sans-serif;

    font-size:16px;

    line-height:1.6;

}

a{

    text-decoration:none;

    transition:all .3s;

}

img{

    max-width:100%;

}

.container{

    max-width:1320px;

}


h1{

    font-size:52px;

    font-weight:800;

    letter-spacing:1px;

}

h2{

    font-size:38px;

    font-weight:700;

    color:var(--azul);

}

h3{

    font-size:30px;

    font-weight:700;

}

h4{

    font-size:24px;

    font-weight:600;

}

h5{

    font-size:20px;

    font-weight:600;

}

p{

    color:#666;

}

.titulo-seccion{

    margin-bottom:40px;

    position:relative;

    padding-left:15px;

}

.titulo-seccion:before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:5px;

    height:40px;

    background:var(--rojo);

}

.barra-superior{

    background:var(--azul);

    color:#FFF;

    padding:8px 0;

    font-size:14px;

}

.barra-superior a{

    color:#FFF;

    margin-left:15px;

}

.barra-superior a:hover{

    color:#FFCC00;

}


header{

    background:white;

    padding:30px 0;

    border-bottom:1px solid #EEE;

}

.logo{

    width:110px;

    transition:.4s;

}

.logo:hover{

    transform:scale(1.05);

}

header h1{

    color:var(--azul);

    margin-bottom:0;

}

header h5{

    color:var(--rojo);

    font-weight:400;

}

.menu-principal{

    background:var(--azul);

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

}

.menu-principal .nav-link{

    color:white !important;

    font-weight:600;

    padding:18px;

    transition:.35s;

}

.menu-principal .nav-link:hover{

    color:#FFCC00 !important;

}

.menu-principal .dropdown-menu{

    border:none;

    border-radius:10px;

    box-shadow:var(--sombra);

}

.menu-principal .dropdown:hover .dropdown-menu,
.menu-principal .dropdown:focus-within .dropdown-menu{

    display:block;

}

.menu-principal .dropdown-menu{

    z-index:2000;

}

.menu-principal .dropdown-item{

    padding:12px 20px;

}

.menu-principal .dropdown-item:hover{

    background:var(--rojo);

    color:white;

}

.btn-danger{

    background:var(--rojo);

    border:none;

    border-radius:40px;

    padding:12px 30px;

    font-weight:bold;

    transition:.35s;

}

.btn-danger:hover{

    background:var(--rojoHover);

    transform:translateY(-2px);

}

.card{

    border:none;

    border-radius:var(--radio);

    overflow:hidden;

    box-shadow:var(--sombra);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}

.card-header{

    font-weight:bold;

    font-size:22px;

}

.card img{

    transition:.4s;

}

.card:hover img{

    transform:scale(1.06);

}

.accesos{

    margin-top:-50px;

    position:relative;

    z-index:999;

}

.acceso{

    background:white;

    padding:30px;

    border-radius:15px;

    text-align:center;

    box-shadow:var(--sombra);

    transition:.35s;

    cursor:pointer;

}

.acceso:hover{

    transform:translateY(-10px);

}

.acceso i{

    font-size:42px;

    color:var(--rojo);

    margin-bottom:15px;

}

.acceso h5{

    color:var(--azul);

}


/****************************************************************/
/* HERO                                                         */
/****************************************************************/

.hero{

    position:relative;

}

.hero-img{

    height:700px;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

        to right,

        rgba(7,30,61,.90),

        rgba(7,30,61,.45),

        rgba(0,0,0,.20)

    );

}

.carousel-caption{

    left:8%;

    right:auto;

    top:50%;

    transform:translateY(-50%);

    text-align:left;

    max-width:650px;

    bottom:auto;

}

.carousel-caption h1{

    color:white;

    font-size:70px;

    font-weight:900;

    line-height:1;

    text-transform:uppercase;

    margin-bottom:30px;

}

.carousel-caption p{

    color:white;

    font-size:24px;

    margin-bottom:40px;

}

.carousel-caption .btn{

    font-size:18px;

    padding:18px 40px;

}

.carousel-indicators button{

    width:14px;

    height:14px;

    border-radius:50%;

}

/****************************************************************/
/* NOTICIAS                                                     */
/****************************************************************/

.noticia{

    overflow:hidden;

    cursor:pointer;

}

.noticia img{

    height:230px;

    object-fit:cover;

}

.noticia .card-body{

    padding:25px;

}

.noticia h5{

    color:var(--azul);

    min-height:60px;

}

.noticia p{

    min-height:70px;

}

.noticia small{

    color:#888;

}

.noticia:hover{

    transform:translateY(-12px);

}

.noticia:hover h5{

    color:var(--rojo);

}

/****************************************************************/
/* PARTIDO                                                      */
/****************************************************************/

.partido{

    border-radius:18px;

    overflow:hidden;

}

.partido .card-header{

    background:var(--azul);

    color:white;

    font-size:24px;

    padding:18px;

}

.partido h5{

    color:var(--rojo);

    text-align:center;

    font-size:28px;

}

.partido h2{

    text-align:center;

    color:var(--azul);

    font-size:55px;

    margin:15px 0;

}

.partido img{

    transition:.4s;

}

.partido img:hover{

    transform:scale(1.1);

}

/****************************************************************/
/* BANNER                                                       */
/****************************************************************/

.banner-socio{

    background:

    linear-gradient(

        135deg,

        var(--azul),

        var(--azul2)

    );

    color:white;

    padding:70px 0;

}

.banner-socio h2{

    color:white;

    font-size:48px;

}

.banner-socio p{

    color:#DDD;

    font-size:20px;

}

.banner-socio .btn{

    background:white;

    color:var(--azul);

    font-weight:bold;

}

/****************************************************************/
/* EVENTOS                                                      */
/****************************************************************/

.evento{

    background:white;

    border-radius:15px;

    padding:35px;

    box-shadow:var(--sombra);

    transition:.35s;

}

.evento:hover{

    transform:translateY(-8px);

}

.evento h5{

    color:var(--azul);

}

/****************************************************************/
/* FIXTURE                                                      */
/****************************************************************/

.fixture-item{

    padding:20px 0;

}

.fixture-item h5{

    color:var(--rojo);

}

.fixture-item strong{

    color:var(--azul);

}

/****************************************************************/
/* RESULTADOS                                                   */
/****************************************************************/

.resultado{

    padding:20px 0;

}

.resultado h5{

    color:var(--azul);

}

.resultado strong{

    font-size:24px;

    color:var(--rojo);

}

/****************************************************************/
/* TABLA                                                        */
/****************************************************************/

.table{

    margin:0;

}

.table thead{

    background:var(--azul);

    color:white;

}

.table tbody tr{

    transition:.3s;

}

.table tbody tr:hover{

    background:#F8F8F8;

}

.table td{

    vertical-align:middle;

}

/****************************************************************/
/* GOLEADORES                                                   */
/****************************************************************/

.rounded-circle{

    border:6px solid white;

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

}

.card-body h3{

    font-size:45px;

    color:var(--rojo);

}

.card-body p{

    text-transform:uppercase;

    letter-spacing:1px;

}

/****************************************************************/
/* ANIMACIONES                                                  */
/****************************************************************/

@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

section{

    animation:aparecer .8s;

}

/****************************************************************/
/* GALERIA                                                      */
/****************************************************************/

.galeria{

    border-radius:15px;

    overflow:hidden;

    cursor:pointer;

    transition:.45s;

    box-shadow:var(--sombra);

}

.galeria:hover{

    transform:scale(1.04);

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

}

.galeria img{

    transition:.5s;

}

.galeria:hover img{

    transform:scale(1.10);

}

/****************************************************************/
/* SPONSORS                                                     */
/****************************************************************/

.sponsor{

    opacity:.65;

    transition:.35s;

    max-height:90px;

    filter:grayscale(100%);

}

.sponsor:hover{

    opacity:1;

    transform:scale(1.10);

    filter:none;

}

/****************************************************************/
/* ESTADISTICAS                                                 */
/****************************************************************/

.estadisticas{

    background:

    linear-gradient(

    rgba(7,30,61,.95),

    rgba(7,30,61,.95)

    ),

    url("/club-static/public/xchat/img/estadisticas.jpg");

    background-size:cover;

    background-position:center;

    padding:90px 0;

    color:white;

}

.estadisticas h1{

    font-size:70px;

    font-weight:900;

    color:white;

}

.estadisticas p{

    color:#DDD;

    font-size:22px;

    text-transform:uppercase;

}

/****************************************************************/
/* REDES                                                        */
/****************************************************************/

.red-social{

    border-radius:15px;

    transition:.35s;

}

.red-social:hover{

    transform:translateY(-10px);

}

.red-social i{

    transition:.35s;

}

.red-social:hover i{

    transform:rotate(8deg) scale(1.20);

}

/****************************************************************/
/* CONTACTO                                                     */
/****************************************************************/

form .form-control{

    border-radius:10px;

    padding:14px;

    border:1px solid #DDD;

    transition:.30s;

}

form .form-control:focus{

    border-color:var(--rojo);

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

}

/****************************************************************/
/* FOOTER                                                       */
/****************************************************************/

.footer{

    background:#061629;

    color:white;

    padding-top:70px;

}

.footer h4{

    color:white;

    margin-bottom:25px;

}

.footer p{

    color:#CCC;

}

.footer a{

    color:#DDD;

}

.footer a:hover{

    color:white;

    padding-left:8px;

}

.footer hr{

    border-color:#34495E;

}

.footer i{

    color:var(--rojo);

    margin-right:10px;

}

/****************************************************************/
/* BOTON TOP                                                    */
/****************************************************************/

.btn-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    background:var(--rojo);

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    box-shadow:var(--sombra);

    z-index:9999;

}

.btn-top:hover{

    background:var(--azul);

}

/****************************************************************/
/* WHATSAPP                                                     */
/****************************************************************/

.btn-whatsapp{

    position:fixed;

    left:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25D366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

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

    z-index:9999;

}

.btn-whatsapp:hover{

    transform:scale(1.10);

}

/****************************************************************/
/* TABLET                                                       */
/****************************************************************/

@media(max-width:992px){

.hero-img{

height:500px;

}

.carousel-caption h1{

font-size:45px;

}

header{

text-align:center;

}

.logo{

margin-bottom:20px;

}

}

/****************************************************************/
/* MOVIL                                                        */
/****************************************************************/

@media(max-width:768px){

.hero-img{

height:350px;

}

.carousel-caption{

left:25px;

right:25px;

}

.carousel-caption h1{

font-size:30px;

}

.carousel-caption p{

font-size:16px;

}

.acceso{

padding:18px;

}

.banner-socio h2{

font-size:34px;

}

.estadisticas h1{

font-size:45px;

}

}

/****************************************************************/
/* PANTALLAS 4K                                                 */
/****************************************************************/

@media(min-width:1600px){

.container{

max-width:1500px;

}

.hero-img{

height:850px;

}

.carousel-caption{

max-width:800px;

}

.carousel-caption h1{

font-size:90px;

}

}

/****************************************************************/
/* PUBLICO AMPLIADO                                             */
/****************************************************************/

.info-panel{
    background:white;
    border:1px solid #E6EAF0;
    border-radius:15px;
    padding:32px;
    box-shadow:var(--sombra);
}

.info-panel h3{
    color:var(--azul);
    margin-bottom:18px;
}

.info-panel p{
    text-transform:none;
    letter-spacing:0;
}

.public-stat{
    min-height:120px;
    padding:22px;
    border-radius:14px;
    background:var(--gris);
    border-left:5px solid var(--rojo);
}

.public-stat strong{
    display:block;
    color:var(--azul);
    font-size:24px;
}

.public-stat span{
    color:#666;
}

.match-card{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
    margin:18px 0;
    text-align:center;
}

.match-card img{
    width:72px;
    height:72px;
    object-fit:contain;
}

.match-card strong{
    display:block;
    color:var(--azul);
    margin-top:8px;
}

.match-card span{
    color:var(--rojo);
    font-size:28px;
    font-weight:900;
}

.person-card,
.staff-card,
.scorer-card,
.team-card{
    height:100%;
    background:white;
    border:1px solid #E6EAF0;
    border-radius:15px;
    padding:24px;
    box-shadow:var(--sombra);
}

.person-card{
    text-align:center;
}

.person-card img,
.scorer-card img{
    width:118px;
    height:118px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid white;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    margin-bottom:16px;
}

.person-card h5,
.staff-card h5,
.scorer-card h5,
.team-card h4{
    color:var(--azul);
}

.person-card p,
.staff-card p,
.scorer-card span,
.team-card p,
.team-card li,
.team-card small{
    text-transform:none;
    letter-spacing:0;
}

.staff-card span,
.team-card span{
    display:inline-block;
    margin-bottom:12px;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(214,31,38,.10);
    color:var(--rojo);
    font-weight:700;
}

.scorer-card{
    text-align:center;
}

.scorer-card strong{
    display:block;
    color:var(--rojo);
    font-size:46px;
    line-height:1;
}

.team-card ul{
    list-style:none;
    padding:0;
    margin:18px 0 0;
}

.team-card li{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-top:1px solid #EDF0F4;
}

.team-card li strong{
    color:var(--rojo);
}

.gallery-tile,
.video-tile{
    display:block;
    height:100%;
    overflow:hidden;
    border-radius:15px;
    background:white;
    box-shadow:var(--sombra);
}

.gallery-tile{
    position:relative;
}

.gallery-tile img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.4s;
}

.gallery-tile:hover img{
    transform:scale(1.06);
}

.gallery-tile span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:14px 18px;
    color:white;
    font-weight:700;
    background:linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0));
}

.video-tile{
    padding:30px;
    color:var(--azul);
    border:1px solid #E6EAF0;
}

.video-tile i{
    color:var(--rojo);
    font-size:46px;
    margin-bottom:18px;
}

.video-tile strong,
.video-tile span{
    display:block;
}

.video-tile span{
    color:#666;
    margin-top:8px;
}

.lead{
    text-transform:none;
    letter-spacing:0;
}

@media(max-width:768px){
    body{
        overflow-x:hidden;
    }

    .barra-superior,
    .menu-principal{
        text-align:center;
    }

    .menu-principal .navbar-brand,
    .menu-principal .nav-link{
        white-space:normal;
    }

    header h1{
        font-size:36px;
        overflow-wrap:anywhere;
    }

    .titulo-seccion{
        font-size:28px;
    }

    .acceso{
        min-height:150px;
    }

    .match-card{
        grid-template-columns:1fr;
    }

    .gallery-tile img{
        height:220px;
    }
}