/* ============================================================
   [DCS] Creative Studio — hoja base
   Tokens → base → capas (grano/grid/viñeta) → secciones
   Reglas: cero radios · animar solo transform/opacity · nada <12px funcional
   ============================================================ */
:root{
  /* los tokens de color, tipografia, ritmo y curvas viven en tokens.css — NO se redefinen aqui */
  /* color */
  /* tipografía */
  --f-mono:'NHG Text',Helvetica,Arial,sans-serif;   /* etiquetas: Neue Haas también (Juan: solo NHG + Stretch) */
  /* pasos */
  --fs-label:12px;
  --fs-body:15px;
  --fs-lead:clamp(22px,3vw,40px);
  --fs-wordmark:clamp(76px,15vw,230px);
  --fs-h2:clamp(46px,9.6vw,164px);
  --fs-stretch:clamp(22px,5.5vw,92px);
  --fs-item:clamp(20px,3.2vw,40px);
  --fs-foot:clamp(84px,16.5vw,280px);
  /* grid blueprint con crucetas (referencia de Juan): dos capas SVG — celda 130px con cruz tenue · celda 390px con cruz viva */
  --grid-celda:130px;
  --grid-linea:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><path d='M65 0V130M0 65H130' stroke='rgb(237 237 232 / .045)' stroke-width='1' stroke-dasharray='3 5'/><path d='M65 59V71M59 65H71' stroke='rgb(237 237 232 / .18)' stroke-width='1'/></svg>");
  --grid-cruz:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='390' height='390'><path d='M65 55V75M55 65H75' stroke='rgb(237 237 232 / .42)' stroke-width='1.2'/></svg>");
  --grano-letra:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .72 0 0 0 0 .72 0 0 0 0 .72 0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  /* textura de página (referencia de Juan: tela/papel con nubes suaves y motas) — procedural, 0 KB, neutra */
  /* ritmo */
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--negro);scroll-behavior:auto}
body{margin:0;background:var(--negro);color:var(--tinta);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rojo)}
b,strong{font-weight:700}
::selection{background:var(--rojo);color:var(--tinta)}
::-webkit-scrollbar{width:10px;background:var(--negro)}
::-webkit-scrollbar-thumb{background:#242422;border:3px solid var(--negro)}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer}

/* ---------- utilidades tipográficas ---------- */
.mono{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3)}
.mono--rojo{color:var(--rojo)}
.mono--claro{color:rgba(237,237,232,.75)}
.display{font-family:var(--f-display);font-weight:900;letter-spacing:-.025em;line-height:.86}
.stretch{font-family:var(--f-stretch);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.92}
.rojo{color:var(--rojo)}

/* ---------- lienzo: luz, grid, grano, viñeta ---------- */
.lienzo{position:relative;overflow:hidden;background-color:var(--negro);
  background-image:
    radial-gradient(120vmax 70vmax at 24% -14%,#232323 0%,#161616 26%,transparent 60%),
    radial-gradient(80vmax 60vmax at 104% 106%,#1a1a1a 0%,transparent 55%),
    linear-gradient(112deg,transparent 38%,rgba(255,255,255,.028) 50%,transparent 62%);
  background-attachment:scroll}
.capa{position:fixed;inset:0;pointer-events:none}
.capa--grid{z-index:0;background-image:linear-gradient(90deg,rgba(237,237,232,.05) 1px,transparent 1px);background-size:25% 100%}
.capa--luz{z-index:1;overflow:hidden}
.capa--luz::before{content:"";position:absolute;left:-46vmax;top:-46vmax;width:92vmax;height:92vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 62%);transform:translate3d(var(--mx,50vw),var(--my,40vh),0);will-change:transform}
.capa--cabecera{position:fixed;top:0;left:0;right:0;height:clamp(110px,16vh,170px);z-index:49;pointer-events:none;background:linear-gradient(180deg,var(--negro) 0%,rgba(11,11,11,.82) 38%,transparent 100%)}
/* GRANO DE PELÍCULA en toda la página (Juan: «que se note bien»): chispas claras sobre negro (gamma alta + screen), tosco como grano real */
.capa--pelicula{z-index:90;inset:-80px;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.52' numOctaves='2' seed='7' stitchTiles='stitch'/><feComponentTransfer><feFuncR type='linear' slope='0' intercept='0.93'/><feFuncG type='linear' slope='0' intercept='0.93'/><feFuncB type='linear' slope='0' intercept='0.93'/><feFuncA type='table' tableValues='0 0 0 0 0 0 0 0.55 1'/></feComponentTransfer></filter><rect width='360' height='360' filter='url(%23g)'/></svg>");
  background-size:340px 340px;animation:pelicula .46s steps(2) infinite;will-change:transform}
@keyframes pelicula{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,26px)}}
.capa--vineta{z-index:65;background:radial-gradient(ellipse 120% 90% at 50% 42%,transparent 55%,rgba(0,0,0,.38) 100%)}

