/* Colección Celebraciones · estructura «escenario».
   Portada fija por tramo (--p): fondo pintado, objetos en capas atrás y adelante del título, y entrada al abrir.
   Fecha fija por tramo: el morphing de cada diseño (--t1, --t2) termina en el día; luego la cuenta regresiva.
   Objetos: <span class="e-obj">…<img class="e-img">…</span>. El scroll mueve .e-obj con --dx --dy --dr --ds (por --p);
   la entrada lo trae desde --ex --ey; .e-img flota suave (--fd duración, --fa amplitud). Todo se define en concepto.css. */

.cel { --display-peso: 400; --nombre-tam: clamp(3.6rem, 11.5vw, 9.5rem); }
.e-nombre, .xv-entrada-nombre { font-family: var(--display), var(--script), serif; font-weight: var(--display-peso); font-style: var(--display-estilo, normal); line-height: .92; letter-spacing: var(--display-espacio, -.01em); }
.cel .xv-titulo { font-family: var(--titulo-letra, var(--display)), var(--sans); font-weight: var(--titulo-peso, var(--display-peso)); font-style: var(--titulo-estilo, normal); text-transform: var(--titulo-mayus, none); letter-spacing: var(--titulo-espacio, -.01em); }
.cel .xv-titulo .xv-script { font-family: var(--script); }
.e-firma { font-size: clamp(2rem, 4vw, 3rem); color: var(--acento); margin-top: 18px; }

/* ---------------------------------------------------------------- portada */
.e-portada[data-xv-tramo="fijo"] { min-height: 230vh; min-height: 230svh; }
.e-escena { display: grid; place-items: center; isolation: isolate; }
.e-fondo { position: absolute; inset: -4% 0 0; z-index: -1; transform: translateY(calc(var(--p, 0) * -3%)) scale(calc(1.08 - var(--p, 0) * .06)); transform-origin: 50% 40%; }
.e-fondo img { width: 100%; height: 100%; object-fit: cover; }
html:not(.e-abierto) .e-fondo { transform: scale(1.14); filter: blur(6px) brightness(.9); }
.e-fondo { transition: filter 1.6s cubic-bezier(.23,1,.32,1); }
html.e-abierto .e-fondo { transition: filter 1.6s cubic-bezier(.23,1,.32,1), transform .1s linear; }

.e-capas { position: absolute; inset: 0; pointer-events: none; }
.e-atras { z-index: 0; }
.e-frente { z-index: 2; }
.e-obj {
	--x: 0px; --y: 0px; --dx: 0px; --dy: 0px; --dr: 0deg; --ds: 0; --r: 0deg; --s: 1;
	position: absolute; display: block; width: var(--w, 30vmin);
	transform: translate3d(calc(var(--x) + var(--p, 0) * var(--dx)), calc(var(--y) + var(--p, 0) * var(--dy)), 0) rotate(calc(var(--r) + var(--p, 0) * var(--dr))) scale(calc(var(--s) + var(--p, 0) * var(--ds)));
	transition: opacity 1.1s cubic-bezier(.23,1,.32,1) var(--ed, .2s), translate 1.6s cubic-bezier(.16,1,.3,1) var(--ed, .2s);
	will-change: transform;
}
html:not(.e-abierto) .e-obj { opacity: 0; translate: var(--ex, 0px) var(--ey, 60px); }
.e-img { width: 100%; height: auto; animation: e-flota var(--fd, 7s) ease-in-out infinite alternate; animation-delay: var(--fdel, 0s); filter: drop-shadow(var(--sombra, 0 24px 30px rgb(0 0 0 / .18))); }
.e-quieta .e-img, .e-img.e-quieta { animation: none; }
@keyframes e-flota { from { transform: translateY(calc(var(--fa, 10px) * -1)) rotate(calc(var(--fr, 1.5deg) * -1)); } to { transform: translateY(var(--fa, 10px)) rotate(var(--fr, 1.5deg)); } }

