/* ==========================================================
   Boda Pía & José Luis · 06.02.2027
   Paleta: Sage #B2BFA5 · Moss #8A9A7B · Olive #5F6B4E
           Ivory #EDE7DC · White #FFFFFF
   ========================================================== */
:root {
  --sage:  #B2BFA5;
  --moss:  #8A9A7B;
  --olive: #5F6B4E;
  --olive-deep: #3E4635;
  --ivory: #EDE7DC;
  --ivory-soft: #F6F3EC;
  --white: #FFFFFF;
  --gold:  #C9B38A;
  /* El sobre tiene su propia escala de verdes: el salvia del resto de la
     invitacion se confundia con el papel y no llamaba a tocarlo. */
  --sobre:       #4A573C;
  --sobre-alto:  #5A6A49;
  --sobre-bajo:  #3A452E;
  --serif: 'Playfair Display', Georgia, serif;
  --script: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;

  /* Colores de la tipografía, separados de los de superficie:
     los verdes siguen mandando en fondos y acuarelas, la letra
     pasa al sistema carbón / gris / latón. */
  --texto:        #2E2E2A;   /* títulos y texto fuerte */
  --texto-2:      #4C4A44;   /* cuerpo */
  --texto-3:      #67655D;   /* secundario (oscurecido para pasar AA a 14px) */
  --acento:       #A98B58;   /* acento sobre claro */
  --texto-claro:  #F7F4ED;   /* cuerpo sobre fondo oscuro */
  --acento-claro: #D0B278;   /* acento sobre fondo oscuro */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
.grain {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background-image: url("/assets/img/grain.svg");
  background-size: 200px 200px; background-repeat: repeat;
  opacity: .45; mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {}
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texto);
  background: var(--ivory-soft);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }

/* ---------- Sobre / portada ---------- */
.envelope {
  position: fixed; inset: 0; z-index: 100;
  background: #F7F4EC;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 1s ease, visibility 1s;
  overflow: hidden;
}
.envelope.open { opacity: 0; visibility: hidden; pointer-events: none; }
.env-wash {
  position: absolute; inset: -10%;
  background: url("/assets/art/lavado.jpg") center/cover;
  opacity: .2; mix-blend-mode: multiply; filter: blur(3px);
  animation: wash-drift 26s ease-in-out infinite alternate;
}
@keyframes wash-drift { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.08) rotate(1.5deg); } }
/* ═══════════ La corona de eucalipto ═══════════
   Vuelve el óvalo centrado: la corona crece más que la pantalla para que
   su claro interior se abra y las hojas no toquen el texto. */
.env-wreath {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: min(640px, 138vw, 70vh); transform: translate(-50%, -54%);
  aspect-ratio: 3/4;
  background: url("/assets/art/corona.jpg") center/contain no-repeat;
  mix-blend-mode: multiply; opacity: .95;
  animation: wreath-in 1.6s ease both;
}
@keyframes wreath-in {
  from { opacity: 0; transform: translate(-50%,-54%) scale(.94); }
  to   { opacity: .95; transform: translate(-50%,-54%) scale(1); }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* El rayo de sol que cruza la pantalla, ida y vuelta, muy lento */
.env-sol {
  position: absolute; inset: -25%; pointer-events: none; z-index: 2;
  background: linear-gradient(148deg,
    rgba(255,247,219,0) 30%,
    rgba(255,246,213,.42) 43%,
    rgba(255,252,236,.62) 49%,
    rgba(255,246,213,.3) 55%,
    rgba(255,247,219,0) 68%);
  filter: blur(6px);
  animation: sol-pasa 21s ease-in-out 1s infinite alternate;
}
@keyframes sol-pasa {
  from { transform: translate(-9%, -5%) rotate(-3.5deg); opacity: .55; }
  to   { transform: translate(9%, 5%) rotate(3.5deg); opacity: 1; }
}

/* Hojas sueltas apoyadas en el borde interior del marco, meciéndose */
.env-hojas { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.env-hojas i {
  position: absolute; display: block;
  background: center/contain no-repeat;
  transform-origin: var(--eje, bottom center);
  animation: mece var(--vel, 7s) ease-in-out var(--esp, 0s) infinite alternate,
             aparece 1.4s ease 1.4s both;
}
@keyframes mece {
  from { transform: rotate(calc(var(--giro, 5deg) * -1)); }
  to   { transform: rotate(var(--giro, 5deg)); }
}

/* La lluvia de pétalos y hojitas */
.env-lluvia { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.petalo {
  position: absolute; top: 0; left: var(--x);
  width: var(--tam); height: var(--tam);
  animation: cae var(--dur) linear var(--esp) infinite;
  will-change: transform;
}
.petalo i {
  display: block; width: 100%; height: 100%;
  background: center/contain no-repeat;
  opacity: var(--op);
  animation: voltea var(--giro-dur) ease-in-out var(--esp) infinite alternate;
}
@keyframes cae {
  0%   { transform: translate3d(0, -18vh, 0); }
  100% { transform: translate3d(var(--dx), 118vh, 0); }
}
@keyframes voltea {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(var(--vuelta)) scale(.86); }
}

.env-scene { z-index: 6; }
.env-hint { z-index: 6; }
.env-scene {
  position: relative; perspective: 1400px;
  display: flex; flex-direction: column; align-items: center;
  /* El contenido no pasa del claro central de la corona: las hojas quedan afuera */
  width: min(290px, 68vw); max-width: 100%;
}
@keyframes scene-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.env-eyebrow {
  font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  letter-spacing: 6px; font-size: 10px; color: var(--texto-3); margin-bottom: 12px;
  animation: scene-in 1s ease .25s both;
}
.env-names {
  font-family: var(--serif); font-weight: 600; color: var(--texto);
  font-size: clamp(26px, 7.2vw, 35px); line-height: 1.06; text-align: center;
  letter-spacing: .5px;
  animation: scene-in 1.1s ease .45s both;
}
.env-names span { font-style: italic; font-weight: 400; color: var(--acento); padding: 0 2px; }
.env-daterow { display: flex; align-items: center; gap: 12px; margin: 14px 0 24px; animation: scene-in 1.1s ease .65s both; }
.env-rule { width: 26px; height: 1px; background: var(--acento); flex-shrink: 0; }
.env-date {
  font-family: var(--sans); font-weight: 500; letter-spacing: 4px;
  font-size: 10.5px; color: var(--texto-2); white-space: nowrap;
}
@keyframes env-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Sobre pintado en acuarela */
.env-pkg {
  position: relative; width: min(194px, 52vw); aspect-ratio: 268/182;
  transition: transform 1.2s cubic-bezier(.3,.9,.3,1);
  animation: sobre-aterriza 1.25s cubic-bezier(.22,1.1,.36,1) .85s both;
}
/* El sobre no esta ahi desde el primer cuadro: baja y se posa. Llega ultimo,
   despues de los nombres, para que la vista termine en el. */
@keyframes sobre-aterriza {
  from { opacity: 0; transform: translateY(-34px) scale(.9) rotate(-2.5deg); }
  to   { opacity: 1; transform: none; }
}
.env-back {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden;
  background: url("/assets/art/papel.jpg") center/cover, var(--sobre);
  background-blend-mode: multiply;
  box-shadow: 0 26px 54px rgba(40,50,32,.42), 0 2px 0 rgba(255,255,255,.14) inset;
}
.env-card {
  position: absolute; left: 9px; right: 9px; top: 8px; bottom: 8px;
  background: linear-gradient(180deg, #FBF9F3, #F1EBDF); border-radius: 3px;
  box-shadow: 0 6px 16px rgba(95,107,78,.22); z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: transform 1s cubic-bezier(.3,.9,.3,1);
}
.ec-top { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: 3px; font-size: 8px; color: var(--texto-3); margin-bottom: 5px; }
.ec-names { font-family: var(--script); font-weight: 500; font-size: clamp(20px, 6vw, 25px); line-height: 1.1; color: var(--texto-2); }
.ec-names span { color: var(--acento); font-style: italic; font-weight: 400; }
.ec-line { width: 22px; height: 1px; background: var(--acento); margin: 8px 0; }
.ec-date { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: 3px; font-size: 9px; color: var(--texto-3); }
.env-pocket { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ep-l, .ep-r, .ep-b {
  position: absolute; inset: 0;
  background: url("/assets/art/papel.jpg") center/cover, var(--sobre);
  background-blend-mode: multiply;
}
/* Cada solapa recibe la luz distinto: eso es lo que da el volumen de papel
   doblado. Sin esa diferencia el sobre se lee como una mancha plana. */
.ep-l { clip-path: polygon(0 0, 50% 50%, 0 100%); background-color: var(--sobre-bajo); }
.ep-r { clip-path: polygon(100% 0, 50% 50%, 100% 100%); background-color: #333D29; }
.ep-b {
  clip-path: polygon(0 100%, 50% 40%, 100% 100%);
  background-color: var(--sobre-alto);
  filter: drop-shadow(0 -3px 5px rgba(30,38,24,.5));
}
.env-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 60%;
  background: url("/assets/art/papel.jpg") center/cover, var(--sobre-alto);
  background-blend-mode: multiply;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 5px 8px rgba(30,38,24,.5));
  transform-origin: top; transition: transform 1.2s cubic-bezier(.5,0,.3,1), filter 1.2s ease; z-index: 6;
}
/* Un brillo que cruza el sobre cada tanto, como luz sobre papel satinado.
   Es lo que hace que el objeto se lea vivo y no como un dibujo pegado. */
.env-pkg::after {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  border-radius: 3px;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 38%, rgba(255,250,232,.3) 47%,
    rgba(255,252,240,.5) 50%, rgba(255,250,232,.26) 53%, rgba(255,255,255,0) 62%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: sobre-brilla 6.5s ease-in-out 2.4s infinite;
}
@keyframes sobre-brilla {
  0%, 62%  { background-position: 150% 0; }
  100%     { background-position: -150% 0; }
}
.env-seal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 90px; height: 90px;
  background: url("/assets/art/sello-t.webp") center/contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(95,107,78,.35));
  display: flex; align-items: center; justify-content: center; z-index: 9;
  transition: opacity .5s; animation: seal-pulse 2.8s ease-in-out infinite;
}
.env-seal span {
  font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: 1.5px;
  color: var(--texto); text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
@keyframes seal-pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.05); } }

