/* ============================================================
   A|O — estilos globales: variables, reset y tipografías.
   Las mismas letras de la invitación impresa:
   Cinzel (romana en versalitas), Italianno (caligráfica),
   Questrial (texto). Caveat solo para las notitas a mano.
   La Italianno es solo para lo corto y grande (nombres, "¡Sí!"):
   toda frase va en Cormorant Garamond cursiva, que se lee de corrido.
   ============================================================ */

:root {
  /* Paleta: blanco y marfil, gris carbón, olivo de acento */
  --color-bg: #FBFAF6;
  --color-papel: #FFFFFF;
  --color-marfil: #F4F1E8;
  --color-borde: #E6E2D6;
  --color-text: #3A3A36;
  --color-text-muted: #7C7C72;
  --color-primary: #5C6B3A;
  --color-primary-dark: #45512B;
  --color-accent: #8E9A6A;
  --color-ink: #2B2B28;
  --color-error: #9C4A44;
  --color-cera: #56653A;
  --color-cera-oscura: #3C4727;
  --color-dorado: #C9A956;

  /* Tipografía */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-script: 'Italianno', cursive;
  --font-frase: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Questrial', system-ui, sans-serif;
  --font-nota: 'Caveat', cursive;
  --font-size-base: 1rem;

  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* Animaciones */
  --duration-fast: 0.2s;
  --duration-normal: 0.5s;
  --duration-slow: 1s;
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Pantalla: siempre un celular, aunque se abra en computadora */
  --pantalla-ancho: min(100vw, 480px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #E9E6DD;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Todo se puede deslizar, pero ninguna barra de scroll se ve. */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* El escenario: una pantalla de celular centrada (en computadora se ve
   como un teléfono). Cada parte de la invitación es una capa dentro. */
.escenario {
  position: relative;
  width: var(--pantalla-ancho);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-bg);
}

/* Telón: del color del papel; cubre la pantalla entre el sobre y el video. */
.telon {
  position: absolute;
  inset: 0;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  background: var(--color-bg);
  pointer-events: none;
}

/* Monograma A | O, el mismo de la invitación impresa */
.monograma {
  width: 176px;
  height: 88px;
  overflow: visible;
}

.monograma text {
  fill: var(--color-ink);
  font-family: var(--font-display);
  font-size: 58px;
}

.monograma line {
  stroke: var(--color-ink);
  stroke-width: 1;
}