/* ============ TOKENS DE MARCA VITIO ============
   --marca #0CB9C1 es el turquesa del logo. Sobre blanco da 2,4:1, así que
   NUNCA se usa para texto pequeño: va como fondo, borde o superficie.
   Para texto turquesa sobre claro existe --marca-txt (5,5:1 sobre blanco). */
:root{
  --marca:#0CB9C1; --marca-ink:#04282a; --marca-dark:#0a9ba1; --marca-txt:#07757b; --marca-soft:#e2f7f8;
  --tinta:#0f1b1f; --tinta-2:#4a585e; --tinta-3:#5c6a71; --tinta-ph:#647279;
  --papel:#f6f8f9; --sup:#ffffff; --sup-2:#eaeff1; --linea:#d6dee1; --linea-2:#c2ced3;
  --acento:#b5480d; --acento-ink:#ffffff; --acento-soft:#fdece2;
  --ok:#0f6b46; --ok-soft:#e1f4ec;
  --avi:#87590a; --avi-soft:#fbf1dc;
  --fila:rgba(12,185,193,.075);
  --trama:rgba(15,27,31,.07);
  --halo:rgba(12,185,193,.16);
  /* las fotos de producto vienen con fondo blanco: viven siempre sobre una
     placa clara, en los dos temas, para poder usar multiply sin romperse */
  --placa-a:#f4f8f9; --placa-b:#e3edef; --placa-linea:#d3dee1;
  --cert-filtro:none;
  --r:10px; --rl:16px;
  --s1:8px; --s2:14px; --s3:22px; --s4:36px;
  --sombra:0 1px 2px rgba(15,27,31,.06),0 10px 28px -14px rgba(15,27,31,.24);
  --sombra-alta:0 2px 6px rgba(15,27,31,.07),0 22px 44px -20px rgba(15,27,31,.38);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --txt:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tit:"Overpass","Lato",system-ui,sans-serif;
  --barra:68px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --marca:#2ad4dc; --marca-ink:#04282a; --marca-dark:#6ee6ec; --marca-txt:#4fdfe6; --marca-soft:#0d2c2f;
  --tinta:#e8eff1; --tinta-2:#a4b2b7; --tinta-3:#8d9ba1; --tinta-ph:#b0b8c4;
  --papel:#0a1214; --sup:#111c1f; --sup-2:#18262a; --linea:#263438; --linea-2:#35474c;
  --acento:#f0803f; --acento-ink:#20100a; --acento-soft:#2d1810;
  --ok:#5ccb92; --ok-soft:#0f2a1e;
  --avi:#dfb45a; --avi-soft:#2b2312;
  --fila:rgba(42,212,220,.10);
  --trama:rgba(232,239,241,.06);
  --halo:rgba(42,212,220,.18);
  --cert-filtro:brightness(0) invert(1);
  --sombra:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.8);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5),0 22px 44px -20px rgba(0,0,0,.9);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --marca:#2ad4dc; --marca-ink:#04282a; --marca-dark:#6ee6ec; --marca-txt:#4fdfe6; --marca-soft:#0d2c2f;
  --tinta:#e8eff1; --tinta-2:#a4b2b7; --tinta-3:#8d9ba1; --tinta-ph:#b0b8c4;
  --papel:#0a1214; --sup:#111c1f; --sup-2:#18262a; --linea:#263438; --linea-2:#35474c;
  --acento:#f0803f; --acento-ink:#20100a; --acento-soft:#2d1810;
  --ok:#5ccb92; --ok-soft:#0f2a1e;
  --avi:#dfb45a; --avi-soft:#2b2312;
  --fila:rgba(42,212,220,.10);
  --trama:rgba(232,239,241,.06);
  --halo:rgba(42,212,220,.18);
  --cert-filtro:brightness(0) invert(1);
  --sombra:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.8);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5),0 22px 44px -20px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--txt);
 font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
a{color:inherit}
h1,h2,h3{font-family:var(--tit);margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.05rem,1.1rem + 3.4vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.033em}
h2{font-size:clamp(1.45rem,1.05rem + 1.6vw,2.1rem);font-weight:800;line-height:1.13;letter-spacing:-.027em}
h3{font-size:1.06rem;font-weight:700;line-height:1.28;letter-spacing:-.015em}
p{margin:0 0 1em;text-wrap:pretty}
.muted{color:var(--tinta-2)}
.mono{font-family:var(--mono);font-size:.9em}
/* oculto visualmente pero legible por lector de pantalla */
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:16px;top:10px;z-index:99;width:auto;height:auto;margin:0;
 clip-path:none;background:var(--sup);color:var(--tinta);padding:11px 16px;border-radius:8px;
 border:2px solid var(--marca);box-shadow:var(--sombra-alta);font-weight:700;text-decoration:none}
img{max-width:100%;height:auto}
:where(a,button,input,select,summary,[tabindex]):focus-visible{
 outline:2px solid var(--marca-txt);outline-offset:2px;border-radius:6px}
[id]{scroll-margin-top:calc(var(--barra) + 18px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
 animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ============ BARRA SUPERIOR ============ */
/* Lato y no Overpass: el punto medio de Overpass tiene el avance muy
   estrecho y "Colombia · Perú · Ecuador" se lee pegado */
.tira{background:var(--marca);color:var(--marca-ink);font-size:.81rem;font-weight:700}
.tira .wrap{display:flex;gap:6px 22px;flex-wrap:wrap;justify-content:center;padding:8px 20px}
.tira span{display:inline-flex;align-items:center;gap:8px}
.tira span+span::before{content:"";width:4px;height:4px;border-radius:50%;
 background:currentColor;opacity:.45;flex:none}
header.sitio{position:sticky;top:0;z-index:50;background:var(--sup);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;gap:12px;height:var(--barra)}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{height:30px;width:auto;display:block}
nav.principal{display:flex;gap:2px;margin-left:auto;align-items:center}
nav.principal a{padding:9px 12px;border-radius:8px;text-decoration:none;font-family:var(--tit);
 font-size:.9rem;font-weight:600;letter-spacing:-.012em;color:var(--tinta-2);white-space:nowrap}
nav.principal a:hover{background:var(--sup-2);color:var(--tinta)}
nav.principal a[aria-current="page"]{background:var(--marca-soft);color:var(--marca-txt);font-weight:800}
.acciones{display:flex;align-items:center;gap:10px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
 border-radius:var(--r);font-family:var(--tit);font-weight:700;font-size:.92rem;letter-spacing:-.012em;
 text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1.2;
 transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn:active{transform:translateY(1px)}
.btn-marca{background:var(--marca);color:var(--marca-ink);box-shadow:0 1px 2px rgba(15,27,31,.14)}
.btn-marca:hover{background:var(--marca-dark)}
.btn-linea{background:var(--sup);border-color:var(--linea-2);color:var(--tinta)}
.btn-linea:hover{background:var(--sup-2);border-color:var(--marca)}
.btn-acento{background:var(--acento);color:var(--acento-ink)}
.btn-acento:hover{box-shadow:0 0 0 4px var(--acento-soft)}
.btn-sm{padding:9px 14px;font-size:.85rem}
.pill{position:relative}
.pill .n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:99px;
 background:var(--acento);color:var(--acento-ink);font-size:.7rem;font-weight:800;
 display:grid;place-items:center;padding:0 5px;font-variant-numeric:tabular-nums;
 box-shadow:0 0 0 2px var(--sup)}
/* botón de menú móvil */
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:42px;flex:none;
 background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r);color:var(--tinta);cursor:pointer}
.menu-btn:hover{background:var(--sup-2);border-color:var(--marca)}
.menu-btn svg{display:block}
.menu-btn .x{display:none}
header.sitio.abierto .menu-btn .x{display:block}
header.sitio.abierto .menu-btn .h{display:none}
/* botón de tema claro/oscuro — mismo tamaño y trazo que .menu-btn, pero
   visible siempre (no solo en móvil). El icono que se ve es el destino al
   que se cambia al pulsar: luna en claro (invita a oscuro), sol en oscuro. */
.tema-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:42px;flex:none;
 background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r);color:var(--tinta);cursor:pointer}
.tema-btn:hover{background:var(--sup-2);border-color:var(--marca)}
.tema-btn svg{display:block}
.tema-btn .ic-sol{display:none}
:root[data-theme="dark"] .tema-btn .ic-luna{display:none}
:root[data-theme="dark"] .tema-btn .ic-sol{display:block}
/* selector de idioma — mismo alto que .tema-btn/.menu-btn para alinear en la
   barra; el idioma activo se marca igual que nav.principal a[aria-current]. */
.idioma-sel{display:inline-flex;align-items:center;gap:1px;height:42px;padding:0 3px;flex:none;
 background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r)}
.idioma-sel a{padding:5px 7px;border-radius:6px;text-decoration:none;font-family:var(--tit);
 font-size:.74rem;font-weight:800;letter-spacing:.03em;color:var(--tinta-2)}
.idioma-sel a:hover{background:var(--sup-2);color:var(--tinta)}
.idioma-sel a[aria-current="true"]{background:var(--marca-soft);color:var(--marca-txt)}

/* ============ SELLO DE DISTRIBUIDOR AUTORIZADO ============
   Es el activo comercial de la página: placa blanca, anillo turquesa y el
   logo Klemsan sobre su placa clara en los dos temas. */
.sello{display:inline-flex;align-items:center;gap:9px;background:var(--sup);
 border:1px solid var(--marca);color:var(--tinta);padding:6px 16px 6px 12px;border-radius:99px;
 font-family:var(--tit);font-size:.79rem;font-weight:700;letter-spacing:-.008em;
 word-spacing:.07em;line-height:1.35;
 box-shadow:0 0 0 4px var(--halo);margin-bottom:20px;max-width:100%}
.sello img{height:20px;width:auto;border-radius:99px;
 background:linear-gradient(160deg,var(--placa-a),var(--placa-b));padding:4px 9px;flex:none}
.sello::before{content:"✓";font-size:.8rem;font-weight:800;color:var(--marca-txt);flex:none}
.sello-hero{font-size:.86rem;padding:8px 20px 8px 9px;box-shadow:0 0 0 5px var(--halo),var(--sombra)}
.sello-hero img{height:24px;padding:5px 11px}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;
 padding:clamp(40px,5.2vw,76px) 0 clamp(36px,4.4vw,64px);
 background:radial-gradient(900px 400px at 8% -12%,var(--marca-soft),transparent 72%),
            linear-gradient(180deg,var(--marca-soft),transparent 70%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;color:var(--trama);
 background-image:radial-gradient(currentColor 1.1px,transparent 1.1px);background-size:24px 24px;
 -webkit-mask-image:linear-gradient(190deg,#000,transparent 58%);
 mask-image:linear-gradient(190deg,#000,transparent 58%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,var(--linea-2),transparent)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:center}
.hero h1{margin-bottom:.4em;max-width:19ch}
.hero .bajada{font-size:clamp(1.04rem,.99rem + .28vw,1.17rem);line-height:1.58;
 color:var(--tinta-2);max-width:56ch;margin-bottom:var(--s3)}
.hero-fig{display:none}
@media(min-width:1060px){
 .hero-grid{grid-template-columns:minmax(0,1fr) 316px;gap:52px}
 .hero h1{max-width:none}
 .hero-fig{display:grid;place-items:center;position:relative;justify-self:end;
  width:316px;aspect-ratio:1/1;border-radius:26px;
  background:linear-gradient(155deg,var(--placa-a),var(--placa-b));
  border:1px solid var(--placa-linea);box-shadow:var(--sombra-alta)}
 .hero-fig::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76%;height:76%;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,rgba(12,185,193,.26),transparent 68%)}
 /* ojo: filter (drop-shadow) anula mix-blend-mode en Chrome y devuelve el
    rectángulo blanco del PNG. La profundidad la pone la placa, no la foto. */
 .hero-fig img{position:relative;width:248px;max-width:78%;mix-blend-mode:multiply}
}
.buscador{background:var(--sup);border:2px solid var(--marca);border-radius:var(--rl);padding:7px;
 display:flex;gap:8px;box-shadow:0 0 0 5px var(--halo),var(--sombra);max-width:720px}
.buscador:focus-within{box-shadow:0 0 0 6px var(--halo),var(--sombra-alta)}
.buscador input{flex:1;border:0;background:transparent;color:var(--tinta);font:inherit;
 font-size:1rem;padding:12px 14px;outline:none;min-width:0}
.buscador input::placeholder{color:var(--tinta-ph);font-size:.94rem}
.buscador-ayuda{font-size:.86rem;color:var(--tinta-2);margin:10px 0 0;max-width:56ch}
.fichas{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2);max-width:720px}
.ficha{font-size:.82rem;padding:7px 13px;border-radius:99px;border:1px solid var(--linea-2);
 background:var(--sup);color:var(--tinta-2);text-decoration:none;font-weight:700;
 transition:border-color .15s ease,color .15s ease,background .15s ease}