/* Estado abriendo */
.envelope.opening .env-flap {
  transform: rotateX(180deg);
  filter: brightness(.97) saturate(1.08) drop-shadow(0 -3px 6px rgba(95,107,78,.28));
}
.envelope.opening .env-seal { opacity: 0; animation: none; transition: opacity .35s ease; }
.envelope.opening .env-pkg::after { animation: none; opacity: 0; }
/* La tarjeta sale DESDE DENTRO: mientras la solapa se abre sigue oculta tras
   el bolsillo (z-index 2) y solo pasa al frente cuando empieza a deslizarse. */
.envelope.opening .env-card {
  transition: none;
  animation: card-slide 1.25s cubic-bezier(.34,.9,.32,1) .8s both;
}
@keyframes card-slide {
  0% {
    transform: translateY(0) scale(1) rotate(0deg); z-index: 2;
    box-shadow: 0 6px 16px rgba(95,107,78,.22);
  }
  1% { z-index: 9; }
  /* Se ladea al despegar, como cuando la tomas con los dedos */
  45% { transform: translateY(-52px) scale(1.04) rotate(-2.6deg); box-shadow: 0 16px 30px rgba(95,107,78,.3); }
  75% { transform: translateY(-96px) scale(1.08) rotate(-3.4deg); }
  100% {
    transform: translateY(-118px) scale(1.1) rotate(-2.2deg); z-index: 9;
    box-shadow: 0 26px 46px rgba(95,107,78,.4);
  }
}
/* El sobre cede un poco al salir la tarjeta, como papel que se vacia */
.envelope.opening .env-pkg { transform: translateY(30px) scale(.97); transition-delay: .8s; }
.envelope.opening .env-hint { opacity: 0; }
.envelope.opening .env-eyebrow,
.envelope.opening .env-names,
.envelope.opening .env-daterow { opacity: 0; }
.env-eyebrow, .env-names, .env-daterow { transition: opacity .45s ease; }

.env-hint {
  position: absolute; left: 0; right: 0;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px));
  text-align: center;
  font-family: var(--sans); font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase; font-size: 10px;
  color: var(--texto-2); transition: opacity .4s;
  animation: aparece .8s ease 2.3s both, hint-blink 2.4s ease-in-out 2.3s infinite;
}
@keyframes hint-blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@keyframes portal-zoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes portal-line { 0% { opacity: 0; transform: translateY(12px); } 30%,100% { opacity: 1; transform: none; } }
@keyframes portal-skip { to { opacity: 1; } }

