:root {
  --ivory: #f5f1e8;
  --ivory-deep: #ece8dd;
  --ink: #5f6f63;
  --olive-deep: #748579;
  --terracotta: #829287;
  --line: rgba(95, 111, 99, 0.18);
  --muted: rgba(95, 111, 99, 0.55);
  /* Las etiquetas del formulario van en versalitas y con espaciado ancho:
     en verde claro se leían deslavadas. Este verde sí tiene cuerpo. */
  --label-ink: #46524a;
  --max: 720px;
  /* Espacio que ocupa la cabecera sticky dentro del viewport. */
  --header-height: 58px;
  /* Margen lateral fijo: 16px a cada lado, respeta el ancho del dispositivo en cualquier tamaño. */
  --gutter: 32px;
  /* Cada sección ocupa la pantalla completa: nunca debe verse otra a la vez. */
  --peek: 0px;
  --section-h: calc(100svh - var(--header-height) - var(--peek));
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Karla", Arial, sans-serif;
  --script: "Parisienne", "Snell Roundhand", cursive;
}

* {
  box-sizing: border-box;
}

/* El atributo hidden debe ganar SIEMPRE: si no, cualquier `display` puesto
   por clase lo anula y el elemento sigue viéndose aunque el JS lo oculte. */
[hidden] {
  display: none !important;
}

html {
  /* El desplazamiento del dedo debe pertenecer al navegador. Un `smooth`
     global también se aplica a cambios de hash y puede pelearse con la
     inercia táctil; los enlaces del menú se animan de forma controlada en JS. */
  scroll-behavior: auto;
  scroll-padding-top: var(--header-height);
}

/* Sin encaje en ningún sitio. El scroll pertenece por completo al invitado:
   ni en escritorio con la rueda ni en el móvil con el dedo hay nada que
   frene, agarre o devuelva la página a un punto que él no ha elegido.
   Las secciones siguen midiendo una pantalla; simplemente ya no imantan. */

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* La tipografía de todos los títulos. OJO: ".serif" no es una clase
   suelta, es la última línea de este selector. */
h1,
h2,
h3,
.serif {
  color: var(--olive-deep);
  font-family: var(--serif);
  font-weight: 400;
}

h1,
h2,
h3,
.wrap {
  width: min(calc(100% - var(--gutter)), var(--max));
  margin-inline: auto;
}

.eyebrow {
  display: block;
  color: var(--olive-deep);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
}

.site-header__wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(calc(100% - var(--gutter)), 1180px);
  margin-inline: auto;
  padding-block: 12px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.65vw, 26px);
}

.site-header__nav--right {
  justify-content: flex-end;
}

.site-header__nav a {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.82;
  transition: color 220ms ease, opacity 220ms ease;
}

.site-header__nav a:hover {
  color: var(--terracotta);
  opacity: 1;
}

.site-header__logo {
  justify-self: center;
  color: var(--olive-deep);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-style: italic;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-header__amp {
  display: inline-block;
  margin: 0 2px;
  font-weight: 300;
  font-style: italic;
}

.site-header__toggle {
  display: none;
  align-items: center;
  justify-self: end;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--olive-deep);
  font-family: var(--sans);
  font-size: 0.805rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-header__toggle-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(104, 121, 109, 0.4);
  border-radius: 50%;
  transition: border-color 220ms ease, background-color 220ms ease;
}

.site-header__toggle-icon span {
  position: absolute;
  width: 14px;
  height: 1.5px;
  background: var(--olive-deep);
  border-radius: 2px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, background-color 220ms ease;
}

.site-header__toggle-icon span:first-child {
  transform: rotate(0deg);
}

.site-header__toggle-icon span:last-child {
  transform: rotate(90deg);
}

.site-header__toggle.is-active .site-header__toggle-icon {
  border-color: var(--olive-deep);
  background: var(--olive-deep);
}

.site-header__toggle.is-active .site-header__toggle-icon span {
  background: #f4f1ea;
}

.site-header__toggle.is-active .site-header__toggle-icon span:first-child {
  transform: rotate(45deg);
}

.site-header__toggle.is-active .site-header__toggle-icon span:last-child {
  transform: rotate(-45deg);
}

/* Menú móvil */

