/* ============================================================
   Invitación de boda · Alma & Pedro
   Diseño minimalista · mobile first
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
  --crema:      #F6F1EA;   /* fondo principal      */
  --crema-alt:  #EFE7DC;   /* fondo alterno        */
  --marco:      #E3D8C9;   /* líneas y bordes      */
  --tinta:      #3B322A;   /* texto principal      */
  --tinta-mid:  #6B5D50;   /* texto secundario     */
  --terracota:  #B0764F;   /* acento cálido        */
  --salvia:     #8B9480;   /* acento verde         */
  --blanco:     #FFFDFA;

  --display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --texto:   'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --pad:     clamp(1.5rem, 7vw, 2.75rem);
  --gap-sec: clamp(4rem, 15vw, 6.5rem);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--crema-alt);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p, blockquote, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

/* Columna central: en celular ocupa todo; en escritorio se ve
   como una invitación de papel centrada. */
.page {
  max-width: 560px;
  margin-inline: auto;
  background: var(--crema);
  overflow: hidden;
}

@media (min-width: 600px) {
  .page { box-shadow: 0 0 60px rgba(59, 50, 42, .13); }
}

/* ---------- 3. Animaciones ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   1s cubic-bezier(.22, .61, .36, 1) var(--d, 0s),
    transform 1s cubic-bezier(.22, .61, .36, 1) var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes kenburns {
  from { transform: scale(1.14); }
  to   { transform: scale(1);    }
}

@keyframes flotar {
  0%, 100% { transform: translateY(0);    opacity: .85; }
  50%      { transform: translateY(10px); opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 4. Tipografía compartida ---------- */
.eyebrow {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--terracota);
  text-align: center;
}

.h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1.15;
  text-align: center;
  letter-spacing: .01em;
}
.h2--light { color: var(--blanco); }
.h2--caps {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(1.5rem, 6.4vw, 1.95rem);
}

/* Sobre blanco (SVG: se ve igual en todos los dispositivos) */
.sobre {
  width: clamp(60px, 17vw, 74px);
  color: var(--terracota);
  margin: .2rem 0 .1rem;
}
.sobre svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(59, 50, 42, .12));
}

.body {
  font-size: .95rem;
  line-height: 1.9;
  text-align: center;
  color: var(--tinta-mid);
  max-width: 34ch;
  margin-inline: auto;
}
.body--light { color: rgba(255, 253, 250, .88); }

/* ---------- 5. Portada ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img { animation: kenburns 14s ease-out forwards; }

.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(42, 33, 26, .80)  0%,
      rgba(42, 33, 26, .66) 28%,
      rgba(42, 33, 26, .42) 50%,
      rgba(42, 33, 26, .18) 78%,
      rgba(42, 33, 26, .32) 100%);
}

.hero__content {
  position: relative;
  padding: 0 var(--pad) clamp(4.5rem, 16vw, 6rem);
  text-align: center;
  color: var(--blanco);
  text-shadow: 0 1px 24px rgba(30, 23, 18, .45);
}

.hero__kicker {
  font-size: .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 1.1rem;
}

.hero__names {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.4rem, 19vw, 5rem);
  line-height: .98;
  letter-spacing: .02em;
}
.hero__names span { display: block; }

.hero__amp {
  font-style: italic;
  font-size: .46em;
  line-height: 1.9;
  opacity: .82;
}

.hero__rule {
  width: 64px; height: 1px;
  margin: 1.6rem auto 1.1rem;
  background: rgba(255, 253, 250, .6);
  transform-origin: center;
}
.hero__rule.reveal          { transform: scaleX(0); }
.hero__rule.reveal.is-visible { transform: scaleX(1); }

.hero__date {
  font-size: .8rem;
  letter-spacing: .28em;
  opacity: .92;
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: clamp(1.6rem, 5vw, 2.2rem);
  transform: translateX(-50%);
}
.hero__scroll span {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, rgba(255,253,250,.85), rgba(255,253,250,0));
  animation: flotar 2.6s ease-in-out infinite;
}

/* ---------- 6. Secciones ---------- */
.section {
  padding: var(--gap-sec) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.section--cream  { background: var(--crema-alt); }
.section--tight  { gap: .9rem; }
.section--quote  { gap: clamp(2.2rem, 8vw, 3rem); }
.section--date   { gap: 2rem; }

/* Foto completa: sin recortar y de borde a borde, igual que las bandas.
   Los márgenes negativos cancelan el padding lateral de la sección. */
.photo {
  width: calc(100% + var(--pad) * 2);
  margin-inline: calc(var(--pad) * -1);
}
/* Si la foto abre o cierra la sección, se pega al borde: así no se
   suman el relleno de esta sección y el de la siguiente. */
.section > .photo:first-child { margin-top:    calc(var(--gap-sec) * -1); }
.section > .photo:last-child  { margin-bottom: calc(var(--gap-sec) * -1); }
.photo img {
  height: auto;
  object-fit: fill;
}

.quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 5.4vw, 1.5rem);
  line-height: 1.65;
  text-align: center;
  color: var(--tinta);
}

