/* ============================================================
   Configurador AIGNEP · cascarón
   Mismo lenguaje visual aprobado en las landings: fondo oscuro,
   marca roja, verde para lo vivo, apagado para lo que no.
   ============================================================ */
:root{
  --fondo:#0B0E12; --sup:#151A21; --sup-2:#1A2129;
  --linea:#242B34; --linea-2:#1F262E;
  --tx:#E8EBEF; --tx-2:#AEB6C2; --tx-3:#818A97;
  --marca:#d7282f;--marca-viva:#f0454c;--marca-tenue:rgba(215,40,47,.11); --ok:#3FBF7F; --aire:#4EA8E8;
  --sans:"IBM Plex Sans";
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* ============================================================
   La letra · IBM Plex Sans + IBM Plex Mono (v4, bloque 01)
   Elegida sobre las otras dos candidatas por dos motivos, no por gusto:
   · la sans y la mono son LA MISMA familia, y la mono carga todas las
     medidas, códigos y presiones de la herramienta;
   · Space Grotesk quedó fuera porque su mono dibuja la comilla de pulgada
     CURVA (1/8”) donde debe ir la recta (1/8"), y cada artículo del
     catálogo lleva una fracción en pulgadas en el nombre.
   Viajan dentro del zip, en subconjunto latino. Cero CDN.
   ============================================================ */
@font-face{font-family:"IBM Plex Sans";src:url("../assets/fuentes/plexsans-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../assets/fuentes/plexsans-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../assets/fuentes/plexsans-600.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../assets/fuentes/plexsans-700.woff2")format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fuentes/plexmono-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fondo);color:var(--tx);
     /* la pila de respaldo NO es decorativa: si la fuente propia no llega,
        la interfaz sigue legible y sin saltos de maquetación */
     font:15px/1.55 var(--sans),-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
     -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}

/* ---------- cabecera ---------- */
.cab{display:flex;align-items:center;gap:18px;padding:14px 26px;
     border-bottom:1px solid var(--linea-2);position:sticky;top:0;background:#0B0E12F2;
     backdrop-filter:blur(8px);z-index:10}
.cab__marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx)}
.cab__logo{width:26px;height:26px;border-radius:7px;background:var(--marca);
           display:inline-block;position:relative;flex:none}
.cab__logo::after{content:"";position:absolute;inset:7px;border:2px solid #fff;
                  border-radius:50%;border-right-color:transparent;transform:rotate(-45deg)}
.cab__nombre{font-size:15.5px;letter-spacing:-.01em}
.cab__nombre b{font-weight:700}
.cab__nav{font-family:var(--mono);font-size:11px;color:var(--tx-3);
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab__nav a{color:var(--tx-3);text-decoration:none}
.cab__nav a:hover{color:var(--tx)}
.cab__nav .sep{margin:0 6px;opacity:.5}

/* ---------- lienzo ---------- */
main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:34px 26px 80px}
.cargando{color:var(--tx-3);font-family:var(--mono);font-size:13px;padding:40px 0}
.error{background:#2A1416;border:1px solid var(--marca);border-radius:12px;
       padding:18px 22px;color:var(--tx-2);max-width:560px}
.error b{color:var(--tx)}

/* ---------- portada ---------- */
.portada__eyebrow{font-family:var(--mono);font-size:11px;color:var(--marca);
                  text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
.portada h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.025em;font-weight:700;
            line-height:1.1;max-width:21ch}
.portada__sub{color:var(--tx-2);max-width:62ch;margin:12px 0 30px;font-size:15.5px}
.portada__sub b{color:var(--tx)}

/* las dos puertas */
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:44px}
.puerta{display:block;background:var(--sup);border:1px solid var(--linea);border-radius:15px;
        padding:22px 24px;text-decoration:none;color:var(--tx);
        transition:border-color .25s,transform .25s}
.puerta:hover{transform:translateY(-2px)}
.puerta--guiada:hover{border-color:var(--ok)}
.puerta--directa:hover{border-color:var(--aire)}
.puerta__tit{font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;
             align-items:center;gap:10px}
.puerta__tit svg{flex:none}
.puerta__desc{color:var(--tx-3);font-size:13.5px;margin-top:7px;line-height:1.5}
.puerta__cta{font-family:var(--mono);font-size:11.5px;margin-top:14px;display:inline-block}
.puerta--guiada .puerta__cta{color:var(--ok)}
.puerta--directa .puerta__cta{color:var(--aire)}

/* el mosaico de familias */
.familias__lb{font-family:var(--mono);font-size:11px;color:var(--tx-3);
              text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.familias{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px}
.familia{position:relative;display:block;background:var(--sup);border:1.5px solid var(--linea-2);
         border-radius:14px;padding:20px 20px 17px;text-decoration:none;color:var(--tx);
         transition:border-color .35s,transform .3s,opacity .35s}
.familia__ico{width:38px;height:38px;margin-bottom:13px;color:var(--tx-2)}
.familia__n{font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.25}
.familia__c{font-family:var(--mono);font-size:11px;color:var(--tx-3);margin-top:5px;display:block}
.familia--pronto{opacity:.34;pointer-events:none}
.familia__pronto{position:absolute;top:13px;right:13px;font-family:var(--mono);font-size:9px;
                 text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);
                 border:1px solid var(--linea);border-radius:20px;padding:2px 8px}

/* ---------- vista de familia (esqueleto para el bloque 03) ---------- */
.vista h2{font-size:24px;letter-spacing:-.02em;margin-bottom:6px}
.vista__sub{color:var(--tx-3);font-size:13.5px;margin-bottom:26px}
.grupo{margin-bottom:26px}
.grupo__t{font-family:var(--mono);font-size:11px;color:var(--tx-3);text-transform:uppercase;
          letter-spacing:.1em;margin-bottom:10px}
.series{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.serie-card{background:var(--sup);border:1px solid var(--linea-2);border-radius:12px;
            padding:12px 14px;text-decoration:none;color:var(--tx);
            display:grid;grid-template-columns:68px minmax(0,1fr);
            grid-template-areas:"ph tx" "ph cmp";gap:4px 13px;align-content:center;
            transition:border-color .25s}
.serie-card:hover{border-color:var(--ok)}
.serie-card__n{font-weight:600;font-size:14px;display:block}
.serie-card__c{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);margin-top:3px;display:block}
.serie-card__c b{color:var(--tx-2);font-weight:400}
.serie-card__c em{font-style:normal;opacity:.7}
/* 🔴 El boton de comparar es un TERCER hijo: en una rejilla de dos columnas
   se caia a una fila nueva y la tarjeta se apilaba entera. Se le da su area. */
.serie-card__tx{min-width:0;grid-area:tx;align-self:end}
.serie-card .cmp{grid-area:cmp;justify-self:start;align-self:start;margin-top:3px}

/* ---------- búsqueda (esqueleto para el bloque 03) ---------- */
.buscar input{width:100%;max-width:520px;background:var(--sup);border:1px solid var(--linea);
              border-radius:11px;padding:13px 17px;color:var(--tx);font-size:15px;outline:none}
.buscar input:focus{border-color:var(--aire)}
.buscar__nota{color:var(--tx-3);font-size:13px;margin-top:14px}

/* ---------- pie ---------- */
.pie{display:flex;justify-content:space-between;gap:14px;padding:16px 26px;
     border-top:1px solid var(--linea-2);font-family:var(--mono);font-size:10.5px;
     color:var(--tx-3);flex-wrap:wrap}