.ficha:hover{border-color:var(--marca);color:var(--marca-txt);background:var(--marca-soft)}
.cifras{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s4);
 padding-top:var(--s3);border-top:1px solid var(--linea)}
.cifra{padding-left:15px;border-left:3px solid var(--marca);min-width:132px}
.cifra b{display:block;font-family:var(--tit);font-size:clamp(1.5rem,1.3rem + .7vw,1.85rem);
 font-weight:800;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--tinta)}
.cifra span{font-size:.82rem;line-height:1.4;color:var(--tinta-2);display:block}

/* ============ RITMO VERTICAL ============
   El espaciado no es uniforme: la banda tintada respira más que la sección
   normal, y el cierre comercial más que todo lo demás. */
section{padding:clamp(48px,6vw,84px) 0}
.banda{background:var(--sup-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
 padding:clamp(56px,7vw,104px) 0}
.cierre{padding:clamp(64px,8vw,116px) 0;border-bottom:0}
.cabeza{margin-bottom:clamp(20px,2.6vw,34px);max-width:64ch}
.cabeza h2{margin-bottom:.35em}
.cabeza p{margin:0;font-size:1.02rem;color:var(--tinta-2);max-width:62ch}
.pie-nota{font-size:.86rem;color:var(--tinta-2);margin-top:var(--s2);max-width:78ch}

/* ============ TARJETAS DE FAMILIA ============ */
.rejilla{display:grid;gap:16px}
.r3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:var(--rl);padding:20px;
 text-decoration:none;display:block;position:relative}
.tarjeta h3{margin-bottom:.35em}
.tarjeta p{font-size:.9rem;line-height:1.5;color:var(--tinta-2);margin:0}
.tarjeta .serie{font-size:.74rem;color:var(--tinta-3);font-family:var(--mono);letter-spacing:-.01em;
 margin-top:12px;display:inline-block;padding:3px 9px;border-radius:99px;background:var(--sup-2);
 transition:background .16s ease,color .16s ease}
a.tarjeta{display:flex;flex-direction:column;
 transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
a.tarjeta .serie{margin-top:auto;align-self:flex-start}
a.tarjeta:hover{border-color:var(--marca);box-shadow:var(--sombra-alta);transform:translateY(-3px)}
a.tarjeta:hover .serie{background:var(--marca-soft);color:var(--marca-txt)}
/* la foto sangra a los bordes de la tarjeta: es la protagonista */
.foto{display:grid;place-items:center;overflow:hidden;position:relative;
 margin:-20px -20px 16px;aspect-ratio:4/3;
 background:linear-gradient(155deg,var(--placa-a),var(--placa-b));
 border-bottom:1px solid var(--placa-linea);
 border-radius:calc(var(--rl) - 1px) calc(var(--rl) - 1px) 0 0}
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(60% 55% at 50% 42%,rgba(12,185,193,.10),transparent 70%)}
.foto img{max-width:76%;max-height:80%;width:auto;object-fit:contain;mix-blend-mode:multiply;
 transition:transform .35s cubic-bezier(.2,.7,.3,1)}
a.tarjeta:hover .foto img{transform:scale(1.055)}

/* ============ TABLAS ============ */
.cuadro{background:var(--sup);border:1px solid var(--linea);border-radius:var(--rl);
 overflow:hidden;box-shadow:var(--sombra)}
.filtros{display:flex;flex-wrap:wrap;gap:12px;padding:16px;border-bottom:1px solid var(--linea);
 background:var(--sup-2)}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo label{font-family:var(--tit);font-size:.7rem;font-weight:700;text-transform:uppercase;
 letter-spacing:.07em;color:var(--tinta-3)}
.campo select{background:var(--sup);border:1px solid var(--linea-2);border-radius:8px;padding:9px 11px;
 color:var(--tinta);font:inherit;font-size:.88rem;max-width:100%}
.campo select:hover{border-color:var(--marca)}
/* position:relative es obligatorio: los <caption> y <span> ocultos de
   dentro de la tabla son position:absolute; sin un bloque contenedor
   aquí escapan del recorte y ensanchan el documento (639 px a 390) */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
table{width:100%;border-collapse:collapse;font-size:.89rem}
/* sin min-width la tabla se comprime en vez de desplazarse y la
   descripción queda en columna de dos palabras por línea */
.cuadro table{min-width:700px;min-width:max-content}
/* La cotizacion tiene seis columnas: con max-content la descripcion no se
   parte y la columna de peso queda fuera de pantalla en escritorio. Aqui el
   producto si se ajusta en varias lineas; en movil sigue desplazandose. */
#tabla-cot{min-width:760px}
#tabla-cot td:nth-child(3){min-width:220px}
th{text-align:left;font-family:var(--tit);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
 color:var(--tinta-3);padding:12px 16px;border-bottom:1px solid var(--linea-2);font-weight:700;
 white-space:nowrap;background:var(--sup-2)}
td{padding:13px 16px;border-bottom:1px solid var(--linea);vertical-align:middle;line-height:1.45}
th.num,td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--fila)}
/* la columna de referencia es la que el visitante busca: marcada como tal */
.cuadro tbody td:first-child{padding-left:18px;box-shadow:inset 3px 0 0 transparent;
 transition:box-shadow .12s ease}
.cuadro tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--marca)}
.cuadro th:first-child{padding-left:18px}
.cuadro td:last-child,.cuadro th:last-child{padding-right:18px}
.ref{font-family:var(--mono);font-size:.85rem;color:var(--marca-txt);font-weight:700;white-space:nowrap;
 letter-spacing:-.015em;text-decoration:underline;text-decoration-thickness:1px;
 text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--marca) 55%,transparent)}
a.ref:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
.ref.ajena{color:var(--tinta-2);text-decoration:none;font-weight:400}
.flecha{color:var(--marca-txt);font-weight:700;text-align:center;width:1px;
 padding-left:6px;padding-right:6px}
/* la referencia ajena se acerca a la flecha: se lee "X → Y" de un golpe */
th.der,td.der{text-align:right}
.marca-b{display:inline-flex;align-items:center;gap:6px;font-size:.73rem;font-weight:800;
 padding:4px 10px;border-radius:99px;white-space:nowrap;line-height:1.35}
.m-ok{background:var(--ok-soft);color:var(--ok)}
.m-avi{background:var(--avi-soft);color:var(--avi)}
.punto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ============ FICHA DE PRODUCTO ============ */
.migas{font-size:.83rem;color:var(--tinta-3);padding:20px 0 0}
.migas a{text-decoration:none;color:var(--tinta-2)}
.migas a:hover{color:var(--marca-txt);text-decoration:underline;text-underline-offset:3px}
.ficha-prod{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:clamp(24px,3.4vw,44px);
 padding:var(--s3) 0 var(--s1);align-items:start}
.galeria{border-radius:var(--rl);aspect-ratio:1/1;max-width:430px;display:grid;place-items:center;padding:30px;
 position:sticky;top:calc(var(--barra) + 16px);overflow:hidden;
 background:linear-gradient(155deg,var(--placa-a),var(--placa-b));
 border:1px solid var(--placa-linea);box-shadow:var(--sombra)}
.galeria img{max-height:78%;max-width:78%;object-fit:contain;mix-blend-mode:multiply}
.ficha-prod h1{font-size:clamp(1.6rem,1.1rem + 1.7vw,2.25rem);letter-spacing:-.028em}
.especs{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--sup);
 border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.especs th{width:42%;text-transform:none;letter-spacing:0;font-family:var(--txt);font-size:.86rem;
 color:var(--tinta-2);font-weight:400;white-space:normal;background:transparent;padding:11px 16px;
 border-bottom:1px solid var(--linea)}
.especs td{font-weight:700;font-variant-numeric:tabular-nums;padding:11px 16px}
.especs tbody tr:nth-child(odd){background:color-mix(in srgb,var(--sup-2) 52%,transparent)}
.especs tbody tr:hover{background:var(--fila)}
.caja-cot{background:var(--sup);border:1px solid var(--linea);border-radius:var(--rl);padding:20px;
 margin:var(--s3) 0;box-shadow:var(--sombra)}
.sinprecio{background:var(--marca-soft);border-radius:var(--r);padding:13px 16px;font-size:.88rem;
 line-height:1.5;color:var(--tinta-2);margin-bottom:16px;
 border-left:3px solid var(--marca)}
.sinprecio b{color:var(--tinta)}
.disp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;border-radius:var(--r);
 padding:11px 16px;font-size:.9rem;line-height:1.45;margin:0 0 12px;color:var(--tinta-2)}
.disp::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;align-self:center}
.disp b{font-variant-numeric:tabular-nums}
.disp-si{background:var(--ok-soft)}
.disp-si::before{background:var(--ok)}
.disp-si b{color:var(--ok)}
.disp-no{background:var(--sup-2)}
.disp-no::before{background:var(--tinta-3)}
.disp-no b{color:var(--tinta)}
.disp-fecha{font-size:.78rem;color:var(--tinta-3)}
.cant{display:flex;align-items:center;border:1px solid var(--linea-2);border-radius:var(--r);
 overflow:hidden;width:fit-content}
.cant button{background:var(--sup-2);border:0;color:var(--tinta);width:44px;height:46px;
 font-size:1.15rem;cursor:pointer;font-family:inherit}
.cant button:hover{background:var(--marca-soft);color:var(--marca-txt)}
.cant input{border:0;border-left:1px solid var(--linea-2);border-right:1px solid var(--linea-2);
 background:var(--sup);color:var(--tinta);width:80px;height:46px;text-align:center;font:inherit;
 font-weight:700;font-variant-numeric:tabular-nums}
details.faq{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
 padding:14px 18px;margin-bottom:9px}
details.faq summary{cursor:pointer;font-family:var(--tit);font-weight:700;font-size:.95rem;
 letter-spacing:-.015em}
details.faq[open] summary{color:var(--marca-txt)}
details.faq p{margin:11px 0 0;font-size:.92rem;color:var(--tinta-2)}

/* ============ BLOQUES SUELTOS ============ */
.aviso{background:var(--avi-soft);border:1px solid color-mix(in srgb,var(--avi) 35%,transparent);
 border-radius:var(--r);padding:15px 18px;font-size:.87rem;line-height:1.55;color:var(--tinta-2)}
.dos{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,3.4vw,46px);align-items:start}
.certs{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:var(--s3);
 padding-top:var(--s3);border-top:1px solid var(--linea-2)}
.certs img{height:38px;width:auto;opacity:.82;filter:var(--cert-filtro)}
.centrado{text-align:center;max-width:680px;margin:0 auto}
.centrado p{margin-left:auto;margin-right:auto}
.botonera{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s3)}

/* ============ PIE ============ */
/* el padding inferior deja sitio al botón flotante de WhatsApp,
   que de lo contrario tapa la línea legal */
footer.sitio{border-top:1px solid var(--linea);background:var(--sup);padding:clamp(40px,5vw,60px) 0 76px}
.pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:34px 30px;align-items:start}
/* el encabezado lleva el color de marca y un filete propio para separarlo
   del cuerpo de enlaces: antes encabezado (tinta-3) y enlaces (tinta-2) eran
   grises casi idénticos, así que el tamaño y las mayúsculas eran la única
   señal de jerarquía y se perdían en un vistazo rápido */
