/* 19 · Seda Marfil · colección Clásica · composición «Pliegue editorial».
   Asimétrica, como una revista: nombres enormes a la izquierda, columnas desiguales, cifras grandes en Bodoni,
   y paños de seda que entran por un costado. Nada centrado salvo lo que lo pide.
   Tipografía: Bodoni Moda (títulos y cifras), Mea Culpa (el «&»), Outfit (texto).
   Gesto propio (morphing): el borde de cada paño de seda pasa de recto a curva de tela. Es un clip-path con
   veintiséis puntos en el borde, cada uno calc(recto + (curvo − recto) × --m): la forma cambia de verdad con el scroll.
   En la fecha, el paño entra desde la derecha mientras se pliega, y el lazo se posa sobre el pliegue. */

.sm {
	--claro: #F8F3EA;
	--claro-2: #EFE6D8;
	--champana: #D9C3A0;
	--perla: #EEE8E0;
	--acc: #7E5C32;
	--script-c: #8A6A3E;
	--banda-1: #2E2B2D;
	--banda-1b: #222022;
	--banda-txt: #F8F3EA;
	--acc-banda: #E3CFA8;
	--mota: rgb(255 246 226);
	--fondo-claro: var(--f2);
	--fondo-claro-m: var(--f2m);
	--velo-a: 88%;
	--velo-b: 80%;
	--sobre-papel: #F7F1E6;
	--sobre-solapa: #F1E8D9;
	--sello-1: #B8975F;
	--sello-2: #7E5C32;
	--forro: var(--f3);
	--marco-sm: min(100% - 2 * var(--margen), 80rem);
}
.sm-marco { width: var(--marco-sm); margin-inline: auto; position: relative; z-index: 3; }
.sm .jd-titulo-sec { font: 400 clamp(3rem, 1.6rem + 4.6vw, 6.4rem)/.98 var(--titulos); letter-spacing: -0.02em; margin-bottom: clamp(2rem, 6vh, 3.6rem); }
.sm .jd-titulo-sec i { font-size: 1.3em; padding-left: .08em; }
.sm-sub { font: 500 .74rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc); margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid color-mix(in oklab, var(--tinta) 18%, transparent); }

/* ---------- El paño de seda: la pintura recortada por un borde que se pliega ---------- */
.sm-pano { position: absolute; z-index: 1; overflow: hidden; clip-path: var(--pliegue); pointer-events: none; }
.sm-pano i { position: absolute; inset: 0; background: var(--f1) 50% 50% / cover no-repeat; }
.sm-pano::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(255 255 255 / .35), transparent 30%, rgb(120 90 50 / .08)); }
@media (max-width: 760px) { .sm-pano i { background-image: var(--f1m); } }

/* ---------- Bandas ---------- */
.sm-banda { background: linear-gradient(180deg, var(--banda-1), var(--banda-1b)); }

/* ---------- 1 · Portada ---------- */
.sm-portada { --a: clamp(0, calc((var(--sc-p, 0) - 0.08) / 0.8), 1); --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); --m: calc(.18 + var(--e) * .82); }
.sm-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: clamp(1rem, 2vw, 2rem); padding-inline: max(var(--margen), calc(50vw - 40rem)); }
.sm-pano-portada { top: 0; bottom: 0; right: 0; width: calc(42vw + var(--e) * 8vw); }
.sm-pano-portada i { scale: calc(1.04 + var(--e) * .06); }
.sm-portada-foto { position: absolute; inset: 0 0 0 auto; width: 48vw; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.sm-portada-foto .jd-marcador { height: 100%; }
.sm-portada-texto { grid-column: 1 / span 7; position: relative; z-index: 3; display: grid; justify-items: start; gap: clamp(1rem, 3svh, 1.8rem); opacity: calc(1 - var(--e) * 1.3); translate: calc(var(--e) * -4vw) 0; }
.sm-kicker { font: 500 .72rem/1.4 var(--texto); letter-spacing: .42em; text-transform: uppercase; color: var(--acc); }
.sm .sm-nombres { grid-row: auto; display: grid; justify-items: start; max-width: none; opacity: 1; translate: none; font: 400 clamp(4rem, 1rem + 8.6vw, 11rem)/.9 var(--titulos); letter-spacing: -0.035em; color: var(--txt); text-align: left; }
.sm .sm-nombres .jd-y { font-size: .9em; line-height: .5; margin: .06em 0 .12em 1.4em; color: var(--script-c); }
.sm .sm-nombres .jd-n:last-child { padding-left: .5em; }
.sm-fecha-corta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font: 500 .78rem/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--txt-suave); padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--tinta) 30%, transparent); }
.sm-lazo { position: absolute; z-index: 2; right: calc(42vw + var(--e) * 8vw - clamp(4rem, 7vw, 7rem)); top: 50%; width: clamp(8rem, 13vw, 13rem); height: auto; translate: 0 -50%; rotate: calc(-12deg + var(--e) * 16deg); filter: drop-shadow(0 18px 20px rgb(90 60 20 / .25)); }
.con-fotos .sm-pano-portada { opacity: .25; }

