/* ===== Capa de rendimiento móvil (tablets/teléfonos y dispositivos táctiles) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,[role=button],input,select,textarea,label{touch-action:manipulation}
img,video{max-width:100%}
body{overflow-x:clip}

@media (max-width:900px),(pointer:coarse){
  /* Sin filtros costosos en tiempo real */
  .art__layers{filter:none!important}
  .nav,.nav.is-scrolled,.lab__scrim{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .nav.is-scrolled{background:rgba(10,10,10,.94)}
  .lab__scrim{background:rgba(10,6,20,.82)}
  .bust{animation:none!important;filter:none!important}

  /* Sin grano animado ni mezclas de capa (mix-blend) */
  .grain,.sweep{display:none!important}
  .paper::after,.note::before,.sec::after,.ticker--a::after{mix-blend-mode:normal!important;opacity:.08!important;background-image:none!important}

  /* will-change solo donde hay movimiento real (evita memoria GPU de sobra) */
  .a,.card__img img{will-change:auto!important}
  .layer{will-change:auto}

  /* Animaciones infinitas decorativas apagadas: no se trabe el scroll */
  .art,.paper,.note,.cursor,.glitch-bust,.card--fluid .blob,
  .a-circle,.a-purple,.a-lime,.a-paperl,.a-note,.a-brush,
  .btn-explore,.headline__obvious::before{animation-iteration-count:1!important}
  .art{animation:none!important}
  .a-circle{animation:circlePop 1.2s .45s both!important}
  .a-purple{animation:shardIn 1.1s .15s both!important}
  .a-lime{animation:limeIn .8s 1s both!important}
  .a-paperl{animation:slideL 1s .5s both!important}
  .a-note{animation:noteDrop 1.2s 1.5s both!important}
  .a-brush{animation:wipeX 1s .85s both!important}
  .glitch-bust,.card--fluid .blob,.cursor{animation:none!important}
  .paper,.note{animation:none!important}
  .btn-explore{animation:none!important}
  .btn-explore::before,.btn-explore::after{transition:none}
  .nj-bg i,.paper-bg i{animation:none!important}

  .card__img svg *,.card__img img,.daily__flask,.daily__bub,.editor__ht,.editor__stroke,.nj-flask,.stage__machine{animation:none!important}

  /* Sombras/filtros de sombra más baratos */
  .btn-explore{filter:none!important}

  /* Secciones fuera de pantalla no se pintan hasta que se acercan */
  .sec,.sec--wk,.sec--exp,.sec--notes,.sec--nj,.footer,.sf{content-visibility:auto;contain-intrinsic-size:auto 100vh}
  .hero{contain:layout paint}

  /* Marquesinas: más lentas y sin repintados extra */
  .ticker__track,.marquee__track{will-change:transform}

  /* Objetivos táctiles cómodos */
  .nav__links a,.wk-tabs button,.langsw button{min-height:40px}
  video{transform:translateZ(0)}
}

/* Dispositivos táctiles: sin hovers pegados */
@media (hover:none){
  .btn-explore:hover,.nav__logo:hover .logo-mark{transform:none}
}

/* Pantallas pequeñas: tipografía y espaciado seguros */
@media (max-width:520px){
  .hero{min-height:100svh}
  h2,h3{overflow-wrap:anywhere}
  .headline,.headline *{overflow-wrap:normal!important;word-break:keep-all}
  .sec{padding-left:max(4vw,14px);padding-right:max(4vw,14px)}
  .lab__win{max-width:100vw}
}

/* Respeta zonas seguras (notch) */
.nav,.nav.is-scrolled{padding-left:max(clamp(18px,2.8vw,48px),env(safe-area-inset-left));padding-right:max(clamp(18px,2.8vw,48px),env(safe-area-inset-right))}

/* ===== Menú móvil (hamburguesa) ===== */
.nav__burger{display:none}
@media (max-width:900px){
  .nav__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;margin-left:4px;margin-right:-10px;background:none;border:0;cursor:pointer;flex:none;position:relative;z-index:9100}
  .nav__burger i{display:block;height:2.5px;width:100%;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s,background .2s}
  .nav__burger.is-open i{background:#d9ff00}
  .nav__burger.is-open i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav__burger.is-open i:nth-child(2){opacity:0}
  .nav__burger.is-open i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .nav .nav__cta{display:none!important}
  .nav .nav__search{display:none!important}
  .nav.is-scrolled .nav__links{display:none}
  .nav:has(.nav__burger.is-open){z-index:9050!important;background:transparent!important}
  .mnav{position:fixed;inset:0;z-index:9000;background:#0a0a0a;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:88px max(8vw,24px) max(32px,env(safe-area-inset-bottom));opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .25s;overflow-y:auto;overscroll-behavior:contain}
  .mnav[hidden]{display:none}
  .mnav.is-open{opacity:1;transform:none}
  .mnav__links{display:flex;flex-direction:column;gap:6px}
  .mnav__links a{font-family:'Anton',sans-serif;font-size:clamp(34px,11vw,56px);line-height:1.1;text-transform:uppercase;color:#fff;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);min-height:48px}
  .mnav__links a.is-on{color:#000;background:#d9ff00;padding:8px 14px;border-bottom-color:transparent;align-self:flex-start}
  .mnav__links a:active{color:#d9ff00}
  .mnav__cta{align-self:flex-start;font:700 16px 'Archivo Narrow',sans-serif;color:#fff;border:2px solid #fff;border-radius:40px;padding:14px 30px}
  html.mnav-lock,html.mnav-lock body{overflow:hidden}
}

/* ===== Hero móvil: pantalla completa, titular grande y busto protagonista ===== */
@media (max-width:900px){
  html body .hero{height:100svh;min-height:600px;max-height:980px}
  html body .hero__bg{min-height:100%}
  html body .art__base,html body .a{object-position:60% 40%}
  html body .vignette{background:radial-gradient(130% 90% at 50% 55%,transparent 45%,rgba(0,0,0,.6)),linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%)}

  html body .headline{left:5.5vw;top:25vw;width:max-content;max-width:none;font-size:20vw;line-height:.86;text-shadow:0 .03em 0 rgba(0,0,0,.35)}
  html[lang="es"] body .headline{font-size:20vw}
  html body .headline__the{font-size:.46em}
  html body .headline__row{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:flex-end;gap:2.4vw;margin-top:.5vw}
  html body .headline__obvious{margin-left:0}

  html body .bust{left:0;right:auto;top:auto;bottom:34vw;width:min(104vw,calc((100svh - 58vw)*.82));height:auto;margin-left:calc((100vw - min(104vw,calc((100svh - 58vw)*.82)))/2)}
  html body .bust img{width:100%;height:auto}

  html body .btn-explore{left:50%;right:auto;bottom:32vw;top:auto;translate:-50% 0;font-size:7.6vw;padding:4.4vw 11vw;white-space:nowrap;z-index:60;pointer-events:auto}
  html body .hero__content{z-index:60}
  html body .ticker--a{bottom:9vw}
  html body .ticker--b{bottom:1.5vw}
}
@media (max-width:900px) and (min-width:560px){
  html body .headline{font-size:15vw;top:16vw}
  html body .bust{bottom:26vw;width:min(70vw,calc((100svh - 40vw)*.82))}
  html body .btn-explore{font-size:4.8vw;bottom:26vw}
}
@media (max-width:350px){html body .headline,html[lang="es"] body .headline{font-size:18vw}}