/* Santiago Visuals — sistema "Corte duro · Letra que llena · Negro + chispa" */

@font-face{font-family:"Big Shoulders Display";src:url("/assets/fonts/big-shoulders-display-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/assets/fonts/inter-tight-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#0d0d0d;
  --ink:#f3efe6;
  --ink-2:rgba(243,239,230,.62);
  --accent:#ff5a1f;
  --line:#222;
  --ko-bg:#000;
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-body:"Inter Tight",system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;
  --gutter:clamp(16px,4vw,48px);
  --bar-h:56px;
  --fs-sm:14px;
  --fs-body:clamp(16px,.25vw + 15px,18px);
  --fs-lead:clamp(18px,.8vw + 14px,22px);
  --fs-h2:clamp(64px,11vw,176px);
  --fs-h3:clamp(40px,5.5vw,88px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--bar-h)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:12px 16px;background:var(--accent);color:var(--bg);font-weight:600;text-decoration:none}
.skip:focus{top:8px}
.display{margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.01em}
.muted{color:var(--ink-2)}

/* Barra superior */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:var(--bar-h);padding:0 var(--gutter);background:var(--bg);border-bottom:1px solid var(--line)}
.bar-brand{display:inline-flex;align-items:center;padding:11px 0;text-decoration:none}
.bar-logo{height:28px;width:auto;display:block}
@media (max-width:420px){.bar-logo{height:24px}}
.bar-links{display:flex;gap:var(--s4);margin:0;padding:0;list-style:none}
.bar-links a{display:inline-block;padding:14px 0;font-size:15px;color:var(--ink-2);text-decoration:none;transition:color .2s}
.bar-links a:hover,.bar-links a[aria-current]{color:var(--ink)}
.bar-links a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:420px){.bar-links .hide-xs{display:none}.bar-links{gap:var(--s3)}}

/* Botones y links */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:6px;font:600 16px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent)}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.link:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* Secciones */
.sec{padding:var(--s8) var(--gutter);border-top:1px solid var(--line)}
.sec-title{font-size:var(--fs-h2);margin-bottom:var(--s6)}

/* Footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);padding:var(--s5) var(--gutter);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.foot-logo{display:inline-flex;align-items:center}
.foot-logo img{height:22px;width:auto;display:block}
.foot p{margin:0 auto 0 0}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s4)}
.foot a{display:inline-block;padding:12px 0;text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--accent)}
.foot a[aria-current="page"]{color:var(--ink)}

/* Reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.js .rv.in{opacity:1;transform:none}

/* Lightbox */
.lb{width:100%;max-width:min(1100px,92vw);padding:0;border:0;background:transparent;color:var(--ink)}
.lb::backdrop{background:rgba(0,0,0,.88)}
.lb-close{display:block;min-height:44px;margin:0 0 var(--s2) auto;padding:0 16px;background:none;border:1px solid var(--line);color:var(--ink);font:600 15px var(--font-body);cursor:pointer;transition:border-color .2s}
.lb-close:hover{border-color:var(--accent)}
.lb-frame{aspect-ratio:16/9;background:#000}
.lb-frame iframe{display:block;width:100%;height:100%;border:0}
.lb.is-vertical{max-width:min(92vw,calc(82svh*9/16))}
.lb.is-vertical .lb-frame{aspect-ratio:9/16}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}

