/* ============================================================
   SUPER SERVICE INDUSTRIAL — estilo.css (v2, tras tribunal)
   Sistema visual de DISENO.md v2: el material de su color, el verde
   solo anota y actúa, bandas planas sin solape, radios 0/4/8,
   una sola sombra, una sola gramática de movimiento (el corte).
   ============================================================ */
@import url("fuentes/chivo.css");

/* ---------- tokens ---------- */
:root {
  --yeso: #F4F3EF;
  --yeso-2: #ECEAE4;
  --cemento: #CFCCC5;
  /* el borde de un control tiene que llegar a 3:1 contra el papel.
     --cemento daba 1,44:1 y los campos no se veían. Este da 3,16:1. */
  --borde: #8A8983;
  --hormigon: #DDDBD6;
  --concreto: #B9B6AE;
  --grafito: #26282A;
  --gris: #58595B;
  --marca: #00953B;
  --accion: #007A31;
  --profundo: #00602A;
  --tinte: #E4F1E8;
  --noche: #0B2E1C;
  --acero: #C9CCCF;
  --agua: #3E9DB4;
  --alerta: #A63A25;   /* 4,92:1 sobre el papel; el anterior no llegaba */

  --display: "Chivo", system-ui, -apple-system, sans-serif;
  /* el ancho útil crece con la pantalla en vez de quedarse clavado en 1320 y dejar
     300 px muertos a cada lado en un monitor de 1920. El tope existe para que la
     medida de lectura no se dispare, y lo sujeta cada bloque con su propio max-width. */
  --ancho: min(1680px, 93vw);
  --margen: clamp(18px, 4vw, 48px);
  --cabecera: 64px;
  /* tres pasos verticales y ninguna cuarta distancia */
  --paso-1: clamp(10px, 1.1vw, 14px);
  --paso-2: clamp(20px, 2.4vw, 30px);
  --paso-3: clamp(40px, 5.4vw, 84px);
  /* único derivado admitido: el aire que necesita un cambio de suelo para leerse
     como pieza y no como recorte. No es una cuarta distancia, es una suma. */
  --zocalo: calc(var(--paso-3) + var(--paso-2));
  --sombra: 0 8px 24px rgba(11, 46, 28, .12);
  --e: cubic-bezier(.33, 1, .68, 1);
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 16px); }
body {
  margin: 0; background: var(--yeso); color: var(--grafito);
  font: 400 17px/1.5 var(--display);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; font-style: italic; color: var(--gris); }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .16em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; }
