:root {
  /* Paleta de colores */
  --blanco-encalado: #F8F6F1;
  --turquesa-cristalino: #4FC3C8;
  --verde-pino: #2F4F3E;
  --arena-dorada: #D9B981;
  --naranja-arcilla: #C1622A;

  /* Tipografía */
  --font-heading: 'Marcellus', serif;
  --font-body: 'Montserrat', sans-serif;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--blanco-encalado);
  color: var(--verde-pino);
}

/* ---------- Header / Hero ---------- */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 22% 24%, rgba(79, 195, 200, 0.10), transparent 48%),
    radial-gradient(circle at 80% 26%, rgba(217, 185, 129, 0.12), transparent 48%),
    linear-gradient(to bottom, #F8F6F1 0%, #F3F1EA 100%);
  position: relative;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero__logo {
  display: block;
  width: clamp(170px, 32vw, 300px);
  height: auto;
  margin: 0 auto 1.5rem;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.9s ease 0.15s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  /* Capa propia en la GPU: la animación no depende del hilo principal
     (si no, al escalar la imagen se redibuja en cada fotograma y da tirones) */
  will-change: opacity, transform;
  backface-visibility: hidden;
}

body.is-opened .hero__logo {
  opacity: 1;
  transform: scale(1);
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1.25rem;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.5rem);
  color: var(--verde-pino);
  letter-spacing: 0.02em;
}

/* Botón "Confirmar asistencia" bajo el contador */
.hero__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 2.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blanco-encalado);
  background: var(--verde-pino);
  border: 1px solid var(--verde-pino);
  border-radius: 40px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.hero__cta:hover {
  background: #26402f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 79, 62, 0.22);
}

.hero__cta-note {
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(47, 79, 62, 0.7);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Reveal on scroll (izquierda a derecha) ---------- */

.reveal {
  display: inline-block;
}

.reveal-text {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.reveal.is-visible .reveal-text {
  clip-path: inset(0 0 0 0);
}

.divider {
  width: 90px;
  height: 2px;
  background: var(--turquesa-cristalino);
  margin: 1.75rem auto 0;
  position: relative;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--naranja-arcilla);
  transform: translateY(-50%);
}

.divider::before { left: -14px; }
.divider::after { right: -14px; }

/* ---------- Countdown ---------- */

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  margin-top: 3rem;
}

.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(68px, 18vw, 96px);
  aspect-ratio: 1;
  padding: 0 0.2rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--arena-dorada);
  border-radius: 6px;
  backdrop-filter: blur(2px);
}

.countdown__number {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 400;
  color: var(--naranja-arcilla);
  line-height: 1;
}

.countdown__label {
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 2.1vw, 0.65rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-pino);
  white-space: nowrap;
}

/* ---------- Nuestra historia (línea de tiempo scroll-scrubbed) ---------- */

.historia {
  position: relative;
  /* Intro + un tramo generoso por capítulo para revelar título, texto e imagen */
  height: 1600vh;
}

.historia__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(79, 195, 200, 0.10), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(217, 185, 129, 0.16), transparent 55%),
    var(--blanco-encalado);
}

/* Intro: título de la sección que aparece y se desvanece */
.historia__intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  pointer-events: none;
}

.historia__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1.25rem;
}

.historia__eyebrow .word,
.historia__title .word {
  opacity: 0.15;
}

.historia__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  color: var(--verde-pino);
  letter-spacing: 0.02em;
}

/* Escenario donde los capítulos se cruzan */
.historia__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  height: 100%;
}

.historia__chapter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2rem, 6vw, 6rem);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}

.historia__chapter[data-side="right"] {
  flex-direction: row-reverse;
}

.historia__media {
  position: relative;
  flex: 0 1 260px;
  width: min(42vw, 260px);
  max-width: 260px;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--arena-dorada);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(79, 195, 200, 0.14), rgba(217, 185, 129, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.historia__media:has(.historia__media-img) {
  flex: 0 0 auto;
  width: min(69vw, 604px);
  max-width: 604px;
  aspect-ratio: 4 / 3;
  height: auto;
  border: none;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.historia__media-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  padding: 0;
  opacity: 0;
  filter: blur(12px) saturate(0.8);
  transform: scale(1.02);
  will-change: opacity, filter, transform;
}

.historia__media:has(.historia__media-img) .historia__media-num {
  display: none;
}

.historia__media-num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  color: rgba(47, 79, 62, 0.22);
  position: relative;
  z-index: 1;
}

.historia__chapter-text {
  flex: 1 1 360px;
  min-width: 0;
}

.historia__chapter-date {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1rem;
}

.historia__chapter-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  color: var(--verde-pino);
  margin-bottom: 1.25rem;
}

.historia__chapter-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 440px;
  /* Ventana de scroll: el texto largo se desplaza con el scroll en vez de
     cortarse, así no hay que achicar las imágenes */
  max-height: clamp(8rem, 34vh, 20rem);
  overflow: hidden;
  position: relative;
  /* Un poco más de aire entre el título y el texto; el padding también evita
     que el degradado recorte la primera/última línea */
  padding: 1.5rem 0 1.25rem;
  /* Degradado suave arriba y abajo: el texto se desvanece al entrar/salir */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.historia__chapter-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.8;
  color: var(--verde-pino);
  max-width: 440px;
}

.historia__chapter-date .word,
.historia__chapter-title .word,
.historia__chapter-desc .word {
  opacity: 0;
}

/* Rail / línea de tiempo con marcadores */
.historia__rail {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  transform: translateX(-50%);
  width: min(62%, 440px);
  height: 12px;
  z-index: 4;
  transition: top 0.3s ease;
}

/* ---------- Indicador de scroll ("haz scroll para avanzar") ---------- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  /* Estado inicial: superpuesto y elevado sobre la sección */
  transform: translate(-50%, -24vh) scale(1.12);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 1;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

/* Tras el primer desliz baja a su posición final (abajo, centrado) */
.scroll-hint.is-lowered {
  transform: translate(-50%, 0) scale(1);
}

/* Tras el segundo desliz desaparece */
.scroll-hint.is-hidden {
  opacity: 0;
}


.scroll-hint__text {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  text-align: center;
}

.scroll-hint__mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--verde-pino);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  box-sizing: border-box;
  opacity: 0.85;
}

