/* ============================================================
   M&P — Portadas dibujadas

   Ninguna portada interior usa fotos. Cada página abre con un
   motivo técnico propio, dibujado en SVG: nítido en cualquier
   pantalla, pesa unos pocos kilobytes y no depende de que
   exista una buena foto de ese servicio.
   ============================================================ */

.hero-plano {
  position: relative;
  overflow: hidden;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  padding: 104px 0 48px;

  /* base grafito con vibración de color, no un negro plano */
  background:
    radial-gradient(120% 100% at 78% 18%, rgba(179,40,45,.16) 0%, rgba(179,40,45,0) 58%),
    radial-gradient(90% 80% at 12% 92%, rgba(110,140,168,.14) 0%, rgba(110,140,168,0) 60%),
    linear-gradient(165deg, #1C2531 0%, #141B24 62%, #131922 100%);
}

/* Acá iba una retícula de líneas de fondo. Se sacó: competía con
   el motivo dibujado, que ya es una figura de líneas, y ensuciaba
   el degradado. El fondo va limpio. */

/* grano finísimo: le saca el aspecto de plantilla */
.hero-plano::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- el motivo ---------- */
.hero-motivo {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: min(44%, 440px);
  aspect-ratio: 1;
  pointer-events: none;
}

.hero-motivo svg { width: 100%; height: 100%; display: block; overflow: visible; }

.hero-motivo .fino   { fill: none; stroke: #55677C; stroke-width: 1.1; }
.hero-motivo .medio  { fill: none; stroke: #8FA3B8; stroke-width: 1.8; }
.hero-motivo .fuerte { fill: none; stroke: #C6D2DE; stroke-width: 2.6; }
.hero-motivo .rojo   { fill: none; stroke: #b3282d; stroke-width: 2.4; }
.hero-motivo .tenue  { fill: none; stroke: #2B3746; stroke-width: 1; }
.hero-motivo .lleno-rojo  { fill: #b3282d; stroke: none; }
.hero-motivo .lleno-claro { fill: #C6D2DE; stroke: none; }
.hero-motivo text {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  fill: #6B7C8F;
}

/* trazado que se dibuja al entrar */
.js-ready .hero-motivo .traza {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: trazar 1.7s cubic-bezier(.22,.61,.36,1) forwards;
}

.js-ready .hero-motivo .traza-2 { animation-delay: .16s; }
.js-ready .hero-motivo .traza-3 { animation-delay: .32s; }

@keyframes trazar { to { stroke-dashoffset: 0; } }

/* ---------- texto ---------- */
.hero-plano > .container { position: relative; z-index: 2; }

.hero-plano .eyebrow {
  display: block;
  color: var(--mp-acento-texto, #E76B71);
  margin-bottom: 16px;
}

.hero-plano h1 {
  color: #FFFFFF;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.01;
  letter-spacing: -0.012em;
  max-width: 16ch;
  margin-bottom: 16px;
}

.hero-plano p,
.hero-plano .lead {
  color: #A9B8C7;
  max-width: 48ch;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.62;
}

.hero-plano .breadcrumb,
.hero-plano .breadcrumb a { color: #93A2B2; }

.hero-plano > .container::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: var(--rojo, #b3282d);
  margin-top: 28px;
}

/* entrada escalonada */
.js-ready .hero-plano .eyebrow,
.js-ready .hero-plano h1,
.js-ready .hero-plano p,
.js-ready .hero-plano .lead,
.js-ready .hero-plano .btn {
  opacity: 0;
  transform: translateY(16px);
  animation: heroEntra .6s ease forwards;
}

.js-ready .hero-plano .eyebrow { animation-delay: .04s; }
.js-ready .hero-plano h1       { animation-delay: .14s; }
.js-ready .hero-plano p,
.js-ready .hero-plano .lead    { animation-delay: .24s; }
.js-ready .hero-plano .btn     { animation-delay: .34s; }

@keyframes heroEntra { to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .hero-plano { min-height: 38vh; padding: 92px 0 34px; }
  .hero-motivo { width: 60%; right: -16%; opacity: .45; }
  .hero-plano h1 { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .hero-plano .eyebrow,
  .js-ready .hero-plano h1,
  .js-ready .hero-plano p,
  .js-ready .hero-plano .lead,
  .js-ready .hero-plano .btn { opacity: 1; transform: none; animation: none; }
  .js-ready .hero-motivo .traza { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* el trazado decorativo original competía con el motivo nuevo */
.hero-plano .welllog-svg { display: none; }

/* ============================================================
   Cuerpo de las páginas interiores

   Todo el sitio va en grafito, con la misma paleta del catálogo
   de servicios. El cuerpo era blanco y debajo de la portada
   oscura se leía como un corte a pique entre dos sitios
   distintos; ahora la portada y el cuerpo son el mismo material,
   apenas separados por un escalón de luz.

   Va acá y no en style.css porque style.css no se modifica, y
   porque esta hoja la cargan las once páginas que tienen cuerpo
   claro. El home no la necesita: sus secciones ya son oscuras.
   ============================================================ */

body {
  background: var(--mp-fondo);
  color: var(--mp-texto);
}

h1, h2, h3, h4 { color: var(--mp-titulo); }

/* Sin acotar a <main>: de las doce páginas, solo el home tiene esa
   etiqueta. Acotado ahí, esto no se aplicaba en ninguna de las que
   hacía falta. */
body p,
body li,
body dd,
body dt,
body td,
body th,
body figcaption { color: var(--mp-texto); }

/* ---------- superficies ---------- */

/* Las tarjetas ya no son papel sobre papel: son un plano apenas
   más claro que el fondo, cerrado por un filete. El borde rojo de
   arriba se queda, que es la firma de la casa. */
.card,
.specs-list li,
.industry-card,
.team-card,
.highlight-block,
.map-frame {
  background: var(--mp-panel);
  border-color: var(--mp-linea);
  color: var(--mp-texto);
}

.card h3,
.team-card h3,
.industry-card h3,
.highlight-block h3 { color: var(--mp-titulo); }

/* Los títulos que separan cada galería de producto en HYTORC
   estaban fijados a --negro y solo se aclaraban dentro de una
   franja oscura. Sobre el cuerpo nuevo quedaban en 1,09:1, o sea
   invisibles: el texto estaba ahí pero no se veía. */
.product-gallery-block h3 {
  color: var(--mp-titulo);
  border-bottom-color: var(--mp-linea);
}

.card p,
.team-card a,
.industry-card p,
.service-intro,
.field label,
.card .code { color: var(--mp-suave); }

.card:hover { border-color: var(--mp-linea-viva); }

.section-alt { background: var(--mp-alt); }

/* Las franjas que ya eran oscuras estaban en negro plano y ahora
   quedaban más oscuras que el cuerpo: pasan al mismo grafito con
   un rescoldo rojo, para que se distingan por luz y no por
   negrura. */
.section-dark {
  background:
    radial-gradient(90% 120% at 84% 6%, rgba(179,40,45,.12) 0%, transparent 62%),
    var(--mp-alt);
  color: var(--mp-texto);
}

.section-dark h2, .section-dark h3 { color: var(--mp-titulo); }

.section-head p { color: var(--mp-suave); }

/* ---------- listas y filetes ---------- */

.values li { border-bottom-color: var(--mp-linea); }
.team-card h3 { border-bottom-color: var(--mp-linea); }

/* ---------- formularios ---------- */

.field input,
.field textarea,
.field select {
  background: var(--mp-hondo);
  border-color: var(--mp-linea);
  color: var(--mp-titulo);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--mp-tenue); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline-color: var(--mp-acento);
  border-color: var(--mp-linea-viva);
}

/* ---------- clientes ----------

   Los archivos de logo vienen en JPG con fondo blanco. Antes les
   ponía un plano claro debajo, pero seis rectángulos blancos en
   una página de grafito es exactamente lo que no queríamos.

   Truco sin retocar un solo archivo: se invierte el logo —el
   blanco pasa a negro y el dibujo oscuro pasa a claro— y después
   se funde en modo "screen", que hace desaparecer el negro. Queda
   el logo claro flotando sobre el fondo, sin caja y sin recorte.

   El costo es que pierden su color de marca y quedan en un tono.
   En una tira de clientes eso es lo habitual y además los empareja
   entre sí, que con logos de calidades distintas se agradece. */
/* El tratamiento de los logos vive en el <style> de nosotros.html,
   que es la única página que los muestra y que trae su propia
   grilla. Tenerlo en dos lados era pedir que se desincronizaran. */

/* ---------- botón claro sobre fondo oscuro ---------- */

.btn-outline.dark {
  border-color: var(--mp-linea-viva);
  color: var(--mp-titulo);
}

.btn-outline.dark:hover {
  background: var(--mp-titulo);
  color: var(--mp-fondo);
}

/* ============================================================
   Ficha tecnica
   ============================================================
   La usa rental-tools para el ZJ70D. Es una lista de definiciones,
   no una tabla: son pares dato-valor sin relacion entre filas, y
   asi se lee bien en el celular sin scroll horizontal.
   ============================================================ */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 34px 46px;
  align-items: start;
  margin-top: 28px;
}

.ficha-esquema {
  margin: 0;
  position: sticky;
  top: 100px;
}

/* El plano viene en linea negra sobre blanco y sobre grafito hay que
   darlo vuelta. Se probo con filter: invert() y mix-blend-mode:
   screen, y no sirve: el .container de la seccion tiene la animacion
   de aparicion, con opacidad y transform, y eso arma un contexto de
   apilado propio. El screen entonces se mezcla contra la nada en vez
   de contra el fondo de la pagina, y el rectangulo del dibujo queda
   a la vista.

   Asi que la transparencia va en el archivo: el PNG trae el trazo en
   blanco y el fondo con alfa cero. Sin trucos de mezcla, y funciona
   igual adentro de cualquier contexto. */
.ficha-esquema img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .78;
  transition: opacity .3s ease;
}

.ficha-esquema:hover img { opacity: 1; }

.ficha-esquema figcaption {
  margin-top: 12px;
  font-family: var(--font-mono, monospace);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--mp-tenue);
  text-transform: uppercase;
}

.ficha-datos { margin: 0; }

.ficha-datos > div {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 13px 0;
  border-top: 1px solid var(--mp-linea);
}

.ficha-datos > div:first-child { border-top: 0; padding-top: 0; }

.ficha-datos dt {
  font-family: var(--font-mono, monospace);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mp-tenue);
  padding-top: 2px;
}

.ficha-datos dd {
  margin: 0;
  color: var(--mp-texto);
  font-size: .96rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ficha-esquema { position: static; max-width: 360px; }
}

@media (max-width: 560px) {
  .ficha-datos > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* ============================================================
   Plano de la unidad
   ============================================================
   El dibujo del camion de slickline. Va en SVG inline y no como
   imagen: toma currentColor, asi que sigue al color del texto sin
   tener que exportar una version clara y otra oscura, y no pierde
   nitidez en ninguna pantalla.
   ============================================================ */

.plano {
  margin: 28px 0 0;
  padding: 26px 20px 20px;
  border-top: 1px solid var(--mp-linea);
  border-bottom: 1px solid var(--mp-linea);
}

.plano svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--mp-texto);
  opacity: .82;
  transition: opacity .3s ease;
}

.plano:hover svg { opacity: 1; }

.plano figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mp-tenue);
}

.plano-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 28px;
  margin: 0;
}

.plano-datos > div { padding: 16px 0 4px; }

.plano-datos dt {
  font-family: var(--font-mono, monospace);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mp-tenue);
  margin-bottom: 6px;
}

.plano-datos dd {
  margin: 0;
  color: var(--mp-titulo);
  font-family: var(--font-display, sans-serif);
  font-size: 1.12rem;
  letter-spacing: .01em;
}

.plano-datos .plano-menor {
  margin-top: 5px;
  font-family: var(--font-body, sans-serif);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--mp-suave);
}

@media (max-width: 720px) {
  .plano { padding: 18px 0 14px; }

  /* En un telefono el dibujo entra en 327 px de ancho: una etiqueta
     de 17 unidades sobre un lienzo de 1400 termina midiendo cuatro
     pixeles, o sea nada. Se apagan las referencias y las guias, y el
     detalle lo levanta la leyenda de abajo, que es la misma
     informacion a tamano legible. El <desc> del SVG queda igual, asi
     que un lector de pantalla no pierde nada. */
  .plano svg .plano-ref,
  .plano svg .plano-guia { display: none; }

  .plano-datos { gap: 0; }
  .plano-datos > div {
    padding: 14px 0;
    border-top: 1px solid var(--mp-linea);
  }
  .plano-datos > div:first-child { border-top: 0; }
}

/* ============================================================
   El motivo en el teléfono

   Con la regla de 820 px el dibujo quedaba centrado a la altura del
   párrafo y lo cruzaba: en 375 px el well-log iba de 210 a 435 px y
   el texto de 24 a 351. Se leía a través de las líneas.

   Acá sube a la zona del ojal y el título, que son gruesos y lo
   tapan sin problema, y se apaga hacia abajo con una máscara antes
   de llegar al párrafo. Sigue siendo el mismo motivo, en el mismo
   lugar de la composición, pero ya no compite con lo que hay que
   leer.
   ============================================================ */
@media (max-width: 720px) {
  .hero-motivo {
    top: 56px;
    right: -14%;
    width: 58%;
    transform: none;
    opacity: .34;
    -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 42%, transparent 92%);
  }
}

/* ============================================================
   Contacto: las personas, en una sola tarjeta

   Tres cajas iguales apiladas, cada una con su borde, su sombra y
   su título subrayado, pesaban lo mismo que una sección entera y
   no decían más que una lista. Ahora cada base es una tarjeta con
   separadores, y el teléfono y el correo son píldoras: se ven como
   algo que se toca, que es lo que son en un celular.
   ============================================================ */
.team-contacts {
  gap: 0;
  background: var(--mp-panel);
  border: 1px solid var(--mp-linea);
  border-left: 3px solid var(--mp-acento);
  border-radius: 6px;
  overflow: hidden;
}
.team-card {
  border: 0;
  border-top: 1px solid var(--mp-linea);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 18px 22px 20px;
}
.team-card:first-child { border-top: 0; }
.team-card .eyebrow { margin-bottom: 4px; }
.team-card h3 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 10px;
  font-size: 1.05rem;
}
.team-card a {
  display: inline-flex;
  align-items: center;
  margin: 0 8px 6px 0;
  padding: 6px 12px;
  border: 1px solid var(--mp-linea-viva);
  border-radius: 999px;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--mp-texto);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.team-card a:hover,
