/* Tarjeta Convida · tanda 12–15 · estructura compartida («jd»).
   Sale de Café y Alba (editorial/disenos/cafe.css) y se vuelve paramétrica: cada diseño solo define
   su identidad (colores, letras, pinturas) y su gesto propio en su hoja (volcan.css, rio.css, peonia.css, olivo.css).
   Actos: claros sobre la pintura del diseño · bandas de contraste con su propia pintura · orillas que cruzan cada borde.
   Movimiento con transform, opacity, clip-path y máscaras. El texto nunca se mueve con el paralaje.
   Curvas: salida cubic-bezier(.23,1,.32,1) · tránsitos cubic-bezier(.77,0,.175,1). */

.jd {
	/* Cada diseño sobrescribe estos valores en su hoja. */
	--claro: #F5EFE6;
	--claro-2: #EDE3D4;
	--txt: var(--tinta);
	--txt-suave: color-mix(in oklab, var(--tinta) 72%, var(--claro));
	--acc: var(--acento);
	--script-c: var(--acento);
	--banda-1: #2B2A2E;
	--banda-1b: #1F1E22;
	--banda-2: #4A2A45;
	--banda-2b: #351D31;
	--banda-txt: #F7F1E8;
	--acc-banda: #E9C9A0;
	--banda-1-img: var(--f3, none);
	--banda-1-img-m: var(--f3m, var(--banda-1-img));
	--banda-2-img: var(--f2, none);
	--banda-2-img-m: var(--f2m, var(--banda-2-img));
	--velo-a: 74%;
	--velo-b: 58%;
	--orilla-a: var(--acento);
	--orilla-b: var(--hoja);
	--mota: rgb(255 240 214);
	--sobre-papel: #F3ECE1;
	--sobre-solapa: #EFE6D8;
	--sobre-sombra: rgb(60 40 30 / .18);
	--sello-1: var(--acento);
	--sello-2: color-mix(in oklab, var(--acento) 70%, black);
	--sello-txt: #FFF6EA;
	--marco: min(100% - 2 * var(--margen), 74rem);
	--orilla-h: clamp(70px, 13vh, 160px);
	--salida: cubic-bezier(.23, 1, .32, 1);
	--transito: cubic-bezier(.77, 0, .175, 1);
	background: var(--claro);
	color: var(--txt);
	font-family: var(--texto);
	font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
	line-height: 1.65;
	font-variant-numeric: lining-nums;
	overflow-x: clip;
}
html:has(body.jd) { overflow-x: clip; background: var(--claro); }
.jd ::selection { background: var(--acc); color: #fff; }
.jd .invitacion { position: relative; z-index: 2; overflow-x: clip; }
.jd-marco { width: var(--marco); margin-inline: auto; position: relative; z-index: 3; }
.jd-intro, .jd-fecha, .jd-album, .jd-detalles { position: relative; }
html:not(.con-fotos) [data-solo-fotos] { display: none !important; }

/* ---------- Botones ---------- */
.jd .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); border-radius: 999px; letter-spacing: .08em; font-weight: 500; transition: background-color 300ms var(--salida), color 300ms var(--salida), border-color 300ms var(--salida), transform 160ms var(--salida), box-shadow 450ms var(--salida); }
.jd .boton:active { transform: scale(.97); }
.jd .boton-suave { background: transparent; color: var(--txt); border: 1px solid color-mix(in oklab, var(--txt) 34%, transparent); }
.jd-banda .boton { background: var(--banda-txt); border-color: var(--banda-txt); color: var(--banda-1b); }
.jd-banda .boton-suave { background: transparent; color: var(--txt); border-color: color-mix(in oklab, var(--txt) 42%, transparent); }
@media (hover: hover) and (pointer: fine) {
	.jd .boton:hover { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 14px 30px -14px color-mix(in oklab, var(--acc) 80%, transparent); }
	.jd .boton-suave:hover { background: var(--tinta); border-color: var(--tinta); color: var(--claro); box-shadow: none; }
	.jd-banda .boton:hover { background: var(--acc-banda); border-color: var(--acc-banda); color: var(--banda-1b); }
	.jd-banda .boton-suave:hover { background: var(--banda-txt); border-color: var(--banda-txt); color: var(--banda-1b); }
}
.jd .pildora { background: var(--tinta); color: var(--claro); border-radius: 999px; box-shadow: 0 16px 30px -14px rgb(20 16 20 / .6); transition: transform 420ms var(--salida), background-color 600ms var(--salida), color 600ms var(--salida); }
body.jd[data-jd-tono="oscuro"] .pildora { background: var(--banda-txt); color: var(--banda-1b); }
.jd .musica-boton { background: color-mix(in oklab, var(--claro) 85%, transparent); border-color: color-mix(in oklab, var(--tinta) 22%, transparent); color: var(--tinta); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.jd .aviso { background: var(--tinta); color: var(--claro); border-radius: 999px; }

/* ---------- El fondo de los actos claros: la pintura del diseño con un velo del color claro ---------- */
.jd-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--claro); }
.jd-pintura { position: absolute; inset: -7% -4%; background: var(--fondo-claro, var(--f1, none)) 50% 55% / cover no-repeat, linear-gradient(180deg, var(--claro), var(--claro-2)); transform: translate3d(0, var(--jd-py, 0px), 0) scale(1.04); will-change: transform; }
.jd-pintura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--claro) var(--velo-a), transparent), color-mix(in oklab, var(--claro) var(--velo-b), transparent) 60%, color-mix(in oklab, var(--claro) var(--velo-a), transparent)); }
.jd-luz { position: absolute; inset: -10% -10% auto; height: 70vh; background: radial-gradient(50% 70% at 70% 0%, color-mix(in oklab, var(--mota) 45%, transparent), transparent 72%); }
@media (max-width: 760px) {
	.jd-pintura { background-image: var(--fondo-claro-m, var(--f1m, var(--f1, none))), linear-gradient(180deg, var(--claro), var(--claro-2)); }
}