.scroll-hint__wheel {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--naranja-arcilla);
  animation: scroll-hint-wheel 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-wheel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* Dedo deslizando (móvil y tablet) */
.scroll-hint__finger {
  display: none;
  color: var(--verde-pino);
}

.scroll-hint__finger svg {
  width: 30px;
  height: 30px;
  display: block;
  animation: scroll-hint-swipe 1.5s ease-in-out infinite;
}

@keyframes scroll-hint-swipe {
  0%, 100% { transform: translateY(7px); }
  50% { transform: translateY(-7px); }
}

/* En dispositivos táctiles (móvil/tablet): dedo en vez de ratón */
@media (pointer: coarse) {
  .scroll-hint__mouse { display: none; }
  .scroll-hint__finger { display: block; }
}

.scroll-hint--light .scroll-hint__finger { color: var(--blanco-encalado); }

/* En la preboda, el aviso de deslizar va sobre una pequeña franja oscura para
   que se lea bien mientras el vídeo del fondo se ve nítido */
.preboda__sticky .scroll-hint {
  padding: 0.7rem 1.3rem 0.85rem;
  border-radius: 18px;
  background: rgba(6, 38, 46, 0.34);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Sin la elevación del modo scroll: aviso fijo abajo */
  transform: translateX(-50%);
}

/* En preboda se pulsa (no se desliza): mostramos el dedo con animación de
   toque en cualquier dispositivo */
.preboda__sticky .scroll-hint__mouse { display: none; }
.preboda__sticky .scroll-hint__finger { display: block; }
.preboda__sticky .scroll-hint__finger svg {
  animation: preboda-tap 1.5s ease-in-out infinite;
}

@keyframes preboda-tap {
  0%, 100% { transform: translateY(0) scale(1); }
  55% { transform: translateY(3px) scale(0.88); }
}

@media (prefers-reduced-motion: reduce) {
  .preboda__sticky .scroll-hint__finger svg { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__wheel,
  .scroll-hint__finger svg { animation: none; }
}

/* Variante clara para secciones de fondo oscuro (preboda) */
.scroll-hint--light .scroll-hint__text { color: var(--arena-dorada); }
.scroll-hint--light .scroll-hint__mouse {
  border-color: var(--blanco-encalado);
  opacity: 0.95;
}
.scroll-hint--light .scroll-hint__wheel { background: var(--blanco-encalado); }

.historia__rail-track,
.historia__rail-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  transform: translateY(-50%);
}

.historia__rail-track {
  width: 100%;
  background: rgba(47, 79, 62, 0.2);
}

.historia__rail-fill {
  width: 0;
  background: var(--turquesa-cristalino);
  transition: width 0.2s linear;
}

.historia__rail-dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.historia__rail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blanco-encalado);
  border: 1px solid var(--arena-dorada);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.historia__rail-dot.is-active {
  background: var(--naranja-arcilla);
  border-color: var(--naranja-arcilla);
  transform: scale(1.35);
}

@media (max-width: 900px) {
  .historia__chapter {
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.1rem;
    /* Margen superior amplio para que la imagen no quede bajo el botón
       fijo "Volver a la invitación" */
    padding: 4.25rem 2rem 1.75rem;
    text-align: center;
  }

  .historia__chapter[data-side="right"] {
    flex-direction: column;
  }

  .historia__media {
    flex: 0 0 auto;
    width: 48%;
    max-width: 160px;
  }

  .historia__media:has(.historia__media-img) {
    width: min(83vw, 301px);
    max-width: 301px;
    padding: 0;
  }

  .historia__media-img {
    max-width: none;
    max-height: none;
  }

  .historia__chapter-text {
    flex: 0 0 auto;
  }

  /* Texto más compacto en móvil para dejar hueco a la línea de tiempo */
  .historia__chapter-title {
    margin-bottom: 0.75rem;
  }

  .historia__chapter-body {
    gap: 0.6rem;
  }

  .historia__chapter-desc {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .historia__chapter-body,
  .historia__chapter-desc {
    margin: 0 auto;
  }
}

/* ---------- Story / Video (scroll-scrubbed) ---------- */

.story {
  position: relative;
  height: 250vh;
}

.story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2rem, 6vw, 6rem);
  background: var(--blanco-encalado);
  overflow: hidden;
}

.story__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) sepia(0.1) brightness(1.05);
}

.story__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Fundido superior e inferior hacia el crema: sin corte recto con las
       secciones vecinas (inicio arriba, día y lugar abajo) */
    linear-gradient(to bottom,
      var(--blanco-encalado) 0%,
      rgba(248, 246, 241, 0) 20%,
      rgba(248, 246, 241, 0) 80%,
      var(--blanco-encalado) 100%),
    radial-gradient(circle at 15% 85%, rgba(217, 185, 129, 0.16), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(79, 195, 200, 0.12), transparent 55%),
    /* Velo crema: antes al 92% tapaba casi por completo la foto de fondo */
    rgba(248, 246, 241, 0.7);
  pointer-events: none;
}

.story__text {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  /* Halo crema local: al bajar el velo del fondo, el texto perdía contraste.
     Este degradado da legibilidad justo detrás del texto y se funde a los
     lados (sin caja dura), dejando el resto del fondo visible. */
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.4rem, 3.2vw, 2.4rem);
  border-radius: 20px;
  background: radial-gradient(115% 108% at 50% 45%,
    rgba(248, 246, 241, 0.8) 0%,
    rgba(248, 246, 241, 0.6) 50%,
    rgba(248, 246, 241, 0) 100%);
}

.story__eyebrow,
.story__title,
.story__description {
  /* Sombra crema algo más marcada: al bajar la opacidad del halo, mantiene
     el texto legible separándolo de la foto sin necesidad de tapar el fondo. */
  text-shadow: 0 1px 10px rgba(248, 246, 241, 0.95), 0 0 2px rgba(248, 246, 241, 0.9);
}

.story__eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1rem;
}

.story__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  color: var(--verde-pino);
  margin-bottom: 1.5rem;
}

.story__description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.8;
  color: var(--verde-pino);
  max-width: 520px;
}

.story__description .word {
  opacity: 0.15;
}

/* En "Dónde", eyebrow y título aparecen de golpe al entrar (como el "Cuándo"),
   no palabra a palabra con el scroll */
