.elementor-67 .elementor-element.elementor-element-bc6e2f9{--display:flex;}.elementor-67 .elementor-element.elementor-element-d8b6ac0{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-67 .elementor-element.elementor-element-b67aa81{--display:flex;}@media(max-width:1024px){.elementor-67 .elementor-element.elementor-element-d8b6ac0{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-67 .elementor-element.elementor-element-d8b6ac0{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-0a65ac0 *//* ===============================
   HERO FULL WIDTH OPTIMIZADO
=============================== */

.hero-featured {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  background: #fff;
}

.hero-banner {
  position: relative;
  height: 420px; /* 🔥 más delgado */
  overflow: hidden;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay suave para legibilidad */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 98, 235, 0.75),
    rgba(0, 190, 250, 0.45),
    transparent
  );
  display: flex;
  align-items: center;
  padding-left: 8%;
}

.hero-content {
  color: #fff;
  max-width: 500px;
}

.hero-content h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 20px;
}

/* Botón branding */
.hero-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, #00BEFA, #0062EB);
  color: #000;
  transition: all .3s ease;
}

.hero-btn:hover {
  background: linear-gradient(135deg, #0062EB, #004bb5);
  color: #fff;
  transform: translateY(-2px);
}

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

@media (max-width: 768px) {

  .hero-banner {
    height: 300px; /* aún más compacto en móvil */
  }

  .hero-overlay {
    padding-left: 5%;
    justify-content: center;
    text-align: center;
  }

  .hero-content {
    max-width: 90%;
  }

  .hero-btn {
    width: 100%;
    text-align: center;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-117571c *//* ================================
   EVENTS PREMIUM DESIGN
================================ */

.events-section {
  padding: 100px 20px;
  background: transparent;
}

.events-container {
  max-width: 1200px;
  margin: auto;
}

/* Header */

.events-header {
  text-align: center;
  margin-bottom: 70px;
}

.events-subtitle {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #ff2c74;
  margin-bottom: 10px;
}

.events-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #2c2f3f;
}

/* GRID */

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

/* CARD */

.event-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

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

/* IMAGE */

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

/* CONTENT */

.event-content {
  padding: 28px;
}

.event-content h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #2c2f3f;
  font-weight: 700;
}

/* DATE */

.event-date {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #667085;
  font-size: 14px;
  margin-bottom: 25px;
}

/* 🔥 ICONO CONTROLADO PERFECTAMENTE */

.event-date-icon-wrapper {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.event-date-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* FOOTER */

.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-organizer small {
  color: #98a2b3;
  display: block;
  font-size: 12px;
}

.event-organizer strong {
  color: #ff2c74;
  font-size: 14px;
}

/* BOTON */

.buy-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 2px solid #4f46e5;
  color: #4f46e5;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: 0.3s ease;
}

.buy-btn:hover {
  background: #4f46e5;
  color: #fff;
}

/* RESPONSIVE */

@media (max-width: 1024px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
  }

  .event-card img {
    height: 260px;
  }

  .events-section {
    padding: 70px 20px;
  }
}/* End custom CSS */
/* Start custom CSS *//* ================================
CONTENEDOR DE EVENTOS
================================ */

.events-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
max-width:1200px;
margin:auto;
padding:20px;
align-items:stretch;
}


/* ================================
EVENT CARD
================================ */

.event-card{
display:flex;
flex-direction:column;
border-radius:14px;
overflow:hidden;
height:100%;
transition:transform .25s ease, box-shadow .25s ease;
}

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


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

.event-card img{
width:100%;
aspect-ratio:16 / 9;
object-fit:cover;
display:block;
transition:transform .4s ease;
}

.event-card:hover img{
transform:scale(1.05);
}


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

.event-content{
padding:18px;
display:flex;
flex-direction:column;
gap:10px;
flex-grow:1;
}


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

.event-content h3{
line-height:1.35;
margin:0;

/* evita que rompa el diseño */
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}


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

.event-date{
display:flex;
align-items:center;
gap:8px;
}

.event-date img{
width:16px;
height:16px;
}


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

.event-footer{
margin-top:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
flex-wrap:wrap;
}


/* ================================
BOTON
================================ */

.buy-btn{
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
flex-shrink:0;
}


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

@media(max-width:768px){

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

}/* End custom CSS */