/* 17 · Limonero · colección Jardín · composición «Mosaico de azulejos».
   Todo se ordena en una cuadrícula: la portada tiene un mosaico de 3 × 3 con el limón en el azulejo central,
   y cada bloque de contenido nace como un azulejo que se voltea y se vuelve tarjeta.
   Tipografía: DM Serif Display (títulos), Birthstone (el «&»), DM Sans (texto).
   Gesto propio (morphing): en la fecha, nueve azulejos se voltean uno a uno; al voltearse, sus esquinas se redondean
   y el cuadrado se vuelve tarjeta. El del centro lleva el día, sobre amarillo limón.
   El dibujo del azulejo es CSS (círculos en las esquinas, un aro y una cruz), en cobalto sobre blanco. */

.li {
	--claro: #FBF8EE;
	--claro-2: #F3EDD8;
	--cob: #1D4FB8;
	--cob-2: #163A8C;
	--limon: #F3D447;
	--acc: #1D4FB8;
	--script-c: #1D4FB8;
	--banda-1: #163A8C;
	--banda-1b: #102C6E;
	--banda-txt: #FBF8EE;
	--acc-banda: #F3D447;
	--mota: rgb(255 244 190);
	--fondo-claro: var(--f1);
	--fondo-claro-m: var(--f1m);
	--velo-a: 86%;
	--velo-b: 78%;
	--sobre-papel: #FBF8EE;
	--sobre-solapa: #F5F0E0;
	--sello-1: #1D4FB8;
	--sello-2: #102C6E;
	--forro: var(--f3);
	--marco-li: min(100% - 2 * var(--margen), 70rem);
	--tile:
		radial-gradient(circle at 0 0, var(--cob) 0 17%, transparent 17.6%),
		radial-gradient(circle at 100% 0, var(--cob) 0 17%, transparent 17.6%),
		radial-gradient(circle at 100% 100%, var(--cob) 0 17%, transparent 17.6%),
		radial-gradient(circle at 0 100%, var(--cob) 0 17%, transparent 17.6%),
		radial-gradient(circle at 50% 50%, var(--limon) 0 9%, transparent 9.6% 21%, var(--cob) 21.6% 25%, transparent 25.6%),
		linear-gradient(45deg, transparent 47.5%, var(--cob) 47.5% 52.5%, transparent 52.5%),
		linear-gradient(-45deg, transparent 47.5%, var(--cob) 47.5% 52.5%, transparent 52.5%),
		#FFFDF6;
}
/* El papel de la página: un mosaico muy tenue sobre la luz de limón. */
.li .jd-fondo::after { content: ""; position: absolute; inset: 0; background: var(--tile); background-size: 64px 64px; opacity: .05; }
.li-marco { width: var(--marco-li); margin-inline: auto; position: relative; z-index: 3; }
.li .jd-titulo-sec { font: 400 clamp(2.8rem, 1.6rem + 4vw, 5.6rem)/1 var(--titulos); letter-spacing: -0.01em; margin-bottom: clamp(2rem, 6vh, 3.6rem); }
.li .jd-titulo-sec i { font-size: 1.3em; padding-left: .1em; }
.li-sub { font: 600 .74rem/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--cob); margin-bottom: 1rem; }

/* ---------- La tarjeta que nace azulejo ----------
   --mt: 0 = azulejo chico, de espaldas (se ve el dibujo); 1 = tarjeta abierta, de frente, con esquinas redondeadas.
   Avanza con el acto (--sc-p) y cada tarjeta espera su turno (--k). */
