/* =====================================================================
   00 — TOKENS, RESET Y UTILIDADES
   Agente "tokens". Único archivo con selectores globales (reset).
   El resto de los agentes solo puede escribir selectores con su prefijo.
   ===================================================================== */

:root{
  /* Color */
  /* Versión flores silvestres: papel marfil, tinta marrón cálida, acento bordó.
     (--oliva y --sobre-oliva conservan el nombre, pero ahora son el papel alternativo
     y su tinta: las secciones que antes eran verdes pasan a papel claro.) */
  --oliva:            #EEE6DA;
  --crema:            #F6F1E9;
  --crema-2:          #ECE4D8;
  --blush:            #F6F1E9;
  --tinta:            #4B3A30;
  --tinta-suave:      #7A685A;
  --sobre-oliva:      #4B3A30;
  --linea:            rgba(75,58,48,.7);
  --linea-suave:      rgba(75,58,48,.25);
  --linea-oliva:      rgba(75,58,48,.3);
  --bordo:            #6B2A33;
  --oro:              #A88B5A;

  /* Tipografía */
  --f-script:  'Pinyon Script', 'Apple Chancery', cursive;
  --f-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-display: 'Playfair Display', Georgia, serif;

  /* Escala tipográfica */
  --t-nombre:     clamp(3.6rem, 15.5vw, 5rem);   /* nombres del hero */
  --t-script-lg:  clamp(2.1rem, 8.6vw, 2.9rem);  /* títulos de sección */
  --t-numero:     clamp(3rem, 12.5vw, 4rem);     /* el 14 */
  --t-cuenta:     clamp(2.1rem, 8.8vw, 2.7rem);  /* dígitos del countdown */

  /* Ritmo */
  --lienzo:  34rem;         /* ancho máximo del sitio */
  --gutter:  1.6rem;
  --sec-y:   clamp(3.4rem, 12vw, 4.8rem);   /* padding vertical de sección */

  /* Movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Textura de papel: SVG de feTurbulence codificado como data-URI.
     Comillas simples por fuera, comillas dobles adentro del SVG,
     '#' escapado como %23 y '%' como %25 para que sea válido en CSS. */
  --textura-papel: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.055"/%3E%3C/svg%3E');
}

/* ---------------------------------------------------------------------
   Reset moderno (mínimo)
   --------------------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing: border-box;
}

body{
  margin: 0;
}

img,
svg{
  display: block;
  max-width: 100%;
}

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

html{
  -webkit-text-size-adjust: 100%;
}

body{
  background: #E2D7CA;
  font-family: var(--f-serif);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------
   Lienzo: contenedor máximo del sitio
   --------------------------------------------------------------------- */
.lienzo{
  max-width: var(--lienzo);
  margin-inline: auto;
  position: relative;
  overflow-x: clip;
}

@media (min-width: 560px){
  /* Sombra lateral suave sobre el fondo #E8E3DA del body */
  .lienzo{
    box-shadow: 0 0 3rem rgba(51,51,44,.14);
  }
}

/* ---------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------- */
.seccion{
  padding: var(--sec-y) var(--gutter);
  position: relative;
}

.seccion--oliva{
  background: var(--oliva);
  color: var(--sobre-oliva);
}

.seccion--crema{
  background: var(--crema);
  color: var(--tinta);
}

.seccion--blush{
  background: var(--blush);
  color: var(--tinta);
}

.centro{
  text-align: center;
}

/* ---------------------------------------------------------------------
   Iconos e ilustraciones (sprite SVG inyectado por el integrador)
   --------------------------------------------------------------------- */
.ico{
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
}

.ilu{
  fill: currentColor;
  stroke: none;
}

/* ---------------------------------------------------------------------
   Textura de papel
   .papel      → sobre fondos claros (crema/blush): multiply
   .papel--oliva → sobre fondo oliva: soft-light, para no ensuciar el verde
   `isolation:isolate` contiene el z-index negativo del ::before dentro
   de la sección, para que la textura no se filtre detrás de la anterior.
   --------------------------------------------------------------------- */
.papel,
.papel--oliva{
  position: relative;
  isolation: isolate;
}

.papel,
.papel--oliva{
  background-image: var(--textura-papel);
  background-repeat: repeat;
  background-size: 200px 200px;
}

.papel{
  background-blend-mode: multiply;
}

.papel--oliva{
  background-blend-mode: soft-light;
}

/* ---------------------------------------------------------------------
   Animación de entrada al hacer scroll
   --------------------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.visible{
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"]{ transition-delay: calc(1 * 90ms); }
[data-reveal-delay="2"]{ transition-delay: calc(2 * 90ms); }
[data-reveal-delay="3"]{ transition-delay: calc(3 * 90ms); }
[data-reveal-delay="4"]{ transition-delay: calc(4 * 90ms); }
[data-reveal-delay="5"]{ transition-delay: calc(5 * 90ms); }
[data-reveal-delay="6"]{ transition-delay: calc(6 * 90ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Accesibilidad: oculto visualmente, disponible para lectores de pantalla
   --------------------------------------------------------------------- */
.solo-lectores{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Placeholder de foto faltante (lo activa js-core con data-foto)
   Respeta el aspect-ratio que define el CSS de cada sección sobre .XX__foto
   --------------------------------------------------------------------- */
.sin-foto{
  position: relative;
  display: grid;
  place-items: center;
  background: var(--crema-2);
  border: 1px dashed var(--linea-suave);
}

.sin-foto::after{
  content: 'Foto';
  font-family: var(--f-serif);
  font-size: 0.82rem;
  letter-spacing: .2em;
  color: var(--tinta-suave);
}

/* ===== 01 — hero ===== */
/* ===== Sección 01 — Hero / Sobre ===== */

/* Contenedor: ocupa casi toda la pantalla, contenido centrado en columna.
   La fecha se empuja al fondo con margin-top:auto sobre .hero__fecha. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 88vh;
  min-height: 88svh;
}

/* Foto del sobre real de fondo, recortada al alto del hero. */
.hero__sobre {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.hero__sobre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* Nombres: por encima de la foto del sobre, en el tercio superior. */
.hero__nombres {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  margin-top: 9vh;
  font-family: var(--f-script);
  font-size: var(--t-nombre);
  font-weight: 400;
  line-height: .92;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.hero__nombres span {
  display: block;
}

.hero__amp {
  font-size: .46em;
  margin-block: .2em;
}

/* Fecha: al fondo del todo, empujada por el margen automático. */
.hero__fecha {
  position: relative;
  z-index: 1;
  margin: 0;
  margin-top: auto;
  font-family: var(--f-serif);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .24em;
  color: #fff;
}

/* Indicador de scroll: línea vertical con un tramo que recorre su
   longitud en loop, apagado si el usuario prefiere menos movimiento. */
.hero__scroll {
  position: relative;
  z-index: 1;
  display: block;
  width: 1px;
  height: 36px;
  margin-top: 1.4rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .32);
}

.hero__scroll::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: hero-recorrido 2.4s var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after {
    top: 0;
    animation: none;
  }
}

@keyframes hero-recorrido {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200%);
  }
}