/* Motas que flotan (luz, polen, ceniza o pétalos según el diseño). */
.jd-destellos { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.jd-destellos i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, var(--mota), color-mix(in oklab, var(--mota) 55%, transparent) 45%, transparent 75%); will-change: transform, opacity; animation: jd-flota var(--d) cubic-bezier(.45, 0, .55, 1) var(--t) infinite; }
@keyframes jd-flota { 0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); } 45% { opacity: .8; transform: translate3d(calc(var(--dx) * .5), -18px, 0) scale(1); } 75% { opacity: .3; transform: translate3d(var(--dx), -40px, 0) scale(.8); } }

/* ---------- Bandas de contraste y sus orillas ---------- */
.jd-banda { position: relative; z-index: 2; --txt: var(--banda-txt); --txt-suave: color-mix(in oklab, var(--banda-txt) 80%, transparent); --acc: var(--acc-banda); --script-c: var(--acc-banda); color: var(--txt); }
.jd-banda:has(> .jd-orilla-abajo) { z-index: 3; }
.jd-banda-1 { --banda-arriba: var(--banda-1); --banda-abajo: var(--banda-1b); background: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 88%, transparent), color-mix(in oklab, var(--banda-1b) 95%, transparent)), var(--banda-1-img) 50% 50% / cover, var(--banda-1); }
.jd-banda-2 { --banda-arriba: var(--banda-2); --banda-abajo: var(--banda-2b); background: linear-gradient(180deg, color-mix(in oklab, var(--banda-2) 86%, transparent), color-mix(in oklab, var(--banda-2b) 94%, transparent)), var(--banda-2-img) 50% 50% / cover, var(--banda-2); }
@media (max-width: 760px) {
	.jd-banda-1 { background: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 88%, transparent), color-mix(in oklab, var(--banda-1b) 95%, transparent)), var(--banda-1-img-m) 50% 50% / cover, var(--banda-1); }
	.jd-banda-2 { background: linear-gradient(180deg, color-mix(in oklab, var(--banda-2) 86%, transparent), color-mix(in oklab, var(--banda-2b) 94%, transparent)), var(--banda-2-img-m) 50% 50% / cover, var(--banda-2); }
}
.jd-orilla { position: absolute; left: 0; right: 0; height: var(--orilla-h); z-index: 2; pointer-events: none; }
.jd-orilla svg { display: block; width: 100%; max-width: none; height: 100%; overflow: visible; }
.jd-orilla-arriba { top: calc(var(--orilla-h) * -1 + 6px); }
.jd-orilla-abajo { top: calc(100% - 6px); transform: scaleY(-1); }
.jd-orilla .jd-capa-a path { fill: var(--orilla-a); }
.jd-orilla .jd-capa-b path { fill: var(--orilla-b); }
.jd-orilla-arriba .jd-capa-frente path { fill: var(--banda-arriba); }
.jd-orilla-abajo .jd-capa-frente path { fill: var(--banda-abajo); }
.jd-capa { transform-box: fill-box; will-change: transform; }
.jd-capa-a { opacity: .9; transform: translateX(calc((var(--sc-p, .5) - .5) * -90px)); }
.jd-capa-b { opacity: .92; transform: translateX(calc((var(--sc-p, .5) - .5) * 60px)); }
.jd-capa-a path { animation: jd-mece 9s cubic-bezier(.45, 0, .55, 1) infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.jd-capa-b path { animation: jd-mece 11s cubic-bezier(.45, 0, .55, 1) -3s infinite alternate-reverse; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes jd-mece { from { transform: translateX(-14px) scaleY(1); } to { transform: translateX(14px) scaleY(1.08); } }

/* ---------- Tipografía ---------- */
.jd-titulo-sec { font: 400 clamp(2.8rem, 1.5rem + 4.2vw, 6rem)/1.02 var(--titulos); letter-spacing: -0.01em; color: var(--txt); margin-bottom: clamp(2.4rem, 7vh, 4.4rem); }
.jd-titulo-sec i, .jd-mes i, .jd-cierre-nombres i, .jd-firma i { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--script-c); letter-spacing: 0; }
.jd-titulo-sec i { font-size: 1.32em; line-height: .7; padding-left: .12em; }
.jd-centro { text-align: center; }
.jd .l { display: block; overflow: clip; padding: .16em .45em .4em; margin: -.16em -.45em -.4em; }
.jd .l > span { display: inline-block; }
.con-js .jd [data-lineas] .l > span, .con-js .jd-titulo-sec .l > span { transform: translate3d(0, 130%, 0); transition: transform 1400ms var(--salida); transition-delay: calc(var(--i, 0) * 140ms); }
.con-js .jd .visto .l > span { transform: none !important; }
.jd-sub { font: 600 .74rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc); margin-bottom: 1rem; }
.jd-nota { color: var(--txt-suave); }
.jd-kicker, .jd-sobre-kicker { font: 600 .72rem/1.4 var(--texto); letter-spacing: .42em; text-transform: uppercase; color: var(--acc); padding-left: .42em; }

