/* 53 · Congreso — modernismo suizo con datos: petróleo, coral y gris, piezas isométricas.
   Guion: el gafete del evento cuelga de su cordón; el nombre del congreso en Inter Black sobre una red de nodos que
   gira despacio; el atril con micrófono y la pantalla del escenario entran desde los lados. En la fecha la red se
   reacomoda y se vuelve una hoja de calendario con el día. La agenda va en tarjetas. */

.c-congreso { --display-peso: 900; --nombre-color: #FFFFFF; --titulo-letra: "Inter"; --titulo-peso: 900; --titulo-espacio: -.035em; --display-espacio: -.045em;
	--dia-letra: "Inter"; --dia-color: #0F3B47; --radio: 14px; --vj: 64px; --nombre-tam: clamp(2.6rem, 7vw, 6.4rem); --sombra: 0 26px 30px rgb(0 0 0 / .35); }
.c-congreso .e-escena { place-items: center start; }
.c-congreso .e-titulos { justify-items: start; text-align: left; padding-left: 8vw; max-width: min(92vw, 880px); }
.c-congreso .e-nombre { white-space: normal; max-width: 12ch; line-height: .92; }
.c-congreso .e-evento { color: #FF8A7A; }
.c-congreso .e-empresa { justify-items: start; }
.c-congreso .e-logo { border-color: rgb(255 255 255 / .35); color: #CFE1E6; }

.cg-red { --w: min(70vmin, 620px); right: -6vw; top: calc(50% - min(36vmin, 320px)); --dr: 50deg; --ds: .15; --ey: 0px; --ed: .2s; --fd: 10s; --fa: 6px; opacity: .8; }
.cg-atril { --w: min(16vmin, 150px); right: 30vw; bottom: 2vh; --dy: 10vh; --ex: 20vw; --ey: 0px; --ed: .9s; --fd: 0s; }
.cg-atril .e-img { animation: none; }
.cg-pantalla { --w: min(18vmin, 170px); right: 8vw; bottom: 4vh; --dy: 6vh; --dx: 4vw; --ex: 30vw; --ey: 0px; --ed: 1.1s; --fd: 0s; }
.cg-pantalla .e-img { animation: none; }
.cg-gafete { --w: min(12vmin, 110px); right: 46vw; top: -2vh; --dy: -30vh; --dr: 10deg; --ey: -40vh; --ed: .6s; --fd: 3.6s; --fr: 4deg; }

/* entrada */
.c-congreso .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #134A58, #0B2A33 72%); }
.cg-entrada-gafete { position: absolute; left: 50%; top: -2%; width: min(22vmin, 180px); translate: -50% 0; animation: e-flota 3s ease-in-out infinite alternate; }
.c-congreso .xv-entrada-nombre { white-space: normal; max-width: 13ch; font-size: clamp(2.2rem, 7.5vw, 4.4rem); }
.c-congreso .xv-entrada .xv-evento { color: #FF8A7A; }

/* bienvenida */
.c-congreso .e-ornamento { width: min(56%, 220px); }
.c-congreso .e-firma { font-family: "Kaushan Script", cursive; color: #FF8A7A; }

/* fecha: la red se reacomoda y se vuelve una hoja de calendario */
.cg-m-red { inset: 4%; transform: rotate(calc(var(--m) * 180deg)) scale(calc(1 - var(--t2) * .5)); opacity: clamp(0, calc(1 - var(--t2) * 1.6), 1); }
.cg-m-cal { left: 14%; top: 10%; width: 72%; height: 80%; border-radius: 22px; background: #FFFFFF; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55);
	border-top: 46px solid #FF6B57; opacity: var(--t2); transform: perspective(900px) rotateX(calc((1 - var(--t2)) * -70deg)) scale(calc(.6 + var(--t2) * .4)); transform-origin: 50% 0; }
.cg-m-cal::before, .cg-m-cal::after { content: ""; position: absolute; top: -58px; width: 12px; height: 26px; border-radius: 6px; background: #0B2A33; }
.cg-m-cal::before { left: 26%; } .cg-m-cal::after { right: 26%; }
.c-congreso .e-dia-caja { translate: 0 8%; }
.c-congreso .e-dia { font-weight: 900; letter-spacing: -.06em; font-size: clamp(4.6rem, 13vw, 7.6rem); }
.c-congreso .e-mes { color: #C23B2A; font-family: "Kaushan Script", cursive; }
.c-congreso .e-anio { color: #3B5F69; }

/* agenda en tarjetas */
.c-congreso .xv-itinerario { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: none; }
.c-congreso .xv-momento { grid-template-columns: 1fr; gap: 6px; border: 0; background: #134654; border-radius: 14px; padding: 18px 20px; border-left: 4px solid #FF6B57; }
.c-congreso .xv-momento:last-child { border-bottom: 0; }
.c-congreso .xv-momento time { color: #FF8A7A; }
.c-congreso .e-itinerario { background: linear-gradient(180deg, #0B2A33, #0F3B47); }
.c-congreso .xv-superficie { background: #134654; border-color: rgb(255 255 255 / .12); }

/* cierre */
.cg-cierre-red { position: absolute; right: -10vw; top: 10%; width: min(60vmin, 500px); opacity: .18; }

@media (max-width: 760px) {
	.cg-red { --w: 86vw; right: -34vw; top: 50vh; opacity: .6; }
	.cg-atril { --w: 22vw; right: 44vw; }
	.cg-pantalla { --w: 26vw; right: 6vw; }
	.cg-gafete { --w: 18vw; right: 10vw; }
	.c-congreso .xv-itinerario { grid-template-columns: 1fr; }
}