.noche :focus-visible, .banda-noche :focus-visible, .pie :focus-visible { outline-color: var(--tinte); }
::selection { background: var(--marca); color: #fff; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- tipografía ---------- */
.t-display { font-weight: 800; font-size: clamp(2.1rem, 6.2vw, 5.4rem); line-height: .92; letter-spacing: -.025em; text-wrap: balance; }
.t-h1 { font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: .98; letter-spacing: -.022em; text-wrap: balance; }
/* v16 — el salto h1→h2 eran 8 px (54,4 y 41,6): el h2 se leía como titular de
   página. Y entre h2 y h3 había un cañón de ratio 2,08. Bajando el h2 a 2,2rem la
   escala queda 86,4 / 54,4 / 35,2 / 20 / 17, ratios 1,59 / 1,55 / 1,76 / 1,18. */
.t-h2 { font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: -.018em; text-wrap: balance; }
.t-h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.008em; }
.t-entrada { font-size: clamp(1.06rem, .95rem + .55vw, 1.32rem); line-height: 1.4; max-width: 44ch; text-wrap: pretty; }
.parrafo { max-width: 62ch; text-wrap: pretty; }
.parrafo + .parrafo { margin-top: .8em; }
.secundario { color: var(--gris); font-size: .94rem; }
.cifra { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.cifra small, .cifra .u { font-weight: 400; font-size: .6em; color: var(--gris); }
.tab, td.tab, .precio-num { font-variant-numeric: tabular-nums lining-nums; }
.cita { font-style: italic; font-weight: 500; }
.label { font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.fuente { font-size: .8rem; color: var(--gris); }
.fuente a { color: var(--profundo); }

/* ---------- retícula y bandas ---------- */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.banda { padding-block: clamp(40px, 6vw, 92px); }
.banda-yeso2 { background: none; }
.banda-cemento { background: var(--cemento); }
.banda-noche { background: var(--noche); color: var(--yeso); }
.banda-noche .secundario, .banda-noche .label, .banda-noche .fuente { color: color-mix(in srgb, var(--yeso) 72%, transparent); }
.banda-noche a { color: var(--tinte); }
.banda + .banda { border-top: 0; }
.rejilla { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; gap: clamp(24px, 3vw, 56px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split-7-5 { display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.split-6-6 { display: grid; gap: clamp(24px, 3vw, 56px); grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
.cabeza-seccion { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; justify-content: space-between; margin-bottom: clamp(18px, 2.4vw, 36px); }
.cabeza-seccion p { color: var(--gris); max-width: 52ch; }

/* ---------- botones ---------- */
.boton, .agregar {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.2rem; border-radius: 4px;
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
  background: var(--accion); color: #fff; transition: background 80ms linear;
}
.boton:hover, .agregar:hover { background: var(--profundo); }
.boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.boton.secundario { background: transparent; color: var(--profundo); box-shadow: inset 0 0 0 2px var(--accion); }
.boton.secundario:hover { background: var(--tinte); color: var(--profundo); }
.boton.sobre-noche { background: var(--tinte); color: var(--noche); }
.boton.sobre-noche:hover { background: #fff; }
.boton.pequeno { min-height: 40px; font-size: .88rem; padding: 0 .9rem; }
.agregar.ok { background: var(--profundo); }
.agregar.cotizar { background: transparent; color: var(--profundo); box-shadow: inset 0 0 0 2px var(--accion); }
.agregar.cotizar:hover { background: var(--tinte); }
.agregar.reservar { background: transparent; color: var(--profundo); box-shadow: inset 0 0 0 2px var(--cemento); }
.enlace-fuerte { color: var(--profundo); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--yeso); box-shadow: 0 4px 0 var(--yeso-2); }
.cab-fila { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); height: var(--cabecera); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marca-logo { width: 42px; height: auto; fill: var(--marca); }
.marca-texto { display: grid; line-height: 1.05; }
.marca-texto b { font-weight: 800; font-size: .95rem; letter-spacing: -.02em; }
.marca-texto i { font-style: normal; font-size: .72rem; color: var(--gris); letter-spacing: .04em; }
.nav { display: flex; gap: clamp(8px, 1.4vw, 22px); margin-left: auto; }
.nav a { font-weight: 600; font-size: .95rem; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--cemento); }
.nav a[aria-current="page"] { border-bottom-color: var(--marca); }
.cab-acciones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cab-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; position: relative; color: var(--grafito); text-decoration: none; }
.cab-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cab-icono:hover { background: var(--yeso-2); }
.cab-carrito b, .cab-palabra b { position: static; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--marca); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cab-wa { min-height: 40px; padding: 0 .85rem; }
.solo-movil { display: none; }
.menu-btn { display: none; }

/* mega-menú */
.mega { position: absolute; left: 0; right: 0; background: var(--yeso); border-bottom: 4px solid var(--hormigon); padding: 22px 0 26px; }
.mega-titulo { font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; }
.mega-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
.mega-lista a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; text-decoration: none; border-radius: 4px; font-size: .95rem; }
.mega-lista a:hover { background: var(--yeso-2); }
.mega-lista b { font-weight: 700; color: var(--accion); font-variant-numeric: tabular-nums; margin-right: 4px; }
.mega-pie { margin-top: 14px; color: var(--gris); font-size: .9rem; }
.mega-pie a { color: var(--profundo); }
.glifo { width: 34px; height: 34px; flex: none; }
.glifo-vacio { width: 34px; height: 34px; flex: none; background: var(--yeso-2); display: block; }

/* buscador */
.busqueda { position: absolute; left: 0; right: 0; background: var(--yeso); box-shadow: var(--sombra); padding: 16px 0; }
.busqueda-form { display: flex; gap: 8px; }
.busqueda-form input { flex: 1; min-height: 48px; padding: 0 14px; border: 2px solid var(--borde); border-radius: 8px; background: #fff; }
.busqueda-form input:focus { border-color: var(--accion); }
.busqueda-cerrar { width: 48px; display: grid; place-items: center; }
.busqueda-cerrar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.busqueda-sugerencias { margin-top: 10px; display: grid; gap: 2px; }
.busqueda-sugerencias a { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 8px; text-decoration: none; border-radius: 4px; }
.busqueda-sugerencias a:hover { background: var(--yeso-2); }
.busqueda-sugerencias img { width: 48px; height: 36px; object-fit: contain; mix-blend-mode: multiply; }
.busqueda-sugerencias b { font-weight: 600; font-size: .95rem; display: block; }
.busqueda-sugerencias small { color: var(--gris); font-size: .82rem; }
.busqueda-sugerencias em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sug-problema { grid-template-columns: 1fr auto !important; background: var(--tinte); }
.busqueda-nada { color: var(--gris); padding: 8px; }

/* menú móvil */
.menu-movil { position: fixed; inset: var(--cabecera) 0 0; background: var(--yeso); overflow-y: auto; padding: 20px var(--margen) 60px; z-index: 39; }
.menu-movil-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 4px solid var(--hormigon); }
.menu-movil-cabeza a:first-child { font-weight: 700; font-size: 1.3rem; text-decoration: none; }
.menu-movil-cabeza span { color: var(--gris); font-size: .9rem; }
.menu-movil-cabeza .boton { margin-left: auto; }
.menu-movil-grupo { margin: 20px 0 6px; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.menu-movil-problemas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.menu-movil-problemas a { display: block; padding: 11px 4px; text-decoration: none; font-size: .95rem; line-height: 1.2; }
.menu-movil-problemas b { color: var(--accion); font-variant-numeric: tabular-nums; margin-right: 5px; }
/* filas iguales con una regla fina, no bandas alternas de gris: la cebra no
   significaba nada y ensuciaba la pantalla más pequeña */
.menu-movil-enlace { display: block; padding: 14px 0; font-weight: 700; font-size: 1.02rem;
  text-decoration: none; border-bottom: 1px solid var(--hormigon); }
.menu-movil-enlace:first-of-type { border-top: 4px solid var(--grafito); }
html.menu-abierto { overflow: hidden; }

/* ---------- EL CORTE ---------- */
.corte { margin: 0; }
.corte-cuerpo { display: flex; flex-direction: column; overflow: hidden; }
.estrato {
  position: relative; background: var(--color);
  min-height: calc(var(--peso) * 1px * var(--k, 4));
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  overflow: hidden;
}
.corte-hero { --k: 5.2; }
.corte-tarjeta { --k: 1.5; }
.corte-hero .estrato { min-height: max(30px, calc(var(--peso) * 6.2px)); }
.corte-hero .estrato.tipo-sustrato, .corte-hero .estrato.es-sustrato { min-height: 108px; }
.corte-hero .estrato.tipo-primer { min-height: 22px; }
.corte-hero .estrato.tipo-refuerzo { min-height: 26px; }
.corte-tarjeta .estrato { min-height: max(9px, calc(var(--peso) * 1.5px)); padding: 0 6px; }
.corte-tarjeta .estrato-rotulo, .corte-tarjeta .estrato-nota { display: none; }
.estrato-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.estrato.con-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244,243,239,.94) 0%, rgba(244,243,239,.80) 34%, rgba(244,243,239,.10) 78%); }
.estrato-n {
  position: relative; z-index: 2; flex: none; font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums; color: var(--accion);
  width: 26px; text-align: right;
}
.estrato.tipo-epoxico .estrato-n, .estrato[style*="#2E7A4F"] .estrato-n { color: #fff; }
.estrato-rotulo { position: relative; z-index: 2; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.estrato-rotulo b { font-weight: 600; font-size: .95rem; }
.corte-hero .estrato-rotulo { flex-wrap: nowrap; overflow: hidden; }
.corte-hero .estrato-rotulo b, .corte-hero .estrato-prod { white-space: nowrap; }
.estrato-prod { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.estrato-prod { white-space: nowrap; }
.estrato-prod a { color: var(--profundo); font-weight: 600; font-size: .9rem; }
.estrato-prod i { color: var(--gris); font-style: normal; font-size: .9rem; }
.estrato-dato { color: var(--gris); font-size: .84rem; }
.estrato-nota { position: relative; z-index: 2; margin-left: auto; flex: none; color: var(--gris); font-size: .78rem; font-style: italic; white-space: nowrap; }
.corte-pie { margin-top: 10px; font-size: .82rem; font-style: italic; color: var(--gris); }
.banda-noche .corte-pie { color: color-mix(in srgb, var(--yeso) 66%, transparent); }

/* agua */
.agua { position: relative; background: var(--agua); display: flex; align-items: center; padding: 0 14px; }
.agua span { color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.agua-lluvia { height: 52px; background: transparent; overflow: hidden; margin-bottom: 2px; }
.agua-lluvia::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(72deg, var(--agua) 0 2px, transparent 2px 46px);
  opacity: .85;
}
.agua-lluvia span { position: absolute; right: 0; bottom: 2px; color: var(--agua); }
.agua-encharcada { height: 22px; opacity: .8; }
.agua-dentro { min-height: 90px; }
.agua-dentro::after { content: ""; position: absolute; left: 50%; top: 26px; width: 26px; height: 26px; transform: translateX(-50%); background: linear-gradient(180deg, #fff 0 3px, transparent 3px 8px, #fff 8px 11px); opacity: .75; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.corte.vertical .corte-cuerpo { flex-direction: row; align-items: stretch; min-height: 300px; }
.corte.vertical .estrato { min-height: 0; width: max(26px, calc(var(--peso) * 7px)); flex-direction: column; justify-content: flex-start; padding: 12px 0; align-items: center; }
.corte.vertical .estrato.es-sustrato { width: 128px; }
.corte.vertical .estrato-n { width: auto; text-align: center; }
.corte.vertical .estrato-rotulo { writing-mode: vertical-rl; text-orientation: mixed; margin-top: 6px; }
.corte.vertical .agua { width: 92px; align-items: stretch; }
.corte.vertical .agua span { writing-mode: horizontal-tb; align-self: flex-end; padding: 6px; font-size: .72rem; line-height: 1.15; }
.corte.vertical .estrato-nota { display: none; }
/* tanque en L */
.tanque-l { display: grid; grid-template-columns: auto 1fr; min-height: 300px; }
.tanque-muro { display: flex; }
.tanque-muro .estrato { min-height: 0; width: max(16px, calc(var(--peso) * 5px)); flex-direction: column; padding: 12px 0; }
.tanque-muro .estrato.es-sustrato { width: 92px; }
.tanque-muro .estrato-n { width: auto; }
.tanque-muro .estrato-rotulo { writing-mode: vertical-rl; margin-top: 6px; }
.tanque-agua { background: var(--agua); display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; color: #fff; font-weight: 600; font-size: .82rem; }
/* detalle SVG */
.corte svg { width: 100%; height: auto; }
.corte-num-svg { font-family: var(--display); font-weight: 800; font-size: 20px; fill: var(--marca); }
.corte-rot { font-family: var(--display); font-weight: 400; font-size: 15px; fill: var(--gris); }
/* dibujo de abajo arriba: la única animación del sitio */
@media (prefers-reduced-motion: no-preference) {
  .estrato.dibuja { animation: aplicar 420ms cubic-bezier(.2,.9,.25,1) both; animation-delay: var(--retardo, 0ms); transform-origin: bottom; }
  @keyframes aplicar { 0% { transform: scaleY(0); opacity: .4; } 70% { transform: scaleY(1.04); opacity: 1; } 100% { transform: scaleY(1); } }
  .corte.vertical .estrato.dibuja, .tanque-muro .estrato.dibuja { transform-origin: left; animation-name: aplicar-h; }
  @keyframes aplicar-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
html.qa .estrato.dibuja { animation: none !important; }

/* ---------- tarjeta de producto ---------- */
.tarjeta { display: flex; flex-direction: column; }
.plinto { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--yeso-2); overflow: hidden; }
.plinto img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; transition: transform 160ms var(--e); }
.tarjeta.recorte .plinto img { mix-blend-mode: multiply; padding: 8%; }
.tarjeta.foto .plinto img { width: auto; min-width: 0; height: 100%; object-fit: cover; }
.tarjeta:hover .plinto { background: var(--yeso); }
.plinto-vacio { width: 100%; height: 100%; background: repeating-linear-gradient(180deg, var(--cemento) 0 6px, var(--yeso-2) 6px 12px); }
.marca-capa { display: flex; gap: 2px; margin-top: 6px; }
.marca-capa i { display: block; height: 4px; flex: 1; background: var(--hormigon); }
.marca-capa i.activa { background: var(--marca); }
.tarjeta-cuerpo { padding-top: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tarjeta-capa { font-weight: 600; font-size: .82rem; color: var(--profundo); }
.tarjeta-cuerpo, .tarjeta-nombre { min-width: 0; }
.tarjeta-nombre { font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.tarjeta-nombre a { text-decoration: none; }
.tarjeta-nombre a:hover { text-decoration: underline; }
.tarjeta-sub { color: var(--gris); font-size: .88rem; line-height: 1.3; }
.tarjeta-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.existencia { font-size: .82rem; color: var(--gris); }
.existencia.si { color: var(--gris); }
.existencia.encargo { color: var(--alerta); }
.tarjeta-pie { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tarjeta-precio { font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tarjeta-precio small { font-weight: 400; font-size: .68rem; color: var(--gris); }
.tarjeta-precio em { font-style: normal; font-weight: 600; font-size: .95rem; color: var(--gris); }
.tarjeta-pie .agregar { min-height: 40px; font-size: .88rem; padding: 0 .9rem; }

/* ---------- tablas de datos ---------- */
.tabla-datos { font-size: .95rem; }
.tabla-datos th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding: 8px 12px 8px 0; border-bottom: 4px solid var(--hormigon); }
.tabla-datos td { padding: 9px 12px 9px 0; vertical-align: top; font-variant-numeric: tabular-nums; }
/* una regla fina por fila en vez de bandas alternas: la cebra es ruido */
.tabla-datos tbody tr + tr td { border-top: 1px solid var(--hormigon); }
.tabla-datos td:first-child { font-weight: 600; width: 34%; }
.tabla-envoltorio { overflow-x: auto; }

/* ---------- documentos ---------- */
.docs { display: grid; gap: 2px; }
.doc { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 12px 14px; text-decoration: none; }
.docs > .doc + .doc { border-top: 1px solid var(--hormigon); }
.doc:hover { background: var(--yeso-2); }
.doc b { font-weight: 600; font-size: .98rem; }
.doc small { color: var(--gris); font-size: .84rem; display: block; }
.doc em { font-style: normal; color: var(--gris); font-size: .84rem; font-variant-numeric: tabular-nums; }
.doc-pendiente { color: var(--gris); padding: 12px 14px; font-size: .92rem; }

/* ---------- barra pegajosa (móvil) ---------- */
.barra-pegajosa { display: none; }
body.con-barra { padding-bottom: 0; }

/* ---------- pie ---------- */
.pie { background: var(--noche); color: var(--yeso); padding: clamp(36px, 5vw, 72px) 0 28px; }
.pie a { color: var(--yeso); }
.pie-esquina { font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: -.022em; max-width: 22ch; }
.pie-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 22px; padding-top: 18px; border-top: 4px solid color-mix(in srgb, var(--tinte) 18%, transparent); }
.pie-nav a { font-weight: 600; font-size: .95rem; text-decoration: none; }
.pie-nav a:hover { text-decoration: underline; }
.pie-datos { display: grid; gap: 8px; font-size: .92rem; color: color-mix(in srgb, var(--yeso) 82%, transparent); }
.pie-horario span { margin-right: 22px; }
.pie-horario b { font-weight: 600; color: var(--yeso); }
.pie-legal { margin-top: 22px; padding-top: 16px; border-top: 4px solid color-mix(in srgb, var(--tinte) 18%, transparent); font-size: .82rem; color: color-mix(in srgb, var(--yeso) 70%, transparent); }
.pie-legal b { color: var(--tinte); font-weight: 600; }

/* ---------- portada: el corte vivo ---------- */
.vivo { padding-block: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 80px); }
.vivo-split { display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.vivo h1 { margin-bottom: 14px; }
.vivo-sub { color: var(--gris); font-size: 1.05rem; max-width: 40ch; margin-bottom: 22px; }
.vivo-lista { display: grid; }
.vivo-lista li + li { border-top: 0; }
.vivo-lista button, .vivo-lista a {
  display: flex; width: 100%; align-items: center; gap: 12px; padding: 7px 8px;
  font: 700 clamp(1.02rem, 1.4vw, 1.3rem)/1.15 var(--display); letter-spacing: -.015em;
  text-align: left; text-decoration: none; color: inherit; background: none;
}
.vivo-lista .n { font-variant-numeric: tabular-nums; color: var(--gris); font-weight: 700; font-size: .9rem; width: 22px; flex: none; }
.vivo-lista [aria-current="true"] { color: var(--profundo); }
.vivo-lista [aria-current="true"] .n { color: var(--accion); }
.vivo-lista button:hover, .vivo-lista a:hover { background: var(--yeso-2); }
.vivo-dibujo { position: relative; }
.vivo-dibujo .corte-hero { --k: 5.6; }
.vivo-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vivo-nota { margin-top: 12px; }

/* ---------- página de solución ---------- */
.probeta { position: sticky; top: calc(var(--cabecera) + 20px); }
.probeta .corte-tarjeta { --k: 3.4; cursor: pointer; }
.probeta .corte-tarjeta .estrato { min-height: 22px; padding: 0 8px; }
.probeta .corte-tarjeta .estrato-n { display: block; font-size: .78rem; width: 20px; }
.probeta .corte-tarjeta .estrato.es-sustrato { min-height: 40px; }
.probeta-activa { margin-top: 12px; font-size: .95rem; line-height: 1.3; }
.probeta-activa b { color: var(--profundo); }
.capa-bloque { padding: clamp(20px, 2.6vw, 34px) 0; border-top: 4px solid var(--hormigon); }
.capa-bloque:first-child { border-top: 0; }
.capa-cabeza { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.capa-cabeza .n { font-weight: 800; color: var(--accion); font-variant-numeric: tabular-nums; font-size: 1.1rem; flex: none; }
.capa-cabeza .n-detalle { font-weight: 600; font-size: .78rem; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.capa-cabeza h3 { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.capa-dato { color: var(--gris); font-size: .95rem; max-width: 60ch; }
.cita-en { font-style: italic; border-bottom: 1px dotted var(--cemento); cursor: help; }
.capa-producto { margin-top: 14px; max-width: 380px; }
.capa-sin-producto { margin-top: 10px; font-size: .92rem; color: var(--gris); }
.estrato.activa { outline: 2px solid var(--marca); outline-offset: -2px; }
.estrato:not(.activa) { filter: saturate(.55) brightness(1.02); }
.corte-hero:not([data-activa]) .estrato { filter: none; }
.regla-capas { display: none; }
.pestanas { display: flex; gap: 2px; margin-bottom: 18px; }
.pestanas button { padding: 12px 18px; font-weight: 600; background: var(--yeso-2); border-bottom: 4px solid transparent; }
.pestanas button[aria-selected="true"] { background: var(--tinte); border-bottom-color: var(--marca); color: var(--profundo); }
.calc-campos { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 18px; }
.campo { display: grid; gap: 5px; }
.campo label { font-weight: 600; font-size: .88rem; }
.campo { max-width: 100%; }
.campo input, .campo select, .campo textarea { max-width: 100%; min-height: 48px; padding: 0 12px; border: 2px solid var(--borde); border-radius: 4px; background: #fff; width: 160px; }
.campo textarea { padding: 10px 12px; width: 100%; min-height: 90px; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--accion); }
.campo-ancho input, .campo-ancho { width: 100%; }
.hipotesis { color: var(--gris); font-size: .85rem; margin-top: 10px; }
.total-fila { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; }
.total-fila.grande { font-weight: 700; font-size: 1.25rem; border-top: 4px solid var(--hormigon); margin-top: 6px; padding-top: 14px; }

/* ---------- obras, servicios, nosotros ---------- */
.diptico { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diptico img { width: 100%; max-width: 640px; aspect-ratio: 3 / 2; object-fit: cover; }
.pie-foto { margin-top: 8px; font-size: .82rem; font-style: italic; color: var(--gris); }
.obra + .obra { margin-top: clamp(28px, 4vw, 56px); padding-top: clamp(28px, 4vw, 56px); border-top: 4px solid var(--hormigon); }
.por-confirmar { color: var(--gris); font-style: italic; font-size: .88rem; }
/* retrato antiguo, solo en tarjetas sueltas */
.retrato-mini { width: 96px; height: 96px; object-fit: cover; }
.equipo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px; }
.logos { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }
.logos img { max-height: 40px; width: auto; mix-blend-mode: multiply; }
.obra-foto { max-width: 1000px; }

/* ---------- filtros de tienda ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtros a, .filtros button { padding: 9px 14px; border: 2px solid var(--borde); border-radius: 4px; font-weight: 600; font-size: .88rem; text-decoration: none; background: transparent; }
.filtros a:hover, .filtros button:hover { border-color: var(--accion); color: var(--profundo); }
.filtros [aria-current="true"], .filtros [aria-pressed="true"] { background: var(--tinte); border-color: var(--marca); color: var(--profundo); }

/* ---------- ficha ---------- */
.ficha-galeria { display: grid; gap: 8px; }
.ficha-foto { background: var(--yeso-2); display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; }
.ficha-foto img { max-width: 100% !important; max-height: 100%; width: auto; }
.ficha-foto.recorte img { mix-blend-mode: multiply; padding: 6%; }
.ficha-miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-miniaturas img { width: 84px; height: 64px; object-fit: contain; background: var(--yeso-2); mix-blend-mode: multiply; }
.precio-grande { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.precio-grande small { font-weight: 400; font-size: .32em; color: var(--gris); letter-spacing: 0; }
.compra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0; }
.cantidad { display: flex; align-items: center; border: 2px solid var(--borde); border-radius: 4px; }
.cantidad button { width: 44px; height: 46px; font-size: 1.2rem; font-weight: 700; }
.cantidad input { width: 54px; height: 46px; border: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: transparent; }
.va-en { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0; font-size: .95rem; }
.va-en a { color: var(--profundo); font-weight: 600; }

/* ---------- carrito ---------- */
.linea-carrito { display: grid; grid-template-columns: 84px 1fr auto auto; gap: 16px; align-items: center; padding: 16px 14px; }
.linea-carrito + .linea-carrito { border-top: 1px solid var(--hormigon); }
.linea-carrito img { width: 84px; height: 64px; object-fit: contain; background: var(--yeso-2); mix-blend-mode: multiply; }
.linea-carrito .quitar { color: var(--gris); font-size: .85rem; text-decoration: underline; }
.aviso { padding: 14px 16px; background: var(--tinte); color: var(--profundo); font-size: .92rem; }
.aviso.alerta { background: color-mix(in srgb, var(--alerta) 12%, var(--yeso)); color: var(--alerta); }
.demo { border: 2px dashed var(--cemento); padding: 16px; color: var(--gris); font-size: .9rem; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 10px; }
  .nav a { font-size: .88rem; }
  .cab-wa span { display: none; }
}
@media (max-width: 920px) {
  .nav, .solo-escritorio { display: none; }
  .menu-btn, .solo-movil { display: inline-flex; }
  .split, .vivo-split, .split-7-5, .split-6-6 { grid-template-columns: minmax(0, 1fr); }
  .cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .probeta { position: static; }
  .mega { display: none !important; }
}
@media (max-width: 720px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diptico { grid-template-columns: 1fr; }
  .corte-hero { --k: 4.2; }
  .corte-hero .estrato { min-height: max(56px, calc(var(--peso) * 4.2px)); }
  .corte-hero .estrato.tipo-primer { min-height: 22px; }
  .corte.vertical .corte-cuerpo, .tanque-l { min-height: 260px; }
  .estrato-dato { display: none; }
  .linea-carrito { grid-template-columns: 64px 1fr; }
  .linea-carrito img { width: 64px; height: 52px; }
  .linea-carrito > *:nth-child(3), .linea-carrito > *:nth-child(4) { grid-column: 1 / -1; }
  /* barra pegajosa: el único elemento flotante */
  .barra-pegajosa {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
    padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
    background: var(--yeso); border-top: 1px solid var(--hormigon);
  }
  .barra-pegajosa .boton { flex: 1; }
  .barra-pegajosa .boton.secundario { flex: 0 0 auto; padding: 0 1rem; }
  body.con-barra { padding-bottom: 84px; }
  /* en móvil el corte no repite el producto: ya está en el bloque de la capa */
  .corte-hero .estrato-prod { display: none; }
  .corte-hero .estrato-rotulo b { white-space: normal; }
  /* la lista de problemas de la portada, en dos columnas */
  .vivo-lista { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .vivo-lista li:nth-child(2) { border-top: 0; }
  .vivo-lista button, .vivo-lista a { font-size: 1rem; gap: 8px; }
  /* regla de capas pegajosa en la página de solución */
  .regla-capas { display: flex; position: sticky; top: var(--cabecera); z-index: 30; gap: 2px; background: var(--yeso); padding: 6px 0; }
  .regla-capas button { height: 12px; flex: 1; background: var(--hormigon); }
  .regla-capas button[aria-current="true"] { background: var(--marca); }
}
@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta-pie { flex-direction: column; align-items: stretch; }
  .tarjeta-pie .agregar { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   HERO, CASOS, CLIENTES, OBRAS — v3 (rediseño tras el rechazo del
   director: «demasiado IA genérica»). La fotografía real manda; el
   corte deja de ser el único protagonista y pasa a ser el segundo
   golpe, pegado bajo la foto: lo que se ve arriba, lo nuestro debajo.
   ============================================================ */

/* ---------- hero ---------- */
.hero { position: relative; background: var(--noche); }
.hero-foto { position: relative; height: min(76vh, 660px); min-height: 420px; overflow: hidden; background: var(--noche); }
.hero-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  transform: scale(1.045); transition: opacity .22s linear;
  animation: hero-respira 26s ease-in-out infinite alternate;
}
.hero-foto img.cambia { opacity: 0; }
@keyframes hero-respira { from { transform: scale(1.045) translate3d(0,0,0); } to { transform: scale(1.10) translate3d(-1.2%, -1.4%, 0); } }
.hero-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,32,20,.95) 0%, rgba(8,32,20,.72) 22%, rgba(8,32,20,.16) 52%, rgba(8,32,20,.04) 100%),
    linear-gradient(to right, rgba(8,32,20,.55) 0%, rgba(8,32,20,.10) 44%, rgba(8,32,20,0) 70%);
}
/* la lluvia: es el tema del negocio (131 días al año) */
.hero-lluvia { position: absolute; inset: -12% -6% 0; pointer-events: none; opacity: .22; mix-blend-mode: screen; }
.hero-lluvia::before, .hero-lluvia::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(74deg, rgba(255,255,255,.5) 0 1px, transparent 1px 64px);
  animation: llueve 1.05s linear infinite;
}
.hero-lluvia::after { background-image: repeating-linear-gradient(77deg, rgba(255,255,255,.28) 0 1px, transparent 1px 104px); animation-duration: 1.9s; }
@keyframes llueve { from { transform: translate3d(0, -14%, 0); } to { transform: translate3d(-6%, 14%, 0); } }

.hero-texto { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(20px, 3.4vh, 44px); color: #fff; z-index: 2; }
.hero-foto { display: block; }
.hero-eyebrow { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.86); margin-bottom: 14px; }
.hero-eyebrow span + span::before { content: "·"; margin-right: 18px; color: rgba(255,255,255,.5); }
.hero-titular { font-weight: 800; font-size: clamp(2.5rem, 7.2vw, 6.2rem); line-height: .9; letter-spacing: -.03em; }
.hero-titular .linea { display: block; overflow: hidden; }
.hero-titular .linea > span { display: block; transform: translateY(102%); animation: sube-linea .9s cubic-bezier(.16,.84,.28,1) forwards; }
.hero-titular .linea:nth-child(2) > span { animation-delay: .10s; }
.hero-titular .linea:nth-child(3) > span { animation-delay: .20s; }
.hero-titular .destacada > span { color: var(--tinte); }
@keyframes sube-linea { to { transform: translateY(0); } }
.hero-pie-foto { margin-top: 14px; font-size: .82rem; font-style: italic; color: rgba(255,255,255,.72); max-width: 52ch; }

/* el corte, pegado al canto inferior de la foto */
.hero-corte { background: var(--yeso); }
.hero-corte-fila { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding-block: clamp(20px, 2.6vw, 34px); }
.hero-sistema { display: flex; flex-direction: column; gap: 2px; }
.hero-sistema b { font-size: 1.15rem; font-weight: 700; }
.hero-sistema span { font-size: .86rem; color: var(--gris); }
.hero-frase { margin-top: 10px; font-size: 1.02rem; color: var(--grafito); max-width: 30ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hero-corte-dibujo .corte-hero { --k: 5.4; }
.hero-corte-dibujo .corte-pie { display: none; }

/* ---------- los doce casos ---------- */
.casos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.caso a { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; background: var(--yeso-2); }
/* el modelo entero, sin recortar, sobre el papel de la página */
.caso-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--yeso); }
.caso-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.caso-sin { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(160deg, var(--cemento) 0 12px, var(--yeso-2) 12px 24px); }
.caso a:hover .caso-foto img, .caso a:focus-visible .caso-foto img { transform: scale(1.04); }
.caso-cuerpo { display: block; padding: 14px 16px 18px; position: relative; }
.caso-n { font-weight: 800; font-size: .78rem; color: var(--accion); font-variant-numeric: tabular-nums; }
.caso-nombre { display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.12; letter-spacing: -.01em; margin: 2px 0 6px; }
.caso-frase { display: block; font-size: .88rem; line-height: 1.35; color: var(--gris); }
.caso-meta { display: block; margin-top: 8px; font-size: .78rem; color: var(--gris); }
.caso.activo a { background: var(--tinte); }
.caso.activo .caso-nombre { color: var(--profundo); }
.caso a:hover { background: var(--tinte); }
.caso-abierto .caso-nombre { color: var(--grafito); }

/* ---------- clientes ---------- */
.clientes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--hormigon); border-block: 1px solid var(--hormigon); }
.clientes li { display: grid; place-items: center; background: var(--yeso-2); padding: 26px 22px; min-height: 116px; }
.clientes img { max-width: min(100%, 170px); max-height: 46px; width: auto; height: auto; opacity: .62; filter: saturate(0); transition: opacity .2s linear, transform .3s var(--e); }
.clientes li:hover img { opacity: 1; transform: scale(1.04); }

/* ---------- obras (banda oscura) ---------- */
.obras-tiras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.obra-tira { display: block; text-decoration: none; color: inherit; }
.obra-tira-foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #0a1f14; }
.obra-tira-foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.02); transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .3s linear; }
.obra-tira:hover .obra-tira-foto img { transform: scale(1.05); filter: saturate(1); }
.obra-tira-texto { display: block; padding-top: 12px; }
.obra-tira-texto b { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.obra-tira-texto small { display: block; margin-top: 4px; font-size: .84rem; color: color-mix(in srgb, var(--yeso) 70%, transparent); }

/* ---------- planta e industria ---------- */
.industria-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.industria-carta { display: block; text-decoration: none; color: inherit; }
.industria-foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cemento); }
.industria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.industria-carta:hover .industria-foto img { transform: scale(1.05); }
.industria-texto { display: block; padding-top: 14px; }
.industria-texto b { display: block; margin-bottom: 6px; }

.cierre-1991 { background: var(--cemento); }


/* ---------- responsive del hero y las rejillas nuevas ---------- */
@media (max-width: 1180px) {
  .casos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clientes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .hero-corte-fila { grid-template-columns: minmax(0, 1fr); }
  .obras-tiras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industria-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hero-foto { height: min(64vh, 460px); min-height: 340px; }
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clientes li { padding: 18px 14px; min-height: 92px; }
  .clientes img { max-height: 34px; }
  .hero-titular { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .hero-eyebrow { font-size: .74rem; }
}
@media (max-width: 560px) {
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .caso-cuerpo { padding: 10px 12px 14px; }
  .caso-nombre { font-size: .95rem; }
  .caso-frase { display: none; }
  .obras-tiras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ============================================================
   v4 — navbar con desplegables, pie encolumnado con rino,
   separadores de sección por estratos y hero con vídeo.
   ============================================================ */

/* ---------- cabecera: el logo manda; fuera el botón de WhatsApp ---------- */
.cabecera { background: color-mix(in srgb, var(--yeso) 92%, transparent); backdrop-filter: saturate(1.3) blur(10px); }
.cab-fila { height: 76px; gap: clamp(14px, 2.4vw, 36px); }
.marca { gap: 13px; }
.marca-logo { width: 62px; }
.marca-texto b { font-size: 1.12rem; letter-spacing: -.028em; line-height: 1; }
.marca-texto i { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accion); font-weight: 600; }
.nav { margin-left: auto; gap: clamp(6px, 1.2vw, 20px); }
.nav a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 6px; border-bottom: 2px solid transparent; }
.nav-flecha { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; opacity: .5; transition: transform .2s var(--e); }
.nav a[aria-expanded="true"] .nav-flecha { transform: rotate(180deg); opacity: 1; }
.nav a[aria-expanded="true"] { border-bottom-color: var(--marca); color: var(--profundo); }

/* mega-menú con velo difuminado */
.velo-mega { position: fixed; inset: 76px 0 0; z-index: 30; background: rgba(11,46,28,.28); backdrop-filter: blur(7px) saturate(.9); opacity: 0; transition: opacity .18s linear; }
.velo-mega.abierto { opacity: 1; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 41; background: var(--yeso); border-bottom: 4px solid var(--marca);
  opacity: 0; transform: translateY(-10px); transition: opacity .18s linear, transform .22s var(--e); box-shadow: 0 22px 40px -26px rgba(11,46,28,.5); }
.mega.abierto { opacity: 1; transform: none; }
.mega-cuerpo { padding: 26px 0 24px; }
.mega-titulo { font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 16px; }
.mega-items { display: grid; gap: 4px 20px; }
.mega-items.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-items.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-items.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mega-items a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px; text-decoration: none; transition: background .14s linear; }
.mega-items a:hover { background: var(--tinte); }
/* v16 — los iconos son dibujos de 160 px con trazo de 4 px. Pintados a 26 px, el
   trazo mide 0,65 px CSS; a 22 px, 0,55. Sub-píxel: el navegador lo reparte en un
   gris y eso es la papilla que se veía. Para llegar a 1,20 px hay que pintarlos a
   48. La baldosa gris de 44 px no hacía nada —la columna ya da la calle de
   alineación— así que cede su sitio al dibujo: el glifo crece un 47 % sin mover
   un solo píxel de la rejilla del megamenú. */