/* ---------- El sobre: grande, a pantalla completa, con solapa, pliegues y sello ----------
   La mesa (detrás) se aclara y la caja (el sobre) retrocede un poco para que la solapa se vea al abrirse. */
.jd-sobre { position: fixed; inset: 0; z-index: 80; overflow: hidden; color: var(--tinta); }
.jd-sobre-mesa { position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 45%, var(--claro), var(--claro-2)); }
.jd-sobre-caja { position: absolute; inset: 0; perspective: 1800px; background: var(--sobre-papel); box-shadow: 0 40px 90px -30px rgb(0 0 0 / .45); }
.jd-sobre-caja::before { content: ""; position: absolute; inset: 0; background: var(--f1, none) 50% 50% / cover; opacity: .22; mix-blend-mode: multiply; }
.jd-sobre-cuerpo { position: absolute; inset: 0; }
.jd-pliegue { position: absolute; inset: 0; }
.jd-pliegue-izq { clip-path: polygon(0 0, 52% 58%, 0 100%); background: linear-gradient(100deg, color-mix(in oklab, var(--sobre-papel) 92%, black), var(--sobre-papel) 80%); }
.jd-pliegue-der { clip-path: polygon(100% 0, 48% 58%, 100% 100%); background: linear-gradient(-100deg, color-mix(in oklab, var(--sobre-papel) 90%, black), var(--sobre-papel) 80%); }
.jd-pliegue-abajo { clip-path: polygon(0 100%, 50% 50%, 100% 100%); background: linear-gradient(0deg, color-mix(in oklab, var(--sobre-papel) 97%, white), color-mix(in oklab, var(--sobre-papel) 94%, black)); }
.jd-pliegue-abajo::after { content: ""; position: absolute; inset: 0; background: var(--f1, none) 50% 50% / cover; opacity: .14; mix-blend-mode: multiply; }
.jd-solapa { position: absolute; left: 0; right: 0; top: 0; height: 56%; transform-origin: 50% 0; transform-style: preserve-3d; z-index: 3; filter: drop-shadow(0 10px 14px var(--sobre-sombra)); }
.jd-solapa-cara, .jd-solapa-forro { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.jd-solapa-cara { background: linear-gradient(180deg, color-mix(in oklab, var(--sobre-solapa) 96%, white), var(--sobre-solapa)); }
.jd-solapa-cara::after { content: ""; position: absolute; inset: 0; background: var(--f1, none) 50% 0 / cover; opacity: .2; mix-blend-mode: multiply; }
.jd-solapa-forro { transform: rotateX(180deg); background: var(--forro, var(--f2, none)) 50% 50% / cover, var(--claro-2); }
.jd-sello { position: absolute; z-index: 4; left: 50%; top: 56%; width: clamp(84px, 13vmin, 118px); aspect-ratio: 1; translate: -50% -58%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform 160ms var(--salida); }
.jd-sello:active { transform: scale(.95); }
.jd-sello-cera { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--sello-1) 70%, white), var(--sello-1) 42%, var(--sello-2) 100%); box-shadow: 0 10px 22px -8px rgb(0 0 0 / .45), inset 0 -4px 8px rgb(0 0 0 / .22), inset 0 3px 6px rgb(255 255 255 / .28); }
.jd-sello-cera::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--sello-txt) 45%, transparent); box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--sello-2) 50%, transparent); }
.jd-sello-mono { position: relative; display: flex; align-items: baseline; gap: .04em; font: 400 clamp(1.5rem, 1rem + 2vmin, 2.1rem)/1 var(--titulos); color: var(--sello-txt); text-shadow: 0 1px 0 rgb(0 0 0 / .25); }
.jd-sello-mono i { font: 400 .9em/1 var(--script); font-style: normal; }
@media (hover: hover) and (pointer: fine) { .jd-sello:hover .jd-sello-cera { filter: brightness(1.06); } }
.jd-sobre-rotulo { position: absolute; z-index: 2; left: 0; right: 0; top: 63%; bottom: 0; display: grid; align-content: start; justify-items: center; gap: .7rem; padding: 0 var(--margen) max(1.2rem, env(safe-area-inset-bottom)); text-align: center; }
.jd .porton-nombres { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; font: 400 clamp(2.2rem, 1.4rem + 3vw, 4rem)/1.05 var(--titulos); letter-spacing: -0.01em; color: var(--tinta); }
.jd .porton-nombres i { font-family: var(--script); font-style: normal; font-size: 1.15em; line-height: .7; color: var(--script-c); }
.jd-sobre-fecha { font: 500 .78rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: color-mix(in oklab, var(--tinta) 72%, transparent); padding-left: .32em; }
.jd-sobre-para { color: color-mix(in oklab, var(--tinta) 76%, transparent); font-size: .95rem; }
.jd-sobre .porton-acciones { margin-top: .3rem; }
.jd-pista { font-size: .8rem; color: color-mix(in oklab, var(--tinta) 60%, transparent); }
.jd-vuelo { will-change: transform; }
@media (max-height: 640px) {
	.jd-solapa { height: 50%; }
	.jd-sello { top: 50%; }
	.jd-sobre-rotulo { top: 57%; gap: .45rem; }
	.jd-pista { display: none; }
}

