/* ═══════════════════════════════════════════════════════════════
   Secciones de la invitación (atardecer, cierre y reglas compartidas;
   recepción, atardecer y cierre). Las demás secciones tienen su
   propio archivo. Ninguna sección pinta fondo: todas flotan sobre
   el ambiente continuo de base.css.
   ═══════════════════════════════════════════════════════════════ */

/* Scroll suave para los enlaces internos, pero solo cuando la página ya está
   colocada (js/main.js pone .scroll-suave al terminar de cargar). Con smooth
   desde el inicio, Safari de iPhone ANIMA el salto al ancla de la URL y, si en
   medio se reacomoda el destino, la animación se suma al salto: la página
   terminaba unos 8 000 px más abajo de la sección pedida. */
html.scroll-suave { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Los decorados se salen de la pantalla sin provocar scroll lateral */
main { overflow-x: clip; }
/* Respaldo para Safari anterior a 16 (iOS 15), que no conoce overflow: clip */
@supports not (overflow: clip) {
  .portada, .historia, .boda { overflow: hidden; }
}

/* Mientras el sobre se monta, la pantalla ya es papel crema */
.js #sobre:empty {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  background: var(--marfil-luz);
}

.icono { flex: none; }



/* Portada, historia y «La boda» viven en css/portada.css, css/historia.css y css/boda.css (v2) */

/* ═══════════ 6 · Atardecer ═══════════
   Escena fija (sticky) mientras la sección pasa: el sol baja y las
   siluetas suben según el avance --p que escribe el motor. El scroll
   sigue siendo el del dedo.

   Medidas (21-oct-2026, a pedido de los novios: el tramo largo «se
   pasmaba» y parecía el final de la página). La sección mide 1.4
   pantallas: la escena entra (1 pantalla), queda fija solo 0.4 y se va
   mientras el itinerario asoma por abajo. El ocaso no cabe en 0.4: dura
   desde que la escena se fija hasta que ya subió un tercio, con la
   noche del itinerario ya a la vista. Así siempre se ve que hay más.

   Con --p (0 = el borde superior toca el pie de la ventana, 1 = el pie
   de la sección sale por arriba; recorrido = 1 + 1.4 = 2.4 pantallas):
     fija de p = 1/2.4 ≈ .4167 (contain 0 %) a p = 1.4/2.4 ≈ .5833
     ocaso (--q) de p ≈ .4167 a p = .72 (cover 72 %) → ×3.297
     frase: entra de p = .1875 (cover 18.75 %) a p = .375 (cover 37.5 %) y se
     despide de p ≈ .5833 (contain 100 %, la escena empieza a irse) a p = .66
     (cover 66 %), antes de meterse bajo la barra del menú
   Los mismos tramos van en animation-range más abajo. */
.atardecer {
  position: relative;
  height: 140vh;
  height: 140lvh;
  --q: clamp(0, calc((var(--p, 0) - .4167) * 3.297), 1);
  /* El velo arranca un poco después que el sol: la ciudad se apaga al final */
  --qv: clamp(0, calc((var(--q) - .12) / .88), 1);
  color: var(--crema);
}
.atardecer__escena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  width: 100%;
}
.atardecer__escena > * { position: absolute; }