/* ---------- Botón música ---------- */
.music-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(62,70,53,.82); color: var(--texto-claro);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: transform .25s;
}
.music-btn:active { transform: scale(.92); }
.music-btn.playing svg { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.music-btn.paused { opacity: .7; }
.music-btn.paused::after {
  content: ''; position: absolute; width: 2px; height: 28px;
  background: var(--ivory); transform: rotate(45deg); border-radius: 2px;
}

/* ---------- Hero ---------- */
/* El hero va partido: la foto arriba y la acuarela con los textos abajo,
   las dos dentro de la misma pantalla. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column;
        overflow: hidden; background: var(--ivory-soft); }
/* Dos cuidados aqui, y los dos son necesarios:
   - min-height:0, porque si no el alto intrinseco de la foto (cuadrada, o
     sea tan alta como ancha la pantalla) actua de piso.
   - el alto en svh y no en %, porque el hero solo tiene min-height: un
     porcentaje contra un contenedor de alto indefinido se trata como auto
     y vuelve a mandar la foto, apretando los textos de abajo. */
.hero-foto { position: relative; flex: 0 0 46svh; min-height: 0;
             overflow: hidden; background: var(--ivory-soft); }
/* Las tres capas comparten encuadre exacto y se mueven como una sola, para
   que el recorte nunca se desalinee del paisaje que tiene detras. */
.hf-capas {
  position: absolute; inset: 0; transform-origin: 50% 40%;
  animation: foto-respira 24s ease-in-out .2s infinite alternate;
}
.hf-capas > * {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 38%; display: block;
}
.hf-paisaje { pointer-events: none; }
/* iOS dibuja su boton de play sobre el poster si no puede autorreproducir */
.hf-paisaje::-webkit-media-controls,
.hf-paisaje::-webkit-media-controls-start-playback-button,
.hf-paisaje::-webkit-media-controls-panel,
.hf-paisaje::-webkit-media-controls-overlay-play-button {
  display: none !important; -webkit-appearance: none; opacity: 0;
}
/* La foto respira: un acercamiento lentisimo y una deriva minima, 24
   segundos de ida y vuelta. Mueve el encuadre, no los pixeles. */
@keyframes foto-respira {
  0%   { transform: scale(1)     translate3d(0, 0, 0); }
  100% { transform: scale(1.065) translate3d(0, -1.1%, 0); }
}
/* la foto no termina en un borde duro: se funde con el papel de abajo */
.hero-foto-fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 30%;
  background: linear-gradient(to bottom, rgba(246,243,236,0), #F6F3EC);
  pointer-events: none;
}
/* Papel liso: aqui no hay acuarela, los nombres mandan solos.
   La flecha de scroll vive pegada al borde de abajo, asi que le reservamos
   su franja: sin esto, en cualquier pantalla mas baja que ~780px la cuenta
   regresiva se le monta encima. */
.hero-abajo { position: relative; flex: 1 1 auto; display: flex;
              align-items: center; justify-content: center; overflow: visible;
              padding: 34px 0 56px;
              background: var(--ivory-soft); }
/* El papel deja de leerse como una hoja en blanco */
.hero-grano {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("/assets/img/grain.svg"); background-size: 190px 190px;
  opacity: .28; mix-blend-mode: multiply;
}
.hero-vineta {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(118% 82% at 50% 32%,
              rgba(255,255,255,0) 44%, rgba(120,112,92,.13) 100%);
}
/* El lacre del sobre, posado justo en la costura. Cuelga hacia arriba sobre
   la foto, asi que su contenedor NO puede recortar: entero se lee como un
   objeto puesto encima, cortado parece un error. */
.hero-lacre {
  position: absolute; top: 0; left: 50%; z-index: 4;
  width: 80px; height: 80px; transform: translate(-50%, -50%);
  pointer-events: none; filter: drop-shadow(0 6px 13px rgba(70,80,58,.34));
}
@media (max-height: 680px) and (max-width: 899px) {
  .hero-lacre { width: 66px; height: 66px; }
  .hero-abajo { padding-top: 28px; }
}
/* ---------- Pantallas anchas: el hero se parte en dos ----------
   En telefono la foto va arriba y los nombres abajo, que es la unica
   composicion posible en vertical. En un notebook esa misma pila deja una
   franja de foto y mucho papel vacio debajo: en horizontal lo natural es
   ponerlas lado a lado, con la foto llenando media pantalla de alto
   completo. Se pide orientacion horizontal ademas del ancho para que una
   tablet en vertical, que puede pasar los 900px, siga apilada. */
@media (min-width: 900px) and (orientation: landscape) {
  .hero { flex-direction: row; }
  /* en fila, flex-basis manda el ancho, no el alto: hay que pisar el 46svh */
  .hero-foto { flex: 0 0 52%; }
  /* el desvanecido a papel pasa del borde de abajo al borde derecho */
  .hero-foto-fade {
    left: auto; top: 0; bottom: 0; right: -1px;
    width: 26%; height: auto;
    background: linear-gradient(to right, rgba(246,243,236,0), #F6F3EC);
  }
  .hero-abajo { flex: 1 1 48%; padding: 40px 24px 64px; }
  /* el lacre sigue posado en la costura, que ahora es vertical */
  .hero-lacre { top: 50%; left: 0; }
  .hero-content { width: min(86%, 420px); }
}

/* Pantallas bajas (un iPhone con las barras de Safari a la vista): la foto
   cede altura para que los textos respiren en vez de apretarse. */
@media (max-height: 780px) and (max-width: 899px) { .hero-foto { flex-basis: 42svh; } }
@media (max-height: 680px) and (max-width: 899px) { .hero-foto { flex-basis: 37svh; } }
@media (max-height: 610px) and (max-width: 899px) { .hero-foto { flex-basis: 31svh; }
                             .hero-abajo { padding-bottom: 46px; } }
.hero-content {
  position: relative; z-index: 2; text-align: center; color: var(--texto);
  width: min(72%, 340px); padding: 0;
}
.hero-top {
  font-family: var(--sans); font-weight: 500; letter-spacing: 6px; text-transform: uppercase;
  font-size: clamp(11px, 2.9vw, 14px); margin-bottom: 12px; color: var(--texto);
}
.hero-names {
  font-family: var(--script); font-weight: 600; font-size: clamp(34px, 8.6vw, 56px);
  line-height: 1.02; color: var(--texto);
  display: flex; flex-direction: column; align-items: center;
}
.hero-names .amp {
  font-size: .58em; font-style: italic; font-weight: 400; color: var(--acento);
  margin: 2px 0 1px;
}
/* Los nombres merecen su propia entrada: un barrido lento, no un simple fade */
.hero-names.reveal {
  opacity: 1; transform: none;
  clip-path: inset(0 0 106% 0);
  transition: clip-path 1.5s cubic-bezier(.25,0,.15,1);
}
.hero-names.reveal.visible { clip-path: inset(-18% 0 -18% 0); }
.hero-date { margin-top: 20px; }
.hero-day {
  font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  letter-spacing: 5px; font-size: 11px; color: var(--texto); margin-bottom: 9px;
}
.hero-date-row {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  font-family: var(--serif); font-size: clamp(19px, 5.4vw, 24px); letter-spacing: 3px;
}
.hero-date-row .line { width: 34px; height: 1px; background: var(--acento); flex-shrink: 0; }
.hero-date-row strong { font-weight: 600; white-space: nowrap; color: var(--texto); }
.hero-count {
  margin-top: 16px; font-family: var(--sans); font-weight: 500;
  font-size: clamp(9px, 2.5vw, 11px); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--texto-3); white-space: nowrap;
}
.hero-count::before, .hero-count::after {
  content: ''; width: 22px; height: 1px; background: var(--acento); opacity: .85;
}
.scroll-cue { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 2; }
/* Con el hero partido en dos, el centro de la pantalla es la costura.
   La flecha se va al centro de la mitad de los textos. Va aqui y no con el
   resto del bloque ancho porque la regla de arriba es igual de especifica
   y, si fuera despues, la volveria a centrar. */
@media (min-width: 900px) and (orientation: landscape) {
  .scroll-cue { left: 76%; }
}
/* Va sobre el desvanecido a papel, asi que se dibuja en oliva, no en blanco */
.scroll-cue span {
  display: block; width: 22px; height: 36px; border: 1.5px solid rgba(95,107,78,.6); border-radius: 12px; position: relative;
}
.scroll-cue span::after {
  content: ''; position: absolute; top: 6px; left: 50%; margin-left: -1.5px;
  width: 3px; height: 7px; border-radius: 3px; background: var(--olive);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- La franja de la preboda ----------
   Una pausa apaisada entre la cuenta regresiva y la historia. Se desvanece
   hacia el papel por arriba y hacia el verde oscuro por abajo, de manera
   que no es un bloque metido entre dos secciones sino la costura entre
   ellas. En pantallas anchas se hace mas angosta para seguir siendo franja
   y no convertirse en un afiche. */
.franja {
  position: relative; overflow: hidden;
  aspect-ratio: 2 / 1; background: var(--ivory-soft);
}
@media (min-width: 760px)  { .franja { aspect-ratio: 2.6 / 1; } }
@media (min-width: 1200px) { .franja { aspect-ratio: 3.2 / 1; } }
.franja img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 46%; display: block;
  transform-origin: 50% 45%;
  animation: foto-respira 26s ease-in-out infinite alternate;
}
.franja::before, .franja::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 2;
  pointer-events: none;
}
.franja::before { top: -1px; height: 26%;
  background: linear-gradient(to bottom, #F6F3EC 0%, rgba(246,243,236,0) 100%); }
.franja::after { bottom: -1px; height: 36%;
  background: linear-gradient(to top, #3E4635 0%, rgba(62,70,53,0) 100%); }

/* ---------- Secciones base ---------- */
.section { padding: 62px 0; }
@media (min-width: 700px) { .section { padding: 84px 0; } }
.section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 7vw, 40px); line-height: 1.2;
  text-align: center; margin-bottom: 18px; color: var(--texto);
}
.section-title.light { color: var(--ivory-soft); }
.script-lead { font-family: var(--script); font-style: italic; font-weight: 500; font-size: clamp(24px, 6vw, 34px); color: var(--texto-3); text-align: center; margin-bottom: 16px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Variantes de entrada — cada tipo de elemento se mueve distinto */
.rv-l { transform: translateX(-40px); }
.rv-r { transform: translateX(40px); }
.rv-zoom { transform: scale(.93); }
.rv-title {
  opacity: 1; transform: none;
  clip-path: inset(0 0 108% 0);
  transition: clip-path 1.15s cubic-bezier(.32,0,.2,1);
}
.rv-title.visible { clip-path: inset(-14% 0 -14% 0); }
.rv-draw {
  opacity: 1; transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s cubic-bezier(.4,0,.25,1);
}
.rv-draw.visible { clip-path: inset(0 0 0 0); }
.reveal.d1 { transition-delay: .15s; }
.reveal.d2 { transition-delay: .3s; }
.reveal.d3 { transition-delay: .45s; }

/* ---------- Profundidad por parallax ---------- */
.story, .rsvp { position: relative; overflow: hidden; }
.sec-bg {
  position: absolute; left: -6%; right: -6%; top: -14%; bottom: -14%;
  background: url("/assets/art/lavado.jpg") center/cover;
  opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  will-change: transform;
}
.story > .wrap, .rsvp > .wrap { position: relative; z-index: 1; }

/* ---------- Piezas de acuarela ---------- */
.art-icon {
  width: 86px; height: auto; margin: 0 auto 10px; display: block;
}
.art-icon-light {
  width: 92px; height: 92px; object-fit: cover; border-radius: 50%;
  background: #fff; mix-blend-mode: normal; margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.divisor {
  width: min(280px, 70%); height: auto; margin: 26px auto 0; display: block;
  opacity: .92;
}

/* ---------- Bienvenida ---------- */
.welcome { background: var(--ivory-soft); text-align: center; }
.welcome-text { font-size: clamp(17px, 4.3vw, 20px); line-height: 1.7; max-width: 560px; margin: 0 auto; }
.welcome-text em { color: var(--texto-2); }
/* ahora son dos parrafos y el bloque no traia separacion */
.welcome-text + .welcome-text { margin-top: 20px; }

/* ---------- Countdown ---------- */
.countdown-section { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-soft) 100%); text-align: center; }
.countdown { display: flex; justify-content: center; gap: 12px; margin: 26px 0 18px; }
.count-box {
  background: var(--white); border: 1px solid var(--sage);
  border-radius: 14px; padding: 14px 6px; width: 76px;
  box-shadow: 0 8px 24px rgba(95,107,78,.12);
}
.count-box { perspective: 320px; }
.count-box span {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 7vw, 36px); color: var(--texto-2);
  transform-origin: center bottom; backface-visibility: hidden;
  transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .34s ease;
}
.count-box span.tick { transform: rotateX(-88deg) translateY(-3px); opacity: 0; }
.count-box small { font-family: var(--sans); font-weight: 300; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; color: var(--texto-3); }
/* El mismo dorado del & y del lema del hero */
.count-date { font-size: 18px; letter-spacing: 1px; margin-bottom: 22px; color: var(--acento); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px;
  padding: 13px 26px; border-radius: 40px; cursor: pointer; text-decoration: none;
  transition: all .3s ease; border: 1.5px solid var(--olive); line-height: 1;
}
.btn-outline { color: var(--texto-2); background: transparent; }
.btn-outline:hover { background: var(--olive); color: var(--white); }
.btn-solid { background: var(--olive); color: var(--white); box-shadow: 0 8px 22px rgba(95,107,78,.35); }
.btn-solid:hover { background: var(--olive-deep); }
.btn-big { width: 100%; justify-content: center; padding: 16px; font-size: 13px; }
.btn-map { border-color: var(--moss); color: var(--texto-2); background: var(--white); padding: 11px 18px; font-size: 11px; }
.btn-map:hover { background: var(--moss); color: var(--white); }

/* ---------- Historia ---------- */
.story { background: linear-gradient(165deg, var(--olive-deep) 0%, var(--olive) 70%, var(--moss) 100%); color: var(--texto-claro); }
/* La franja de arriba ya trae el verde puesto, asi que la seccion no
   necesita su respiro completo: con el relleno de serie quedaban 62px de
   verde vacio antes del titulo y 96 despues del ultimo punto. */
.story { padding-top: 30px; padding-bottom: 42px; }
@media (min-width: 700px) { .story { padding-top: 44px; padding-bottom: 56px; } }
.story .story-text:last-of-type { margin-bottom: 0; }
/* Y la frase que viene despues arranca antes */
.lema-section { padding-top: 30px; }
.lema-section .divisor { margin-top: 10px; }
.story-text { text-align: center; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.7; max-width: 560px; margin: 0 auto 34px; color: var(--texto-claro); }
.story-text strong { color: var(--acento-claro); }


/* ---------- Lugares ---------- */
.venues { background: var(--ivory-soft); }
.venue-cards { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 700px) { .venue-cards { grid-template-columns: 1fr 1fr; } }
.venue-card {
  background: var(--white); border-radius: 20px; padding: 36px 26px; overflow: hidden;
  text-align: center; border: 1px solid var(--ivory);
  box-shadow: 0 14px 40px rgba(95,107,78,.13);
  transition: transform .35s ease, box-shadow .35s ease;
}
@media (hover: hover) {
  .venue-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(95,107,78,.2); }
  }
.venue-card:active { transform: scale(.985); }
.btn:active { transform: scale(.96); }
.gallery figure:active { transform: scale(.97); }
.venue-icon { width: 96px; height: auto; margin: 0 auto 12px; display: block; mix-blend-mode: multiply; }
.venue-scene {
  width: calc(100% + 52px); max-width: none;
  margin: -36px -26px 16px; display: block;
  border-radius: 18px 18px 0 0;
}
.venue-card h3 { font-family: var(--script); font-style: italic; font-weight: 500; font-size: 25px; color: var(--texto-2); margin-bottom: 6px; }
.venue-time { font-family: var(--sans); font-weight: 500; letter-spacing: 3px; font-size: 18px; margin-bottom: 8px; }
.venue-place { font-size: 20px; font-weight: 600; }
.venue-place em { font-weight: 400; color: var(--texto-3); }
.venue-note { font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--texto-3); margin-top: 8px; }
.venue-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Cronograma ---------- */
.timeline-section { background: var(--ivory); }
.timeline { position: relative; max-width: 480px; margin: 34px auto 0; padding-left: 8px; }
/* La pista, apagada: es el camino que todavia no se recorre */
.timeline::before {
  content: ''; position: absolute; left: 37px; top: 8px; bottom: 8px;
  width: 2px; background: rgba(95,107,78,.17);
  border-radius: 2px;
}
/* La enredadera crece al mismo ritmo que la barra. El truco: la ventana
   recorta por abajo y la planta dentro mide siempre el tramo completo, asi
   que al crecer la ventana se va descubriendo de arriba hacia abajo. */