.team-card a:focus-visible {
  color: #FFFFFF;
  border-color: var(--mp-acento);
  background: oklch(from var(--mp-acento) l c h / .12);
}

/* ============================================================
   El mapa de Contacto, en la misma luz que la página

   El embed de Google Maps viene en modo claro: un rectángulo
   blanco de 350 px al pie de una página grafito, y era lo único
   claro de todo el sitio. Invertido y con el tono girado 180°, el
   mapa queda oscuro y las calles claras, con los azules y verdes
   en su lugar; el desaturado y el brillo bajo lo integran con los
   paneles de al lado. Los rótulos siguen legibles.
   ============================================================ */
.map-frame {
  filter: invert(.92) hue-rotate(180deg) saturate(.72) brightness(.88) contrast(.95);
  border-color: var(--mp-linea);
}

/* La sigla mbbp lleva title con el desarrollo, y el navegador le pone
   de fábrica un subrayado punteado que sobre el grafito se lee como
   un error de tipeo. Se saca el subrayado y se deja el cursor de
   ayuda, que es lo que avisa que hay algo para leer al pasar por
   encima. El nowrap evita que la cifra quede en una línea y la unidad
   en la siguiente cuando la columna es angosta. */
.plano-datos abbr {
  text-decoration: none;
  border-bottom: 0;
  cursor: help;
  white-space: nowrap;
}