/* 21 · Gala Esmeralda · Art déco.
   Noche esmeralda con rayos dorados que giran despacio; el abanico sale detrás de los nombres como un sol déco
   y dos diamantes flotan a distinta profundidad. Gesto propio en la fecha: el abanico (medio círculo) se vuelve
   arco escalonado, las líneas del marco se dibujan de abajo hacia arriba y el arco se abre en el cuadro de la fecha;
   el filo dorado sigue la forma todo el tiempo. Partículas: rombos dorados que destellan.
   Letras: Limelight (nombres y títulos) · Mr Dafoe (solo el «&») · Josefin Sans (texto). */

.ge {
	--claro: #F4EEDB;
	--claro-2: #E9DFC2;
	--esmeralda: #0F5C4D;
	--oro: #C9A24A;
	--oro-claro: #E8C76E;
	--acc: #0F5C4D;
	--script-c: #6E5216;
	--banda-1: #0F3B32;
	--banda-1b: #092520;
	--banda-2: #0B1A16;
	--banda-2b: #050C0A;
	--banda-txt: #F4EEDB;
	--acc-banda: #E8C76E;
	--mota: rgb(245 222 154);
	--sobre-papel: #F4EEDB;
	--sobre-solapa: #E9DFC2;
	--sello-1: #0F5C4D;
	--sello-2: #08332A;
	--sello-txt: #E8C76E;
	--cielo-base: #06120F;
	--oro-grad: linear-gradient(100deg, #A9802F, #F5DE9A 28%, #C9A24A 48%, #F9E7B0 68%, #B38A35);
	font-weight: 600;
}
.ge .jd-pintura { background: radial-gradient(50% 40% at 50% 0%, rgb(255 250 235 / .9), transparent 70%), linear-gradient(180deg, #F4EEDB, #E9DFC2); }
.ge .jd-pintura::after { display: none; }
.ge .jd-titulo-sec { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); letter-spacing: .01em; }
.ge .jd-titulo-sec i { font-size: 1.3em; }
.ge .jd-banda .jd-titulo-sec { color: var(--oro-claro); }
.ge .jd-lugar-nombre, .ge .jd-grande, .ge .jd-momento-hora, .ge .jd-cierre-nombres, .ge .respuesta-texto { font-family: var(--titulos); letter-spacing: .01em; }
.ge .jd-grande { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.3; }
.ge .jd-sub, .ge .jd-kicker, .ge .jd-lugar-tipo, .ge .boton { font-weight: 700; }
.ge .jd-nota, .ge .jd-lugar-dir { font-weight: 600; }

/* ---------- Portada ---------- */
.ge-cielo .c1 { background: radial-gradient(closest-side, rgb(25 128 104 / .62), rgb(25 128 104 / 0)); }
.ge-cielo .c2 { background: radial-gradient(closest-side, rgb(201 162 74 / .26), rgb(201 162 74 / 0)); }
.ge-cielo .c3 { background: radial-gradient(closest-side, rgb(12 80 66 / .7), rgb(12 80 66 / 0)); }
.ge-cielo .c4 { background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(232 199 110 / .09) 0deg 1.6deg, transparent 1.6deg 9deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 70%); mask-image: radial-gradient(closest-side, #000 20%, transparent 70%); animation-duration: 90s; }

.ge-abanico-p { width: min(52vw, 640px); left: 50%; bottom: -50svh; translate: -50% 0; filter: drop-shadow(0 -20px 60px rgb(232 199 110 / .25)); transform: translate3d(0, calc(var(--e) * -14svh), 0) scale(calc(1 + var(--e) * .18)); }
.ge-diamante-p { animation: ge-flota 7s cubic-bezier(.45, 0, .55, 1) infinite alternate; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .45)); }
.ge-diamante-a { width: clamp(110px, 12vw, 190px); left: 7vw; top: 16svh; rotate: -12deg; transform: translate3d(calc(var(--e) * -12vw), calc(var(--e) * -24svh), 0) rotate(calc(var(--e) * -50deg)); }
.ge-diamante-b { width: clamp(64px, 6.5vw, 116px); right: 10vw; top: 50svh; rotate: 16deg; opacity: .9; filter: blur(.6px) drop-shadow(0 14px 20px rgb(0 0 0 / .4)); animation-delay: -3s; transform: translate3d(calc(var(--e) * 8vw), calc(var(--e) * -10svh), 0) rotate(calc(var(--e) * 40deg)); }
@keyframes ge-flota { from { translate: 0 -10px; } to { translate: 0 12px; } }
.ge-portada-texto { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: clamp(.7rem, 2.2svh, 1.4rem); padding: 4svh var(--margen) 20svh; text-align: center; }
.ge-kicker { display: inline-flex; align-items: center; gap: 1rem; color: var(--oro-claro); padding-left: 0; }
.ge-kicker i { display: block; width: clamp(2rem, 5vw, 4rem); height: 5px; border-block: 1px solid currentColor; }
.ge .ge-nombres { grid-row: auto; font-size: clamp(3.2rem, 1rem + 6.6vw, 8.6rem); line-height: 1; letter-spacing: .02em; max-width: none; color: var(--oro-claro); text-shadow: 0 0 40px rgb(232 199 110 / .25); opacity: calc(1 - var(--e) * 1.15); translate: 0 calc(var(--e) * -9svh); }
/* Después del viaje desde el sobre, los nombres pasan a oro con brillo (el degradado no viaja bien en el clon). */
.ge .ge-nombres.ge-oro .jd-n > span { background: var(--oro-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ge-brillo 7s linear infinite; }
@keyframes ge-brillo { from { background-position: 0% 0; } to { background-position: 220% 0; } }
.ge .ge-nombres .jd-y { color: var(--claro); font-size: 1.15em; line-height: .9; margin: .04em 0 .02em; text-shadow: none; }
.ge-fecha-corta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.1rem; font: 700 .82rem/1.3 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--claro); padding-left: .32em; opacity: calc(1 - var(--e) * 1.8); }
.ge-rombo { display: inline-block; width: 9px; height: 9px; rotate: 45deg; background: var(--oro); box-shadow: 0 0 10px rgb(232 199 110 / .6); }
.ge .ge-baja { color: var(--oro-claro); font-weight: 700; opacity: calc(.9 - var(--e) * 3); }

