/* 136 · Noche de Casino — XV de glamour de casino: paño verde, fichas, ruleta y luces doradas. Se abre la baraja en abanico.
   Portada: la mesa de paño verde con fichas y ruleta, con destellos dorados (WebGL, modo titila).
   Orden: la mesa de juego — cada sección es una apuesta: una ficha cae y la abre. El programa es la ruleta.
   Fecha: la ruleta gira y se detiene en el día. Cierre: el as con su nombre. */
.c-casino { --display-peso: 400; --nombre-color: #F4EEDF; --titulo-letra: "Playfair Display"; --titulo-peso: 900; --titulo-espacio: -.01em;
	--dia-letra: "Playfair Display"; --dia-color: #F4EEDF; --radio: 16px; --vj: 50px; --sombra: 0 18px 24px rgb(0 0 0 / .45); --nombre-tam: clamp(4rem, 11vw, 9rem);
	--ap-w: min(70vw, 340px); --ap-destello: rgb(226 190 74 / .55); }
.c-casino .xv-cielo { display: none; }
.c-casino main { background: radial-gradient(90% 50% at 50% 0%, #10663F, #0B3F2B 60%, #082C1E); }
.c-casino main > .xv-sec:not(#portada) { background: transparent; }
.c-casino .v-velo { background: radial-gradient(48% 40% at 50% 48%, rgb(6 32 21 / .62), transparent 76%); }

.c-casino .e-evento { font-family: "Inter", sans-serif; color: #E2BE4A; letter-spacing: .44em; font-size: .74rem; font-weight: 700; }
.c-casino .e-xv span { font-family: "Rye", serif; color: #E2BE4A; } .c-casino .e-xv { color: #F4EEDF; }
.c-casino .e-fecha { color: #F4EEDF; letter-spacing: .1em; }
.c-casino .e-nombre { text-shadow: 0 4px 30px rgb(0 0 0 / .7); }
.cs-ruleta { --w: min(30vmin, 280px); right: 4vw; top: 8vh; --dy: -10vh; --ex: 30vw; --ey: 0px; --ed: .3s; --fd: 12s; --fa: 2px; --fr: 0deg; }
.cs-ruleta .e-img { animation: cs-gira 22s linear infinite; }
@keyframes cs-gira { to { transform: rotate(360deg); } }
.cs-fichas { --w: min(22vmin, 210px); left: 4vw; bottom: 5vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 9s; --fa: 3px; --fr: 1deg; }
.cs-dados { --w: min(16vmin, 150px); right: 10vw; bottom: 6vh; --r: 12deg; --dy: 12vh; --dr: 40deg; --ex: 30vw; --ey: 20vh; --ed: .7s; --fd: 5s; --fa: 6px; --fr: 4deg; }

/* las apuestas: paneles de paño con borde de madera y la ficha que cae */
.c-casino main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: radial-gradient(120% 90% at 50% 0%, #13734B, #0E5A3C 60%, #0B4A31);
	border: 10px solid #3A2414; border-radius: 26px; padding: clamp(50px, 6vw, 74px) clamp(24px, 5vw, 64px); box-shadow: inset 0 0 0 2px rgb(226 190 74 / .6), inset 0 0 50px rgb(0 0 0 / .35), 0 40px 70px -40px rgb(0 0 0 / .8); }
.cs-ficha { top: -30px; right: clamp(14px, 4vw, 40px); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle, var(--fc) 0 46%, #FFFFFF 47% 52%, var(--fc) 53% 63%, transparent 64%), repeating-conic-gradient(var(--fc) 0 22.5deg, #FFFFFF 22.5deg 45deg);
	box-shadow: 0 10px 16px rgb(0 0 0 / .4), inset 0 0 0 2px rgb(0 0 0 / .2); }
.cs-ficha b { font: 800 .9rem/1 "Inter", sans-serif; color: #FFFFFF; }
.llego > .xv-ancho > .cs-ficha { animation: fi-salta .6s ease 1.1s; }
.c-casino .xv-kicker { color: #E2BE4A; letter-spacing: .34em; font-weight: 700; }
.c-casino .xv-titulo { color: #F4EEDF; }
.c-casino .xv-titulo .xv-script { font-family: "Rye", serif; color: #E2BE4A; }
.c-casino .xv-superficie { background: rgb(0 0 0 / .18); border: 1px solid rgb(226 190 74 / .3); border-radius: 12px; box-shadow: none; }
.c-casino .xv-momento time { color: #E2BE4A; font-weight: 700; }
.c-casino .e-firma { font-family: "Rye", serif; color: #E2BE4A; font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.c-casino .xv-boton:not(.xv-boton-suave) { background: #B7202E; color: #FFFFFF; border-color: #B7202E; }
.c-casino .e-ornamento { width: min(60%, 240px); }
.c-casino .xv-rsvp textarea, .c-casino .xv-rsvp input { background: rgb(0 0 0 / .2); color: #F4EEDF; border-color: rgb(226 190 74 / .35); }
/* el programa es la ruleta */
.c-casino #itinerario > .xv-ancho::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; aspect-ratio: 1; background: url("img/ruleta.webp") center / contain no-repeat; opacity: .35; animation: cs-gira 20s linear infinite; pointer-events: none; }

/* fecha: la ruleta se detiene en el día */
.c-casino .e-fecha-k { color: #E2BE4A; letter-spacing: .44em; font-weight: 700; }
.cs-m-ruleta { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: rotate(calc(var(--t1) * 1080deg + var(--t2) * 90deg)) scale(calc(.6 + var(--t1) * .4)); filter: drop-shadow(0 20px 30px rgb(0 0 0 / .5)); }
.cs-m-centro { inset: 27%; border-radius: 50%; background: radial-gradient(circle, #0E5A3C, #0A3A27); box-shadow: 0 0 0 4px #E2BE4A, 0 10px 30px rgb(0 0 0 / .5); opacity: var(--t2); transform: scale(calc(.5 + var(--t2) * .5)); }
.cs-m-bola { left: 50%; top: 9%; width: 4%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFFFFF, #CFCFCF); box-shadow: 0 2px 4px rgb(0 0 0 / .5);
	transform-origin: 50% 1020%; transform: translateX(-50%) rotate(calc(var(--t1) * -1440deg)); opacity: clamp(0, calc(var(--t1) * 3), 1); }
.c-casino .e-dia { font-size: clamp(3.6rem, 10vw, 5.4rem); }
.c-casino .e-mes { font-family: "Rye", serif; color: #E2BE4A; font-size: clamp(1rem, 2.6vw, 1.4rem); }
.c-casino .e-anio { color: #D7DCCB; font-size: .68rem; }

/* cierre: el as */
.cs-as { position: absolute; left: 50%; top: 4%; width: min(34vmin, 200px); aspect-ratio: .7; translate: -50% 0; rotate: -6deg; border-radius: 12px; background: #FBF7EC; box-shadow: 0 20px 40px rgb(0 0 0 / .5), inset 0 0 0 6px #FBF7EC, inset 0 0 0 7px #D4AF37;
	display: grid; place-items: center; animation: e-flota 4s ease-in-out infinite alternate; }
.cs-as i { font: normal 400 min(20vmin, 110px)/1 serif; color: #111111; }
.cs-as b { position: absolute; font: 400 min(6vmin, 30px)/1 "Rye", serif; color: #111111; } .cs-as b:first-child { top: 10px; left: 12px; } .cs-as b:last-child { bottom: 10px; right: 12px; rotate: 180deg; }
.c-casino .e-cierre { padding-top: clamp(300px, 44vh, 380px); }
.c-casino .e-cierre .xv-kicker { color: #E2BE4A; }

@media (max-width: 760px) {
	.c-casino { --nombre-tam: clamp(3.6rem, 19vw, 5.2rem); }
	.cs-ruleta { --w: 44vw; right: -12vw; top: 6vh; } .cs-fichas { --w: 34vw; left: -2vw; bottom: 4vh; } .cs-dados { --w: 26vw; right: 4vw; bottom: 5vh; }
	.c-casino main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 54px 20px 40px; border-width: 8px; }
}