/* =============================================================================
   XV Años · María José — Hoja de estilos
   -----------------------------------------------------------------------------
   Mobile-first: los estilos base son para pantallas pequeñas (desde 360px) y
   las media queries (min-width) van agregando/ajustando para tablet/desktop.

   Las variables de color/tipografía de aquí abajo son los VALORES POR DEFECTO.
   js/main.js los sobreescribe en tiempo de carga con lo que venga en
   data/config.js (theme: {...}), así que para cambiar la paleta de una
   invitación normalmente basta con editar el config, no este archivo.
   ============================================================================= */

:root {
  --color-primary: #B08D57;
  --color-primary-dark: #8A6D3F;
  --color-secondary: #E8C7C0;
  --color-secondary-dark: #C99B92;
  --color-bg: #FFF8F3;
  --color-surface: #FFFFFF;
  --color-text: #3A2E2A;
  --color-text-light: #7A6A63;

  --font-title: 'Playfair Display', Georgia, serif;
  --font-script: 'Great Vibes', cursive;
  --font-body: 'Lato', Arial, sans-serif;

  --container-width: 640px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(58, 46, 42, 0.12);
}

/* ---------------------------------------------------------------------------
   Reset básico
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Textura sutil de puntos sobre el color base — le da algo de textura
     "de papel" a las zonas vacías sin distraer del contenido. */
  background-color: var(--color-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(176, 141, 87, 0.14) 1px, transparent 0);
  background-size: 24px 24px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--color-primary-dark); }

/* Foco visible accesible en todo elemento interactivo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 3px;
}

/* Mientras el sobre está visible, evita el scroll del fondo */
body.is-locked { overflow: hidden; height: 100%; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: 4rem 0;
}
.section--alt { background: var(--color-surface); }

.section__eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}
.section__title {
  font-family: var(--font-title);
  text-align: center;
  font-size: 1.9rem;
  margin: 0 0 1.5rem;
  color: var(--color-text);
}

/* Divisor ornamental — línea + rombo dorado, usado bajo los títulos de
   sección para romper la monotonía de bloques apilados. */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 220px;
  margin: 0 auto 2rem;
  color: var(--color-primary);
  font-size: 1rem;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-secondary-dark), transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 2px solid var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn--outline {
  background: transparent;
  color: var(--color-primary-dark);
}

/* =============================================================================
   1. SOBRE — pantalla inicial
   ============================================================================= */