.mobile-menu {
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 380ms;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(44, 42, 36, 0.38);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.mobile-menu__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(88%, 380px);
  padding: 52px 32px 44px;
  border-radius: 20px;
  background: var(--ivory);
  box-shadow: 0 40px 70px -24px rgba(40, 38, 30, 0.4);
  text-align: center;
  transform: translateY(22px) scale(0.95);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 380ms ease;
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(104, 121, 109, 0.32);
  border-radius: 50%;
  background: none;
  color: var(--olive-deep);
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.mobile-menu__close svg {
  width: 15px;
  height: 15px;
}

.mobile-menu__close:hover {
  background: var(--olive-deep);
  color: #f4f1ea;
  transform: rotate(90deg);
}

.mobile-menu__logo {
  margin-bottom: 30px;
  color: var(--olive-deep);
  font-family: var(--serif);
  font-size: 1.9rem;
  font-style: italic;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu__nav a {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 220ms ease;
}

.mobile-menu__nav a:hover {
  color: var(--terracotta);
}

body.menu-open {
  overflow: hidden;
}

.section {
  position: relative;
  display: grid;
  min-height: var(--section-h);
  align-content: center;
  justify-content: stretch;
  place-items: center;
  padding-block: 0;
  text-align: center;
}

.section h2 {
  /* "auto" en los lados, NO 0: el 0 anulaba el margin-inline: auto que
     centra el título y lo dejaba pegado a la izquierda del .wrap. */
  margin: clamp(0.35rem, 1.2svh, 12px) auto clamp(0.25rem, 0.9svh, 8px);
  font-size: clamp(1.75rem, min(5vw, 4.6svh), 2.35rem);
  line-height: 1.05;
}

.section__intro {
  max-width: 460px;
  margin: 0 auto;
  color: rgba(44, 42, 36, 0.72);
  font-size: clamp(0.90625rem, min(2vw, 1.7svh), 0.92rem);
  line-height: clamp(1.4, 0.28svh, 1.7);
}

/* Bienvenida */

.welcome-section {
  position: relative;
  /* clip (no hidden): oculta los pétalos de los lados sin recortar el contenido hacia abajo. */
  overflow-x: clip;
  text-align: center;
}

.welcome-section--ceremony {
  display: grid;
  min-height: var(--section-h);
  place-items: center;
}

.welcome-section__story,
.welcome-section__ceremony-stage {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: var(--section-h);
  align-items: center;
}

.welcome-section__ceremony-stage {
  width: 100%;
  justify-content: center;
}

.welcome-section__content {
  position: relative;
  display: flex;
  width: min(calc(100% - var(--gutter)), 42rem);
  min-height: var(--section-h);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1rem, min(4vw, 4svh), 3.125rem);
}

.welcome-section__subtitle {
  margin-bottom: clamp(1rem, min(4vw, 4svh), 3.25rem);
  color: var(--olive-deep);
  font-size: clamp(0.6rem, 1.8vw, 0.7rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.welcome-section__art {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0;
}

.welcome-section__art-part {
  height: auto;
  filter: brightness(0) saturate(100%) invert(54%) sepia(8%) saturate(446%) hue-rotate(87deg) brightness(91%) contrast(88%);
}

.welcome-section__art-part--intro {
  width: clamp(5rem, min(50vw, 26svh), 20rem);
}

.welcome-section__art-part--names {
  width: clamp(9rem, min(86vw, 52svh), 40rem);
}

.welcome-section__copy {
  width: 100%;
  margin-top: clamp(1.25rem, min(6vw, 6svh), 4rem);
}

.welcome-section__message {
  max-width: 38rem;
  margin: 0 auto;
  color: #536257;
  font-family: var(--serif);
  font-size: clamp(1.125rem, min(1.7vw, 2.5svh), 1.5rem);
  font-weight: 500;
  line-height: 1.55;
  opacity: 1;
}

.welcome-section__date {
  margin: clamp(0.75rem, min(2.5vw, 2.5svh), 1.5rem) 0 0;
  color: #687a6d;
  font-family: var(--serif);
  font-size: clamp(1.125rem, min(1.7vw, 2.5svh), 1.5rem);
  font-weight: 500;
}

.welcome-section__ceremony {
  position: relative;
  /* Un 30% más grande: 64rem -> 83.2rem y 56svh -> 72.8svh.
     El primer límite NO se toca: es el ancho del móvil con sus 16px
     de aire a los lados, y eso manda por encima de todo. */
  width: min(calc(100% - var(--gutter)), 83.2rem, 72.8svh);
  aspect-ratio: 1024 / 1056;
  margin: 0 auto;
}

.welcome-section__ceremony-content {
  position: relative;
  display: flex;
  min-height: var(--section-h);
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, min(3vw, 3svh), 2rem);
  padding-block: clamp(1.25rem, min(5vw, 5svh), 3rem);
}

.welcome-section__arch,
.welcome-section__chair {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(1.16) scaleY(1);
  transform-origin: center bottom;
}

.welcome-section__chair {
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.welcome-section__chair--left {
  transform-origin: 42% 86%;
}

.welcome-section__chair--right {
  transform-origin: 60% 86%;
}

/* Solo durante el reseteo del botón "Repetir". */
.welcome-section--ceremony.is-chair-instant .welcome-section__chair {
  transition: none;
}

.welcome-section--ceremony.is-chair-together .welcome-section__chair--left {
  transform: scaleX(1.16) scaleY(1) translateX(clamp(18px, 3.2vw, 34px)) rotate(1.2deg);
}

.welcome-section--ceremony.is-chair-together .welcome-section__chair--right {
  transform: scaleX(1.16) scaleY(1) translateX(clamp(-34px, -3.2vw, -18px)) rotate(-1.2deg);
}

.petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.petals.esta-lejos .petal {
  animation-play-state: paused;
}

.petal {
  position: absolute;
  top: -1.5rem;
  left: var(--petal-left);
  width: 0.5rem;
  height: 0.78rem;
  border-radius: 80% 20% 80% 20%;
  background: rgba(116, 133, 121, 0.45);
  animation: petal-fall var(--petal-duration) linear var(--petal-delay) infinite;
}

.petal:nth-child(1) { --petal-left: 8%; --petal-duration: 13s; --petal-delay: -7s; --petal-drift: 5vw; }
.petal:nth-child(2) { --petal-left: 21%; --petal-duration: 16s; --petal-delay: -12s; --petal-drift: -4vw; }
.petal:nth-child(3) { --petal-left: 37%; --petal-duration: 12s; --petal-delay: -3s; --petal-drift: 3vw; }
.petal:nth-child(4) { --petal-left: 54%; --petal-duration: 17s; --petal-delay: -10s; --petal-drift: -5vw; }
.petal:nth-child(5) { --petal-left: 68%; --petal-duration: 14s; --petal-delay: -5s; --petal-drift: 4vw; }
.petal:nth-child(6) { --petal-left: 81%; --petal-duration: 18s; --petal-delay: -14s; --petal-drift: -3vw; }
.petal:nth-child(7) { --petal-left: 91%; --petal-duration: 15s; --petal-delay: -9s; --petal-drift: 2vw; }
.petal:nth-child(8) { --petal-left: 45%; --petal-duration: 19s; --petal-delay: -16s; --petal-drift: -2vw; }
.petal:nth-child(9) { --petal-left: 14%; --petal-duration: 20s; --petal-delay: -17s; --petal-drift: 6vw; }
.petal:nth-child(10) { --petal-left: 29%; --petal-duration: 15s; --petal-delay: -8s; --petal-drift: -5vw; }
.petal:nth-child(11) { --petal-left: 42%; --petal-duration: 22s; --petal-delay: -19s; --petal-drift: 4vw; }
.petal:nth-child(12) { --petal-left: 59%; --petal-duration: 13s; --petal-delay: -11s; --petal-drift: -4vw; }
.petal:nth-child(13) { --petal-left: 72%; --petal-duration: 21s; --petal-delay: -15s; --petal-drift: 5vw; }
.petal:nth-child(14) { --petal-left: 86%; --petal-duration: 16s; --petal-delay: -6s; --petal-drift: -6vw; }
.petal:nth-child(15) { --petal-left: 4%; --petal-duration: 18s; --petal-delay: -13s; --petal-drift: 3vw; }
.petal:nth-child(16) { --petal-left: 96%; --petal-duration: 23s; --petal-delay: -20s; --petal-drift: -3vw; }
.petal:nth-child(17) { --petal-left: 11%; --petal-duration: 14s; --petal-delay: -2s; --petal-drift: 4vw; }
.petal:nth-child(18) { --petal-left: 25%; --petal-duration: 19s; --petal-delay: -6s; --petal-drift: -3vw; }
.petal:nth-child(19) { --petal-left: 33%; --petal-duration: 13s; --petal-delay: -14s; --petal-drift: 5vw; }
.petal:nth-child(20) { --petal-left: 48%; --petal-duration: 21s; --petal-delay: -1s; --petal-drift: -4vw; }
.petal:nth-child(21) { --petal-left: 62%; --petal-duration: 15s; --petal-delay: -9s; --petal-drift: 3vw; }
.petal:nth-child(22) { --petal-left: 75%; --petal-duration: 18s; --petal-delay: -16s; --petal-drift: -6vw; }
.petal:nth-child(23) { --petal-left: 88%; --petal-duration: 12s; --petal-delay: -4s; --petal-drift: 4vw; }
.petal:nth-child(24) { --petal-left: 5%; --petal-duration: 20s; --petal-delay: -18s; --petal-drift: -5vw; }
.petal:nth-child(25) { --petal-left: 18%; --petal-duration: 16s; --petal-delay: -11s; --petal-drift: 2vw; }
.petal:nth-child(26) { --petal-left: 40%; --petal-duration: 22s; --petal-delay: -3s; --petal-drift: -4vw; }
.petal:nth-child(27) { --petal-left: 57%; --petal-duration: 13s; --petal-delay: -13s; --petal-drift: 5vw; }
.petal:nth-child(28) { --petal-left: 70%; --petal-duration: 17s; --petal-delay: -7s; --petal-drift: -3vw; }
.petal:nth-child(29) { --petal-left: 83%; --petal-duration: 24s; --petal-delay: -19s; --petal-drift: 3vw; }
.petal:nth-child(30) { --petal-left: 93%; --petal-duration: 14s; --petal-delay: -5s; --petal-drift: -5vw; }
.petal:nth-child(31) { --petal-left: 2%; --petal-duration: 19s; --petal-delay: -10s; --petal-drift: 6vw; }
.petal:nth-child(32) { --petal-left: 63%; --petal-duration: 15s; --petal-delay: -21s; --petal-drift: -2vw; }

@keyframes petal-fall {
  0% {
    transform: translate3d(0, -2rem, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(var(--petal-drift), 115svh, 0) rotate(260deg);
  }
}

/* Del botón "Repetir". Se conserva: si vuelves a las sillas, lo necesitas. */
.welcome-section__continue {
  position: relative;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease;
  bottom: auto;
  left: auto;
  display: inline-flex;
  z-index: 2;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  color: var(--olive-deep);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.welcome-section__continue:hover {
  border-color: var(--olive-deep);
}

.welcome-section__continue svg {
  width: 14px;
  height: 14px;
}

/* Media vuelta al pulsar: refuerza que la escena se repite. */
.welcome-section__continue:active svg {
  transform: rotate(-180deg);
  transition: transform 400ms ease;
}

/* Cuenta atrás */

.countdown-section {
  display: grid;
  min-height: var(--section-h);
  place-items: center;
  overflow-x: clip;
}

.countdown-section__branches {
  display: block;
  width: 72%;
  max-width: 48rem;
  margin: 4px auto 0;
  filter: brightness(0) saturate(100%) invert(54%) sepia(8%) saturate(446%) hue-rotate(87deg) brightness(91%) contrast(88%);
  opacity: 0.43;
  pointer-events: none;
}

/* Bloque de cabecera (subtítulo + título + texto) con el MISMO ritmo en
   todas las secciones: cuenta atrás y dress code incluidos. */
.countdown-section .eyebrow,
.place-section .eyebrow,
.musicians-section .eyebrow {
  /* 4px, no 8: el antetítulo y el título son una sola unidad y separados
     se leían como dos cosas distintas. Vale para las tres secciones que
     comparten este patrón de cabecera. */
  margin-bottom: 4px;
}

.countdown-section .section__intro,
.musicians-section .section__intro {
  margin-bottom: clamp(1rem, 3svh, 2.25rem);
}

.countdown-section .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - var(--gutter)), 1024px);
  flex-direction: column;
  align-items: center;
  max-width: none;
  margin: 0 auto;
}

.place-section .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - var(--gutter)), 1024px);
  min-width: 0;
  flex-direction: column;
  /* La cabecera va centrada, como en el resto de la web. Las tarjetas de
     debajo llevan su texto a la izquierda: eso se resuelve dentro de
     .place-card__body, no aquí. */
  align-items: center;
  max-width: none;
  margin: 0 auto;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.875rem, 2vw, 1.75rem);
  width: 100%;
  margin-top: clamp(1rem, 3svh, 30px);
}

