/* 116 · Expo y Feria — ferias y exposiciones. Apertura: el gafete de acceso se columpia con el nombre del invitado;
   al tocarlo da la vuelta y abre. Portada: el recinto isométrico con los stands (la imagen respira).
   Orden: los stands — a cada sección cae un pin y tiene su número de stand; un minimapa en la esquina enciende
   cada stand visitado. Fecha: las hojas del calendario pasan hasta el día. */
.c-expo { --display-peso: 800; --nombre-color: #1E2230; --titulo-letra: "Unbounded"; --titulo-peso: 700; --titulo-espacio: -.03em; --dia-letra: "Bricolage Grotesque"; --dia-color: #1E2230;
	--radio: 20px; --vj: 46px; --sombra: 0 18px 24px rgb(30 34 48 / .2); --nombre-tam: clamp(3.4rem, 8vw, 7rem); }
.c-expo .xv-cielo { display: none; }
.c-expo main { background: #EEF1F6 linear-gradient(rgb(30 34 48 / .035) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(90deg, rgb(30 34 48 / .035) 1px, transparent 1px) 0 0 / 36px 36px; background-color: #EEF1F6; }
.c-expo main > .xv-sec:not(#portada) { background: transparent; }
.c-expo .v-velo { background: radial-gradient(52% 40% at 50% 46%, rgb(255 255 255 / .85), transparent 74%); }

html[data-largo] .c-expo .e-nombre { --n: 1; }

/* portada */
.c-expo .e-evento { color: #2F5BFF; letter-spacing: .36em; font-weight: 700; font-size: .76rem; }
.c-expo .e-nombre { white-space: normal; text-wrap: balance; max-width: 11ch; line-height: .95; }
.c-expo .e-logo { color: #4A5063; }
.c-expo .e-lema { color: #4A5063; font-weight: 500; }
.c-expo .e-fecha { color: #FFFFFF; background: #2F5BFF; padding: 7px 16px; border-radius: 999px; font-weight: 600; }
.ex-stand { --w: min(30vmin, 280px); right: 2vw; bottom: 3vh; --r: 0deg; --dx: 8vw; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .6s; --fd: 7s; --fa: 4px; --fr: 0deg; }
.ex-pin-a { --w: min(9vmin, 80px); left: 12vw; top: 14vh; --dy: -14vh; --ex: 0px; --ey: -40vh; --ed: .4s; --fd: 2.4s; --fa: 8px; --fr: 0deg; }
.ex-pin-b { --w: min(7vmin, 64px); left: 22vw; bottom: 16vh; --dy: 10vh; --ex: 0px; --ey: -60vh; --ed: .7s; --fd: 2.8s; --fa: 8px; --fr: 0deg; }

/* stands: tarjetas blancas con barra de color */
.c-expo main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 22px; padding: clamp(38px, 4.6vw, 58px) clamp(24px, 4.4vw, 54px) clamp(28px, 4vw, 48px);
	box-shadow: inset 0 6px 0 #2F5BFF, 0 30px 60px -36px rgb(30 34 48 / .35); margin-top: 22px; }
.c-expo main > .xv-sec:nth-of-type(even) > .xv-ancho { box-shadow: inset 0 6px 0 #FF7A3D, 0 30px 60px -36px rgb(30 34 48 / .35); }
.c-expo .xv-kicker { color: #2F5BFF; letter-spacing: .3em; }
.c-expo .xv-titulo .xv-script { font-family: "Unbounded", sans-serif; font-weight: 500; color: #FF7A3D; }
.c-expo .xv-superficie { background: #F4F6FB; border: 0; }
.c-expo .xv-momento time { color: #2F5BFF; font-weight: 700; }
.c-expo .e-firma { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.8rem); color: #FF7A3D; }
.c-expo .xv-boton:not(.xv-boton-suave) { background: #2F5BFF; color: #FFFFFF; border-color: #2F5BFF; }
.c-expo .e-ornamento { width: min(70%, 260px); }

/* fecha: las hojas del calendario pasan */
.c-expo .e-fecha-k { color: #2F5BFF; }
.ex-m-cal { left: 16%; top: 12%; width: 68%; height: 76%; border-radius: 18px; background: #FFFFFF; box-shadow: 0 30px 50px -24px rgb(30 34 48 / .35); border-top: 34px solid #2F5BFF; perspective: 800px; opacity: clamp(0, calc(var(--t1) * 3), 1); }
.ex-m-cal::before, .ex-m-cal::after { content: ""; position: absolute; top: -44px; width: 10px; height: 22px; border-radius: 5px; background: #1E2230; }
.ex-m-cal::before { left: 24%; } .ex-m-cal::after { right: 24%; }
.ex-m-cal i { position: absolute; inset: 0; border-radius: 0 0 18px 18px; background: #F4F6FB; transform-origin: 50% 0; backface-visibility: hidden; box-shadow: inset 0 0 0 1px rgb(30 34 48 / .05); }
.ex-h1 { transform: rotateX(calc(clamp(0, calc(var(--t1) * 3), 1) * -170deg)); }
.ex-h2 { transform: rotateX(calc(clamp(0, calc(var(--t1) * 3 - 1), 1) * -170deg)); }
.ex-h3 { transform: rotateX(calc(clamp(0, calc(var(--t1) * 3 - 2), 1) * -170deg)); }
.c-expo .e-dia-caja { translate: 0 8%; }
.c-expo .e-dia { font-size: clamp(4.4rem, 13vw, 7rem); letter-spacing: -.04em; }
.c-expo .e-mes { font-family: "Unbounded", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #FF7A3D; font-size: clamp(.8rem, 2vw, 1rem); }
.c-expo .e-anio { color: #4A5063; }

/* cierre */
.ex-cierre-gafete { position: absolute; left: 50%; top: 2%; width: min(20vmin, 140px); translate: -50% 0; transform-origin: 50% 0; animation: ap-columpio 3.6s ease-in-out infinite alternate; }
.c-expo .e-cierre { padding-top: clamp(220px, 32vh, 300px); }
.c-expo .e-nombre-fin { font-size: clamp(2.4rem, 7vw, 5rem); }

@media (max-width: 760px) {
	.c-expo { --nombre-tam: clamp(2.6rem, 12vw, 4rem); }
	.c-expo .xv-titulo { font-size: clamp(1.5rem, 7vw, 2rem); }
	.ex-stand { --w: 42vw; right: -6vw; bottom: 2vh; }
	.ex-pin-a { --w: 12vw; left: 6vw; top: 9vh; } .ex-pin-b { --w: 10vw; left: 14vw; bottom: 12vh; }
}