/* ---- Tipografias propias ----
   Barlow Condensed para titulos e Inter para cuerpos, servidas desde el propio
   dominio: una dependencia externa menos y sin la latencia de Google Fonts.

   Convertidas de .ttf a .woff2 y recortadas a caracteres latinos (es/en/pt) mas
   las flechas del sitio: Inter paso de 875 KB a 128 KB y Barlow de 104 a 26 KB.
   Los .ttf originales quedan en origen/fuentes/ como material fuente.

   Inter es variable (ejes opsz y wght): un solo archivo cubre 400, 600 y 700,
   que son los tres pesos que usa el sitio. De titulos solo se usa el 700.

   font-display:swap lo pide el plan: el texto se ve con la fuente de respaldo
   mientras baja la propia, en vez de quedar invisible. */
@font-face{
  font-family:'Barlow Condensed';
  src:url('tipografia/barlow-condensed-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  /* Se usa en tres lugares (los datos duros de los casos, la lista de datos de
     la tarjeta y el número de consulta del formulario), siempre en peso normal.
     Antes venía de fonts.googleapis.com con tres pesos y un <link> que bloqueaba
     el render de las 31 páginas. Autohospedada y con un solo peso: 21 KB. */
  font-family:'JetBrains Mono';
  src:url('tipografia/jetbrains-mono-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('tipografia/inter-var.woff2') format('woff2-variations'),
      url('tipografia/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --titulos:'Barlow Condensed','Arial Narrow',sans-serif;
  --cuerpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* Giuliani — estilos base.
   Los estados :hover vivían como atributos style-hover, que era una extensión
   del runtime dc y no CSS válido. Acá están portados a clases reales. */

:root{
  --ink:#1C1B18;
  --ink-2:#2B2A26;
  --acento:#F15A00;
  --acento-700:#CC4A00;
  --papel:#F7F6F4;
  --papel-2:#EEECE8;
  --linea:#DBD8D2;
  --gris:#8E8A80;
  --texto-2:#403E39;
  --texto-3:#BDB9B0;
  --wa:#25d366;
  --wa-700:#1fb959;
}

*{box-sizing:border-box}

/* El navegador trae [hidden]{display:none}, pero cualquier `display` en un
   atributo style inline le gana, y esta maqueta usa estilos inline en casi
   todo. Sin el !important, todo lo que app.js oculta con .hidden — tarjetas
   del carrusel, formulario enviado, flechas, menú móvil — seguiría visible.
   Va primero para que las reglas de abajo puedan reactivar lo que corresponda. */
[hidden]{display:none!important}

html{scroll-behavior:smooth}
/* El header es sticky y mide 73px: sin esto, cualquier salto a una seccion
   —los enlaces del menu y el "ver menos" de los carruseles— deja el titulo
   tapado abajo de la barra. */
section[id],[id^="contacto"]{scroll-margin-top:85px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--cuerpo);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acento)}

input,select,textarea{font-family:var(--cuerpo)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:1px}

/* Foco visible en teclado para todo lo interactivo — no existía en la maqueta. */
a:focus-visible,button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

img{max-width:100%}

/* Solo para lectores de pantalla. Recorte en vez del viejo left:-9999px:
   no genera caja fuera del lienzo ni ensancha el documento. */
.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Salto al contenido, para lectores de pantalla y teclado. */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;
  font:700 13px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;
}
.saltar:focus{left:0;color:#fff}

/* ---- Estados hover (reemplazan a style-hover) ---- */
.h-ink:hover{color:var(--acento)}
.h-bd:hover{border-color:var(--acento)}
.h-out:hover{border-color:var(--acento);color:var(--acento)}
.h-bd-ink:hover{border-color:var(--acento);color:var(--ink)}
.h-btn:hover{background:var(--acento-700);color:#fff}
.h-fill:hover{background:var(--acento);color:#fff}
/* ---- Estado destacado de tarjeta ----
   Fondo gris + barrita naranja arriba. En escritorio se dispara con :hover;
   en el riel movil, sobre la tarjeta que esta a la vista (.es-activa, la marca
   app.js con un IntersectionObserver).

   El fondo base va aca y NO inline: un background inline le ganaria al :hover
   y el gris no aparecia nunca.

   La barrita se hace con inset box-shadow en vez de border-top para no correr
   el contenido 3px al entrar y salir del estado. */
.h-card{
  background:#fff;
  transition:background .18s ease,box-shadow .18s ease;
}
@media (prefers-reduced-motion:reduce){ .h-card{transition:none} }

/* Sin gate de (hover:hover): en tactil el hover pegajoso queda igual que el
   estado activo, asi que no molesta, y es una condicion menos que puede fallar. */
.h-card:hover{
  background:var(--papel-2);
  box-shadow:inset 0 3px 0 var(--acento);
}

/* En el riel movil no hay puntero: manda la tarjeta que esta a la vista. */
@media (max-width:767px){
  .h-card.es-activa{
    background:var(--papel-2);
    box-shadow:inset 0 3px 0 var(--acento);
  }
}
.h-dark:hover{background:var(--ink-2);color:#fff}
.h-wa:hover{background:var(--wa-700)}

/* ---- Interior de la tarjeta (variante D) ----
   El padding y la tipografia viven aca y no en atributos style: el estado
   elegido tiene que poder invertir el color del texto, y un color inline le
   ganaria a la regla del hover. Es el mismo motivo por el que .h-card trae el
   fondo desde el CSS. */
.h-card-cuerpo{
  position:relative;z-index:2;
  padding:30px 28px 24px;
  display:flex;flex-direction:column;gap:14px;
  min-height:252px;
}
.h-card-cuerpo h3{
  margin:0;
  font-family:var(--titulos);font-weight:700;text-transform:uppercase;
  font-size:25px;line-height:1.02;
  transition:color .25s ease;
}
.h-card-cuerpo p{
  margin:0;flex:1;
  color:var(--texto-2);font-size:14.5px;line-height:1.55;
  transition:color .25s ease;
}
.h-card-cuerpo .enlace-tarjeta{font:600 14px var(--cuerpo);color:var(--acento)}

/* ---- Foto que aparece al elegir la tarjeta ----
   El velo va como ::after del propio contenedor y no como un div aparte: es
   decoracion pura y no tiene por que existir en el HTML.

   .lista la pone app.js cuando la imagen termino de bajar. Sin eso, la foto
   entra a medio cargar y se ve el barrido de arriba hacia abajo. */
.revelado{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .38s ease}
.revelado img{width:100%;height:100%;object-fit:cover;display:block}
.revelado::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,27,24,.55) 0%,rgba(28,27,24,.88) 100%);
}
.h-card.con-foto:hover .revelado.lista{opacity:1}
.h-card.con-foto:hover h3{color:#fff}
.h-card.con-foto:hover p{color:var(--texto-3)}
/* Con foto el fondo gris no se ve, y la barrita naranja tiene que quedar por
   encima de la imagen: el inset box-shadow de .h-card queda debajo. */
.h-card.con-foto{overflow:hidden;isolation:isolate}
.h-card.con-foto::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--acento);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.h-card.con-foto:hover::before{transform:scaleX(1)}
.h-card.con-foto:hover{box-shadow:none}

/* En el riel movil no hay puntero: manda la tarjeta que quedo a la vista. */
@media (max-width:767px){
  .h-card.con-foto.es-activa .revelado.lista{opacity:1}
  .h-card.con-foto.es-activa h3{color:#fff}
  .h-card.con-foto.es-activa p{color:var(--texto-3)}
  .h-card.con-foto.es-activa::before{transform:scaleX(1)}
  .h-card.con-foto.es-activa{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .revelado,.h-card-cuerpo h3,.h-card-cuerpo p,.h-card.con-foto::before{transition:none}
}

/* ---- Tarjeta clickeable entera ----
   "Enlace estirado": el <a> de "Mas info" proyecta un pseudo-elemento que cubre
   toda la tarjeta. Se clickea en cualquier parte, pero sigue habiendo UN solo
   enlace real: los lectores de pantalla anuncian "Mas info sobre X" y no leen
   todo el bloque como si fuera el texto del enlace, que es lo que pasaria si
   envolvieramos la tarjeta entera en un <a>.

   Contrapartida conocida: sobre el area cubierta no se puede seleccionar texto.
   En una tarjeta de indice no molesta; en un bloque de lectura si. */
.h-card{position:relative}
.enlace-tarjeta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
/* El foco de teclado rodea la tarjeta entera y no solo las dos palabras. */
.h-card:focus-within{outline:2px solid var(--acento);outline-offset:2px}
.enlace-tarjeta:focus-visible{outline:none}

/* ---- Cuadro distintivo de la tarjeta ----
   Es el cuadrito oscuro con la flecha, el numero o el icono. Al elegir la
   tarjeta se invierte: fondo naranja y contenido en tinta.

   Va como clase y no inline porque un background inline le ganaria al :hover.
   El contenido usa currentColor (el SVG tambien) para invertirse de una. */
.marca{
  width:46px;height:46px;
  flex:none;
  display:grid;place-items:center;
  background:var(--ink);
  color:var(--acento);
  font-size:20px;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
/* Variante con numero de serie: en reposo va en blanco, no en naranja. */
.marca.es-numero{
  color:#fff;
  font:700 17px var(--titulos);
}
/* Variante grande, la de los procesos dentro de cada industria. */
.marca.es-grande{width:52px;height:52px}
/* Variante de tarjeta: sin la foto chica al lado, el icono es lo unico que hay
   arriba y puede respirar. */
.marca.es-tarjeta{width:72px;height:72px}
.marca.es-tarjeta img{width:44px;height:44px}

/* Variante con el icono de marca. Estos PNG traen su propio naranja, blanco y
   negro, asi que NO se invierten: sobre fondo naranja se les perderian los
   acentos (la cresta, las almohadillas, el engranaje). El estado elegido se
   marca con un contorno naranja hacia adentro, que no mueve el contenido. */
.marca.es-icono{background:var(--ink)}
.marca.es-icono img{width:34px;height:34px;object-fit:contain;display:block}
.marca.es-grande.es-icono img{width:48px;height:48px}

.h-card:hover .marca:not(.es-icono){background:var(--acento);color:var(--ink)}
.h-card:hover .marca.es-icono{box-shadow:inset 0 0 0 2px var(--acento)}
.h-card.con-foto:hover .marca.es-tarjeta{box-shadow:inset 0 0 0 3px var(--acento)}

@media (max-width:767px){
  .h-card.es-activa .marca:not(.es-icono){background:var(--acento);color:var(--ink)}
  .h-card.es-activa .marca.es-icono{box-shadow:inset 0 0 0 2px var(--acento)}
}
@media (prefers-reduced-motion:reduce){ .marca{transition:none} }

/* ---- Placeholder de imagen ----
   Sustituye al componente <image-slot> del runtime dc, que dependía de la
   herramienta de diseño. Mismo hueco visual; se reemplaza por un <img> real
   cuando llegue la foto. */
.ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px dashed var(--linea);
  background:var(--papel);
  color:var(--texto-2);
  font-size:12px;line-height:1.35;text-align:center;
  padding:10px;
}
.ph svg{opacity:.45;flex:none}

/* ---- Subcampos del formulario por pestaña ----
   display:contents hace que los <label> hijos entren en la grilla del form.
   El ocultado lo cubre la regla [hidden] de arriba. */
.subcampos{display:contents}

/* ---- Menú compacto ----
   Ojo: el `display` de estos tres tiene que vivir acá y NO en un style inline.
   Un `display:flex` inline le gana tanto a `[hidden]{display:none}` del
   navegador como a la media query, y el resultado es un menú que no se oculta
   nunca y una nav de escritorio que no desaparece en móvil. */
.nav-escritorio{display:flex}
.nav-compacta{display:none}

#menu-movil{display:flex;flex-direction:column}

/* El corte se mide, no se elige: es el ancho minimo con el que la fila del
   header entra sin romperse. Historia: con el logo a 30px alcanzaba 1159; a
   40px el logo paso de 130 a 173 de ancho y hubo que subir a 1199.
   Al agrupar Industrias/Procesos/Equipos bajo "Soluciones" la nav bajo de
   880 a 741 de ancho, asi que el corte baja a 1079: medido a 1080 quedan 55
   de holgura, y las pantallas de 1080 a 1199 pasan a tener la barra completa
   en vez de la hamburguesa.
   Si se agranda el logo, se suma un item o se alarga una etiqueta, hay que
   volver a medir. Ojo: app.js repite este numero en el resize del menu. */
@media (max-width:1079px){
  .nav-escritorio{display:none}
  .nav-compacta{display:flex}
}

/* ---- Desplegable "Soluciones" ----
   Patron disclosure: un boton y un panel que se tapa con [hidden]. El display
   del panel NO va inline por lo mismo de siempre: un display inline le gana a
   [hidden] y el panel no se cerraria nunca.

   Los enlaces de adentro estan en el HTML aunque el panel este cerrado, asi
   que siguen contando como enlaces internos. */
.nav-grupo{position:relative;display:flex;align-items:center}

.nav-disparador{
  position:relative;
  display:flex;align-items:center;gap:7px;
  background:none;border:0;margin:0;padding:0;
  color:var(--ink);cursor:pointer;
}
/* Mismo subrayado que los items sueltos, pero sin ocupar alto: es absoluto.
   Los 5px de abajo igualan al padding-bottom:3px + los 2 del borde. */
.nav-disparador.es-actual{color:var(--acento)}
.nav-disparador.es-actual::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--acento);
}
/* Triangulito en CSS y no un SVG: son 4 lineas y no suma un pedido. */
.nav-flecha{
  flex:none;width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .16s ease;
}
.nav-disparador[aria-expanded="true"] .nav-flecha{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .nav-flecha{transition:none} }

.nav-panel{
  position:absolute;z-index:60;
  /* Cuelga del borde inferior del header, no del texto del boton: 29px es la
     distancia medida entre la base del disparador y esa linea. Asi el panel
     arranca donde termina la barra en vez de partirla al medio. */
  top:calc(100% + 29px);
  /* -19 = 1 de borde + 6 de padding del panel + 12 del enlace: asi el titulo
     de la primera opcion queda a plomo con la palabra del disparador. */
  left:-19px;
  min-width:264px;
  padding:6px;
  background:#fff;
  border:1px solid var(--linea);
  box-shadow:0 14px 30px rgba(28,27,24,.13);
}
/* Puente invisible sobre el hueco entre el boton y el panel. Sin esto el
   puntero sale del grupo al bajar y el panel se cierra en la mitad del viaje.
   Es parte del subarbol del grupo, asi que el mouseleave no se dispara. */
.nav-panel::before{
  content:'';position:absolute;left:0;right:0;top:-29px;height:29px;
}

.nav-opcion{display:block;padding:11px 14px 12px 12px}
.nav-opcion:hover,.nav-opcion:focus-visible{background:var(--papel-2)}
.nav-opcion-tit{
  display:block;
  font:600 12.5px var(--cuerpo);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);
}
.nav-opcion:hover .nav-opcion-tit{color:var(--acento)}
/* La pista es dato, no titulo: minuscula, gris y sin espaciado de letras. */
.nav-opcion-pista{
  display:block;margin-top:3px;
  font:400 12px var(--cuerpo);color:#8E8A80;
  text-transform:none;letter-spacing:0;
}
/* Barrita a la izquierda en la opcion de la pagina en la que se esta: el mismo
   recurso que el subrayado de la barra, girado. */