.countdown__item {
  display: grid;
  place-content: center;
  min-width: 0;
  aspect-ratio: 0.88;
  padding: 34px 14px 30px;
  border: 1px solid rgba(104, 121, 109, 0.2);
  background: var(--ivory-deep);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
}

.countdown__item strong {
  display: block;
  color: var(--terracotta);
  font-family: var(--serif);
  font-size: clamp(3.1rem, 7.4vw, 5rem);
  font-weight: 500;
  line-height: 1;
  /* Cifras de ancho fijo: los 4 bloques quedan alineados entre sí y los
     segundos no bailan al cambiar de número. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.countdown__item span {
  display: block;
  margin-top: 10px;
  color: var(--olive-deep);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Lugar */

.place-section {
  display: grid;
  min-height: var(--section-h);
  align-content: center;
  justify-content: stretch;
  place-items: center;
  overflow-x: clip;
}

.place-section__sprig {
  position: absolute;
  top: 28px;
  z-index: 0;
  width: clamp(6.5rem, 15vw, 12.5rem);
  height: auto;
  opacity: 0.85;
  filter: saturate(1.9) brightness(0.97);
  pointer-events: none;
}

.place-section__sprig--left {
  left: -60px;
  transform: scaleX(-1);
}

.place-section__sprig--right {
  right: -60px;
}

.place-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  grid-auto-rows: 1fr; /* las dos tarjetas siempre a la misma altura */
  gap: clamp(1rem, 3vw, 1.625rem);
  width: 100%;
  min-width: 0;
  margin: clamp(1.5rem, 5vw, 2.75rem) auto 0;
  text-align: left;
}

.place-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ivory-deep);
  color: inherit;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(60, 58, 48, 0.04);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease;
}

.place-card:hover {
  border-color: rgba(104, 121, 109, 0.3);
  box-shadow: 0 12px 22px -16px rgba(52, 58, 46, 0.28);
  transform: translateY(-3px);
}

.place-card__image-wrap {
  position: relative;
  /* El ancho manda y es firme. Sin este 100%, cuando el max-height recorta
     la altura el navegador recalcula el ancho desde la proporción y la foto
     se queda corta, dejando una franja vacía a la derecha de la tarjeta.
     Con el ancho fijado, quien cede es el alto y la foto se recorta sola
     por el object-fit: cover. */
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 32svh; /* en pantallas bajas la foto cede antes que el texto */
  overflow: hidden;
}

.place-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.place-card:hover .place-card__image {
  transform: scale(1.03);
}

.place-card__image--church {
  object-position: center bottom;
}

.place-card__stamp {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: clamp(2.625rem, 8vw, 3.125rem);
  height: clamp(2.625rem, 8vw, 3.125rem);
  border: 1px solid rgba(104, 121, 109, 0.4);
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.92);
  color: var(--olive-deep);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
}

.place-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  /* stretch, no center: con "center" cada hijo se encoge al ancho de su
     propio texto y cada tarjeta arrancaba por un sitio distinto. Estirados,
     los dos comparten el mismo ancho y todo cuelga del mismo margen. */
  align-items: stretch;
  padding: clamp(20px, 5vw, 26px);
  /* Un único criterio para toda la tarjeta: todo centrado.
     Antetítulo, título, dirección y botón comparten el mismo eje. */
  text-align: center;
}

.place-card__body .eyebrow {
  margin-bottom: 8px;
}

.place-card__body h3 {
  min-width: 0;
  margin-bottom: clamp(0.875rem, 2vw, 1.25rem);
  font-size: clamp(1.45rem, 3vw, 1.7rem);
  overflow-wrap: anywhere;
  transition: color 220ms ease;
}

.hotel-category {
  display: inline;
  margin-left: 0.18em;
  color: var(--terracotta);
  font-family: var(--sans);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: -0.1em;
  line-height: 1;
  vertical-align: 0.42em;
  white-space: nowrap;
}

.place-card:hover .place-card__body h3 {
  color: var(--terracotta);
}

.place-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* Anclado abajo. Las dos tarjetas miden lo mismo (grid-auto-rows: 1fr),
     así que empujando desde aquí la dirección y el botón caen a la misma
     altura en ambas aunque un título ocupe una línea más que el otro.
     El hueco sobrante se va arriba, entre el título y la dirección. */
  margin: auto 0 6px;
  padding: 0;
  list-style: none;
}

.place-card__meta li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
  opacity: 0.85;
}

/* Una sola línea con elipsis: las dos tarjetas quedan a la misma altura. */
.place-card__meta li > span:last-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.place-card__icon-wrap {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(104, 121, 109, 0.1);
}

.place-card__icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--olive-deep);
}

.place-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 20px;
  color: var(--olive-deep);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.place-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform 220ms ease;
}

.place-card:hover .place-card__cta svg {
  transform: translateX(3px);
}


/* Ceremonia — lámina composite floral.
   La hora y los rótulos son texto real; solo la decoración es imagen. */

.ceremony-plate {
  position: relative;
  /* Ocupa la pantalla entera: aquí no se deja franja asomando. */
  min-height: calc(100svh - var(--header-height));
  /* Recorte en AMBOS ejes: la decoración no puede invadir las secciones
     vecinas por muy grande que se haga en ningún tamaño de pantalla. */
  overflow: hidden; /* fallback */
  overflow: clip;
  background: var(--ivory);
}

.plate__deco {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Cada esquina se dimensiona con el menor entre ancho y alto, para que
   nunca invada el texto central ni en pantallas estrechas ni en bajas. */
.plate__deco--floral-tl {
  top: 0;
  left: 0;
  width: clamp(12rem, min(64vw, 82svh), 47rem);
}

.plate__deco--floral-br {
  right: 0;
  bottom: 0;
  width: clamp(12.5rem, min(66vw, 84svh), 49rem);
}

.plate__deco--bow-tr {
  top: 0;
  right: 0;
  width: clamp(8rem, min(42vw, 58svh), 31rem);
}

.plate__deco--ribbon-bl {
  bottom: 0;
  left: 0;
  width: clamp(9.5rem, min(52vw, 52svh), 38rem);
}

.plate__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - var(--gutter)), clamp(34rem, 52vw, 46rem));
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  padding-block: clamp(1rem, 4svh, 2.5rem);
  text-align: center;
}

.plate__heart {
  width: clamp(2.02rem, 7.59vw, 4.95rem);
  height: auto;
  margin-bottom: clamp(0.2rem, 0.8svh, 0.55rem);
}

.ceremony-plate .eyebrow {
  margin-bottom: clamp(0.25rem, 1svh, 1rem);
  font-size: clamp(0.759rem, 3.04vw, 1.27rem);
  letter-spacing: 0.24em;
}

.plate__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.58rem, 2.88vw, 1.1rem);
  margin: 0;
  color: #5d6b5f;
  font-family: var(--serif);
  font-size: clamp(4.05rem, min(18.98vw, 17.6svh), 12.1rem);
  font-weight: 400;
  line-height: 1.05;
  /* cifras de ancho fijo: la hora no cambia de anchura al reflowear */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.plate__colon {
  color: #c9a227;
  font-style: normal;
}