/* ---------- Fotos integradas y marcadores (con ?fotos=1) ---------- */
.jd-suave { position: relative; margin: 0; }
.jd-marcador { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 12rem; background: radial-gradient(70% 60% at 35% 30%, color-mix(in oklab, var(--claro) 70%, white), transparent 70%), linear-gradient(135deg, color-mix(in oklab, var(--acento) 40%, var(--claro)), color-mix(in oklab, var(--hoja) 45%, var(--claro))); }
.jd-marcador span { font: 600 .7rem/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: color-mix(in oklab, var(--tinta) 65%, transparent); padding: .6rem 1rem; border: 1px dashed color-mix(in oklab, var(--tinta) 30%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--claro) 55%, transparent); }
.con-js .jd-suave { opacity: 0; translate: 0 40px; transition: opacity 1300ms var(--salida), translate 1500ms var(--salida); }
.con-js .jd-suave.visto { opacity: 1; translate: 0 0; }

/* ---------- 1 · Portada ---------- */
.jd-portada { --a: clamp(0, calc((var(--sc-p, 0) - 0.12) / 0.78), 1); --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); }
.jd-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, .6fr); justify-items: center; padding: clamp(2.4rem, 7svh, 4.4rem) var(--margen) calc(var(--orilla-h) + clamp(1.4rem, 5svh, 3rem)); text-align: center; }
.jd-portada-pintura { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.jd-portada-pintura i { position: absolute; inset: -3%; background: var(--portada, var(--f1, none)) 50% 50% / cover no-repeat; scale: calc(1.02 + var(--e) * .08); }
.jd-portada-pintura::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 52%, color-mix(in oklab, var(--claro) 62%, transparent), transparent 80%); }
@media (max-width: 760px) { .jd-portada-pintura i { background-image: var(--portada-m, var(--f1m, var(--f1, none))); } }
.jd-portada-foto { position: absolute; inset: 0; z-index: 1; }
.jd-portada-foto .jd-marcador { height: 100%; }
.jd-escena > .jd-kicker { grid-row: 1; position: relative; z-index: 3; opacity: calc(1 - var(--e) * 1.6); }
.jd-nombres { grid-row: 3; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; font-family: var(--titulos); font-weight: 400; color: var(--txt); font-size: clamp(3.2rem, 1.2rem + 6vw, 8.4rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 22ch; opacity: calc(1 - var(--e) * 1.5); translate: 0 calc(var(--e) * -8vh); }
.jd-n { position: relative; white-space: nowrap; }
.jd-n.largo { font-size: .86em; }
.jd-n.muy-largo { font-size: .72em; }
.jd-n > span, .jd-y > span { display: inline-block; }
.jd-y { font-family: var(--script); font-size: 1.1em; line-height: .8; margin: .02em 0; color: var(--script-c); }
.jd-portada-pie { grid-row: 4; position: relative; z-index: 3; display: grid; justify-items: center; gap: .4rem; padding-top: clamp(1rem, 3svh, 1.6rem); opacity: calc(1 - var(--e) * 1.8); }
.jd-fecha-corta { font: 500 .8rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--txt-suave); padding-left: .34em; }
.con-fotos .jd-escena { --txt: #FCF7EF; --txt-suave: rgb(252 247 239 / .9); }
.con-fotos .jd-portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 16 18 / .35), rgb(20 16 18 / 0) 26%, rgb(20 16 18 / 0) 42%, rgb(20 16 18 / .4) 70%, rgb(20 16 18 / .6)); }
.con-fotos .jd-nombres { text-shadow: 0 2px 30px rgb(20 16 18 / .35); }
/* La orilla de la portada sube al bajar y cubre la escena con el color claro: el paso a la frase no tiene borde. */
.jd-orilla-portada { top: auto; bottom: -1px; height: calc(var(--orilla-h) + 72svh); z-index: 5; transform: translate3d(0, calc((1 - var(--e)) * 72svh), 0); background: linear-gradient(180deg, transparent calc(var(--orilla-h) - 26px), var(--claro) calc(var(--orilla-h) - 26px)); }
.jd-orilla-portada svg { height: var(--orilla-h); }
.jd-orilla-portada .jd-capa-frente path { fill: var(--claro); }
.jd-orilla-portada .jd-capa-a { transform: translateX(calc(var(--e) * -90px)); }
.jd-orilla-portada .jd-capa-b { transform: translateX(calc(var(--e) * 60px)); }
.jd-baja { grid-row: 5; align-self: end; position: relative; z-index: 3; display: grid; justify-items: center; gap: .5rem; font: 600 .66rem/1 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--txt-suave); padding-left: .34em; opacity: calc(.9 - var(--e) * 3); }
.jd-baja::after { content: ""; width: 1px; height: 2.4rem; background: linear-gradient(180deg, currentColor, transparent); animation: jd-baja 2.4s var(--salida) infinite; transform-origin: top; }
@keyframes jd-baja { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2 · Frase ---------- */
.jd-intro { min-height: 86svh; display: grid; align-items: center; padding: clamp(5rem, 12vh, 8rem) 0 clamp(6rem, 14vh, 10rem); }
.jd-intro-grid { position: static; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.jd-detalle { position: absolute; left: 0; top: 4%; bottom: 4%; width: 52vw; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(to right, #000 30%, transparent 96%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(to right, #000 30%, transparent 96%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.jd-intro-texto { grid-column: 3 / span 8; grid-row: 1; position: relative; z-index: 2; display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.con-fotos .jd-intro-texto { grid-column: 7 / span 6; }
.jd-adorno { font: 400 clamp(4.4rem, 3.4rem + 3vw, 6.4rem)/.7 var(--script); color: var(--script-c); height: .7em; }
.jd-frase { font: 400 clamp(1.8rem, 1.2rem + 1.9vw, 2.9rem)/1.28 var(--titulos); letter-spacing: -0.005em; text-wrap: balance; }
.jd-firma { font: 600 .74rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--acc); padding-left: .34em; }
.jd-firma i { font-size: 2.6em; text-transform: none; letter-spacing: 0; line-height: .5; padding-inline: .3em .45em; vertical-align: -.14em; }
.jd-acuarela { position: absolute; z-index: 1; pointer-events: none; height: auto; }

/* ---------- 3 · Fecha: dos columnas, la figura del gesto y el texto ---------- */
.jd-fecha-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 6vw, 6rem); padding-inline: max(var(--margen), calc(50vw - 34rem)); }
.jd-fecha-escena::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 50% 50%, color-mix(in oklab, var(--claro) 82%, transparent), transparent 100%); }
.jd-fecha-figura { position: relative; justify-self: end; width: min(100%, 30rem, 62svh); aspect-ratio: 1; container-type: inline-size; }
.jd-fecha-figura img, .jd-fecha-figura svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; overflow: visible; }
.jd-dia { position: absolute; z-index: 3; display: grid; justify-items: center; gap: 3cqi; margin: 0; pointer-events: none; }
.jd-dia-sem { font: 600 max(.66rem, 4.2cqi)/1 var(--texto); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: var(--acc); }
.jd-dia-n { font: 400 34cqi/.86 var(--titulos); letter-spacing: -0.03em; font-variant-numeric: lining-nums; color: var(--txt); }
.jd-fecha-texto { position: relative; z-index: 5; display: grid; justify-items: start; text-align: left; }
.jd-mes { font: 400 clamp(2.4rem, 1.6rem + 2.4vw, 4rem)/1.05 var(--titulos); text-transform: capitalize; }
.jd-mes i { font-size: 1.15em; padding-left: .12em; }
.jd-fecha-linea { width: 3rem; height: 1px; background: color-mix(in oklab, var(--txt) 30%, transparent); margin: clamp(1rem, 3svh, 1.6rem) 0; }
.jd-hora { font: 600 .76rem/1 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--txt); margin-bottom: clamp(1rem, 2.6svh, 1.4rem); }
.jd-faltan { display: grid; grid-template-columns: repeat(3, max-content); width: max-content; max-width: 100%; margin-bottom: clamp(1.2rem, 3svh, 1.8rem); border-block: 1px solid color-mix(in oklab, var(--txt) 16%, transparent); }
.jd-faltan[hidden] { display: none; }
.jd-faltan div { display: grid; justify-items: start; gap: .25rem; padding: .8rem 1.6rem .8rem 0; }
.jd-faltan div + div { padding-left: 1.6rem; border-left: 1px solid color-mix(in oklab, var(--txt) 16%, transparent); }
.jd-faltan strong { font: 400 clamp(1.8rem, 1.4rem + 1vw, 2.4rem)/1 var(--titulos); font-variant-numeric: tabular-nums lining-nums; color: var(--txt); }
.jd-faltan span { white-space: nowrap; font: 600 .66rem/1 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: var(--txt-suave); }