.pie h2{font-family:var(--tit);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
 color:var(--marca-txt);margin:0 0 13px;padding-bottom:10px;font-weight:800;line-height:1.3;
 border-bottom:1px solid var(--linea)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* normaliza enlaces y texto plano: la dirección de Contacto no es un <a> y,
   sin esta regla, heredaba el tamaño y el tinta oscuro del body en vez del
   gris y el tamaño de los enlaces vecinos, así que pesaba más que ellos */
.pie li{color:var(--tinta-2);font-size:.87rem;line-height:1.5}
footer a{color:inherit;text-decoration:none;transition:color .15s ease}
footer a:hover,footer a:focus-visible{color:var(--marca-txt);text-decoration:underline;text-underline-offset:3px}
/* la línea de identidad pesa un poco más que el descargo de marcas: son dos
   niveles de información, no dos líneas iguales */
.legal{border-top:1px solid var(--linea);margin-top:var(--s4);padding-top:20px;font-size:.8rem;
 line-height:1.55;color:var(--tinta-3);display:flex;flex-direction:column;gap:6px}
.legal span:first-child{color:var(--tinta-2);font-weight:600}

/* ============ WHATSAPP FLOTANTE ============ */
.wa{position:fixed;right:18px;bottom:18px;z-index:60;background:#12803f;color:#fff;border-radius:99px;
 padding:13px 19px;font-family:var(--tit);font-weight:700;font-size:.89rem;text-decoration:none;
 box-shadow:0 8px 26px -8px rgba(18,128,63,.7);display:flex;gap:9px;align-items:center}
.wa:hover{background:#0f6e36}
/* Cede el sitio mientras tapa un «+ Cotizar» (site.js; guia comun, regla 17) */
.wa{transition:opacity .15s ease,visibility .15s ease}
.wa.wa-cede{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.wa{transition:none}}

/* aviso de "agregado a su cotización" (site.js, avisoCotizacion). Abajo a la
   izquierda para no chocar con la burbuja de WhatsApp. */
.aviso-cot{position:fixed;left:18px;bottom:18px;z-index:70;max-width:min(380px,calc(100vw - 110px));
 display:none;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:14px 44px 14px 16px;
 background:var(--sup);color:var(--tinta);border:1px solid var(--linea-2);border-left:4px solid var(--ok);
 border-radius:var(--r);box-shadow:var(--sombra-alta);font-size:.88rem;line-height:1.4}
.aviso-cot.visible{display:flex}
.aviso-cot p{margin:0;flex:1 1 100%}
.aviso-cot p b{color:var(--ok)}
.aviso-cot p span{color:var(--tinta-2)}
.aviso-cot .aviso-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:8px;
 background:transparent;color:var(--tinta-2);font-size:1.3rem;line-height:1;cursor:pointer}
.aviso-cot .aviso-x:hover{background:var(--sup-2);color:var(--tinta)}
@media (prefers-reduced-motion:no-preference){
 .aviso-cot.visible{animation:aviso-entra .22s ease-out}
}
@keyframes aviso-entra{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:620px){.aviso-cot{left:12px;bottom:12px;max-width:calc(100vw - 92px)}}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
 .ficha-prod{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
 .galeria{padding:26px}
}
@media(max-width:880px){
 .ficha-prod,.dos{grid-template-columns:1fr;gap:26px}
 .galeria{position:static;aspect-ratio:4/3;padding:22px;max-width:460px}
 .menu-btn{display:inline-flex}
 .acciones{margin-left:auto}
 nav.principal{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
  align-items:stretch;gap:2px;margin:0;padding:10px 20px 16px;background:var(--sup);
  border-bottom:1px solid var(--linea);box-shadow:var(--sombra-alta);max-height:calc(100vh - var(--barra));
  overflow-y:auto}
 header.sitio.abierto nav.principal{display:flex}
 nav.principal a{padding:13px 12px;font-size:1rem;border-radius:var(--r);
  border-bottom:1px solid var(--linea)}
 nav.principal a:last-child{border-bottom:0}
 .hero-grid{gap:var(--s3)}
 /* la referencia es el dato que se busca: se queda fija al desplazar */
 .cuadro th:first-child,.cuadro tbody td:first-child{position:sticky;left:0;z-index:2;
  border-right:1px solid var(--linea-2)}
 .cuadro th:first-child{background:var(--sup-2)}
 .cuadro tbody td:first-child{background:var(--sup)}
}
@media(max-width:620px){
 .wrap{padding:0 16px}
 .tira .wrap{padding:7px 16px;gap:4px 16px}
 .tira{font-size:.75rem}
 .buscador{flex-wrap:wrap;padding:8px}
 .buscador input{flex:1 1 100%;padding:11px 10px}
 .buscador .btn{flex:1 1 100%}
 .cifras{gap:var(--s2) var(--s3)}
 .cifra{min-width:0;flex:1 1 140px}
 .tarjeta{padding:18px}
 .foto{margin:-18px -18px 14px}
 .filtros{gap:10px}
 .campo{flex:1 1 150px}
 .campo select{width:100%}
 /* una columna por fila con un filete entre bloques: siete columnas
    apiladas sin marca visual se leen como un único listado interminable */
 .pie{grid-template-columns:1fr;row-gap:0}
 .pie>div{padding:20px 0;border-bottom:1px solid var(--linea)}
 .pie>div:first-child{padding-top:0}
 .pie>div:last-child{border-bottom:0;padding-bottom:0}
 .legal{gap:8px}
 footer.sitio{padding-bottom:96px}
 .wa{right:14px;bottom:14px;padding:14px;gap:0}
 .wa .wa-txt{display:none}
}
@media(max-width:430px){
 .logo img{height:26px}
 .acciones .btn-sm{padding:9px 11px;font-size:.8rem}
 .r4,.r3{grid-template-columns:1fr}
 .cifras{display:grid;grid-template-columns:1fr 1fr}
 .cifra:last-child{grid-column:1 / -1}
 .sello{font-size:.74rem;padding:6px 13px 6px 6px}
 .sello-hero{font-size:.79rem}
 .botonera .btn{flex:1 1 100%}
}
/* Cabecera en móvil (auditoría 2026-10-02, H1). Logo + «Mi cotización» +
   idioma + tema + menú suman ~435 px: por debajo de ese ancho el botón de
   menú quedaba fuera de la pantalla y toda la página se desplazaba de lado.
   Sin tocar el HTML de las cabeceras: .acciones pasa a display:contents, así
   sus hijos se ordenan como piezas de .barra. Cerrado: logo · cotización ·
   menú. Abierto: una segunda fila con idioma y tema encima del menú. */
@media(max-width:520px){
 .barra{flex-wrap:wrap;height:auto;min-height:0;padding-top:13px;padding-bottom:13px;
  column-gap:8px;row-gap:10px;align-content:flex-start}
 .acciones{display:contents}
 .logo{order:1;margin-right:auto}
 .acciones>.btn{order:2}
 .menu-btn{order:3}
 .idioma-sel,.tema-btn{display:none;order:5}
 header.sitio.abierto .barra::after{content:"";order:4;flex-basis:100%;height:0}
 header.sitio.abierto .idioma-sel,header.sitio.abierto .tema-btn{display:inline-flex}
 nav.principal{max-height:calc(100vh - 140px)}
}
@media(max-width:360px){
 .logo img{height:22px}
 .acciones>.btn.btn-sm{padding:9px 10px;font-size:.78rem}
 .barra{column-gap:6px}
}

[hidden]{display:none !important}

/* ============ DIVISIONES DE NEGOCIO ============
   No es un menú ni unas pestañas de navegador: es el conmutador entre dos
   negocios. Por eso cada opción es una placa con su propio icono, su nombre
   y su descriptor, y la activa se levanta sobre la barra con la superficie
   de la página. El filete turquesa inferior la cose al panel de abajo. */
.divisiones{background:var(--sup-2);border-bottom:1px solid var(--linea)}
.divisiones .wrap{display:flex;align-items:center;gap:14px;padding:8px 20px}
.div-rotulo{flex:none;font-family:var(--tit);font-size:.64rem;font-weight:800;text-transform:uppercase;
 letter-spacing:.16em;color:var(--tinta-3);line-height:1.35;white-space:nowrap;
 padding-right:14px;border-right:1px solid var(--linea-2);align-self:stretch;display:flex;align-items:center}
.div-lista{display:flex;align-items:stretch;gap:6px;min-width:0}
.div-tab{position:relative;display:flex;align-items:center;gap:11px;flex:none;
 font:inherit;text-align:left;padding:7px 16px 7px 8px;border-radius:12px;text-decoration:none;
 border:1px solid transparent;background:transparent;color:var(--tinta-2);cursor:pointer;
 transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.div-tab .ic{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
 background:var(--sup);border:1px solid var(--linea-2);color:var(--tinta-3);
 transition:background .16s ease,border-color .16s ease,color .16s ease}
.div-tab .ic svg{width:19px;height:19px;display:block}
.div-tab .et{display:grid;gap:1px;min-width:0}
.div-tab .et b{font-family:var(--tit);font-size:.95rem;font-weight:800;letter-spacing:-.018em;
 line-height:1.2;color:inherit}
.div-tab .et span{font-size:.71rem;font-weight:700;line-height:1.25;color:var(--tinta-3);
 letter-spacing:.01em}
.div-tab:hover{background:var(--sup);color:var(--tinta);border-color:var(--linea)}
.div-tab:hover .ic{border-color:var(--marca);color:var(--marca-txt)}
.div-tab[aria-current="page"]{background:var(--sup);border-color:var(--linea);color:var(--tinta);
 box-shadow:var(--sombra)}
.div-tab[aria-current="page"] .ic{background:var(--marca);border-color:var(--marca);color:var(--marca-ink)}
.div-tab[aria-current="page"] .et span{color:var(--marca-txt)}
.div-tab:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px;border-radius:12px}

/* ============ DIVISIÓN BIM ============ */
/* .bim-hero comparte clase .hero: misma trama de puntos, mismo ritmo y misma
   hairline de cierre que el hero de componentes. Es la misma empresa. */
.bim-hero{background:radial-gradient(900px 400px at 8% -12%,var(--marca-soft),transparent 72%),
           linear-gradient(180deg,var(--marca-soft),transparent 70%)}
#div-bim .kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--tit);font-size:.78rem;
 font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--marca-txt);margin:0 0 15px}
#div-bim .kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--marca);flex:none}
/* el titular del brochure son 12 palabras: a 3,4rem ocupa cinco líneas y
   aplasta la bajada. Baja un escalón respecto al h1 de componentes. */
.bim-hero h1{max-width:20ch;font-size:clamp(1.95rem,1.15rem + 2.5vw,2.9rem)}
.bim-hero .bajada{font-size:clamp(1.04rem,.99rem + .3vw,1.14rem);line-height:1.58;
 color:var(--tinta-2);max-width:58ch;margin:0 0 26px}
.bim-grid{display:grid;grid-template-columns:minmax(0,1fr);
 gap:clamp(28px,3.6vw,48px);align-items:center}
.bim-acciones{display:flex;gap:12px;flex-wrap:wrap}
.bim-fig{position:relative;overflow:hidden;background:var(--sup);border:1px solid var(--linea);
 border-radius:20px;padding:clamp(16px,2.2vw,26px);box-shadow:var(--sombra-alta)}
