/* 160 · Cumbre Verde — evento de sostenibilidad: hojas, papel kraft reciclado, semillas y un árbol que crece. Sobre kraft con forro de hojas, cerrado con cordel y una etiqueta de semilla que cae.
   Portada: hojas en capas con luz verde entre ellas (WebGL, modo sombra).
   Orden: los anillos del árbol — cada sección es un anillo de crecimiento con su número; brota una hoja nueva en cada una y el árbol del costado suma hojas al bajar (--pg).
   Fecha: los anillos del tronco se forman alrededor del día. Cierre: el árbol completo. */
.c-cumbre { --display-peso: 700; --nombre-color: #2E3A33; --titulo-letra: "Sora"; --titulo-peso: 600; --titulo-espacio: -.03em;
	--dia-letra: "Sora"; --dia-color: #2E3A33; --radio: 22px; --vj: 44px; --sombra: 0 14px 16px rgb(46 58 51 / .2); --nombre-tam: clamp(3rem, 8.4vw, 7rem); }
.c-cumbre .xv-cielo { display: none; }
.c-cumbre main { background: #F4F7F2; }
.c-cumbre main > .xv-sec:not(#portada) { background: transparent; }
.c-cumbre main > .xv-sec { position: relative; z-index: 1; }
.c-cumbre .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(250 252 248 / .85), transparent 76%); }
.cv-arbol { position: fixed; left: 1vw; bottom: 0; z-index: 0; width: min(12vw, 120px); height: 60vh; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html.e-abierto .cv-arbol { opacity: .7; }
.cv-tallo { position: absolute; left: 0; bottom: 0; width: 100%; }
.cv-hojas { position: absolute; left: 50%; bottom: 40%; width: 140%; translate: -50% 0; transform-origin: 50% 100%; transform: scale(calc(var(--pg, 0) * 1.1)); }

.c-cumbre .e-evento { color: #2F7A4A; letter-spacing: .4em; font-size: .72rem; font-weight: 700; }
.c-cumbre .e-logo { background: rgb(255 255 255 / .7); }
.c-cumbre .e-lema { color: #2E3A33; font-weight: 600; background: rgb(255 255 255 / .75); padding: 4px 12px; border-radius: 10px; }
.c-cumbre .e-fecha { color: #2E3A33; font-weight: 600; background: rgb(255 255 255 / .85); padding: 6px 16px; border-radius: 999px; }
.c-cumbre .e-nombre { text-shadow: 0 2px 26px rgb(255 255 255 / .95); }
.cv-hojas-a { --w: min(22vmin, 210px); left: -2vw; top: 6vh; --r: -20deg; --dy: -10vh; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 6s; --fa: 4px; --fr: 3deg; }
.cv-hojas-b { --w: min(20vmin, 190px); right: -2vw; top: 10vh; --r: 160deg; --dy: -10vh; --ex: 30vw; --ey: 0px; --ed: .45s; --fd: 7s; --fa: 4px; --fr: 3deg; }
.cv-brote-p { --w: min(14vmin, 130px); right: 10vw; bottom: 6vh; --dy: 10vh; --ex: 0px; --ey: 30vh; --ed: .6s; --fd: 5s; --fa: 3px; --fr: 2deg; }

/* anillos de crecimiento */
.c-cumbre main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; overflow: hidden; background: #FFFFFF; padding: clamp(60px, 7vw, 80px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px); border-radius: 22px;
	box-shadow: 0 30px 60px -40px rgb(46 58 51 / .45); }
.c-cumbre main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
	background: repeating-radial-gradient(circle, transparent 0 14px, rgb(201 167 119 / .22) 14px 16px); transform: scale(.3); opacity: 0; transition: transform 1.6s ease .2s, opacity 1s ease .2s; }
.c-cumbre main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before { transform: scale(1); opacity: 1; }
.cv-brote { top: 14px; right: 20px; bottom: auto; width: clamp(50px, 6vw, 70px); }
.cv-anillo { top: 24px; left: clamp(24px, 5vw, 64px); font: 600 .72rem/1 "Sora", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #9C7646; }
.c-cumbre .xv-kicker { color: #2F7A4A; letter-spacing: .3em; font-weight: 700; }
.c-cumbre .xv-titulo .xv-script { color: #2F7A4A; }
.c-cumbre .xv-superficie { background: #F6F9F4; border: 1px solid rgb(63 143 90 / .18); border-radius: 16px; box-shadow: none; }
.c-cumbre .xv-momento time { color: #2F7A4A; font-weight: 700; }
.c-cumbre .e-firma { color: #2F7A4A; }
.c-cumbre .xv-boton:not(.xv-boton-suave) { background: #2F7A4A; color: #FFFFFF; border-color: #2F7A4A; }
.c-cumbre .e-ornamento { width: min(46%, 180px); }

/* fecha: los anillos se forman alrededor del día */
.c-cumbre .e-fecha-k { color: #2F7A4A; letter-spacing: .4em; font-weight: 700; }
.cv-m-tronco { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: scale(calc(.2 + var(--t1) * .8)) rotate(calc((1 - var(--t1)) * -90deg)); }
.cv-m-centro { inset: 30%; border-radius: 50%; background: radial-gradient(circle, #FDF6E8, #EFD9B4); opacity: var(--t2); box-shadow: 0 0 0 3px rgb(156 118 70 / .4); }
.c-cumbre .e-dia { font-size: clamp(2.8rem, 8vw, 4.4rem); }
.c-cumbre .e-mes { font-family: "Sora", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: #2F7A4A; font-size: clamp(.66rem, 1.6vw, .82rem); }
.c-cumbre .e-anio { color: #6B5332; font-size: .6rem; }

.cv-cierre-tronco { position: absolute; left: 50%; top: 150px; width: min(24vmin, 140px); translate: -50% 0; }
.cv-cierre-hojas { position: absolute; left: 50%; top: 20px; width: min(44vmin, 260px); translate: -50% 0; animation: e-flota 5s ease-in-out infinite alternate; }
.c-cumbre .e-cierre { padding-top: clamp(300px, 42vh, 360px); }
.c-cumbre .e-cierre .xv-kicker { color: #2F7A4A; }

@media (max-width: 760px) {
	.c-cumbre { --nombre-tam: clamp(2.6rem, 12vw, 3.6rem); }
	.cv-hojas-a { --w: 34vw; left: -8vw; } .cv-hojas-b { --w: 32vw; right: -8vw; } .cv-brote-p { --w: 22vw; right: 6vw; bottom: 5vh; }
	.cv-arbol { width: 18vw; opacity: .35 !important; }
}