.mega-ico { display: grid; place-items: center; width: 44px; height: 44px; background: none; }
.mega-ico .glifo { width: 44px; height: 44px; }
.ico { display: block; width: 44px; height: 44px; background: var(--grafito);
  -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.mega-txt b { display: block; font-weight: 600; font-size: .96rem; line-height: 1.15; }
.mega-txt small { display: block; margin-top: 2px; font-size: .8rem; color: var(--gris); line-height: 1.25; }
.mega-pie { margin-top: 18px; padding-top: 14px; border-top: 4px solid var(--yeso-2); font-size: .88rem; color: var(--gris); }
.mega-pie a { color: var(--profundo); font-weight: 600; }
html.mega-abierto { overflow: hidden; }
.menu-movil { top: var(--cabecera); }

/* ---------- hero con vídeo ---------- */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-foto { height: min(84vh, 760px); }
.hero-sub { margin-top: 18px; font-size: clamp(1rem, .95rem + .4vw, 1.22rem); color: rgba(255,255,255,.88); max-width: 46ch; }
.hero-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,.86);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
.hero-scroll svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; animation: baja 2.4s ease-in-out infinite; }
@keyframes baja { 0%,100% { transform: translateY(0); opacity: .7 } 50% { transform: translateY(5px); opacity: 1 } }