@media (max-width:700px){
  .puertas{grid-template-columns:1fr}
  .cab{padding:12px 16px}
  main{padding:24px 16px 60px}
  .familias{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- serie: rejilla de articulos ---------- */
.enlace{color:var(--aire);text-decoration:none}
.enlace:hover{text-decoration:underline}
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.art{display:flex;gap:12px;align-items:center;background:var(--sup);border:1px solid var(--linea-2);
     border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--tx);
     transition:border-color .25s}
.art:hover{border-color:var(--ok)}
.art__foto{width:54px;height:54px;border-radius:9px;object-fit:contain;background:#fff;
           flex:none}
.foto--nula{display:flex;flex-direction:column;align-items:center;justify-content:center;
            gap:3px;background:var(--sup-2)!important;color:var(--tx-3);border:1px dashed var(--linea)}
.foto--nula i{font-style:normal;font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.05em}
.art__tx{min-width:0}
.art__tx b{font-size:13px;font-weight:600;display:block;letter-spacing:-.01em;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art__tx span{font-size:11.5px;color:var(--tx-3);display:block;line-height:1.35;
              display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art__tx i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--tx-3);margin-top:3px;display:block}

/* ---------- ficha de articulo ---------- */
.ficha-art{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:start}
.ficha-art__media{position:sticky;top:80px}
.ficha-art__foto{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;
                 border-radius:15px}
.ficha-art__media .foto--nula{width:100%;aspect-ratio:1;border-radius:15px}
.ficha-art__serie{font-family:var(--mono);font-size:11px;margin-bottom:8px}
.ficha-art h2{font-size:23px;letter-spacing:-.02em;line-height:1.2}
.ficha-art__nombre{color:var(--tx-2);margin-top:6px}
.ficha-art__desc{color:var(--tx-3);font-size:13.5px;margin-top:10px;max-width:56ch}
.ficha-art__codigo{font-family:var(--mono);font-size:12px;color:var(--tx-3);margin:14px 0 20px}
.ficha-art__codigo b{color:var(--tx)}
.ficha-art__sinspecs{background:var(--sup);border:1px dashed var(--linea);border-radius:11px;
                     padding:14px 17px;color:var(--tx-3);font-size:13.5px;max-width:56ch}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea-2);
       border:1px solid var(--linea-2);border-radius:11px;overflow:hidden}
.specs>div{background:var(--sup);padding:10px 13px}
.specs dt{font-family:var(--mono);font-size:9.5px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.06em}
.specs dd{font-size:13px;margin-top:3px}

/* ---------- resultados de busqueda ---------- */
.resultados{margin-top:18px;display:flex;flex-direction:column;gap:7px;max-width:640px}
.res{display:flex;gap:13px;align-items:baseline;background:var(--sup);border:1px solid var(--linea-2);
     border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--tx);
     transition:border-color .2s}
.res:hover{border-color:var(--aire)}
.res b{font-family:var(--mono);font-size:13px;flex:none}
.res span{font-size:12.5px;color:var(--tx-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--tx-3);margin-left:auto;flex:none}
.buscar__cero{background:var(--sup);border:1px solid var(--linea);border-radius:11px;
              padding:16px 19px;color:var(--tx-2);font-size:13.5px;max-width:560px}

@media (max-width:760px){
  .ficha-art{grid-template-columns:1fr}
  .ficha-art__media{position:static;max-width:300px}
}

/* ---------- comparador ---------- */
.cmp{font-family:var(--mono);font-size:10px;color:var(--tx-3);background:none;
     border:1px solid var(--linea);border-radius:6px;padding:3px 8px;cursor:pointer;
     margin-top:8px;transition:.2s;align-self:flex-start}
.cmp:hover{color:var(--aire);border-color:var(--aire)}
.cmp--si{color:var(--ok);border-color:var(--ok)}
.serie-card .cmp{display:inline-block}
.art .cmp{position:absolute;right:10px;bottom:8px}
.art{position:relative;padding-bottom:34px}

#barra-comparar{position:fixed;left:50%;bottom:-80px;transform:translateX(-50%);
     display:flex;align-items:center;gap:14px;background:var(--sup-2);
     border:1px solid var(--linea);border-radius:30px;padding:10px 18px;
     box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:30;font-size:13px;
     transition:bottom .3s;white-space:nowrap}
#barra-comparar.viva{bottom:18px}
.barra__ir{background:var(--aire);color:#0B0E12;font-weight:600;text-decoration:none;
     border-radius:20px;padding:6px 15px;font-size:13px}
.barra__pista{color:var(--tx-3);font-size:12px}
.barra__x{background:none;border:none;color:var(--tx-3);cursor:pointer;font-size:12px;
     font-family:inherit}
.barra__x:hover{color:var(--marca)}

/* La tabla ancha se desplaza DENTRO de su marco: la pagina nunca scrollea
   horizontal — regla de web-estandares */
.cmp-tabla-marco{overflow-x:auto;border:1px solid var(--linea-2);border-radius:13px}
.cmp-tabla{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
.cmp-tabla th,.cmp-tabla td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--linea-2);
     vertical-align:top}
.cmp-tabla thead th{background:var(--sup-2);font-size:13.5px;position:sticky;top:0}
.cmp-tabla thead th span{display:block;font-family:var(--mono);font-size:10px;
     color:var(--tx-3);font-weight:400;margin-top:3px}
.cmp-tabla tbody th{font-family:var(--mono);font-size:10px;color:var(--tx-3);
     text-transform:uppercase;letter-spacing:.05em;font-weight:500;background:var(--sup);
     position:sticky;left:0;max-width:170px}
.cmp-tabla tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.cmp-nulo{color:var(--tx-3);opacity:.6}

/* ---------- exports ---------- */
.exp{display:inline-flex;gap:7px;vertical-align:middle}
.exp__b{font-family:var(--mono);font-size:10px;color:var(--tx-2);background:var(--sup-2);
        border:1px solid var(--linea);border-radius:6px;padding:4px 10px;cursor:pointer;transition:.2s}
.exp__b:hover{color:var(--ok);border-color:var(--ok)}

/* ---------- remate de contacto ---------- */
#remate{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;
        flex-direction:column;align-items:flex-end;gap:9px}
.remate__b{display:flex;align-items:center;gap:9px;background:#25D366;color:#0B0E12;
           border:none;border-radius:30px;padding:12px 20px;font-family:inherit;
           font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.45);
           transition:transform .2s}
.remate__b:hover{transform:translateY(-2px)}
.remate__panel{background:var(--sup-2);border:1px solid var(--linea);border-radius:14px;
               padding:16px 18px;box-shadow:0 14px 38px rgba(0,0,0,.5);max-width:280px;
               order:-1}
.remate__panel[hidden]{display:none}
.remate__t{font-size:13.5px;font-weight:600;margin-bottom:11px}
.remate__paises{display:flex;flex-direction:column;gap:7px}
.remate__pais{display:flex;align-items:center;gap:10px;background:var(--sup);
              border:1px solid var(--linea);border-radius:10px;padding:10px 14px;
              color:var(--tx);font-family:inherit;font-size:13.5px;cursor:pointer;
              text-align:left;transition:border-color .2s}