/* Los tres trazos rosas que flanquean la hora.
   SVG en vez de clip-path: escala limpio a cualquier tamaño. */
.plate__rays {
  flex-shrink: 0;
  width: clamp(0.95rem, 3.54vw, 1.54rem);
  height: clamp(1.9rem, 6.58vw, 2.86rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cg stroke='%23e8b7ac' stroke-width='2.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M18 5 L7 1.6'/%3E%3Cpath d='M18 15 L4.5 15'/%3E%3Cpath d='M18 25 L7 28.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.plate__rays--right {
  transform: scaleX(-1);
}

.plate__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, clamp(20rem, 34vw, 30rem));
  margin-block: clamp(0.4rem, 1.6svh, 1.4rem);
}

.plate__rule::before,
.plate__rule::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a227 55%, #c9a227);
  content: "";
}

.plate__rule::after {
  background: linear-gradient(270deg, transparent, #c9a227 55%, #c9a227);
}

/* Corazón dorado del filete. */
.plate__rule span {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-inline: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c9a227' d='M8 14.6C8 14.6 1 10.2 1 5.7 1 3.4 2.9 1.9 4.9 2.4 6.2 2.7 7.4 3.7 8 4.6 8.6 3.7 9.8 2.7 11.1 2.4 13.1 1.9 15 3.4 15 5.7 15 10.2 8 14.6 8 14.6Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* .ceremony-plate delante: si no, «.section h2» gana en especificidad. */
.ceremony-plate .plate__name {
  margin: 0;
  color: #7d8b7c;
  font-family: var(--script);
  font-size: clamp(2.15rem, min(8.86vw, 7.15svh), 5.5rem);
  font-style: normal;
  font-weight: 400;
  /* la manuscrita tiene ascendentes y descendentes largos */
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.plate__note {
  max-width: clamp(18rem, 40vw, 30rem);
  /* reparte las líneas en bloques parejos en vez de dejar "día." suelto */
  text-wrap: balance;
  margin: clamp(0.5rem, 2svh, 1.1rem) 0 0;
  color: #6f7d70;
  font-family: var(--sans);
  font-size: clamp(1.01rem, min(4.3vw, 2.2svh), 1.7rem);
  font-weight: 300;
  line-height: 1.55;
}

/* Corazoncito rosa de cierre. */
.plate__heart-small {
  width: clamp(1.01rem, 3.8vw, 1.87rem);
  height: clamp(1.01rem, 3.8vw, 1.87rem);
  margin-top: clamp(0.5rem, 2svh, 1.1rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f0c2ba' d='M8 14.6C8 14.6 1 10.2 1 5.7 1 3.4 2.9 1.9 4.9 2.4 6.2 2.7 7.4 3.7 8 4.6 8.6 3.7 9.8 2.7 11.1 2.4 13.1 1.9 15 3.4 15 5.7 15 10.2 8 14.6 8 14.6Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Músicos */

.musicians-section {
  position: relative;
  /* flex column: reparte el alto entre cabecera y foto de forma predecible */
  display: flex;
  flex-direction: column;
  /* Pantalla completa. La altura tiene que ser DEFINIDA (no solo mínima):
     si no, el 85% de la foto no tiene contra qué calcularse y colapsa a 0. */
  height: calc(100svh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  /* 24px arriba, como el resto de secciones. Abajo nada: la foto llega al borde. */
  padding-block: 24px 0;
  overflow-x: clip;
  /* stretch en los dos ejes para que el .wrap ocupe todo el alto y la
     ilustración pueda empujarse al fondo con margin-top: auto. */
  align-content: stretch;
  align-items: stretch;
  background: var(--olive-deep);
}

.musicians-section .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  width: min(calc(100% - var(--gutter)), 1180px);
  flex-direction: column;
}

.musicians-section .eyebrow {
  color: rgba(244, 241, 234, 0.92);
}

.musicians-section h2 {
  color: #f4f1ea;
}

.musicians-section .section__intro {
  color: rgba(244, 241, 234, 0.92);
}

.musicians-arch {
  /* Anclada a la sección (no al .wrap): así el 85% es exacto y el ancho
     completo no depende de trucos de margen negativo. */
  position: relative;
  /* Ancho completo en responsive; en escritorio, el mismo que el menú (1180px). */
  width: min(100%, 1180px);
  max-width: none;
  /* Ocupa el 85% del alto, pero puede ceder si la cabecera necesita más
     sitio: así nunca se le echa encima al texto en pantallas pequeñas. */
  flex: 0 1 85%;
  min-height: 0;
  /* margin-top auto = pegada al fondo cuando sobra espacio */
  margin: auto auto 0;
  background: var(--olive-deep);
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
  overflow: hidden;
}

.musicians-arch__frame {
  position: absolute;
  z-index: 2;
  inset: clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) 0;
  border-width: clamp(3px, 1vw, 4px);
  border-style: solid;
  border-color: rgba(244, 241, 234, 0.65);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 33% 33% 0 0;
  pointer-events: none;
}

.musicians-illustration {
  position: absolute;
  inset: clamp(24px, 7vw, 32px) clamp(24px, 7vw, 32px) -2px;
  overflow: hidden;
  background: var(--ivory-deep);
  border-width: clamp(3px, 1vw, 4px);
  border-style: solid;
  border-color: rgba(104, 121, 109, 0.4);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
}

.musicians-illustration__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Reproduce el preserveAspectRatio="xMidYMax meet" del SVG. Al pasar de
     etiqueta <svg> a <img>, el encaje lo manda object-fit, no el archivo. */
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.04);
  transform-origin: center bottom;
}

.footer {
  padding: 32px 16px;
  background: var(--ivory);
  text-align: center;
}

.footer__names {
  display: block;
  margin-bottom: 10px;
  color: var(--olive-deep);
  font-family: var(--serif);
  font-size: 1.6rem;
}

.footer p {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.55;
}

/* Regalo */

.gift-section {
  position: relative;
  overflow: hidden;
}

.gift-section__deco {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.gift-section__deco--ribbon {
  bottom: clamp(-1.5rem, -2.5svh, -0.25rem);
  left: clamp(-9rem, -8vw, -3.5rem);
  width: clamp(19rem, min(44vw, 52svh), 39rem);
  opacity: 0.82;
}

.gift-section__deco--bow {
  top: clamp(-5rem, -6svh, -1.75rem);
  right: clamp(-8rem, -6vw, -2.25rem);
  width: clamp(15rem, min(36vw, 53svh), 30rem);
  opacity: 0.78;
}

.gift-card__heart {
  position: relative;
  z-index: 1;
  width: clamp(2.25rem, 6vw, 3.75rem);
  height: auto;
  /* El corazón necesita respirar antes del bloque del número: pegado se
     leía como parte del rótulo en vez de como el remate de la tarjeta. */
  margin-bottom: 0.9rem;
  pointer-events: none;
}

.gift-section .wrap {
  position: relative;
  z-index: 1;
}

.gift-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 30rem);
  margin: clamp(1.25rem, 4svh, 2.5rem) auto 0;
  padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    var(--ivory-deep);
  box-shadow: 0 18px 34px -26px rgba(60, 58, 48, 0.45);
  text-align: center;
}

/* Filete dorado interior, como el de la lámina de la ceremonia. */
.gift-card::before {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 13px;
  content: "";
  pointer-events: none;
}

.gift-card__label {
  color: var(--olive-deep);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gift-card__iban {
  margin: clamp(0.6rem, 2svh, 1rem) 0 clamp(0.45rem, 1.5svh, 0.7rem);
  color: var(--ink);
  font-family: var(--serif);
  /* cifras de ancho fijo: el IBAN se lee agrupado y alineado */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(1.05rem, 4.4vw, 1.6rem);
  /* 700 de verdad: el peso va añadido en el <link> de Google Fonts. Sin
     cargarlo, el navegador engorda los trazos por su cuenta y las cifras
     salen emborronadas justo en lo que hay que copiar sin equivocarse. */
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Titular de la cuenta. El banco lo pide junto al IBAN para dar por buena la
   transferencia, así que va pegado al número y no escondido en otro sitio.
   En sans y más pequeño: el protagonista sigue siendo el número. */
.gift-card__holder {
  margin: 0 0 clamp(0.9rem, 3svh, 1.4rem);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  /* Nombres largos: parten por el espacio, nunca por mitad de un apellido. */
  overflow-wrap: break-word;
}

.gift-card__holder-label {
  display: block;
  margin-bottom: 3px;
  color: var(--olive-deep);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.8;
}

.gift-card__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Relleno de serie, no fantasma. Es la única acción de la tarjeta y en
     contorno se leía como un borde decorativo más; macizo se ve que es un
     botón y se pulsa. Algo más grande y con más peso por el mismo motivo. */
  padding: 12px 26px;
  border: 1px solid var(--olive-deep);
  border-radius: 999px;
  background: var(--olive-deep);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(52, 58, 46, 0.55);
  transition: background 220ms ease, color 220ms ease,
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease;
}

.gift-card__copy svg {
  width: 15px;
  height: 15px;
}

.gift-card__copy:hover {
  background: #5f6f63;
  color: var(--ivory);
  /* Se levanta al pasar por encima: el gesto invita a pulsarlo. */
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -10px rgba(52, 58, 46, 0.6);
}

/* Al pulsar, se hunde. Sin esto el botón no acusa el toque en el móvil,
   donde no hay hover que valga. */
.gift-card__copy:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -8px rgba(52, 58, 46, 0.5);
}

.gift-card__copy:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.gift-card__copy.is-copied {
  border-color: #c9a227;
  background: #c9a227;
  color: #fff;
}

/* Confirmación */

.rsvp-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2.2svh, 1.5rem);
  width: min(100%, 34rem);
  max-width: none;
  margin: clamp(1rem, 4svh, 2.5rem) auto 0;
  padding: clamp(1.25rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2rem);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 60%),
    var(--ivory-deep);
  box-shadow: 0 20px 38px -28px rgba(60, 58, 48, 0.45);
  text-align: left;
}

