/* 152 · Pequeña Mandarina — baby shower cítrico y tierno: mandarinas, hojas verdes y flores de azahar. Sobre crema con forro de mandarinas, cerrado con una mandarina que rueda.
   Portada: ramas de mandarina con azahar a los lados y la sombra de las hojas que se mece (WebGL, modo sombra).
   Orden: la canasta — cada sección se «pela» al llegar: se descubre girando como una cáscara, y una mandarina rueda a su esquina.
   Fecha: la mandarina se pela y en los gajos queda el día. Cierre: la mandarina pequeña junto a la grande. */
.c-mandarina { --display-peso: 400; --nombre-color: #3A2A1A; --titulo-letra: "Young Serif"; --titulo-peso: 400; --titulo-espacio: -.01em;
	--dia-letra: "Caprasimo"; --dia-color: #3A2A1A; --radio: 30px; --vj: 50px; --sombra: 0 14px 16px rgb(58 42 26 / .2); --nombre-tam: clamp(4.6rem, 13vw, 11rem); }
.c-mandarina .xv-cielo { display: none; }
.c-mandarina main { background: #FFF7EC; }
.c-mandarina main > .xv-sec:not(#portada) { background: transparent; }
.c-mandarina .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(255 250 240 / .85), transparent 76%); }

.c-mandarina .e-evento { font-family: "Nunito", sans-serif; font-weight: 700; color: #C9620F; letter-spacing: .44em; font-size: .74rem; }
.c-mandarina .e-padres { font-family: "Young Serif", serif; color: #3F7A2F; }
.c-mandarina .e-padres-n { color: #5E4A36; }
.c-mandarina .e-fecha { color: #3A2A1A; font-weight: 700; background: rgb(255 255 255 / .85); padding: 6px 16px; border-radius: 999px; }
.c-mandarina .e-nombre { text-shadow: 0 4px 0 #F7C59F, 0 8px 24px rgb(255 250 240 / .9); }
.mn-rama-a { --w: min(24vmin, 230px); left: 2vw; top: 6vh; --r: -10deg; --dy: -10vh; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 6s; --fa: 4px; --fr: 2deg; }
.mn-rama-b { --w: min(22vmin, 210px); right: 2vw; top: 8vh; --r: 10deg; --dy: -10vh; --ex: 30vw; --ey: 0px; --ed: .45s; --fd: 7s; --fa: 4px; --fr: 2deg; }
.mn-rama-b .e-img { scale: -1 1; }
.mn-azahar { --w: min(14vmin, 130px); left: 12vw; bottom: 8vh; --dy: 10vh; --ex: -30vw; --ey: 20vh; --ed: .6s; --fd: 5s; --fa: 4px; --fr: 4deg; }
.mn-mandarina { --w: min(14vmin, 130px); right: 12vw; bottom: 6vh; --dy: 10vh; --dr: 90deg; --ex: 50vw; --ey: 0px; --ed: .75s; --fd: 6s; --fa: 3px; --fr: 2deg; }
html:not(.e-abierto) .mn-mandarina .e-img { rotate: 360deg; } .mn-mandarina .e-img { transition: rotate 1.6s cubic-bezier(.16,1,.3,1) .75s; }

/* la cáscara: cada sección se descubre en giro */
@property --pela { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.c-mandarina main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 30px; padding: clamp(50px, 6vw, 72px) clamp(24px, 5vw, 64px);
	box-shadow: inset 0 0 0 6px #FFFFFF, inset 0 0 0 8px #F7C59F, 0 30px 60px -40px rgb(201 98 15 / .45);
	-webkit-mask: conic-gradient(from 0deg, #000 var(--pela), transparent 0); mask: conic-gradient(from 0deg, #000 var(--pela), transparent 0); transition: --pela 1.3s cubic-bezier(.5,0,.3,1) .1s; }
.c-mandarina main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { --pela: 361deg; }
html.quieto .c-mandarina main > .xv-sec > .xv-ancho { --pela: 361deg; }
.mn-rueda { top: 14px; right: 18px; width: clamp(46px, 6vw, 60px); transform: translateX(-60vw) rotate(-720deg); transition: transform 1.6s cubic-bezier(.2,.8,.3,1) .3s; }
.llego > .xv-ancho > .mn-rueda { transform: none; }
.c-mandarina .xv-kicker { color: #C9620F; letter-spacing: .3em; font-weight: 700; }
.c-mandarina .xv-titulo .xv-script { font-family: "Caprasimo", serif; color: #3F7A2F; }
.c-mandarina .xv-superficie { background: #FFF7EC; border: 1px solid rgb(242 140 40 / .25); border-radius: 22px; box-shadow: none; }
.c-mandarina .xv-momento time { color: #C9620F; font-weight: 700; }
.c-mandarina .e-firma { color: #C9620F; }
.c-mandarina .xv-boton:not(.xv-boton-suave) { background: #E0741C; color: #FFFFFF; border-color: #E0741C; }
.c-mandarina .e-ornamento { width: min(60%, 230px); }

/* fecha: la mandarina se pela */
.c-mandarina .e-fecha-k { color: #C9620F; letter-spacing: .44em; font-weight: 700; }
.mn-m-entera { inset: 8%; width: 84%; opacity: clamp(0, calc(var(--t1) * 2 - var(--t2) * 2), 1); transform: rotate(calc(var(--t1) * 90deg)) scale(calc(.5 + var(--t1) * .5)); }
.mn-m-pelada { inset: 0; width: 100%; opacity: var(--t2); transform: scale(calc(.8 + var(--t2) * .2)) rotate(calc(var(--t2) * 20deg)); }
.mn-m-disco { inset: 31%; border-radius: 50%; background: #FFF7EC; box-shadow: 0 10px 30px rgb(201 98 15 / .35); opacity: var(--t2); }
.c-mandarina .e-dia { font-size: clamp(2.8rem, 8vw, 4.4rem); }
.c-mandarina .e-mes { font-family: "Young Serif", serif; color: #C9620F; font-size: clamp(1rem, 2.6vw, 1.3rem); }
.c-mandarina .e-anio { color: #5E4A36; font-size: .64rem; }

.mn-cierre-grande, .mn-cierre-chica { position: absolute; left: 50%; top: 40px; }
.mn-cierre-grande { width: min(30vmin, 180px); translate: -80% 0; }
.mn-cierre-chica { width: min(16vmin, 96px); translate: 30% 90%; animation: e-flota 2.6s ease-in-out infinite alternate; }
.c-mandarina .e-cierre { padding-top: clamp(250px, 36vh, 310px); }
.c-mandarina .e-cierre .xv-kicker { color: #C9620F; }

@media (max-width: 760px) {
	.c-mandarina { --nombre-tam: clamp(4rem, 22vw, 6rem); }
	.mn-rama-a { --w: 36vw; left: -6vw; top: 5vh; } .mn-rama-b { --w: 34vw; right: -6vw; top: 6vh; } .mn-azahar { --w: 22vw; left: 4vw; bottom: 6vh; } .mn-mandarina { --w: 22vw; right: 6vw; bottom: 5vh; }
}
.c-mandarina main > #galeria > .xv-ancho { -webkit-mask: none; mask: none; }