/* ===========================================================
   VIRSO · Landing v2 — capa de ilustraciones animadas (estilo Contorno)
   Línea en tinta · rellenos chip/card · UN acento coral · sin texto.
   Todo vive bajo body.lp-v2 y respeta prefers-reduced-motion.
   =========================================================== */
.il{display:block;color:var(--ink);pointer-events:none;user-select:none}
.il svg{display:block;width:100%;height:auto;overflow:visible}
.il .s{stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.il .sf{stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;fill:var(--card)}
.il .sc{stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;fill:var(--chip)}
.il .mu{stroke:var(--faint);stroke-width:1.6;stroke-linecap:round;fill:none}
.il .dash{stroke-dasharray:3 6}
.il .ink{fill:var(--ink)}
.il .cf{fill:var(--coral)}
.il .cs{stroke:var(--coral);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.il .ct{fill:var(--coral);opacity:.22}
.il .wh{stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.il *{transform-box:fill-box;transform-origin:center}
/* draw-on al entrar en vista */
.il .draw{stroke-dasharray:1;stroke-dashoffset:1}
.il.in .draw{animation:il-draw 1.3s cubic-bezier(.4,.1,.2,1) forwards}
.il .pop{transform:scale(0)}
.il.in .pop{animation:il-pop .5s cubic-bezier(.3,1.6,.5,1) .9s forwards}
@keyframes il-draw{to{stroke-dashoffset:0}}
@keyframes il-pop{to{transform:scale(1)}}

/* el texto siempre por encima de la órbita; en 2 columnas la órbita se desvanece hacia el copy */
body.lp-v2 .hi-copy{z-index:2}
@media (min-width:961px){.il-orbit{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 18%,#000 42%),linear-gradient(to right,transparent 0,#000 26%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,transparent 18%,#000 42%),linear-gradient(to right,transparent 0,#000 26%);mask-composite:intersect}}
/* ── spots de sección ── */
.il-spot{width:196px;margin:0 0 18px}
.center .il-spot,.nobank .il-spot{margin-left:auto;margin-right:auto}
.il-spot.wide{width:min(340px,100%)}
.il-mini{width:112px;margin:2px 0 12px}

/* ── hero · órbita del universo detrás del teléfono ── */
/* la órbita sale por los lados del teléfono; solo la línea de abajo sigue cortando */
body.lp-v2 .hi-art{position:relative;isolation:isolate;overflow-x:visible;overflow-y:clip}
.il-orbit{position:absolute;left:50%;top:56%;width:min(640px,170%);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 18%,#000 42%);mask-image:linear-gradient(to bottom,transparent 0,transparent 18%,#000 42%)}
.il-orbit .orb{transform-box:view-box;transform-origin:300px 300px;animation:il-spin 70s linear infinite}
.il-orbit .orb.r2{animation-duration:52s;animation-direction:reverse}
.il-orbit .orb .up{animation:il-spin 70s linear infinite reverse}
.il-orbit .orb.r2 .up{animation-duration:52s;animation-direction:normal}
.il-orbit .ring{transform-box:view-box;transform-origin:300px 300px}
@keyframes il-spin{to{transform:rotate(360deg)}}

/* ── animaciones por pieza ── */
.il .wv{animation:il-wave 1.1s ease-in-out infinite}
.il .wv:nth-child(2n){animation-delay:-.35s}.il .wv:nth-child(3n){animation-delay:-.7s}.il .wv:nth-child(4n){animation-delay:-.15s}
@keyframes il-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.il .travel{animation:il-travel 1.8s ease-in-out infinite}
@keyframes il-travel{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(24px);opacity:0}}
.il .nfc{animation:il-nfc 1.6s ease-out infinite;opacity:0}
.il .nfc:nth-of-type(2){animation-delay:.2s}.il .nfc:nth-of-type(3){animation-delay:.4s}
@keyframes il-nfc{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.il .tap{animation:il-tap 3.2s ease-in-out infinite}
@keyframes il-tap{0%,100%{transform:translateX(0) rotate(-12deg)}45%,60%{transform:translateX(10px) rotate(-8deg)}}
.il .beat{animation:il-beat 3.2s ease-in-out infinite}
@keyframes il-beat{0%,50%{transform:scale(0)}60%{transform:scale(1.12)}68%,92%{transform:scale(1)}100%{transform:scale(0)}}
.il .fly{animation:il-fly 2.7s ease-in-out infinite;opacity:0}
.il .fly.d2{animation-delay:.9s}.il .fly.d3{animation-delay:1.8s}
@keyframes il-fly{0%{transform:translate(0,0);opacity:0}15%{opacity:1}70%{opacity:1}100%{transform:translate(96px,-18px) scale(.85);opacity:0}}
.il .stackin{animation:il-stack 2.7s ease-in-out infinite}
@keyframes il-stack{0%,60%{transform:translateY(0)}72%{transform:translateY(-3px)}84%,100%{transform:translateY(0)}}
.il .fill{transform-origin:bottom;animation:il-fill 4.5s ease-in-out infinite}
.il .fill.f2{animation-delay:-1.5s}.il .fill.f3{animation-delay:-3s}
@keyframes il-fill{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(.95)}}
.il .coin{animation:il-coin 2.4s cubic-bezier(.5,0,.8,.4) infinite;opacity:0}
.il .coin.c2{animation-delay:.8s}.il .coin.c3{animation-delay:1.6s}
@keyframes il-coin{0%{transform:translateY(-6px);opacity:0}15%{opacity:1}70%{opacity:1}85%,100%{transform:translateY(58px);opacity:0}}
.il .linkL{animation:il-linkL 3s ease-in-out infinite}.il .linkR{animation:il-linkR 3s ease-in-out infinite}
@keyframes il-linkL{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@keyframes il-linkR{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.il .pulse{animation:il-pulse 2.4s ease-in-out infinite}
@keyframes il-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.il .bounce{animation:il-bounce 1.6s ease-in-out infinite}
@keyframes il-bounce{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.il .slide{animation:il-slide 3s ease-in-out infinite}
@keyframes il-slide{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-6px)}}
.il .arc{animation:il-nfc 1.4s ease-out infinite;opacity:0}.il .arc.d2{animation-delay:.25s}
.il .twk{animation:il-twk 2.2s ease-in-out infinite}.il .twk.d2{animation-delay:-1.1s}
@keyframes il-twk{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(20deg);opacity:1}}
.il .bob{animation:il-bob 3.4s ease-in-out infinite}
@keyframes il-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}}
.il .march{animation:il-march 1.2s linear infinite}
@keyframes il-march{to{stroke-dashoffset:-18}}
.il .glide{animation:il-glide 3.6s ease-in-out infinite}
@keyframes il-glide{0%,100%{transform:translate(0,0) rotate(-14deg)}50%{transform:translate(-8px,6px) rotate(-6deg)}}

/* ── cierre · avión de papel ── */
/* Por clase y no por id: #cierre vive en la columna de la tarjeta (Cierre.astro), y el avión se
   posiciona contra la SECCIÓN, que es la que tiene que ser relative. */
.cz{position:relative}
.il-plane{position:absolute;top:34px;right:max(24px,calc(50% - 600px));width:240px;z-index:0}
.cz .wrap{position:relative;z-index:1}

/* ── garabato coral bajo las palabras en Gochi ── */
body.lp-v2 .h2 .hand{position:relative;display:inline-block}
.il-scrib{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.34em;overflow:visible;pointer-events:none}
.il-scrib path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.il-scrib.in path{animation:il-draw .9s cubic-bezier(.4,.1,.2,1) .25s forwards}

@media (max-width:900px){.il-plane{display:none}.il-orbit{width:130%}}
@media (max-width:560px){.il-spot{width:164px}.il-spot.wide{width:280px}}
@media (prefers-reduced-motion:reduce){
  .il *,.il-scrib path{animation:none!important}
  .il .draw,.il-scrib path{stroke-dashoffset:0}.il .pop{transform:none}
  .il .fly,.il .coin,.il .nfc,.il .arc{opacity:1}
}