/* Hero: reel a pantalla completa */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:calc(100svh - var(--bar-h));overflow:hidden;background:#000}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{opacity:0;transition:opacity .6s var(--ease)}
.hero.is-playing .hero-video{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.80) 45%,rgba(13,13,13,.45) 80%,rgba(13,13,13,.15) 100%),linear-gradient(180deg,rgba(13,13,13,.5) 0%,rgba(13,13,13,0) 20%)}
.hero-inner{width:100%;max-width:min(64%,1000px);padding:var(--s7) var(--gutter)}
.hero-kicker{margin:0 0 var(--s3);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hero-title{font-size:clamp(44px,6.4vw,104px);line-height:.9;margin-bottom:var(--s4);text-wrap:balance}
.hero-sub{max-width:46ch;margin:0 0 var(--s5);font-size:var(--fs-lead);color:rgba(243,239,230,.84)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero .btn-ghost{border-color:rgba(243,239,230,.45);background:rgba(13,13,13,.35)}
.hero .btn-ghost:hover{border-color:var(--accent)}
.hero-tools{position:absolute;right:var(--gutter);bottom:var(--s7);display:flex;align-items:center;gap:var(--s3)}
.hero-reel-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-weight:600;text-decoration:none}
.hero-reel-btn .play{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:14px;transition:transform .2s var(--ease)}
.hero-reel-btn:hover .play{transform:scale(1.08)}
.hero-pause{min-height:44px;padding:0 14px;border:1px solid rgba(243,239,230,.35);border-radius:6px;background:rgba(13,13,13,.5);color:var(--ink);font:600 14px var(--font-body);cursor:pointer}
.hero-pause:hover{border-color:var(--accent)}
@media (max-width:860px){
  .hero-inner{max-width:none;padding:var(--s6) var(--gutter) calc(var(--s8) + var(--s4))}
  .hero-tools{left:var(--gutter);right:auto;bottom:var(--s4)}
}
/* Clientes (logos) */
.clients{padding:var(--s6) var(--gutter);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clients-title{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin:0 0 var(--s4)}
.clients-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;align-items:center;gap:var(--s5) var(--s6);margin:0;padding:0;list-style:none}
.clients-list img{display:block;max-height:40px;max-width:100%;width:auto;filter:brightness(0) invert(1);opacity:.72;transition:opacity .2s var(--ease)}
.clients-list img.is-square{max-height:64px}
.clients-list img.is-color{filter:none;opacity:1}
.clients-list li:hover img,.clients-list li:focus-within img{opacity:1}
@media (max-width:860px){
  .clients-list{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:var(--s4)}
  .clients-list li:last-child:nth-child(3n+1){grid-column:2}
}

/* Trabajo */
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:center;padding:var(--s7) 0;border-top:1px solid var(--line)}
.case-flip .case-media{order:2}
.case-media{display:block;overflow:hidden;aspect-ratio:4/3;background:#111}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.case-media:hover img{transform:scale(1.03)}
.case-kicker{margin:0 0 var(--s3);font-size:var(--fs-sm);color:var(--ink-2)}
.case-title{font-size:var(--fs-h3);margin-bottom:var(--s4)}
.case-line{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0 0 var(--s4)}
.case-line dt{padding-top:.2em;font-size:var(--fs-sm);font-weight:600;color:var(--accent)}
.case-line dd{margin:0;max-width:46ch}
.case-copy .link,.who-text .link{display:inline-block;padding:12px 0}
.vfx-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);aspect-ratio:auto;background:none}
.vfx-grid a{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;text-decoration:none}
.vfx-grid a:first-child{grid-column:1/-1}
.vfx-grid a:focus-visible{outline-offset:-3px}
.vfx-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vfx-grid a:hover img{transform:scale(1.04)}
.vfx-grid span{position:absolute;left:0;bottom:0;padding:8px 12px;background:var(--bg);font-size:var(--fs-sm);font-weight:600}
.vfx-grid span::before{content:"▶ ";color:var(--accent)}
.more{padding-top:var(--s7);border-top:1px solid var(--line)}
.more-title{margin:0 0 var(--s4);font-size:var(--fs-lead);font-weight:600}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin:0;padding:0;list-style:none}
.more-card{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none}
.more-img{display:block;overflow:hidden;aspect-ratio:16/10;margin-bottom:var(--s3);background:#111}
.more-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.more-card:hover .more-img img{transform:scale(1.03)}
.more-card strong{font-size:clamp(32px,3.6vw,56px);line-height:.9}
.more-desc{max-width:44ch;color:var(--ink-2)}
.more-cta{align-self:flex-start;padding:12px 0;text-decoration:underline;text-decoration-color:var(--ink-2);text-underline-offset:4px;transition:color .2s}
.more-card:hover .more-cta{color:var(--accent)}
@media (max-width:860px){.more-grid{grid-template-columns:1fr}}
.more-grid:has(> li:only-child){grid-template-columns:1fr}
.more-grid > li:only-child .more-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--s6);align-items:start}
.more-grid > li:only-child .more-img{grid-row:1 / -1;margin:0}
.more-grid > li:only-child .more-card > :not(.more-img){grid-column:2}
.more-grid > li:only-child strong{margin-top:var(--s2)}
@media (max-width:860px){.more-grid > li:only-child .more-card{display:flex}.more-grid > li:only-child .more-card > :not(.more-img){grid-column:auto}}
@media (max-width:860px){
  .case{grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) 0}
  .case-flip .case-media{order:0}
}

