/* 20 · Lacre y Pergamino · Carta sellada.
   La invitación se lee como una carta: el sello de lacre detrás del «&», la pluma y el pergamino a dos profundidades.
   Gesto propio en la fecha: el sello baja, se parte en dos y la cera se vuelve escudo y luego la hoja con el día.
   En «Dónde» el pergamino se desenrolla entre dos rodillos. Partículas: trocitos de lacre y polvo sepia.
   Letras: Cormorant Garamond (nombres y títulos) · Yellowtail (solo el «&» y un acento) · Barlow (texto). */

.lp {
	--claro: #F4EAD3;
	--claro-2: #EADBB9;
	--lacre: #9E2A24;
	--lacre-2: #6E1B18;
	--sepia: #8A6A3F;
	--acc: #9E2A24;
	--script-c: #9E2A24;
	--banda-1: #3A1512;
	--banda-1b: #22100C;
	--banda-2: #6E1B18;
	--banda-2b: #47100D;
	--banda-txt: #F7EEDC;
	--acc-banda: #F0C98F;
	--mota: rgb(255 226 190);
	--sobre-papel: #F1E4C8;
	--sobre-solapa: #EADBB9;
	--sello-1: #9E2A24;
	--sello-2: #5E1714;
	--sello-txt: #FBEFD9;
	--cielo-base: #F4EAD3;
}
.lp .jd-pintura { background: radial-gradient(60% 50% at 80% 10%, rgb(255 246 226 / .9), transparent 70%), radial-gradient(50% 40% at 10% 90%, rgb(158 42 36 / .07), transparent 70%), linear-gradient(180deg, #F4EAD3, #EADBB9); }
.lp .jd-pintura::after { display: none; }

/* Tipografía en negrita: slab muy pesada para nombres y títulos, script grueso solo en el «&». */
.lp .jd-titulo-sec { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem); color: var(--txt); }
.lp .jd-titulo-sec i { font-size: 1.18em; }
.lp .jd-sub, .lp .jd-kicker, .lp .jd-lugar-tipo, .lp .jd-cierre-fecha, .lp .jd-firma { font-weight: 700; }
.lp .jd-lugar-nombre, .lp .jd-grande, .lp .jd-momento-hora, .lp .jd-cierre-nombres, .lp .respuesta-texto { font-family: var(--titulos); }
.lp .jd-grande { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.25; }
.lp .jd-lugar-nombre { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem); }
.lp .boton { font-weight: 700; }

/* ---------- Portada ---------- */
.lp-cielo .c1 { background: radial-gradient(closest-side, rgb(255 248 230 / .95), rgb(255 248 230 / 0)); }
.lp-cielo .c2 { background: radial-gradient(closest-side, rgb(158 42 36 / .2), rgb(158 42 36 / 0)); }
.lp-cielo .c3 { background: radial-gradient(closest-side, rgb(138 106 63 / .28), rgb(138 106 63 / 0)); }
.lp-cielo .c4 { background: conic-gradient(from 0deg at 50% 50%, transparent 0 8%, rgb(255 240 205 / .45) 12%, transparent 17% 42%, rgb(255 240 205 / .35) 47%, transparent 53% 76%, rgb(255 236 200 / .3) 81%, transparent 87%); opacity: .8; }

.lp-pergamino-p { width: min(40vw, 540px); left: -10vw; bottom: 1svh; rotate: -9deg; transform: translate3d(calc(var(--e) * -16vw), calc(var(--e) * 14svh), 0) rotate(calc(var(--e) * -10deg)); }
.lp-pluma-p { width: min(24vw, 320px); right: 3vw; top: 7svh; transform: translate3d(calc(var(--e) * 12vw), calc(var(--e) * -18svh), 0) rotate(calc(var(--e) * 26deg)); }
.lp-portada-texto { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: clamp(.6rem, 2svh, 1.2rem); padding: 4svh var(--margen) 10svh; text-align: center; }
.lp-kicker { color: var(--lacre); }
.lp-nombres-caja { position: relative; display: grid; place-items: center; }
.lp-sello-p { position: absolute; z-index: 0; left: 50%; top: 50%; width: clamp(150px, 17vw, 250px); translate: -50% -50%; filter: drop-shadow(0 18px 24px rgb(80 20 15 / .28)); transform: translate3d(0, calc(var(--e) * 44svh), 0) scale(calc(1 + var(--e) * .3)) rotate(calc(var(--e) * 34deg)); }
.lp .lp-nombres { position: relative; z-index: 1; grid-row: auto; font-size: clamp(3.4rem, 1rem + 7.4vw, 9.4rem); line-height: .94; color: var(--txt); letter-spacing: -0.01em; max-width: none; opacity: calc(1 - var(--e) * 1.15); translate: 0 calc(var(--e) * -10svh); }
.lp .lp-nombres .jd-y { font-size: 1.05em; line-height: 1; margin: .02em 0 .06em; color: color-mix(in oklab, #FBEFD9 calc((1 - var(--e)) * 100%), var(--lacre)); text-shadow: 0 2px 10px rgb(60 10 8 / calc((1 - var(--e)) * .45)); }
.lp-fecha-corta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1rem; font: 700 .8rem/1.3 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--txt-suave); padding-left: .3em; opacity: calc(1 - var(--e) * 1.8); }
.lp-fecha-corta i { width: 7px; height: 7px; border-radius: 50%; background: var(--lacre); }
.lp .lp-baja { color: var(--txt-suave); font-weight: 700; opacity: calc(.9 - var(--e) * 3); }