/* ---------- separadores ----------
   El fallo de fondo no era de gusto: `.banda` tenía padding inferior cero y el
   margen de `.cabeza-seccion` se escapaba por colapso, así que el aire de cada
   sección acababa DEPOSITADO FUERA de su banda y el color cambiaba cuatro píxeles
   por debajo del último renglón. La costura caía dentro del párrafo anterior.
   Y los dos grises miden 1,08:1: demasiado poco para leerse como dos superficies,
   suficiente para que se vea la raya.

   Regla nueva: el suelo no cambia por sección, cambia por REGISTRO, y hay tres.
   `--yeso` por defecto, `--noche` una vez (la prueba), `--cemento` una vez (la casa).
   `--yeso-2` deja de ser suelo y pasa a ser bandeja: NO TOCA NUNCA el borde del
   viewport. Cuando el suelo sí cambia, se detalla la junta con un zócalo del color
   puro antes de la primera tinta, que es como se resuelve un encuentro en obra. */
.banda { display: flow-root; padding-block: var(--paso-3); }
.banda:not([data-suelo]) + .banda:not([data-suelo]) { padding-top: 0; }
.banda[data-suelo] { padding-block: var(--zocalo); }
.banda[data-suelo] + .banda { padding-top: var(--zocalo); }
.banda > .contenedor { padding-top: 0; }
.banda > .contenedor > .cabeza-seccion { margin-top: 0; }
.banda-yeso2 { background: none; }
.cabeza-seccion { border-top: 4px solid var(--grafito); padding-top: var(--paso-2); margin-bottom: var(--paso-2); }
.banda-noche .cabeza-seccion { border-top-color: rgba(255,255,255,.42); }
.banda-noche .cabeza-seccion p { color: color-mix(in srgb, var(--yeso) 82%, transparent); }

/* ---------- pie: encolumnado, corto, con el rino de fondo ---------- */
.pie { position: relative; overflow: hidden; background: #061710; padding: clamp(40px, 5vw, 76px) 0 24px; }
.pie-rino { position: absolute; right: -6%; bottom: -28%; width: min(60%, 720px); height: auto; fill: rgba(0,149,59,.09); pointer-events: none; }
.pie-rejilla { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: clamp(20px, 3vw, 44px); }
.pie-col h2 { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--tinte) 62%, transparent); margin-bottom: 12px; }
.pie-col a { display: block; padding: 4px 0; font-size: .92rem; text-decoration: none; color: color-mix(in srgb, var(--yeso) 88%, transparent); }
.pie-col a:hover { color: #fff; text-decoration: underline; }
.pie-mas { margin-top: 6px; color: var(--tinte) !important; font-weight: 600; }
.pie-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0 !important; }
.pie-logo-svg { width: 52px; fill: var(--marca); }
.pie-logo span { display: grid; line-height: 1.05; }
.pie-logo b { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.pie-logo i { font-style: normal; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); }
.pie-esquina { font-size: .92rem; line-height: 1.4; color: color-mix(in srgb, var(--yeso) 82%, transparent); }
.pie-desde { margin-top: 8px; font-size: .8rem; color: color-mix(in srgb, var(--tinte) 66%, transparent); }
.pie-horario { margin-top: 8px; font-size: .84rem; color: color-mix(in srgb, var(--yeso) 66%, transparent); }
.pie-remate { position: relative; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  margin-top: clamp(28px, 4vw, 52px); padding-top: 16px; border-top: 1px solid rgba(228,241,232,.14);
  font-size: .78rem; color: color-mix(in srgb, var(--yeso) 58%, transparent); }
.pie-remate a { color: var(--tinte); }
.pie-remate b { color: color-mix(in srgb, var(--tinte) 80%, transparent); font-weight: 600; }

/* la banda de cierre nunca puede ser del mismo verde que el pie */
.banda-noche:last-of-type { background: linear-gradient(180deg, var(--noche) 0%, #08210f 100%); }

@media (max-width: 1180px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .pie-col:nth-child(4) { display: none; } }
@media (max-width: 920px) {
  .velo-mega, .menu-movil { top: var(--cabecera); }
  .marca-logo { width: 54px; } .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-col:nth-child(4) { display: block; }
}
@media (max-width: 560px) { .pie-rejilla { grid-template-columns: 1fr; gap: 22px; } .pie-rino { width: 90%; bottom: -14%; } }

/* ---------- listados con filtros a la izquierda, fijos ---------- */
.con-lateral { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
/* el lateral se queda fijo al bajar, como en una tienda de verdad, y si la lista
   es larga se desplaza sola sin arrastrar la página */
.lateral { position: sticky; top: calc(var(--cabecera) + 20px);
  max-height: calc(100svh - var(--cabecera) - 40px); overflow-y: auto; scrollbar-width: thin; }
.lateral-abrir { display: none; }
.lateral-grupo + .lateral-grupo { margin-top: 22px; padding-top: 18px; border-top: 4px solid var(--yeso-2); }
.lateral-grupo h2 { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.lateral-lista { display: grid; gap: 1px; }
.lateral-lista a { display: block; padding: 7px 10px; font-size: .9rem; text-decoration: none; border-radius: 3px; }
.lateral-lista a:hover { background: var(--yeso-2); }
.lateral-lista a[aria-current="true"] { background: var(--tinte); color: var(--profundo); font-weight: 600; }
.lateral-nota { margin-top: 20px; font-size: .8rem; color: var(--gris); line-height: 1.4; }

/* ---------- selector por material (equipos) ---------- */
.selector-material { display: grid; gap: 2px; }
.sel-fila { display: grid; grid-template-columns: 40px 56px minmax(0, 1.2fr) minmax(0, 1fr) 30px; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--yeso); text-decoration: none; transition: background .14s linear, transform .18s var(--e); }
.sel-fila:hover { background: var(--tinte); transform: translateX(3px); }
.sel-n { font-weight: 800; font-size: .8rem; color: var(--accion); font-variant-numeric: tabular-nums; }
.sel-ico { display: grid; place-items: center; width: 56px; height: 56px; background: var(--yeso-2); }
.sel-ico .ico { width: 40px; height: 40px; }
.sel-material b, .sel-equipo b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.2; }
.sel-material small, .sel-equipo small { display: block; margin-top: 2px; font-size: .84rem; color: var(--gris); }
.sel-equipo b { color: var(--profundo); }
.sel-flecha { font-size: 1.1rem; color: var(--accion); text-align: right; }

/* ---------- visor de fotos de la ficha ---------- */
.visor { position: relative; background: var(--yeso-2); display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; }
.visor-lamina { display: grid; place-items: center; width: 100%; height: 100%; }
.visor-lamina img { max-width: 100%; max-height: 100%; width: auto; }
.visor-lamina.recorte img { mix-blend-mode: multiply; padding: 5%; }
.visor-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--yeso) 88%, transparent); color: var(--grafito); transition: background .14s linear; }
.visor-btn:hover { background: var(--yeso); }
.visor-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.visor-btn.ant { left: 8px; } .visor-btn.sig { right: 8px; }
.visor-cuenta { position: absolute; right: 12px; bottom: 10px; font-size: .78rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.ficha-miniaturas .mini { width: 84px; height: 64px; background: var(--yeso-2); padding: 0; overflow: hidden; opacity: .55; transition: opacity .16s linear; }
.ficha-miniaturas .mini.activa { opacity: 1; box-shadow: inset 0 -3px 0 var(--marca); }
.ficha-miniaturas .mini img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- carrito vacío ---------- */
.carrito-vacio { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; padding: 12px 0 40px; }
.carrito-vacio-corte img { display: block; width: 100%; height: auto; }
.split-7-5.sin-resumen { grid-template-columns: minmax(0, 1fr); }
.split-7-5.sin-resumen aside { display: none; }

/* ---------- carrusel (proyectos) ---------- */
.carrusel { position: relative; }
.carrusel-pista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 32%); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > * { scroll-snap-align: start; }
.carrusel-btn { position: absolute; top: 38%; z-index: 3; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--yeso); color: var(--grafito); box-shadow: var(--sombra); transition: transform .18s var(--e); }
.carrusel-btn:hover { transform: scale(1.06); }
.carrusel-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.carrusel-btn.ant { left: -18px; } .carrusel-btn.sig { right: -18px; }

@media (max-width: 920px) {
  .con-lateral { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; }
  .lateral-abrir { display: block; width: 100%; min-height: 48px; border-radius: 4px; background: var(--yeso-2); font-weight: 600; }
  .lateral-cuerpo { display: none; padding-top: 14px; }
  .lateral.abierto .lateral-cuerpo { display: block; }
  .carrito-vacio { grid-template-columns: minmax(0, 1fr); }
  .carrito-vacio-corte { max-width: 260px; }
  .carrusel-pista { grid-auto-columns: minmax(240px, 62%); }
  .carrusel-btn { display: none; }
  .sel-fila { grid-template-columns: 30px 44px minmax(0, 1fr); }
  .sel-equipo { grid-column: 2 / -1; } .sel-flecha { display: none; }
}

/* corte 3D como cabeza del hero de solución */
.sol-hero-3d { background: var(--yeso-2); overflow: hidden; margin-bottom: 10px; }
.sol-hero-3d img { width: 100%; height: auto; max-height: 340px; object-fit: cover; object-position: center 45%; }

/* ---------- cinta de clientes: dos trenes en sentidos opuestos ---------- */
.cinta { display: grid; gap: 10px; overflow: hidden; margin-inline: calc(50% - 50vw); padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta-pista { overflow: hidden; }
.cinta-tren { display: flex; gap: 10px; width: max-content; animation: rueda 46s linear infinite; }
.cinta-pista.der .cinta-tren { animation-direction: reverse; animation-duration: 54s; }
.cinta:hover .cinta-tren { animation-play-state: paused; }
@keyframes rueda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cinta-logo { display: grid; place-items: center; width: 208px; height: 104px; flex: none; background: var(--yeso); padding: 18px 22px; }
.cinta-logo img { max-width: 100%; max-height: 100%; width: auto; opacity: .55; transition: opacity .2s linear, transform .3s var(--e); }
.cinta-logo:hover img { opacity: 1; transform: scale(1.05); }
html.qa .cinta-tren { animation: none; }
@media (prefers-reduced-motion: reduce) { .cinta-tren { animation: none; } }
@media (max-width: 720px) { .cinta-logo { width: 156px; height: 84px; padding: 14px 16px; } }

/* ---------- mosaico de marcas ---------- */
.marcas-mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.marca-celda { display: grid; place-items: center; background: var(--yeso); padding: 26px 20px; min-height: 128px; text-align: center; }
.marca-celda img { max-width: min(100%, 160px); max-height: 46px; width: auto; opacity: .7; }
.marca-celda.grande { grid-column: span 2; grid-row: span 2; align-content: center; gap: 14px; padding: 32px; }
.marca-celda.grande img { max-width: min(100%, 260px); max-height: 76px; opacity: 1; }
.marca-celda.grande b { font-size: 1.05rem; font-weight: 700; }
.marca-celda.grande small { display: block; margin-top: 4px; color: var(--gris); font-size: .88rem; max-width: 34ch; }
@media (max-width: 720px) { .marcas-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marca-celda.grande { grid-column: span 2; grid-row: span 1; } }

/* ---------- equipo humano ---------- */
.equipo-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.equipo-carta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; }
.equipo-carta img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.equipo-carta b { display: block; font-weight: 700; font-size: 1.02rem; }
.equipo-carta small { display: block; margin-top: 2px; color: var(--gris); font-size: .88rem; line-height: 1.3; }
@media (max-width: 920px) { .equipo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .equipo-lista { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   v6 — LA BARRA DE LA CASA y LA PROBETA.
   Dos decisiones de tribunal:
   · la cabecera se ancla al sello, nunca se centra y nunca encoge;
   · la portada la manda un objeto seccionado, no una fotografía.
   Radio 0 en todo. Una sola gramática de movimiento: velocidad
   constante, como pasa el rodillo. Nada entra con fundido.
   ============================================================ */
:root { --cabecera: 76px; --placa: 132px; }

/* ---------- la barra ----------
   Dos anclas verdes, una en cada extremo: la izquierda firma, la derecha cierra.
   Entre las dos, la navegación colgada de la firma, nunca centrada.
   El sello era cuadrado y el dibujo es 2,126:1, así que la marca solo llenaba el
   17,5 % de su propia tinta. La placa toma la proporción del dibujo: 4,3 veces
   más marca sin subir un píxel la altura de la barra. */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: var(--placa) minmax(0, 1fr);
  background: var(--yeso); backdrop-filter: none;
  box-shadow: 0 4px 0 var(--hormigon);
  transition: box-shadow 120ms linear;
}
.cabecera[data-posado] { box-shadow: 0 4px 0 var(--grafito); }

.cab-placa {
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--placa); height: var(--cabecera);
  display: grid; place-items: center;
  background: var(--profundo);
}
/* medida explícita: con height auto el SVG se estiraba dentro de la rejilla */
.cab-placa-svg { width: 94px; height: 44px; fill: #fff; position: relative; z-index: 1; }

/* el rinoceronte levanta el pico. Una vez al entrar y cada vez que se pasa por
   encima: gira sobre su propia pata, no se escala ni se funde. Velocidad constante,
   como todo lo que se mueve en esta web. */
.cab-placa-svg { transform-origin: 22% 84%; animation: levanta-el-pico 620ms linear 1; }
.cab-placa:hover .cab-placa-svg, .cab-placa:focus-visible .cab-placa-svg {
  transform: rotate(-8deg); transition: transform 160ms linear;
}
@keyframes levanta-el-pico {
  0%   { transform: rotate(0); }
  38%  { transform: rotate(-9deg); }
  62%  { transform: rotate(-9deg); }
  100% { transform: rotate(0); }
}

.cab-cuerpo {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  height: var(--cabecera);
  padding-inline: clamp(16px, 1.7vw, 24px) clamp(16px, 2.8vw, 40px);
}
.marca-texto { display: grid; line-height: 1.02; text-decoration: none; flex: none; }
.marca-texto b { font-weight: 800; font-size: 20px; letter-spacing: -.032em; }
.marca-texto i { font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--accion); }