.tl-vid {
  position: absolute; left: 37px; width: 108px; margin-left: -54px;
  top: 8px; height: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.tl-vid img {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: auto; max-width: none; display: block;
}
/* La parte ya recorrida. El alto lo fija el scroll desde main.js */
.tl-llena {
  position: absolute; left: 37px; width: 2px; height: 0; top: 8px;
  background: linear-gradient(var(--sage), var(--olive));
  border-radius: 2px; z-index: 0;
}
/* Cada etapa espera apagada y se enciende cuando la linea la alcanza */
.tl-dot {
  transform: scale(.9);
  transition: transform .55s cubic-bezier(.22,1,.36,1),
              box-shadow .55s ease, border-color .55s ease;
}
.tl-dot img { filter: grayscale(1); opacity: .55; transition: filter .55s ease, opacity .55s ease; }
.tl-body { opacity: .5; transition: opacity .55s ease; }
.tl-item.tl-on .tl-dot {
  transform: scale(1); border-color: var(--olive);
  box-shadow: 0 6px 16px rgba(95,107,78,.26), 0 0 0 5px rgba(178,191,165,.28);
}
.tl-item.tl-on .tl-dot img { filter: none; opacity: 1; }
.tl-item.tl-on .tl-body { opacity: 1; }
.tl-item.tl-on .tl-time { color: var(--olive); }
.tl-time { transition: color .55s ease; }

/* Las serpentinas de la fiesta: salen disparadas una sola vez */
.tl-fiesta {
  position: absolute; left: 50%; width: 0; height: 0;
  z-index: 6; pointer-events: none;
}
.tl-fiesta i, .tl-fiesta b {
  position: absolute; left: 0; top: 0; display: block; opacity: 0;
  animation: tl-vuela var(--t) cubic-bezier(.18,.72,.4,1) var(--d) forwards;
}
.tl-fiesta i { width: 7px; height: 11px; border-radius: 1px; }
.tl-fiesta b { width: 4px; height: 26px; border-radius: 4px; }
@keyframes tl-vuela {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(.5); }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(var(--x) * .62), var(--pico))
                    rotate(calc(var(--r) * .45)) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
.tl-item { position: relative; display: flex; gap: 18px; padding: 0 0 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--sage);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 6px 16px rgba(95,107,78,.18);
}
.tl-dot img { width: 46px; height: auto; mix-blend-mode: multiply; }
.tl-body { padding-top: 2px; }
.tl-time { font-family: var(--sans); font-weight: 500; letter-spacing: 3px; font-size: 14px; color: var(--texto-3); }
.tl-body h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 2px 0 4px; }
.tl-body p { font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--texto-3); }
.tl-note { text-align: center; font-family: var(--script); font-style: italic; font-size: 18px; color: var(--texto-3); margin-top: 30px; }

.tip-icon { font-size: 30px; display: block; margin-bottom: 8px; }

/* ---------- Playlist ---------- */
.playlist-section { background: var(--ivory); }
.playlist-card {
  background: var(--white); border-radius: 24px; padding: 40px 26px;
  text-align: center; box-shadow: 0 18px 50px rgba(95,107,78,.15);
  border: 1px solid var(--sage); max-width: 560px; margin: 0 auto;
}
.playlist-text { font-size: 17px; line-height: 1.7; max-width: 440px; margin: 0 auto 22px; }
.song-row { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; }
@media (min-width: 560px) { .song-row { grid-template-columns: 1.2fr 1fr; } }
#song-form input {
  width: 100%; padding: 13px 16px; border: 1px solid var(--sage); border-radius: 12px;
  font-family: var(--sans); font-size: 14px; outline: none; background: var(--ivory-soft);
}
#song-form input:focus { border-color: var(--olive); }
#song-by { margin-bottom: 16px; }
#song-form .btn { width: 100%; justify-content: center; }


/* ---------- Confeti ---------- */
.confetti-piece {
  position: absolute; top: -12px; border-radius: 2px; pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ---------- Dress code ---------- */
.dresscode { background: var(--ivory); text-align: center; }
.dress-note { font-size: 17px; line-height: 1.7; max-width: 480px; margin: 0 auto; }

/* ---------- Paleta sugerida ---------- */
.palette { margin-top: 34px; }
/* El lead es ahora el disparador: la paleta se muestra solo si la piden */
.palette-toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--sans); font-weight: 400; font-size: 13.5px; letter-spacing: 1px;
  color: var(--texto-2); background: transparent;
  border: 1px solid rgba(46,46,42,.18); border-radius: 999px;
  padding: 13px 22px; margin-bottom: 4px;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.palette-toggle:hover, .palette-toggle:focus-visible {
  border-color: var(--acento); color: var(--acento); background: rgba(169,139,88,.06);
}
.palette-toggle .chev { transition: transform .35s cubic-bezier(.2,.7,.2,1); flex: none; }
.palette-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.palette-box { margin-top: 26px; }
/* Entrada suave al abrirse, sin saltos de altura */
.palette-box.abriendo { animation: paleta-abre .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes paleta-abre {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* Cinco columnas fijas y no flex con wrap: en telefono las etiquetas largas
   -TERRACOTA, CHAMPAGNE- hacian que la quinta se cayera sola a la fila de
   abajo, y asi los dos tonos calidos, que van juntos, quedaban separados por
   un salto de linea. El ancho lo manda la columna, no la palabra. */
.palette-swatches {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 1.8vw, 22px);
  justify-items: center; align-items: start;
}
.swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.swatch span {
  width: clamp(38px, 11vw, 58px); height: clamp(38px, 11vw, 58px); border-radius: 50%;
  border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(95,107,78,.3);
  transition: transform .3s ease;
}
.swatch small {
  font-family: var(--sans); font-weight: 400; text-transform: uppercase;
  color: var(--texto-2); white-space: nowrap;
  /* la etiqueta se encoge con la pantalla para que CHAMPAGNE quepa en su columna */
  font-size: clamp(8px, 2.1vw, 10.5px);
  letter-spacing: clamp(.2px, .22vw, 1.5px);
}
.palette-note { font-family: var(--script); font-style: italic; font-size: 18px; color: var(--texto-3); margin-top: 20px; }

/* ---------- Galería ---------- */
.gallery-section { background: var(--ivory-soft); padding-bottom: 46px; }
.gallery-sub { text-align: center; font-size: 17px; color: var(--texto-3); margin-bottom: 30px; }
/* Carrusel horizontal — se desliza con el pulgar */
.gallery {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 6px 0 14px; scroll-padding-left: 24px;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery::before, .gallery::after { content: ''; flex: 0 0 12px; }
/* Copias impresas apoyadas sobre el papel: borde blanco, margen inferior
   mas alto como una foto de revelado, y una inclinacion minima. */
.gallery .copia {
  flex: 0 0 auto; width: min(70vw, 268px);
  cursor: pointer; position: relative; scroll-snap-align: center;
  background: #FFFFFF; padding: 10px 10px 30px; border-radius: 2px;
  box-shadow: 0 14px 30px rgba(95,107,78,.26), 0 2px 5px rgba(95,107,78,.16);
  opacity: 0; transform: rotate(var(--giro, 0deg)) translateY(18px) scale(.96);
  transition: opacity .7s ease, transform .7s cubic-bezier(.3,.9,.3,1);
  margin: 12px 0 18px;
}
.gallery .copia.visible { opacity: 1; transform: rotate(var(--giro, 0deg)); }
.gallery .copia:hover, .gallery .copia:focus-visible {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 0 22px 44px rgba(95,107,78,.3);
}
.gallery .copia img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  border-radius: 0;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-hint {
  text-align: center; margin-top: 14px;
  font-family: var(--sans); font-weight: 400; text-transform: uppercase;
  letter-spacing: 3px; font-size: 9.5px; color: var(--texto-3);
}
.gallery-hint span { display: inline-block; animation: swipe-nudge 2.2s ease-in-out infinite; }
@keyframes swipe-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* ---------- Regalos ---------- */
.gifts { background: linear-gradient(180deg, var(--ivory-soft), var(--ivory)); }
.gift-card {
  background: var(--white); border-radius: 24px; padding: 44px 28px;
  text-align: center; box-shadow: 0 18px 50px rgba(95,107,78,.15);
  border: 1px solid var(--sage);
}
.gift-text { font-size: 17px; line-height: 1.7; max-width: 480px; margin: 0 auto 24px; }
.gift-text em { color: var(--texto-2); }
.gift-data { margin-top: 26px; text-align: left; animation: env-in .6s ease both; }
.gift-data dl { display: grid; gap: 10px; background: var(--ivory-soft); border-radius: 14px; padding: 20px; margin-bottom: 18px; }
.gift-data dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--sage); padding-bottom: 8px; }
.gift-data dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.gift-data dt { font-family: var(--sans); font-weight: 300; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-3); }
.gift-data dd { font-family: var(--sans); font-weight: 500; font-size: 14px; text-align: right; }
.gift-data .btn { width: 100%; justify-content: center; }

/* ---------- RSVP ---------- */
.rsvp { background: linear-gradient(160deg, var(--olive) 0%, var(--olive-deep) 100%); }
.rsvp-deadline { text-align: center; color: var(--acento-claro); font-family: var(--sans); font-weight: 300; letter-spacing: 1px; font-size: 15px; margin-bottom: 30px; }
/* La fecha baja a su propia linea: arriba la frase, abajo el dato, que es
   lo que hay que recordar */
