/* Comar Pinturas Industriales — hoja de estilos única.
   Sistema de identidad Comar v1.0. Orden: tokens, reset, base, layout,
   componentes, utilidades, movimiento. */

/* ============ 1. Tokens ============ */
:root{
  --gc-red:#D93315;
  --gc-red-press:#B62A10;
  --gc-carbon:#141414;
  --gc-carbon-2:#1E1E1E;
  --gc-white:#FFFFFF;
  --gc-gray:#F4F4F3;
  --gc-line-on-light:rgb(20 20 20 / .22);
  --gc-line-on-dark:rgb(255 255 255 / .18);
  --gc-muted-on-light:rgb(20 20 20 / .64);
  --gc-muted-on-dark:rgb(255 255 255 / .64);

  /* Velo plano funcional sobre fotografía, derivado del carbón. */
  --velo-oscuro:rgb(20 20 20 / .72);

  /* Escala de grises para el corte de capas, derivada del carbón por opacidad.
     PENDIENTE DE VALIDACIÓN CON EL DISEÑADOR (sistema, sección 10.D). */
  --diag-1:rgb(20 20 20 / .08);   /* sustrato */
  --diag-2:rgb(20 20 20 / .22);   /* imprimación */
  --diag-3:rgb(20 20 20 / .45);   /* cuerpo del sistema */
  --diag-4:rgb(20 20 20 / .72);   /* terminación */

  /* Tipografía */
  --t-h1:clamp(2.5rem, 1.6rem + 3.8vw, 5rem);
  --t-h2:clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --t-h3:clamp(1.375rem, 1.15rem + 0.95vw, 2rem);
  --t-h4:clamp(1.125rem, 1.05rem + 0.32vw, 1.375rem);
  --t-cuerpo:clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --t-cuerpo-ch:0.9375rem;
  --t-epigrafe:0.8125rem;
  --t-etiqueta:0.75rem;

  /* Espaciado y layout */
  --esp-05:4px;  --esp-1:8px;   --esp-15:12px; --esp-2:16px;
  --esp-3:24px;  --esp-4:32px;  --esp-5:48px;  --esp-6:72px;
  --esp-7:96px;  --esp-8:144px;
  --margen-pagina:clamp(20px,5vw,96px);
  --ancho-max:1440px;

  /* Movimiento */
  --mov-salida:cubic-bezier(.22,.61,.36,1);
  --mov-lineal:linear;
  --mov-suave:cubic-bezier(.4,0,.2,1);
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:280ms;
  --dur-4:420ms;
  --mov-y:12px;
  --mov-y-hero:16px;

  /* Color contextual: qué significa hover en cada superficie. */
  --enlace-hover:var(--gc-red);
}

@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('../fonts/instrument-sans-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ============ 2. Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh}
img,svg,video{display:block;max-width:100%}
input,button,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse}
a{color:inherit}

