/* Índice de charlas: una página web común, no un canvas. Usa el sistema de diseño a
   escala 1 y tiene que leerse en un teléfono, porque es lo que abre el QR. */

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-000); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
/* Solo el relleno horizontal: el de .fx-container del sistema de diseño también
   anula el vertical, que cada bloque define abajo. */
.fx-container { box-sizing: border-box; padding-inline: 16px; }

.cabecera { display: flex; align-items: center; gap: 12px; padding-block: 24px; font: 600 18px/1 var(--font-sans); }
.cabecera img { border-radius: 10px; }
[data-theme="light"] .cabecera img { background: #0a0f1e; }

.contenido { flex: 1; padding-block: 48px 64px; }
h1 { margin: 0 0 12px; font: 600 40px/1.1 var(--font-sans); letter-spacing: -0.02em; }

.charlas { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 24px; }
.charla { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.charla p { margin: 0; }
.charla h2 { margin: 0; font: 600 28px/1.15 var(--font-sans); letter-spacing: -0.01em; }
.charla h2 a { color: inherit; text-decoration: none; }
.charla h2 a:hover { text-decoration: underline; text-decoration-color: var(--flux); }
.charla .resumen { font-size: 18px; line-height: 1.5; }
.charla .lugar { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.charla .fx-btn { align-self: flex-start; margin-top: 8px; height: 44px; font-size: 16px; }

.pie-indice { padding-block: 24px 32px; font: 400 14px/1.4 var(--font-mono); color: var(--ink-muted); }
.pie-indice a { color: inherit; }

@media (min-width: 640px) {
  .fx-container { padding-inline: var(--space-5); }
}
@media (min-width: 900px) {
  .contenido { padding-top: 96px; }
  h1 { font-size: 56px; }
}