/* Ornamento decorativo.
   Los anchos son múltiplos exactos del viewBox (120): 120 = escala 1,
   96 = escala 0.8. Así el trazo cae en píxeles enteros y Safari no
   reparte el antialiasing de forma desigual entre los dos lados. */
.ornament {
  width: 120px;
  margin-inline: auto;
  color: var(--terracota);
  opacity: .75;
}
.ornament svg {
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 24;   /* iOS no siempre deduce la altura con height:auto */
  display: block;
}
.ornament--sm { width: 96px; }

.parents {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra el ornamento que separa a los padres */
  gap: 1.6rem;
  text-align: center;
  margin-top: .4rem;
}
.parents__pair {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--tinta);
}
.parents__pair span {
  display: block;
  font-style: italic;
  color: var(--terracota);
  font-size: .95rem;
  line-height: 1.5;
}

/* ---------- 7. Fecha y cuenta regresiva ---------- */
.bigdate { text-align: center; color: var(--tinta); }

.bigdate__dow {
  display: block;
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tinta-mid);
  margin-bottom: .9rem;
}

.bigdate__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 3.5vw, 1.2rem);
  font-family: var(--display);
}
.bigdate__month,
.bigdate__year {
  font-size: clamp(.92rem, 4vw, 1.05rem);
  letter-spacing: .16em;
  color: var(--tinta-mid);
  padding-inline: clamp(.7rem, 3.5vw, 1.2rem);
}
/* Orden: día · mes · año — los filetes enmarcan el mes */
.bigdate__month {
  border-left:  1px solid var(--marco);
  border-right: 1px solid var(--marco);
}

.bigdate__day {
  font-size: clamp(4rem, 21vw, 5.4rem);
  font-weight: 300;
  line-height: 1;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 340px;
  border-top: 1px solid var(--marco);
  border-bottom: 1px solid var(--marco);
  padding: 1.2rem 0;
}
.countdown li {
  text-align: center;
  border-right: 1px solid var(--marco);
}
.countdown li:last-child { border-right: 0; }

.countdown strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 7vw, 1.9rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.countdown span {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-mid);
}

/* ---------- 8. Bandas de foto ---------- */
.band {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* ---------- 9. Lugares ---------- */
.venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.venue__icon { width: 40px; color: var(--salvia); }
.venue__icon svg { width: 100%; height: auto; display: block; }

.venue__type {
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-top: .3rem;
}

.venue__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.35rem, 6vw, 1.65rem);
  line-height: 1.3;
}

.venue__time {
  font-size: .92rem;
  color: var(--tinta-mid);
  letter-spacing: .06em;
}

/* ---------- 10. Botones ---------- */
.btn {
  display: inline-block;
  margin-top: .9rem;
  padding: .85rem 2.1rem;
  border: 1px solid var(--terracota);
  border-radius: 999px;
  color: var(--terracota);
  background: transparent;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .45s ease, color .45s ease, transform .3s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--terracota);
  color: var(--crema);
}
.btn:active { transform: scale(.97); }

.btn--light {
  border-color: rgba(255, 253, 250, .75);
  color: var(--blanco);
}
.btn--light:hover, .btn--light:focus-visible {
  background: var(--blanco);
  color: var(--tinta);
}

/* ---------- 11. Itinerario ---------- */
.timeline {
  width: 100%;
  max-width: 330px;
  margin-top: 1rem;
  position: relative;
}
/* Filete vertical que hilvana los iconos */
.timeline::before {
  content: '';
  position: absolute;
  left: 17px; top: 18px; bottom: 18px;
  width: 1px;
  background: var(--marco);
}

.timeline li {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 0 .8rem 3.1rem;
}

.timeline__icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px; height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracota);
  background: var(--crema);   /* tapa el filete por detrás */
}
.timeline__icon svg { width: 26px; height: 26px; display: block; }

.timeline__time {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
  min-width: 66px;
}
.timeline__label {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--tinta);
}

/* ---------- 12. Vestimenta ---------- */
.dress {
  font-family: var(--display);
  font-size: clamp(1.6rem, 7vw, 2rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota);
}

/* ---------- 13. Regalos ---------- */
.giftcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  padding: 1.6rem 2.2rem;
  border: 1px solid var(--marco);
  background: var(--crema-alt);
}
.giftcard__label {
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tinta-mid);
}
.giftcard__code {
  font-family: var(--display);
  font-size: clamp(1.8rem, 8vw, 2.2rem);
  letter-spacing: .1em;
  color: var(--terracota);
  line-height: 1.2;
}
.giftcard__hint {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-mid);
  opacity: .7;
}