.bim-fig::before{content:"";position:absolute;inset:0;pointer-events:none;color:var(--trama);
 background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:22px 22px;
 -webkit-mask-image:radial-gradient(130% 95% at 50% 0,#000,transparent 72%);
 mask-image:radial-gradient(130% 95% at 50% 0,#000,transparent 72%)}
.bim-fig svg{display:block;width:100%;height:auto;position:relative}

/* --- esquema isométrico del modelo federado --- */
.bim-iso .plano{fill:var(--marca);fill-opacity:.07;stroke:var(--marca);stroke-opacity:.5;
 stroke-width:1.2;stroke-linejoin:round}
.bim-iso .malla{fill:none;stroke:var(--marca);stroke-opacity:.22;stroke-width:1}
.bim-iso .guia{fill:none;stroke:var(--tinta-3);stroke-opacity:.38;stroke-width:1;stroke-dasharray:3 6}
.bim-iso .eje{fill:var(--marca);fill-opacity:.85}
.bim-iso .muro{fill:var(--marca);fill-opacity:.16;stroke:var(--marca);stroke-opacity:.62;
 stroke-width:1.1;stroke-linejoin:round}
.bim-iso .remate{fill:none;stroke:var(--marca);stroke-opacity:.7;stroke-width:1.2;stroke-linejoin:round}
.bim-iso .col{fill:none;stroke:var(--marca);stroke-width:2.6;stroke-linecap:round}
.bim-iso .viga{fill:none;stroke:var(--marca);stroke-opacity:.8;stroke-width:1.4;stroke-linejoin:round}
.bim-iso .ducto{fill:none;stroke:var(--marca);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.bim-iso .ducto-2{stroke-width:5}
.bim-iso .costura{fill:none;stroke:var(--sup);stroke-opacity:.6;stroke-width:1.4;
 stroke-linecap:round;stroke-linejoin:round}
.bim-iso .tubo{fill:none;stroke:var(--marca-txt);stroke-opacity:.8;stroke-width:2.2;
 stroke-linecap:round;stroke-linejoin:round}
.bim-iso .bajante{fill:none;stroke:var(--marca-txt);stroke-opacity:.8;stroke-width:1.8;stroke-linecap:round}
.bim-iso .difusor{fill:var(--marca);fill-opacity:.45;stroke:var(--marca);stroke-width:1}
.bim-iso .nodo{fill:var(--sup);stroke:var(--marca-txt);stroke-width:2}
.bim-iso .rotulo{font-family:var(--tit);font-size:14px;font-weight:800;letter-spacing:.09em;
 fill:var(--tinta-2)}
.bim-iso .tick{stroke:var(--tinta-3);stroke-opacity:.6;stroke-width:1.2;stroke-linecap:round}

.banderas{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.bandera{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:700;
 background:var(--sup);border:1px solid var(--linea);border-radius:99px;padding:6px 15px 6px 11px;
 color:var(--tinta-2)}
.bandera b{color:var(--tinta)}
.punto-vivo{width:8px;height:8px;border-radius:50%;background:var(--est,var(--marca));flex:none}
.bandera.op,.sede.op{--est:var(--ok);--est-soft:var(--ok-soft)}
.bandera.ap,.sede.ap{--est:var(--avi);--est-soft:var(--avi-soft)}

/* --- cifras y atributos ---
   Dos de las cuatro celdas no son una cifra. En vez de dejar un guión que se
   lee como dato faltante, el hueco del número lo ocupa una placa con icono:
   la fila sigue alineada y se ve de inmediato qué es dato y qué es atributo. */
.cifras-bim{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
 background:var(--linea);border-block:1px solid var(--linea)}
.cifras-bim > div{background:var(--sup);padding:26px 22px}
.cifras-bim .atributo{background:linear-gradient(180deg,
 color-mix(in srgb,var(--marca-soft) 62%,var(--sup)),var(--sup) 72%)}
.cifras-bim b,.cifras-bim .mk{display:flex;align-items:center;height:42px;margin-bottom:9px}
.cifras-bim b{font-family:var(--tit);font-size:clamp(1.8rem,1.5rem + .7vw,2.15rem);font-weight:800;
 letter-spacing:-.04em;color:var(--marca-txt);font-variant-numeric:tabular-nums;line-height:1}
.cifras-bim .mk{width:42px;justify-content:center;border-radius:12px;color:var(--marca-txt);
 background:var(--sup);border:1px solid color-mix(in srgb,var(--marca) 38%,transparent);
 box-shadow:0 0 0 4px var(--halo)}
.cifras-bim .mk svg{width:22px;height:22px;display:block}
.cifras-bim strong{display:block;font-family:var(--tit);font-size:1rem;font-weight:800;
 letter-spacing:-.015em;margin:0 0 5px;color:var(--tinta)}
.cifras-bim span{font-size:.86rem;color:var(--tinta-2);line-height:1.45}

/* --- servicios: 4 de cabecera a doble ancho, 8 de apoyo compactos --- */
.serv{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.serv article{background:var(--sup);border:1px solid var(--linea);border-radius:var(--rl);padding:20px;
 display:grid;gap:9px;align-content:start;
 transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.serv article:hover{border-color:var(--marca);box-shadow:var(--sombra);transform:translateY(-2px)}
.serv .cab{display:flex;align-items:center;gap:10px}
.serv .chip{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
 background:var(--marca-soft);color:var(--marca-txt);
 border:1px solid color-mix(in srgb,var(--marca) 26%,transparent)}
.serv .chip svg{width:20px;height:20px;display:block}
.serv .num{margin-left:auto;font-family:var(--mono);font-size:.72rem;font-weight:700;
 color:var(--tinta-3);letter-spacing:.04em}
.serv h3{margin:0;font-size:1.02rem}
.serv p{margin:0;font-size:.9rem;line-height:1.5;color:var(--tinta-2)}
.serv .clave{padding:24px;background:linear-gradient(150deg,var(--marca-soft),var(--sup) 64%);
 border-color:color-mix(in srgb,var(--marca) 34%,var(--linea))}
.serv .clave .chip{width:46px;height:46px;border-radius:13px;background:var(--marca);
 color:var(--marca-ink);border-color:var(--marca)}
.serv .clave .chip svg{width:25px;height:25px}
.serv .clave .num{color:var(--marca-txt)}
.serv .clave h3{font-size:1.18rem;letter-spacing:-.022em}
.serv .clave p{font-size:.95rem}

.benef{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:14px;margin-top:8px}
.benef div{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
 padding:20px 18px;display:grid;gap:5px;align-content:start}
.benef b{display:flex;align-items:center;gap:9px;font-family:var(--tit);font-size:.95rem;font-weight:800;
 letter-spacing:-.015em;line-height:1.25}
.benef b::before{content:"";width:9px;height:9px;flex:none;border-radius:2px;
 background:var(--marca);transform:rotate(45deg)}
.benef span{font-size:.85rem;line-height:1.5;color:var(--tinta-2)}

.vmv{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px}
.vmv section{position:relative;overflow:hidden;background:var(--sup);border:1px solid var(--linea);
 border-radius:var(--rl);padding:26px 24px}
.vmv section::before{content:"";position:absolute;inset:0 0 auto;height:3px;
 background:linear-gradient(90deg,var(--marca),transparent 88%)}
.vmv h3{display:flex;align-items:center;gap:9px;font-size:.76rem;text-transform:uppercase;
 letter-spacing:.12em;color:var(--marca-txt);margin:0 0 13px;padding-bottom:13px;
 border-bottom:1px solid var(--linea)}
.vmv h3 svg{width:17px;height:17px;flex:none;display:block}
.vmv p{margin:0;font-size:.96rem;line-height:1.6;color:var(--tinta-2)}
.vmv ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vmv li{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;font-weight:700;
 color:var(--tinta);background:var(--marca-soft);border-radius:99px;padding:6px 14px 6px 11px}
.vmv li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marca);flex:none}

.pilares{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px;
 margin-top:30px;padding-top:28px;border-top:1px solid var(--linea-2)}
.pilar{display:grid;justify-items:center;gap:11px;text-align:center}
.pilar .aro{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
 background:var(--sup);color:var(--marca-txt);box-shadow:0 0 0 5px var(--halo);
 border:1px solid color-mix(in srgb,var(--marca) 48%,transparent)}
.pilar .aro svg{width:25px;height:25px;display:block}
.pilar b{font-family:var(--tit);font-size:.86rem;font-weight:800;letter-spacing:.09em;
 text-transform:uppercase;color:var(--tinta);line-height:1.25}

/* --- sedes: el estado comercial es el dato, va codificado en color y forma --- */
.contacto-bim{max-width:640px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:26px}
.sede{position:relative;overflow:hidden;background:var(--sup);border:1px solid var(--linea);
 border-radius:var(--rl);padding:26px 24px 26px 26px}
.sede::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--est,var(--marca))}
.sede .pais{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-family:var(--tit);
 font-size:1.16rem;font-weight:800;letter-spacing:-.022em;margin-bottom:3px;color:var(--tinta)}
.sede .estado{display:inline-flex;align-items:center;gap:7px;font-family:var(--txt);font-size:.72rem;
 font-weight:800;text-transform:uppercase;letter-spacing:.07em;line-height:1.3;
 color:var(--est);background:var(--est-soft);border-radius:99px;padding:4px 12px 4px 9px;
 border:1px solid color-mix(in srgb,var(--est) 32%,transparent)}
.sede .estado i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sede.op .estado i{animation:latido 2.6s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 65%,transparent)}
 70%,100%{box-shadow:0 0 0 7px transparent}}
.sede ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;font-size:.92rem}
.sede li{display:flex;align-items:flex-start;gap:11px;line-height:1.45}
.sede li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--marca-txt)}
/* :not(.btn): «Solicitar propuesta» heredaba el gris y daba 3,06:1 sobre el turquesa (VitUX H13) */
.sede a:not(.btn){color:var(--tinta-2);text-decoration:none}
.sede a:not(.btn):hover{color:var(--marca-txt);text-decoration:underline;text-underline-offset:3px}

/* la axonometría explotada es más alta que ancha por naturaleza: si la
   columna se ensancha, el hero crece hasta el doble de la primera pantalla.
   Por eso la figura va acotada, igual que .hero-fig en componentes. */
@media(min-width:1000px){
 .bim-grid{grid-template-columns:minmax(0,1fr) minmax(300px,384px)}
 .bim-fig{justify-self:end;width:100%}
}
@media(max-width:999px){
 .bim-fig{max-width:420px}
}
@media(min-width:1040px){
 .serv{grid-template-columns:repeat(4,minmax(0,1fr))}
 .serv .clave{grid-column:span 2}
}
@media(max-width:820px){
 .div-rotulo{display:none}
 .divisiones .wrap{gap:8px}
 .div-tab .et span{display:none}
 .div-tab{padding:7px 14px 7px 8px}
 .div-tab .ic{width:30px;height:30px;border-radius:9px}
}
@media(max-width:620px){
 .divisiones .wrap{padding:8px 16px;gap:6px}
 .div-lista{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
 .div-tab{flex:1 1 auto;min-width:0;gap:9px;padding:8px 10px 8px 8px}
 .div-tab .et b{font-size:.86rem}
 .serv{grid-template-columns:1fr}
 .pilares{grid-template-columns:1fr 1fr;gap:24px 14px}
 .cifras-bim > div{padding:22px 18px}
}

/* ============ CATÁLOGO COMPLETO ============
   Antes vivía en un <style> propio dentro de catalogo.html, con su propio
   header y su propia paleta hexadecimal. Ahora catalogo.html usa la misma
   cabecera, tira y pie que el resto del sitio, así que solo quedan aquí las
   piezas que no existen en otra página: la barra de filtros pegajosa y la
   rejilla de tarjetas de producto. Nombradas con el prefijo "cat-" para que
   no se confundan con .rejilla/.tarjeta (que tienen otro tamaño de celda y
   otro propósito) ni con .chip, que no existe en el resto del sitio. */
.controles{position:sticky;top:var(--barra);z-index:20;background:var(--papel);
 padding:16px 0 12px;border-bottom:1px solid var(--linea)}
/* Filtro de categorias del catalogo. Eran 22 botones en linea: ocupaban media
   pantalla y competian visualmente con las fichas de producto. Un desplegable
   nativo ocupa una linea, se lee igual en movil y el navegador ya sabe
   recorrerlo con el teclado. */
.cat-filtro{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.cat-filtro label{font-family:Overpass,system-ui,sans-serif;font-weight:700;font-size:.82rem;
 color:var(--tinta-2);letter-spacing:.01em}
.cat-filtro select{font:inherit;font-size:.9rem;font-weight:600;color:var(--tinta);
 padding:9px 34px 9px 12px;border:1px solid var(--linea);border-radius:var(--r);background:var(--sup);
 min-width:min(320px,100%);cursor:pointer;-webkit-appearance:none;appearance:none;
 background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6a71' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.cat-filtro select:hover{border-color:var(--marca)}
.cat-filtro select:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px;border-color:var(--marca)}
.paises{font-size:.86rem;line-height:1.55;color:var(--tinta-2);margin:0}
.conteo{font-size:.86rem;color:var(--tinta-ph);margin:14px 0 0;font-variant-numeric:tabular-nums}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px;padding:18px 0 40px}
.cat-card{background:var(--sup);border:1px solid var(--linea);border-radius:var(--rl);
 overflow:hidden;display:flex;flex-direction:column}
.cat-card:hover{border-color:var(--marca);box-shadow:var(--sombra)}
.cat-foto{aspect-ratio:4/3;background:linear-gradient(155deg,var(--placa-a),var(--placa-b));
 display:grid;place-items:center;padding:10px}
.cat-foto img{max-width:100%;max-height:100%;object-fit:contain}
.cat-foto span{font-family:var(--mono);font-size:.7rem;color:var(--tinta-3)}
.cat-cuerpo{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column;gap:5px}
.cat-ref{font-family:var(--mono);font-size:.84rem;font-weight:700;color:var(--marca-txt)}
/* Referencia reemplazada (tools/reemplazos.py): tarjeta del catalogo y ficha */
.cat-reemplazo{display:inline-block;margin:4px 0 2px;padding:2px 8px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--avi-soft);color:var(--avi)}
.aviso-reemplazo{margin:12px 0 4px}.aviso-reemplazo span{display:block;margin:4px 0}
.cat-nombre{font-size:.87rem;color:var(--tinta);line-height:1.35;font-weight:600}
.cat-familia{font-size:.74rem;color:var(--tinta-3);margin-top:auto;padding-top:7px}
.cat-eq{display:inline-block;font-size:.7rem;font-weight:800;background:var(--marca-soft);
 color:var(--marca-txt);padding:2px 8px;border-radius:99px;margin-top:6px;width:fit-content}
