```css
/* =====================================================
   AGENDA INTELIGENTE
===================================================== */

/* CONTENEDOR GENERAL */

.agenda-cards{

  max-width: 1450px;

  margin: 0 auto;

  padding: 40px 20px;
}


/* =====================================================
   TARJETA
===================================================== */

.evento{

  display: grid !important;

  grid-template-columns: 320px 1fr !important;

  gap: 32px !important;

  align-items: center !important;

  background: #071133 !important;

  border-radius: 26px !important;

  padding: 26px !important;

  margin-bottom: 42px !important;

  box-shadow: 0 8px 28px rgba(0,0,0,0.22) !important;

  overflow: hidden !important;
}


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

.evento-img{

  width: 100%;

  overflow: hidden;

  border-radius: 18px;
}

.evento-img img{

  width: 100%;

  height: 100%;

  max-width: 320px;

  max-height: 420px;

  object-fit: cover;

  display: block;

  border-radius: 18px;
}


/* =====================================================
   CUERPO
===================================================== */

.evento-cuerpo{

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 12px !important;
}


/* =====================================================
   TITULO
===================================================== */

.evento-titulo {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.15;
}

.evento-titulo a {
  color: #ff4f7a;
}


/* =====================================================
   DISTANCIA
===================================================== */

.evento-distancia {
  color: #ffd54a;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
}


/* =====================================================
   SALA
===================================================== */

.evento-sala {
  color: #ffffff;
  font-size: 1.3rem;
  margin-top: 15px;
}
.evento-sala strong {
  color: #ff4f7a;
}

/* =====================================================
   FECHA
===================================================== */

.evento-fecha {
  color: #cfd8dc;
  font-style: italic;
  font-size: 1.05rem;
  margin-top: 10px;
}


/* =====================================================
   RESUMEN
===================================================== */

.evento-resumen {
  color: #eeeeee;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: 15px;
}

.evento-direccion{
  color:#ffffff !important;
  opacity:.85;
  font-size:1rem;
  margin-top:8px;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px){

  .agenda-cards{

    padding: 18px 10px;
  }

  .evento{

    grid-template-columns: 1fr !important;

    gap: 16px !important;

    padding: 14px !important;

    border-radius: 20px !important;

    margin-bottom: 26px !important;
  }

  .evento-img{

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    border-radius: 16px;
  }

  .evento-img img{

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: 260px !important;

    object-fit: cover !important;

    border-radius: 16px !important;

    display: block !important;

    margin: 0 auto !important;
  }

  .evento-cuerpo{

    gap: 6px !important;
  }

  .evento-titulo{

    font-size: 1.38rem !important;

    line-height: 1.2 !important;

    margin-bottom: 8px !important;

    text-align: center !important;
  }

  .evento-distancia{

    font-size: 0.98rem !important;

    margin-bottom: 6px !important;

    text-align: center !important;
  }

  .evento-sala{

    font-size: 1rem !important;

    text-align: center !important;
  }

  .evento-fecha{

    font-size: 0.92rem !important;

    margin-bottom: 10px !important;

    text-align: center !important;
  }

  .evento-direccion{

    text-align:center !important;

    font-size:0.95rem !important;

    margin-top:8px !important;

    opacity:.90;

  }

  .evento-resumen{

    font-size: 0.95rem !important;

    line-height: 1.5 !important;
  }

}


/* =========================================
   SLIDER HOME
========================================= */

.path-frontpage .splide__slide {

  background: #ece8e4;

  border-radius: 30px;

  padding: 26px;

  box-sizing: border-box;

  opacity: 0.92;

  transition: opacity 0.4s ease;
}

.path-frontpage .splide__slide.is-active {

  opacity: 1;
}


/* Títulos */

.path-frontpage .splide__slide h2,
.path-frontpage .splide__slide h3,
.path-frontpage .splide__slide .views-field-title {

  font-size: 2rem;

  line-height: 1.2;

  font-weight: 700;

  color: #ff4f7b;

  margin-bottom: 22px;

  text-align: center;
}


/* Imágenes */

.path-frontpage .splide__slide img {

  width: 100%;

  border-radius: 22px;

  display: block;
}


/* Desktop */

@media (min-width: 769px) {

  .path-frontpage .premium-slider .splide__track {

    min-height:340px;
  }

  .path-frontpage .premium-slider .splide__slide img {

    height: 220px;

    object-fit: cover;
  }

}


/* Mobile */

@media (max-width: 768px) {

  .path-frontpage .splide__slide {

    padding: 18px;

    border-radius: 24px;
  }

  .path-frontpage .splide__slide h2,
  .path-frontpage .splide__slide h3,
  .path-frontpage .splide__slide .views-field-title {

    font-size: 1.5rem;
  }

.path-frontpage .premium-slider .splide__slide img {

  max-height: 220px;

  width: 100%;

  object-fit: contain;
}
}


/* Fondo home */

.path-frontpage {

  background:
    radial-gradient(
      circle at top center,
      #f4efe9 0%,
      #ebe5df 45%,
      #e2dbd4 100%
    );

  min-height: 100vh;
}
```
```css
/* =========================================
   FIX SCROLL HORIZONTAL MOBILE
========================================= */

html,
body{

  overflow-x:hidden !important;

  max-width:100% !important;
}


/* CONTENEDORES */

.page-wrapper,
.dialog-off-canvas-main-canvas,
.main-content,
.region-content{

  overflow-x:hidden !important;

  max-width:100% !important;
}


/* SLIDERS */

.splide,
.splide__track,
.splide__list,
.splide__slide{

  max-width:100% !important;
}


/* IMAGENES */

img{

  max-width:100%;

  height:auto;
}
```
/* ==========================================
   AGENDA INTELIGENTE - AJUSTES VISUALES
========================================== */