/* ============ 3. Base ============ */
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',sans-serif;
  font-size:var(--t-cuerpo);
  font-weight:400;
  line-height:1.6;
  color:var(--gc-carbon);
  background:var(--gc-white);
}
h1{font-size:var(--t-h1);font-weight:700;line-height:1.05;letter-spacing:-0.02em}
h2{font-size:var(--t-h2);font-weight:700;line-height:1.08;letter-spacing:-0.02em}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.2;letter-spacing:-0.01em}
h4{font-size:var(--t-h4);font-weight:600;line-height:1.3}
.cuerpo-chico{font-size:var(--t-cuerpo-ch);line-height:1.55}
.epigrafe{font-size:var(--t-epigrafe);line-height:1.45}
.etiqueta{
  font-size:var(--t-etiqueta);
  font-weight:600;
  line-height:1.2;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
a{text-decoration-thickness:1px;text-underline-offset:3px}
/* El color de hover vive dentro de @media (hover:hover): en táctil el color
   quedaba pegado después del tap. Ver sección de botones. */
:focus-visible{outline:2px solid var(--gc-red);outline-offset:3px;transition:none}
:target,[id]{scroll-margin-top:96px}
::selection{background:var(--gc-red);color:var(--gc-white)}

.salto{
  position:absolute;left:0;top:0;z-index:100;
  transform:translateY(-200%);
  background:var(--gc-carbon);color:var(--gc-white);
  padding:var(--esp-2) var(--esp-3);
}
.salto:focus{transform:none}

/* ============ 4. Layout y superficies ============ */
.contenedor{
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:var(--margen-pagina);
}
.seccion{padding-block:var(--esp-7)}
.seccion-chica{padding-block:var(--esp-6)}
/* Ritmo vertical: las secciones de respiro sobre carbón llevan más aire que
   las de catálogo. */
.seccion.sobre-oscuro,
.seccion.sobre-oscuro-2{padding-block:var(--esp-8)}
/* Cierre de página: última sección antes del footer, que es del mismo
   carbón. El borde y el padding asimétrico marcan el corte. */
.seccion.seccion-cierre{padding-block:var(--esp-8) var(--esp-7);border-bottom:1px solid var(--gc-line-on-dark)}
/* En la portada el cierre va sobre superficie clara (formulario embebido de HubSpot):
   el borde toma la línea para claro. Las demás páginas conservan el cierre sobre carbón. */
.seccion.seccion-cierre:not(.sobre-oscuro):not(.sobre-oscuro-2){border-bottom-color:var(--gc-line-on-light)}
.seccion-cierre .encabezado-seccion{margin-bottom:0}
.seccion-cierre .encabezado-seccion+p{margin-top:var(--esp-3)}
/* Divisor entre dos secciones blancas consecutivas. */
.seccion-separada{border-top:1px solid var(--gc-line-on-light)}
.sobre-oscuro.seccion-separada,.sobre-oscuro-2.seccion-separada{border-top-color:var(--gc-line-on-dark)}

.sobre-oscuro{
  background:var(--gc-carbon);
  color:var(--gc-white);
  --enlace-hover:var(--gc-white);
}
.sobre-oscuro-2{
  background:var(--gc-carbon-2);
  color:var(--gc-white);
  --enlace-hover:var(--gc-white);
}
.sobre-gris{background:var(--gc-gray)}
/* Sobre gris el rojo pleno da 4.30:1 y no llega a AA: se usa el rojo
   presionado, que da 7.4:1. Vale también para las filas pares de las tablas. */
.sobre-gris,
.tabla tbody tr:nth-child(even){--enlace-hover:var(--gc-red-press)}
.texto-secundario{color:var(--gc-muted-on-light)}
.sobre-oscuro .texto-secundario,
.sobre-oscuro-2 .texto-secundario{color:var(--gc-muted-on-dark)}

/* Etiqueta de sección con trazo rojo. La etiqueta no es roja, el trazo sí. */
.etiqueta-seccion{
  display:flex;align-items:center;gap:var(--esp-2);
  color:var(--gc-muted-on-light);
  margin-bottom:var(--esp-3);
}
.etiqueta-seccion::before{content:'';width:32px;height:1px;background:var(--gc-red)}
.sobre-oscuro .etiqueta-seccion,
.sobre-oscuro-2 .etiqueta-seccion{color:var(--gc-muted-on-dark)}

.fondo-grilla{
  background-image:
    repeating-linear-gradient(0deg,  rgb(20 20 20 / .035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgb(20 20 20 / .035) 0 1px, transparent 1px 48px);
}
.fondo-grilla.sobre-oscuro,
.fondo-grilla.sobre-oscuro-2{
  background-image:
    repeating-linear-gradient(0deg,  rgb(255 255 255 / .05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 48px);
}

.encabezado-seccion{max-width:52rem;margin-bottom:var(--esp-5)}
.encabezado-seccion p{margin-top:var(--esp-3);color:var(--gc-muted-on-light);max-width:38rem}
.sobre-oscuro .encabezado-seccion p,
.sobre-oscuro-2 .encabezado-seccion p{color:var(--gc-muted-on-dark)}

/* ============ 5. Header ============ */
.header{
  position:fixed;inset:0 0 auto;z-index:50;
  background:var(--gc-carbon);
  color:var(--gc-white);
  --enlace-hover:var(--gc-white);
  border-bottom:1px solid var(--gc-line-on-dark);
}
.header-barra{
  display:flex;align-items:center;gap:var(--esp-1);
  min-height:64px;
}
.header-logo{display:flex;align-items:center;min-width:120px}
.header-logo svg{height:30px;width:auto}
.header-nav{margin-inline:auto;overflow-x:auto}
.header-menu{display:flex;gap:var(--esp-3);white-space:nowrap}
.header-menu a{
  display:inline-block;
  padding-block:var(--esp-1);
  font-weight:600;
  font-size:var(--t-cuerpo-ch);
  text-decoration:none;
}
.header-menu a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--gc-red)}
.header .boton{padding:var(--esp-1) var(--esp-3);font-size:var(--t-cuerpo-ch);line-height:1.75}

/* Compensación del header fijo. En celular son dos filas. */
body{padding-top:77px}
@media (max-width:899px){
  .header-barra{flex-wrap:wrap;padding-block:var(--esp-1);row-gap:var(--esp-1)}
  .header-logo{order:1}
  .header .boton{order:2;margin-left:auto}
  .header-nav{order:3;flex-basis:100%;margin:0}
  .header-logo svg{height:26px}
  body{padding-top:117px}
  :target,[id]{scroll-margin-top:132px}
}
@media (min-width:900px){
  .header-barra{min-height:76px}
  .header.compacto .header-barra{min-height:64px}
}

/* ============ 6. Botones ============ */
.boton{
  display:inline-block;
  padding:var(--esp-15) var(--esp-4);
  font-weight:600;
  font-size:var(--t-cuerpo-ch);
  text-decoration:none;
  text-align:center;
  border:1px solid transparent;
  border-radius:0;
}
.boton-primario{background:var(--gc-red);color:var(--gc-white)}
.boton-primario:hover{color:var(--gc-white)}
.boton-primario:active{background:var(--gc-carbon);color:var(--gc-white)}
.boton-secundario{background:transparent;border-color:var(--gc-carbon);color:var(--gc-carbon)}
.boton-secundario:active{background:var(--gc-carbon);color:var(--gc-white)}
/* Sobre superficie oscura el secundario invierte figura y fondo. El hero y las
   cabeceras son carbón sin la clase sobre-oscuro: también van acá. */
.hero .boton-secundario,
.cabecera .boton-secundario,
.sobre-oscuro .boton-secundario,
.sobre-oscuro-2 .boton-secundario{background:transparent;border-color:var(--gc-white);color:var(--gc-white)}
.hero .boton-secundario:active,
.cabecera .boton-secundario:active,
.sobre-oscuro .boton-secundario:active,
.sobre-oscuro-2 .boton-secundario:active{background:var(--gc-white);color:var(--gc-carbon)}

@media (hover:hover) and (pointer:fine){
  .boton{transition:background-color var(--dur-1) var(--mov-lineal),color var(--dur-1) var(--mov-lineal),border-color var(--dur-1) var(--mov-lineal)}
  .boton-primario:hover{background:var(--gc-red-press)}
  .boton-secundario:hover{background:var(--gc-carbon);color:var(--gc-white)}
  .hero .boton-secundario:hover,
  .cabecera .boton-secundario:hover,
  .sobre-oscuro .boton-secundario:hover,
  .sobre-oscuro-2 .boton-secundario:hover{background:var(--gc-white);color:var(--gc-carbon)}
  a{transition:color var(--dur-1) var(--mov-lineal)}
  a:hover{color:var(--enlace-hover)}
  /* Sobre carbón el texto ya es blanco: el hover se ve por un subrayado de
     1px, no por el color. El rojo queda reservado para aria-current. */
  .header-menu a,.footer a{
    box-shadow:inset 0 -1px 0 transparent;
    transition:color var(--dur-1) var(--mov-lineal),box-shadow var(--dur-1) var(--mov-lineal);
  }
  .header-menu a:hover,.footer a:hover{box-shadow:inset 0 -1px 0 currentColor}
  .header-menu a[aria-current="page"]:hover{box-shadow:inset 0 -1px 0 var(--gc-red)}
  /* Los enlaces subrayados del hero, las cabeceras y los cierres engrosan
     el subrayado. */
  .hero a:not(.boton),.cabecera a:not(.boton),
  .sobre-oscuro a:not(.boton),.sobre-oscuro-2 a:not(.boton){transition:color var(--dur-1) var(--mov-lineal),text-decoration-thickness var(--dur-1) var(--mov-lineal)}
  .hero a:not(.boton):hover,.cabecera a:not(.boton):hover,
  .sobre-oscuro a:not(.boton):hover,.sobre-oscuro-2 a:not(.boton):hover{text-decoration-thickness:2px}
}

/* ============ 7. Hero y cabeceras ============ */
.hero{
  position:relative;
  background:var(--gc-carbon);
  color:var(--gc-white);
  --enlace-hover:var(--gc-white);
  overflow:hidden;
}
.foto-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero picture{position:absolute;inset:0;display:block}
.velo-contraste-oscuro{position:absolute;inset:0;background:var(--velo-oscuro)}
.hero-contenido{
  position:relative;
  padding-block:var(--esp-8) var(--esp-7);
  max-width:calc(56rem + 2*var(--margen-pagina));
  margin-inline:0;
}
/* Lockup en el hero: mínimo 120px de ancho, área de resguardo igual a la
   altura del isotipo (el lockup mide ~28% de su ancho de alto). */
.hero-logo{width:clamp(140px,15vw,200px);height:auto;margin-bottom:clamp(40px,4.2vw,56px)}
.hero-bajada{
  margin-top:var(--esp-4);
  max-width:38rem;
  color:var(--gc-muted-on-dark);
  font-size:var(--t-h4);
  font-weight:400;
  line-height:1.5;
}
.hero-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-top:var(--esp-5)}