/* ===== 02 — foto y frase ===== */
/* ===== Sección 02 — Foto, frase y reproductor (prefijo ff) ===== */

.ff__foto {
  width: 78%;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}

.ff__foto picture,
.ff__foto img {
  display: block;
  width: 100%;
  height: 100%;
}

/* La foto es más alargada que el marco 3:4: el encuadre se ajusta acá. */
.ff__foto img {
  object-fit: cover;
  object-position: center 46%;
}

/* Ramitas de paniculata (foto) asomando por dos esquinas */
.ff__marco{ position: relative; width: 78%; margin-inline: auto; }
.ff__marco .ff__foto{ width: 100%; }
.ff__flores{
  position: absolute;
  width: 32%;
  aspect-ratio: 155 / 358;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(60,50,30,.25));
}
.ff__flores img{ display: block; width: 100%; height: 100%; }
.ff__flores--abajo{ left: -11%; bottom: -9%; transform: rotate(-12deg); }
.ff__flores--arriba{ right: -11%; top: -9%; transform: rotate(168deg); }

.ff__frase {
  text-align: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: .82rem;
  line-height: 1.75;
  max-width: 17.5rem;
  margin-inline: auto;
  margin-top: 2.8rem;
}

/* ---------------------------------------------------------------------
   Reproductor
   --------------------------------------------------------------------- */
.ff__player {
  --progreso: 0;
  margin-top: 2.6rem;
}

.ff__player-label {
  text-align: center;
  font-family: var(--f-serif);
  font-size: 0.82rem;
  letter-spacing: .12em;
  color: var(--tinta-suave);
  margin: 0 0 1.1rem;
}

/* el audio no tiene controles nativos: la interfaz la dibuja este CSS */
.ff__player audio {
  display: none;
}

.ff__barra {
  display: flex;
  align-items: center;
}

/* Input de rango: la caja completa (44px) es el área de arrastre;
   el track visual queda reducido a 1px mediante los pseudo-elementos. */
.ff__progreso {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
}

.ff__progreso::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(
    to right,
    var(--tinta) 0%,
    var(--tinta) calc(var(--progreso) * 1%),
    var(--linea-suave) calc(var(--progreso) * 1%),
    var(--linea-suave) 100%
  );
}

.ff__progreso::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--tinta);
}

.ff__progreso::-moz-range-track {
  height: 1px;
  background: var(--linea-suave);
}

.ff__progreso::-moz-range-progress {
  height: 1px;
  background: var(--tinta);
}

.ff__progreso::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--tinta);
}

.ff__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: .4rem;
}

/* Botón genérico: la caja visible es chica (icono + padding acotado)
   para que la fila entre en pantallas angostas sin romper el gap de
   1.5rem; ::before agranda el área táctil real a 44px sin afectar
   el ancho que ocupa en la fila. */
.ff__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  font-size: 17px;
  color: var(--tinta);
  opacity: .75;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}

.ff__btn::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 44px;
  height: 44px;
}

.ff__btn:hover,
.ff__btn:focus-visible {
  opacity: 1;
}

.ff__btn:disabled {
  opacity: .35;
}

.ff__btn.esta-activo {
  opacity: 1;
  color: var(--oliva);
}

.ff__btn--play {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  font-size: 15px;
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Reproductor sin audio disponible (lo activa js-player)
   --------------------------------------------------------------------- */
.ff__player.sin-audio {
  opacity: .45;
}

/* ===== 03 — fecha ===== */
/* Sección 03 — Fecha, cuenta regresiva y calendario (prefijo fe) */

.fe {
  text-align: center;
}

/* Bendición */
.fe__bendicion {
  font-family: var(--f-serif);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 30ch;
  margin-inline: auto;
}

/* Bloque de fecha: VIERNES · SEPTIEMBRE 24 · 2027 */
.fe__fecha {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .7rem;
}

.fe__lado {
  font-size: 0.82rem;
  letter-spacing: .18em;
  padding: .55rem .9rem;
  border-top: 1px solid var(--linea-oliva);
  border-bottom: 1px solid var(--linea-oliva);
  overflow-wrap: anywhere;
}

.fe__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fe__mes {
  font-size: 0.82rem;
  letter-spacing: .3em;
}

.fe__dia {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-numero);
  line-height: 1;
}

/* Cuenta regresiva */
.fe__faltan {
  margin-top: 3rem;
  font-family: var(--f-serif);
  font-size: 1.15rem;
  letter-spacing: .2em;
}

.fe__cuenta {
  margin-top: 1.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
}

.fe__celda {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fe__num {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: var(--t-cuenta);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fe__rotulo {
  display: block;
  margin-top: .35rem;
  font-size: 0.71rem;
  letter-spacing: .1em;
}

.fe__sep {
  font-size: var(--t-cuenta);
  line-height: 1;
  opacity: .7;
  padding-top: .05em; /* alinea con los dígitos, no con los rótulos */
}

/* Título y calendario */
.fe__titulo {
  margin-top: 3.2rem;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: .14em;
  line-height: 1.3;
}

.fe__mes-cal {
  margin-top: .5rem;
  font-size: 0.82rem;
  letter-spacing: .26em;
}

.fe__cal {
  margin: 1.4rem auto 0;
  max-width: 19rem;
}

.fe__cal-fila {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.fe__cal-cab,
.fe__cal-dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.fe__cal-cab {
  font-size: 0.69rem;
  letter-spacing: .08em;
  opacity: .75;
}

.fe__cal-dia {
  font-size: .8rem;
}

.fe__cal-dia--hito {
  position: relative;
}

.fe__cal-anillo {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -60%;
  width: 40px;
  height: 40px;
  z-index: -1; /* el anillo queda detrás del número */
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.25));
}

/* Ramitas de paniculata (foto) en dos esquinas de la sección de la fecha */
.fe{ position: relative; overflow: hidden; }
.fe__ramita{
  position: absolute;
  width: 34%;
  max-width: 170px;
  pointer-events: none;
  z-index: 0;
}
.fe__ramita img{ display: block; width: 100%; height: auto; }
.fe__ramita--arriba{ top: -1.2rem; right: -2.2rem; transform: rotate(200deg); }
.fe__ramita--abajo{ bottom: -2.6rem; left: -2.6rem; width: 28%; transform: rotate(32deg); }
.fe > *:not(.fe__ramita){ position: relative; z-index: 1; }

/* ===== 04 — eventos ===== */
/* ===== Sección 04 — Ceremonia y Recepción (prefijo ev) ===== */

.ev__bloque {
  text-align: center;
}

/* separación entre el bloque de ceremonia y el de recepción */
.ev__bloque + .ev__bloque {
  margin-top: 4rem;
}

.ev__ico {
  display: block;
  height: 46px;
  width: auto;
  color: var(--tinta);
  margin-inline: auto;
}

.ev__titulo {
  font-family: var(--f-script);
  font-size: var(--t-script-lg);
  font-weight: 400;
  line-height: 1.15;
  margin: .7rem 0 .9rem;
}

.ev__hora {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}

.ev__lugar {
  font-size: .85rem;
  letter-spacing: .13em;
  font-weight: 600;
  margin-top: .3rem;
  margin-bottom: 0;
}

.ev__ciudad {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--tinta-suave);
  margin-top: .15rem;
  margin-bottom: 0;
}

