:root {
  --color-text-on-dark: #fff8ec;
  --color-text-muted: #c9d0e0;
  --color-primary: #ff5f6d;
  --color-primary-dark: #ff8a75;
  --color-secondary: #3ddad0;
  --color-gold: #ffc93c;
  --scene-base: #0b1024;
  --max-width: 860px;
  --radius: 18px;
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* 0 = arriba del todo (día), 1 = final de la página (noche). La actualiza
     js/main.js en cada scroll (initProgressBar) y todo el cielo se deriva
     de este único valor con calc(), sin tocar JS por elemento. */
  --scroll-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--scene-base);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-on-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

a {
  color: inherit;
}

/* ---------- Fondo épico fijo (parallax) ---------- */
/* Position: fixed => el fondo no se mueve mientras el contenido se desliza
   encima, generando el parallax clásico y una escena continua sin cortes
   entre secciones. TODO: sustituir por una foto real con background-image. */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Sin fondo propio: el color base ahora lo pone .sky (día/noche); esta
     capa solo aporta los blobs/estrellas/confeti decorativos por encima. */
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: drift 16s ease-in-out infinite;
}

.blob-1 {
  width: 46vw;
  height: 46vw;
  top: -10%;
  left: -8%;
  background: var(--color-secondary);
  animation-duration: 18s;
}

.blob-2 {
  width: 38vw;
  height: 38vw;
  top: 25%;
  right: -12%;
  background: var(--color-primary);
  animation-duration: 22s;
  animation-delay: -4s;
}

.blob-3 {
  width: 42vw;
  height: 42vw;
  bottom: -12%;
  left: 10%;
  background: var(--color-gold);
  opacity: 0.35;
  animation-duration: 20s;
  animation-delay: -8s;
}

.blob-4 {
  width: 32vw;
  height: 32vw;
  bottom: 5%;
  right: 5%;
  background: #7c4dff;
  opacity: 0.4;
  animation-duration: 24s;
  animation-delay: -12s;
}

.blob-5 {
  width: 30vw;
  height: 30vw;
  top: 40%;
  left: 35%;
  background: #ff2ea6;
  opacity: 0.3;
  animation-duration: 19s;
  animation-delay: -6s;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, -3%) scale(1.08); }
}

.stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 15%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 70%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 50% 45%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 85%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  background-repeat: repeat;
  background-size: 100% 100%;
  /* Invisibles de día, van apareciendo a medida que avanza la noche. */
  opacity: calc(var(--scroll-progress) * 0.9 - 0.1);
}

/* Topos + confeti tejidos en el fondo: aportan color y aire veraniego/fiesta
   detrás de todo el contenido, en un patrón que se repite por toda la página. */
.confetti-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255, 201, 60, 0.65) 4px, transparent 4.5px),
    radial-gradient(circle, rgba(255, 95, 109, 0.55) 3px, transparent 3.5px),
    radial-gradient(circle, rgba(61, 218, 208, 0.55) 3.5px, transparent 4px),
    radial-gradient(circle, rgba(124, 77, 255, 0.5) 3px, transparent 3.5px),
    radial-gradient(circle, rgba(255, 46, 166, 0.45) 2.5px, transparent 3px);
  background-size: 160px 160px, 190px 190px, 140px 140px, 210px 210px, 170px 170px;
  background-position: 10px 20px, 90px 120px, 140px 30px, 30px 160px, 170px 80px;
}

@media (max-width: 640px) {
  .confetti-pattern {
    background-size: 110px 110px, 130px 130px, 100px 100px, 150px 150px, 120px 120px;
  }
}

/* ---------- Cielo día -> noche (continuo con el scroll) ---------- */
/* Vive por debajo de .scene y .scene-images (z-index -2), así que nunca pisa
   el contraste de texto de los paneles: el degradado opaco de cada
   .scene-img-* sigue tapando el sol/luna/nubes donde haga falta. Todo se
   deriva de --scroll-progress con calc(), sin animaciones ni JS por pieza. */

.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.sky-day,
.sky-night {
  position: absolute;
  inset: 0;
}

