/* ─── Google Fonts: Inter ────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC&family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* ─── Design Tokens ──────────────────────────── */
:root {
  --color-primary:        #152C53;
  --color-accent:         #305A96;
  --color-gray:           #f2f2f2;
  --color-white:          #ffffff;
  --color-dark:           #152C53;
  --color-dark-mid:       #152c53;
  --color-light:          #EBEBEB;
  --color-light-mid:      #C4C4C4;
  --color-text:           #1F1F1F;
  --color-text-secondary: #63666B;
  --color-text-muted:     #B2B2B2;
  --font-serif:           "Playfair Display", Georgia, "Times New Roman", serif;
  --font-serif-sc:        "Baskervville SC", Georgia, "Times New Roman", serif;
  --font-sans:            "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --container-max:        1440px;
  --container-pad:        clamp(1.25rem, 5vw, 3rem);
  --ease-smooth:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Guard global contra overflow horizontal en mobile ─────────
   body ya tenía overflow-x:hidden (app.css), pero el scroller raíz
   real es <html>; si algún elemento fuerza más ancho que el viewport,
   <html> sigue paneando. Este guard cierra ese hueco en todo el sitio. */
html {
  overflow-x: hidden;
}