/* ==========================================================================
   MARTU & EMA — Invitación de casamiento
   vfinal — styles.css
   Cambios sobre v02:
   - Se sacó la sección de countdown por completo.
   - Se sacó "18:00 hs" de debajo del logo (.hero__time eliminado). La fecha
     "18.12.2026" que traía el propio me_logo.svg se sacó a nivel de asset:
     ver me_logo_sin_fecha.svg, copia local de v04 sin ese sub-grupo.
   - Frase de cierre actualizada (v05: forzada en 2 renglones con <br>).
   - Botón fijo de música (play/pausa), arranca al cargar la página.
   - Orden de cuentas de Regalos invertido: USD primero, luego ARS.
   - bckg.png fue reemplazado por el usuario (mismo path centralizado).
   Cambios vs v04:
   - Autoplay de música más persistente (ver script.js).
   - "Juntos en cualquier / parte del mundo." forzado en 2 renglones.
   Cambios (corrección post-Netlify):
   - v05 pasó a ser una carpeta 100% autocontenida (fonts/, recursos/,
     music/ propias, copiadas de las centralizadas) para poder subirse tal
     cual a Netlify. Las rutas relativas "../../" (que asumían la estructura
     centralizada del repo) apuntaban afuera de la carpeta publicada y por
     eso no cargaban ni las fuentes, ni el fondo, ni los íconos, ni la
     música una vez deployado — de ahí que el botón de play no funcionara.
     Se corrigieron todas a rutas locales (fonts/…, recursos/…, music/…).
   - Optimización de peso (pedido explícito): fuentes subseteadas a WOFF2
     con sólo los glyphs que usa esta página (STIXTwoText.ttf 409 KB →
     STIXTwoText.woff2 29 KB; Italic 444 KB → 32 KB); se sacaron las 2
     fuentes que no se usaban (STIXTwoMath.otf, STIXSizTwoSymReg.otf); se
     sacó la carpeta logo/ (no se usaba, ver me_logo_sin_fecha.svg); bckg.png
     se re-escaló a un ancho suficiente para "cover" en cualquier pantalla y
     se optimizó (1.86 MB → 244 KB, sin pérdida visible); el mp3 se
     re-codificó de 192 kbps a 96 kbps (4.44 MB → 2.22 MB). Peso total de
     v05 bajó de ~8.3 MB a ~2.7 MB.
   Cambios (vfinal — causa real del fallo en Netlify/FTP):
   - El archivo de música se llamaba "Morat - En Un Sólo Día.mp3" (con
     espacios y acentos). macOS guarda internamente los nombres de archivo
     con tildes en forma "descompuesta" (NFD: la letra + el acento como dos
     caracteres separados), mientras que el HTML lo referenciaba con la
     codificación %-encoded de la forma "compuesta" (NFC, un solo carácter
     por letra acentuada). En Mac esto pasa desapercibido porque el sistema
     operativo normaliza al buscar el archivo, pero Netlify y cualquier FTP
     corren sobre Linux, que compara nombres de archivo byte a byte sin
     normalizar — el nombre nunca coincidía, el navegador recibía 404 al
     pedir el audio, y por eso ni el autoplay ni el botón de play
     funcionaban (no había ningún archivo de audio real para reproducir).
   - Solución definitiva: el archivo se renombró a "morat-en-un-solo-dia.mp3"
     (sólo minúsculas, guiones, sin espacios ni tildes), eliminando de raíz
     cualquier posibilidad de este tipo de error en cualquier hosting.
   Cambios (vfinal — se agregó "Agendar"):
   - Nuevo botón "Agendar" en Ceremonia y Fiesta, antes de "Cómo llegar"
     (envueltos en .ceremonia__actions para que se apilen con espaciado
     consistente). Abre un modal con dos opciones: agregar el evento a
     Google Calendar (link directo) o descargar un archivo .ics para
     iCalendar / cualquier otro calendario (ver script.js).
   ========================================================================== */

/* -------------------- Fuentes locales (@font-face) -------------------- */