.sky-day {
  background: linear-gradient(180deg, #6ec3f0 0%, #a9ddf3 45%, #ffe9b8 100%);
  opacity: calc(1 - var(--scroll-progress));
}

.sky-night {
  background: linear-gradient(180deg, #0b1024 0%, #161233 55%, #24123f 100%);
  opacity: var(--scroll-progress);
}

.sky-sun,
.sky-moon {
  position: absolute;
  top: 10%;
  width: 200px;
  height: 200px;
  left: 50%;
  border-radius: 50%;
}

.sky-sun {
  transform: translate(-190%, calc(var(--scroll-progress) * -45vh));
  background: radial-gradient(circle at 35% 35%, #fff7d6, var(--color-gold) 60%, rgba(255, 201, 60, 0) 72%);
  box-shadow: 0 0 140px 46px rgba(255, 201, 60, 0.45);
  opacity: calc(1 - var(--scroll-progress) * 1.4);
}

.sky-moon {
  transform: translate(90%, calc((1 - var(--scroll-progress)) * 45vh));
  background: radial-gradient(circle at 65% 35%, #fdfdfd, #d7d9e8 55%, rgba(215, 217, 232, 0) 75%);
  box-shadow: 0 0 100px 30px rgba(215, 217, 232, 0.35);
  opacity: calc((var(--scroll-progress) - 0.3) * 1.4);
}

.sky-cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(1px);
  opacity: calc(0.9 - var(--scroll-progress) * 1.3);
  animation: cloud-drift 26s ease-in-out infinite;
}

.sky-cloud::before,
.sky-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.sky-cloud-1 { top: 18%; left: 10%; width: 140px; height: 46px; }
.sky-cloud-1::before { width: 70px; height: 70px; top: -34px; left: 16px; }
.sky-cloud-1::after { width: 50px; height: 50px; top: -20px; left: 74px; }

.sky-cloud-2 {
  top: 30%;
  left: 62%;
  width: 110px;
  height: 38px;
  animation-duration: 32s;
  animation-delay: -8s;
}
.sky-cloud-2::before { width: 56px; height: 56px; top: -26px; left: 12px; }
.sky-cloud-2::after { width: 40px; height: 40px; top: -16px; left: 58px; }

.sky-cloud-3 {
  top: 8%;
  left: 38%;
  width: 90px;
  height: 32px;
  animation-duration: 22s;
  animation-delay: -4s;
}
.sky-cloud-3::before { width: 44px; height: 44px; top: -20px; left: 10px; }
.sky-cloud-3::after { width: 32px; height: 32px; top: -12px; left: 48px; }

.sky-cloud-4 {
  top: 45%;
  left: 20%;
  width: 120px;
  height: 40px;
  animation-duration: 29s;
  animation-delay: -14s;
}
.sky-cloud-4::before { width: 60px; height: 60px; top: -28px; left: 14px; }
.sky-cloud-4::after { width: 44px; height: 44px; top: -18px; left: 64px; }

.sky-cloud-5 {
  top: 52%;
  left: 78%;
  width: 100px;
  height: 34px;
  animation-duration: 24s;
  animation-delay: -10s;
}
.sky-cloud-5::before { width: 50px; height: 50px; top: -22px; left: 12px; }
.sky-cloud-5::after { width: 36px; height: 36px; top: -14px; left: 54px; }

@keyframes cloud-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3vw); }
}

@media (max-width: 640px) {
  .sky-sun,
  .sky-moon {
    width: 120px;
    height: 120px;
  }

  .sky-cloud-1 { width: 90px; height: 30px; }
  .sky-cloud-2 { width: 70px; height: 24px; }
  .sky-cloud-3 { width: 60px; height: 20px; }
  .sky-cloud-4 { width: 80px; height: 26px; }
  .sky-cloud-5 { width: 66px; height: 22px; }
}

/* ---------- Fuegos artificiales (fase noche, hacia el final del scroll) --- */

.firework-particle {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  z-index: 199;
  pointer-events: none;
  animation: firework-burst 1.3s cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}

@keyframes firework-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--fx, 60px), var(--fy, -60px)) scale(0.2); opacity: 0; }
}

/* ---------- Escenas de fondo por capítulo (crossfade con el scroll) ---------- */
/* Cada .scene-img cubre la pantalla y su opacidad la controla js/main.js
   (ScrollTrigger) según qué panel esté activo — efecto "apple.com/iphone". */

.scene-images {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.scene-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  background-size: cover;
  background-position: center;
}

/* Tinte de color ambiental por capítulo (sin foto a pantalla completa —
   las fotos reales viven en las "postales" de .postcard, más abajo). */

.scene-img-hero {
  opacity: 1;
  background:
    radial-gradient(circle at 75% 18%, rgba(255, 201, 60, 0.4) 0%, transparent 35%),
    linear-gradient(180deg, rgba(18, 33, 62, 0.55) 0%, rgba(28, 58, 94, 0.55) 38%, rgba(47, 111, 122, 0.55) 65%, rgba(61, 218, 208, 0.55) 100%);
}

