/* ============================================================
   SECTIONS — layout and one-off treatment per block of the page.
   ============================================================ */

/* ------------------------------------------------------------
   Portada (entry curtain)
   ------------------------------------------------------------ */
.portada {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  overflow-y: auto;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(170deg, #FFE1EE 0%, #FFEFD9 52%, #E4F3DF 100%);
  transition: opacity var(--dur-lenta) var(--ease-suave),
              visibility var(--dur-lenta);
}

.portada.saliendo { opacity: 0; visibility: hidden; }

.portada__escena { position: relative; }

.portada__flor { animation: flotarLento 4.5s ease-in-out infinite; }

/* ---------- Cartel de bienvenida colgado sobre el arco ---------- */
.portada__cartel {
  position: relative;
  width: min(340px, 82vw);
  padding-top: 40px;
  margin-bottom: -14px;   /* el cartel se solapa apenas con el arco */
  z-index: 2;
}

.portada__cuerdas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  height: 46px;
  overflow: visible;
}

.portada__placa {
  position: relative;
  padding: 16px 18px 18px;
  text-align: center;
  border-radius: 22px;
  border: 4px solid var(--madera-400);
  background-color: var(--madera-100);
  background-image:
    repeating-linear-gradient(90deg, rgba(169,127,78,.09) 0 1px, transparent 1px 7px),
    linear-gradient(var(--madera-100), var(--madera-200));
  box-shadow: 0 9px 0 var(--madera-300), 0 18px 30px rgba(140,105,70,.26);
  animation: colgar 5.5s ease-in-out infinite;
  --giro: 1deg;
  transform-origin: top center;
}

.portada__ala-flor {
  position: absolute;
  animation: flotar 5s ease-in-out infinite;
}

.portada__ala-flor:last-of-type { animation-delay: .8s; }

.portada__kicker {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-700);
}

.portada__nombre {
  margin-top: 2px;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 1;
  color: var(--acento);
  text-shadow: 0 3px 0 #FFFFFF, 0 6px 0 rgba(216,80,132,.18);
}

.portada__edad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-base);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--verde-800);
}

.portada__siete {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 0.9;
  color: var(--miel-600);
  -webkit-text-stroke: 4px #FFFFFF;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(233,166,30,.28);
}

/* "El jardín te está esperando" — ahora es el subtítulo / llamada. */
.portada__titulo {
  margin-top: var(--sp-4);
  font-size: var(--txt-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--acento-fuerte);
}

.portada__pie {
  margin-top: var(--sp-2);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

.portada__boton {
  padding: 15px 38px;
  border-radius: var(--r-full);
  background: linear-gradient(var(--verde-500), var(--verde-700));
  color: #FFF8EC;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-xl);
  box-shadow: 0 9px 0 var(--verde-900), 0 16px 26px rgba(45, 90, 55, 0.28);
  animation: pulso 2.1s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Columna principal
   ------------------------------------------------------------ */
.invitacion {
  position: relative;
  z-index: 10;
  max-width: var(--ancho-col);
  margin: 0 auto;
  background: var(--fondo);
  box-shadow: 0 0 70px rgba(180, 120, 90, 0.16);
}

.seccion { position: relative; padding: var(--sp-6) var(--sp-5); }
.seccion--sin-lados { padding-left: 0; padding-right: 0; }
.seccion--apretada { padding-top: var(--sp-2); }

/* Edge-to-edge sections still need their heading to keep a margin. */
.seccion--sin-lados > .titulo-seccion,
.seccion--sin-lados > .subtitulo-seccion,
.seccion--sin-lados > .itinerario__nota {
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: var(--sp-10) var(--sp-5) var(--sp-3);
  text-align: center;
  overflow: hidden;
  background-image: linear-gradient(#FFE3F0 0%, #FFF0E2 58%, #FFF8E6 100%);
}

.hero__cielo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 140px;
  opacity: 0.75;
}

.hero__contenido { position: relative; z-index: 2; }

.hero__numero {
  position: relative;
  width: 210px;
  height: 156px;
  margin: var(--sp-1) auto calc(var(--sp-2) * -1);
}

.hero__aura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__siete {
  position: relative;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: var(--txt-7xl);
  line-height: 156px;
  color: var(--rosa-600);
  -webkit-text-stroke: 8px var(--blanco);
  paint-order: stroke fill;
  text-shadow: 0 12px 0 rgba(216, 80, 132, 0.28), 0 22px 32px rgba(216, 80, 132, 0.26);
}

.hero__nombre {
  margin-top: var(--sp-2);
  font-size: var(--txt-5xl);
  color: var(--acento);
  text-shadow: 0 3px 0 var(--blanco);
}

.hero__lema {
  margin: var(--sp-3) auto 0;
  max-width: 310px;
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--tinta-2);
}

.hero__retrato {
  position: relative;
  width: min(286px, 74vw);
  aspect-ratio: 300 / 500;
  margin: var(--sp-5) auto 0;
}

.hero__corona {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: flotar 6s ease-in-out infinite;
}

/* ------------------------------------------------------------
   Datos + acciones
   ------------------------------------------------------------ */
.acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.mapa {
  margin-top: var(--sp-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 4px solid var(--blanco);
  box-shadow: var(--sombra-suave);
}

.mapa iframe { width: 100%; height: 190px; border: 0; display: block; }

/* ------------------------------------------------------------
   Cuenta regresiva
   ------------------------------------------------------------ */
.cuenta {
  margin-top: var(--sp-5);
  text-align: center;
  border-color: var(--blanco);
  background: linear-gradient(var(--rosa-100), var(--rosa-200));
  box-shadow: 0 9px 0 #F6D3E2, 0 16px 28px rgba(200, 120, 160, 0.16);
}

.cuenta__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-800);
}