.ev__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--linea);
  padding: .62rem 1.5rem;
  margin-top: 1.4rem;
  font-size: 0.82rem;
  letter-spacing: .05em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--tinta);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.ev__boton:hover,
.ev__boton:focus-visible {
  background: var(--tinta);
  color: var(--crema);
}

/* ===== 05 — itinerario ===== */
/* ===== Sección 05 — Itinerario (prefijo it) ===== */

.it__titulo {
  font-family: var(--f-script);
  font-size: var(--t-script-lg);
  font-weight: 400;
  text-align: center;
  margin: 0 0 2.8rem;
}

.it__lista {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 21rem;
  list-style: none;
}

/* línea central de la línea de tiempo */
.it__lista::before {
  content: '';
  position: absolute;
  left: 50%;
  top: .6rem;
  bottom: .6rem;
  width: 1px;
  transform: translateX(-50%);
  background: var(--linea-suave);
}

.it__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 2.2rem;
  padding-block: .55rem;
  position: relative;
}

/* punto sobre la línea, centrado en cada ítem */
.it__item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta);
  transform: translate(-50%, -50%);
}

/* icono a la izquierda, pegado a la línea; texto a la derecha */
.it__item--izq .it__ico-caja {
  grid-column: 1;
  justify-self: end;
}

.it__item--izq .it__texto {
  grid-column: 2;
  text-align: left;
}

/* icono a la derecha, pegado a la línea; texto a la izquierda */
.it__item--der .it__texto {
  grid-column: 1;
  text-align: right;
}

.it__item--der .it__ico-caja {
  grid-column: 2;
  justify-self: start;
}

.it__ico {
  height: 34px;
  width: auto;
}

/* baile y fiesta van un poco más grandes, como en el original */
.it__ico--grande {
  height: 38px;
}

.it__hora {
  font-size: 0.73rem;
  letter-spacing: .16em;
  font-weight: 700;
  margin: 0;
}

.it__que {
  font-size: 0.69rem;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: .2rem 0 0;
}

/* ===== 06 — vestimenta ===== */
/* ===== Sección 06 — Foto y código de vestimenta (prefijo dc) ===== */

.dc {
  text-align: center;
}

/* Marco vertical 4:5 a todo el ancho: la foto es 9:16 y un marco apaisado
   se comía más de la mitad. El encuadre fino va en object-position. */
.dc__foto {
  aspect-ratio: 4 / 5;
  width: 100%;
  margin: 0 0 3.4rem;
}

.dc__foto picture,
.dc__foto img {
  display: block;
  width: 100%;
  height: 100%;
}

.dc__foto img {
  object-fit: cover;
  object-position: center 40%;
}