.story__eyebrow,
.story__title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.story.is-in .story__eyebrow,
.story.is-in .story__title {
  opacity: 1;
  transform: none;
}

.story__video-wrap {
  position: relative;
  flex: 1 1 560px;
  max-width: 745px;
  aspect-ratio: 16 / 9;
}

.story__video-wrap::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: radial-gradient(ellipse at center, rgba(248, 246, 241, 0.8) 0%, rgba(248, 246, 241, 0.45) 55%, transparent 75%);
}

.story__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* El vídeo de la finca tiene fondo de papel pergamino (gris cálido), no blanco.
   Lo aclaramos a blanco para que "multiply" lo elimine por completo y quede
   integrado sobre la foto, igual que el mapa de Menorca (que ya es blanco).
   Además difuminamos sus cuatro bordes (máscara en degradado) para que el
   rectángulo del vídeo no se marque y se funda con el fondo. */
#escenario .story__video {
  /* Solo aclarado del fondo pergamino a blanco: el "multiply" lo convierte en
     la foto (blanco x foto = foto), así que el dibujo se integra SIN máscara.
     Quitar la máscara elimina el repintado por fotograma que causaba el
     parpadeo (igual que el mapa de Menorca, que no lleva máscara y no parpadea). */
  filter: brightness(1.2) contrast(1.9);
  /* Red de seguridad: si un salto muestra un fotograma en blanco, este fondo
     blanco se funde con la foto en vez de dar un destello. */
  background: #fff;
}

/* El dibujo de la finca, un poco más grande para cuadrar con el bloque de texto */
#escenario .story__video-wrap {
  flex-basis: 620px;
  max-width: 600px;
}

@media (max-width: 900px) {
  .story__sticky {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 2rem;
  }

  .story__description {
    margin: 0 auto;
  }

  .story__video-wrap {
    width: 100%;
    max-width: 505px;
  }
}

/* ---------- Preboda (scroll-scrubbed) ---------- */

.preboda {
  position: relative;
  min-height: 100vh;
}

.preboda__sticky {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Tono del agua del vídeo, como respaldo mientras carga */
  background: linear-gradient(to bottom, var(--blanco-encalado) 0%, #1f7a8c 40%);
  overflow: hidden;
}

/* Antes de pulsar, indicamos que es interactivo */
.preboda:not(.is-revealed) .preboda__sticky {
  cursor: pointer;
}

.preboda__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vídeo nítido en bucle */
  filter: saturate(1.05) brightness(0.92);
  /* El archivo trae barras blancas (~10%) arriba y abajo; este zoom las
     recorta para que solo se vea el contenido, a todo el fondo */
  transform: scale(1.32);
}

.preboda__video-overlay {
  position: absolute;
  inset: 0;
  /* El vídeo cubre todo el fondo; oscurecido uniforme (sin franjas). Empieza
     transparente (vídeo nítido) y aparece al deslizar, controlado por JS. */
  background: rgba(6, 38, 46, 0.3);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

/* Al pulsar: aparece el oscurecido y el contenido; se oculta el aviso */
.preboda.is-revealed .preboda__video-overlay {
  opacity: 1;
}
.preboda.is-revealed .preboda__content {
  opacity: 1;
  transform: none;
}
.preboda.is-revealed .scroll-hint {
  opacity: 0;
  pointer-events: none;
}

.preboda__content {
  position: relative;
  max-width: 560px;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  text-align: left;
  text-shadow: 0 1px 14px rgba(7, 35, 43, 0.5);
  /* Oculto hasta pulsar; aparece de golpe con una transición tipo zoom */
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.preboda__eyebrow .word,
.preboda__title .word,
.preboda__description .word,
.preboda__detail-label .word,
.preboda__detail-value .word,
.preboda__recommendations-title .word,
.preboda__recommendation-label .word,
.preboda__recommendation-text .word {
  opacity: 0.15;
}

.preboda__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--arena-dorada);
  margin-bottom: 1rem;
}

.preboda__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  color: var(--blanco-encalado);
  letter-spacing: 0.02em;
}

.preboda__content .divider {
  margin-left: 0;
  margin-top: 1.25rem;
}

.preboda__description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  color: rgba(248, 246, 241, 0.85);
  max-width: 480px;
  margin: 1.1rem 0 1.25rem;
}

.preboda__details {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.preboda__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 130px;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(217, 185, 129, 0.5);
}

.preboda__detail-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arena-dorada);
}

.preboda__detail-value {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--blanco-encalado);
}

.preboda__detail-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.62rem;
  line-height: 1.35;
  color: rgba(248, 246, 241, 0.72);
  margin-top: 0.35rem;
  max-width: 150px;
}

/* Vestimenta: bloque destacado y prioritario (todos de blanco) */
.preboda__dresscode {
  margin: 1.6rem 0 0.5rem;
  padding: 0.95rem 1.3rem 1.05rem;
  border: 1px solid rgba(217, 185, 129, 0.65);
  border-radius: 12px;
  background: rgba(6, 38, 46, 0.4);
  text-align: center;
}

.preboda__dresscode-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--arena-dorada);
  margin-bottom: 0.5rem;
}

.preboda__dresscode-text {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3.6vw, 1.75rem);
  color: var(--blanco-encalado);
  line-height: 1.25;
}

.preboda__dresscode-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  color: rgba(248, 246, 241, 0.85);
  margin-top: 0.5rem;
}

/* "Próximamente más información" bajo el recuadro de vestimenta */
.preboda__coming {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: rgba(248, 246, 241, 0.8);
}

.preboda__recommendations {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(217, 185, 129, 0.35);
}

.preboda__recommendations-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--arena-dorada);
  margin-bottom: 0.65rem;
}

.preboda__recommendation-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.75rem;
}

.preboda__recommendation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.preboda__recommendation-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(217, 185, 129, 0.55);
  background: rgba(248, 246, 241, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arena-dorada);
  opacity: 0.15;
}

.preboda__recommendation-icon svg {
  width: 20px;
  height: 20px;
}

@keyframes preboda-sun-spin {
  to { transform: rotate(360deg); }
}

@keyframes preboda-shirt-sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.preboda__recommendation-icon--sun svg {
  transform-origin: 50% 50%;
  animation: preboda-sun-spin 16s linear infinite;
}