/* ---------- 14. No niños ---------- */
.nokids {
  font-family: var(--display);
  font-size: clamp(1.7rem, 8vw, 2.1rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-top: .3rem;
}

/* ---------- 15. Confirmación ---------- */
.rsvp {
  position: relative;
  min-height: 96svh;
  display: flex;
  align-items: flex-end;      /* el texto abajo: no tapa los rostros */
  justify-content: center;
  overflow: hidden;
}
.rsvp__media { position: absolute; inset: 0; }
.rsvp__media img { object-position: 50% 18%; }
.rsvp__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(42, 33, 26, .24)  0%,
    rgba(42, 33, 26, .32) 30%,
    rgba(42, 33, 26, .56) 48%,
    rgba(42, 33, 26, .82) 68%,
    rgba(42, 33, 26, .92) 100%);
}
.rsvp__content {
  position: relative;
  padding: clamp(3rem, 12vw, 4.5rem) var(--pad) clamp(3.5rem, 13vw, 5rem);
  text-shadow: 0 1px 22px rgba(30, 23, 18, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}
.rsvp__deadline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.25rem, 5.5vw, 1.5rem);
  color: var(--blanco);
}

/* ---------- 15b. Tarjeta del invitado (datos del backend) ---------- */
.pase {
  width: 100%;
  max-width: 310px;
  margin-top: .5rem;
  padding: 1.7rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  border: 1px solid rgba(255, 253, 250, .34);
  background: rgba(30, 23, 18, .34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-shadow: none;
}

.pase__label {
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .72);
}

.pase__nombre {
  font-family: var(--display);
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--blanco);
  min-height: 1.25em;
}

.pase__rule {
  width: 42px; height: 1px;
  background: rgba(255, 253, 250, .38);
}

.pase__pases {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .92);
  min-height: 1.2em;
}

.pase__nota:not(:empty) {
  margin-top: .2rem;
  font-size: .64rem;
  letter-spacing: .1em;
  line-height: 1.6;
  color: rgba(255, 253, 250, .58);
}

.pase[data-estado="error"] .pase__nombre {
  font-size: clamp(1.15rem, 5.2vw, 1.4rem);
  color: #F2C4A8;
}

/* Placeholder animado mientras llegan los datos */
.sk {
  display: block;
  height: .78em;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 253, 250, .10) 0%,
    rgba(255, 253, 250, .30) 50%,
    rgba(255, 253, 250, .10) 100%);
  background-size: 220% 100%;
  animation: brillo 1.6s ease-in-out infinite;
}
.sk--nombre { width: 11ch; margin: .28em auto; }
.sk--pases  { width: 8ch;  margin: .22em auto; height: .7em; }

@keyframes brillo {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}

.rsvp .btn[disabled] {
  opacity: .42;
  pointer-events: none;
}

.form__msg {
  min-height: 1.2em;
  max-width: 30ch;
  font-size: .76rem;
  line-height: 1.55;
  text-align: center;
  text-shadow: none;
}
.form__msg--error { color: #F2C4A8; }
.form__msg--ok    { color: rgba(255, 253, 250, .9); }

/* ---------- 16. Cierre ---------- */
.footer {
  padding: clamp(3.5rem, 13vw, 5rem) var(--pad) clamp(4rem, 14vw, 5.5rem);
  text-align: center;
  background: var(--crema);
}
.footer__names {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 300;
  line-height: 1.2;
}
.footer__names span { font-style: italic; color: var(--terracota); }
.footer__date {
  margin-top: .7rem;
  font-size: .68rem;
  letter-spacing: .3em;
  color: var(--tinta-mid);
}

/* ---------- 15c. Confirmación: sí / no y número de asistentes ---------- */
.rsvp-form {
  width: 100%;
  margin-top: .4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 253, 250, .22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

.rsvp-form__pregunta {
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .72);
}

.opciones {
  display: flex;
  gap: .6rem;
  width: 100%;
}

.opcion {
  flex: 1;
  padding: .78rem .4rem;
  border: 1px solid rgba(255, 253, 250, .42);
  border-radius: 999px;
  background: transparent;
  color: var(--blanco);
  font-family: var(--texto);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.opcion:hover, .opcion:focus-visible {
  border-color: var(--blanco);
}

.opcion.is-activa {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--tinta);
}

.conteo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}

.conteo__label {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .72);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}

.stepper__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 253, 250, .42);
  border-radius: 50%;
  background: transparent;
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
}

.stepper__btn:hover:not([disabled]), .stepper__btn:focus-visible {
  background: var(--blanco);
  color: var(--tinta);
}

.stepper__btn[disabled] {
  opacity: .3;
  cursor: default;
}

.stepper__valor {
  min-width: 2ch;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--blanco);
  text-align: center;
}

.conteo__tope {
  font-size: .6rem;
  letter-spacing: .14em;
  color: rgba(255, 253, 250, .58);
}

.opcion:focus-visible, .stepper__btn:focus-visible, .btn:focus-visible {
  outline: 2px solid rgba(255, 253, 250, .85);
  outline-offset: 3px;
}

.pase[data-estado="error"] .rsvp-form { display: none; }