/* 16 · Hortensia Azul · colección Jardín · composición «Ramo en cascada».
   Una sola columna centrada y simétrica, con mucho aire. El ramo cuelga sobre los nombres en la portada.
   Tipografía: Fraunces (títulos), Corinthia (el «&»), Hanken Grotesk (texto).
   Gesto propio (morphing): en la fecha, dieciséis florecitos dejan el ramo, viajan a un anillo alrededor del día
   y cambian de forma, de gota redonda a florecito de cuatro pétalos (clip-path que se interpola con --mf).
   Bordes: festones, una fila de pétalos redondos (en vez de las orillas onduladas de la tanda 12–15). */

.ha {
	--claro: #F4F6FB;
	--claro-2: #E3EAF6;
	--acc: #3D63B0;
	--script-c: #3D63B0;
	--banda-1: #1C2B52;
	--banda-1b: #142140;
	--banda-txt: #F4F6FB;
	--acc-banda: #B9CCF0;
	--mota: rgb(214 226 248);
	--fondo-claro: var(--f2);
	--fondo-claro-m: var(--f2m);
	--velo-a: 80%;
	--velo-b: 66%;
	--sobre-papel: #F1F3F8;
	--sobre-solapa: #E8EDF6;
	--sello-1: #3D63B0;
	--sello-2: #223D7A;
	--forro: var(--f3);
	--fes: clamp(18px, 2.4vw, 30px);
	--col: min(100% - 2 * var(--margen), 40rem);
}
.ha-columna { width: var(--col); margin-inline: auto; position: relative; z-index: 3; display: grid; justify-items: center; text-align: center; }
.ha-centro { text-align: center; }
.ha .jd-titulo-sec { font: 300 clamp(2.8rem, 1.6rem + 4vw, 5.4rem)/1.02 var(--titulos); letter-spacing: -0.02em; margin-bottom: clamp(2rem, 6vh, 3.6rem); text-align: center; }
.ha .jd-titulo-sec i { font-size: 1.45em; padding-left: .08em; }
.ha .jd-titulo-sec .l { justify-content: center; }
.ha-sub { font: 600 .74rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc); margin-bottom: 1rem; padding-left: .32em; }

/* ---------- Festón: una fila de pétalos redondos en el borde de cada banda ---------- */
.ha-feston { position: absolute; left: 0; right: 0; height: var(--fes); z-index: 2; pointer-events: none; }
.ha-feston::before, .ha-feston::after { content: ""; position: absolute; inset: 0; -webkit-mask: radial-gradient(circle at 50% 100%, #000 calc(var(--fes) - .5px), transparent var(--fes)) 0 0 / calc(var(--fes) * 2) 100% repeat-x; mask: radial-gradient(circle at 50% 100%, #000 calc(var(--fes) - .5px), transparent var(--fes)) 0 0 / calc(var(--fes) * 2) 100% repeat-x; }
.ha-feston::before { background: color-mix(in oklab, var(--acc) 55%, var(--banda-1)); translate: calc(var(--fes) + (var(--sc-p, .5) - .5) * 40px) calc(var(--fes) * -.38); }
.ha-feston::after { background: var(--banda-1); }
.ha-feston-arriba { top: calc(var(--fes) * -1 + 1px); }
.ha-feston-abajo { top: calc(100% - 1px); transform: scaleY(-1); }
.ha-feston-abajo::after { background: var(--banda-1b); }

/* ---------- Bandas ---------- */
.ha-banda { position: relative; background: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 86%, transparent), color-mix(in oklab, var(--banda-1b) 94%, transparent)), var(--f3) 50% 50% / cover, var(--banda-1); }
.ha-lugares.ha-banda { background: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 86%, transparent), color-mix(in oklab, var(--banda-1b) 94%, transparent)), var(--f3) 50% 50% / cover, var(--banda-1); }
@media (max-width: 760px) { .ha-banda, .ha-lugares.ha-banda { background-image: linear-gradient(180deg, color-mix(in oklab, var(--banda-1) 86%, transparent), color-mix(in oklab, var(--banda-1b) 94%, transparent)), var(--f3m); } }

