/* =========================================================================
   TELETÓN 20-30 · PÁGINAS DE EVENTO REGIONAL
   -------------------------------------------------------------------------
   Página de cara al donante. Sólo lo que no existe en el sistema base:
   la banda audiovisual del key visual y el momento de cifra.

   Depende de teleton.css (tokens) y convive con teleton-motion.css.
   ========================================================================= */

/* =========================================================================
   1. BANDA DE KEY VISUAL
   La pieza oficial es una composición cerrada: se muestra el cuadro completo,
   nunca recortada. El titular de la página vive debajo, sobre lienzo blanco,
   porque el key visual es claro y en movimiento — superponer texto encima
   sería una trampa de contraste.
   ========================================================================= */
.kv-band {
  position: relative;
  background: var(--t30-bg-subtle);
  border-bottom: 1px solid var(--t30-border-default);
  overflow: clip;
}
/* La proporción la fijan los atributos width/height de cada elemento: las
   tres piezas regionales no comparten exactamente el mismo encuadre
   (2.12:1 en Chiriquí, 2.34:1 en las otras dos). Nada se recorta. */
.kv-band__media,
.kv-band__still {
  display: block;
  width: 100%;
  height: auto;
}
.kv-band__still { display: none; }

.kv-band__caption {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  font-size: var(--text-xs);
  color: var(--t30-text-secondary);
}
/* Control de pausa del vídeo de fondo (guía §D.27, WCAG 2.2.2). Lo inserta
   el JS solo cuando hay un vídeo que se reproduce. */
.kv-band__control {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-inline-start: auto;
  min-height: 2.75rem; padding-inline: var(--space-3);
  background: var(--t30-bg-canvas); border: 1px solid var(--t30-border-strong);
  border-radius: var(--radius-pill);
  color: var(--t30-text-primary); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.kv-band__control:hover { border-color: #000; background: var(--t30-bg-subtle); }
.kv-band__control [data-when="paused"] { display: none; }
.kv-band__control.is-paused [data-when="paused"] { display: inline; }
.kv-band__control.is-paused [data-when="playing"] { display: none; }

/* =========================================================================
   1b. PROGRAMA DEL EVENTO — dos bloques musicales
   ========================================================================= */
.programme { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.programme__block {
  position: relative;
  padding: var(--space-8);
  border: 1px solid var(--t30-border-default); border-radius: var(--radius-lg);
  background: var(--t30-bg-canvas);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.programme__block:hover { border-color: var(--t30-color-black); box-shadow: var(--shadow-raised); }
.programme__title {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: .98; letter-spacing: -0.035em;
  text-transform: uppercase; max-width: 12ch;
}
.programme__title em { font-style: normal; color: var(--t30-action-donate-bg); }
.programme__meta { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--t30-border-default); font-size: var(--text-sm); color: var(--t30-text-secondary); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Cifra con unidad: numeral y unidad en un solo renglón */
.stat-lead__figure .unit { font-size: .42em; letter-spacing: -0.02em; vertical-align: baseline; margin-inline-start: .08em; }

/* Mesa de acción: tres pasos numerados en línea */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); counter-reset: paso; }
.steps > li { counter-increment: paso; display: grid; gap: var(--space-2); padding-top: var(--space-5); border-top: 2px solid var(--t30-color-black); }
.steps > li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-xl); line-height: 1; letter-spacing: -0.03em;
  color: var(--t30-action-donate-bg);
}
.section--inverse .steps > li { border-top-color: rgb(255 255 255 / .4); }
.section--inverse .steps > li::before { color: var(--campaign-accent); }

/* =========================================================================
   2. MOMENTO DE CIFRA
   Una sola cifra publicada, a tamaño de titular, con su fuente al pie.
   No es un contador: el número se escribe en el marcado y no se anima
   desde cero — sube desde su propia máscara, como el resto de la tipografía.
   ========================================================================= */
.stat-lead {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}
.stat-lead__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(5rem, 15vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--t30-action-donate-bg);
  margin: 0;
}
/* La máscara del ascenso lleva holgura vertical: con el espaciado de texto
   ampliado (WCAG 1.4.12, line-height 1.5) la cifra crecía más que la caja y
   perdía los trazos inferiores. */