/* ---------- 4 · Lugares ---------- */
.jd-lugares { padding: clamp(6rem, 14vh, 9rem) 0; overflow-x: clip; }
.jd-lugares-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.4rem, 6vw, 6rem); }
.jd-lugar { position: relative; display: grid; gap: .9rem; align-content: start; }
.jd-lugar + .jd-lugar { padding-left: clamp(2.4rem, 6vw, 6rem); margin-left: calc(clamp(2.4rem, 6vw, 6rem) * -1); border-left: 1px solid color-mix(in oklab, var(--txt) 22%, transparent); }
.jd-lugar-tipo { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; font: 600 .74rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc); }
.jd-lugar-tipo span { color: var(--txt-suave); }
.jd-lugar-nombre { font: 400 clamp(2.2rem, 1.5rem + 2.4vw, 3.8rem)/1.06 var(--titulos); text-wrap: balance; }
.jd-lugar-dir { color: var(--txt-suave); margin-bottom: .6rem; }
.jd-lugar-foto { aspect-ratio: 4 / 3; margin-bottom: 1rem; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%); }

/* ---------- 5 · Álbum (solo con fotos) ---------- */
.jd-album { padding: clamp(10rem, 22vh, 14rem) 0 clamp(7rem, 16vh, 11rem); }
.jd-collage { position: relative; width: 100vw; margin-inline: calc((100% - 100vw) / 2); display: grid; grid-template-columns: 1fr 1fr; }
.jd-c { height: min(64svh, 42rem); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); }
.jd-c + .jd-c + .jd-c { margin-top: -12svh; }
.jd-c-izq { margin-right: -10vw; z-index: 1; }
.jd-c-der { margin-left: -10vw; translate: 0 8svh; }
.con-js .jd-c-der.visto { translate: 0 8svh; }