.e-titulos { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: clamp(10px, 1.8vh, 18px); padding: 0 6vw; transform: translateY(calc(var(--p, 0) * var(--titulos-dy, -6vh))) scale(calc(1 - var(--p, 0) * var(--titulos-ds, .08))); }
.e-titulos > * { transition: opacity 1s cubic-bezier(.23,1,.32,1), translate 1.2s cubic-bezier(.16,1,.3,1); }
html:not(.e-abierto) .e-titulos > :not(.e-nombre-caja) { opacity: 0; translate: 0 22px; }
.e-titulos > :nth-child(2) { transition-delay: .45s; } .e-titulos > :nth-child(3) { transition-delay: .6s; } .e-titulos > :nth-child(4) { transition-delay: .75s; } .e-titulos > :nth-child(5) { transition-delay: .9s; }
.e-evento { color: var(--acento); }
.e-nombre { font-size: calc(var(--nombre-tam) * var(--n, 1)); color: var(--nombre-color, var(--tinta)); white-space: nowrap; padding: 0 .06em; }
.e-nombre-caja { position: relative; }
.e-fecha { color: var(--tinta-2); }
.e-pista { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; z-index: 3; opacity: calc(1 - var(--p, 0) * 4); }

/* detalle según la celebración */
.e-edad { display: flex; align-items: baseline; gap: .3em; }
.e-edad-n { font-family: var(--edad-letra, var(--display)); font-size: clamp(4.2rem, 13vw, 10rem); line-height: .8; color: var(--edad-color, var(--acento)); font-weight: var(--display-peso); }
.e-edad-t { font-family: var(--script); font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--tinta); }
.e-grado { display: grid; gap: 6px; }
.e-grado-t { font-family: var(--sans); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: .02em; }
.e-grado-i { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); }
.e-empresa { display: grid; justify-items: center; gap: 12px; }
.e-logo { display: grid; place-items: center; min-width: 150px; height: 64px; padding: 0 20px; border: 1.5px dashed color-mix(in srgb, var(--tinta) 40%, transparent); border-radius: 10px; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-2); }
.e-lema { max-width: 28em; color: var(--tinta-2); }
.e-padres { font-family: var(--script); font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--tinta-2); }
.e-padres-n { font-family: var(--sans); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .9rem; color: var(--tinta-2); }

/* ---------------------------------------------------------------- bienvenida */
.e-bien-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.e-bien-texto { display: grid; gap: 18px; }
.e-bien-arte { position: relative; min-height: 340px; display: grid; place-items: center; }
.e-foto { width: min(100%, 420px); aspect-ratio: 4 / 5; border-radius: var(--radio-foto, 6px); }
.e-ornamento { position: relative; width: min(100%, 380px); }
.e-ornamento .e-img { filter: drop-shadow(0 24px 28px rgb(0 0 0 / .16)); }

/* ---------------------------------------------------------------- fecha: morphing por tramo */
.e-fecha-sec[data-xv-tramo="fijo"] { min-height: 230vh; min-height: 230svh; padding: 0; }
.e-fecha-sec { --m: clamp(0, calc(var(--p, 0) * 1.45), 1); --t1: clamp(0, calc(var(--m) * 2), 1); --t2: clamp(0, calc(var(--m) * 2 - 1), 1); }
.e-fecha-escena { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-content: center; justify-items: center; gap: clamp(10px, 2vh, 20px); text-align: center; padding: 0 20px; overflow: hidden; }
.e-centro { position: relative; width: var(--morph-tam, min(50vh, 80vw, 500px)); aspect-ratio: 1; display: grid; place-items: center; margin: -1vh 0; }
.e-morph { position: absolute; inset: 0; pointer-events: none; }
.e-morph > * { position: absolute; }
.e-fecha-k { position: relative; z-index: 1; }
.e-dia-caja { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1; opacity: var(--t2); transform: scale(calc(.82 + var(--t2) * .18)); filter: blur(calc((1 - var(--t2)) * 6px)); }
.e-dia { font-family: var(--dia-letra, var(--display)); font-weight: var(--display-peso); font-size: clamp(6rem, 22vw, 13rem); line-height: .82; color: var(--dia-color, var(--tinta)); font-variant-numeric: tabular-nums; }
.e-mes { font-family: var(--script); font-size: clamp(2rem, 6vw, 3.6rem); color: var(--acento); margin-top: -.1em; }
.e-anio { font-family: var(--sans); font-weight: 600; letter-spacing: .4em; font-size: .9rem; color: var(--tinta-2); margin-top: 6px; }
.e-sem, .e-cuenta-caja { position: relative; z-index: 1; opacity: clamp(0, calc(var(--t2) * 1.6 - .5), 1); }
.e-sem { letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: var(--tinta-2); }
.e-cuenta-caja { display: grid; gap: 14px; justify-items: center; }
.e-cuenta { --tam: clamp(2rem, 4.4vw, 3.2rem); }