.js .stat-lead__figure { display: block; overflow: hidden; padding-block: 0.16em; margin-block: -0.16em; }
.js .stat-lead__figure > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 900ms var(--ease-material, cubic-bezier(.22,1,.36,1));
}
.js .reveal.is-in .stat-lead__figure > span,
.js .stat-lead.is-in .stat-lead__figure > span { transform: none; }

.stat-lead__body { max-width: 46ch; }
/* Cifras largas (moneda + miles): escala menor para que el numeral entre
   completo en su columna; la máscara de entrada recorta lo que sobresale. */
.stat-lead__figure--long { font-size: clamp(3.25rem, 9.5vw, 8rem); letter-spacing: -0.045em; }

/* =========================================================================
   3. RESPONSIVE
   ========================================================================= */
@media (max-width: 64rem) {   /* tablet apaisada */
  .stat-lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 48rem) {   /* tablet vertical */
  .stat-lead__figure { font-size: clamp(4.5rem, 22vw, 8rem); }
  .stat-lead__figure--long { font-size: clamp(3rem, 14vw, 6rem); }
}
@media (max-width: 37.5rem) { /* móvil apaisado */
  .stat-lead__figure { font-size: clamp(4rem, 24vw, 6rem); }
  .stat-lead__figure--long { font-size: clamp(2.75rem, 15vw, 4.5rem); }
}
@media (max-width: 26.875rem) { /* móvil vertical */
  .stat-lead__figure { font-size: 4rem; }
  .stat-lead__figure--long { font-size: 2.75rem; }
}

/* =========================================================================
   4. MOVIMIENTO REDUCIDO
   Se sustituye la pieza en movimiento por su fotograma fijo. El JS además
   detiene el vídeo para que no se descargue ni reproduzca.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .kv-band__media { display: none; }
  .kv-band__still { display: block; }
  .js .stat-lead__figure { overflow: visible; }
  .js .stat-lead__figure > span { transform: none; transition: none; }
}

@media print {
  .kv-band__media { display: none; }
  .kv-band__still { display: block; }
}

/* =========================================================================
   5. FICHAS DE EQUIPO
   Los equipos del Proyecto Meta, nombrados. Cada pieza conserva su
   proporción real dentro de un cuadro fijo; `min-width/height: 0` evita
   que el mínimo automático del ítem de rejilla estire el cuadro.
   ========================================================================= */
.spec-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
}
.spec-grid li {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--t30-bg-canvas);
  border: 1px solid var(--t30-border-default);
  border-radius: var(--radius-lg);
  transition: border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.spec-grid li:hover { border-color: var(--t30-color-black); box-shadow: var(--shadow-raised); }
.spec-grid__frame {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3;
}
/* La imagen va en absoluto: así el 100% de alto se resuelve contra el cuadro
   4:3 y una pieza alta (incubadora abierta) ya no lo estira. Con todos los
   cuadros iguales, los nombres quedan alineados. */
.spec-grid__frame img {
  position: absolute; inset: 0; margin: auto;
  display: block;
  max-width: 100%; max-height: 100%;
  min-width: 0; min-height: 0;
  width: auto; height: auto;
  transition: transform var(--motion-choreo, 420ms) var(--ease-material, ease);
}
.spec-grid li:hover .spec-grid__frame img { transform: scale(1.05); }
.spec-grid__name { font-weight: var(--weight-semibold); margin-top: auto; }

/* =========================================================================
   6. CITA DESTACADA
   Una sola frase del documento del proyecto, a escala de titular.
   ========================================================================= */
.pull-quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.pull-quote__mark { color: var(--t30-action-donate-bg); }

@media (max-width: 64rem) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 48rem) { .programme { grid-template-columns: minmax(0, 1fr); } .programme__block { padding: var(--space-6); } .kv-band__control { margin-inline-start: 0; } }
@media (max-width: 37.5rem) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (max-width: 26.875rem) { .spec-grid li { padding: var(--space-4); } }

@media (prefers-reduced-motion: reduce) {
  .spec-grid li:hover .spec-grid__frame img { transform: none; }
}