.remate__pais:hover{border-color:#25D366}
.remate__bandera{font-size:17px;line-height:1}
.remate__nota{font-size:11.5px;color:var(--tx-3);margin-top:11px;line-height:1.45}
.remate__nota b{color:var(--tx-2)}
@media (max-width:700px){
  #remate{right:12px;bottom:12px}
  .remate__b{padding:11px 16px;font-size:13px}
  #barra-comparar.viva{bottom:76px}
}

/* ============================================================
   PULIDO · legibilidad y jerarquía
   El feedback fue claro: la letra de la lista era demasiado
   pequeña y los títulos de grupo no se distinguían entre sí.
   ============================================================ */

/* --- los títulos de grupo mandan: eran una etiqueta gris más --- */
.grupo{margin-bottom:34px}
.grupo__t{font-family:inherit;font-size:19px;font-weight:700;letter-spacing:-.02em;
          color:var(--tx);text-transform:none;margin-bottom:14px;
          padding-bottom:9px;border-bottom:2px solid var(--marca);
          display:inline-block;min-width:220px}

/* --- la lista de artículos, legible --- */
.art{padding:12px 14px 36px;gap:14px}
.art__foto{width:62px;height:62px}
.art__tx b{font-size:15px;letter-spacing:-.012em}
.art__tx span{font-size:12.5px;line-height:1.4}
.art__tx i{font-size:11px;margin-top:5px}
.arts{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px}

/* --- las tarjetas de serie, con su foto --- */
.serie-card{padding:14px 16px}
.serie-card__n{font-size:15.5px;font-weight:600}
.serie-card__c{font-size:11.5px;margin-top:4px}

/* --- specs de la ficha, más aire --- */
.specs dt{font-size:10.5px}
.specs dd{font-size:14px;margin-top:4px}
.specs>div{padding:11px 15px}

/* ============================================================
   PULIDO · la comparativa enseña lo que difiere
   Dos alturas: el resumen arriba (lo que separa) y la tabla
   completa debajo con esas filas destacadas.
   ============================================================ */
.dif{background:var(--sup);border:1px solid var(--linea);border-left:3px solid var(--marca);
     border-radius:0 14px 14px 0;padding:18px 22px;margin-bottom:22px}
.dif--iguales{border-left-color:var(--ok)}
.dif__t{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px;
        display:flex;align-items:baseline;gap:9px}
.dif__t em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--tx-3);
           border:1px solid var(--linea);border-radius:20px;padding:2px 9px;font-weight:400}
.dif__p{font-size:12.5px;color:var(--tx-3);margin-top:13px}
.dif__marco{overflow-x:auto}
.dif__tabla{border-collapse:collapse;width:100%;min-width:420px}
.dif__tabla th{text-align:left;font-family:var(--mono);font-size:10px;color:var(--tx-3);
               text-transform:uppercase;letter-spacing:.06em;font-weight:500;
               padding:9px 14px 9px 0;vertical-align:top;white-space:nowrap}
.dif__tabla td{padding:9px 16px 9px 0;vertical-align:top}
.dif__tabla tr+tr th,.dif__tabla tr+tr td{border-top:1px solid var(--linea-2)}
.dif__tabla b{font-size:14px;font-weight:600;display:block;color:var(--tx)}
.dif__col{font-family:var(--mono);font-size:9.5px;color:var(--tx-3);display:block;margin-top:2px}
.dif__falta{font-size:13px;color:var(--marca);display:block;font-style:italic}

/* la tabla completa: lo que difiere manda, lo que coincide se aparta */
.cmp--difiere td{color:var(--tx);font-weight:600}
.cmp--difiere th{color:var(--tx-2)!important}
.cmp--difiere{background:var(--marca-tenue)}
.cmp--difiere th{box-shadow:inset 3px 0 0 var(--marca)}
.cmp--igual td,.cmp--igual th{opacity:.5}
.cmp-tabla tbody tr:nth-child(even) td{background:transparent}

@media (max-width:700px){
  .dif{padding:15px 16px;border-radius:0 11px 11px 0}
  .dif__t{font-size:15.5px}
}

/* el resumen invertido: lo escaso es la coincidencia */
.dif--invertido{border-left-color:var(--aire)}
.dif--nada{border-left-color:var(--tx-3)}

/* ============================================================
   IDENTIDAD · el rojo estructura, no salpica
   ============================================================ */

/* La cabecera lleva la marca de verdad: filete rojo superior y logo
   con la forma del isotipo, no un cuadrado con un aro. */
.cab{border-top:3px solid var(--marca);padding-top:12px}
.cab__logo{background:var(--marca);border-radius:6px;
           box-shadow:0 2px 10px rgba(215,40,47,.35)}
.cab__logo::after{inset:6px;border-width:2.2px}
.cab__nombre b{color:var(--marca-viva)}

/* La portada se abre con marca */
.portada__eyebrow{color:var(--marca);position:relative;padding-left:30px}
.portada__eyebrow::before{content:"";position:absolute;left:0;top:50%;
  width:22px;height:2px;background:var(--marca)}
.portada h1{max-width:19ch}
.portada h1 em{font-style:normal;color:var(--marca-viva)}

/* Las piezas del mosaico: la viva se reconoce por la marca, no solo por verde */
.familia__ico{width:52px;height:auto;margin-bottom:15px;color:var(--tx-2)}
.familia__ico svg{width:100%;height:auto;display:block}
.familia--pronto{opacity:.3}
.familia{min-height:158px}

/* La puerta guiada es la principal: se viste de marca */
.puerta--guiada{border-color:rgba(215,40,47,.35)}
.puerta--guiada:hover{border-color:var(--marca)}
.puerta--guiada .puerta__cta{color:var(--marca-viva)}
.puerta--guiada .puerta__tit svg{color:var(--marca)}

/* Botones y acentos coherentes */
.serie-card:hover{border-color:var(--marca)}
.art:hover{border-color:var(--marca)}
.exp__b:hover{color:var(--marca-viva);border-color:var(--marca)}
.cmp--si{color:var(--marca-viva);border-color:var(--marca)}
.tile.dentro,.configurador__pieza.is-dentro{border-color:var(--marca)}

/* El pie cierra con el filete */
.pie{border-top:1px solid var(--linea-2);position:relative}
.pie::before{content:"";position:absolute;top:-1px;left:0;width:64px;height:2px;
             background:var(--marca)}

@media (prefers-reduced-motion:reduce){
  .fam-viva:hover,.puerta:hover{transform:none}
}

/* El remate flota sobre el contenido: hay que reservarle sitio o tapa la
   ultima fila — tapaba justo la familia viva en la portada. */
main{padding-bottom:104px}
@media (max-width:700px){main{padding-bottom:96px}}

/* Contraste de los iconos: sobre fondo oscuro el metal necesita algo de luz */
.familia__ico{filter:brightness(1.08)}

/* ============================================================
   SEGUNDA VUELTA · las fotos, sin contenedor blanco
   La foto del B2B trae fondo gris de estudio y es apaisada. Al
   forzarla a un cuadrado con «contain», el blanco que yo ponía
   detrás asomaba como franjas. Se quita el blanco y se deja que
   la foto mande.
   ============================================================ */

/* Lista de artículos: la foto llena su recuadro y crece */
.art{gap:16px;padding:13px 15px 38px}
.art__foto{width:84px;height:84px;border-radius:10px;object-fit:cover;
           background:transparent;border:1px solid var(--linea-2)}
.art .foto--nula{width:84px;height:84px}
.arts{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}

/* Ficha: la foto se ve entera y grande, con SU proporción — sin cuadrarla
   a la fuerza, que es lo que generaba las franjas */
.ficha-art__foto{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
                 background:transparent;border-radius:14px;
                 border:1px solid var(--linea-2);display:block}
.ficha-art__media{max-width:420px}
.ficha-art{grid-template-columns:420px 1fr;gap:36px}

/* Tarjeta de serie: igual, sin blanco */
@media (max-width:860px){
  .ficha-art{grid-template-columns:1fr}
  .ficha-art__media{max-width:340px}
}

/* ============================================================
   SEGUNDA VUELTA · las dos tablas, lado a lado
   Una encima de otra obligaba a scrollear y se perdía el enfoque.
   Ahora: el resumen a la izquierda (lo que decide) y la tabla
   completa a la derecha, ambas a la vista.
   ============================================================ */
.comparador-doble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
                  gap:20px;align-items:start}
.comparador-doble .dif{margin-bottom:0;position:sticky;top:78px}
.comparador-doble .cmp-tabla-marco{max-height:calc(100vh - 190px);overflow:auto}
.comparador-doble .cmp-tabla{min-width:0}
.comparador-doble .cmp-tabla th,.comparador-doble .cmp-tabla td{padding:9px 12px;font-size:12.5px}

