/* ============================================================
   M&P — Tema

   Los colores del sitio en un solo lugar, y la cabecera, que es
   lo único que aparece en las doce páginas por igual.

   Va después de style.css y no lo modifica: lo pisa por orden de
   cascada. style.css sigue siendo el archivo original.
   ============================================================ */

/* ------------------------------------------------------------
   Los tokens, declarados
   ------------------------------------------------------------
   @property le pone tipo a cada variable. Sirve para dos cosas
   concretas acá:

   1. Si un valor no se entiende —un navegador viejo que no lee
      oklch, o un script que escribe cualquier cosa en --mp-logo-x—
      la variable cae al initial-value en vez de quedar vacía. Sin
      esto, un color mal escrito deja el fondo transparente y se ve
      el blanco de abajo.
   2. El initial-value de cada color es el hexadecimal de siempre.
      Así el respaldo y el valor moderno viven en el mismo lugar,
      sin duplicar la paleta adentro de un @supports.
   ------------------------------------------------------------ */

@property --mp-hondo      { syntax: "<color>"; inherits: true; initial-value: #12171F; }
@property --mp-fondo      { syntax: "<color>"; inherits: true; initial-value: #151C26; }
@property --mp-alt        { syntax: "<color>"; inherits: true; initial-value: #19212C; }
@property --mp-panel      { syntax: "<color>"; inherits: true; initial-value: #1D2634; }
@property --mp-linea      { syntax: "<color>"; inherits: true; initial-value: #28323F; }
@property --mp-linea-viva { syntax: "<color>"; inherits: true; initial-value: #37455A; }
@property --mp-titulo     { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }
@property --mp-texto      { syntax: "<color>"; inherits: true; initial-value: #B9C6D3; }
@property --mp-suave      { syntax: "<color>"; inherits: true; initial-value: #8E9DAE; }
@property --mp-tenue      { syntax: "<color>"; inherits: true; initial-value: #7C8CA0; }
@property --mp-acento     { syntax: "<color>"; inherits: true; initial-value: #b3282d; }
@property --mp-acento-texto { syntax: "<color>"; inherits: true; initial-value: #E76B71; }

/* El corrimiento del logo cuando la cabecera se compacta. Lo calcula
   tema.js y lo escribe en píxeles; tipado como <length>, un valor
   raro no rompe el transform, vuelve a cero.

   inherits: true y no false. tema.js escribe la variable en la
   cabecera, pero quien la usa es el <a class="logo"> de adentro. Sin
   herencia el logo se quedaba con el initial-value —cero— y no se
   movía nunca: la cabecera se volvía transparente y el logo se
   quedaba pegado a la izquierda, encima del texto de la página. */
@property --mp-logo-x { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* Los dos retrasos que se suman para escalonar el bucle de los
   dibujos del home. Tipados como <time>, el calc() que los suma
   siempre resuelve. */
@property --mp-fila { syntax: "<time>"; inherits: true; initial-value: 0s; }
@property --mp-capa { syntax: "<time>"; inherits: true; initial-value: 0s; }

:root {
  /* El grafito es un solo tono al que le vamos subiendo la luz.
     Escrito en hexadecimal eso no se ve: #12171F y #1D2634 parecen
     dos colores sin relación. En oklch el primer número es la luz
     y el último el tono, así que la escala se lee de corrido y se
     puede mover entera cambiando un valor.

     Los tonos originales iban de 255 a 259 grados; unificados en
     257 la diferencia es de un punto sobre 255 en un solo canal,
     que no se ve. Los grises de texto, igual, unificados en 251. */
  --mp-tono: 257;      /* el grafito */
  --mp-tono-gris: 251; /* los textos */

  /* grafito, del más hondo al más claro */
  --mp-hondo:      oklch(20.33% 0.018 var(--mp-tono));  /* paneles a pantalla completa */
  --mp-fondo:      oklch(22.43% 0.022 var(--mp-tono));  /* cuerpo de las páginas */
  --mp-alt:        oklch(24.52% 0.024 var(--mp-tono));  /* franjas alternadas */
  --mp-panel:      oklch(26.67% 0.029 var(--mp-tono));  /* tarjetas y superficies */
  --mp-linea:      oklch(31.36% 0.027 var(--mp-tono));  /* filetes */
  --mp-linea-viva: oklch(38.72% 0.040 var(--mp-tono));

  /* texto */
  --mp-titulo: #FFFFFF;
  --mp-texto:  oklch(82.06% 0.023 var(--mp-tono-gris));  /* cuerpo */
  --mp-suave:  oklch(68.98% 0.030 var(--mp-tono-gris));  /* secundario */
  --mp-tenue:  oklch(63.42% 0.035 var(--mp-tono-gris));  /* datos y etiquetas */

  --mp-acento: oklch(50.46% 0.175 24.5);

  /* style.css usa --gris-acero (#4a4e54) para todo el texto
     secundario: bajadas de tarjeta, etiquetas de formulario,
     intros de servicio, pasos de proceso. Sobre el fondo claro
     de antes funcionaba; sobre grafito es casi invisible.

     Se puede redefinir sin miedo porque en style.css ese token
     solo se usa como color de texto, nunca como fondo. Cambiarlo
     acá arregla las doce reglas de una vez, en vez de perseguir
     cada selector. */
  --gris-acero: var(--mp-suave);

  /* El rojo institucional sobre grafito da 2,5:1. Como color de
     una barra o un filete da igual —ahí no hay nada que leer—
     pero como color de texto chico no se lee.

     Así que hay dos rojos: el de la marca, que sigue intacto en
     todo lo que es gráfico, y este otro para las palabras. Es el
     mismo rojo con la luz subida hasta pasar el umbral, y ahora se
     saca del otro: mismo tono, la luz subida 0,174 y la saturación
     bajada un 12% para que no chille. Si algún día cambia el rojo
     de la empresa, este lo sigue solo. Medido contra el fondo da
     5,5:1 y contra el panel 4,89:1, igual que el valor fijo que
     reemplaza. */
  --mp-acento-texto: oklch(from var(--mp-acento) calc(l + 0.174) calc(c * 0.88) h);
}

/* El cuerpo, en todas las páginas. En el home no se notaba porque
   cada sección pinta su propio fondo, pero abajo seguía estando el
   #f5f5f5 de style.css: asomaba en el rebote del scroll del celular
   y en el destello antes de que pinte la primera sección. */
body { background: var(--mp-fondo); }

/* ---------- el rojo, cuando es texto ---------- */

.eyebrow,
.stat .num,
.breadcrumb .current,
nav.main-nav a.active,
nav.main-nav a:hover,
.hero-plano .eyebrow,
.serv-ir,
.sv-ir,
.hilera-servicio,
.hilera-ir,
.footer-contacts .role,
.values .tag,
.specs-list .bullet,
nav.main-nav a.nav-highlight,
.card:hover .code { color: var(--mp-acento-texto); }

/* Dos grises que quedaron por debajo del umbral al pasar todo a
   grafito: la miga de pan y la línea de copyright del pie. */
.breadcrumb,
.breadcrumb a { color: oklch(70.57% 0.029 var(--mp-tono-gris)); }
.breadcrumb a:hover { color: var(--mp-titulo); }
.footer-bottom { color: oklch(65.88% 0.017 var(--mp-tono-gris)); }

/* ============================================================
   Cabecera

   Era una barra negra opaca que se quedaba igual todo el scroll.
   Ahora arranca sólida sobre la portada y, apenas se scrollea,
   pasa a vidrio: deja ver el contenido pasar por debajo.

   Translúcida y no transparente del todo a propósito. Con el
   fondo completamente transparente el menú queda ilegible en
   cuanto pasa una foto clara por atrás, y este sitio tiene
   fotos claras. El desenfoque mantiene el contraste sin volver
   a poner el bloque negro.

   La clase .scrolled la agrega script.js pasados 12 px. No hubo
   que tocar nada de JS.
   ============================================================ */

.site-header {
  background: var(--mp-fondo);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-header.scrolled {
  /* el vidrio es el fondo de la pagina con transparencia, no un
     gris elegido aparte: si cambia --mp-fondo, cambia con el */
  background: oklch(from var(--mp-fondo) l c h / .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: oklch(from var(--mp-acento) l c h / .62);
  box-shadow: 0 10px 30px rgba(6, 9, 14, .34);
}

/* Donde no hay backdrop-filter el vidrio no existe: ahí conviene
   quedarse casi opaco antes que dejar el menú ilegible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.scrolled { background: oklch(from var(--mp-fondo) l c h / .94); }
}

/* ---------- estado compacto: bajando ----------

   La clase la pone tema.js según la dirección del scroll. Acá la
   cabecera se borra del todo y queda el logo solo, corrido al
   medio. El desplazamiento exacto lo calcula el script y lo deja
   en --mp-logo-x, porque depende del ancho del contenedor. */

.site-header .container { position: relative; }

.site-header .logo {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.site-header .main-nav,
.site-header .nav-toggle {
  transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

.mp-compacta .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.mp-compacta .site-header .logo {
  transform: translateX(var(--mp-logo-x, 0));
}

/* Un velo detrás de la cabecera compacta.

   Sin fondo, el texto de la página le pasa por atrás al logo y
   chocan: se veía "EQUIPOS EN STOCK" cruzado con la marca. El velo
   arranca en el color del fondo y se apaga unos píxeles más abajo
   del borde, así el contenido entra a la zona del logo ya diluido y
   se sigue viendo pasar por debajo, que era la idea. */
.mp-compacta .site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 48px);
  background: linear-gradient(
    180deg,
    oklch(from var(--mp-fondo) l c h / .94) 0%,
    oklch(from var(--mp-fondo) l c h / .72) 42%,
    oklch(from var(--mp-fondo) l c h / 0) 100%);
  pointer-events: none;
  z-index: -1;
}

.mp-compacta .site-header .main-nav,
.mp-compacta .site-header .nav-toggle {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Sin la caja de fondo, el logo tiene que sostenerse solo sobre
   lo que pase por atrás. */
.mp-compacta .site-header .logo {
  text-shadow: 0 2px 14px rgba(6, 9, 14, .75);
}

.mp-compacta .site-header .logo img {
  filter: drop-shadow(0 2px 10px rgba(6, 9, 14, .8));
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .logo,
  .site-header .main-nav,
  .site-header .nav-toggle { transition: none; }
}

/* ============================================================
   Transiciones entre páginas
   ============================================================
   El sitio son doce documentos sueltos. Sin esto, cada clic es un
   parpadeo y después el dibujo nuevo; con esto el navegador guarda
   una foto de la página que se va y la funde con la que llega, sin
   JavaScript ni router.

   La regla va suelta, no adentro de una media query: Chrome lee el
   opt-in del documento que se va y ahí las condiciones no siempre
   se evalúan. Quien pidió menos movimiento no queda expuesto igual
   —más abajo se le apagan las animaciones y el cambio pasa a ser
   instantáneo, que es lo que se busca. */

@view-transition {
  navigation: auto;
}

/* Corto. Una transición de página que se nota es una que molesta a
   la tercera visita. */
::view-transition-old(root) {
  animation: mp-sale 180ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: mp-entra 260ms cubic-bezier(0, 0, .2, 1) both;
}

@keyframes mp-sale {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes mp-entra {
  from { opacity: 0; transform: translateY(10px); }
}

/* El encabezado, el pie y el botón de WhatsApp están en las doce
   páginas y en el mismo lugar. Si los dejo dentro de la foto de
   root se funden contra sí mismos y se ve un fantasma. Con nombre
   propio el navegador los trata como el mismo elemento que sigue
   ahí y no los mueve. */
.site-header    { view-transition-name: mp-encabezado; }
.site-footer    { view-transition-name: mp-pie; }
.whatsapp-float { view-transition-name: mp-whatsapp; }

::view-transition-group(mp-encabezado),
::view-transition-group(mp-pie),
::view-transition-group(mp-whatsapp) {
  animation-duration: 220ms;
}

/* Transiciones de la galería (abrir, cerrar y pasar de foto).

   galeria.js pone vt-galeria en <html> mientras duran. Los tres de
   arriba tienen que perder el nombre en ese rato: un elemento con
   nombre propio se dibuja en una capa aparte que queda por encima
   de todo, incluido el visor, y el logo y la barra aparecían
   flotando sobre la foto en cada cambio. Sin nombre vuelven a ser
   parte de la captura de root, tapados por el visor como siempre.

   Y root no se desplaza: los 6 y 10 px de arriba están pensados para
   pasar de una página a otra. Adentro del visor corrían el fondo y
   los botones en cada foto. Queda solo el fundido. */
html.vt-galeria .site-header,
html.vt-galeria .site-footer,
html.vt-galeria .whatsapp-float { view-transition-name: none; }

html.vt-galeria::view-transition-old(root) {
  animation: mp-sale-galeria 180ms cubic-bezier(.4, 0, 1, 1) both;
}
html.vt-galeria::view-transition-new(root) {
  animation: mp-entra-galeria 260ms cubic-bezier(0, 0, .2, 1) both;
}
@keyframes mp-sale-galeria  { to   { opacity: 0; } }
@keyframes mp-entra-galeria { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Pila de tipografías
   ------------------------------------------------------------
   style.css define --font-display, --font-body y --font-mono y no
   se toca. Acá se rehacen para meter en el medio los respaldos
   medidos de fuentes.css: mientras baja el archivo real, el texto
   se pinta con una del sistema escalada al mismo ancho, así el
   párrafo no se reacomoda cuando entra la buena. */
:root {
  --font-display: 'Oswald', 'Oswald respaldo', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans 3 respaldo', sans-serif;
  --font-mono: 'IBM Plex Mono', 'IBM Plex Mono respaldo', monospace;
}

/* ============================================================
   Cabecera compacta en el teléfono

   El velo de arriba deja pasar el contenido por debajo del logo a
   propósito, y en escritorio funciona porque el logo va al medio de
   una franja ancha con aire a los costados. En 375 px no hay aire:
   el logo cae encima de la primera línea de texto y se leía
   "Tartag[logo] Argentina". Acá el velo llega casi opaco hasta el
   borde de la cabecera y recién después se apaga.
   ============================================================ */
@media (max-width: 900px) {
  .mp-compacta .site-header::before {
    height: calc(100% + 28px);
    background: linear-gradient(
      180deg,
      oklch(from var(--mp-fondo) l c h / .97) 0%,
      oklch(from var(--mp-fondo) l c h / .95) 68%,
      oklch(from var(--mp-fondo) l c h / 0) 100%);
  }
}

/* ============================================================
   El botón de WhatsApp sigue la lógica de la cabecera

   Bajando es leer, y ahí el botón tapaba el final de las tarjetas y
   el enlace "Ver el servicio" en el teléfono. Se retira con la misma
   clase que compacta la cabecera y vuelve en cuanto se sube, que es
   cuando alguien busca algo. Sin JavaScript nuevo: tema.js ya pone
   y saca mp-compacta.
   ============================================================ */
.whatsapp-float {
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, box-shadow .2s ease;
}
.mp-compacta .whatsapp-float {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: opacity .2s ease; }
  .mp-compacta .whatsapp-float { transform: none; }
}

/* ============================================================
   Barra: los destacados, el botón y el menú del teléfono

   Había tres estilos de enlace en la misma fila: texto plano,
   píldora roja llena con pulso infinito para Slickline y píldora
   vacía para TRS, que además llevaba el nombre completo y medía más
   que el resto del menú junto. Ahora los dos destacados comparten
   una sola píldora fina, la activa se llena y nada late. El espacio
   que sobra lo ocupa lo que la cabecera no tenía: el botón de
   cotización.
   ============================================================ */
nav.main-nav a.nav-highlight {
  background: transparent;
  color: var(--mp-acento-texto);
  font-weight: 600;
  padding: 7px 14px;
  border: 1.5px solid oklch(from var(--mp-acento) l c h / .55);
  border-radius: 999px;
  box-shadow: none;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
nav.main-nav a.nav-highlight:hover {
  color: #FFFFFF;
  border-color: var(--mp-acento);
  transform: none;
  box-shadow: none;
}
nav.main-nav a.nav-highlight.active {
  background: var(--mp-acento);
  border-color: var(--mp-acento);
  color: #FFFFFF;
  animation: none;
}
nav.main-nav a.nav-highlight.active::after { display: none; }

/* El botón de cotización en la barra. La regla genérica de los
   enlaces del menú le ganaba a .btn por especificidad y le dejaba
   el relleno de un enlace de texto: por eso el selector largo. */
nav.main-nav li.nav-cta { margin-left: 6px; }
nav.main-nav li.nav-cta a.btn {
  padding: 10px 18px;
  font-size: .82rem;
  letter-spacing: .06em;
  border: 0;
  border-radius: 3px;
  color: #FFFFFF;
}
nav.main-nav li.nav-cta a.btn:hover { color: #FFFFFF; }

/* El teléfono de guardia es cosa del menú del teléfono. */
nav.main-nav li.nav-guardia { display: none; }

nav.main-nav a:focus-visible {
  outline: 2px solid var(--mp-acento-texto);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Con siete entradas más el botón, la fila necesita menos aire
   antes de pasar al menú plegado. */
@media (max-width: 1100px) {
  nav.main-nav ul { gap: 20px; }
}

/* ---------- el menú del teléfono ----------

   Era una caja colgada de la cabecera que terminaba en un borde
   seco, con la página siguiendo atrás como si nada. Ahora es una
   hoja a altura completa sobre vidrio: se entiende que se abrió
   algo y qué hay que cerrar. Abajo, siempre a mano, el teléfono de
   guardia y el botón de cotización, que es a lo que viene la mayor
   parte de la gente desde un celular. */
@media (max-width: 900px) {
  /* Absoluto y no fijo: la cabecera lleva backdrop-filter y eso la
     convierte en bloque contenedor de cualquier descendiente fijo,
     así que "bottom: 0" se medía contra la barra y la hoja quedaba
     de 400 px. Como la cabecera es sticky y va pegada arriba, medir
     desde su borde inferior da lo mismo que medir desde la ventana. */
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 76px);
    height: calc(100dvh - 76px);
    /* Opaca. Con vidrio al 96% el texto de la página se seguía
       leyendo a través de la hoja, y un menú no necesita mostrar
       lo que tapa. */
    background: var(--mp-fondo);
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  nav.main-nav.open {
    display: flex;
    flex-direction: column;
    /* style.css anima el menú viejo con max-height: 400px; acá la
       altura la da la ventana. */
    max-height: none;
  }
  nav.main-nav ul {
    flex: 1;
    /* La regla de escritorio centra los ítems como caja, y en columna
       eso los encoge al ancho del texto: el botón quedaba angosto y
       los filetes cortos. Se estiran las filas y se centra el texto. */
    align-items: stretch;
    text-align: center;
    padding: 6px 24px calc(24px + env(safe-area-inset-bottom));
  }
  nav.main-nav li { border-bottom: 1px solid var(--mp-linea); }
  nav.main-nav a {
    font-size: 1.15rem;
    padding: 16px 0;
  }
  nav.main-nav a.nav-highlight {
    display: inline-flex;
    font-size: .95rem;
    padding: 8px 16px;
    margin: 12px 0;
  }
  nav.main-nav li.nav-guardia {
    display: block;
    margin-top: auto;
    padding-top: 22px;
    border-bottom: 0;
  }
  nav.main-nav li.nav-guardia a {
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: none;
    color: var(--mp-suave);
    padding: 6px 0 10px;
  }
  nav.main-nav li.nav-cta { border-bottom: 0; margin: 0; }
  nav.main-nav li.nav-cta a.btn {
    display: block;
    text-align: center;
    padding: 16px;
    font-size: .95rem;
  }
}

/* ============================================================
   Pie: los contactos, compactos

   Las mismas cinco personas están en Contacto con toda la
   jerarquía. Acá alcanza con el filete rojo y dos líneas por
   persona; las cajas con fondo duplicaban el peso de la página de
   contacto al final de cada página.
   ============================================================ */
.footer-contacts { gap: 12px; }
.footer-contacts li {
  background: transparent;
  padding: 2px 0 2px 12px;
}
.footer-contacts .person { margin-bottom: 2px; }
.footer-contacts a { font-size: .82rem; line-height: 1.65; }

/* Con el menú abierto, el botón de WhatsApp caía justo encima del
   botón de cotización. Se retira mientras la hoja está desplegada. */
body:has(nav.main-nav.open) .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}


/* En modo sobrio el vidrio de la cabecera se apaga: el desenfoque de
   fondo es una pasada más de pantalla completa por cuadro, y en una
   máquina que dibuja por software es de lo más caro que hay. Queda
   casi opaca, como donde no hay backdrop-filter. */
html.mp-sobrio .site-header.scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: oklch(from var(--mp-fondo) l c h / .94);
}