.preboda__recommendation-icon--shirt svg {
  transform-origin: 50% 15%;
  animation: preboda-shirt-sway 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .preboda__recommendation-icon--sun svg,
  .preboda__recommendation-icon--shirt svg {
    animation: none;
  }
}

.preboda__recommendation-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(248, 246, 241, 0.8);
}

.preboda__recommendation-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(248, 246, 241, 0.85);
  max-width: 220px;
}

@media (max-width: 680px) {
  .preboda__sticky {
    justify-content: center;
    padding: 1rem;
  }

  /* En móvil el recorte es muy vertical; centramos el encuadre sobre el
     catamarán (que está en la parte izquierda del vídeo) */
  .preboda__video {
    object-position: 30% center;
  }

  /* El aviso de pulsar, algo más arriba para que no quede pegado al borde */
  .preboda__sticky .scroll-hint {
    bottom: 12vh;
  }

  .preboda__content {
    max-width: 100%;
    text-align: center;
    padding: 0.5rem 1.25rem;
  }

  .preboda__eyebrow {
    margin-bottom: 0.5rem;
  }

  .preboda__title {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  }

  .preboda__content .divider {
    margin-left: auto;
    margin-top: 0.75rem;
  }

  .preboda__description {
    margin: 0.85rem auto 1rem;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .preboda__details {
    justify-content: center;
    row-gap: 0.75rem;
  }

  .preboda__dresscode {
    margin: 1rem 0 0.25rem;
    padding: 0.75rem 1.1rem 0.85rem;
  }

  .preboda__dresscode-text {
    font-size: 1.3rem;
  }

  .preboda__dresscode-note {
    font-size: 0.76rem;
  }
}

/* ---------- Sobre / apertura tipo invitación ---------- */

body.is-sealed {
  overflow: hidden;
}

/* Visitas posteriores: el sobre no se muestra en absoluto */
.skip-envelope .envelope-overlay {
  display: none;
}

.envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(217, 185, 129, 0.20), transparent 62%),
    var(--verde-pino);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.envelope-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope {
  position: relative;
  width: min(82vw, 380px);
  aspect-ratio: 3 / 2;
  perspective: 1400px;
}

.envelope__shadow {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #efe7d6, #ded1b6);
  border-radius: 10px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.envelope__letter {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 86%;
  height: 84%;
  /* Sin fondo ni sombra: al abrirse solo se ve el logo (PNG transparente),
     nunca un rectángulo de papel blanco detrás del dibujo. */
  background: transparent;
  border-radius: 4px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  z-index: 2;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    background-color 0.6s ease 0.3s,
    box-shadow 0.6s ease 0.3s;
}

.envelope__letter-logo {
  height: 86%;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  /* El logotipo crece al abrir el sobre: en capa propia para que sea fluido */
  will-change: transform;
  backface-visibility: hidden;
}

/* Frente del sobre: rectángulo totalmente opaco (oculta la carta por completo) */
.envelope__pocket {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #e9dfc8, #d7c8aa);
  border-radius: 10px;
  z-index: 3;
  overflow: hidden;
}

/* Costuras diagonales del sobre (esquinas inferiores hacia el centro) */
.envelope__pocket::before,
.envelope__pocket::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 62%;
  height: 1px;
  background: rgba(120, 96, 58, 0.22);
  transform-origin: bottom;
}

.envelope__pocket::before {
  left: 0;
  transform: rotate(-38deg);
  transform-origin: bottom left;
}

.envelope__pocket::after {
  right: 0;
  transform: rotate(38deg);
  transform-origin: bottom right;
}

.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 58%;
  background: linear-gradient(160deg, #e7dcc2, #d8c9a8);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 0.9s ease 0.15s;
  backface-visibility: hidden;
  border-radius: 10px 10px 0 0;
  filter: drop-shadow(0 4px 4px rgba(90, 70, 40, 0.18));
  z-index: 4;
}

.envelope__seal {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 38% 34%, #b5322b, #7c1d1a 68%, #5c1310);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.2), inset 0 -3px 8px rgba(0, 0, 0, 0.45);
  z-index: 5;
  color: rgba(255, 224, 204, 0.9);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.envelope__seal svg {
  width: 58%;
  height: 58%;
}

.envelope__seal-emblem {
  fill: rgba(255, 222, 202, 0.88);
}

.envelope__seal:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.envelope.is-opening .envelope__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3) rotate(38deg);
}

.envelope.is-opening .envelope__flap {
  transform: rotateX(178deg);
}

.envelope.is-opening .envelope__letter {
  z-index: 6;
  /* El papel se disuelve y deja solo el logotipo */
  background-color: rgba(251, 249, 244, 0);
  box-shadow: none;
  transform: translateY(-46%) scale(1.04);
}

/* El logotipo crece: enlaza con el logo grande del hero */
.envelope.is-opening .envelope__letter-logo {
  transform: scale(1.5);
}

.envelope__hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(248, 246, 241, 0.75);
  animation: envelope-hint 2s ease-in-out infinite;
}

.envelope.is-opening ~ .envelope__hint {
  opacity: 0;
  animation: none;
}

@keyframes envelope-hint {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

/* ---------- Índice: mapa del tesoro ---------- */

.treasure {
  position: fixed;
  top: 50%;
  right: clamp(0.5rem, 2vw, 1.6rem);
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

body.is-opened .treasure {
  opacity: 1;
  pointer-events: auto;
}

.treasure__compass {
  width: 22px;
  height: 22px;
  color: var(--arena-dorada);
  opacity: 0.85;
}

.treasure__compass svg {
  width: 100%;
  height: 100%;
}

.treasure__track {
  position: relative;
  width: 34px;
  height: min(56vh, 440px);
}

.treasure__base,
.treasure__fill {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  background-repeat: repeat-y;
  background-size: 2px 9px;
}

.treasure__base {
  height: 100%;
  background-image: linear-gradient(var(--arena-dorada) 45%, transparent 0);
  opacity: 0.55;
}

.treasure__fill {
  height: 0;
  background-image: linear-gradient(var(--naranja-arcilla) 45%, transparent 0);
}

.treasure__traveler {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--naranja-arcilla);
  box-shadow: 0 0 0 4px rgba(193, 98, 42, 0.2);
  z-index: 3;
}

.treasure__point {
  position: absolute;
  left: 50%;
  top: var(--pos, 0%);
  transform: translate(-50%, -50%);
  border: none;
  background: none;
  padding: 6px;
  cursor: pointer;
  z-index: 2;
}

.treasure__marker {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blanco-encalado);
  border: 1.5px solid var(--arena-dorada);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.treasure__point.is-active .treasure__marker {
  background: var(--naranja-arcilla);
  border-color: var(--naranja-arcilla);
  transform: scale(1.4);
}

/* Marcador final: "X marca el tesoro" */
.treasure__point--x .treasure__marker {
  position: relative;
  border: none;
  background: transparent;
}

.treasure__point--x .treasure__marker::before,
.treasure__point--x .treasure__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  background: var(--arena-dorada);
  transition: background-color 0.3s ease;
}

