/* ══════════════════════════════════════════════════════════════════
   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}

/* La capa de la transición va por encima de todo —header 14, contacto
   40, galería 50, puntero 60— y mientras corre bloquea el clic: si no,
   se puede disparar una segunda navegación a mitad de la primera. */
.transicion{
  position:fixed;inset:0;z-index:90;
  display:none;pointer-events:none;
}
.transicion.activa{display:block;pointer-events:auto}

/* El overlay de contacto vive acá y no en sitio.css: es un componente
   de todo el sitio, como el header o el menú. En sitio.css sólo lo
   cargaban el home y nosotros — en las cinco fichas de
   proyecto el marcado existía sin una sola regla, así que al abrirlo
   aparecía como texto suelto encima de la página. */
/* ── OVERLAY DE CONTACTO ──────────────────────────────────────── */
/* Contacto va en lima sobre negro y no al revés que el resto del sitio.
   Es la única pantalla del sitio con un color pleno, y ése es el punto:
   después de recorrer casos en claro y en oscuro, la de escribirnos
   tiene que cortar.

   #CCFF00 con la tinta encima da 16,7:1 de contraste —el lima con
   blanco daría 1,2 y sería ilegible—, así que el texto va en negro. */
.contact{
  position:fixed;inset:0;z-index:40;
  visibility:hidden;opacity:0;
  --lima:#CCFF00;
  background-color:var(--lima);color:var(--color-dark);
}
.contact.is-open{visibility:visible;opacity:1}
/* Todo apoyado abajo. Centrado, el correo quedaba flotando en medio de
   una pantalla de color con aire arriba y abajo; contra el pie tiene
   dónde apoyarse y el lima se lee como plano y no como relleno. */
.contact_inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;gap:38px;
  height:100%;padding:120px 40px 48px;
}
/* El correo en mayúsculas, con la flecha de salida al lado.
   inline-flex y align-items:baseline para que la flecha se apoye en la
   línea del texto y no en el centro de la caja, que a 92px son 20px de
   diferencia. */
.contact_mail{
  display:inline-flex;align-items:baseline;gap:.22em;
  font-family:var(--display);font-size:clamp(21px,5.4vw,84px);line-height:90%;
  letter-spacing:-.02em;width:fit-content;
}
/* Cuadrada y del alto del texto. 1em de caja: el glifo de Material
   ocupa unos dos tercios de su cuadro, así que a 1em la flecha dibujada
   mide casi exactamente lo que las mayúsculas, que es lo que hace que
   se lea como parte de la línea y no como un adorno colgado al lado.
   El translate no es un efecto: baja el cuadro hasta apoyar la flecha
   en la misma base que las letras. */
.contact_flecha{
  width:1em;height:1em;flex:0 0 auto;
  transform:translateY(.15em);
}
.contact_cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  font-size:var(--fontS);font-weight:500;text-transform:uppercase;line-height:150%;
}
/* El gris de los rótulos del resto del sitio da 1,9 sobre lima. Se
   resuelve con la misma tinta al 62%, que baja el peso sin perder
   legibilidad: 7,8:1. */
.contact_cols h4{color:#060403a0;padding-bottom:8px}
.contact_cols a{transition:opacity .2s ease-out}
.contact_cols a:hover{opacity:.5}
/* Sin mix-blend-mode: contra el lima, difference lo devolvía violeta.
   Sobre un fondo de un solo color no hace falta mezclar nada. */
.contact_close{
  position:absolute;top:26px;right:26px;z-index:3;
  font-size:13px;font-weight:500;text-transform:uppercase;cursor:pointer;
  color:var(--color-dark);transition:opacity .2s ease-out;
}
.contact_close:hover{opacity:.5}

@media(max-width:768px){
  .contact_inner{padding:90px 20px 32px;gap:28px}
  /* El piso del clamp tiene que dejar lugar a la flecha, que ahora mide
     un cuadro de 1em al lado del texto: en 375px quedan 335 útiles, y
     entre las 23 mayúsculas y el cuadro eso son unos 14,5 anchos de
     letra. Arriba de 22px el correo empujaba la flecha fuera de la
     pantalla. */
  .contact_mail{font-size:clamp(17px,5.9vw,30px);max-width:100%}
  .contact_cols{grid-template-columns:1fr;gap:20px}
}

/* ── 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:11px;padding:17px 24px;
  border-right:1px solid color-mix(in srgb, currentColor 26%, transparent);
  font-size:13px;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:12px 24px}
.hdr .marca img{width:66px;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}
/* La bandera va con la fuente de emoji del sistema, no con DM Mono: si
   la hereda, en algunos equipos cae a los dos caracteres sueltos "AR"
   en vez del dibujo. Y el mix-blend-mode del header le comía el color,
   así que se aísla. */
.bandera{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:1.05em;line-height:1;letter-spacing:0;
  isolation:isolate;mix-blend-mode:normal;
}
.hdr .reloj{gap:8px}
.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:20px 20px}
  .hdr .marca{padding:15px 20px}
  .hdr .marca img{width:74px}
  .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}