/* ---------- 1 · Portada · el ramo cuelga; al bajar, cae despacio y el festón sube ---------- */
.ha-portada { --a: clamp(0, calc((var(--sc-p, 0) - 0.1) / 0.8), 1); --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); }
.ha-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; align-content: end; justify-items: center; padding: 0 var(--margen) clamp(4rem, 13svh, 8rem); text-align: center; }
.ha-portada-pintura { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ha-portada-pintura i { position: absolute; inset: -3%; background: var(--f1) 50% 50% / cover no-repeat; scale: calc(1.03 + var(--e) * .06); }
.ha-portada-pintura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--claro) 20%, transparent), color-mix(in oklab, var(--claro) 55%, transparent) 55%, color-mix(in oklab, var(--claro) 82%, transparent)); }
@media (max-width: 760px) { .ha-portada-pintura i { background-image: var(--f1m); } }
.ha-portada-foto { position: absolute; inset: 0; z-index: 1; }
.ha-portada-foto .jd-marcador { height: 100%; }
/* El ramo, cabeza abajo, cuelga desde arriba como un ramo que se pone a secar: la cascada. */
.ha-ramo { position: absolute; z-index: 2; left: 50%; top: -9svh; height: min(58svh, 96vw); aspect-ratio: 1.03; transform-origin: 50% 0; translate: -50% calc(var(--e) * 14svh); rotate: calc(sin(var(--e) * 3.1416) * 3deg); filter: drop-shadow(0 26px 30px rgb(30 50 100 / .18)); animation: ha-cuelga 7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

.ha-ramo img { display: block; height: 100%; width: auto; max-width: none; margin-inline: auto; scale: 1 -1; }
@keyframes ha-cuelga { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.ha-portada-texto { position: relative; z-index: 3; display: grid; justify-items: center; gap: clamp(.6rem, 2svh, 1.1rem); opacity: calc(1 - var(--e) * 1.4); translate: 0 calc(var(--e) * -6svh); }
.ha-kicker { font: 600 .72rem/1.4 var(--texto); letter-spacing: .42em; text-transform: uppercase; color: var(--acc); padding-left: .42em; }
.ha .ha-nombres { grid-row: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; max-width: none; opacity: 1; translate: none; font: 300 clamp(3.2rem, 1.2rem + 6.4vw, 8rem)/1 var(--titulos); letter-spacing: -0.03em; color: var(--txt); }
.ha .ha-nombres .jd-y { font-size: 1.25em; line-height: .6; margin: 0; }
.ha-fecha-corta { font: 500 .8rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--txt-suave); padding-left: .34em; }
.ha-feston-portada { top: auto; bottom: -1px; height: calc(var(--fes) + 72svh); z-index: 5; transform: translate3d(0, calc((1 - var(--e)) * 72svh), 0); }
.ha-feston-portada::before, .ha-feston-portada::after { -webkit-mask: radial-gradient(circle at 50% 100%, #000 calc(var(--fes) - .5px), transparent var(--fes)) 0 0 / calc(var(--fes) * 2) var(--fes) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--fes) - 1px) / 100% 100% no-repeat; mask: radial-gradient(circle at 50% 100%, #000 calc(var(--fes) - .5px), transparent var(--fes)) 0 0 / calc(var(--fes) * 2) var(--fes) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--fes) - 1px) / 100% 100% no-repeat; }
.ha-feston-portada::after { background: var(--claro); }
.ha-feston-portada::before { background: color-mix(in oklab, var(--acc) 30%, var(--claro)); translate: calc(var(--fes) + var(--e) * -30px) calc(var(--fes) * -.4); }
.con-fotos .ha-escena { --txt: #FCFAF6; --txt-suave: rgb(252 250 246 / .9); }
.con-fotos .ha-portada-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 22 40 / .1), rgb(15 22 40 / .55)); }
.con-fotos .ha-ramo { opacity: .9; }

/* ---------- 2 · Frase ---------- */
.ha-intro { padding: clamp(6rem, 16vh, 11rem) 0 clamp(5rem, 12vh, 8rem); }
.ha-intro .ha-columna { gap: 1.6rem; }
.ha-gota { width: 34px; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 12%, var(--acc) 14%); }
.ha-frase { font: 300 clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem)/1.3 var(--titulos); letter-spacing: -0.01em; text-wrap: balance; }
.ha-frase .l { display: block; }
.ha-firma { font: 600 .74rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--acc); padding-left: .34em; }
.ha-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); }
.ha-detalle { width: calc(100% + 2 * var(--margen)); aspect-ratio: 16 / 10; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 72%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 72%); }