.treasure__point--x .treasure__marker::before { transform: translate(-50%, -50%) rotate(45deg); }
.treasure__point--x .treasure__marker::after { transform: translate(-50%, -50%) rotate(-45deg); }

.treasure__point--x.is-active .treasure__marker { transform: scale(1.25); }
.treasure__point--x.is-active .treasure__marker::before,
.treasure__point--x.is-active .treasure__marker::after { background: var(--naranja-arcilla); }

.treasure__label {
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-pino);
  background: rgba(248, 246, 241, 0.92);
  padding: 0.28rem 0.55rem;
  border-radius: 4px;
  border: 1px solid rgba(217, 185, 129, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.treasure__point:hover .treasure__label,
.treasure__point:focus-visible .treasure__label,
.treasure__point.is-active .treasure__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
  .treasure {
    right: 0.35rem;
    gap: 0.5rem;
  }

  .treasure__compass {
    width: 16px;
    height: 16px;
  }

  .treasure__track {
    width: 26px;
    height: min(52vh, 380px);
  }

  .treasure__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope__flap,
  .envelope__letter,
  .envelope__seal {
    transition-duration: 0.3s;
  }
  .envelope__hint {
    animation: none;
  }
}

/* ---------- Boda: intro/teaser en la landing ---------- */

.intro-card {
  /* Bandas más compactas: antes cada una ocupaba 100vh y dejaba casi un
     viewport de hueco entre el texto de una sección y el de la siguiente */
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 7vh, 5rem) 2rem;
  /* Base clara; el degradado continuo entre secciones se define por id */
  background: linear-gradient(to bottom, #F3F1EA 0%, #EFF1EC 100%);
}

/* Degradado continuo de la landing: el final de cada sección es el
   inicio de la siguiente, así no hay ningún corte plano al pasar. */
#historia.intro-card { background: linear-gradient(to bottom, #F3F1EA 0%, #EFF1EC 100%); }
#boda.intro-card     { background: linear-gradient(to bottom, #EFF1EC 0%, #E7EDE9 100%); }
#preboda.intro-card  { background: linear-gradient(to bottom, #E7EDE9 0%, #E1EAE6 100%); }
#informacion.intro-card { background: linear-gradient(to bottom, #E1EAE6 0%, #E9EFE9 100%); }

.intro-card__content {
  /* Fluido: aprovecha el ancho en escritorio sin pegarse a los bordes en móvil */
  width: 100%;
  max-width: min(90vw, 760px);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-card__content.is-in {
  opacity: 1;
  transform: none;
}

.intro-card__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1.25rem;
}

.intro-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5rem);
  color: var(--verde-pino);
  letter-spacing: 0.02em;
}

.intro-card__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
  color: var(--verde-pino);
  max-width: 660px;
  margin: 1.75rem auto 0;
}

.intro-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
  padding: 0.9rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blanco-encalado);
  background: var(--verde-pino);
  border: 1px solid var(--verde-pino);
  border-radius: 40px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.intro-card__cta:hover {
  background: transparent;
  color: var(--verde-pino);
  transform: translateY(-2px);
}

.intro-card__cta-arrow {
  transition: transform 0.3s ease;
}

.intro-card__cta:hover .intro-card__cta-arrow {
  transform: translateX(4px);
}

/* ---------- Formulario RSVP ---------- */

.formulario {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  /* Claro y continuo con el resto de secciones, para que no destaque el cambio */
  background: linear-gradient(to bottom, #E9EFE9 0%, #EDF2ED 100%);
  color: var(--verde-pino);
  display: flex;
  justify-content: center;
}

.formulario__inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
}

.formulario__eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1rem;
}

.formulario__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--verde-pino);
}

.formulario__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: rgba(47, 79, 62, 0.8);
  max-width: 520px;
  margin: 1.5rem auto 0;
}

.formulario__req {
  color: var(--naranja-arcilla);
  margin-left: 0.15rem;
  font-weight: 500;
}

.formulario__req-hint {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8rem;
  color: rgba(47, 79, 62, 0.7);
  margin: 0.6rem auto 0;
}

.formulario__form {
  margin-top: 2.75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Bloque de detalles que aparece solo si el invitado asiste a la boda */
.formulario__conditional {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Cada bloque agrupa una pregunta con los campos que genera justo debajo */
.formulario__block {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Un .formulario__field usa "flex: 1 1 200px" pensado para ir dentro de una
   fila (ahí los 200px son el ANCHO). Si cuelga directo de un contenedor en
   columna, esos 200px pasarían a ser ALTO y dejarían un hueco enorme. */
.formulario__conditional > .formulario__field,
.formulario__block > .formulario__field {
  flex: 0 0 auto;
}

/* "hidden" debe ganar a los display:flex de las filas y contenedores */
.formulario__row[hidden],
.formulario__people[hidden],
.formulario__conditional[hidden],
.formulario__block[hidden] {
  display: none;
}

/* Bloques de acompañantes / niños generados según el número indicado */
.formulario__people {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.formulario__person {
  /* Columna con separación: el correo va en su propia fila y sin esto
     quedaba pegado a los apellidos */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid rgba(217, 185, 129, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}

.formulario__person-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 0.8rem;
}

/* Campos cortos (números): que no se estiren a todo el ancho en escritorio */
.formulario__field--narrow {
  flex: 0 1 220px;
  max-width: 220px;
}


/* reCAPTCHA centrado */
.formulario__recaptcha {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.formulario__group {
  border: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(217, 185, 129, 0.5);
  padding-top: 1.5rem;
}

.formulario__group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.formulario__legend {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--verde-pino);
  margin-bottom: 1rem;
  padding: 0;
}

.formulario__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Separación entre filas consecutivas de un mismo grupo (p. ej. en "Tus datos",
   la fila del email quedaba pegada a la de nombre/apellidos). */
.formulario__group > .formulario__row + .formulario__row {
  margin-top: 1.3rem;
}

.formulario__field {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.formulario__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 79, 62, 0.7);
}

.formulario__field input,
.formulario__field select,
.formulario__field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--verde-pino);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(217, 185, 129, 0.6);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.formulario__field textarea {
  resize: vertical;
}

.formulario__field input::placeholder,
.formulario__field textarea::placeholder {
  color: rgba(47, 79, 62, 0.4);
}

.formulario__field select option {
  color: #333;
}

.formulario__field input:focus,
.formulario__field select:focus,
.formulario__field textarea:focus {
  outline: none;
  border-color: var(--naranja-arcilla);
  background: rgba(255, 255, 255, 0.85);
}

.formulario__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 0.4rem;
}

.formulario__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(47, 79, 62, 0.9);
  cursor: pointer;
}

