/* Ordia. hoja de estilo.

   Dos decisiones que ordenan todo lo demas:

   1. El sitio es SOBRIO a proposito. La grilla del portfolio son quince paletas
      ajenas peleando entre si -dorado sobre negro, violeta, lima, magenta-, asi
      que si Ordia tambien grita no se ve ninguna. Papel, tinta y un solo azul,
      usado nada mas que en lo que se toca.
   2. Un solo movimiento y una sola curva. Lo que aparece, aparece igual.
*/

:root {
  --papel:        #FAFAF7;
  --papel-alto:   #F1F1EC;
  --papel-caja:   #FFFFFF;
  --tinta:        #12130F;
  --tinta-suave:  #3A3C35;
  --gris:         #6C6F65;
  --gris-firme:   #9A9D93;
  --linea:        #E1E1DA;
  /* El acento sale del logo, que es cian puro (tono 180). Pero el cian del logo
     sobre papel da 1,44:1 y es ilegible, asi que el acento de fondo claro es el
     MISMO tono bajado hasta que se lea, y el cian tal cual queda para los fondos
     oscuros, donde rinde 12,4:1. Tres piezas del mismo color, no tres colores. */
  --azul:         #006E6E;   /* acento sobre papel   5,8:1 */
  --azul-alto:    #007D7D;   /* su hover             5,0:1 con texto blanco */
  --cian:         #00EAEA;   /* el del logo, solo sobre fondo oscuro */
  --cian-medio:   #00A8A8;   /* bloques de color sobre oscuro */

  --oscuro:       #12130F;
  --oscuro-alto:  #1B1C17;
  --oscuro-linea: #2C2E27;

  --curva: cubic-bezier(.16,.84,.44,1);
  --ancho: 1120px;
}

* { box-sizing: border-box; }

/* El navegador esconde [hidden] con display:none, pero cualquier regla propia
   con display le gana: .boton es inline-flex y por eso el boton de mail, que
   nace oculto porque todavia no hay direccion, se veia igual y no llevaba a
   ningun lado. Lo que nace oculto tiene que quedar oculto. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* ninguna pieza puede empujar la pagina a lo ancho */
  overflow-x: hidden;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.65 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; }
h3 { font-size: 1.32rem; line-height: 1.25; }
em { font-style: italic; }
p  { margin: 0 0 1.1em; }
a  { color: inherit; }

.interior { width: min(100% - 44px, var(--ancho)); margin-inline: auto; }
.interior--angosto { max-width: 720px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--tinta); color: var(--papel); padding: 12px 18px;
}
.saltar:focus { left: 12px; top: 12px; }

/* ── el rotulo numerado: la idea de "orden" hecha visible ──────────── */
.rotulo {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 1.1em; font-weight: 500;
}

/* ── barra ─────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--curva);
}
.barra.bajada { border-bottom-color: var(--linea); }
/* Cuanto falta, dicho con una linea. Va pegada al borde de abajo de la barra y
   la mueve el scroll, no una animacion: no hay nada que apagar con menos
   movimiento, porque no se mueve sola. */
.barra__avance {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--azul); transform: scaleX(0); transform-origin: left;
}
.barra__interior {
  width: min(100% - 44px, var(--ancho)); margin-inline: auto;
  display: flex; align-items: center; gap: 28px; height: 66px;
}
.marca { text-decoration: none; margin-right: auto; display: flex; align-items: center; }
/* El logo va como imagen con su proporcion escrita en el HTML, para que el
   renglon de la barra no salte mientras carga. La altura la manda el CSS y el
   ancho sale solo. */
.marca__logo { display: block; height: 34px; width: auto; }
@media (max-width: 420px) { .marca__logo { height: 29px; } }
.barra__nav { display: flex; gap: 26px; }
.barra__nav a {
  text-decoration: none; font-size: .95rem; color: var(--tinta-suave);
  position: relative; padding-block: 4px;
}
.barra__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--curva);
}
.barra__nav a:hover::after, .barra__nav a:focus-visible::after { transform: scaleX(1); }
/* La seccion en la que estas queda subrayada. Reusa el subrayado del hover en
   vez de inventar otra marca: es el mismo gesto diciendo otra cosa. */
