/* 22 · Candelabro · Velas encendidas.
   Noche azul con una luz cálida que tiembla; el candelabro abajo con sus tres llamas y el halo detrás.
   Cada sección clara llega a oscuras: baja una llama, se vuelve halo y la sección se enciende.
   Gesto propio en la fecha: las tres velas se encienden una por una y la llama de en medio sube, crece y pasa
   de gota a círculo de luz (morphing con clip-path) con el día adentro. Partículas: chispas, gotas de cera y luces.
   Letras: Anton (nombres y títulos, en mayúsculas) · Kaushan Script (solo el «&») · Oswald (texto). */

@property --luz { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.ca {
	--claro: #F3E9D2;
	--claro-2: #E8D8B4;
	--noche: #14213D;
	--oro: #B8893B;
	--llama: #F4A340;
	--acc: #8A4F10;
	--script-c: #B4651A;
	--banda-1: #14213D;
	--banda-1b: #0D162B;
	--banda-2: #0E1830;
	--banda-2b: #070C18;
	--banda-txt: #F3E9D2;
	--acc-banda: #F4C06A;
	--mota: rgb(255 214 150);
	--sobre-papel: #F3E9D2;
	--sobre-solapa: #E8D8B4;
	--sello-1: #1E2E52;
	--sello-2: #0D162B;
	--sello-txt: #F4C06A;
	--cielo-base: #0A1122;
}
.ca .jd-pintura { background: radial-gradient(60% 45% at 50% 0%, rgb(255 236 200 / .8), transparent 70%), linear-gradient(180deg, #F3E9D2, #E8D8B4); }
.ca .jd-pintura::after { display: none; }
.ca .jd-titulo-sec { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.6rem); text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.ca .jd-titulo-sec i { text-transform: none; font-size: .78em; letter-spacing: 0; line-height: 1; }
.ca .jd-lugar-nombre, .ca .jd-grande, .ca .jd-momento-hora, .ca .jd-cierre-nombres, .ca .respuesta-texto { font-family: var(--titulos); text-transform: uppercase; letter-spacing: .01em; }
.ca .jd-grande { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.15; }
.ca .jd-sub, .ca .jd-kicker, .ca .jd-lugar-tipo, .ca .boton, .ca .jd-cierre-fecha { font-weight: 600; }
.ca .jd-cierre-nombres i, .ca .jd-y { text-transform: none; }
.ca .boton { letter-spacing: .12em; }

/* Llamas que tiemblan: escala y un poco de inclinación, cada una con su propio ritmo. */
@keyframes ca-tiembla { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 18% { transform: scale(.96, 1.06) skewX(-2deg); } 37% { transform: scale(1.03, .95) skewX(1.5deg); } 55% { transform: scale(.98, 1.04) skewX(-1deg); } 76% { transform: scale(1.02, .97) skewX(2deg); } }
@keyframes ca-respira { 0%, 100% { opacity: .75; transform: scale(1); } 40% { opacity: 1; transform: scale(1.05); } 70% { opacity: .82; transform: scale(.98); } }

/* ---------- El candelabro (portada, fecha y cierre) ---------- */
.ca-candelabro { position: absolute; z-index: 2; aspect-ratio: 643 / 820; pointer-events: none; }
.ca-cuerpo { position: relative; z-index: 1; display: block; width: 100%; height: auto; clip-path: polygon(0 17.2%, 42% 17.2%, 42% 11.8%, 56% 11.8%, 56% 17.2%, 100% 17.2%, 100% 100%, 0 100%); filter: drop-shadow(0 30px 40px rgb(0 0 0 / .45)); }
.ca-halo-c { position: absolute; z-index: 0; width: 170%; left: -35%; top: -62%; max-width: none; opacity: .8; mix-blend-mode: screen; animation: ca-respira 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.ca-fuego { position: absolute; z-index: 2; width: 10%; aspect-ratio: 509 / 820; }
.ca-fuego img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0 10px rgb(244 163 64 / .9)) drop-shadow(0 0 26px rgb(244 163 64 / .5)); animation: ca-tiembla 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.ca-fuego-centro { left: 44.9%; top: -.8%; }
.ca-fuego-izq { left: 5.9%; top: 4.6%; }
.ca-fuego-der { left: 84%; top: 4.6%; }
.ca-fuego-izq img { animation-duration: 2.2s; animation-delay: -.7s; }
.ca-fuego-der img { animation-duration: 2.9s; animation-delay: -1.3s; }

/* ---------- Portada ---------- */
.ca-cielo .c1 { background: radial-gradient(closest-side, rgb(244 163 64 / .34), rgb(244 163 64 / 0)); left: calc(50% - 45vmax); top: auto; bottom: -55vmax; }
.ca-cielo .c2 { background: radial-gradient(closest-side, rgb(46 78 150 / .5), rgb(46 78 150 / 0)); }
.ca-cielo .c3 { background: radial-gradient(closest-side, rgb(184 137 59 / .22), rgb(184 137 59 / 0)); }
.ca-cielo .c4 { border-radius: 0; background: radial-gradient(55% 45% at 50% 82%, rgb(255 190 110 / .32), transparent 70%); animation: ca-respira 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.ca-candelabro-p { width: min(34vw, 400px, 56svh * .784); left: 50%; bottom: -3svh; translate: -50% 0; transform: translate3d(0, calc(var(--e) * 12svh), 0) scale(calc(1 + var(--e) * .12)); }
.ca-portada-texto { position: absolute; inset: 0 0 auto; z-index: 3; display: grid; justify-items: center; gap: clamp(.5rem, 1.6svh, 1rem); padding: clamp(3.2rem, 11svh, 7rem) var(--margen) 0; text-align: center; }
.ca-kicker { color: var(--acc-banda); }
.ca .ca-nombres { grid-row: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; font-size: clamp(3.4rem, 1rem + 6.4vw, 8.6rem); line-height: .95; text-transform: uppercase; letter-spacing: .01em; color: var(--claro); max-width: none; text-shadow: 0 0 34px rgb(244 163 64 / .45); opacity: calc(1 - var(--e) * 1.15); translate: 0 calc(var(--e) * -8svh); }
.ca .ca-nombres .jd-y { color: var(--llama); font-size: .9em; margin: 0 .04em; text-shadow: 0 0 24px rgb(244 163 64 / .7); }
.ca-fecha-corta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1rem; font: 500 .9rem/1.3 var(--texto); letter-spacing: .3em; text-transform: uppercase; color: var(--claro); padding-left: .3em; opacity: calc(1 - var(--e) * 1.8); }
.ca-fecha-corta i { width: 6px; height: 6px; border-radius: 50%; background: var(--llama); box-shadow: 0 0 10px var(--llama); }
.ca .ca-baja { left: auto; right: var(--margen); translate: none; color: var(--acc-banda); font-weight: 600; opacity: calc(.9 - var(--e) * 3); z-index: 4; }

/* ---------- Secciones que se encienden ---------- */
.ca-vela { position: relative; --luz: 0%; }
.ca-vela::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 50% 5.5rem, transparent var(--luz), rgb(13 22 43 / .95) calc(var(--luz) + 26%)); transition: --luz 1900ms cubic-bezier(.23, 1, .32, 1) 250ms; }
.ca-vela.visto::after { --luz: 170%; }
.ca-luz { position: absolute; z-index: 7; left: 50%; top: 2.2rem; width: 52px; aspect-ratio: 509 / 820; translate: -50% 0; pointer-events: none; }
.ca-luz-llama { position: relative; z-index: 1; display: block; width: 100%; transform-origin: 50% 100%; filter: drop-shadow(0 0 10px rgb(244 163 64 / .9)); opacity: 0; translate: 0 -60px; transition: opacity 700ms var(--salida), translate 1100ms var(--salida); }
.ca-luz-llama { animation: ca-tiembla 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.ca-luz-halo { position: absolute; z-index: 0; left: 50%; top: 40%; width: 640%; max-width: none; translate: -50% -50%; opacity: 0; scale: .15; mix-blend-mode: multiply; transition: opacity 1300ms var(--salida) 150ms, scale 1900ms var(--salida) 150ms; }
.ca-vela.visto .ca-luz-llama { opacity: 1; translate: 0 0; }
.ca-vela.visto .ca-luz-halo { opacity: .55; scale: 1; }

/* ---------- La frase ---------- */
.ca-intro { padding-top: clamp(9rem, 18vh, 12rem); }
.ca-frase { font: 400 clamp(1.6rem, 1rem + 1.9vw, 2.7rem)/1.28 var(--texto); color: var(--tinta); text-wrap: balance; }
.ca-firma { font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1 var(--titulos); text-transform: uppercase; letter-spacing: .02em; color: var(--tinta); }
.ca-firma i { font: 400 1.2em/0 var(--script); text-transform: none; color: var(--script-c); padding: 0 .1em; }

/* ---------- La fecha: tres velas, una gota que se vuelve círculo de luz ---------- */
.ca-fecha { --mg: clamp(0, calc((var(--sc-p, 0) - .32) / .32), 1); --v1: clamp(0, calc((var(--sc-p, 0) - .06) * 10), 1); --v2: clamp(0, calc((var(--sc-p, 0) - .14) * 10), 1); --v3: clamp(0, calc((var(--sc-p, 0) - .22) * 10), 1); --t: clamp(0, calc((var(--mg) - .62) * 2.8), 1); }
.ca-fecha-escena { height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(60% 55% at 50% 58%, rgb(244 163 64 / calc(var(--sc-p, 0) * .3)), transparent 70%); }
.ca-candelabro-f { width: min(32vw, 340px, 46svh * .784); left: 50%; bottom: -5svh; translate: -50% 0; }
.ca-candelabro-f .ca-fuego-izq { opacity: var(--v1); scale: calc(.3 + var(--v1) * .7); }
.ca-candelabro-f .ca-fuego-der { opacity: var(--v2); scale: calc(.3 + var(--v2) * .7); }
.ca-candelabro-f .ca-fuego-centro { opacity: calc(var(--v3) * (1 - var(--mg))); scale: calc(.3 + var(--v3) * .7); }
.ca-candelabro-f .ca-fuego { transform-origin: 50% 100%; }
.ca-candelabro-f .ca-halo-c { opacity: calc(var(--v1) * .45 + var(--v3) * .4); }
.ca-gota { position: absolute; z-index: 3; left: 50%; top: 42%; width: min(80vw, 25rem, 54svh); aspect-ratio: 1; translate: -50% -50%; opacity: clamp(0, calc((var(--sc-p, 0) - .27) * 12), 1); transform: translate3d(0, calc((1 - var(--mg)) * 22svh), 0) scale(calc(.16 + var(--mg) * .84)); background: radial-gradient(circle at 50% 58%, #FFF4D6, #F9D18A 34%, #F4A340 70%, #D9792B); }
.ca-gota i { display: none; }
.ca-fecha-texto { position: absolute; z-index: 4; left: 50%; top: 42%; width: min(80vw, 25rem, 54svh); aspect-ratio: 1; translate: -50% -50%; display: grid; place-content: center; justify-items: center; gap: .25rem; text-align: center; opacity: var(--t); --txt: var(--noche); --txt-suave: rgb(20 33 61 / .78); color: var(--noche); }
.ca-sem { font: 600 .8rem/1 var(--texto); letter-spacing: .38em; text-transform: uppercase; padding-left: .38em; color: #6B3A08; }
.ca-num { font: 400 clamp(4.4rem, 2.6rem + 5vw, 7.4rem)/.92 var(--titulos); color: var(--noche); }
.ca-mes { font: 600 clamp(1rem, .85rem + .5vw, 1.25rem)/1.2 var(--texto); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }
.ca-hora { font: 500 .8rem/1 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: #6B3A08; margin-bottom: .3rem; }
.ca .ca-faltan { margin: .2rem auto .8rem; border-color: rgb(20 33 61 / .22); }
.ca .ca-faltan div { padding: .45rem .8rem; justify-items: center; }
.ca .ca-faltan div + div { padding-left: .8rem; border-color: rgb(20 33 61 / .22); }
.ca .ca-faltan strong { font-family: var(--titulos); font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); color: var(--noche); }
.ca .ca-faltan span { color: rgb(20 33 61 / .8); }
.ca .ca-fecha-texto .boton { background: var(--noche); border-color: var(--noche); color: var(--claro); }

/* ---------- Dónde: dos cirios ---------- */
.ca-lugares { padding-top: clamp(9rem, 18vh, 12rem); }
.ca .ca-lugar { justify-items: center; text-align: center; }
.ca .ca-lugar .jd-lugar-tipo { justify-content: center; }
.ca .ca-lugar .acciones { justify-content: center; }
.ca-cirio { position: relative; display: grid; justify-items: center; margin-bottom: .6rem; }
.ca-cirio img { width: 34px; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0 10px rgb(244 163 64 / .9)); animation: ca-tiembla 2.5s cubic-bezier(.45, 0, .55, 1) infinite; opacity: 0; transition: opacity 600ms var(--salida) 1500ms; }
.ca-cirio i { display: block; width: 22px; height: 86px; margin-top: -4px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #E8D8B4, #FFF8E8 40%, #D9C79F); box-shadow: 0 0 0 1px rgb(20 33 61 / .08); transform: scaleY(.2); transform-origin: bottom; transition: transform 1300ms var(--salida) 300ms; }
.ca-lugar.visto .ca-cirio img { opacity: 1; }
.ca-lugar.visto .ca-cirio i { transform: none; }

/* ---------- El gran día: cada hora es una llamita ---------- */
.ca-dia { overflow: hidden; }
.ca-halo-dia { position: absolute; z-index: 0; right: -14vw; top: 6%; width: min(56vw, 760px); opacity: .45; mix-blend-mode: screen; pointer-events: none; }
.ca-dia .jd-dia-grid { position: relative; z-index: 1; }
.ca .ca-momento::before { display: none; }
.ca-marca { position: absolute; left: calc(-3.4rem - 10px); top: .25rem; width: 20px; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 0 8px rgb(244 163 64 / .9)); opacity: 0; scale: .3; transition: opacity 700ms var(--salida) 300ms, scale 900ms cubic-bezier(.34, 1.4, .64, 1) 300ms; animation: ca-tiembla 2.3s cubic-bezier(.45, 0, .55, 1) infinite; }
.ca-momento.visto .ca-marca { opacity: 1; scale: 1; }
.ca .ca-dia .jd-ruta-avance { background: linear-gradient(180deg, transparent, var(--llama) 30%); box-shadow: 0 0 10px rgb(244 163 64 / .6); }
.ca .ca-dia .jd-momento-hora { color: var(--claro); }

/* ---------- Detalles, confirmar y cierre ---------- */
.ca-detalles { padding-top: clamp(11rem, 22vh, 14rem); }
.ca-confirmar { overflow: hidden; }
.ca-halo-conf { position: absolute; z-index: 0; left: -16vw; top: -10%; width: min(60vw, 820px); opacity: .4; mix-blend-mode: screen; pointer-events: none; }
.ca-confirmar .jd-confirmar-grid { position: relative; z-index: 1; }
.ca .jd-hoja-papel .boton { background: var(--noche); border-color: var(--noche); color: var(--claro); }
.ca-cierre { grid-template-rows: auto auto; align-content: center; gap: 1rem; }
.ca-candelabro-c { position: relative; z-index: 1; width: min(42vw, 230px); margin: 0 auto; }
.ca-cierre .jd-cierre-texto { position: relative; z-index: 2; }
.ca .ca-cierre .jd-cierre-nombres { color: var(--claro); text-shadow: 0 0 30px rgb(244 163 64 / .4); }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.ca .ca-nombres { flex-direction: column; align-items: center; font-size: clamp(3rem, 1rem + 10vw, 4.6rem); }
	.ca-candelabro-p { width: min(62vw, 46svh * .784); }
	.ca-candelabro-f { width: min(56vw, 40svh * .784); }
	.ca-gota, .ca-fecha-texto { width: min(92vw, 50svh); top: 40%; }
	.ca-num { font-size: 4.2rem; }
	.ca .ca-faltan div { padding: .4rem .5rem; }
	.ca .ca-faltan div + div { padding-left: .5rem; }
	.ca-marca { left: calc(-2.5rem - 10px); }
	.ca-halo-dia, .ca-halo-conf { display: none; }
}

/* ---------- Movimiento reducido ---------- */
.quieto .ca-fecha { --mg: 1; --v1: 1; --v2: 1; --v3: 1; --t: 1; }
.quieto .ca-gota { opacity: 1; transform: none; }
.quieto .ca-vela::after { display: none; }
.quieto .ca-luz-llama, .quieto .ca-luz-halo, .quieto .ca-cirio img, .quieto .ca-marca { opacity: 1; translate: none; scale: 1; transition: none; }
.quieto .ca-luz-halo { opacity: .55; }
.quieto .ca-cirio i { transform: none; transition: none; }
.quieto .ca-fuego img, .quieto .ca-luz-llama, .quieto .ca-cirio img, .quieto .ca-marca, .quieto .ca-halo-c, .quieto .ca-cielo .c4 { animation: none; }
.sin-js .ca-vela::after { display: none; }
.sin-js .ca-fecha { --mg: 1; --v1: 1; --v2: 1; --v3: 1; --t: 1; }
.sin-js .ca-gota { opacity: 1; transform: none; }