.cabecera{
  background:var(--gc-carbon);
  color:var(--gc-white);
  --enlace-hover:var(--gc-white);
  padding-block:var(--esp-7) var(--esp-6);
}
.cabecera .etiqueta-seccion{color:var(--gc-muted-on-dark)}
.cabecera p{margin-top:var(--esp-3);max-width:38rem;color:var(--gc-muted-on-dark);font-size:var(--t-h4);font-weight:400;line-height:1.5}

/* ============ 8. Fichas de sistema y de industria ============ */
.grilla-fichas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--esp-4);
}
.ficha{display:block;text-decoration:none;color:inherit}
.ficha-foto{overflow:hidden}
.ficha-foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ficha h3{font-size:var(--t-h3);font-weight:700;line-height:1.2;margin-top:var(--esp-2);display:inline-block;position:relative}
.ficha h3::after{
  content:'';position:absolute;left:0;bottom:calc(-1 * var(--esp-05));
  width:100%;height:1px;background:var(--gc-red);
  transform:scaleX(0);transform-origin:left;
}
.ficha p{margin-top:var(--esp-1);color:var(--gc-muted-on-light);font-size:var(--t-cuerpo-ch)}

/* La jerarquía del recubrimiento epoxi: primera posición y nombre en rojo.
   Solo sobre superficie blanca; sobre gris el rojo pleno no llega a AA. */
.ficha-epoxi h3{color:var(--gc-red)}
@media (hover:hover) and (pointer:fine){
  .ficha-foto img{transition:opacity var(--dur-2) var(--mov-suave)}
  .ficha h3::after{transition:transform var(--dur-2) var(--mov-suave)}
  .ficha:hover .ficha-foto img{opacity:.92}
  .ficha:hover h3::after{transform:scaleX(1)}
  .ficha:hover{color:inherit}
}