.nav-opcion.es-actual{box-shadow:inset 2px 0 0 var(--acento)}
.nav-opcion.es-actual .nav-opcion-tit{color:var(--acento)}

/* ---- Franja de 4 propuestas ----
   Medido a 1440px: la franja media 105px de alto y tenia 56px de aire arriba y
   84px abajo. 140px de blanco alrededor de una tira de 105 es demasiado, y se
   notaba sobre todo despues del hero, donde la foto llega hasta el borde.

   Hoy la tira mide 89px: el padding vertical de cada celda bajo de 22px a 14px
   en partials/franja.php. La altura la manda la celda mas alta —las bajadas de
   dos renglones—, no el texto de una sola linea: por eso 39px de texto daban
   una celda de 99px.

   El de abajo NO es de la franja: es el padding-top de la seccion que sigue, y
   esa seccion trae el padding en un atributo style. Un atributo style le gana a
   cualquier regla del archivo, asi que hace falta !important. Es el mismo
   motivo por el que existe [hidden]{display:none!important} mas arriba: hasta
   que los estilos inline salgan del HTML, no hay otra forma de alcanzarlos.

   Se toca solo el padding de ARRIBA. El de abajo de esa seccion queda intacto,
   porque separa de la seccion siguiente y no tiene nada que ver con la franja. */