/* ---------- 6 · El gran día ---------- */
.jd-dia-acto { padding: clamp(6rem, 14vh, 9rem) 0; --recorre: clamp(0, calc((var(--sc-p, 0) - .2) / .5), 1); }
.jd-dia-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.2rem, 3vw, 3rem); }
.jd-dia-grid .jd-titulo-sec { grid-column: 1 / span 5; grid-row: 1; align-self: start; position: sticky; top: 18svh; }
.jd-ruta { grid-column: 7 / span 6; grid-row: 1; position: relative; padding-left: 4.4rem; }
.jd-ruta-linea { position: absolute; left: 1rem; top: .8rem; bottom: .8rem; width: 1px; background: color-mix(in oklab, var(--txt) 26%, transparent); }
.jd-ruta-avance { position: absolute; inset: 0 auto 0 0; width: 2px; margin-left: -.5px; background: linear-gradient(180deg, transparent, var(--acc) 30%); transform: scaleY(var(--recorre)); transform-origin: top; }
.jd-momentos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.6rem, 7vh, 4.2rem); }
.jd-momento { position: relative; display: grid; gap: .35rem; }
.jd-momento::before { content: ""; position: absolute; left: -3.4rem; top: 1.1rem; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: color-mix(in oklab, var(--txt) 40%, transparent); transition: background-color 900ms var(--salida) 300ms, box-shadow 700ms var(--salida) 300ms, scale 900ms cubic-bezier(.34, 1.4, .64, 1) 300ms; scale: .7; }
.jd-momento.visto::before { background: var(--acc); box-shadow: 0 0 16px 2px color-mix(in oklab, var(--acc) 45%, transparent); scale: 1; }
.jd-momento-hora { font: 400 clamp(2.4rem, 1.6rem + 2.6vw, 4rem)/1 var(--titulos); white-space: nowrap; }
.jd-momento-hora small { font: 600 .24em/1 var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); vertical-align: .7em; padding-left: .3em; }
.jd-momento-que { font: 400 clamp(1.05rem, 1rem + .4vw, 1.25rem)/1.4 var(--texto); color: var(--txt-suave); }
.con-js .jd-momento { opacity: 0; translate: 0 22px; transition: opacity 900ms var(--salida), translate 1100ms var(--salida); }
.con-js .jd-momento.visto { opacity: 1; translate: 0 0; }

