/* ============================================================
   pages/festival.css — Fundación 20 de Enero · Corazón Sabanero
   Estilos exclusivos de la página festival.
   Solo aquí van reglas que NO se repiten en ninguna otra página —
   .accordion-card, .callout, .process-steps, .check-list--2col,
   .status-badge--pendiente y .tag-pill-list ya viven en
   components.css / utilities.css y se reutilizan sin cambios.
   Requiere: tokens.css, layout.css, components.css, utilities.css
   ============================================================ */

/* ════════════════════════════════════════
   01 · APERTURA
════════════════════════════════════════ */
.festival-datos {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  margin-top:  var(--space-4);
  color:       var(--color-dorado-claro);
  font-weight: 600;
  font-size:   0.92rem;
}

.festival-hero-actions {
  display:       flex;
  gap:           var(--space-3);
  flex-wrap:     wrap;
  margin-top:    var(--space-6);
}

/* ════════════════════════════════════════
   02 · FÓRMULA DEL FESTIVAL
════════════════════════════════════════ */
.formula-list {
  justify-content: center;
  margin-top: var(--space-6);
}

/* ════════════════════════════════════════
   03 · ¿POR QUÉ BOGOTÁ? — cierre a modo de pull-quote
════════════════════════════════════════ */
.festival-pull-quote {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 500;
  font-size:   clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.4;
  color:       var(--c-brand-primary);
  text-align:  center;
  max-width:   700px;
  margin:      var(--space-8) auto 0;
}

/* ════════════════════════════════════════
   05 · LA EXPERIENCIA DEL VISITANTE
   Bloque emocional, no informativo: sin fondo, sin borde, sin sombra
   — el verbo (grande, serif) es el protagonista, no una tarjeta.
════════════════════════════════════════ */
.experience-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-8) var(--space-6);
  text-align:            center;
}
.experience-item__verb {
  display:        block;
  font-family:    var(--font-display);
  font-weight:    700;
  font-size:      1.4rem;
  color:          var(--c-brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom:  var(--space-2);
}
.experience-item__text {
  color:  var(--c-text-secondary);
  margin: 0;
}

/* ════════════════════════════════════════
   06 · IMPACTO ESPERADO
   Metas por confirmar, no resultados — por eso cada indicador lleva
   .status-badge--pendiente (el mismo punto neutro que "Por definir"
   en cualquier otra página) en vez del tratamiento dorado/oscuro de
   la franja de estadísticas reales de la home. Reutiliza .grid.grid--4
   de layout.css; solo se estiliza el contenido de cada celda.
════════════════════════════════════════ */
.impact-item {
  background:     var(--c-surface-alt);
  border-radius:  var(--radius);
  padding:        var(--space-5) var(--space-4);
  height:         100%;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  text-align:     center;
}
.impact-item__label {
  font-weight: 600;
  font-size:   0.92rem;
  color:       var(--c-text-primary);
}
.impact-item__unit {
  font-size:      0.76rem;
  color:          var(--c-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════
   09 · CATEGORÍAS DE PATROCINIO
   Extiende .accordion-card: el resumen colapsado muestra nombre +
   "Aporte: por definir" apilados (nunca en la misma línea — con
   nombres largos como "Patrocinador Gastronómico" no cabrían junto
   al badge sin envolver de forma torpe). Los beneficios usan
   .check-list--2col: Aliado Presentador tiene 11 ítems y en una sola
   columna sería, otra vez, un muro de texto incluso ya colapsadas
   las otras 4 tarjetas.
════════════════════════════════════════ */
.categoria-card > summary { align-items: flex-start; }

.categoria-card__summary-text {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
}

.categoria-card__desc {
  color:      var(--c-text-secondary);
  font-size:  0.92rem;
  margin:     0 0 var(--space-4);
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 680px) {
  .experience-grid { grid-template-columns: repeat(2, 1fr); }
  .festival-hero-actions { flex-direction: column; align-items: stretch; }
  .festival-hero-actions .btn { width: 100%; justify-content: center; }
}

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