/* 66 · Etiqueta Negra — black tie en blanco y negro puro; la tipografía es la protagonista.
   Guion: el corbatín se anuda en el centro; los nombres en Bodoni gigante, la pantalla partida en diagonal que se
   mueve con el scroll; en la fecha la gardenia gira, se abre en un círculo blanco con el día y centro rojo labial. */
.c-etiqueta { --display-peso: 900; --display-estilo: italic; --nombre-color: #FFFFFF; --titulo-letra: "Libre Caslon Display"; --titulo-peso: 400; --titulo-espacio: -.01em; --dia-letra: "Bodoni Moda"; --dia-color: #0E0E0E;
	--y-letra: "Bodoni Moda"; --y-peso: 400; --y-tam: .45em; --y-color: #E2E0DB; --radio: 0px; --vj: 70px; --sombra: 0 26px 30px rgb(0 0 0 / .5); --nombre-tam: clamp(4.4rem, 12vw, 10.6rem); --display-espacio: -.03em; }
.c-etiqueta .e-evento { color: #E2E0DB; font-family: "Hanken Grotesk", sans-serif; font-weight: 600; letter-spacing: .6em; font-size: .78rem; }
.c-etiqueta .e-nombre { line-height: .9; }
.c-etiqueta .e-fecha { color: #D9D7D2; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; font-weight: 600; }
.et-diagonal { position: absolute; inset: -20%; background: linear-gradient(calc(118deg + var(--p, 0) * 10deg), transparent 50%, rgb(255 255 255 / .06) 50%); }
.et-perlas { --w: min(26vmin, 260px); right: 4vw; top: 4vh; --r: 16deg; --dy: -18vh; --dr: 10deg; --ex: 20vw; --ey: -20vh; --ed: .6s; --fd: 7s; --fa: 6px; }
.et-gardenia { --w: min(24vmin, 240px); left: 6vw; bottom: 8vh; --r: -10deg; --dx: -6vw; --dy: 12vh; --ex: -30vw; --ey: 0px; --ed: .9s; --fd: 6s; }
.et-guantes { --w: min(18vmin, 180px); right: 8vw; bottom: 6vh; --r: 14deg; --dy: 14vh; --ex: 20vw; --ey: 20vh; --ed: 1.2s; --fd: 8s; }

.c-etiqueta .xv-entrada { background: radial-gradient(60% 50% at 50% 40%, #1E1E1E, #000 80%); }
.et-entrada-corbatin { position: absolute; left: 50%; top: 14%; width: min(40vmin, 300px); translate: -50% 0; animation: et-anuda 1.6s cubic-bezier(.34,1.4,.64,1) both .3s; }
@keyframes et-anuda { from { scale: .2 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }

.c-etiqueta .e-ornamento { width: min(70%, 300px); }
.c-etiqueta .e-firma { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; color: #FFFFFF; font-size: clamp(2rem, 4vw, 3rem); }

/* fecha: gardenia → círculo blanco con centro rojo */
.et-m-gardenia { left: 16%; top: 16%; width: 68%; transform: rotate(calc(var(--t1) * 120deg)) scale(calc(1 + var(--t1) * .3)); opacity: clamp(0, calc((1 - var(--t2)) * 2), 1); filter: grayscale(.2); }
.et-m-circulo { inset: 8%; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 70%, #E9E7E2); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8); opacity: var(--t2); transform: scale(calc(.4 + var(--t2) * .6)); }
.et-m-circulo::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 14px; height: 14px; border-radius: 50%; background: #A51A26; translate: -50% 0; }
.c-etiqueta .e-dia { font-weight: 900; font-style: italic; font-size: clamp(5rem, 14vw, 8rem); }
.c-etiqueta .e-mes { font-family: "Bodoni Moda", serif; font-style: italic; color: #0E0E0E; }
.c-etiqueta .e-anio { color: #45433F; }

.c-etiqueta .xv-superficie { background: #161616; border: 1px solid rgb(255 255 255 / .22); }
.c-etiqueta .e-itinerario { background: #FFFFFF; color: #0E0E0E; --tinta: #0E0E0E; --tinta-2: #45433F; --acento: #0E0E0E; --linea: rgba(14,14,14,.16); }
.c-etiqueta .xv-momento time { color: #FFFFFF; } .c-etiqueta .e-itinerario .xv-momento time { color: #A51A26; }
.c-etiqueta .xv-titulo .xv-script { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 400; }
.et-cierre-y { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: italic 400 min(80vmin, 640px)/1 "Bodoni Moda", serif; color: rgb(255 255 255 / .06); }

@media (max-width: 760px) {
	.et-perlas { --w: 36vw; right: -4vw; top: 3vh; }
	.et-gardenia { --w: 34vw; left: -2vw; bottom: 6vh; }
	.et-guantes { --w: 26vw; right: 2vw; bottom: 5vh; }
}