/* ---------- 2 · Frase · cita grande ---------- */
.sm-intro { padding: clamp(7rem, 16vh, 11rem) 0 clamp(6rem, 14vh, 10rem); }
.sm-intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 1.6rem; }
.sm-comilla { grid-column: 2 / span 1; grid-row: 1; justify-self: end; font: 400 clamp(7rem, 4rem + 8vw, 13rem)/.7 var(--titulos); color: var(--champana); }
.sm-frase { grid-column: 3 / span 8; grid-row: 1; font: italic 400 clamp(1.8rem, 1.1rem + 2.4vw, 3.4rem)/1.2 var(--titulos); letter-spacing: -0.01em; text-wrap: balance; }
.sm-frase .l { display: block; }
.sm-firma { grid-column: 7 / span 4; justify-self: end; font: 500 .74rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--acc); }
.sm-firma i { font: 400 2.8em/.5 var(--script); text-transform: none; letter-spacing: 0; padding-inline: .2em .3em; vertical-align: -.16em; color: var(--script-c); }
.sm-detalle { grid-column: 9 / span 4; grid-row: 2 / span 2; aspect-ratio: 3 / 4; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }

/* ---------- 3 · Fecha · el paño se pliega y el lazo se posa ---------- */
.sm-fecha { --a: clamp(0, calc((var(--sc-p, 0) - 0.05) / 0.6), 1); --m: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); }
.sm-fecha-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: clamp(1rem, 2vw, 2rem); padding-inline: max(var(--margen), calc(50vw - 40rem)); }
.sm-pano-fecha { top: 0; bottom: 0; right: 0; width: 38vw; translate: calc((1 - var(--m)) * 70%) 0; }
.sm-dia { grid-column: 1 / span 4; position: relative; z-index: 2; margin: 0; font: 400 clamp(10rem, 4rem + 16vw, 21rem)/.8 var(--titulos); letter-spacing: -0.05em; font-variant-numeric: lining-nums; color: var(--tinta); translate: calc((1 - var(--m)) * 3vw) 0; opacity: calc(.35 + var(--m) * .65); }
.sm-fecha-texto { grid-column: 5 / span 3; position: relative; z-index: 3; display: grid; justify-items: start; gap: .8rem; }
.sm-sem { font: 500 .76rem/1 var(--texto); letter-spacing: .36em; text-transform: uppercase; color: var(--acc); }
.sm-mes { font: 400 clamp(2.4rem, 1.6rem + 2.4vw, 4rem)/1 var(--titulos); text-transform: capitalize; letter-spacing: -0.02em; }
.sm-mes i { display: block; font: 400 1.1em/.9 var(--script); font-style: normal; color: var(--script-c); padding-left: .6em; }
.sm-hora { font: 500 .78rem/1 var(--texto); letter-spacing: .32em; text-transform: uppercase; padding-block: .8rem; border-block: 1px solid color-mix(in oklab, var(--tinta) 20%, transparent); width: 100%; }
.sm-faltan { display: grid; grid-template-columns: repeat(3, max-content); gap: 1.2rem; margin-bottom: .4rem; }
.sm-faltan[hidden] { display: none; }
.sm-faltan div { display: grid; gap: .2rem; }
.sm-faltan strong { font: 400 2.2rem/1 var(--titulos); font-variant-numeric: tabular-nums lining-nums; }
.sm-faltan span { font: 500 .64rem/1 var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-suave); }
.sm-lazo-fecha { position: absolute; z-index: 3; right: calc(38vw - clamp(4.4rem, 7vw, 7rem)); top: 14%; width: clamp(8.6rem, 14vw, 14rem); height: auto; translate: calc((1 - var(--m)) * 40vw) calc((1 - var(--m)) * -30vh); rotate: calc((1 - var(--m)) * 40deg - 8deg); opacity: clamp(0, calc(var(--m) * 2 - .4), 1); filter: drop-shadow(0 18px 22px rgb(90 60 20 / .28)); }

