/* 129 · Mercado de Flores — boda fresca de día: puesto de flores con cubetas de zinc, toldo a rayas y ramos en papel kraft.
   Se abre un ramo envuelto: el cordel se suelta y el papel se abre. Portada: el toldo se mece arriba, las cubetas a los lados y la luz del día pasa (WebGL, modo sombra).
   Orden: el puesto — cada sección es una cubeta con su tarjetita de precio escrita a mano; el programa es la pizarra del puesto.
   Fecha: las flores de las cubetas se juntan en un ramo y su tarjeta muestra el día. Cierre: el puesto con su toldo. */
.c-mercado { --display-peso: 400; --nombre-color: #2E3A2F; --titulo-letra: "Fraunces"; --titulo-peso: 700; --titulo-espacio: -.015em;
	--dia-letra: "Caprasimo"; --dia-color: #2E3A2F; --y-letra: "Caveat"; --y-color: #BF3F57; --y-tam: .66em; --pareja-tam: .84;
	--radio: 14px; --vj: 58px; --sombra: 0 14px 16px rgb(46 58 47 / .2); --nombre-tam: clamp(3.4rem, 8.4vw, 7.2rem); --ap-w: min(62vw, 300px); --ap-destello: rgb(226 122 140 / .45); }
.c-mercado .xv-cielo { display: none; }
.c-mercado main { background: #F7F2E7; }
.c-mercado main > .xv-sec:not(#portada) { background: transparent; }
.c-mercado .v-velo { background: radial-gradient(48% 40% at 50% 50%, rgb(255 252 244 / .84), transparent 76%); }

/* apertura: el ramo se desenvuelve */
html.so-abre .ap-cosa[data-efecto="desenvuelve"] .ap-pieza { animation: mf-abre 1.4s cubic-bezier(.4,0,.3,1) forwards; }
@keyframes mf-abre { 0% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.04); } 50% { transform: rotate(6deg) scale(1.12); } 100% { transform: scale(1.6) translateY(-10%); opacity: 0; filter: blur(2px); } }

/* portada */
.mf-toldo { position: absolute; left: -2%; right: -2%; top: 0; height: clamp(64px, 11vh, 110px); background: url("img/toldo.webp") center top / auto 100% repeat-x; transform-origin: 50% 0;
	animation: mf-mece 5s ease-in-out infinite alternate; filter: drop-shadow(0 10px 10px rgb(46 58 47 / .25)); transform: translateY(calc(var(--p, 0) * -12vh)); }