/* Bloques de acompañantes, generados según el número elegido. */
.rsvp-guests {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2svh, 0.9rem);
}

.rsvp-guests__title {
  margin: 0;
  color: var(--olive-deep);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rsvp-guest {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.6svh, 0.75rem);
  margin: 0;
  padding: clamp(0.7rem, 3vw, 1rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.42);
}

.rsvp-guest__legend {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(201, 162, 39, 0.42);
  border-radius: 999px;
  background: var(--ivory);
  color: var(--olive-deep);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Composición floral propia del formulario, respetando la orientación
   original de las acuarelas de esquina. */
.rsvp-section {
  position: relative;
  /* El formulario puede crecer y desplazarse, pero su entrada siempre llena
     el viewport para que la sección de Regalo no quede visible a la vez. */
  min-height: var(--section-h);
  background: var(--ivory);
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(3rem, 8svh, 5.5rem);
}

.rsvp-section__floral {
  position: absolute;
  z-index: 0;
  height: auto;
  opacity: 0.58;
  pointer-events: none;
  user-select: none;
}

.rsvp-section__floral--top {
  top: 0;
  left: 0;
  width: clamp(13rem, min(38vw, 52svh), 29rem);
}

.rsvp-section__floral--bottom {
  right: 0;
  bottom: 0;
  width: clamp(14rem, min(41vw, 54svh), 31rem);
}

.rsvp-section .wrap {
  position: relative;
  z-index: 1;
}

/* Campo de foto: zona pulsable con miniatura */
.rsvp-form__row--photo {
  min-width: 0;
  gap: 6px;
}

.photo-field {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  border: 1px dashed rgba(95, 111, 99, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 200ms ease, background 200ms ease;
}

.photo-field:hover {
  border-color: var(--olive-deep);
  background: rgba(255, 255, 255, 0.7);
}

.photo-field.is-filled {
  border-style: solid;
  border-color: rgba(201, 162, 39, 0.55);
}

.photo-field__choose {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  cursor: pointer;
}

/* El input real queda oculto pero accesible por teclado. */
.photo-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.photo-field:focus-within {
  outline: 2px solid var(--olive-deep);
  outline-offset: 2px;
}

.photo-field__preview {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--ivory);
  background-position: center;
  background-size: cover;
  color: var(--olive-deep);
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
}

.photo-field__preview svg {
  width: 22px;
  height: 22px;
}

/* Con foto ya elegida el icono sobra: manda la miniatura. */
.photo-field__preview[data-empty="false"] svg {
  display: none;
}

.photo-field__text {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  flex-direction: column;
  gap: 2px;
}

.photo-field__text strong {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78125rem;
  font-weight: 500;
}

.photo-field__text small {
  color: var(--muted);
  font-size: 0.71875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Ya con foto: el nombre del archivo en una línea con puntos suspensivos. */
.photo-field.is-filled .photo-field__text small {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-field__remove {
  flex: 0 0 auto;
  padding: 0.42rem 0.6rem;
  border: 1px solid rgba(116, 133, 121, 0.38);
  border-radius: 999px;
  background: transparent;
  color: var(--olive-deep);
  font-family: var(--sans);
  font-size: 0.90625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.photo-field__remove:hover,
.photo-field__remove:focus-visible {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: var(--ivory);
}

.rsvp-form__note {
  margin: 16px 0 -20px;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.rsvp-form__note span,
.rsvp-form__required {
  color: var(--terracotta);
}

.rsvp-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rsvp-form label,
.rsvp-form__legend {
  color: var(--label-ink);
  /* 13px, la única excepción al mínimo de 14. Van en mayúsculas y con
     letter-spacing ancho, así que su altura real es la de una minúscula
     bastante mayor; y son rótulos de campo, no texto que se lea seguido.
     Lo que se escribe dentro del campo sí va a 16px. */
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rsvp-form input[type="text"],
.rsvp-form input[type="email"],
.rsvp-form input[type="number"],
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  padding: clamp(0.45rem, 1.4svh, 0.75rem) 0.875rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ivory-deep);
  color: var(--ink);
  font-family: var(--sans);
  /* 16px es el mínimo: por debajo, Safari en iPhone hace zoom al tocar
     el campo y descuadra la página. No se bloquea el zoom con
     user-scalable=no (rompe la accesibilidad y iOS lo ignora). */
  font-size: 16px;
  transition: border-color 220ms ease;
}

.rsvp-form input:focus,
.rsvp-form textarea:focus {
  outline: none;
  border-color: var(--olive-deep);
}

.rsvp-form textarea {
  resize: vertical;
}

.rsvp-form__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.rsvp-form__options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
}

.rsvp-form__options input[type="radio"] {
  accent-color: var(--olive-deep);
}

.rsvp-form__submit {
  align-self: stretch;
  width: 100%;
  margin-top: 6px;
  padding: clamp(0.6rem, 1.6svh, 0.8125rem) 2.125rem;
  border: none;
  border-radius: 999px;
  background: var(--olive-deep);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.90625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}

.rsvp-form__submit:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}

.rsvp-form__status {
  margin: 0;
  text-align: center;
  color: var(--olive-deep);
  font-size: 0.90625rem;
}

@media (max-width: 860px) {
  /* Cabecera compacta: ~15% menos que en escritorio.
     51px = 30 (botón) + 2x10 (padding) + 1 (borde). Debe coincidir con la
     altura real o las secciones a pantalla completa se quedan cortas. */
  :root {
    --header-height: 51px;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__wrap {
    grid-template-columns: 1fr auto;
    padding-block: 10px;
  }

  .site-header__logo {
    justify-self: start;
    font-size: 1.45rem;
  }

  .site-header__toggle {
    display: flex;
    gap: 8px;
    font-size: 0.705rem;
  }

  .site-header__toggle-icon {
    width: 30px;
    height: 30px;
  }

  .site-header__toggle-icon span {
    width: 12px;
  }

  /* Cajas de la cuenta atrás un 30% menos altas que en escritorio.
     0.88 -> 1.26 de ratio equivale a 0.7x de altura para el mismo ancho. */
  .countdown__item {
    aspect-ratio: 1.26;
    padding: 14px 10px;
  }

  /* Textos más juntos en móvil: ~30% menos aire que en escritorio. */
  .place-card__body {
    /* clamp en vez de valor fijo: enlaza con los 26px del escritorio
       sin el escalón de 16 -> 26 que había justo en 860px. */
    padding: clamp(14px, 2.6vw, 20px) clamp(16px, 3vw, 26px) clamp(16px, 3vw, 26px);
  }

  .place-card__body .eyebrow {
    margin-bottom: 6px;
  }

  .place-card__body h3 {
    margin-bottom: 10px;
  }

  .place-card__meta {
    gap: 8px;
  }

  .place-card__meta li {
    gap: 8px;
  }

  .place-card__cta {
    padding-top: 14px;
  }

  .section__intro {
    line-height: 1.5;
  }

  /* La tarjeta conserva presencia en tablet sin ocupar casi toda la pantalla. */
  .gift-card {
    width: min(100%, 25rem);
    margin-top: clamp(0.8rem, 2.5svh, 1.25rem);
    padding: clamp(1rem, 3vw, 1.35rem) clamp(1rem, 4vw, 1.5rem);
  }

  .gift-card__heart {
    width: 2.3rem;
    margin-bottom: 0.6rem;
  }

  .gift-card__iban {
    margin: 0.55rem 0 0.4rem;
    font-size: clamp(1.05rem, 3.5vw, 1.35rem);
    line-height: 1.4;
  }

  .gift-card__copy {
    padding: 0.7rem 1.5rem;
    font-size: 0.75rem;
  }

  /* Las acuarelas enmarcan el formulario sin invadir el contenido. */
  .rsvp-section__floral {
    opacity: 0.44;
  }

  .rsvp-section__floral--top {
    left: -0.75rem;
    width: clamp(8rem, 24vw, 12rem);
  }

  .rsvp-section__floral--bottom {
    right: -0.75rem;
    width: clamp(8.5rem, 26vw, 13rem);
  }

}

/* Cuenta atrás en vertical (2x2) al aparecer la cabecera móvil.
   min-height evita aplicarlo en móvil horizontal, donde 4 columnas caben mejor. */
@media (max-width: 860px) and (min-height: 500px) {
  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* con 2 columnas, limita el ancho para que las cards no se vuelvan gigantes en tablet */
    width: min(100%, 26rem);
  }
}

@media (max-width: 560px) {
  /* En móvil la decoración se suaviza para no competir con el texto central. */
  .plate__deco {
    opacity: 0.8;
  }

  .plate__rule {
    width: min(100%, 12rem);
  }

  .countdown-section__branches {
    width: 78%;
    margin: 4px auto 0;
    opacity: 0.4;
  }

  /* Cuenta atrás siempre en bloques de 2 en móvil, sea cual sea la altura. */
  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 26rem);
  }

  /* Número más pequeño: mejor proporción dentro de la caja. */
  .countdown__item strong {
    font-size: clamp(2rem, 11vw, 3.2rem);
  }

  /* El campo de foto, a una línea: en móvil el texto de ayuda sobra. */
  .rsvp-form__row--photo .rsvp-form__legend {
    display: none;
  }

  .photo-field {
    gap: 6px;
    padding: 5px 6px 5px 8px;
  }

  .photo-field__choose {
    gap: 10px;
  }

  .photo-field__preview {
    width: 36px;
    height: 36px;
  }

  .photo-field__preview svg {
    width: 16px;
    height: 16px;
  }

  .photo-field__text small {
    display: none;
  }

  .photo-field.is-filled .photo-field__text small {
    display: block;
    font-size: 0.71875rem;
  }

  .photo-field__remove {
    padding: 0.34rem 0.48rem;
    font-size: 0.90625rem;
  }

  .countdown__item span {
    margin-top: 6px;
    font-size: 0.6rem;
  }

  /* Tarjeta apilada: foto a todo el ancho arriba, texto debajo.
     Sin el "cómo llegar": la tarjeta entera ya es el enlace, así que
     ese espacio se le da a la imagen.

     La foto no tiene medida fija: absorbe todo el alto sobrante de la
     sección, dejando exactamente 24px de aire arriba y abajo. */
  /* Cadena de reparto vertical. Clave: altura definida en la sección y
     min-height:0 / minmax(0,1fr) en cada eslabón; sin eso ni el flex ni el
     grid bajan del tamaño de su contenido y la sección se desborda. */
  .place-section {
    display: flex;
    height: var(--section-h);
    flex-direction: column;
    padding-block: 24px;
  }

  .place-section .wrap {
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
  }

  /* En el móvil las tarjetas llegan casi al borde de la sección y la lámina
     de la ceremonia empezaba pegada a ellas. 24px de respiro entre las dos.
     Van de margen, no de relleno: la decoración de la lámina está anclada a
     su propia caja y con padding se le habría movido. */
  .ceremony-plate {
    margin-top: 24px;
    /* El contenido va centrado en vertical, así que este relleno de abajo lo
       empuja hacia arriba: la fecha y la hora quedan más a la vista sin
       tener que desplazar nada a mano ni romper el centrado. */
    padding-bottom: 7svh;
  }

  .place-list {
    flex: 1;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
    margin-top: clamp(0.6rem, 2svh, 1.25rem);
  }

  .place-card {
    min-height: 0;
  }

  .place-card__image-wrap {
    flex: 1;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
  }

  .place-card__body {
    flex: 0 0 auto;
  }

  .place-card__cta {
    display: none;
  }

  .musicians-arch {
    border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  }

  .musicians-arch__frame {
    inset: 14px 14px 0;
    border-width: 3px;
  }

  .musicians-illustration {
    inset: 24px 24px -2px;
    border-width: 3px;
  }

  /* Sin ampliar: así se ve la banda completa, sin cortar a nadie. */
  .musicians-illustration__art {
    transform: scale(1);
  }

  .gift-card {
    width: min(100%, 22rem);
    padding: 1rem 0.9rem;
    gap: 0;
    border-radius: 15px;
  }

  .gift-card::before {
    inset: 4px;
    border-radius: 11px;
  }

  .gift-card__heart {
    width: 2.05rem;
    margin-bottom: 0.55rem;
  }

  .gift-card__label,
  .gift-card__holder-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }

  /* El titular no se encoge: es un dato que hay que teclear en el banco. */
  .gift-card__holder {
    font-size: 0.875rem;
  }

  .gift-card__iban {
    margin: 0.55rem 0 0.4rem;
    /* El IBAN es lo que el invitado tiene que copiar a mano en el banco:
       aquí no se ahorra espacio. Mantiene el mismo espaciado entre cifras
       que en escritorio y parte por los huecos naturales de los grupos,
       nunca por mitad de uno (por eso se va el overflow-wrap: anywhere). */
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-align: center;
  }

  .gift-card__copy {
    gap: 8px;
    padding: 0.7rem 1.5rem;
    /* 44px de alto mínimo: es la medida a la que un dedo acierta sin
       pelearse. En el móvil este botón es el que más se usa de la web. */
    min-height: 44px;
    font-size: 0.75rem;
  }

  .gift-card__copy svg {
    width: 15px;
    height: 15px;
  }

  .rsvp-section__floral {
    opacity: 0.36;
  }

  .rsvp-section__floral--top {
    top: 0;
    left: -1rem;
    width: clamp(6.5rem, 30vw, 9rem);
  }

  .rsvp-section__floral--bottom {
    right: -1rem;
    bottom: 0;
    width: clamp(7rem, 32vw, 9.5rem);
  }

  .rsvp-form {
    gap: 22px;
  }

  .rsvp-form__options {
    flex-direction: column;
    gap: 12px;
  }

  .rsvp-form__submit {
    width: 100%;
  }
}