/* ---------- cabecera fija ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:80;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;padding:20px var(--gut)}
.top__marca{grid-column:2;text-align:center}
.top__marca{font-family:var(--f-display);font-weight:900;font-size:20px;letter-spacing:-.02em}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(84px,11vh,124px) 0 clamp(26px,3.5vh,44px);}
.hero__lateral{position:absolute;top:50%;right:clamp(14px,2.5vw,34px);transform:translateY(-50%);writing-mode:vertical-rl;letter-spacing:.34em}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* el vídeo va A COLOR (Juan); solo un velo oscuro para que el cromo mande — sin filter (parpadeaba) */
.hero__velo{position:absolute;inset:0;z-index:0;background:rgba(11,11,11,.45);pointer-events:none}
/* grano FUERTE solo en la pasada 2 (referencia Lingua Urbana: película sucia) */
.hero__grano{position:absolute;inset:-40px;z-index:6;pointer-events:none;opacity:0;transition:opacity .2s;   /* rápido: el cambio va tapado por el fogonazo */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feComponentTransfer><feFuncR type='linear' slope='0' intercept='0.95'/><feFuncG type='linear' slope='0' intercept='0.95'/><feFuncB type='linear' slope='0' intercept='0.95'/><feFuncA type='table' tableValues='0 0 0 0 0 0.4 1'/></feComponentTransfer></filter><rect width='280' height='280' filter='url(%23n)'/></svg>");
  animation:granoHero .5s steps(3) infinite;animation-play-state:paused;will-change:transform}   /* con opacity 0 la animación NO corre: no gasta */
.hero--poster .hero__grano{opacity:.4;animation-play-state:running}
@keyframes granoHero{0%,100%{transform:translate(0,0)}33%{transform:translate(-1.5%,1%)}66%{transform:translate(1%,-1.5%)}}
/* GRANO REAL escaneado (Juan, 30-ago: «HARBOUR NOISE, métele esta textura»): el vídeo es una FUENTE OCULTA —
   el shader del logo lo muestrea. Como capa mix-blend-mode encima del canvas WebGL clavaba la página a 30 fps. */
