/* El muro del laboratorio de xJochix. Lo único que se mueve es el personaje: está hecho de píxeles reales que se arman
   al cargar y se apartan cuando el visitante los toca. Todo lo demás queda quieto: nombre, oficio y cuatro stickers. */
:root{
  --muro:#16141C; --veta:#1D1A25; --tiza:#EDE9F3; --polvo:#9A94A8;
  --neon:#FF3D6E; --jade:#3FAE7A; --pixel:#9FF3FF; --oro:#F5C542;
  --nombre:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --tag:"Permanent Marker","Comic Sans MS",cursive;
  --texto:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background-color:var(--muro);color:var(--tiza);font-family:var(--texto);
  /* concreto: grano fino y una retícula de bloques apenas visible */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--veta) 2px,transparent 2px),linear-gradient(90deg,var(--veta) 2px,transparent 2px);
  background-size:160px 160px,120px 60px,120px 60px;
}
.idioma{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));right:max(24px,env(safe-area-inset-right,0px));display:flex;gap:16px;z-index:2;font-size:15px}
.idioma a{color:var(--polvo);text-decoration:none;padding-bottom:2px}
.idioma a[aria-current]{color:var(--tiza);border-bottom:2px solid var(--neon)}
main{
  min-height:100%;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:32px;
  padding-block:72px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));
}
.texto{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
h1{
  margin:0;font-family:var(--nombre);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75;
  font-size:clamp(56px,9.6vw,148px);line-height:.86;letter-spacing:-.025em;text-wrap:balance;
}
.oficio{margin:0;font-size:clamp(20px,2.2vw,28px);color:var(--polvo)}
.tag{
  font-family:var(--tag);color:var(--neon);font-size:clamp(40px,5.4vw,72px);line-height:1;
  transform:rotate(-7deg);margin:4px 0 8px 10px;text-shadow:0 0 22px rgba(255,61,110,.5);
  clip-path:inset(-20% 100% -20% 0);
}
body.listo .tag{animation:aerosol .8s steps(16) forwards,zumbido 2.4s .9s 1}
@keyframes aerosol{to{clip-path:inset(-20% -5% -20% 0)}}
@keyframes zumbido{0%,100%{opacity:1}8%{opacity:.55}12%{opacity:1}18%{opacity:.7}22%{opacity:1}}
ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 14px;max-width:560px}
.sticker{
  display:inline-block;padding:11px 17px;font-weight:700;font-size:16px;text-decoration:none;color:#15131A;border-radius:4px;
  box-shadow:3px 4px 0 rgba(0,0,0,.55);transition:transform .18s ease,box-shadow .18s ease;
}
li:nth-child(1) .sticker{background:var(--pixel);transform:rotate(-3deg)}
li:nth-child(2) .sticker{background:var(--oro);transform:rotate(2deg)}
li:nth-child(3) .sticker{background:var(--tiza);transform:rotate(-1.5deg)}
li:nth-child(4) .sticker{background:var(--jade);transform:rotate(3deg)}
.sticker:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 8px 0 rgba(0,0,0,.55)}
.sticker:focus-visible,.idioma a:focus-visible{outline:3px solid var(--neon);outline-offset:4px}
.personaje{position:relative;justify-self:center;width:min(560px,100%);aspect-ratio:1;touch-action:pan-y}
canvas{display:block;width:100%;height:100%;cursor:crosshair}
.pista{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:14px;color:var(--polvo);opacity:0;transition:opacity .6s}
body.listo .pista{opacity:1}
@media (max-width:820px){
  main{grid-template-columns:1fr;gap:8px;padding-top:64px}
  .personaje{order:-1;width:min(340px,86vw)}
}
@media (prefers-reduced-motion:reduce){
  .tag{clip-path:none}
  body.listo .tag{animation:none}
  .sticker{transition:none}
}