.barra__nav a.actual { color: var(--tinta); }
.barra__nav a.actual::after { transform: scaleX(1); }

/* El cambio de idioma es un enlace a la otra pagina, no un boton que traduce:
   las dos versiones existen escritas y cada una tiene su direccion. */
.idioma {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--gris); text-decoration: none;
  padding: 6px 9px; border: 1px solid var(--linea); border-radius: 2px;
  transition: color .3s var(--curva), border-color .3s var(--curva);
}
.idioma:hover, .idioma:focus-visible { color: var(--tinta); border-color: var(--tinta); }

/* ── botones ───────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: 2px; text-decoration: none;
  background: var(--tinta); color: var(--papel);
  font-size: .97rem; font-weight: 500; border: 1px solid var(--tinta);
  transition: background .25s var(--curva), color .25s var(--curva),
              border-color .25s var(--curva);
}
.boton:hover { background: var(--azul); border-color: var(--azul); }
.boton--chico { padding: 9px 17px; font-size: .9rem; }
.boton--vacio {
  background: transparent; color: var(--tinta);
  /* borde firme: un boton secundario tiene que llegar a 3:1 contra el fondo */
  border-color: var(--gris-firme);
}
.boton--vacio:hover { background: transparent; color: var(--azul); border-color: var(--azul); }
.boton--claro { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.boton--claro:hover { background: var(--azul-alto); border-color: var(--azul-alto); color: #fff; }
.boton--vacio.boton--claro { background: transparent; color: var(--papel); border-color: #6E7168; }
.boton--vacio.boton--claro:hover { color: #fff; border-color: var(--papel); }

/* ── la reticula del hero ──────────────────────────────────────────
   El efecto tiene que nombrar algo que exista adentro de ESTE trabajo, y lo que
   hay adentro de armar un sitio es la grilla sobre la que se alinea todo. Las
   lineas entran desalineadas y se acomodan. Va muy tenue a proposito: el sitio
   es sobrio para no pelearle a las quince paletas del portfolio. */
/* Se estira 70px para arriba y para abajo de la portada, que la recorta: esa
   sobra es lo que permite que el paralaje la corra sin dejar un hueco. */
.reticula {
  position: absolute; left: 0; right: 0; top: -40px;
  width: 100%; height: calc(100% + 540px); z-index: 1;
  pointer-events: none; opacity: .5;
  /* los colores del dibujo salen de aca, no del JS, para que la portada oscura
     los pueda cambiar sin tocar el motor */
  --linea-canvas: rgba(18, 19, 15, .07);
  --pulso-canvas: 0, 110, 110;
  transform: translateY(var(--desliz, 0px));
}

/* ── la ranura del video ───────────────────────────────────────────
   Existe y esta vacia a proposito. El dia que haya una filmacion PROPIA -una
   grabacion de pantalla de un sistema andando, no un banco de imagenes de
   gente tecleando en una oficina- se le pone la ruta en data-src del <video>
   y se enciende sola. Hasta entonces la portada es la grilla, que si sale de
   este trabajo. Un video generico se nota a un metro y ademas prometeria una
   oficina y un equipo que no hay.                                            */
.pelicula {
  /* Sobra mucho menor que la de la grilla, y a proposito: la caja se estira
     y el video la cubre con `cover`, asi que cuanta mas sobra, mas zoom sobre
     la filmacion. Con 540 de sobra el zoom llegaba a 1,9x y las letras del
     codigo se comian al titulo. Con 140 queda en 1,37x. Por eso el video se
     corre menos que la grilla: --desliz-video y no --desliz.                */
  position: absolute; left: 0; right: 0; top: -40px;
  width: 100%; height: calc(100% + 140px); object-fit: cover; z-index: 0;
  pointer-events: none;
  transform: translateY(var(--desliz-video, 0px));
}
/* Con video, la portada se da vuelta: fondo oscuro y tipografia clara.
   La razon es concreta. Un video de pantalla de codigo es oscuro, y sobre papel
   siempre se lava: con velo claro habia que elegir entre ver el video o leer el
   texto. Dada vuelta ganan las dos cosas, el video se ve y el texto queda con
   MAS contraste que antes. Si algun dia el video se saca, se cae la clase y la
   portada vuelve sola a ser de papel: no hay nada que deshacer.

   El velo tampoco es parejo: casi opaco del lado del texto y abierto del otro,
   para que el video respire donde no molesta. Los dos extremos se tocan en
   --velo-texto y --velo-libre.                                               */
.portada.con-video { background: var(--oscuro); color: var(--papel); }
.portada.con-video::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      transparent 52%,
      color-mix(in srgb, var(--oscuro) 55%, transparent) 84%,
      color-mix(in srgb, var(--oscuro) 78%, transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--oscuro) var(--velo-texto, 88%), transparent) 0%,
      color-mix(in srgb, var(--oscuro) var(--velo-texto, 88%), transparent) 32%,
      color-mix(in srgb, var(--oscuro) 55%, transparent) 70%,
      color-mix(in srgb, var(--oscuro) var(--velo-libre, 32%), transparent) 100%);
}
.portada.con-video .reticula { --linea-canvas: rgba(250, 250, 247, .11); --pulso-canvas: 0, 234, 234; }
.portada.con-video .rotulo { color: var(--gris-firme); }
.portada.con-video .portada__bajada { color: #C9CBC2; }
.portada.con-video .tipeo { color: var(--cian); }
.portada.con-video .portada__dato { color: #C9CBC2; }
.portada.con-video .portada__dato strong { color: var(--papel); }
.portada.con-video [data-pieza="dato"]::before { background: var(--oscuro-linea); }
/* los botones pasan al mismo juego que usan las secciones oscuras */
.portada.con-video .boton {
  background: var(--papel); color: var(--tinta); border-color: var(--papel);
}
.portada.con-video .boton:hover { background: var(--azul-alto); border-color: var(--azul-alto); color: #fff; }
.portada.con-video .boton--vacio { background: transparent; color: var(--papel); border-color: #6E7168; }
.portada.con-video .boton--vacio:hover { color: #fff; border-color: var(--papel); }

/* En pantalla angosta el texto ocupa todo el ancho: el degradado se da vuelta,
   opaco arriba y abierto abajo. */
@media (max-width: 760px) {
  .portada.con-video::before {
    /* abre en una franja del medio y vuelve a cerrar abajo: el ultimo renglon
       es el dato, y es texto chico que no puede quedar sobre el video suelto */
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--oscuro) var(--velo-texto, 88%), transparent) 0%,
      color-mix(in srgb, var(--oscuro) var(--velo-texto, 88%), transparent) 42%,
      color-mix(in srgb, var(--oscuro) 46%, transparent) 66%,
      color-mix(in srgb, var(--oscuro) 88%, transparent) 100%);
  }
}

/* ── portada ───────────────────────────────────────────────────────── */
/* overflow oculto: es lo que recorta la sobra del canvas y del video mientras
   el paralaje los corre. */
.portada {
  position: relative; overflow: hidden;
  padding: clamp(70px, 13vw, 140px) 0 clamp(60px, 9vw, 100px);
}
/* El texto se va un poco mas rapido que el fondo y se desvanece: eso es todo el
   paralaje. Los dos valores los escribe el JS a partir del scroll. */
.portada > .interior {
  position: relative; z-index: 2;
  transform: translateY(var(--sube, 0px)); opacity: var(--velo, 1);
}
/* 18ch y no 15: cada <span class="linea"> tiene que entrar en UNA linea
   visual, porque el barrido de la coreografia va linea por linea. Con 15ch
   "al sistema en marcha." se partia en dos y el gesto se rompia. Si se cambia
   el titulo, se vuelve a medir: el limite practico son ~21 caracteres.        */
.portada h1 { max-width: 18ch; margin-bottom: .5em; }
/* ── el tipeo ──────────────────────────────────────────────────────
   Cuatro servicios escritos uno atras de otro, rapido, con el cursor latiendo.
   Es el unico movimiento de la portada que dice algo: mientras el video pone
   ambiente, esto enumera lo que se hace. Sin JS queda el primero escrito, que
   es una linea valida igual.                                                 */
.tipeo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.92rem, 1.4vw, 1.02rem); letter-spacing: .005em;
  color: var(--azul); margin: -.4em 0 1.9em; min-height: 1.7em;
}
.tipeo i {
  display: inline-block; width: .56em; height: 1.05em; margin-left: .16em;
  background: currentColor; vertical-align: -.16em;
  animation: latir 1.05s steps(1) infinite;
}
@keyframes latir { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }

.portada__bajada {
  font-size: clamp(1.06rem, 1.9vw, 1.25rem); color: var(--tinta-suave);
  max-width: 54ch; margin-bottom: 2.1em;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2.6em; }
.portada__dato {
  font-size: .97rem; color: var(--gris); padding-top: 1.5em;
  max-width: 46ch; margin: 0; position: relative;
}
.portada__dato strong { color: var(--tinta); font-weight: 600; }

/* ── secciones ─────────────────────────────────────────────────────── */
.seccion { padding: clamp(64px, 10vw, 116px) 0; }
.seccion h2 { max-width: 18ch; margin-bottom: .6em; }
.entrada { color: var(--tinta-suave); max-width: 62ch; }
/* Un enlace adentro de un parrafo tiene que verse que es un enlace, pero sin
   romper el renglon: subrayado fino en el mismo color del texto, mas tenue, que
   se llena al pasarle por encima. Con `currentColor` sirve igual sobre papel y
   sobre fondo oscuro, sin escribir dos reglas. */
.entrada a {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  transition: text-decoration-color .3s var(--curva);
}
.entrada a:hover, .entrada a:focus-visible { text-decoration-color: currentColor; }
.seccion--oscura { background: var(--oscuro); color: var(--papel); }
.seccion--oscura .rotulo { color: var(--gris-firme); }
.seccion--oscura .entrada { color: #C9CBC2; }

/* ── servicios: titulos a la izquierda, detalle a la derecha ───────
   Antes esto era un acordeon: al abrirse una fila empujaba a las de abajo y la
   pagina daba un salto. Ahora el detalle NO esta en el flujo: los cuatro
   titulos ocupan la mitad izquierda y el panel vive fijo en la derecha, asi que
   cambiar de servicio no mueve un pixel.

   Se cambia con el mouse encima o con el foco del teclado, sin clics y sin una
   linea de JavaScript. Con `:has()` el primero queda abierto mientras no haya
   ninguno elegido, para que el panel no arranque vacio.                      */
.servicios {
  list-style: none; margin: 2.6em 0 0; padding: 0 52% 0 0;
  position: relative; border-top: 1px solid var(--linea);
  min-height: 260px;
}
/* El renglon entra SOLO con opacidad, sin desplazarse. No es capricho: un
   `transform` convierte al elemento en bloque contenedor de lo posicionado, y
   entonces el panel de la derecha se ancla a la fila en vez de a la lista y
   salta de lugar cuando termina la animacion de entrada. */
.servicio[data-anima] { transform: none; }
.servicio { border-bottom: 1px solid var(--linea); padding: 20px 0; outline: none; }
.servicio h3 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem); line-height: 1.15; margin: 0;
  transition: transform .45s var(--curva), color .45s var(--curva);
}
.servicio h3::after {
  content: "→"; font-size: .55em; color: var(--gris);
  transition: transform .45s var(--curva), color .45s var(--curva);
}
.servicio:hover h3, .servicio:focus-within h3 { transform: translateX(8px); color: var(--azul); }
.servicio:hover h3::after, .servicio:focus-within h3::after { color: var(--azul); transform: translateX(6px); }