.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-bg) 60%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.envelope-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.envelope-screen__particles {
  position: absolute;
  inset: 0;
  z-index: -1; /* .envelope-screen tiene z-index propio: crea su propio contexto de apilamiento */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.envelope {
  position: relative;
  width: min(80vw, 300px);
  aspect-ratio: 3 / 2;
  perspective: 1200px;
}
.envelope__body {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.envelope__body::before,
.envelope__body::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
/* Triángulos que simulan los pliegues laterales del sobre */
.envelope__body::before {
  left: 0;
  border-width: 0 0 100% 50%;
  border-color: transparent transparent var(--color-secondary) transparent;
}
.envelope__body::after {
  right: 0;
  border-width: 100% 50% 0 0;
  border-color: var(--color-secondary) transparent transparent transparent;
}
.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 3;
}

/* Listón HORIZONTAL a la altura del sello (no vertical: un listón de
   arriba a abajo cruzaba justo por encima del saludo y tapaba el texto).
   Se dibuja íntegramente con formas CSS (sin imágenes) y "se desata" —
   los lazos y las colas se separan y se desvanecen — cuando se abre. */
.envelope__ribbon {
  position: absolute;
  inset: 0;
  z-index: 3; /* va sobre la solapa, como un listón físico atado por fuera */
  pointer-events: none;
}
.envelope__ribbon-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%; /* mismo punto que el sello/moño */
  height: 13%;
  transform: translateY(-50%) scaleX(1);
  transform-origin: center;
  background: linear-gradient(90deg, var(--color-secondary-dark), var(--color-secondary));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
/* .envelope__bow es solo un punto de referencia (mismo centro que el
   sello); cada pieza se centra en ese punto con margin negativo y luego
   se desplaza con translate() — así el translate queda en rem "reales",
   sin mezclarse con el porcentaje del tamaño de cada pieza. */
.envelope__bow {
  position: absolute;
  left: 50%;
  top: 42%; /* mismo punto que el sello: la solapa converge ahí */
}
.envelope__bow-loop {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.3rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -1.15rem;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
  box-shadow: var(--shadow-soft);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.45s ease;
}
/* Los lazos se alejan del centro (donde los tapa el sello) para que se
   asomen claramente a los lados, como orejas del moño. */
.envelope__bow-loop--left {
  border-radius: 50% 50% 4% 50%;
  transform: translate(-1.65rem, -0.35rem) rotate(-32deg);
}
.envelope__bow-loop--right {
  border-radius: 50% 50% 50% 4%;
  transform: translate(1.65rem, -0.35rem) rotate(32deg);
}
.envelope__bow-tail {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  height: 1.9rem;
  margin: 0 0 0 -0.375rem;
  background: var(--color-secondary);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.45s ease;
}
.envelope__bow-tail--left { transform: translate(-0.85rem, 0.55rem) rotate(-16deg); }
.envelope__bow-tail--right { transform: translate(0.85rem, 0.55rem) rotate(16deg); }
.envelope__bow-knot {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin: -0.525rem 0 0 -0.525rem;
  background: var(--color-secondary-dark);
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
/* Al abrir: el listón se afloja y el moño se desata hacia los lados. */
.envelope.is-open .envelope__ribbon-strip {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
.envelope.is-open .envelope__bow-loop--left {
  transform: translate(-4.2rem, -1.8rem) rotate(-90deg);
  opacity: 0;
}
.envelope.is-open .envelope__bow-loop--right {
  transform: translate(4.2rem, -1.8rem) rotate(90deg);
  opacity: 0;
}
.envelope.is-open .envelope__bow-tail--left {
  transform: translate(-2.4rem, 2.6rem) rotate(-45deg);
  opacity: 0;
}
.envelope.is-open .envelope__bow-tail--right {
  transform: translate(2.4rem, 2.6rem) rotate(45deg);
  opacity: 0;
}
.envelope.is-open .envelope__bow-knot {
  opacity: 0;
  transform: rotate(45deg) scale(0.3);
}

.envelope__letter {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  height: 78%;
  /* Antes era casi blanco (--color-bg, muy pálido); un tono rosa palo más
     saturado le da más presencia como tarjeta/carta. */
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-secondary) 100%);
  border-radius: 4px;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  text-align: center;
  padding: 1rem;
  padding-bottom: 0.25rem; /* el saludo baja un poco más, cerca del borde inferior */
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
  z-index: 2;
}
/* Sello sobre la solapa — ver comentario en el HTML: la solapa es un
   triángulo que converge justo al centro, así que cualquier contenido
   centrado dentro de la carta quedaría tapado hasta muy abajo. En vez de
   eso, el monograma va como un sello ENCIMA de la solapa (z-index mayor). */
.envelope__seal {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: var(--color-surface);
  /* Doble anillo (como un medallón/sello de cera) en vez de un borde simple. */
  border: 2px solid var(--color-secondary);
  outline: 1px solid var(--color-primary);
  outline-offset: 2px;
  color: var(--color-primary-dark);
  font-family: var(--font-script);
  font-size: 1.05rem; /* más chico a propósito: si la tipografía cursiva no
    carga a tiempo, la de reserva del navegador puede ser bastante más ancha,
    y overflow:hidden más abajo solo recorta — mejor dejar margen de sobra */
  line-height: 1;
  padding-top: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  z-index: 4;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.envelope.is-open .envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.envelope__greeting {
  font-family: var(--font-script);
  /* Antes era 1.7rem/línea única; con el texto de dos líneas actual (más el
     verso debajo) eso empujaba el bloque de texto hacia arriba, dentro de
     la franja del listón (ver .envelope__ribbon-strip, top:42%) y quedaba
     tapado por él (z-index mayor). Más chico para que el bloque completo
     (saludo + verso) quepa por debajo del listón. */
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-primary-dark);
  margin: 0;
  padding: 0 0.25rem;
  text-align: center;
  /* Solo baja este texto un poco (no al verso ni al resto): el contenedor
     usa justify-content:flex-end, donde un margin-top normal no mueve el
     elemento (el bloque completo se re-ancla al fondo y se cancela), así
     que se usa transform, que no participa en ese cálculo de layout. */
  transform: translateY(0.3rem);
}
.envelope__verse {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  margin: 0.2rem 0 0;
  text-align: center;
}

/* Estado "abierto": la solapa rota hacia atrás y la carta sube y sale */
.envelope.is-open .envelope__flap {
  transform: rotateX(180deg);
}
.envelope.is-open .envelope__letter {
  transform: translateY(-92%);
}

.envelope-screen__button {
  white-space: nowrap;
}

/* =============================================================================
   2. PORTADA (hero)
   ============================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-align: center;
  background: var(--color-text);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Foto de móvil (retrato, hero.photo): anclamos el recorte cerca de la
     parte superior para que la cara no quede cortada en pantallas altas. */
  object-position: center 12%;
}
@media (min-width: 900px) {
  /* A partir de aquí <picture> sirve la foto de escritorio (horizontal,
     hero.photoDesktop) — su composición es distinta, así que necesita su
     propio ancla de recorte. */
  .hero__photo { object-position: center 25%; }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,46,42,0.15) 0%, rgba(58,46,42,0.75) 100%);
}
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.5rem 1.25rem 3rem;
}
.hero__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  opacity: 0.9;
}
.hero__name {
  font-family: var(--font-script);
  font-size: 4rem;
  line-height: 1;
  margin: 0 0 0.75rem;
}
.hero__intro {
  max-width: 32ch;
  margin: 0 auto 1rem;
  font-size: 1.1rem;
  opacity: 0.95;
}
.hero__date {
  font-family: var(--font-title);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

/* =============================================================================
   3. CUENTA REGRESIVA
   ============================================================================= */
.countdown {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.countdown__item {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 0.9rem 0.4rem;
  width: 4.6rem;
  text-align: center;
}
.countdown__value {
  display: block;
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-top: 0.2rem;
}

/* =============================================================================
   4. PADRES / PADRINOS
   ============================================================================= */
.family__group {
  text-align: center;
  margin-bottom: 2rem;
}
.family__group:last-child { margin-bottom: 0; }
.family__group-title {
  font-family: var(--font-title);
  font-style: italic;
  color: var(--color-primary-dark);
  margin: 0 0 0.6rem;
}
.family__names { font-size: 1.05rem; }
.family__names li { margin-bottom: 0.2rem; }

/* =============================================================================
   5. CEREMONIA Y RECEPCIÓN
   ============================================================================= */
.events {
  display: grid;
  gap: 1.25rem;
}
.event-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden; /* para que la foto respete las esquinas redondeadas */
  text-align: center;
}
.event-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.event-card__body {
  padding: 1.5rem;
}
.event-card__icon { font-size: 1.8rem; display: block; margin-bottom: 0.5rem; }
.event-card__title {
  font-family: var(--font-title);
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}
.event-card__venue { font-weight: 700; margin: 0 0 0.15rem; }
.event-card__address { color: var(--color-text-light); font-size: 0.9rem; margin: 0 0 0.15rem; }
.event-card__time { color: var(--color-primary-dark); font-weight: 700; margin: 0 0 1rem; }

/* =============================================================================
   6. GALERÍA + LIGHTBOX
   ============================================================================= */
.gallery__carousel-wrap {
  position: relative;
}
.gallery__track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0.25rem 0.75rem;
  margin: 0 -0.25rem;
  scrollbar-width: thin;
}
.gallery__item {
  flex: 0 0 68%;
  scroll-snap-align: center;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9 / 16; /* las fotos son verticales: se veían muy recortadas en 1:1 */
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.06); }

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  border: none;
  color: var(--color-primary-dark);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gallery__nav--prev { left: -0.6rem; }