.cat-disp{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--ok);
 font-variant-numeric:tabular-nums}
.cat-disp::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cat-disp-no{color:var(--tinta-3);font-weight:600}
.cat-vacio{padding:50px 0;text-align:center;color:var(--tinta-ph)}
@media(max-width:600px){.controles{position:static}}


/* Buscar por especificacion. La celda vacia se marca con una raya tenue en
   vez de dejarse en blanco: comunica «no lo sabemos todavia», que es
   distinto de «no aplica», y el title lo explica al pasar el raton. */
.filtro-espec{align-items:flex-end}
.filtro-espec .campo select{min-width:150px}
.campo-accion{justify-content:flex-end}
.sin-dato{color:var(--tinta-3);opacity:.55;font-variant-numeric:tabular-nums}
#tabla-espec tbody tr[hidden]{display:none !important}
.conteo+.scroll{margin-top:10px}

/* ---- Accesorios y productos relacionados en la ficha de producto ---- */
/* <details> nativo en vez de un desplegable a mano: recuerda su estado, se
   abre con el teclado y el buscador indexa el contenido aunque este cerrado. */
.relacionados{margin-top:34px;padding-top:26px;border-top:1px solid var(--linea)}
details.acc{border:1px solid var(--linea);border-radius:var(--rl);background:var(--sup);padding:0 18px}
details.acc>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
 padding:16px 0;font-family:var(--tit);font-size:1.05rem;color:var(--tinta)}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"";width:9px;height:9px;margin-left:auto;
 border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
 transform:rotate(45deg);transition:transform .18s ease}
details.acc[open]>summary::after{transform:rotate(-135deg)}
details.acc>summary:focus-visible{outline:2px solid var(--marca-txt);outline-offset:3px;border-radius:6px}
details.acc .cuenta{font-family:var(--cuerpo);font-size:.76rem;font-weight:700;color:var(--marca-txt);
 background:var(--marca-soft);border-radius:99px;padding:2px 9px}
details.acc>*:last-child{margin-bottom:18px}
/* grupos dentro de «Accesorios compatibles» (tapa y separadores / puentes) */
details.acc .acc-grupo{display:flex;align-items:center;gap:8px;font-size:1rem;margin:18px 0 4px}
details.acc+details.acc{margin-top:18px}
/* Chrome deja de plegar el <details> si una hija directa trae su propio
   display (aqui .rejilla es grid): el display del autor gana al ocultamiento
   nativo. Esta regla lo restituye. */
details.acc:not([open])>*:not(summary){display:none !important}

/* ---- Resto de familias en productos.html ---- */
/* Ya no vive dentro de .rejilla: es hermana suya, asi que ocupa el ancho
   completo de .wrap en vez de una sola celda angosta de la grilla de tarjetas. */
.mas-familias{margin-top:30px;padding-top:24px;border-top:1px solid var(--linea)}
.mas-familias h2,.mas-familias h3{font-size:1.05rem;margin:0 0 12px}
/* Grilla de columnas en vez de flex-wrap: con todo el ancho disponible, el
   flex-wrap dejaba huecos irregulares fila a fila; la grilla alinea las
   fichas en columnas estables como .cat-grid. */
.lista-familias{list-style:none;padding:0;margin:0;display:grid;
 grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 10px}
.lista-familias li{display:flex}
.lista-familias a{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:600;
 padding:7px 13px;border:1px solid var(--linea);border-radius:99px;background:var(--sup);
 color:var(--tinta-2);text-decoration:none}
.lista-familias a:hover{border-color:var(--marca);color:var(--tinta)}
.lista-familias b{font-size:.76em;color:var(--tinta-3);font-weight:700}

/* ---- Buscador de la tabla de equivalencias ---- */
.buscador-equiv{padding:16px 16px 0}
.buscador-equiv input{width:100%;font:inherit;font-size:.95rem;padding:11px 14px;
 border:1px solid var(--linea);border-radius:var(--r);background:var(--sup);color:var(--tinta)}
.buscador-equiv input:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px;border-color:var(--marca)}
.buscador-equiv input::placeholder{color:var(--tinta-ph);font-size:.94rem}
.buscador-equiv+.conteo{padding:0 16px}
#tabla-equiv tbody tr[hidden]{display:none !important}

/* Norma de la que procede un valor electrico. Va junto al dato, no en una
   nota al pie: quien monta un tablero necesita saber bajo que norma se
   declaro la corriente antes de usarla. */
/* Texto --marca-txt sobre --marca-soft: 4,9:1 en claro y 9,2:1 en oscuro.
   Con --marca-ink (que no cambia de tema) el modo oscuro daba 1,06:1 (VitUX H6). */
.norma{display:inline-block;margin-left:7px;font-size:.75rem;font-weight:700;
 letter-spacing:.02em;color:var(--marca-txt);background:var(--marca-soft);
 border-radius:99px;padding:2px 8px;vertical-align:middle}

/* La tarjeta del catalogo dejo de ser un <article> y pasa a ser un <a>: hay
   que apagar el subrayado y el color de enlace heredados, y darle una senal
   clara de que se puede pulsar. */