.atardecer__sol {
  left: 50%;
  /* El sol arranca debajo del último renglón de la frase (3 renglones en
     pantallas angostas; los 26 px son el sobretítulo con su margen) */
  --frase-fin: calc(clamp(64px, 11vh, 120px) + 3vh + 26px + 3 * 1.2 * clamp(34px, 6.4vw, 66px));
  --sol-ini: max(27vh, calc(var(--frase-fin) + 16px));
}
/* En 320 px la frase cae en cuatro renglones: el sol arranca más abajo */
@media (max-width: 359px) {
  .atardecer__sol { --frase-fin: calc(clamp(64px, 11vh, 120px) + 3vh + 26px + 4 * 1.2 * clamp(34px, 6.4vw, 66px)); }
  top: var(--sol-ini);
  width: clamp(120px, 30vw, 230px);
  aspect-ratio: 1;
  margin-left: calc(clamp(120px, 30vw, 230px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #FFF6DF 0%, #FBE3AE 42%, #F2C27E 72%, #EBAE6C 100%);
  /* El halo es fijo (no se anima): se pinta una vez en la capa del sol */
  box-shadow:
    0 0 60px 18px rgba(248, 214, 150, .55),
    0 0 160px 70px rgba(240, 176, 110, .38);
  transform: translate3d(0, calc(var(--q) * (72vh - var(--sol-ini))), 0) scale(calc(1 + var(--q) * .2));
  opacity: calc(1 - var(--q) * .5);
  will-change: transform;
}
/* Desde 600 px la frase cabe en 2 renglones */
@media (min-width: 600px) {
  .atardecer__sol {
    --frase-fin: calc(clamp(64px, 11vh, 120px) + 3vh + 26px + 2 * 1.2 * clamp(34px, 6.4vw, 66px));
  }
}

.atardecer__frase {
  left: 0;
  right: 0;
  top: clamp(64px, 11vh, 120px);
  padding: 0 var(--margen);
  text-align: center;
  z-index: 2;   /* siempre encima de las siluetas y del velo */
  opacity: min(clamp(0, calc(var(--p, 0) * 5.333 - 1), 1), clamp(0, calc((.66 - var(--p, 0)) * 13.04), 1));
  transform: translate3d(0, calc((1 - var(--q)) * 3vh), 0);
  /* Se mueve y se funde cada cuadro: con capa propia la sombra del texto
     se pinta una sola vez */
  will-change: transform, opacity;
}
.atardecer__frase .t-sobretitulo { color: var(--marfil-hondo); text-shadow: 0 1px 3px rgba(43, 40, 32, .5); margin-bottom: 12px; }
.atardecer__frase .t-script {
  color: var(--crema);
  font-size: clamp(34px, 6.4vw, 66px);
  max-width: 15em;
  margin: 0 auto;
  text-shadow: 0 2px 30px rgba(43, 40, 32, .45);
}

.atardecer__capa {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  will-change: transform;
}
.atardecer__capa--cerros { height: 50%; transform: translate3d(0, calc((1 - var(--q)) * 5vh), 0); }
.atardecer__capa--ciudad { height: 52%; transform: translate3d(0, calc((1 - var(--q)) * 12vh), 0); }
.atardecer__capa--acueducto { height: 44%; transform: translate3d(0, calc((1 - var(--q)) * 24vh), 0); }

/* Al anochecer, un velo oscurece la ciudad desde abajo (color de --noche) */
.atardecer__velo {
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  background: linear-gradient(0deg, rgba(38, 38, 31, .92) 0%, rgba(38, 38, 31, .7) 38%, rgba(38, 38, 31, 0) 100%);
  opacity: var(--qv);
  pointer-events: none;
  will-change: opacity;
}

/* Ventanas bajas (teléfono acostado, laptop con zoom): la frase sube y se
   achica, y las siluetas bajan, para que no se encimen */
@media (max-height: 480px) {
  .atardecer__frase { top: 20px; }
  .atardecer__frase .t-script { font-size: clamp(24px, 9vh, 40px); }
  .atardecer__capa--cerros { height: 38%; }
  .atardecer__capa--ciudad { height: 40%; }
  .atardecer__capa--acueducto { height: 34%; }
}

/* Respaldo sin animation-timeline: el compositor interpola entre los
   valores que escribe el motor (rellena cuadros a 30 por segundo) */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .atardecer__sol,
    .js .atardecer__frase { transition: transform .12s linear, opacity .12s linear; }
    .js .atardecer__capa { transition: transform .12s linear; }
    .js .atardecer__velo { transition: opacity .12s linear; }
  }
}

/* El primer plano se funde con la noche que sigue: sin costura. El suelo
   del acueducto (#39352B en la imagen) no es --noche: el degradado empieza
   unos centímetros arriba del borde y lo lleva al color exacto de la noche
   justo donde termina la escena. */
.atardecer__suelo {
  left: 0;
  right: 0;
  top: calc(100% - 7vh);
  height: 53vh;
  background: linear-gradient(180deg, rgba(38, 38, 31, 0) 0%, var(--noche) 7vh, var(--noche) 21vh, rgba(38, 38, 31, 0) 100%);
  pointer-events: none;
}

/* ── Movimiento ligado al scroll ──
   Donde el navegador lo permite (Chrome 115+, Safari 26+), el sol y las
   siluetas se mueven con animaciones CSS atadas al scroll, sin JavaScript.
   En Chrome las calcula el compositor: van al ritmo exacto del dedo aunque el
   teléfono esté ocupado o en modo de bajo consumo. En Safari las calcula el
   compositor solo desde 26.4; antes, el hilo principal. En los demás
   navegadores queda el respaldo de arriba, con --p escrito por el motor.
   «contain 0 %» es el instante en que la escena se fija; «cover 72 %», cuando
   ya subió un tercio de pantalla y el itinerario asoma (los mismos tramos
   que --q y la opacidad de la frase, arriba). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .atardecer { view-timeline: --atardecer block; }

    .js .atardecer__sol,
    .js .atardecer__capa,
    .js .atardecer__velo,
    .js .atardecer__frase {
      animation-duration: 1ms;   /* lo exige algún navegador; el avance lo marca el scroll */
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --atardecer;
      animation-range: contain 0% cover 72%;
    }
    .js .atardecer__sol { animation-name: atardecer-sol; }
    .js .atardecer__capa--cerros { --sube: 5vh; animation-name: atardecer-sube; }
    .js .atardecer__capa--ciudad { --sube: 12vh; animation-name: atardecer-sube; }
    .js .atardecer__capa--acueducto { --sube: 24vh; animation-name: atardecer-sube; }
    .js .atardecer__velo { animation-name: atardecer-velo; }
    .js .atardecer__frase {
      animation-name: atardecer-frase, atardecer-sube;
      --sube: 3vh;
      animation-timeline: --atardecer, --atardecer;
      animation-range: cover 18.75% cover 66%, contain 0% cover 72%;
    }
  }
}
@keyframes atardecer-sol {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  to { transform: translate3d(0, calc(72vh - var(--sol-ini)), 0) scale(1.2); opacity: .5; }
}
@keyframes atardecer-sube {
  from { transform: translate3d(0, var(--sube), 0); }
  to { transform: translate3d(0, 0, 0); }
}
/* El velo espera el 12 % del tramo: es el mismo retraso que --qv */
@keyframes atardecer-velo { from, 12% { opacity: 0; } to { opacity: 1; } }
/* De cover 18.75 % a 66 %: entra hasta el 37.5 % (39.7 % del tramo), se queda
   y se despide desde contain 100 % (83.8 % del tramo) */