.grilla-industrias{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--esp-4) var(--esp-5);
}
.industria{border-top:1px solid var(--gc-line-on-light);padding-top:var(--esp-3);position:relative}
.industria::before{content:'';position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--gc-red)}
.industria-icono{width:32px;height:32px;margin-bottom:var(--esp-2)}
.industria h3{font-size:var(--t-h4)}
.industria p{margin-top:var(--esp-1);color:var(--gc-muted-on-light);font-size:var(--t-cuerpo-ch)}
.industria .sistemas-relacionados{margin-top:var(--esp-2);font-size:var(--t-cuerpo-ch)}

/* ============ 9. Barra de cifras ============ */
.cifras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--esp-4);
}
.cifra{border-top:1px solid var(--gc-red);padding-top:var(--esp-3)}
.cifra strong{
  display:block;
  font-size:var(--t-h2);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.02em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  margin-top:-0.06em;
  text-indent:-0.02em;
}
.cifra span{display:block;margin-top:var(--esp-1);color:var(--gc-muted-on-dark);font-size:var(--t-cuerpo-ch)}

/* ============ 10. Tablas técnicas ============ */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--gc-line-on-light)}
.tabla{width:100%;min-width:720px;background:var(--gc-white)}
.tabla caption{text-align:left;padding-bottom:var(--esp-2)}
.tabla th,.tabla td{
  padding:var(--esp-2) var(--esp-3);
  text-align:left;
  font-size:var(--t-cuerpo-ch);
  line-height:1.55;
  border-bottom:1px solid var(--gc-line-on-light);
  vertical-align:top;
}
.tabla thead th{
  background:var(--gc-carbon);
  color:var(--gc-white);
  font-weight:600;
  border-bottom:0;
}
.tabla tbody tr:nth-child(even) td,
.tabla tbody tr:nth-child(even) th{background:var(--gc-gray)}
.tabla tbody tr:nth-child(odd) td,
.tabla tbody tr:nth-child(odd) th{background:var(--gc-white)}
.tabla tbody th{font-weight:600;position:sticky;left:0}
.tabla td.numerica{font-variant-numeric:tabular-nums}
/* Celda sin dato: el guion lo genera el CSS, no es texto del documento, y el
   lector de pantalla sigue leyendo el aria-label. */
.tabla td:empty::after{content:'—';color:var(--gc-muted-on-light)}
@media (hover:hover) and (pointer:fine){
  .tabla tbody tr td,.tabla tbody tr th{transition:background-color var(--dur-1) var(--mov-lineal)}
  /* Con la fila en gris, el hover de sus enlaces usa el rojo presionado en
     todas las filas, no solo en las pares. */
  .tabla tbody tr:hover{--enlace-hover:var(--gc-red-press)}
  .tabla tbody tr:hover td,.tabla tbody tr:hover th{background:var(--gc-gray)}
}
.nota-tabla{margin-top:var(--esp-2);font-size:var(--t-epigrafe);color:var(--gc-muted-on-light);max-width:32rem}
.sobre-oscuro .nota-tabla,.sobre-oscuro-2 .nota-tabla{color:var(--gc-muted-on-dark)}
.h3-visual+.tabla-envoltura,.h3-visual+.lista-raya{margin-top:var(--esp-2)}
.tabla-compacta{min-width:0}

/* ============ 11. Ficha de datos de sistema ============ */
.ficha-datos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--esp-3);
  border-top:1px solid var(--gc-line-on-light);
  border-bottom:1px solid var(--gc-line-on-light);
  padding-block:var(--esp-4);
}
.ficha-datos div h3{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gc-muted-on-light);line-height:1.2}
.ficha-datos div p{margin-top:var(--esp-1);font-weight:600;font-variant-numeric:tabular-nums}
/* Enlace a la ficha del fabricante: contenido, no nota al pie. */
.lista-fichas{display:grid;gap:var(--esp-1);margin-top:var(--esp-3)}
.lista-fichas span{color:var(--gc-muted-on-light)}

/* ============ 12. Corte de capas ============ */
.corte-capas{max-width:640px}
.corte-capas svg{width:100%;height:auto}
.corte-diag-1{fill:var(--diag-1)}
.corte-diag-2{fill:var(--diag-2)}
.corte-diag-3{fill:var(--diag-3)}
.corte-diag-4{fill:var(--diag-4)}
.corte-rotulo{font-family:'Instrument Sans',sans-serif;font-size:13px;fill:var(--gc-carbon)}
.corte-cota{stroke:var(--gc-red);stroke-width:1;fill:none}
.corte-cota-texto{font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;fill:var(--gc-carbon)}
.corte-linea{stroke:var(--gc-line-on-light);stroke-width:1;fill:none}

/* ============ 13. Galería y lightbox ============ */
.galeria{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--esp-3);
}
.galeria button{display:block;padding:0;width:100%}
.galeria img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (hover:hover) and (pointer:fine){
  .galeria img{transition:opacity var(--dur-2) var(--mov-suave)}
  .galeria button:hover img{opacity:.92}
}

