/* 50 · Gala Corporativa — hotelería de lujo: negro, oro viejo cepillado y marfil.
   Guion: una cortina de luces se abre desde el centro; el nombre del evento bajo una araña de cristal y el logo de
   la empresa en su placa. Al bajar la araña baja suave y las luces se apartan. En la fecha un sello dorado pasa de
   círculo a placa rectangular con el día. El programa se lee como un menú de gala sobre banda marfil. */

.c-gala { --display-peso: 800; --nombre-color: #F5F0E6; --titulo-letra: "Syne"; --titulo-peso: 700; --titulo-espacio: -.01em; --display-espacio: -.03em;
	--dia-letra: "Syne"; --dia-color: #1A1408; --radio: 6px; --vj: 46px; --nombre-tam: clamp(2.8rem, 7.6vw, 6.8rem); --sombra: 0 26px 30px rgb(0 0 0 / .55); }
.c-gala .e-nombre { white-space: normal; max-width: 12ch; line-height: .95; }
.c-gala .e-evento { color: #CDB27A; }
.c-gala .e-logo { border-color: rgb(205 178 122 / .55); color: #CDB27A; background: linear-gradient(160deg, rgb(205 178 122 / .1), transparent); }
.c-gala .e-titulos { translate: 0 6vh; }

.ga-luces-izq, .ga-luces-der { --w: min(52vmin, 520px); top: -4vh; --ey: 0px; --ed: .1s; --fd: 7s; --fa: 4px; --fr: .4deg; opacity: .95; }
.ga-luces-izq { left: -2vw; --dx: -14vw; --ex: 20vw; }
.ga-luces-der { right: -2vw; --dx: 14vw; --ex: -20vw; }
.ga-luces-der .e-img { scale: -1 1; }
.ga-arana { --w: min(30vmin, 290px); left: calc(50% - min(15vmin, 145px)); top: -3vh; --dy: 14vh; --ds: -.1; --ey: -30vh; --ed: .5s; --fd: 9s; --fa: 5px; --fr: .6deg; }
.ga-copa { --w: min(9vmin, 86px); right: 10vw; bottom: 6vh; --dy: -10vh; --dr: -6deg; --ex: 20vw; --ey: 0px; --ed: 1s; --fd: 5s; }

/* entrada: la cortina de luces se abre */
.c-gala .xv-entrada { background: radial-gradient(70% 60% at 50% 45%, #1B1A1E, #0B0B0D 70%); }
.ga-entrada-luces { position: absolute; top: -3%; width: min(56vmin, 520px); opacity: .95; }
.ga-el { left: 0; } .ga-er { right: 0; scale: -1 1; }
.c-gala .xv-entrada .xv-evento { color: #CDB27A; }
.c-gala .xv-entrada-nombre { font-size: clamp(2.4rem, 8vw, 4.6rem); white-space: normal; max-width: 12ch; }

/* bienvenida */
.c-gala .e-ornamento { width: min(70%, 260px); }
.c-gala .e-firma { color: #CDB27A; font-size: clamp(2.6rem, 5vw, 3.8rem); }

/* fecha: un sello dorado pasa de círculo a placa con el día */
.ga-m-forma { left: 50%; top: 50%; width: calc(56% + var(--t2) * 36%); height: calc(56% - var(--t2) * 16%); translate: -50% -50%;
	border-radius: calc(50% - var(--t2) * 46%); border: 2px solid #CDB27A; box-shadow: 0 0 0 6px rgb(205 178 122 / .12), 0 0 40px rgb(205 178 122 / .25);
	opacity: clamp(0, calc(var(--t1) * 2.5), 1); transform: rotate(calc((1 - var(--t1)) * 90deg)) scale(calc(.6 + var(--t1) * .4)); }
.ga-m-placa { left: 6%; top: 29%; width: 88%; opacity: var(--t2); transform: scale(calc(.9 + var(--t2) * .1)); filter: drop-shadow(0 26px 30px rgb(0 0 0 / .6)); }
.c-gala .e-dia { font-weight: 800; font-size: clamp(4rem, 11vw, 6.6rem); letter-spacing: -.04em; }
.c-gala .e-mes { color: #3A2A10; font-size: clamp(2rem, 5vw, 3rem); margin-top: -.25em; }
.c-gala .e-anio { color: #3A2A10; }
.c-gala .e-dia-caja { translate: 0 2%; }

/* menú de gala sobre banda marfil */
.c-gala .e-itinerario { background: #F5F0E6; color: #0E0E10; --tinta: #0E0E10; --tinta-2: #4A4535; --linea: rgba(14,14,16,.14); --acento: #7A5A16; --boton: #0E0E10; --boton-tinta: #F5F0E6; }
.c-gala .e-itinerario .xv-itinerario { text-align: center; }
.c-gala .e-itinerario .xv-momento { grid-template-columns: 1fr; gap: 4px; justify-items: center; border: 0; padding: 16px 0; }
.c-gala .e-itinerario .xv-momento + .xv-momento::before { content: "✦"; color: #B89B5E; margin-bottom: 12px; }
.c-gala .e-itinerario .xv-momento span { font-family: "Syne", sans-serif; font-weight: 600; font-size: 1.3rem; }
.c-gala .e-dos { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.c-gala .xv-superficie { background: linear-gradient(160deg, #1A1A1D, #121214); border-color: rgb(205 178 122 / .35); }

/* cierre */
.ga-cierre-luces { position: absolute; left: 50%; top: -6%; width: min(70vmin, 600px); translate: -50% 0; opacity: .35; }

@media (max-width: 760px) {
	.ga-luces-izq, .ga-luces-der { --w: 62vw; }
	.ga-luces-izq { left: -12vw; } .ga-luces-der { right: -12vw; }
	.ga-arana { --w: 44vw; left: 28vw; top: 4vh; }
	.c-gala .e-titulos { translate: 0 10vh; }
}