/* Reset + elementos base */

/* Sin framework de cliente, cada clic en "semana anterior/siguiente" o
   "mes anterior/siguiente" recarga la página entera — esto le pide al
   navegador que difumine ese cambio en vez de dar el flash en blanco
   típico entre dos páginas. Progressive enhancement: donde no se soporta,
   simplemente no hace nada, la navegación sigue igual que antes. */
@view-transition {
  navigation: auto;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overscroll-behavior: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 999px; }

html {
  background: var(--color-background);
}

body {
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-manrope);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  -webkit-font-smoothing: antialiased;
}

body::selection, body *::selection {
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed);
}

/* ---- Tipografía ---- */

.text-display-hero {
  font-family: var(--font-manrope);
  font-size: var(--text-display-hero-mobile-size);
  line-height: var(--text-display-hero-mobile-line);
  letter-spacing: var(--text-display-hero-mobile-tracking);
  font-weight: var(--text-display-hero-weight);
}
@media (min-width: 768px) {
  .text-display-hero {
    font-size: var(--text-display-hero-size);
    line-height: var(--text-display-hero-line);
    letter-spacing: var(--text-display-hero-tracking);
  }
}

.text-headline-lg {
  font-family: var(--font-manrope);
  font-size: var(--text-headline-lg-size);
  line-height: var(--text-headline-lg-line);
  letter-spacing: var(--text-headline-lg-tracking);
  font-weight: var(--text-headline-lg-weight);
}
.text-headline-md {
  font-family: var(--font-manrope);
  font-size: var(--text-headline-md-size);
  line-height: var(--text-headline-md-line);
  letter-spacing: var(--text-headline-md-tracking);
  font-weight: var(--text-headline-md-weight);
}
.text-headline-sm {
  font-family: var(--font-manrope);
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line);
  letter-spacing: var(--text-headline-sm-tracking);
  font-weight: var(--text-headline-sm-weight);
}
.text-body-lg {
  font-family: var(--font-manrope);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
}
.text-body-md {
  font-family: var(--font-manrope);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  font-weight: var(--text-body-md-weight);
}
.text-body-sm {
  font-family: var(--font-manrope);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
}
.text-label-caps {
  font-family: var(--font-space-grotesk);
  font-size: var(--text-label-caps-size);
  line-height: var(--text-label-caps-line);
  letter-spacing: var(--text-label-caps-tracking);
  font-weight: var(--text-label-caps-weight);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.text-label-badge {
  font-family: var(--font-space-grotesk);
  font-size: var(--text-label-badge-size);
  line-height: var(--text-label-badge-line);
  letter-spacing: var(--text-label-badge-tracking);
  font-weight: var(--text-label-badge-weight);
}
.text-lowercase { text-transform: lowercase; }
.text-muted { color: var(--color-on-surface-variant); }
.text-outline { color: var(--color-outline); }

.accent-word {
  font-family: var(--font-instrument-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}

/* ---- Layout utilitario mínimo (solo lo que usan las plantillas) ---- */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grid { display: grid; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.w-full { width: 100%; }

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
@media (min-width: 1024px) {
  .page { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}