/* Home · intro del sobre + recorrido (mundos encadenados con el scroll). */

/* ---------- 01 · intro: el sobre ---------- */
.intro { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: safe center; justify-content: center; padding: 90px var(--gutter) 60px; background: var(--ciruela); color: var(--hueso); }
.intro > .ilu { position: absolute; inset: 0; background-color: rgba(113, 48, 73, .22); }
.intro__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.intro__names { font-size: clamp(40px, 5.6vw, 80px); }
.intro__names .script { color: var(--malva-claro); font-size: 1.08em; }
.intro__meta { display: flex; flex-direction: column; gap: 2px; }
.intro__meta .caps:first-child { color: var(--malva-claro); }
.intro__tap { color: var(--malva-claro); font-size: 11px; transition: opacity .4s var(--ease); }
.intro__after { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s; pointer-events: none; }
.intro__after .quote { font-size: clamp(22px, 2.2vw, 28px); }
.intro__after .pill { margin-top: 8px; }
.is-open .intro__tap { opacity: 0; height: 0; overflow: hidden; }
.is-open .intro__after { opacity: 1; transform: none; pointer-events: auto; }

.envelope { position: relative; width: min(360px, 78vw); aspect-ratio: 3 / 2; margin: 18px 0 6px; padding: 0; border: 0; background: none; perspective: 1200px; transition: margin .9s var(--ease); }
.is-open .envelope { margin-top: 134px; cursor: default; }
.envelope:not([aria-expanded="true"]) { animation: nudge 3.2s var(--ease) 1.5s infinite; }
@keyframes nudge { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-1.5deg); } 95% { transform: rotate(1.5deg); } }
.envelope__body { position: absolute; inset: 0; z-index: 2; background-color: var(--hueso); background-image: repeating-linear-gradient(135deg, rgba(53, 21, 33, .07) 0 1px, transparent 1px 12px); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.envelope__body::after { color: var(--ciruela); top: 14px; bottom: auto; }
.envelope__flap { position: absolute; inset: 0 0 auto; height: 50%; z-index: 4; background: #E9DCC8; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .9s var(--ease) .1s, z-index 0s .5s; }
.envelope__card { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 8%; z-index: 1; background: var(--crema); color: var(--ciruela); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: transform 1s var(--ease) .7s; }
.envelope__card .script { font-size: clamp(28px, 3.6vw, 40px); color: var(--vino); }
.envelope__card .caps { font-size: 10px; }
.envelope__seal { position: absolute; z-index: 5; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--vino); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.envelope__seal img { width: 42px; }
.is-open .envelope__seal { opacity: 0; transform: scale(.6); }
.is-open .envelope__flap { transform: rotateX(180deg); z-index: 0; }
.is-open .envelope__card { transform: translateY(-34%); z-index: 3; }

/* ---------- recorrido ----------
   Sin JS (o con movimiento reducido): los mundos se apilan uno tras otro.
   Con JS: #journey da el largo de scroll y #stage queda fijo (sticky);
   home.js anima capas y textos con un timeline de GSAP ligado al scroll. */
.journey { position: relative; }
.stage { position: relative; }
.world { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 100px var(--gutter) 90px; }
.world .layer { position: absolute; }
.layer--fondo { inset: -6% 0; }
.layer--medio { left: -2%; right: -2%; bottom: 0; height: 38%; }
.layer--pp-l { left: 0; bottom: 0; width: 22%; height: 62%; }
.layer--pp-r { right: 0; bottom: 0; width: 22%; height: 70%; }
.layer--medio::after, .layer--pp-l::after, .layer--pp-r::after { bottom: 14px; }
.world[data-world="bienvenida"] .layer--fondo { background-color: rgba(0, 0, 0, .14); }
.world[data-world="encuentro"] .layer--medio { background-color: rgba(23, 62, 78, .55); }
.world[data-world="destino"] .layer--medio { background-color: rgba(23, 62, 78, .45); }
.world[data-world="destino"] .layer--pp-l, .world[data-world="destino"] .layer--pp-r { background-color: rgba(53, 21, 33, .45); }
.world[data-world="cierre"] .layer--medio { background-color: rgba(71, 124, 128, .35); }

.copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 640px; }
.copy::before { content: ""; position: absolute; inset: -18% -24%; z-index: -1; background: radial-gradient(closest-side, var(--world-bg) 35%, transparent); opacity: .85; pointer-events: none; }
.copy .title .display { font-size: clamp(40px, 5.4vw, 80px); }
.copy .title .script { font-size: clamp(46px, 6vw, 88px); }
.copy p { max-width: 540px; }
.copy__venue { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.copy__venue .display { font-size: clamp(22px, 2.2vw, 30px); }
.copy__date { font-size: clamp(34px, 3.6vw, 52px); letter-spacing: .08em; }
.copy__sign { font-size: clamp(36px, 3.8vw, 54px); color: var(--malva-claro); margin-top: 8px; }

.world[data-world="bienvenida"] { --world-bg: var(--vino); background: var(--vino); }
.world[data-world="encuentro"] { --world-bg: var(--atlantico); background: var(--atlantico); }
.world[data-world="destino"] { --world-bg: var(--musgo); background: var(--musgo); }
.world[data-world="cierre"] { --world-bg: var(--abismo); background: var(--abismo); }

.countdown { display: flex; justify-content: center; }
.countdown > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 clamp(14px, 2vw, 28px); }
.countdown > div + div { border-left: 1px solid rgba(242, 232, 216, .35); }
.countdown .display { font-size: clamp(30px, 3vw, 44px); }
.countdown .caps { font-size: 10px; }

.journey__progress { display: none; }

/* modo recorrido (lo activa home.js) */
.js-journey .journey { height: calc(var(--worlds, 4) * 150vh); }
.js-journey .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js-journey .world { position: absolute; inset: 0; min-height: 0; visibility: hidden; }
.js-journey .journey__progress { display: flex; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 20; flex-direction: column; gap: 12px; }
.journey__progress span { width: 7px; height: 7px; border: 1px solid var(--hueso); transform: rotate(45deg); opacity: .6; transition: background .3s, opacity .3s; }
.journey__progress span.is-on { background: var(--hueso); opacity: 1; }

@media (max-width: 900px) {
  .layer--pp-l, .layer--pp-r { width: 26%; height: 34%; }
  .layer--medio { height: 30%; }
  .copy::before { inset: -10% -14%; }
  .js-journey .journey__progress { display: none; }
  .copy .title .display { font-size: clamp(30px, 8.6vw, 40px); }
  .copy .title .script { font-size: clamp(38px, 10vw, 48px); }
  .layer--pp-l::after, .layer--pp-r::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope { animation: none !important; }
  .envelope__flap, .envelope__card, .envelope__seal, .intro__after { transition: none; }
}