.franja{margin-top:clamp(16px,2vw,28px)}
.franja + section > div{padding-top:clamp(28px,3.4vw,50px) !important}

/* ---- Hero de la Home ----
   Tres piezas en la grilla: texto, botones y foto. Los botones van sueltos y
   no anidados en el texto justamente para poder reordenarlos: en telefono la
   foto tiene que quedar ENTRE el texto y los botones, y desde adentro del
   bloque de texto eso no se puede.

   Escritorio: texto y botones apilados en la columna 1, foto en la 2 ocupando
   las dos filas. Telefono: una sola columna, texto -> foto -> botones. */
.hero{
  max-width:1360px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4vw,64px);
}
/* Tres filas en la columna izquierda y la foto abarcando las tres. El titulo
   va aparte del texto para poder reordenarlo en telefono: dentro del mismo
   div no hay forma de meter la foto entre uno y otro. */
.hero-titulo{grid-column:1;grid-row:1;padding-top:clamp(40px,6vw,88px)}
.hero-texto{grid-column:1;grid-row:2}
.hero-botones{
  grid-column:1;grid-row:3;
  display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;
  padding:32px 0 clamp(40px,6vw,88px);
}
/* La foto NO se estira para igualar la altura de la columna de texto.
   Como celda de grilla que abarca las tres filas, por defecto se estira, y
   con object-fit:cover eso recorta los costados: en mezcladoras, que suma
   chips bajo el parrafo, el marco pasaba de relacion 0,90 a 0,69 y la
   maquina aparecia agrandada y sin aire a los lados.

   1280/1422 es la proporcion real de las fotos de equipo, asi que el marco
   queda del tamano de la foto y cover no recorta nada. Las 26 fichas ya
   estaban entre 0,90 y 0,94: para 25 el cambio es de unos 30px.

   align-self:start es lo que la libera del estirado; sin eso, aspect-ratio
   no alcanza. */
