/* AURA Animation Studio — hoja de estilos única (todas las páginas) */
@font-face{font-family:Urbanist;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/urbanist-800.woff2) format("woff2")}
@font-face{font-family:Urbanist;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/urbanist-900.woff2) format("woff2")}
@font-face{font-family:Urbanist;font-style:italic;font-weight:900;font-display:swap;src:url(../fonts/urbanist-900i.woff2) format("woff2")}

:root{
  --ink:#000; --paper:#fff; --lime:#00ff00; --lime-ink:#00a800;
  --pad:clamp(16px,4vw,40px);
  --gap:clamp(6px,.75vw,10px);
  --r:clamp(10px,1.4vw,20px);
  --r2:clamp(6px,.9vw,12px);
  --hdr:clamp(64px,7.2vw,96px);
  --bar:clamp(56px,5.2vw,72px);
  --gpad:clamp(8px,1.2vw,18px);
  --bar-h:calc(var(--bar) + env(safe-area-inset-bottom,0px));
  --font:Urbanist,"Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{overscroll-behavior-y:none;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink);font:800 16px/1.4 var(--font);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bar :focus-visible,.foot :focus-visible,.lt__btn:focus-visible,.pill:focus-visible{outline-color:var(--lime);box-shadow:0 0 0 2px #000}
/* si el navegador aún permite el rebote al llegar al final, lo que queda al descubierto es negro (continúa la barra/pie) */
html.at-end{background:#000}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:2000;padding:10px 16px;border-radius:999px;background:#000;color:#fff;font-weight:900;transition:top .2s}
.skip:focus{top:12px}

/* Pantallas táctiles (iPhone/Android/tablet): el scroll ocurre dentro de <body>, no en la ventana. Así el final de la página se mide
   con exactitud y se puede cortar el rebote de iOS. En PC/Mac no cambia nada (scroll normal de la página). */
@media (pointer:coarse){
  html{height:100%;overflow:hidden;background:#000}
  body{height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;
    scroll-behavior:smooth;scroll-padding-top:var(--hdr);background:#000}
  .js:not(.is-ready) body{overflow:hidden}
  .site{display:flow-root;min-height:100%;background:var(--paper)}
}

/* ---------- cabecera ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:calc(var(--hdr) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left));
  background:#fff}
.logo{display:block;flex:none}
.logo img{height:calc(var(--hdr) - 12px);width:auto;aspect-ratio:150/84}
.nav{display:flex;gap:clamp(6px,1vw,12px)}
.pill{display:inline-grid;place-items:center;min-height:clamp(34px,3vw,42px);padding:0 clamp(13px,2vw,28px);border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;
  font:900 clamp(.72rem,.66rem + .25vw,.86rem)/1 var(--font);letter-spacing:.03em;text-transform:uppercase;transition:background-color .2s,color .2s}
@media (hover:hover){.pill:hover{background:#fff;color:var(--ink)}}

/* ---------- barra CONTACT fija ---------- */
.bar{position:fixed;inset:auto 0 0;z-index:55;display:grid;place-items:center;height:var(--bar-h);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--ink)}
.bar a{display:block;padding:4px clamp(24px,8vw,80px);transition:transform .2s}
.bar img{height:calc(var(--bar)*.58);width:auto;aspect-ratio:610/130}
@media (hover:hover){.bar a:hover{transform:scale(1.05)}}

/* ---------- contenedores ---------- */
main{display:block}
.page{width:min(1120px,100% - 2*var(--pad));margin-inline:auto;padding-top:calc(var(--hdr) + clamp(14px,2.4vw,32px));padding-bottom:calc(var(--bar-h) + clamp(32px,6vw,72px))}
.head{margin-bottom:clamp(14px,2vw,26px)}
.head h1{font:900 clamp(1.15rem,.95rem + 1vw,1.8rem)/1.08 var(--font);text-transform:uppercase;text-wrap:balance}
.head p{margin-top:.4em;font:800 clamp(.72rem,.66rem + .3vw,.92rem)/1.3 var(--font);text-transform:uppercase}
.blocks{display:grid;gap:clamp(14px,2vw,26px)}
.gallery{display:grid;gap:var(--gap)}

/* ---------- video (fachada: poster + play; el reproductor se carga al pulsar) ---------- */
.video{position:relative;aspect-ratio:var(--ar,16/9);border-radius:var(--r2);background:#000;overflow:hidden;isolation:isolate}
.video>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.video__poster.is-in{opacity:1}
.video__play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer}
.video__play span{display:grid;place-items:center;width:clamp(54px,8vw,88px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.35);transition:transform .2s,background-color .2s}
.video__play svg{width:38%;margin-left:7%}
@media (hover:hover){.video__play:hover span{transform:scale(1.1);background:var(--lime)}}
.video__play:focus-visible{outline-offset:-6px;outline-color:#fff}

/* reel de la home: sin controles visibles; un clic pausa/reanuda */
.video--reel.has-hit>iframe{pointer-events:none}
.reel__hit{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.reel__hit:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* filas de medios (videos/imágenes lado a lado) */
.row{display:flex;gap:var(--gap);align-items:flex-start}
.row>*{flex:var(--w,1) 1 0;min-width:0}
.row--narrow{width:calc(var(--f)*100%);margin-inline:auto}
.shot{width:100%;aspect-ratio:var(--ar,16/9);object-fit:cover;border-radius:var(--r2);background:#eee}
@media (max-width:640px){.row--video{flex-direction:column}.row--video>*{flex:none;width:100%}.row--narrow.row--video{width:calc(var(--f)*100%)}}

/* mosaico (Irsa Bouchard) */
.mosaic{display:grid;grid-template-columns:217fr 295fr 217fr 295fr;gap:var(--gap)}
.mosaic .video--tall{grid-row:span 2;aspect-ratio:auto}
@media (max-width:520px){.mosaic{grid-template-columns:1fr 1fr}.mosaic .video--tall{grid-row:auto;aspect-ratio:217/605;order:1}.mosaic .video--sq{order:2}}

/* ---------- textos ---------- */
.copy{margin-inline:auto;width:100%;text-transform:uppercase;text-wrap:pretty}
.copy p+p{margin-top:.15em}
.copy .sp{height:1em;margin:0}
.copy--desc{max-width:84ch;font-size:clamp(.8rem,.72rem + .38vw,1.02rem);line-height:1.5;text-align:center}
.copy--desc p+p{margin-top:.6em}
.copy--credits{max-width:100ch;font-size:clamp(.66rem,.6rem + .3vw,.86rem);line-height:1.6;text-align:center;letter-spacing:.01em}
.copy--credits p{text-wrap:balance}
.copy--fullcredits{max-width:none;font-weight:900;font-size:clamp(.95rem,.7rem + 1.3vw,1.7rem);line-height:1.12;text-align:left}
.copy--manifesto{max-width:none;font-size:clamp(.78rem,.7rem + .4vw,1rem);line-height:1.42;text-align:left}
.copy--left{text-align:left;max-width:none}
.copy--link{text-align:left;max-width:none;font-weight:900;font-size:clamp(.72rem,.66rem + .3vw,.92rem)}
.copy--link a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em;transition:color .2s}
@media (hover:hover){.copy--link a:hover{color:var(--lime-ink)}}

/* ---------- HOME ---------- */
.hero{display:grid;justify-items:center;padding:calc(var(--hdr) + clamp(8px,2.2vw,28px)) 0 clamp(20px,3.5vw,52px)}
.hero__art{width:min(100% - 2*var(--pad),1600px);height:auto;fill:var(--ink)}
.hero__art text{font-family:var(--font);font-weight:900}
.reel{width:min(100% - 2*var(--gpad),1760px);margin:0 auto clamp(14px,2.4vw,34px)}
.works{container-type:inline-size;width:min(100% - 2*var(--gpad),1760px);margin-inline:auto;scroll-margin-top:calc(var(--hdr) - 6px)}
.grid{--cols:2;--g:clamp(6px,.75vw,10px);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:calc((100cqw - (var(--cols) - 1)*var(--g))/var(--cols)/1.82);gap:var(--g)}
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;transform:translateZ(0)}
.tile--big{grid-column:span 2;grid-row:span 2}
.tile a{position:absolute;inset:0;display:block}
.tile__img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.tile__badge{position:absolute;left:var(--l);top:var(--t);width:var(--bw);height:auto;pointer-events:none}
.tile a:focus-visible{outline-offset:-4px;box-shadow:inset 0 0 0 7px #fff}
@media (hover:hover){.tile a:hover .tile__img{opacity:.5}}
@media (min-width:640px){:root{--gpad:clamp(10px,1.4vw,20px)}.grid{--cols:4;grid-auto-flow:dense}}
@media (min-width:1024px){.grid{--cols:6;grid-auto-flow:row}}

.foot{margin-top:clamp(24px,4vw,56px);padding:clamp(44px,7vw,100px) var(--pad) calc(var(--bar-h) + clamp(32px,5vw,64px));background:var(--ink);color:#fff;text-align:center}
.foot h2{font:900 italic clamp(2.1rem,1.2rem + 3.9vw,4.2rem)/1 var(--font);text-transform:uppercase}
.foot a{display:inline-block;margin-top:clamp(16px,2.4vw,30px);font:900 clamp(.9rem,.8rem + .5vw,1.3rem)/1.2 var(--font);letter-spacing:.03em;text-transform:uppercase;transition:color .2s}
@media (hover:hover){.foot a:hover{color:var(--lime)}}

/* ---------- ABOUT ---------- */
.page--about{width:min(2000px,100% - 2*var(--pad))}
.about{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "art" "talk"}
.about__copy{grid-area:copy}
.about__copy p,.talk{-webkit-text-stroke:.035em currentColor}
.about__copy p{font-weight:900;font-size:clamp(.9rem,.62rem + .6vw,1.45rem);line-height:1.5;text-transform:uppercase;text-wrap:pretty;max-width:50ch}
.about__copy p+p{margin-top:1.15em}
.about__art{grid-area:art;justify-self:center;align-self:center;width:min(100%,560px)}
.about__art img{width:100%;height:auto;aspect-ratio:550/594}
.talk{grid-area:talk;display:grid;justify-items:start;gap:clamp(10px,1.4vw,18px)}
.mouth{position:relative;width:clamp(84px,9vw,150px);aspect-ratio:1}
.mouth img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s}
.mouth img+img{opacity:0}
@media (hover:hover){.mouth:hover img+img{opacity:1}}
.talk h2{font:900 clamp(2.4rem,1.4rem + 3.6vw,5rem)/1 var(--font);text-transform:uppercase;letter-spacing:-.01em}
.talk ul{display:grid;gap:clamp(.9em,1.6vw,1.4em);font:900 clamp(.95rem,.8rem + .6vw,1.5rem)/1.2 var(--font);text-transform:uppercase}
.talk a{transition:color .2s}
@media (hover:hover){.talk a:hover{color:var(--lime-ink)}}
@media (min-width:900px){
  .about{grid-template-columns:minmax(0,3fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"copy art" "talk art";align-items:start}
  .about__art{width:100%;align-self:start}
  .talk{margin-top:clamp(4px,1.5vw,28px)}
}

/* ---------- LINKTREE ---------- */
.lt{width:min(360px,100% - 40px);margin:0 auto;padding:clamp(20px,5vw,44px) 0 calc(48px + env(safe-area-inset-bottom));text-align:center}
.lt__logo{display:block;width:clamp(190px,58vw,290px);margin:0 auto}
.lt__logo img{width:100%;aspect-ratio:1}
.lt h1{margin:clamp(6px,2vw,14px) 0 14px;font:900 1rem/1 var(--font);letter-spacing:.03em;text-transform:uppercase}
.lt__list{display:grid;gap:10px}
.lt__btn{display:grid;place-items:center;min-height:56px;padding:8px 20px;border-radius:999px;background:var(--ink);color:#fff;font:900 .8rem/1.3 var(--font);letter-spacing:.03em;text-transform:uppercase;transition:color .2s,transform .2s}
@media (hover:hover){.lt__btn:hover{color:var(--lime)}}
.lt__social{display:flex;justify-content:center;gap:16px;margin-top:26px}
.lt__social img{width:42px;height:42px}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:grid;place-content:center;gap:18px;padding:var(--pad);text-align:center;background:#000;color:#fff}
.nf h1{font:900 italic clamp(2.4rem,8vw,5rem)/1 var(--font);text-transform:uppercase}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}