/* ══ EFECTOS DEL ESTUDIO (2026-09-11) · compartido por estudio.html y estudio-agenda.html ══
   Por que esta demo lleva efectos y las otras nueve no: es la pieza mas
   atrevida del mapa (sobrio 96) y un estudio de tatuaje vende justo eso,
   mano y caracter. Todo lo de aqui abajo se apaga solo en tres casos:
   si el visitante pide menos movimiento, si la web va dentro de una
   miniatura del portfolio (donde nada se anima de fondo: el script no
   pone la clase `js` y pone `quieta`) y, lo del cursor, en pantallas
   tactiles. Sin JS no se esconde nada: lo escondido cuelga de `.js`.
   La clase la pone un script en linea en la cabecera de cada pagina, antes
   de pintar; el motor esta en estudio-efectos.js. */
canvas.piel{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
canvas.tinta{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
main{position:relative;z-index:1}
.quieta canvas.piel,.quieta canvas.tinta{display:none}
/* la raya lateral crece con la lectura */
.lat{position:fixed}
.lat .raya{position:absolute;left:27px;top:0;width:2px;height:calc(var(--p,0)*100%);background:#FF2D2D;transition:height .12s linear}
/* el titular se tatua: cada linea se descubre de izquierda a derecha con la aguja roja en el borde.
   Vale para cualquier `.tatua` (el h1 de la portada y el de la agenda, y el «Recibido» de la agenda,
   que arranca cuando se muestra). Las lineas van b, br, span, br, em: hijos 1, 3 y 5. */
.tatua .l{display:inline-block;position:relative}
.js .tatua .l{clip-path:inset(-25% 100% -25% 0);animation:tatua 1.05s cubic-bezier(.7,0,.25,1) forwards}
.js .tatua .l::after{content:'';position:absolute;top:-8%;bottom:-8%;left:0;width:3px;background:#FF2D2D;
 box-shadow:0 0 18px 2px rgba(255,45,45,.9);opacity:0;animation:aguja 1.05s cubic-bezier(.7,0,.25,1) forwards}
.js .tatua .l:nth-child(1),.js .tatua .l:nth-child(1)::after{animation-delay:.2s}
.js .tatua .l:nth-child(3),.js .tatua .l:nth-child(3)::after{animation-delay:.85s}
.js .tatua .l:nth-child(5),.js .tatua .l:nth-child(5)::after{animation-delay:1.5s}
@keyframes tatua{from{clip-path:inset(-25% 100% -25% 0)}to{clip-path:inset(-25% -3% -25% 0)}}
@keyframes aguja{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
.js .bajo[data-r]{transition-delay:1.9s}
/* revelado al bajar: los titulos se estampan, las rejillas entran celda a celda */
.js [data-r]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-r].in{opacity:1;transform:none}
.js h2[data-r]{transform:scale(1.14) translateY(8px);transform-origin:left bottom;filter:blur(7px);
 transition:opacity .5s,transform .55s cubic-bezier(.2,.85,.2,1),filter .55s}
.js h2[data-r].in{filter:blur(0)}
.js h2[data-r] em{color:#fff;transition:color .45s .4s,text-shadow .45s .4s}
.js h2[data-r].in em{color:#FF2D2D;text-shadow:0 0 24px rgba(255,45,45,.55)}
.js [data-r=fila]{opacity:1;transform:none}
.js [data-r=fila]>*{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
 transition-delay:calc(var(--tarde,0s) + var(--i,0)*.08s)}
.js [data-r=fila].in>*{opacity:1;transform:none}
.js [data-r=fila]>*:nth-child(2){--i:1}.js [data-r=fila]>*:nth-child(3){--i:2}.js [data-r=fila]>*:nth-child(4){--i:3}
.js [data-r=fila]>*:nth-child(5){--i:4}.js [data-r=fila]>*:nth-child(6){--i:5}
.js [data-r][data-tarde]{transition-delay:1.3s}.js [data-r=fila][data-tarde]{--tarde:1.3s;transition-delay:0s}
/* los tres «no» se tachan de un trazo */
.es.no{cursor:not-allowed;transition:background .3s}
.es.no b{display:inline-block;position:relative}
.es.no b::after{content:'';position:absolute;left:-3%;top:50%;height:4px;width:0;background:#FF2D2D;
 transform:rotate(-4deg);transform-origin:left center;transition:width .32s cubic-bezier(.7,0,.25,1)}
.es.no:hover{background:#140A0A}
.es.no:hover b::after{width:106%}
.es.no:hover i{color:#fff}
/* los precios zumban mientras cuentan */
.pre b{display:inline-block}
.pre b.zumba{animation:zumba .07s linear infinite}
@keyframes zumba{0%{transform:translate(0,0)}25%{transform:translate(.7px,-.5px)}50%{transform:translate(-.6px,.7px)}75%{transform:translate(.5px,.5px)}100%{transform:translate(0,0)}}
/* los botones se llenan de rojo de izquierda a derecha, y se acercan al cursor (imán, en el script) */
.cta{position:relative;z-index:0;overflow:hidden;transition:color .25s,transform .18s cubic-bezier(.2,.7,.2,1)}
.cta::before{content:'';position:absolute;inset:0;background:#FF2D2D;transform:scaleX(0);transform-origin:left;
 transition:transform .35s cubic-bezier(.7,0,.25,1);z-index:-1}
.cta:hover{color:#080808}.cta:hover::before{transform:scaleX(1)}
/* la cinta se inclina con la velocidad del scroll (el angulo lo pone el script) */
.cinta{transform:skewX(var(--sk,0deg));transition:transform .25s ease-out}
/* el pin del plano late */
.mp .onda{fill:none;stroke:#FF2D2D;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:onda 2.4s ease-out infinite}
.quieta .mp .onda{animation:none;opacity:0}
@keyframes onda{0%{transform:scale(.3);opacity:.9}100%{transform:scale(4.2);opacity:0}}
/* el correo del final: al pasar por encima, la tinta gotea del subrayado */
.fin a{position:relative;display:inline-block;transition:text-shadow .3s}
.fin a:hover{text-shadow:0 0 34px rgba(255,45,45,.7)}
.fin .gotas{position:absolute;left:0;right:0;top:100%;height:70px;pointer-events:none}
.fin .gotas i{position:absolute;top:2px;width:6px;height:14px;border-radius:0 0 6px 6px;background:#FF2D2D;opacity:0}
.fin .gotas i:nth-child(1){left:16%}.fin .gotas i:nth-child(2){left:49%}.fin .gotas i:nth-child(3){left:83%}
.fin a:hover .gotas i{animation:gotea 1.3s cubic-bezier(.5,0,.85,.4) infinite}
.fin a:hover .gotas i:nth-child(2){animation-delay:.4s}.fin a:hover .gotas i:nth-child(3){animation-delay:.8s}
@keyframes gotea{0%{opacity:0;transform:translateY(-12px) scaleY(.5)}18%{opacity:1;transform:translateY(-6px) scaleY(1.5)}100%{opacity:0;transform:translateY(64px) scaleY(1)}}
@media(prefers-reduced-motion:reduce){
 .js .tatua .l{clip-path:none;animation:none}.js .tatua .l::after{display:none}
 .js [data-r],.js [data-r]>*,.js h2[data-r]{opacity:1;transform:none;filter:none;transition:none}
 .js h2[data-r] em{color:#FF2D2D;transition:none}
 .mp .onda{animation:none;opacity:0}.fin .gotas{display:none}.cta::before{transition:none}
 .pre b.zumba{animation:none}.cinta{transform:none}
 canvas.piel,canvas.tinta{display:none}}
@media(pointer:coarse){.es.no b::after{width:0!important}.es.no:hover{background:#080808}}

/* ── la agenda ── */
/* el dia elegido se llena de rojo de izquierda a derecha, como un tachon en un calendario */
.d{position:relative;overflow:hidden}
.d>*{position:relative;z-index:1}
.d::before{content:'';position:absolute;inset:0;background:#FF2D2D;transform:scaleX(0);transform-origin:left;
 transition:transform .3s cubic-bezier(.7,0,.25,1)}
.d.on::before{transform:scaleX(1)}
.d.on{background:#080808}
/* al pasar por un hueco libre, el numero se subraya de un trazo */
.d[data-op] b{display:inline-block;position:relative}
.d[data-op] b::after{content:'';position:absolute;left:0;bottom:-3px;height:3px;width:0;background:#FF2D2D;
 transition:width .25s cubic-bezier(.7,0,.25,1)}
.d[data-op]:hover b::after{width:100%}
.d.on b::after{background:#fff}
/* los cogidos se tachan, como los «no» de la portada */
.d.no{transition:opacity .3s}
.d.no b{display:inline-block;position:relative}
.d.no b::after{content:'';position:absolute;left:-6%;top:50%;height:4px;width:0;background:#FF2D2D;
 transform:rotate(-6deg);transform-origin:left center;transition:width .3s cubic-bezier(.7,0,.25,1)}
.d.no:hover{opacity:.6}
.d.no:hover b::after{width:112%}
/* el formulario: el campo en foco se enciende y su rotulo se pone rojo */
.res input:focus,.res textarea:focus{box-shadow:0 0 0 3px rgba(255,45,45,.16)}
.res label:focus-within span{color:#FF2D2D}
.res input,.res textarea{transition:border-color .25s,box-shadow .25s}
/* el boton de enviar: un brillo lo recorre al pasar por encima (y el iman lo acerca, en el script) */
.env{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.env::after{content:'';position:absolute;top:-60%;bottom:-60%;left:-80px;width:46px;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
 transform:skewX(-22deg);transition:left .55s cubic-bezier(.4,0,.2,1)}
.env:hover::after{left:calc(100% + 40px)}
@media(prefers-reduced-motion:reduce){.d::before,.d[data-op] b::after,.d.no b::after,.env::after{transition:none}}
@media(pointer:coarse){.d.no b::after{width:0!important}.d.no:hover{opacity:.3}}