/* 69 · Sol de los Setenta — gráfica retro groovy con textura de serigrafía.
   Guion: el arcoíris de franjas sale del centro; el sol de los setenta sale detrás de los nombres y las franjas
   ondulan con el scroll; margaritas giran; en la fecha el sol gira, se vuelve un vinilo y el día queda en la etiqueta. */
.c-setenta { --display-peso: 400; --nombre-color: #4E3021; --titulo-letra: "Bagel Fat One"; --titulo-espacio: -.01em; --dia-letra: "Caprasimo"; --dia-color: #FFF6E8;
	--y-letra: "Bagel Fat One"; --y-tam: .4em; --y-color: #A9421C; --radio: 30px; --vj: 64px; --sombra: 0 16px 20px rgb(78 48 33 / .2); --nombre-tam: clamp(4.4rem, 11.5vw, 9.4rem); --display-espacio: -.01em; }
.c-setenta .e-evento { color: #A9421C; font-weight: 800; letter-spacing: .3em; }
.c-setenta .e-nombre { text-shadow: 3px 3px 0 #D9A12B, 6px 6px 0 #E8B4A6; line-height: .95; }
.c-setenta .e-fecha { color: #4E3021; font-weight: 700; background: rgb(255 246 232 / .85); padding: 4px 14px; border-radius: 999px; }

.se-sol { --w: min(70vmin, 640px); left: 50%; top: 50%; --x: -50%; --y: -46%; --dy: 18vh; --dr: 60deg; --ey: 30vh; --ed: .2s; --fd: 0s; opacity: .38; }
.se-sol .e-img { animation: se-gira 60s linear infinite; }
@keyframes se-gira { to { rotate: 360deg; } }
.se-arcoiris { --w: min(36vmin, 360px); right: -4vw; top: 4vh; --r: 14deg; --dy: -16vh; --ex: 30vw; --ey: 0px; --ed: .6s; --fd: 8s; }
.se-margarita-a { --w: min(18vmin, 180px); left: 4vw; bottom: 8vh; --dy: 12vh; --dr: 90deg; --ex: -20vw; --ey: 10vh; --ed: 1s; --fd: 0s; }
.se-margarita-b { --w: min(11vmin, 110px); left: 22vw; bottom: 3vh; --dy: 10vh; --dr: -90deg; --ey: 20vh; --ed: 1.2s; --fd: 0s; }
.se-margarita-a .e-img, .se-margarita-b .e-img { animation: se-gira 24s linear infinite; }

.c-setenta .xv-entrada { background: radial-gradient(70% 60% at 50% 50%, #FFF6E8, #F3DDC0 75%); }
.se-entrada-arcoiris { position: absolute; left: 50%; bottom: -2%; width: min(80vmin, 600px); translate: -50% 0; animation: se-sale 1.4s cubic-bezier(.34,1.4,.64,1) both .2s; }
@keyframes se-sale { from { translate: -50% 60%; } to { translate: -50% 0; } }

.c-setenta .e-ornamento { width: min(80%, 320px); }
.c-setenta .e-firma { font-family: "Caprasimo", cursive; color: #A9421C; font-size: clamp(2rem, 4vw, 2.8rem); }

/* fecha: sol → vinilo */
.se-m-sol { left: 0; top: 0; width: 100%; transform: rotate(calc(var(--t1) * 180deg)) scale(calc(1 - var(--t1) * .15)); opacity: clamp(0, calc((1 - var(--t2)) * 2), 1); }
.se-m-vinilo { left: 2%; top: 2%; width: 96%; opacity: var(--t2); transform: rotate(calc(var(--m) * 540deg)) scale(calc(.6 + var(--t2) * .4)); }
.c-setenta .e-dia-caja { width: 40%; aspect-ratio: 1; place-content: center; border-radius: 50%; background: #C8582A; box-shadow: 0 0 0 4px #FFF6E8; }
.c-setenta .e-dia { font-size: clamp(2.6rem, 8vw, 4.2rem); }
.c-setenta .e-mes { font-family: "Manrope", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; color: #FFF6E8; font-size: .8rem; margin-top: 4px; }
.c-setenta .e-anio { color: #FFF6E8; font-size: .7rem; letter-spacing: .3em; }

.c-setenta .xv-superficie { background: #FFF6E8; border: 3px solid #4E3021; box-shadow: 6px 6px 0 #D9A12B; }
.c-setenta .e-itinerario { background: repeating-linear-gradient(180deg, #F7EBD9 0 70px, #F3DDC0 70px 140px); }
.c-setenta .xv-momento time { color: #A9421C; }
.c-setenta .xv-titulo .xv-script { font-family: "Caprasimo", cursive; color: #A9421C; }
.se-cierre-sol { position: absolute; left: 50%; bottom: -40vmin; width: min(90vmin, 720px); translate: -50% 0; opacity: .5; animation: se-gira 80s linear infinite; }

@media (max-width: 760px) {
	.se-sol { --w: 120vw; }
	.se-arcoiris { --w: 46vw; right: -10vw; top: 3vh; }
	.se-margarita-a { --w: 26vw; left: -2vw; bottom: 5vh; }
	.se-margarita-b { --w: 16vw; left: 26vw; bottom: 2vh; }
	.c-setenta .e-dia-caja { width: 44%; }
}
@media (min-width: 761px) { .se-entrada-arcoiris { width: 46vh; } }