/* Pantallas móviles cortas (iPhone SE y similares) */
@media (max-width: 560px) and (max-height: 700px) {
  .welcome-section__content {
    padding-block: 0;
  }

  .countdown {
    margin-top: 1rem;
  }

  .countdown-section__branches {
    margin-top: 0;
  }

  .section h2 {
    margin-block: 0.35rem;
    font-size: clamp(1.75rem, 8vw, 2.1rem);
  }

  .section__intro {
    font-size: 0.90625rem;
    line-height: 1.45;
  }

  .place-list {
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .place-card__body {
    padding: 0.75rem;
  }

  .place-card__body .eyebrow {
    margin-bottom: 0.3rem;
    font-size: 0.58rem;
  }

  .place-card__body h3 {
    margin-bottom: 0.5rem;
    font-size: clamp(1.05rem, 4.8vw, 1.2rem);
    line-height: 1.05;
  }

  .place-card__meta {
    gap: 0.35rem;
  }

  .place-card__meta li {
    gap: 0.45rem;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .place-card__icon-wrap {
    width: 24px;
    height: 24px;
  }

  .place-card__cta {
    gap: 0.3rem;
    padding-top: 0.5rem;
    font-size: 0.58rem;
  }

  .place-card__stamp {
    top: 0.5rem;
    left: 0.5rem;
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .rsvp-section .section__intro {
    max-width: 19rem;
  }

  .rsvp-form {
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .rsvp-form__note {
    margin: 0;
    font-size: 0.8125rem;
  }

  .rsvp-form__row {
    gap: 0.25rem;
  }

  .rsvp-form label,
  .rsvp-form__legend {
    font-size: 0.8125rem;
  }

  .rsvp-form input[type="text"],
  .rsvp-form input[type="email"],
  .rsvp-form input[type="number"],
  .rsvp-form textarea {
    padding: 0.45rem 0.65rem;
    font-size: 16px;   /* nunca menos, o iOS hace zoom */
  }

  .rsvp-form textarea {
    height: 3rem;
    min-height: 3rem;
    resize: none;
  }

  .rsvp-form__options {
    flex-direction: row;
    gap: 0.5rem 1rem;
  }

  .rsvp-form__options label {
    font-size: 0.90625rem;
  }

  .rsvp-form__submit {
    width: 100%;
    margin-top: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.90625rem;
  }
}

/* ============================================================
   Pantallas muy bajas (mínimo soportado: 320x480).
   Compacta todo para que cada sección quepa entera sin recortes.
   ============================================================ */
@media (max-height: 520px) {
  /* Pantallas muy bajas: el formulario se ciñe para caber entero. */
  .rsvp-form {
    padding: 0.85rem 0.9rem;
  }

  .photo-field {
    padding: 5px 8px;
  }

  .photo-field__preview {
    width: 32px;
    height: 32px;
  }

  :root {
    /* sin franja asomando: aquí hace falta cada píxel */
    --peek: 0px;
  }

  .section h2 {
    margin-block: 0.2rem;
    font-size: clamp(1.35rem, 6vw, 1.7rem);
  }

  .section__intro {
    font-size: 0.90625rem;
    line-height: 1.4;
  }

  /* Bienvenida */
  .welcome-section__subtitle {
    margin-bottom: 0.5rem;
    font-size: 0.55rem;
  }

  .welcome-section__art-part--intro {
    width: min(36vw, 18svh);
  }

  .welcome-section__art-part--names {
    width: min(68vw, 34svh);
  }

  .welcome-section__copy {
    margin-top: 0.7rem;
  }

  /* 16px también aquí. Es el texto que abre la web y se lee entero, así
     que en apaisado no se encoge: lo que cede es el ancho de la columna,
     no el cuerpo de la letra. */
  .welcome-section__message {
    max-width: 21rem;
    font-size: 1.125rem;
    line-height: 1.45;
  }

  .welcome-section__date {
    margin-top: 0.5rem;
    font-size: 1.125rem;
  }

  /* Cuenta atrás */
  .countdown {
    margin-top: 0.6rem;
  }

  .countdown__item {
    padding: 8px 6px;
  }

  .countdown__item strong {
    font-size: clamp(1.6rem, 9vw, 2.4rem);
  }

  .countdown__item span {
    margin-top: 3px;
    font-size: 0.5rem;
  }

  .countdown-section__branches {
    width: 60%;
    margin-top: 0.35rem;
  }

  /* Lugar */
  .place-list {
    gap: 0.55rem;
    margin-top: 0.7rem;
  }

  .place-card__body {
    padding: 9px 11px 10px;
  }

  .place-card__body .eyebrow {
    margin-bottom: 2px;
    font-size: 0.55rem;
  }

  .place-card__body h3 {
    margin-bottom: 5px;
    font-size: 1.02rem;
  }

  .place-card__meta {
    gap: 4px;
  }

  .place-card__meta li {
    gap: 6px;
    font-size: 0.72rem;
  }

  .place-card__icon-wrap {
    width: 20px;
    height: 20px;
  }

  .place-card__icon {
    width: 11px;
    height: 11px;
  }

  .place-card__cta {
    padding-top: 7px;
    font-size: 0.58rem;
  }

  .place-card__stamp {
    top: 6px;
    left: 6px;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  /* Lámina de la ceremonia */
  .plate__heart {
    margin-bottom: 0.15rem;
  }

  .plate__rule {
    margin-block: 0.2rem;
  }

  .plate__note {
    margin-top: 0.35rem;
  }

  /* Músicos y cuenta atrás comparten ritmo de cabecera */
  .countdown-section .section__intro,
  .musicians-section .section__intro {
    margin-bottom: 0.6rem;
  }

  /* Regalo */
  .gift-card {
    width: min(100%, 24rem);
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
    gap: 0;
  }

  .gift-card__heart {
    width: 1.8rem;
    margin-bottom: 0.35rem;
  }

  .gift-card__iban {
    margin: 0.4rem 0 0.3rem;
    font-size: 1.05rem;
  }

  .gift-card__copy {
    padding: 0.55rem 1.3rem;
  }

  /* Confirmación */
  .rsvp-form {
    gap: 0.55rem;
    margin-top: 0.5rem;
  }

  .rsvp-form__note {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
  }

  .rsvp-form__row {
    gap: 0.15rem;
  }

  .rsvp-form label,
  .rsvp-form__legend {
    font-size: 0.8125rem;
  }

  .rsvp-form input[type="text"],
  .rsvp-form input[type="email"],
  .rsvp-form input[type="number"],
  .rsvp-form textarea {
    padding: 0.3rem 0.5rem;
    font-size: 16px;   /* nunca menos, o iOS hace zoom */
  }

  .rsvp-form textarea {
    height: 2.2rem;
    min-height: 2.2rem;
    resize: none;
  }

  .rsvp-form__options {
    flex-direction: row;
    gap: 0.3rem 0.8rem;
  }

  .rsvp-form__options label {
    font-size: 0.90625rem;
  }

  .rsvp-form__submit {
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.45rem 1rem;
    font-size: 0.90625rem;
  }
}

/* Pantalla baja pero ancha (móvil en horizontal): sobra ancho y falta alto,
   así que se reparte el contenido en dos columnas. */
@media (max-height: 520px) and (min-width: 561px) {
  .countdown__item {
    aspect-ratio: 2;
  }

  .countdown-section__branches {
    display: none;
  }

  .rsvp-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.9rem;
    max-width: 34rem;
  }

  .rsvp-form__submit,
  .rsvp-form__status,
  .rsvp-form__row:has(textarea) {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Ajustes de responsive pedidos: lámina de la ceremonia un 15% mayor
   y tope de alto en el dress code. Va al final para ganar a las bases.
   ========================================================= */
@media (max-width: 860px) {
    /* Dress code: si la pantalla es más alta de 750px, la sección se queda
     en 750. min() en vez de un breakpoint nuevo: el tope se aplica solo
     cuando hace falta y sigue siendo fluido por debajo. */
  .musicians-section {
    height: min(calc(100svh - var(--header-height)), 750px);
    min-height: min(calc(100svh - var(--header-height)), 750px);
    max-height: 750px;
  }

  /* El regalo, igual: tampoco se estira en pantallas muy largas. */
  .gift-section {
    min-height: min(calc(100svh - var(--header-height)), 750px);
    max-height: 750px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .welcome-section__chair {
    transition: none;
  }

  .petal {
    animation: none;
  }
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* =========================================================
   Intro en vídeo + música de fondo
   ========================================================= */
.intro {
  position: fixed;
  z-index: 200;
  display: grid;
  inset: 0;
  background: var(--ivory);
  place-items: center;
  transition: opacity 700ms ease;
}

/* Mientras dura la intro, ni scroll ni cabecera. */
.page.is-intro {
  overflow: hidden;
}

.page.is-intro .site-header,
.page.is-intro main,
.page.is-intro .footer {
  visibility: hidden;
}

.intro.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1800ms cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* El vídeo llena la pantalla entera. El recorte se ancla al 42% de altura,
   que es donde está el centro del lacre (va del 32,6% al 51,9% del vídeo):
   así el sello queda dentro del encuadre por apaisada que sea la ventana.
   Posición absoluta: si no, la caja toma el alto intrínseco del vídeo
   (1928px) y se desborda por abajo. */
.intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

/* Cuanto más apaisada es la ventana, menos franja del vídeo se ve, y un
   anclaje al 50% acabaría cortando el lacre por arriba (empieza en el
   32,6% del vídeo). Se va bajando lo justo para que siempre quepa entero. */
@media (min-aspect-ratio: 16 / 10) {
  .intro__video {
    object-position: center 47%;
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .intro__video {
    object-position: center 44%;
  }
}

@media (min-aspect-ratio: 21 / 10) {
  .intro__video {
    object-position: center 42%;
  }
}

/* Por encima de 2.88:1 la franja visible es más baja que el propio lacre
   (19,3% del vídeo): recortar lo partiría. Ahí se muestra entero. */
@media (min-aspect-ratio: 288 / 100) {
  .intro__video {
    object-fit: contain;
  }
}

/* Fogonazo blanco: tapa el corte seco del último fotograma. */
.intro__flash {
  position: absolute;
  z-index: 1;
  inset: 0;
  /* No es un blanco plano: nace en el centro, como un destello. */
  background: radial-gradient(circle at 50% 48%, #fff 0%, #fff 45%, rgba(255, 255, 255, 0.86) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms cubic-bezier(0.37, 0, 0.63, 1);
}

.intro.is-flash .intro__flash {
  opacity: 1;
}

/* El vídeo se acerca y se sobreexpone justo cuando entra el blanco. */
.intro.is-flash .intro__video {
  transform: scale(1.12);
  filter: brightness(1.5) saturate(0.8);
  transition: transform 1600ms cubic-bezier(0.33, 0, 0.2, 1), filter 700ms ease-in;
}

.intro__video {
  transition: transform 1600ms ease, filter 700ms ease;
}

/* La web entra desde el blanco, no de golpe. */
.page.is-revealing main {
  animation: revelar-cuerpo 1800ms cubic-bezier(0.22, 0.61, 0.24, 1) both;
}

.page.is-revealing .site-header {
  animation: revelar-suave 1300ms ease-out 320ms both;
}

.page.is-revealing .footer {
  animation: revelar-suave 1300ms ease-out 520ms both;
}

@keyframes revelar-cuerpo {
  from {
    opacity: 0;
    filter: blur(14px);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes revelar-suave {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.intro__skip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 8px 16px;
  border: 1px solid rgba(244, 241, 234, 0.5);
  border-radius: 999px;
  background: rgba(60, 58, 48, 0.35);
  color: #f4f1ea;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Botón de sonido: discreto, abajo a la derecha, siempre accesible. */
.music-toggle {
  position: fixed;
  z-index: 90;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.9);
  color: var(--olive-deep);
  cursor: pointer;
  place-items: center;
  box-shadow: 0 6px 18px -10px rgba(60, 58, 48, 0.55);
}

.music-toggle svg {
  width: 20px;
  height: 20px;
}

/* Sin música: aspa. Con música: ondas. */
.music-toggle .music-toggle__wave {
  display: none;
}

.music-toggle.is-playing .music-toggle__wave {
  display: block;
}

.music-toggle.is-playing .music-toggle__cross {
  display: none;
}

/* Pantalla de inicio de la intro: el vídeo espera al toque. */
/* Se ve el primer fotograma del vídeo. Esto es solo la zona de toque:
   invisible y a pantalla completa, sin botón encima. */
.intro__start {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   Los novios sentados sustituyen a las dos sillas vacías.
   Las sillas siguen en el HTML y en el CSS: para volver atrás
   basta quitar la clase "has-couple" del div de la escena.
   ========================================================= */
.welcome-section__ceremony.has-couple .welcome-section__chair {
  display: none;
}

.welcome-section__couple {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  width: 58%;
  height: auto;
  opacity: 0;
  transform: translateX(-50%) translateY(16px) scale(0.98);
  transform-origin: center bottom;
  transition: opacity 900ms ease, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sin la clase (modo sillas) los novios no se ven. */
.welcome-section__ceremony:not(.has-couple) .welcome-section__couple {
  display: none;
}

.welcome-section--ceremony.is-chair-together .welcome-section__couple {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* El botón Repetir también reinicia esta entrada. */
.welcome-section--ceremony.is-chair-instant .welcome-section__couple {
  transition: none;
}

/* El campo trampa existe para los robots, pero nadie debe verlo ni tabular a él. */
.rsvp-form__trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Respuesta del envío */
.rsvp-form__status.is-enviando {
  opacity: 0.7;
}

.rsvp-form__status.is-ok {
  color: var(--olive-deep);
  font-weight: 500;
}

.rsvp-form__status.is-error {
  color: #a4553f;
}

.rsvp-form__submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

/* Desplegable de acompañantes: sin el aspecto del sistema, con su flecha. */
.select-bonito {
  position: relative;
  display: block;
}

.select-bonito select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 2.4rem;
  cursor: pointer;
}

.select-bonito svg {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 16px;
  height: 16px;
  color: var(--olive-deep);
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 200ms ease;
}

.select-bonito:focus-within svg {
  transform: translateY(-50%) rotate(180deg);
}


/* ==========================================================================
   Sección activa en el menú (ScrollSpy).
   ========================================================================== */

/* El enlace de la sección en la que estás. Un filete fino, del mismo verde
   que el resto: se nota sin gritar. */
.site-header__nav a[aria-current="true"],
.mobile-menu__nav a[aria-current="true"] {
  color: var(--olive-deep);
}

.site-header__nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.site-header__nav a {
  position: relative;
}

.site-header__nav a::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.mobile-menu__nav a[aria-current="true"] {
  opacity: 1;
}

/* =========================================================
   Página de gracias (gracias.html)

   Hereda todo de la invitación: mismos colores, misma tipografía y las
   mismas florituras de la sección de confirmación. Aquí solo va lo propio
   de una página que ocupa la pantalla entera con un único mensaje.
   ========================================================= */

.gracias-section {
  position: relative;
  /* Descontando la cabecera: con 100svh a secas, el header la empuja hacia
     abajo y la página acaba con un scroll de sobra que no lleva a nada. */
  min-height: calc(100svh - var(--header-height));
  align-content: center;
  overflow: hidden; /* fallback */
  overflow: clip;
  background: var(--ivory);
}

.gracias-section .wrap {
  position: relative;
  z-index: 1;
  width: min(calc(100% - var(--gutter)), 34rem);
  margin: 0 auto;
  text-align: center;
}

.gracias__heart {
  width: clamp(2.75rem, 9vw, 4.25rem);
  height: auto;
  margin-bottom: clamp(0.9rem, 3svh, 1.5rem);
}

.gracias-section h2 {
  margin-bottom: clamp(0.5rem, 1.6svh, 0.9rem);
}

.gracias__nota {
  margin: clamp(1.25rem, 4svh, 2rem) 0 clamp(1.75rem, 5svh, 2.75rem);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, min(2vw, 2.6svh), 1.4rem);
}

.gracias__nota strong {
  font-weight: 500;
  white-space: nowrap; /* la fecha nunca se parte en dos líneas */
}

/* Mismo botón macizo que el de copiar el IBAN: es la única acción de la
   página, así que se ve que se puede pulsar sin tener que buscarla. */
.gracias__volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  border: 1px solid var(--olive-deep);
  border-radius: 999px;
  background: var(--olive-deep);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -8px rgba(52, 58, 46, 0.55);
  transition: background 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease;
}

.gracias__volver:hover {
  background: #5f6f63;
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -10px rgba(52, 58, 46, 0.6);
}

.gracias__volver:active {
  transform: translateY(0);
}

.gracias__volver:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .gracias-section .wrap {
    width: calc(100% - 2rem);
  }

  .gracias__nota {
    font-size: 1.125rem;
  }
}