.hero-foto{
  grid-column:2;grid-row:1 / span 3;position:relative;min-height:340px;
  align-self:start;aspect-ratio:1280/1422;
}

/* ---- Parrafos de introduccion ----
   El texto largo de arriba de cada pagina va justificado. Alcanza a las ocho
   plantillas: .hero-texto p cubre Home, Nosotros, Servicios, los 18 procesos y
   las 26 fichas de equipo; la clase .intro esta puesta a mano en Repuestos,
   Equipos y las 12 industrias, que arman el hero de otra forma.

   El hyphens NO es opcional: justificar sin partir palabras abre rios de
   espacio en blanco, y en telefono la columna baja de 40 caracteres, donde el
   efecto es peor. Con la particion activada el navegador corta al final del
   renglon y el bloque queda parejo. Funciona porque el documento declara
   lang="es-AR": sin ese atributo el navegador no sabe con que reglas partir y
   no parte nada.

   El -webkit- sigue haciendo falta para Safari, que no soporta la propiedad
   sin prefijo. Si algun navegador no soporta ninguna de las dos, el texto
   igual se justifica; solo pierde la particion. */
/* ---- Grilla de preguntas frecuentes ----
   Una columna en telefono, dos desde 860px. El gap de columna es grande a
   proposito: con poco aire el ojo salta de una respuesta a la pregunta de al
   lado y se pierde cual contesta que. */
.faq-grilla{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,30px)}
@media (min-width:860px){.faq-grilla{grid-template-columns:1fr 1fr;column-gap:clamp(36px,5vw,72px)}}

