/* ============================================================
   TengoTienda — Módulo: Eventos
   
   BUENAS PRÁCTICAS APLICADAS:
   1. Variables CSS con scope en .tt-eventos-section (no en :root)
      → Así no sobreescriben variables de blog, recursos u otros módulos.
   2. Clases genéricas renombradas con prefijo del módulo:
      .tt-carousel-wrapper  → .tt-ev-carousel-wrapper
      .tt-carousel-track    → .tt-ev-carousel-track
      .tt-carousel-dots     → .tt-ev-carousel-dots
      .tt-dot               → .tt-ev-dot
      .tt-badge             → .tt-ev-badge
      .tt-card-top          → .tt-ev-card-top
      .tt-card-titulo       → .tt-ev-card-titulo
      .tt-card-fecha        → .tt-ev-card-fecha
      .tt-card-desc         → .tt-ev-card-desc
      #tt-modal-overlay     → #tt-ev-modal-overlay
      #tt-modal             → #tt-ev-modal
   3. Todos los selectores están dentro de .tt-eventos-section
      como contexto raíz → aislamiento total del módulo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600&family=Inter:wght@400;500&display=swap');

/* ── Variables con scope de módulo (no contaminan :root) ────── */
.tt-eventos-section {
  --tt-ev-virtual:        #A855F7;
  --tt-ev-virtual-bg:     #F3E8FF;
  --tt-ev-presencial:     #F97316;
  --tt-ev-presencial-bg:  #FFEDD5;
  --tt-ev-hibrido:        #06b6d4;
  --tt-ev-hibrido-bg:     #cffafe;
  --tt-ev-text:           #111827;
  --tt-ev-muted:          #6b7280;
  --tt-ev-border:         #e5e7eb;
  --tt-ev-bg:             #ffffff;
  --tt-ev-transition:     all .22s ease;

  padding: 0;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Carrusel ───────────────────────────────────────────────── */
.tt-eventos-section .tt-ev-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

.tt-eventos-section .tt-ev-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* ── Slides: 2 visibles con gap incluido ────────────────────── */
.tt-eventos-section .tt-evento-slide {
  flex: 0 0 calc(50% - 10px);
  min-width: 0;
}

.tt-eventos-section .tt-evento-slide a,
.tt-eventos-section .tt-evento-slide > div:not(.tt-evento-card) {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

/* ── Card ───────────────────────────────────────────────────── */
.tt-eventos-section .tt-evento-card {
  background: var(--tt-ev-bg);
  border: 1px solid var(--tt-ev-border);
  border-left: 3px solid var(--tt-ev-card-accent, #e5e7eb);
  border-radius: 12px;
  padding: 18px 20px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  box-sizing: border-box;
  transition: var(--tt-ev-transition);
  cursor: pointer;
}

.tt-eventos-section .tt-evento-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

/* ── Badge + fecha ──────────────────────────────────────────── */
.tt-eventos-section .tt-ev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tt-eventos-section .tt-ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 2px 10px;
  border-radius: 20px;
}

.tt-eventos-section .tt-ev-badge::before {
  content: "•";
  font-size: 1em;
  line-height: 1;
}

.tt-eventos-section .tt-ev-badge--virtual    { background: var(--tt-ev-virtual-bg);    color: var(--tt-ev-virtual); }
.tt-eventos-section .tt-ev-badge--presencial { background: var(--tt-ev-presencial-bg); color: var(--tt-ev-presencial); }
.tt-eventos-section .tt-ev-badge--hibrido    { background: var(--tt-ev-hibrido-bg);    color: var(--tt-ev-hibrido); }

.tt-eventos-section .tt-ev-card-fecha {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--tt-ev-muted);
  white-space: nowrap;
}

/* ── Título ─────────────────────────────────────────────────── */
.tt-eventos-section .tt-ev-card-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--tt-ev-text);
  margin: 0 0 4px;
  padding: 0;
  border: none;
}

/* ── Descripción ────────────────────────────────────────────── */
.tt-eventos-section .tt-ev-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--tt-ev-muted);
  margin: 0;
}

/* ── Dots ───────────────────────────────────────────────────── */
.tt-eventos-section .tt-ev-carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}

.tt-eventos-section .tt-ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--tt-ev-transition);
}

.tt-eventos-section .tt-ev-dot:hover  { background: #9ca3af; }

.tt-eventos-section .tt-ev-dot.active {
  background: #111827;
  width: 28px;
  height: 8px;
  border-radius: 4px;
}

/* ── Sin eventos ────────────────────────────────────────────── */
.tt-eventos-section .tt-no-eventos {
  color: var(--tt-ev-muted);
  text-align: center;
  padding: 32px;
  font-size: .9rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .tt-eventos-section .tt-evento-slide { flex: 0 0 100%; }
}

/* ════════════════════════════════════════════════════════════
   MODAL DE EVENTO
   IDs con prefijo #tt-ev- → no colisiona con modales de
   otros módulos (blog, recursos, etc.)
════════════════════════════════════════════════════════════ */

body.tt-ev-modal-open { overflow: hidden; }

#tt-ev-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

#tt-ev-modal-overlay.visible                  { opacity: 1; pointer-events: all; }
#tt-ev-modal-overlay.visible #tt-ev-modal     { transform: translateY(0) scale(1); opacity: 1; }

#tt-ev-modal {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  font-family: 'Inter', -apple-system, sans-serif;
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}

#tt-ev-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s;
}

#tt-ev-modal-close:hover { background: #111827; color: #fff; border-color: #111827; }

#tt-ev-modal-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#tt-ev-modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #111827;
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

#tt-ev-modal-badge   { margin-bottom: 16px; display: inline-flex; }

#tt-ev-modal-desc {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
  margin: 14px 0 24px;
  padding: 0;
}

#tt-ev-modal-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 14px;
  background: #111827;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  margin-bottom: 14px;
}

#tt-ev-modal-btn:hover { background: #1f2937; transform: translateY(-1px); }

#tt-ev-modal-comunidad {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

@media (max-width: 540px) {
  #tt-ev-modal         { padding: 28px 20px 22px; }
  #tt-ev-modal-title   { font-size: 19px; }
}