.scene-img-plan {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 235, 170, 0.55) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255, 209, 102, 0.55) 0%, rgba(255, 154, 86, 0.55) 45%, rgba(255, 111, 97, 0.55) 80%, rgba(232, 66, 90, 0.55) 100%);
}

.scene-img-logistica {
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 145, 190, 0.3) 0%, transparent 45%),
    linear-gradient(180deg, rgba(36, 27, 82, 0.55) 0%, rgba(58, 29, 95, 0.55) 40%, rgba(124, 47, 107, 0.55) 75%, rgba(179, 74, 111, 0.55) 100%);
}

.scene-img-logistica::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(0deg, rgba(11, 16, 36, 0.9) 0%, transparent 100%);
}

.scene-img-rsvp {
  background:
    radial-gradient(circle at 20% 25%, rgba(61, 218, 208, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 78% 65%, rgba(255, 201, 60, 0.35) 0%, transparent 28%),
    radial-gradient(circle at 55% 40%, rgba(255, 95, 109, 0.3) 0%, transparent 26%),
    linear-gradient(180deg, rgba(11, 16, 36, 0.6) 0%, rgba(22, 18, 51, 0.6) 55%, rgba(36, 18, 63, 0.6) 100%);
}

/* ---------- Progress bar ---------- */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-primary));
  z-index: 100;
  transition: width 0.05s linear;
}

/* ---------- Marquee (frase destacada, estática) ---------- */

.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Fondo sólido a propósito: el texto tiene que leerse igual esté la
     escena de detrás clara u oscura, no depende del degradado ambiental. */
  background: rgba(11, 16, 36, 0.92);
  border-top: 1px solid rgba(255, 201, 60, 0.25);
  border-bottom: 1px solid rgba(255, 201, 60, 0.25);
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: center;
}

.marquee-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  text-align: center;
}

@media (max-width: 640px) {
  .marquee-line {
    font-size: 1.1rem;
  }
}


/* ---------- Panels (full-viewport secciones, fondo transparente) ---------- */

.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
  overflow: hidden;
  text-align: center;
}

.panel-content {
  position: relative;
  max-width: var(--max-width);
  z-index: 1;
}

/* ---------- Postales (fotos pequeñas al lateral) ---------- */

.postcard {
  position: absolute;
  top: 50%;
  margin: 0;
  z-index: 2;
  width: 328px;
  padding: 14px 14px 40px;
  background: #fffaf3;
  border-radius: 6px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
  transform: translateY(-50%) rotate(var(--postcard-rotate, -6deg));
}

/* .reveal-item aporta la aparición con scroll; combinamos su desplazamiento
   con el posicionamiento/rotación propios de la postal en vez de dejar que
   se pisen entre sí. */
.postcard.reveal-item {
  opacity: 0;
  transform: translateY(-50%) rotate(var(--postcard-rotate, -6deg)) translateY(24px);
}

.postcard.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(-50%) rotate(var(--postcard-rotate, -6deg));
}

.postcard img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
}

.postcard-caption {
  display: block;
  margin-top: 14px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #4a4235;
  text-align: center;
}

.postcard-left {
  left: 3%;
  --postcard-rotate: -7deg;
}

.postcard-right {
  right: 3%;
  --postcard-rotate: 6deg;
}

/* Posiciones verticales: cada postal de una sección cae un poco más abajo
   que la anterior (top-1 -> top-2 -> top-3) para que, combinado con la
   alternancia izquierda/derecha del HTML, la secuencia de postales baje
   en zigzag por la sección en vez de amontonarse. */
.postcard-top-1 {
  top: 40%;
}

.postcard-top-2 {
  top: 66%;
}

.postcard-top-3 {
  top: 84%;
}

/* Balanceo continuo (una vez visible) para que la postal se sienta viva. */
.postcard.reveal-item.is-visible {
  animation: postcard-bob 5.5s ease-in-out infinite;
}

@keyframes postcard-bob {
  0%, 100% { transform: translateY(-50%) rotate(var(--postcard-rotate, -6deg)); }
  50% { transform: translateY(calc(-50% - 10px)) rotate(var(--postcard-rotate, -6deg)); }
}