a.cat-card{text-decoration:none;color:inherit;display:flex;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
a.cat-card:hover{border-color:var(--marca);box-shadow:var(--sombra);transform:translateY(-2px)}
a.cat-card:focus-visible{outline:2px solid var(--marca-txt);outline-offset:3px}
a.cat-card .cat-ref{color:var(--marca-txt)}
@media (prefers-reduced-motion:reduce){a.cat-card{transition:none}a.cat-card:hover{transform:none}}
/* 2026-10-05 (#9): la tarjeta es un contenedor con el enlace a la ficha y,
   aparte, el boton «+ Cotizar» (un enlace no puede ir dentro de otro). */
.cat-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.cat-link:focus-visible{outline:2px solid var(--marca-txt);outline-offset:-2px;border-radius:var(--rl)}
.cat-link:hover .cat-ref{text-decoration:underline;text-underline-offset:3px}
.cat-tec{font-size:.76rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.cat-acc{padding:0 15px 15px}
.cat-acc .btn{width:100%}
.cat-pestanas{display:inline-flex;gap:4px;margin-top:12px;padding:3px;border:1px solid var(--linea-2);
 border-radius:var(--r);background:var(--sup)}
.cat-pestanas button{font:inherit;font-family:var(--tit);font-size:.85rem;font-weight:700;border:0;
 border-radius:8px;padding:7px 14px;background:transparent;color:var(--tinta-2);cursor:pointer}
.cat-pestanas button[aria-pressed="true"]{background:var(--marca-soft);color:var(--marca-txt)}
.cat-pestanas button:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.cat-vacio p{margin:0 0 8px}
/* lista de «Mi cotización» (#7): producto con miniatura, existencias y −/+ */
.cot-prod{display:flex;gap:12px;align-items:flex-start;min-width:240px}
.cot-prod img,.cot-sinfoto{width:48px;height:48px;flex:none;object-fit:contain;border-radius:8px;
 background:linear-gradient(155deg,var(--placa-a),var(--placa-b));border:1px solid var(--placa-linea)}
.cot-prod a{color:var(--marca-txt)}
.cot-disp{font-weight:700;color:var(--ok);white-space:nowrap}
.cot-disp-no{color:var(--tinta-3);font-weight:600}
.cant.cant-sm button{width:36px;height:38px}
.cant.cant-sm input{width:70px;height:38px}
.cot-unidad{display:block;font-size:.78rem;margin-top:4px}
/* En movil la lista de cotizacion deja de ser tabla con desplazamiento
   lateral (la cantidad quedaba fuera de la pantalla): cada linea es un
   bloque con producto, existencias, cantidad, peso y «Quitar». */
@media(max-width:620px){
 #tabla-cot{min-width:0;width:100%}
 #tabla-cot thead{display:none}
 #tabla-cot,#tabla-cot tbody,#tabla-cot tbody tr,#tabla-cot tbody td{display:block;width:100%}
 #tabla-cot tbody tr{padding:12px 0;border-bottom:1px solid var(--linea)}
 #tabla-cot tbody td,#tabla-cot tbody td:first-child{position:static;border:0;padding:5px 16px;text-align:left;box-shadow:none}
 #tabla-cot tfoot tr{display:flex;justify-content:space-between;align-items:baseline}
 #tabla-cot tfoot th,#tabla-cot tfoot td{border:0;padding:12px 16px;position:static}
 #tabla-cot tfoot td:empty{display:none}
 #tabla-cot tfoot td.num{white-space:normal}
 .cot-prod{min-width:0}
}
/* «Pegar lista de materiales» en cotizacion.html (#11, 2026-10-07): cuadro
   de texto, vista previa con el resultado de cada linea y, en movil, cada
   linea como bloque con sus rotulos (data-et), como la lista de arriba. */
.pegar{margin:0 0 30px}
.pegar h2{font-size:1.15rem;margin-top:0}
.pegar textarea{width:100%;min-height:150px;border:1px solid var(--linea-2);border-radius:8px;padding:10px 12px;
 font-family:var(--mono);font-size:.88rem;line-height:1.5;background:var(--sup);color:var(--tinta);resize:vertical}
.pegar textarea::placeholder{color:var(--tinta-ph)}
.pegar textarea:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px;border-color:var(--marca)}
.pegar-ayuda{font-size:.84rem;margin:8px 0 14px}
.pegar-acc{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pegar-fin{margin-top:14px}
.pegar-estado{margin:12px 0 0;font-size:.9rem;color:var(--tinta-2)}
.pegar-estado:empty{display:none}
#pegar-vista{margin-top:14px}
#tabla-pegar{min-width:880px}
#tabla-pegar td{vertical-align:top}
#tabla-pegar td:nth-child(2){max-width:220px;word-break:break-word}
#tabla-pegar td:nth-child(4){min-width:260px}
.pl-txt{font-size:.82rem;color:var(--tinta)}
.pl-incl{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;cursor:pointer}
.pl-incl input{width:18px;height:18px;accent-color:var(--marca-txt)}
.pl-est{display:inline-block;font-family:var(--tit);font-size:.72rem;font-weight:800;letter-spacing:.04em;
 text-transform:uppercase;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pl-est-ok{background:var(--ok-soft);color:var(--ok)}
.pl-est-equiv{background:var(--marca-soft);color:var(--marca-txt)}
.pl-est-reemp,.pl-est-varias{background:var(--avi-soft);color:var(--avi)}
.pl-est-no{background:var(--acento-soft);color:var(--acento)}
.pl-det{display:block;font-size:.82rem;color:var(--tinta-2);margin-top:6px;max-width:260px}
.pl-det:empty{display:none}
.pl-sel{width:100%;max-width:340px;border:1px solid var(--linea-2);border-radius:8px;padding:8px 10px;
 font:inherit;font-size:.86rem;background:var(--sup);color:var(--tinta);margin-bottom:8px}
.pl-sel:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.pl-prod{min-width:0}
.pl-prod img,.pl-prod .cot-sinfoto{width:40px;height:40px}
.pl-cant{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pl-q{width:84px;border:1px solid var(--linea-2);border-radius:8px;padding:7px 9px;font:inherit;font-weight:700;
 font-variant-numeric:tabular-nums;text-align:right;background:var(--sup);color:var(--tinta)}
.pl-cant .cot-unidad{margin:0}
.pl-nota{display:block;font-size:.8rem;color:var(--avi);margin-top:6px;max-width:200px}
.pl-nota[hidden]{display:none}
tr.pl-fuera td{opacity:.55}
tr.pl-fuera td:first-child{opacity:1}
@media(max-width:620px){
 #tabla-pegar{min-width:0;width:100%}
 #tabla-pegar thead{display:none}
 #tabla-pegar,#tabla-pegar tbody,#tabla-pegar tbody tr,#tabla-pegar tbody td{display:block;width:100%}
 #tabla-pegar tbody tr{padding:10px 0;border-bottom:1px solid var(--linea)}
 #tabla-pegar tbody td,#tabla-pegar tbody td:first-child{position:static;border:0;padding:4px 16px;box-shadow:none;max-width:none;min-width:0}
 #tabla-pegar tbody td:nth-child(n){min-width:0;max-width:none}
 #tabla-pegar tbody td[data-et]::before{content:attr(data-et);display:block;font-family:var(--tit);font-size:.66rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);margin-bottom:2px}
 #tabla-pegar tbody td:first-child::before{display:none}
 .pl-det,.pl-nota{max-width:none}
 .pl-sel{max-width:100%;min-width:0}
 .pegar-acc .btn{flex:1 1 100%}
}
/* #15 cabecera mas baja (2026-10-05). En movil la tira se partia en tres
   lineas (~70 px) antes del menu: queda solo el primer mensaje. En
   escritorio, las franjas pierden algo de relleno. */
.divisiones .wrap{padding-top:5px;padding-bottom:5px}
@media(max-width:620px){
 .tira span+span{display:none}
 .tira .wrap{padding:6px 16px}
}
/* Ficha sin fotografia: un hueco con textura en vez de un vacio sin explicar. */
.galeria.sin-foto{display:flex;align-items:center;justify-content:center;min-height:240px;
 background:var(--sup-2);border:1px dashed var(--linea);border-radius:var(--rl);
 color:var(--tinta-3);font-size:.86rem;text-align:center;padding:20px}
/* Celular: con aspect-ratio y min-height juntos el recuadro exigia ~384 px de ancho
   y desbordaba la pagina en las fichas sin foto (validacion de VitUX, 15/10/2026, A2). */
@media(max-width:880px){.ficha-p .galeria.sin-foto{aspect-ratio:auto;min-width:0;max-width:100%}}

/* ---- Equivalencias: resultados en vez de tabla completa ---- */
/* Las 107 filas siguen en el HTML (ocultas) para que Google las indexe; solo
   se muestran las que coinciden con la busqueda. */
.equiv-inicio{max-width:640px;margin:8px 0 0;padding:22px;border:1px dashed var(--linea);
 border-radius:var(--rl);background:var(--sup)}
.equiv-inicio p{margin:0 0 12px}
.ejemplos{display:flex;flex-wrap:wrap;gap:8px}
.ejemplo{font:inherit;font-family:var(--mono);font-size:.84rem;font-weight:700;cursor:pointer;
 padding:7px 13px;border:1px solid var(--linea);border-radius:99px;background:var(--papel);
 color:var(--marca-txt)}
.ejemplo:hover{border-color:var(--marca)}
.ejemplo:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.equiv-lista{display:grid;gap:16px;margin-top:18px;
 grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.equiv-res[hidden]{display:none !important}
.equiv-res{border:1px solid var(--linea);border-radius:var(--rl);background:var(--sup);
 padding:18px 20px 16px;display:flex;flex-direction:column;gap:12px}
.equiv-cab h3{margin:0;font-size:1.05rem;font-family:var(--mono);color:var(--marca-txt)}
.equiv-cab p{margin:6px 0 0;font-size:.88rem}
.equiv-cab .sin-desc{font-style:italic}
.nota-reemplazo{display:inline-block;margin-top:6px;font-size:.75rem;font-weight:700;
 color:var(--marca-txt);background:var(--marca-soft);border-radius:99px;padding:2px 9px}
.equiv-res .especs{margin:0}
.equiv-res .especs tr.propia td{color:var(--marca-txt);font-family:var(--mono)}
.equiv-res .especs td{font-family:var(--mono);font-size:.88rem}
.equiv-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
/* #17: numero de articulo junto a la referencia, variantes y dudas, siempre
   visibles (nada solo al pasar el mouse: guia comun, regla 1). Se usan en
   equivalencias.html y en el bloque «Equivale a» de las fichas. */
.equiv-cab h3 a{color:inherit}
.eq-ref{font-weight:700}
.eq-num{color:var(--tinta-2);font-size:.92em;white-space:nowrap}
.eq-num>span{font-family:var(--txt);font-size:.92em}
.eq-ref{margin-right:.35em}
.eq-var,.eq-duda{display:block;margin-top:4px;font-family:var(--txt);font-size:.8rem;line-height:1.35}
.eq-var{color:var(--avi)}
.eq-var>span:first-child{font-weight:700}
.eq-duda{color:var(--acento)}
.eq-otras{font-size:.86rem}
.eq-otras p{margin:0 0 4px;color:var(--tinta-2)}
.eq-otras ul{margin:0;padding-left:18px;font-family:var(--mono)}
.especs td .eq-marca-fila{display:block}
.especs td .eq-marca-fila+.eq-marca-fila{margin-top:6px}

/* ============ BUSCADOR DE LA CABECERA (backlog #10) ============
   Patron «Autocompletado de producto con la coincidencia exacta primero»
   (Phoenix Contact, Wago, RS). Sin JS es un GET a catalogo.html?q=; con JS,
   assets/site.js le pone el desplegable de sugerencias (.sug).
   Disposicion: en escritorio la barra pasa a dos filas (logo · buscador ·
   acciones, y debajo el menu), como RS, Wago o Automation24: el menu ya
   ocupaba la fila entera y no quedaba sitio para un campo util. De 521 a
   700 px el campo baja a su propia fila; por debajo de 520 px lo abre la
   lupa (.cab-lupa) a todo el ancho. --barra sigue al alto real de la
   cabecera porque lo usan las barras pegajosas y scroll-margin. */
.cab-buscar{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:0;max-width:560px;
 height:42px;margin:0 6px 0 14px;background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r)}
.cab-buscar:focus-within{border-color:var(--marca-txt);outline:2px solid var(--marca-txt);outline-offset:1px}
.cab-buscar input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--tinta);
 font:inherit;font-size:.92rem;padding:0 4px 0 14px;outline:none}
.cab-buscar input::placeholder{color:var(--tinta-ph)}
.cab-buscar input::-webkit-search-cancel-button{cursor:pointer}
.cab-ir{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;padding:0;
 background:transparent;color:var(--tinta-2);cursor:pointer;border-radius:0 var(--r) var(--r) 0}
.cab-ir:hover{color:var(--marca-txt)}
.cab-ir:focus-visible{outline:2px solid var(--marca-txt);outline-offset:-3px}
.cab-ir svg{display:block}
.cab-lupa{display:none;align-items:center;justify-content:center;width:44px;height:42px;flex:none;
 background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r);color:var(--tinta);cursor:pointer}
.cab-lupa:hover{background:var(--sup-2);border-color:var(--marca)}
.cab-lupa svg{display:block}
header.sitio.buscando .cab-lupa{background:var(--marca-soft);border-color:var(--marca-txt);color:var(--marca-txt)}

/* Sugerencias (role=listbox). La opcion activa (aria-selected) lleva el
   mismo contorno que el foco del sitio. */
.sug{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:max(100%,440px);max-width:calc(100vw - 32px);
 max-height:min(72vh,600px);overflow-y:auto;margin:0;padding:6px;list-style:none;text-align:left;
 background:var(--sup);border:1px solid var(--linea-2);border-radius:var(--r);box-shadow:var(--sombra-alta)}
.sug [role="option"]{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:8px;cursor:pointer;
 color:var(--tinta);line-height:1.3}
.sug [role="option"]:hover{background:var(--sup-2)}
.sug [role="option"][aria-selected="true"]{background:var(--marca-soft);outline:2px solid var(--marca-txt);outline-offset:-2px}
.sug-foto{flex:none;width:44px;height:44px;border-radius:7px;overflow:hidden;display:grid;place-items:center;
 background:linear-gradient(160deg,var(--placa-a),var(--placa-b));border:1px solid var(--placa-linea)}
.sug-foto img{display:block;width:44px;height:44px;mix-blend-mode:multiply}
.sug-txt{display:grid;gap:1px;min-width:0}
.sug-ref{font-family:var(--tit);font-weight:800;font-size:.93rem;letter-spacing:-.01em}
.sug-nom{font-size:.8rem;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-fam{font-size:.74rem;color:var(--tinta-3)}
.sug-eq{font-size:.77rem;font-weight:700;color:var(--marca-txt)}
.sug-rp{font-size:.77rem;font-weight:700;color:var(--avi)}
.sug .sug-todos{font-family:var(--tit);font-weight:700;font-size:.86rem;color:var(--marca-txt);padding:11px 10px}
.sug .sug-prod+.sug-todos{margin-top:4px;border-top:1px solid var(--linea);border-radius:0 0 8px 8px}

/* Escritorio: dos filas */
@media(min-width:881px){
 :root{--barra:106px}
 .barra{flex-wrap:wrap;height:auto;row-gap:4px;padding-top:12px}
 .barra>.logo{order:1}
 .barra>.cab-buscar{order:2}
 .barra>.acciones{order:3;margin-left:auto}
 .barra>nav.principal{order:4;flex:0 0 100%;margin:0 0 0 -12px;padding-bottom:6px}
}
/* Tableta: una fila con el menu desplegable */
@media(max-width:880px){
 .cab-buscar{margin:0 4px 0 10px}
}
/* De 521 a 700 px: el campo en su propia fila, a todo el ancho */
@media(max-width:700px){
 :root{--barra:121px}
 .barra{flex-wrap:wrap;height:auto;row-gap:10px;padding-top:13px;padding-bottom:13px}
 .barra>.logo{order:1;margin-right:auto}
 .barra>.acciones{order:2}
 .barra>.cab-buscar{order:6;flex:0 0 100%;max-width:none;margin:0}
 nav.principal{max-height:calc(100vh - var(--barra))}
}
/* Cabecera compacta: la lupa abre el campo (solo con JS; sin JS el campo
   se queda visible en su fila). */
@media(max-width:520px){
 :root{--barra:68px}
 .js .barra>.cab-buscar{display:none}
 .js header.sitio.buscando .barra>.cab-buscar{display:flex}
 .js .cab-lupa{display:inline-flex;order:2}
 .sug{max-height:min(64vh,520px)}
 .sug [role="option"]{gap:10px;padding:7px 8px}
}
/* La lupa suma un boton a la fila compacta: botones algo mas estrechos para
   que logo · lupa · cotizacion · menu sigan en una fila a 320 px. */
@media(max-width:400px){
 .js .cab-lupa,.menu-btn{width:40px}
}
@media(max-width:360px){
 .js .cab-lupa,.menu-btn{width:36px}
 .barra{column-gap:4px}
 .acciones>.btn.btn-sm{padding:9px 8px}
 /* proyectos-bim.html: «Solicitar propuesta» es mas largo que «Mi cotizacion» */
 .barra:has(#navbim) .acciones>.btn.btn-sm{font-size:.72rem;padding:9px 6px}
}

/* ============ BUSCAR POR ESPECIFICACION (#12, 2026-10-07) ============
   Patrones «Tabla parametrica ordenable y exportable» (RS, Digi-Key) y
   «Conteos en las opciones de filtro» (Wago, Weidmüller). Antes la tabla
   media ~1700 px en una caja de 1138 (min-width:max-content: la descripcion
   no se partia) y «+ Cotizar» quedaba fuera de la vista. Ahora:
   - escritorio: la descripcion se parte en lineas y el resto de columnas se
     ajusta; a 1440 px cabe entera, con «+ Cotizar» a la vista;
   - de 621 a 880 px: desplazamiento horizontal DENTRO de la tabla, con la
     referencia fija a la izquierda y la columna de accion fija a la derecha;
   - movil (<=620 px): cada fila es un bloque (referencia + cotizar, la
     descripcion y los datos con su rotulo); los «—» no se muestran.
   Sin JS (.solo-js) los filtros, el orden y el CSV no aparecen: la tabla
   completa queda visible y los «+ Cotizar» son enlaces con respaldo ?add=. */
html:not(.js) .solo-js{display:none !important}
.filtro-espec .campo-q{flex:1 1 230px}
.campo input[type="search"]{background:var(--sup);border:1px solid var(--linea-2);border-radius:8px;padding:9px 11px;
 color:var(--tinta);font:inherit;font-size:.88rem;width:100%;min-width:0}
.campo input[type="search"]::placeholder{color:var(--tinta-ph)}
.campo input[type="search"]:hover{border-color:var(--marca)}
.campo select option:disabled{color:var(--tinta-3)}
.campo-stock{justify-content:flex-end}
.campo .chk{display:inline-flex;align-items:center;gap:8px;font-family:var(--txt);font-size:.88rem;font-weight:400;
 text-transform:none;letter-spacing:0;cursor:pointer;padding:8px 0;white-space:nowrap;color:var(--tinta)}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--marca-txt);cursor:pointer}
.chk input:disabled+span{color:var(--tinta-3)}
.e-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px 0}
.e-barra .conteo{margin:0}
.e-barra .btn:disabled,.e-vacio-sug .btn:disabled{opacity:.5;cursor:not-allowed}
.e-barra~.scroll{margin-top:12px}
#tabla-espec{min-width:0;width:100%;font-size:.84rem}
#tabla-espec th,#tabla-espec td{padding:10px 9px}
#tabla-espec th:first-child,#tabla-espec td:first-child{padding-left:16px}
#tabla-espec th:last-child,#tabla-espec td:last-child{padding-right:16px}
#tabla-espec td:first-child{min-width:132px;max-width:190px}
#tabla-espec .ref{white-space:normal;overflow-wrap:anywhere}
#tabla-espec td:nth-child(2){min-width:230px;color:var(--tinta-2);line-height:1.4}
#tabla-espec td:nth-child(4){min-width:96px}
#tabla-espec th:nth-child(3),#tabla-espec td:nth-child(3),
#tabla-espec th:nth-child(n+6):nth-child(-n+8),#tabla-espec td:nth-child(n+6):nth-child(-n+8){
 text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#tabla-espec td:nth-child(8){font-weight:700;color:var(--ok)}
