/* 139 · Urbano — XV de estilo calle: concreto, grafiti, calcomanías y tenis. Se abre la caja de tenis: la tapa sube.
   Portada: pared de concreto con grafiti de colores en los bordes y su nombre con efecto de spray.
   Orden: la pared — cada sección es un póster pegado con cinta, un poco girado, con su calcomanía.
   Fecha: una lata de spray pinta el día y la pintura gotea. Cierre: los tenis colgados del cordón. */
.c-urbano { --display-peso: 400; --nombre-color: #111111; --titulo-letra: "Archivo Black"; --titulo-peso: 400; --titulo-espacio: -.01em; --titulo-mayus: uppercase;
	--dia-letra: "Bagel Fat One"; --dia-color: #E8186F; --radio: 2px; --vj: 54px; --sombra: 0 14px 16px rgb(17 17 17 / .25); --nombre-tam: clamp(4.6rem, 13vw, 11rem);
	--ap-w: min(70vw, 340px); --ap-destello: rgb(255 212 0 / .6); }
.c-urbano .xv-cielo { display: none; }
.c-urbano main { background: #CFCFCC url("img/fondo-celular.webp") center / cover fixed; }
.c-urbano main::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgb(214 214 210 / .72); }
.c-urbano main > .xv-sec { position: relative; z-index: 1; }
.c-urbano main > .xv-sec:not(#portada) { background: transparent; }
.c-urbano .v-velo { background: radial-gradient(48% 40% at 50% 50%, rgb(230 230 226 / .7), transparent 76%); }
.c-urbano .ap-cosa .ap-pieza { height: 60% !important; }

.c-urbano .e-evento { font-family: "Archivo Black", sans-serif; color: #111111; background: #FFD400; padding: 6px 12px; letter-spacing: .3em; font-size: .72rem; rotate: -2deg; }
.c-urbano .e-xv { color: #111111; font-family: "Archivo Black", sans-serif; } .c-urbano .e-xv span { font-family: "Bagel Fat One", sans-serif; color: #2F6BFF; }
.c-urbano .e-fecha { color: #111111; font-weight: 700; background: #FFFFFF; padding: 6px 14px; rotate: 1deg; }
.c-urbano .e-nombre { color: #111111; text-shadow: 4px 4px 0 #FF3D8B, 8px 8px 0 #FFD400; }
.c-urbano .e-nombre { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s steps(12) .3s; } html.e-abierto .c-urbano .e-nombre { clip-path: inset(-20% -10% -20% -10%); }
.ur-stickers { --w: min(20vmin, 190px); right: 7vw; top: 9vh; --r: 12deg; --dy: -12vh; --ex: 30vw; --ey: 0px; --ed: .4s; --fd: 3s; --fa: 2px; --fr: 2deg; }
.ur-spray { --w: min(8vmin, 76px); left: 10vw; bottom: 8vh; --r: -20deg; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .55s; --fd: 5s; --fa: 5px; --fr: 3deg; }
.ur-tenis { --w: min(26vmin, 250px); right: 6vw; bottom: 5vh; --r: -6deg; --dy: 12vh; --ex: 30vw; --ey: 0px; --ed: .7s; --fd: 6s; --fa: 4px; --fr: 2deg; }

/* la pared: pósters pegados con cinta, con su calcomanía */
.c-urbano main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; padding: clamp(50px, 6vw, 74px) clamp(24px, 5vw, 64px); rotate: -1deg;
	box-shadow: 0 2px 0 rgb(17 17 17 / .06), 0 26px 40px -24px rgb(17 17 17 / .5); border-bottom: 8px solid #111111; }
.c-urbano main > .xv-sec:nth-of-type(odd):not(#portada):not(#fecha):not(#cierre) > .xv-ancho { rotate: 1.2deg; }
.ur-cinta { width: 110px; height: 30px; background: rgb(255 212 0 / .8); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.ur-c1 { top: -14px; left: -20px; rotate: -32deg; } .ur-c2 { top: -14px; right: -20px; rotate: 32deg; background: rgb(255 61 139 / .75); }
.ur-sticker { bottom: -22px; right: clamp(16px, 4vw, 40px); padding: 10px 16px; border-radius: 999px; background: #2F6BFF; color: #FFFFFF; font: 400 1.1rem/1 "Bagel Fat One", sans-serif; rotate: -8deg;
	box-shadow: 0 0 0 4px #FFFFFF, 0 8px 16px rgb(17 17 17 / .3); transform: scale(0); transition: transform .5s cubic-bezier(.3,1.8,.5,1) .7s; }
.c-urbano main > .xv-sec:nth-of-type(3n) .ur-sticker { background: #FF3D8B; } .c-urbano main > .xv-sec:nth-of-type(3n+1) .ur-sticker { background: #FFD400; color: #111111; }
.llego > .xv-ancho > .ur-sticker { transform: scale(1); }
.c-urbano .xv-kicker { color: #E8186F; letter-spacing: .3em; font-weight: 700; }
.c-urbano .xv-titulo { color: #111111; }
.c-urbano .xv-titulo .xv-script { font-family: "Bagel Fat One", sans-serif; color: #2F6BFF; text-transform: none; }
.c-urbano .xv-superficie { background: #F2F2EF; border: 2px solid #111111; border-radius: 0; box-shadow: 5px 5px 0 #111111; }
.c-urbano .xv-momento time { color: #E8186F; font-weight: 700; }
.c-urbano .e-firma { font-family: "Bagel Fat One", sans-serif; color: #E8186F; }
.c-urbano .xv-boton:not(.xv-boton-suave) { background: #111111; color: #FFD400; border-color: #111111; border-radius: 0; box-shadow: 4px 4px 0 #FF3D8B; }
.c-urbano .xv-boton-suave { border-radius: 0; }
.c-urbano .e-ornamento { width: min(66%, 260px); }

/* fecha: el spray pinta el día y gotea */
.c-urbano .e-fecha-k { font-family: "Archivo Black", sans-serif; color: #111111; background: #FFD400; padding: 4px 12px; letter-spacing: .3em; }
.ur-m-spray { top: 8%; width: 16%; left: calc(4% + var(--t1) * 70%); rotate: calc(-30deg + var(--t1) * 20deg); opacity: calc(clamp(0, var(--t1) * 4, 1) - var(--t2)); }
.ur-m-nube { left: 10%; right: 10%; top: 30%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 61 139 / .35), transparent); filter: blur(6px); clip-path: inset(0 calc((1 - var(--t1)) * 100%) 0 0); }
.ur-m-gotas { left: 26%; right: 26%; top: 64%; height: 30%; display: flex; justify-content: space-around; opacity: var(--t2); }
.ur-m-gotas i { position: relative; width: 6px; border-radius: 3px; background: #E8186F; height: calc(var(--t2) * 70%); }
.ur-m-gotas i:nth-child(2) { height: calc(var(--t2) * 40%); } .ur-m-gotas i:nth-child(4) { height: calc(var(--t2) * 90%); background: #2F6BFF; } .ur-m-gotas i:nth-child(5) { height: calc(var(--t2) * 30%); }
.c-urbano .e-dia-caja { filter: none; clip-path: inset(0 calc((1 - var(--t1)) * 100%) 0 0); opacity: clamp(0, var(--t1) * 2, 1); transform: none; }
.c-urbano .e-dia { font-size: clamp(6rem, 18vw, 10rem); text-shadow: 5px 5px 0 #111111; }
.c-urbano .e-mes { font-family: "Archivo Black", sans-serif; text-transform: uppercase; color: #111111; font-size: clamp(1rem, 2.6vw, 1.4rem); }
.c-urbano .e-anio { color: #3A3A3A; }

/* cierre: los tenis colgados */
.ur-cordon { position: absolute; left: -5%; right: -5%; top: 70px; height: 60px; border-top: 3px solid #111111; border-radius: 50%; }
.ur-cierre-tenis { position: absolute; left: 50%; top: 66px; width: min(40vmin, 240px); translate: -50% 0; transform-origin: 50% 0; animation: fi-balanceo 3s ease-in-out infinite; }
.c-urbano .e-cierre { padding-top: clamp(250px, 36vh, 320px); }
.c-urbano .e-cierre .xv-kicker { color: #E8186F; }
.c-urbano .e-nombre-fin { text-shadow: 3px 3px 0 #FF3D8B, 6px 6px 0 #FFD400; }

@media (max-width: 760px) {
	.c-urbano { --nombre-tam: clamp(4rem, 22vw, 6rem); }
	.c-urbano main { background-attachment: scroll; }
	.ur-stickers { --w: 32vw; right: 2vw; top: 7vh; } .ur-spray { --w: 13vw; left: 6vw; bottom: 6vh; } .ur-tenis { --w: 42vw; right: 0; bottom: 4vh; }
}

/* El remate del día deja libre el renglón del mes. */
.c-urbano .e-dia { line-height:1.05; }