.lightbox{
  position:fixed;inset:0;z-index:90;
  background:var(--velo-oscuro);
  display:flex;align-items:center;justify-content:center;
  padding:var(--esp-3);
}
.lightbox[hidden]{display:none}
.sin-scroll{overflow:hidden}
.lightbox-marco{position:relative;max-width:min(1200px,100%);width:100%}
.lightbox-marco img{width:100%;height:auto;max-height:82vh;object-fit:contain;background:var(--gc-carbon)}
.lightbox button{
  color:var(--gc-white);
  background:var(--gc-carbon);
  border:1px solid var(--gc-line-on-dark);
  min-width:44px;min-height:44px;
  font-weight:600;
}
.lightbox button:active{background:var(--gc-white);color:var(--gc-carbon)}
.lightbox-cerrar{position:absolute;top:0;right:0;z-index:2}
.lightbox-anterior,.lightbox-siguiente{position:absolute;top:50%;transform:translateY(-50%)}
.lightbox-anterior{left:0}
.lightbox-siguiente{right:0}
.lightbox-contador{
  position:absolute;left:0;bottom:0;
  color:var(--gc-white);
  background:var(--gc-carbon);
  padding:var(--esp-1) var(--esp-2);
  font-size:var(--t-epigrafe);
  font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .lightbox button{transition:background-color var(--dur-1) var(--mov-lineal),color var(--dur-1) var(--mov-lineal)}
  .lightbox button:hover{border-color:var(--gc-white)}
}

/* ============ 14. Logos de clientes ============ */
.grilla-clientes{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--esp-4) var(--esp-3);
  align-items:center;
}
.celda-cliente{display:flex;align-items:center;justify-content:center;min-height:64px}
.celda-cliente picture{display:contents}
.logo-cliente{
  filter:grayscale(1);
  opacity:.72;
  max-height:52px;
  width:auto;
  max-width:70%;
  object-fit:contain;
}
@media (max-width:899px){.grilla-clientes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:559px){.grilla-clientes{grid-template-columns:repeat(2,1fr)}}

/* ============ 15. Metodología, modalidades, normas ============ */
.linea-tiempo{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--esp-5) var(--esp-4);
  counter-reset:paso;
}
.paso{border-top:1px solid var(--gc-line-on-light);padding-top:var(--esp-3);position:relative}
.paso::before{
  content:'';position:absolute;top:-1px;left:0;
  width:48px;height:1px;background:var(--gc-red);
}
/* Los glifos del dossier son de relleno: el blanco o el carbón salen de
   currentColor y el acento viene en var(--gc-red) dentro del propio SVG. */
.paso svg{width:32px;height:32px;margin-bottom:var(--esp-2)}
.paso-numero{
  font-size:var(--t-etiqueta);font-weight:600;letter-spacing:0.14em;
  color:var(--gc-muted-on-light);
  display:block;margin-bottom:var(--esp-1);
  font-variant-numeric:tabular-nums;
}
.paso h3{font-size:var(--t-h3);font-weight:700;line-height:1.2}
.paso p{margin-top:var(--esp-1);color:var(--gc-muted-on-light);font-size:var(--t-cuerpo-ch)}

/* Versión compacta de la línea de tiempo para la home: los siete pasos en
   horizontal; en celular pasa a vertical, nunca a carrusel. */
.linea-tiempo-compacta{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--esp-4) var(--esp-3)}
@media (min-width:900px){.linea-tiempo-compacta{grid-template-columns:repeat(4,1fr)}}
.linea-tiempo-compacta .paso svg{width:28px;height:28px}
.linea-tiempo-compacta .paso h3{font-size:var(--t-cuerpo)}
.linea-tiempo-compacta .paso p{font-size:var(--t-epigrafe)}
@media (max-width:559px){.linea-tiempo-compacta{grid-template-columns:1fr}}

/* La línea de tiempo por si vuelve a vivir sobre carbón. */
.sobre-oscuro .paso{border-top-color:var(--gc-line-on-dark)}
.sobre-oscuro .paso-numero,
.sobre-oscuro .paso p{color:var(--gc-muted-on-dark)}

/* Divisor entre la línea de tiempo y las modalidades. */
.bloque-divisor{border-top:1px solid var(--gc-line-on-light);padding-top:var(--esp-5);margin-top:var(--esp-5)}
.sobre-oscuro .bloque-divisor{border-top-color:var(--gc-line-on-dark)}

.grilla-modalidades{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--esp-4);
}
/* La tarjeta es carbón también sobre secciones claras: color propio. */
.modalidad{background:var(--gc-carbon-2);color:var(--gc-white);padding:var(--esp-4)}
.modalidad h3{font-size:var(--t-h4)}
.modalidad p{margin-top:var(--esp-2);color:var(--gc-muted-on-dark);font-size:var(--t-cuerpo-ch)}

.grilla-normas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--esp-4);
}
.norma{background:var(--gc-white);border:1px solid var(--gc-line-on-light);padding:var(--esp-4)}
.sobre-gris .norma{background:var(--gc-white)}
.norma h3{font-size:var(--t-cuerpo);color:var(--gc-red);line-height:1.4}
.norma p{margin-top:var(--esp-2);font-size:var(--t-cuerpo-ch);color:var(--gc-muted-on-light)}

.lista-raya{display:grid;gap:var(--esp-2);max-width:44rem}
.lista-raya li{padding-left:var(--esp-4);position:relative}
.lista-raya li::before{content:'';position:absolute;left:0;top:0.75em;width:16px;height:1px;background:var(--gc-red)}

.grilla-equipos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--esp-4);
}
.equipo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--gc-gray);padding:var(--esp-3)}
.equipo h3{font-size:var(--t-h4);margin-top:var(--esp-2)}
.equipo p{margin-top:var(--esp-1);color:var(--gc-muted-on-light);font-size:var(--t-cuerpo-ch)}