/* el panel: fuera del flujo, siempre en el mismo lugar */
.servicio__mas {
  position: absolute; top: 4px; right: 0; width: 48%;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s var(--curva), transform .4s var(--curva), visibility 0s .4s;
}
.servicio:hover .servicio__mas, .servicio:focus-within .servicio__mas {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* mientras no haya ninguno elegido, se muestra el primero */
.servicios:not(:has(.servicio:hover, .servicio:focus-within)) .servicio:first-child .servicio__mas {
  opacity: 1; visibility: visible; transform: none;
}
.servicios:not(:has(.servicio:hover, .servicio:focus-within)) .servicio:first-child h3 { color: var(--azul); }

.servicio__mas p { color: var(--tinta-suave); margin: 0 0 1em; }
.servicio__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.servicio__lista li {
  font-size: .85rem; color: var(--tinta-suave); background: var(--papel-alto);
  padding: 5px 10px; border-radius: 2px;
}

/* Sin lugar para dos columnas, o sin "encima", todo vuelve al flujo y abierto. */
@media (max-width: 860px), (hover: none) {
  .servicios { padding-right: 0; min-height: 0; }
  .servicio__mas {
    position: static; width: auto; opacity: 1; visibility: visible;
    transform: none; transition: none; margin-top: .9em;
  }
  .servicio h3::after { display: none; }
  .servicio:hover h3, .servicio:focus-within h3 { transform: none; color: inherit; }
  .servicios:not(:has(.servicio:hover, .servicio:focus-within)) .servicio:first-child h3 { color: inherit; }
}

/* ── pasos: la linea de tiempo ─────────────────────────────────────
   Tres etapas en fila no son tres etapas: son tres columnas. Lo que las
   convierte en un recorrido es la linea que las atraviesa, con un nudo por
   etapa, y que la linea se dibuje a medida que bajas. El avance lo escribe el
   JS en --avance a partir del scroll, asi que no es una animacion que corre
   sola: es el lector el que la mueve.                                        */
.pasos {
  list-style: none; margin: 3.2em 0 0; padding: 0; position: relative;
  display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.pasos::before, .pasos::after {
  content: ""; position: absolute; top: 0; left: 0; height: 1px;
}
.pasos::before { right: 0; background: var(--oscuro-linea); }
.pasos::after {
  width: 100%; background: var(--papel);
  transform: scaleX(var(--avance, 0)); transform-origin: left;
}
.pasos li { position: relative; padding-top: 34px; }
.pasos li::before {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--oscuro); border: 1px solid var(--gris-firme);
  transition: background .5s var(--curva), border-color .5s var(--curva);
}
.pasos li.vista::before { background: var(--papel); border-color: var(--papel); }

/* En el celular las etapas van una abajo de otra, asi que la linea tambien. */
@media (max-width: 760px) {
  .pasos { padding-left: 28px; }
  .pasos::before, .pasos::after {
    top: 6px; bottom: 6px; left: 4px; right: auto; width: 1px; height: auto;
  }
  .pasos::after { transform: scaleY(var(--avance, 0)); transform-origin: top; }
  .pasos li { padding-top: 0; }
  .pasos li::before { top: 8px; left: -28px; }
}
.pasos__n {
  font-family: "Instrument Serif", Georgia, serif; font-size: 2.1rem;
  color: var(--gris-firme); display: block; line-height: 1; margin-bottom: .35em;
}
.pasos h3 { margin-bottom: .5em; }
.pasos p { color: #C9CBC2; margin: 0; font-size: .98rem; }

/* ── la vitrina de casos ───────────────────────────────────────────
   Tarjetas grandes que se corren de a una: el texto sobre fondo oscuro y un
   campo de color cortado en diagonal.

   No hay fotos de estos proyectos y no las va a haber: son confidenciales. En
   vez de rellenar con una laptop generica de banco -que no es de nadie y se
   nota- el campo lleva la frase que resume el caso. Dice mas y no miente.

   El riel es scroll horizontal nativo con imanes: sin JavaScript se arrastra
   igual. Lo unico que agrega el JS son los puntos, que nacen ocultos.       */
.vitrina { margin-top: 2.8em; }
.vitrina__riel {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 940px);
  gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.vitrina__riel::-webkit-scrollbar { display: none; }
.vitrina__riel:focus-visible { outline: 2px solid var(--azul); outline-offset: 5px; }

.obra {
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-height: 400px; border-radius: 3px; overflow: hidden;
  background: var(--oscuro); color: var(--papel);
}
.obra__texto { padding: clamp(28px, 3.3vw, 46px); display: flex; flex-direction: column; }
.obra__rubro {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gris-firme); font-weight: 600; margin: 0 0 1.2em;
}
.obra h3 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); margin: 0 0 .65em; max-width: 19ch; }
.obra__cuerpo { color: #C9CBC2; margin: 0 0 1.5em; max-width: 44ch; }
.obra__marcas { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.obra__marcas li {
  font-size: .82rem; color: #C9CBC2; border: 1px solid var(--oscuro-linea);
  padding: 5px 10px; border-radius: 2px;
}

/* el corte: la banda azul es la diferencia entre los dos recortes */
.obra__campo { position: relative; background: var(--cian-medio); clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.obra__fondo {
  position: absolute; inset: 0; overflow: hidden;
  background-color: color-mix(in srgb, var(--cian) 22%, var(--oscuro));
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 7% 100%);
  display: grid; place-items: center; padding: 30px 30px 30px 19%;
}
.obra__fondo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* La paleta del sitio son cuatro colores y las fotos traen los suyos: amarillo
     de maquina, rojo de carpeta, tonos de piel. Se pasan a monocromo y se tiñen
     con el azul de la marca, asi la foto entra en la paleta en vez de pelearle.
     Es la misma idea de siempre: el material se adapta al sitio, no al reves. */
  filter: grayscale(1) contrast(1.06) brightness(.94);
}
.obra__fondo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--cian); mix-blend-mode: color; opacity: .78;
}
/* el velo: la foto es ambiente, la frase es lo que se lee. Lleva ademas la
   reticula encima, que es lo que hace que no parezca una foto pegada. */