.hero-texto p,.intro,.justo{
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* En telefono: titulo, foto, texto y recien ahi los botones. Se ve de que
   habla la pagina, se ve la planta, y el que sigue leyendo llega al boton
   habiendo visto las dos cosas. */
@media (max-width:859px){
  .hero{grid-template-columns:1fr}
  .hero-titulo{grid-column:1;grid-row:1}
  .hero-foto{grid-column:1;grid-row:2;min-height:300px;margin-top:26px;aspect-ratio:auto}
  .hero-texto{grid-column:1;grid-row:3;padding-top:26px}
  .hero-botones{grid-column:1;grid-row:4;padding-top:26px}
}

/* ---- Grilla de tarjetas ----
   El display va aca y NO en un style inline: en modo deslizable la media query
   necesita cambiarlo a flex, y un display inline le ganaria.

   Los filetes los dibuja CADA TARJETA —borde derecho e inferior— y el
   contenedor cierra arriba y a la izquierda. Antes eran un fondo gris que se
   asomaba por un gap de 1px, y eso fallaba cuando la ultima fila quedaba
   incompleta: 26 equipos en 3 columnas, 5 procesos, 4 equipos relacionados. Las
   celdas sobrantes no tapaban el fondo y quedaba un bloque gris de una o dos
   celdas al final de la grilla.

   Dibujandolos desde la tarjeta, donde no hay tarjeta no hay linea, y el hueco
   queda blanco sin importar cuantas columnas entren. Es el mismo criterio que
   ya usaba el modo deslizable de abajo de 768px, donde cada tarjeta trae su
   propio borde. */
.grilla-tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:0;
  border-top:1px solid var(--linea);
  border-left:1px solid var(--linea);
}
.grilla-tarjetas > *{
  border-right:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}

/* ---- Controles de carrusel ----
   Van como clases y no como style inline porque el CSS necesita poder
   apagarlos en modo deslizable; un display inline le ganaria a la media query. */
.ctrl{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;
  border:1px solid var(--linea);background:#fff;
  color:var(--acento);font-size:18px;cursor:pointer;
}
.btn-linea{
  border:1px solid var(--ink);background:#fff;cursor:pointer;
  font:700 13px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;
  padding:14px 22px;
}
.pista-deslizar{display:none}

/* ---- Grilla de casos destacados ----
   Una columna: cada caso ocupa el ancho completo. El carrusel muestra de a uno. */
.grilla-casos{display:grid;grid-template-columns:1fr;gap:14px}

/* ---- Grilla de servicios ----
   Los cuatro servicios en 2x2. Con auto-fit quedaban 3+1 en servicios.php y
   los cuatro en una fila en la home; son cuatro etapas del mismo recorrido y
   se leen mejor de a pares. El display va aca y no en un style inline: un
   inline le ganaria a la media query. */
.grilla-servicios{display:grid;grid-template-columns:1fr;gap:1px}

@media (min-width:700px){.grilla-servicios{grid-template-columns:repeat(2,1fr)}}

/* ---- Regla bajo los titulos ----
   La linea la dibuja el propio titulo, no un <div> aparte. Antes era un ancho
   fijo —min(560px,70%)— que no tenia relacion con el texto: con un titulo
   largo coincidia de casualidad y con uno corto sobraba media pantalla.

   width:fit-content encoge la caja al renglon mas largo y el ::after la copia.
   El max-width es lo que evita que un titulo sin <br> desborde: ahi fit-content
   se topa con el 100% y el texto vuelve a cortar como antes.

   Va como pseudo-elemento y no como border-bottom del <h2> porque los titulos
   traen margin:0 en el style inline, y un inline le gana a la clase. */