.gallery__nav--next { right: -0.6rem; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 12, 0.92);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-height: 80vh; border-radius: 8px; }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* =============================================================================
   7. CÓDIGO DE VESTIMENTA
   ============================================================================= */
.dresscode {
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
}
.dresscode__title {
  font-family: var(--font-title);
  color: var(--color-primary-dark);
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
}

/* =============================================================================
   8. PROGRAMA DEL EVENTO
   ============================================================================= */
.program__list {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  padding-left: 1.75rem;
  border-left: 2px solid var(--color-secondary);
}
.program__item {
  position: relative;
  padding-bottom: 1.5rem;
}
.program__item:last-child { padding-bottom: 0; }
.program__item::before {
  content: '';
  position: absolute;
  left: -2.28rem;
  top: 0.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-primary-dark);
}
.program__time {
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-right: 0.5rem;
}

/* =============================================================================
   9. LLUVIA DE SOBRES / MESA DE REGALOS · 11. PASE DIGITAL
   ============================================================================= */
.info-card {
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
}
.info-card__icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }

.digital-pass {
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
  border: 2px dashed rgba(255,255,255,0.5);
}
.digital-pass__label {
  font-family: var(--font-title);
  font-size: 1.4rem;
  margin: 0.4rem 0 0;
}

/* =============================================================================
   10. BUZÓN DE DESEOS · 12. RSVP — formularios
   ============================================================================= */