@media (max-width: 1300px) {
  .panel {
    flex-direction: column;
  }

  .postcard {
    position: static;
    transform: rotate(var(--postcard-rotate, -4deg));
    margin: 0 auto 2rem;
    width: 268px;
  }

  .postcard.reveal-item {
    opacity: 0;
    transform: rotate(var(--postcard-rotate, -4deg)) translateY(24px);
  }

  .postcard.reveal-item.is-visible {
    opacity: 1;
    transform: rotate(var(--postcard-rotate, -4deg));
    animation: postcard-bob-mobile 5.5s ease-in-out infinite;
  }
}

@keyframes postcard-bob-mobile {
  0%, 100% { transform: rotate(var(--postcard-rotate, -4deg)); }
  50% { transform: rotate(var(--postcard-rotate, -4deg)) translateY(-8px); }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-gold);
  opacity: 0.9;
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
}

.hero-datebox {
  margin-bottom: 7.5rem;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-gold);
  opacity: 0.95;
  margin: 0;
}

.panel-hero {
  align-items: flex-start;
  padding-top: clamp(8rem, 20vh, 12rem);
}

.panel-hero h1 {
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  margin: 1.5rem auto 2.75rem;
  max-width: 560px;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  min-height: 4rem;
}

/* Cuenta atrás protagonista, arriba del todo en el hero. */
.countdown-hero {
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.countdown-hero .cd-unit {
  min-width: 6.5rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border-width: 2px;
}

.countdown-hero .cd-num {
  font-size: 3.2rem;
  text-shadow: 0 0 24px rgba(255, 201, 60, 0.7);
}

.countdown-hero .cd-label {
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .countdown-hero {
    gap: 0.5rem;
    margin-bottom: 0.6rem;
  }

  .countdown-hero .cd-unit {
    min-width: 4.4rem;
    padding: 0.6rem 0.5rem;
  }

  .countdown-hero .cd-num {
    font-size: 2rem;
  }

  .countdown-hero .cd-label {
    font-size: 0.6rem;
  }
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 201, 60, 0.3);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  min-width: 4.2rem;
  backdrop-filter: blur(6px);
}

.cd-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-gold);
  text-shadow: 0 0 16px rgba(255, 201, 60, 0.6);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cd-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

@media (max-width: 480px) {
  .cd-unit {
    min-width: 3.4rem;
    padding: 0.4rem 0.5rem;
  }

  .cd-num {
    font-size: 1.3rem;
  }
}

.btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  background: var(--color-gold);
  color: #24123f;
  font-weight: 800;
  text-decoration: none;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 201, 60, 0.25);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  animation: pulse 2.4s ease-in-out infinite;
}

.btn-primary:hover {
  background: #ffdb70;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(255, 201, 60, 0.4);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 201, 60, 0.25); }
  50% { box-shadow: 0 8px 32px rgba(255, 201, 60, 0.55); }
}

.hero-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  opacity: 0.75;
  animation: bounce 1.8s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

/* ---------- Número gigante decorativo ---------- */

.giant-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16rem, 42vw, 34rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 248, 236, 0.18);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ---------- Stickers / cinta adhesiva ---------- */

.sticker {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--color-gold);
  color: #24123f;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  padding: 0.9rem 1.9rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  animation: sticker-wiggle 4s ease-in-out infinite;
}

@keyframes sticker-wiggle {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50% { transform: translateX(-50%) rotate(-1deg); }
}

.sticker-tape::before,
.sticker-tape::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 30px;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
}

.sticker-tape::before { left: -10px; transform: rotate(-25deg); }
.sticker-tape::after { right: -10px; transform: rotate(25deg); }

/* ---------- Toques de misterio ---------- */

.hero-mystery,
.rsvp-mystery {
  font-style: italic;
  color: var(--color-gold) !important;
  opacity: 0.9;
  text-shadow: 0 0 18px rgba(255, 201, 60, 0.4);
  margin-bottom: 1.5rem !important;
}

.hero-mystery {
  margin-bottom: 2.5rem !important;
}

@media (max-width: 640px) {
  .sticker {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }

  .giant-number {
    -webkit-text-stroke: 1.5px rgba(255, 248, 236, 0.14);
  }
}

/* Plan — fondo claro (amarillo/coral), así que el texto pasa a tonos
   oscuros en vez de la paleta clara que usan el resto de capítulos. */
.panel-plan {
  color: #3a1608;
}

.panel-plan .eyebrow {
  color: #7a3a00;
}

.panel-plan h2 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: #2a1608;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.35);
}

.panel-plan p {
  font-size: 1.15rem;
  color: #5a2f14;
}