/* Servicios */
.do{margin:0;padding:0;list-style:none}
.do li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:baseline;padding:var(--s5) 0;border-top:1px solid var(--line)}
.do h3{font-size:var(--fs-h3);line-height:.92;transition:color .2s}
.do li:hover h3{color:var(--accent)}
.do p{margin:0;max-width:40ch;font-size:var(--fs-lead);color:var(--ink-2)}

/* Quién */
.who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:end}
.who img{width:100%;aspect-ratio:4/5;object-fit:cover;border-left:4px solid var(--accent)}
.who-text p{max-width:44ch;font-size:var(--fs-lead)}

/* Hablemos: bloque naranja */
.talk{padding:var(--s8) var(--gutter);background:var(--accent);color:#0d0d0d}
.talk-title{max-width:14ch;margin-bottom:var(--s5);font-size:clamp(56px,9vw,144px);line-height:.98;text-wrap:balance}
.talk-sub{max-width:44ch;margin:0;font-size:var(--fs-lead);color:#0d0d0d}
.talk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin:var(--s5) 0}
.talk-actions .link{display:inline-block;padding:12px 0}
.talk .link{color:#0d0d0d;text-decoration-color:rgba(13,13,13,.45)}
.talk .link:hover{color:#0d0d0d;text-decoration-color:#0d0d0d}
.talk :focus-visible{outline-color:#0d0d0d}
.talk-meta{margin:0;font-size:var(--fs-sm);color:rgba(13,13,13,.78)}
.btn-dark{background:#0d0d0d;color:var(--accent)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-dark:active{transform:translateY(0)}

@media (max-width:860px){
  .do li{grid-template-columns:1fr;gap:var(--s2)}
  .who{grid-template-columns:1fr}
  .who img{border-left:0;border-top:4px solid var(--accent)}
}

/* Páginas de caso */
.chero{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);min-height:calc(100svh - var(--bar-h));border-bottom:1px solid var(--line)}
.chero-copy{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s4);padding:var(--s6) var(--gutter);background:var(--ko-bg);border-right:4px solid var(--accent)}
.crumbs{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.crumbs a{display:inline-block;padding:12px 0;text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--accent)}
.chero-title{font-size:clamp(56px,8.5vw,152px);line-height:.92}
.chero-lead{margin:0;max-width:44ch;font-size:var(--fs-lead);color:var(--ink-2)}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s5);margin:0;font-size:var(--fs-sm)}
.meta dt{color:var(--ink-2)}
.meta dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.meta a{text-decoration-color:var(--accent);text-underline-offset:3px}
.chero-media{position:relative;overflow:hidden;background:#111}
.chero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s3) var(--s6);padding:var(--s7) var(--gutter);border-top:1px solid var(--line)}
.story h2{margin:0;padding-top:.4em;font:600 var(--fs-sm)/1.4 var(--font-body);color:var(--accent)}
.story p{max-width:52ch;font-size:var(--fs-lead)}
.story p:last-child{margin-bottom:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s5);margin:0;padding:var(--s7) var(--gutter);list-style:none;border-top:1px solid var(--line)}
.stats b{display:block;font:900 clamp(56px,7vw,112px)/.85 var(--font-display);text-transform:uppercase}
.stats span{font-size:var(--fs-sm);color:var(--ink-2)}
.gal{columns:3 280px;column-gap:var(--s2);padding:0 var(--gutter) var(--s7)}
.gal img{width:100%;margin:0 0 var(--s2);break-inside:avoid}
.next{display:block;padding:var(--s7) var(--gutter);border-top:1px solid var(--line);text-decoration:none}
.next small{display:block;margin-bottom:var(--s3);font-size:var(--fs-sm);color:var(--ink-2)}
.next .display{font-size:var(--fs-h3);transition:color .2s}
.next:hover .display{color:var(--accent)}
.cta-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s6) var(--gutter);background:var(--ko-bg);border-top:4px solid var(--accent)}
.cta-strip p{margin:0;font-size:var(--fs-lead)}
@media (max-width:860px){
  .chero{grid-template-columns:1fr;min-height:0}
  .chero-copy{border-right:0;border-bottom:4px solid var(--accent)}
  .chero-media{aspect-ratio:4/5}
  .story{grid-template-columns:1fr}
}
.story strong{font-weight:600;color:var(--ink)}

/* 404 */
.nf{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--bar-h));padding:var(--s8) var(--gutter)}
.nf-title{margin-bottom:var(--s4);font-size:clamp(56px,10vw,160px);line-height:.88}
.nf-sub{max-width:44ch;font-size:var(--fs-lead);color:var(--ink-2)}