.evento-distance {
  color: #ffd54a !important;
  font-size: 1.25rem;
  font-weight: 700;
}

.evento-sala {
  color: #ffffff !important;
  font-size: 1.3rem;
}

.evento-sala strong {
  color: #ff4f7a !important;
}

.evento-cuando {
  color: #cfd8dc !important;
  font-size: 1.05rem;
  font-style: italic;
}

.evento-titulo a {
  color: #ff4f7a !important;
}

.evento-titulo {
  font-size: 2.4rem;
  font-weight: 700;
}
.evento-distance,
.evento-distance * {
  color: #ffd54a !important;
  opacity: 1 !important;
}
.evento-cuerpo{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.evento-distance{
  margin-top:12px;
  margin-bottom:22px;
}

.evento-sala{
  margin-top:0;
  font-size:1.35rem;
  color:#ffffff;
}

.evento-sala strong{
  color:#ff4f7b;
}

.evento-cuando{
  margin-top:12px;
  font-size:1.1rem;
  color:#ffffff;
  font-style:italic;
}
/* ==========================================
   BADGE CIUDAD
========================================== */

.evento{
  position: relative;
}

.evento-badge-ciudad{
  position: absolute;
  top: 22px;
  right: 22px;

  padding: 10px 22px;
  border-radius: 999px;

  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;

  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Menos de 20 km */

.badge-cerca{
  background: #ffd54a;
  color: #071133;
}

/* Entre 20 y 80 km */

.badge-media{
  background: #ff9800;
  color: #ffffff;
}

/* Más de 80 km */

.badge-lejos{
  background: #ff4f7b;
  color: #ffffff;
}
/* ==========================================
   CIUDAD INTEGRADA EN LA TARJETA
========================================== */

.evento-badge-ciudad{

  position: static !important;

  display: inline-block !important;

  align-self: flex-start !important;

  margin-bottom: 10px !important;

  padding: 8px 18px !important;

  border-radius: 999px !important;

  font-size: 0.95rem !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  letter-spacing: .5px !important;

  box-shadow: 0 4px 12px rgba(0,0,0,.20) !important;
}


/* móvil */

@media (max-width:768px){

  .evento-badge-ciudad{

    align-self: center !important;

    margin-bottom: 14px !important;

    font-size: 0.9rem !important;

    padding: 7px 16px !important;
  }

}
/* ==========================================
   LOADING GEOLOCALIZACIÓN
========================================== */

#tt-loading-overlay{

  position: fixed;

  inset: 0;

  background: rgba(7,17,51,.92);

  z-index: 999999;

  display: flex;

  align-items: center;

  justify-content: center;
}

.tt-loading-box{

  text-align: center;

  color: #ffffff;

  padding: 30px;
}

.tt-loading-title{

  font-size: 1.6rem;

  font-weight: 700;

  margin-top: 20px;

  margin-bottom: 10px;
}

.tt-loading-text{

  font-size: 1rem;

  color: #ffd54a;
}

.tt-spinner{

  width: 70px;

  height: 70px;

  border: 6px solid rgba(255,255,255,.2);

  border-top-color: #ff4f7a;

  border-radius: 50%;

  margin: 0 auto;

  animation: ttspin .9s linear infinite;
}

@keyframes ttspin{

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}