/* 08 · Mariposa de Autor — mariposa contemporánea en lavanda y ciruela sobre marfil.
   Al abrir, las alas (capas separadas) giran sobre el cuerpo y se abren: el giro es rotateY desde la unión con el
   cuerpo, como una mariposa real. Después aletean muy poco. Una mariposa más chica (viajero) acompaña las
   secciones con una trayectoria pausada. */

.c-xv-mariposa-de-autor { --nombre-color: #3F3152; --mp: min(64vh, 64vw); --mp-y: 36vh; }

.mp { position: relative; perspective: 900px; transform-style: preserve-3d; }
.mp-ala { position: absolute; top: 0; height: 100%; width: auto; transition: transform 2.2s cubic-bezier(.34,1.15,.64,1); }
.mp-izq { right: 50%; transform-origin: 100% 50%; }
.mp-der { left: 50%; transform-origin: 0% 50%; }
.mp-cuerpo { position: absolute; left: 50%; top: 18%; height: 64%; transform: translateX(-50%); }

.c-xv-mariposa-de-autor .mp-grande { position: absolute; left: 50%; top: var(--mp-y); width: var(--mp); height: calc(var(--mp) * .66); transform: translate(-50%, -50%) translateY(calc(var(--p, 0) * -16vh)) scale(calc(1 - var(--p, 0) * .2)); }
html:not(.b-abierto) .c-xv-mariposa-de-autor .mp-grande .mp-izq { transform: rotateY(78deg); }
html:not(.b-abierto) .c-xv-mariposa-de-autor .mp-grande .mp-der { transform: rotateY(-78deg); }
html.b-abierto .c-xv-mariposa-de-autor .mp-grande .mp-izq { animation: mp-aleteo-izq 5.5s ease-in-out 2.4s infinite; }
html.b-abierto .c-xv-mariposa-de-autor .mp-grande .mp-der { animation: mp-aleteo-der 5.5s ease-in-out 2.4s infinite; }
@keyframes mp-aleteo-izq { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(22deg); } }
@keyframes mp-aleteo-der { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(-22deg); } }
.c-xv-mariposa-de-autor .b-centro { align-self: start; padding-top: calc(var(--mp-y) + var(--mp) * .3); }
html.con-fotos .c-xv-mariposa-de-autor .b-centro { padding-top: calc(var(--mp-y) - min(13vh, 11vw)); }
.c-xv-mariposa-de-autor .b-retrato { width: min(26vh, 22vw); border: 6px solid #FFFFFA; margin-bottom: 12vh; }
.c-xv-mariposa-de-autor .b-nombre { font-weight: 700; }

/* Entrada: la mariposa cerrada arriba; abre las alas al aparecer. */
.c-xv-mariposa-de-autor .xv-entrada { background: radial-gradient(70% 60% at 50% 30%, #FFFFFA, #E9E1F3); }
.c-xv-mariposa-de-autor .mp-entrada { position: absolute; left: 50%; top: 8vh; width: min(34vh, 40vw); height: calc(min(34vh, 40vw) * .66); transform: translateX(-50%); }
.c-xv-mariposa-de-autor .mp-entrada .mp-izq { animation: mp-abre-izq 2.6s cubic-bezier(.34,1.15,.64,1) .3s both; }
.c-xv-mariposa-de-autor .mp-entrada .mp-der { animation: mp-abre-der 2.6s cubic-bezier(.34,1.15,.64,1) .3s both; }
@keyframes mp-abre-izq { from { transform: rotateY(80deg); } }
@keyframes mp-abre-der { from { transform: rotateY(-80deg); } }
.c-xv-mariposa-de-autor .xv-entrada-contenido { margin-top: 18vh; }
.c-xv-mariposa-de-autor .xv-entrada .xv-monograma { display: none; }
.c-xv-mariposa-de-autor .xv-entrada-nombre { font-weight: 700; }

/* Viajero: mariposa pequeña, aleteo suave y continuo. */
.c-xv-mariposa-de-autor .mp-viajera { width: 110px; height: 72px; transform: rotate(calc(var(--vm, 0) * 30deg - 15deg)); }
.c-xv-mariposa-de-autor .mp-viajera .mp-izq { animation: mp-aleteo-izq 1.6s ease-in-out infinite; }
.c-xv-mariposa-de-autor .mp-viajera .mp-der { animation: mp-aleteo-der 1.6s ease-in-out infinite; }
.c-xv-mariposa-de-autor .mp-orn { width: 72%; height: 0; padding-bottom: 48%; margin: auto; }
.c-xv-mariposa-de-autor .mp-orn .mp-izq { transform: rotateY(28deg); }
.c-xv-mariposa-de-autor .mp-orn .mp-der { transform: rotateY(-28deg); }

/* Secciones: el trazo de la cuenta en lavanda; títulos con Tangerine en negrita. */
.c-xv-mariposa-de-autor .xv-script { font-weight: 700; }
.c-xv-mariposa-de-autor .xv-titulo .xv-script { font-size: 1.6em; }
.c-xv-mariposa-de-autor .b-mes { font-size: clamp(3rem, 6vw, 4.6rem); }
.c-xv-mariposa-de-autor .b-claro { box-shadow: 0 30px 60px -50px rgba(96, 76, 121, .55); }
.c-xv-mariposa-de-autor .xv-cuenta-final { font-weight: 700; }
.c-xv-mariposa-de-autor .b-cierre { background: linear-gradient(180deg, transparent, rgba(96, 76, 121, .16)); }

@media (max-width: 760px) {
	.c-xv-mariposa-de-autor { --mp: 92vw; --mp-y: 28vh; }
	.c-xv-mariposa-de-autor .b-retrato { width: 40vw; margin-bottom: 9vh; }
	html.con-fotos .c-xv-mariposa-de-autor .b-centro { padding-top: calc(var(--mp-y) - 20vw); }
}
html.quieto .c-xv-mariposa-de-autor .mp-ala { transform: none !important; animation: none !important; }