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

.gs-badge{
display:inline-block;
padding:12px 18px;
border-radius:999px;
font-size:14px;
font-weight:var(--font-semibold);
letter-spacing:.3px;
}

/* HOY */

.gs-badge--hoy{
background:#1f9d55;
color:var(--color-text-blanco);
}

/* EMPIEZA PRONTO */

.gs-badge--empieza-pronto{
background:var(--color-primario-anaranjado);
color:var(--color-text-blanco);
}

/* EN CURSO */

.gs-badge--en-curso{
background:#1f9d55;
color:var(--color-text-blanco);
}

/* FUTURO */

.gs-badge--futuro{
background:#fa15e7;
color:var(--color-text-blanco);
}

/* PASADO */

.gs-badge--pasado{
background:var(--color-rojo);
color:var(--color-text-blanco);
}


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

.gs-evento-hero{
position:relative;
height:300px;
display:flex;
align-items:flex-end;
overflow:hidden;
}

/* HERO BACKGROUND */

.gs-evento-hero-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.gs-evento-hero-img{
width:100%;
height:100%;
object-fit:cover;
}

/* HERO OVERLAY */

.gs-evento-hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
90deg,
#3c67bc 0%,
#3c67bce6 40%,
rgb(78 115 185 / 50%) 70%,
rgba(78,115,185,0) 100%
);
z-index:1;
}

/* HERO CONTENT */

.gs-evento-hero-container{
position:relative;
display:flex;
max-width:var(--container-width);
width:90%;
margin:0 auto 30px auto;
z-index:2;
justify-content:flex-start;
}

.gs-evento-hero-actions{
display:flex;
gap:var(--space-sm);
align-items:center;
margin-bottom:var(--space-sm);
}

.gs-evento-hero-title{
color:var(--color-text-blanco);
font-size:var(--text-xl);
font-weight:var(--font-bold);
max-width:800px;
line-height:1.2;
}


/* =========================================================
META BAR
========================================================= */

.gs-meta-bar{
width:100%;
background:var(--color-blanco);
padding:12px 0;
}

.gs-meta-wrapper{
max-width:var(--container-width);
margin:auto;
display:flex;
justify-content:flex-end;
gap:12px;
}

.gs-meta-item{
flex:0 0 auto;
width:fit-content;
display:flex;
align-items:center;
gap:15px;
padding:12px 30px 12px 15px;
border-radius:var(--radius-xl);
background:#f2f2ff;
}

/* ICON */

.gs-meta-icon{
width:40px;
height:40px;
min-width:40px;
border-radius:50%;
background:var(--color-blanco);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.gs-meta-icon img{
width:20px;
height:20px;
object-fit:contain;
display:block;
}

/* TEXT */

.gs-meta-text{
display:flex;
flex-direction:column;
}

.gs-meta-label{
font-size:12px;
color:var(--color-text-cafe);
}

.gs-meta-value{
font-size:var(--text-base);
font-weight:var(--font-semibold);
margin-top:-4px;
color:var(--color-text-cafe);
}


/* =========================================================
EVENTO CONTENIDO
========================================================= */

.gs-evento-contenido{
padding:var(--space-lg) 0px;
}

.gs-evento-grid{
display:grid;
grid-template-columns:2fr 1.3fr;
gap:40px;
align-items:start;
}


/* =========================================================
IMAGEN PRINCIPAL
========================================================= */

.gs-evento-main-img{
border-radius:var(--radius-lg);
overflow:hidden;
margin-bottom:var(--space-lg);
}

.gs-evento-main-thumb{
width:100%;
height:auto;
display:block;
}


/* =========================================================
TEXTO EVENTO
========================================================= */

.gs-evento-texto{
font-size:var(--text-base);
line-height:1.7;
background:var(--color-blanco);
color:var(--color-text-cafe);
padding:var(--space-lg);
border-radius:var(--radius-lg);
}

.gs-evento-texto h2{
font-size:var(--text-lg);
font-weight:var(--font-semibold);
line-height:36px;
color:var(--color-text-cafe);
margin-bottom:20px;
}

.gs-evento-texto p{
font-size:var(--text-base);
color:var(--color-text-negro);
margin-bottom:24px;
text-align:justify;
}


/* =========================================================
SIDEBAR
========================================================= */

.gs-evento-sidebar{
position:sticky;
top:130px;
}


/* =========================================================
COMO LLEGAR
========================================================= */

.gs-como-llegar{
background:var(--color-blanco);
padding:var(--space-lg);
border-radius:var(--radius-lg);
}

.gs-como-llegar__titulo{
font-size:var(--text-lg);
color:var(--color-text-cafe);
font-weight:var(--font-semibold);
margin-bottom:8px;
}

.gs-como-llegar__descripcion{
margin-bottom:20px;
color:#666;
}

.gs-como-llegar__botones{
display:flex;
gap:var(--space-md);
flex-wrap:wrap;
}

.gs-como-llegar__botones .gs-btn {
    flex: 1;
    border: 1px solid #e7e7e7;
}


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



.gs-btn img{
width:30px;
height:30px;
object-fit:contain;
}

.gs-btn--outline{
background:var(--color-blanco);
border:1px solid #ddd;
}

.gs-btn--outline:hover{
background:#f0f0f0;
}

.gs-btn--primary{
background:#33ccff;
color:var(--color-text-blanco);
}

.gs-btn--primary:hover{
background:#4289e2;
}


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

@media (max-width:1024px){

.gs-meta-bar{
overflow:hidden;
}

.gs-meta-wrapper{
display:flex;
gap:12px;
justify-content:flex-start;
width:100%;
max-width:none;
margin:0;
padding-left:16px;
padding-right:16px;
overflow-x:auto;
flex-wrap:nowrap;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
scroll-snap-type:x mandatory;
box-sizing:border-box;
}

.gs-meta-wrapper::-webkit-scrollbar{
display:none;
}

.gs-meta-item{
flex:0 0 auto;
scroll-snap-align:start;
}

}


/* TABLET */

@media (max-width:900px){
.gs-evento-grid {
    gap: 30px;
}
.gs-evento-main-img {
    display: none;
}
.gs-evento-sidebar{
position:relative;
top:auto;
}

.gs-como-llegar{
margin-top:0px;
}

}


/* MOBILE */

@media (max-width:767px){

.gs-evento-grid{
grid-template-columns:1fr;
gap:var(--space-lg);
}
.gs-evento-hero{
height:270px;
}

.gs-evento-hero-title{
font-size:var(--text-lg);
}
.gs-evento-texto{
padding:var(--space-lg);
}
.gs-meta-item{
padding:10px 20px 10px 12px;
}

.gs-meta-icon{
width:34px;
height:34px;
min-width:34px;
}

.gs-meta-icon img{
width:16px;
height:16px;
}
}