/* ---------- 7 · Detalles ---------- */
.jd-detalles { padding: clamp(10rem, 22vh, 14rem) 0 clamp(8rem, 18vh, 12rem); }
.jd-detalles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 6rem); align-items: start; width: min(100% - 2 * var(--margen), 62rem); }
.jd-bloque { display: grid; gap: .9rem; align-content: start; }
.jd-grande { font: 400 clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem)/1.3 var(--titulos); text-wrap: pretty; }
.jd-paleta { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; gap: .6rem; }
.jd-paleta li { width: 42px; height: 42px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), 0 10px 18px -10px rgb(0 0 0 / .5); scale: .4; opacity: 0; transition: scale 900ms cubic-bezier(.34, 1.4, .64, 1) calc(var(--j) * 80ms), opacity 500ms var(--salida) calc(var(--j) * 80ms); }
.jd-paleta.visto li { scale: 1; opacity: 1; }
.jd-cuenta { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--txt) 18%, transparent); }
.jd-cuenta span { grid-column: 1; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--txt-suave); }
.jd-cuenta strong { grid-column: 1; font: 500 1.35rem/1.25 var(--texto); letter-spacing: .02em; }
.jd-cuenta strong.iban { font-size: 1.02rem; word-break: break-word; }
.jd-cuenta .boton { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- 8 · Confirmar ---------- */
.jd-confirmar { padding: clamp(6rem, 14vh, 9rem) 0 clamp(7rem, 16vh, 11rem); }
.jd-confirmar-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; width: min(100% - 2 * var(--margen), 66rem); }
.jd-confirmar-intro { position: sticky; top: 16vh; display: grid; gap: .6rem; }
.jd-confirmar-intro .jd-titulo-sec { margin-bottom: 1rem; font-size: clamp(2.6rem, 1.4rem + 4vw, 5.2rem); }
.jd-hoja-papel { position: relative; z-index: 3; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 4px; color: var(--tinta); --txt: var(--tinta); --txt-suave: color-mix(in oklab, var(--tinta) 72%, var(--claro)); background: linear-gradient(170deg, color-mix(in oklab, var(--claro) 60%, white), var(--claro) 60%, var(--claro-2)); box-shadow: 0 60px 100px -50px rgb(0 0 0 / .7); }
.jd-hoja-papel .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); }
.jd-hoja-papel .boton-suave { background: transparent; color: var(--tinta); border-color: color-mix(in oklab, var(--tinta) 30%, transparent); }
.jd .opcion span { border-radius: 999px; border-color: color-mix(in oklab, var(--tinta) 25%, transparent); }
.jd .opcion input:checked + span { background: var(--tinta); color: var(--claro); border-color: var(--tinta); }
.jd .campo span { color: color-mix(in oklab, var(--tinta) 74%, transparent); }
.jd .campo input, .jd .campo select, .jd .campo textarea { border-bottom-color: color-mix(in oklab, var(--tinta) 25%, transparent); color: var(--tinta); }
.jd .campo input:focus, .jd .campo select:focus, .jd .campo textarea:focus { border-bottom-color: var(--acento); }
.jd .error { color: color-mix(in oklab, var(--acento) 80%, black); }
.jd .respuesta-texto { font: 400 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/1.2 var(--titulos); }

