/* =========================================================
   Invitación 70 años · Estilos (mobile-first)
   ========================================================= */
:root {
  --ink: #3a2314;
  --ink-soft: #6b4a33;
  --paper: #f4e8d2;
  --paper-2: #ead9b9;
  --kraft: #c79b67;
  --kraft-2: #b0834f;
  --kraft-3: #8e6436;
  --terracotta: #b4532a;
  --gold: #d6a548;
  --sage: #7d8c5c;
  --wine: #7b1e25;
  --grass: #2f4721;
  --night: #141a33;

  --font-west: 'Rye', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Alex Brush', 'Brush Script MT', cursive;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: #2b1a10;
}

body {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  background: #2b1a10;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; height: 100%; }

[hidden] { display: none !important; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

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

/* ---------- Video de fondo ---------- */
.video-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #2b1a10;
}
.video-bg__fallback {
  position: absolute;
  inset: -5%;
  background:
    radial-gradient(ellipse at 70% 70%, rgba(255, 196, 120, .55), transparent 55%),
    linear-gradient(180deg, #2d2a4a 0%, #8a4f5a 45%, #d98b55 75%, #f0bf7a 100%);
  animation: slowzoom 18s ease-in-out infinite alternate;
}
.video-bg__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%) scale(1.18);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.video-bg.is-playing .video-bg__frame { opacity: 1; }
.video-bg__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.video-bg__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(15, 9, 5, .55) 100%),
    linear-gradient(180deg, rgba(20, 12, 6, .55) 0%, rgba(20, 12, 6, .2) 40%, rgba(20, 12, 6, .65) 100%);
}

@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---------- Intro / Sobre ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 24px 16px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(30, 18, 10, .25), rgba(15, 9, 5, .82));
  touch-action: none;
  overflow: hidden;
}
.intro__kicker {
  font-style: italic;
  font-size: 1.35rem;
  color: #f4e8d2;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.intro__kicker strong {
  display: block;
  font-family: var(--font-west);
  font-style: normal;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.envelope-wrap { width: min(86vw, 380px); will-change: transform; }

.envelope {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
  animation: float 4.5s ease-in-out infinite;
}
.envelope:focus-visible { outline: 3px solid var(--gold); outline-offset: 10px; border-radius: 8px; }
.envelope.is-opening { animation: none; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

.envelope__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--kraft-2), var(--kraft-3));
  box-shadow: 0 34px 60px -18px rgba(0, 0, 0, .75), 0 10px 22px rgba(0, 0, 0, .35);
}

.envelope__letter {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 5%;
  height: 90%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7%;
  border-radius: 3px;
  background: var(--noise), linear-gradient(180deg, #fbf4e6, var(--paper));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  color: var(--ink);
}
.envelope__letter::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(180, 83, 42, .45);
  border-radius: 2px;
}
.letter__small { font-family: var(--font-west); font-size: .8rem; letter-spacing: .3em; color: var(--terracotta); }
.letter__big { font-family: var(--font-west); font-size: clamp(3.6rem, 18vw, 4.8rem); line-height: .95; color: var(--ink); }
.letter__script { font-family: var(--font-script); font-size: clamp(1.4rem, 6vw, 1.8rem); color: var(--terracotta); line-height: 1; }

.envelope__pocket {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  border-radius: 6px;
  overflow: hidden;
}

.envelope__flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.flap__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flap__front {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 40%),
    linear-gradient(180deg, #d9ae78, #c39360);
}
.flap__back {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotateX(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(244, 232, 210, .22) 0 6px, transparent 6px 16px),
    repeating-linear-gradient(-45deg, rgba(244, 232, 210, .22) 0 6px, transparent 6px 16px),
    linear-gradient(180deg, #b4532a, #8e3a1b);
}

.seal {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 52% 48% 50% 50% / 47% 53% 49% 51%;
  background: radial-gradient(circle at 35% 30%, #b8414a, #7b1e25 55%, #4f1015);
  box-shadow:
    0 5px 12px rgba(0, 0, 0, .45),
    inset 0 -4px 7px rgba(0, 0, 0, .35),
    inset 0 3px 5px rgba(255, 255, 255, .2);
}
.seal::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px dashed rgba(240, 200, 120, .45);
}
.seal span {
  font-family: var(--font-west);
  font-size: 2rem;
  line-height: 1;
  color: #f0c878;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .2);
}

.intro__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: rgba(244, 232, 210, .85);
}
.chev {
  width: 18px;
  height: 18px;
  border-left: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(6px) rotate(45deg); opacity: .4; }
  50% { transform: translateY(-4px) rotate(45deg); opacity: 1; }
}