/* ---------- 4 · Lugares · columnas desiguales ---------- */
.sm-lugares { padding: clamp(6rem, 14vh, 9rem) 0; }
.sm-lugares-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.sm-lugar { display: grid; gap: .8rem; align-content: start; padding-top: 1.2rem; border-top: 1px solid color-mix(in oklab, var(--tinta) 30%, transparent); }
.sm-lugar-0 { grid-column: 1 / span 6; }
.sm-lugar-1 { grid-column: 8 / span 5; margin-top: clamp(6rem, 18vh, 11rem); }
.sm-etiqueta { display: flex; justify-content: space-between; gap: 1rem; font: 500 .74rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc); }
.sm-etiqueta span { color: var(--txt-suave); letter-spacing: .16em; }
.sm-lugar-nombre { font: 400 clamp(2.2rem, 1.4rem + 2.6vw, 4rem)/1.02 var(--titulos); letter-spacing: -0.02em; text-wrap: balance; }
.sm-lugar-dir { color: var(--txt-suave); margin-bottom: .4rem; }
.sm-foto { aspect-ratio: 5 / 4; margin-bottom: .6rem; -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent); mask-image: linear-gradient(180deg, #000 65%, transparent); }
.con-js .sm-lugar { opacity: 0; translate: 0 30px; transition: opacity 1100ms var(--salida), translate 1300ms var(--salida); }
.con-js .sm-lugar.visto { opacity: 1; translate: 0 0; }
.con-js .sm-lugar-1 { transition-delay: 160ms; }

/* ---------- 5 · Álbum ---------- */
.sm-album { padding: clamp(6rem, 14vh, 9rem) 0; }
.sm-album-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 1rem; align-items: start; }
.sm-album-grid .jd-titulo-sec { grid-column: 1 / span 5; }
.sm-a { -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.sm-a-1 { grid-column: 7 / span 6; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.sm-a-2 { grid-column: 1 / span 5; aspect-ratio: 4 / 3; }
.sm-a-3 { grid-column: 3 / span 6; aspect-ratio: 16 / 9; }

/* ---------- 6 · El gran día · banda oscura con un paño a la izquierda ---------- */
.sm-dia-acto { position: relative; overflow: hidden; padding: clamp(7rem, 16vh, 10rem) 0; --m: clamp(0, calc((var(--sc-p, 1) - .1) / .4), 1); }
.sm-pano-banda { top: 0; bottom: 0; left: 0; width: 30vw; opacity: .92; }
.sm-pano-banda i { background-image: var(--f3); }
.sm-dia-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
.sm-dia-grid .jd-titulo-sec { grid-column: 6 / span 7; }
.sm-momentos { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; }
.sm .sm-momento::before { display: none; }
.sm-momento { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; align-items: baseline; gap: 1.6rem; padding: 1.3rem 0; border-top: 1px solid color-mix(in oklab, var(--banda-txt) 20%, transparent); }
.sm-momento:last-child { border-bottom: 1px solid color-mix(in oklab, var(--banda-txt) 20%, transparent); }
.sm-momento-hora { font: 400 clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem)/1 var(--titulos); letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: lining-nums; }
.sm-momento-hora small { font: 500 .24em/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--acc-banda); padding-left: .5em; vertical-align: 1em; }
.sm-momento-que { font-size: 1.1rem; color: var(--txt-suave); }

/* ---------- 7 · Detalles ---------- */
.sm-detalles { padding: clamp(7rem, 16vh, 10rem) 0; }
.sm-detalles-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 4rem; }
.sm-detalles-grid > :first-child { grid-column: 1 / span 4; }
.sm-detalles-grid > :last-child { grid-column: 6 / span 7; }
.sm-bloque { display: grid; gap: .9rem; align-content: start; }
.sm-grande { font: italic 400 clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem)/1.25 var(--titulos); text-wrap: pretty; }

