:root {
  /* Scale factor: 1 by default (viewport >= 390, Canva mobile reference).
     Scaled down via media query for smaller viewports. */
  --u: 1;

  /* === PALETA (extraída del Canva 2026-04-24) === */
  --color-bg: #F3EFE9;                 /* cream warm — fondo principal */
  --color-text: #0E1318;               /* casi negro — cuerpo */

  --color-heading-blue: #345097;       /* azul títulos: NOS CASAMOS, DESTINO, ITINERARIO... */
  --color-name-burgundy: #700303;      /* burgundy: MARIANA & JUAN, horas itinerario */
  --color-name-dark-burgundy: #4C0000; /* variante más oscura */
  --color-gold: #B2A560;               /* dorado claro: líneas decorativas, MEY & SOUL, labels */
  --color-gold-dark: #584110;          /* dorado oliva: subtítulos uppercase, fechas ticket */
  --color-blue-muted: #304254;         /* azul apagado: separadores, iconos cámara */

  /* === TIPOGRAFÍA === */
  --font-heading: 'Yeseva One', 'Playfair Display', Georgia, serif;
  --font-body-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* === ESPACIADOS === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* === CONTENEDORES === */
  --container-max: 680px;              /* el diseño Canva centra contenido en ~680-800px incluso en desktop */
  --container-pad-mobile: 1.25rem;
  --container-pad-desktop: 2rem;

  /* === BREAKPOINTS (valores de referencia) === */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

/* Tipografía base (herencia para todas las secciones) */
h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-heading-blue);
  line-height: 1.1;
  font-weight: 400;
}

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }

p { color: var(--color-text); }

/* Subtítulos uppercase (Oswald Bold) */
.subtitle-upper {
  font-family: var(--font-body-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

/* Links sin decoración por defecto */
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }

/* Utility: contenedor central */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-desktop); }
}

/* Focus visible accesible */
:focus-visible {
  outline: 2px solid var(--color-heading-blue);
  outline-offset: 3px;
}

/* === Responsive scale: shrink design when viewport < 390 === */
@media (max-width: 389px) { :root { --u: 0.97; } }
@media (max-width: 380px) { :root { --u: 0.95; } }
@media (max-width: 370px) { :root { --u: 0.92; } }
@media (max-width: 360px) { :root { --u: 0.90; } }
@media (max-width: 350px) { :root { --u: 0.87; } }
@media (max-width: 340px) { :root { --u: 0.85; } }
@media (max-width: 330px) { :root { --u: 0.82; } }
@media (max-width: 320px) { :root { --u: 0.80; } }