.intro__confetti { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.intro__confetti i { position: absolute; width: 8px; height: 13px; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 16px 140px;
  text-align: center;
  color: #f8eedb;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(180deg, transparent, #24325e);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow {
  font-style: italic;
  font-size: 1.25rem;
  max-width: 18em;
  margin: 0 auto 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.hero__the, .hero__years {
  font-family: var(--font-west);
  font-size: .95rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: #ffd98c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 12px rgba(0, 0, 0, .7);
}
.hero__number {
  font-family: var(--font-west);
  font-weight: 400;
  font-size: clamp(7rem, 42vw, 13rem);
  line-height: .9;
  color: #fff6e3;
  text-shadow: 0 6px 0 rgba(122, 55, 22, .7), 0 12px 30px rgba(0, 0, 0, .55);
}
.hero__name {
  font-family: var(--font-script);
  font-size: clamp(3rem, 14vw, 5rem);
  line-height: 1.1;
  margin-top: 4px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .6);
}
.hero__date {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 10px 0;
  border-top: 1px solid rgba(214, 165, 72, .7);
  border-bottom: 1px solid rgba(214, 165, 72, .7);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.hero__date b { font-family: var(--font-west); font-weight: 400; font-size: 2.2rem; letter-spacing: 0; color: var(--gold); }

.scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(248, 238, 219, .85);
}
.scroll-cue span {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(248, 238, 219, .8);
  border-radius: 14px;
  position: relative;
}
.scroll-cue span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Escena del rancho ---------- */
/* La sección mide el alto MÁXIMO de la pantalla (barras del navegador escondidas)
   para que nunca se asome la siguiente sección. El dibujo vive en un lienzo del alto
   MÍNIMO (barras visibles), así siempre se ve completo; lo que sobra abajo es pasto. */
.rancho {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: #2f4721;
}
.rancho__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #24325e;
}
.sky {
  --sky1: #24325e;
  --sky2: #c9727a;
  --sky3: #f4b77c;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 52%, var(--sky3) 78%);
}

.sun-wrap {
  position: absolute;
  left: 62%;
  top: 30%;
  width: clamp(90px, 26vmin, 200px);
  aspect-ratio: 1;
  margin-left: calc(clamp(90px, 26vmin, 200px) / -2);
}
.sun {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0%, #ffe08a 45%, #ffbe55 72%);
  box-shadow: 0 0 60px 22px rgba(255, 200, 100, .45), 0 0 170px 70px rgba(255, 170, 90, .25);
}

.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute;
  width: 120px;
  height: 36px;
  border-radius: 40px;
  background: rgba(255, 246, 236, .85);
  filter: blur(.4px);
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.cloud::before { width: 56px; height: 56px; left: 18px; top: -28px; }
.cloud::after { width: 44px; height: 44px; left: 58px; top: -18px; }
.cloud--1 { left: 4%; top: 38%; transform: scale(1.1); }
.cloud--2 { left: 62%; top: 30%; transform: scale(.8); opacity: .75; }
.cloud--3 { left: 30%; top: 50%; transform: scale(.6); opacity: .6; }

.flock {
  position: absolute;
  left: 0;
  top: 22%;
  width: 120px;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}