/* En contacto no hay puntero propio: vuelve el del sistema.
   El cubo va en mix-blend-mode difference, y sobre el lima eso devuelve
   violeta —invertir #CCFF00 da #3300FF—. Recolorearlo era tapar el
   problema: en una pantalla que es un solo plano de color con un correo
   y tres columnas, un puntero que invierte lo que pisa no aporta nada y
   encima estorba justo encima del texto que hay que leer.
   Las fichas de proyecto ya lo declaran apagado con data-cursor="no". */
body.contacto-abierto .cursor_cube,
body.contacto-abierto .cursor_label{display:none}

/* 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}
  /* con el overlay abierto manda el puntero del sistema */
  body.has-cursor.contacto-abierto,
  body.has-cursor.contacto-abierto *{cursor:auto}
  body.has-cursor.contacto-abierto a,
  body.has-cursor.contacto-abierto button{cursor:pointer}
  /* 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)}
/* ── EL LOGOTIPO DEL LOADER ────────────────────────────────────────
   Una copia sola que entra con un fundido corto y se queda quieta.
   Antes eran dos encimadas y el logo hacía de barra de progreso: se
   llenaba de izquierda a derecha con una línea corriendo en el borde.
   Contaba el porcentaje por segunda vez —el número ya está ahí— y le
   ponía a un momento de dos segundos más coreografía de la que aguanta.

   El fundido va con fill-mode backwards y no both: así el estado en 0
   se aplica ANTES de arrancar —sin destello en el primer cuadro— pero
   no queda fijado al terminar, que es lo que le impediría al cierre
   apagar el logo con su propio opacity. */
.loader_marca{
  position:fixed;top:50%;left:50%;z-index:6;
  width:88px;
  transform:translate(-50%,-50%);
  color:var(--color-light);mix-blend-mode:difference;
  pointer-events:none;
  animation:marca_entra .34s var(--ease) backwards;
}
.loader_marca svg{display:block;width:100%;height:auto;overflow:visible}
.loader_marca path{fill:currentColor}
@keyframes marca_entra{from{opacity:0}}

@media(max-width:768px){
  .loader_marca{width:96px}
}

@media(prefers-reduced-motion:reduce){
  .loader_marca{animation:none}
}

.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}

/* Como mucho tres casos: con cinco la lista empujaba el bloque de
   navegación fuera de pantalla y había que scrollear un menú, que es
   justo lo que un menú a pantalla completa no debería pedir. El resto
   se llega desde CASOS, que está ahí abajo. */
.menu_casos{display:flex;flex-direction:column;gap:14px}
.menu_casos li:nth-child(n+4){display:none}
.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;
}
/* El verde del recorrido en vez del rojo de la marca: el rojo es el
   acento del caso de Tu Box y en el menú no significaba nada. */
.menu_otros a[aria-current]{color:#8b8d85}
.menu_otros a:hover,
.menu_otros a:focus-visible,
.menu_otros a:active{color:#1B8A4B}
.menu_casos a:hover .menu_caso_n,
.menu_casos a:focus-visible .menu_caso_n{color:#1B8A4B}
.menu_caso_n{transition:color .2s ease-out}

/* 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}
}