/* ---------- La frase ---------- */
.ge-intro-caja { display: grid; grid-template-columns: auto minmax(0, 46rem) auto; justify-content: center; align-items: center; gap: clamp(1.4rem, 5vw, 5rem); --sube: clamp(0, calc((var(--sc-p, 0) - .12) * 2.6), 1); }
.ge-columna { width: 12px; height: clamp(14rem, 44vh, 26rem); background: linear-gradient(90deg, var(--oro) 0 2px, transparent 2px 5px, var(--oro) 5px 7px, transparent 7px 10px, var(--oro) 10px 12px); transform: scaleY(var(--sube)); transform-origin: 50% 100%; position: relative; }
.ge-columna::before { content: ""; position: absolute; left: 50%; top: -18px; width: 14px; height: 14px; margin-left: -7px; rotate: 45deg; background: var(--oro); }
.ge-intro-texto { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.ge-diamante-i { width: 70px; height: auto; rotate: calc(var(--sc-p, 0) * 220deg); filter: drop-shadow(0 10px 14px rgb(15 92 77 / .3)); }
.ge-frase { font: 600 clamp(1.45rem, 1rem + 1.5vw, 2.35rem)/1.38 var(--texto); color: var(--tinta); text-wrap: balance; }
.ge-firma { font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1 var(--titulos); color: var(--esmeralda); letter-spacing: .02em; }
.ge-firma i { font: 400 1.5em/0 var(--script); color: var(--script-c); padding: 0 .12em; }
.ge-detalle { grid-column: 1 / -1; height: 18rem; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }

/* ---------- La fecha: abanico → arco escalonado → cuadro ---------- */
.ge-fecha { --t: clamp(0, calc((var(--m2) - .45) * 2.2), 1); --dr: clamp(0, calc((var(--m1) - .45) * 1.9), 1); }
.ge-fecha-escena { height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: radial-gradient(55% 60% at 50% 55%, rgb(25 128 104 / .45), transparent 75%), repeating-conic-gradient(from 0deg at 50% 60%, rgb(232 199 110 / .05) 0deg 1.4deg, transparent 1.4deg 8deg); }
.ge-pieza { position: relative; width: min(84vw, 30rem, 70svh * .793); aspect-ratio: .793; }
.ge-morph-oro, .ge-morph { position: absolute; inset: 0; }
.ge-morph-oro { background: linear-gradient(135deg, #8F6B22, #F5DE9A 30%, #C9A24A 50%, #F9E7B0 70%, #A9802F); filter: drop-shadow(0 30px 50px rgb(0 0 0 / .5)); }
.ge-morph { background: radial-gradient(80% 70% at 50% 38%, #157A63, #0F5C4D 45%, #08332A); }
.ge-abanico-f { position: absolute; z-index: 2; left: 4%; width: 92%; top: 22%; opacity: calc(1 - var(--m1) * 1.6); transform: scale(calc(1 - var(--m1) * .25)) rotate(calc(var(--m1) * -20deg)); pointer-events: none; }
.ge-marco-f { position: absolute; z-index: 3; left: 5%; top: 1%; width: 90%; height: 97%; object-fit: fill; clip-path: inset(calc((1 - var(--dr)) * 100%) 0 0 0); transform: scale(calc(1 - var(--m2) * .1)); transform-origin: 50% 60%; pointer-events: none; filter: drop-shadow(0 0 12px rgb(232 199 110 / .35)); }
.ge-diamante-f { position: absolute; z-index: 4; left: 50%; top: -9%; width: 20%; translate: -50% 0; opacity: var(--m1); transform: rotate(calc(var(--sc-p, 0) * 200deg)) scale(calc(.6 + var(--m1) * .4)); filter: drop-shadow(0 10px 18px rgb(0 0 0 / .5)); }
.ge-fecha-texto { position: absolute; z-index: 5; inset: 24% 14% 9%; display: grid; place-content: center; justify-items: center; gap: .3rem; text-align: center; opacity: var(--t); translate: 0 calc((1 - var(--t)) * 16px); }
.ge-sem { font: 700 .76rem/1 var(--texto); letter-spacing: .4em; text-transform: uppercase; color: #F5DE9A; padding-left: .4em; }
.ge-num { font: 400 clamp(4.6rem, 2.6rem + 6vw, 8.4rem)/.95 var(--titulos); background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ge-mes { font: 700 clamp(.95rem, .8rem + .5vw, 1.2rem)/1.2 var(--texto); letter-spacing: .32em; text-transform: uppercase; color: var(--claro); padding-left: .32em; }
.ge-hora { font: 700 .78rem/1 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: #F5DE9A; margin-bottom: .3rem; }
.ge .ge-faltan { margin: .2rem auto .9rem; border-color: rgb(232 199 110 / .35); }
.ge .ge-faltan div { padding: .5rem .9rem; justify-items: center; }
.ge .ge-faltan div + div { padding-left: .9rem; border-color: rgb(232 199 110 / .35); }
.ge .ge-faltan strong { font-family: var(--titulos); font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); color: var(--claro); }
.ge .ge-faltan span { color: rgb(244 238 219 / .85); }

/* ---------- Dónde: cada lugar en su marco; las líneas se dibujan de abajo hacia arriba ---------- */
.ge-titulo { color: var(--tinta); }
.ge-lugares-lista { gap: clamp(1.6rem, 4vw, 4rem); }
.ge .ge-lugar { position: relative; padding: clamp(5.5rem, 13vw, 9.5rem) clamp(1.8rem, 4vw, 3.4rem) clamp(2.6rem, 5vw, 3.6rem); justify-items: center; text-align: center; min-height: 34rem; align-content: center; }
.ge .jd-lugar + .jd-lugar { padding-left: clamp(1.8rem, 4vw, 3.4rem); margin-left: 0; border: 0; }
.ge-marco-lugar { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; clip-path: inset(100% 0 0 0); transition: clip-path 2000ms var(--transito) 150ms; }
.ge-lugar.visto .ge-marco-lugar { clip-path: inset(0 0 0 0); }
.ge .ge-lugar > :not(.ge-marco-lugar) { position: relative; z-index: 1; }
.ge .ge-lugar .jd-lugar-tipo { justify-content: center; color: var(--esmeralda); }
.ge .ge-lugar .acciones { justify-content: center; }

/* ---------- El gran día: eje simétrico ---------- */
.ge-dia { position: relative; padding: clamp(7rem, 15vh, 10rem) 0 clamp(6rem, 14vh, 9rem); overflow: hidden; --baja: clamp(0, calc((var(--sc-p, 0) - .15) * 2), 1); }
.ge-diamante-d { position: absolute; left: 50%; top: clamp(1.5rem, 4vh, 3rem); width: 74px; translate: -50% 0; rotate: calc(var(--sc-p, 0) * 300deg); filter: drop-shadow(0 10px 16px rgb(0 0 0 / .5)); }
.ge-eje { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; display: grid; gap: clamp(2rem, 5vh, 3.4rem); }
.ge-eje::before { content: ""; position: absolute; left: 50%; top: -1rem; bottom: -1rem; width: 1px; background: linear-gradient(180deg, transparent, var(--oro) 12%, var(--oro) 88%, transparent); transform: scaleY(var(--baja)); transform-origin: top; }
.ge-paso { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(1rem, 3vw, 2.4rem); }
.ge .ge-paso::before { display: none; }
.ge-paso .ge-rombo { position: relative; z-index: 1; width: 14px; height: 14px; }
.ge-paso-hora { justify-self: end; font: 400 clamp(2rem, 1.4rem + 2vw, 3.4rem)/1 var(--titulos); color: var(--oro-claro); white-space: nowrap; }
.ge-paso-hora small { font: 700 .3em/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; padding-left: .3em; vertical-align: .6em; color: var(--claro); }
.ge-paso-que { font: 600 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.35 var(--texto); color: var(--claro); }

/* ---------- Detalles, confirmar y cierre ---------- */
.ge .jd-paleta li { border-radius: 2px; rotate: 45deg; }
.ge .jd-hoja-papel { border-radius: 0; box-shadow: 0 0 0 1px var(--oro), 0 0 0 6px #F4EEDB, 0 0 0 7px var(--oro), 0 60px 100px -50px rgb(0 0 0 / .7); }
.ge .jd-hoja-papel .boton { background: var(--esmeralda); border-color: var(--esmeralda); color: var(--claro); }
.ge-cierre { position: relative; }
.ge-abanico-c { position: absolute; z-index: 0; left: 50%; bottom: -62%; width: min(54vw, 580px); translate: -50% 0; opacity: .7; pointer-events: none; }
.ge-cierre .jd-cierre-texto { position: relative; z-index: 1; }
.ge .ge-cierre .jd-cierre-nombres { color: var(--oro-claro); }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.ge-abanico-p { width: 104vw; bottom: -40svh; }
	.ge-abanico-c { width: 110vw; bottom: -40%; }
	.ge-diamante-a { width: 84px; left: 4vw; top: 9svh; }
	.ge-diamante-b { width: 54px; right: 6vw; top: 62svh; }
	.ge .ge-nombres { font-size: clamp(2.8rem, 1rem + 8.6vw, 4.2rem); }
	.ge-portada-texto { padding-bottom: 24svh; }
	.ge-intro-caja { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; }
	.ge-columna { width: 7px; background: linear-gradient(90deg, var(--oro) 0 2px, transparent 2px 5px, var(--oro) 5px 7px); }
	.ge-fecha-texto { inset: 22% 9% 7%; }
	.ge-num { font-size: clamp(3.6rem, 2rem + 8vw, 4.6rem); }
	.ge .ge-faltan div { padding: .45rem .55rem; }
	.ge .ge-faltan div + div { padding-left: .55rem; }
	.ge .ge-lugar { min-height: 0; padding-top: 34vw; }
	.ge .jd-lugar + .jd-lugar { padding-top: 34vw; border: 0; }
	.ge-paso { column-gap: .8rem; }
	.ge-paso-hora { font-size: 1.7rem; }
}

/* ---------- Movimiento reducido ---------- */
.quieto .ge-fecha { --t: 1; --dr: 1; }
.quieto .ge-marco-lugar { clip-path: none; transition: none; }
.quieto .ge-diamante-p { animation: none; }
.quieto .ge-columna { transform: none; }
.quieto .ge-eje::before { transform: none; }
.sin-js .ge-fecha { --t: 1; --dr: 1; --m1: 1; --m2: 1; }
.sin-js .ge-marco-lugar { clip-path: none; }