@keyframes mf-mece { from { rotate: -.4deg; scale: 1 1; } to { rotate: .4deg; scale: 1 1.06; } }
html:not(.e-abierto) .e-portada .mf-toldo { translate: 0 -100%; } .e-portada .mf-toldo { transition: translate 1.2s cubic-bezier(.2,.9,.3,1) .2s; }
.c-mercado .e-evento { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.9rem; letter-spacing: 0; text-transform: none; color: #BF3F57; }
.c-mercado .e-fecha { color: #2E3A2F; font-weight: 700; background: rgb(255 255 255 / .82); padding: 6px 16px; border-radius: 999px; }
.c-mercado .e-nombre { text-shadow: 0 2px 22px rgb(255 252 244 / .95); }
.mf-cubeta-a { --w: min(24vmin, 230px); left: 3vw; bottom: 3vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .4s; --fd: 9s; --fa: 3px; --fr: .5deg; }
.mf-cubeta-b { --w: min(22vmin, 210px); right: 3vw; bottom: 5vh; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .55s; --fd: 8s; --fa: 3px; --fr: .5deg; }
.mf-ramo { --w: min(18vmin, 170px); right: 22vw; top: 16vh; --r: 18deg; --dy: -10vh; --ex: 20vw; --ey: -20vh; --ed: .8s; --fd: 6s; --fa: 5px; --fr: 2deg; }

/* paso a la bienvenida: una flor sale del centro, gira, crece hasta cubrir la pantalla y se vuelve el fondo crema
   de la sección siguiente (transición por objeto). Avanza con el scroll de la portada (--p): aparece a la mitad y el color cambia al final (--k). */
.mf-paso { --c: clamp(0, calc((var(--p, 0) - .5) / .5), 1); --k: clamp(0, calc((var(--c) - .45) / .4), 1);
	--fp: color-mix(in oklab, #E8899A calc((1 - var(--k)) * 100%), #F7F2E7);
	--fi: color-mix(in oklab, #F3B3BF calc((1 - var(--k)) * 100%), #F7F2E7);
	position: absolute; left: 50%; top: 50%; z-index: 6; width: 34vmax; height: 34vmax; margin: -17vmax 0 0 -17vmax; pointer-events: none;
	transform: rotate(calc((1 - var(--c)) * -90deg)) scale(calc(var(--c) * var(--c) * var(--c) * 9.5)); will-change: transform; }
.mf-paso svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgb(46 58 47 / calc(.25 * (1 - var(--k))))); }
.mf-paso-petalos { fill: var(--fp); }
.mf-paso-interior { fill: var(--fi); opacity: calc(1 - var(--k)); }
.mf-paso-venas { fill: none; stroke: #C95A70; stroke-width: 2.2; stroke-linecap: round; opacity: calc(.55 * (1 - var(--k))); }
.mf-paso-centro { fill: #F2C54B; opacity: calc(1 - var(--k)); }
.mf-paso-centro circle + circle { fill: #C98A1E; }
html:not(.e-abierto) .mf-paso, html.quieto .mf-paso { display: none; }

/* el puesto: cubetas con tarjetita */
.c-mercado main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 18px; padding: clamp(46px, 6vw, 72px) clamp(24px, 5vw, 64px);
	border-top: 10px solid #3F6B4A; box-shadow: 0 30px 60px -40px rgb(46 58 47 / .5); }
.mf-etq { top: -30px; right: clamp(14px, 4vw, 40px); width: clamp(86px, 9vw, 104px); transform-origin: 50% 0; display: grid; place-items: center; }
.mf-etq img { width: 100%; filter: drop-shadow(0 8px 10px rgb(46 58 47 / .25)); }
.mf-etq b, .mf-etq small { position: absolute; left: 0; right: 0; text-align: center; color: #2E3A2F; }
.mf-etq b { top: 50%; font: 700 1.3rem/1 "Caveat", cursive; padding: 0 12%; } .mf-etq small { top: 66%; font: 600 .95rem/1 "Caveat", cursive; color: #BF3F57; padding: 0 14%; }
.llego > .xv-ancho > .mf-etq { animation: fi-balanceo 2.4s ease-out .3s; }
.c-mercado .xv-kicker { color: #3F6B4A; letter-spacing: .3em; font-weight: 700; }
.c-mercado .xv-titulo { color: #2E3A2F; }
.c-mercado .xv-titulo .xv-script { font-family: "Caveat", cursive; font-weight: 700; color: #BF3F57; font-size: 1.2em; }
.c-mercado .xv-superficie { background: #F7F4EC; border: 1px solid rgb(46 58 47 / .12); border-radius: 12px; box-shadow: none; }
.c-mercado .xv-momento time { color: #BF3F57; font-weight: 700; }
.c-mercado .e-firma { font-family: "Caveat", cursive; font-weight: 700; color: #BF3F57; font-size: clamp(2.2rem, 4vw, 3rem); }
.c-mercado .xv-boton:not(.xv-boton-suave) { background: #3F6B4A; color: #FFFFFF; border-color: #3F6B4A; }
.c-mercado .e-ornamento { width: min(62%, 240px); }
/* la pizarra del puesto */
.c-mercado #itinerario > .xv-ancho { background: #2D3A32 !important; border: 12px solid #9A7350 !important; border-radius: 6px !important; color: #F3F1E8;
	--tinta: #F3F1E8; --tinta-2: #D5DDD0; --linea: rgba(243,241,232,.2); box-shadow: inset 0 0 40px rgb(0 0 0 / .4), 0 30px 60px -40px rgb(46 58 47 / .6) !important; }
.c-mercado #itinerario .xv-kicker { color: #F2C54B; }
.c-mercado #itinerario .xv-titulo { color: #F3F1E8; font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.c-mercado #itinerario .xv-titulo .xv-script { color: #F2A0B0; }
.c-mercado #itinerario .xv-momento time { color: #F2C54B; font-family: "Caveat", cursive; font-size: 1.4rem; }
.c-mercado #itinerario .xv-momento { color: #F3F1E8; font-family: "Caveat", cursive; font-size: 1.35rem; }
.c-mercado #itinerario .mf-etq b, .c-mercado #itinerario .mf-etq small { color: #2E3A2F; font-size: revert; }

/* fecha: las flores se juntan en un ramo */
.c-mercado .e-fecha-k { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.9rem; letter-spacing: 0; text-transform: none; color: #BF3F57; }
.mf-m-c1, .mf-m-c2 { bottom: 4%; width: 40%; opacity: clamp(0, calc(1 - var(--t1) * 1.4), 1); }
.mf-m-c1 { left: -10%; transform: translateX(calc(var(--t1) * 50%)) scale(calc(1 - var(--t1) * .4)); }
.mf-m-c2 { right: -10%; transform: translateX(calc(var(--t1) * -50%)) scale(calc(1 - var(--t1) * .4)); }
.mf-m-ramo { left: 27%; top: 2%; width: 46%; opacity: clamp(0, calc(var(--t1) * 2 - .6), 1); transform: scale(calc(.5 + var(--t1) * .5)); }
.mf-m-etq { left: 34%; top: 42%; width: 32%; opacity: var(--t2); transform: scale(calc(.6 + var(--t2) * .4)); filter: drop-shadow(0 10px 12px rgb(46 58 47 / .3)); }
.c-mercado .e-dia-caja { translate: 0 40%; }
.c-mercado .e-dia { font-size: clamp(2.6rem, 7vw, 3.6rem); }
.c-mercado .e-mes { font-family: "Caveat", cursive; font-weight: 700; color: #BF3F57; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.c-mercado .e-anio { color: #55604F; font-size: .72rem; }

/* cierre: el puesto */
.mf-toldo-fin { animation: mf-mece 5s ease-in-out infinite alternate; transform: none; }
.mf-cierre-a, .mf-cierre-b { position: absolute; bottom: 0; width: min(28vw, 220px); }
.mf-cierre-a { left: 2%; } .mf-cierre-b { right: 2%; }
.c-mercado .e-cierre { padding-top: clamp(150px, 20vh, 200px); padding-bottom: clamp(180px, 26vh, 260px); }
.c-mercado .e-cierre .xv-kicker { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.7rem; text-transform: none; letter-spacing: 0; color: #BF3F57; }

@media (max-width: 760px) {
	.c-mercado { --nombre-tam: clamp(3.2rem, 15vw, 4.6rem); }
	.mf-cubeta-a { --w: 38vw; left: -4vw; bottom: 2vh; } .mf-cubeta-b { --w: 34vw; right: -4vw; bottom: 4vh; }
	.mf-ramo { --w: 26vw; right: 4vw; top: 14vh; }
	.c-mercado main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 54px 22px 40px; }
}