.rsvp-deadline strong { display: block; margin-top: 6px; color: var(--texto-claro);
                        font-weight: 500; font-size: 18px; letter-spacing: .5px; }
.rsvp-box {
  background: var(--white); border-radius: 24px; padding: 34px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); max-width: 560px; margin: 0 auto;
}
.rsvp-generic { text-align: center; font-size: 19px; line-height: 1.6; }
.rsvp-generic .muted { font-family: var(--sans); font-weight: 300; font-size: 15px; color: var(--texto-3); margin-top: 10px; }
.rsvp-hello { text-align: center; font-size: 20px; line-height: 1.5; margin-bottom: 24px; }
.rsvp-hello strong { color: var(--texto-2); }
.rsvp-attend { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--sage);
  font-family: var(--sans); font-size: 14px; cursor: pointer; transition: all .25s; min-height: 54px;
}
.radio-card input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--white); box-shadow: 0 8px 20px rgba(95,107,78,.35); }
.person-card {
  border: 1px solid var(--ivory); background: var(--ivory-soft);
  border-radius: 16px; padding: 16px; margin-bottom: 14px;
}
.person-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.person-name { font-weight: 600; font-size: 18px; }
.person-name input {
  font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--texto);
  border: 0; border-bottom: 1px dashed var(--sage); background: transparent; width: 100%; padding: 4px 0; outline: none;
}
.switch { position: relative; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; }
.switch span {
  display: block; width: 52px; height: 30px; border-radius: 30px;
  background: #cfd4c6; transition: background .25s; cursor: pointer;
}
.switch span::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--white); transition: left .25s; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.switch input:checked + span { background: var(--moss); }
.switch input:checked + span::after { left: 25px; }
.diet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-block; padding: 8px 14px; border-radius: 30px;
  border: 1px solid var(--sage); font-family: var(--sans); font-size: 12.5px;
  cursor: pointer; transition: all .25s; background: var(--white);
}
.chip input:checked + span { background: var(--moss); border-color: var(--moss); color: var(--white); }
.allergy-input { margin-top: 10px; }
.allergy-input input {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--sage);
  font-family: var(--sans); font-size: 14px; outline: none; background: var(--white);
}
.field { display: block; margin: 18px 0; }
.field span { font-family: var(--sans); font-weight: 300; font-size: 13px; letter-spacing: 1px; color: var(--texto-3); display: block; margin-bottom: 6px; }
.field textarea {
  width: 100%; border: 1px solid var(--sage); border-radius: 12px; padding: 12px 14px;
  font-family: var(--sans); font-size: 14px; resize: vertical; outline: none; background: var(--ivory-soft);
}
.field textarea:focus, .allergy-input input:focus { border-color: var(--olive); }
.rsvp-status { text-align: center; font-family: var(--sans); font-size: 14px; margin-top: 12px; color: var(--texto-3); min-height: 20px; }
.rsvp-status.error { color: #a4553f; }
.rsvp-done { text-align: center; padding: 10px 0; }
.done-ring {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  border: 2px solid var(--moss); color: var(--texto-3); font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  animation: pop .5s cubic-bezier(.68,-0.55,.27,1.55) both;
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.rsvp-done h3 { font-size: 26px; margin-bottom: 8px; }
.rsvp-done p { font-family: var(--sans); font-weight: 300; font-size: 15px; color: var(--texto-3); margin-bottom: 20px; }

/* ---------- Footer ---------- */
/* ---------- El pie ----------
   Cierra la invitacion y a la vez es la unica llamada a la accion que queda
   despues de la fiesta: el hashtag. Por eso manda el, no el monograma. */
.footer {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(170deg, var(--olive) 0%, var(--olive-deep) 72%);
  color: var(--texto-claro);
  padding: 58px 20px calc(50px + env(safe-area-inset-bottom));
}
.footer > .wrap { position: relative; z-index: 1; }

/* El medallon de hojas con la fecha dentro */
.pie-sello { position: relative; width: 148px; height: 148px; margin: 0 auto 26px; }
.pie-aro {
  position: absolute; inset: 0;
  background: url("/assets/art/aro-marca-claro.webp") center/contain no-repeat;
  animation: pie-respira 7s ease-in-out infinite;
}
@keyframes pie-respira { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* Dos lineas y no tres: el dia y el mes juntos, el ano debajo */
.pie-fecha {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  font-family: var(--sans); color: var(--texto-claro);
}
.pie-dia { font-weight: 300; font-size: 19px; letter-spacing: 3px; }
.pie-dia i { font-style: normal; color: var(--acento-claro); padding: 0 5px; }
.pie-anio { font-weight: 400; font-size: 12px; letter-spacing: 5px; opacity: .72; }

.pie-lead {
  font-family: var(--sans); font-weight: 300; letter-spacing: 3px;
  text-transform: uppercase; font-size: 12px; color: var(--texto-claro);
  opacity: .85; margin-bottom: 8px;
}
/* Es un boton de verdad: tocarlo copia el hashtag al portapapeles */
.pie-hashtag {
  display: block; margin: 0 auto; padding: 4px 10px 8px;
  background: none; border: 0; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pie-tag {
  display: block;
  font-family: var(--serif); font-weight: 600; font-size: clamp(27px, 7.4vw, 46px);
  color: var(--white); letter-spacing: .5px;
  text-shadow: 0 4px 20px rgba(0,0,0,.28);
  transition: transform .25s ease, opacity .25s ease;
}
.pie-hashtag:active .pie-tag { transform: scale(.97); }
.pie-copiar {
  display: block; margin-top: 7px;
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--acento-claro); opacity: .75;
  transition: opacity .25s ease, color .25s ease;
}
.pie-hashtag.copiado .pie-copiar { opacity: 1; color: #CFE0BC; }
.pie-nota {
  font-family: var(--sans); font-weight: 300; font-size: 14px;
  color: var(--texto-claro); opacity: .82; margin-top: 14px;
  max-width: 30ch; margin-left: auto; margin-right: auto; line-height: 1.55;
}
.pie-hilo {
  display: block; width: 58px; height: 1px; margin: 30px auto 16px;
  background: linear-gradient(to right, transparent, var(--acento-claro), transparent);
  opacity: .6;
}
.pie-cierre {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--acento-claro);
}

/* ---------- La trivia ----------
   Vive en su propio panel y no dentro del pie: cinco preguntas metidas en
   el cierre lo volverian un formulario. Aqui el juego tiene aire. */
/* ---------- Contacto ----------
   La jerarquia del pie es deliberada: el hashtag manda (46px), despues el
   boton del juego (relleno) y al final los contactos (pildoras chicas de
   contorno). Si los tres pesaran igual, ninguno se leeria primero. */
.pie-duda {
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--texto-claro); opacity: .7; margin-top: 30px; margin-bottom: 11px;
}
.pie-contactos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pie-wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(237,231,220,.38); color: var(--texto-claro);
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .3px;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.pie-wa:hover, .pie-wa:focus-visible {
  border-color: var(--acento-claro); color: var(--acento-claro);
  background: rgba(237,231,220,.07);
}
.pie-wa svg { flex: none; opacity: .75; }
/* En el RSVP el enlace va dentro del parrafo: ahi no cabe una pildora */
.wa-inline {
  color: var(--olive); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(95,107,78,.4);
  transition: color .25s ease, border-color .25s ease;
}
.wa-inline:hover { color: var(--olive-deep); border-color: var(--olive-deep); }

/* Las preguntas frecuentes del pie. Discretas a proposito: letra chica,
   sin fondo, cerradas. El que no las busca no las ve; el que tiene la duda
   las encuentra justo debajo de "\u00bfalguna duda?". */
.pie-faq { margin: 18px auto 0; max-width: 420px; text-align: left; }
.pie-faq summary {
  list-style: none; cursor: pointer; text-align: center;
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--texto-claro); opacity: .52;
  padding: 6px 0; transition: opacity .25s;
}
.pie-faq summary::-webkit-details-marker { display: none; }
.pie-faq summary::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin: -3px 0 0 8px;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg); transition: transform .25s;
}
.pie-faq[open] summary::after { transform: rotate(-135deg); margin-top: 1px; }
.pie-faq summary:hover, .pie-faq[open] summary { opacity: .8; }
.faq-cuerpo {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid rgba(237,231,220,.18);
}
.faq-p {
  font-family: var(--sans); font-weight: 300; font-size: 13.5px; line-height: 1.65;
  color: var(--texto-claro); opacity: .78; margin-bottom: 14px;
}
.faq-p:last-child { margin-bottom: 0; }
.faq-p b { font-weight: 500; opacity: 1; }

/* Con borde fino sobre verde oscuro el boton se perdia. Ahora va relleno:
   es la ultima accion de la invitacion y tiene que verse. */
.pie-trivia {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 15px 26px; cursor: pointer;
  background: var(--ivory); color: var(--olive-deep);
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 14.5px;
  letter-spacing: .5px;
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
  transition: transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s ease, background .3s ease;
  -webkit-tap-highlight-color: transparent;
  animation: trivia-late 3.6s ease-in-out 1.2s infinite;
}
.pie-trivia:hover, .pie-trivia:focus-visible {
  background: #FFFFFF; transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.32);
}
.pie-trivia:active { transform: translateY(0) scale(.98); }
.pie-trivia svg { flex: none; opacity: .9; }
/* un latido muy leve, lo justo para que el ojo lo encuentre */
@keyframes trivia-late {
  0%, 86%, 100% { transform: scale(1); }
  92%           { transform: scale(1.035); }
}