.form-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem 1.5rem;
  max-width: 30rem;
  margin: 0 auto;
}
.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}
.form-field input[type="text"],
.form-field input[type="number"],
.form-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--color-secondary-dark);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.form-field textarea { resize: vertical; min-height: 5rem; }

.radio-group { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  font-size: 0.95rem;
}

.form-submit { width: 100%; margin-top: 0.25rem; }

.form-status {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}
.form-status[hidden] { display: none; }
.form-status--info { background: #EFE6DC; color: var(--color-text); }
.form-status--success { background: #E4F0E4; color: #2F5D34; }
.form-status--error { background: #F7E1DD; color: #8C3B2E; }

/* =============================================================================
   13. MÚSICA DE FONDO — botón flotante
   ============================================================================= */
.music-toggle {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-soft);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.music-toggle:hover { transform: scale(1.08); }
.music-toggle[hidden] { display: none; }

/* Ícono de nota musical simple, sin librería de íconos */
.music-toggle .icon-pause { display: none; }
.music-toggle.is-playing .icon-play { display: none; }
.music-toggle.is-playing .icon-pause { display: inline; }

/* =============================================================================
   Animación de aparición al hacer scroll (progresiva, discreta)
   ============================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .envelope__flap, .envelope__letter,
  .envelope__ribbon-strip, .envelope__bow-loop, .envelope__bow-tail, .envelope__bow-knot { transition: none; }
}

/* =============================================================================
   Breakpoints — tablet / desktop (mobile-first: min-width)
   ============================================================================= */
@media (min-width: 600px) {
  .container { padding: 0 2rem; }
  .section__title { font-size: 2.3rem; }
  .hero__name { font-size: 5rem; }
  .events { grid-template-columns: repeat(2, 1fr); }
  .gallery__item { flex-basis: 42%; }
  .countdown__item { width: 5.5rem; padding: 1.1rem 0.5rem; }
  .countdown__value { font-size: 2rem; }
}

@media (min-width: 900px) {
  :root { --container-width: 760px; }
  .hero__content { padding-bottom: 4.5rem; }
  .gallery__item { flex-basis: 30%; }
}