/* HERO */
.hero-overlay-light {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(10, 28, 42, 0.4) 0%, rgba(0, 102, 128, 0.6) 100%);
}
.hero-badge {
  font-family: var(--font-editorial);
  color: var(--color-ixchel-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* MENÚ DE CATEGORÍAS */
.category-card {
  display: block;
  padding: 2rem 1rem;
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-sm);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none;
  color: var(--color-dark-blue);
}
.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--box-shadow-premium);
  background: var(--color-blue-coral);
  color: white;
}
.category-icon { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--color-turquoise); }
.category-card:hover .category-icon { color: white; }

/* REVISTA CARD */
.revista-card {
  border: none;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--box-shadow-sm);
  transition: var(--transition-smooth);
}
.revista-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-premium); }
.revista-card img { height: 220px; object-fit: cover; }

/* EXPERIENCIAS SWIPER */
.exp-card {
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: white;
  position: relative;
  overflow: hidden;
}
.exp-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* SECCIÓN IXCHEL */
.ixchel-section {
  background-color: var(--color-white-sand);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* TIMELINE */
.timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 3px solid var(--color-turquoise);
}
.timeline-item {
  margin-bottom: 2rem;
  position: relative;
}
.timeline-item::before {
  content: attr(data-year);
  position: absolute;
  left: -6.5rem;
  font-weight: bold;
  color: var(--color-coral);
  background: white;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
}