.obra__fondo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(250, 250, 247, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 247, .07) 1px, transparent 1px),
    linear-gradient(105deg,
      color-mix(in srgb, var(--oscuro) 84%, transparent) 0%,
      color-mix(in srgb, var(--oscuro) 62%, transparent) 46%,
      color-mix(in srgb, var(--oscuro) 52%, transparent) 72%,
      color-mix(in srgb, var(--cian) 30%, transparent) 100%);
  background-size: 46px 46px, 46px 46px, auto;
}
.obra__fondo span {
  position: relative; z-index: 2;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.1;
  text-align: center; color: var(--papel);
}

/* el mando: flechas y puntos. Lo arma el JS entero, por eso el contenedor nace
   oculto: sin JavaScript el riel se arrastra igual y no queda un paginador que
   no hace nada. */
.vitrina__puntos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.vitrina__discos { display: flex; align-items: center; gap: 8px; }
.vitrina__flecha {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .35s var(--curva), color .35s var(--curva),
              background .35s var(--curva);
}
.vitrina__flecha:hover, .vitrina__flecha:focus-visible {
  border-color: var(--azul); color: var(--papel); background: var(--azul);
}
.vitrina__discos button {
  width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: var(--linea); cursor: pointer;
  transition: background .35s var(--curva), width .35s var(--curva);
}
.vitrina__discos button:hover { background: var(--gris-firme); }
.vitrina__discos button[aria-current="true"] { background: var(--azul); width: 44px; }