/* ---------- 3 · Fecha: el ramo se deshace en un anillo de florecitos ---------- */
.ha-fecha { --a: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.62), 1); --m: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); }
.ha-fecha-escena { height: 100svh; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: clamp(.6rem, 2.4svh, 1.6rem); padding-inline: var(--margen); text-align: center; }
.ha-fecha-escena::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(48% 46% at 50% 40%, color-mix(in oklab, var(--claro) 92%, transparent), transparent 100%); }
.ha-corona { position: relative; width: min(54svh, 82vw, 34rem); aspect-ratio: 1; container-type: inline-size; }
.ha-corona-ramo { position: absolute; left: 21%; top: 2%; width: 58%; height: auto; transform-origin: 50% 30%; opacity: calc(1 - var(--m) * .88); scale: calc(1 - var(--m) * .3); translate: 0 calc(var(--m) * 6%); filter: drop-shadow(0 18px 22px rgb(30 50 100 / .16)); }
.ha-anillo { position: absolute; inset: 8% 8% 4%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--acc) 40%, transparent); -webkit-mask: conic-gradient(#000 calc(var(--m) * 360deg), transparent 0); mask: conic-gradient(#000 calc(var(--m) * 360deg), transparent 0); }
/* Cada florecito: su propio avance (--mf) con un pequeño retraso (--q) para que no lleguen todos juntos. */
.ha-flor { --mf: clamp(0, calc((var(--m) - var(--q)) / (1 - var(--q))), 1); position: absolute; z-index: 2; width: var(--tam); aspect-ratio: 1; left: calc(var(--ox) + (var(--dx) - var(--ox)) * var(--mf)); top: calc(var(--oy) + (var(--dy) - var(--oy)) * var(--mf)); translate: -50% -50%; rotate: calc(var(--r0) + (var(--r1) - var(--r0)) * var(--mf)); scale: calc(.55 + var(--mf) * .45); opacity: calc(var(--mf) * 3); background: radial-gradient(circle, #FFFDF5 0 10%, color-mix(in oklab, var(--c) 70%, white) 12%, var(--c) 62%, color-mix(in oklab, var(--c) 80%, #1C2B52) 100%); filter: drop-shadow(0 3px 4px rgb(30 50 100 / .2)); }
.ha-dia { position: absolute; left: 50%; top: 52%; translate: -50% -50%; z-index: 3; display: grid; justify-items: center; gap: 2cqi; opacity: clamp(0, calc((var(--m) - .55) * 2.6), 1); scale: calc(.86 + var(--m) * .14); }
.ha-dia-sem { font: 600 max(.66rem, 3.6cqi)/1 var(--texto); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; color: var(--acc); }
.ha-dia-n { font: 300 30cqi/.86 var(--titulos); letter-spacing: -0.04em; color: var(--txt); font-variant-numeric: lining-nums; }
.ha-fecha-texto { display: grid; justify-items: center; gap: clamp(.5rem, 1.6svh, .9rem); }
.ha-mes { font: 300 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1.05 var(--titulos); text-transform: capitalize; }
.ha-mes i { font: 400 1.25em/.7 var(--script); font-style: normal; color: var(--script-c); padding-left: .1em; }
.ha-hora { font: 600 .76rem/1 var(--texto); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.ha-faltan { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; }
.ha-faltan[hidden] { display: none; }
.ha-faltan div { display: grid; justify-items: center; gap: .2rem; padding: .3rem clamp(.8rem, 2vw, 1.4rem); }
.ha-faltan div + div { border-left: 1px solid color-mix(in oklab, var(--txt) 16%, transparent); }
.ha-faltan strong { font: 400 1.6rem/1 var(--texto); font-variant-numeric: tabular-nums lining-nums; }
.ha-faltan span { font: 600 .64rem/1 var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-suave); }

/* ---------- 4 · Lugares ---------- */
.ha-lugares { padding: clamp(5rem, 12vh, 8rem) 0 clamp(5.5rem, 13vh, 8.5rem); }
.ha-lugar { display: grid; justify-items: center; gap: .8rem; }
.ha-lugar .acciones { justify-content: center; margin-top: .6rem; }
.ha-etiqueta { font: 600 .74rem/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acc); padding-left: .32em; }
.ha-lugar-nombre { font: 300 clamp(2rem, 1.4rem + 2.2vw, 3.4rem)/1.08 var(--titulos); letter-spacing: -0.015em; text-wrap: balance; }
.ha-lugar-dir { color: var(--txt-suave); }
.ha-lugar-foto { width: 100%; aspect-ratio: 3 / 2; margin-bottom: .6rem; -webkit-mask-image: radial-gradient(64% 64% at 50% 50%, #000 50%, transparent 74%); mask-image: radial-gradient(64% 64% at 50% 50%, #000 50%, transparent 74%); }
.ha-separador { display: block; width: 76px; height: 16px; margin: clamp(2.6rem, 7vh, 4rem) auto; background: radial-gradient(circle at 8px 8px, var(--acc) 0 5px, transparent 5.5px), radial-gradient(circle at 38px 8px, color-mix(in oklab, var(--acc) 60%, white) 0 7px, transparent 7.5px), radial-gradient(circle at 68px 8px, var(--acc) 0 5px, transparent 5.5px); }
.con-js .ha-lugar { opacity: 0; translate: 0 30px; transition: opacity 1100ms var(--salida), translate 1300ms var(--salida); }
.con-js .ha-lugar.visto { opacity: 1; translate: 0 0; }

/* ---------- 5 · Álbum: una cascada de fotos que se funden ---------- */
.ha-album { padding: clamp(7rem, 16vh, 10rem) 0 clamp(5rem, 12vh, 8rem); }
.ha-cascada { display: grid; justify-items: center; }
.ha-c { width: min(100% - 2 * var(--margen), 46rem); aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.ha-c + .ha-c { margin-top: -10%; }
.ha-c:nth-child(2) { translate: 12% 0; }
.ha-c:nth-child(3) { translate: -10% 0; }
.con-js .ha-c:nth-child(2).visto { translate: 12% 0; }
.con-js .ha-c:nth-child(3).visto { translate: -10% 0; }

/* ---------- 6 · El gran día: línea central, un florecito que se abre en cada hora ---------- */
.ha-dia-acto { padding: clamp(6rem, 14vh, 9rem) 0; }
.ha-momentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ha .ha-momento::before { display: none; }
.ha-momento { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 0 0 clamp(2.6rem, 7vh, 4rem); }
.ha-momento:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: .6rem; height: clamp(1.4rem, 4vh, 2.4rem); width: 1px; background: color-mix(in oklab, var(--acc) 40%, transparent); }
.ha-marca { width: 26px; aspect-ratio: 1; margin-bottom: .5rem; background: radial-gradient(circle, #fff 0 12%, var(--acc) 14%); scale: .2; rotate: -90deg; transition: scale 900ms cubic-bezier(.34, 1.4, .64, 1) 200ms, rotate 1200ms var(--salida) 200ms; }
.ha-momento.visto .ha-marca { scale: 1; rotate: 0deg; }
.ha-momento-hora { font: 300 clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem)/1 var(--titulos); white-space: nowrap; font-variant-numeric: lining-nums; }
.ha-momento-hora small { font: 600 .24em/1 var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); vertical-align: .8em; padding-left: .3em; }
.ha-momento-que { color: var(--txt-suave); font-size: 1.08rem; }

/* ---------- 7 · Detalles ---------- */
.ha-detalles { position: relative; overflow-x: clip; padding: clamp(4rem, 10vh, 7rem) 0 clamp(7rem, 16vh, 10rem); }
.ha-bloque { display: grid; justify-items: center; gap: .9rem; width: 100%; }
.ha-grande { font: 300 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.3 var(--titulos); text-wrap: balance; }
.ha .jd-paleta { justify-content: center; }
.ha .jd-cuenta { width: 100%; text-align: left; }
.ha-ramo-lado { position: absolute; z-index: 1; right: max(-6vw, calc(50vw - 46rem)); top: 6%; width: clamp(9rem, 18vw, 17rem); height: auto; opacity: .95; rotate: 14deg; pointer-events: none; }

/* ---------- 8 · Confirmar ---------- */
.ha-confirmar { padding: clamp(5rem, 12vh, 8rem) 0 clamp(6rem, 14vh, 9rem); }
.ha-confirmar .ha-columna { width: min(100% - 2 * var(--margen), 36rem); }
.ha-confirmar .jd-nota { margin: -1rem 0 2rem; }
.ha-hoja { width: 100%; text-align: left; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 30px; color: var(--tinta); --txt: var(--tinta); --txt-suave: color-mix(in oklab, var(--tinta) 72%, var(--claro)); background: linear-gradient(170deg, #fff, var(--claro) 70%); box-shadow: 0 60px 90px -50px rgb(0 0 0 / .7); }
.ha-hoja .boton { background: var(--tinta); border-color: var(--tinta); color: var(--claro); }
.ha-hoja .boton-suave { background: transparent; color: var(--tinta); border-color: color-mix(in oklab, var(--tinta) 30%, transparent); }

/* ---------- 9 · Cierre ---------- */
.ha-cierre.ha-banda { background: linear-gradient(180deg, var(--banda-1b), color-mix(in oklab, var(--banda-1b) 80%, black)), var(--banda-1b); }
.ha-cierre { padding: clamp(4rem, 10vh, 7rem) 0 clamp(4rem, 10vh, 6rem); min-height: 90svh; display: grid; align-items: center; }
.ha-cierre .ha-columna { gap: 1rem; }
.ha-ramo-cierre { width: clamp(9rem, 22vw, 14rem); height: auto; margin-bottom: .6rem; filter: drop-shadow(0 20px 26px rgb(0 0 0 / .35)); }
.ha-cierre-nombres { font: 300 clamp(3rem, 1.8rem + 4.6vw, 6.4rem)/1.04 var(--titulos); letter-spacing: -0.02em; text-wrap: balance; }
.ha-cierre-nombres i { font: 400 1.3em/.5 var(--script); font-style: normal; color: var(--acc-banda); }
.ha-cierre-fecha { font: 500 .8rem/1.2 var(--texto); letter-spacing: .34em; text-transform: uppercase; color: var(--acc-banda); padding-left: .34em; margin-bottom: .8rem; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.ha-ramo { height: min(40svh, 84vw); top: -5svh; }
	.ha .ha-nombres { flex-direction: column; align-items: center; font-size: clamp(3.2rem, 1.4rem + 10vw, 4.6rem); line-height: 1.02; }
	.ha .ha-nombres .jd-y { margin: .06em 0 .02em; }
	.ha-corona { width: min(82vw, 44svh); }
	.ha-ramo-lado { right: -14vw; top: 2%; width: 34vw; opacity: .7; }
	.ha .jd-cuenta { grid-template-columns: 1fr; }
	.ha .jd-cuenta .boton { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
	.ha-c:nth-child(2), .ha-c:nth-child(3), .con-js .ha-c.visto { translate: none !important; }
	.ha-c + .ha-c { margin-top: -14%; }
}
@media (max-width: 380px) { .ha-faltan div { padding-inline: .7rem; } }

/* ---------- Movimiento reducido: los florecitos ya forman el anillo y el día se ve completo ---------- */
.quieto .ha-escena, .quieto .ha-fecha-escena, .sin-js .ha-escena, .sin-js .ha-fecha-escena { position: relative; }
.quieto .ha-escena, .sin-js .ha-escena { height: auto; min-height: 100svh; }
.quieto .ha-fecha-escena, .sin-js .ha-fecha-escena { height: auto; min-height: 90svh; padding-block: 12svh; }
.quieto .ha-portada { --e: 0; }
.quieto .ha-feston-portada { transform: translate3d(0, 72svh, 0); }
.quieto .ha-fecha, .sin-js .ha-fecha { --m: 1; }
.quieto .ha-ramo { animation: none; }
.quieto .ha-marca { scale: 1; rotate: 0deg; transition: none; }
.quieto .ha-lugar { opacity: 1; translate: none; transition: none; }
.quieto .ha-feston::before { translate: var(--fes) calc(var(--fes) * -.38); }