@keyframes atardecer-frase { from { opacity: 0; } 39.7%, 83.8% { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .atardecer { height: auto; --q: 1; --qv: 1; }
  .atardecer__escena { position: relative; }
  .atardecer__frase { opacity: 1; }
  /* La frase entra cuando el ambiente aún es claro: lleva su propio halo */
  .atardecer__frase::before {
    content: '';
    position: absolute;
    top: -90px; right: 0; bottom: -90px; left: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 50% at 50% 50%, rgba(74, 58, 46, .72) 0%, rgba(74, 58, 46, .6) 55%, rgba(74, 58, 46, 0) 100%);
  }
  .atardecer__frase .t-script { text-shadow: 0 2px 30px rgba(43, 40, 32, .45), 0 1px 3px rgba(43, 40, 32, .55); }
}

/* Sin JavaScript nadie escribe --p ni oscurece el ambiente: la escena
   queda quieta, con la frase visible y su propio cielo de ocaso */
html:not(.js) .atardecer {
  height: auto;
  --q: 1;
  --qv: 1;
  background: linear-gradient(180deg, #4A3A2E 0%, #7A4A3A 34%, #B9744F 66%, #E2A66B 100%);
}
html:not(.js) .atardecer__escena { position: relative; }
html:not(.js) .atardecer__frase { opacity: 1; }
/* Si el cielo fijo quedó sin tamaño (.sin-ambiente, lo marca el motor) la
   escena solo necesita su fondo: aquí el motor sí escribe --p */
.sin-ambiente .atardecer {
  background: linear-gradient(180deg, #4A3A2E 0%, #7A4A3A 34%, #B9744F 66%, #E2A66B 100%);
}

/* ═══════════ 11 · Cierre ═══════════ */
.cierre { padding-bottom: clamp(70px, 12vh, 140px); }
.cierre__nota { margin-top: .7em; opacity: .92; }

.planner {
  max-width: 460px;
  margin: clamp(30px, 6vh, 56px) auto 0;
  text-align: center;
}
.planner__nombre {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--cafe);
  margin-top: 10px;
}
.planner__medios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.planner__medios .boton { padding: 14px 26px; min-height: 48px; }
@supports not (inset: 0) {
  .planner__medios { gap: 0; }
  .planner__medios .boton { margin: 6px; }
}
.planner__pendiente { font-style: italic; }

.cierre__despedida { margin-top: clamp(90px, 18vh, 200px); }
.cierre__medallon {
  width: min(62vw, 300px);
  margin: 0 auto clamp(26px, 5vh, 46px);
}
.cierre__sello {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #FFFFFF 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #FFFDF8 0%, #F0ECE2 100%);
  box-shadow:
    0 0 0 1px rgba(205, 191, 158, .6),
    0 0 0 9px rgba(246, 242, 234, .06),
    0 0 90px 10px rgba(205, 191, 158, .16),
    0 34px 60px -30px rgba(0, 0, 0, .7);
}
/* Las nutrias de los novios (acuarela, 1220×973) centradas en el medallón: al 78 % del
   ancho la diagonal cabe dentro del círculo */
.cierre__nutrias {
  position: absolute;
  top: 50%; left: 50%;
  width: 78%;
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
}
.cierre__frase { color: var(--crema); }
.cierre__nombres { margin-top: clamp(12px, 2.4vh, 24px); color: var(--petalo); }
.cierre__lugar {
  margin-top: clamp(16px, 3vh, 28px);
  color: var(--crema);
  opacity: .8;
  font-size: clamp(12px, 2.2vw, 16px);
}
.cierre__lugar span { white-space: nowrap; }
@media (max-width: 420px) {
  .cierre__lugar span { display: block; }
  .cierre__lugar .cierre__raya { display: none; }
}

/* ═══════════ Respaldo sin aspect-ratio ═══════════
   (Safari anterior a 15, Chrome anterior a 88.) Sin él estas cajas medirían
   0 de alto, porque su contenido es absoluto. Va al final para ganar por orden. */
@supports not (aspect-ratio: 1) {
  .atardecer__sol { height: clamp(120px, 30vw, 230px); }
  .cierre__sello::before { content: ''; display: block; padding-top: 100%; }
}
@media (min-width: 900px) {
  @supports not (aspect-ratio: 1) {
    }
}