.hero__textura{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
/* FOGONAZO de cambio de pasada (Juan): blanco → negativo en B/N que decae. Tres capas one-shot (opacity por GSAP), encima de todo el hero.
   gris = saturación 0 (deja la luminosidad, quita el color) · neg = blanco en diferencia (invierte) · blanco = plano, tapa el cambio */
.hero__flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0}
.hero__flash--gris{background:#000;mix-blend-mode:saturation}
.hero__flash--neg{background:#fff;mix-blend-mode:difference}
.hero__flash--blanco{background:#fff}
/* ---------- PASADA 3 · «LOKI» (Juan, 31-ago): cada carácter del logo es una variante tipográfica que cambia por su cuenta ---------- */
.loki{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:0;font-size:var(--fs-wordmark);line-height:1;letter-spacing:-.02em;color:var(--tinta);opacity:0;pointer-events:none;transition:opacity .15s}
.hero--loki .loki{opacity:1}
/* en la pasada Loki el hero se vuelve PELÍCULA (Juan: «grano a tope como el de Loki y textura a tope»): fondo casi negro y en B/N,
   el grano escaneado HARBOUR en overlay por encima de TODO (letras incluidas) y chispas de emulsión fuertes */
.hero--loki .hero__grano{opacity:.65;animation-play-state:running}
.hero--loki .hero__velo{background:rgba(11,11,11,.86)}   /* casi negro: sin capa de B/N aparte (Juan medía 21,7 ms con dos capas de mezcla; ahora solo queda la del grano) */
/* rasguño de celuloide (idea aprobada por Juan): línea vertical que cruza un instante con temblor, solo en la pasada Loki */
.hero__rasguno{position:absolute;top:0;bottom:0;left:0;width:2px;z-index:8;pointer-events:none;opacity:0;transition:opacity .12s;will-change:transform;background:linear-gradient(180deg,transparent,rgba(237,237,232,.9) 18%,rgba(237,237,232,.55) 72%,transparent)}
.hero__rasguno.is-on{opacity:1;transition:none}
.hero__rasguno--fino{width:1px;background:linear-gradient(180deg,transparent,rgba(237,237,232,.7) 30%,rgba(237,237,232,.35) 72%,transparent)}   /* pasada EHOXE: «más fino y raro» */
.hero--loki .hero__textura{left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:.95;mix-blend-mode:overlay;z-index:7}   /* solo en esta pasada: el 3D está parado, no hay agrupación cara con el canvas */
/* cada carácter vive en una CASILLA de ancho FIJO (Juan: «en Loki los caracteres siempre tienen su sitio, no se mueven»): la letra cambia, la casilla no → nada se desplaza */
.loki__g{display:flex;align-items:center;justify-content:center;flex:none;width:calc(var(--fs-wordmark) * .8);height:calc(var(--fs-wordmark) * 1.1);overflow:visible;text-align:center;font-family:Georgia,'Times New Roman',serif;font-weight:700;text-shadow:0 0 .1em rgba(237,237,232,.45),0 0 .45em rgba(237,237,232,.22)}   /* la casilla se mide con el tamaño del CONTENEDOR, no del glifo: v-big/v-small no la ensanchan (si no, la fila se re-centraba ±11px) */
.loki__g--rojo{width:calc(var(--fs-wordmark) * .46)}
.loki__g--rojo{color:var(--rojo);text-shadow:0 0 .1em rgba(179,18,29,.5),0 0 .45em rgba(179,18,29,.25)}
.loki__g.is-cambio{text-shadow:0 0 .12em rgba(255,255,255,.95),0 0 .6em rgba(237,237,232,.55)}   /* destello de 90 ms al cambiar (en Loki la letra nueva entra más brillante) */
/* variantes «de imprenta» (Loki): didona, garalda, grabada, máquina de escribir, mono, script — las del sistema con respaldo genérico */
/* todas en BOLD (Juan: «que sean más bold las fuentes») */
.v-didot{font-family:Didot,'Bodoni 72','Bodoni MT','Times New Roman',serif;font-weight:700}
.v-bask{font-family:Baskerville,'Libre Baskerville',Georgia,serif;font-weight:700}
.v-caslon{font-family:'Hoefler Text','Big Caslon','Times New Roman',serif;font-weight:900}
.v-copper{font-family:Copperplate,'Copperplate Gothic Bold','Trajan Pro',serif;font-weight:700}
.v-typew{font-family:'American Typewriter','Courier New',Courier,monospace;font-weight:700}
.v-mono{font-family:ui-monospace,Menlo,'Courier New',monospace;font-weight:700}
.v-script{font-family:'Snell Roundhand','Brush Script MT','Segoe Script',cursive;font-weight:700}
.v-futcond{font-family:'Futura','Avenir Next Condensed','Arial Narrow',sans-serif;font-weight:700;font-stretch:condensed}
.v-disp900{font-family:var(--f-display);font-weight:900}
.v-text400{font-family:var(--f-text);font-weight:700}
.v-stretch{font-family:var(--f-stretch);font-weight:400}
.v-ital{font-style:italic;transform:skewX(-10deg)}
.v-low{text-transform:lowercase}
.v-outline{color:transparent;-webkit-text-stroke:.035em var(--tinta)}
.loki__g--rojo.v-outline{-webkit-text-stroke-color:var(--rojo)}
.v-big{font-size:1.1em}.v-small{font-size:.86em}   /* variación de tamaño leve: el carácter no se sale de su casilla */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grid-cruz),var(--grid-linea);background-size:390px 390px,130px 130px;background-position:center top,center top}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--negro) 0%,transparent 26%,transparent 74%,var(--negro) 100%)}
.hero__rayo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__rayo--tras{z-index:2}
.hero__rayo--ante{z-index:4}
.hero__pie{position:relative;z-index:3}
.hero__gota{z-index:3;position:absolute;top:38%;left:var(--gut);width:1px;height:90px;background:rgba(237,237,232,.14);overflow:hidden}
.hero__gota i{display:block;width:1px;height:26px;background:var(--rojo);animation:gota 2.2s var(--ease-io) infinite}
@keyframes gota{0%{transform:translateY(-100%)}100%{transform:translateY(400%)}}
.stage{position:relative;z-index:3;width:100%;height:clamp(280px,46vh,520px);overflow:visible}
.stage__rayos{position:absolute;inset:0;pointer-events:none}
/* halo giratorio SIN filter: un blur sobre algo que gira se recalcula en la GPU CADA frame, para siempre;
   la suavidad va horneada en los stops del gradiente y la rotación queda solo-compositor */