/* ---------------------------------------------------------------- secciones */
.e-cab-est { position: relative; }
.e-lugares-1 { max-width: 640px; margin-inline: auto; grid-template-columns: 1fr; }
.e-lugar { position: relative; overflow: hidden; }
.e-dos { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.e-detalles { display: grid; gap: clamp(40px, 6vw, 90px); }
.e-detalles-2 { grid-template-columns: 1fr 1fr; }
.e-detalles .xv-regalo, .e-detalles .xv-colab { margin: 0; }
.e-galeria .g-alta { grid-column: span 4; aspect-ratio: 3 / 4; }
.e-galeria .g-media { grid-column: span 4; aspect-ratio: 1; }
.e-galeria .g-ancha { grid-column: span 8; aspect-ratio: 16 / 10; }
.e-cierre { position: relative; overflow: hidden; }
.e-cierre-arte { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.e-cierre-nombre { position: relative; }
.e-nombre-fin { font-size: clamp(3rem, 9vw, 7rem); font-family: var(--display); font-weight: var(--display-peso); color: var(--nombre-color, var(--tinta)); white-space: normal; }

/* viajero */
.e-viajero { width: var(--vj, 130px); }
.e-viajero img { width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .2)); }

/* ---------------------------------------------------------------- movimiento reducido y celular */
html.quieto .e-portada[data-xv-tramo="fijo"], html.quieto .e-fecha-sec[data-xv-tramo="fijo"] { min-height: 100vh; min-height: 100svh; }
html.quieto .e-fecha-escena { position: relative; }
html.quieto .e-img { animation: none !important; }
html.quieto .e-obj, html.quieto .e-titulos > * { opacity: 1 !important; translate: none !important; }

@media (max-width: 760px) {
	.cel { --nombre-tam: clamp(3rem, 15vw, 5rem); }
	.e-bien-grid, .e-dos, .e-detalles-2 { grid-template-columns: 1fr; }
	.e-bien-arte { min-height: 260px; }
	.e-ornamento { width: min(70%, 280px); }
	.e-galeria .g-alta, .e-galeria .g-media { grid-column: span 3; }
	.e-galeria .g-ancha { grid-column: span 6; }
	.e-viajero { width: calc(var(--vj, 130px) * .72); }
	.e-cuenta { --tam: clamp(1.5rem, 7.2vw, 2.1rem); }
	.e-cuenta .xv-cuenta-cifras { gap: 8px clamp(8px, 3vw, 14px); }
	.e-centro { width: var(--morph-tam-cel, min(84vw, 44vh)); }
}

/* La entrada usa los colores del sobre (el nombre comparte la letra con la portada, no el color). */
.xv-entrada .e-nombre { color: var(--sobre-tinta, var(--tinta)); }
@media (max-width: 760px) {
	.e-cuenta[data-xv-cuenta="anillos"] { --tam: clamp(.9rem, 4.2vw, 1.15rem); }
	.e-cuenta[data-xv-cuenta="anillos"] .xv-u { width: 16vw; }
	.e-cuenta[data-xv-cuenta="anillos"] .xv-cuenta-cifras { gap: 6px 2vw; }
	.e-cuenta[data-xv-cuenta="anillos"] .xv-ue { font-size: .5rem; letter-spacing: .08em; }
}
.cel .xv-titulo .xv-script { text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- Bodas 2027: los dos nombres */
.e-pareja { display: grid; justify-items: center; white-space: normal; gap: 0; }
.e-pareja .e-n1, .e-pareja .e-n2 { display: block; white-space: normal; text-wrap: balance; }
.e-pareja .e-y { display: block; font-family: var(--y-letra, var(--script)), cursive; font-weight: var(--y-peso, 400); font-style: normal; font-size: var(--y-tam, .55em); line-height: 1; margin: var(--y-margen, -.02em 0 .04em); color: var(--y-color, var(--acento)); letter-spacing: 0; text-transform: none; }
.e-nombre.e-pareja { font-size: calc(var(--nombre-tam) * var(--n, 1) * var(--pareja-tam, .82)); }
.xv-entrada-nombre.e-pareja { font-size: clamp(2.4rem, 8vw, 4.6rem); }
.e-nombre-fin.e-pareja { font-size: clamp(2.6rem, 8vw, 6rem); }
.e-pareja.en-linea { display: block; } .e-pareja.en-linea > span { display: inline; } .e-pareja.en-linea .e-y { margin: 0 .18em; }
html .xv-nombre.e-pareja, html[data-largo] .xv-nombre.e-pareja { --n: var(--np, 1); white-space: normal; }
.cat-boda .e-fecha { text-wrap: balance; max-width: min(92vw, 34em); }
@media (max-width: 760px) { .cat-boda .e-fecha { font-size: .8rem; max-width: 82vw; } }