/* ---------- 8 · Confirmar ---------- */
.sm-confirmar { padding: clamp(6rem, 14vh, 9rem) 0; }
.sm-confirmar-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.sm-confirmar-intro { grid-column: 1 / span 5; position: sticky; top: 16vh; }
.sm-hoja { grid-column: 7 / span 6; padding: clamp(1.6rem, 4vw, 2.8rem); color: var(--tinta); --txt: var(--tinta); --txt-suave: color-mix(in oklab, var(--tinta) 72%, var(--claro)); background: linear-gradient(170deg, #FFFCF6, var(--claro) 60%, var(--perla)); box-shadow: 0 60px 100px -50px rgb(0 0 0 / .8); }
.sm-hoja .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); }
.sm-hoja .boton-suave { background: transparent; color: var(--tinta); border-color: color-mix(in oklab, var(--tinta) 30%, transparent); }
.sm .boton { border-radius: 0; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

/* ---------- 9 · Cierre ---------- */
.sm-cierre.sm-banda { background: var(--banda-1b); }
.sm-cierre { min-height: 90svh; display: grid; align-items: end; padding: clamp(8rem, 18vh, 12rem) 0 clamp(4rem, 10vh, 6rem); }
.sm-cierre-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.sm-cierre-nombres { grid-column: 1 / span 8; display: grid; justify-items: start; font: 400 clamp(3.6rem, 1.4rem + 7vw, 9rem)/.9 var(--titulos); letter-spacing: -0.035em; }
.sm-cierre-nombres i { font: 400 .9em/.5 var(--script); color: var(--acc-banda); margin: .1em 0 .1em 1.2em; }
.sm-cierre-nombres span:last-child { padding-left: .5em; }
.sm-cierre-pie { grid-column: 9 / span 4; display: grid; justify-items: start; gap: 1rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--banda-txt) 30%, transparent); }
.sm-cierre-fecha { font: 500 .78rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc-banda); }
.sm .firma { margin-top: 1rem; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.sm-escena { grid-template-columns: 1fr; align-items: end; padding-bottom: 14svh; }
	.sm-portada-texto { grid-column: 1; }
	.sm .sm-nombres { font-size: clamp(3.6rem, 1rem + 13vw, 5.4rem); }
	.sm-pano-portada { top: 0; bottom: auto; height: 46svh; width: calc(64vw + var(--e) * 12vw); }
	.sm-lazo { right: calc(64vw - 6rem); top: 22svh; width: 7.4rem; }
	.sm-intro-grid, .sm-lugares-grid, .sm-album-grid, .sm-dia-grid, .sm-detalles-grid, .sm-confirmar-grid, .sm-cierre-grid { grid-template-columns: 1fr; }
	.sm-comilla { grid-column: 1; justify-self: start; font-size: 7rem; height: .5em; }
	.sm-frase, .sm-firma, .sm-detalle, .sm-lugar-0, .sm-lugar-1, .sm-album-grid > *, .sm-dia-grid .jd-titulo-sec, .sm-momentos, .sm-detalles-grid > :first-child, .sm-detalles-grid > :last-child, .sm-confirmar-intro, .sm-hoja, .sm-cierre-nombres, .sm-cierre-pie { grid-column: 1 !important; grid-row: auto !important; }
	.sm-firma { justify-self: start; }
	.sm-detalle { width: calc(100% + 2 * var(--margen)); margin-inline: calc(var(--margen) * -1); }
	.sm-lugar-1 { margin-top: 4rem; }
	.sm-fecha-escena { grid-template-columns: 1fr; align-content: center; row-gap: 1.4rem; }
	.sm-pano-fecha { width: 40vw; }
	.sm-dia { grid-column: 1; font-size: clamp(8rem, 2rem + 34vw, 11rem); }
	.sm-fecha-texto { grid-column: 1; max-width: 58vw; }
	.sm-faltan { gap: .9rem; }
	.sm-faltan strong { font-size: 1.8rem; }
	.sm-lazo-fecha { right: calc(40vw - 3.6rem); top: 6svh; width: 6.4rem; }
	.sm-pano-banda { display: none; }
	.sm-momento { grid-template-columns: 1fr; gap: .4rem; }
	.sm-confirmar-intro { position: static; margin-bottom: 2rem; }
	.sm-cierre-pie { margin-top: 2rem; }
	.sm .jd-cuenta { grid-template-columns: 1fr; }
	.sm .jd-cuenta .boton { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

/* ---------- Movimiento reducido: el paño ya plegado, el lazo en su lugar ---------- */
.quieto .sm-escena, .quieto .sm-fecha-escena, .sin-js .sm-escena, .sin-js .sm-fecha-escena { position: relative; }
.quieto .sm-escena, .sin-js .sm-escena { height: auto; min-height: 100svh; }
.quieto .sm-fecha-escena, .sin-js .sm-fecha-escena { height: auto; min-height: 90svh; padding-block: 12svh; }
.quieto .sm-portada { --e: 0; --m: 1; }
.quieto .sm-fecha, .sin-js .sm-fecha, .quieto .sm-dia-acto, .sin-js .sm-dia-acto { --m: 1; }
.quieto .sm-lugar { opacity: 1; translate: none; transition: none; }