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

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

:root{
--red:#e10600;
--dark:#0d0d0d;
--blue:#00a2ff;
--green:#00b140;
}

body{
font-family:'Oswald',sans-serif;
background:#111;
color:white;
overflow-x:hidden;
}

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

.top-header{
background:#050505;
height:55px;
position:relative;
border-bottom:2px solid var(--red);
}

.logo{
position:absolute;
left:20px;
top:10px;
z-index:999;
}

.logo img{
height:45px;
width:auto;
object-fit:contain;
}

/* ========================= */
/* SPONSORS */
/* ========================= */

.sponsors-bar{

    background:#050505;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-bottom:1px solid #222;

}

.sponsors-container{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:50px;

    padding-left:180px;

    padding-right:30px;

    width:100%;

}

.sponsors-container img{

    max-height:55px;

    max-width:220px;

    width:auto;

    object-fit:contain;

    opacity:.95;

    transition:.3s;

}

.sponsors-container img:hover{

    transform:scale(1.05);

    opacity:1;

}

/* ========================= */
/* CATEGORIAS */
/* ========================= */

.categories-bar{
background:#111;
height:75px;
display:flex;
justify-content:center;
align-items:center;
}

.category-buttons{
display:flex;
gap:0;
}

.category-buttons a{
width:110px;
height:70px;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
color:white;
font-size:1rem;
font-weight:700;
transition:.3s;
margin-right:-12px;

clip-path:polygon(
15% 0,
100% 0,
85% 100%,
0 100%
);

}

.category-buttons a:last-child{
margin-right:0;
}

.category-buttons a:hover{
filter:brightness(1.15);
}

.gr86{
background:var(--red);
}

.gte{
background:var(--blue);
}

.tcr{
background:var(--green);
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{
background:var(--red);
height:60px;
display:flex;
justify-content:center;
align-items:center;
gap:50px;
}

.navbar a{
color:white;
text-decoration:none;
font-size:1.1rem;
transition:.3s;
}

.navbar a:hover{
color:black;
}

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

.hero{
position:relative;
height:650px;
background:url('imagenes/logoblog.jpg') center center;
background-size:cover;
background-repeat:no-repeat;
}

/* ========================= */
/* COUNTDOWN */
/* ========================= */

.countdown-section{
position:relative;
max-width:1200px;
margin:auto;
margin-top:-60px;
z-index:20;

display:flex;
justify-content:space-between;
align-items:center;

padding:40px;

border-top:5px solid var(--red);

background:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url('imagenes/fondocountdown.jpg');

background-size:cover;
background-position:center;
}

.countdown-left small{
color:#aaa;
}

.countdown-left h2{
font-size:3rem;
margin:10px 0;
}

.countdown-left p{
color:var(--red);
font-size:1.4rem;
}

.countdown{
display:flex;
gap:15px;
}

.countdown div{
width:90px;
height:90px;

background:#111;
border:2px solid var(--red);

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.countdown span{
font-size:2.5rem;
font-weight:700;
}

.countdown small{
color:#aaa;
}

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

footer{
background:black;
text-align:center;
padding:40px;
margin-top:80px;
border-top:3px solid var(--red);
}

footer h2{
font-size:2rem;
margin-bottom:10px;
}

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

@media(max-width:900px){

.top-header{
height:55px;
}

.logo{
left:10px;
top:10px;
}

.logo img{
height:35px;
}

/* SPONSORS */

.sponsors-bar{
height:auto;
padding:12px;
}

.sponsors-container{
gap:20px;
}

.sponsors-container img{
height:22px;
}

/* CATEGORIAS */

.categories-bar{
height:auto;
padding:10px 0;
}

.category-buttons{
gap:5px;
}

.category-buttons a{
width:70px;
height:35px;
margin:0;
clip-path:none;
border-radius:4px;
font-size:0.8rem;
}

/* NAVBAR */

.navbar{
gap:15px;
height:auto;
padding:10px;
flex-wrap:nowrap;
}

.navbar a{
font-size:0.8rem;
color:white !important;
white-space:nowrap;
}

/* HERO */

.hero{
height:280px;
}

/* COUNTDOWN */

.countdown-section{
flex-direction:column;
text-align:center;
gap:20px;
padding:20px;
margin-top:0;
}

.countdown-left h2{
font-size:2rem;
}

.countdown-left p{
font-size:1rem;
}

.countdown{
justify-content:center;
gap:5px;
}

.countdown div{
width:65px;
height:65px;
}

.countdown span{
font-size:1.4rem;
}

/* FOOTER */

footer{
padding:25px;
}

}
/* ========================= */
/* PROXIMOS EVENTOS */
/* ========================= */

.next-events{
    max-width:1400px;
    margin:50px auto;
    padding:0 20px;
}

.next-events h2{
    text-align:center;
    font-size:3rem;
    margin-bottom:35px;
}

.events-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.event-card{
    background:#111;
    border-radius:12px;
    overflow:hidden;
    transition:.25s;
}

.event-card:hover{
    transform:translateY(-5px);
}

.event-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.event-info{
    padding:20px;
    text-align:center;
}

.event-info span{
    display:block;
    font-size:.9rem;
    margin-bottom:8px;
    opacity:.8;
}

.event-info h3{
    font-size:2rem;
    margin-bottom:10px;
}

.event-info p{
    color:#ccc;
    margin-bottom:12px;
}

.event-info strong{
    display:block;
    font-size:1.2rem;
}

.event-card.event-gr86{
    border:2px solid #e10600;
}

.event-card.event-tcr{
    border:2px solid #00b140;
}

.event-card.event-gte{
    border:2px solid #00a2ff;
}

@media(max-width:1000px){

    .events-grid{
        grid-template-columns:1fr;
    }

}
.events-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:25px !important;
}

.event-card{
    min-height:400px !important;
    background:#111 !important;
    border-radius:12px !important;
    overflow:hidden !important;
}

.event-card img{
    width:100% !important;
    height:220px !important;
    object-fit:cover !important;
    display:block !important;
}
/* FORZAR TARJETAS PROXIMOS EVENTOS */

.next-events{
    max-width:1400px !important;
    margin:60px auto !important;
    padding:0 20px !important;
}

.events-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:25px !important;
    align-items:stretch !important;
}

.event-card{
    display:flex !important;
    flex-direction:column !important;

    background:#111 !important;

    border-radius:12px !important;

    overflow:hidden !important;
}

.event-card img{
    width:100% !important;
    height:220px !important;
    object-fit:cover !important;
    display:block !important;
}

.event-info{
    padding:20px !important;
    text-align:center !important;
}

.event-info h3{
    font-size:2rem !important;
    margin:10px 0 !important;
}

.event-info p{
    margin-bottom:10px !important;
}

.event-info strong{
    font-size:1.4rem !important;
}

@media(max-width:1000px){

    .events-grid{
        grid-template-columns:1fr !important;
    }

}