.dc__titulo {
  font-family: var(--f-script);
  font-size: var(--t-script-lg);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.dc__nivel {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: 1.3rem;
  margin: .4rem 0 0;
}

.dc__ilu {
  display: block;
  height: 120px;
  width: auto;
  color: var(--tinta);
  margin: 1.6rem auto;
}

.dc__nota {
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.75;
  max-width: 28ch;
  margin: 0 auto;
}

/* ===== 07 — regalo ===== */
/* ===== Sección 07 — Sugerencia de regalo (prefijo rg) ===== */

.rg {
  text-align: center;
}

.rg__ico {
  display: block;
  height: 46px;
  width: auto;
  color: var(--sobre-oliva);
  margin-inline: auto;
}

.rg__titulo {
  font-family: var(--f-script);
  font-size: var(--t-script-lg);
  font-weight: 400;
  margin: .9rem 0 1.2rem;
}

.rg__texto {
  font-size: .88rem;
  line-height: 1.65;
  max-width: 30ch;
  margin-inline: auto;
}

/* Figura del código QR: módulos blancos sobre el propio fondo oliva */
.rg__qr {
  width: 13.5rem;
  margin: 2.4rem auto 0;
}

.rg__qr img {
  width: 100%;
  height: auto;
}

/* ===== 08 — pie ===== */
/* ===== Sección 08 — Pie (prefijo pie) ===== */

.pie {
  text-align: center;
  padding-block: clamp(2.6rem, 9vw, 3.4rem);
}

.pie__nombres {
  font-family: var(--f-script);
  font-size: 2rem;
  color: var(--tinta);
  margin: 0;
}

.pie__fecha {
  font-size: 0.82rem;
  letter-spacing: .24em;
  color: var(--tinta-suave);
  margin: .5rem 0 0;
}

/* ===== 01b — Sobre con ramitas de olivo en relieve y sello de lacre ===== */
/* Color del sello: data-sello-color (dorado | marfil | champagne | oliva) en #inicio. */
.hero{
  --papel: #6F7556;        /* sobre */
  --forro: #EEE8DB;        /* interior del sobre */
  --mesa: #EBE1D6;         /* fondo de la portada */
  --tarjeta: #F4EFE4;
  --tarjeta-tinta: #3C3B33;
  --pista: #8A8272;
  --cera: #E9E2D2; --cera-sombra: #CFC4AC; --cera-luz: #F3EEE2; --cera-honda: #7E735C;
}
.hero[data-sello-color="dorado"]{ --cera: #B99C66; --cera-sombra: #977C4B; --cera-luz: #CDB487; --cera-honda: #3E2D10; }
.hero[data-sello-color="champagne"]{ --cera: #D6C7A9; --cera-sombra: #BBA987; --cera-luz: #E3D7BE; --cera-honda: #5E4F37; }
.hero[data-sello-color="oliva"]{ --cera: #575D40; --cera-sombra: #474D33; --cera-luz: #62684A; --cera-honda: #20241A; }

.hero{
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 92vh;
  min-height: 92svh;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(255,255,255,.35), rgba(0,0,0,.05) 100%),
    url('../assets/img/grano-papel.png') 0 0 / 96px 96px,
    var(--mesa);
}

/* El sobre (300×414). js/main.js lo centra y calcula su tamaño en --env-*. */
.env{
  position: absolute;
  left: var(--env-x, 7%);
  top: var(--env-y, 12%);
  width: var(--env-w, 86%);
  height: var(--env-h, 60%);
  perspective: 1800px;
  perspective-origin: 50% 0;
  container-type: inline-size;
}
.env__defs{ position: absolute; width: 0; height: 0; overflow: hidden; }
.env__sombra, .env__forro, .env__frente, .env__solapa{ position: absolute; inset: 0; width: 100%; height: 100%; }
.env__sombra{
  z-index: 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(30,28,16,.18), 0 10px 22px rgba(30,28,16,.14), 0 30px 60px rgba(30,28,16,.12);
}
.env__forro{
  z-index: 1;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,0) 45%), var(--forro);
}
.env__frente{ z-index: 3; overflow: visible; }
.env__papel{ fill: var(--papel); filter: url(#env-sombra); }
.env__forro-papel{ fill: var(--forro); }
.env__grano{ fill: url(#env-grano); pointer-events: none; }

.env__solapa{
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.6,.02,.25,1);
}
.env__cara{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env__cara--adentro{ transform: rotateY(180deg); }

/* Tarjeta: foto de la tarjeta (papel, gasa, paniculatas, sello y marco) con el texto encima */
.env__tarjeta{
  position: absolute;
  z-index: 2;
  left: 9.75%;
  width: 80.5%;
  top: 6%;
  height: 86%;
  color: var(--tarjeta-tinta);
  container-type: inline-size;
  overflow: hidden;
  filter: drop-shadow(0 4px 8px rgba(30,28,16,.12));
  transition: top 1.2s cubic-bezier(.45,0,.2,1), left 1.2s cubic-bezier(.45,0,.2,1), width 1.2s cubic-bezier(.45,0,.2,1), height 1.2s cubic-bezier(.45,0,.2,1), filter 1.2s ease;
}
.tj__foto, .tj__foto img{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tj__foto img{ object-fit: cover; object-position: left center; }
/* el texto va dentro del marco dorado de la foto */
.env__texto{
  position: absolute;
  top: 7%; bottom: 7%;
  left: 35%; right: 7.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  text-align: center;
}
.env__intro{ margin: 0 0 7cqw; font-family: var(--f-serif); font-size: 4cqw; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #9A8058; }
.env__nombres{ margin: 0; font-family: 'Waterfall', var(--f-script); font-weight: 400; font-size: 17cqw; line-height: 1.02; color: #76664A; }
.env__nombres span{ display: block; }
.env__amp{ font-size: .55em; margin-block: .02em; color: #9A8058; }
.env__fecha{ margin: 5cqw 0 0; font-family: var(--f-serif); font-size: 4.6cqw; font-weight: 500; letter-spacing: .3em; }
.env__lugar{ margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 4.5cqw; letter-spacing: .08em; opacity: .75; }

/* Cierres: botón sin estilo propio */
.cierre{ padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cierre:focus-visible{ outline: 1px solid var(--pista); outline-offset: 6px; border-radius: 4px; }

/* Sello mate, en la punta de la solapa (150, 236 de 300×414) */
.hero__sello{
  position: absolute;
  left: 50%;
  top: 56.5%;
  width: 27%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sello__foto, .sello__foto img{ display: block; width: 100%; height: 100%; }
.sello__foto{ filter: drop-shadow(0 2px 2.5px rgba(20,18,10,.35)) drop-shadow(0 6px 10px rgba(20,18,10,.18)); transition: transform .25s var(--ease); }
.hero__sello:active .sello__foto{ transform: scale(.97); }

/* Paniculatas (foto) saliendo de abajo del sello, pegadas a la solapa */
.env__flores{
  position: absolute;
  width: 25%;
  aspect-ratio: 155 / 358;
  top: 21%;                 /* la base queda bajo el sello (56.5%) */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(20,18,10,.3));
}
.env__flores img{ display: block; width: 100%; height: 100%; }
.env__flores--der{ left: 47%; transform-origin: 0 100%; transform: rotate(26deg); }
.env__flores--izq{ right: 47%; transform-origin: 100% 100%; transform: rotate(-26deg); }


.sello__pista{
  position: absolute;
  left: -10%; right: -10%;
  top: 104.5%;
  margin: 0;
  text-align: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 4.4cqw;
  letter-spacing: .1em;
  color: var(--pista);
  pointer-events: none;
  animation: sello-pista 2.8s 1.6s ease-in-out infinite both;
  transition: opacity .4s var(--ease);
}

/* ---- Apertura ---- */
/* 1. se abre la solapa (con el sello, si lo hay) */
.hero.abriendo .env__solapa{ transform: translateY(0) rotateX(180deg); }
.hero.abriendo .hero__sello{ pointer-events: none; }
.hero.abriendo .sello__pista{ opacity: 0; animation: none; }
.hero.solapa-atras .env__solapa{ z-index: 1; }
/* 2. la tarjeta sube y asoma */
.hero.abriendo .env__tarjeta{ top: -30%; transition-delay: .9s; }
/* 3. el sobre baja y la tarjeta queda sola, centrada */
.env__sombra, .env__forro, .env__frente{ transition: transform 1.4s cubic-bezier(.55,0,.3,1), opacity 1s ease .35s; }
.hero.fuera .env__sombra, .hero.fuera .env__forro, .hero.fuera .env__frente{ transform: translateY(125%); opacity: 0; }
.hero.fuera .env__solapa{ transform: translateY(125%) rotateX(180deg); opacity: 0; transition: transform 1.4s cubic-bezier(.55,0,.3,1), opacity 1s ease .35s; }
/* la tarjeta crece hasta ocupar toda la portada */
.hero.fuera .env__tarjeta{
  z-index: 6;
  left: var(--tf-x, 0);
  top: var(--tf-y, 0);
  width: var(--tf-w, 100%);
  height: var(--tf-h, 100%);
  filter: none;
  transition-delay: 0s;
}

@keyframes sello-pista{ 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  .sello__pista{ animation: none; }
  .env__solapa, .env__tarjeta, .env__sombra, .env__forro, .env__frente{ transition: opacity .4s ease; }
  .hero.abriendo .env__solapa{ transform: none; opacity: 0; }
  .hero.abriendo .env__tarjeta{ top: 6%; }
  .hero.fuera .env__sombra, .hero.fuera .env__forro, .hero.fuera .env__frente, .hero.fuera .env__solapa{ transform: none; opacity: 0; }
}

.env__relieve{ pointer-events: none; }

/* Alias para el regalo */
.rg__alias{
  margin: 2rem auto 0;
  padding: 1.4rem 1.2rem 1.5rem;
  max-width: 17rem;
  border: 1px solid var(--linea-oliva);
  text-align: center;
}
.rg__alias-rotulo{ margin: 0; font-family: var(--f-serif); font-size: 0.82rem; letter-spacing: .32em; text-transform: uppercase; opacity: .8; }
.rg__alias-valor{ margin: .5rem 0 1.1rem; font-family: var(--f-serif); font-size: 1.45rem; font-weight: 500; letter-spacing: .06em; user-select: all; -webkit-user-select: all; }
.rg__copiar{
  font: inherit; font-family: var(--f-serif); font-size: .85rem; letter-spacing: .08em;
  color: var(--oliva); background: var(--sobre-oliva); border: 0; padding: .55rem 1.3rem; cursor: pointer;
  transition: opacity .2s ease;
}
.rg__copiar:hover{ opacity: .88; }
.rg__copiar:focus-visible{ outline: 1px solid var(--sobre-oliva); outline-offset: 3px; }

/* Íconos ilustrados del itinerario: dos versiones (data-iconos en #itinerario) */
.it__img{ display: none; }
.it[data-iconos="lineal"] .it__img--lineal,
.it[data-iconos="acuarela"] .it__img--acuarela{ display: block; }
.it__img img{ display: block; width: 64px; height: 54px; object-fit: contain; }
.it[data-iconos="acuarela"] .it__img img{ width: 70px; height: 60px; }

/* ===== Estilo botánico: ramos de acuarela en las esquinas + títulos en versalitas ===== */
.ff, .ev, .it, .pie{ position: relative; overflow: hidden; }
.ff > *:not(.ramo), .ev > *:not(.ramo), .it > *:not(.ramo), .pie > *:not(.ramo){ position: relative; z-index: 1; }
.ramo{ position: absolute; z-index: 0; pointer-events: none; }
.ramo img{ display: block; width: 100%; height: auto; }
.ramo--ti{ top: 0; left: 0; width: 30%; max-width: 150px; }
.ramo--td{ top: 0; right: 0; width: 36%; max-width: 180px; }
.ramo--bi{ bottom: 0; left: 0; width: 42%; max-width: 210px; }
.ramo--bd{ bottom: 0; right: 0; width: 34%; max-width: 170px; }
.ramo--abeja{ top: 4.2rem; right: 0; width: 15%; max-width: 70px; }
.ramo--chico.ramo--bd{ width: 26%; }
.pie .ramo--ti{ width: 20%; } .pie .ramo--td{ width: 25%; }

/* títulos de sección: mayúsculas finas y espaciadas, como "BRIDE and GROOM" */
.ev__titulo, .it__titulo, .rg__titulo{
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.35;
}
.ev__titulo, .it__titulo{ color: #6F6346; }
.it__titulo{ margin-bottom: 2.4rem; }
.ev__hora{ color: #6F6346; }

/* cierre: monograma A | N con tallito y nombres en versalitas */
.pie{ padding-block: 4.2rem 3.6rem; }
.pie__mono{ display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0 0 1.4rem;
  font-family: var(--f-serif); font-size: 1.6rem; color: #6F6346; }
.pie__tallo{ width: 1px; height: 2.6rem; background: linear-gradient(#C99AA0 0 18%, #A9AE8E 18%); position: relative; transform: rotate(8deg); }
.pie__tallo::before{ content: ""; position: absolute; top: -.35rem; left: -.3rem; width: .65rem; height: .65rem; border-radius: 50%;
  background: radial-gradient(circle, #E9B7BC 30%, #D99AA2 70%); }
.pie__nombres{ font-family: var(--f-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: .22em; color: #6F6346;
  display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.pie__y{ font-family: var(--f-script); font-size: 1.3rem; letter-spacing: 0; text-transform: none; margin: .1rem 0 .15rem; }

/* ajustes de espacio para los ramos */
.ev{ padding-bottom: 7.5rem; padding-top: 5.2rem; }
.ev .ramo--td{ width: 27%; max-width: 140px; }
.ev .ramo--bi{ width: 33%; max-width: 165px; }
.ev__titulo, .it__titulo, .rg__titulo{ font-size: 1.15rem; letter-spacing: .16em; }
.ev__lugar{ padding-inline: 1.2rem; }
.it{ padding-bottom: 6.5rem; }
.it .ramo--bd{ width: 24%; }
.ff .ramo--bd{ width: 28%; }


/* =====================================================================
   VERSIÓN FLORES SILVESTRES
   Flores de acuarela prensadas (bordó, ocre, crema) sobre papel marfil.
   Regla de composición: cada sección lleva un ramo distinto, siempre en
   esquinas opuestas y "saliendo" del borde, nunca encima del texto.
   ===================================================================== */
body{ background: #E6DDD1; }

/* --- Portada: sobre marfil, forro bordó, mesa topo --- */
.hero{
  --papel: #EFE6D9;
  --forro: #6B2A33;
  --mesa: #D9CBBB;
  --tarjeta: #FBF8F2;
  --tarjeta-tinta: #4B3A30;
  --pista: #7D6A5B;
}
.env__forro{ background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.05) 45%), var(--forro); }

/* ramita fina metida en diagonal bajo el lacre; el pie de los tallos asoma del otro lado */
.env__ramita{
  position: absolute;
  left: 50%;
  top: 56.5%;
  width: 30%;
  transform-origin: 58% 88%;
  transform: translate(-58%, -88%) rotate(-34deg) translate(6%, 14%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(.6px 1.2px 1px rgba(60,40,30,.22));
}
.env__ramita img{ display: block; width: 100%; height: auto; }

/* --- Tarjeta: papel marfil, ramito arriba, pradera de flores abajo --- */
.env__tarjeta{ filter: drop-shadow(0 4px 10px rgba(60,40,30,.14)); }
.tj__papel{
  position: absolute; inset: 0;
  background: url('../assets/img/grano-papel.png') 0 0 / 64px 64px, var(--tarjeta);
}
.tj__papel::after{ content: ""; position: absolute; inset: 3.4cqw; border: 1px solid rgba(168,139,90,.45); }
.tj__pradera{ position: absolute; left: -3%; width: 106%; bottom: 0; pointer-events: none; }
.tj__pradera img{ display: block; width: 100%; height: auto; }
.tj__esquina{ position: absolute; top: 5cqw; right: 6cqw; width: 22cqw; transform: rotate(12deg); pointer-events: none; }
.tj__esquina img{ display: block; width: 100%; height: auto; }
.env__texto{ left: 8%; right: 8%; top: 7cqw; bottom: 46cqw; height: auto; }
.env__papel{ filter: url(#env-sombra) drop-shadow(0 0 .4px rgba(90,70,50,.25)); }
.env__nombres{ color: #5E3B36; }
.env__amp{ color: var(--oro); }
.env__fecha{ color: var(--tinta); }
.hero.fuera .env__tarjeta{ filter: none; }

/* --- Flores de cada sección --- */
.seccion > .flor{ position: absolute; z-index: 0; pointer-events: none; }
.flor img{ display: block; width: 100%; height: auto; }
.rg{ position: relative; overflow: hidden; }
.fe > *:not(.flor), .ev > *:not(.flor), .it > *:not(.flor), .rg > *:not(.flor){ position: relative; z-index: 1; }

/* foto: las flores asoman por detrás de la copia, como apoyadas debajo */
.ff__marco .flor{ position: absolute; z-index: 0; pointer-events: none; }
.ff__marco .ff__foto{ position: relative; z-index: 1; box-shadow: 0 2px 4px rgba(60,40,30,.10), 0 10px 26px rgba(60,40,30,.12); }
.flor--foto-arriba{ top: -15%; right: -19%; width: 52%; transform: rotate(10deg); }
.flor--foto-abajo{ bottom: -16%; left: -15%; width: 33%; transform: rotate(-12deg); }
.ff{ padding-top: 5.5rem; }
.ff__frase{ margin-top: 4.2rem; }

.flor--fe-arriba{ top: -1.8rem; right: -2.6rem; width: 32%; max-width: 190px; transform: rotate(-8deg); }
.flor--fe-abajo{ bottom: -1.6rem; left: -2.6rem; width: 40%; max-width: 210px; }
.fe{ padding-bottom: 10.5rem; }
.fe__bendicion{ padding-inline: 1.2rem; }

.flor--ev-der{ top: -3.2rem; right: -1.6rem; width: 25%; max-width: 130px; transform: rotate(6deg); }
.ev{ padding-top: 9.5rem !important; padding-bottom: 10rem !important; }
.flor--ev-izq{ bottom: -.6rem; left: -1.8rem; width: 31%; max-width: 165px; }

.flor--it-abajo{ bottom: 0; right: -1rem; width: 34%; max-width: 180px; }

.flor--rg-izq{ bottom: 0; left: 0; width: 33%; max-width: 175px; }
.flor--rg-der{ top: -2.6rem; right: -3rem; width: 27%; max-width: 145px; transform: scaleX(-1) rotate(-10deg); }
.rg{ padding-top: 6.5rem; }
.rg{ padding-bottom: 12rem; }

/* títulos y detalles en tinta cálida */
.ev__titulo, .it__titulo, .rg__titulo{ color: #5B4335; }
.ev__hora{ color: #5B4335; }
.it__img--lineal img{ filter: sepia(.35) saturate(.9); }
.rg__copiar{ background: var(--bordo); color: #FBF6EE; }

/* --- Cierre: corona de flores silvestres alrededor del monograma --- */
.pie{ padding-block: 3rem 3.4rem; }
.pie__corona{
  position: relative;
  width: min(82%, 320px);
  aspect-ratio: 394 / 408;
  margin: 0 auto .8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 10%;
}
.pie__corona-img{ position: absolute; inset: 0; z-index: 0; }
.pie__corona-img img{ width: 100%; height: 100%; display: block; }
.pie__corona > p{ position: relative; z-index: 1; }
.pie__mono, .pie__nombres{ color: #5B4335; }
.pie__tallo{ background: linear-gradient(#B9707A 0 18%, #A88B5A 18%); }
.pie__tallo::before{ background: radial-gradient(circle, #C98A92 30%, #8E3E4A 75%); }
.pie__nombres{ font-size: 1.3rem; }

.pie__corona{ width: min(88%, 340px); justify-content: flex-start; padding-top: 24%; gap: .2rem; }
.pie__nombres--linea{ flex-direction: row; align-items: baseline; gap: .55rem; font-size: 1.05rem; letter-spacing: .26em; }
.pie__nombres--linea .pie__y{ font-size: 1.15rem; margin: 0; }
.pie__corona .pie__fecha{ margin-top: .9rem; }
.pie__mono{ margin-bottom: 1rem; }

/* la pradera nunca ocupa más del ~40% del alto de la tarjeta (en compu la tarjeta es más ancha).
   El texto termina justo arriba de las flores: la imagen mide de alto .667 de su ancho y las flores
   arrancan casi en su borde de arriba, así que el texto corta en .65 del ancho más un margen. */
.env__tarjeta{ container-type: size; }
.tj__pradera{ left: 50%; width: min(106cqw, 60cqh); transform: translateX(-50%); }
.env__texto{ bottom: calc(min(106cqw, 60cqh) * .65 + 3cqw); }

/* --- Cuerpo del sobre: luz, filo del papel, sombras de las solapas, sombra en la mesa --- */
.env__luz{ fill: url(#env-luz-g); stroke: rgba(255,255,255,.75); stroke-width: .7; vector-effect: non-scaling-stroke; pointer-events: none; }
.env__grano{ opacity: 1; }
.env__sombra{
  box-shadow:
    0 1px 1px rgba(50,35,20,.22),
    0 4px 8px rgba(50,35,20,.12),
    0 18px 36px rgba(50,35,20,.16),
    0 40px 70px rgba(50,35,20,.12);
}
/* papel un poco más cálido y con leve abombado por la tarjeta de adentro */
.hero{ --papel: #EEE5D7; }
.env__frente{ filter: drop-shadow(0 0 .5px rgba(80,60,40,.25)); }
.hero__sello{ outline: none; }
.cierre:focus{ outline: none; }
.cierre:focus-visible{ outline: none; }
.cierre:focus-visible .sello__foto{ border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 0 4px rgba(125,106,91,.6); }
.sello__foto{ filter: drop-shadow(0 1.5px 1.5px rgba(40,25,10,.45)) drop-shadow(0 6px 9px rgba(40,25,10,.22)); }

/* ramito atado: amapolas hacia arriba a la izquierda, espiga hacia la derecha; los tallos asoman bajo el lacre */
.env__ramita{ width: 46%; transform-origin: 56% 74%; transform: translate(-56%, -74%) rotate(-30deg); }
.env__ramita--b{ width: 38%; transform-origin: 55% 80%; transform: translate(-55%, -80%) rotate(24deg); filter: drop-shadow(.6px 1.2px 1px rgba(60,40,30,.18)); }

/* flores estampadas en el papel del sobre (como impresas), recortadas por cada pliegue */
.env__estampa{ opacity: .92; mix-blend-mode: multiply; pointer-events: none; }

/* =====================================================================
   ESTILOS DE APERTURA (data-apertura en #inicio)
   ===================================================================== */

/* 1. SUAVE: la solapa gira solo hasta quedar de canto y se desvanece al
   pasar, así nunca queda parada arriba del sobre. La tarjeta asoma poco. */
.hero[data-apertura="suave"] .env__solapa{ transition: transform 1.1s cubic-bezier(.5,.05,.3,1), opacity .55s ease .4s; }
.hero[data-apertura="suave"].abriendo .env__solapa{ transform: rotateX(100deg); opacity: 0; }
.hero[data-apertura="suave"].fuera .env__solapa{ transform: translateY(125%) rotateX(100deg); opacity: 0; }
.hero[data-apertura="suave"].abriendo .env__tarjeta{ top: -14%; transition-delay: .55s; }
.hero[data-apertura="suave"].fuera .env__tarjeta{ transition-delay: 0s; }

/* 2. RETIRAR EL SOBRE: el sello se suelta, la solapa se entreabre y el sobre
   se desliza hacia abajo dejando la tarjeta sobre la mesa. */
.hero[data-apertura="deslizar"] .hero__sello{ transition: transform .45s ease, opacity .45s ease; }
.hero[data-apertura="deslizar"].abriendo .hero__sello{ transform: translate(-50%, -50%) scale(1.12); opacity: 0; }
.hero[data-apertura="deslizar"] .env__solapa{ transition: transform .7s cubic-bezier(.4,0,.2,1) .2s, opacity .6s ease; }
.hero[data-apertura="deslizar"].abriendo .env__solapa{ transform: rotateX(32deg); }
.hero[data-apertura="deslizar"].abriendo .env__tarjeta{ top: 6%; }
.hero[data-apertura="deslizar"].fuera .env__solapa{ transform: translateY(125%) rotateX(32deg); opacity: 0; transition: transform 1.4s cubic-bezier(.55,0,.3,1), opacity 1s ease .35s; }

/* 3. ACERCAMIENTO: la vista se acerca al sello mientras el sobre se disuelve
   y la tarjeta aparece en su lugar. */
.hero[data-apertura="zoom"] .env__sombra,
.hero[data-apertura="zoom"] .env__forro,
.hero[data-apertura="zoom"] .env__frente,
.hero[data-apertura="zoom"] .env__solapa{ transform-origin: 50% 56.5%; transition: transform 1.5s cubic-bezier(.3,0,.2,1), opacity 1.1s ease .15s; }
.hero[data-apertura="zoom"].abriendo .env__sombra,
.hero[data-apertura="zoom"].abriendo .env__forro,
.hero[data-apertura="zoom"].abriendo .env__frente,
.hero[data-apertura="zoom"].abriendo .env__solapa,
.hero[data-apertura="zoom"].fuera .env__sombra,
.hero[data-apertura="zoom"].fuera .env__forro,
.hero[data-apertura="zoom"].fuera .env__frente,
.hero[data-apertura="zoom"].fuera .env__solapa{ transform: scale(1.35); opacity: 0; }
.hero[data-apertura="zoom"].abriendo .env__tarjeta{ top: 6%; }
.hero[data-apertura="zoom"] .env__tarjeta{ transition: top 1.5s cubic-bezier(.3,0,.2,1), left 1.5s cubic-bezier(.3,0,.2,1), width 1.5s cubic-bezier(.3,0,.2,1), height 1.5s cubic-bezier(.3,0,.2,1), filter 1.2s ease; }

/* posición final de la tarjeta: gana sobre las reglas de cada estilo */
.hero[data-apertura].fuera .env__tarjeta{
  top: var(--tf-y, 0); left: var(--tf-x, 0); width: var(--tf-w, 100%); height: var(--tf-h, 100%);
  transition-delay: 0s;
}

/* --- Cierre: flores arriba y abajo, nombres en manuscrita al medio (como el mockup) --- */
.pie__marco{ position: relative; width: min(94%, 380px); margin: 0 auto; aspect-ratio: 670 / 516; }
.pie__marco-img, .pie__marco-img img{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pie__guion{
  position: absolute; left: 0; right: 0; top: 47.5%; transform: translateY(-50%) rotate(-4deg);
  margin: 0; text-align: center; z-index: 1;
  font-family: 'Waterfall', var(--f-script); font-weight: 400; font-size: clamp(2.3rem, 11vw, 2.9rem); line-height: 1;
  color: #4B3A30;
}
.pie__guion span{ font-size: .8em; color: var(--oro); margin: 0 .05em; }
.pie__fecha--marco{ margin-top: 1rem; }
.pie{ padding-block: 2.6rem 3.2rem; }

/* letras un poco más grandes en toda la invitación (todo lo que está en rem escala junto) */
html{ font-size: 112.5%; }
/* la tarjeta usa medidas relativas a su ancho: también un poco más grande */
.env__nombres{ font-size: min(19cqw, 12.5cqh); } /* en celulares bajos se achica con el alto para no chocar con las flores */
.env__fecha{ font-size: 5cqw; }
.env__lugar{ font-size: 4.9cqw; }
.sello__pista{ font-size: 4.8cqw; }
.fe__lado{ white-space: nowrap; letter-spacing: .14em; }

.pie__marco{ width: min(100%, 480px); aspect-ratio: 957 / 582; }
.pie__guion{ top: 54%; font-size: clamp(2.2rem, 10.5vw, 2.8rem); }

/* --- Cierre: jardín de flores (como "October Garden") --- */
.pie{ padding: 0 !important; overflow: hidden; }
.pie__jardin{ position: relative; width: 100%; padding-top: 3.2rem; }
.pie__texto{ position: relative; z-index: 1; padding: 0 1.6rem; text-align: left; }
.pie__guion2{ margin: 0; font-family: 'Waterfall', var(--f-script); font-size: clamp(2.8rem, 13vw, 3.6rem); line-height: 1; color: #4B3A30; }
.pie__guion2 span{ font-size: .7em; color: var(--oro); }
.pie__fecha--jardin{ margin: .6rem 0 0 .2rem; text-align: left; }
.pie__jardin-img{ display: block; width: 112%; margin: 1.2rem 0 0 -2%; }
.pie__jardin-img img{ display: block; width: 100%; height: auto; }

.it__img--lineal img{ filter: none; }

.ev__dibujo{ display: block; height: 62px; width: auto; max-width: 90px; margin: 0 auto; object-fit: contain; }

/* textos de invitación y frase más grandes */
.fe__bendicion{ font-size: 1.22rem; line-height: 1.6; max-width: 27ch; text-wrap: balance; }
.ff__frase{ font-size: 1.12rem; line-height: 1.65; max-width: 21rem; }
.ff__player-label{ font-size: .95rem; }

/* ===== VERSIÓN PEONÍAS ===== */
.env__estampa{ mix-blend-mode: normal; opacity: .96; }
.pie__jardin-img{ width: 104%; margin: 1rem 0 0 -2%; }
.flor--fe-arriba{ width: 30%; top: -.8rem; right: -1.2rem; transform: rotate(-4deg); }
.flor--fe-abajo{ width: 50%; max-width: 250px; bottom: -.4rem; left: -1rem; }
.flor--ev-der{ width: 34%; max-width: 170px; top: -1.4rem; right: -1rem; transform: rotate(0); }
.flor--ev-izq{ width: 40%; max-width: 200px; bottom: -.4rem; left: -1rem; }
.flor--rg-der{ width: 30%; top: -1.4rem; right: -1.2rem; transform: scaleX(-1); }

.flor--fe-arriba{ width: 26%; max-width: 140px; top: -1rem; right: -.6rem; transform: rotate(-6deg); }
.flor--fe-abajo{ width: 58%; max-width: 300px; bottom: -.6rem; left: -1.4rem; }
.flor--ev-der{ width: 36%; max-width: 190px; top: -1rem; right: -1.6rem; }
.flor--ev-izq{ width: 58%; max-width: 290px; bottom: -.8rem; left: -2rem; }
.flor--fe-arriba{ width: 22%; max-width: 110px; top: -2.4rem; right: -1.4rem; transform: rotate(-12deg); }

/* ---- Sello: invita a tocarlo (latido + ondas doradas) ---- */
.hero__sello::before, .hero__sello::after{
  content:""; position:absolute; inset:4%; border-radius:50%;
  border:2px solid rgba(214,178,104,1); box-shadow:0 0 10px rgba(214,178,104,.45); pointer-events:none;
  animation: sello-onda 2.6s 1.2s ease-out infinite both;
}
.hero__sello::after{ animation-delay: 2.5s; }
.hero__sello .sello__foto{ animation: sello-latido 2.6s 1.2s ease-in-out infinite both; }
.hero__sello:active .sello__foto{ animation: none; transform: scale(.95); }
@keyframes sello-onda{ 0%{ transform:scale(1); opacity:.9; } 80%,100%{ transform:scale(1.75); opacity:0; } }
@keyframes sello-latido{ 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.07); } 24%{ transform:scale(1); } 36%{ transform:scale(1.04); } 48%{ transform:scale(1); } }
.hero.abriendo .hero__sello::before, .hero.abriendo .hero__sello::after{ animation:none; opacity:0; }
.hero.abriendo .hero__sello .sello__foto{ animation:none; }
/* texto de la pista más visible */
.sello__pista{
  top: 103%; font-size: 5.4cqw; font-style: normal; letter-spacing: .14em;
  color: var(--bordo); font-weight: 500;
  display:flex; align-items:center; justify-content:center; gap:.45em;
  animation: sello-pista2 2.6s 1.2s ease-in-out infinite both;
}
.pista__mano{ width:1.35em; height:1.35em; flex:none; animation: pista-toque 2.6s 1.2s ease-in-out infinite both; }
@keyframes sello-pista2{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
@keyframes pista-toque{ 0%,100%{ transform:translateY(0); } 12%{ transform:translateY(-3px) rotate(-6deg); } 24%{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero__sello::before, .hero__sello::after, .hero__sello .sello__foto, .pista__mano{ animation:none; }
  .hero__sello::before, .hero__sello::after{ opacity:0; }
}
/* Regalo: ramito completo, sin cortes */
.flor--rg-der{ top: .4rem; right: .2rem; width: 31%; max-width: 170px; transform: none; }

/* Tarjeta: ramito completo en la esquina (sin corte recto) */
.tj__esquina{ top: 4cqw; right: 5cqw; width: 20cqw; transform: rotate(-4deg); }

/* nombre de la canción */
.ff__player-label:has(+ .ff__player-tema){ margin-bottom:.25rem; }
.ff__player-tema{ margin:0 0 1.1rem; text-align:center; font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; color: var(--bordo); letter-spacing:.03em; }



/* ---- Galería: polaroids color crema ---- */
.ga{ padding-left:0; padding-right:0; text-align:center; overflow:hidden; }
.ga__titulo{ font-family: var(--f-serif); font-weight:500; font-size:1.18rem; letter-spacing:.17em; white-space:nowrap; text-transform:uppercase; color:#6F6346; margin:0 0 .4rem; }
.ga__sub{ font-family: var(--f-serif); font-style:italic; font-size:.95rem; color: var(--tinta-suave); margin:0 0 1rem; }
.ga__pista{ display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1.8rem calc(50% - min(35vw, 170px)) 1.6rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none; }
.ga__pista::-webkit-scrollbar{ display:none; }
.ga__foto{ position:relative; flex:0 0 min(70vw, 340px); margin:0; scroll-snap-align:center;
  background: url('../assets/img/grano-papel.png') 0 0 / 64px 64px, #F3EADB;
  padding:.65rem .65rem 2.3rem; box-shadow:0 6px 18px rgba(60,40,30,.15), 0 1px 3px rgba(60,40,30,.10);
  transform: rotate(-2deg) scale(.9); opacity:.75; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.ga__foto:nth-child(even){ transform: rotate(2deg) scale(.9); }
.ga__foto.activa{ transform: rotate(0) scale(1); opacity:1; }
.ga__foto picture{ display:block; }
.ga__foto img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.ga__puntos{ display:flex; justify-content:center; gap:.55rem; }
.ga__puntos button{ width:7px; height:7px; padding:0; border-radius:50%; border:1px solid var(--bordo); background:transparent; cursor:pointer; transition: background .3s, transform .3s; }
.ga__puntos button.activo{ background: var(--bordo); transform: scale(1.2); }

.ga{ position:relative; }
.ga__flor{ position:absolute; bottom:.2rem; left:-2.4rem; width:40%; max-width:190px; pointer-events:none; transform: scaleX(-1) rotate(-6deg); }
.ga__flor img{ display:block; width:100%; height:auto; }
.ga__pista{ position:relative; z-index:1; }