/* OMV FILMS · omvfilms.com */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-800.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/archivo-900.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrumentserif-400i.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrumentserif-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400.woff2) format('woff2')}
:root{
  --negro:#0a0908; --tinta:#14120f; --hueso:#efe9df; --gris:#a39d93;
  --ambar:#d9a441; --rec:#e0412e;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--negro);color:var(--hueso);scroll-behavior:smooth}
body{font-family:var(--sans);font-size:clamp(20px,1.5vw,24px);line-height:1.5;background:var(--negro);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--ambar);outline-offset:4px}

/* grano de película */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 1s steps(4) infinite}
@keyframes grano{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* barra superior */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--gutter);font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(var(--negro),transparent)}
.top a{text-decoration:none}
.marca{font-family:var(--sans);font-weight:800;letter-spacing:.2em;font-size:18px}
.rec{display:inline-flex;align-items:center;gap:10px}
.rec::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--rec);animation:rec 1.6s infinite}
@keyframes rec{50%{opacity:.15}}

/* héroe */
.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:end;padding:120px var(--gutter) clamp(32px,6vw,80px);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:ken 24s ease-out both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,9,8,.2) 30%,rgba(10,9,8,.95))}
@keyframes ken{from{transform:scale(1.12)}to{transform:scale(1)}}
.kicker{font-family:var(--mono);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar)}
.titan{font-weight:900;font-size:clamp(48px,14vw,240px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.titan em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--ambar)}
.lede{font-family:var(--serif);font-size:clamp(30px,3.2vw,52px);line-height:1.15;max-width:22ch;margin-top:24px}

/* secciones */
section{padding:clamp(80px,12vw,180px) var(--gutter)}
.grande{font-family:var(--serif);font-size:clamp(36px,5vw,84px);line-height:1.08;max-width:18ch}
.grande b{font-family:var(--sans);font-weight:800;font-style:normal}
.cuerpo{max-width:36ch;color:var(--gris);margin-top:28px}
.fila{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,80px);align-items:center}
@media(min-width:900px){.fila{grid-template-columns:1.2fr 1fr}.fila.inv{grid-template-columns:1fr 1.2fr}.fila.inv>:first-child{order:2}}

/* fotograma con datos de cámara */
.cuadro{position:relative;margin:0}
.cuadro img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.cuadro figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-family:var(--mono);font-size:16px;color:var(--gris);letter-spacing:.08em}

/* línea de tiempo 2010 → 2026 */
.anios{display:flex;align-items:baseline;gap:clamp(16px,3vw,48px);font-weight:900;font-size:clamp(56px,11vw,190px);line-height:1;letter-spacing:-.04em}
.anios span:nth-child(2){flex:1;height:2px;background:var(--ambar);align-self:center}
.anios .viejo{color:transparent;-webkit-text-stroke:2px var(--hueso)}

/* tarjeta de proyecto */
.proyecto{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
@media(min-width:900px){.proyecto{grid-template-columns:minmax(280px,.8fr) 1.2fr}}
.proyecto .poster{aspect-ratio:2700/3999;object-fit:cover;width:100%;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.boton{display:inline-flex;align-items:center;gap:14px;margin-top:40px;padding:22px 34px;border:2px solid var(--hueso);
  font-family:var(--mono);font-size:18px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:.3s}
.boton:hover{background:var(--hueso);color:var(--negro)}

/* tira de fotogramas */
.tira{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 24px}
.tira img{flex:0 0 min(78vw,720px);aspect-ratio:16/9;object-fit:cover;scroll-snap-align:start}

/* ficha */
.ficha{display:grid;grid-template-columns:1fr;border-top:1px solid #2b2722;max-width:1100px}
.ficha div{display:grid;grid-template-columns:1fr;gap:4px;padding:22px 0;border-bottom:1px solid #2b2722}
@media(min-width:700px){.ficha div{grid-template-columns:260px 1fr}}
.ficha dt{font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.ficha dd{font-size:clamp(22px,1.8vw,28px)}


footer{padding:64px var(--gutter);border-top:1px solid #2b2722;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:16px;color:var(--gris);letter-spacing:.08em}

/* aparición al hacer scroll */
.r{opacity:0;transform:translateY(40px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.r.v{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.r{opacity:1;transform:none}}