/* HYPE motion (2026-11-03): video del hero, logo animado en el pie, contador del stand 3D, iconos de servicios, Foto IA */

/* 1. Hero: el video entra con fundido sobre la foto fija; mientras corre, la foto deja su zoom lento */
.hero__bg .mo-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero__bg .mo-hero.on{opacity:1}
.hero__bg.mo-v{animation:none}

/* 2. Pie: el video (recortado 940x480, el logo ocupa 864x240 desde 48,120) se superpone exacto al SVG */
.footer__logo.mo-flogo{position:relative;display:inline-block;line-height:0}
.mo-flogo__v{position:absolute;left:-5.556%;top:-50%;width:108.796%;height:200%;pointer-events:none;mix-blend-mode:lighten;opacity:0}
.mo-flogo.playing .mo-flogo__v{opacity:1}
.mo-flogo.playing img{opacity:0}

/* 3. Stand 3D: contador de piezas mientras se arma */
.s3d__count{position:absolute;z-index:2;right:16px;top:16px;font-family:var(--ff-body);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;pointer-events:none;padding:.4rem .7rem;border-radius:999px;background:rgba(10,10,20,.7);backdrop-filter:blur(6px);color:var(--c-muted);border:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums;transition:color .4s,border-color .4s}
.s3d__count b{color:#fff;font-weight:700}
.s3d__count.done{color:var(--c-accent);border-color:rgba(212,255,0,.3)}
.s3d__count.done b{color:var(--c-accent)}
.s3d__view.nogl .s3d__count{display:none}

/* 4. Servicios: icono de línea que se dibuja */
.mo-ico{width:64px;height:64px;color:rgba(255,255,255,.82);margin-top:.5rem}
.mo-ico svg{width:100%;height:100%;overflow:visible}
.mo-ico .a{stroke:var(--c-accent,#D4FF00)}
.mo-on .mo-ico path,.mo-on .mo-ico rect,.mo-on .mo-ico circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) calc(var(--i) * .12s)}
.mo-on .mo-ico.in path,.mo-on .mo-ico.in rect,.mo-on .mo-ico.in circle{stroke-dashoffset:0}
/* pequeños gestos una vez dibujado */
.mo-on .mo-ico.in .w1{animation:mo-pulse 1.8s ease-in-out 1.6s infinite}
.mo-on .mo-ico.in .w2{animation:mo-pulse 1.8s ease-in-out 1.9s infinite}
.mo-on .mo-ico.in .b1{animation:mo-pulse 1.4s ease-in-out 1.6s infinite}
.mo-on .mo-ico.in .b2{animation:mo-pulse 1.4s ease-in-out 2.3s infinite}
.mo-on .mo-ico.in .s{animation:mo-pulse 1.2s ease-in-out 1.8s infinite}
.mo-on .mo-ico--stands.in svg{animation:mo-tilt 6s ease-in-out 1.8s infinite}
@keyframes mo-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes mo-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@media (max-width:768px){.mo-ico{width:44px;height:44px;margin:0 0 0 auto}}

/* 5. Foto IA */
.fia__inner{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.fia__list{list-style:none;padding:0;margin:1.25rem 0 1.75rem;display:grid;gap:.55rem;color:var(--c-muted)}
.fia__list li{position:relative;padding-left:1.4rem}
.fia__list li::before{content:"";position:absolute;left:0;top:.6em;width:.6rem;height:2px;background:var(--c-accent)}
.fia__stage{display:grid;grid-template-columns:1fr auto 1.25fr;grid-template-rows:auto auto;gap:1rem 1.1rem;align-items:center}
.fia__base,.fia__out{margin:0;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:448/592;background:#14141f;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fia__base img,.fia__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fia__base{transform:rotate(-3deg);opacity:.9}
.fia__base figcaption,.fia__label{position:absolute;left:10px;bottom:10px;z-index:3;font-family:var(--ff-body);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;padding:.35rem .6rem;border-radius:999px;background:rgba(10,10,20,.75);backdrop-filter:blur(6px);color:#fff}
.fia__label{color:var(--c-accent);border:1px solid rgba(212,255,0,.3)}
.fia__arrow{font-family:var(--ff-mono,'JetBrains Mono',monospace);font-size:.8rem;font-weight:700;color:var(--c-accent);letter-spacing:.1em;white-space:nowrap}
.fia__arrow::before{content:"";display:block;width:100%;min-width:44px;height:2px;margin-bottom:.4rem;background:linear-gradient(90deg,transparent,var(--c-accent))}
.fia__shot{opacity:0;z-index:1}
.fia__shot.prev{opacity:1;z-index:1}
.fia__shot.on{opacity:1;z-index:2}
.mo-on .fia.scan .fia__shot.on{animation:mo-reveal .9s cubic-bezier(.65,0,.35,1) both}
.fia__out::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;background:var(--c-accent);box-shadow:0 0 18px 4px rgba(212,255,0,.55);opacity:0;pointer-events:none}
.mo-on .fia.scan .fia__out::after{animation:mo-scan .9s cubic-bezier(.65,0,.35,1) both}
@keyframes mo-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-scan{0%{top:0;opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.fia__thumbs{grid-column:1 / -1;display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center}
.fia__thumb{width:46px;height:60px;padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;background:none;cursor:pointer;opacity:.55;transition:opacity .25s,border-color .25s,transform .25s}
.fia__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fia__thumb:hover,.fia__thumb:focus-visible{opacity:1;transform:translateY(-2px)}
.fia__thumb[aria-pressed="true"]{opacity:1;border-color:var(--c-accent)}
.fia__note{grid-column:1 / -1;margin:0;text-align:center;font-size:var(--fs-xs);color:var(--c-muted)}
@media (max-width:900px){
  .fia__inner{grid-template-columns:1fr}
  .fia__stage{grid-template-columns:1fr auto 1.25fr;gap:.8rem .6rem}
  .fia__arrow::before{min-width:24px}
}
@media (max-width:480px){.fia__thumbs{gap:.3rem;flex-wrap:nowrap}.fia__thumb{width:30px;height:40px;border-width:1.5px}.fia__arrow{font-size:.7rem}.fia__base figcaption,.fia__label{font-size:.62rem;letter-spacing:.08em;left:6px;bottom:6px;padding:.3rem .5rem}}
.fia__base figcaption,.fia__label{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .hero__bg .mo-hero,.mo-flogo__v{display:none}
}

/* 6. Stand 3D: fondo del visor más claro para que el truss negro se lea (2026-11-03) */
.stand3d .s3d__view{background:radial-gradient(ellipse at 50% 78%,#6b6f82 0%,#4a4d5e 45%,#2c2e3b 80%,#22232e 100%)}

/* 7. Agencias: los ✓ sin círculo de fondo (2026-11-03) */
.agencias__list .agencias__check[data-astro-cid-j7pv25f6]{width:auto;height:auto;border:0;border-radius:0;background:none;font-size:1rem;line-height:1.4;margin-top:0}

/* 8. Navegación a las landings (2026-11-03): desplegable "Servicios", menú del celular, tarjetas "También hacemos" */
.nv-dd{position:relative;display:flex;align-items:center;gap:.15rem}
.nv-dd__btn{width:22px;height:22px;border:0;background:none;cursor:pointer;color:inherit;padding:0;display:grid;place-items:center}
.nv-dd__btn::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .2s}
.nv-dd__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:1.4rem 2rem;padding:1.4rem 1.6rem 1.1rem;background:hsl(240,16%,7%);border:1px solid hsl(240,8%,20%);border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:60;width:max-content;max-width:min(760px,92vw)}
.nv-dd__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nv-dd:hover .nv-dd__menu,.nv-dd:focus-within .nv-dd__menu,.nv-dd.open .nv-dd__menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
.nv-dd:hover .nv-dd__btn::before,.nv-dd.open .nv-dd__btn::before{transform:translateY(1px) rotate(225deg)}
.nv-dd__col{display:flex;flex-direction:column;gap:.15rem}
.nv-dd__h{margin:0 0 .45rem;font-family:var(--ff-body);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent)}
.nv-dd__menu a{color:#fff;text-decoration:none;font-family:var(--ff-body);font-size:.92rem;line-height:1.35;padding:.32rem 0;white-space:normal;transition:color .15s}
.nv-dd__menu a:hover,.nv-dd__menu a:focus-visible{color:var(--c-accent)}
.nv-dd__menu .nv-dd__all{grid-column:1/-1;border-top:1px solid hsl(240,8%,18%);padding-top:.8rem;color:var(--c-muted);font-size:.85rem}
.nv-subs ul{list-style:none;margin:0 0 .4rem;padding:.2rem 0 .4rem .9rem;border-left:2px solid var(--c-accent);display:flex;flex-direction:column;gap:.1rem}
.nv-sub{display:block;color:var(--c-muted);text-decoration:none;font-family:var(--ff-body);font-size:.95rem;padding:.3rem 0}
.nv-sub:hover{color:#fff}
.nv-more{padding:clamp(3.5rem,7vw,6rem) 0}
.nv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;margin-top:1.5rem}
.nv-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:1.1rem;border-radius:6px;overflow:hidden;text-decoration:none;color:#fff;background:#14141f}
.nv-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .4s,transform .6s}
.nv-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(10,10,20,.94))}
.nv-card:hover img{opacity:.8;transform:scale(1.04)}
.nv-card__k,.nv-card__t{position:relative;z-index:1}
.nv-card__k{font-family:var(--ff-display);text-transform:uppercase;font-size:1.1rem;line-height:1.2;color:var(--c-accent);margin-bottom:.35rem}
.nv-card__k::after{content:" →"}
.nv-card__t{color:var(--c-muted);font-size:.92rem;line-height:1.45}
@media (max-width:1024px){.nv-dd__btn,.nv-dd__menu{display:none}}