/* 75 · Desierto Rosa — boho de destino: arco de pampas, cactus, cerámica y atardecer rosado.
   Guion: el macramé se abre por el centro; el arco con pampas y los nombres dentro del arco, dunas detrás; las pampas se
   mueven con el viento del scroll; en la fecha el sol baja, se pone y queda un arco de luz que enmarca el día. */
.c-desierto { --display-peso: 400; --nombre-color: #4A2F33; --titulo-letra: "Gloock"; --titulo-espacio: -.01em; --dia-letra: "Gloock"; --dia-color: #4A2F33;
	--y-letra: "Gloock"; --y-tam: .32em; --y-color: #9B4E35; --y-margen: .1em 0 .14em; --radio: 26px; --vj: 50px; --sombra: 0 22px 26px rgb(74 47 51 / .2); --nombre-tam: clamp(4.2rem, 11vw, 9rem); }
.c-desierto .e-evento { color: #9B4E35; letter-spacing: .4em; font-weight: 600; }
.c-desierto .e-nombre { line-height: 1.05; text-shadow: 0 2px 20px rgb(251 243 232 / .9); }
.c-desierto .e-titulos { translate: 0 8vh; }
.c-desierto .e-fecha { color: #4A2F33; font-weight: 600; background: rgb(251 243 232 / .8); padding: 4px 14px; border-radius: 999px; }

.de-arco { --w: min(66vmin, 620px); left: 50%; top: 50%; --x: -50%; --y: -50%; --ds: .2; --ey: 20vh; --ed: .3s; --fd: 0s; opacity: .95; }
.de-arco .e-img { animation: none; }
.de-pampas-izq { --w: min(20vmin, 200px); left: 3vw; bottom: 2vh; --r: -10deg; --dr: -6deg; --dy: 10vh; --ex: -20vw; --ey: 20vh; --ed: .8s; --fd: 4s; --fa: 2px; --fr: 4deg; }
.de-pampas-der { --w: min(18vmin, 180px); right: 4vw; bottom: 3vh; --r: 8deg; --dr: 6deg; --dy: 10vh; --ex: 20vw; --ey: 20vh; --ed: 1s; --fd: 4.6s; --fa: 2px; --fr: 4deg; }
.de-pampas-izq .e-img, .de-pampas-der .e-img { transform-origin: 50% 100%; }
.de-cactus { --w: min(14vmin, 140px); right: 22vw; bottom: 2vh; --dy: 8vh; --ey: 30vh; --ed: 1.2s; --fd: 0s; }
.de-cactus .e-img { animation: none; }
.de-ceramica { --w: min(13vmin, 130px); left: 22vw; bottom: 2vh; --dy: 8vh; --ey: 30vh; --ed: 1.3s; --fd: 0s; }
.de-ceramica .e-img { animation: none; }

.c-desierto .xv-entrada { background: linear-gradient(180deg, #8E6A8E, #E7B9A6 60%, #F2E3CF); }
.de-entrada-macrame { position: absolute; left: 50%; top: -2%; width: min(70vmin, 520px); translate: -50% 0; opacity: .5; }
.c-desierto .xv-entrada-contenido { position: relative; z-index: 1; background: rgb(251 243 232 / .9); padding: 26px 30px; border-radius: 200px 200px 18px 18px; }
html.abriendo .de-entrada-macrame { transition: transform 1.2s cubic-bezier(.65,0,.35,1), opacity 1.2s; transform: translateY(-80vh); opacity: 0; }

.c-desierto .e-ornamento { width: min(46%, 180px); }
.c-desierto .e-firma { font-family: "Sacramento", cursive; color: #9B4E35; font-size: clamp(2.6rem, 5vw, 3.6rem); }

/* fecha: el sol baja y se pone → arco de luz */
.de-m-sol { left: 30%; top: 8%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FFE6B0, #F0A35E 60%, #E07A5F); box-shadow: 0 0 80px #F0A35E;
	transform: translateY(calc(var(--t1) * 90%)) scale(calc(1 - var(--t1) * .2)); opacity: clamp(0, calc((1 - var(--t2)) * 2), 1); }
.de-m-arco { inset: 6% 12% 0; border-radius: 999px 999px 0 0; border: 10px solid transparent; border-bottom: 0;
	background: linear-gradient(#FBF3E8, #F2E3CF) padding-box, linear-gradient(180deg, #F0A35E, #E7B9A6, #8E6A8E) border-box; opacity: var(--t2); transform: scaleY(calc(.3 + var(--t2) * .7)); transform-origin: 50% 100%; box-shadow: 0 0 60px -10px rgb(240 163 94 / .6); }
.c-desierto .e-dia { font-size: clamp(4.2rem, 12vw, 6.8rem); }
.c-desierto .e-mes { font-family: "Sacramento", cursive; color: #9B4E35; font-size: clamp(2.4rem, 6vw, 3.4rem); }
.c-desierto .e-dia-caja { translate: 0 6%; }

.c-desierto .xv-superficie { background: #FBF3E8; border: 0; box-shadow: 0 24px 50px -30px rgb(74 47 51 / .35); }
.c-desierto .e-itinerario { background: linear-gradient(180deg, #F2E3CF, #EFD0C3 50%, #E1D2E0); }
.c-desierto .xv-momento time { color: #9B4E35; }
.c-desierto .xv-titulo .xv-script { font-family: "Sacramento", cursive; color: #9B4E35; font-size: 1.4em; }
.de-cierre-arco { position: absolute; left: 50%; top: 50%; width: min(70vmin, 560px); translate: -50% -50%; opacity: .25; }

@media (max-width: 760px) {
	.de-arco { --w: 96vw; }
	.de-pampas-izq { --w: 30vw; left: -4vw; } .de-pampas-der { --w: 28vw; right: -4vw; }
	.de-cactus { --w: 16vw; right: 22vw; } .de-ceramica { --w: 16vw; left: 22vw; }
	.c-desierto { --nombre-tam: clamp(2.8rem, 12vw, 4.2rem); }
}