/* 62 · Bordado a Mano — lino real con bordado en relieve.
   Guion: el bastidor con lino; la aguja da tres puntadas y la tela se suelta; los nombres «bordados» entre flores;
   una costura corre bajo el texto; en la fecha el bastidor gira, la corona bordada se cierra y queda el día bordado. */
.c-bordado { --display-peso: 400; --nombre-color: #2E3D6B; --titulo-letra: "Fraunces"; --titulo-peso: 900; --titulo-espacio: -.02em; --dia-letra: "Fraunces"; --dia-color: #2E3D6B;
	--y-letra: "Fraunces"; --y-peso: 900; --y-tam: .4em; --y-color: #A3482A; --radio: 14px; --vj: 60px; --sombra: 0 16px 18px rgb(46 61 107 / .18); --nombre-tam: clamp(4.4rem, 12vw, 9.6rem); }
.c-bordado .e-evento { color: #A3482A; font-weight: 700; letter-spacing: .32em; }
.c-bordado .e-nombre { line-height: .95; }
.c-bordado .e-fecha { color: #4B5679; font-weight: 600; }
.c-bordado .e-titulos::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -14px; height: 0; border-bottom: 3px dashed #C4673F; opacity: .8; }

.bo-corona { --w: min(76vmin, 640px); left: 50%; top: 50%; --x: -50%; --y: -52%; --ds: .25; --dr: 20deg; --ey: 0px; --ed: .2s; --fd: 0s; opacity: .95; }
.bo-corona .e-img { animation: none; }
.bo-ramito { --w: min(16vmin, 150px); left: 6vw; bottom: 6vh; --r: -14deg; --dy: 14vh; --ex: -20vw; --ey: 10vh; --ed: 1s; --fd: 6s; }
.bo-madeja { --w: min(22vmin, 210px); right: 5vw; bottom: 5vh; --r: 8deg; --dy: 12vh; --ex: 20vw; --ey: 10vh; --ed: 1.2s; --fd: 8s; --fa: 4px; }
.bo-aguja { --w: min(20vmin, 190px); right: 8vw; top: 8vh; --r: 10deg; --dx: 6vw; --dy: -18vh; --dr: 30deg; --ex: 20vw; --ey: -10vh; --ed: .8s; --fd: 5s; }

.c-bordado .xv-entrada { background: radial-gradient(70% 60% at 50% 45%, #F2EBDD, #E0D6C2 75%); }
.bo-entrada-bastidor { position: absolute; left: 50%; top: 50%; width: min(100vmin, 680px); translate: -50% -50%; opacity: .9; }
.bo-entrada-aguja { position: absolute; right: 10%; top: 10%; width: min(24vmin, 200px); animation: bo-puntada 2.4s ease-in-out infinite; }
@keyframes bo-puntada { 0%, 100% { translate: 0 0; } 50% { translate: -16px 18px; } }

.c-bordado .e-ornamento { width: min(56%, 220px); }
.c-bordado .e-firma { font-family: "Meow Script", cursive; color: #A3482A; font-size: clamp(2.6rem, 5vw, 3.6rem); }

/* fecha: bastidor gira → corona cerrada con el día */
.bo-m-bastidor { left: 4%; top: 2%; width: 92%; transform: rotate(calc(var(--t1) * 180deg)) scale(calc(1 - var(--t2) * .1)); opacity: clamp(0, calc((1 - var(--t2)) * 1.6), 1); }
.bo-m-corona { left: 0; top: 2%; width: 100%; opacity: var(--t2); transform: scale(calc(.5 + var(--t2) * .5)) rotate(calc((1 - var(--t2)) * -90deg)); }
.c-bordado .e-dia-caja { padding: 10px 18px; }
.c-bordado .e-dia { font-weight: 900; font-size: clamp(4rem, 11vw, 6.4rem); }
.c-bordado .e-mes { font-family: "Meow Script", cursive; color: #A3482A; font-size: clamp(2.2rem, 5vw, 3.2rem); }

.c-bordado .xv-superficie { background: #FAF6EE; border: 2px dashed rgb(196 103 63 / .45); }
.c-bordado .e-itinerario { background: #E6DFCF; }
.c-bordado .xv-momento time { color: #A3482A; }
.c-bordado .xv-titulo .xv-script { font-family: "Meow Script", cursive; font-weight: 400; color: #A3482A; font-size: 1.3em; }
.bo-cierre-bastidor { position: absolute; left: 50%; top: 50%; width: min(70vmin, 560px); translate: -50% -50%; opacity: .3; }

@media (max-width: 760px) {
	.bo-corona { --w: 128vw; }
	.c-bordado .e-titulos::after { display: none; }
	.bo-ramito { --w: 22vw; left: 2vw; bottom: 4vh; }
	.bo-madeja { --w: 30vw; right: 0; bottom: 3vh; }
	.bo-aguja { --w: 28vw; right: 2vw; top: 5vh; }
}
.c-bordado .e-fecha { background: rgb(250 246 238 / .88); padding: 3px 12px; border-radius: 999px; }