.formulario__choice input {
  accent-color: var(--verde-pino);
  /* Los campos de texto llevan width:100%, pero un radio no debe estirarse:
     si lo hace, empuja su etiqueta y la parte en varias líneas. */
  width: auto;
  flex: 0 0 auto;
}

.formulario__submit {
  align-self: center;
  margin-top: 0.5rem;
  padding: 0.9rem 2.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blanco-encalado);
  background: var(--verde-pino);
  border: 1px solid var(--verde-pino);
  border-radius: 40px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.formulario__submit:hover {
  transform: translateY(-2px);
  background: transparent;
  color: var(--verde-pino);
}

.formulario__note {
  text-align: center;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--naranja-arcilla);
}

.formulario__note em {
  color: rgba(47, 79, 62, 0.6);
  font-style: italic;
}

.formulario__note.is-error {
  color: #b5322b;
}

/* ---------- Página de Boda (boda.html) ---------- */

.bodapage {
  background: var(--blanco-encalado);
}

.bodapage__back {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-pino);
  background: rgba(248, 246, 241, 0.85);
  border: 1px solid rgba(217, 185, 129, 0.5);
  padding: 0.5rem 0.95rem;
  border-radius: 40px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background-color 0.3s ease;
}

.bodapage__back:hover {
  background: rgba(248, 246, 241, 1);
}

.bodapage__hero {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 3rem;
  background:
    /* La parte inferior funde a crema puro para enlazar sin corte con "Nuestro rincón" */
    linear-gradient(to bottom, transparent 55%, var(--blanco-encalado) 100%),
    radial-gradient(circle at 22% 24%, rgba(79, 195, 200, 0.12), transparent 52%),
    radial-gradient(circle at 80% 28%, rgba(217, 185, 129, 0.16), transparent 52%),
    var(--blanco-encalado);
}

.bodapage__hero-content {
  width: 100%;
  max-width: min(90vw, 720px);
}

.bodapage__eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 1.25rem;
}

.bodapage__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--verde-pino);
}

.bodapage__hero-date {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  color: var(--naranja-arcilla);
  margin-top: 1.4rem;
}

.bodapage__hero-meta {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(47, 79, 62, 0.72);
  margin-top: 0.65rem;
}

.bodapage__hero-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
  color: var(--verde-pino);
  margin: 1.85rem auto 0;
  max-width: 480px;
}

.bodapage__section {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}

.bodapage__section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 0.75rem;
  text-align: center;
}

.bodapage__section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--verde-pino);
  text-align: center;
  margin-bottom: 2.5rem;
}

.bodapage__placeholder {
  border: 1px dashed rgba(217, 185, 129, 0.7);
  border-radius: 10px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: rgba(47, 79, 62, 0.55);
  font-family: var(--font-body);
  font-weight: 300;
  background: rgba(255, 255, 255, 0.4);
}

/* "Los detalles del día": rejilla de temas por confirmar */
.bodapage__soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(0.9rem, 2.5vw, 1.4rem);
  max-width: 760px;
  margin: 0 auto;
}

.bodapage__soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.9rem 1.4rem 1.6rem;
  border: 1px solid rgba(217, 185, 129, 0.55);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bodapage__soon-card:hover {
  transform: translateY(-4px);
  border-color: var(--arena-dorada);
  box-shadow: 0 10px 26px rgba(47, 79, 62, 0.1);
}

.bodapage__soon-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--naranja-arcilla);
  background: rgba(217, 185, 129, 0.16);
  margin-bottom: 0.15rem;
}

.bodapage__soon-icon svg {
  width: 24px;
  height: 24px;
}

.bodapage__soon-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--verde-pino);
}

.bodapage__soon-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(47, 79, 62, 0.72);
  margin: 0;
}

.bodapage__soon-tag {
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(217, 185, 129, 0.6);
  border-radius: 999px;
}

/* Planning: cronograma vertical */
.planning__list {
  list-style: none;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.planning__list::before {
  content: "";
  position: absolute;
  left: 90px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(217, 185, 129, 0.6);
}

.planning__item {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  position: relative;
}

.planning__time {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--naranja-arcilla);
  text-align: right;
}

.planning__label {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--verde-pino);
  position: relative;
  padding-left: 1.5rem;
}

.planning__label::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0.4em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blanco-encalado);
  border: 1.5px solid var(--arena-dorada);
}

/* Alojamiento: tarjetas */
.aloja__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.aloja__card {
  border: 1px solid rgba(217, 185, 129, 0.5);
  border-radius: 10px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.45);
}

.aloja__card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--verde-pino);
  margin-bottom: 0.5rem;
}

.aloja__card-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(47, 79, 62, 0.75);
}

.bodapage__dresscode {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--verde-pino);
}

@media (max-width: 680px) {
  .planning__list::before { left: 70px; }
  .planning__item { grid-template-columns: 60px 1fr; gap: 1rem; }
}

/* ---------- Boda: día y lugar (mapa) ---------- */

.bodapage__section--center {
  text-align: center;
}

.bodapage__venue-meta {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  color: rgba(47, 79, 62, 0.75);
  margin: -1.5rem 0 2rem;
}

/* Vídeo de la finca (dibujo a lápiz) en "El escenario" */
.bodapage__finca-video {
  max-width: 620px;
  margin: 0 auto 1.75rem;
}