/* ============ 16. Obras ============ */
.obra{
  display:grid;
  gap:var(--esp-4);
  padding-block:var(--esp-6);
  border-top:1px solid var(--gc-line-on-light);
}
.obra:first-of-type{border-top:0;padding-top:0}
@media (min-width:900px){.obra{grid-template-columns:1fr 1fr;align-items:start}}
.obra-foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.obra-estado{
  display:inline-block;
  font-size:var(--t-etiqueta);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  border:1px solid var(--gc-line-on-light);
  padding:var(--esp-05) var(--esp-2);
  margin-bottom:var(--esp-2);
}
/* Logo de la empresa en la ficha de obra: mismo tratamiento que el muro de
   clientes. El peso lo dan el tamaño y la posición, no el color. */
.obra-logo{display:block;margin-block:var(--esp-2) var(--esp-2)}
.obra-logo img{
  filter:grayscale(1);
  opacity:.78;
  max-height:40px;
  width:auto;
  object-fit:contain;
}
.obra-datos{margin-top:var(--esp-3);display:grid;gap:var(--esp-1)}
.obra-datos div{display:grid;grid-template-columns:9rem 1fr;gap:var(--esp-2);font-size:var(--t-cuerpo-ch)}
.obra-datos dt{color:var(--gc-muted-on-light)}
.obra-datos dd{font-variant-numeric:tabular-nums}
@media (max-width:559px){.obra-datos div{grid-template-columns:1fr}}

/* ============ 17. Selector de sistema ============ */
.selector{border:1px solid var(--gc-line-on-light);background:var(--gc-white);padding:var(--esp-4)}
.selector fieldset{border:0;margin:0;padding:0}
.selector legend{font-size:var(--t-h4);font-weight:700;line-height:1.3;padding:0}
.selector-paso{display:none}
.selector-paso.activo{display:block}
.selector-progreso{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gc-muted-on-light);margin-bottom:var(--esp-2);font-variant-numeric:tabular-nums}
.selector-opciones{display:grid;gap:var(--esp-2);margin-top:var(--esp-3)}
@media (min-width:720px){.selector-opciones{grid-template-columns:1fr 1fr}}
.selector-opcion{position:relative}
.selector-opcion input{position:absolute;inset:0;opacity:0}
.selector-opcion label{
  display:block;
  border:1px solid var(--gc-line-on-light);
  padding:var(--esp-2) var(--esp-3);
  font-size:var(--t-cuerpo-ch);
  font-weight:600;
  cursor:pointer;
}
.selector-opcion input:checked + label{background:var(--gc-carbon);color:var(--gc-white);border-color:var(--gc-carbon)}
.selector-opcion input:focus-visible + label{outline:2px solid var(--gc-red);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .selector-opcion label{transition:background-color var(--dur-1) var(--mov-lineal),color var(--dur-1) var(--mov-lineal),border-color var(--dur-1) var(--mov-lineal)}
  .selector-opcion input:not(:checked) + label:hover{background:var(--gc-gray)}
}
.selector-acciones{display:flex;gap:var(--esp-2);margin-top:var(--esp-4)}
.selector-resultado{margin-top:var(--esp-4)}
.selector-resultado[data-vacio]{display:none}
.selector-resultado article{border-top:1px solid var(--gc-red);padding-top:var(--esp-3)}
.selector-resultado h3{font-size:var(--t-h3)}
.selector-resultado p{margin-top:var(--esp-2);color:var(--gc-muted-on-light)}
.selector-resultado .selector-nota{font-size:var(--t-epigrafe);margin-top:var(--esp-3)}
.selector-resultado .hero-acciones{margin-top:var(--esp-3)}
.selector-sin-js{margin-top:var(--esp-2);color:var(--gc-muted-on-light);font-size:var(--t-cuerpo-ch)}
.js .selector-sin-js{display:none}
.selector[hidden]{display:none}

/* ============ 18. Formulario ============ */
.form-contacto{display:grid;gap:var(--esp-3)}
.campo{display:grid;gap:var(--esp-1)}
.campo label{font-weight:600;font-size:var(--t-cuerpo-ch)}
.campo input,.campo select,.campo textarea{
  border:1px solid var(--gc-line-on-light);
  background:var(--gc-white);
  color:var(--gc-carbon);
  padding:var(--esp-15) var(--esp-2);
  border-radius:0;
  width:100%;
}
.campo textarea{min-height:8rem;resize:vertical}
/* Foco: transición del borde y de la etiqueta, 120ms lineal. */
.campo input,.campo select,.campo textarea{transition:border-color var(--dur-1) var(--mov-lineal)}
.campo label{transition:color var(--dur-1) var(--mov-lineal)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--gc-carbon)}
.campo:focus-within label{color:var(--gc-red)}
.sobre-oscuro .campo input:focus,
.sobre-oscuro .campo select:focus,
.sobre-oscuro .campo textarea:focus{border-color:var(--gc-white)}
.sobre-oscuro .campo:focus-within label{color:var(--gc-white)}
.sobre-oscuro .campo input,
.sobre-oscuro .campo select,
.sobre-oscuro .campo textarea{
  background:var(--gc-carbon-2);
  color:var(--gc-white);
  border-color:var(--gc-line-on-dark);
}
.campo-consentimiento{display:flex;gap:var(--esp-2);align-items:flex-start;font-size:var(--t-cuerpo-ch)}
.campo-consentimiento input{width:20px;height:20px;margin-top:var(--esp-05);flex:none;accent-color:var(--gc-red)}
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-nota{font-size:var(--t-epigrafe);color:var(--gc-muted-on-light);max-width:32rem}
.sobre-oscuro .form-nota{color:var(--gc-muted-on-dark)}
.form-aviso{border:1px solid var(--gc-line-on-light);padding:var(--esp-2) var(--esp-3);font-size:var(--t-cuerpo-ch)}
.sobre-oscuro .form-aviso{border-color:var(--gc-line-on-dark)}
.form-aviso[hidden]{display:none}
@media (min-width:720px){
  .form-contacto{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--esp-3);
    align-items:start;
  }
  .form-nota,.campo-ancho,.form-aviso,.trampa,.form-contacto>button{grid-column:1 / -1}
  .form-contacto>button{justify-self:start}
}

