@font-face{font-family:"Geist";src:url("fonts/Geist-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Regular.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  --negro:#141414;--grafito:#262524;--linea:#3A3938;--gris:#8F8E8B;--hueso:#D4D3D0;--rojo:#FF2B1C;
  --m:clamp(16px,4.5vw,72px);--gap:16px;
  --sans:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;background:var(--negro);color:var(--hueso);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:clamp(16px,1.25vw,19px);line-height:1.5;background:var(--negro);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.contacto a:focus-visible{outline-color:var(--negro)}
::selection{background:var(--rojo);color:var(--negro)}
.mono{font-family:var(--mono);font-size:14px;line-height:1.5;letter-spacing:0}
.gris{color:var(--gris)}
.wrap{padding-left:var(--m);padding-right:var(--m)}

.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;height:72px;
  background:var(--negro);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--linea)}
.top .marca img{height:18px;width:auto}
.top nav{display:flex;gap:clamp(16px,2.5vw,40px);align-items:center}
.top nav a{position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.top nav a:hover::after,.top nav a[aria-current]::after{transform:scaleX(1)}
.top .lang{color:var(--gris)}
.top .lang:hover{color:var(--hueso)}

.hero{padding-top:clamp(40px,8vw,120px);padding-bottom:0}
.hero .logo{width:100%;max-width:1456px}
.hero .logo svg,.hero .logo img{width:100%;height:auto}
.hero .datos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(24px,4vw,64px);padding-top:16px;border-top:1px solid var(--linea)}
.hero .datos span:nth-child(2){text-align:center}.hero .datos span:nth-child(3){text-align:right}
.dot{display:inline-block;width:8px;height:8px;background:var(--rojo);margin-right:8px;vertical-align:1px;animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{50%{opacity:.25}}






/* bloques: etiqueta a la izquierda, contenido a la derecha */
.bloque{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(40px,6vw,64px)}
.etq{color:var(--gris)}
.lado .foto{margin-top:40px;width:min(100%,400px);aspect-ratio:4/5;object-fit:cover}
.bloque .lead{font-size:clamp(19px,1.9vw,28px);line-height:1.3;letter-spacing:-0.01em;max-width:32ch}
.serv{list-style:none;margin-top:40px}
.serv li{padding:16px 0;border-top:1px solid var(--linea)}
.serv li:last-child{border-bottom:1px solid var(--linea)}

/* trabajos */
.obras{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.fila{display:grid;gap:var(--gap)}
.fila.dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.card{display:block}
.card .media{position:relative;aspect-ratio:1212/948;overflow:hidden;background:var(--bg)}
.card.ancha .media{aspect-ratio:2424/1180}
.card .media img,.card .media video{position:absolute;inset:0;width:100%;height:100%}
.card .media img{object-fit:cover;transition:opacity .35s}
.card .media video{object-fit:contain;opacity:0;transition:opacity .35s}
.card.playing .media{background:var(--bgv)}
.card.playing .media video{opacity:1}
.card.playing .media img{opacity:0}
.card .info{margin-top:16px}
.card h3{font-weight:500;font-size:19px;line-height:1.3;letter-spacing:-0.01em}
.card .rol{color:var(--gris);font-size:14px;line-height:1.45}
.card:hover h3{color:var(--rojo)}

/* clientes: logos en movimiento */
.clientes{padding-top:clamp(64px,10vw,120px);border-bottom:1px solid var(--linea);padding-bottom:clamp(40px,5vw,64px)}
.clientes .etq{padding-bottom:clamp(40px,5vw,64px)}
.marquee{overflow:hidden;border-top:1px solid var(--linea);padding:clamp(24px,3vw,40px) 0}
.marquee ul{list-style:none;display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;animation:desliza 90s linear infinite}
.marquee.inverso ul{animation-direction:reverse;animation-duration:70s}
.marquee:hover ul{animation-play-state:paused}
.marquee li{flex:none}
.marquee img{height:calc(clamp(24px,2.6vw,40px) * var(--s,1));width:auto;max-width:none;opacity:.85}
.marquee.quieto ul{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--m)}
@keyframes desliza{to{transform:translateX(calc(-50% - clamp(20px,2.5vw,36px)))}}
.clientes .nota{margin-top:24px}

.contacto{background:var(--rojo);color:var(--negro);padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(40px,5vw,64px)}
.contacto .gran{font-weight:500;font-size:clamp(56px,11vw,168px);line-height:.88;letter-spacing:-0.05em}
.contacto a.mail{display:inline-block;margin-top:clamp(24px,3vw,40px);font-weight:500;font-size:clamp(24px,3.6vw,56px);letter-spacing:-0.035em;line-height:1;border-bottom:2px solid var(--negro);padding-bottom:8px;word-break:break-all}
.contacto a.mail:hover{border-bottom-color:transparent}
.contacto .pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:clamp(64px,8vw,120px);padding-top:16px;border-top:1px solid var(--negro)}
.contacto .pie nav{display:flex;gap:24px}
.contacto .pie a:hover{text-decoration:underline}
footer.fin{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;padding-bottom:24px;color:var(--gris)}
footer.fin img{height:28px;width:auto}

.caso-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,6vw,120px);align-items:start}
.miga{margin-bottom:clamp(24px,4vw,64px);color:var(--gris)}
.miga a:hover{color:var(--hueso)}
.caso-top h1{font-weight:500;font-size:clamp(64px,10.5vw,168px);line-height:.88;letter-spacing:-0.05em}
.ficha{margin-top:clamp(40px,4vw,64px);max-width:560px}
.ficha div{display:grid;grid-template-columns:120px minmax(0,1fr);padding:8px 0;border-top:1px solid var(--linea)}
.ficha div:last-child{border-bottom:1px solid var(--linea)}
.ficha span:first-child{color:var(--gris)}
.caso-top .desc{margin-top:clamp(24px,3vw,40px);max-width:40ch;font-size:clamp(18px,1.6vw,24px);line-height:1.4;color:var(--hueso)}
.caso-top .video{position:sticky;top:96px;aspect-ratio:4/5;background:var(--grafito);overflow:hidden}
.caso-top .video video,.caso-top .video img{width:100%;height:100%;object-fit:cover}
.modulos{display:flex;flex-direction:column;gap:var(--gap);max-width:calc(1400px + 2*var(--m));margin:0 auto}
.modulos img{width:100%;height:auto;background:var(--grafito)}
.volver{display:flex;justify-content:space-between;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,120px)}
.volver a{font-weight:500;font-size:clamp(24px,2.4vw,40px);letter-spacing:-0.03em}
.volver a:hover{color:var(--rojo)}

.rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.pre{opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.dot{animation:none}html{scroll-behavior:auto}}

@media (max-width:820px){
  .top nav .opt{display:none}
  .hero .datos{grid-template-columns:1fr}
  .hero .datos span{text-align:left!important}
  .bloque{grid-template-columns:1fr;gap:24px}
  .fila.dos{grid-template-columns:1fr;row-gap:40px}
  .caso-top{grid-template-columns:1fr}
  .caso-top .video{position:relative;top:0}
}