.bodapage__finca-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.bodapage__map {
  position: relative;
  /* Más pequeño y elegante, centrado */
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(217, 185, 129, 0.55);
  box-shadow: 0 14px 34px rgba(47, 79, 62, 0.14);
}

.bodapage__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.bodapage__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  padding: 0.85rem 2rem;
  border-radius: 40px;
  background: var(--verde-pino);
  border: 1px solid var(--verde-pino);
  color: var(--blanco-encalado);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.bodapage__map-link:hover {
  background: transparent;
  color: var(--verde-pino);
  transform: translateY(-2px);
}

/* Recuadro para el dibujo de la finca (futuro vídeo) */
.bodapage__placeholder--art {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.7;
}

/* ---------- Autobús: mini formulario ---------- */

.bus-form {
  max-width: 560px;
  margin: 1.75rem auto 0;
  text-align: center;
}

.bus-form__question {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--verde-pino);
  margin-bottom: 1rem;
}

.bus-form__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.bus-option {
  cursor: pointer;
  border: 1px solid rgba(217, 185, 129, 0.7);
  border-radius: 40px;
  padding: 0.6rem 1.35rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--verde-pino);
  background: rgba(255, 255, 255, 0.45);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bus-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bus-option:hover {
  border-color: var(--arena-dorada);
}

.bus-option.is-selected {
  background: var(--verde-pino);
  color: var(--blanco-encalado);
  border-color: var(--verde-pino);
}

/* ---------- Peluquería y maquillaje: listado ---------- */

.recos {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reco {
  border: 1px solid rgba(217, 185, 129, 0.5);
  border-radius: 12px;
  padding: 1.35rem 1.6rem;
  background: rgba(255, 255, 255, 0.45);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reco:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(47, 79, 62, 0.12);
}

.reco__type {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--naranja-arcilla);
  margin-bottom: 0.35rem;
}

.reco__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--verde-pino);
  margin-bottom: 0.35rem;
}

.reco__note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(47, 79, 62, 0.75);
}

/* ---------- Toast / aviso "próximamente" ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(1rem);
  z-index: 3000;
  max-width: min(90vw, 420px);
  background: var(--verde-pino);
  color: var(--blanco-encalado);
  padding: 0.9rem 1.4rem;
  border-radius: 40px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(47, 79, 62, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Reveal genérico al hacer scroll ---------- */

.reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-in {
  opacity: 1;
  transform: none;
}

/* Cascada escalonada para listas */
.recos .reco:nth-child(2),
.aloja__grid .aloja__card:nth-child(2),
.planning__item:nth-child(2) { transition-delay: 0.08s; }
.recos .reco:nth-child(3),
.aloja__grid .aloja__card:nth-child(3),
.planning__item:nth-child(3) { transition-delay: 0.16s; }
.planning__item:nth-child(4) { transition-delay: 0.24s; }
.planning__item:nth-child(5) { transition-delay: 0.32s; }

/* ---------- Página de boda ---------- */
/* Cabecera: fundido de una vez al entrar */
.bodapage__hero-content > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.bodapage__hero-content.is-in > * {
  opacity: 1;
  transform: none;
}

.bodapage__hero-content.is-in > *:nth-child(2) { transition-delay: 0.1s; }
.bodapage__hero-content.is-in > *:nth-child(3) { transition-delay: 0.2s; }
.bodapage__hero-content.is-in > *:nth-child(4) { transition-delay: 0.3s; }
.bodapage__hero-content.is-in > *:nth-child(5) { transition-delay: 0.4s; }

/* Secciones: se descubren ligadas al scroll (opacidad y desplazamiento
   controlados por JS, como en "Dónde") */
.bodapage__section > * {
  opacity: 0;
}

/* ---------- Escritorio grande: que el contenido respire y llene la pantalla ---------- */
@media (min-width: 1400px) {
  .intro-card__content { max-width: 820px; }
  .intro-card__text { max-width: 720px; font-size: 1.2rem; }

  .bodapage__hero-content { max-width: 780px; }
  .bodapage__section { max-width: 1040px; }

  .formulario__inner { max-width: 780px; }

  .story__description,
  .historia__chapter-desc { max-width: 560px; }
  .historia__chapter-body { max-width: 560px; }
}

/* ---------- Formulario en móvil: que respire ---------- */
@media (max-width: 680px) {
  .formulario__form {
    gap: 2rem;
  }

  /* Al apilarse los campos, más aire vertical entre ellos */
  .formulario__row {
    gap: 1.35rem;
  }

  .formulario__field {
    gap: 0.55rem;
  }

  /* 16px evita que iOS haga zoom automático al tocar un campo */
  .formulario__field input,
  .formulario__field select,
  .formulario__field textarea {
    font-size: 16px;
    padding: 0.8rem 0.9rem;
  }

  .formulario__legend {
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
  }

  .formulario__group {
    padding-top: 1.8rem;
  }

  /* Opciones sí/no: más separadas y con mejor área táctil */
  .formulario__choices {
    gap: 1.5rem;
    padding-top: 0.55rem;
  }

  .formulario__choice {
    font-size: 0.95rem;
    padding: 0.2rem 0;
  }

  .formulario__person {
    padding: 1.2rem 1rem 1.3rem;
    /* Misma separación que entre nombre y apellidos */
    gap: 1.35rem;
  }

  /* Opciones sí/no: cada una en su línea. Con etiquetas largas se partían
     en varias líneas y el círculo quedaba centrado, descuadrando el texto. */
  .formulario__choices {
    flex-direction: column;
    gap: 0.9rem;
  }

  .formulario__choice {
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
  }

  .formulario__choice input {
    /* Alineado con la primera línea del texto */
    margin-top: 0.15em;
    flex: 0 0 auto;
  }

  .formulario__people {
    gap: 1.3rem;
  }

  .formulario__block {
    gap: 1.2rem;
  }

  .formulario__conditional {
    gap: 2rem;
  }

  .formulario__field--narrow {
    flex: 1 1 100%;
    max-width: 180px;
  }

  .formulario__recaptcha {
    margin-top: 1rem;
  }
}

/* El widget de reCAPTCHA mide 304px fijos: lo escalamos si no cabe */
@media (max-width: 350px) {
  .formulario__recaptcha .g-recaptcha {
    transform: scale(0.88);
    transform-origin: center;
  }
}