/* ============ 19. Footer ============ */
.footer{
  background:var(--gc-carbon);
  color:var(--gc-white);
  --enlace-hover:var(--gc-white);
  border-top:1px solid var(--gc-line-on-dark);
  padding-block:var(--esp-6);
}
.footer-grilla{
  display:grid;
  gap:var(--esp-5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.footer-logo svg{height:34px;width:auto}
.footer h2{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--gc-muted-on-dark);line-height:1.2;margin-bottom:var(--esp-2)}
.footer ul{display:grid;gap:var(--esp-1)}
.footer a{text-decoration:none;font-size:var(--t-cuerpo-ch)}
.footer address{font-style:normal;font-size:var(--t-cuerpo-ch);color:var(--gc-muted-on-dark);display:grid;gap:var(--esp-1)}
.footer-legal{
  margin-top:var(--esp-5);
  padding-top:var(--esp-3);
  border-top:1px solid var(--gc-line-on-dark);
  color:var(--gc-muted-on-dark);
  font-size:var(--t-epigrafe);
  display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);
  justify-content:space-between;
}
/* Isologo de Grupo Comar: mínimo 120px de ancho del sistema y área de
   resguardo proporcional a la altura del isotipo. */
.footer-gc{display:flex;align-items:center;gap:var(--esp-2);margin-top:var(--esp-4)}
.footer-gc svg{width:132px;height:auto}
.footer-correos{margin-top:var(--esp-3);display:grid;gap:var(--esp-1)}
.footer-correos span{display:block}

/* ============ 20. Bloques varios ============ */
.franja-revesta{display:grid;gap:var(--esp-5);align-items:center}
@media (min-width:900px){.franja-revesta{grid-template-columns:2fr 1fr}}
/* El logo trae su propio fondo azul de marca: sin caja ni contenedor. */
.logo-revesta{max-height:120px;width:auto}
.franja-revesta p,.franja-revesta .lista-raya{max-width:38rem}

.cita-grande{
  font-size:var(--t-h3);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
  border-left:1px solid var(--gc-red);
  padding-left:var(--esp-4);
  max-width:52rem;
}

.columnas-texto{display:grid;gap:var(--esp-5)}
@media (min-width:900px){
  .columnas-texto{grid-template-columns:1fr 1fr}
  .columnas-texto:has(> :only-child){grid-template-columns:minmax(0,44rem)}
}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}

.h3-visual{font-size:var(--t-h4);font-weight:700;line-height:1.3;letter-spacing:0}
.aparece-foto img{width:100%;height:auto}
[data-margen]{margin-top:var(--esp-4)}
[data-max]{max-width:44rem}
[data-address],[data-contacto]{font-style:normal;display:grid;gap:var(--esp-1);margin-top:var(--esp-2)}
[data-contacto]{margin-top:var(--esp-4)}
[data-form]{padding-block:var(--esp-5) 0}
[data-nota]{display:block;margin-top:var(--esp-4)}

