/* 119 · Retiro de Equipo — retiro de empresa en la montaña. Apertura: el mapa de sendero doblado en tres; al tocarlo se
   despliega. Portada: montañas en capas con la niebla y las sombras de nubes que pasan (WebGL, modo nubes).
   Orden: la ruta — cada sección es un punto del camino con su banderita que se clava al llegar; un indicador de altitud
   al costado sube mientras se baja. Fecha: las curvas de nivel se cierran en la cima y la bandera marca el día. */
.c-retiro { --display-peso: 900; --nombre-color: #22362B; --titulo-letra: "Fraunces"; --titulo-peso: 800; --titulo-espacio: -.02em; --dia-letra: "Fraunces"; --dia-color: #22362B;
	--radio: 18px; --vj: 46px; --sombra: 0 18px 24px rgb(34 54 43 / .22); --nombre-tam: clamp(3.6rem, 8.4vw, 7.4rem); }
.c-retiro .xv-cielo { display: none; }
.c-retiro main { background: linear-gradient(180deg, #DCE3E0, #EEF1EE 30%, #F3EEE6 100%); }
.c-retiro main > .xv-sec:not(#portada) { background: transparent; }
.c-retiro .v-velo { background: radial-gradient(56% 40% at 50% 40%, rgb(250 250 247 / .78), transparent 74%); }

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

/* portada */
.c-retiro .e-evento { color: #D9733A; letter-spacing: .42em; font-weight: 700; font-size: .76rem; }
.c-retiro .e-nombre { white-space: normal; text-wrap: balance; max-width: 10ch; line-height: .95; }
.c-retiro .e-logo { color: #4B5D52; border-color: rgb(34 54 43 / .35); }
.c-retiro .e-lema { color: #22362B; font-family: "Fraunces", serif; font-style: italic; font-weight: 600; }
.c-retiro .e-fecha { color: #FAFAF7; background: #2E4A3A; padding: 7px 16px; border-radius: 999px; font-weight: 500; }
.c-retiro .e-pista { color: #22362B; }
.re-brujula { --w: min(20vmin, 180px); left: 5vw; bottom: 6vh; --r: -12deg; --dx: -8vw; --dy: 10vh; --dr: -40deg; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 6s; --fa: 5px; --fr: 4deg; }
.re-bandera { --w: min(12vmin, 110px); right: 10vw; bottom: 10vh; --dx: 6vw; --dy: 10vh; --ex: 20vw; --ey: 20vh; --ed: .7s; --fd: 3s; --fa: 3px; --fr: 3deg; }
.re-bandera .e-img { transform-origin: 20% 100%; }

/* puntos de la ruta: papel con curvas de nivel */
.c-retiro main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FAFAF7; border-radius: 18px; padding: clamp(32px, 4.6vw, 58px);
	background-image: repeating-radial-gradient(ellipse at 90% 110%, transparent 0 22px, rgb(46 74 58 / .07) 22px 23px); box-shadow: 0 30px 60px -36px rgb(34 54 43 / .4); margin-top: 30px; }
.c-retiro main > .xv-sec:not(#portada):not(#fecha):not(#cierre)::before { content: ""; position: absolute; left: 50%; top: 0; height: clamp(50px, 9vh, 90px); border-left: 3px dotted #D9733A; opacity: .7; }
.c-retiro .xv-kicker { color: #D9733A; letter-spacing: .34em; }
.c-retiro .xv-titulo .xv-script { font-style: italic; font-weight: 600; color: #2E4A3A; }
.c-retiro .xv-superficie { background: #F1F3EF; border: 0; }
.c-retiro .xv-momento time { color: #D9733A; font-weight: 700; }
.c-retiro .e-firma { font-family: "Fraunces", serif; font-style: italic; color: #D9733A; }
.c-retiro .xv-boton:not(.xv-boton-suave) { background: #2E4A3A; color: #FAFAF7; border-color: #2E4A3A; }
.c-retiro .e-ornamento { width: min(60%, 220px); }

/* fecha: las curvas de nivel se cierran en la cima */
.c-retiro .e-fecha-k { color: #D9733A; }
.re-m-curvas { inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 calc(3% + (1 - var(--t1)) * 4%), rgb(46 74 58 / .55) calc(3% + (1 - var(--t1)) * 4%) calc(3.4% + (1 - var(--t1)) * 4%));
	-webkit-mask: radial-gradient(circle, transparent 30%, #000 31%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 30%, #000 31%, #000 70%, transparent 71%);
	opacity: clamp(0, calc(var(--t1) * 2), 1); transform: scale(calc(1.4 - var(--t1) * .4)) rotate(calc(var(--t1) * 30deg)); }
.re-m-bandera { left: 47%; top: 4%; width: 12%; transform-origin: 20% 100%; transform: scaleY(var(--t2)); opacity: var(--t2); }
.c-retiro .e-dia { font-size: clamp(4rem, 12vw, 6.4rem); }
.c-retiro .e-mes { font-family: "Sora", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .24em; color: #D9733A; font-size: clamp(.8rem, 2vw, 1rem); }
.c-retiro .e-anio { color: #4B5D52; }

/* cierre: la fogata */
.re-cierre-fogata { position: absolute; left: 50%; top: 5%; width: min(22vmin, 160px); translate: -50% 0; animation: re-fuego 1.6s ease-in-out infinite alternate; }
@keyframes re-fuego { to { filter: brightness(1.15) drop-shadow(0 0 30px rgb(232 137 74 / .5)); transform: scale(1.03); } }
.c-retiro .e-cierre { padding-top: clamp(200px, 30vh, 270px); }
.c-retiro .e-nombre-fin { font-size: clamp(2.4rem, 7vw, 5rem); }

@media (max-width: 760px) {
	.c-retiro { --nombre-tam: clamp(2.8rem, 13vw, 4.2rem); }
	.re-brujula { --w: 26vw; left: 2vw; bottom: 3vh; }
	.re-bandera { --w: 16vw; right: 8vw; bottom: 7vh; }
	.c-retiro main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { margin-right: 18px; }
}