.nav { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 24px); margin: 0 auto 0 0; }
.nav a {
  padding: 7px 0; font-weight: 700; font-size: 1.02rem; letter-spacing: -.012em; white-space: nowrap;
  text-decoration: none; color: inherit; background: none; border: 0; cursor: pointer;
  box-shadow: inset 0 -4px 0 transparent; transition: box-shadow 120ms linear;
}
.nav a:hover, .nav a:focus-visible { box-shadow: inset 0 -4px 0 var(--hormigon); }
.nav a[aria-expanded="true"], .nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--marca); }
/* la cuenta se leía «Carrito3»: necesita su propia caja y aire delante */
.cab-palabra b { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: .45em; padding: 0 5px; background: var(--accion); color: #fff;
  font: 700 .74rem/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }

/* Contacto es una palabra más de la navegación secundaria, no un botón verde:
   un botón de contacto en la barra no cierra nada y a 1024 la desbordaba 57 px. */
.nav-menor { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); flex: none; }
.nav-menor a, .nav-menor .cab-palabra {
  padding: 7px 0; font-weight: 600; font-size: .87rem; white-space: nowrap;
  text-decoration: none; color: var(--gris); background: none; border: 0; cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent; transition: box-shadow 120ms linear, color 120ms linear;
}
.nav-menor a:hover, .nav-menor .cab-palabra:hover { color: var(--grafito); box-shadow: inset 0 -3px 0 var(--hormigon); }
.nav-menor a[aria-current="page"] { color: var(--grafito); box-shadow: inset 0 -3px 0 var(--marca); }
.cab-menu { display: none; }

/* la persiana baja a velocidad constante, como una mano de producto */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 41;
  background: var(--yeso); border-bottom: 4px solid var(--marca);
  opacity: 1; transform: none; box-shadow: none;
  clip-path: inset(0 0 100% 0); transition: clip-path 180ms linear;
}
.mega.abierto { clip-path: inset(0 0 0 0); }
.velo-mega { inset: var(--cabecera) 0 0; }

/* el corte sube a 1080: con dos grupos, por debajo de eso se estrecharían tanto
   que volverían a leerse como nueve palabras iguales */
@media (max-width: 1080px) {
  .nav, .nav-menor { display: none; }
  .cab-cuerpo { justify-content: space-between; gap: 12px; padding-inline: 14px 18px; }
  .marca-texto { display: grid; }
  .marca-texto b { font-size: 17px; }
  .marca-texto i { font-size: 10px; }
  .cab-menu { display: block; padding: 7px 0; font: 600 1rem/1 var(--display);
              background: none; border: 0; color: inherit; cursor: pointer;
              box-shadow: inset 0 -4px 0 var(--marca); }
}
@media (prefers-reduced-motion: reduce) {
  .cab-placa-svg { animation: none; }
  .cab-placa:hover .cab-placa-svg { transform: none; transition: none; }
}
html.qa .cab-placa-svg { animation: none; }

/* ---------- la portada: una mesa con un objeto encima ---------- */
/* la portada ocupa exactamente lo que queda de pantalla bajo la barra: el objeto se
   ajusta a lo que sobra, así la ficha entera entra sin desplazar y sin recortarse */
.hero { position: relative; background: var(--yeso); padding-block: clamp(20px, 3vh, 40px) clamp(24px, 4vh, 52px);
        height: calc(100svh - var(--cabecera)); min-height: 700px; }
/* v16 — 5fr dejaba la columna del titular en 538 px y el h1 de /equipos, a 54,4 px,
   mide 529: se salía. Y la columna derecha a 7fr tenía 330 px muertos entre el
   nombre del equipo y «7 modelos». El 6/6 arregla las dos. */
.hero-mesa {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(22px, 3vw, 48px); align-items: center; height: 100%;
}

/* v16 — el titular de portada deja de tener talla propia. Había cuatro h1 en el
   sitio (54,4 / 49,6 / 43,2 / 40,8) y el de /legal, una página de texto legal, era
   más grande que el de /equipos. Estos son los valores de .t-h1: si .t-h1 cambia,
   esto cambia con él. */
.hero-titular {
  font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: .98; letter-spacing: -.022em; color: var(--grafito);
}
.hero-titular span { display: block; }
.hero-bajada { margin-top: 14px; font-size: 1.05rem; line-height: 1.4; color: var(--gris); max-width: 34ch; }
.hero-puertas {
  margin: clamp(20px, 2.6vh, 30px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px;
  border-top: 4px solid var(--hormigon);
}
.hero-puertas a {
  display: block; padding: 9px 0; font-weight: 700; font-size: clamp(.99rem, 1.05vw, 1.1rem);
  line-height: 1.15; letter-spacing: -.01em; text-decoration: none; color: inherit;
  box-shadow: inset 0 -4px 0 transparent; transition: box-shadow 120ms linear;
}
.hero-puertas a:hover, .hero-puertas a:focus-visible { box-shadow: inset 0 -4px 0 var(--hormigon); }
.hero-puertas a[aria-current="true"] { box-shadow: inset 0 -4px 0 var(--marca); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.4vh, 28px); }

.probeta { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 12px; height: 100%; }
/* la caja no tiene alto propio: se lo da la fila 1fr, así el objeto cede espacio a la ficha */
.probeta-caja { position: relative; width: 100%; min-height: 0; margin-inline: auto; max-width: 880px; }
.probeta-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* la ficha no se dibuja encima del modelo: se lee debajo, en filas.
   El 3D se queda limpio; el papel va aparte, que es como se entrega en obra. */
/* altura reservada para el sistema más largo, nueve capas: al cambiar de corte
   la ficha cambia de contenido pero la página no da un salto */
.probeta-hoja { margin: 0 auto; padding: 0; list-style: none; border-top: 4px solid var(--hormigon);
  max-width: 880px; width: 100%; min-height: 292px; }

/* el mando: el rinoceronte de la casa apunta al corte anterior y al siguiente */
.probeta-mando { display: flex; align-items: center; max-width: 880px; width: 100%; margin-inline: auto; }
.probeta-cuenta { font-size: .86rem; font-weight: 600; color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums; }

/* el rinoceronte de la casa pasa de corte. Vive en los costados, en calle propia:
   la mesa se estrecha lo justo para que no pise ni una palabra. */
/* el rinoceronte no abre calle propia: vive en el margen que el contenedor ya
   deja. Con calle, el titular del hero empezaba 90 px más adentro que el de todas
   las demás secciones, y eran dos bordes izquierdos distintos en la misma página. */
.rino { position: absolute; top: 0; bottom: 0; z-index: 3;
  display: grid; place-items: center; padding: 0;
  /* con solo un mínimo, en un monitor de 2560 la calle medía 440 px y al pasar el
     ratón pintaba media pantalla de gris. Va acotada por arriba y por abajo. */
  width: clamp(44px, calc((100vw - var(--ancho)) / 2), 92px);
  background: none; border: 0; cursor: pointer; color: var(--cemento);
  transition: color 140ms linear, background 140ms linear; }
.rino:not(.der) { left: 0; }
.rino.der { right: 0; }
.rino:hover, .rino:focus-visible { color: var(--accion); background: var(--yeso-2); }
/* el dibujo nunca puede ser más ancho que su calle, o se mete en el texto */
.rino svg { width: min(clamp(30px, 3.4vw, 58px), 100%); height: auto; fill: currentColor; }
.rino:not(.der) svg { transform: scaleX(-1); }
@media (max-width: 1120px) { .hero > .rino { display: none; } }

