/* ══════════════════════════════════════════════════════════════════
   CIPHER — The Circle · recreación
   Sistema: 2 colores, 4 tamaños de fuente, mix-blend-mode: difference
   ══════════════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased}
html,body{overscroll-behavior:none}
h1,h2,h3,h4,h5{display:flex;font-size:inherit;font-weight:inherit;line-height:100%}
p{font-weight:inherit;line-height:inherit}
img{border:0;display:block;line-height:0;width:100%}
button{background:transparent;border:none;color:inherit;display:flex;font-family:inherit;letter-spacing:inherit;padding:0}
a{appearance:none;color:inherit;cursor:pointer;text-decoration:none}
li{list-style:none}
::selection{background-color:#676767;color:#fff;mix-blend-mode:difference}
::-webkit-scrollbar{width:0;height:0}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ── TOKENS ────────────────────────────────────────────────────── */
:root{
  --color-dark:#060403;
  --color-light:#e9eae4;
  --fontXXS:9px;
  --fontXS:11px;
  --fontS:13px;
  --fontM:27px;
  --sans:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* los párrafos de lectura van aparte del display */
  --texto:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* alias: quedaba código apuntando al nombre viejo */
  --serif:var(--display);
  --ease:cubic-bezier(.2,.65,.47,.96);
}
body{background:#000;font-family:var(--sans);letter-spacing:-.01em}
.secondaryF,.serif{font-family:var(--display)}

/* DM Mono es ancho: las etiquetas chicas necesitan menos tracking del habitual */
.links,.label,nav.main_links,.credits_row,.controls button{letter-spacing:-.02em}
.dark_bg{background-color:var(--color-dark);color:var(--color-light)}
.light_bg{background-color:var(--color-light);color:var(--color-dark)}
.links{display:inline-block;padding:16px 0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Con una ficha de talento abierta el header se va: la ficha ocupa media
   pantalla y el menú le pasaba justo por encima al nombre. Se va con una
   transición y no de golpe, para que se entienda que se retiró y no que
   desapareció la navegación. */
/* Se esconde con transform y NO con opacity: la animación de entrada de
   la página deja un `opacity:1` en línea sobre el header, y un estilo en
   línea le gana a cualquier regla de hoja. Antes que ensuciar esto con
   un !important, el desplazamiento hace el trabajo solo —y de paso es
   una animación de compositor, sin repintado. */
body.ficha-abierta .hdr,
body.ficha-abierta .hdr_fondo{
  pointer-events:none;
  transform:translateY(-100%);
  transition:transform .42s var(--ease);
}

/* ── FOCO DE TECLADO ───────────────────────────────────────────────
   El sitio no tenía ningún estilo de foco propio: quien navega con
   Tab dependía del anillo por defecto del navegador, que sobre estos
   fondos —negro casi puro y claro casi puro— a veces desaparece.
   currentColor lo resuelve solo: hereda el color del texto, así que
   se invierte con cada sección sin necesidad de una regla por fondo.
   :focus-visible y no :focus, para que el clic con el mouse no lo
   dispare. */
:where(a,button,[tabindex],summary,input,textarea,select):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:1px;
}
/* Salto al contenido: sólo aparece cuando el foco lo alcanza. */
.saltar{
  position:fixed;top:8px;left:8px;z-index:60;
  padding:12px 18px;
  background-color:var(--color-dark);color:var(--color-light);
  font-size:var(--fontXS);letter-spacing:.1em;text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.saltar:focus-visible{transform:none}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
nav.main_links .toggle{display:flex;align-items:center;height:fit-content;cursor:pointer;padding:15px 0;pointer-events:auto}
nav.main_links .center{text-align:center}
.element{transition:opacity .2s ease-out}
.element:hover{opacity:.5}
.label{display:inline-block;white-space:nowrap;padding:0}

/* ── HEADER · panel de instrumentos ────────────────────────────────
   Una fila a todo el ancho partida en celdas con filetes de 1px.
   El fondo blanco NO va dentro del header: `mix-blend-mode` sólo
   mezcla dentro de su contexto de apilado, y meterlo adentro haría
   que el header dejara de adaptarse al fondo de la página. Va como
   capa aparte, debajo, y el header se mezcla contra ella. ── */
.hdr_fondo{
  position:fixed;top:0;left:0;width:100%;z-index:13;
  background-color:var(--color-light);
  opacity:0;pointer-events:none;
  transition:opacity .38s var(--ease),transform .42s var(--ease);
}
.hdr_fondo.visible{opacity:1}
/* las fichas de proyecto la quieren negra, como el home */
body[data-barra="oscura"] .hdr_fondo{background-color:var(--color-dark)}

/* Sin mix-blend-mode: un fondo claro en los botones se invertiría según
   lo que hubiera debajo. Los dos estados se manejan por clase, que da
   control exacto del color a cambio de un poco más de código. */
.hdr{
  position:fixed;top:0;left:0;width:100%;z-index:14;
  color:var(--color-light);pointer-events:none;
  transition:color .3s var(--ease),transform .42s var(--ease);
}
.hdr.claro{color:var(--color-dark)}
/* Se retira al bajar y vuelve al subir: deja la ficha limpia mientras se
   lee, sin obligar a volver arriba para navegar. */
.hdr.retraido,.hdr_fondo.retraido{transform:translateY(-100%)}
/* Con el footer en negro pleno, la barra clara cortaría contra el fondo:
   se invierte. Va con .claro en el selector porque ésa es la que le
   estaría ganando el color. */
.hdr.claro.sobre-negro,.hdr.sobre-negro{color:var(--color-light)}
.hdr.claro.sobre-negro .marca img{filter:none}
.hdr_fondo.sobre-negro{background-color:var(--color-dark)}
.hdr.claro.sobre-negro .enlaces a:hover,
.hdr.claro.sobre-negro .redes a:hover{background-color:#eeeeee;color:#060403}
@media (prefers-reduced-motion:reduce){
  .hdr.retraido,.hdr_fondo.retraido{transform:none}
}
.hdr .fila{
  display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:stretch;
  border-bottom:1px solid currentColor;border-color:color-mix(in srgb, currentColor 26%, transparent);
}
.hdr .celda{
  display:flex;align-items:center;gap:10px;padding:13px 20px;
  border-right:1px solid color-mix(in srgb, currentColor 26%, transparent);
  font-size:12px;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;white-space:nowrap;
}
.hdr .celda:last-child{border-right:0}
.hdr .marca{pointer-events:auto;padding:10px 20px}
.hdr .marca img{width:58px;height:auto;transition:filter .3s var(--ease)}
/* el SVG es casi blanco: sobre la barra clara hay que invertirlo */
.hdr.claro .marca img{filter:invert(1)}
.hdr .contexto{overflow:hidden;text-overflow:ellipsis}
.hdr .punto{flex:0 0 auto;width:4px;height:4px;background-color:currentColor}
.hdr .reloj{font-variant-numeric:tabular-nums;gap:12px}
.hdr .enlaces{display:flex;gap:0;padding:0}
.hdr .enlaces a{
  pointer-events:auto;display:flex;align-items:center;padding:13px 17px;
  border-right:1px solid color-mix(in srgb, currentColor 26%, transparent);
  transition:background-color .18s ease-out,color .18s ease-out;
}
.hdr .enlaces a:last-child{border-right:0}
.hdr .enlaces a:hover{background-color:#eeeeee;color:#060403}
.hdr .enlaces a[aria-current]{background-color:color-mix(in srgb, currentColor 18%, transparent)}
.hdr .enlaces a[aria-current]:hover{background-color:#eeeeee;color:#060403}

/* Redes: alto completo de la fila y cuadradas por aspect-ratio, con el
   filete sólo a los costados. Ocupan todo el alto como el resto de las
   celdas, y el cuadrado lo dibujan los bordes del header. */
.hdr .redes{padding:0;gap:0;align-items:stretch}
.hdr .redes a{
  pointer-events:auto;display:flex;align-items:center;justify-content:center;
  height:100%;aspect-ratio:1;width:auto;
  border-right:1px solid color-mix(in srgb, currentColor 26%, transparent);
  transition:background-color .18s ease-out,color .18s ease-out;
}
.hdr .redes a:last-child{border-right:0}
.hdr .redes a:hover{background-color:#eeeeee;color:#060403}
/* Con la barra clara el resalte se invierte: #eeeeee sobre el #e9eae4 del
   fondo es casi el mismo color y el hover no se lee. */
.hdr.claro .enlaces a:hover,
.hdr.claro .enlaces a[aria-current]:hover,
.hdr.claro .redes a:hover,
.hdr.claro .menu_btn:hover{background-color:#060403;color:#eeeeee}
.hdr .redes svg{display:block}

@media(max-width:900px){
  .hdr .fila{grid-template-columns:1fr auto auto}
  .hdr .contexto,.hdr .reloj{display:none}
  .hdr .enlaces a{padding:13px 9px;font-size:var(--fontXXS)}
  /* header más alto en táctil: el logo y el botón necesitan área de
     toque, y con dos elementos solos sobra el ancho */
  .hdr .celda{padding:17px 18px}
  .hdr .marca{padding:13px 18px}
  .hdr .marca img{width:66px}
  .menu_ico{width:24px;gap:6px}
  .menu_ico i{height:1.8px}

}
@media(max-width:560px){
  /* no entran las dos cosas: quedan los enlaces */
  .hdr .redes{display:none}
}
/* el reset pone img{width:100%}
.icons{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .6s var(--ease)}
.icon_home{opacity:1}
.icon_work,.icon_works{opacity:0}

/* ── ETIQUETAS LATERALES FIJAS ─────────────────────────────────── */
/* Viven dentro de la portada, no pegadas al viewport: se van con el
   scroll como cualquier otro contenido del hero. */
.hero_etiquetas{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  color:var(--color-light);mix-blend-mode:difference;pointer-events:none;
  font-size:15px;font-weight:500;letter-spacing:.02em;line-height:120%;text-transform:uppercase;
}

/* ── CURSOR ────────────────────────────────────────────────────── */
.cursor_cube,.cursor_label{
  position:fixed;top:0;left:0;
  /* por encima de los overlays (contacto z40, galería z50): si no, el
     puntero desaparece justo cuando hay algo que señalar */
  z-index:60;
  color:var(--color-light);mix-blend-mode:difference;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .3s;
  will-change:transform;
}
.cursor_cube.visible,.cursor_label.visible{opacity:1}

/* Círculo blanco en mix-blend-mode:difference = inversión de lo que hay
   debajo. El margen negativo lo centra en el puntero; sin transición en
   transform, que agregaría el desfasaje que se quiso sacar. */
.cursor_cube .cube{
  position:relative;
  width:50px;height:50px;margin:-25px 0 0 -25px;
  border-radius:50%;background-color:#fff;aspect-ratio:auto;
  transition:width .22s var(--ease),height .22s var(--ease),margin .22s var(--ease);
}
.cursor_label .wrapper{position:relative;top:34px;left:34px;display:flex;flex-direction:column;align-items:flex-start}
.cursor_label .timer{display:none;gap:5px;font-size:var(--fontXXS);font-weight:500}
.cursor_label.has-timer .timer{display:flex}
.cursor_label .label{font-family:var(--display);font-size:var(--fontS);font-weight:400}
@media(hover:hover) and (pointer:fine){
  body.has-cursor,body.has-cursor *{cursor:none}
  /* el efecto se corta en el header: ahí manda el puntero del sistema
     y el resalte propio de cada botón */
  body.has-cursor .hdr a,body.has-cursor .hdr button{cursor:pointer}
  /* crece al pasar por algo accionable: reemplaza al cursor del sistema,
     que no se puede usar sin romper el propio */
  body.sobre-activo .cursor_cube .cube{width:82px;height:82px;margin:-41px 0 0 -41px}
}

/* ── PROGRESO DE LECTURA ───────────────────────────────────────── */
.progreso{
  position:fixed;top:0;left:0;width:100%;height:1px;z-index:13;
  background-color:#8b8d8538;mix-blend-mode:difference;pointer-events:none;
}
.progreso_fill{
  width:100%;height:100%;background-color:var(--color-light);
  transform:scaleX(0);transform-origin:left center;will-change:transform;
}

/* ── LOADER ────────────────────────────────────────────────────── */
.loader{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:100}
.loader canvas{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:5;background:var(--color-dark)}
/* ── LOGO DEL LOADER ───────────────────────────────────────────────
   SVG en el DOM y no rasterizado: el contorno se traza con dashoffset
   y recién después entra el relleno. En difference sale claro sobre el
   fondo oscuro y oscuro sobre la apertura clara, sin cambiarle el color.
   El JS escribe --t (avance del trazo) y --f (relleno) en el contenedor;
   cada path guarda su propia longitud en --l. ── */
.loader_marca{
  position:fixed;top:50%;left:50%;z-index:6;
  /* el mismo ancho que el logotipo del header, para que al terminar la
     transición el ojo lo encuentre donde ya lo conocía */
  width:58px;
  transform:translate(-50%,-50%);
  color:var(--color-light);mix-blend-mode:difference;
  pointer-events:none;
}
.loader_marca svg{display:block;width:100%;height:auto;overflow:visible}
.loader_marca path{
  fill:currentColor;fill-opacity:var(--f,0);
  /* el contorno se apaga justo cuando entra el relleno: si quedaran los
     dos, el logo terminaría más grueso que el original */
  /* el contorno va muy tenue a propósito: es una insinuación del
     dibujo, no el dibujo. A opacidad plena competía con el relleno
     y el logo entraba pesado. */
  stroke:currentColor;stroke-opacity:calc((1 - var(--f,0)) * .3);
  /* en unidades del viewBox (882 de ancho): sin vector-effect el trazo
     escala junto al dasharray, que es lo que mantiene la cuenta pareja */
  stroke-width:2;stroke-linejoin:round;
  stroke-dasharray:var(--l);
  stroke-dashoffset:calc(var(--l) * (1 - var(--t,0)));
}
@media(max-width:700px){
  .loader_marca{width:66px}   /* el del header en móvil */
}
@media(prefers-reduced-motion:reduce){
  .loader_marca path{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}
}

.overlay_loader{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:6;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:20px;
  color:var(--color-light);font-size:var(--fontXS);font-weight:500;
  /* en difference el contador se invierte solo sobre el fondo claro */
  mix-blend-mode:difference;
  letter-spacing:.12em;pointer-events:none;font-variant-numeric:tabular-nums;
}

/* ── CONTENEDORES ──────────────────────────────────────────────── */
.page_c{width:100%;min-height:100svh}
#main_c{position:relative}
.page_container{position:relative;overflow:clip}
.inner{position:relative;z-index:1;height:100%;background-color:var(--color-light);isolation:auto}
.footer-spacer{width:100%;pointer-events:none}

/* ── HERO ──────────────────────────────────────────────────────── */
.hero{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;background-color:#000}
.hero .wrapper,.hero .scale_w,.hero picture,.hero .media_c,.hero img{width:100%;height:100%}
.hero .scale_w{transform:scale(1.2);will-change:transform}
.hero img{object-fit:cover}

/* ── GRANO DE LA PORTADA ───────────────────────────────────────────
   Una capa de ruido que salta entre posiciones. Disimula la falta de
   resolución de las portadas: el ojo lee la textura como grano de
   película y deja de buscar el detalle que no está.

   Cuesta prácticamente nada, y eso es a propósito:
   · el ruido es un SVG con feTurbulence metido en un background-image,
     así que el navegador lo rasteriza UNA vez y después es una imagen.
     Como filtro vivo se recalcularía en cada cuadro.
   · lo único que se anima es transform, que corre en el compositor sin
     repintar ni recalcular layout.
   · steps(1) entre posiciones sueltas da el salto del grano de cine, y
     de paso son siete cambios por segundo en vez de sesenta.
   La capa se pasa de la caja para que al desplazarse no asome un borde. */
.hero .grano{
  position:absolute;inset:-14%;z-index:2;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22r%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23r%29%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;
  opacity:.13;
  animation:granear 1.4s steps(1) infinite;
}
@keyframes granear{
  0%      {transform:translate3d(0,0,0)}
  12.5%   {transform:translate3d(-3%,2%,0)}
  25%     {transform:translate3d(2%,-3%,0)}
  37.5%   {transform:translate3d(-2%,-2%,0)}
  50%     {transform:translate3d(3%,1%,0)}
  62.5%   {transform:translate3d(-1%,3%,0)}
  75%     {transform:translate3d(2%,2%,0)}
  87.5%   {transform:translate3d(-3%,-1%,0)}
}
/* quieto pero presente: la textura sirve igual sin el salto */
@media(prefers-reduced-motion:reduce){
  .hero .grano{animation:none}
}


/* ── INFOS ─────────────────────────────────────────────────────── */
section.infos{display:flex;justify-content:center;padding:64px 0}
section.infos .l{display:flex;flex-direction:column;gap:10px;width:442px}
section.infos .about{display:flex;flex-direction:column;gap:24px}
section.infos h3{font-size:var(--fontS);font-weight:500;text-transform:uppercase}
section.infos .text_c{display:flex;flex-direction:column;gap:18px;width:442px;
  font-family:var(--texto);font-size:18px;font-weight:300;line-height:162%;
  text-align:justify;hyphens:auto}
/* splitLines() parte el párrafo en bloques de una línea, y una línea suelta
   es "última línea": text-align:justify no la afecta. Se justifica con
   text-align-last y se exceptúa la última real, que no debe estirarse. */
section.infos .text_c .split_inner{text-align-last:justify}
section.infos .text_c .split_line.ultima .split_inner{text-align-last:left}
.backstage_btn{
  display:flex;align-items:center;gap:16px;width:fit-content;
  padding:20px 0;cursor:pointer;user-select:none;
  font-size:14px;font-weight:700;text-transform:uppercase;
}
.puce{width:4px;height:4px;background-color:#000}

/* ── CONTENT ───────────────────────────────────────────────────── */
.content{display:block}
.soloPaysage{display:flex;align-items:center;justify-content:center;width:100%;height:100svh;min-height:800px;padding:48px 0}
.soloPaysage .media_c{width:100%;height:100%}

.portrait{display:flex;justify-content:space-between;gap:96px;width:100%;padding:48px 0}
.portrait .media_c{width:100%;height:auto;aspect-ratio:631/839}

.left,.right{display:flex;align-items:flex-start;gap:96px;width:100%;padding:48px 0}
.left>:first-child{flex:0 0 63%;aspect-ratio:916/839}
.left>:last-child{flex:0 1 auto;aspect-ratio:345/429}
.right>:first-child{flex:0 1 auto;aspect-ratio:345/429}
.right>:last-child{flex:0 0 63%;aspect-ratio:916/839}
.left .media_c,.right .media_c{width:100%;height:100%}

.content>section{padding:0 40px}
.soloPaysage{padding-left:0;padding-right:0}

/* media lazy */
.lazy_wrapper{position:relative;width:100%;height:100%;overflow:hidden}
.lazy_wrapper img{width:100%;height:100%;object-fit:cover}
.placeholder{position:absolute;inset:0;z-index:2;background-color:#dedede;opacity:1;pointer-events:none;transition:opacity .4s}
.placeholder.hidden{opacity:0}

/* ── VIDEO PLAYER ──────────────────────────────────────────────── */
.soloPaysage .c{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.soloPaysage .video,.soloPaysage .reel_canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.soloPaysage .reel_canvas{display:none}
.soloPaysage.is-fallback .video{display:none}
.soloPaysage.is-fallback .reel_canvas{display:block}
.soloPaysage .placeholder{
  display:flex;align-items:center;justify-content:center;
  background-color:#dedede;color:#333;font-size:var(--fontXS);text-transform:uppercase;
}
.player{
  position:absolute;bottom:0;left:0;z-index:3;width:100%;
  display:flex;align-items:center;padding:0 0 0 20px;
  color:var(--color-light);mix-blend-mode:difference;text-transform:uppercase;
  opacity:0;transition:opacity .2s ease;
}
[data-player]:hover .player,.player.is-open{opacity:1}
.progress_bar{flex:1;height:1px;background-color:#ffffff41;overflow:hidden;cursor:pointer}
.progress{width:100%;height:100%;background-color:#fff}
.controls{display:flex;text-transform:uppercase}
.controls button{cursor:pointer;font-size:var(--fontXXS);font-weight:500;text-transform:uppercase;padding:20px}
.controls_btn{transition:opacity .1s ease-out}
.controls_btn:hover{opacity:.5}
.mobile_player{display:none}

/* ── CREDITS ───────────────────────────────────────────────────── */
/* 250 + 80 + 250 = 580. La ficha son pares etiqueta/valor cortos y
   aguanta angosta; el comparativo se queda en 1000 porque son tres
   columnas de cifras y apretarlas las volvería ilegibles. */
.credits_w{display:flex;justify-content:center;gap:80px;padding:90px 40px;text-transform:uppercase}
/* flex:0 1 400px y no width: con ancho fijo, entre 768 y 1100px las dos
   columnas sumaban más que el viewport y la ficha se salía de pantalla */
.credits_c{display:flex;flex-direction:column;gap:0;flex:0 1 250px;min-width:0}
.credits_c h3{padding-bottom:14px;font-size:var(--fontS);font-weight:500}
/* cuadrícula visible: separa etiqueta de valor y una fila de la siguiente */
.credits_row{
  /* la etiqueta baja de 266 a 150: con la columna en 400px, 266 dejaba
     134 para el valor y "Campañas orientadas a mensajes" se partía */
  /* la etiqueta cede cuando la columna se angosta, en vez de aplastar
     al valor: con 150px fijos y la columna en 321px quedaban 171 */
  display:grid;grid-template-columns:min(96px,38%) 1fr;gap:0;
  font-size:var(--fontS);font-weight:500;line-height:150%;
  border-top:1px solid #06040320;
}
.credits_row:last-child{border-bottom:1px solid #06040320}
.credits_row h4{padding:12px 14px 12px 0;border-right:1px solid #06040320;color:#6d6f68}
.credits_row ul{padding:12px 0 12px 14px}
.credits_row ul{display:flex;flex-direction:column}

/* ── DISCOVER ──────────────────────────────────────────────────── */
.discover{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;width:100%;
  padding-top:142px;padding-bottom:40vh;background-color:var(--color-light);
  will-change:filter;
}
.wrapper_discover{display:flex;flex-direction:column;gap:20px;width:100%;max-width:2400px}
.discover_title{padding:0 40px;font-family:var(--display);font-size:48px;font-weight:200;line-height:90%}
.discover .c{display:flex;justify-content:space-between;width:100%;padding:90px 40px}
.discover .l{width:44%;height:fit-content}
.discover .r{
  display:flex;flex-direction:column;align-items:end;justify-content:space-between;
  align-self:stretch;gap:88px;width:44%;height:auto;
}
.discover_links{display:flex;flex-direction:column;gap:8px;transition:filter .8s var(--ease)}
.discover_links.is-faded{filter:grayscale(100%)}
.v1{width:100%;height:100%;overflow:hidden}
.v2{width:100%}
.v3{width:50%}
.v1v,.v2v,.v3v{width:100%;overflow:hidden}
.v1v{aspect-ratio:620/870}
.v2v{aspect-ratio:562/402}
.v3v{aspect-ratio:.84}
.discover_asset .media_c,.discover_asset img{display:block;width:100%;height:100%;object-fit:cover}
.discover_asset img{transform:scale(1.06);transition:transform .8s var(--ease)}
.discover_links:hover .discover_asset img{transform:scale(1)}
.discover_links .infos{display:flex;justify-content:space-between;font-size:var(--fontS);font-weight:500;text-transform:uppercase}
.discover_links .infos>span{display:flex;align-items:center;gap:8px}
.discover_links .infos .cube{width:4px;aspect-ratio:1;background-color:#455e53}

/* ── OVERLAY FOOTER ────────────────────────────────────────────── */
.overlay_footer{
  position:fixed;top:0;left:0;width:100%;height:100vh;z-index:8;
  /* casi opaco abajo: la página tiene que apagarse de verdad antes de
     que el footer termine de subir */
  background:linear-gradient(0deg,#060403 0%,#060403f2 26%,#060403b8 52%,#0604035c 74%,#06040300 100%);
  opacity:0;transform:scale(1.5) translateZ(0);pointer-events:none;
}
/* El degradado da la sensación de que la oscuridad sube; ésta remata en
   negro pleno. Van separadas porque un gradiente no interpola hacia un
   color sólido: habría que animar cada parada. La inyecta el JS. */
.overlay_footer_pleno{
  position:fixed;inset:0;z-index:8;
  background-color:var(--color-dark);
  opacity:0;pointer-events:none;
}

/* ── FOOTER · el mail como protagonista ────────────────────────────
   No repite lo que el header ya resuelve: sin enlaces de sección, sin
   redes y sin el reloj de Córdoba. Sólo lo que agrega. ── */
footer.footer-fixed{
  width:100%;height:400px;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--color-light);transform:translateZ(0);will-change:transform;
}
/* apoyada abajo, junto a la fila de datos, en vez de flotando arriba */
.pie_invita{display:flex;flex-direction:column;gap:16px;padding:0 40px 34px}
.pie_eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#8b8d85;
}
/* En mono y chico: el mail deja de ser el titular del footer y pasa a
   leerse como un dato más del panel, igual que el resto de la interfaz. */
.pie_mail{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  font-family:var(--sans);font-size:18px;font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;line-height:130%;
  transition:color .2s ease-out;
}
.pie_mail svg{flex:0 0 auto;transition:transform .28s var(--ease)}
.pie_mail:hover{color:#C9142B}
/* la flecha se va en la misma diagonal que apunta */
.pie_mail:hover svg{transform:translate(2px,-2px)}
.pie_fila{
  display:grid;grid-template-columns:1fr auto auto;
  border-top:1px solid #ffffff24;will-change:transform;
}
.pie_celda{
  display:flex;align-items:center;padding:15px 20px;
  font-size:var(--fontXS);font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;white-space:nowrap;
  border-right:1px solid #ffffff24;
}
.pie_celda:last-child{border-right:0}
.pie_celda a{transition:opacity .2s ease-out}
.pie_celda a:hover{opacity:.5}

/* ── BACKSTAGE OVERLAY ─────────────────────────────────────────── */
#backstage_overlay{
  position:fixed;inset:0;z-index:50;
  background-color:var(--color-dark);color:var(--color-light);
  overflow-y:auto;visibility:hidden;opacity:0;
  clip-path:inset(0 0 100% 0);
}
#backstage_overlay.is-open{visibility:visible;opacity:1}
.bs_close{
  position:fixed;top:22px;right:22px;z-index:2;
  font-size:var(--fontS);font-weight:500;text-transform:uppercase;cursor:pointer;
  mix-blend-mode:difference;transition:opacity .2s ease-out;
}
.bs_close:hover{opacity:.5}
.bs_inner{padding:120px 40px 90px}
.bs_title{font-family:var(--display);font-size:48px;font-weight:200;line-height:90%;padding-bottom:40px}
.bs_grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.bs_item{display:flex;flex-direction:column;gap:8px}
.bs_item .lazy_wrapper{aspect-ratio:3/2}
.bs_item figcaption{font-size:var(--fontS);font-weight:500;text-transform:uppercase}

/* ── ANIM LAYERS (estado inicial antes de GSAP) ────────────────── */
[data-split]{display:block}
.split_line{display:block;overflow:hidden}
.split_inner{display:block;will-change:transform}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero{height:78svh;min-height:auto}
  /* en táctil la portada ocupa la pantalla entera */
  @media(max-width:768px){.hero{height:100svh}}
  .credits_w{gap:80px}
  .portrait,.left,.right{gap:40px}
}

@media(max-width:768px){
  nav.main_links{display:flex;top:51px;left:12px;padding:0;position:fixed}
  nav.main_links a{padding:15px 8px}
  nav.main_links .toggle{padding:10px 4px}
  nav.main_links .nav_right{gap:0}
  .main_logo{top:0;left:0;padding:20px 20px 0}
  .logo_type{width:131px;font-size:32px}
  .cursor_cube,.cursor_label{display:none}
  body.has-cursor,body.has-cursor *{cursor:auto}

  .hero_etiquetas{display:none}

  section.infos{padding:64px 0 70px}
  section.infos .l,section.infos .text_c{width:100%;padding:0 20px}
  section.infos .text_c{gap:24px}
  section.infos .l{gap:10px}
  .backstage_btn{padding:10px 20px}

  .content>section{padding:0 12px}
  .soloPaysage{height:100svh;min-height:auto;padding:12px 0}
  .portrait,.left,.right{flex-direction:column;gap:24px;padding:12px 0}
  .left>:first-child,.left>:last-child,.right>:first-child,.right>:last-child{flex:auto;width:100%;height:auto}

  .player{opacity:1;padding:0;transition:none}
  .controls_btn:hover{opacity:1;transition:none}
  .mobile_player{display:flex;padding:20px;font-size:var(--fontXXS);font-weight:500}

  .credits_w{flex-direction:column;gap:40px;padding:60px 20px}
  .credits_c{width:100%}
  .credits_c:last-child h3{display:none}
  .credits_row{grid-template-columns:40% 1fr}
  .credits_row h4{padding-left:0}

  .discover{padding-top:20px;padding-bottom:0}
  .discover_title{padding:0 20px;font-size:32px}
  .discover .c{flex-direction:column;justify-content:start;gap:40px;padding:20px}
  .discover .l,.discover .r{width:100%}
  .discover .r{gap:40px}
  .v2,.v2v,.v3,.v3v{width:100%}
  .discover_links{transition:none}
  .discover_links.is-faded{filter:none}
  .discover_asset img{transform:none}

  .overlay_footer{display:none}
  /* sin .overlay_footer detrás, el footer necesita su propio fondo:
     si no, es texto claro sobre el claro de la página */
  footer.footer-fixed{
    height:auto;min-height:0;position:relative;
    background-color:var(--color-dark);
    will-change:auto;
  }
  /* nowrap + tamaño atado al ancho: partirlo dejaba "…com." / "ar",
     que se lee como si el dominio estuviera cortado */
  .pie_mail{font-size:15px;letter-spacing:.08em;gap:8px}
  .pie_invita{padding:0 20px 26px;gap:12px}
  .pie_fila{grid-template-columns:1fr}
  .pie_celda{border-right:0;border-bottom:1px solid #ffffff24;white-space:normal}
  .pie_celda:last-child{border-bottom:0}

  .bs_inner{padding:90px 20px 60px}
  .bs_grid{grid-template-columns:1fr;gap:24px}
  .bs_title{font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero .scale_w{transform:none}
}


/* ── MENÚ MÓVIL ────────────────────────────────────────────────────
   El botón y la pantalla los inyecta el JS. Sin la clase menu-movil
   en el body (módulo caído, escritorio) nada de esto aplica y el
   header sigue siendo el de siempre. ── */
/* .hdr .celda{display:flex} tiene más especificidad que .menu_btn a
   secas, así que el botón se colaba en escritorio: hay que igualarla */
.hdr .menu_btn,.menu_pantalla{display:none}

body.menu-movil .hdr .enlaces,
body.menu-movil .hdr .redes,
body.menu-movil .hdr .reloj,
body.menu-movil .hdr .contexto{display:none}

body.menu-movil .hdr .fila{grid-template-columns:1fr auto}
body.menu-movil .hdr .menu_btn{
  display:grid;place-items:center;
  aspect-ratio:1;width:auto;padding:0;cursor:pointer;
  pointer-events:auto;
  border-right:0;border-left:1px solid color-mix(in srgb, currentColor 26%, transparent);
}
.menu_ico{display:grid;gap:5px;width:19px}
.menu_ico i{
  display:block;height:1.5px;width:100%;background-color:currentColor;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
body.menu-abierto .menu_ico i:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-abierto .menu_ico i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

body.menu-movil .menu_pantalla{
  display:flex;flex-direction:column;justify-content:space-between;
  position:fixed;inset:0;z-index:12;
  padding:calc(env(safe-area-inset-top,0px) + 96px) 20px calc(env(safe-area-inset-bottom,0px) + 34px);
  background-color:var(--color-dark);color:var(--color-light);
  transform:translateY(-100%);
  transition:transform .52s var(--ease);
}
body.menu-movil.menu-abierto .menu_pantalla{transform:none}
/* con el menú abierto el header va claro sobre el fondo oscuro */
body.menu-abierto .hdr_fondo{opacity:0}
body.menu-abierto .hdr{color:var(--color-light)}
body.menu-abierto .hdr.claro .marca img{filter:none}
body.menu-abierto .hdr.retraido,
body.menu-abierto .hdr_fondo.retraido{transform:none}

/* ── MENÚ · casos con portada ──────────────────────────────────────
   El menú muestra trabajo y no sólo destinos: cada caso entra con su
   miniatura y se llega directo. Los nombres van en mono mayúscula, que
   es la voz con la que el sitio nombra las cosas —el header, la ficha,
   el pie—, y el bloque de abajo baja de cuerpo porque son destinos, no
   contenido. */
.menu_cuerpo{
  display:flex;flex-direction:column;
  min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.menu_pantalla ul{list-style:none}
.menu_grupo{
  margin:0 0 10px;
  font-size:var(--fontXXS);letter-spacing:.18em;text-transform:uppercase;
  color:#8b8d85;
}
.menu_grupo + ul + .menu_grupo{margin-top:30px}

.menu_casos{display:flex;flex-direction:column;gap:14px}
.menu_casos a{
  display:grid;grid-template-columns:1fr 92px;gap:16px;align-items:center;
  transition:opacity .2s ease-out;
}
.menu_casos a:active{opacity:.55}
.menu_caso_n{
  display:block;
  font-family:var(--sans);font-size:clamp(16px,4.6vw,20px);font-weight:400;
  line-height:120%;letter-spacing:.02em;text-transform:uppercase;
}
.menu_caso_t{
  display:block;margin-top:6px;
  font-size:var(--fontXXS);letter-spacing:.12em;text-transform:uppercase;
  color:#8b8d85;
}
.menu_casos img{
  width:92px;height:61px;object-fit:cover;display:block;
  background-color:#1a1a18;
}

/* más chico que los casos: acá se navega, no se mira */
.menu_otros{display:flex;flex-direction:column}
.menu_otros li + li{border-top:1px solid #ffffff1a}
.menu_otros a{
  display:block;padding:13px 0;
  font-family:var(--sans);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .2s ease-out;
}
.menu_otros a[aria-current]{color:#8b8d85}
.menu_otros a:active{color:#C9142B}

/* en tablet hay aire de sobra: crecen la miniatura y el nombre */
@media(min-width:600px){
  .menu_casos a{grid-template-columns:1fr 148px;gap:24px}
  .menu_casos img{width:148px;height:99px}
  .menu_caso_n{font-size:24px}
  .menu_otros a{font-size:16px;padding:15px 0}
}
.menu_pie{
  display:flex;flex-direction:column;gap:20px;
  padding-top:24px;border-top:1px solid #ffffff24;
}
.menu_pie>a{
  font-size:16px;font-weight:500;letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.menu_redes{display:flex;gap:0;align-items:stretch}
.menu_redes a{
  display:grid;place-items:center;
  width:46px;height:46px;
  border:1px solid #ffffff2e;margin-right:-1px;
}
@media (prefers-reduced-motion:reduce){
  .menu_pantalla{transition:none}
  .menu_ico i{transition:none}
}