/* Motion belongs to the existing artwork and interactions, not extra scenery. */
.spatial-scene{position:relative;isolation:isolate}
/* Independent translate/rotate compose with the existing greeting, tilt and swaps. */
[data-parallax]{translate:0 var(--parallax-y,0px);rotate:var(--parallax-turn,0deg);scale:var(--parallax-scale,1)}
.scene-active [data-parallax]{will-change:translate,rotate,scale}
.hero-stage .orbit[data-parallax]{translate:var(--orbit-x,0px) calc(var(--orbit-y,0px) + var(--parallax-y,0px))}
.motion-layer[data-parallax]{animation:none!important}
.connection-visual[data-parallax]{padding-block:1rem}
.steps .step{padding-bottom:3rem}
.steps .step img[data-parallax]{margin-top:3.5rem}
.service-card .card-art{gap:4rem;padding-block:2rem}
.contact{background:var(--red)}
.contact-copy{background:var(--red);color:var(--paper)}
.contact-art{background:var(--paper);color:var(--ink);gap:4rem;padding:3.5rem 6% 5rem}
.contact-art:before{display:none}
.contact-art>span{color:var(--ink)}
.contact-art img{filter:none!important}
.contact-depth{margin-block:1rem;aspect-ratio:1080/700}
.contact-art .contact-depth img{position:absolute;left:0;top:-25%;width:100%;max-width:none;height:auto}
.steps .step img[data-parallax]{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.about-direction.spatial-scene:after,.about-team.spatial-scene:after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--red),var(--purple));transform:scaleX(var(--scene-progress,0));transform-origin:left;pointer-events:none}
.legal-document.spatial-scene{--scene-progress:0}
.legal-document.spatial-scene .terms-list{border-left:2px solid var(--line);padding-left:clamp(.75rem,2vw,1.5rem);background:linear-gradient(var(--red),var(--purple)) left top / 2px calc(var(--scene-progress,0) * 100%) no-repeat}
.legal-document.spatial-scene .terms-list details[open] summary span{color:var(--red)}
.site-footer.scene-active .footer-index a:after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform-origin:left;transform:scaleX(var(--scene-progress,0));pointer-events:none}
.hero{overflow-x:clip}
.spatial-scene>.reveal,.spatial-scene .section-intro,.spatial-scene .method-head{transform-origin:center bottom}
.spatial-scene .reveal:not(.visible){transform:perspective(1100px) translateY(38px) rotateX(9deg)!important}
.spatial-scene .reveal.visible{transform:none!important}
.steps .step{transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.steps .step.reveal:not(.visible){transform:perspective(1000px) translateY(48px) rotateY(-10deg)!important}
.steps .step.visible{transform:none!important}
.service-card{transform-origin:center;transition:background .4s,transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s}
.service-card.scene-switching{transform:perspective(1400px) rotateY(-4deg) translateY(6px);box-shadow:20px 14px 0 var(--ink)}
.service-card.scene-arriving .card-art{animation:cardArrival .65s cubic-bezier(.2,.75,.25,1) both}
.principle-art .idea-disc{animation:none;transform:perspective(1000px) translateY(var(--disc-lift,0px)) rotateY(var(--disc-turn,0deg));transition:transform .15s linear}
.scene-active .idea-disc span{animation:ideaPulse 5s ease-in-out infinite}
.scene-active .contact-art>span{animation:teamNote 5s ease-in-out infinite}
.site-footer .footer-index a{position:relative;overflow:hidden;isolation:isolate}
.footer-index a:before{content:'';position:absolute;inset:0;background:var(--red);z-index:-1;transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.75,.25,1)}
.site-footer .footer-index span{color:var(--red)}
.footer-index a:hover:before,.footer-index a:focus-visible:before{transform:translateY(0)}
.site-footer .footer-index a:is(:hover,:focus-visible),.site-footer .footer-index a:is(:hover,:focus-visible) span{color:#fff}
.motion-toggle{background:none;border:0;border-bottom:1px solid #888;color:inherit;font:inherit;font-size:.875rem;cursor:pointer;padding:.3rem 0;justify-self:start}
.motion-toggle:focus-visible{outline:2px solid var(--red);outline-offset:5px}
@keyframes cardArrival{from{transform:perspective(900px) translateY(18px) rotateY(8deg)}to{transform:none}}
@keyframes ideaPulse{0%,100%{scale:1}50%{scale:1.025}}
@keyframes teamNote{0%,100%{translate:0 var(--parallax-y,0px)}50%{translate:0 calc(var(--parallax-y,0px) - 7px)}}
@keyframes scribbleFloat{0%,100%{translate:0 var(--parallax-y,0px)}50%{translate:0 calc(var(--parallax-y,0px) - 9px)}}
@media(min-width:901px){.footer-bottom{flex-wrap:wrap;gap:1rem}.motion-toggle{margin-inline:auto}}
@media(max-width:900px){
  .footer-bottom .motion-toggle{margin-block:.5rem}
}
/* An explicit pause and the device preference stop every layer, including old loops. */
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}
.motion-paused .motion-layer,.motion-paused .idea-disc{transform:none!important}
.motion-paused [data-parallax],.motion-reduced [data-parallax],.duo-paused [data-parallax]{translate:0 0!important;rotate:0deg!important;scale:1!important;will-change:auto!important}
.motion-paused .portrait-card{--tilt-x:0deg!important;--tilt-y:0deg!important}
.motion-paused .cursor-spark{display:none}
.motion-reduced .spatial-scene{--scene-progress:1!important}
.motion-toggle:disabled{cursor:default;opacity:.65}
@media(prefers-reduced-motion:reduce){
  [data-parallax]{translate:0 0!important;rotate:0deg!important;scale:1!important;will-change:auto!important}
  .spatial-scene{--scene-progress:1!important}
  .spatial-scene .reveal,.steps .step,.service-card.scene-switching,.principle-art .idea-disc{transform:none!important}
  .service-card,.card-art,.idea-disc span,.contact-art>span{animation:none!important;transition:none!important}
}

/* Auditoría nov 2026: pausa accesible desde la cabecera y objetivos táctiles de 44 px. */
a,button,summary,[role="button"],[role="tab"]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(97,53,181,.18)}
.top-motion-toggle{margin-inline:auto 1rem;white-space:nowrap;font-size:.8rem;min-height:44px}
.top-motion-toggle:focus-visible,.menu-motion-toggle:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.mobile-menu .menu-motion-toggle{margin:0;min-height:44px;width:100%;text-align:left;border-bottom:0;font-weight:700;font-size:inherit;justify-content:flex-start}
@media(max-width:900px),(pointer:coarse){
  .footer-people a,.team-grid a,.thread-link,.motion-toggle,.mobile-menu summary,.topbar>.pill,.back-link,.footer-mail,.contact .pill{min-height:44px;display:inline-flex;align-items:center}
  .footer-people a,.team-grid a{display:flex;width:fit-content}
  .footer-people .whatsapp-link,.team-whatsapp{margin-top:0}
}
@media(max-width:900px){.topbar>.top-motion-toggle{display:none}}