/* Tablero 3x3 de cartas cuadradas: delante texto, detrás foto. Se giran en
   3D al pasar el ratón (o con :focus-visible en teclado); en pantallas
   táctiles, js/main.js añade "is-flipped" al tocar. */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 2rem;
}

.flip-card {
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  cursor: pointer;
}

/* En pantallas con hueco de sobra, cartas cuadradas de tamaño fijo (300x300)
   en vez de un porcentaje fluido con medidas poco "redondas". En pantallas
   más estrechas se mantiene el grid fluido de arriba para no desbordar. */
@media (min-width: 1040px) {
  .plan-grid {
    grid-template-columns: repeat(3, 300px);
    justify-content: center;
  }

  .flip-card {
    width: 300px;
    height: 300px;
    aspect-ratio: auto;
  }
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-visible .flip-card-inner,
.flip-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem;
}

.flip-card-front {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(58, 22, 8, 0.15);
  gap: 0.2rem;
  overflow: hidden;
}

.flip-card-front .plan-icon {
  font-size: 1.8rem;
}

.plan-word {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #3a1608;
  line-height: 1.2;
}

/* Esquina doblada: sugiere "página que se gira" para que se entienda que
   la carta tiene algo detrás, sin depender solo del hover para descubrirlo. */
.flip-card-front::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 38px 38px 0;
  border-color: transparent rgba(255, 250, 240, 0.95) transparent transparent;
  filter: drop-shadow(-1px 2px 2px rgba(58, 22, 8, 0.35));
  transition: transform 0.25s ease;
}

.flip-card-front::after {
  content: "↻";
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3a1608;
  opacity: 0.85;
}

.flip-card:hover .flip-card-front::before,
.flip-card:focus-visible .flip-card-front::before {
  transform: scale(1.2);
}

.flip-card-mystery .flip-card-front::before,
.flip-card-mystery .flip-card-front::after {
  display: none;
}

.flip-card-back {
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 200px rgba(11, 16, 36, 0.08);
}

.plan-tagline {
  font-weight: 800;
  color: #b3261e !important;
  font-size: 1.3rem;
  margin-top: 2rem;
}

/* Carta central "Alto secreto": bloque interrogante estilo Super Mario en la
   cara frontal, Chiquito celebrando el 40 al girarla. Ambas son ilustraciones
   propias (no fotos), por eso no llevan filtro/tinte encima. */
.flip-card-front-mystery {
  background-size: cover;
  background-position: center;
  border: none;
  animation: mystery-pulse 2.6s ease-in-out infinite;
}

@keyframes mystery-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.flip-card-mystery .flip-card-back {
  box-shadow: none;
}

.flip-card-mystery .flip-card-back-chiquito {
  background-size: cover;
  background-position: center;
}

@media (max-width: 640px) {
  .plan-grid {
    gap: 0.6rem;
  }

  .flip-card-front .plan-icon {
    font-size: 1.4rem;
  }

  .plan-word {
    font-size: 0.8rem;
  }
}

/* Logistica */
.panel-logistica h2 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
}

.logistica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  text-align: left;
}

.logistica-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.logistica-item:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
}

.logistica-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.5rem;
}

.logistica-item h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gold);
}

.logistica-item p {
  margin: 0;
  color: var(--color-text-muted);
}

/* RSVP */
.panel-rsvp {
  padding-bottom: 8rem;
}

.panel-rsvp h2 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
}

.panel-rsvp p {
  color: var(--color-text-muted);
}

.form-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.35);
  margin-top: 1.75rem;
}

.form-wrapper iframe {
  display: block;
  border: none;
}

.form-fallback {
  font-size: 0.9rem;
  margin-top: 1rem;
  opacity: 0.8;
}

/* ---------- Floaties ---------- */

.floaty {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.5;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  will-change: transform;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  color: rgba(255, 248, 236, 0.55);
  font-size: 0.9rem;
}

/* ---------- Confeti (ráfaga al pulsar "Yo me apunto") ---------- */

.confetti-piece {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 14px;
  z-index: 200;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  to {
    transform: translate(var(--sway, 0px), 105vh) rotate(720deg);
    opacity: 0.9;
  }
}

/* ---------- Scroll reveal (GSAP-driven) ---------- */

.reveal-item {
  opacity: 0;
  transform: translateY(36px);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .floaty,
  .btn-primary,
  .hero-scroll-cue,
  .blob,
  .sky-cloud {
    animation: none !important;
  }

  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .panel {
    padding: 5rem 1.25rem;
  }

  .floaty {
    font-size: 1.6rem;
  }

  .blob {
    filter: blur(60px);
  }
}