.stage__rayos::before{content:"";position:absolute;left:50%;top:50%;width:min(92vw,940px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(rgba(179,18,29,.13) 0deg 3deg,rgba(179,18,29,0) 9deg 20deg,rgba(179,18,29,.13) 26deg);
  -webkit-mask-image:radial-gradient(circle,#000 16%,rgba(0,0,0,.45) 38%,transparent 60%);mask-image:radial-gradient(circle,#000 16%,rgba(0,0,0,.45) 38%,transparent 60%);animation:giro 100s linear infinite}
.stage__rayos::after{content:"";position:absolute;left:50%;top:50%;width:min(72vw,720px);height:60%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(179,18,29,.15),rgba(179,18,29,.05) 45%,transparent 72%)}
@keyframes giro{to{transform:translate(-50%,-50%) rotate(360deg)}}
.stage__3d{position:absolute;inset:-20% -4%;pointer-events:none}   /* sobra suficiente para que no se corte; menos píxeles que -30% */
.stage__3d canvas{display:block;width:100%;height:100%;opacity:0}
html.tresd .wordmark{visibility:hidden}
html.tresd .hero__pie{display:none}   /* con 3D, el subtítulo va en cromo dentro del lienzo */
.wordmark{margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-wordmark);transition:opacity .9s}
.wordmark .m{display:inline-block;overflow:hidden;padding-bottom:.06em}
.wordmark .m>span{display:inline-block}
.hero__pie{display:flex;justify-content:center;padding:18px var(--gut) 0}
.hero__sub{font-family:var(--f-display);font-weight:700;font-size:clamp(14px,1.9vw,22px);letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.etiqueta{background:var(--rojo);color:var(--tinta);font-weight:700;padding:1px 7px 2px;white-space:nowrap}

/* ---------- MARQUEE (banda bajo el hero; se probó vertical el 30-ago y Juan lo devolvió aquí el 31-ago) ---------- */
/* La banda, opcion E (Juan, 31-ago). Dos cambios sobre la anterior: el texto ya NO repite el
   titular que va justo debajo, y se LEE — se desvanece por los lados en vez de cortarse a hueso
   contra el borde, que es lo que la hacia parecer un error de recorte. */
/* El tamaño vive AQUI y el bloque lo hereda: el padding de abajo lo necesita para compensar,
   y un `em` en .marquee se calculaba con la letra del body (15px), no con la del marquee. */
.marquee{--mq-fs:clamp(20px,2.6vw,30px);
  position:relative;z-index:2;border-top:1px solid var(--linea-2);border-bottom:1px solid var(--linea-2);
  /* CENTRADO OPTICO (Juan, 1-sep-2026: «hay mas aire por abajo que por arriba»). Con line-height:1
     el navegador centra la caja de la FUENTE, que reserva 6px de descendente para las letras con
     rabo — y aqui todo va en MAYUSCULAS, que no lo usan. Ese hueco se queda entero debajo.
     Medido en la vista real: 15,65px arriba contra 19,87px abajo a 30px de letra. La diferencia
     es proporcional al tamaño (0,1407 × font-size), asi que se corrige la mitad a cada lado y
     escala sola en movil. No se arregla con `align-items:center`: la caja ya esta centrada; lo
     que esta descentrado es el GLIFO dentro de ella. */
  overflow:hidden;padding:calc(12px + .0703 * var(--mq-fs)) 0 calc(13px - .0703 * var(--mq-fs));
  white-space:nowrap;background:var(--negro);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__pista{display:inline-flex;width:max-content;will-change:transform;backface-visibility:hidden}   /* capa propia de GPU: sin flicker al desplazarse */
.marquee__bloque{display:inline-flex;align-items:center;font-family:var(--f-stretch);
  font-size:var(--mq-fs);line-height:1;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-2);padding-right:.5em}   /* Juan: SIEMPRE mayúsculas. Y legible: --tinta-2, no el gris del fondo */
.marquee__bloque i{font-style:normal;color:var(--rojo-cartel);margin:0 .6em}   /* el punto separador, en rojo de marca */

/* ---------- MANIFESTO ---------- */
.manifiesto{position:relative;z-index:2;padding:clamp(68px,9vw,130px) var(--gut) clamp(80px,10vw,140px)}
.seccion__cab{display:flex;gap:18px;align-items:baseline;margin-bottom:clamp(40px,6vw,80px)}
.h2{margin:0;font-size:var(--fs-stretch)}
.h2 .m{display:block;overflow:hidden;padding-bottom:.08em}
/* letra con TEXTURA (grano multiplicado dentro del glifo) + AURA cromática alrededor (referencia de Juan «AURA») */
.h2 .m>span{display:block;color:transparent;background-image:var(--grano-letra),linear-gradient(var(--tinta),var(--tinta));background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text}
.h2 .m>span .rojo{color:transparent;background-image:var(--grano-letra),linear-gradient(var(--rojo),var(--rojo));background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text}
.h2 .m>span.brands{background-image:var(--grano-letra),linear-gradient(var(--rojo),var(--rojo));text-shadow:none;filter:drop-shadow(0 0 22px rgba(179,18,29,.5))}
.rgb__capa .m>span,.rgb__capa .m>span *{background:none!important;filter:none!important;color:inherit!important}
.h2 .ap{font-family:var(--f-display);font-weight:700;letter-spacing:0}
.h2 .brands{margin-top:.18em;color:var(--rojo)}
.lead{display:flex;justify-content:flex-start;margin-top:clamp(56px,8vw,110px)}
.lead p{margin:0;width:min(1060px,calc(100% - clamp(70px,9vw,140px)));font-size:var(--fs-lead);line-height:1.4;font-weight:500;letter-spacing:-.012em}
.principios{margin-top:0}   /* la separacion la pone ahora el divisor de rayas */
.principio{position:relative;display:grid;grid-template-columns:clamp(44px,4.5vw,72px) 1fr;grid-template-rows:auto auto;column-gap:clamp(14px,2vw,32px);padding:clamp(22px,2.6vw,36px) var(--gut) clamp(22px,2.6vw,36px) 0;overflow:hidden}
.principio__linea{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(237,237,232,.18);transform:scaleX(0);transform-origin:left center}
.principio:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(237,237,232,.18)}
.principio__barrido{position:absolute;inset:0;background:var(--rojo);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.principio__n{position:relative;grid-row:1/3;font-family:var(--f-display);font-weight:700;font-size:clamp(14px,1.3vw,20px);color:var(--rojo);padding-top:.4em;letter-spacing:.04em}
.principio__t{position:relative;margin:0;font-family:var(--f-display);font-weight:900;font-size:var(--fs-item);letter-spacing:-.025em;text-transform:uppercase;line-height:1}
/* la textura va en el MISMO elemento que se anima: background-clip:text en un padre NO pinta hijos con transform (bug real de Chrome con GPU) */
.principio__t .m>span{color:transparent;background-image:var(--grano-letra),linear-gradient(var(--tinta),var(--tinta));background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text}
.principio__t .m{display:block;overflow:hidden;padding-bottom:.1em}
.principio__t .m>span{display:block}
.principio__d{position:relative;margin:.3em 0 0;font-size:clamp(15px,1.45vw,22px);font-weight:500;line-height:1.35;color:rgba(237,237,232,.8);max-width:60ch}
.principio.is-hover .principio__n,.principio.is-hover .principio__d{color:var(--negro)}
.principio.is-hover .principio__t .m>span{background-image:var(--grano-letra),linear-gradient(var(--negro),var(--negro))}   /* título negro sobre el barrido rojo (bloque rojo tipo etiqueta) */

/* ---------- REEL ---------- */
.reel{position:relative;z-index:2;padding-bottom:clamp(90px,13vw,180px)}
.reel .seccion__cab{padding:0 var(--gut);margin-bottom:26px}
.reel__main{position:relative}   /* a sangre COMPLETA (Juan: «formato completo, le tienes un hueco a la izquierda») */
.foto{position:relative;width:100%;background:var(--negro-3);overflow:hidden;filter:grayscale(1) contrast(1.06)}
.foto img,.foto video{width:100%;height:100%;object-fit:cover}
.foto{transition:filter .6s cubic-bezier(.2,.7,0,1)}
.foto--video{filter:none}   /* vídeo A COLOR (regla de Juan en el hero): este metraje en B/N quedaba casi negro */
@media (hover:hover){.foto:hover{filter:grayscale(0) contrast(1.04)}}
.foto--main{aspect-ratio:16/7.5}
.foto--a{aspect-ratio:4/5}
.foto--b{aspect-ratio:3/2}
.sinfoto{position:absolute;inset:0;display:grid;place-items:center;background-image:var(--grid-cruz),var(--grid-linea);background-size:390px 390px,130px 130px;background-position:center,center}
.sinfoto span{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.24em;color:var(--tinta-3);text-transform:uppercase}
.reel__rec{position:absolute;top:14px;left:16px;pointer-events:none}
.reel__rec i{color:var(--rojo);font-style:normal;animation:parpadeo 1.2s steps(1) infinite}
@keyframes parpadeo{50%{opacity:.15}}
.reel__meta{position:absolute;bottom:-30px;right:16px;pointer-events:none}
.reel__grid{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);padding:clamp(60px,8vw,110px) var(--gut) 0;align-items:flex-start}
.reel__col{flex:1 1 300px;max-width:480px}
.reel__col--b{max-width:560px;margin-top:clamp(30px,6vw,90px)}
.reel__pie{display:flex;justify-content:space-between;margin-top:10px}

/* ---------- FOOTER ---------- */
.pie{position:relative;z-index:2;border-top:1px solid var(--linea)}
.pie__barra{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:30px var(--gut) 34px}

/* ---------- RGB split (clones solo-transform) ---------- */
.rgb{position:relative;z-index:1}
.rgb>.h2:not(.rgb__capa){position:relative;z-index:1}   /* los clones (.rgb__capa) siguen absolutos encima */
.rgb__capa{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity}
.rgb__capa,.rgb__capa *{color:rgba(255,0,64,.7)!important;text-shadow:none!important}
.rgb__capa--b,.rgb__capa--b *{color:rgba(0,190,255,.6)!important}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .stage__rayos::before,.hero__gota i,.reel__rec i,.hero__grano,.capa--pelicula{animation:none}
  .capa--luz,.hero__textura{display:none}
  .marquee__pista{transform:none}
  .wordmark{transition:none}
}