.trivia {
  position: fixed; inset: 0; z-index: 92;
  background: var(--ivory-soft);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: tienda-entra .38s cubic-bezier(.2,.7,.2,1) both;
}
.trivia-cuerpo {
  padding: 26px 20px calc(44px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
}
/* Los puntos de arriba: cuantas van y como fueron */
.trivia-pasos { display: flex; gap: 7px; justify-content: center; margin-bottom: 28px; }
.trivia-pasos i {
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: rgba(46,46,42,.14); transition: background .4s ease;
}
.trivia-pasos i.bien  { background: var(--olive); }
.trivia-pasos i.mal   { background: #C49A86; }
.trivia-pasos i.ahora { background: var(--acento); }

.trivia-num {
  text-align: center; font-family: var(--sans); font-weight: 500;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 10px;
}
.trivia-pregunta {
  text-align: center; font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 5.6vw, 28px); line-height: 1.28;
  color: var(--texto); margin: 0 auto 26px; max-width: 20ch;
}
.trivia-opciones { display: grid; gap: 11px; }
.trivia-opciones button {
  width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 13px;
  background: var(--white); border: 1px solid rgba(46,46,42,.13);
  font-family: var(--sans); font-weight: 300; font-size: 15.5px;
  line-height: 1.45; color: var(--texto);
  transition: border-color .25s ease, background .25s ease,
              transform .25s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.trivia-opciones button:hover:not(:disabled) { border-color: var(--acento); }
.trivia-opciones button:active:not(:disabled) { transform: scale(.985); }
.trivia-opciones button:disabled { cursor: default; }
/* La correcta se marca siempre, aunque el invitado haya fallado: si no,
   se queda con la duda y la gracia era contarle algo de ellos. */
.trivia-opciones button.correcta {
  border-color: var(--olive); background: #EDF1E6;
  color: var(--texto); font-weight: 400;
}
.trivia-opciones button.errada {
  border-color: #D8B6A6; background: #F7EEE9; opacity: .9;
}
.trivia-opciones button.apagada { opacity: .42; }
.trivia-opciones button b { font-weight: 500; }

.trivia-dato {
  text-align: center; font-family: var(--sans); font-weight: 300;
  font-size: 14.5px; line-height: 1.6; color: var(--texto-2);
  margin: 20px auto 0; max-width: 32ch; min-height: 1px;
}
.trivia-seguir { display: block; margin: 24px auto 0; }

/* El marcador final */
.trivia-marcador {
  text-align: center; font-family: var(--serif); color: var(--texto);
  margin: 10px 0 4px;
}
.trivia-marcador strong { font-weight: 600; font-size: 64px; line-height: 1; }
.trivia-marcador span {
  display: block; font-family: var(--sans); font-weight: 300;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--texto-3); margin-top: 6px;
}
.trivia-veredicto {
  text-align: center; font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: clamp(21px, 5.4vw, 26px); line-height: 1.3;
  color: var(--texto); margin: 22px auto 12px; max-width: 20ch;
}
.trivia-remate {
  text-align: center; font-family: var(--sans); font-weight: 300;
  font-size: 15px; line-height: 1.6; color: var(--texto-2);
  margin: 0 auto; max-width: 30ch;
}
.trivia-botones {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 30px;
}

/* ---------- El album de todos ----------
   Fondo oscuro a proposito: tiene que destacarse del papel, como el RSVP.
   Arranca en el mismo oscuro en que el RSVP termina y recien despues se
   abre: viniendo justo debajo de el, empezar en un verde mas claro dejaba
   una linea horizontal que se leia como un error de dibujo. */
.album-section {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 70% at 50% 22%, rgba(178,191,165,.15) 0%, rgba(178,191,165,0) 62%),
    linear-gradient(168deg, var(--olive-deep) 0%, var(--olive) 26%,
                            var(--olive-deep) 82%, #333A2B 100%);
  color: var(--texto-claro);
  padding-top: 70px; padding-bottom: 68px;
}
/* el grano de papel tambien aqui, para que no quede un plano liso */
.album-section::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/img/grain.svg"); background-size: 200px 200px;
  opacity: .22; mix-blend-mode: overlay;
}
.album-section .section-title { font-size: clamp(30px, 8.4vw, 42px); }
.album-section > .wrap { position: relative; z-index: 1; }
/* destellos de flash, muy tenues */
.album-destellos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.album-destellos i {
  position: absolute; left: var(--x); top: var(--y);
  width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 14px 4px rgba(255,255,255,.7);
  animation: flashazo 7s ease-out var(--d) infinite;
}
@keyframes flashazo {
  0%, 84%, 100% { opacity: 0; transform: scale(.5); }
  87%           { opacity: .95; transform: scale(1.1); }
  93%           { opacity: 0; transform: scale(1.7); }
}
/* La pila de copias reveladas. Entran apiladas y se abren en abanico:
   es el gesto que hace que la seccion se note sin gritar. */
.pila { position: relative; width: 240px; height: 196px; margin: 4px auto 26px; }
.pila figure {
  position: absolute; left: 50%; top: 0; margin: 0;
  width: 128px; background: #fff; padding: 7px 7px 22px;
  border-radius: 2px; box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.2);
  transform: translateX(-50%) rotate(0deg);
  transition: transform 1.05s cubic-bezier(.22,1,.32,1);
}
.pila img { width: 100%; height: 118px; object-fit: cover; display: block; border-radius: 1px; }
/* apiladas mientras no se ven */
.pila .copia-1 { z-index: 1; }
.pila .copia-2 { z-index: 2; }
.pila .copia-3 { z-index: 3; }
/* y en abanico al entrar */
.pila.visible .copia-1 { transform: translateX(calc(-50% - 66px)) rotate(-11deg) translateY(12px); transition-delay: .1s; }
.pila.visible .copia-2 { transform: translateX(calc(-50% + 64px)) rotate(10deg)  translateY(16px); transition-delay: .2s; }
.pila.visible .copia-3 { transform: translateX(-50%) rotate(-1.5deg) translateY(-4px) scale(1.06); transition-delay: .3s; }
/* y despues respiran, cada una a su ritmo */
.pila.visible .copia-1 { animation: flota-a 7s ease-in-out 1.6s infinite; }
.pila.visible .copia-2 { animation: flota-b 8s ease-in-out 2.1s infinite; }
.pila.visible .copia-3 { animation: flota-c 6.4s ease-in-out 1.9s infinite; }
@keyframes flota-a {
  0%,100% { transform: translateX(calc(-50% - 66px)) rotate(-11deg) translateY(12px); }
  50%     { transform: translateX(calc(-50% - 68px)) rotate(-12.5deg) translateY(5px); }
}
@keyframes flota-b {
  0%,100% { transform: translateX(calc(-50% + 64px)) rotate(10deg) translateY(16px); }
  50%     { transform: translateX(calc(-50% + 67px)) rotate(11.5deg) translateY(8px); }
}
@keyframes flota-c {
  0%,100% { transform: translateX(-50%) rotate(-1.5deg) translateY(-4px) scale(1.06); }
  50%     { transform: translateX(-50%) rotate(.8deg) translateY(-12px) scale(1.06); }
}
/* el fogonazo que las revela */
.pila-flash {
  position: absolute; left: 50%; top: 46%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%,-50%); background: #fff; opacity: 0; pointer-events: none; z-index: 5;
}
.pila.visible .pila-flash { animation: fogonazo 1.1s ease-out .15s 1; }
@keyframes fogonazo {
  0%   { opacity: 0;  box-shadow: 0 0 0 0 rgba(255,255,255,.9); }
  18%  { opacity: .95; box-shadow: 0 0 40px 22px rgba(255,255,255,.75); }
  100% { opacity: 0;  box-shadow: 0 0 120px 70px rgba(255,255,255,0); }
}
/* la antesala del titulo */
.album-ante {
  font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 3.4px;
  text-transform: uppercase; color: var(--acento-claro); opacity: .9; margin-bottom: 9px;
}
.album-sub {
  font-family: var(--sans); font-weight: 300; font-size: 15.5px; line-height: 1.68;
  color: var(--texto-claro); opacity: .9; max-width: 36ch; margin: 12px auto 26px;
}
.album-sub strong { font-weight: 500; color: #fff; }
/* el remate, que es la peticion de verdad */
.album-sub em {
  display: inline-block; margin-top: 10px; font-family: var(--serif);
  font-style: italic; font-size: 17.5px; color: var(--acento-claro); opacity: 1;
}
/* Sobre verde oscuro el boton verde no contrasta: va relleno en marfil,
   igual que el de la trivia en el pie. */
.album-abrir {
  margin: 0 auto; background: var(--ivory); color: var(--olive-deep);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.album-abrir:hover { background: #FFFFFF; color: var(--olive-deep); }
.album-abrir svg { opacity: .85; }
.album-cuenta {
  font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--acento-claro); opacity: .85; margin-top: 18px;
}
/* el mosaico de lo que ya subieron */
.album-mosaico {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 18px auto 0; max-width: 460px;
}
@media (max-width: 420px) { .album-mosaico { grid-template-columns: repeat(3, 1fr); } }
.album-mosaico figure {
  margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 3px;
  background: rgba(255,255,255,.06);
}
.album-mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-ver { margin: 18px auto 0; color: var(--texto-claro); border-color: rgba(237,231,220,.4); }
.album-ver:hover { background: var(--ivory); color: var(--olive-deep); }
.album-nota {
  font-family: var(--sans); font-weight: 300; font-size: 13px; line-height: 1.6;
  color: var(--texto-claro); opacity: .7; max-width: 32ch; margin: 24px auto 0;
}

/* ---------- Panel para subir ---------- */
.subir {
  position: fixed; inset: 0; z-index: 93; background: var(--ivory-soft);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: tienda-entra .38s cubic-bezier(.2,.7,.2,1) both;
}
.subir-cuerpo { padding: 26px 20px calc(44px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
.subir-lead {
  text-align: center; font-size: 15px; line-height: 1.65; color: var(--texto-2);
  max-width: 34ch; margin: 0 auto 24px;
}
.subir-zona {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 34px 20px; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(95,107,78,.4); border-radius: 14px;
  background: var(--white); color: var(--texto-2);
  transition: border-color .3s ease, background .3s ease;
}
.subir-zona:hover { border-color: var(--olive); background: #FBFBF8; }
.subir-zona strong { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--texto); }
.subir-zona small { font-family: var(--sans); font-weight: 300; font-size: 13px; color: var(--texto-3); }
.subir-zona svg { color: var(--olive); opacity: .8; }
.subir-nombre { margin-top: 18px; }
.subir-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.subir-item { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--ivory); }
.subir-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subir-barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.18);
}
.subir-barra b { display: block; width: 0; height: 100%; background: var(--acento); transition: width .4s ease; }
.subir-barra b.ok  { background: var(--olive); }
.subir-barra b.mal { background: #C08A74; width: 100% !important; }
#subir-enviar { display: block; margin: 24px auto 0; }
.subir-estado { text-align: center; font-size: 14px; color: var(--texto-3); margin-top: 12px; min-height: 1em; }
.subir-estado.error { color: #A4573E; }
#subir-listo { text-align: center; padding-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .album-destellos i, .pila.visible figure, .pila.visible .pila-flash { animation: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,24,16,.94);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.12); color: var(--white);
  border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.lb-close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); font-size: 30px; }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); font-size: 30px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .tl-dot { transform: none; transition: none; }
  .tl-dot img { filter: none; opacity: 1; }
  .tl-body { opacity: 1; }
  .tl-fiesta { display: none; }
  .hf-capas { animation: none; transform: none; }
  .franja img { animation: none; transform: none; }
  /* Sin movimiento el paisaje animado sobra: queda la foto original entera */
  .hf-paisaje { display: none; }
  /* Sin animacion la enredadera se muestra entera, no a medio crecer */
  .rv-title, .rv-draw, .hero-names.reveal { clip-path: none; }
  .gallery figure { opacity: 1; transform: none; }
  .sec-bg { transform: none !important; }
  .footer-wreath, .gallery-hint span { animation: none; }
  .env-eyebrow, .env-names, .env-daterow, .env-wreath, .env-sol,
  .env-hojas i,
  .intro-art, .intro-crown, .intro-text, .intro-divisor, .intro-date, .intro-cue {
    animation: none; opacity: 1; transform: none;
  }
  /* Ojo: el transform:none de arriba también se lleva el centrado de la
     corona, que no es animación sino posición. Hay que reponerlo. */
  .env-wreath { transform: translate(-50%, -52%); opacity: .95; }
  .env-lluvia { display: none; }
  .env-seal { animation: none; }
  /* El sobre se queda posado y sin brillo */
  .env-pkg, .env-pkg::after { animation: none; }
  .env-hint { animation: none; opacity: 1; }
  .env-wash { animation: none; }
}

