/* 59 · Jardín de Mariposas — botánica delicada en capas: durazno, salvia, lila y crema.
   Guion: un capullo cuelga de una rama; flores silvestres alrededor del nombre y una mariposa que abre sus alas
   al comenzar y aletea despacio. En la fecha el capullo se abre y salen dos alas grandes que enmarcan el día.
   Una mariposa pequeña viaja de sección en sección. */

.c-mariposas { --display-peso: 900; --nombre-color: #3F3346; --titulo-letra: "Nunito"; --titulo-peso: 800; --titulo-espacio: -.02em; --dia-letra: "Nunito"; --dia-color: #3F3346;
	--radio: 24px; --vj: 76px; --sombra: 0 20px 24px rgb(63 51 70 / .14); }
.c-mariposas .e-padres { font-family: "Dancing Script", cursive; font-weight: 700; color: #A0577A; font-size: clamp(1.8rem, 3.8vw, 2.8rem); }
.c-mariposas .e-evento { color: #A0577A; }
.c-mariposas .e-nombre { text-shadow: 0 4px 0 #FFF9F2; }

.ma-capullo { --w: min(30vmin, 290px); left: 2vw; top: -2vh; --dy: -10vh; --dr: -6deg; --ex: -20vw; --ey: -10vh; --ed: .3s; --fd: 5s; --fa: 5px; --fr: 3deg; }
.ma-capullo .e-img { transform-origin: 20% 10%; }
.ma-flores { --w: min(28vmin, 270px); right: 6vw; bottom: 0; --dy: 10vh; --ex: 20vw; --ey: 0px; --ed: .8s; --fd: 9s; --fa: 3px; }
.ma-mariposa { --w: min(18vmin, 170px); right: 22vw; top: 14vh; --dx: -10vw; --dy: -30vh; --dr: -10deg; --ey: 20vh; --ed: 1.2s; }

/* mariposa: dos alas que giran sobre el cuerpo (rotateY desde la unión) */
.ma-alas { position: relative; display: flex; justify-content: center; perspective: 600px; }
.ma-ala { width: 50%; height: auto; filter: drop-shadow(0 12px 14px rgb(63 51 70 / .18)); }
.ma-ala-l { transform-origin: 100% 50%; animation: ma-aletea-l 2.8s ease-in-out infinite alternate; }
.ma-ala-r { transform-origin: 0 50%; animation: ma-aletea-r 2.8s ease-in-out infinite alternate; }
@keyframes ma-aletea-l { from { transform: rotateY(8deg); } to { transform: rotateY(52deg); } }
@keyframes ma-aletea-r { from { transform: rotateY(-8deg); } to { transform: rotateY(-52deg); } }
html:not(.e-abierto) .ma-mariposa .ma-ala-l { transform: rotateY(88deg); animation: none; }
html:not(.e-abierto) .ma-mariposa .ma-ala-r { transform: rotateY(-88deg); animation: none; }

/* entrada */
.c-mariposas .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #EEF2EA, #DCE6D6 72%); }
.ma-entrada-capullo { position: absolute; left: 4%; top: -2%; width: min(32vmin, 280px); }

/* bienvenida */
.c-mariposas .e-ornamento { width: min(60%, 240px); }
.c-mariposas .e-firma { font-family: "Dancing Script", cursive; font-weight: 700; color: #A0577A; }

/* fecha: el capullo se abre y dos alas grandes enmarcan el día */
.ma-m-capullo { left: 22%; top: 4%; width: 56%; transform: scale(calc(1 + var(--t1) * .2)) rotate(calc(var(--t1) * 10deg)); opacity: clamp(0, calc((1 - var(--t1)) * 3 + .1), 1); }
.ma-m-alas { left: -14%; top: -6%; width: 128%; opacity: clamp(0, calc(var(--t1) * 3 - 2), 1); }
.ma-m-alas .ma-ala { animation: none; opacity: .92; }
.ma-m-alas .ma-ala-l { transform: rotateY(calc(80deg - var(--t2) * 80deg)); }
.ma-m-alas .ma-ala-r { transform: rotateY(calc(-80deg + var(--t2) * 80deg)); }
.c-mariposas .e-dia-caja { padding: 14px 18px; background: rgb(255 249 242 / .82); border-radius: 22px; }
.c-mariposas .e-dia { font-weight: 900; font-size: clamp(4.2rem, 11vw, 6.6rem); }
.c-mariposas .e-mes { font-family: "Dancing Script", cursive; font-weight: 700; color: #A0577A; }

/* viajero: mariposa pequeña */
.ma-vj .ma-ala { animation-duration: 1.4s; }

/* secciones */
.c-mariposas .xv-superficie { background: #FFFFFF; border: 0; box-shadow: 0 24px 50px -30px rgb(63 51 70 / .3); }
.c-mariposas .e-itinerario { background: #EEF2EA; }
.c-mariposas .xv-momento time { color: #A0577A; }
.c-mariposas .xv-titulo .xv-script { font-weight: 700; }

/* cierre */
.ma-cierre-flores { position: absolute; right: 6vw; bottom: -4%; width: min(30vmin, 260px); opacity: .9; }

html.quieto .ma-ala { animation: none !important; transform: none !important; }

@media (max-width: 760px) {
	.ma-capullo { --w: 38vw; left: 0; }
	.ma-flores { --w: 40vw; right: 0; }
	.ma-mariposa { --w: 30vw; right: 8vw; top: 12vh; }
	.ma-cierre-flores { right: 0; width: 36vw; }
}
.e-viajero .ma-ala { width: 50%; }