/* 118 · Corte de Cinta — inauguración de un local. Apertura: la cinta roja con moño cruza la pantalla; al tocarla,
   las tijeras doradas la cortan y las dos mitades caen. Portada: la fachada al atardecer con las ventanas que titilan
   (WebGL, modo titila), el letrero colgado y confeti. Orden: la gran apertura — cada sección entra con un corte diagonal
   y lleva la cinta en la esquina. Fecha: el letrero gira y muestra el día con «Abierto». */
.c-cinta { --display-peso: 400; --nombre-color: #FFFFFF; --titulo-letra: "Anton"; --titulo-peso: 400; --titulo-mayus: uppercase; --titulo-espacio: .01em; --dia-letra: "Anton"; --dia-color: #FFFFFF;
	--radio: 16px; --vj: 54px; --sombra: 0 20px 26px rgb(20 20 20 / .35); --nombre-tam: clamp(4.4rem, 11vw, 9.6rem); }
.c-cinta .xv-cielo { display: none; }
.c-cinta main { background: #F4F1EC; }
.c-cinta main > .xv-sec:not(#portada) { background: transparent; }
.c-cinta .v-velo { background: radial-gradient(60% 42% at 50% 46%, rgb(12 10 9 / .62), transparent 78%); }

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

/* portada */
.c-cinta .e-evento { color: #D4A64A; letter-spacing: .5em; font-family: "Oswald", sans-serif; font-weight: 600; font-size: .86rem; }
.c-cinta .e-nombre { text-transform: uppercase; letter-spacing: .01em; line-height: .95; white-space: normal; text-wrap: balance; max-width: 9ch; text-shadow: 0 6px 40px rgb(0 0 0 / .6); }
.c-cinta .e-logo { color: #FFFFFF; border-color: rgb(255 255 255 / .5); }
.c-cinta .e-lema { color: #F1E6D2; font-size: 1.05rem; text-shadow: 0 1px 10px rgb(0 0 0 / .6); }
.c-cinta .e-fecha { color: #141414; background: #FFFFFF; padding: 7px 18px; border-radius: 999px; font-weight: 600; }
.c-cinta .e-pista { color: #FFFFFF; }
.cc-letrero { --w: min(26vmin, 240px); right: 6vw; top: 6vh; --dy: -16vh; --ex: 0px; --ey: -40vh; --ed: .4s; --fd: 3.6s; --fa: 4px; --fr: 2deg; }
.cc-letrero .e-img { transform-origin: 50% 0; }
.cc-tijeras { --w: min(20vmin, 180px); left: 5vw; bottom: 6vh; --r: -20deg; --dx: -8vw; --dy: 10vh; --dr: -14deg; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 4s; --fa: 6px; --fr: 3deg; }

/* la gran apertura: corte diagonal y cinta en la esquina */
.c-cinta main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 18px; padding: clamp(30px, 4.6vw, 58px);
	box-shadow: 0 30px 60px -36px rgb(20 20 20 / .35); }
.c-cinta main > .xv-sec > .xv-ancho > .xv-cab, .c-cinta main > .xv-sec .e-bien-texto, .c-cinta main > .xv-sec .e-cab-est { padding-left: 34px; }
.c-cinta .xv-kicker { color: #D62839; letter-spacing: .4em; font-family: "Oswald", sans-serif; font-weight: 600; }
.c-cinta .xv-titulo { color: #141414; }
.c-cinta .xv-titulo .xv-script { font-family: "Oswald", sans-serif; font-weight: 500; color: #D62839; }
.c-cinta .xv-superficie { background: #F4F1EC; border: 0; }
.c-cinta .xv-momento time { color: #D62839; font-weight: 700; font-family: "Oswald", sans-serif; }
.c-cinta .e-firma { font-family: "Anton", sans-serif; text-transform: uppercase; color: #D62839; font-size: clamp(1.4rem, 3vw, 2rem); }
.c-cinta .xv-boton:not(.xv-boton-suave) { background: #D62839; color: #FFFFFF; border-color: #D62839; }
.c-cinta .e-ornamento { width: min(80%, 300px); }
.c-cinta #fecha { background: #141414; }

/* fecha: el letrero gira y muestra el día */
.c-cinta .e-fecha-k { color: #D4A64A; font-family: "Oswald", sans-serif; }
.cc-m-letrero { left: 6%; top: 6%; width: 88%; transform: perspective(900px) rotateY(calc((1 - var(--t1)) * 90deg)); opacity: clamp(0, calc(var(--t1) * 3), 1); filter: drop-shadow(0 24px 30px rgb(0 0 0 / .5)); }
.cc-m-abierto { left: 0; right: 0; top: 74%; text-align: center; font: 600 .78rem/1 "Oswald", sans-serif; letter-spacing: .4em; text-transform: uppercase; color: #D62839; opacity: var(--t2); }
.c-cinta .e-dia-caja { translate: 0 4%; }
.c-cinta .e-dia { font-size: clamp(3.6rem, 11vw, 6rem); }
.c-cinta .e-mes { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .3em; color: #D4A64A; font-size: clamp(.8rem, 2vw, 1rem); }
.c-cinta .e-anio { color: #E8E2D8; }
.c-cinta .e-sem { color: #E8E2D8; }
.c-cinta #fecha .xv-boton-suave { color: #FFFFFF; border-color: rgb(255 255 255 / .4); }

/* cierre */
.cc-cierre-cinta { position: absolute; left: 50%; top: 5%; width: min(40vmin, 300px); translate: -50% 0; }
.c-cinta .e-cierre { padding-top: clamp(170px, 26vh, 240px); }
.c-cinta .e-nombre-fin { color: #141414; text-transform: uppercase; font-family: "Anton", sans-serif; font-size: clamp(2.6rem, 8vw, 5.6rem); }

@media (max-width: 760px) {
	.c-cinta { --nombre-tam: clamp(3.4rem, 16vw, 5.2rem); }
	.cc-letrero { --w: 34vw; right: 2vw; top: 4vh; }
	.cc-tijeras { --w: 26vw; left: 2vw; bottom: 3vh; }
}