.hero-lema {
  position: relative;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(15.5px, 4.4vw, 21px); line-height: 1.35;
  /* el mismo dorado del & de los nombres y del hilo de aqui arriba */
  color: var(--acento); letter-spacing: .005em;
  margin: 20px auto 0; padding-top: 18px; max-width: 19ch;
  /* halo de papel: la despega del fondo sin ponerle una caja encima */
  text-shadow: 0 0 14px rgba(246,243,236,.98), 0 1px 3px rgba(246,243,236,1);
}
.hero-lema::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 1px; background: var(--acento);
}

/* En pantallas anchas se miran de frente, con el & al medio */

/* ---------- La frase que cierra la historia ---------- */
.lema-section { padding-top: 44px; padding-bottom: 44px; text-align: center; }
.lema-grande {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 7.2vw, 40px); line-height: 1.2;
  color: var(--texto); margin: 22px 0 0;
}
.lema-chico {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(12.5px, 3.2vw, 14px); letter-spacing: .1em;
  color: var(--texto-3); margin: 14px auto 0; max-width: 30ch;
}

/* =========================================================
   DESEOS Y REGALOS — la lista abre como una hoja completa
   ========================================================= */
.tienda {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ivory-soft);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: tienda-entra .38s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tienda-entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.tienda-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  background: rgba(246,243,236,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(46,46,42,.10);
}
.tienda-cerrar {
  width: 38px; height: 38px; flex: none; cursor: pointer;
  border: 1px solid rgba(46,46,42,.16); border-radius: 50%;
  background: transparent; color: var(--texto); font-size: 15px; line-height: 1;
  transition: border-color .3s ease, color .3s ease;
}
.tienda-cerrar:hover, .tienda-cerrar:focus-visible { border-color: var(--acento); color: var(--acento); }
.tienda-titulo {
  font-family: var(--serif); font-size: 19px; color: var(--texto); margin: 0;
}

.tienda-cuerpo { padding: 26px 18px calc(40px + env(safe-area-inset-bottom)); max-width: 940px; margin: 0 auto; }
.tienda-lead {
  font-size: 15px; line-height: 1.65; color: var(--texto-2);
  text-align: center; max-width: 34ch; margin: 0 auto 26px;
}
.tienda-nota {
  font-size: 12.5px; line-height: 1.6; color: var(--texto-3);
  text-align: center; max-width: 36ch; margin: 28px auto 0;
  padding-top: 18px; border-top: 1px solid rgba(46,46,42,.10);
}

/* El atajo a transferir directo. Va discreto: no compite con la lista,
   pero esta antes de ella para el que ya sabe lo que quiere hacer. */
.tienda-directo {
  display: block; width: 100%; margin: 0 0 18px;
  background: none; border: 0; border-bottom: 1px solid var(--linea, rgba(46,46,42,.14));
  padding: 0 0 14px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--texto-3);
  text-align: center; letter-spacing: .2px;
}
.tienda-directo span {
  color: var(--acento); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.tienda-directo:hover span { color: var(--texto-2); }

.tienda-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 620px) { .tienda-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 900px) { .tienda-grid { grid-template-columns: repeat(4, 1fr); } }

.deseo-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid rgba(46,46,42,.09); border-radius: 4px;
  padding: 0 0 14px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(95,107,78,.08);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.deseo-card:hover, .deseo-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(95,107,78,.16); }
.deseo-card figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--ivory); }
.deseo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deseo-card h4 {
  font-family: var(--serif); font-weight: 500; font-size: 15.5px; line-height: 1.25;
  color: var(--texto); margin: 13px 13px 5px;
  /* dos lineas fijas: asi los precios quedan alineados entre tarjetas */
  min-height: 2.5em;
}
.deseo-card .precio {
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  color: var(--acento); margin: 0 13px;
}
.deseo-card .precio.libre { color: var(--texto-3); font-style: italic; font-weight: 400; }
/* Los cupos restantes, dichos sin dramatismo: son reales, no un truco */
.deseo-cupo {
  display: block; margin: 5px 13px 0;
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-3);
}
.deseo-cupo.pocos { color: var(--olive); }
.deseo-cupo.completo { color: #B08A76; }
/* La etiqueta de los deseos grandes: la forma honesta de subir el techo */
.deseo-varios {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: rgba(95,107,78,.92); color: #fff;
  font-family: var(--sans); font-weight: 400; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px;
}
.deseo-card.agotado { cursor: default; opacity: .6; }
.deseo-card.agotado:hover { transform: none; box-shadow: 0 4px 14px rgba(95,107,78,.08); }
.deseo-card.agotado figure { filter: grayscale(.5); }


/* ---------- El recorrido del viaje ----------
   Seis etapas, de a pie hasta el avion. La unidad es el vehiculo y no el
   dinero: asi se ve cuanto falta sin que la invitacion parezca una colecta. */
.ruta { margin: 0 auto 30px; max-width: 520px; text-align: center; }
.ruta-titulo {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--texto-3);
  margin-bottom: 18px;
}
.ruta-pista { position: relative; padding: 0 4px; }
.ruta-linea, .ruta-avance {
  position: absolute; left: 4px; bottom: 13px; height: 2px; border-radius: 2px;
}
.ruta-linea { right: 4px; background: rgba(46,46,42,.13); }
.ruta-avance {
  width: 0; background: linear-gradient(to right, var(--sage), var(--olive));
  transition: width 1.4s cubic-bezier(.3,.8,.3,1);
}
.ruta-paradas { position: relative; display: flex; justify-content: space-between; }
.ruta-paradas i {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 15%; font-style: normal;
}
.ruta-paradas img {
  width: 100%; max-width: 46px; height: auto; display: block;
  filter: grayscale(1); opacity: .32;
  transition: filter .6s ease, opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1.3);
}
.ruta-paradas i.hecha img { filter: none; opacity: .72; }
.ruta-paradas i.actual img { filter: none; opacity: 1; transform: scale(1.22); }
/* el punto sobre la linea */
.ruta-paradas b {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ivory-soft); border: 2px solid rgba(46,46,42,.16);
  transition: background .6s ease, border-color .6s ease, transform .6s ease;
}
.ruta-paradas i.hecha b { background: var(--olive); border-color: var(--olive); }
.ruta-paradas i.actual b { background: var(--acento); border-color: var(--acento); transform: scale(1.3); }
.ruta-estado {
  margin-top: 16px; font-family: var(--sans); font-weight: 300;
  font-size: 15px; color: var(--texto-2);
}
.ruta-estado strong {
  display: block; font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: 21px; color: var(--texto); margin-bottom: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ruta-avance, .ruta-paradas img, .ruta-paradas b { transition: none; }
}