@media (max-width: 760px) {
  .obra { grid-template-columns: 1fr; min-height: 0; }
  /* el campo pasa arriba, con el corte en horizontal */
  .obra__campo { order: -1; min-height: 132px; clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); }
  .obra__fondo { clip-path: polygon(0 0, 100% 0, 100% 74%, 0 92%); padding: 24px; }
  .obra__fondo span { font-size: 1.5rem; }
  .obra h3 { max-width: none; }
}

/* ── los hechos ────────────────────────────────────────────────────── */
.hechos {
  list-style: none; margin: 2.6em 0 0; padding: 0;
  display: grid; gap: 26px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* cuatro, en dos filas parejas */
}
@media (max-width: 560px) { .hechos { grid-template-columns: 1fr; } }
.hechos li { border-top: 1px solid var(--oscuro-linea); padding-top: 18px; }
.hechos b {
  display: block; font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.55rem; font-weight: 400; line-height: 1.2; margin-bottom: .3em;
}
.hechos span { font-size: .92rem; color: #C9CBC2; }

/* ── cierre ────────────────────────────────────────────────────────── */
.cierre {
  background: var(--oscuro); color: var(--papel);
  padding: clamp(64px, 10vw, 116px) 0; text-align: center;
}
.cierre h2 { margin-inline: auto; margin-bottom: .5em; max-width: 16ch; }
.cierre p { color: #C9CBC2; max-width: 48ch; margin-inline: auto; }
.cierre__acciones {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 2em;
}
.cierre__pendiente {
  width: 100%; font-size: .9rem; color: var(--gris-firme);
  border: 1px dashed var(--oscuro-linea); border-radius: 3px; padding: 14px; margin: 0;
}

/* ── pie ───────────────────────────────────────────────────────────── */
.pie { background: var(--oscuro); color: var(--gris-firme); padding: 0 0 44px; }
.pie__marca {
  margin: 0 0 .9em; padding-top: 34px;
  border-top: 1px solid var(--oscuro-linea);
}
.pie__marca img { display: block; height: 44px; width: auto; }
.pie__linea { margin: 0 0 1.4em; font-size: .95rem; }
.pie__legal { margin: 0; font-size: .86rem; }
/* La otra version del sitio se ofrece tambien desde el pie, con el nombre del
   idioma escrito en ese idioma: el que llega en ingles no tiene por que
   reconocer la palabra "Espanol" en una barra. */
/* el acceso a la red va con su logo, no como texto suelto, y el logo hereda el
   color de la paleta con `currentColor`: es la convencion de las demos. */
.pie__redes { margin: 0 0 1.1em; }
.red { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--papel); }
.glifo { width: 18px; height: 18px; color: currentColor; }
.red span { font-size: .95rem; }
.red:hover span { text-decoration: underline; }

.pie__idioma { margin: 0 0 1.2em; }
.pie__idioma a { color: var(--papel); font-size: .95rem; }

/* ── movimiento ────────────────────────────────────────────────────
   Fuera del hero, todo entra igual: sube y aparece. Adentro del hero NO, y esa
   es la correccion. Con las cinco piezas entrando igual, el hero se lee como una
   sola cosa que se desvanece; cada pieza tiene que tener su papel. Acá el orden
   es de lectura y el gesto es el mismo que el nombre: cosas que se ACOMODAN.
     rotulo   -> la letra viene abierta y se cierra a su lugar
     titulo   -> cada linea se descubre de izquierda a derecha
     bajada   -> sube y aparece
     acciones -> crecen desde 0,96
     dato     -> la linea de arriba se dibuja y despues aparece el texto
   Todo con la misma curva. */
/* Los tres gestos del hero vuelven a aparecer abajo, y eso es lo que hace que
   la pagina se lea como una sola pieza y no como una lista de efectos sueltos:

     data-anima            -> sube y aparece
     data-anima="rotulo"   -> la letra viene abierta y se cierra en su lugar
     data-anima="titulo"   -> el titulo se descubre de izquierda a derecha

   El retardo sale de --r, que el JS le pone a los hijos de cada grupo para que
   las cuatro tarjetas entren una atras de otra y no las cuatro de golpe. */
[data-anima] { opacity: 0; transform: translateY(14px); }
[data-anima].vista {
  opacity: 1; transform: none;
  transition: opacity .6s var(--curva) var(--r, 0ms),
              transform .6s var(--curva) var(--r, 0ms);
}

[data-anima="rotulo"] { transform: none; letter-spacing: .5em; }
[data-anima="rotulo"].vista {
  letter-spacing: .14em;
  transition: opacity .7s var(--curva), letter-spacing .9s var(--curva);
}

/* El recorte va en un span de adentro y NO en el h2. Si se recorta el h2, el
   IntersectionObserver lo mide con area cero, nunca dispara y el titulo no
   aparece nunca. Ya paso: es la misma razon por la que el hero recorta
   `.linea > span` y no la linea. */
[data-anima="titulo"] { opacity: 1; transform: none; }
[data-anima="titulo"] > span { display: block; clip-path: inset(0 100% 0 0); }
[data-anima="titulo"].vista > span {
  clip-path: inset(0 0 0 0);
  transition: clip-path .95s var(--curva);
}

[data-pieza] { opacity: 0; }
[data-pieza].vista { opacity: 1; }

[data-pieza="rotulo"] { letter-spacing: .5em; transition: opacity .7s var(--curva), letter-spacing .9s var(--curva); }
[data-pieza="rotulo"].vista { letter-spacing: .14em; }

.linea { display: block; overflow: hidden; }
.linea > span {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s var(--curva);
}
[data-pieza="titulo"] { opacity: 1; }
[data-pieza="titulo"].vista .linea > span { clip-path: inset(0 0 0 0); }
[data-pieza="titulo"].vista .linea:nth-child(2) > span { transition-delay: .14s; }

[data-pieza="tipeo"] { transform: translateY(16px); transition: opacity .7s var(--curva) .24s, transform .7s var(--curva) .24s; }
[data-pieza="tipeo"].vista { transform: none; }

[data-pieza="bajada"] { transform: translateY(16px); transition: opacity .7s var(--curva) .3s, transform .7s var(--curva) .3s; }
[data-pieza="bajada"].vista { transform: none; }

[data-pieza="acciones"] { transform: scale(.96); transform-origin: left center; transition: opacity .6s var(--curva) .46s, transform .6s var(--curva) .46s; }
[data-pieza="acciones"].vista { transform: none; }

[data-pieza="dato"] { transition: opacity .6s var(--curva) .62s; }
[data-pieza="dato"]::before {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--linea); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--curva) .58s;
}
[data-pieza="dato"].vista::before { transform: scaleX(1); }

@media (max-width: 720px) {
  .barra__nav { display: none; }
  .portada__dato { max-width: none; }
}

/* No es opcional: si el sistema pide menos movimiento, no hay movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anima] { opacity: 1; transform: none; transition: none; }
  [data-pieza] { opacity: 1; transform: none; transition: none; letter-spacing: .14em; }
  [data-pieza="dato"]::before { transform: scaleX(1); }
  [data-anima="rotulo"] { letter-spacing: .14em; }
  [data-anima="titulo"] > span { clip-path: none; transition: none; }
  .pasos { --avance: 1; }
  .vitrina__discos button, .vitrina__flecha { transition: none; }
  .pasos li::before { transition: none; }
  .servicio h3, .servicio h3::after, .servicio__mas { transition: none; }
  .servicio:hover h3, .servicio:focus-within h3 { transform: none; }
  .linea > span { clip-path: none; transition: none; }
  .tipeo i { animation: none; }
  .reticula { display: none; }
  .pelicula { display: none; }
  .portada > .interior { transform: none; opacity: 1; }
  .boton, .idioma, .barra__nav a::after { transition: none; }
}