/* 133 · París Chic — XV en rosa y negro: la Torre Eiffel, moños y letreros de calle. Se abre una caja de sombrero rosa: la tapa sube.
   Portada: la Torre Eiffel de noche entre toldos rosas, con luces que titilan (WebGL, modo titila).
   Orden: un paseo por París — cada sección es una parada con su letrero de calle esmaltado que cuelga y se balancea; la torre se ve cada vez más cerca (--pg).
   Fecha: la torre brilla como a la hora en punto y el día aparece. Cierre: el moño negro sobre su nombre. */
.c-paris { --display-peso: 400; --nombre-color: #FFFFFF; --titulo-letra: "Playfair Display"; --titulo-peso: 900; --titulo-espacio: -.01em;
	--dia-letra: "Playfair Display"; --dia-color: #141414; --radio: 18px; --vj: 70px; --sombra: 0 14px 16px rgb(20 20 20 / .2); --nombre-tam: clamp(5rem, 14vw, 12rem);
	--ap-w: min(64vw, 310px); --ap-destello: rgb(242 184 198 / .6); }
.c-paris .xv-cielo { display: none; }
.c-paris main { background: #FBEAF0; }
.c-paris main > .xv-sec:not(#portada) { background: transparent; }
.c-paris .v-velo { background: radial-gradient(48% 40% at 50% 50%, rgb(20 14 30 / .45), transparent 76%); }
.pa-torre { position: fixed; right: 2vw; bottom: 0; z-index: 0; width: min(26vw, 260px); pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html.e-abierto .pa-torre { opacity: .14; }
.pa-torre img { width: 100%; transform-origin: 50% 100%; transform: scale(calc(.35 + var(--pg, 0) * .9)); }
.c-paris main > .xv-sec { position: relative; z-index: 1; }

.c-paris .e-evento { font-family: "Montserrat", sans-serif; color: #F2B8C6; letter-spacing: .5em; font-size: .74rem; font-weight: 700; }
.c-paris .e-xv { color: #FFFFFF; } .c-paris .e-xv span { font-family: "Playfair Display", serif; font-weight: 900; color: #F2B8C6; }
.c-paris .e-fecha { color: #FFFFFF; letter-spacing: .1em; font-weight: 600; }
.c-paris .e-nombre { text-shadow: 0 4px 30px rgb(20 14 30 / .7); }
.pa-mono { --w: min(18vmin, 170px); left: calc(50% - min(9vmin, 85px)); top: 7vh; --dy: -10vh; --ex: 0px; --ey: -30vh; --ed: .3s; --fd: 6s; --fa: 4px; --fr: 2deg; }
.pa-caja { --w: min(22vmin, 210px); left: 6vw; bottom: 4vh; --r: -6deg; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .55s; --fd: 7s; --fa: 4px; --fr: 1.5deg; }

/* paradas con letrero de calle */
.c-paris main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 20px; padding: clamp(80px, 9vw, 104px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px);
	box-shadow: 0 0 0 1px rgb(20 20 20 / .06), 0 30px 60px -40px rgb(184 71 106 / .45); }
.pa-letrero { top: -46px; width: clamp(200px, 26vw, 260px); display: grid; place-items: center; }
.pa-letrero img { filter: drop-shadow(0 10px 12px rgb(20 20 20 / .25)); }
.pa-letrero b { position: absolute; left: 10%; right: 10%; top: 44%; text-align: center; font: 700 clamp(.82rem, 1.4vw, 1rem)/1.1 "Montserrat", sans-serif; color: #FFFFFF; letter-spacing: .04em; }
.pa-letrero::before { content: ""; position: absolute; left: 22%; right: 22%; top: -20px; height: 24px; border: 2px solid #141414; border-bottom: 0; border-radius: 4px 4px 0 0; }
.c-paris .xv-kicker { color: #B8476A; letter-spacing: .34em; font-weight: 700; }
.c-paris .xv-titulo { color: #141414; }
.c-paris .xv-titulo .xv-script { font-family: "Great Vibes", cursive; font-weight: 400; color: #B8476A; font-size: 1.3em; }
.c-paris .xv-superficie { background: #FFF3F6; border: 1px solid rgb(184 71 106 / .16); border-radius: 14px; box-shadow: none; }
.c-paris .xv-momento time { color: #B8476A; font-weight: 700; }
.c-paris .e-firma { color: #B8476A; font-size: clamp(2.6rem, 5vw, 3.4rem); }
.c-paris .xv-boton:not(.xv-boton-suave) { background: #141414; color: #FFFFFF; border-color: #141414; }
.c-paris .e-ornamento { width: min(66%, 260px); }

/* fecha: la torre brilla */
.c-paris .e-fecha-k { color: #B8476A; letter-spacing: .44em; font-weight: 700; }
.pa-m-torre { left: 28%; top: -6%; width: 44%; opacity: clamp(0, calc(var(--t1) * 2), .9); transform: translateY(calc((1 - var(--t1)) * 30%)); filter: brightness(calc(1 + var(--t2) * .5)) drop-shadow(0 0 calc(var(--t2) * 30px) rgb(255 220 150 / .8)); }
.pa-m-luces { left: 34%; top: -2%; width: 32%; height: 80%; opacity: var(--t2); background: radial-gradient(circle, #FFFFFF 0 1.2px, transparent 2px) 0 0 / 14px 18px; mask: linear-gradient(transparent, #000 20%, #000); animation: pa-chispea .4s steps(2) infinite; }
@keyframes pa-chispea { 50% { background-position: 7px 9px; } }
.c-paris .e-dia-caja { translate: 0 30%; background: rgb(255 255 255 / .88); padding: 10px 24px; border-radius: 14px; box-shadow: 0 20px 40px -20px rgb(184 71 106 / .5); }
.c-paris .e-dia { font-weight: 900; font-size: clamp(3.6rem, 10vw, 5.4rem); }
.c-paris .e-mes { font-family: "Great Vibes", cursive; color: #B8476A; }
.c-paris .e-anio { color: #4A4448; }

.pa-cierre-mono { position: absolute; left: 50%; top: 5%; width: min(36vmin, 240px); translate: -50% 0; animation: e-flota 4s ease-in-out infinite alternate; }
.c-paris .e-cierre { padding-top: clamp(200px, 30vh, 260px); }
.c-paris .e-cierre .e-nombre-fin { color: #141414; }
.c-paris .e-cierre .xv-kicker { color: #B8476A; }

@media (max-width: 760px) {
	.c-paris { --nombre-tam: clamp(4.4rem, 24vw, 6.4rem); }
	.pa-mono { --w: 30vw; left: 35vw; top: 8vh; } .pa-caja { --w: 32vw; left: 2vw; bottom: 3vh; }
	.pa-torre { width: 40vw; right: -6vw; }
	.c-paris main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 76px 22px 40px; }
	.pa-letrero { width: 200px; }
}