/* ---------- Detalle del deseo ---------- */
.deseo, .deseo-listo {
  padding: 24px 18px calc(44px + env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto; text-align: center;
}
.deseo-volver {
  display: inline-block; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em;
  color: var(--texto-3); padding: 6px 0; margin-bottom: 14px;
}
.deseo-volver:hover, .deseo-volver:focus-visible { color: var(--acento); }
.deseo-foto { margin: 0 0 18px; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: var(--ivory); }
.deseo-foto img { width: 100%; height: 100%; object-fit: cover; }
.deseo h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--texto); margin: 0 0 8px; }
.deseo-desc { font-size: 14.5px; line-height: 1.6; color: var(--texto-2); margin: 0 auto 14px; max-width: 32ch; }
.deseo-precio { font-family: var(--serif); font-size: 26px; color: var(--acento); margin: 0 0 22px; }
.deseo form { text-align: left; margin-top: 4px; }

/* ---------- Confirmación ---------- */
.listo-icono {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--acento); color: var(--white);
  font-size: 24px; line-height: 52px; text-align: center;
}
.deseo-listo h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; color: var(--texto); margin: 0 0 10px; }
.listo-texto { font-size: 15px; line-height: 1.6; color: var(--texto-2); margin: 0 auto 22px; max-width: 32ch; }
.listo-texto strong { color: var(--acento); font-weight: 500; }
.gift-data-lista { text-align: left; margin: 0 0 20px; }
.gift-data-lista div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(46,46,42,.10);
}
.gift-data-lista dt {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-3); flex: none;
}
.gift-data-lista dd { margin: 0; font-size: 14px; text-align: right; color: var(--texto); }
.listo-fino { font-size: 12.5px; color: var(--texto-3); margin: 18px 0 20px; }

/* =========================================================
   EL VIDEO DE CIERRE — el compilado a sangre, reproduciéndose
   solo, sin controles: es el telón de la invitación.
   ========================================================= */
.cierre-video {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(54px, 12vh, 110px);
  background: var(--ivory-soft);
}
.cierre-fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  pointer-events: none;
}
/* Safari dibuja su propio botón de play sobre el póster si no puede
   autorreproducir. Acá el video es fondo, nunca un reproductor. */
.cierre-fondo::-webkit-media-controls,
.cierre-fondo::-webkit-media-controls-start-playback-button,
.cierre-fondo::-webkit-media-controls-panel,
.cierre-fondo::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}
/* Papel denso arriba, donde va el texto; despejado abajo para que el
   video se vea entero. Así la tipografía nunca pelea con la imagen. */
.cierre-velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(246,243,236,.96) 0%,
      rgba(246,243,236,.90) 22%,
      rgba(246,243,236,.45) 44%,
      rgba(246,243,236,.12) 66%,
      rgba(246,243,236,.55) 100%);
}
.cierre-video > .wrap { position: relative; z-index: 2; text-align: center; }
.cierre-sub {
  font-size: 16px; line-height: 1.7; color: var(--texto-2);
  max-width: 32ch; margin: 0 auto;
}

/* =========================================================
   PLAYLIST COLABORATIVA — cierra la invitación con una
   invitación más: la de poner música.
   ========================================================= */
.playlist { background: var(--ivory); text-align: center; }
.playlist-sub {
  font-size: 16px; line-height: 1.7; color: var(--texto-3);
  max-width: 34ch; margin: 0 auto 28px;
}
/* El reproductor de Spotify trae su propio estilo oscuro. Se monta sobre
   una tarjeta clara con sombra para que no quede pegado al papel. */
.playlist-marco {
  max-width: 460px; margin: 0 auto 26px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 38px rgba(95,107,78,.24), 0 2px 6px rgba(95,107,78,.14);
  background: #2A2A26;
  line-height: 0;
}
.playlist-marco iframe { display: block; border: 0; width: 100%; }
.playlist-nota strong { color: var(--texto-2); font-weight: 500; }
.playlist-nota {
  font-size: 12.5px; line-height: 1.6; color: var(--texto-3);
  max-width: 30ch; margin: 18px auto 0;
}

/* =========================================================
   ADORNOS DE LAS DOS SECCIONES FINALES
   ========================================================= */

/* ---------- Notas que suben en la playlist ---------- */
.playlist { position: relative; overflow: hidden; }
.playlist > .wrap { position: relative; z-index: 1; }
.notas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.notas i {
  position: absolute; left: var(--x); bottom: -40px;
  width: 15px; height: 21px; opacity: 0;
  /* Corchea dibujada con el propio borde: sin peticiones extra */
  background:
    radial-gradient(circle at 4px 17px, var(--acento) 3.6px, transparent 3.9px),
    linear-gradient(var(--acento), var(--acento));
  background-size: 100% 100%, 1.6px 17px;
  background-position: 0 0, 6.4px 0;
  background-repeat: no-repeat;
  animation: nota-sube var(--t, 12s) linear var(--d, 0s) infinite;
}
.notas i::after {
  content: ''; position: absolute; right: -1px; top: 0;
  width: 7px; height: 8px; border-radius: 0 60% 60% 0;
  background: var(--acento);
}
@keyframes nota-sube {
  0%   { transform: translateY(0) rotate(-6deg);            opacity: 0; }
  12%  {                                                     opacity: .5; }
  50%  { transform: translateY(-46vh) translateX(14px) rotate(8deg); }
  88%  {                                                     opacity: .35; }
  100% { transform: translateY(-92vh) translateX(-8px) rotate(-4deg); opacity: 0; }
}

/* ---------- Hilo de luz del cierre ---------- */
.cierre-video .divisor { margin: 18px auto 20px; }
.cierre-hilo {
  display: block; width: 1px; height: 54px; margin: 26px auto 0;
  background: rgba(46,46,42,.16); overflow: hidden; position: relative;
}
.cierre-hilo i {
  position: absolute; inset: 0; background: var(--acento);
  transform: translateY(-100%);
  animation: hilo-baja 3.2s ease-in-out infinite;
}
@keyframes hilo-baja {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- El sobre y el regalo se abren ---------- */
/* Dos acuarelas superpuestas: cerrada y abierta. Al entrar en pantalla
   se cruzan, y la tapa o la solapa se levanta un poco al mismo tiempo. */
/* display:block obligatorio: es un <span> y a un inline no se le aplica ancho */
.icono-abre { display: block; position: relative; width: 92px; margin: 0 auto 10px; }
.icono-abre img {
  display: block; width: 100%; height: auto;
}
.icono-abre .abierto {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(.94);
  transition: opacity .8s ease .35s, transform .9s cubic-bezier(.2,.8,.3,1.2) .35s;
}
.icono-abre .cerrado {
  transition: opacity .7s ease .35s;
}
.icono-abre.visible .abierto { opacity: 1; transform: scale(1); }
.icono-abre.visible .cerrado { opacity: 0; }
/* Después de abrirse respira, para que no quede congelado */
.icono-abre.visible { animation: icono-respira 5.5s ease-in-out 1.4s infinite; }
@keyframes icono-respira {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1.2deg); }
}
/* Sobre fondo oscuro el icono va en su medallón claro */
/* Sobre el verde oscuro va sin circulo: esta acuarela es opaca y se
   sostiene sola. Solo una sombra para despegarla del fondo. */
/* Caja cuadrada fija: la version abierta es mas alta que la cerrada y sin
   esto se desbordaba por abajo, encima del titulo. */
.icono-abre.sobre-claro { width: 124px; height: 124px; margin-bottom: 16px; }
.icono-abre.sobre-claro img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.3));
}

/* ---------- Los iconos no se quedan quietos ----------
   Antes se abrian una sola vez al aparecer y, como el invitado llega
   cuando llega, para entonces ya habia terminado. Ahora van en bucle. */
.icono-abre.visible .cerrado { transition: none; animation: tapa-cierra 7s ease-in-out infinite; }
.icono-abre.visible .abierto { transition: none; animation: tapa-abre 7s ease-in-out infinite; }
@keyframes tapa-abre {
  0%, 10%   { opacity: 0; transform: scale(.94); }
  22%, 70%  { opacity: 1; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes tapa-cierra {
  0%, 10%   { opacity: 1; }
  22%, 70%  { opacity: 0; }
  82%, 100% { opacity: 1; }
}
/* El vestido y el terno, colgados: se mecen desde la percha. Con 1.7 grados
   el movimiento no se percibia; a 5 se lee sin dejar de ser elegante. */
.balanceo { transform-origin: 50% 6%; }
.balanceo.visible { animation: balanceo 3.6s ease-in-out infinite; }
@keyframes balanceo {
  0%, 100% { transform: rotate(-5deg)   translateY(0); }
  50%      { transform: rotate(5deg)    translateY(-2px); }
}
/* El vinilo gira, como en un tocadiscos */
.gira.visible, .visible > .gira { animation: gira 11s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Del disco salen notas: solo girando parecia un plato, no musica */
.disco { position: relative; display: block; width: 86px; margin: 0 auto 10px; }
.disco .art-icon { width: 100%; margin: 0; }
.disco i {
  position: absolute; left: 50%; top: 34%; z-index: 2;
  font-style: normal; line-height: 1; color: var(--olive);
  opacity: 0; pointer-events: none;
  /* un halo de papel para que no se pierdan sobre el verde del disco */
  text-shadow: 0 0 6px rgba(246,243,236,.95), 0 1px 2px rgba(246,243,236,.9);
  animation: nota-sale 4.6s ease-out var(--d) infinite;
}
@keyframes nota-sale {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(0deg); }
  14%  { opacity: .9; }
  70%  { opacity: .55; }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--x)), -260%) scale(1) rotate(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
  .notas i, .cierre-hilo i, .icono-abre.visible, .pie-aro { animation: none; }
  .icono-abre .abierto { opacity: 1; transform: none; transition: none; }
  .icono-abre .cerrado { opacity: 0; }
  .pie-trivia { animation: none; }
  .icono-abre.visible .abierto, .icono-abre.visible .cerrado,
  .balanceo.visible, .gira.visible, .visible > .gira, .disco i { animation: none; }
  .balanceo.visible, .gira.visible, .visible > .gira { transform: none; }
  .disco i { display: none; }
}