/* la columna derecha se rotula, para que se entienda que son dos vistas */
.cmp-col__t{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);
            text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:block}

@media (max-width:1080px){
  .comparador-doble{grid-template-columns:1fr}
  .comparador-doble .dif{position:static}
  .comparador-doble .cmp-tabla-marco{max-height:none}
}

/* ---------- compartir ---------- */
.comp{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
      vertical-align:middle;margin-left:14px}
.comp__lb{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
          text-transform:uppercase;color:var(--tx-3)}
.comp__b{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
         font-size:10px;color:var(--tx-2);background:var(--sup-2);
         border:1px solid var(--linea);border-radius:6px;padding:4px 10px;
         cursor:pointer;text-decoration:none;transition:.2s}
.comp__b:hover{color:var(--marca-viva);border-color:var(--marca)}
.comp__b--wa:hover{color:#25D366;border-color:#25D366}
.comp__b--ok,.comp__b--ok:hover{color:var(--ok);border-color:var(--ok)}
.comp__b--ig:hover{color:#E1306C;border-color:#E1306C}
/* En portada y familia la barra no cuelga de una fila de exportar: necesita
   su propio aire para no pegarse al ultimo bloque. */
.portada > .comp,.vista > .comp{margin:26px 0 0;padding-top:18px;
                                border-top:1px solid var(--linea-2);width:100%}
@media (max-width:720px){.comp{margin-left:0;margin-top:12px}}

/* ---------- portada: dos arreglos medidos ---------- */
/* 🔴 .puerta era display:block con spans en linea: la ultima linea de la
   descripcion y el CTA se solapaban (medido: desc.bottom 393 > cta.top 377).
   En columna cada pieza ocupa su fila y el margin-top vuelve a valer. */
.puerta{display:flex;flex-direction:column;align-items:flex-start}
.puerta__desc{width:100%}
.puerta__cta{margin-top:auto;padding-top:14px}

/* 🔴 «Los iconos no se entienden» no era el dibujo: las 4 familias sin datos
   estaban al 30%. Se sube lo justo para que la pieza se lea, y lo que sigue
   diciendo «aun no» pasa a ser el texto y el sello, no la ceguera del dibujo. */
.familia--pronto{opacity:1}
.familia--pronto .familia__ico{opacity:.62;filter:grayscale(.35) brightness(.92)}
.familia--pronto .familia__n{color:var(--tx-2)}
.familia--pronto .familia__c,.familia--pronto .familia__pronto{color:var(--tx-3)}
.familia--pronto{border-color:var(--linea-2);background:var(--sup)}

/* ---------- glosario: el porqué de cada característica ---------- */
/* 🔴 tr lleva display:table-row, asi que cualquier regla nuestra que toque
   display en .glos-fila ganaria al atributo hidden. Ya paso una vez con
   .sec[hidden]. Se blinda explicitamente. */
tr[hidden]{display:none}

.glos-b{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
        background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
        display:inline-flex;align-items:center;gap:6px;transition:color .18s}
.glos-b:hover{color:var(--marca-viva)}
.glos-i{flex:none;width:14px;height:14px;border-radius:50%;border:1px solid var(--linea);
        color:var(--tx-3);font-family:var(--mono);font-size:9px;line-height:12px;
        text-align:center;transition:.18s}
.glos-b:hover .glos-i{color:var(--marca-viva);border-color:var(--marca)}
.glos-b--abierto .glos-i{background:var(--marca);border-color:var(--marca);color:#fff}

.glos-fila > td{padding:0 !important;background:var(--fondo)}
.glos{padding:16px 18px 17px;border-left:3px solid var(--marca);
      background:linear-gradient(90deg,rgba(215,40,47,.07),transparent 70%)}
.glos-q{font-size:14px;color:var(--tx);margin:0 0 9px;line-height:1.55}
.glos-d{font-size:13.5px;color:var(--tx-2);margin:0;line-height:1.6}
.glos-d span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
             text-transform:uppercase;color:var(--marca-viva);margin-bottom:3px}
.glos-v{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.glos-v li{font-size:13px;color:var(--tx-2);line-height:1.5;padding-left:13px;
           position:relative}
.glos-v li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
                   border-radius:50%;background:var(--linea)}
.glos-v b{color:var(--tx);font-family:var(--mono);font-size:12px;font-weight:400}
.glos-riesgo{font-size:12.5px;color:var(--tx-3);margin:12px 0 0;padding-top:10px;
             border-top:1px solid var(--linea-2);line-height:1.5}
.glos-alerta{font-size:13px;color:var(--tx-2);margin:0 0 12px;padding:10px 13px;
             line-height:1.5;border-radius:8px;background:rgba(232,180,78,.09);
             border:1px solid rgba(232,180,78,.32)}
.glos-alerta b{color:#E8B44E}
@media (max-width:640px){.glos{padding:13px 14px}}

/* glosario dentro de la ficha: la explicación crece en su propia celda */
.glos-cuerpo[hidden]{display:none}
.spec--glos{cursor:default}
.specs .glos{margin:11px -13px -10px;padding:13px 13px 14px;border-radius:0 0 0 3px;
             background:linear-gradient(180deg,rgba(215,40,47,.09),transparent 80%)}
.specs .glos-q{font-size:13px;margin-bottom:8px}
.specs .glos-d{font-size:12.5px}
.specs .glos-v{margin-top:10px}
.specs .glos-v li{font-size:12.5px}
.specs .glos-riesgo,.specs .glos-alerta{font-size:12px}
.specs dt .glos-b{width:100%}
.specs dt .glos-i{width:13px;height:13px;font-size:8.5px;line-height:11px}

/* ---------- el guiado (en crudo: la piel llega en su bloque) ---------- */
.guiado__marcador{font-family:var(--mono);font-size:12px;color:var(--tx-3);
                  margin:14px 0 26px;padding:11px 15px;border:1px solid var(--linea);
                  border-radius:10px;background:var(--sup);display:flex;
                  align-items:center;gap:10px;flex-wrap:wrap}
.guiado__marcador b{color:var(--tx);font-weight:600;font-size:14px}
.guiado__limpiar{margin-left:auto;font-family:var(--mono);font-size:10px;
                 color:var(--tx-3);background:none;border:1px solid var(--linea);
                 border-radius:6px;padding:4px 10px;cursor:pointer;transition:.2s}
.guiado__limpiar:hover{color:var(--marca-viva);border-color:var(--marca)}

.guiado__q{margin:0 0 22px;padding:0 0 20px;border-bottom:1px solid var(--linea-2)}
.guiado__q:last-of-type{border-bottom:0}
.guiado__qt{display:flex;align-items:center;gap:10px;font-size:15.5px;
            color:var(--tx);margin:0 0 11px}
.guiado__qn{flex:none;width:21px;height:21px;border-radius:50%;
            border:1px solid var(--linea);font-family:var(--mono);font-size:10px;
            line-height:19px;text-align:center;color:var(--tx-3)}
.guiado__q.is-respondida .guiado__qn{background:var(--marca);border-color:var(--marca);
                                     color:#fff}
.guiado__ops{display:flex;gap:8px;flex-wrap:wrap}
.guiado__op{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:13px;
            color:var(--tx-2);background:var(--sup-2);border:1px solid var(--linea);
            border-radius:9px;padding:8px 13px;cursor:pointer;transition:.18s;
            text-align:left}
.guiado__op:hover{color:var(--tx);border-color:var(--tx-3)}
.guiado__op.is-elegida{color:var(--tx);border-color:var(--marca);
                       background:var(--marca-tenue)}
.guiado__op-n{font-family:var(--mono);font-size:10px;color:var(--tx-3);
              padding:2px 6px;border-radius:5px;background:var(--fondo)}
.guiado__op.is-elegida .guiado__op-n{color:var(--marca-viva)}

.guiado__res{margin-top:30px;padding-top:22px;border-top:2px solid var(--linea)}
.guiado__rest{font-size:15px;color:var(--tx);margin:0 0 13px}
.guiado__rest em{font-style:normal;font-family:var(--mono);font-size:12px;
                 color:var(--marca-viva);border:1px solid var(--linea);
                 border-radius:20px;padding:2px 9px;margin-left:6px}
.guiado__series{display:flex;gap:8px;flex-wrap:wrap}
.guiado__serie{font-family:var(--mono);font-size:12.5px;color:var(--tx);
               text-decoration:none;background:var(--sup);border:1px solid var(--linea);
               border-radius:8px;padding:8px 14px;transition:.18s}
.guiado__serie:hover{border-color:var(--marca);color:var(--marca-viva)}
.guiado__vacio{font-size:13.5px;color:var(--tx-3);line-height:1.6}
@media (max-width:640px){.guiado__op{font-size:12.5px;padding:7px 11px}}

/* el guiado: opciones que no llevan a ningún sitio */
.guiado__op.is-muerta{opacity:.32;cursor:not-allowed;border-style:dashed;
                      border-color:var(--linea-2)}
.guiado__op.is-muerta:hover{color:var(--tx-2);border-color:var(--linea-2)}
.guiado__op.is-muerta .guiado__op-n{color:var(--tx-3)}
.guiado__atasco{font-size:13px;color:var(--marca-viva);margin:12px 0 0;
                display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guiado__ocultas{font-family:var(--mono);font-size:11px;color:var(--tx-3);
                 margin:0 0 22px;padding:9px 13px;border-left:2px solid var(--linea);
                 line-height:1.5}
.guiado__descartadas{font-size:13px;color:var(--tx-2);margin:-14px 0 24px;
                     padding:10px 14px;border-radius:9px;line-height:1.5;
                     background:rgba(232,180,78,.09);
                     border:1px solid rgba(232,180,78,.3)}

/* ============================================================
   La piel del guiado — portada de la landing de Fluidity.
   🔴 Estas reglas y las ilustraciones de js/iconos-guiado.js VIAJAN JUNTAS.
   Las clases .aire, .aire-corre y .aire-fuga las usan los SVG; sin estas
   reglas los dibujos salen en blanco. Ya pasó una vez.
   ============================================================ */
.guiado__disco {
  border-radius: 50%; border: 2px solid #5C6672;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.09), transparent 62%);
  flex: none; transition: border-color .25s;
}
.guiado__op.is-elegida .guiado__disco { border-color: #E23B3B; }
.guiado__orif { display: block; }
.guiado__fl {
  stroke-dasharray: var(--gu);
  animation: guiadoCorre var(--v) linear infinite;
}
.guiado__op.is-elegida .guiado__orif circle:first-child { stroke: #E23B3B; }
.guiado__op.is-elegida .guiado__fl { stroke: #6FC0F5; }
.guiado__ops--simbolo .guiado__simb { align-self: center; margin-bottom: 3px; }
.guiado__simb { flex: none; }
.guiado__op-lb { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 13px; letter-spacing: -.01em; }
.guiado__op-sub { font-size: 11px; opacity: .62; }
/* --- aire de las ilustraciones --- */
.guiado .aire { stroke: #4EA8E8; stroke-linecap: round; fill: none; }
.guiado .aire-corre { stroke-dasharray: 7 10; animation: guiadoAire 1.3s linear infinite; }
.guiado .aire-fuga {
  stroke-dasharray: 5 9;
  animation: guiadoAire 1.1s linear infinite, guiadoApaga 1.1s ease-out infinite;
}
/* --- el resultado en vivo: mosaico del catalogo --- */
.guiado__mosaico {
  padding: 13px 14px 15px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  transition: max-height .45s, opacity .3s, padding .45s;
}
.guiado__pieza {
  position: relative; display: block; border-radius: 9px; overflow: hidden;
  background: #0B0E12; border: 1.5px solid rgba(255,255,255,.07);
  color: inherit; text-decoration: none;
  transition: border-color .4s, opacity .45s, transform .3s;
}
.guiado__pieza:link, .guiado__pieza:visited { color: inherit; text-decoration: none; }
.guiado__pieza img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block;
  transition: filter .45s;
}
.guiado__pieza i {
  position: absolute; left: 0; right: 0; bottom: 0; font-style: normal;
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 9px; text-align: center;
  padding: 2px 0 3px; background: rgba(11,14,18,.9); opacity: .62; transition: opacity .4s;
}
.guiado__pieza.is-dentro { border-color: #3FBF7F; }
.guiado__pieza.is-dentro i { opacity: 1; }
.guiado__pieza.is-dentro:hover { transform: translateY(-2px); border-color: #5FD79B; }
.guiado__pieza.is-fuera { opacity: .19; pointer-events: none; }
.guiado__pieza.is-fuera img { filter: grayscale(1) brightness(.5); }
/* al quedar UNA serie el mosaico se recoge y manda la ficha */
.guiado.is-resuelta .guiado__mosaico,
.guiado.is-vacio .guiado__mosaico {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden;
}
.guiado__mosaico { grid-template-columns: repeat(5, 1fr); }

@keyframes guiadoAire { to { stroke-dashoffset: -34px; } }
@keyframes guiadoApaga { 0% { opacity: .95 } 100% { opacity: 0 } }
@keyframes guiadoCorre { to { stroke-dashoffset: var(--off); } }

/* La brida no es solo un tamaño más: es otra forma de montar. Se diferencia por
   la forma —anillo de tornillos— y no por otra pregunta, que era la alternativa
   descartada en la entrevista. */
.guiado__disco--brida{position:relative;border-style:double;border-width:4px}
.guiado__disco--brida::after{content:"";position:absolute;inset:5px;
  border-radius:50%;border:1.5px dotted #7C8794;opacity:.85}
.guiado__op.is-elegida .guiado__disco--brida::after{border-color:var(--marca-viva)}

/* ---------- el remate del guiado ---------- */
.guiado__remate{margin:26px 0 24px;padding:20px 22px;border-radius:14px;
                border:1px solid var(--marca);background:var(--marca-tenue)}
.guiado__remate-t{font-size:17px;color:var(--tx);margin:0 0 14px}
.guiado__remate-t b{color:var(--marca-viva);font-weight:600}
.guiado__cta{display:inline-flex;align-items:center;gap:8px;background:var(--marca);
             color:#fff;text-decoration:none;font-size:14px;font-weight:600;
             padding:11px 20px;border-radius:9px;transition:.2s}
.guiado__cta:hover{background:var(--marca-viva)}
.guiado__remate-p{font-size:12.5px;color:var(--tx-3);margin:13px 0 0;line-height:1.5}
.guiado__pista{font-size:13.5px;color:var(--tx-2);margin:24px 0;padding:13px 17px;
               border-radius:10px;background:var(--sup);border:1px solid var(--linea);
               line-height:1.55}
.guiado__pista b{color:var(--tx)}
/* el panel del glosario dentro de una pregunta */
.guiado__q .glos{margin:10px 0 14px;border-radius:0 10px 10px 0}
.guiado__qt .glos-b{font:inherit;color:inherit}

/* la red: cuando el guiado no está disponible */
.aviso-caida{font-size:13.5px;color:var(--tx-2);margin:0 0 20px;padding:12px 16px;
             border-radius:10px;line-height:1.55;background:rgba(232,180,78,.09);
             border:1px solid rgba(232,180,78,.3)}

/* ============================================================
   El corte paramétrico (v3) — piel de la válvula viva.
   El color vive AQUÍ; la geometría llega hecha de valvula-modelo.
   ============================================================ */
.ficha-corte{margin-top:18px;padding:16px 16px 12px;background:var(--sup-2);
             border:1px solid var(--linea);border-radius:14px}
.ficha-corte__t{font-family:var(--mono);font-size:10px;letter-spacing:.07em;
                text-transform:uppercase;color:var(--tx-3);margin:0 0 4px;
                display:flex;justify-content:space-between;align-items:center;gap:10px}
.ficha-corte__caja{position:relative}
.ficha-corte__caja svg{width:100%;height:auto;display:block}
.ficha-corte__cotas{position:absolute;inset:0;pointer-events:none}
.ficha-corte__pie{font-size:11.5px;color:var(--tx-3);margin:8px 0 0;line-height:1.5}
.exp__b--dxf{font-family:var(--mono);font-size:10px;color:var(--tx-2);background:var(--sup);
             border:1px solid var(--linea);border-radius:6px;padding:4px 10px;cursor:pointer;transition:.2s}
.exp__b--dxf:hover{color:var(--marca-viva);border-color:var(--marca)}

.vp-metal-laton .vp-cuerpo,.vp-metal-laton .vp-bocaIn,.vp-metal-laton .vp-bocaOut,
.vp-metal-laton .vp-bridaIn,.vp-metal-laton .vp-bridaOut{fill:url(#vpLaton);stroke:#2C333C}
.vp-metal-inox .vp-cuerpo,.vp-metal-inox .vp-bocaIn,.vp-metal-inox .vp-bocaOut,
.vp-metal-inox .vp-bridaIn,.vp-metal-inox .vp-bridaOut{fill:url(#vpInox);stroke:#2C333C}
.vp-tubo,.vp-bobina{fill:url(#vpGris);stroke:#2C333C}
.vp-cavIn,.vp-camara,.vp-cavSup,.vp-cavOut{fill:#0B0E12;stroke:none}
.vp-asientoIzq,.vp-asientoDer{fill:#5C6672;stroke:#2C333C}
.vp-embolo{fill:url(#vpAcero);stroke:#2C333C}
.vp-junta{fill:var(--vp-junta);stroke:#00000066}
.vp-roscas,.vp-espiras{stroke:#2C333C;fill:none}
.vp-muelle{stroke:#7C8794;fill:none}
.vp-tornillos{fill:#2C333C;stroke:none}
.vp-liq{fill:url(#vpLiq)}
.vp-gas{fill:none;stroke-width:.9;stroke-linecap:round}
.vp-atex rect{fill:#241D0E;stroke:#D9A441;stroke-width:.6}
.vp-atex text{fill:#F0C14B;font-family:var(--mono);font-weight:700}
#vp-glow{fill:none;stroke:#E23B3B;stroke-width:.8;opacity:0}
#vp-destello{fill:#FFD9A0;opacity:0}
.valvula-corte [class^="vp-"]{vector-effect:non-scaling-stroke;stroke-width:1.3}
.vp-cota{stroke:#C9D2DE;fill:none;stroke-width:1}
/* el contorno oscuro que va DEBAJO: una linea gris clara sobre laton no se ve */
.vp-cota-h{stroke:#0B0E12;fill:none;stroke-width:3.4;opacity:.75;stroke-linecap:round}
.vp-cota-f{fill:#C9D2DE;stroke:#0B0E12;stroke-width:1.6;paint-order:stroke}
.vp-cota-t{font-family:var(--mono);font-size:11px;fill:#D7DEE8;
  paint-order:stroke;stroke:#0B0E12;stroke-width:3px;stroke-linejoin:round}

/* estados del guiado sobre el corte: lo no respondido se ve, pero no afirma */
.vp-metal-neutro .vp-cuerpo,.vp-metal-neutro .vp-bocaIn,.vp-metal-neutro .vp-bocaOut,
.vp-metal-neutro .vp-bridaIn,.vp-metal-neutro .vp-bridaOut{fill:url(#vpGris);stroke:#2C333C}
.vp-fantasma{opacity:.62;stroke-dasharray:3 3}
.vp-conectorA,.vp-conectorB{fill:#39414D;stroke:#2C333C}
.vp-escape{fill:url(#vpGris);stroke:#2C333C}
.vp-escapeBore{fill:#0B0E12;stroke:none}

/* ---------- el guiado de tres zonas (v3) ---------- */
.guiado-g3 .g3__cab{margin-bottom:18px}
.g3__zonas{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr) minmax(260px,320px);
           gap:26px;align-items:start}
.g3__preg .guiado__q{margin-bottom:16px;padding-bottom:14px}
.g3__preg .guiado__qt{font-size:14px}
.g3__valv{position:sticky;top:72px;background:var(--sup);border:1px solid var(--linea);
          border-radius:16px;padding:18px 18px 12px}
.g3__valv-caja svg{width:100%;height:auto;display:block}
.g3__valv-pie{font-size:11.5px;color:var(--tx-3);margin:10px 0 0;line-height:1.5}
.g3__res .guiado__marcador{margin:0 0 14px}
.g3__res .guiado__mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.g3__res .guiado__rest{font-size:13px;margin:16px 0 10px}
.g3__res .guiado__remate{margin:0 0 16px;padding:14px 16px}
.g3__res .guiado__remate-t{font-size:14.5px;margin-bottom:10px}
.g3__res .guiado__pista{margin:0 0 16px;font-size:12.5px}

/* opciones compactas: el chip informa, la válvula emociona */
.guiado__disco-mini{flex:none;border-radius:50%;border:1.6px solid #7C8794;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.1),transparent 62%)}
.guiado__disco-mini--brida{border-style:double;border-width:3px}
.guiado__op-cod{font-family:var(--mono);font-size:11px;color:var(--tx);flex:none}
.g3__preg .guiado__op{padding:6px 10px;font-size:12px;gap:7px}
.g3__preg .guiado__op-lb{font-size:12px}

@media (max-width:1080px){
  .g3__zonas{grid-template-columns:1fr}
  /* en móvil la válvula manda arriba, visible mientras se responde,
     sin comerse la pantalla */
  .g3__valv{order:-1;position:sticky;top:58px;z-index:6;padding:10px 12px 8px}
  .g3__valv-caja svg{max-height:30vh;margin:0 auto}
  .g3__valv-pie{display:none}
  .g3__res .guiado__mosaico{grid-template-columns:repeat(5,1fr)}
}
.g3__escala{display:block;margin-top:3px;color:var(--tx-3);font-size:10.5px;font-family:var(--mono)}
.g3__valv-pie .enlace{font-family:var(--mono);font-size:11.5px}
.vp-regla{stroke:#6F7885;fill:none}
.vp-regla text{fill:#8892A0;font-family:var(--mono);stroke:none}
/* cuando la anatomía aún no está modelada: la foto real, nunca un corte falso */
.g3__foto{position:relative;display:flex;align-items:center;justify-content:center;
          min-height:150px;padding:8px}
.g3__foto img{max-width:100%;max-height:230px;object-fit:contain;border-radius:10px}
.g3__foto-tag{position:absolute;bottom:6px;left:8px;font-family:var(--mono);font-size:10px;
              color:var(--tx-3);background:#0B0E12CC;padding:2px 8px;border-radius:12px}
.g3__foto.sin-foto img{display:none}

/* la anatomía de membrana: sus piezas propias */
.vp-membrana{fill:var(--vp-junta);stroke:#00000077}
.vp-memAncIzq,.vp-memAncDer,.vp-tapa{fill:url(#vpGris);stroke:#2C333C}
.vp-camSup{fill:#0B0E12;stroke:none}
.vp-presion{fill:#E8B44E;opacity:0;pointer-events:none}
.vp-piloto,.vp-bleed{fill:#0B0E12;stroke:none}
.vp-nucleo{fill:url(#vpAcero);stroke:#2C333C}
.vp-vastago{fill:url(#vpAcero);stroke:#2C333C}

/* el producto FLOTA: recorte sobre transparente con su sombra de contacto */
.guiado__pieza{background:linear-gradient(180deg,#12161C,#0B0E12)}
.guiado__pieza img{object-fit:contain}
.art__foto,.ficha-art__foto{background:transparent}
/* pieza sin recorte: manda el código, no una imagen rota */
.guiado__pieza.sin-foto img{display:none}
.guiado__pieza.sin-foto{display:flex;align-items:center;justify-content:center;
                        min-height:64px;aspect-ratio:1}
.guiado__pieza.sin-foto i{position:static;background:none;font-size:12px;opacity:.9}

/* ============================================================
   BLOQUE 06 · portada, familia y comparador al nivel
   El producto entra en las tres vistas que se habían quedado
   como esqueleto de texto.
   ============================================================ */

/* ---------- portada: la familia VIVA manda ---------- */
/* Antes las cinco familias compartían rejilla y la única viva quedaba la
   última de la fila. Ahora tiene su propia banda, con producto real. */
.fam-vivas{display:grid;gap:14px;margin-bottom:34px}
.fam-viva{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
          gap:24px;align-items:center;text-decoration:none;color:var(--tx);
          background:radial-gradient(115% 130% at 20% 55%,rgba(215,40,47,.10),transparent 62%),
                     var(--sup);
          border:1.5px solid rgba(215,40,47,.32);border-radius:16px;padding:20px 24px;
          transition:border-color .25s,transform .25s,box-shadow .25s}
.fam-viva:hover{border-color:var(--marca);transform:translateY(-2px);
                box-shadow:0 12px 34px rgba(215,40,47,.14)}
.fam-viva__esc{display:flex;align-items:flex-end;justify-content:center;
               min-height:126px;padding:4px 0}
/* Todas del mismo tamaño: cada recorte viene encuadrado a SU pieza, así que
   agrandar una no dice «es más grande», dice «está más cerca». Aquí es un
   escaparate, no una escala — que al menos no mienta con el orden. */
.fam-viva__esc img{width:104px;height:104px;object-fit:contain;margin-left:-12px;
                   filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.fam-viva__esc img:first-child{margin-left:0}
.fam-viva__esc--ico{color:var(--marca)}
.fam-viva__esc--ico svg{width:88px;height:auto}
/* min-width:0 o un nombre de familia largo revienta la columna de la rejilla */
.fam-viva__tx{min-width:0}
.fam-viva__lb{display:inline-block;font-family:var(--mono);font-size:9.5px;
              letter-spacing:.12em;text-transform:uppercase;color:var(--marca-viva);
              border:1px solid rgba(215,40,47,.4);border-radius:20px;padding:3px 10px;
              margin-bottom:12px}
.fam-viva__n{display:block;font-size:21px;font-weight:700;letter-spacing:-.022em;
             line-height:1.2}
.fam-viva__c{display:block;color:var(--tx-3);font-size:13px;margin-top:7px;line-height:1.5}
.fam-viva__cta{display:inline-block;font-family:var(--mono);font-size:11.5px;
               color:var(--marca-viva);margin-top:15px}
.familias__lb--2{margin-top:2px}

/* ---------- vista de familia: cada serie con su producto ---------- */
.serie-card__ph{grid-area:ph;align-self:center;width:68px;height:68px;display:flex;align-items:center;
                justify-content:center;flex:none;position:relative}
.serie-card__ph img{width:100%;height:100%;object-fit:contain;
                    filter:drop-shadow(0 5px 8px rgba(0,0,0,.55))}
.serie-card__ph i{display:none;font-style:normal;font-family:var(--mono);font-size:12px;
                  color:var(--tx-3);letter-spacing:.02em}
/* sin recorte manda el código, nunca una imagen rota */
.serie-card__ph.sin-foto img{display:none}
.serie-card__ph.sin-foto{background:var(--sup-2);border:1px dashed var(--linea);
                         border-radius:10px}
.serie-card__ph.sin-foto i{display:block;font-size:10px;line-height:1.15;text-align:center;
                           max-width:100%;overflow:hidden;padding:0 2px}
.serie-card--sinficha .serie-card__ph{opacity:.72}

/* ---------- rejilla de artículos: fuera el párrafo repetido ---------- */
.art__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.art__chips em{font-style:normal;font-family:var(--mono);font-size:9.5px;
               color:var(--tx-2);background:var(--sup-2);border:1px solid var(--linea-2);
               border-radius:5px;padding:2px 6px;white-space:nowrap}

/* ---------- comparador: columnas con cara ---------- */
.cmp-tabla thead th{vertical-align:bottom}
.cmp-foto{display:block;width:56px;height:56px;object-fit:contain;margin-bottom:8px;
          filter:drop-shadow(0 5px 9px rgba(0,0,0,.55))}
/* el colgroup solo manda con reparto fijo; las palabras largas se parten */
.comparador-doble .cmp-tabla{table-layout:fixed}
/* solo las CELDAS de dato parten palabras; las etiquetas, jamas */
.comparador-doble .cmp-tabla td{overflow-wrap:anywhere}

@media (max-width:820px){
  .fam-viva{grid-template-columns:1fr;gap:14px}
  .fam-viva__esc{min-height:0;justify-content:flex-start}
  .fam-viva__esc img{width:66px;height:66px}
  .fam-viva__esc img:first-child{width:86px;height:86px}
}
@media (max-width:700px){
  .serie-card{grid-template-columns:54px minmax(0,1fr);gap:4px 11px}
  .serie-card__ph{width:54px;height:54px}
  .cmp-foto{width:42px;height:42px}
}

/* Las familias en camino son INVENTARIO, no oferta: siguen legibles —el
   arreglo de «los iconos no se entienden» sigue en pie— pero ceden el peso
   a la banda de la familia viva. */
.familias{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.familia{min-height:150px;padding:14px 15px}
/* 🔴 `.familia__ico` es un <span>: en linea, el `width` NUNCA se aplico —ni
   los 38px del principio ni los 52px de despues— y el icono se estiraba al
   ancho de la tarjeta. En movil, con una sola columna, salia de 358 px. */
.familia__ico{display:block;width:84px;margin-bottom:11px}
.familia__n{font-size:13.5px}
.familia__c{font-size:10px}
@media (max-width:700px){
  /* dos columnas caben: 148+148+13 de hueco entran en los 358 de un movil */
  .familias{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .familia{min-height:126px;padding:12px 13px}
  .familia__ico{width:64px}
}

/* 🔴 En una columna, `1fr` trae `min-width:auto`: la mitad del comparador se
   estiraba a los 506 px de su tabla dentro de un movil de 358. El marco de la
   tabla ya scrollea solo; lo que faltaba era dejar que la celda se encogiera. */
@media (max-width:860px){
  .comparador-doble{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   El recorte ya no trae sombra pintada
   La elipse de contacto que horneaba el script se leía como una mancha gris
   despegada de la pieza. Ahora la sombra la pone el CSS: escala con el tamaño
   al que se muestre, y nunca se recorta contra el borde del lienzo.
   ============================================================ */
.ficha-art__foto,
.art__foto,
.guiado__pieza img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.ficha-art__foto{filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}

/* ============================================================
   La válvula del guiado: que se lea sin responder, y que se note al responder
   ============================================================ */
/* 🔴 El fantasma estaba al 32%. Sobre fondo oscuro, una pieza YA gris a esa
   opacidad desaparece: la válvula del centro —la protagonista— arrancaba como
   un borrón. Al 62% se lee la silueta entera y el punteado sigue diciendo
   «esto aún no lo has decidido», que es lo que tiene que decir. */

/* Lo recién decidido se enciende un instante. Es lo que convierte «la válvula
   se rehace» en «la válvula se arma con tu respuesta». */
@keyframes vpDestello{
  0%{filter:brightness(2.4) saturate(1.15)}
  100%{filter:brightness(1) saturate(1)}
}
.vp-recien{animation:vpDestello .9s ease-out}

/* ============================================================
   PIEL v4 · superficie de Apple sobre letra de instrumento
   ------------------------------------------------------------
   La regla que gobierna todo lo de aquí abajo: **las superficies se separan
   por ELEVACIÓN, no por línea.** Fuera los bordes de 1 px; en su lugar, un
   degradado muy leve, una sombra que da profundidad y un filo superior claro
   —el reflejo de la luz en el canto— que es lo que hace que una superficie
   oscura parezca material y no un rectángulo pintado.

   Y la jerarquía de botones se resuelve por RELLENO, no por borde: translúcido
   y tenue para lo que es opción, sólido de marca solo para lo que decide. En
   esta herramienta casi todo son filtros; si veinte botones gritan, no manda
   ninguno.
   ============================================================ */
:root{
  --r-s:10px; --r-m:14px; --r-l:18px;
  --som-1:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.26);
  --som-2:0 2px 6px rgba(0,0,0,.5),  0 18px 44px rgba(0,0,0,.38);
  --filo:inset 0 1px 0 rgba(255,255,255,.055);
  --vidrio:rgba(255,255,255,.045);
  --vidrio-2:rgba(255,255,255,.08);
  --sup-alta:linear-gradient(180deg,#1A212A,#141A21);
}

/* ---------- superficies ---------- */
.puerta,.familia,.fam-viva,.serie-card,.art,.ficha-corte,.dif,
.cmp-tabla-marco,.buscar__cero,.g3__valv,.res{
  border:none;
  background:var(--sup-alta);
  border-radius:var(--r-m);
  box-shadow:var(--som-1),var(--filo);
}
.fam-viva,.puerta{border-radius:var(--r-l)}
.serie-card,.art{border-radius:var(--r-s)}

/* el hover deja de mover el borde: sube la pieza */
.puerta:hover,.fam-viva:hover,.serie-card:hover,.art:hover{
  box-shadow:var(--som-2),var(--filo);
  transform:translateY(-2px)}
.serie-card:hover,.art:hover,.puerta:hover,.fam-viva:hover{border-color:transparent}

/* la puerta principal y la familia viva se visten de marca sin borde */
.puerta--guiada,.fam-viva{
  background:radial-gradient(120% 140% at 18% 0%,rgba(215,40,47,.13),transparent 58%),
             var(--sup-alta);
  box-shadow:var(--som-1),var(--filo),inset 0 0 0 1px rgba(215,40,47,.22)}
.puerta--guiada:hover,.fam-viva:hover{
  box-shadow:var(--som-2),var(--filo),inset 0 0 0 1px rgba(215,40,47,.45)}

/* la rejilla de specs: el hueco de 1px se cambia por superficie continua */
.specs{background:transparent;gap:2px;border-radius:var(--r-m);overflow:hidden;
       box-shadow:var(--som-1),var(--filo)}
.specs>div{background:var(--sup-alta)}

/* la caja del corte: marco nuevo, dibujo intacto */
.ficha-corte{background:linear-gradient(180deg,#141A22,#0E141A);
             box-shadow:var(--som-2),var(--filo)}

/* ---------- botones: la jerarquía va por relleno ---------- */
.cmp,.exp__b,.comp__b,.op,.guiado__op{
  border:none;background:var(--vidrio);border-radius:var(--r-s);
  color:var(--tx-2);box-shadow:var(--filo);
  transition:background .18s,color .18s}
.cmp:hover,.exp__b:hover,.comp__b:hover{background:var(--vidrio-2);color:var(--tx)}
/* lo elegido se tiñe de marca, sigue siendo translúcido */
.cmp--si,.comp__b--ok{background:rgba(215,40,47,.16);color:var(--marca-viva)}
/* y solo lo que DECIDE va relleno y sólido */
.barra__ir{background:var(--marca);color:#fff;border-radius:var(--r-s);
           box-shadow:0 6px 18px rgba(215,40,47,.3)}

/* la chapa de «próximamente» deja de ser un borde suelto */
.familia__pronto{border:none;background:var(--vidrio);border-radius:20px}
.fam-viva__lb{border:none;background:rgba(215,40,47,.16)}

/* el separador de secciones: una línea de luz, no un borde */
.cab{border-bottom:none;box-shadow:0 1px 0 rgba(255,255,255,.05),0 6px 20px rgba(0,0,0,.35)}
.pie{border-top:none;box-shadow:0 -1px 0 rgba(255,255,255,.04)}

/* 🔴 `--tx-3` estaba en #6F7885 y daba **3,63 sobre la superficie más clara**
   de la piel nueva — por debajo del 4,5 que pide un texto pequeño. Y no era un
   caso suelto: es el token de los contadores, las etiquetas de spec, los
   códigos y los pies. Subido a #818A97, que pasa 4,65 contra el peor fondo y
   5,54 contra el lienzo. (Medido componiendo el alfa, no leyendo el rgba a
   pelo: el primer medidor daba 1,34 en un botón translúcido perfectamente
   legible.) */

/* El arranque de portada iba en `--marca` puro: 3,90 sobre el lienzo, que para
   un texto de 11 px se queda corto. Pasa a `--marca-viva`, que da 5,21 y sigue
   siendo rojo de AIGNEP — el color no se abandona, se usa la variante que ya
   existía para leer sobre oscuro. El `--marca` sólido sigue mandando donde es
   RELLENO, que es donde el contraste lo pone el blanco encima. */
.portada__eyebrow{color:var(--marca-viva)}

/* La medición dijo «cero botones sólidos de marca», que cumple el ≤1 pero se
   pasa de frenada: si nada va relleno, ninguna pantalla dice cuál es su acción
   principal. En la portada lo que decide es entrar al guiado, así que su
   llamada deja de ser un enlace y pasa a ser el único botón sólido de la
   pantalla. Uno por vista, ni cero ni veinte. */
.puerta--guiada .puerta__cta{
  background:var(--marca);color:#fff;border-radius:var(--r-s);
  padding:9px 16px;font-weight:500;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(215,40,47,.32);
  transition:background .18s,box-shadow .18s}
.puerta--guiada:hover .puerta__cta{
  background:var(--marca-viva);box-shadow:0 8px 24px rgba(215,40,47,.45)}

/* ============================================================
   BLOQUE 04 · El cristal, solo en lo que flota
   ------------------------------------------------------------
   Cabecera, barra de comparar y remate: las tres cosas que se superponen al
   contenido. Las tarjetas NO llevan cristal — su profundidad la dan degradado
   y sombra, que no cuestan FPS.

   🔴 Va detrás de un interruptor y **arranca apagado**. La compuerta de este
   bloque es física: el FPS se mide en el móvil real de Mario. Yo no puedo
   medirlo, así que no lo enciendo. Para probarlo: añadir la clase `cristal`
   al <html> desde la consola —  document.documentElement.classList.add('cristal')
   ============================================================ */
.cristal .cab{
  background:rgba(11,14,18,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6)}
.cristal #barra-comparar{
  background:rgba(26,33,42,.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5)}
.cristal .remate,.cristal .g3__valv{
  background:rgba(21,26,33,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4)}

/* Sin el interruptor, las tres piezas siguen siendo legibles y opacas: el
   desenfoque NUNCA es lo que da el contraste. */
@media (prefers-reduced-motion:reduce){
  .cristal .cab,.cristal #barra-comparar,.cristal .remate,.cristal .g3__valv{
    -webkit-backdrop-filter:none;backdrop-filter:none}
}