.probeta-hoja li {
  display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--hormigon);
  clip-path: inset(0 100% 0 0);
}
.hero.aplicado .probeta-hoja li { clip-path: inset(0 0 0 0); transition: clip-path 110ms linear var(--retardo, 0ms); }
.probeta-hoja .n { font-weight: 800; color: var(--accion); font-variant-numeric: tabular-nums lining-nums; font-size: .92rem; }
.probeta-hoja .q { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.probeta-hoja .d { font-size: .86rem; color: var(--gris); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.probeta-pie { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 10px; font-size: .88rem; }
.probeta-capa { color: var(--gris); font-variant-numeric: tabular-nums lining-nums; }
.probeta-fuente { color: var(--profundo); font-weight: 600; text-decoration: underline;
                  text-decoration-thickness: 1px; text-underline-offset: .18em; }

@media (max-width: 900px) {
  /* en móvil manda el objeto: va justo detrás de la frase, antes de las doce puertas */
  .hero { padding-block: 18px 30px; height: auto; min-height: 0; }

  .probeta { height: auto; grid-template-rows: none; }
  .probeta-img { position: static; height: auto; aspect-ratio: 4 / 3; }
  .probeta-hoja { min-height: 0; }
  .hero-mesa { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; }
  /* en móvil los hijos de la columna izquierda entran en la misma rejilla, así que
     TODOS necesitan orden: lo que no lo tiene se va al principio y descoloca la página */
  .hero-dicho { display: contents; }
  .miga          { order: 1; margin-bottom: 0; }
  .hero-titular  { order: 2; font-size: clamp(1.85rem, 7.4vw, 2.3rem); }
  .hero-bajada   { order: 3; margin-top: 0; max-width: none; font-size: 1rem; }
  .sol-dato      { order: 4; margin-top: 0; }
  .probeta       { order: 5; }
  .hero-puertas  { order: 6; margin-top: 4px; gap: 0 16px; }
  .hero-acciones { order: 7; margin-top: 4px; }
  .hero-dicho > .fuente { order: 8; }
  .hero-puertas a { padding: 11px 0; font-size: .97rem; }
  .probeta-hoja .d { display: none; }
  .probeta-hoja .q { font-size: .92rem; }
  .hero-acciones .boton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .probeta-hoja li { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .mega, .nav a, .cab-palabra, .cabecera, .hero-puertas a { transition: none !important; }
}

/* ============================================================
   v7 — LA SOLUCIÓN. Primero el objeto entero; después el mismo
   objeto se levanta capa a capa a la izquierda mientras a la
   derecha se lee lo que es cada capa. Nada se dibuja encima del
   modelo: el modelo se descubre, que es distinto.
   ============================================================ */
.miga { font-size: .84rem; color: var(--gris); margin-bottom: 12px; }
.miga a { color: var(--profundo); font-weight: 600; }
.miga span::before { content: ""; display: inline-block; width: 14px; height: 1px;
  background: var(--cemento); vertical-align: middle; margin: 0 8px; }
.sol-dato { margin-top: 14px; font-size: .95rem; line-height: 1.45; color: var(--gris); max-width: 46ch; }
.fuente-enlace { display: inline-block; margin-left: .35em; color: var(--profundo); font-weight: 600; font-size: .88rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; white-space: nowrap; }
.probeta-vacia { align-self: center; background: var(--yeso-2); padding: 30px 32px; }
.probeta-vacia .parrafo { margin-top: 10px; }

.capas-relato { background: var(--yeso); padding-block: clamp(30px, 5vh, 72px) clamp(40px, 7vh, 96px); }
.capas-mesa { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(26px, 4vw, 64px); align-items: start; }

.capas-pegajoso { position: sticky; top: calc(var(--cabecera) + 22px); display: grid; gap: 14px; }
.capas-lienzo { position: relative; width: 100%; aspect-ratio: 4 / 3; }
/* la pila de fotogramas: solo uno visible. Se cruzan con una disolvencia corta
   para que el cambio se lea como «ha caído otra capa», no como un salto. */
.capas-fotograma { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 260ms linear; }
.capas-fotograma.visible { opacity: 1; }

.capas-rotulo { display: flex; align-items: baseline; gap: 12px; border-top: 4px solid var(--hormigon); padding-top: 12px; }
.capas-rotulo b { font: 800 1.5rem/1 var(--display); color: var(--accion);
  font-variant-numeric: tabular-nums lining-nums; min-width: 1.4em; }
.capas-rotulo span { font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.012em; }

.capas-regla { display: flex; gap: 4px; }
.capas-regla button { flex: 1; height: 30px; padding: 0; background: var(--hormigon); border: 0; cursor: pointer;
  min-width: 26px;
  color: var(--gris); font: 700 .76rem/1 var(--display); font-variant-numeric: tabular-nums;
  transition: background 120ms linear, color 120ms linear; }
.capas-regla button:hover { background: var(--cemento); }
.capas-regla button[aria-current="true"] { background: var(--marca); color: #fff; }

.capas-texto { display: grid; gap: clamp(26px, 4vh, 54px); }
.capa-bloque { scroll-margin-top: calc(var(--cabecera) + 30px); }
.capa-cabeza { display: flex; align-items: baseline; gap: 12px; border-top: 4px solid var(--grafito); padding-top: 12px; }
.capa-cabeza .n { font: 800 1.5rem/1 var(--display); color: var(--accion);
  font-variant-numeric: tabular-nums lining-nums; min-width: 1.4em; }
.capa-cabeza .n-detalle { color: var(--cemento); }
.capa-cabeza h3 { font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.15; letter-spacing: -.018em; }
.capa-dato { margin-top: 10px; font-size: .97rem; line-height: 1.5; color: var(--gris); max-width: 62ch; }
.capa-dato b { color: var(--grafito); }
.capa-producto { margin-top: 16px; max-width: 420px; }
.capa-sin-producto { margin-top: 14px; font-size: .9rem; color: var(--gris); }

@media (max-width: 900px) {
  .capas-mesa { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* nada de columna pegajosa en una pantalla de mano: entre cabecera, bloque y
     barra inferior se comían 290 px de 844. El bloque se ve una vez, arriba. */
  .capas-pegajoso { position: static; background: var(--yeso);
    padding-bottom: 10px; grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas: "lienzo rotulo" "regla regla"; align-items: center; gap: 10px 14px; }
  .capas-lienzo { grid-area: lienzo; }
  .capas-rotulo { grid-area: rotulo; border-top: 0; padding-top: 0; }
  .capas-rotulo b { font-size: 1.2rem; }
  .capas-rotulo span { font-size: .95rem; }
  .capas-regla { grid-area: regla; }
  .capas-regla button { height: 26px; }
  .capa-producto { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .capas-fotograma { transition: none; } }

/* ============================================================
   v8 — EL MURO DE CLIENTES. Los quince logos vienen de la hoja
   del cliente, recortados uno a uno y llevados a una sola tinta
   con el MISMO peso óptico: por eso una rejilla regular aquí no
   es pereza, es lo que la normalización hace posible.
   En reposo, tinta. Al pasar por encima, el color de la marca y
   el sector debajo. Sin tarjetas, sin sombras, sin cinta que corre.
   ============================================================ */
.muro-clientes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 4px solid var(--grafito); border-left: 1px solid var(--hormigon);
}
.cliente {
  position: relative; display: grid; align-content: center; gap: 10px;
  min-height: 168px; padding: 24px 20px 20px;
  border-right: 1px solid var(--hormigon); border-bottom: 1px solid var(--hormigon);
}
.cliente-marca { position: relative; display: grid; place-items: center; height: 86px; }
.cliente-marca img { max-width: 100%; max-height: 86px; width: auto; height: auto; }
.cliente-tinta { opacity: .72; transition: opacity 140ms linear; }
.cliente-color { position: absolute; opacity: 0; transition: opacity 140ms linear; }
.cliente-pie { display: grid; gap: 1px; text-align: center; opacity: 0; transition: opacity 140ms linear; }
.cliente-pie b { font-weight: 600; font-size: .78rem; line-height: 1.2; letter-spacing: -.008em; }
.cliente-pie small { font-size: .72rem; color: var(--gris); }
.cliente:hover .cliente-tinta, .cliente:focus-within .cliente-tinta { opacity: 0; }
.cliente:hover .cliente-color, .cliente:focus-within .cliente-color { opacity: 1; }
.cliente:hover .cliente-pie, .cliente:focus-within .cliente-pie { opacity: 1; }
.cliente:hover { background: var(--yeso-2); }
/* un sello macizo (un disco lleno de color) en una sola tinta se convierte en una
   mancha. Esos conservan su propio dibujo, en gris, y también encienden al pasar. */
.cliente.solido .cliente-tinta { display: none; }
/* un sello macizo va SIEMPRE en su color: en gris se convierte en un disco muerto */
.cliente.solido .cliente-color { position: static; opacity: 1; }

@media (max-width: 1100px) { .muro-clientes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .muro-clientes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cliente { min-height: 128px; padding: 16px 12px; } .cliente-marca { height: 62px; } .cliente-marca img { max-height: 62px; } }
@media (max-width: 520px)  { .muro-clientes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* en táctil no hay «pasar por encima»: se enseña ya el color y el pie */
@media (hover: none) {
  .cliente-tinta { opacity: 0; } .cliente-color { opacity: 1; } .cliente-pie { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cliente-tinta, .cliente-color, .cliente-pie { transition: none; } }

/* ============================================================
   v9 — NOSOTROS. La página que tiene que sostener 35 años.
   La prueba no es un párrafo de compromiso: son las cuatro cosas
   que aquí se hacen bajo un mismo techo, las caras de quien
   contesta, y las marcas y clientes con el mismo peso óptico.
   ============================================================ */
/* v16 — ver el bloque de .proyectos-portada: misma avería, mismo arreglo. */
.cuatro-titulo { font-weight: 700; font-size: 1.02rem; letter-spacing: -.016em; margin-bottom: 12px; }
.probeta-hoja.cuatro { min-height: 0; }
.probeta-hoja.cuatro li { clip-path: none; padding: 13px 0; }
.probeta-hoja.cuatro .q { font-size: 1.02rem; }
.probeta-hoja.cuatro .d { color: var(--gris); font-size: .8rem; }
.probeta-hoja.cuatro .q small { display: block; margin-top: 2px; font-weight: 400; font-size: .82rem; color: var(--gris); }
/* la escalera de /equipos llevaba aquí un icono de 22 px en verde. A ese tamaño no
   informaba de nada —la fila ya dice «Poliurea y espuma de poliuretano / Reactor
   con manguera térmica / 8 modelos»— y encima gastaba el acento único de la página
   en una mancha ilegible. Ahora lleva el mismo numeral que las escaleras de
   /proyectos, /servicios y /nosotros: las cuatro son la misma cosa. */
.cuatro-pie { margin-top: 16px; font-size: .95rem; line-height: 1.5; color: var(--gris); max-width: 54ch; }

/* los retratos: fichas de personal, no una galería.
   El original es una miniatura de web de 2010: a 520 px se le ven los píxeles y
   además seis caras enormes no son elegantes. A 132 px el retrato está por encima
   de su resolución real, la fila se lee de un vistazo y el nombre manda. */
.retratos { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 72px);
  border-top: 4px solid var(--grafito); }
.ficha-persona { display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px); align-items: center;
  padding: var(--paso-2) 0; border-bottom: 1px solid var(--hormigon); }
/* v16 — los seis retratos son de seis épocas: medido en los originales, el fondo
   iba de 191 a 236 de luminancia y la dominante de +5,8 a +17,1 de rojo sobre azul.
   El paso que había antes aplicaba la misma ganancia a los seis, que sobre
   exposiciones distintas conserva la diferencia y con el contraste la amplifica:
   los dejaba a 66,7 puntos de distancia, peor que los originales.
   `herramientas/retratos.py` calcula ahora la ganancia por imagen contra un
   objetivo común y mide la dominante en el fondo, no en la foto entera (el mundo
   gris clásico enfriaba a quien salía con más piel a la vista). Dispersión del
   fondo 44,6 → 7,9; cálido/frío 11,3 → 3,0; media 53,5 → 2,0.
   Lo que el grado no puede igualar —el fondo es parte de la foto— lo iguala la
   misma gramática del muro de clientes: en reposo, tinta; al pasar por encima, la
   persona en color. */
.ficha-persona img { display: block; width: 132px; height: 132px; object-fit: cover;
  filter: grayscale(1) contrast(1.04); transition: filter 160ms linear; }
.ficha-persona:hover img, .ficha-persona:focus-within img { filter: grayscale(0) contrast(1.02); }
.ficha-persona-txt { display: block; min-width: 0; }
.ficha-persona b { display: block; font-weight: 700; font-size: 1.08rem; letter-spacing: -.018em; line-height: 1.1; }
.ficha-persona span { display: block; margin-top: 3px; font-size: .9rem; color: var(--gris); }
.ficha-persona small { display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--hormigon); font-size: .85rem; line-height: 1.35; color: var(--grafito); }

.casa-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); }
.casa-datos > div { border-top: 4px solid var(--hormigon); padding-top: 16px; }
.casa-datos .t-h3 { font-size: 1.02rem; }
.casa-datos .parrafo { margin-top: 8px; color: var(--gris); }

@media (max-width: 900px) {
  .nosotros-portada .hero-mesa { grid-template-columns: minmax(0, 1fr); }
  /* estas portadas no reordenan: sus hijos se quedan en su bloque, y por eso
     necesitan recuperar los márgenes que la regla de móvil pone a cero */
  .nosotros-portada .hero-dicho { display: block; }
  .nosotros-portada .hero-bajada, .proyectos-portada .hero-bajada { margin-top: var(--paso-1); }
  .nosotros-portada .sol-dato, .proyectos-portada .sol-dato { margin-top: var(--paso-1); }
  .casa-datos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) { .retratos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .ficha-persona { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .ficha-persona img { width: 96px; height: 96px; }
  .ficha-persona b { font-size: .98rem; }
  .ficha-persona small { display: none; }
}

/* ============================================================
   v10 — PROYECTOS. Una obra por bloque: a la izquierda la ficha,
   pegada mientras se pasan las fotos; a la derecha el carrusel de
   la obra, con el mismo mando de rinoceronte que la portada. No
   hay rejilla de fotos: hay una obra y sus fotos, una detrás de otra.
   ============================================================ */
/* v16 — la portada de sección no es una pantalla: es la primera banda.
   Se van la cuarta y la quinta distancia vertical del sitio —esos clamp() medidos
   en vh, que no usa nada más en la hoja y que a 900 px daban 45 px arriba y 45
   abajo—, y se va el align-items:center que dejaba el h1 de /equipos 95 px por
   debajo de la etiqueta de la columna de al lado: la portada no tenía un borde
   superior, tenía dos. El aire de abajo lo pone entero el --paso-3 de la banda
   siguiente, que es de donde tenía que salir desde el principio. */
.proyectos-portada, .nosotros-portada {
  height: auto; min-height: 0; padding-block: var(--paso-3) 0;
}
.proyectos-portada .hero-mesa, .nosotros-portada .hero-mesa {
  height: auto; align-items: start;
}
/* .probeta declara cuatro pistas (caja 3D, hoja, mando, pie) porque así es la
   portada del landing. Aquí solo hay dos hijos, pero las cuatro pistas seguían
   cobrando sus tres huecos de 12 px: 24 px de nada colgando bajo la escalera.
   Sin plantilla, la rejilla se mide por sus hijos. */
.proyectos-portada .probeta, .nosotros-portada .probeta {
  height: auto; grid-template-rows: none;
}
.probeta-hoja.cuatro .q a { text-decoration: none; color: inherit;
  box-shadow: inset 0 -2px 0 var(--hormigon); transition: box-shadow 120ms linear; }
.probeta-hoja.cuatro .q a:hover { box-shadow: inset 0 -2px 0 var(--marca); }

/* clip, no hidden: clip no crea contexto de scroll y la ficha sigue pegándose */
.obra { overflow-x: clip; }
.obra-mesa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.obra-ficha { position: sticky; top: calc(var(--cabecera) + 24px); border-top: 4px solid var(--grafito); padding-top: 16px; }
.obra-n { font: 800 .84rem/1 var(--display); color: var(--accion); font-variant-numeric: tabular-nums lining-nums; }
.obra-ficha .t-h2 { margin-top: 8px; font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.08; }
.obra-donde { margin-top: 6px; font-weight: 600; font-size: .95rem; color: var(--gris); }
.obra-alcance { margin-top: 2px; font-size: .95rem; color: var(--gris); }
.obra-texto { margin-top: 16px; font-size: .97rem; line-height: 1.5; }
.obra .por-confirmar { display: block; margin-top: 12px; }
.obra-cta { margin-top: 18px; }

/* ---------- el carrusel ----------
   Tres correcciones del director: los rinocerontes van a los lados DE LAS FOTOS,
   la última foto no se corta contra el borde de la pantalla, y al llegar al final
   se sigue. Por eso la pista deja de sangrar: dos fotos enteras y punto. */
.obra-galeria { position: relative; display: grid; gap: 12px; }
.obra-pista {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.obra-pista::-webkit-scrollbar { display: none; }
.obra-foto { flex: 0 0 calc((100% - 10px) / 2); margin: 0; scroll-snap-align: start; }
.obra-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--yeso-2); }

/* las flechas se apoyan sobre el canto de la tira, centradas en la foto */
/* v16 — la flecha era una pastilla de yeso al 88 % con un filete de --hormigon.
   Medido contra las fotos del sitio: el peor caso del contorno daba 1,00:1, o sea
   nada, y el filete medía 1,02–1,18:1 contra su propio relleno: un borde
   matemáticamente invisible puesto ahí precisamente para resolver esto.
   Ahora es losa de tinta con canto de yeso: si la foto es clara gana el relleno y
   si es oscura gana el canto, y el peor caso queda en 3,66:1, por encima del 3:1
   que pide WCAG 1.4.11 para el contorno de un control.
   El :hover iba a --marca, que con blanco da 3,92:1 y no llega a AA. --accion da 5,49. */
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); margin-top: -18px;
  width: 52px; height: 64px; z-index: 2;
  display: grid; place-items: center;
  color: var(--yeso); background: var(--grafito);
  box-shadow: inset 0 0 0 2px var(--yeso);
}
.carrusel-flecha.ant { left: 8px; }
.carrusel-flecha.sig { right: 8px; }
.carrusel-flecha:hover, .carrusel-flecha:focus-visible {
  color: #fff; background: var(--accion); box-shadow: inset 0 0 0 2px var(--yeso);
}
.carrusel-flecha svg { width: 34px; height: auto; fill: currentColor;
  transition: transform 160ms linear; }

/* el espejo estaba al revés: cada rinoceronte miraba hacia dentro, contra su
   propia marcha. La flecha de «anterior» apuntaba a la derecha.
   Y al pasar por encima levanta el pico y da un paso en su dirección: giro y
   traslación, ni escala ni fundido, y linear es velocidad constante. Solo en
   hover, nunca al cargar: con dieciséis flechas en /proyectos sería una verbena. */