/* ---------- 9 · Cierre ---------- */
.jd-cierre { min-height: 100svh; display: grid; align-items: center; padding: clamp(9rem, 20vh, 13rem) 0 clamp(5rem, 12vh, 8rem); overflow: hidden; }
.jd-cierre-texto { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.jd-cierre-nombres { font: 400 clamp(3rem, 1.8rem + 4.6vw, 6.6rem)/1.06 var(--titulos); letter-spacing: -0.01em; text-wrap: balance; }
.jd-cierre-nombres i { font-size: 1.15em; line-height: .5; padding-inline: .05em; }
.jd-cierre-fecha { font: 500 .8rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--acc); padding-left: .34em; }
.jd-cierre-enlace { margin: .8rem 0 1.4rem; }
.jd .firma { margin-top: 2.4rem; font-size: .84rem; color: var(--txt-suave); }
.jd .firma a { color: inherit; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.jd-nombres { font-size: clamp(3rem, 1.2rem + 9.6vw, 4.6rem); }
	/* Las orillas se dibujan para 1440 px: en el celular se ensanchan para que las curvas no se vuelvan dientes. */
	.jd-orilla svg { width: 280%; margin-left: -90%; }
	.jd-intro { min-height: 0; padding-top: 4rem; }
	.jd-intro-grid { grid-template-columns: 1fr; position: relative; }
	.jd-intro-texto, .con-fotos .jd-intro-texto { grid-column: 1; grid-row: 2; }
	.jd-detalle { position: relative; inset: auto; grid-column: 1; grid-row: 1; width: calc(100% + 2 * var(--margen)); margin-inline: calc(var(--margen) * -1); aspect-ratio: 4 / 5; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 60%, transparent 100%); }
	.con-fotos .jd-intro-texto { margin-top: -20vw; }

	.jd-fecha-escena { grid-template-columns: 1fr; align-content: center; row-gap: clamp(.6rem, 2svh, 1.2rem); justify-items: center; }
	.jd-fecha-figura { justify-self: center; width: min(72vw, 38svh); }
	.jd-fecha-texto { justify-items: center; text-align: center; }
	.jd-fecha-linea { margin: clamp(.5rem, 1.4svh, .9rem) 0; }
	.jd-faltan div { justify-items: center; padding: .6rem 1rem; }
	.jd-faltan div + div { padding-left: 1rem; }
	.jd-mes { font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); }

	.jd-lugares-lista { grid-template-columns: 1fr; }
	.jd-lugar + .jd-lugar { padding-left: 0; margin-left: 0; border-left: 0; padding-top: 2.6rem; border-top: 1px solid color-mix(in oklab, var(--txt) 22%, transparent); }

	.jd-collage { grid-template-columns: 1fr; }
	.jd-c { height: auto; aspect-ratio: 4 / 5; margin: 0 !important; translate: none !important; }
	.jd-c + .jd-c { margin-top: -16vw !important; }

	.jd-dia-grid { grid-template-columns: 1fr; }
	.jd-dia-grid .jd-titulo-sec { grid-column: 1; grid-row: 1; position: static; }
	.jd-ruta { grid-column: 1; grid-row: 2; padding-left: 3.2rem; }
	.jd-ruta-linea { left: .7rem; }
	.jd-momento::before { left: -2.5rem; }

	.jd-detalles-grid, .jd-confirmar-grid { grid-template-columns: 1fr; width: min(100% - 2 * var(--margen), 40rem); }
	.jd-confirmar-intro { position: static; }
}
@media (max-width: 380px) {
	.jd-faltan div { padding: .55rem .7rem; }
	.jd-faltan div + div { padding-left: .7rem; }
	.jd-cuenta { grid-template-columns: 1fr; }
	.jd-cuenta .boton { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

/* ---------- Movimiento reducido: menos y más suave, nunca vacío ---------- */
.quieto .jd-destellos { display: none; }
.quieto .jd-capa path { animation: none; }
.quieto .jd-capa { transform: none !important; }
.quieto .jd-pintura { transform: none; }
/* Sin fijado (movimiento reducido o sin JavaScript) el escenario no es sticky: necesita su propio posicionamiento
   para contener la pintura y la orilla. Con el motor activo no se toca: position anularía el sticky. */
.quieto .jd-escena, .quieto .jd-fecha-escena, .sin-js .jd-escena, .sin-js .jd-fecha-escena { position: relative; }
.quieto .jd-escena { height: auto; min-height: 100svh; }
.quieto .jd-fecha-escena { height: auto; min-height: 90svh; padding-block: 14svh; }
.quieto .jd-portada { --e: 0; }
.quieto .jd-orilla-portada { transform: translate3d(0, 72svh, 0); }
.quieto .jd-baja::after { animation: none; }
.quieto .jd-suave { opacity: 1 !important; translate: none !important; transition: none; }
.quieto .jd .l > span, .quieto .jd-momento { transform: none !important; translate: none !important; opacity: 1 !important; transition: opacity 200ms linear; }
.quieto .jd-paleta li { scale: 1; opacity: 1; transition: none; }