.li-tarjeta { --t: clamp(0, calc((var(--sc-p, 1) - .06 - var(--k, 0) * .06) / .26), 1); --mt: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); position: relative; perspective: 1600px; scale: calc(.6 + var(--mt) * .4); }
.li-tarjeta::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--tile); background-size: min(120px, 25%) auto; background-color: #FFFDF6; border-radius: calc(var(--mt) * 26px); transform: rotateY(calc(var(--mt) * 180deg)); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 0 0 1px rgb(21 43 92 / .12); pointer-events: none; }
.li-tarjeta-cara { position: relative; height: 100%; --txt: var(--tinta); --txt-suave: color-mix(in oklab, var(--tinta) 74%, var(--claro)); --acc: var(--cob); color: var(--tinta); background: #FFFDF6; border-radius: calc(4px + var(--mt) * 22px); padding: clamp(1.5rem, 3.4vw, 2.6rem); transform: rotateY(calc((var(--mt) - 1) * 180deg)); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 30px 60px -36px rgb(16 44 110 / .5), inset 0 0 0 1px rgb(21 43 92 / .08); }
.li-tarjeta-cara .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); }
.li-tarjeta-cara .boton-suave { background: transparent; color: var(--tinta); border-color: color-mix(in oklab, var(--tinta) 30%, transparent); }

/* ---------- Bandas ---------- */
.li-banda { background: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 90%, transparent), color-mix(in oklab, var(--banda-1b) 94%, transparent)), var(--f2) 50% 50% / cover, var(--banda-1); }
.li-banda::before { content: ""; position: absolute; inset: 0; background: var(--tile); background-size: 88px 88px; opacity: .07; mix-blend-mode: screen; pointer-events: none; }
.li-banda-limon { --txt: var(--tinta); --txt-suave: color-mix(in oklab, var(--tinta) 80%, var(--limon)); --acc: var(--cob); --script-c: var(--cob); color: var(--tinta); background: linear-gradient(180deg, color-mix(in oklab, var(--limon) 92%, transparent), color-mix(in oklab, #EAC52F 95%, transparent)), var(--f3) 50% 50% / cover, var(--limon); }
.li-banda-limon::before { opacity: .1; mix-blend-mode: multiply; }
.li-banda-limon .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); }
@media (max-width: 760px) { .li-banda { background-image: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 90%, transparent), color-mix(in oklab, var(--banda-1b) 94%, transparent)), var(--f2m); } .li-banda-limon { background-image: linear-gradient(180deg, color-mix(in oklab, var(--limon) 92%, transparent), color-mix(in oklab, #EAC52F 95%, transparent)), var(--f3m); } }

/* ---------- 1 · Portada · nombres a la izquierda, mosaico a la derecha ---------- */
.li-portada { --a: clamp(0, calc((var(--sc-p, 0) - 0.1) / 0.8), 1); --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); }
.li-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem); padding-inline: max(var(--margen), calc(50vw - 36rem)); }
.li-portada-pintura { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.li-portada-pintura i { position: absolute; inset: -3%; background: var(--f1) 50% 50% / cover no-repeat; scale: calc(1.03 + var(--e) * .06); }
.li-portada-pintura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--claro) 84%, transparent), color-mix(in oklab, var(--claro) 50%, transparent) 60%, color-mix(in oklab, var(--claro) 30%, transparent)); }
@media (max-width: 760px) { .li-portada-pintura i { background-image: var(--f1m); } }
.li-portada-foto { position: absolute; inset: 0; z-index: 0; }
.li-portada-foto .jd-marcador { height: 100%; }
.li-portada-texto { position: relative; z-index: 3; display: grid; justify-items: start; gap: clamp(.8rem, 2.4svh, 1.4rem); opacity: calc(1 - var(--e) * 1.4); translate: 0 calc(var(--e) * -8svh); }
.li-kicker { font: 600 .72rem/1.4 var(--texto); letter-spacing: .42em; text-transform: uppercase; color: var(--cob); }
.li .li-nombres { grid-row: auto; display: flex; flex-direction: column; align-items: flex-start; max-width: none; opacity: 1; translate: none; font: 400 clamp(3.4rem, 1.4rem + 6vw, 8rem)/.98 var(--titulos); letter-spacing: -0.02em; color: var(--txt); text-align: left; }
.li .li-nombres .jd-y { font-size: 1.1em; line-height: .7; margin: .02em 0 .04em .9em; }
.li-fecha-corta { font: 500 .8rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--txt-suave); padding: .7rem 0 0; border-top: 2px solid var(--limon); }
.li-mosaico { position: relative; z-index: 2; justify-self: center; width: min(66svh, 100%, 32rem); aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4px + var(--e) * 26px); opacity: calc(1 - var(--e) * 1.1); }
.li-p { display: block; background: var(--tile); background-size: 100% 100%; border-radius: calc(var(--e) * 30%); box-shadow: 0 18px 30px -22px rgb(16 44 110 / .55), inset 0 0 0 1px rgb(21 43 92 / .1); transform: rotate(calc(var(--e) * (var(--k) - 4) * 6deg)); transition: transform 1100ms var(--salida), opacity 900ms var(--salida); transition-delay: calc(1.5s + var(--k) * 90ms); }
.li-p:nth-child(5) { background: radial-gradient(circle at 50% 50%, #FFF6C9, var(--limon) 70%); }
html.cerrado .li-p { transform: perspective(700px) rotateY(90deg); opacity: 0; }
.li-limon { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; translate: -50% -52%; rotate: calc(-8deg + var(--e) * 30deg); scale: calc(1 + var(--e) * .3); filter: drop-shadow(0 18px 18px rgb(80 70 10 / .28)); pointer-events: none; }
.con-fotos .li-escena { --txt: #FFFDF6; --txt-suave: rgb(255 253 246 / .9); }
.con-fotos .li-portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 25 60 / .6), rgb(10 25 60 / .1)); }