.flock--small { top: 14%; z-index: 1; }
.bird {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: 34px;
  height: 17px;
  transform: scale(var(--s));
}
.bird svg {
  width: 100%;
  height: 100%;
  fill: #2a2230;
  transform-origin: 50% 60%;
  animation: flap .42s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
.flock--dark .bird svg { fill: #3a1d2b; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.3); } }

/* Cada capa tiene la proporción exacta del dibujo (1440×600 = 2.4) y su tamaño
   depende de la ALTURA de la pantalla. Así nunca se recorta por arriba en
   pantallas anchas; lo que sobra a los lados se llena con el paisaje extendido. */
.layer {
  --h: 50;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: -3vh;
  bottom: -3svh;
  height: calc(var(--h) * 1vh);
  height: calc(var(--h) * 1svh);
  width: calc(var(--h) * 2.4vh);
  width: calc(var(--h) * 2.4svh);
  pointer-events: none;
  will-change: transform;
}
.layer__inner { width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.layer svg { width: 100%; height: 100%; overflow: visible; }
.layer--mountains { --h: 62; }
.layer--hills { --h: 52; }
.layer--field { --h: 42; }
.layer--front { --h: 26; bottom: -4vh; bottom: -4svh; }

/* animalitos */
.cow-tail { transform-box: fill-box; transform-origin: 0 0; animation: swish 2.4s ease-in-out infinite; }
.cow-head { transform-box: fill-box; transform-origin: 100% 0; animation: graze 3.6s ease-in-out infinite; }
.hen-body { transform-box: fill-box; transform-origin: 30% 100%; animation: peck 2.2s ease-in-out infinite; }
.hen--2 .hen-body { animation-delay: -1.1s; animation-duration: 2.8s; }
.chick { animation: hop 1.4s ease-in-out infinite; }
.chick:nth-child(2) { animation-delay: -.6s; }

@keyframes swish { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes graze { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(3deg); } }
@keyframes peck { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(32deg); } 75% { transform: rotate(4deg); } 85% { transform: rotate(30deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.rancho__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 9%;
  z-index: 5;
  text-align: center;
  color: #fff8ea;
  pointer-events: none;
}
.rancho__beat { position: absolute; left: 16px; right: 16px; top: 0; opacity: 0; visibility: hidden; }
.rancho__beat h2 {
  font-family: var(--font-west);
  font-weight: 400;
  font-size: clamp(2.6rem, 13vw, 4.8rem);
  line-height: 1;
  text-shadow: 0 3px 0 rgba(90, 40, 30, .35), 0 6px 22px rgba(30, 20, 50, .45);
}
.rancho__beat p {
  margin-top: 8px;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 5.6vw, 1.9rem);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(30, 20, 50, .6);
}

/* ---------- Secciones de papel ---------- */
.paper {
  position: relative;
  background-color: var(--paper);
  background-image: var(--noise);
  overflow: hidden;
}
.edge { position: absolute; left: 0; width: 100%; height: 70px; pointer-events: none; }
.edge--top { top: -1px; }

.historia { padding: 130px 16px 90px; }
.detalles { padding: 70px 16px 110px; background-color: #efe0c4; }

.section-head { position: relative; z-index: 2; text-align: center; max-width: 34rem; margin: 0 auto 34px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-west);
  font-size: .78rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  margin: 0 10px;
  vertical-align: middle;
  background: currentColor;
  opacity: .6;
}
.section-head h2 {
  font-family: var(--font-west);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.08;
  color: var(--ink);
}
.section-head p { margin-top: 12px; font-size: 1.2rem; color: var(--ink-soft); }
.big-year { font-family: var(--font-script); font-size: 3.4rem !important; line-height: 1; color: var(--terracotta) !important; margin-top: 0 !important; }

.section-head--light h2 { color: #fff6e6; text-shadow: 0 3px 16px rgba(0, 0, 0, .35); }
.section-head--light p { color: rgba(255, 246, 230, .9); }
.section-head--light .eyebrow { color: #ffd68a; }

/* polaroids */
.polaroids {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin: 70px auto 0;
}
.polaroid-wrap { will-change: transform; }
.polaroid-wrap:nth-child(1) { justify-self: start; width: 74%; }
.polaroid-wrap:nth-child(2) { justify-self: end; width: 74%; margin-top: 10px; }
.polaroid-wrap:nth-child(3) { justify-self: start; width: 72%; margin-top: 10px; margin-left: 6%; }
.polaroid {
  padding: 12px 12px 0;
  background: #fffaf0;
  box-shadow: 0 18px 30px -12px rgba(58, 35, 20, .45), 0 2px 6px rgba(58, 35, 20, .2);
  transform: rotate(var(--r));
}
.polaroid__img {
  position: relative;
  aspect-ratio: 4 / 3.4;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(255, 246, 230, .9);
}
.polaroid__img svg { width: 46%; fill: rgba(255, 246, 230, .35); }
.polaroid__img span {
  position: absolute;
  bottom: 10px;
  font-family: var(--font-west);
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .7;
}
.polaroid__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) contrast(1.03); }
.polaroid__img--tall { aspect-ratio: 4 / 4.8; }
.ph-1 { background: linear-gradient(135deg, #8a6a4a, #5c3f28); }
.ph-2 { background: linear-gradient(135deg, #b4532a, #6e2f17); }
.ph-3 { background: linear-gradient(135deg, #7d8c5c, #46532f); }
.polaroid figcaption {
  font-family: var(--font-script);
  font-size: 1.7rem;
  text-align: center;
  padding: 8px 0 12px;
  color: var(--ink);
}

.quote {
  position: relative;
  z-index: 2;
  max-width: 30rem;
  margin: 60px auto 0;
  text-align: center;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.quote::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  margin: 0 auto 18px;
  background: var(--terracotta);
}

/* decor */
.decor { position: absolute; z-index: 1; pointer-events: none; opacity: .8; }
.decor--wheat {
  width: 70px;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 180'%3E%3Cg fill='none' stroke='%23b8863e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M35 180 Q38 100 30 20'/%3E%3C/g%3E%3Cg fill='%23d6a548'%3E%3Cellipse cx='22' cy='40' rx='6' ry='12' transform='rotate(-30 22 40)'/%3E%3Cellipse cx='40' cy='34' rx='6' ry='12' transform='rotate(30 40 34)'/%3E%3Cellipse cx='22' cy='64' rx='6' ry='12' transform='rotate(-30 22 64)'/%3E%3Cellipse cx='42' cy='58' rx='6' ry='12' transform='rotate(30 42 58)'/%3E%3Cellipse cx='24' cy='88' rx='6' ry='12' transform='rotate(-30 24 88)'/%3E%3Cellipse cx='43' cy='82' rx='6' ry='12' transform='rotate(30 43 82)'/%3E%3Cellipse cx='30' cy='16' rx='5' ry='11'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.decor--flip { transform: scaleX(-1); }
.decor--horseshoe {
  width: 64px;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 8 Q4 34 18 52 Q32 64 46 52 Q60 34 50 8' fill='none' stroke='%238e6436' stroke-width='9' stroke-linecap='round'/%3E%3Cg fill='%23efe0c4'%3E%3Ccircle cx='12' cy='22' r='2'/%3E%3Ccircle cx='13' cy='36' r='2'/%3E%3Ccircle cx='52' cy='22' r='2'/%3E%3Ccircle cx='51' cy='36' r='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(18deg);
}
.decor--hat {
  width: 84px;
  height: 56px;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath fill='%236b4a33' d='M6,28 Q32,36 58,28 Q54,36 32,38 Q10,36 6,28Z M18,28 Q19,8 32,8 Q45,8 46,28Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* mariposas */
.butterfly-wrap { position: absolute; z-index: 1; pointer-events: none; }
.butterfly {
  display: block;
  position: relative;
  width: 38px;
  height: 30px;
  animation: drift 6s ease-in-out infinite;
}
.butterfly i {
  position: absolute;
  top: 0;
  width: 19px;
  height: 28px;
  background: radial-gradient(circle at 50% 35%, #ffd27a 0 30%, #e08a2c 31% 70%, #5a2e12 71%);
  border-radius: 60% 40% 50% 50%;
  animation: wing .22s ease-in-out infinite alternate;
}
.butterfly i:first-child { left: 0; transform-origin: 100% 50%; }
.butterfly i:last-child { right: 0; transform-origin: 0 50%; border-radius: 40% 60% 50% 50%; animation-name: wing2; }
.butterfly--blue i { background: radial-gradient(circle at 50% 35%, #cfe7ff 0 30%, #4a8fd1 31% 70%, #1f3b5c 71%); }
@keyframes wing { from { transform: rotateY(0); } to { transform: rotateY(70deg); } }
@keyframes wing2 { from { transform: rotateY(0); } to { transform: rotateY(-70deg); } }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  25% { transform: translate(18px, -14px) rotate(6deg); }
  50% { transform: translate(34px, 4px) rotate(-4deg); }
  75% { transform: translate(12px, 12px) rotate(8deg); }
}

/* countdown */
.countdown {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 22px;
}
.countdown div {
  padding: 14px 4px 10px;
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #8a5a32, #6a4225);
  color: #f6e6c8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 8px 16px -8px rgba(58, 35, 20, .6);
}
.countdown b { display: block; font-family: var(--font-west); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.countdown span { display: block; margin-top: 6px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }

/* botones */
.btn-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  background: var(--terracotta);
  color: #fff6e6;
  box-shadow: 0 8px 18px -8px rgba(122, 40, 10, .7);
  transition: transform .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:hover { filter: brightness(1.06); }
.btn--alt { background: #3a2314; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(58, 35, 20, .45); box-shadow: none; }

/* cards */
.card {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 0 auto 22px;
  padding: 28px 22px;
  border-radius: 14px;
  background: var(--noise), #fbf3e3;
  box-shadow: 0 20px 36px -22px rgba(58, 35, 20, .55), 0 1px 0 rgba(255, 255, 255, .6) inset;
  text-align: center;
}
.card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(180, 83, 42, .35);
  border-radius: 10px;
  pointer-events: none;
}
.card h3 { font-family: var(--font-west); font-weight: 400; font-size: 1.5rem; color: var(--terracotta); margin-bottom: 16px; }
.card p { color: var(--ink-soft); }

.timeline { list-style: none; text-align: left; position: relative; padding-left: 4px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 86px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(180, 83, 42, .5) 0 6px, transparent 6px 12px);
}
.timeline li { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 22px; padding: 10px 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: 81px;
  top: 17px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px #fbf3e3;
}
.timeline time { font-family: var(--font-west); font-size: .92rem; color: var(--ink); padding-top: 3px; text-align: right; }
.timeline strong { display: block; font-size: 1.2rem; color: var(--ink); line-height: 1.2; }
.timeline span { font-size: 1rem; color: var(--ink-soft); }

.dress-icons { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; }
.dress-icons svg { height: 46px; width: auto; fill: #6b4a33; }
.dress-title { font-family: var(--font-script); font-size: 2.3rem; line-height: 1.1; color: var(--ink) !important; margin-bottom: 6px; }

/* ---------- Ubicación (atardecer) ---------- */
.ubicacion {
  position: relative;
  overflow: hidden;
  padding: 110px 16px 230px;
  background: linear-gradient(180deg, #efe0c4 0%, #f3c27e 14%, #e48a52 45%, #b55a55 72%, #5b3458 100%);
}
.sunset-sun-wrap {
  position: absolute;
  left: 50%;
  top: 16%;
  width: 240px;
  height: 240px;
  margin-left: -120px;
}
.sunset-sun {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1c4 0%, #ffcf6e 50%, #ff9f4a 75%);
  box-shadow: 0 0 80px 30px rgba(255, 170, 80, .45);
  opacity: .9;
}
.flock--dark { top: 8%; z-index: 1; }

.map-card {
  position: relative;
  z-index: 2;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 12px 20px;
  border-radius: 18px;
  background: var(--noise), #fbf3e3;
  box-shadow: 0 30px 50px -24px rgba(40, 10, 20, .7);
  text-align: center;
}
.map-frame {
  position: relative;
  aspect-ratio: 4 / 4.2;
  border-radius: 12px;
  overflow: hidden;
  background: #e5d6b8;
  margin-bottom: 16px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: sepia(.3) saturate(.95); }
.map-card .btn-row { margin-bottom: 8px; }
.map-note { font-size: 1rem; color: var(--ink-soft); }

.silhouettes {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 220px;
  z-index: 1;
  fill: #2f1a2c;
}
.silhouettes svg { width: 100%; height: 100%; }

/* ---------- RSVP (noche) ---------- */
.rsvp {
  position: relative;
  overflow: hidden;
  padding: 70px 16px 40px;
  background: linear-gradient(180deg, #2f1a2c 0%, #1c1b3a 30%, #121735 70%, #0b0f24 100%);
  color: #fff6e6;
}
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.moon-wrap { position: absolute; right: 12%; top: 40px; }
.moon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe9, #f0e2b6 60%, #d8c58e);
  box-shadow: 0 0 40px 12px rgba(255, 240, 190, .25);
}

.fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fireflies i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff3a0;
  box-shadow: 0 0 10px 3px rgba(255, 236, 120, .7);
  animation: firefly var(--t, 9s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
  opacity: 0;
}
@keyframes firefly {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(var(--fx, 30px), var(--fy, -40px)); opacity: .3; }
  70% { opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0; }
}

.rsvp .section-head { margin-top: 70px; }

.rsvp-card {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 0 auto;
  padding: 26px 20px 24px;
  border-radius: 18px;
  background: var(--noise), #fbf3e3;
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.field { display: block; margin-bottom: 18px; border: 0; }
.field > span, .choice legend {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}
.field em { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid rgba(58, 35, 20, .25);
  border-radius: 10px;
  background: #fffaf2;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(180, 83, 42, .18); }

.choice { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.choice legend { grid-column: 1 / -1; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(58, 35, 20, .25);
  background: #fffaf2;
  font-weight: 700;
  font-size: 1.08rem;
  text-align: center;
  transition: all .2s ease;
}
.choice input:checked + span { background: var(--terracotta); border-color: var(--terracotta); color: #fff6e6; transform: scale(1.02); }
.choice input[value="no"]:checked + span { background: #5b4a3e; border-color: #5b4a3e; }
.choice input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid rgba(58, 35, 20, .25); border-radius: 999px; padding: 4px; background: #fffaf2; }
.stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #ead9b9;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.stepper output { min-width: 44px; text-align: center; font-family: var(--font-west); font-size: 1.4rem; }

.form-error { min-height: 1.4em; margin: -6px 0 8px; color: #a0281c; font-weight: 600; font-size: 1rem; }

.btn--wa { width: 100%; background: #1f8f4e; box-shadow: 0 10px 20px -10px rgba(20, 90, 50, .8); }
.btn--wa svg { width: 22px; height: 22px; fill: currentColor; }

.rsvp-thanks { text-align: center; }
.thanks-big { font-family: var(--font-script); font-size: 3.6rem; line-height: 1.1; color: var(--terracotta); }
.thanks-text { margin: 6px 0 18px; color: var(--ink-soft); }

.footer { position: relative; z-index: 2; text-align: center; padding: 70px 0 30px; color: rgba(255, 246, 230, .8); }
.footer__script { font-family: var(--font-script); font-size: 3.2rem; line-height: 1; color: #ffd68a; margin-bottom: 6px; }

/* botón flotante */
.fab {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  transform: translate(-50%, 24px) scale(.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff6e6;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease, visibility 0s linear .45s;
}
/* Se esconde con transparencia (no solo bajándolo): en Chrome de iPhone, al ocultarse
   las barras, la zona visible queda más abajo y un botón "bajado" se asomaba cortado. */
.fab.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease, visibility 0s;
}

/* ---------- Pantallas grandes ---------- */
@media (min-width: 768px) {
  .polaroids { max-width: 760px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .polaroid-wrap:nth-child(n) { width: 100%; margin-top: 0; justify-self: stretch; }
  .polaroid-wrap:nth-child(2) { margin-top: 60px; }
  .detalles { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; column-gap: 24px; }
  .detalles > .section-head, .detalles > .countdown, .detalles > .btn-row { grid-column: 1 / -1; }
  .detalles > .card:first-of-type { grid-row: span 2; }
  .detalles .card { margin: 0 0 24px; width: 100%; }
}

/* ---------- Movimiento reducido: solo se quita lo más brusco ---------- */
@media (prefers-reduced-motion: reduce) {
  .envelope, .video-bg__fallback { animation: none; }
}