/* Bordes de tinta entre secciones: trazo irregular que se asienta al bajar. Una cosa se mueve a la vez. */
.ink-edge{position:relative;height:0;z-index:6;pointer-events:none}
/* Altura sutil; al bajar el trazo se aplana y la tinta se desliza de lado (la máscara, no el fondo, para no descuadrar los colores). */
.ink-edge span{position:absolute;left:0;right:0;bottom:-2px;height:clamp(20px,3.6vw,58px);transform-origin:50% 100%;transform:scaleX(var(--edge-flip,1)) scaleY(calc(1.15 - var(--edge,.6) * .6));will-change:transform;-webkit-mask:var(--edge-shape) calc(var(--edge,.6) * 100%) 100%/130% 100% no-repeat;mask:var(--edge-shape) calc(var(--edge,.6) * 100%) 100%/130% 100% no-repeat}
.ink-edge--a{--edge-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V82C96 70 170 92 286 88 402 84 452 54 590 58 700 61 748 80 868 84 990 88 1040 62 1170 52 1290 43 1330 74 1452 70 1520 68 1560 58 1600 62V140Z'/%3E%3C/svg%3E")}
.ink-edge--b{--edge-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V64C70 58 140 76 238 72 360 67 400 40 528 46 650 52 700 92 842 90 958 88 1012 70 1110 66 1236 61 1300 88 1420 84 1510 81 1556 70 1600 74V140Z'/%3E%3C/svg%3E")}
.ink-edge--flip{--edge-flip:-1}
.ink-edge--paper span{background:var(--paper)}
.ink-edge--ink span{background:#0b0b0b}
.ink-edge--principle span{background:#f7f6f2 url('assets/paper.webp') 0 0/900px}
.ink-edge--contact span{background:linear-gradient(270deg,var(--red) 0 58%,var(--paper) 58% 100%)}
@media(min-width:901px) and (min-height:760px) and (max-aspect-ratio:2/1){.ink-edge--contact span{background:linear-gradient(270deg,var(--red) 50%,var(--paper) 50%)}}
@media(max-width:900px){.ink-edge--contact span{background:var(--red)}}
.motion-paused .ink-edge span,.motion-reduced .ink-edge span{--edge:.6!important;will-change:auto}

/* Hilo rojo de la home: cosido al margen izquierdo, por encima de los fondos y sin tocar el texto. */
main:has(.page-thread){position:relative}
.page-thread{position:absolute;left:0;top:0;z-index:7;pointer-events:none;overflow:visible}
.pt-guide{stroke:none!important}
.page-thread path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pt-red{stroke:var(--red)}
.pt-paper{stroke:var(--paper)}
.pt-tip{fill:var(--red);opacity:0;transition:opacity .25s}
.pt-tip.on-red{fill:var(--paper)}
.page-thread.is-drawing .pt-tip{opacity:1}
@media(max-width:900px){.page-thread path{stroke-width:3}.pt-tip{r:4px}}

/* La carta física: cada necesidad tiene su gesto de entrada; la nota llega después. Una cosa se mueve a la vez. */
.service-card.scene-arriving .card-art{animation:none}
.note-ink{display:inline-block}
#serviceHand.hand-leaving{animation:handLeave .22s cubic-bezier(.5,0,.75,0) forwards}
#serviceHand.hand-arriving[data-gesture="0"]{animation:handScan .85s cubic-bezier(.2,.8,.2,1) both}
#serviceHand.hand-arriving[data-gesture="1"]{animation:handPop .55s cubic-bezier(.2,.8,.2,1) both}
#serviceHand.hand-arriving[data-gesture="2"]{animation:handPresent .7s cubic-bezier(.22,1,.36,1) both}
#serviceHand.hand-arriving[data-gesture="3"]{animation:handShake .85s cubic-bezier(.2,.8,.2,1) both}
.service-card.scene-arriving .note-ink{animation:notePop .5s .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes handLeave{to{opacity:0;transform:translateY(40px) rotate(10deg) scale(.92)}}
@keyframes handScan{0%{opacity:0;transform:translate(-48px,36px) rotate(-14deg)}35%{opacity:1;transform:translate(10px,-6px) rotate(5deg)}60%{transform:translate(-8px,2px) rotate(-4deg)}80%{transform:translate(4px,0) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes handPop{0%{opacity:0;transform:scale(.7) rotate(-20deg)}55%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes handPresent{0%{opacity:0;transform:translateX(70px) rotate(10deg)}60%{opacity:1;transform:translateX(-10px) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes handShake{0%{opacity:0;transform:translateY(56px)}40%{opacity:1;transform:translateY(-6px)}55%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}85%{transform:rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes notePop{0%{opacity:0;transform:scale(.7) rotate(-8deg)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
.motion-paused #serviceHand,.motion-reduced #serviceHand,.motion-paused .note-ink,.motion-reduced .note-ink{animation:none!important}

/* Formulario de contacto sobre el rojo: campos de papel con sombra dura, como las píldoras. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-form{display:grid;gap:1.1rem;max-width:560px;margin:2rem 0 0}
.cf-pair{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;min-width:0}
.cf-pair .cf-hint,.cf-pair .cf-error{grid-column:1/-1}
.cf-field{min-width:0}
.contact-form label{display:block;font-weight:700;font-size:.9375rem;margin-bottom:.4rem}
.contact-form :is(input,select,textarea){display:block;width:100%;min-height:48px;padding:.7rem .9rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:4px;box-shadow:4px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s;touch-action:manipulation}
.contact-form textarea{resize:vertical;min-height:120px;line-height:1.5}
.contact-form ::placeholder{color:#6b6a66}
.contact-form :is(input,select,textarea):focus-visible{outline:3px solid var(--paper);outline-offset:3px;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.contact-form [aria-invalid="true"]{border-width:3px;box-shadow:4px 4px 0 var(--paper)}
.cf-hint,.cf-privacy{margin:0;font-size:.875rem;opacity:.9}
.contact-copy .contact-form p:not(.eyebrow),.contact-copy .cf-alt{margin:0;font-size:.875rem}
.cf-error{display:block;margin-top:.45rem;font-size:.875rem;font-weight:700;color:var(--ink)}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:.4rem}
.contact-form button.pill{font:inherit;font-weight:800;cursor:pointer;min-height:48px;padding-inline:1.5rem}
.contact-form button.pill:disabled{cursor:progress;opacity:.75}
.contact-form button.pill:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
.cf-status:empty{display:none}
.contact-copy .cf-status{font-size:1rem!important;font-weight:700;background:var(--paper);color:var(--ink);padding:.8rem 1rem;border-radius:4px;box-shadow:4px 4px 0 var(--ink)}
.cf-status[data-tone="error"]{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--paper)}
.contact-copy .cf-alt{margin-top:1.5rem}
.cf-alt a{font-weight:800;border-bottom:2px solid var(--paper);display:inline-flex;min-height:44px;align-items:center;overflow-wrap:anywhere}
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){.cf-pair{grid-template-columns:1fr}}
.motion-reduced .contact-form :is(input,select,textarea){transition:none}