/* PÁCATA — ajuste estructural y de movimiento v3 */
body{overflow-x:hidden}
.reveal{opacity:1!important;transform:translateY(18px);transition:transform .7s cubic-bezier(.2,.75,.25,1)!important}
.reveal.visible{opacity:1!important;transform:none}

/* 01 · Hero: una sola mano, más presencia y un saludo real */
.hero{min-height:100svh;padding:clamp(8rem,14vh,10rem) 4.5vw 5.5rem;grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);align-items:center;overflow:hidden}
.hero-copy{position:relative;z-index:5;max-width:760px}
.hero-copy h1{font-size:clamp(5.2rem,7.6vw,9.4rem);line-height:.77;letter-spacing:-.035em}
.hero-copy .lead{max-width:720px;font-size:clamp(1.05rem,1.35vw,1.36rem);line-height:1.52}
.hero-actions{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap}
.hero-cue{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:.95rem}
.hero-cue i{width:11px;height:11px;border-radius:50%;background:#6135b5;box-shadow:0 0 0 0 rgba(97,53,181,.38);animation:cuePulse 2s ease-out infinite}
.hero-stage{height:min(72vh,760px);min-height:540px;width:100%;isolation:isolate;cursor:pointer;outline:none}
.hero-stage:focus-visible{outline:3px solid #6135b5;outline-offset:8px;border-radius:8px}
.hero-stage:after{content:"";position:absolute;left:50%;top:51%;width:min(37vw,560px);aspect-ratio:1;border-radius:50%;background:rgba(97,53,181,.045);transform:translate(-50%,-50%);z-index:-2}
.hero-hand{width:min(48vw,720px);max-width:none;right:-2%;top:51%;left:auto;bottom:auto;transform:translateY(-49%) rotate(-3deg);transform-origin:70% 88%;filter:none!important;will-change:transform,translate}
.hero-stage.intro-active .hero-hand{animation:heroEntranceWave 2.7s cubic-bezier(.2,.8,.2,1) both}
.hero-stage.is-idle .hero-hand{animation:heroHandIdle 3.8s ease-in-out infinite}
.hero-stage.say-hello .hero-hand{animation:heroTapWave 1.2s cubic-bezier(.2,.85,.2,1) both}
.hero-greeting{position:absolute;left:1%;top:7%;width:min(260px,42%);padding:1rem 1.1rem .95rem;background:#e52b20;color:#fff;border:3px solid #0b0b0b;transform:rotate(-4deg);z-index:6;clip-path:polygon(0 0,100% 0,100% 82%,78% 82%,70% 100%,65% 82%,0 82%)}
.hero-greeting strong{display:block;font:clamp(2.4rem,4vw,4.8rem)/.82 Anton,sans-serif;letter-spacing:.01em}
.hero-greeting span{display:block;font:700 clamp(.72rem,.9vw,.9rem)/1.25 Inter,Arial,sans-serif;letter-spacing:.035em;margin-top:.45rem;padding-bottom:.85rem}
.hero-stage.intro-active .hero-greeting{animation:greetingArrives 1.25s .6s cubic-bezier(.2,.9,.25,1) both}
.hero-stage.say-hello .hero-greeting{animation:greetingBounce 1.2s ease both}
.hero-stage .burst{right:3%;top:29%}
.hero-stage .orbit{opacity:.5;transform-origin:center}
.hero-stage .orbit-one{border-style:dashed;animation:orbitSpin 15s linear infinite}
.hero-stage .orbit-two{border-style:solid dashed;animation:orbitSpin 24s linear infinite reverse}
.hero-stage .scribble{animation:scribbleFloat 3.6s ease-in-out infinite}
.hero-stage .burst{animation:burstBeat 1.8s ease-in-out infinite}

@keyframes cuePulse{70%{box-shadow:0 0 0 12px rgba(97,53,181,0)}100%{box-shadow:0 0 0 0 rgba(97,53,181,0)}}
@keyframes heroEntranceWave{0%{opacity:0;transform:translate(34%,-43%) rotate(18deg) scale(.82)}18%{opacity:1;transform:translate(0,-50%) rotate(-7deg) scale(1)}32%{transform:translateY(-52%) rotate(12deg)}46%{transform:translateY(-49%) rotate(-13deg)}60%{transform:translateY(-51%) rotate(9deg)}74%{transform:translateY(-49%) rotate(-7deg)}100%{opacity:1;transform:translateY(-49%) rotate(-3deg)}}
@keyframes heroTapWave{0%,100%{transform:translateY(-49%) rotate(-3deg)}18%{transform:translateY(-53%) rotate(14deg)}38%{transform:translateY(-48%) rotate(-15deg)}58%{transform:translateY(-53%) rotate(12deg)}78%{transform:translateY(-49%) rotate(-10deg)}}
@keyframes heroHandIdle{0%,100%{transform:translateY(-49%) rotate(-3deg)}50%{transform:translateY(-52%) rotate(0)}}
@keyframes greetingArrives{0%{opacity:0;transform:translate(-30px,18px) rotate(-10deg) scale(.72)}70%{opacity:1;transform:translate(4px,-3px) rotate(-2deg) scale(1.04)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
@keyframes greetingBounce{0%,100%{transform:rotate(-4deg) scale(1)}32%{transform:rotate(2deg) scale(1.08)}62%{transform:rotate(-7deg) scale(.98)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes scribbleFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes burstBeat{0%,100%{scale:.9;opacity:.75}50%{scale:1.12;opacity:1}}

/* 02 · Sigue el hilo: lectura arriba, relato visual abajo */
.connection{height:180vh;background:#0b0b0b}
.connection-pin{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}
.connection-copy{position:absolute;left:5.8vw;right:5.8vw;top:9.5%;width:auto;max-width:none;display:grid;grid-template-columns:minmax(430px,1.15fr) minmax(310px,.55fr);gap:6vw;align-items:end;z-index:5;transform:none;color:#f7f6f2}
.connection-copy:after{display:none}
.connection-title{min-width:0}
.connection-title h2{font-size:clamp(5.8rem,9.2vw,10.8rem);line-height:.74;letter-spacing:-.035em;margin:.14em 0 0;position:relative;z-index:1}
.connection-title h2 span{display:block;white-space:nowrap}
.connection-text{padding-bottom:.5rem;max-width:500px}
.connection-text p{font-size:clamp(1.05rem,1.45vw,1.4rem);line-height:1.5;margin:0 0 2rem}
.connection-copy .thread-link{display:inline-block}
.connection-visual{position:absolute;left:0;right:0;bottom:2.5%;height:54%;overflow:visible;z-index:2;pointer-events:none}
.connection-art{position:absolute;left:50%;top:50%;width:98vw;max-width:none;height:auto;object-fit:contain;filter:none;will-change:transform,opacity}
.connection-prompt{z-index:6;bottom:3.5%}
.thread-burst{position:absolute;left:50%;top:40%;width:clamp(58px,6vw,92px);height:clamp(44px,5vw,76px);transform:translate(-50%,-50%);z-index:4;pointer-events:none}
.thread-burst i{--ray-angle:0deg;position:absolute;left:50%;bottom:0;width:clamp(9px,1vw,15px);height:clamp(30px,3.5vw,52px);border-radius:3px;background:#e52b20;clip-path:polygon(24% 0,100% 10%,70% 100%,0 100%);opacity:0;transform-origin:50% 110%;transform:translateX(-50%) rotate(var(--ray-angle)) translateY(12px) scale(.45)}
.thread-burst i:first-child{--ray-angle:-42deg;left:24%}
.thread-burst i:last-child{--ray-angle:42deg;left:76%}
.connection.is-complete .thread-burst i{animation:threadBurstJump .82s cubic-bezier(.2,.85,.25,1.25) both}
.connection.is-complete .thread-burst i:nth-child(2){animation-delay:.08s}
.connection.is-complete .thread-burst i:nth-child(3){animation-delay:.16s}
@keyframes threadBurstJump{0%{opacity:0;transform:translateX(-50%) rotate(var(--ray-angle)) translateY(14px) scale(.4)}42%{opacity:1;transform:translateX(-50%) rotate(var(--ray-angle)) translateY(-14px) scale(1.18)}68%{opacity:1;transform:translateX(-50%) rotate(var(--ray-angle)) translateY(3px) scale(.94)}100%{opacity:0;transform:translateX(-50%) rotate(var(--ray-angle)) translateY(-20px) scale(.72)}}

/* 03 · Servicios: jerarquía alineada y con aire */
.menu-section{padding-top:clamp(5.5rem,10vw,9rem)}
.section-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.55fr);align-items:end;gap:5vw;margin-bottom:clamp(3rem,6vw,6rem)}
.section-title{min-width:0}
.section-intro h2{font-size:clamp(4.6rem,8vw,9rem);line-height:.79;letter-spacing:-.025em;margin:.13em 0 0;text-align:left}
.section-intro .section-lead{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.45;max-width:370px;margin:0 0 .5rem;border-left:3px solid #e52b20;padding-left:1.2rem}
.card-art img{filter:brightness(0) invert(1)!important}

/* 04 · Método: violeta en los puntos 1 y 3; rojo solo en el 2 */
.step:before,.step:nth-child(3):before{background:#e52b20}
.step:nth-child(2):before{background:#6135b5}
.step>span{color:#e52b20}
.step:nth-child(2)>span{color:#9471da}
.step:nth-child(3)>span{color:#e52b20}
.step img,.step:nth-child(2) img,.step:nth-child(3) img{filter:none!important}
.step:hover img{transform:translate(-18px,-16px) rotate(-2deg) scale(1.02)}

/* 05 · Idea principal: una escena, no tres renglones flotando */
.principle{min-height:92svh;background-color:#f7f6f2;background-image:url('assets/paper.webp');background-size:900px;color:#0b0b0b;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr);align-items:center;padding:clamp(5rem,8vw,9rem) 5.5vw;position:relative;overflow:hidden;isolation:isolate}
.principle:before{content:"";position:absolute;inset:auto auto -26vw -12vw;width:50vw;aspect-ratio:1;border:1px solid rgba(97,53,181,.22);border-radius:50%;z-index:-1}
.principle-copy{position:relative;z-index:3;max-width:850px}
.principle-copy .eyebrow{color:#e52b20}
.principle-copy h2{font-family:Anton,sans-serif;font-size:clamp(4rem,6vw,7.4rem);line-height:.86;letter-spacing:-.02em;margin:.22em 0 .28em}
.principle-copy h2 span,.principle-copy h2 strong{display:block;font-weight:inherit}
.principle-copy h2 strong{color:#6135b5}
.principle-copy>p:last-child{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.52;max-width:650px}
.principle-art{height:min(72vh,700px);min-height:520px;position:relative;isolation:isolate}
.principle-art img{position:absolute;width:min(39vw,610px);max-width:none;right:-4%;bottom:-12%;z-index:3;filter:none;animation:ideaHand 5s ease-in-out infinite}
.idea-disc{position:absolute;left:25%;top:7%;width:min(22vw,330px);aspect-ratio:1;border-radius:50%;background:#0b0b0b;color:#f7f6f2;display:grid;place-items:center;text-align:center;z-index:2;box-shadow:0 0 0 16px rgba(97,53,181,.13);animation:ideaDisc 5s ease-in-out infinite}
.idea-disc span{font-family:Anton,sans-serif;font-size:clamp(2.1rem,3.2vw,4rem);line-height:.84;transform:rotate(-6deg)}
.idea-orbit{position:absolute;border:1px solid rgba(97,53,181,.35);border-radius:50%;z-index:0;left:12%;top:-3%;width:70%;aspect-ratio:1}
.idea-orbit-two{left:4%;top:-11%;width:86%;border-color:rgba(11,11,11,.14)}
@keyframes ideaHand{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes ideaDisc{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}

/* 06 · Cierre: apretón blanco, legible y completo */
.contact{min-height:88svh;display:grid;grid-template-columns:58% 42%;padding:0;background:linear-gradient(90deg,#0b0b0b 0 58%,#e52b20 58% 100%);overflow:hidden}
.contact-copy{padding:clamp(5rem,9vw,9rem) 5.5vw;align-self:center;position:relative;z-index:4}
.contact-copy h2{font-size:clamp(4.2rem,6.7vw,8.2rem);line-height:.88}
.contact-art{position:relative;width:100%;height:100%;min-height:620px;right:auto;bottom:auto;overflow:hidden;display:block}
.contact-art:before{content:"";position:absolute;left:50%;top:54%;width:min(35vw,520px);aspect-ratio:1;border:1px solid rgba(247,246,242,.28);border-radius:50%;transform:translate(-50%,-50%)}
.contact-art img{position:absolute;left:50%;top:55%;width:min(49vw,760px);height:auto;max-width:none;transform:translate(-50%,-50%);filter:none!important;z-index:2;animation:teamShake 4.8s ease-in-out infinite}
.contact-art span{position:absolute;left:8%;top:10%;font-family:Kalam,cursive;font-size:clamp(2.6rem,4vw,5rem);line-height:.8;color:#f7f6f2;transform:rotate(-7deg);z-index:4}
.contact-art>i{position:absolute;width:14px;height:48px;border-radius:999px;background:#0b0b0b;left:48%;top:17%;transform-origin:50% 200px;z-index:3}
.contact-art>i:nth-of-type(2){transform:rotate(24deg)}
.contact-art>i:nth-of-type(3){transform:rotate(-24deg)}
@keyframes teamShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}48%{transform:translate(-50%,-52%) rotate(-1.5deg)}56%{transform:translate(-50%,-51%) rotate(1.5deg)}64%{transform:translate(-50%,-52%) rotate(-1deg)}}

@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,.93fr) minmax(390px,1.07fr)}
  .hero-copy h1{font-size:clamp(4.8rem,8.3vw,7.2rem)}
  .connection-copy{grid-template-columns:1fr .58fr;gap:4vw}
  .principle{grid-template-columns:1fr .78fr}
  .principle-art img{right:-18%;width:48vw}
  .idea-disc{left:12%;width:27vw}
}

@media (max-width:900px){
  .hero{min-height:auto;padding:8.5rem 5vw 4rem;grid-template-columns:1fr;align-items:start}
  .hero-copy{max-width:none}
  .hero-copy h1{font-size:clamp(4rem,12vw,6.6rem);line-height:.92}
  .hero-copy .lead{max-width:680px}
  .hero-stage{height:min(69vw,570px);min-height:390px;margin-top:1.5rem}
  .hero-hand{width:min(82vw,680px);right:0;top:49%}
  .hero-stage:after{width:min(68vw,520px)}
  .hero-greeting{left:2%;top:5%;width:min(250px,38%)}
  .scroll-note{display:none}

  .connection{height:165vh}
  .connection-copy{left:6vw;right:6vw;top:9%;display:grid;grid-template-columns:1fr;gap:1.3rem;align-items:start}
  .connection-title h2{font-size:clamp(4.25rem,11.5vw,6.5rem);line-height:.9}
  .connection-text{max-width:600px;padding:0}
  .connection-text p{font-size:1.08rem;margin-bottom:1.25rem}
  .connection-visual{height:43%;bottom:8%}
  .connection-art{width:104vw}

  .section-intro{grid-template-columns:1fr;align-items:start;gap:1.7rem}
  .section-intro h2{font-size:clamp(4rem,10vw,6.2rem);line-height:.9}
  .section-intro .section-lead{max-width:520px}

  .principle{min-height:auto;grid-template-columns:1fr;padding:6rem 6vw 0}
  .principle-copy h2{font-size:clamp(4.2rem,12vw,7.5rem)}
  .principle-art{height:570px;min-height:0;margin-top:1rem}
  .principle-art img{width:min(77vw,620px);right:-2%;bottom:-13%}
  .idea-disc{left:12%;top:8%;width:min(39vw,300px)}
  .idea-orbit{left:16%;width:58%}
  .idea-orbit-two{left:9%;width:72%}

  .contact{min-height:auto;grid-template-columns:1fr;background:#0b0b0b}
  .contact-copy{padding:6rem 6vw}
  .contact-art{min-height:440px;background:#e52b20;border-top:2px solid #f7f6f2}
  .contact-art:before{width:min(64vw,470px)}
  .contact-art img{width:min(92vw,700px)}
  .contact-art span{left:7%;top:8%}
}

@media (max-width:620px){
  .hero{padding:7.5rem 1.2rem 3rem}
  .hero-copy h1{font-size:clamp(3.45rem,14.2vw,4.85rem);line-height:.96;max-width:100%}
  .hero-copy h1 br{display:block}
  .hero-copy h1 span{display:block}
  .hero-copy .lead{font-size:1rem;line-height:1.5}
  .hero-actions{gap:1rem}
  .hero-cue{font-size:.82rem}
  .hero-stage{height:370px;min-height:370px;margin-top:.5rem}
  .hero-hand{width:min(92vw,460px);right:-2%;top:51%}
  .hero-stage:after{width:86vw}
  .hero-greeting{left:0;top:2%;width:180px;padding:.75rem .8rem .65rem}
  .hero-greeting strong{font-size:2.45rem}
  .hero-greeting span{font-size:.66rem;padding-bottom:.7rem}
  .scribble{left:3%;top:5%}

  .connection{height:150vh}
  .connection-copy{left:1.25rem;right:1.25rem;top:8%}
  .connection-title h2{font-size:clamp(4rem,18vw,5.5rem);line-height:.92}
  .connection-title h2 span{white-space:normal}
  .connection-text p{font-size:1rem;line-height:1.45;max-width:34ch}
  .connection-visual{height:34%;bottom:12%}
  .connection-art{width:112vw}
  .connection-prompt{display:none}

  .menu-section{padding-top:5rem}
  .section-intro{gap:1.25rem;margin-bottom:2.8rem}
  .section-intro h2{font-size:clamp(3.6rem,14vw,5.1rem);line-height:.94}
  .section-intro .section-lead{font-size:1rem}

  .step img,.step:nth-child(2) img,.step:nth-child(3) img{filter:none!important}

  .principle{padding:5rem 1.25rem 0}
  .principle-copy h2{font-size:clamp(3rem,13vw,4.6rem);line-height:.92}
  .principle-copy>p:last-child{font-size:1rem}
  .principle-art{height:430px}
  .principle-art img{width:94vw;right:-15%;bottom:-12%}
  .idea-disc{left:4%;top:10%;width:45vw}
  .idea-disc span{font-size:2.1rem}
  .idea-orbit{left:4%;width:74%}
  .idea-orbit-two{left:-3%;width:90%}

  .contact-copy{padding:5rem 1.25rem}
  .contact-copy h2{font-size:clamp(3rem,12.5vw,4.8rem);line-height:.92}
  .contact-art{min-height:360px}
  .contact-art img{width:108vw;top:59%}
  .contact-art span{font-size:2.6rem}
  .contact-art>i{top:13%;height:34px}
}

/* 07 · Sistema tipográfico: aire constante en todos los tamaños */
h1,h2,h3{font-kerning:normal;overflow-wrap:normal;word-break:normal}
.hero-copy h1,
.connection-title h2,
.section-intro h2,
.card-copy h3,
.method-head h2,
.step h3,
.principle-copy h2,
.contact-copy h2{text-wrap:balance}
.hero-copy h1{line-height:1.02}
.connection-title h2{line-height:1}
.section-intro h2{line-height:1}
.card-copy h3{line-height:1}
.method-head h2{line-height:1}
.step h3{line-height:1.02}
.principle-copy h2{line-height:.98}
.contact-copy h2{line-height:.98}
.eyebrow{line-height:1.35}
.lead,.connection-text p,.section-lead,.card-copy>p:not(.card-kicker),.step p,.principle-copy>p:last-child,.contact-copy p:not(.eyebrow){line-height:1.6}

/* 08 · Footer editorial: compacto, útil y con el índice visible */
.site-footer{min-height:0;background:#0b0b0b;color:#f7f6f2;padding:clamp(2.2rem,4vw,4rem) 5.5vw 1.5rem;display:block;border-top:6px solid #e52b20}
.footer-top{display:grid;grid-template-columns:1.05fr 1fr auto;align-items:end;gap:clamp(1.5rem,4vw,5rem);padding-bottom:clamp(1.8rem,3vw,3rem);border-bottom:1px solid rgba(247,246,242,.28)}
.footer-wordmark{font-size:clamp(3.2rem,6vw,6.4rem);line-height:.8;color:#f7f6f2;width:max-content}
.footer-wordmark .impact{margin-left:.12em;transform:rotate(-10deg) scale(1.25);transform-origin:left center}
.footer-claim{max-width:34ch;margin:0;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.5}
.footer-mail{font-weight:800;font-size:clamp(.95rem,1.2vw,1.15rem);border-bottom:2px solid #e52b20;padding-bottom:.35rem;white-space:nowrap}
.footer-index{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(247,246,242,.28)}
.footer-index a{display:flex;align-items:center;gap:.8rem;padding:1.25rem 0;border-right:1px solid rgba(247,246,242,.2);font-family:Anton,sans-serif;font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:.01em;transition:color .2s,background .2s,padding .2s}
.footer-index a:not(:first-child){padding-left:1.25rem}
.footer-index a:last-child{border-right:0}
.footer-index a:hover,.footer-index a:focus-visible{color:#e52b20;padding-left:1.5rem}
.footer-index span{font:700 .76rem/1 Inter,Arial,sans-serif;color:#9471da}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;padding-top:1.35rem;font-size:.82rem;color:rgba(247,246,242,.7)}
.footer-bottom p{margin:0;text-align:left!important}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr}.footer-mail{grid-column:2}
  .footer-index{grid-template-columns:1fr 1fr}.footer-index a:nth-child(2){border-right:0}.footer-index a:nth-child(-n+2){border-bottom:1px solid rgba(247,246,242,.2)}
}
@media(max-width:620px){
  .site-footer{padding:2.4rem 1.25rem 1.25rem}
  .footer-top{grid-template-columns:1fr;gap:1.15rem}.footer-mail{grid-column:auto;width:max-content}.footer-wordmark{font-size:3.8rem}
  .footer-index{margin-top:1.6rem}.footer-index a{padding:1rem 0}.footer-index a:not(:first-child){padding-left:.8rem}.footer-index a:hover,.footer-index a:focus-visible{padding-left:1rem}
  .footer-bottom{display:grid;gap:.35rem}
}

/* 09 · Contenido en flujo: cada ilustración reserva su espacio y su movimiento. */
:root{--header-height:86px}
section{scroll-margin-top:calc(var(--header-height) + 24px)}
.hero,.principle{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,5rem);padding:clamp(3rem,6vw,6rem) 5vw;overflow:visible}
.hero-copy,.principle-copy,.section-title,.card-copy{min-width:0}
.hero-copy h1{font-size:clamp(3.3rem,7.1vw,8rem);max-width:100%}
.hero-stage{height:auto;min-height:0;margin:0;padding:1.5rem 8% 2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;position:relative;min-width:0}
.hero-greeting{position:relative;left:auto;top:auto;width:100%;max-width:230px;grid-column:1;grid-row:1;padding:.8rem .8rem .7rem}
.hero-greeting strong{font-size:clamp(2rem,3vw,3.6rem);line-height:1}
.hero-greeting span{font-size:.75rem;line-height:1.4}
.hero-stage .scribble{position:relative;left:auto;right:auto;top:auto;grid-column:2;grid-row:1;font-size:clamp(1.25rem,2vw,2rem);line-height:1.3;margin:1rem 0 0;z-index:4}
.hero-hand{position:relative;grid-column:1/-1;grid-row:2;width:100%;max-width:520px;right:auto;left:auto;top:auto;bottom:auto;justify-self:center;transform:rotate(-3deg);transform-origin:50% 80%;translate:0 0!important}
.hero-stage.intro-active .hero-hand{animation:safeEntrance 2s ease-out both}
.hero-stage.is-idle .hero-hand{animation:safeIdle 3.8s ease-in-out infinite}
.hero-stage.say-hello .hero-hand{animation:safeWave 1.2s ease-in-out both}
.hero-stage:after{width:72%;top:65%}
.hero-stage .orbit{width:70%;right:15%;top:30%;border-width:2px;z-index:-1}
.hero-stage .orbit-two{width:82%;right:9%;top:26%}
.hero-stage .burst{display:none}
.scroll-note{position:static;grid-column:1/-1;transform:none;text-align:center;white-space:normal;line-height:1.4;margin-top:1rem}
@keyframes safeEntrance{0%{opacity:0;transform:translateY(16px) rotate(7deg)}30%{opacity:1;transform:rotate(-7deg)}55%{transform:rotate(7deg)}78%{transform:rotate(-6deg)}100%{transform:rotate(-3deg)}}
@keyframes safeIdle{0%,100%{transform:rotate(-3deg)}50%{transform:translateY(-6px) rotate(0)}}
@keyframes safeWave{0%,100%{transform:rotate(-3deg)}20%,60%{transform:rotate(7deg)}40%,80%{transform:rotate(-8deg)}}

.ticker{transform:none}
.connection{height:auto;min-height:0;margin:0}
.connection-pin{position:relative;top:auto;height:auto;min-height:0;display:grid;gap:clamp(2rem,5vw,5rem);padding:clamp(3rem,5vw,5rem) 5vw 2rem;overflow:visible}
.connection-copy{position:relative;left:auto;right:auto;top:auto;transform:none;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);width:100%;gap:3rem}
.connection-copy:before{display:none}
.connection-title h2{font-size:clamp(3.7rem,7vw,8rem)}
.connection-visual{position:relative;left:auto;right:auto;bottom:auto;height:auto;width:100%;aspect-ratio:3/1;display:grid;place-items:center;overflow:visible}
.connection-art{position:relative;left:auto;top:auto;width:100%;max-width:100%;height:auto;transform:scale(.94);transform-origin:center}
.thread-burst{top:30%;width:5%;height:20%;min-width:30px;min-height:24px}
.thread-burst i{height:70%;width:15%}
.connection-prompt{position:static;justify-self:end;line-height:1.4}
@media(min-width:901px) and (min-height:760px) and (max-aspect-ratio:2/1){
  .connection{min-height:160svh}
  .connection-pin{position:sticky;top:var(--header-height);min-height:calc(100svh - var(--header-height))}
}

.section-intro{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.section-intro h2{font-size:clamp(3rem,6.6vw,7.5rem)}
.service-card{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.5rem;min-height:0;overflow:visible}
.card-copy h3{font-size:clamp(2.5rem,4.1vw,4.8rem);max-width:100%;overflow-wrap:break-word}
.card-art{min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-width:0}
.card-note{position:relative;right:auto;top:auto;align-self:center;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.3}
.card-art img{position:relative;width:100%;max-width:360px;right:auto;bottom:auto;margin:auto;display:block}
.card-art img.swap{transform:translateY(8px) rotate(3deg)}
.card-number{pointer-events:none;z-index:0}.card-art{z-index:1}

.method{padding:clamp(3rem,6vw,6rem) 5vw}
.method-head h2{font-size:clamp(3rem,6vw,6.5rem)}
.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{display:flex;flex-direction:column;min-height:0;padding:clamp(1.25rem,2.5vw,2.5rem);overflow:visible;min-width:0}
.step h3{font-size:clamp(1.75rem,3.1vw,3.4rem);margin:1.5rem 0 1rem;overflow-wrap:break-word}
.step p{margin:0 0 1rem;max-width:none}
.step img{position:relative;right:auto;bottom:auto;width:100%;max-width:300px;height:auto;display:block;align-self:center;margin-top:auto;padding:1rem;transform:none}
.step:hover img{transform:translateY(-4px) rotate(-1deg) scale(.98)}
.step:before{inset:0;opacity:0;transition:opacity .4s;pointer-events:none}
.step:hover:before,.step:focus-within:before{opacity:1}
.step:hover>span,.step:focus-within>span{color:#fff}

.principle{min-height:0;overflow:visible}
.principle-copy h2{font-size:clamp(3rem,5.5vw,6rem)}
.principle-art{height:auto;min-height:0;margin:0;padding:1.5rem;display:grid;justify-items:center;gap:1.5rem}
.idea-disc{position:relative;left:auto;top:auto;width:clamp(155px,18vw,230px);z-index:2;box-shadow:0 0 0 10px rgba(97,53,181,.13)}
.idea-disc span{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.05}
.principle-art img{position:relative;width:100%;max-width:440px;right:auto;bottom:auto;display:block;z-index:1;animation:safeIdeaHand 5s ease-in-out infinite}
.idea-orbit{left:8%;top:2%;width:84%;z-index:-1}
.idea-orbit-two{left:1%;top:0;width:98%}
@keyframes safeIdeaHand{0%,100%{transform:rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}

.contact{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));background:linear-gradient(90deg,#0b0b0b 50%,#e52b20 50%)}
.contact-copy h2{font-size:clamp(3rem,5.8vw,6.7rem)}
.contact-art{height:auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:2.5rem 6%;overflow:visible}
.contact-art span{position:relative;left:auto;top:auto;align-self:center;font-size:clamp(2rem,3vw,3.5rem);line-height:1.3}
.contact-art img{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:560px;margin:0 auto;transform:none;animation:safeAgreement 4.8s ease-in-out infinite}
.contact-art>i{display:none}
.contact-art:before{width:80%;top:60%}
@keyframes safeAgreement{0%,100%{transform:rotate(0)}48%,64%{transform:translateY(-5px) rotate(-1deg)}56%{transform:rotate(1deg)}}
@media(max-width:1100px){
  .hero{grid-template-columns:1fr}.hero-copy h1{font-size:clamp(3.3rem,9vw,6.5rem)}
  .hero-stage{width:min(100%,640px);justify-self:center}.hero-stage .scribble{font-size:1.8rem}
  .principle{grid-template-columns:1fr}.principle-art{width:min(100%,550px);justify-self:center}
}
@media(max-width:900px){
  .connection-copy,.section-intro{grid-template-columns:1fr;gap:1.5rem}
  .connection-title h2{font-size:clamp(3.7rem,12vw,6rem)}
  .connection-text{max-width:none}.connection-visual{margin-top:1rem}
  .service-card{grid-template-columns:1fr}.card-art{align-items:center;margin-top:1rem;gap:1rem}.card-art img{width:min(100%,330px)}
  .steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid #777}.step h3{font-size:clamp(2rem,6vw,3.3rem)}.step img{max-width:280px}
  .contact{grid-template-columns:1fr;background:#0b0b0b}.contact-art{background:#e52b20;overflow:visible;padding:3rem 8%}.contact-art img{max-width:440px}
  .footer-top{align-items:start;grid-template-columns:1fr}.footer-mail{grid-column:auto;width:max-content}.footer-claim{text-align:left!important}
}
@media(max-width:600px){
  :root{--header-height:74px}
  .hero,.principle{padding:3rem 1.25rem;gap:2rem}.hero-copy h1{font-size:clamp(2.75rem,12vw,4.5rem)}
  .hero-stage{padding:1rem 8% 1.5rem;gap:1rem}.hero-greeting{padding:.65rem}.hero-greeting strong{font-size:1.9rem}.hero-greeting span{font-size:.65rem}
  .hero-stage .scribble{font-size:1.1rem;margin-top:.5rem}
  .connection-pin{padding:3rem 1.25rem 2rem;gap:1.5rem}.connection-title h2{font-size:clamp(3rem,14vw,4.7rem)}
  .connection-prompt{display:block;font-size:.85rem}.connection-text p{max-width:none}
  .section-intro h2,.method-head h2{font-size:clamp(2.65rem,11vw,4.5rem)}
  .service-card{padding:1.4rem;box-shadow:6px 6px 0 #0b0b0b}.card-copy h3{font-size:clamp(2.2rem,10vw,3.5rem)}
  .principle-copy h2{font-size:clamp(2.65rem,11vw,4.5rem)}.principle-art{padding:1rem;gap:1.5rem}.idea-disc{width:165px}
  .contact-copy{padding:3rem 1.25rem}.contact-copy h2{font-size:clamp(2.65rem,11vw,4.5rem)}
}

/* 10 · Marca real, navegación y contactos sin cajas que recorten el contenido. */
.brand{flex-shrink:0;line-height:1.2;padding:.35rem 0;overflow:visible}
.brand img{display:block;width:clamp(112px,11vw,150px);height:auto;object-fit:contain}
.topbar>nav{gap:clamp(.8rem,2vw,2rem);font-size:.875rem}
.mobile-menu{display:none}
.service-card .card-art{position:relative;min-width:0;height:auto;min-height:0;padding:1rem;gap:2rem}
.service-card .card-art img{position:static;width:100%;max-width:360px;height:auto;margin:0 auto;object-fit:contain;flex-shrink:0}
.steps .step img{position:static;width:min(100%,300px);height:auto;max-height:none;object-fit:contain;margin:1rem auto 0;padding:1rem;flex-shrink:0}
.steps .step{gap:.25rem;overflow:visible}
.steps .step p{position:relative;z-index:1;margin-bottom:1rem}
.connection-visual{padding:.5rem 0;aspect-ratio:auto}
.connection.is-complete .connection-visual{animation:connectedPulse .75s ease-out both}
@keyframes connectedPulse{0%,100%{translate:0 0}35%{translate:0 -7px}65%{translate:0 2px}}
.contact-copy .pill{max-width:100%;font-size:clamp(.85rem,1.3vw,1.15rem);overflow-wrap:anywhere;text-align:center;min-width:0}
.footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:2rem}
.footer-brand,.footer-contact{min-width:0}
.footer-wordmark{display:flex;width:100%;max-width:310px;margin-bottom:1.2rem;font-size:inherit;line-height:1.2}
.site-footer .footer-wordmark img{width:100%;height:auto}
.footer-label{margin:0 0 .65rem;letter-spacing:.08em;font:1rem/1.4 Anton,sans-serif}
.footer-mail{display:inline-block;white-space:normal;overflow-wrap:anywhere;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.5;max-width:100%}
.footer-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.footer-people h3{font:400 1.25rem/1.4 Anton,sans-serif;margin-bottom:.5rem;overflow-wrap:anywhere}
.person-monogram{display:block;width:var(--monogram-size,3rem);height:var(--monogram-size,3rem);flex:0 0 var(--monogram-size,3rem);object-fit:contain;aspect-ratio:1;padding:0;background:transparent;border-radius:0;transform-origin:45% 75%;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.footer-person-heading{display:flex;align-items:center;gap:0;margin-bottom:.65rem;min-width:0}
.footer-person-heading .person-monogram{--monogram-size:2rem}
.footer-person-heading h3{min-width:0;margin:0;overflow-wrap:break-word}
.name-initial{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
@media(hover:hover) and (pointer:fine){:is(.footer-person-heading,.team-person):hover .person-monogram{transform:translateY(-2px) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.person-monogram{transition:none;transform:none!important}}
.footer-people a{display:block;font-size:1rem;line-height:1.7;width:fit-content}
.footer-people .whatsapp-link{font-size:.875rem;border-bottom:1px solid #9471da;color:#fff;margin-top:.35rem}
.footer-index{grid-template-columns:repeat(5,minmax(0,1fr))}
.footer-index a{min-width:0;line-height:1.35;font-size:clamp(1rem,1.4vw,1.3rem);padding:1.25rem .75rem}
.footer-index a:not(:first-child){padding-left:.75rem}
.terms{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);padding:clamp(3rem,6vw,6rem) 5vw}
.terms-heading h2{font-size:clamp(2.5rem,4.8vw,5rem);line-height:1.08;overflow-wrap:anywhere}
.terms-heading>p:last-child{font-size:1rem;line-height:1.6;max-width:38ch}
.terms-list{min-width:0;border-top:1px solid var(--ink)}
.terms-list details{border-bottom:1px solid var(--ink)}
.terms-list summary{display:flex;gap:1rem;align-items:baseline;cursor:pointer;padding:1.25rem 0;font-weight:700;font-size:1rem;line-height:1.5;list-style:none}
.terms-list summary::-webkit-details-marker{display:none}
.terms-list summary span{color:var(--purple);font-size:.875rem}
.terms-list summary:after{content:'+';margin-left:auto;font-size:1.25rem;flex-shrink:0}
.terms-list details[open] summary:after{content:'−'}
.terms-list details[open] summary{color:var(--purple)}
.terms-list p{margin:0 0 1.5rem;font-size:1rem;line-height:1.75;max-width:65ch}
:is(.terms-list summary,.mobile-menu summary):focus-visible{outline:3px solid var(--purple);outline-offset:4px}
@media(max-width:1100px){.footer-index{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-index a{border-bottom:1px solid #444}.footer-index a:nth-child(3){border-right:0}}
@media(max-width:900px){
  .topbar>nav{display:none}.mobile-menu{display:block;margin-left:auto;margin-right:.75rem}
  .mobile-menu summary{cursor:pointer;font-weight:700;font-size:.875rem;padding:.6rem .25rem}
  .mobile-menu nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:1rem 5vw;gap:0;box-shadow:0 12px 20px #0001}
  .mobile-menu nav a{padding:.8rem 0;font-size:1rem}
  .footer-top,.terms{grid-template-columns:1fr}
  .footer-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-index a:nth-child(odd){border-right:1px solid #444}.footer-index a:nth-child(even){border-right:0}.footer-index a:last-child{grid-column:1/-1;border-right:0}
}
@media(max-width:600px){
  .brand img{width:108px}.topbar{padding-inline:1rem;gap:.25rem}.topbar>.pill{font-size:.8rem}
  .service-card .card-art{padding:1rem .5rem}
  .footer-people{grid-template-columns:1fr;gap:1.25rem}.footer-wordmark{max-width:265px}
  .footer-index a{gap:.5rem;padding:1rem .4rem}.footer-index a:not(:first-child){padding-left:.4rem}
  .footer-bottom{font-size:.875rem;line-height:1.5}
  .terms{padding:3rem 1.25rem}.terms-list summary{gap:.6rem}
}
/* 11 · Proporción natural y una sola escena por bloque. */
img{height:auto;object-fit:contain}
.hero-hand,.principle-art img{height:auto;aspect-ratio:1;object-fit:contain;align-self:start}
.hero{min-height:calc(100svh - var(--header-height));align-items:center;padding-block:clamp(2rem,4vw,4rem)}
.hero-stage{width:100%;max-width:580px;justify-self:center;gap:1rem;padding:1rem 6% 1.5rem;align-content:start}
.hero-hand{max-width:440px;justify-self:center}
.hero-copy h1{font-size:clamp(3.3rem,6.4vw,7rem)}
.hero-copy .lead{margin-block:1.5rem}
.hero-stage .orbit{top:32%;width:70%;right:15%}
.hero-stage .orbit-two{top:28%;width:80%;right:10%}
.hero-stage:after{top:63%;width:74%}
.hero-greeting{clip-path:polygon(0 0,100% 0,100% 88%,78% 88%,70% 100%,65% 88%,0 88%)}
.scroll-note{margin-top:0}

.connection-pin{min-height:0;gap:clamp(1rem,2vh,1.5rem);align-content:center;grid-template-rows:auto auto auto;padding-block:clamp(1.5rem,3vh,2.5rem)}
.connection-title h2{font-size:clamp(3.5rem,5.7vw,6.5rem)}
.connection-visual{padding:.5rem 0;animation:none!important;width:100%;max-width:1500px;justify-self:center}
.thread-scene{position:relative;width:100%;transform:scale(.82);transform-origin:center;will-change:transform;--ray-jump:clamp(6px,1.2vw,18px)}
.connection-art{display:block;width:100%;height:auto;aspect-ratio:3/1;transform:none;opacity:1;clip-path:polygon(0 0,46.35% 0,46.35% 46.1%,54.85% 46.1%,54.85% 0,100% 0,100% 100%,0 100%)}
.thread-ray{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:3/1;pointer-events:none;object-fit:contain}
.thread-ray-left{clip-path:inset(36.45% 50.73% 53.86% 46.50%)}
.thread-ray-center{clip-path:inset(33.56% 48.52% 55.66% 49.63%)}
.thread-ray-right{clip-path:inset(36.32% 45.30% 53.86% 51.84%)}
.connection.is-complete .thread-ray{animation:realRayJump .85s cubic-bezier(.2,.8,.3,1) both}
.connection.is-complete .thread-ray-center{animation-delay:.09s}
.connection.is-complete .thread-ray-right{animation-delay:.18s}
@keyframes realRayJump{0%,100%{transform:translateY(0)}35%{transform:translateY(calc(-1 * var(--ray-jump)))}65%{transform:translateY(3px)}82%{transform:translateY(-3px)}}
@media(min-width:901px) and (min-height:760px) and (max-aspect-ratio:2/1){
  .connection{min-height:135svh}.connection-pin{min-height:calc(100svh - var(--header-height))}
}

.step{isolation:isolate;outline-offset:4px}
.step:before{inset:0;opacity:1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.step:hover:before,.step:focus-within:before,.step.is-engaged:before{transform:scaleY(1);opacity:1}
.step.is-engaged>span{color:#fff}
.step.is-engaged img{transform:translateY(-4px) rotate(-1deg) scale(.98)}
.step:focus-visible{outline:3px solid #9471da}

.principle{padding-block:clamp(3rem,5vw,5rem);align-items:center}
.principle-art{width:100%;max-width:500px;justify-self:center;align-content:start;gap:1.25rem;padding:1.25rem}
.principle-art img{max-width:340px;justify-self:center}
.idea-disc{width:clamp(155px,13vw,195px);justify-self:center}
.idea-disc span{font-size:clamp(1.7rem,2.1vw,2.2rem)}
.idea-orbit{width:82%;left:9%;top:2%}.idea-orbit-two{width:94%;left:3%;top:0}
.principle-copy h2{font-size:clamp(3rem,4.8vw,5.5rem)}
@media(max-width:1100px){
  .hero{min-height:0}.hero-copy h1{font-size:clamp(3.3rem,8vw,6rem)}
  .hero-stage{max-width:500px}.principle-art{max-width:460px}
}
@media(min-width:901px) and (max-width:1100px){
  .hero,.principle{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
  .hero-copy h1{font-size:clamp(3rem,5.8vw,4rem)}
  .hero-greeting{padding:.65rem}.hero-greeting strong{font-size:2rem}.hero-greeting span{font-size:.65rem}
  .hero-stage .scribble{font-size:1.3rem}
  .principle-copy h2{font-size:clamp(2.75rem,4.8vw,3.5rem)}
}
@media(max-width:900px){
  .connection-pin{min-height:0;gap:1.5rem}.connection-title h2{font-size:clamp(3.3rem,10vw,5rem)}
  .connection{min-height:0}.connection-visual{margin-top:0}
  .principle-art img{max-width:310px}
}
@media(max-width:600px){
  .hero{padding:2.5rem 1.25rem;gap:1.5rem}.hero-copy h1{font-size:clamp(2.75rem,12vw,4.5rem)}
  .hero-stage{padding:.75rem 6% 1.25rem}.hero-hand{max-width:330px}
  .principle{padding:3rem 1.25rem}.principle-copy h2{font-size:clamp(2.65rem,11vw,4.5rem)}
  .principle-art{padding:1rem;gap:1rem}.idea-disc{width:160px}
}
/* 12 · Composición original en capas: la ilustración acompaña, el texto se lee. */
.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,3vw,3rem);min-height:calc(100svh - var(--header-height));padding:clamp(2.5rem,4.5vw,4.5rem) 5vw 2rem;align-items:center}
.hero-copy h1{font-size:clamp(3.5rem,7.2vw,8rem);max-width:100%;line-height:1.02}
.hero-stage{display:block;position:relative;width:100%;max-width:620px;height:auto;min-height:0;aspect-ratio:1;padding:0;margin:0;isolation:isolate}
.hero-hand{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:88%;max-width:540px;height:auto;aspect-ratio:1;transform:translate(-50%,-45%) rotate(-3deg);transform-origin:50% 80%}
.hero-stage.intro-active .hero-hand{animation:layeredEntrance 2s ease-out both}
.hero-stage.is-idle .hero-hand{animation:layeredIdle 3.8s ease-in-out infinite}
.hero-stage.say-hello .hero-hand{animation:layeredWave 1.2s ease-in-out both}
.hero-stage .scribble{position:absolute;right:0;left:auto;top:0;margin:0;font-size:clamp(1.2rem,2.1vw,2rem);line-height:1.3;z-index:5;max-width:42%}
.hero-greeting{position:absolute;left:1%;top:1%;width:35%;max-width:205px;opacity:0;pointer-events:none;padding:.65rem .7rem .6rem;z-index:6;clip-path:none}
.hero-greeting:after{content:'';position:absolute;left:70%;bottom:-12px;width:24px;height:12px;background:var(--red);clip-path:polygon(0 0,100% 0,50% 100%)}
.hero-greeting strong{font-size:clamp(1.5rem,2.5vw,2.5rem);line-height:1.05}
.hero-greeting span{font-size:.8rem;line-height:1.4;margin-top:.3rem;padding-bottom:.7rem;letter-spacing:0}
.hero-stage.intro-active .hero-greeting,.hero-stage.say-hello .hero-greeting{opacity:1}
.hero-stage .orbit-one{top:17%;right:10%;width:80%}.hero-stage .orbit-two{top:11%;right:4%;width:92%}
.hero-stage:after{top:58%;width:82%}
@keyframes layeredEntrance{0%{opacity:0;transform:translate(-45%,-41%) rotate(8deg)}30%{opacity:1;transform:translate(-50%,-45%) rotate(-7deg)}55%{transform:translate(-50%,-45%) rotate(7deg)}78%{transform:translate(-50%,-45%) rotate(-6deg)}100%{transform:translate(-50%,-45%) rotate(-3deg)}}
@keyframes layeredIdle{0%,100%{transform:translate(-50%,-45%) rotate(-3deg)}50%{transform:translate(-50%,-46%) rotate(0)}}
@keyframes layeredWave{0%,100%{transform:translate(-50%,-45%) rotate(-3deg)}20%,60%{transform:translate(-50%,-45%) rotate(7deg)}40%,80%{transform:translate(-50%,-45%) rotate(-8deg)}}
.principle-art{display:block;position:relative;width:100%;max-width:500px;aspect-ratio:1;height:auto;min-height:0;padding:0}
.principle-art img{position:absolute;right:0;left:auto;bottom:0;top:auto;width:90%;max-width:none;height:auto;aspect-ratio:1;z-index:1}
.principle-art .idea-disc{position:absolute;left:5%;top:3%;width:clamp(155px,13vw,195px);z-index:3}
.principle-art .idea-orbit{width:84%;left:8%;top:0;z-index:0}.principle-art .idea-orbit-two{width:96%;left:2%;top:-3%;z-index:0}
@media(max-width:1100px) and (min-width:901px){
  .hero-copy h1{font-size:clamp(3rem,5.8vw,4rem)}.hero-stage .scribble{font-size:1.3rem}
  .hero-greeting{width:40%}.hero-greeting strong{font-size:1.6rem}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;gap:2rem}.hero-copy h1{font-size:clamp(3.3rem,9vw,6.5rem)}
  .hero-stage{max-width:500px;margin-top:.5rem}.hero-stage .scribble{font-size:1.7rem}
  .principle-art{max-width:430px}
}
@media(max-width:600px){
  .hero{padding:2.5rem 1.25rem 2rem;gap:1.5rem}.hero-copy h1{font-size:clamp(2.75rem,12vw,4.5rem)}
  .hero-stage{max-width:380px}.hero-stage .scribble{font-size:1.15rem}
  .hero-greeting{width:43%;left:-1%;top:-1%;padding:.5rem}.hero-greeting strong{font-size:1.6rem}.hero-greeting span{font-size:.8rem}
  .principle-art{max-width:360px}.principle-art .idea-disc{width:145px;left:0;top:0}.idea-disc span{font-size:1.7rem}
}
/* 13 · Saludo legible, hilo hasta los bordes y pestañas sin cambios de alineación. */
.hero-stage.message-visible .hero-greeting{opacity:1}
.hero-greeting{transition:opacity .25s ease}
.connection-pin{--thread-edge:5vw;padding-inline:var(--thread-edge)}
.connection-visual{width:calc(100% + var(--thread-edge) * 2);max-width:none}
/* Keep the full viewport width; remove only the asset's empty vertical padding.
   All four layers share the same intrinsic ratio and offset, so the rays stay aligned. */
.thread-scene{aspect-ratio:2172/500;transform:scale(.92)}
.connection-art,.thread-ray{position:absolute;left:0;top:-22.4%;width:100%;max-width:none;height:auto;aspect-ratio:3/1}
@media(max-width:900px){
  .service-tab{display:flex;align-items:center;gap:.65rem;flex:0 0 auto;min-width:180px;white-space:nowrap;padding:1.35rem 1rem}
  .service-tab span{flex:0 0 auto;margin:0}
  .service-tab:hover,.service-tab:focus-visible,.service-tab.active{padding-left:1rem}
}
@media(max-width:600px){.connection-pin{--thread-edge:1.25rem}}
/* 14 · Profundidad en las ilustraciones; contenido y proporciones permanecen estables. */
.motion-layer{position:relative;transform:perspective(1000px) translate3d(var(--depth-x,0px),calc(var(--depth-y,0px) + var(--scroll-lift,0px)),0) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg));transform-origin:center;transition:transform .45s cubic-bezier(.2,.75,.25,1);backface-visibility:hidden}
.motion-active .motion-layer{will-change:transform}
.hero-depth,.principle-depth{position:absolute;inset:0;z-index:1}
.service-depth{width:100%;max-width:360px;margin:auto;flex-shrink:0}
.contact-depth{width:100%;max-width:560px;margin:0 auto}
.hero-stage .orbit,.principle-art .idea-orbit{translate:var(--orbit-x,0px) var(--orbit-y,0px);transition:translate .55s ease}
.hero-stage.is-idle:not(.motion-active) .hero-hand,.principle-art:not(.motion-active) img,.principle-art:not(.motion-active) .idea-disc,.contact-art:not(.motion-active) img{animation-play-state:paused}
@media(min-width:901px){.steps .step:nth-child(2){transition-delay:.09s}.steps .step:nth-child(3){transition-delay:.18s}}
@media(max-width:900px),(hover:none),(pointer:coarse){
  .motion-layer{animation:depthDrift 6s ease-in-out infinite;animation-play-state:paused}
  .motion-active .motion-layer{animation-play-state:running}
  .service-depth{animation-delay:-1.5s}.principle-depth{animation-delay:-3s}.contact-depth{animation-delay:-4.5s}
  @keyframes depthDrift{0%,100%{transform:perspective(1000px) translateY(var(--scroll-lift,0px)) rotateY(-2deg)}50%{transform:perspective(1000px) translateY(calc(var(--scroll-lift,0px) - 3px)) rotateY(2deg)}}
}
@media (prefers-reduced-motion:reduce){
  .hero-hand,.hero-greeting,.hero-stage .orbit,.hero-stage .scribble,.hero-stage .burst,.hero-cue i,.principle-art img,.idea-disc,.contact-art img,.thread-burst i{animation:none!important}
  .connection-visual{animation:none!important}
  .thread-ray,.thread-scene{animation:none!important;transform:none!important}
  .step:before{transition:none}
  .motion-layer{animation:none!important;transform:none!important;transition:none;will-change:auto}
  .hero-stage .orbit,.principle-art .idea-orbit{translate:0 0;transition:none}
}
/* Six shared footer destinations: three columns on desktop, two on mobile. */
.footer-index{grid-template-columns:repeat(3,minmax(0,1fr))}
.footer-index a{border-bottom:1px solid #444}
.footer-index a:nth-child(3n){border-right:0}
.topbar>nav a{white-space:nowrap}
@media(max-width:900px){.footer-index{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-index a:nth-child(odd){border-right:1px solid #444}.footer-index a:nth-child(even){border-right:0}.footer-index a:last-child{grid-column:auto}}