/* ---------- La carta ---------- */
.lp-intro { padding: clamp(5rem, 12vh, 8rem) 0; }
.lp-carta { position: relative; width: min(100% - 2 * var(--margen), 46rem); padding: clamp(2.2rem, 6vw, 4.4rem); display: grid; gap: 1.3rem; background: radial-gradient(120% 90% at 50% 40%, transparent 62%, rgb(138 106 63 / .22)), linear-gradient(172deg, #FBF4E2, #F1E4C8 60%, #E8D4AA); box-shadow: 0 50px 80px -50px rgb(60 30 15 / .55), 0 2px 0 rgb(255 255 255 / .6) inset; rotate: -.6deg; }
.lp-saludo { font: 700 .82rem/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--sepia); }
.lp-saludo i { font: 400 2.6em/0 var(--script); letter-spacing: 0; text-transform: none; color: var(--lacre); padding-left: .1em; vertical-align: -.18em; }
.lp-frase { font: 500 clamp(1.35rem, 1rem + 1.3vw, 2.05rem)/1.45 var(--texto); color: var(--tinta); text-wrap: pretty; }
.lp-firma { justify-self: end; font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1 var(--titulos); color: var(--tinta); }
.lp-firma i { font: 400 1.3em/1 var(--script); color: var(--lacre); padding: 0 .1em; }
.lp-pluma-carta { position: absolute; z-index: 2; width: clamp(110px, 13vw, 190px); right: -16%; top: -54%; rotate: 16deg; pointer-events: none; filter: drop-shadow(0 18px 18px rgb(40 20 10 / .2)); }
.lp-detalle { height: 16rem; margin-inline: calc(clamp(2.2rem, 6vw, 4.4rem) * -1); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }

/* ---------- La fecha: el sello se parte; la cera se vuelve escudo y luego la hoja ---------- */
.lp-fecha { --d: clamp(0, calc(var(--sc-p, 0) / .14), 1); --k: clamp(0, calc((var(--sc-p, 0) - .16) / .26), 1); --t: clamp(0, calc((var(--m2) - .55) * 2.4), 1); }
.lp-fecha-escena { height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: radial-gradient(60% 55% at 50% 50%, rgb(158 42 36 / .35), transparent 75%); }
.lp-pergamino-f { position: absolute; z-index: 0; width: min(38vw, 460px); right: -8vw; bottom: 6svh; rotate: 14deg; opacity: .5; pointer-events: none; }
.lp-pieza { position: relative; z-index: 2; width: min(86vw, 31rem, 66svh * .8); aspect-ratio: 4 / 5; transform: translate3d(0, calc((1 - var(--d)) * -46svh), 0) scale(calc(.82 + var(--d) * .18)); }
.lp-morph { position: absolute; inset: 0; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .4)); }
.lp-morph i { position: absolute; inset: 0; }
.lp-morph-cera { background: radial-gradient(70% 60% at 36% 30%, #C9473D, #9E2A24 46%, #5E1714); }
.lp-morph-papel { opacity: var(--m2); background: radial-gradient(110% 80% at 50% 45%, transparent 58%, rgb(138 106 63 / .4)), linear-gradient(172deg, #FBF4E2, #F1E4C8 55%, #E2CC9F); }
.lp-mitad { position: absolute; z-index: 3; left: 20%; top: 26%; width: 60%; height: 48%; pointer-events: none; }
.lp-mitad img { width: 100%; height: 100%; object-fit: contain; }
.lp-mitad-izq { transform: translate3d(calc(var(--k) * -70%), calc(var(--k) * 30%), 0) rotate(calc(var(--k) * -32deg)); opacity: calc(1 - var(--k) * 1.15); }
.lp-mitad-der { transform: translate3d(calc(var(--k) * 70%), calc(var(--k) * 34%), 0) rotate(calc(var(--k) * 30deg)); opacity: calc(1 - var(--k) * 1.15); }
.lp-fecha-texto { position: absolute; z-index: 2; inset: 7% 8%; display: grid; place-content: center; justify-items: center; gap: .35rem; text-align: center; opacity: var(--t); translate: 0 calc((1 - var(--t)) * 18px); --txt: var(--tinta); --txt-suave: color-mix(in oklab, var(--tinta) 72%, transparent); color: var(--tinta); }
.lp-sem { font: 700 .78rem/1 var(--texto); letter-spacing: .38em; text-transform: uppercase; color: var(--lacre); padding-left: .38em; }
.lp-num { font: 400 clamp(5rem, 3rem + 7vw, 9.5rem)/.9 var(--titulos); color: var(--tinta); letter-spacing: -0.03em; }
.lp-mes { font: 700 clamp(.95rem, .8rem + .5vw, 1.2rem)/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }
.lp-hora { font: 600 .82rem/1 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: var(--txt-suave); margin-bottom: .4rem; }
.lp .lp-faltan { margin: .2rem auto .9rem; border-color: rgb(43 30 20 / .2); }
.lp .lp-faltan div { padding: .55rem .9rem; justify-items: center; }
.lp .lp-faltan div + div { padding-left: .9rem; border-color: rgb(43 30 20 / .2); }
.lp .lp-faltan strong { font-family: var(--titulos); font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); color: var(--tinta); }
.lp .lp-fecha-texto .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); }

/* ---------- Dónde: el pergamino se desenrolla ---------- */
.lp-lugares { padding: clamp(6rem, 14vh, 9rem) 0; }
.lp-rollo { position: relative; width: min(100% - 2 * var(--margen), 66rem); }
.lp-rollo-cerrado { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(78vw, 560px); translate: -50% -50%; pointer-events: none; transition: opacity 700ms var(--salida) 250ms, scale 900ms var(--salida); }
.lp-rollo.visto .lp-rollo-cerrado { opacity: 0; scale: 1.25 .3; }
.lp-pliego { position: relative; z-index: 1; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.6rem, 6vw, 5rem); background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgb(138 106 63 / .26)), linear-gradient(176deg, #FBF4E2, #F1E4C8 55%, #E6D0A4); box-shadow: 0 50px 80px -50px rgb(60 30 15 / .5); clip-path: inset(50% 0 50% 0); transition: clip-path 1700ms var(--transito) 450ms; }
.lp-rollo.visto .lp-pliego { clip-path: inset(0 0 0 0); }
.lp-titulo { text-align: center; }
.lp-rodillo { position: absolute; z-index: 3; left: -1.6%; right: -1.6%; height: 30px; border-radius: 15px; background: linear-gradient(180deg, #F6EBD2, #E9D7AE 30%, #C9AE7A 68%, #8A6A3F); box-shadow: 0 10px 18px -8px rgb(60 30 15 / .5); top: calc(50% - 15px); opacity: 0; transition: top 1700ms var(--transito) 450ms, opacity 400ms var(--salida) 300ms; }
.lp-rodillo::before, .lp-rodillo::after { content: ""; position: absolute; top: 50%; width: 12px; height: 38px; margin-top: -19px; border-radius: 6px; background: linear-gradient(90deg, #6E1B18, #9E2A24 50%, #6E1B18); }
.lp-rodillo::before { left: -6px; }
.lp-rodillo::after { right: -6px; }
.lp-rollo.visto .lp-rodillo { opacity: 1; }
.lp-rollo.visto .lp-rodillo-arriba { top: -15px; }
.lp-rollo.visto .lp-rodillo-abajo { top: calc(100% - 15px); }
.lp .lp-lugar + .lp-lugar { border-color: rgb(43 30 20 / .2); }
.lp .jd-lugar-tipo { color: var(--lacre); }

/* ---------- El gran día: la pluma escribe la línea; cada hora es una gota de lacre ---------- */
.lp-dia { overflow: hidden; }
.lp-dia .jd-dia-grid { position: relative; }
.lp .lp-dia .jd-ruta-avance { background: linear-gradient(180deg, transparent, #F0C98F 25%, #C9473D); }
.lp .lp-momento::before { width: 18px; height: 18px; margin-left: -9px; background: radial-gradient(circle at 35% 30%, #D0574C, #9E2A24 50%, #5E1714); border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%; }
.lp .lp-momento.visto::before { background: radial-gradient(circle at 35% 30%, #E07065, #B8352C 50%, #6E1B18); box-shadow: 0 0 18px 3px rgb(201 71 61 / .45); }
.lp .lp-dia .jd-momento-hora { color: var(--banda-txt); }
.lp-pluma-ruta { position: absolute; z-index: 4; width: 104px; left: calc(50% + clamp(.6rem, 1.5vw, 1.5rem) + 1rem - 8px); top: calc(var(--recorre, 0) * (100% - 40px) - 126px); rotate: -4deg; pointer-events: none; filter: drop-shadow(0 10px 12px rgb(0 0 0 / .35)); }

/* ---------- Detalles ---------- */
.lp-detalles { position: relative; overflow: hidden; }
.lp-pergamino-d { position: absolute; z-index: 0; width: min(32vw, 420px); right: -7vw; top: 12%; rotate: 12deg; opacity: .85; pointer-events: none; }
.lp-detalles .jd-detalles-grid { position: relative; z-index: 1; }

/* ---------- Confirmar y cierre ---------- */
.lp-confirmar { overflow: hidden; }
.lp-sello-c { position: absolute; z-index: 1; width: clamp(96px, 11vw, 170px); left: 3vw; top: 7%; rotate: -14deg; pointer-events: none; filter: drop-shadow(0 18px 20px rgb(0 0 0 / .35)); }
.lp-confirmar .jd-confirmar-grid { position: relative; z-index: 2; }
.lp .jd-hoja-papel .boton { background: var(--lacre); border-color: var(--lacre); color: #FBEFD9; }
.lp-cierre { --j: clamp(0, calc((var(--sc-p, 0) - .08) / .3), 1); }
.lp-sello-cierre { position: relative; width: clamp(130px, 15vw, 210px); aspect-ratio: 1; margin: 0 auto -1rem; z-index: 3; }
.lp-sello-cierre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .35)); }
.lp-cierre-izq { transform: translate3d(calc((1 - var(--j)) * -80%), calc((1 - var(--j)) * 30%), 0) rotate(calc((1 - var(--j)) * -30deg)); }
.lp-cierre-der { transform: translate3d(calc((1 - var(--j)) * 80%), calc((1 - var(--j)) * 34%), 0) rotate(calc((1 - var(--j)) * 28deg)); }
.lp .lp-cierre .jd-cierre-texto { gap: .8rem; }
.lp-cierre { grid-template-rows: auto auto; align-content: center; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.lp-pergamino-p { width: 74vw; left: -20vw; bottom: 5svh; }
	.lp-pluma-p { width: 32vw; right: -5vw; top: 5svh; }
	.lp-sello-p { width: clamp(120px, 34vw, 160px); }
	.lp .lp-nombres { font-size: clamp(3rem, 1rem + 9.4vw, 4.6rem); }
	.lp-pluma-carta { width: 92px; right: -2%; top: -9%; }
	.lp-pluma-ruta, .lp-pergamino-d, .lp-pergamino-f { display: none; }
	.lp .lp-faltan div { padding: .5rem .55rem; }
	.lp .lp-faltan div + div { padding-left: .55rem; }
	.lp-rodillo { left: -3%; right: -3%; }
	.lp-sello-c { left: auto; right: 4vw; top: 2.2rem; width: 78px; }
	.lp .lp-baja { display: none; }
}

/* ---------- Movimiento reducido ---------- */
.quieto .lp-fecha { --d: 1; --k: 1; --t: 1; }
.quieto .lp-cierre { --j: 1; }
.quieto .lp-pliego { clip-path: none; transition: none; }
.quieto .lp-rodillo { transition: none; opacity: 1; }
.quieto .lp-rodillo-arriba { top: -15px; }
.quieto .lp-rodillo-abajo { top: calc(100% - 15px); }
.quieto .lp-rollo-cerrado { display: none; }
.quieto .lp-pieza { transform: none; }
.quieto .lp .lp-nombres .jd-y, .quieto .lp-nombres .jd-y { color: #FBEFD9; }
.sin-js .lp-pliego { clip-path: none; }
.sin-js .lp-fecha { --d: 1; --k: 1; --t: 1; --m1: 1; --m2: 1; }

/* Auditoría: el lacre respalda el enlace, sin tocar los nombres. */
.lp .lp-nombres { font-weight: 500; font-size: clamp(3.4rem,8vw,6rem); line-height: 1.05; }
.lp .lp-nombres .jd-y { font-size: .85em; line-height: 1.4; margin: .45em 0; }
.lp .lp-sello-p { width: clamp(80px,22vw,110px); }