/* 114 · Tejido a Mano — baby shower artesanal. Sobre de tela con forro de punto y un botón con hilo que gira.
   Portada: la manta tejida de cerca con una franja de luz cálida que pasa (WebGL, modo rayos); el ovillo y las agujas.
   Orden: costura — cada sección es un parche de tela de un color y sus puntadas se cosen alrededor al llegar;
   un hilo punteado une un parche con el siguiente. Fecha: el ovillo rueda y el hilo dibuja el círculo del día. */
.c-tejido { --display-peso: 400; --nombre-color: #4E3B2C; --titulo-letra: "Fraunces"; --titulo-peso: 700; --titulo-espacio: -.02em; --dia-letra: "Fraunces"; --dia-color: #4E3B2C;
	--radio: 22px; --vj: 58px; --sombra: 0 18px 24px rgb(78 59 44 / .22); --nombre-tam: clamp(4.6rem, 12vw, 10rem); --hilo: #B07A3E; }
.c-tejido .xv-cielo { display: none; }
.c-tejido main { background: #EFE6D6 repeating-linear-gradient(45deg, rgb(255 255 255 / .18) 0 2px, transparent 2px 6px); }
.c-tejido main > .xv-sec:not(#portada) { background: transparent; }
.c-tejido .v-velo { background: radial-gradient(54% 40% at 50% 46%, rgb(248 242 231 / .78), transparent 74%); }

/* portada */
.c-tejido .e-evento { color: #B07A3E; letter-spacing: .4em; font-weight: 700; font-size: .76rem; }
.c-tejido .e-padres { font-family: "Fraunces", serif; font-style: italic; color: #6E5A48; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.c-tejido .e-padres-n { color: #6E5A48; }
.c-tejido .e-nombre { line-height: 1.1; text-shadow: 0 2px 20px rgb(248 242 231 / .9); }
.c-tejido .e-fecha { color: #4E3B2C; font-weight: 600; background: rgb(248 242 231 / .82); padding: 6px 16px; border-radius: 999px; }
.te-ovillo { --w: min(22vmin, 200px); left: 4vw; bottom: 5vh; --dx: 20vw; --dy: 8vh; --dr: 220deg; --ex: -40vw; --ey: 0px; --ed: .5s; --fd: 6s; --fa: 4px; --fr: 4deg; }
.te-agujas { --w: min(24vmin, 220px); right: 3vw; bottom: 5vh; --r: 8deg; --dx: 8vw; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .7s; --fd: 6s; --fa: 4px; --fr: 2deg; }
.te-escarpines { --w: min(18vmin, 170px); right: 8vw; top: 9vh; --r: -8deg; --dy: -14vh; --ex: 20vw; --ey: -10vh; --ed: .3s; --fd: 7s; --fa: 6px; --fr: 2deg; }

/* parches de tela cosidos */
.c-tejido main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #F8F2E7; border-radius: 22px; padding: clamp(34px, 4.6vw, 58px);
	background-image: repeating-linear-gradient(0deg, rgb(78 59 44 / .025) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgb(78 59 44 / .025) 0 2px, transparent 2px 5px);
	box-shadow: 0 2px 0 rgb(78 59 44 / .06), 0 30px 50px -34px rgb(78 59 44 / .45); }
.c-tejido main > .xv-sec:nth-of-type(3n + 1) > .xv-ancho { background-color: #EAF0E4; --hilo: #7E9470; }
.c-tejido main > .xv-sec:nth-of-type(3n + 2) > .xv-ancho { background-color: #F6E6E0; --hilo: #C08A78; }
.c-tejido .xv-kicker { color: #B07A3E; letter-spacing: .34em; }
.c-tejido .xv-titulo .xv-script { font-family: "Mrs Sheppards", cursive; font-weight: 400; font-size: 1.4em; color: #B07A3E; }
.c-tejido .xv-superficie { background: rgb(255 255 255 / .55); border: 0; }
.c-tejido .xv-momento time { color: #B07A3E; font-weight: 700; }
.c-tejido .e-firma { font-family: "Mrs Sheppards", cursive; color: #B07A3E; }
.c-tejido .xv-boton:not(.xv-boton-suave) { background: #7A5A44; color: #FFFFFF; border-color: #7A5A44; }
.c-tejido .e-ornamento { width: min(62%, 220px); }

/* fecha: el ovillo rueda y el hilo dibuja el círculo */
.c-tejido .e-fecha-k { color: #B07A3E; }
.te-m-ovillo { left: 0; top: 64%; width: 30%; transform: translateX(calc((1 - var(--t1)) * -120% + var(--t1) * 230%)) rotate(calc(var(--t1) * 540deg)); opacity: clamp(0, calc((1 - var(--t2)) * 2.4), 1); }
.te-m-hilo { inset: 0; width: 100%; height: 100%; overflow: visible; }
.te-m-hilo circle { fill: none; stroke: #D9B25F; stroke-width: 3; stroke-dasharray: .018 .012; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.te-m-hilo { -webkit-mask: conic-gradient(#000 calc(var(--t1) * 360deg), transparent 0); mask: conic-gradient(#000 calc(var(--t1) * 360deg), transparent 0); }
.c-tejido .e-dia { font-size: clamp(4rem, 12vw, 6.2rem); }
.c-tejido .e-mes { font-family: "Mrs Sheppards", cursive; color: #B07A3E; font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.c-tejido .e-anio { color: #6E5A48; }

/* cierre */
.te-cierre-escarpines { position: absolute; left: 50%; top: 5%; width: min(24vmin, 170px); translate: -50% 0; }
.c-tejido .e-cierre { padding-top: clamp(200px, 30vh, 270px); }

@media (max-width: 760px) {
	.c-tejido { --nombre-tam: clamp(4rem, 20vw, 6.2rem); }
	.te-ovillo { --w: 28vw; left: -2vw; bottom: 3vh; }
	.te-agujas { --w: 32vw; right: -4vw; bottom: 3vh; }
	.te-escarpines { --w: 22vw; right: 4vw; top: 6vh; }
}