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

/* ---- Selector de idioma ----
   Control segmentado. El filete de 1px entre chips se logra con gap sobre un
   fondo de línea, igual que las grillas de tarjetas del resto del sitio.
   El activo va en tinta y no en naranja: el naranja queda reservado al CTA,
   que está pegado al lado y si no compiten dos bloques naranjas. */
.idiomas{
  display:flex;
  gap:1px;
  flex:none;
  background:var(--linea);
  border:1px solid var(--linea);
}
.idiomas > *{display:block}

/* ---- 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);
}
.hero-foto{grid-column:2;grid-row:1 / span 3;position:relative;min-height:340px}

/* 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}
  .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. */
    --ancho-tarjeta:clamp(258px,68vw,300px);

    /* 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 bastante para que la elegida se lea claramente 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. */
    transform:scale(.86);
    opacity:.45;
    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. */
  [data-grilla].grilla-casos{--ancho-tarjeta:clamp(280px,88vw,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%;
}
/* 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}
@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}
}