/* 86 · Globos al Amanecer — se lee subiendo: el cielo pasa del amanecer al azul mientras se baja, los globos suben en
   capas de parallax y el programa es un altímetro. En la fecha el globo se infla y el día queda en la canasta. */
.c-globos { --display-peso: 400; --nombre-color: #4A3550; --titulo-letra: "Caprasimo"; --titulo-espacio: -.01em; --dia-letra: "Caprasimo"; --dia-color: #4A3550;
	--y-letra: "Caprasimo"; --y-tam: .32em; --y-color: #B0533A; --y-margen: .06em 0 .1em; --radio: 26px; --vj: 70px; --sombra: 0 22px 26px rgb(74 53 80 / .2);
	--nombre-tam: clamp(4.6rem, 12vw, 10rem); --pareja-tam: 1; }
.c-globos .e-evento { color: #B0533A; letter-spacing: .45em; font-weight: 700; }
.c-globos #portada .e-titulos { position: relative; z-index: 4; }
.c-globos .e-nombre { line-height: 1.05; text-shadow: 0 2px 24px rgb(255 246 234 / .9); }
.c-globos .e-fecha { color: #4A3550; font-weight: 600; background: rgb(255 255 255 / .7); padding: 6px 16px; border-radius: 999px; }
.gl-a { --w: min(26vmin, 250px); left: 6vw; bottom: 6vh; --dy: -70vh; --ds: -.2; --ey: 40vh; --ed: .4s; --fd: 5s; --fa: 10px; --fr: 2deg; }
.gl-b { --w: min(20vmin, 200px); right: 8vw; bottom: 20vh; --dy: -90vh; --ds: -.25; --ey: 50vh; --ed: .7s; --fd: 5.6s; --fa: 12px; --fr: 2deg; }
.gl-c { --w: min(10vmin, 100px); right: 30vw; top: 12vh; --dy: -30vh; --ey: 30vh; --ed: .3s; --fd: 6s; opacity: .85; }
.gl-nube-a { --w: min(34vmin, 340px); left: -6vw; top: 10vh; --dx: -10vw; --dy: 10vh; --ey: 0px; --ex: -20vw; --ed: .2s; --fd: 12s; opacity: .8; }
.gl-nube-b { --w: min(40vmin, 400px); right: -10vw; bottom: -4vh; --dx: 10vw; --dy: 20vh; --ey: 0px; --ex: 20vw; --ed: .3s; --fd: 14s; opacity: .9; }
.c-globos .so-y { font-family: "Caprasimo", serif; font-size: .45em; color: #B0533A; }

/* subir: el cielo de toda la página */
.c-globos .xv-cielo { display: none; }
.c-globos main { background: linear-gradient(180deg, #F6C4B5 0%, #F3BFC3 20%, #D9C3E2 40%, #BCD0EC 62%, #A6CCEB 80%, #CFE6F7 100%); }
.c-globos main > .xv-sec:not(#portada) { background: transparent; }
.c-globos main > .xv-sec:not(#portada):not(#fecha) > .xv-ancho { background: rgb(255 255 255 / .55); backdrop-filter: blur(8px); border-radius: 30px; padding: clamp(24px, 4vw, 44px); }
.c-globos .xv-kicker { color: #B0533A; }
.c-globos .xv-titulo .xv-script { font-family: "Lavishly Yours", cursive; font-size: 1.5em; color: #B0533A; }
.c-globos .xv-superficie { background: rgb(255 255 255 / .75); border: 0; }
.c-globos .xv-momento time { color: #B0533A; font-weight: 700; }
.c-globos .e-firma { font-family: "Lavishly Yours", cursive; color: #B0533A; font-size: clamp(2.6rem, 5vw, 3.6rem); }
.c-globos .e-ornamento { width: min(46%, 180px); }
/* el altímetro */
.c-globos .xv-itinerario { position: relative; padding-left: 26px; }
.c-globos .xv-itinerario::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(0deg, #F7A86B, #B7A8D8, #8FB8DE); }
.c-globos .xv-momento { position: relative; }
.c-globos .xv-momento::before { content: ""; position: absolute; left: -26px; top: 50%; width: 15px; height: 15px; translate: 0 -50%; border-radius: 50%; background: #fff; border: 3px solid #B0533A; }

/* fecha: el globo se infla */
.gl-m-globo { left: 18%; top: 0; width: 64%; transform: translateY(calc((1 - var(--t1)) * 30%)) scale(calc(.45 + var(--t1) * .55)); transform-origin: 50% 90%; }
.gl-m-canasta { left: 40%; top: 70%; width: 20%; height: 0; }
.c-globos .e-dia-caja { translate: 0 -16%; width: clamp(130px, 34%, 190px); aspect-ratio: 1; align-content: center; border-radius: 50%; background: rgb(255 249 242 / .94); box-shadow: 0 0 0 4px rgb(255 255 255 / .45), 0 18px 34px -12px rgb(74 53 80 / .45); }
.c-globos .e-dia { color: #4A3550; font-size: clamp(3rem, 8vw, 4.4rem); }
.c-globos .e-mes { font-family: "Caprasimo", serif; color: #B0533A; font-size: clamp(1rem, 2.6vw, 1.3rem); margin-top: 2px; }
.c-globos .e-anio { color: #4A3550; letter-spacing: .3em; font-size: .72rem; font-weight: 700; }
.c-globos .e-fecha-k { color: #B0533A; }
.gl-cierre-a { position: absolute; left: 8vw; top: 6%; width: min(20vmin, 160px); animation: e-flota 5s ease-in-out infinite alternate; }
.gl-cierre-c { position: absolute; right: 12vw; top: 14%; width: min(12vmin, 100px); animation: e-flota 6s ease-in-out infinite alternate; }

@media (max-width: 760px) {
	.c-globos { --nombre-tam: clamp(4rem, 19vw, 5.6rem); }
	.gl-a { --w: 34vw; left: 2vw; bottom: 4vh; } .gl-b { --w: 26vw; right: 4vw; bottom: 22vh; } .gl-c { --w: 14vw; right: 34vw; top: 8vh; }
	.gl-nube-a { --w: 56vw; } .gl-nube-b { --w: 64vw; }
}