/* modo ligero — lo enciende main.js si los frames pasan de 28 ms sostenidos: se apagan los adornos caros, el contenido queda igual */
.ligero .capa--pelicula,.ligero .hero__grano,.ligero .stage__rayos::before{animation:none}
.ligero .capa--luz,.ligero .hero__textura{display:none}

/* HUD de diagnóstico (?perf=1): ms por frame medidos en la máquina que mira */
.perfhud{position:fixed;right:10px;bottom:10px;z-index:999;font:600 12px/1 ui-monospace,Menlo,monospace;color:#7CFC9A;background:rgba(0,0,0,.78);padding:9px 11px;letter-spacing:.03em;pointer-events:none;font-variant-numeric:tabular-nums}

/* ── MÓVIL: lo que en el ordenador respira, en un teléfono es un agujero ────
   Medido el 1-sep-2026 sobre un iPhone (capturas de Juan): en 1.987 px de pagina habia 507 px
   VACIOS — la cuarta parte. Y el logo fijo de la cabecera aterrizaba justo encima del titular
   «GROW WHAT'S OURS»: los dos ilegibles a la vez.
   Un logo fijo y centrado sobre una pagina que se desplaza SIEMPRE acaba pisando algo en una
   pantalla estrecha. Aqui no hay menu que sostener, asi que en movil el logo se queda en su
   sitio arriba y se va con el hero. */
@media (max-width:760px){
  .top{position:absolute}
  .capa--cabecera{display:none}
  .manifiesto{padding-bottom:48px}
  .lead{margin-top:34px}
  .reel{padding-bottom:40px}
}