/* ============ 21. Movimiento ============ */
/* Patrón no-motion-first: el estado por defecto es sin movimiento. */
@media (prefers-reduced-motion: no-preference){
  @keyframes aparecer{
    from{opacity:0;transform:translateY(var(--mov-y))}
    to{opacity:1;transform:none}
  }
  @keyframes aparecer-hero{
    from{opacity:0;transform:translateY(var(--mov-y-hero))}
    to{opacity:1;transform:none}
  }
  @keyframes revelar-foto{
    from{clip-path:inset(100% 0 0 0)}
    to{clip-path:inset(0)}
  }

  /* Entrada del hero, una sola vez al cargar: el lockup entra primero y el
     titular 80ms después. Máximo 4 elementos por tanda. */
  .hero-contenido>.hero-logo{animation:aparecer-hero var(--dur-4) var(--mov-salida) both}
  .hero-contenido>h1{animation:aparecer-hero var(--dur-4) var(--mov-salida) 80ms both}
  .hero-contenido>.hero-bajada{animation:aparecer-hero var(--dur-4) var(--mov-salida) 160ms both}
  .hero-contenido>.hero-acciones{animation:aparecer-hero var(--dur-4) var(--mov-salida) 240ms both}
  /* Cabecera de las páginas interiores: etiqueta, h1 y bajada escalonan.
     Acá el delay en ms sí vale, porque la animación no está ligada al scroll. */
  .cabecera .contenedor>*{animation:aparecer var(--dur-3) var(--mov-salida) both}
  .cabecera .contenedor>*:nth-child(2){animation-delay:60ms}
  .cabecera .contenedor>*:nth-child(3){animation-delay:120ms}

  /* El header es fixed: cambiar su alto no reflowea el documento. */
  .header-barra{transition:min-height var(--dur-2) var(--mov-suave)}

  /* Entrada única al cargar, para lo que ya está en pantalla debajo de la
     cabecera (el formulario de contacto): continúa el escalonado de la cabecera. */
  .aparece-carga{animation:aparecer var(--dur-3) var(--mov-salida) 180ms both}

  /* Selector: cada paso y el resultado entran con el mismo gesto. */
  .selector-paso.activo{animation:aparecer var(--dur-2) var(--mov-salida) both}
  .selector-resultado:not([data-vacio]){animation:aparecer var(--dur-3) var(--mov-salida) both}

  /* Entradas ligadas al scroll. El estado final es el estado por defecto. */
  @supports (animation-timeline: view()){
    .aparece{
      animation:aparecer var(--dur-3) var(--mov-salida) both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    .aparece-foto{
      animation:revelar-foto var(--dur-4) var(--mov-salida) both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    /* Escalonados, máximo 4 elementos por tanda. En una animación dirigida
       por scroll el escalonado se expresa desplazando el rango, no con
       tiempo: el progreso lo fija animation-range. Un paso = 8% del rango. */
    .cifras .cifra,
    .matriz tbody tr,
    .grilla-clientes .celda-cliente{
      animation:aparecer var(--dur-3) var(--mov-salida) both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    /* La matriz vive dentro de una envoltura con overflow-x:auto, que sería
       el scroller de view(): las filas usan la línea de tiempo nombrada de la
       envoltura, que sí se mide contra el viewport. */
    .tabla-envoltura:has(> .matriz){view-timeline-name:--matriz}
    .matriz tbody tr{animation-timeline:--matriz}
    .cifras .cifra:nth-child(2),
    .grilla-fichas .ficha:nth-child(4n+2),
    .grilla-industrias .industria:nth-child(4n+2),
    .linea-tiempo .paso:nth-child(4n+2),
    .grilla-modalidades .modalidad:nth-child(4n+2),
    .grilla-equipos .equipo:nth-child(4n+2),
    .grilla-normas .norma:nth-child(4n+2),
    .matriz tbody tr:nth-child(4n+2),
    .grilla-clientes .celda-cliente:nth-child(6n+2),
    .grilla-clientes .celda-cliente:nth-child(6n+5){animation-range:entry 8% cover 38%}
    .cifras .cifra:nth-child(3),
    .grilla-fichas .ficha:nth-child(4n+3),
    .grilla-industrias .industria:nth-child(4n+3),
    .linea-tiempo .paso:nth-child(4n+3),
    .grilla-modalidades .modalidad:nth-child(4n+3),
    .grilla-equipos .equipo:nth-child(4n+3),
    .grilla-normas .norma:nth-child(4n+3),
    .matriz tbody tr:nth-child(4n+3),
    .grilla-clientes .celda-cliente:nth-child(6n+3),
    .grilla-clientes .celda-cliente:nth-child(6n){animation-range:entry 16% cover 46%}
    .cifras .cifra:nth-child(4),
    .grilla-fichas .ficha:nth-child(4n),
    .grilla-industrias .industria:nth-child(4n),
    .linea-tiempo .paso:nth-child(4n),
    .grilla-modalidades .modalidad:nth-child(4n),
    .grilla-equipos .equipo:nth-child(4n),
    .grilla-normas .norma:nth-child(4n),
    .matriz tbody tr:nth-child(4n),
    .grilla-clientes .celda-cliente:nth-child(6n+4){animation-range:entry 24% cover 54%}

    /* Corte de capas: las cuatro capas comparten la línea de tiempo de la
       figura (nombrada), así el rango significa lo mismo para todas y entran
       de abajo hacia arriba, una por una. */
    .corte-capas{view-timeline-name:--corte}
    .corte-capas rect{
      animation:aparecer var(--dur-3) var(--mov-salida) both;
      animation-timeline:--corte;
      animation-range:entry 0% cover 30%;
    }
    .corte-capas .corte-diag-2{animation-range:entry 8% cover 38%}
    .corte-capas .corte-diag-3{animation-range:entry 16% cover 46%}
    .corte-capas .corte-diag-4{animation-range:entry 24% cover 54%}
  }

  /* Lightbox: abre en 180ms, cierra en 120ms desde JavaScript. */
  .lightbox.abriendo .lightbox-marco{animation:lightbox-abrir var(--dur-2) var(--mov-suave) both}
  .lightbox.cerrando .lightbox-marco{animation:lightbox-cerrar var(--dur-1) var(--mov-suave) both}
  .lightbox.abriendo{animation:lightbox-velo var(--dur-2) var(--mov-suave) both}
  .lightbox.cerrando{animation:lightbox-velo var(--dur-1) var(--mov-suave) reverse both}
  @keyframes lightbox-abrir{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
  @keyframes lightbox-cerrar{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}
  @keyframes lightbox-velo{from{background-color:transparent}to{background-color:var(--velo-oscuro)}}

  /* Fundido entre páginas con View Transitions multidocumento. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-2)}
}

/* Red de seguridad global. Duración casi cero, no none, para no romper animationend. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}