.tit-regla{width:fit-content;max-width:100%}
.tit-regla::after{
  content:'';display:block;
  height:var(--regla-alto,3px);
  background:var(--regla-color,#F15A00);
  width:var(--regla-ancho,100%);   /* lo mide app.js; sin JS, el 100% de la caja */
  margin:22px 0 var(--regla-abajo,26px);
}

/* Variante de los controles sobre el fondo oscuro de la seccion Proyectos. */
.ctrl.es-oscuro{border-color:var(--gris);background:transparent}
.btn-linea.es-oscuro{border-color:var(--gris);background:transparent;color:#fff}
.btn-linea.es-oscuro:hover{border-color:var(--acento);color:var(--acento)}
.pista-deslizar{color:var(--texto-2)}
.pista-deslizar.es-oscuro{color:var(--texto-3)}

/* ---- Modo deslizable (telefonos) ----
   Debajo de 768px la grilla se convierte en un riel horizontal con scroll-snap
   nativo: el dedo arrastra con la inercia del sistema, sin handlers de touch,
   y anda igual con el JS apagado. Arriba de 768px la grilla entra en 2-3
   columnas y vuelven los botones. */
@media (max-width:767px){
  [data-grilla]{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  [data-grilla]{
    /* Separacion real entre tarjetas: el filete de 1px del modo grilla dejaria
       ver la linea de fondo al achicarse las laterales. */
    gap:10px;
    background:transparent;
    border:0;
    /* Ancho de la tarjeta. 258px es el minimo real: padding 24 + flecha 46 +
       gap 16 + foto 150 + padding 24 = 260, con 2px de margen.

       El tope de 64vw (antes 68) es lo que le deja aire a los asomos laterales
       en los telefonos grandes: abajo de 404px de ancho manda el minimo de
       258px igual, asi que el asomo lo tiene que dar la vecina y no el ancho. */
    --ancho-tarjeta:clamp(258px,64vw,292px);

    /* Para que la PRIMERA y la ULTIMA puedan quedar centradas hace falta este
       relleno: sin el, el scroll no llega a poner los extremos en el medio. */
    padding-inline:calc((100% - var(--ancho-tarjeta)) / 2);

    /* Los dos bordes se desvanecen para que las vecinas no se lean como
       cortadas sino como "sigue". Ahora que la elegida va centrada, el fundido
       cae sobre los asomos laterales y nunca sobre ella.
       app.js pone en 0 el lado por el que ya no queda nada. */
    --fundido-izq:0px;
    --fundido-der:0px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fundido-izq),#000 calc(100% - var(--fundido-der)),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 var(--fundido-izq),#000 calc(100% - var(--fundido-der)),transparent 100%);
  }
  [data-grilla] > article{
    flex:0 0 var(--ancho-tarjeta);
    scroll-snap-align:center;
    border:1px solid var(--linea);
    /* Las vecinas se achican para que la elegida se lea mas grande. La elegida
       queda en scale(1) y no por encima: escalar hacia arriba recortaria contra
       el riel y ademas emborrona el texto.
       Uso transform+opacity y no filter:blur porque ambas se componen en GPU y
       no repintan en cada cuadro del scroll; un blur sobre texto lo ensucia y
       en Android de gama baja se nota.

       El .86 y el .45 de antes borraban el asomo: esa escala corre el borde de
       la vecina unos 20px hacia adentro y lo que quedaba, blanco al 45% sobre
       fondo blanco, no se veia. Con .97 el borde casi no se mueve y el asomo
       queda en unos 50px: se le llega a ver el cuadrito del icono y el arranque
       del titulo, que es lo que hace leer que la fila sigue. */
    transform:scale(.97);
    opacity:.78;
    /* El gris es lo que hace que el asomo exista contra el fondo blanco de la
       seccion: la tarjeta en reposo es blanca y sin esto solo se veria su
       filete de 1px. La elegida lo pisa con su foto o con el gris del estado
       activo, que ganan por especificidad (.h-card.es-activa). */
    background:var(--papel-2);
    transition:transform .25s ease,opacity .25s ease,background .18s ease,box-shadow .18s ease;
  }
  [data-grilla] > article.es-activa{
    transform:scale(1);
    opacity:1;
  }
  @media (prefers-reduced-motion:reduce){
    [data-grilla] > article{transition:none}
  }
  /* Un caso destacado necesita mas ancho: lleva imagen y datos. Pisa la
     VARIABLE y no el flex, para que el relleno de centrado se recalcule solo.
     84vw y no 88: con 88 el asomo quedaba en 10px y el riel se leia como una
     tarjeta suelta. Lo que asoma aca es la foto del caso siguiente, que sobre
     el fondo oscuro de la seccion se ve sin necesidad del gris de las otras. */
  [data-grilla].grilla-casos{--ancho-tarjeta:clamp(280px,84vw,560px)}

  /* En modo deslizable el dedo reemplaza a los botones. */
  [data-carrusel] .ctrl,
  [data-carrusel] .btn-linea{display:none}
  .pista-deslizar{display:block}
}

/* ---- Carrusel del hero ----
   La pista es un riel con scroll-snap nativo, igual que el riel de tarjetas en
   telefono: el dedo arrastra con la inercia del sistema y anda con el JS apagado.
   El JS solo agrega el autoavance y sincroniza las barras.

   Las fotos son 16:9 y el hueco es mas cuadrado. En vez de recortarlas, se
   panean: object-fit:cover llena el alto y object-position corre el encuadre de
   una punta a la otra, asi se ve la foto entera. El paneo dura lo mismo que la
   diapositiva y va con ease-in-out, para que frene suave y no de un tiron. */
.ch{position:absolute;inset:0;overflow:hidden;background:#F7F6F4}
.ch-pista{
  display:flex;height:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ch-pista::-webkit-scrollbar{display:none}
.ch-pista:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.ch-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;margin:0;height:100%}
.ch-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 50%;
}
/* Variante para tomas de estudio (Repuestos). Dos cambios sobre el carrusel
   del hero: la foto entra entera en vez de recortarse, porque lo que importa
   es la pieza y no llenar el cuadro; y el fondo pasa a blanco para que empalme
   con el propio fondo de la toma en vez de recortarse contra el gris. */
.ch.es-producto{background:#fff}
.ch.es-producto .ch-slide img{object-fit:contain}

/* El paneo arranca recien cuando la diapositiva es la activa. */
.ch-slide.es-visible.es-der img{animation:ch-paneo-der var(--ch-lapso,5s) ease-in-out both}
.ch-slide.es-visible.es-izq img{animation:ch-paneo-izq var(--ch-lapso,5s) ease-in-out both}
.ch.es-pausado .ch-slide img{animation-play-state:paused}
/* 'quieto': sin paneo. Hoy no lo usa ninguna diapositiva —Nosotros paso a
   fotos apaisadas a sangre, como la Home—, pero queda para cualquier foto que
   entre ya encuadrada y no tenga de donde panear. */
.ch-slide.es-quieto img{animation:none}
@keyframes ch-paneo-der{from{object-position:0% 50%}to{object-position:100% 50%}}
@keyframes ch-paneo-izq{from{object-position:100% 50%}to{object-position:0% 50%}}

.ch-pie{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:46px 158px 16px 18px;
  background:linear-gradient(180deg,rgba(28,27,24,0) 0%,rgba(28,27,24,.86) 100%);
  color:#fff;font:600 13.5px var(--cuerpo);letter-spacing:.02em;line-height:1.35;
  z-index:2;pointer-events:none;
}

.ch-barras{
  position:absolute;top:0;left:0;right:0;z-index:4;display:flex;gap:4px;padding:12px;
  /* Sin este velo las barras sin llenar desaparecen sobre un cielo claro. */
  background:linear-gradient(180deg,rgba(28,27,24,.42) 0%,rgba(28,27,24,0) 100%);
  padding-bottom:22px;
}
.ch-barra{flex:1;height:3px;background:rgba(255,255,255,.5)}
.ch-barra i{display:block;height:100%;width:0;background:var(--acento)}
.ch-barra.es-activa i{width:100%;animation:ch-llenar var(--ch-lapso,5s) linear both}
.ch.es-pausado .ch-barra.es-activa i{animation-play-state:paused}
@keyframes ch-llenar{from{width:0}to{width:100%}}

.ch-ctrl{position:absolute;right:12px;bottom:12px;z-index:5;display:flex;gap:6px}
.ch-btn{
  width:44px;height:44px;flex:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:rgba(28,27,24,.42);color:#fff;
  font:400 16px var(--cuerpo);display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.ch-btn:hover{background:var(--acento);border-color:var(--acento);color:var(--ink)}
.ch-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Pausa: dos barritas. Cuando esta pausado pasa a un triangulo de "seguir". */
.ch-ico-pausa{
  width:12px;height:13px;display:block;
  border-left:4px solid currentColor;border-right:4px solid currentColor;
}
.ch-btn[aria-pressed="true"] .ch-ico-pausa{
  width:0;height:0;border:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:12px solid currentColor;margin-left:3px;
}

/* Sin animacion: ni paneo ni barra de avance, y el autoavance lo apaga el JS. */
@media (prefers-reduced-motion:reduce){
  .ch-slide img,.ch-barra.es-activa i{animation:none}
  .ch-barra.es-activa i{width:100%}
  .ch-pista{scroll-behavior:auto}
}
@media (max-width:520px){
  .ch-pie{padding:40px 152px 14px 14px;font-size:12.5px}
  .ch-ctrl{right:10px;bottom:10px}
}

/* ---- Pie ----
   Cuatro columnas: marca, industrias, secciones del sitio y contacto.

   La version anterior era una tira de cinco celdas separadas por un gap de 1px
   sobre fondo gris. Sobre negro ese filete leia como una raya blanca, y ademas
   obligaba a que las celdas tuvieran fondo opaco para taparlo. Aca la division
   la hace el aire.

   La columna de industrias es la mas larga (12 items) y la de marca la mas
   ancha: por eso el grid no es de columnas iguales. En telefono todo se apila
   y la marca queda arriba. */
.pie{background:var(--ink);color:#fff;border-top:3px solid var(--acento)}
.pie-caja{max-width:1360px;margin:0 auto;padding:clamp(36px,4.5vw,64px) clamp(20px,4vw,48px) 0}
.pie-cols{
  display:grid;
  grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(150px,1fr));
  gap:clamp(28px,3.5vw,56px);
  align-items:start;
}
.pie-a{transition:color .18s ease}
.pie-a:hover{color:#fff}
.pie-a:hover span{color:#fff}
.pie-red{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid #3A3833;color:#BDB9B0;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.pie-red:hover{border-color:var(--acento);background:var(--acento);color:var(--ink)}
.pie-red:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.pie-cierre{
  margin-top:clamp(30px,4vw,52px);
  border-top:1px solid #2B2A26;
  padding:18px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:#6E6A62;
}

@media (max-width:900px){
  .pie-cols{grid-template-columns:repeat(2,minmax(150px,1fr))}
  .pie-marca{grid-column:1 / -1}
}
@media (max-width:520px){
  .pie-cols{grid-template-columns:1fr}
  .pie-cierre{flex-direction:column;gap:6px}
}

/* ---- Prestaciones de un equipo ----
   El zigzag: texto y foto en dos columnas, y en los bloques pares se invierte
   el ORDEN de las columnas. Nada mas. El diseno original ademas alineaba el
   parrafo a la derecha en esos bloques; no se copio, porque un parrafo con el
   margen izquierdo irregular obliga a buscar donde arranca cada renglon.

   El zigzag se hace con grid-column y no con direction ni con flex-direction
   row-reverse: asi el ORDEN DEL HTML no cambia, que es el que leen el lector
   de pantalla y el tabulador. En pantalla la foto salta de lado; para quien
   escucha la pagina, cada prestacion sigue siendo titulo, texto y foto.

   En telefono, una columna y la foto ARRIBA del texto: la foto es lo que
   distingue una prestacion de la otra de un vistazo, y si va debajo hay que
   leer el parrafo entero para saber si interesa. */
.prestaciones{display:grid;gap:clamp(34px,4.4vw,64px)}
.prest{display:grid;gap:clamp(16px,2vw,24px);align-items:center}
.prest-foto img{border:1px solid #DBD8D2}

@media (max-width:859px){
  .prest-foto{grid-row:1}
  .prest-texto{grid-row:2}
}

@media (min-width:860px){
  /* La calle entre columnas va en PORCENTAJE y no en px ni en vw: en el
     diseno del cliente la foto ocupa el 42% del ancho util (684 de 1624) y
     la calle el 15,8%. Un gap en vw no sostiene esa proporcion, porque el
     contenedor deja de crecer a los 1360px y el viewport sigue. Un gap en %
     se mide contra el contenedor, asi que las dos columnas quedan en 42,1%
     a cualquier ancho, que es exactamente lo que dibujo el diseno. */
  .prest{grid-template-columns:1fr 1fr;column-gap:15.8%;row-gap:clamp(16px,2vw,24px)}
  .prest-texto{grid-column:1;grid-row:1}
  .prest-foto{grid-column:2;grid-row:1}
  /* Los pares al reves. :nth-child(even) y no una clase en el PHP: es una
     decision de presentacion y no tiene por que viajar en el HTML. */
  .prest:nth-child(even) .prest-texto{grid-column:2}
  .prest:nth-child(even) .prest-foto{grid-column:1}
  /* La foto no pasa de 400px. La del hero mide 600 y es la del equipo entero:
     si una prestacion se le acerca en tamano, la pagina parece tener seis fotos
     principales y ninguna manda. A 400 se lee como apoyo de su parrafo.
     Va pegada al borde EXTERIOR de la columna —derecha en los impares,
     izquierda en los pares— para que el aire que sobra quede en el medio,
     junto a la calle, y no partido a los dos lados de la foto. */
  .prest-foto{max-width:400px}
  .prest:nth-child(odd) .prest-foto{justify-self:end}
  .prest:nth-child(even) .prest-foto{justify-self:start}
}

/* Tira de fotos al pie de las prestaciones.
   Cuatro columnas en pantalla y dos en telefono. A cuatro no bajan: con el
   ancho del sitio cada celda cae en unos 310px, que es el tamano nativo de las
   fotos; a cinco habria que agrandarlas y a tres sobrarian pixeles. */
.tira-equipo{
  margin:clamp(34px,4.4vw,64px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
}
.tira-equipo img{width:100%;height:auto;display:block}
/* Seis columnas a todo el ancho, tres en telefono. Seis es el numero que
   hace que la ultima fila nunca quede coja: 6/6 en pantalla y 3+3 en telefono.
   Con las celdas cuadradas, seis columnas dan unos 209px de lado —contra los
   315 que daban cuatro— sin dejar hueco a la derecha. Achicar las celdas y
   dejarlas a la izquierda era el camino equivocado: lo que baja el peso de la
   tira es que haya MAS fotos, no que sobre espacio. */
@media (min-width:700px){ .tira-equipo{grid-template-columns:repeat(6,1fr)} }


/* Chips de una linea de equipo, bajo el parrafo del hero.
   Uno por renglon y cada caja del ancho de su texto, como en el diseno del
   cliente: en fila corrida las cuatro entran en dos renglones desparejos y se
   leen como etiquetas sueltas; apilados se leen como una lista de cuatro
   afirmaciones, que es lo que son.

   La regla naranja de arriba los separa del parrafo sin meter un titulo: no
   hacen falta dos jerarquias para cuatro lineas. */
.hero-chips{
  margin:26px 0 0;padding:26px 0 0;list-style:none;
  max-width:52ch;border-top:2px solid var(--acento);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.hero-chips li{
  border:1px solid var(--acento);
  padding:10px 18px;
  font:600 11.5px var(--cuerpo);letter-spacing:.09em;text-transform:uppercase;
  color:#1C1B18;
}

/* Hero con tres fotos: la principal arriba, ocupando las dos columnas, y dos
   abajo. Es la disposicion del diseno del cliente, y resuelve de paso el
   problema que la motivo: la columna de texto con chips es alta, y una sola
   foto tenia que estirarse para acompanarla.

   Por eso este caso SI se estira —vuelve a align-self:stretch y sin
   aspect-ratio—: el estirado ahora lo absorbe la grilla repartiendo alto entre
   las dos filas, no una imagen deformandose. Cada foto conserva su proporcion
   con object-fit:cover.

   En telefono se apilan las tres, que a 375px es lo unico legible. */
.hero-foto.es-tres{
  /* El bloque entero toma la proporcion del diseno (615x820) y NO se estira
     para igualar la columna de texto: estirado, la foto de arriba llegaba a
     667px de alto contra los 474 del diseno. Que sobre un poco de blanco
     abajo es mejor que una foto inflada.

     Las filas van 486fr / 332fr, que son los altos del diseno: asi la grande
     y las dos chicas guardan entre si la relacion original a cualquier ancho. */
  align-self:start;aspect-ratio:615/820;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:486fr 332fr;gap:2px;
}
.hero-foto.es-tres figure{margin:0;position:relative;overflow:hidden}
.hero-foto.es-tres figure:first-child{grid-column:1 / -1}
.hero-foto.es-tres img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:859px){
  /* En telefono se apilan y cada una toma su propio alto, asi que ni la
     proporcion del bloque ni el reparto de filas tienen sentido. */
  .hero-foto.es-tres{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}
  .hero-foto.es-tres figure{aspect-ratio:1280/1000}
}

/* Selector de idioma en la barra.
   Tres siglas chicas, separadas por una linea fina. La actual va en negrita y
   sin enlace. Es el control menos usado de la barra, asi que no compite: ni
   color de marca ni caja, solo peso tipografico. */
.sel-idioma{
  display:inline-flex;align-items:center;gap:8px;margin-left:6px;
  font:600 11.5px var(--cuerpo);letter-spacing:.08em;
}
.sel-idioma a,.sel-idioma b{color:#8E8A80;text-decoration:none}
.sel-idioma b{color:#1C1B18}
.sel-idioma a:hover{color:var(--acento)}
.sel-idioma > * + *{border-left:1px solid #DBD8D2;padding-left:8px}