#tabla-espec td.nd,#tabla-espec td.na,#tabla-espec td.bp{color:var(--tinta-3);font-weight:400}
/* columna de accion fija a la derecha cuando la tabla se desplaza de lado */
#tabla-espec th:last-child,#tabla-espec td:last-child{position:sticky;right:0;z-index:1;background:var(--sup);
 box-shadow:inset 1px 0 0 var(--linea)}
#tabla-espec th:last-child{background:var(--sup-2)}
#tabla-espec tbody tr:hover td:last-child,#tabla-espec tbody tr:hover td:first-child{
 background:linear-gradient(var(--fila),var(--fila)),var(--sup)}
#tabla-espec .bc{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 11px;border-radius:var(--r);
 border:1px solid var(--linea-2);background:var(--sup);color:var(--tinta);font-family:var(--tit);font-weight:700;
 font-size:.8rem;letter-spacing:-.01em;line-height:1.2;text-decoration:none;
 transition:background .16s ease,border-color .16s ease}
#tabla-espec .bc:hover{background:var(--sup-2);border-color:var(--marca)}
/* encabezados ordenables: boton dentro del <th>; aria-sort en el <th> */
#tabla-espec .ord{display:inline-flex;align-items:center;gap:5px;margin:-4px -6px;padding:4px 6px;border:0;border-radius:6px;
 background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap}
#tabla-espec .ord:hover{background:var(--sup);color:var(--tinta)}
#tabla-espec .ord::after{content:"\2195";content:"\2195" / "";font-size:.95em;opacity:.45;letter-spacing:0}
#tabla-espec th[aria-sort] .ord{color:var(--marca-txt)}
#tabla-espec th[aria-sort="ascending"] .ord::after{content:"\2191";content:"\2191" / "";opacity:1}
#tabla-espec th[aria-sort="descending"] .ord::after{content:"\2193";content:"\2193" / "";opacity:1}
.e-vacio{padding:36px 16px}
.e-vacio-sug{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0;margin:0 0 14px}
.e-vacio-sug:empty{display:none}
@media(max-width:880px){
 #tabla-espec{min-width:820px}
}
@media(max-width:620px){
 /* dos filtros por fila: cinco apilados ocupaban la pantalla entera */
 .filtro-espec .campo{flex:1 1 128px}
 .filtro-espec .campo-q{flex:1 1 100%}
 .filtro-espec .campo-stock,.filtro-espec .campo-accion{flex:1 1 auto}
 .filtro-espec .campo select{min-width:0}
 #tabla-espec{min-width:0;font-size:.86rem}
 #tabla-espec,#tabla-espec tbody{display:block}
 /* el encabezado queda como fila de botones para ordenar */
 #tabla-espec thead{display:block;border-bottom:1px solid var(--linea-2);background:var(--sup-2)}
 #tabla-espec thead tr{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px}
 #tabla-espec thead th,#tabla-espec thead th:first-child,#tabla-espec thead th:last-child{display:block;padding:0;border:0;
  background:none;position:static;box-shadow:none}
 #tabla-espec thead th:last-child,html:not(.js) #tabla-espec thead{display:none}
 #tabla-espec .ord{margin:0;padding:6px 10px;border:1px solid var(--linea-2);border-radius:99px;background:var(--sup)}
 #tabla-espec tbody tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 16px;padding:12px 16px;
  border-bottom:1px solid var(--linea)}
 #tabla-espec tbody td,#tabla-espec tbody td:first-child,#tabla-espec tbody td:last-child{display:block;padding:0;border:0;
  position:static;box-shadow:none;background:none;min-width:0;max-width:none;text-align:left;white-space:normal}
 #tabla-espec tbody tr:hover td:first-child,#tabla-espec tbody tr:hover td:last-child{background:none}
 #tabla-espec td:nth-child(1){order:1;flex:1 1 0;align-self:center}
 #tabla-espec td:nth-child(9){order:2}
 #tabla-espec td:nth-child(2){order:3;flex:1 1 100%;font-size:.84rem}
 #tabla-espec td:nth-child(n+3):nth-child(-n+8){order:4;font-size:.84rem}
 #tabla-espec td.nd,#tabla-espec td.na{display:none}
 #tabla-espec td:nth-child(n+3):nth-child(-n+8)::before{display:block;font-family:var(--tit);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3)}
 #tabla-espec td:nth-child(3)::before{content:"Sección"}
 #tabla-espec td:nth-child(4)::before{content:"Tipo"}
 #tabla-espec td:nth-child(5)::before{content:"Color"}
 #tabla-espec td:nth-child(6)::before{content:"Tensión"}
 #tabla-espec td:nth-child(7)::before{content:"Corriente"}
 #tabla-espec td:nth-child(8)::before{content:"Existencias"}
 :lang(en) #tabla-espec td:nth-child(3)::before{content:"Cross-section"}
 :lang(en) #tabla-espec td:nth-child(4)::before{content:"Type"}
 :lang(en) #tabla-espec td:nth-child(6)::before{content:"Voltage"}
 :lang(en) #tabla-espec td:nth-child(7)::before{content:"Current"}
 :lang(en) #tabla-espec td:nth-child(8)::before{content:"Stock"}
 :lang(pt) #tabla-espec td:nth-child(3)::before{content:"Seção"}
 :lang(pt) #tabla-espec td:nth-child(5)::before{content:"Cor"}
 :lang(pt) #tabla-espec td:nth-child(6)::before{content:"Tensão"}
 :lang(pt) #tabla-espec td:nth-child(7)::before{content:"Corrente"}
 :lang(pt) #tabla-espec td:nth-child(8)::before{content:"Estoque"}
}

/* ============ CABECERA COMPACTA AL BAJAR (#15, 2026-10-07) ============
   Patron «Caja de accion fija, barra de anclas y cabecera compacta»
   (Phoenix Contact, Wago, Automation24). Lo activa assets/site.js; sin JS
   la cabecera queda como siempre.
   - Escritorio (>880 px): al bajar se pliega la fila del menu y queda fija
     la de logo, buscador y «Mi cotizacion». El alto que pierde la cabecera
     se le da como margin-bottom (site.js): el contenido no salta. El menu
     sigue en el orden del teclado: al recibir el foco, la cabecera se
     despliega.
   - Movil y tableta (<=880 px): al bajar la cabecera se esconde y al subir
     vuelve; nunca con el menu o el buscador abiertos ni con el foco dentro.
   --barra es el alto de la cabecera desplegada o compacta (lo usa
   scroll-margin-top, para anclas y foco); --cab-vis, el alto que se ve
   (0 si esta escondida), para las barras pegajosas. */
/* Foco y anclas: scroll-margin-top en el contenido (main, pie y todo [id]),
   NO scroll-padding-top en <html>: con scroll-padding, enfocar con el teclado
   «Mi cotizacion», el buscador o el menu de la cabecera fija con la pagina
   bajada la hacia saltar casi al principio (medido: de 520 a 0-87 px). Lo
   mismo pasaba ya con [id]{scroll-margin-top} en #btncot y #cab-q (520 -> 410):
   dentro de la cabecera el margen va a 0. site.js (destapar) cubre el caso de
   la cabecera que se despliega o reaparece encima del foco. */