.carrusel-flecha.sig svg { transform-origin: 22% 84%; }
.carrusel-flecha.ant svg { transform: scaleX(-1); transform-origin: 78% 84%; }
.carrusel-flecha.sig:hover svg, .carrusel-flecha.sig:focus-visible svg {
  transform: translateX(3px) rotate(-9deg); }
.carrusel-flecha.ant:hover svg, .carrusel-flecha.ant:focus-visible svg {
  transform: scaleX(-1) translateX(3px) rotate(-9deg); }

@media (prefers-reduced-motion: reduce) {
  .carrusel-flecha svg { transition: none; }
  .carrusel-flecha.sig:hover svg { transform: none; }
  .carrusel-flecha.ant:hover svg { transform: scaleX(-1); }
}

.obra-mando { display: flex; align-items: center; gap: 6px; }
.obra-cuenta { margin-right: auto; font-size: .84rem; font-weight: 600; color: var(--gris); }

@media (max-width: 900px) {
  .proyectos-portada .hero-mesa { grid-template-columns: minmax(0, 1fr); }
  .proyectos-portada .hero-dicho { display: block; }
  .proyectos-portada .hero-acciones { margin-top: var(--paso-2); }
  .obra-mesa { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .obra-ficha { position: static; }
  .obra-foto { flex: 0 0 100%; }
  .carrusel-flecha { width: 44px; height: 56px; }
  .obra-mando .rino { display: grid; }
}
.serv-entrega { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hormigon);
  font-size: .94rem; line-height: 1.45; color: var(--gris); }
.serv-entrega b { color: var(--grafito); }
/* el visor de la ficha usa el mismo mando que la portada y los carruseles */
.visor { position: relative; }
/* el visor de la ficha usa el mismo mando, con el mismo motivo */
.visor-rino { position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px; display: grid; place-items: center;
  color: var(--yeso); background: var(--grafito); box-shadow: inset 0 0 0 2px var(--yeso); }
.visor-rino:hover, .visor-rino:focus-visible { color: #fff; background: var(--accion); }
.visor-rino svg { width: 32px; }
.visor-rino.ant { left: 0; }
.visor-rino.sig { right: 0; }
.visor-rino:hover, .visor-rino:focus-visible { color: #fff; background: var(--marca); }
.visor-rino svg { width: 28px; }
.visor-cuenta { position: absolute; left: 0; bottom: 0; font-size: .8rem; font-weight: 600; color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums; }
.cierre-obj { display: block; width: 100%; height: auto; }

/* el cierre de una solución: la única banda oscura de la web es el pie, así que
   aquí manda el objeto terminado sobre el papel, no un recuadro de color */
.cierre { background: var(--yeso-2); }
.cierre .cita { color: var(--grafito); }
.cierre .t-entrada { color: var(--gris); }
/* el objeto va montado en su lámina, con margen igual por los cuatro lados:
   así el fondo claro del render se lee como una plancha, no como un descuadre */
.cierre #cierreCorte { background: var(--yeso); padding: clamp(14px, 2vw, 30px); }
.mega-ico-3d { width: 56px; height: 44px; background: var(--yeso); }
.mega-ico-3d img { width: 100%; height: 100%; object-fit: contain; }
.mega-items a { grid-template-columns: 56px 1fr; }

/* Por qué le está pasando: una sola idea, en cuerpo grande, con aire.
   Es lo que el cliente quiere leer antes de que le vendan nada. */
.porque { background: var(--yeso-2); }
.porque-mesa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 3vw, 48px); align-items: start; }
.porque-mesa .t-h2 { border-top: 4px solid var(--grafito); padding-top: 16px; }
.porque-texto { font-size: clamp(1.08rem, 1.35vw, 1.32rem); line-height: 1.5; max-width: 58ch;
  border-top: 4px solid transparent; padding-top: 16px; }