/* ---------- 2 · Frase ---------- */
.li-intro { padding: clamp(6rem, 14vh, 10rem) 0; }
.li-intro-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); }
.li-frase-t { grid-column: 3 / span 8; }
.con-fotos .li-frase-t { grid-column: 6 / span 7; }
.li-detalle { grid-column: 1 / span 6; grid-row: 1; aspect-ratio: 1; -webkit-mask-image: radial-gradient(70% 70% at 45% 50%, #000 45%, transparent 72%); mask-image: radial-gradient(70% 70% at 45% 50%, #000 45%, transparent 72%); }
.con-fotos .li-frase-t { grid-row: 1; }
.li-frase-t .li-tarjeta-cara { display: grid; gap: 1.4rem; padding: clamp(2rem, 5vw, 4rem); text-align: center; justify-items: center; }
.li-frase { font: 400 clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem)/1.3 var(--titulos); text-wrap: balance; }
.li-frase .l { display: block; }
.li-firma { font: 600 .74rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--cob); padding-left: .34em; }
.li-firma i { font: 400 2.6em/.5 var(--script); text-transform: none; letter-spacing: 0; padding-inline: .2em .3em; vertical-align: -.14em; }

/* ---------- 3 · Fecha: la rejilla de azulejos ---------- */
.li-fecha { --a: clamp(0, calc((var(--sc-p, 0) - 0.05) / 0.68), 1); --m: var(--a); }
.li-fecha-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; align-content: center; justify-items: center; gap: clamp(1rem, 3svh, 1.8rem); padding-inline: var(--margen); text-align: center; }
.li-rejilla { width: min(62svh, 90vw, 34rem); aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: clamp(6px, 1.2vw, 12px); container-type: inline-size; }
.li-az { --tz: clamp(0, calc((var(--m) * 10.6 - var(--k)) / 1.6), 1); --mz: calc(var(--tz) * var(--tz) * (3 - 2 * var(--tz))); perspective: 900px; }
.li-az-giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(calc((1 - var(--mz)) * 180deg)); }
.li-az-dorso, .li-az-cara { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: calc(var(--mz) * 18%); overflow: hidden; }
.li-az-dorso { background: var(--tile); background-size: 100% 100%; transform: rotateY(180deg); box-shadow: inset 0 0 0 1px rgb(21 43 92 / .12); border-radius: calc((1 - var(--mz)) * 2px); }
.li-az-cara { display: grid; place-content: center; gap: 1.6cqi; padding: 4cqi; background: #FFFDF6; color: var(--tinta); box-shadow: 0 20px 34px -24px rgb(16 44 110 / .6), inset 0 0 0 1px rgb(21 43 92 / .1); }
.li-az-deco .li-az-cara { background: var(--cob); background-image: radial-gradient(circle at 50% 50%, transparent 0 21%, rgb(255 253 246 / .9) 21.6% 24%, transparent 24.6%), radial-gradient(circle at 50% 50%, var(--limon) 0 8%, transparent 8.6%); }
.li-az-centro .li-az-cara { background: radial-gradient(circle at 40% 35%, #FFF6C9, var(--limon) 70%); }
.li-dia-n { font: 400 24cqi/.9 var(--titulos); letter-spacing: -0.03em; font-variant-numeric: lining-nums; color: var(--tinta); }
.li-dato-t { font: 600 max(.6rem, 2.6cqi)/1 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: var(--cob); padding-left: .26em; }
.li-dato-v { font: 400 max(1.1rem, 6cqi)/1.05 var(--titulos); text-transform: capitalize; overflow-wrap: anywhere; }
.li-dato-v small { font: 600 .42em/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; }
.li-fecha-pie { display: grid; justify-items: center; gap: clamp(.8rem, 2svh, 1.2rem); opacity: clamp(0, calc(var(--m) * 3 - 1.8), 1); }
.li-faltan { display: grid; grid-template-columns: repeat(3, max-content); }
.li-faltan[hidden] { display: none; }
.li-faltan div { display: grid; justify-items: center; gap: .2rem; padding: .25rem clamp(.8rem, 2vw, 1.4rem); }
.li-faltan div + div { border-left: 2px solid var(--limon); }
.li-faltan strong { font: 500 1.6rem/1 var(--texto); font-variant-numeric: tabular-nums lining-nums; }
.li-faltan span { font: 600 .64rem/1 var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-suave); }

/* ---------- 4 · Lugares ---------- */
.li-lugares { padding: clamp(5rem, 12vh, 8rem) 0; }
.li-pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: stretch; }
.li-lugar .li-tarjeta-cara { display: grid; align-content: start; gap: .8rem; }
.li-etiqueta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--limon); font: 600 .74rem/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--cob); }
.li-etiqueta span { color: var(--txt-suave); letter-spacing: .14em; }
.li-lugar-nombre { font: 400 clamp(1.9rem, 1.3rem + 1.8vw, 3rem)/1.08 var(--titulos); text-wrap: balance; }
.li-lugar-dir { color: var(--txt-suave); margin-bottom: .4rem; }
.li-foto { aspect-ratio: 4 / 3; margin: calc(clamp(1.5rem, 3.4vw, 2.6rem) * -1) calc(clamp(1.5rem, 3.4vw, 2.6rem) * -1) .6rem; border-radius: inherit; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }

/* ---------- 5 · Álbum ---------- */
.li-album { padding: clamp(5rem, 12vh, 8rem) 0; }
.li-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(9rem, 18vw, 15rem); gap: 10px; }
.li-a { border-radius: 18px; overflow: hidden; }
.li-a-1 { grid-row: span 2; }
.li-a-4 { grid-column: span 2; }

/* ---------- 6 · El gran día: una fila de azulejos ---------- */
.li-dia-acto { padding: clamp(6rem, 14vh, 9rem) 0; }
.li-horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
.li-momento .li-tarjeta-cara { display: grid; align-content: space-between; gap: 1.2rem; aspect-ratio: 1; padding: clamp(1.1rem, 2.4vw, 1.8rem); }
.li-momento-hora { font: 400 clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem)/1 var(--titulos); white-space: nowrap; font-variant-numeric: lining-nums; }
.li-momento-hora small { font: 600 .26em/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--cob); padding-left: .4em; vertical-align: .9em; }
.li-momento-que { font-size: 1.02rem; color: var(--txt-suave); line-height: 1.4; }
.li-momento:nth-child(even) .li-tarjeta-cara { background: radial-gradient(circle at 70% 20%, #FFF6C9, var(--limon) 80%); }

/* ---------- 7 · Detalles ---------- */
.li-detalles { padding: clamp(6rem, 14vh, 9rem) 0; }
.li-detalles .li-tarjeta-cara { display: grid; align-content: start; gap: .9rem; }
.li-grande { font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.3 var(--titulos); text-wrap: pretty; }

/* ---------- 8 · Confirmar ---------- */
.li-confirmar { padding: clamp(6rem, 14vh, 9rem) 0; }
.li-confirmar-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.li-confirmar-grid > div:first-child { position: sticky; top: 16vh; }
.li-hoja .li-tarjeta-cara { padding: clamp(1.6rem, 4vw, 2.8rem); }

/* ---------- 9 · Cierre ---------- */
.li-cierre { padding: clamp(6rem, 14vh, 9rem) 0 clamp(4rem, 10vh, 6rem); min-height: 90svh; display: grid; align-items: center; }
.li-cierre-texto { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.li-fila { position: relative; display: grid; grid-template-columns: repeat(5, clamp(44px, 7vw, 76px)); gap: 6px; margin-bottom: 1.6rem; }
.li-fila i { aspect-ratio: 1; background: var(--tile); background-size: 100% 100%; border-radius: 6px; }
.li-fila i:nth-child(3) { background: radial-gradient(circle at 50% 50%, #FFF6C9, var(--limon) 70%); }
.li-fila img { position: absolute; left: 50%; top: 50%; width: clamp(90px, 13vw, 140px); height: auto; translate: -50% -55%; rotate: -10deg; filter: drop-shadow(0 12px 14px rgb(0 0 0 / .35)); }
.li-cierre-nombres { font: 400 clamp(3rem, 1.8rem + 4.6vw, 6.4rem)/1.04 var(--titulos); letter-spacing: -0.01em; text-wrap: balance; }
.li-cierre-nombres i { font: 400 1.2em/.5 var(--script); font-style: normal; color: var(--limon); }
.li-cierre-fecha { font: 500 .8rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--limon); padding-left: .34em; margin-bottom: .8rem; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.li-escena { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; row-gap: clamp(1.6rem, 5svh, 3rem); }
	.li-portada-texto { justify-items: center; text-align: center; }
	.li .li-nombres { align-items: center; font-size: clamp(3.2rem, 1.4rem + 10vw, 4.6rem); }
	.li .li-nombres .jd-y { margin: .04em 0; }
	.li-mosaico { width: min(72vw, 38svh); }
	.li-portada-pintura::after { background: linear-gradient(180deg, color-mix(in oklab, var(--claro) 84%, transparent), color-mix(in oklab, var(--claro) 50%, transparent)); }
	.li-intro-grid { grid-template-columns: 1fr; }
	.li-frase-t, .con-fotos .li-frase-t { grid-column: 1; grid-row: 2; }
	.li-detalle { grid-column: 1; grid-row: 1; }
	.li-pareja, .li-confirmar-grid { grid-template-columns: 1fr; }
	.li-confirmar-grid > div:first-child { position: static; }
	.li-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.li-momento .li-tarjeta-cara { aspect-ratio: auto; min-height: 11rem; }
	.li-album-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 38vw; }
	.li .jd-cuenta { grid-template-columns: 1fr; }
	.li .jd-cuenta .boton { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

/* ---------- Movimiento reducido: azulejos ya volteados, tarjetas abiertas ---------- */
.quieto .li-escena, .quieto .li-fecha-escena, .sin-js .li-escena, .sin-js .li-fecha-escena { position: relative; }
.quieto .li-escena, .sin-js .li-escena { height: auto; min-height: 100svh; padding-block: 8svh; }
.quieto .li-fecha-escena, .sin-js .li-fecha-escena { height: auto; min-height: 90svh; padding-block: 12svh; }
.quieto .li-portada { --e: 0; }
.quieto .li-fecha, .sin-js .li-fecha { --m: 1; }
.quieto .li-tarjeta, .sin-js .li-tarjeta { --mt: 1; }
.quieto .li-p { transition: none; }