:where(main,footer) *{scroll-margin-top:calc(var(--barra) + 18px)}
header.sitio *{scroll-margin-top:0}
.controles{top:var(--cab-vis,var(--barra))}
.galeria{top:calc(var(--cab-vis,var(--barra)) + 16px)}
@media(min-width:881px){
 header.sitio.compacta .barra{padding-bottom:8px}
 header.sitio.compacta .barra>nav.principal{max-height:0;overflow:hidden;padding-bottom:0;opacity:0}
}
@media(max-width:880px){
 .js header.sitio{transition:transform .2s ease}
 header.sitio.oculta{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){.js header.sitio{transition:none}}

/* ============ FICHA DE LECTURA RAPIDA (backlog #14) ============
   Patrones de Phoenix Contact, Wago, Automation24 y RS
   (conocimiento/frontend/patrones.md): chips de datos clave bajo el H1,
   variantes hermanas por color y por seccion, barra de anclas fija bajo la
   cabecera, caja de cotizar fija en escritorio y barra inferior en movil.
   Cuadricula de la ficha (tools/gen_productos.py):
     >1100 px   foto | titulo y variantes | caja (sticky, toda la altura)
                cuerpo (anclas, tabla, equivalencias, accesorios) | caja
     881-1100   foto | titulo, variantes y caja; debajo el cuerpo
     <=880      titulo, foto, variantes, caja, cuerpo
   Las muestras de color son colores de PRODUCTO, no de marca: van como
   tokens --mu-* y siempre con su nombre al lado (no solo color). */
:root{--mu-gris:#9aa3a8;--mu-beige:#d8c7a0;--mu-azul:#1f5fbf;--mu-rojo:#c62828;--mu-naranja:#ef7d1a;
 --mu-amarillo:#f2c618;--mu-verde:#2e8b3e;--mu-blanco:#ffffff;--mu-negro:#1b1b1b;--anclas-h:46px}
.ficha-p{display:grid;gap:20px 32px;padding:var(--s3) 0 var(--s1);align-items:start;
 grid-template-columns:minmax(0,290px) minmax(0,1fr) 330px;grid-template-rows:auto 1fr auto;
 grid-template-areas:"gal cab caja" "gal var caja" "cue cue caja"}
.ficha-p .galeria{grid-area:gal;position:static;max-width:none;padding:24px}
.ficha-cab{grid-area:cab;min-width:0}
.ficha-cab .sello{margin-bottom:12px}
.ficha-cab h1{font-size:clamp(1.4rem,1.05rem + 1.1vw,1.85rem);letter-spacing:-.028em;margin:0}
.ficha-cab .desc{margin:10px 0 0}
.ficha-cab .aviso{margin-top:14px}
.ficha-var{grid-area:var;min-width:0}
.ficha-p .caja-cot{grid-area:caja;margin:0;position:sticky;top:calc(var(--cab-vis,var(--barra)) + 16px);
 max-height:calc(100vh - var(--cab-vis,var(--barra)) - 32px);overflow:auto}
.ficha-cuerpo{grid-area:cue;min-width:0}
.cot-acc{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cot-acc .btn{flex:1 1 auto;justify-content:center}
.cot-mas{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.moq-nota{font-size:.85rem;margin:10px 0 0}
.nota-eq{font-size:.82rem;margin-top:10px}
.aviso-falta{margin-top:12px}
.h-ficha{font-size:1.15rem;margin:30px 0 12px}
.anclas+.h-ficha{margin-top:4px}
.h-serie{font-size:1.3rem;margin-top:30px}
/* chips de datos clave */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.chips li{font-size:.8rem;line-height:1.3;color:var(--tinta-2);background:var(--sup);
 border:1px solid var(--linea);border-radius:99px;padding:5px 11px}
.chips b{color:var(--tinta);font-variant-numeric:tabular-nums}
/* variantes */
.var-grupo{margin-top:16px}
.ficha-var .var-grupo:first-child{margin-top:4px}
.var-rot{font-size:.8rem;font-weight:700;color:var(--tinta-2);margin:0 0 6px}
.var-ops{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.var-op{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 12px;border:1px solid var(--linea-2);
 border-radius:var(--r);background:var(--sup);color:var(--tinta);font-size:.86rem;font-weight:700;
 text-decoration:none;font-variant-numeric:tabular-nums}
a.var-op:hover{border-color:var(--marca-txt);color:var(--marca-txt)}
.var-op[aria-current]{border:2px solid var(--marca-txt);background:var(--marca-soft);padding:5px 11px}
.var-op[aria-current]::after{content:"✓";color:var(--marca-txt);font-size:.8rem}
.mu{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid var(--linea-2);
 box-shadow:inset 0 0 0 1px rgba(15,27,31,.12);background:var(--mu-gris)}
.mu-beige{background:var(--mu-beige)}.mu-azul{background:var(--mu-azul)}.mu-rojo{background:var(--mu-rojo)}
.mu-naranja{background:var(--mu-naranja)}.mu-amarillo{background:var(--mu-amarillo)}.mu-verde{background:var(--mu-verde)}
.mu-blanco{background:var(--mu-blanco)}.mu-negro{background:var(--mu-negro)}
.mu-amaver{background:repeating-linear-gradient(135deg,var(--mu-amarillo) 0 4px,var(--mu-verde) 4px 8px)}
/* «Ver similares» en la tabla tecnica */
.ver-sim{margin-left:8px;font-size:.8rem;font-weight:400;color:var(--marca-txt);white-space:nowrap;
 text-underline-offset:3px}
/* barra de anclas: fija bajo la cabecera (que se compacta o se esconde, #15) */
.anclas{position:sticky;top:var(--cab-vis,var(--barra));z-index:15;background:var(--papel);
 border-bottom:1px solid var(--linea);margin:0 0 6px}
.anclas ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.anclas ul::-webkit-scrollbar{display:none}
.anclas a{display:block;white-space:nowrap;padding:12px 12px 9px;font-size:.88rem;font-weight:700;
 color:var(--tinta-2);text-decoration:none;border-bottom:3px solid transparent}
.anclas a:hover{color:var(--marca-txt)}
.anclas a span{font-weight:400}
.anclas a[aria-current]{color:var(--marca-txt);border-bottom-color:var(--marca)}
.anclas a:focus-visible{outline-offset:-3px}
/* las anclas no quedan bajo la barra de anclas (ni el foco del teclado) */
.ficha-cuerpo *{scroll-margin-top:calc(var(--barra) + var(--anclas-h) + 18px)}
/* barra inferior de cotizar (movil y tableta; la muestra site.js) */
.barra-cot{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;align-items:center;gap:10px;
 padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--sup);
 border-top:1px solid var(--linea-2);box-shadow:var(--sombra-alta)}
.barra-cot[hidden]{display:none}
.bc-disp{margin:0;flex:1 1 auto;min-width:0;font-size:.78rem;line-height:1.25;color:var(--tinta-2)}
.bc-si{color:var(--ok);font-weight:700}
.barra-cot .btn{flex:none;white-space:nowrap;padding-left:14px;padding-right:14px}
.barra-cot .cant{flex:none}
.barra-cot .cant input{width:58px}
html.con-barra-cot body{padding-bottom:var(--bc-h,64px)}
html.con-barra-cot .wa{bottom:calc(var(--bc-h,64px) + 14px)}
html.con-barra-cot .aviso-cot{bottom:calc(var(--bc-h,64px) + 12px)}
@media(min-width:1101px){.barra-cot{display:none !important}}
@media(max-width:1100px){
 .ficha-p{grid-template-columns:minmax(0,240px) minmax(0,1fr);grid-template-rows:none;
  grid-template-areas:"gal cab" "gal var" "gal caja" "cue cue"}
 .ficha-p .caja-cot{position:static;max-height:none;overflow:visible}
}
@media(max-width:880px){
 .ficha-p{grid-template-columns:minmax(0,1fr);gap:18px;grid-template-areas:"cab" "gal" "var" "caja" "cue"}
 .ficha-p .galeria{aspect-ratio:16/10;max-width:460px;padding:18px}
 .ficha-p .caja-cot{padding:16px}
}

/* ============ CATALOGO Y FAMILIAS EN EL MOVIL: «VER MAS» (backlog #18) ============
   Las tarjetas que pasan del bloque mostrado llevan .pag-fuera (assets/site.js);
   sin JavaScript no existe esa clase y se ve todo. */
.pag-fuera{display:none !important}
.cat-grid.paginada{padding-bottom:16px}
.cat-mas{text-align:center;padding:0 0 40px}
.cat-mas-txt{font-size:.86rem;color:var(--tinta-2);margin:0 0 10px;font-variant-numeric:tabular-nums}
.cat-mas .btn{min-height:44px;min-width:min(320px,100%)}
/* «Mostrar todo»: salida discreta para Ctrl+F (guia comun, regla 16) */
.cat-mas-todo{display:block;margin:6px auto 0;min-height:44px;padding:0 14px;border:0;background:none;
 font:inherit;font-size:.9rem;color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cat-mas-todo:hover{color:var(--marca-txt)}
.cat-mas-todo[hidden]{display:none}
.eq-descont{color:var(--tinta-2);font-size:.88em}
@media(max-width:600px){
 /* Filtros compactos y fijos: buscador en una fila; categoria y disponibilidad
    en la siguiente; el conteo, en pequeño. La cabecera se esconde al bajar
    (#15), asi que la barra queda pegada arriba (--cab-vis = 0). */
 .controles{position:sticky;padding:8px 0 6px}
 .controles .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center}
 .controles .buscador{grid-column:1/-1;padding:4px}
 .controles .buscador input{padding:8px 8px;min-height:36px}
 .controles .cat-filtro{margin:0;min-width:0}
 .controles .cat-filtro label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .controles .cat-filtro select{min-width:0;width:100%;min-height:44px;padding:8px 30px 8px 10px;font-size:.85rem;text-overflow:ellipsis}
 .controles .cat-pestanas{margin:0}
 .controles .cat-pestanas button{min-height:38px;padding:6px 9px;font-size:.8rem}
 .controles .conteo{grid-column:1/-1;margin:0;font-size:.78rem}
 /* Tarjeta en fila: foto de 92 px a la izquierda y el texto a la derecha.
    Una columna de 575 tarjetas apiladas media unos 235 000 px. */
 .cat-grid{gap:10px;padding-top:12px}
 .cat-card .cat-link{flex-direction:row;align-items:stretch}
 .cat-card .cat-foto{flex:0 0 92px;aspect-ratio:auto;min-height:92px;border-radius:var(--rl) 0 0 0;padding:6px}
 .cat-card .cat-cuerpo{padding:10px 12px 8px;gap:3px;min-width:0}
 .cat-card .cat-foto img{max-height:80px;width:auto}
 .cat-card .cat-nombre{font-size:.84rem}
 .cat-card .cat-familia{padding-top:4px}
 .cat-card .cat-acc{padding:0 12px 12px}
 .cat-card .cat-acc .btn{min-height:44px}
}

/* ============ CELULAR: OBJETIVOS TACTILES DE 44 PX Y CAMPOS DE 16 PX ============
   Guia comun de VIT, reglas 7 y 9 (auditoria de VitUX del 08/10/2026, H7 y
   H8). Va al final para ganar a las reglas de cada pagina con la misma
   especificidad. Mismo criterio que VIT interno (web/vit.css): pantalla
   tactil o hasta 820 px. */
@media (pointer:coarse),(max-width:820px){
 /* 16 px: con menos, Safari de iPhone amplia la pagina al tocar el campo
    (!important: las reglas de cada pagina, como .campo select, son mas especificas) */
 input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px !important}
 /* campos de filtro */
 .campo select,.campo input[type="search"]{min-height:44px}
 /* botones y enlaces con forma de boton */
 .btn,.btn-sm,.acciones>.btn.btn-sm{min-height:44px}
 .menu-btn,.tema-btn,.cab-lupa{min-width:44px;height:44px}
 .idioma-sel{height:44px}
 .idioma-sel a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .cant button,.cant.cant-sm button{min-width:44px;height:44px}
 .cant input,.cant.cant-sm input{height:44px}
 .var-op{min-height:44px}
 .cat-pestanas button,.controles .cat-pestanas button{min-height:44px}
 .aviso-cot .aviso-x{width:44px;height:44px;top:0;right:0}
 summary{min-height:44px}
 a.ficha{min-height:44px;display:inline-flex;align-items:center}
 /* casillas: la etiqueta entera es el objetivo */
 .chk,.campo .chk{min-height:44px;display:inline-flex;align-items:center}
 /* enlaces de texto en migas y pie: alto de 44 px sin cambiar la letra */
 .migas a{display:inline-flex;align-items:center;min-height:44px}
 .pie li a,.legal a{display:inline-flex;align-items:center;min-height:44px}
 .pie li{line-height:1.3}
 .lista-familias a{min-height:44px}
 .ver-sim{display:inline-flex;align-items:center;min-height:44px}
 .cot-prod a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
 #tabla-espec .ord,#tabla-espec .bc{min-height:44px}
 #tabla-espec a.ref{display:inline-flex;align-items:center;min-height:44px}
 .buscador input,.controles .buscador input{min-height:44px}
 .ejemplo{min-height:44px}
 .sede li a{display:inline-flex;align-items:center;min-height:44px}
 .sede li{align-items:center}
}