@font-face {
  font-family: 'STIX Two Text';
  src: url('fonts/STIXTwoText.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STIX Two Text';
  src: url('fonts/STIXTwoText-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* -------------------- Tokens -------------------- */

:root {
  --ink: #948e81;
  --ink-strong: #837c6d;
  --ink-soft: rgba(148, 142, 129, 0.42);
  --ink-faint: rgba(148, 142, 129, 0.18);
  --bg: #fcf8f5;

  --font-serif: 'STIX Two Text', 'Iowan Old Style', Georgia, serif;

  --content-max: 560px;
  --content-max-narrow: 420px;

  --gap-section: clamp(56px, 12vw, 76px);
  --side-pad: clamp(24px, 7vw, 40px);

  --tap-min: 44px;

  --dur-fast: 350ms;
  --dur-med: 600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------- Reset base -------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
}

/* -------------------- Fondo fijo (estático durante el scroll) -------------------- */

.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image: url('recursos/bckg.png');
  background-repeat: no-repeat;
  /* El motivo decorativo nace en la esquina superior izquierda del PNG.
     Anclando el "cover" ahí (en vez de centrarlo) el recorte de "cover"
     siempre cae hacia abajo/derecha y el motivo nunca se corta, sea cual
     sea el tamaño de pantalla (mobile o desktop). */
  background-position: left top;
  background-size: cover;
}

/* -------------------- Estructura de secciones -------------------- */

main {
  position: relative;
  z-index: 0;
}

.section {
  padding: var(--gap-section) var(--side-pad);
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

.section.is-pre {
  opacity: 0;
  transform: translateY(14px);
}

.section.is-visible {
  opacity: 1;
  transform: none;
}

.section--compact {
  padding-top: calc(var(--gap-section) * 0.55);
  padding-bottom: calc(var(--gap-section) * 0.55);
}

.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.section:not(.hero) .section__inner::before {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto calc(var(--gap-section) * 0.62);
  background: var(--ink-soft);
}

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

.section__title {
  margin: 0 0 18px;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.section__rule {
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 22px;
  background: var(--ink-soft);
}

.section__info {
  margin: 0 0 6px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--ink);
}

.section__info--venue {
  margin-top: 10px;
  margin-bottom: 30px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

.section__value {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.section__text {
  margin: 0 auto 30px;
  max-width: 380px;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--ink-strong);
}

.section__icon {
  width: 40px;
  height: auto;
  margin: 0 auto 22px;
  opacity: 0.92;
}

.section__icon--small {
  width: 32px;
}

/* -------------------- Hero -------------------- */

.hero {
  padding-top: clamp(64px, 16vw, 104px);
  padding-bottom: calc(var(--gap-section) * 0.7);
}

.hero__logo {
  width: min(78vw, 250px);
  margin: 0 auto 26px;
}

.hero__intro {
  margin: 0 auto;
  max-width: 360px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.95;
  color: var(--ink);
  white-space: normal;
}

.hero__intro br {
  content: '';
}

.hero__ornament {
  width: 34px;
  margin: 34px auto 0;
  opacity: 0.85;
  transform: rotate(180deg);
}

/* -------------------- Botón de música -------------------- */

.music-toggle {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 15;
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  background: rgba(252, 248, 245, 0.72);
  backdrop-filter: blur(6px);
  color: var(--ink-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.music-toggle:hover {
  background-color: rgba(252, 248, 245, 0.92);
}

.music-toggle:active {
  transform: scale(0.94);
}

.music-toggle__icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* La propiedad "hidden" no está reflejada en SVGElement (sólo existe en
   HTMLElement), así que el toggle de ícono se controla con una clase en vez
   de el atributo hidden — funciona igual en todos los navegadores. */
.music-toggle__icon.is-hidden {
  display: none;
}

/* -------------------- Botones -------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 13px 34px;
  margin-top: 6px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  background-color: rgba(148, 142, 129, 0.08);
}

.btn:active {
  transform: scale(0.97);
  background-color: rgba(148, 142, 129, 0.14);
}

.btn--block {
  display: flex;
  width: 100%;
}

.ceremonia__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.rsvp-note {
  margin: 16px auto 0;
  max-width: 260px;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.rsvp-note.is-shown {
  opacity: 1;
}

/* -------------------- Regalos -------------------- */

.gift-accounts {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 360px;
  margin: 0 auto;
}

.gift-account + .gift-account {
  padding-top: 30px;
  border-top: 1px solid var(--ink-faint);
}

.gift-account__title {
  margin: 0 0 16px;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.gift-field {
  margin-bottom: 14px;
}

.gift-field:last-child {
  margin-bottom: 0;
}

.gift-field__label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}

.gift-field__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gift-field__value {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.copy-btn {
  flex-shrink: 0;
  min-height: var(--tap-min);
  min-width: 44px;
  padding: 12px 6px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.copy-btn:hover {
  opacity: 1;
}

.copy-btn.is-copied {
  color: var(--ink-strong);
  text-decoration: none;
  opacity: 1;
}

/* -------------------- Cierre -------------------- */

.cierre {
  padding-bottom: clamp(80px, 18vw, 130px);
}

.cierre__ornament {
  width: 58px;
  margin: 0 auto 30px;
  opacity: 0.9;
}

.cierre__text {
  margin: 0 auto;
  max-width: 280px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink);
}

/* -------------------- Bottom sheet / modal (Cómo llegar) -------------------- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(60, 55, 46, 0.28);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.sheet-overlay[hidden] {
  display: none;
}

.sheet-overlay.is-open {
  opacity: 1;
}

.sheet {
  width: 100%;
  max-width: 420px;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  padding: 30px var(--side-pad) calc(var(--side-pad) + 14px);
  text-align: center;
  position: relative;
  transform: translateY(24px);
  transition: transform var(--dur-fast) var(--ease);
  box-shadow: 0 -8px 40px rgba(60, 55, 46, 0.14);
}

.sheet-overlay.is-open .sheet {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .sheet-overlay {
    align-items: center;
  }

  .sheet {
    border-radius: 18px;
    padding: 40px 36px 34px;
    transform: translateY(10px) scale(0.98);
  }

  .sheet-overlay.is-open .sheet {
    transform: translateY(0) scale(1);
  }
}

.sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.sheet__title {
  margin: 0 0 10px;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.sheet__venue {
  margin: 0 0 26px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -------------------- Focus visible -------------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------- Responsive: tablet / desktop -------------------- */

@media (min-width: 640px) {
  :root {
    --side-pad: 40px;
  }

  .hero__logo {
    width: 260px;
  }

  .section__title {
    font-size: 1.05rem;
  }
}

@media (min-width: 900px) {
  body {
    display: flex;
    justify-content: center;
  }

  main {
    width: 100%;
    max-width: 640px;
  }

  .hero {
    padding-top: 110px;
  }

  .cierre {
    padding-bottom: 140px;
  }
}

/* -------------------- Reduced motion -------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .section.is-pre {
    opacity: 1;
    transform: none;
  }
}