/* ------------------------------------------------------------
   Galería
   ------------------------------------------------------------ */
.galeria__tira {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.galeria__tira::after {
  content: "";
  flex: 0 0 var(--sp-1);
}

/* ------------------------------------------------------------
   Itinerario
   ------------------------------------------------------------ */
.itinerario { background: linear-gradient(var(--fondo), var(--fondo-alt)); }

.itinerario__riel {
  position: relative;
  overflow-x: auto;
  padding: 0 var(--sp-5) var(--sp-5);
  scroll-snap-type: x proximity;
}

.itinerario__pista {
  position: relative;
  min-width: 900px;
  padding-top: 40px;
}

.itinerario__cuerda {
  position: absolute;
  left: 0;
  top: 8px;
  width: 100%;
  height: 44px;
  overflow: visible;
}

.itinerario__lista {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.itinerario__nota {
  margin-top: var(--sp-1);
  text-align: center;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   Regalos
   ------------------------------------------------------------ */
.regalos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.regalos__nota {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   RSVP
   ------------------------------------------------------------ */
.rsvp {
  position: relative;
  padding: var(--sp-10) var(--sp-5) var(--sp-10);
  overflow: hidden;
  background: linear-gradient(#FFE9F2, #FFF3E2);
}

.rsvp__cabecera { position: relative; z-index: 2; text-align: center; margin-bottom: var(--sp-6); }

.rsvp__titulo {
  font-size: var(--txt-3xl);
  line-height: 1.12;
  color: var(--acento);
  text-shadow: 0 2px 0 var(--blanco);
}

.rsvp__bajada {
  margin-top: var(--sp-2);
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--tinta-2);
}

.rsvp__bajada strong { color: var(--verde-800); }

.rsvp__caja { position: relative; z-index: 2; }

.rsvp__pie {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   Cierre
   ------------------------------------------------------------ */
.cierre {
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-10);
  background: linear-gradient(#FFF3E2, var(--verde-50));
}

.cierre__firma {
  margin-top: var(--sp-3);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--txt-xl);
  color: var(--rosa-900);
}

.cierre__nota {
  margin-top: var(--sp-2);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   Portal — la reja del jardín que abre la invitación.
   La misma curva de arco reaparece en el marco del retrato,
   para que entrar y ver a Serena sean el mismo gesto visual.
   ------------------------------------------------------------ */
.portal {
  position: relative;
  width: min(288px, 66vw);
  animation: llamar 4.2s ease-in-out infinite;
}

.portal__escena {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 26px rgba(150, 110, 120, 0.22));
}

/* Cada hoja gira sobre la bisagra que la une a su columna. El origen va
   en unidades del viewBox y no en palabras clave: `fill-box` mide la caja
   real del grupo (trazo incluido) y terminaba abriendo la reja al revés. */
.portal__hoja {
  transform-box: view-box;
  filter: drop-shadow(0 3px 4px rgba(150, 105, 120, 0.28));
  transition: transform 950ms var(--ease-suave),
              opacity 700ms var(--ease-suave) 200ms;
}

.portal__hoja--izq { transform-origin: 50px 280px; }
.portal__hoja--der { transform-origin: 270px 280px; }

.portal__sol {
  transform-box: fill-box;
  transform-origin: center;
  animation: respirar 5s ease-in-out infinite;
}

.portal__enredo {
  transform-box: fill-box;
  transform-origin: center top;
  animation: colgar 7.5s ease-in-out infinite;
  --giro: 1.2deg;
}

.portal__mariposa { transform-box: fill-box; }
.portal__mariposa--a { animation: portalVuelaA 7s ease-in-out infinite; }
.portal__mariposa--b { animation: portalVuelaB 9s ease-in-out infinite; }

/* --- al tocar: la reja se abre y la luz del jardín gana la pantalla --- */
.portada.abriendo .portal { animation: none; }

.portada.abriendo .portal__hoja--izq,
.portada.abriendo .portal__hoja--der {
  transform: scaleX(0.07);
  opacity: 0.3;
}

.portada.abriendo .portal__sol {
  animation: none;
  transform: scale(2.1);
  transition: transform 1.1s var(--ease-suave);
}

.portada.abriendo .portal__mariposa {
  animation: none;
  opacity: 0;
  transform: translate(150px, 250px) scale(.16);
  transition: transform 1s var(--ease-suave), opacity 1s var(--ease-suave);
}

.portada__texto,
.portada__cartel { transition: opacity 400ms var(--ease-suave); }
.portada.abriendo .portada__texto,
.portada.abriendo .portada__cartel,
.portada.abriendo .portada__boton { opacity: 0; }