/* ============================================================
   REVISIÓN RESPONSIVE MÓVIL (toda la web)
   Las micro-etiquetas en mayúsculas resultaban ilegibles y
   desordenadas: 9-11px con mucho espaciado entre letras hacía
   que las palabras se partieran y descuadraran. Aquí se suben
   de tamaño y se reduce el tracking en pantallas pequeñas.
   ============================================================ */
@media (max-width: 680px) {
  /* --- Contador de la portada ---
     Las cajas reparten todo el ancho disponible (huecos más pequeños),
     así "Segundos" cabe holgado a un tamaño ya legible. */
  .countdown {
    width: 100%;
    gap: 0.5rem;
  }

  .countdown__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0;
  }

  .countdown__label {
    /* Escala con el ancho para que "Segundos" quepa también en 320px */
    font-size: clamp(0.55rem, 2.8vw, 0.66rem);
    letter-spacing: 0.03em;
    margin-top: 0.3rem;
  }

  /* --- Etiquetas del formulario --- */
  .formulario__label {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
  }

  .formulario__person-title {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  /* --- Enlace "Volver a la invitación": legible y bien pulsable --- */
  .bodapage__back {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    padding: 0.8rem 1.05rem;
  }

  /* --- Indicador de scroll --- */
  .scroll-hint__text {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  /* --- Tarjetas "Próximamente" de La Boda --- */
  .bodapage__soon-tag {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }

  .bodapage__soon-title {
    font-size: 1.2rem;
  }

  .bodapage__soon-text {
    font-size: 0.95rem;
  }

  /* --- Preboda: detalles y vestimenta --- */
  .preboda__detail-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }

  .preboda__dresscode-label {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
  }

  /* --- Eyebrows: el tracking ancho descuadra las palabras --- */
  .story__eyebrow,
  .intro-card__eyebrow,
  .bodapage__section-eyebrow,
  .preboda__eyebrow,
  .formulario__eyebrow {
    letter-spacing: 0.2em;
  }

  .bodapage__hero-meta {
    letter-spacing: 0.1em;
  }
}

/* ============================================================
   MÓVIL · Una sola imagen para "La Boda" + "Dónde"
   No se duplica la foto: se usa ÚNICAMENTE la de "Dónde". La
   sección sube y se mete bajo la franja inferior del hero, con
   el título por encima; así la misma imagen abarca las dos
   secciones y las agrupa. En escritorio el hero se queda igual.
   ============================================================ */
@media (max-width: 680px) {
  .bodapage__hero {
    /* El título va por encima de la foto (que asoma por debajo). El fondo es
       crema opaco donde está el texto y se vuelve transparente en la franja
       inferior (vacía) para dejar ver esa única imagen. */
    position: relative;
    z-index: 1;
    min-height: 58vh;
    padding-bottom: 5rem;
    background: linear-gradient(to bottom,
      var(--blanco-encalado) 0%,
      var(--blanco-encalado) 72%,
      rgba(248, 246, 241, 0.72) 86%,
      rgba(248, 246, 241, 0) 100%);
  }

  /* "Dónde" queda por detrás del título (z-index menor). NO se sube toda la
     sección (eso arrastraba el texto al hero); solo se extiende la foto. */
  #story {
    position: relative;
    z-index: 0;
  }

  /* Dejamos que la foto se salga por arriba del contenedor... */
  #story .story__sticky {
    overflow: visible;
  }

  /* ...y extendemos SOLO la foto (una sola) 15vh hacia arriba, hasta la franja
     inferior del hero. Sumamos esos 15vh a la altura para que siga cubriendo
     el viewport cuando la sección queda fijada. Texto y vídeo, en su sitio. */
  #story .story__bg-image {
    top: -15vh;
    height: calc(100% + 15vh);
  }

  /* El velo también se extiende para cubrir la parte que asoma, con poco crema
     arriba para que la foto se vea nítida junto al título. */
  #story .story__bg-overlay {
    top: -15vh;
    background:
      linear-gradient(to bottom,
        rgba(248, 246, 241, 0.9) 0%,
        rgba(248, 246, 241, 0.35) 12%,
        rgba(248, 246, 241, 0) 26%,
        rgba(248, 246, 241, 0) 82%,
        var(--blanco-encalado) 100%),
      radial-gradient(circle at 15% 85%, rgba(217, 185, 129, 0.16), transparent 55%),
      radial-gradient(circle at 85% 15%, rgba(79, 195, 200, 0.12), transparent 55%),
      rgba(248, 246, 241, 0.7);
  }
}

/* ---------- Portada (hero) en móvil ----------
   El logo (A & E con Shira) se veía pequeño y con demasiado hueco encima
   por el centrado vertical en 100vh. Lo agrandamos y subimos el contenido. */
@media (max-width: 680px) {
  .hero {
    /* El hero es flex en fila: el eje vertical lo controla align-items.
       Lo llevamos arriba (con algo de aire) para reducir el hueco sobre el logo. */
    align-items: flex-start;
    padding-top: 12vh;
  }

  .hero__logo {
    width: min(62vw, 250px);
    margin-bottom: 1.25rem;
  }
}

/* Indicador "Desliza para conocer más" del inicio: va en el flujo, como primer
   elemento ARRIBA del logo. Al hacer el primer scroll se desvanece (y como ya
   estás bajando, queda por encima del viewport). */
#heroScrollHint {
  position: static;
  transform: none;
  top: auto;
  bottom: auto;
  left: auto;
  gap: 0.3rem;
  margin: 0 auto 1.2rem;
}

/* Versión compacta para el inicio: solo el texto y una flechita animada
   (sin el ratón grande), para que quepa arriba sin empujar el contenido. */
#heroScrollHint .scroll-hint__mouse,
#heroScrollHint .scroll-hint__finger {
  display: none;
}

#heroScrollHint::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--verde-pino);
  border-bottom: 2px solid var(--verde-pino);
  transform: rotate(45deg);
  animation: hero-hint-bounce 1.8s ease-in-out infinite;
}

@keyframes hero-hint-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.45; }
  50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}

@media (max-width: 680px) {
  /* Menos margen superior porque ahora el indicador ocupa la parte de arriba */
  .hero {
    padding-top: 7vh;
  }
  #heroScrollHint .scroll-hint__text {
    font-size: 0.6rem;
  }
}