@media (max-width: 900px) { .porque-mesa { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .porque-texto { padding-top: 0; } }

/* el campo de foto: fuera el control gris del navegador */
.campo-foto { display: grid; gap: 8px; }
.campo-etiqueta { font-weight: 600; font-size: .88rem; }
.foto-boton { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.1rem; width: max-content; cursor: pointer;
  font-weight: 700; font-size: .95rem; color: var(--profundo);
  box-shadow: inset 0 0 0 2px var(--accion); transition: background 120ms linear; }
.foto-boton:hover { background: var(--tinte); }
.foto-boton input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-boton:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
.foto-nombre { font-size: .88rem; color: var(--gris); }
/* la máquina se apoya en el papel de la página, no en un rectángulo de acero */
/* v16 — la lámina del equipo. Medido en /equipo/reactor-e-10: columna de 648 px,
   activo de 290×221 y `max-width:88%` con `width:auto`, que acota pero no rellena:
   la imagen se quedaba en sus 290 px nativos y encima trae margen blanco propio,
   así que la máquina ocupaba 124 px reales, el 8,4 % del panel. El resto, hueco.
   Y un equipo Graco es un objeto en vertical metido a la fuerza en una caja 4/3
   apaisada: eso garantiza vacío a los lados. La lámina pasa a ser cuadrada y la
   imagen la llena. (El recorte del margen blanco del activo va aparte: sin él,
   rellenar solo amplía el margen con la máquina.) */
.ficha-foto { display: grid; place-items: center; background: var(--yeso);
  aspect-ratio: 1 / 1; overflow: hidden; }
.ficha-foto img { width: 88%; height: 88%; object-fit: contain; max-width: none; max-height: none; }

/* La fila de documento mandaba «Abrir» a 343 px del texto. Con cinco documentos la
   alineación a la derecha forma columna y está bien; con uno solo parecía rota,
   porque además una lista de un elemento no tenía ni un filete que la contuviera.
   Se acota la medida y la lista entera se cierra por arriba y por abajo. */
.docs { max-width: 52ch; border-top: 1px solid var(--hormigon);
  border-bottom: 1px solid var(--hormigon); }
.docs-lista { max-width: none; border: 0; }
.ficha-miniaturas img { background: var(--yeso); }
.capas-rotulo b.es-detalle { min-width: 0; }

/* ============================================================
   v11 — EL LANDING EN EL ORDEN QUE PIDE EL NEGOCIO:
   la portada, lo que más se vende, la máquina con la que se
   aplica, la cuadrilla, con qué marcas se trabaja, la prueba y
   para quién. La rejilla de doce casos murió: repetía las doce
   puertas que ya están en el hero.
   ============================================================ */
.tras-rejilla { display: flex; flex-wrap: wrap; align-items: center; gap: var(--paso-2);
  margin-top: var(--paso-2); }

/* las ocho líneas de equipo: la máquina, lo que aplica y cuántos modelos hay */
.lineas-equipo { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 4px solid var(--grafito); border-left: 1px solid var(--hormigon); }
.linea-equipo a { display: grid; grid-template-rows: auto 1fr; height: 100%; padding: var(--paso-2);
  text-decoration: none; color: inherit;
  border-right: 1px solid var(--hormigon); border-bottom: 1px solid var(--hormigon);
  transition: background 120ms linear; }
.linea-equipo a:hover { background: var(--yeso-2); }
.linea-equipo-foto { display: grid; place-items: center; height: 108px; }
.linea-equipo-foto img { max-width: 86%; max-height: 108px; width: auto; height: auto; mix-blend-mode: multiply; }
.linea-equipo-txt { display: block; margin-top: var(--paso-1); }
.linea-equipo-txt b { display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -.014em; }
.linea-equipo-txt small { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.3; color: var(--gris); }
.linea-equipo-txt em { display: block; margin-top: 8px; font-style: normal; font-size: .78rem;
  font-weight: 700; color: var(--accion); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .lineas-equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .lineas-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   v12 — LA FICHA DE MATERIAL. El precio del envase es el número
   que hace elegir mal: Polysil TG 500 a 118 dólares parece más
   caro que NB 1 Grey a 68, y por metro cuadrado es cuatro veces
   más barato. Aquí manda el metro cuadrado. La existencia deja
   de ser una cuarta línea gris y pasa a una regla de 4 px, que
   es la misma regla con la que empieza una sección.
   ============================================================ */
.ficha { display: flex; flex-direction: column; }
.ficha-plinto { display: grid; place-items: center; aspect-ratio: 3 / 2;
  background: var(--yeso-2); overflow: hidden; transition: background 160ms linear; }
.ficha:hover .ficha-plinto { background: var(--yeso); }
.ficha-plinto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ficha.recorte .ficha-plinto img { mix-blend-mode: multiply; padding: 7%; }
.ficha.foto .ficha-plinto img { width: 100%; height: 100%; object-fit: cover; }

/* la regla de estado: grafito es que está hoy, cemento por encargo, hormigón sin dato.
   Ni verde, que aquí anota y actúa, ni el rojo de error de formulario. */
.ficha-plinto::after { content: ""; position: absolute; }
.ficha::after { content: ""; display: block; height: 4px; background: var(--hormigon); order: 1; }
.ficha-plinto { order: 0; }
.ficha-cuerpo { order: 2; display: flex; flex-direction: column; flex: 1; padding-top: 12px; }
.ficha.en-existencia::after { background: var(--grafito); }
.ficha.por-encargo::after { background: var(--cemento); }

.ficha-papel { font-size: .8rem; font-weight: 700; line-height: 1.2; color: var(--profundo);
  letter-spacing: .01em; text-transform: none; }
.ficha-nombre { margin-top: 6px; font-weight: 700; font-size: 1.06rem; line-height: 1.16; letter-spacing: -.015em; }
.ficha-nombre a { text-decoration: none; color: inherit; }
.ficha-nombre a:hover { text-decoration: underline; }
.ficha-sub { margin-top: 3px; font-size: .86rem; line-height: 1.3; color: var(--gris); }

/* el rendimiento: la línea que no tiene ninguna otra tienda del país */
.ficha-rinde { margin-top: 12px; padding-top: 10px; border-top: 4px solid var(--yeso-2);
  font-size: .86rem; line-height: 1.35; color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums; }
.ficha-rinde b { display: block; font-weight: 700; font-size: 1rem; color: var(--grafito); }
.ficha-rinde span { display: block; margin-top: 2px; font-size: .78rem; }
.ficha-rinde.sin-dato b { color: var(--gris); font-weight: 600; }
.ficha-estado { margin-top: 8px; font-size: .8rem; color: var(--gris); }

/* el margin-top:auto empujaba el pie al fondo de su fila; con subrejilla la fila
   ya está cuadrada por todas las fichas y ese empujón solo la descuadraba */
.ficha-pie { padding-top: 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 12px; }
.ficha-metro { grid-column: 1; font-variant-numeric: tabular-nums lining-nums; }
.ficha-metro b { font-weight: 700; font-size: 1.24rem; letter-spacing: -.015em; }
.ficha-metro span { display: block; font-size: .74rem; font-weight: 400; color: var(--gris); }
.ficha-envase { grid-column: 1; font-size: .8rem; color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums; }
.ficha-pie .agregar { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
/* sin metro cuadrado calculable, el precio del envase sube al sitio del grande */
.ficha:not(.con-metro) .ficha-envase { font-size: 1.24rem; font-weight: 700; color: var(--grafito); }
.ficha:not(.con-metro) .ficha-envase small { font-weight: 400; font-size: .68rem; color: var(--gris); }

@media (max-width: 560px) {
  .ficha-pie { grid-template-columns: minmax(0, 1fr); }
  .ficha-pie .agregar { grid-column: 1; grid-row: auto; width: 100%; margin-top: 10px; }
}

/* el mostrador: el inventario dicho en una línea, con las cifras enlazadas a su
   filtro. Sustituye a la entradilla que repetía el pie de página. */
.mostrador { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--paso-2) var(--paso-3); align-items: end; margin-bottom: var(--paso-3); }
.mostrador-linea { margin-top: var(--paso-1); font-size: 1.05rem; line-height: 1.5; color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums; max-width: 48ch; }
.mostrador-linea b { color: var(--grafito); font-weight: 700; }
.mostrador-linea a { color: var(--profundo); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.mostrador-busca { display: flex; gap: 8px; }
.mostrador-busca input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
  background: var(--yeso-2); border: 0; box-shadow: inset 0 -4px 0 var(--hormigon);
  font: inherit; font-size: .96rem; color: inherit; }
.mostrador-busca input:focus { outline: 0; box-shadow: inset 0 -4px 0 var(--marca); background: #fff; }
.mostrador-busca .boton { flex: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 860px) { .mostrador { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ============================================================
   v13 — SERVICIOS Y PROYECTOS: los cinco se separan con la regla,
   no con el aire. La que había era `--hormigon` sobre `--yeso`,
   o sea 1,24:1: invisible. Cinco filas iguales no son el problema;
   una especificación son cláusulas iguales y se leen como cinco
   porque están numeradas y divididas.
   ============================================================ */
.obra { padding-block: var(--paso-3) 0; overflow-x: clip; }
.obra + .obra { padding-top: var(--paso-3); }
/* la regla va en la SECCIÓN, no en el contenedor: el contenedor es la propia
   rejilla de dos columnas y el pseudoelemento entraba como celda y lo descolocaba todo */
.obra + .obra { position: relative; }
.obra + .obra::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 4px; background: var(--grafito);
}
/* el número deja de ser un adorno de 13 px y pasa a ser el rótulo de la sección */
.obra-n { font: 800 clamp(2rem, 3.2vw, 3rem)/1 var(--display); color: var(--accion);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
/* la ficha pierde su regla propia: dos reglas de 4 px a 30 px se estorban */
.obra-ficha { position: sticky; top: calc(var(--cabecera) + var(--paso-2)); border-top: 0; padding-top: 0; }
.obra-ficha .t-h2 { margin-top: var(--paso-1); font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.05; }
.obra-donde { margin-top: 6px; }
.obra-texto { margin-top: var(--paso-2); }
.obra-cta { margin-top: var(--paso-2); }
.obra-mesa { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--paso-2); align-items: start; }

@media (max-width: 900px) {
  .obra-mesa { grid-template-columns: minmax(0, 1fr); gap: var(--paso-2); }
  .obra-ficha { position: static; }

}
/* la causa vive donde el lector se la pregunta, no en una banda de 107 px */
.hero-causa { margin-top: var(--paso-1); font-size: .97rem; line-height: 1.5; color: var(--gris); max-width: 46ch; }
/* el remate: la frase de la casa cierra la obra, sin objeto repetido y sin botón */
.remate { margin-top: var(--paso-3); padding-top: var(--paso-2); border-top: 4px solid var(--grafito);
  display: grid; gap: var(--paso-1); max-width: 46ch; }
.remate .cita { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.02; }
/* el hero no repite el botón de contacto de la barra: su acción son las doce puertas */
.hero-remate { margin-top: var(--paso-2); font-size: .95rem; }
.hero-remate a { color: var(--profundo); font-weight: 700;
  box-shadow: inset 0 -4px 0 var(--hormigon); text-decoration: none;
  transition: box-shadow 120ms linear; }
.hero-remate a:hover { box-shadow: inset 0 -4px 0 var(--marca); }


/* ---------- el enlace de salto ----------
   Estaba recortado a 1x1: el foco caía en una caja invisible y quien navega con
   teclado veía un anillo alrededor de nada. Ahora entra en pantalla. */
.saltar { position: absolute; left: 8px; top: -60px; z-index: 60;
  padding: 10px 16px; background: var(--accion); color: #fff;
  font-weight: 700; text-decoration: none; transition: top 120ms linear; }
.saltar:focus { top: 8px; }
main:focus { outline: none; }


/* ---------- pulsado y deshabilitado ----------
   No existían en toda la hoja. El contrato dice que el botón activo baja a
   --profundo en 80 ms; ese cambio estaba en :hover, así que en una pantalla
   táctil no pasaba nada al pulsar. Sin escalas ni rebotes: cambia el color. */
.boton:active, .agregar:active, .cab-cierre:active,
.mostrador-busca .boton:active, .lateral-abrir:active {
  background: var(--profundo); transition-duration: 80ms;
}
.boton.secundario:active, .rino:active, .carrusel-flecha:active {
  background: var(--tinte); transition-duration: 80ms;
}
.nav a:active, .nav-menor a:active, .hero-puertas a:active {
  box-shadow: inset 0 -4px 0 var(--accion);
}

button:disabled, .boton[aria-disabled="true"], .agregar:disabled {
  background: var(--hormigon); color: var(--gris); cursor: not-allowed;
  box-shadow: none; pointer-events: none;
}
.boton.secundario:disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--hormigon); }

/* ─────────────────────────────────────────────────────────────────────────────
   v14 — EL MAPA
   El mapa de OpenStreetMap entraba con su propia paleta: carreteras amarillas,
   parques verdes, agua azul y un pin azul de fábrica. Era lo único a todo color
   en una web que es tinta y un solo acento, y el pin azul era el único azul del
   sitio. Aquí el mapa se pasa a gris y el verde de la casa se reserva para la
   única cosa que el mapa tiene que decir: dónde está la puerta.
   ───────────────────────────────────────────────────────────────────────────── */
.mapa { height: 380px; max-width: 100%; background: var(--yeso-2); }
.leaflet-tile-pane { filter: grayscale(1) contrast(1.06) brightness(1.02); }

/* el mando de zoom: cuadrado y de tinta, como el resto de los botones */
.leaflet-touch .leaflet-bar, .leaflet-bar { border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--grafito); }
.leaflet-bar a, .leaflet-bar a:hover {
  width: 30px; height: 30px; line-height: 30px; border-radius: 0;
  background: var(--yeso); color: var(--grafito); border-bottom-color: var(--grafito);
  font-weight: 700;
}
.leaflet-bar a:hover { background: var(--yeso-2); }
.leaflet-bar a:first-child, .leaflet-bar a:last-child { border-radius: 0; }

/* el pin es la placa de la casa: la misma que está atornillada en la esquina */
.mapa-placa { display: grid; place-items: center; width: 44px; height: 30px;
  background: var(--marca); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.mapa-placa svg { width: 30px; height: 14px; fill: #fff; }
.mapa-placa::after { content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 2px; height: 7px; margin-left: -1px; background: var(--marca); }

/* la atribución es obligatoria, pero no tiene por qué gritar */
.leaflet-control-attribution { background: color-mix(in srgb, var(--yeso) 88%, transparent);
  font-size: .68rem; color: var(--gris); border-radius: 0; }
/* Leaflet pinta sus enlaces en su propio azul (#0078A8) desde `.leaflet-container a`,
   misma especificidad que la de aquí, y su hoja carga después. Se sube el peso. */
.leaflet-container .leaflet-control-attribution a, .leaflet-container a { color: var(--gris); }
.leaflet-container .leaflet-popup-content a { color: var(--marca); }

/* el pie del mapa va debajo del mapa, no debajo de la tabla de teléfonos */
.mapa-pie { margin-top: var(--paso-1); }

/* ─────────────────────────────────────────────────────────────────────────────
   v15 — EL ERROR DE UN CAMPO
   Esto vivía solo en la copia de la app y se perdió al sincronizar las dos hojas
   por encima. Vive aquí, en la hoja compartida, para que no vuelva a pasar: la
   maqueta es la fuente y la app copia, no al revés.
   El mensaje va en --alerta (4,92:1 sobre yeso) y el campo se marca con el mismo
   filete de 2 px que ya lleva en reposo, cambiado de color. Sin iconos, sin rojo
   de fondo: el error se dice, no se decora.
   ───────────────────────────────────────────────────────────────────────────── */
.campo-error { display: block; margin-top: 6px; font-size: .86rem; font-weight: 600;
  color: var(--alerta); }
.campo input.mal, .campo textarea.mal, .campo select.mal,
input.mal, textarea.mal, select.mal {
  box-shadow: inset 0 0 0 2px var(--alerta);
}
.campo input.mal:focus-visible, .campo textarea.mal:focus-visible {
  outline: 3px solid var(--alerta); outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   v16 — LOS DOCE CORTES DE /SOLUCIONES
   Medida de la caja de tinta de los tres primeros WebP contra el color de esquina:
   losa 90 % de alto y apoyo al 95 %, zinc 69 % y apoyo al 94 %, terraza 86 % y
   apoyo al 95 %. Los tres apoyan en el mismo sitio: se renderizaron sobre el mismo
   plano de suelo y están bien hechos. Lo que sobra es aire arriba, y sobra distinto
   porque un techo de zinc ES más plano que una losa: eso es información, no defecto.
   Lo que rompía la fila era que la maqueta centraba cada imagen en su caja e
   ignoraba el suelo que los tres comparten. Aquí ese suelo se dibuja, con la misma
   regla de 4 px con la que abre toda sección de esta web.
   Y estas tres clases no existían en ninguna de las dos hojas: eran los únicos
   objetos del sitio desnudos sobre el papel.
   ───────────────────────────────────────────────────────────────────────────── */
.tarjeta-sol { display: flex; flex-direction: column; }
.sol-3d { position: relative; aspect-ratio: 4 / 3;
  border-bottom: 4px solid var(--grafito); }
.sol-3d img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom; }
.tarjeta-sol a:hover .sol-3d { background: var(--yeso-2); }
.n-sol { color: var(--accion); font-variant-numeric: tabular-nums lining-nums;
  margin-right: .35em; }

/* ─────────────────────────────────────────────────────────────────────────────
   v16 — LAS FICHAS DE LA REJILLA CUADRAN POR FILAS
   Medido en /tienda: la regla de 4 px de .ficha-rinde, que es la línea más pesada
   de la tarjeta, caía a 659 px en la primera ficha y a 677 en las de al lado. Y no
   eran dos alturas sino cuatro: 50 de los 90 productos no traen subtítulo, y hay
   un nombre de catálogo de 83 caracteres que ocupa cuatro líneas porque su guion
   no lleva espacio delante y partirNombre no lo parte.
   Ningún min-height sobrevive a eso sin truncar el nombre de un producto, que es
   esconder dato del catálogo. La subrejilla lo cuadra sin un solo número mágico:
   las ocho filas de todas las fichas de la rejilla comparten pista.
   ───────────────────────────────────────────────────────────────────────────── */
.rejilla:has(> .ficha) { row-gap: 0; }
/* ocho pistas, no siete: el plinto, las seis del cuerpo y el ::after, que es la
   regla de 4 px de la existencia y en una rejilla también es un ítem. Con siete,
   el estado y el pie se repartían la última pista y se pisaban. */
.rejilla > .ficha { display: grid; grid-template-rows: subgrid; grid-row: span 8; }
.ficha-cuerpo { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
.ficha-pie { padding-bottom: var(--paso-2); }

@supports not (grid-template-rows: subgrid) {
  .rejilla:has(> .ficha) { row-gap: var(--paso-2); }
  .rejilla > .ficha { display: flex; }
  .ficha-cuerpo { display: flex; }
  .ficha-pie { padding-bottom: 0; }
  .ficha-sub { min-height: 2.6em; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   v16 — LA LISTA DE DOCUMENTOS ES UNA TABLA
   139 filas de «nombre … Abrir» dejaban 1.150 px de nada en medio, y el tipo y el
   peso vivían en un <small> bajo el nombre, que costaba una segunda línea por fila.
   Sacándolos a su columna, cada fila baja de dos líneas a una: unos 1.950 px menos
   de página, un 35 % más corta. Los datos ya eran tabulares; solo estaban escondidos.
   ───────────────────────────────────────────────────────────────────────────── */
.docs-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) 16ch 8ch 6ch;
  gap: 4px 16px; padding: 0 14px var(--paso-1);
  border-bottom: 4px solid var(--grafito);
  font-weight: 600; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris); }
.docs-cabeza span:nth-child(3), .docs-cabeza span:nth-child(4) { text-align: right; }

.docs-lista .doc { grid-template-columns: minmax(0, 1fr) 16ch 8ch 6ch; align-items: baseline; padding: 10px 14px; }
.docs-lista .doc small { display: inline; }
.docs-lista .doc .doc-peso, .docs-lista .doc em { text-align: right; }
/* «Abrir» era un <em> gris sin subrayado: no parecía que se pudiera pulsar.
   El subrayado va en un inline-block para que abrace la palabra y no la celda. */
.docs-lista .doc em { color: var(--profundo); font-weight: 600; justify-self: end; }
.docs-lista .doc em::after { content: ""; display: block; height: 2px;
  background: var(--hormigon); transition: background 120ms linear; }
.docs-lista .doc:hover em::after, .docs-lista .doc:focus-visible em::after { background: var(--marca); }

@media (max-width: 820px) {
  .docs-cabeza { display: none; }
  .docs-lista .doc { grid-template-columns: minmax(0, 1fr) auto; }
  .docs-lista .doc small { display: block; grid-column: 1; }
  .docs-lista .doc .doc-peso { grid-column: 1; text-align: left; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   v17 — EL LISTADO DE EQUIPOS
   `.fila-equipo` no tenía ni una regla. Funcionaba de casualidad porque las fotos
   de Graco venían pequeñas y apaisadas; al recortarlas a su objeto, que en un
   equipo suele ser vertical, la fila se estiró hasta 1.287 px de alto y la página
   entera medía 31.853. Cuarenta y cuatro máquinas piden una fila de listado, no
   una tarjeta: plinto de medida fija, nombre y línea en el medio, y la acción a la
   derecha, con el mismo filete con el que se separan las filas de toda la web.
   ───────────────────────────────────────────────────────────────────────────── */
.fila-equipo {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: clamp(14px, 1.8vw, 26px); align-items: center;
  padding: var(--paso-1) 0; border-bottom: 1px solid var(--hormigon);
}
.fila-equipo:first-child { border-top: 1px solid var(--hormigon); }
.fila-equipo:hover { background: var(--yeso-2); }

/* con `place-items: center` el hijo no se estira y el `height: 100%` se quedaba en
   auto: la foto salía a 190 px dentro de una caja de 84 y se recortaba por dentro.
   Posicionada, el porcentaje resuelve siempre contra una caja de alto definido. */
.fila-equipo-foto { position: relative; display: block; width: 108px; height: 84px;
  background: var(--yeso); overflow: hidden; }
.fila-equipo-foto img, .fila-equipo .plinto-vacio {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply; }

.fila-equipo .t-h3 { font-size: 1.05rem; }
.fila-equipo .t-h3 a { color: inherit; box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 120ms linear; }
.fila-equipo:hover .t-h3 a { box-shadow: inset 0 -2px 0 var(--marca); }
.fila-equipo .secundario { margin-top: 2px; }

@media (max-width: 700px) {
  /* el botón baja debajo del texto y ocupa su ancho: en 390 no cabe en la fila */
  .fila-equipo { grid-template-columns: 84px minmax(0, 1fr); gap: 14px 16px; }
  .fila-equipo-foto { width: 84px; height: 68px; }
  .fila-equipo > .boton { grid-column: 2; justify-self: start; }
}