/* =============================================================
   Oilsuper · oilsuper.info — hoja de estilos única
   Basada en el diseño aprobado (fuente/ejemplo-original.html).
   La copia el generador (build/generar.py) a sitio/assets/css/.

   Estándar responsive (ver build/LEEME.md):
   - Mobile-first. Cortes por clase de dispositivo con min-width:
     360 · 600 · 768 · 1024 · 1280 · 1920 · 2560 · 3840.
   - Todo en rem + clamp(): la raíz crece en Full HD, QHD y 4K
     («10-foot UI»), así el sitio entero escala en un televisor.
   - WCAG 2.2 AA: reflow a 320, foco visible fuerte, objetivos
     táctiles ≥ 44 px, hover solo con puntero fino, reduced-motion.
   - iOS/Android: viewport-fit=cover + env(safe-area-inset-*),
     dvh, inputs a 16 px, color-scheme only light.
   ============================================================= */

/* 0. Tipografía ----------------------------------------------- */
/* Nunito Sans alojada en el sitio (2026-10-15; antes, Google Fonts): fuente/tipografia/ORIGEN.md. Licencia SIL OFL 1.1
   en /assets/licencias/nunito-sans-OFL.txt. Dos familias para no empeorar los televisores viejos:
   · «Nunito Sans»: la variable (400–1000), solo donde existen las fuentes variables (@supports; Chromium 62+,
     Safari 11+, Firefox 62+). Es la que usan los navegadores actuales: un archivo para todos los grosores.
   · «Nunito Sans Fija»: un archivo por grosor (woff2, y woff donde no hay woff2), lo que Google servía a esos
     motores. Va segunda en --fuente: solo se descarga si «Nunito Sans» no existe. El 1000 cae al 900 (css_televisores).
   Solo latín y latín extendido, como antes. */
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/nunito-sans-400-latin.woff2") format("woff2"), url("../fuentes/nunito-sans-400.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/nunito-sans-400-latin-ext.woff2") format("woff2"), url("../fuentes/nunito-sans-400.woff") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fuentes/nunito-sans-600-latin.woff2") format("woff2"), url("../fuentes/nunito-sans-600.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fuentes/nunito-sans-600-latin-ext.woff2") format("woff2"), url("../fuentes/nunito-sans-600.woff") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fuentes/nunito-sans-700-latin.woff2") format("woff2"), url("../fuentes/nunito-sans-700.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fuentes/nunito-sans-700-latin-ext.woff2") format("woff2"), url("../fuentes/nunito-sans-700.woff") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fuentes/nunito-sans-800-latin.woff2") format("woff2"), url("../fuentes/nunito-sans-800.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fuentes/nunito-sans-800-latin-ext.woff2") format("woff2"), url("../fuentes/nunito-sans-800.woff") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fuentes/nunito-sans-900-latin.woff2") format("woff2"), url("../fuentes/nunito-sans-900.woff") format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans Fija"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fuentes/nunito-sans-900-latin-ext.woff2") format("woff2"), url("../fuentes/nunito-sans-900.woff") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@supports (font-variation-settings: normal) {
  @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 1000; font-display: swap; src: url("../fuentes/nunito-sans-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 1000; font-display: swap; src: url("../fuentes/nunito-sans-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
}

/* 1. Tokens ---------------------------------------------------- */
:root {
  --tinta: #17181c;
  --secundario: #55575e;
  --suave: #6b6d75;   /* 5,16:1 sobre blanco; antes #8a8c94, 3,35:1 (revisión del catálogo, 2026-10-22) */
  --acento: #ED0000;
  --acento-oscuro: #b50000;
  --fondo: #ffffff;
  --superficie: #f6f7f8;
  --superficie-alt: #fbfbfc;
  --borde: #e8e9ec;
  --borde-fuerte: #d9dade;
  --borde-interactivo: #8a8c94;   /* ≥ 3:1 sobre blanco (WCAG 1.4.11) */
  --foco: #2456E6;
  --banda: linear-gradient(90deg, #ED0000, #FF7A00, #FFD500, #7ACB2F, #00A9E0, #2456E6, #8E44D8);
  --fuente: 'Nunito Sans', 'Nunito Sans Fija', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Tipografía fluida (px aproximados a 320 → 1280; en TV crece con la raíz) */
  /* Pisos en celular: 12 / 13 / 14 px (ningún texto secundario baja de 12 px; el de lectura, de 14). */
  --t-2xs: 0.78rem; /* 12–13 rótulos */
  --t-xs: 0.84rem; /* 13–14 migas, leyendas, cejilla, pie legal */
  --t-sm: 0.9rem; /* 14–15 chips, tabla, notas */
  --t-base: 1rem;                                           /* 16 cuerpo */
  --t-md: 1.0625rem; /* 16–18 nombre de producto */
  --t-lg: 1.2rem; /* 17–21 bajadas */
  --t-xl: 1.4rem; /* 20–25 h3 tarjeta, h2 bloque */
  --t-2xl: 1.9rem; /* 26–36 h2 familia */
  --t-3xl: 2.25rem; /* 30–44 h2 sección */
  --t-4xl: 2.75rem; /* 34–56 h1 internas */
  --t-hero: 3.5rem; /* 40–76 h1 portada */
  --lh-titulo: 1.05;
  --lh-texto: 1.55;

  /* Espacios */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 2.5rem; --e-8: 3rem;
  --gap: 1.125rem; /* 12–24 entre tarjetas */
  --gutter: 1.5rem; /* 16–40 margen lateral */
  --seccion: 4.5rem; /* 56–96 alto de sección */
  --heroe-arriba: 5rem; /* 56–104 */
  --tarjeta-pad: 1.375rem; /* 16–28 */

  /* Radios y sombras */
  --r-sm: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.125rem; --r-2xl: 1.5rem; --r-pill: 999px;
  /* Botones «vidrio» (2026-10-14): brillo arriba (solo en el borde superior, para no bajar el contraste del texto) y
     sombra suave. */
  --vidrio-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45);
  --vidrio-sombra: 0 1px 2px rgba(23, 24, 28, 0.06), 0 6px 18px rgba(23, 24, 28, 0.08);
  --radio: var(--r-xl);
  --sombra-2: 0 10px 30px rgba(23, 24, 28, 0.07);

  /* Medidas */
  --medida: 60ch;                     /* 45–75 caracteres por línea (≈ 70 en Nunito Sans) */
  --medida-larga: 60ch;
  --ancho-max: 72.5rem;               /* 1160 @16 · 1404 @18 · 1638 @21 · 2184 @28 */
  --alto-fila: 3.75rem;               /* 60 en celular; 76 desde 768 */
  --alto-nav: calc(var(--alto-fila) + 4px);   /* + la muesca, abajo en @supports (televisores sin env()) */
  --alto-buscador: 3.3125rem;         /* fila pegajosa del buscador: 53 en celular, 65 desde 768 */
  --objetivo: 2.75rem;                /* 44 px: objetivo táctil */
  --marco-relleno: 8%;                /* aire del marco de imagen */
}
/* Navegadores con clamp(): tipografía y espacios fluidos. Los de televisor sin clamp() (Chromium < 79) se quedan con
   los valores fijos de arriba, el punto medio de cada rango (auditoría de UX, 2026-10-02). */
@supports (width: clamp(1rem, 2vw, 3rem)) {
  :root {
    --t-2xs: clamp(0.75rem, 0.73rem + 0.15vw, 0.8125rem);
    --t-xs:  clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
    --t-sm:  clamp(0.875rem, 0.84rem + 0.25vw, 0.9375rem);
    --t-md:  clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
    --t-lg:  clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
    --t-xl:  clamp(1.25rem, 1.1rem + 0.7vw, 1.5625rem);
    --t-2xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
    --t-3xl: clamp(1.875rem, 1.5rem + 2vw, 2.75rem);
    --t-4xl: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);
    --t-hero: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
    --gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    --seccion: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --heroe-arriba: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    --tarjeta-pad: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
  }
}

@supports (top: env(safe-area-inset-top)) { :root { --alto-nav: calc(var(--alto-fila) + 4px + env(safe-area-inset-top, 0px)); } }

/* Escala de raíz por clase de dispositivo (10-foot UI en TV) */
html { font-size: 100%; }
@media (min-width: 1920px) { html { font-size: 112.5%; } :root { --ancho-max: 78rem; } }
@media (min-width: 2560px) { html { font-size: 131.25%; } }
@media (min-width: 3840px) { html { font-size: 175%; } }
/* Televisores detectados (clase «tv» del script del <head>: user-agent de TV o puntero «none»; 2026-10-05). Ninguna media
   query distingue un TV de un monitor de 1920 px, así que el escritorio no cambia. En el TV la página se ve como la de
   1280 px ampliada 1,5x: cuerpo de 24 px a 1920 CSS px, legible a 2-3 m (guía de 10 pies). */
@media (min-width: 1920px) { html.tv { font-size: 150%; } html.tv:root { --ancho-max: 75rem; } }
@media (min-width: 2560px) { html.tv { font-size: 200%; } }
@media (min-width: 3840px) { html.tv { font-size: 300%; } }

/* 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc((3.75rem + 4px) + 1rem); scroll-padding-top: calc(var(--alto-nav) + 1rem);
  color-scheme: only light;
}
/* El desplazamiento a un ancla o a un foco descuenta la cabecera pegajosa SOLO aquí (scroll-padding del
   contenedor): un scroll-margin en los destinos se sumaría y dejaría el destino el doble de abajo.
   El catálogo ya no tiene barra pegajosa propia: vale el de arriba, 16 px bajo la cabecera (revisión del catálogo,
   2026-10-22: el alto de la barra que ya no existe dejaba la familia elegida 81-132 px más abajo). Allí, además, la
   llegada a un ancla y el foco con teclado van sin animación; los saltos cortos desde el mapa y «Subir» piden su
   desplazamiento suave en main.js. */
html.pagina-catalogo { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: #ffffff; background: var(--fondo);
  color: #17181c; color: var(--tinta);
  font-family: 'Nunito Sans', 'Nunito Sans Fija', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: var(--fuente);
  font-size: 1rem; font-size: var(--t-base);
  line-height: 1.55; line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { flex: 1 0 auto; }
.pie { margin-top: auto; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: #b50000; color: var(--acento-oscuro); text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
/* Motores sin :focus-visible (Chromium < 86: televisores hasta 2021-2022, con control remoto): el anillo fuerte va con
   :focus. Donde :focus-visible existe, :focus:not(:focus-visible) lo quita al hacer clic; los motores viejos descartan
   esa regla entera y conservan el anillo. Cada :focus-visible va en su propia regla, nunca en una lista con otros. */
:focus { outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: 0.1875rem; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: 0.1875rem; }
html.tv :focus { outline-width: 0.25rem; }
html.tv :focus-visible { outline-width: 0.25rem; }

/* 3. Utilidades ------------------------------------------------ */
.contenedor {
  width: 100%; max-width: 72.5rem; max-width: var(--ancho-max); margin-left: auto; margin-right: auto;
  padding-left: 1.5rem; padding-left: var(--gutter); padding-right: 1.5rem; padding-right: var(--gutter);
}
@supports (padding-left: max(1px, env(safe-area-inset-left, 0px))) {
  .contenedor { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: fixed; top: -100px; left: 1rem; left: max(1rem, env(safe-area-inset-left, 0px)); z-index: 100;
  background: #17181c; background: var(--tinta); color: #ffffff; padding: 0.625rem 1.125rem; border-radius: 0.5rem; border-radius: var(--r-sm); font-weight: 800;
}
.saltar:focus { top: 0.75rem; color: #ffffff; }
.cejilla {
  font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b50000; color: var(--acento-oscuro);
  margin: 0;
}

/* 4. Botones --------------------------------------------------- */
.boton, .boton-secundario {
  display: inline-flex; align-items: center; justify-content: center; grid-gap: 0.625rem; gap: 0.625rem;
  min-height: 3.125rem; padding: 0.5rem 1.875rem; border-radius: 999px; border-radius: var(--r-pill); border: 0;
  font-size: 1rem; font-size: var(--t-base); font-weight: 800; text-align: center; line-height: 1.2;
}
.boton { background: #ED0000; background: var(--acento); color: #ffffff; }
.boton-secundario { border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); }
.boton svg, .boton-secundario svg { flex: none; }
.boton:focus, .pie :focus, .filtro[aria-current="true"]:focus, .subir:focus { outline-color: #ffffff; box-shadow: 0 0 0 0.375rem #2456E6; box-shadow: 0 0 0 0.375rem var(--foco); }
.boton:focus:not(:focus-visible), .pie :focus:not(:focus-visible), .filtro[aria-current="true"]:focus:not(:focus-visible) { box-shadow: none; }
.subir:focus:not(:focus-visible) { box-shadow: 0 0 0 2px #ffffff, 0 6px 20px rgba(23, 24, 28, 0.25); }
.boton:focus-visible, .pie :focus-visible, .filtro[aria-current="true"]:focus-visible, .subir:focus-visible {
  outline-color: #ffffff; box-shadow: 0 0 0 0.375rem #2456E6; box-shadow: 0 0 0 0.375rem var(--foco);
}

/* 5. Navegación ------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 50; background: #ffffff; background: var(--fondo); padding-top: env(safe-area-inset-top, 0px); }
.nav-fila { display: flex; align-items: center; justify-content: space-between; height: 3.75rem; height: var(--alto-fila); grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); }
.marca { display: flex; align-items: center; grid-gap: 0.75rem; gap: 0.75rem; min-height: 2.75rem; min-height: var(--objetivo); color: #17181c; color: var(--tinta); }
.marca img { height: 2.625rem; width: auto; }
.marca-sep { width: 1px; height: 1.625rem; background: #d9dade; background: var(--borde-fuerte); }
.marca-texto { display: flex; flex-direction: column; }
.marca-nombre { font-size: 0.875rem; font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.marca-rol { display: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #55575e; color: var(--secundario); margin-top: 0.1875rem; }
.nav-enlaces { display: none; align-items: center; }
.nav-enlaces > * + * { margin-left: 1.5rem; margin-left: clamp(1rem, 2vw, 1.75rem); }   /* márgenes y no gap: televisores */
.nav-enlaces a { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); color: #17181c; color: var(--tinta); font-size: 0.9375rem; font-weight: 700; }
.nav-enlaces a[aria-current="page"] { color: #b50000; color: var(--acento-oscuro); }
.nav-enlaces .boton { min-height: 2.875rem; padding: 0.5rem 1.5rem; font-size: 0.9375rem; color: #ffffff; }
.nav-menu-boton {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem; border: 0; background: none; color: #17181c; color: var(--tinta); border-radius: 0.5rem; border-radius: var(--r-sm);
}
.js .nav-menu-boton { display: inline-flex; }
/* Al pulsar, la hamburguesa y el play rojo del video se hunden un poco, como todo lo que se pulsa (revisión de la portada,
   2026-10-22); la hamburguesa, sin el resaltado azul de Android. */
.nav-menu-boton { -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); -webkit-tap-highlight-color: transparent; }
.nav-menu-boton:active, .video-centro:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.video-centro:active { transition-duration: 0.16s; }
@media (prefers-reduced-motion: reduce) { .nav-menu-boton:active, .video-centro:active { -webkit-transform: none; transform: none; } }
.nav-panel {
  display: none; flex-direction: column; grid-gap: 2px; gap: 2px;
  padding: 0.25rem 1.5rem 1.5rem; padding: var(--e-1) var(--gutter) var(--e-5);
  background: #ffffff; background: var(--fondo); border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde);
  max-height: calc(100vh - (3.75rem + 4px)); max-height: calc(100vh - var(--alto-nav)); max-height: calc(100dvh - (3.75rem + 4px)); max-height: calc(100dvh - var(--alto-nav));
  overflow-y: auto; overscroll-behavior: contain;
}
@supports (padding-left: max(1px, env(safe-area-inset-left, 0px))) {
  .nav-panel { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
}
.nav-panel a { display: flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); color: #17181c; color: var(--tinta); font-size: 1.0625rem; font-size: var(--t-md); font-weight: 700; padding: 0.375rem 0; }
.nav-panel .boton { margin-top: 0.5rem; margin-top: var(--e-2); color: #ffffff; justify-content: center; }
.js .nav-panel.abierto, html:not(.js) .nav-panel { display: flex; }
/* Sin JS el menú queda desplegado: la cabecera deja de ser fija para no tapar la página. */
html:not(.js) .nav { position: static; }
html:not(.js) .herramientas { top: 0; }
html:not(.js) .filtros-barra { top: 3.3125rem; top: var(--alto-buscador); }
.banda { height: 4px; background: linear-gradient(90deg, #ED0000, #FF7A00, #FFD500, #7ACB2F, #00A9E0, #2456E6, #8E44D8); background: var(--banda); }

/* 6. Héroe ----------------------------------------------------- */
.heroe { padding: 5rem 0 3rem; padding: var(--heroe-arriba) 0 var(--e-8); text-align: center; }
.heroe h1 {
  font-size: 3.5rem; font-size: var(--t-hero); font-weight: 900; font-weight: 1000; letter-spacing: -0.025em; line-height: 1.05; line-height: var(--lh-titulo);
  max-width: 61.25rem; margin: 1.375rem auto 0;
}
.bajada { font-size: 1.2rem; font-size: var(--t-lg); line-height: 1.55; line-height: var(--lh-texto); color: #55575e; color: var(--secundario); }
.heroe .bajada { max-width: 60ch; max-width: var(--medida-larga); margin: 1.5rem auto 0; margin: var(--e-5) auto 0; }
.acciones { display: flex; justify-content: center; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); margin-top: 2.5rem; margin-top: var(--e-7); flex-wrap: wrap; }
/* Celular: los dos botones del héroe, apilados, con el mismo ancho, como «Ver el catálogo completo» (2026-10-05). Solo donde
   ya van uno sobre otro. */
@media (max-width: 449.98px) { .heroe .acciones > a, .seccion-accion > a { width: 100%; max-width: 16rem; } }
/* PC (pedido del usuario, 2026-10-15): sin «Habla con un asesor» en el héroe, porque desde 1024 px el mismo botón está
   siempre a la mano en la barra fija de arriba; «Ver el portafolio» queda solo (desde el 2026-10-22, bajo la bajada: ver
   «Botones arriba en PC y tele»). Celular y tableta, igual. */
@media (min-width: 1024px) { .heroe .acciones .boton { display: none; } }
/* «Nosotros» en la portada (pedido del usuario, 2026-09-29): 3 puntos numerados entre la bajada y los botones (desde el
   2026-10-22, en PC y tele los botones van antes, bajo la bajada).
   Todo centrado y en el mismo orden (número, título, texto) en todos los tamaños; uno debajo del otro en
   celular (compacto) y en 3 columnas desde 768 px. */
.heroe-pasos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); max-width: 60rem; margin: 2.5rem auto 0; margin: var(--e-7) auto 0; padding: 1.5rem 0; padding: var(--e-5) 0; border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); }
.heroe-paso { display: flex; flex-direction: column; align-items: center; grid-gap: 0.2rem; gap: 0.2rem; text-align: center; }
.heroe-paso .paso-numero { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #b50000; background: var(--acento-oscuro); color: #fff; font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; line-height: 1; margin: 0 0 0.3rem; }
.heroe-paso h3 { font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; margin: 0; }
.heroe-paso p:not(.paso-numero) { font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.45; color: #55575e; color: var(--secundario); margin: 0 auto; max-width: 28ch; }
.paso-corto { display: none; }   /* solo en celular (bloque de abajo) */
@media (min-width: 45em) { .heroe-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 2rem; gap: 2rem; grid-gap: var(--e-6); gap: var(--e-6); } }   /* 720 px: iPad mini */
/* Celular (2026-10-14, pedido del usuario: en vertical «ocupa demasiado espacio para el valor que aporta»): los tres pasos en
   una fila, 1 2 3 de izquierda a derecha, compactos: número pequeño y título en dos renglones. Debajo, desde el 2026-10-15
   (pedido del usuario), una frase corta: «Francia → Ecuador», «Comercial y logística» y «Análisis de aceite» (.paso-corto;
   la frase larga de PC se oculta donde hay corta). */
@media (max-width: 44.99em) {
  .heroe-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 0.5rem; gap: 0.5rem; margin-top: 2rem; margin-top: var(--e-6); padding: 0.875rem 0; }
  .heroe-paso { grid-gap: 0.125rem; gap: 0.125rem; }
  .heroe-paso .paso-numero { width: 1.625rem; height: 1.625rem; font-size: 0.8125rem; margin-bottom: 0.2rem; }
  .heroe-paso h3 { font-size: 0.8125rem; line-height: 1.2; }
  .heroe-paso.con-corto p:not(.paso-numero):not(.paso-corto) { display: none; }
  .heroe-paso .paso-corto { display: block; }
  .heroe-paso p:not(.paso-numero) { max-width: none; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1.3; }
  /* Inicio tipo app (pedido del usuario, 2026-10-15: «solo es el inicio como que estorba»): sin la frase «Somos
     Oilsuper… operación.» (el 1-2-3 sube bajo el título) y sin la foto de los envases. Video y botones, igual. */
  .heroe .bajada, .heroe-envases { display: none; }
  /* «LUBRICANTES TOTALENERGIES EN ECUADOR» en una línea también a 360-390 px (antes 2): letras algo más juntas en el
     héroe del celular, que queda 20 px más corto (revisión de la portada, punto 25, 2026-10-22). */
  .heroe .cejilla { letter-spacing: 0.06em; }
}
/* Hasta 428 px los títulos de los pasos van siempre en dos renglones (una palabra por renglón), y las frases cortas de
   abajo quedan a la misma altura (revisión de la portada, 2026-10-22: con «Servicio posventa», más corto que «Postventa»,
   el paso 3 cabía en un renglón a 384-399 px, los iPhone de 390 y 393, y su frase subía 16 px; a 400-427 ya pasaba). Sin
   min-content, como antes. */
@media (max-width: 427.98px) { .heroe-paso h3 { width: min-content; max-width: 100%; overflow-wrap: break-word; } }
/* Envases reales en el héroe (pedido del usuario, 2026-09-30). En el HTML van al final, después de los botones del
   celular; desde 768 px (tableta vertical, 2026-10-05) la grilla los coloca a la derecha del título: en la tableta vertical
   los pasos, el video y los botones siguen centrados abajo; en PC y tele (desde el 2026-10-22) los botones van bajo la
   bajada y abajo quedan los pasos y el video. */
.heroe-envases { margin: 2.5rem auto 0; margin: var(--e-7) auto 0; max-width: 30rem; }
.heroe-envases img { display: block; width: 100%; height: auto; }
/* El JPG (1200 × 720) trae blanco arriba: los envases ocupan las filas 206-687. Se recorta solo ese blanco (2026-10-05):
   en el celular los envases ya no flotan bajo «Ver el portafolio», y desde 768 px quedan centrados con el texto. Sin
   aspect-ratio (televisores viejos) se ve la foto entera, como antes. Si cambia la foto, recalcular la proporción. */
.heroe-envases img { aspect-ratio: 1200 / 560; object-fit: cover; object-position: 50% 100%; }
@media (max-width: 767.98px) { .heroe { padding-bottom: 2rem; padding-bottom: var(--e-6); } }
/* Video de la portada (pedido del usuario, 2026-10-01): entre los pasos 1-2-3 y los botones, al ancho de los pasos (en PC
   y tele, desde el 2026-10-22, después de los pasos y con los botones arriba). */
.heroe-video { width: 100%; max-width: 51.25rem; margin: 2.5rem auto 0; margin: var(--e-7) auto 0; }   /* 51,25 rem = ancho que toman los pasos 1-2-3 */
.heroe-video video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 804; object-fit: cover; object-position: 50% 50%; border-radius: 1rem; border-radius: var(--r-lg); background: #000; }
/* El MP4 trae franjas negras grabadas (contenido 1920 × 804 dentro de 1920 × 1080): la caja toma la proporción real y
   «cover» recorta solo el negro. Desde el 2026-10-05 en PC; desde el 2026-10-15 en todos los anchos (pedido del usuario:
   en el celular y el televisor se veían «bandas de cine»). Sin aspect-ratio, el respaldo de más abajo (@supports not).
   En pantalla completa se ve el cuadro entero: reglas separadas, por si un motor no conoce uno de los dos. */
.heroe-video video:-webkit-full-screen { object-fit: contain; }
.heroe-video video:fullscreen { object-fit: contain; }
/* Reproductor al estilo de YouTube (main.js, initVideo; pedido del usuario, 2026-10-14: en el celular el botón del centro
   se quedaba encima del video y no dejaba ampliarlo). Antes de empezar, solo el botón rojo del centro; reproduciendo, se
   va y abajo quedan los controles, que aparecen al mover el ratón o al tocar y se esconden solos. Nada depende de :hover
   (en el celular el toque lo deja «pegado»). Sin JavaScript, los controles del navegador. */
.heroe-video { position: relative; }
/* Líneas negras abajo y a la derecha (2026-10-14): con la pantalla escalada (125 %, 150 %) la caja mide fracciones de
   píxel y el cuadro del video se dibuja redondeado hacia abajo; asomaba el fondo negro. El video se dibuja 1 px más grande
   por cada lado y la caja recorta (redondeada, como el video). */
.heroe-video { overflow: hidden; border-radius: 1rem; border-radius: var(--r-lg); }
.heroe-video video { width: calc(100% + 2px); max-width: none; margin: -1px; }
/* Portada fija (main.js, initVideo; 2026-10-14): mientras no se está viendo, una imagen normal en lugar del video, con
   la misma caja y el mismo recorte; el video sale del dibujo (display: none) y en el televisor no deja el bloque negro al
   desplazar la página. Sin JavaScript no existe y queda el video con su póster. */
.video-portada { display: none; }
.heroe-video.en-espera .video-portada { display: block; width: calc(100% + 2px); max-width: none; height: auto; margin: -1px;
  aspect-ratio: 1920 / 804; object-fit: cover; object-position: 50% 50%; }
.heroe-video.en-espera video, .heroe-video.en-espera .video-barra { display: none; }
/* Terminado: queda la imagen del cierre (blanco con el logotipo) sin el botón rojo; un clic o toque lo vuelve a ver. */
.heroe-video.terminado .video-centro { opacity: 0; }
.heroe-video.terminado .video-centro:focus-visible { opacity: 1; }   /* con teclado o control remoto sí aparece, para volver a verlo */
.video-capa { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: 1rem; border-radius: var(--r-lg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.heroe-video.reproduciendo:not(.controles) .video-capa { cursor: none; }
/* Botón del centro: círculo rojo con ícono blanco centrado con posición absoluta (en los televisores viejos flex o grid
   dentro de un botón pueden fallar). */
.video-centro { position: absolute; z-index: 3; left: 50%; top: 50%; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; padding: 0;   /* más pequeño (2026-10-14, pedido del usuario: «muy grande») */
  border: 0; border-radius: 50%; background: #ED0000; background: #ED0000; background: var(--acento); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.25s; }
.video-centro svg { position: absolute; left: 50%; top: 50%; width: 1.625rem; height: 1.625rem; margin: -0.8125rem 0 0 -0.72rem; fill: #ffffff; }
.heroe-video.reproduciendo .video-centro { opacity: 0; transform: scale(0.85); visibility: hidden; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .video-centro:hover { background: #c40000; } }
/* Vidrio (2026-10-14, pedido del usuario: «muy mate… hazlo más glass, más sutil»): rojo translúcido que deja ver y
   desenfoca la imagen de atrás, con borde fino claro y brillo arriba, como el resto de los botones. Sin backdrop-filter
   (televisores viejos) queda el rojo translúcido. */
.video-centro { background: rgba(237, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1.25rem 1.25rem -1.125rem rgba(255, 255, 255, 0.4), 0 6px 22px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
@media (hover: hover) and (pointer: fine) { .video-centro:hover { background: rgba(237, 0, 0, 0.68); } }
.video-centro svg { -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.video-centro:focus { outline: none; }
.video-centro:focus-visible { outline: 0.1875rem solid transparent; box-shadow: 0 0 0 0.1875rem #ffffff, 0 0 0 0.625rem #2456E6, 0 2px 12px rgba(0, 0, 0, 0.35); }
/* Barra de abajo: avance a lo ancho y una fila de botones blancos sobre un degradado oscuro para que se lean. */
.video-barra { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.5rem 0.75rem 0.25rem; border-radius: 0 0 1rem 1rem; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); opacity: 0; visibility: hidden; transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.25s; }
.heroe-video.iniciado.controles .video-barra { opacity: 1; visibility: visible; }   /* en pausa también, solo con el ratón encima o tras un toque */
.video-fila { display: flex; align-items: center; }
.video-hueco { flex: 1; }
.video-boton { flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 0.75rem; border-radius: var(--r-md); background: transparent; color: #ffffff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.video-boton svg { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto; fill: currentColor; }
.video-boton:focus { outline: none; }
.video-boton:focus-visible { outline: 0.125rem solid #ffffff; outline-offset: -0.25rem; }
.video-tiempo { margin-left: 0.5rem; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Avance: línea fina roja sobre gris claro (main.js pinta el degradado); el punto se ve como en YouTube. Zona de toque alta. */
.video-avance { display: block; width: 100%; height: 1.5rem; margin: 0; padding: 0; background: rgba(255, 255, 255, 0.35); background-clip: content-box;
  -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; border-top: 0.6875rem solid transparent; border-bottom: 0.6875rem solid transparent; box-sizing: border-box; }
.video-avance:focus { outline: none; }
.video-avance:focus-visible { outline: 0.125rem solid #ffffff; outline-offset: 0.5rem; }
/* Al reproducir con el teclado o el control, el foco pasa a la caja (main.js) y lleva el anillo general de :focus-visible
   (verificación de la portada, 2026-10-22: sin él, con teclado no se veía dónde estaba el foco). En la tele, al volver de
   pantalla completa, sin anillo los 260 ms que tarda el foco en volver al botón rojo. */
.heroe-video.en-espera:focus { outline: none; }
/* Televisores sin :focus-visible (Chromium < 86): los mismos anillos con :focus (revisión de la portada, 2026-10-22); sin
   esto, el play del video, la primera parada después del menú, no mostraba el foco. */
html.tv .video-centro:focus { box-shadow: 0 0 0 0.1875rem #ffffff, 0 0 0 0.625rem #2456E6, 0 2px 12px rgba(0, 0, 0, 0.35); }
html.tv .heroe-video.terminado .video-centro:focus { opacity: 1; }
html.tv .video-boton:focus { outline: 0.125rem solid #ffffff; outline-offset: -0.25rem; }
html.tv .video-avance:focus { outline: 0.125rem solid #ffffff; outline-offset: 0.5rem; }
.video-avance::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0.875rem; height: 0.875rem; border: 0; border-radius: 50%; background: #ED0000; }
.video-avance::-moz-range-thumb { width: 0.875rem; height: 0.875rem; border: 0; border-radius: 50%; background: #ED0000; }
.video-avance::-moz-range-track { background: transparent; }
/* Con el dedo, la barra de avance tiene 44 px de zona de toque (antes 24, junto a botones de 44): la línea visible sigue
   de 2 px y sube dentro del relleno de la barra, sin quitarle alto al video (revisión de la portada, punto 28, 2026-10-22). */
@media (pointer: coarse) { .video-avance { height: 2.75rem; border-top-width: 1.3125rem; border-bottom-width: 1.3125rem; margin-top: -1.25rem; } }
/* Pantalla completa de la caja: el video entero (sin el recorte de las franjas) y los controles encima. */
.heroe-video.pantalla-completa { max-width: none; width: 100%; height: 100%; margin: 0; background: #000; }
.heroe-video.pantalla-completa { border-radius: 0; }
.heroe-video.pantalla-completa video { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.heroe-video.pantalla-completa .video-capa, .heroe-video.pantalla-completa .video-barra { border-radius: 0; }
/* Respaldo sin aspect-ratio (Chromium < 88: televisores de antes de 2021). La proporción la da un relleno en ::before (el %
   se mide sobre el ancho de la propia caja) y el video y la portada la llenan con «cover», 1 px de más por lado como
   arriba. En pantalla completa no hay relleno y se ve el cuadro entero. */
@supports not (aspect-ratio: 1 / 1) {
  .heroe-video::before { content: ""; display: block; padding-top: 41.875%; }   /* 804 / 1920 */
  .heroe-video video, .heroe-video.en-espera .video-portada { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; }
  .heroe-video.pantalla-completa::before { display: none; }
  .heroe-video.pantalla-completa video { top: 0; left: 0; width: 100%; height: 100%; }
}
@media (max-width: 479.98px) {
  .video-centro { width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; }
  .video-centro svg { width: 1.375rem; height: 1.375rem; margin: -0.6875rem 0 0 -0.61rem; }
  .video-barra { padding: 1.75rem 0.375rem 0; }
  .video-tiempo { font-size: 0.84rem; font-size: var(--t-xs); margin-left: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) { .video-centro, .video-barra { transition: none; } }
@media (min-width: 768px) {
  .heroe > .contenedor {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-column-gap: 2rem; column-gap: 2rem; grid-column-gap: var(--e-6); column-gap: var(--e-6); align-items: center;
    grid-template-areas: "cejilla figura" "titulo figura" "bajada figura" "pasos pasos" "video video" "acciones acciones";
  }
  .heroe > .contenedor > .cejilla { grid-area: cejilla; align-self: end; text-align: left; }
  /* Un poco más chico que en el héroe centrado: en su columna ocupa 3 líneas y los botones suben (antes, 4 líneas). */
  .heroe h1 { grid-area: titulo; margin: 1.375rem 0 0; max-width: none; text-align: left; font-size: 2.75rem; font-size: clamp(2.5rem, 1rem + 3.4vw, 3.75rem); }
  .heroe .bajada { grid-area: bajada; margin: 1.5rem 0 0; margin: var(--e-5) 0 0; align-self: start; text-align: left; }
  .heroe-pasos { grid-area: pasos; }
  .heroe-video { grid-area: video; }
  .heroe .acciones { grid-area: acciones; }
  .heroe-envases { grid-area: figura; margin: 0; max-width: none; }
}
@media (min-width: 1024px) {
  .heroe > .contenedor { grid-column-gap: 3rem; column-gap: 3rem; grid-column-gap: var(--e-8); column-gap: var(--e-8); }
  .heroe h1 { font-size: 3.75rem; font-size: clamp(2.75rem, 1rem + 3.4vw, 3.75rem); }
}
/* Botones arriba en PC y tele (2026-10-22, pedido del usuario: «súbelo en PC y tele»): «Ver el portafolio» va bajo la
   bajada, en la columna del título, y se ve sin desplazar (a 1440 × 900 estaba en y = 1169, bajo el video); los pasos 1-2-3
   y el video siguen abajo, a todo el ancho. PC: desde 1024 px, o una ventana de escritorio (con mouse) desde 900; tele:
   html.tv desde 768, o una pantalla ancha y baja sin puntero que flote (la tele que el script del <head> no reconoce; las
   de 500 px de alto o menos son celulares apaisados). La tableta vertical y el celular, como antes.
   Dos copias de los botones en el HTML (generar.py): «acciones-arriba» (bajo la bajada) y «acciones-abajo» (después del
   video); cada pantalla muestra una sola, así el foco y el lector siguen el orden en que se ven. Sin grid (televisores
   viejos) el héroe va en una columna centrada y, en la tele, con la copia de arriba. La regla de PC tiene la misma
   especificidad que la general de 768 px: debe ir después de ella. Sin gap en flex, el primer botón sin margen a la
   izquierda (alineado con el texto). */
.heroe .acciones-arriba { display: none; }
@media (min-width: 1024px), (min-width: 900px) and (hover: hover) and (pointer: fine), (min-width: 900px) and (min-height: 501px) and (max-height: 600px) and (hover: none) {
  .heroe .acciones-arriba { display: flex; }
  .heroe .acciones-abajo { display: none; }
}
@media (min-width: 768px) {
  html.tv .heroe .acciones-arriba { display: flex; }
  html.tv .heroe .acciones-abajo { display: none; }
}
@supports (display: grid) {
  @media (min-width: 1024px), (min-width: 900px) and (hover: hover) and (pointer: fine), (min-width: 900px) and (min-height: 501px) and (max-height: 600px) and (hover: none) {
    .heroe > .contenedor { grid-template-areas: "cejilla figura" "titulo figura" "bajada figura" "acciones figura" "pasos pasos" "video video"; }
    .heroe .acciones { -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: 2rem; margin-top: var(--e-6); align-self: start; }
    .sin-gap-flex .heroe .acciones > * { margin-left: 0; margin-right: 1rem; }
  }
  @media (min-width: 768px) {
    html.tv .heroe > .contenedor { grid-template-areas: "cejilla figura" "titulo figura" "bajada figura" "acciones figura" "pasos pasos" "video video"; }
    html.tv .heroe .acciones { -webkit-justify-content: flex-start; justify-content: flex-start; margin-top: 2rem; margin-top: var(--e-6); align-self: start; }
    html.tv.sin-gap-flex .heroe .acciones > * { margin-left: 0; margin-right: 1rem; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .heroe > .contenedor > * { opacity: 0; transform: translateY(14px); animation: subir 0.45s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
  /* Cascada en el orden en que se ven (por clase, no por posición en el HTML: desde el 2026-10-22 los botones van en el
     HTML después de la bajada, pero en el celular y la tableta se ven al final). En PC y tele, el bloque de más abajo. */
  .heroe > .contenedor > h1 { animation-delay: 0.05s; }
  .heroe > .contenedor > .bajada { animation-delay: 0.1s; }
  .heroe > .contenedor > .heroe-pasos { animation-delay: 0.15s; }
  .heroe > .contenedor > .heroe-video { animation-delay: 0.2s; }
  .heroe > .contenedor > .acciones { animation-delay: 0.25s; }
  .heroe > .contenedor > .heroe-envases { animation-delay: 0.3s; }
  /* Desde 768 px la foto de envases va arriba a la derecha: entra junto a la bajada, no la última (revisión de la portada,
     2026-10-22: la vista saltaba hacia atrás). */
  @media (min-width: 768px) { .heroe > .contenedor > .heroe-envases { animation-delay: 0.1s; } }
  /* PC y tele (2026-10-22): los botones, bajo la bajada, entran antes que los pasos y el video. Va aquí, después de la
     cascada general, para ganarle con la misma especificidad. */
  @media (min-width: 1024px), (min-width: 900px) and (hover: hover) and (pointer: fine), (min-width: 900px) and (min-height: 501px) and (max-height: 600px) and (hover: none) {
    .heroe > .contenedor > .acciones { animation-delay: 0.15s; }
    .heroe > .contenedor > .heroe-pasos { animation-delay: 0.2s; }
    .heroe > .contenedor > .heroe-video { animation-delay: 0.25s; }
  }
  @media (min-width: 768px) {
    html.tv .heroe > .contenedor > .acciones { animation-delay: 0.15s; }
    html.tv .heroe > .contenedor > .heroe-pasos { animation-delay: 0.2s; }
    html.tv .heroe > .contenedor > .heroe-video { animation-delay: 0.25s; }
  }
  @keyframes subir { to { opacity: 1; transform: none; } }
  /* Solo se ocultan si el JS está activo (clase .js en <html>); sin JS todo se ve. */
  .js .revelar { opacity: 0; transform: translateY(14px); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
  .js .revelar.visible { opacity: 1; transform: none; }
  /* Las tarjetas que aparecen así conservan la transición de 1 s de su contorno de color (.linea). */
  .js .linea.revelar { transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 1s ease, box-shadow 1s ease; }
  /* Destino de un ancla (#sector-<ancla>): visible ya, sin el desplazamiento de 14 px; si no, el salto se calculaba con
     la caja desplazada y la tarjeta terminaba pegada bajo la cabecera, con el contorno de :target tapado. */
  .js .revelar:target { opacity: 1; transform: none; transition: none; }
}

/* 7. Dos caminos ----------------------------------------------- */
/* Tarjetas de inicio y portafolio más juntos (2026-09-29): antes se sumaban dos márgenes de sección (192 px
   en escritorio); ahora queda un solo espacio moderado entre ambos bloques. */
.caminos { padding: 1.5rem 0 0; padding: var(--e-5) 0 0; }
.caminos + .seccion { padding-top: 4.5rem; padding-top: clamp(3.5rem, 2rem + 2.5vw, 4.5rem); }   /* piso de 3,5 rem (2026-10-05): sin el margen que sumaba la cejilla, el celular conserva unos 56 px */
.caminos-grilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.125rem; gap: 1.125rem; grid-gap: var(--gap); gap: var(--gap); }
/* Tarjetas de entrada con foto (2026-10-12, propuesta «B» aprobada por el usuario en el lienzo de diseño): arriba una foto
   de TotalEnergies con el título encima; en «Industria» rota cada 6 s entre las fotos de sus sectores con un fundido suave
   (main.js, initRotadorIndustria) y debajo van los sectores como botones con el contorno y un tono muy suave de su color;
   en «Automotriz», «Negocios» (tres botones translúcidos, estilo iPhone, «Concesionarios» al centro), «Tu vehículo» (los
   logotipos Quartz, Hi-Perf y Rubia) y el botón de la Lubriguía. Sin gap en los contenedores flex (márgenes): los
   televisores viejos no lo tienen. */
.camino { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.5rem; background: #ffffff; background: var(--fondo); }
.camino-foto { position: relative; height: 12.5rem; overflow: hidden; background: #17181c; background: var(--tinta); }
.camino-foto .camino-foto-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease-in-out, transform 7s ease-out; }
.camino-foto .camino-foto-img.activa { opacity: 1; transform: scale(1.06); }
.camino-foto::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 15, 18, 0) 35%, rgba(14, 15, 18, 0.85) 100%); }
.camino-foto h2 { position: absolute; z-index: 2; left: 2rem; bottom: 1.375rem; margin: 0; font-size: 1.9rem; font-size: var(--t-2xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.02em; line-height: 1.1; color: #ffffff; }
/* Sector que se ve en la foto: etiqueta translúcida arriba a la derecha; abajo, junto al título, solo desde 1280 px (antes chocaba). */
.camino-foto-sector { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: flex; align-items: center; max-width: calc(100% - 2rem); min-height: 2rem; padding: 0 0.875rem;
  border-radius: 999px; border-radius: var(--r-pill); background: rgba(23, 24, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);   /* vidrio oscuro: con 18 % de blanco el rótulo daba ~2:1 sobre las fotos claras (2026-10-22) */
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); color: #ffffff; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; white-space: nowrap; }
.camino-foto-sector .camino-punto { margin-right: 0.5rem; }
/* La etiqueta se desvanece y vuelve con el nombre nuevo: 0,8 s de salida y 0,8 de entrada, lo mismo que dura el fundido de la foto. */
.camino-foto-sector { transition: opacity 0.8s ease-in-out; }
.camino-foto-sector.cambiando { opacity: 0; }
@media (min-width: 1280px) { .camino-foto-sector { top: auto; bottom: 1.625rem; right: 1.5rem; } }
/* «Automotriz»: el logotipo de la línea de la foto (Quartz, Rubia, Hi-Perf) en una cápsula de vidrio, como la etiqueta de
   «Industria», abajo a la derecha (2026-10-14: la pestaña blanca no le gustó al usuario; la foto del rally se recortó para
   quitar la pestaña de TotalEnergies que traía). Con los RoboQuartz, sin cápsula. Cambia con un fundido. */
.camino-foto-marca { position: absolute; z-index: 2; right: 1rem; bottom: 1.25rem; display: flex; align-items: center; justify-content: center;
  height: 2.25rem; padding: 0 0.875rem; border-radius: 999px; border-radius: var(--r-pill);
  background: rgba(23, 24, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);   /* como el rótulo del sector (2026-10-22) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); transition: opacity 0.8s ease-in-out; }
.camino-foto-marca img { display: block; width: auto; height: 1.375rem; max-width: 7rem; }
.camino-foto-marca.cambiando, .camino-foto-marca.vacio { opacity: 0; }
@media (min-width: 1280px) { .camino-foto-marca { right: 1.5rem; bottom: 1.625rem; } }
@media (max-width: 599.98px) { .camino-foto-marca { right: 0.75rem; bottom: 1rem; height: 2rem; padding: 0 0.75rem; } .camino-foto-marca img { height: 1.125rem; } }
/* Los dos rótulos sobre las fotos llevan vidrio oscuro (revisión de la portada, 2026-10-22): con el 18 % de blanco de antes
   el blanco del texto daba 2,1-4,3:1 sobre las fotos (también con desenfoque); con 55 % de oscuro, 5,3:1 o más en todos
   los tamaños. Sin desenfoque (televisores hasta 2019-2020) queda el mismo oscuro, sin blur. */
/* Logotipo de «Tu vehículo» cuya foto se está viendo: un poco más arriba. */
.camino-sellos-vehiculo a.activo { transform: translateY(-2px); }
.camino-punto { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #ED0000; background: var(--acento); background: var(--color-punto, var(--acento)); }
.camino-cuerpo { flex: 1; display: flex; flex-direction: column; padding: 1.625rem 2rem 1.5rem; }
/* Industria: un botón por sector; una columna en tarjetas angostas, dos donde la tarjeta es ancha. Se reparten a lo alto. */
.camino-sectores { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-evenly; grid-gap: 0.875rem 1rem; grid-gap: 0.875rem 1rem; gap: 0.875rem 1rem; }
.camino-sectores a { display: flex; align-items: center; min-height: 3.25rem; padding: 0.5rem 1.125rem; border-radius: 1rem;
  border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-color: rgba(23, 24, 28, 0.12); background: #fbfbfc; background: var(--superficie-alt);
  font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; line-height: 1.25; color: #17181c; color: var(--tinta); text-decoration: none;
  transition: background 1.6s ease-in-out, border-color 1.6s ease-in-out, box-shadow 1.6s ease-in-out; }   /* el mismo tiempo y curva que el fundido de la foto (pedido del usuario, 2026-10-14) */
.camino-sectores .camino-punto { margin-right: 0.75rem; }
/* Reposo neutro y activo bien marcado (2026-10-14, pedido del usuario: en Energía el tono activo era casi imperceptible):
   en reposo los seis van en gris claro, sin tinte; el activo (o el que tiene el ratón) se llena con un degradado suave de
   su color («como la luz a través de un vidrio»), borde al 55 % y halo discreto. */
/* El degradado va en una capa (::before) cuya opacidad sí se anima: un degradado no se funde con un color plano y el
   cambio saltaba (2026-10-14). Así el botón activo se apaga mientras el siguiente se enciende, al ritmo de la foto. */
.camino-sectores a { position: relative; z-index: 0; }
.camino-sectores a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: rgba(var(--rgb-sector), 0.14);
  background: linear-gradient(160deg, rgba(var(--rgb-sector), 0.05) 0%, rgba(var(--rgb-sector), 0.2) 60%, rgba(var(--rgb-sector), 0.14) 100%);   /* luz a través de un vidrio */
  transition: opacity 1.6s ease-in-out; }
.camino-sectores a.activo { border-color: #d9dade; border-color: var(--borde-fuerte); border-color: rgba(var(--rgb-sector), 0.55);
  box-shadow: 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: 0 6px 18px rgba(var(--rgb-sector), 0.2); }
.camino-sectores a.activo::before { opacity: 1; }
/* Al pasar el ratón responde rápido. Solo con puntero que flota y en el televisor (revisión de la portada, 2026-10-22): en
   el celular el toque dejaba el resaltado «pegado» mientras el rotador encendía otro sector. Al tocar, responde .activo. */
@media (hover: hover) and (pointer: fine) {
  .camino-sectores a:hover { border-color: rgba(var(--rgb-sector), 0.55); color: #17181c; color: var(--tinta); text-decoration: none; transition-duration: 0.3s, 0.3s, 0.3s, 0.16s, 0.16s; }
  .camino-sectores a:hover::before { opacity: 1; transition-duration: 0.3s; }
}
html.tv .camino-sectores a:hover { border-color: rgba(var(--rgb-sector), 0.55); color: #17181c; color: var(--tinta); text-decoration: none; transition-duration: 0.3s, 0.3s, 0.3s, 0.16s, 0.16s; }
html.tv .camino-sectores a:hover::before { opacity: 1; transition-duration: 0.3s; }
@media (min-width: 600px) and (max-width: 719.98px), (min-width: 1280px) { .camino-sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.camino-otro { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; min-height: var(--objetivo); margin-top: 0.5rem; font-weight: 900; color: #b50000; color: var(--acento-oscuro); text-decoration: none; }
/* Automotriz: «Negocios» centrado en el espacio libre; «Tu vehículo» y sus logotipos abajo, junto al botón de la Lubriguía. */
.camino-grupo-negocios { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.camino-grupo-vehiculo { margin: 1.25rem 0 0.375rem; }
.camino h3.camino-rotulo { margin: 0; text-align: center; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 900; font-weight: 1000; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: #17181c; color: var(--tinta); }
.camino-negocios { list-style: none; margin: 1.125rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.5rem; grid-gap: 0.5rem; gap: 0.5rem; }
.camino-negocios a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; min-height: var(--objetivo); padding: 0 0.75rem; border-radius: 999px; border-radius: var(--r-pill);
  background: #ececef; background: rgba(120, 120, 128, 0.12); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 1px 2px rgba(23, 24, 28, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #17181c; color: var(--tinta); text-decoration: none; white-space: nowrap; transition: background 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .camino-negocios a:hover { background: rgba(120, 120, 128, 0.2); color: #17181c; color: var(--tinta); text-decoration: none; } }
/* De izquierda a derecha en una fila donde caben (desde 1024 px también, desde que los textos son cortos: 2026-10-14). */
@media (min-width: 600px) and (max-width: 719.98px), (min-width: 1024px) {
  .camino-automotriz .camino-cuerpo { padding-left: 1.5rem; padding-right: 1.5rem; }
  /* Con «Negocios» en una fila, los dos bloques y el botón van juntos y centrados en el alto libre (sin un hueco grande entre
     ellos). Los márgenes automáticos de arriba y abajo reparten el sobrante por igual. */
  .camino-automotriz .camino-grupo-negocios { flex: 0 0 auto; margin-top: auto; }
  .camino-automotriz .camino-grupo-vehiculo { margin-top: 2rem; }
  .camino-automotriz.camino a.camino-boton { margin-top: 1.75rem; margin-bottom: auto; }
  /* Seis puntos alineados (pedido del usuario, 2026-10-14): los tres botones de «Negocios» (Lubricadoras, Tecnicentros,
     Talleres mecánicos) y los tres logotipos de «Tu vehículo» (Quartz, Rubia, Hi-Perf) en las mismas tres columnas iguales:
     cada botón sobre su logotipo, la tarjeta simétrica y los títulos centrados. */
  .camino-negocios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camino-negocios a { padding: 0 0.75rem; font-size: 0.875rem; }
  .camino-automotriz .camino-sellos-vehiculo { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* gana a la regla base de más abajo */
}
/* 1024-1279 px: columnas de ~130 px; letra y relleno algo menores y, si no cabe, «Talleres mecánicos» en dos renglones. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .camino-negocios a { padding: 0 0.5rem; font-size: 0.8125rem; line-height: 1.15; white-space: normal; text-align: center; }
}
.camino-sellos-vehiculo { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; align-items: center; grid-gap: 0.5rem; grid-gap: 0.5rem; gap: 0.5rem; }
.camino-sellos-vehiculo a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; min-height: var(--objetivo); border-radius: 0.75rem; border-radius: var(--r-md); transition: transform 0.15s ease; }
.camino-sellos-vehiculo img { display: block; width: auto; height: 2.125rem; max-width: 100%; }
@media (hover: hover) and (pointer: fine) { .camino-sellos-vehiculo a:hover { transform: translateY(-2px); } }
.camino-sellos-vehiculo a:active { transform: scale(0.96); }
/* Botón de la Lubriguía: rojo más claro y liso, con sombra suave (pedido del usuario: «suavízalo»). Letra grande y negrita:
   desde 900 px el blanco sobre este rojo cumple el contraste de texto grande; por debajo la letra ya no es «grande» y el
   rojo baja a #E02828 (4,66:1); con ratón, el :hover pasa a #D62222 y el :active a #C41C1C para que sigan oscureciendo
   (revisión de la portada, 2026-10-22). */
.camino a.camino-boton { align-self: stretch; flex-wrap: wrap; grid-row-gap: 0.125rem; row-gap: 0.125rem; min-height: 3.5rem; margin-top: 1.25rem; padding: 0.75rem 1rem;
  background: #EF3B3B; box-shadow: 0 6px 18px rgba(239, 59, 59, 0.24); font-size: 1.2rem; font-size: var(--t-lg); font-weight: 900; color: #ffffff; }
@media (hover: hover) and (pointer: fine) { .camino a.camino-boton:hover { background: #E22C2C; color: #ffffff; } }
.camino a.camino-boton:active { background: #D62222; }
@media (max-width: 899.98px) { .camino a.camino-boton { font-size: 1.0625rem; font-size: var(--t-md); background: #E02828; } }
@media (max-width: 899.98px) and (hover: hover) and (pointer: fine) {
  .camino a.camino-boton:hover { background: #D62222; }
  .camino a.camino-boton:active { background: #C41C1C; }
}
@media (max-width: 599.98px) {
  .camino-sectores { grid-gap: 0.625rem; grid-gap: 0.625rem; gap: 0.625rem; }
  .camino-sectores a { min-height: 2.875rem; }
  /* Automotriz en celular (pedido del usuario, 2026-10-15: los tres botones de «Negocios» «muy juntos», se tocaba uno por
     otro). Más aire entre Lubricadoras, Tecnicentros y Talleres mecánicos (8 → 16 px, y el alto de los de Industria);
     «Tu vehículo» y el botón de la Lubriguía bajan para dejar ese espacio. */
  .camino-negocios { grid-gap: 1rem; grid-gap: 1rem; gap: 1rem; }
  .camino-negocios a { min-height: 2.875rem; }
  .camino-automotriz .camino-grupo-vehiculo { margin-top: 2rem; }
  .camino-automotriz.camino a.camino-boton { margin-top: 1.75rem; }
  .camino-foto { height: 10rem; }
  .camino-foto h2 { left: 1.25rem; bottom: 1rem; }
  .camino-cuerpo { padding: 1.25rem 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .camino-foto .camino-foto-img { transition: none; }
  .camino-foto .camino-foto-img.activa { transform: none; }
  .camino-sectores a, .camino-foto-sector, .camino-sellos-vehiculo a, .camino-sellos-vehiculo a:hover, .camino-sellos-vehiculo a:active { transition: none; transform: none; }
  /* Menos movimiento no es cero: un fundido corto explica el cambio de foto (sin la ampliación de 7 s; 2026-10-22). */
  .camino-foto .camino-foto-img { transition: opacity 0.2s ease-out !important; }
}
@supports not (display: grid) {
  .camino-sectores, .camino-negocios { display: block; }
  .camino-sectores > li + li { margin-top: 0.875rem; }
  .camino-negocios > li + li { margin-top: 0.5rem; }
  .camino-sellos-vehiculo { display: flex; justify-content: space-around; }
}

/* 8. Franja de confianza --------------------------------------- */
.confianza { background: #fbfbfc; background: var(--superficie-alt); border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); padding: 2.5rem 0; padding: var(--e-7) 0; }
.confianza-grilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.5rem; gap: 1.5rem; grid-gap: var(--e-5); gap: var(--e-5); }
.confianza h3 { font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; margin: 0 0 0.375rem; }
.confianza p { font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.5; color: #55575e; color: var(--secundario); margin: 0; }

/* 9. Secciones ------------------------------------------------- */
.seccion { padding: 4.5rem 0; padding: var(--seccion) 0; }
.seccion-gris { background: #f6f7f8; background: var(--superficie); }
.seccion-cabecera { text-align: center; max-width: 43.75rem; margin: 0 auto 2.5rem; margin: 0 auto var(--e-7); }
.seccion-cabecera h2 { font-size: 2.25rem; font-size: var(--t-3xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.02em; margin: 0.625rem 0 0; line-height: 1.1; }
.seccion-cabecera > h2:first-child { margin-top: 0; }   /* las dos cabeceras de la portada van sin cejilla (industrias desde
   el 2026-10-05; el portafolio desde el 2026-10-22, revisión de la portada, punto 23): el título sube */
.seccion-cabecera p { font-size: 1.0625rem; font-size: var(--t-md); line-height: 1.55; line-height: var(--lh-texto); color: #55575e; color: var(--secundario); margin: 0.875rem auto 0; max-width: 60ch; max-width: var(--medida); }
.seccion-pie { display: flex; justify-content: center; margin-top: 2.5rem; margin-top: var(--e-7); }
/* «Ver el catálogo completo» al principio de la sección del portafolio (#productos, «Un portafolio para toda aplicación»),
   bajo la bajada «12 familias y más de N productos…» (pedido del usuario, 2026-10-07; antes iba al final, después de las
   12 tarjetas). Aire moderado: ni pegado a la frase ni suelto. */
.seccion-accion { display: flex; justify-content: center; margin-top: 1.5rem; margin-top: var(--e-5); }

/* 10. Portafolio (familias) ------------------------------------ */
.portafolio-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 1.125rem; gap: 1.125rem; grid-gap: var(--gap); gap: var(--gap); }
.linea {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--radio); padding: 1.375rem; padding: var(--tarjeta-pad); background: #ffffff; background: var(--fondo);
  transition: border-color 1s ease, box-shadow 1s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);   /* el contorno de color se dibuja en 1 s (pedido del usuario, 2026-10-14) */
}
/* Cabecera de la tarjeta: ícono Tabler (mismo set, trazo 1.5 y tamaño en las 12; escala con la raíz
   hasta 4K) en tono secundario, y debajo la franja del color de la familia. */
.linea-cabecera { display: flex; flex-direction: column; grid-gap: 0.875rem; gap: 0.875rem; }
/* Íconos del portafolio (2026-10-14, pedido del usuario): sin losa; los trazos con una sombra corta para que tengan cuerpo.
   Al pasar el ratón (o con foco de teclado, o al pulsar en el celular) la parte principal del dibujo (.icono-acento:
   carrocería, caja, carenado, pomo, columna, corona, gota, aguja, tanque, garra, manzana, casco) toma el color de la
   tarjeta, con la misma calma que el contorno; los vidrios de los vehículos no se tiñen. Sin var() (televisores viejos) el
   acento es rojo. */
.linea-icono { display: block; width: 2.5rem; height: 2.5rem; flex: none; color: #2b2d33; overflow: visible; transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.linea-icono path, .linea-icono circle { transition: stroke 0.6s ease, fill 0.6s ease; -webkit-filter: drop-shadow(0 1px 1px rgba(23, 24, 28, 0.2)); filter: drop-shadow(0 1px 1px rgba(23, 24, 28, 0.2)); }
/* :has() va en reglas aparte: en una lista con otros selectores, los motores que no lo conocen (televisores, celulares
   viejos) descartaban la regla entera y la ilustración no se teñía (2026-10-14, visto por el usuario en la tele). */
.linea:hover .linea-icono, .linea:active .linea-icono, .linea.pulsada .linea-icono { transform: translateY(-2px); }
.linea:has(:focus-visible) .linea-icono { transform: translateY(-2px); }
.linea:hover .icono-acento, .linea:active .icono-acento, .linea.pulsada .icono-acento { stroke: #ED0000; stroke: var(--color-linea); }
.linea:has(:focus-visible) .icono-acento { stroke: #ED0000; stroke: var(--color-linea); }
.linea:hover .icono-relleno, .linea:active .icono-relleno, .linea.pulsada .icono-relleno { fill: #ED0000; fill: var(--color-linea); }
.linea:has(:focus-visible) .icono-relleno { fill: #ED0000; fill: var(--color-linea); }
/* Televisor y control remoto: con el foco en la tarjeta, lo mismo (sin :focus-visible, que los motores viejos no conocen). */
html.tv .linea:focus-within .linea-icono { transform: translateY(-2px); }
html.tv .linea:focus-within .icono-acento { stroke: #ED0000; stroke: var(--color-linea); }
html.tv .linea:focus-within .icono-relleno { fill: #ED0000; fill: var(--color-linea); }
/* Al pulsar (en el celular no hubo «hover» antes) el acento entra rápido, para que se vea antes de abrir. */
.linea.pulsada .icono-acento, .linea.pulsada .icono-relleno, .linea:active .icono-acento, .linea:active .icono-relleno { transition-duration: 0.15s; }
/* Al hacer clic (.pulsada, main.js initPulso) cada dibujo hace su gesto (0,5 s) antes de abrir la familia: el auto, el camión y
   la moto corren; la palanca pasa de cuarta a quinta; la columna del termómetro baja a su nivel; el engranaje da una vuelta
   entera; la gota de grasa cae; la aguja del manómetro sube; el copo sale del compresor; la garra cava; la manzana brilla y
   el barco avanza sobre las olas. Las partes que se mueven giran o escalan sobre su propio punto (transform-box). */
.linea.pulsada .icono-auto, .linea.pulsada .icono-camion { -webkit-animation: icono-corre 0.3s ease-in-out forwards; animation: icono-corre 0.3s ease-in-out forwards; }   /* se quedan al final del recorrido, como el barco */
.linea.pulsada .icono-moto { -webkit-animation: icono-corre-moto 0.3s ease-in-out forwards; animation: icono-corre-moto 0.3s ease-in-out forwards; }
.linea.pulsada .icono-settings { -webkit-animation: icono-vuelta 0.3s ease-in-out; animation: icono-vuelta 0.3s ease-in-out; }
.icono-palanca .pomo, .icono-termometro .mercurio, .icono-termometro .copo, .icono-grasa .balde, .icono-compresor-frio .copo, .icono-retroexcavadora .garra, .icono-manzana .brillo, .icono-manzana .icono-acento, .icono-gauge path:nth-of-type(3) { transform-box: view-box; }
.icono-palanca .pomo { transform-origin: 12px 18px; }
.linea.pulsada .icono-palanca .pomo { -webkit-animation: icono-quinta 0.3s ease-in-out forwards; animation: icono-quinta 0.3s ease-in-out forwards; }
.icono-termometro .mercurio { transform-origin: 12px 16.5px; }
.linea.pulsada .icono-termometro .mercurio { -webkit-animation: icono-nivela 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-nivela 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.icono-termometro .copo { opacity: 0; transform-origin: 18.5px 6.5px; }
.linea.pulsada .icono-termometro .copo { -webkit-animation: icono-copo-frio 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-copo-frio 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.icono-grasa .balde { transform-origin: 16px 7px; }
.icono-grasa .gota { opacity: 0; }
.linea.pulsada .icono-grasa .balde { -webkit-animation: icono-vierte 0.3s ease-in-out forwards; animation: icono-vierte 0.3s ease-in-out forwards; }
.linea.pulsada .icono-grasa .gota { -webkit-animation: icono-gotea 0.3s ease-in forwards; animation: icono-gotea 0.3s ease-in forwards; }
.icono-gauge path:nth-of-type(3) { transform-origin: 12px 12px; }
.linea.pulsada .icono-gauge path:nth-of-type(3) { -webkit-animation: icono-aguja 0.3s ease-in-out; animation: icono-aguja 0.3s ease-in-out; }
.icono-compresor-frio .copo { opacity: 0; }   /* los copos solo salen al hacer clic */
/* Copos de nieve en celeste (2026-10-14, pedido del usuario: naranja «queda horrible» y en celeste se entiende que es nieve),
   con la sombra oscura de los trazos para que la figura se distinga; no toman el color de la tarjeta. */
.icono-compresor-frio .copo path, .icono-termometro .copo path { stroke: #00A9E0; }
/* Delineado en negro (pedido del usuario): el mismo dibujo debajo, más grueso y oscuro, deja un borde fino alrededor del celeste. */
.icono-compresor-frio .copo path, .icono-termometro .copo path { stroke-width: 0.85; }
.icono-compresor-frio .copo .copo-borde, .icono-termometro .copo .copo-borde { stroke: #17181c; stroke-width: 1.7; }
.icono-compresor-frio .copo-izq { transform-origin: 4.5px 5.5px; }
.icono-compresor-frio .copo-der { transform-origin: 19.5px 5.5px; }
.linea.pulsada .icono-compresor-frio .copo-izq { -webkit-animation: icono-sale-copo-izq 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-sale-copo-izq 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.linea.pulsada .icono-compresor-frio .copo-der { -webkit-animation: icono-sale-copo 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-sale-copo 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.icono-retroexcavadora .garra { transform-origin: 13px 10px; }
.linea.pulsada .icono-retroexcavadora .garra { -webkit-animation: icono-cava 0.3s ease-in-out; animation: icono-cava 0.3s ease-in-out; }
.icono-manzana .brillo { opacity: 0; transform-origin: 20px 4.3px; }
.linea.pulsada .icono-manzana .brillo { -webkit-animation: icono-destello 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-destello 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.icono-manzana .icono-acento { transform-origin: 12px 13px; }
.linea.pulsada .icono-manzana .icono-acento { -webkit-animation: icono-late 0.3s ease-in-out; animation: icono-late 0.3s ease-in-out; }
.linea.pulsada .icono-barco .casco { -webkit-animation: icono-navega 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-navega 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.linea.pulsada .icono-barco .olas { -webkit-animation: icono-olas 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: icono-olas 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@-webkit-keyframes icono-corre { 0% { transform: translate(0, -2px); } 100% { transform: translate(9px, -2px); } }
@keyframes icono-corre { 0% { transform: translate(0, -2px); } 100% { transform: translate(9px, -2px); } }
@-webkit-keyframes icono-corre-moto { 0% { transform: translate(0, -2px); } 100% { transform: translate(10px, -2px); } }
@keyframes icono-corre-moto { 0% { transform: translate(0, -2px); } 100% { transform: translate(10px, -2px); } }
@-webkit-keyframes icono-vuelta { 0% { transform: translateY(-2px) rotate(0); } 100% { transform: translateY(-2px) rotate(360deg); } }
@keyframes icono-vuelta { 0% { transform: translateY(-2px) rotate(0); } 100% { transform: translateY(-2px) rotate(360deg); } }
@-webkit-keyframes icono-quinta { 0% { transform: translate(0, 0); } 35% { transform: translate(0, -8px); } 65% { transform: translate(7px, -8px); } 100% { transform: translate(7px, -12px); } }
@keyframes icono-quinta { 0% { transform: translate(0, 0); } 35% { transform: translate(0, -8px); } 65% { transform: translate(7px, -8px); } 100% { transform: translate(7px, -12px); } }
@-webkit-keyframes icono-nivela { 0% { transform: scaleY(1); } 100% { transform: scaleY(0.42); } }
@keyframes icono-nivela { 0% { transform: scaleY(1); } 100% { transform: scaleY(0.42); } }
@-webkit-keyframes icono-gotea { 0%, 45% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(5px); opacity: 1; } }
@keyframes icono-gotea { 0%, 45% { transform: translateY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(5px); opacity: 1; } }
@-webkit-keyframes icono-vierte { 0% { transform: rotate(0); } 100% { transform: rotate(50deg); } }
@keyframes icono-vierte { 0% { transform: rotate(0); } 100% { transform: rotate(50deg); } }
@-webkit-keyframes icono-copo-frio { 0%, 40% { transform: scale(0.3); opacity: 0; } 75% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes icono-copo-frio { 0%, 40% { transform: scale(0.3); opacity: 0; } 75% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@-webkit-keyframes icono-sale-copo-izq { 0% { transform: translate(6px, 6px) scale(0.15); opacity: 0; } 60% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes icono-sale-copo-izq { 0% { transform: translate(6px, 6px) scale(0.15); opacity: 0; } 60% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: none; opacity: 1; } }
@-webkit-keyframes icono-aguja { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(70deg); } }
@keyframes icono-aguja { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(70deg); } }
@-webkit-keyframes icono-sale-copo { 0% { transform: translate(-7px, 6px) scale(0.15); opacity: 0; } 60% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes icono-sale-copo { 0% { transform: translate(-7px, 6px) scale(0.15); opacity: 0; } 60% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: none; opacity: 1; } }
@-webkit-keyframes icono-cava { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(18deg); } 75% { transform: rotate(-6deg); } }
@keyframes icono-cava { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(18deg); } 75% { transform: rotate(-6deg); } }
@-webkit-keyframes icono-destello { 0% { transform: scale(0.3) rotate(0); opacity: 0; } 55% { transform: scale(1.4) rotate(50deg); opacity: 1; } 100% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes icono-destello { 0% { transform: scale(0.3) rotate(0); opacity: 0; } 55% { transform: scale(1.4) rotate(50deg); opacity: 1; } 100% { transform: scale(1) rotate(90deg); opacity: 1; } }
@-webkit-keyframes icono-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes icono-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@-webkit-keyframes icono-navega { 0% { transform: translate(0, 0); } 100% { transform: translate(3px, 0); } }
@keyframes icono-navega { 0% { transform: translate(0, 0); } 100% { transform: translate(3px, 0); } }
@-webkit-keyframes icono-olas { 0% { transform: translate(0, 0); } 100% { transform: translate(-2px, 0); } }
@keyframes icono-olas { 0% { transform: translate(0, 0); } 100% { transform: translate(-2px, 0); } }
.linea-acento { width: 2.125rem; height: 4px; border-radius: 2px; }
.linea h3 { font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; line-height: 1.25; margin: 1rem 0 0; margin: var(--e-4) 0 0; }
.linea h3 a { color: #17181c; color: var(--tinta); }
.linea h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 1.125rem; border-radius: var(--radio); }
.linea-detalle { font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.5; color: #55575e; color: var(--secundario); margin: 0.375rem 0 0; }
/* Zona de marca: las marcas de la familia como texto pequeño, uniforme en las 12 tarjetas, al pie. */
.linea-marca-zona { display: flex; align-items: flex-end; margin-top: auto; padding-top: 1rem; padding-top: var(--e-4); }
.linea-marca { margin: 0; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; color: #55575e; color: var(--secundario); }
/* En el celular (2 columnas desde el 2026-09-30) la tarjeta es más compacta y el nombre de la familia crece con el ancho
   de la pantalla (14 px a 320, 16,75 a 375, 18 desde 414): así la palabra más larga («Transmisiones», «Refrigerantes»)
   cabe entera en su columna. Va después de las reglas generales de .linea para ganarles. */
@media (max-width: 599.98px) {
  .portafolio-grilla { grid-gap: 0.75rem; gap: 0.75rem; }
  .linea { padding: 1rem 0.75rem; }
  .linea-icono { width: 2rem; height: 2rem; }
  .linea h3 { font-size: 1.125rem; font-size: clamp(0.875rem, 5vw - 0.125rem, 1.125rem); line-height: 1.25; margin-top: 0.75rem; overflow-wrap: break-word; }
  .linea-detalle { font-size: 0.84rem; font-size: var(--t-xs); }
  .linea-marca { font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.35; }
}

/* 11. Soluciones por industria --------------------------------- */
/* Desde el 2026-10-05 (pedido del usuario) una tarjeta por sector, como las del portafolio (.linea), con una ilustración
   minimalista propia en el lugar del ícono; la tarjeta abre la página del sector (/sectores/). Los detalles .acento de la
   ilustración toman el color del sector (--color-trazo; en el amarillo, un tono más oscuro para que se vea sobre blanco). */
.sector-ilustracion { display: block; width: 12rem; height: 4.8rem; max-width: 100%; color: #55575e; color: var(--secundario); }
@media (max-width: 599.98px) { .sector-ilustracion { height: auto; } }   /* celular: la caja toma el alto del dibujo, sin franjas vacías arriba y abajo (2026-10-05) */
.sector-ilustracion .acento { stroke: currentColor; stroke: var(--color-trazo, currentColor); }
.sector-tarjeta .linea-marca { letter-spacing: 0.02em; line-height: 1.45; }
/* Tarjeta con foto (2026-10-12, propuesta visual aprobada): la foto ocupa el ancho de la tarjeta, sin relleno, y el texto
   va debajo con el relleno de siempre. Alturas fijas (sin aspect-ratio, que los televisores viejos no tienen). */
.linea.sector-tarjeta { padding: 0; overflow: hidden; }
.sector-tarjeta-foto { overflow: hidden; background: #f6f7f8; background: var(--superficie); }
.sector-tarjeta-foto img { display: block; width: 100%; height: 10rem; object-fit: cover; transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.sector-tarjeta-foto .sector-ilustracion { margin: 1.375rem 1.375rem 0; margin: var(--tarjeta-pad) var(--tarjeta-pad) 0; }
.sector-tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.375rem; padding: var(--tarjeta-pad); }
.sector-tarjeta-cuerpo h3 { margin-top: 0; font-size: 1.2rem; font-size: var(--t-lg); }   /* como en la propuesta: el nombre no se parte en 3 líneas */
/* El portafolio, con el mismo tamaño de nombre que los sectores (revisión de la portada, 2026-10-22): eran 25 px frente a 21
   en PC, y «Hidráulicos, circulación, turbinas y térmicos» ocupaba 4 líneas y estiraba su fila. */
@media (min-width: 600px) { #productos .linea h3 { font-size: 1.2rem; font-size: var(--t-lg); } }
.sector-tarjeta .linea-detalle { margin-top: 0.5rem; }
/* Aplicaciones del sector en viñetas, una debajo de otra (2026-10-14, pedido del usuario: sin «N guías» y sin cargar la
   tarjeta de texto). Con JavaScript (main.js, initSectores) el nombre es un botón que cubre la tarjeta y despliega las
   viñetas; las tarjetas se alinean arriba para que abrir una no estire a sus vecinas. */
.sectores-grilla { align-items: start; }
/* Celular (revisión de la portada, 2026-10-22): cerradas, las dos tarjetas de cada fila miden lo mismo y «Aplicaciones»
   queda a la misma altura («Construcción, minería y cemento» ocupa 3 renglones). La fila de una tarjeta abierta, o que se
   está plegando (.plegando, main.js), se alinea arriba como siempre; las demás filas no se mueven al abrir o cerrar otra.
   Sin :has() (celulares anteriores a 2022, televisores), como antes. */
@media (max-width: 599.98px) {
  .sectores-grilla:has(> .sector-tarjeta) { align-items: stretch; }
  .sectores-grilla:has(> .sector-tarjeta) .sector-tarjeta-cuerpo > h3 { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; }
  .sectores-grilla:has(> .sector-tarjeta) > .abierta,
  .sectores-grilla:has(> .sector-tarjeta) > .plegando,
  .sectores-grilla:has(> .sector-tarjeta) > .abierta:nth-child(odd) + .sector-tarjeta,
  .sectores-grilla:has(> .sector-tarjeta) > .plegando:nth-child(odd) + .sector-tarjeta,
  .sectores-grilla:has(> .sector-tarjeta) > .sector-tarjeta:nth-child(odd):has(+ .abierta),
  .sectores-grilla:has(> .sector-tarjeta) > .sector-tarjeta:nth-child(odd):has(+ .plegando) { align-self: start; }
}
.sector-aplicaciones { position: relative; z-index: 1; }   /* sus enlaces, por encima del botón que cubre la tarjeta */
.sector-aplicaciones-lista { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.sector-aplicaciones-lista li { position: relative; padding-left: 1.125rem; }
.sector-aplicaciones-lista li::before { content: ""; position: absolute; left: 0.125rem; top: 50%; width: 0.4375rem; height: 0.4375rem; margin-top: -0.21875rem;
  border-radius: 50%; background: var(--color-trazo, var(--acento)); }
.sector-aplicaciones-lista a { display: flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; color: #17181c; color: var(--tinta); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sector-aplicaciones-lista a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.sector-ver { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); margin-top: 0.125rem; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 900; color: #b50000; color: var(--acento-oscuro); text-decoration: none; }
.sector-desglose-boton { position: relative; z-index: 1; display: block; width: calc(100% + 2 * 1.375rem); width: calc(100% + 2 * var(--tarjeta-pad)); margin: 0.25rem calc(-1 * 1.375rem) 0; margin: 0.25rem calc(-1 * var(--tarjeta-pad)) 0;
  padding: 0.5rem 1.375rem; padding: 0.5rem var(--tarjeta-pad); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sector-desglose-boton:focus { outline: none; }
.desplegable .sector-tarjeta-cuerpo h3 { min-height: 2.5em; }   /* dos renglones siempre: las tarjetas cerradas miden lo mismo */
/* Cerrada, la franja llega hasta el borde de abajo: un toque bajo «Aplicaciones» también despliega (no lleva al sector). */
.desplegable:not(.abierta) .sector-desglose-boton { margin-bottom: calc(-1 * 1.375rem); margin-bottom: calc(-1 * var(--tarjeta-pad)); padding-bottom: 1.375rem; padding-bottom: var(--tarjeta-pad); }
.sector-desglose { display: flex; align-items: center; min-height: 1.75rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #55575e; color: var(--secundario); }
/* La flecha anima solo transform (revisión de la portada, 2026-10-22; antes también el margen): la misma posición y el
   mismo sentido de giro, con translateY en las dos posiciones para que el navegador no interpole al revés. */
.sector-chevron { flex: none; width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
.sector-tarjeta.abierta .sector-chevron { -webkit-transform: translateY(0.25rem) rotate(225deg); transform: translateY(0.25rem) rotate(225deg); }
.sector-tarjeta.abierta .sector-desglose { color: #17181c; color: var(--tinta); }
/* Desplegar: el alto pasa de 0 al de su contenido (filas de rejilla 0fr → 1fr) y las viñetas aparecen con un fundido; cerradas
   no reciben el foco (visibility). Motores sin esa transición abren de golpe; sin rejilla, display. */
.desplegable .sector-aplicaciones { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
.desplegable.abierta .sector-aplicaciones { grid-template-rows: 1fr; }
.sector-aplicaciones-dentro { min-height: 0; overflow: hidden; }
.desplegable .sector-aplicaciones-dentro { visibility: hidden; opacity: 0; transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.25s; }
.desplegable.abierta .sector-aplicaciones-dentro { visibility: visible; opacity: 1; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0.05s, visibility 0s; }
@supports not (display: grid) {
  .sectores-grilla { align-items: flex-start; }
  .desplegable .sector-aplicaciones { display: none; }
  .desplegable.abierta .sector-aplicaciones { display: block; }
}
@media (prefers-reduced-motion: reduce) { .desplegable .sector-aplicaciones, .desplegable .sector-aplicaciones-dentro, .sector-chevron { transition: none; } }
/* Celulares de menos de 360 px (columna de 112 px): «Metalmecánica» entra entera en el nombre y en su viñeta, y la flecha
   de «Aplicaciones» no se corta (medido a 320 px). */
@media (max-width: 359.98px) {
  .sector-tarjeta-cuerpo h3 { font-size: 0.9375rem; }
  .sector-desglose { font-size: 0.75rem; letter-spacing: 0.02em; }   /* 12 px, el piso del sitio (antes 11; 2026-10-22) */
  .sector-aplicaciones-lista li { padding-left: 0.875rem; }
  .sector-aplicaciones-lista li::before { left: 0; }
  .sector-aplicaciones-lista a { font-size: 0.8125rem; overflow-wrap: anywhere; }
}
@media (hover: hover) and (pointer: fine) { .sector-tarjeta:hover .sector-tarjeta-foto img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sector-tarjeta-foto img { transition: none; } .sector-tarjeta:hover .sector-tarjeta-foto img { transform: none; } }
@media (max-width: 599.98px) {
  .sector-tarjeta-foto img { height: 6.5rem; }
  .sector-tarjeta-cuerpo { padding: 0.875rem 0.75rem 1rem; }
  .sector-desglose-boton { width: calc(100% + 1.5rem); margin-left: -0.75rem; margin-right: -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .desplegable:not(.abierta) .sector-desglose-boton { margin-bottom: -1rem; padding-bottom: 1rem; }
}
/* Llegada desde la tarjeta «Industria» del inicio (#sector-<ancla>, 2026-10-05): la tarjeta de destino se marca con el
   color de su sector para que el visitante vea dónde llegó. La cabecera fija ya la descuenta scroll-padding-top. */
/* .sector-tarjeta:target: contorno del color del sector, con las reglas de .linea:focus-within (más abajo). */
/* Página de un sector: título y descripción con la ilustración grande al lado; debajo, una tarjeta por guía con la vista
   previa de su mapa ilustrado (ayuda visual primero). */
.sector-cabecera-dibujo { margin-top: 2rem; margin-top: var(--e-6); padding: 1.5rem; padding: var(--e-5); border-radius: 1.5rem; border-radius: var(--r-2xl); background: #f6f7f8; background: var(--superficie); border-top: 4px solid #ED0000; border-top: 4px solid var(--acento); border-top-color: var(--color-sector, var(--acento)); }
.sector-cabecera-dibujo .sector-ilustracion { width: 100%; max-width: 26rem; height: auto; margin: 0 auto; }
@media (min-width: 768px) {
  .sector-cabecera { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-column-gap: 3rem; column-gap: 3rem; grid-column-gap: var(--e-8); column-gap: var(--e-8); align-items: center; }
  .sector-cabecera-dibujo { margin-top: 0; }
}
/* Con foto de TotalEnergies (2026-10-05): el título a todo el ancho y la foto debajo, grande, con su crédito. */
@media (min-width: 768px) { .sector-cabecera.con-foto { display: block; } .sector-cabecera.con-foto .bajada { max-width: 60ch; max-width: var(--medida-larga); } }
.sector-foto { margin: 2rem 0 0; margin: var(--e-6) 0 0; }
.sector-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.5rem; border-radius: var(--r-2xl); background: #f6f7f8; background: var(--superficie); }
@media (min-width: 600px) { .sector-foto img { aspect-ratio: 21 / 9; } }
/* Foto con logotipo cerca del borde (Transporte, Rubia; 2026-10-14): en el celular se ve entera, sin el recorte 16:9 (16:10 hasta el 2026-10-21). */
@media (max-width: 599.98px) { .sector-foto-entera img { aspect-ratio: auto; } }
/* Sin aspect-ratio (televisores con Chromium anterior a 88) la foto saldría a su proporción natural: una 3:2 llenaría
   más de una pantalla del televisor. Se topa en 30 rem de alto (720 px a 1920 en el TV, casi el 21:9) y «cover»
   recorta sin deformar. Si generar.py cambia estas proporciones o el corte de 600 px, verificar_sitio.py [9] avisa. */
@supports not (aspect-ratio: 1 / 1) { .sector-foto img { max-height: 30rem; } }
.sector-foto figcaption { margin: 0.5rem 0 0; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.45; color: #55575e; color: var(--secundario); }
.guias-grilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.125rem; gap: 1.125rem; grid-gap: var(--gap); gap: var(--gap); margin-top: 1.5rem; margin-top: var(--e-5); }
@media (min-width: 600px) { .guias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guias-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guia-tarjeta { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--radio); background: #ffffff; background: var(--fondo); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.guia-tarjeta-imagen { background: #ffffff; border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); }
.guia-tarjeta-imagen img { display: block; width: 100%; height: 10rem; object-fit: contain; }
.guia-tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; grid-gap: 0.375rem; gap: 0.375rem; padding: 1.375rem; padding: var(--tarjeta-pad); }
.guia-tarjeta h3 { margin: 0; font-size: 1.2rem; font-size: var(--t-lg); font-weight: 900; line-height: 1.25; }
.guia-tarjeta h3 a { color: #17181c; color: var(--tinta); }
.guia-tarjeta h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 1.125rem; border-radius: var(--radio); }
.guia-tarjeta p { margin: 0; font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.5; color: #55575e; color: var(--secundario); }
.guia-tarjeta .guia-tarjeta-ir { margin-top: auto; padding-top: 0.5rem; font-weight: 800; color: #b50000; color: var(--acento-oscuro); }
.guia-tarjeta:focus-within { outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: 0.1875rem; }
.guia-tarjeta:focus-within h3 a { outline: 0; }
@media (hover: hover) and (pointer: fine) { .guia-tarjeta:hover { border-color: #d9dade; border-color: var(--borde-fuerte); box-shadow: 0 10px 30px rgba(23, 24, 28, 0.07); box-shadow: var(--sombra-2); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .guia-tarjeta:hover { transform: none; } }
.otros-sectores { margin-top: 3rem; margin-top: var(--e-8); }
.otros-sectores-titulo { margin: 0 0 0.75rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #55575e; color: var(--secundario); }
/* Tarjeta desplegable: hoy la usan las marcas de la Lubriguía. */
.industria { background: #ffffff; background: var(--fondo); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); }
.industria summary {
  display: flex; align-items: center; justify-content: space-between; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4);
  min-height: 3rem; padding: 1.125rem 1.5rem; padding: 1.125rem var(--e-5); cursor: pointer; list-style: none; font-size: 1.0625rem; font-size: var(--t-md); font-weight: 800;
}
.industria summary::-webkit-details-marker { display: none; }
.industria summary::after {
  content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-right: 0.25rem;
  border-right: 2px solid #55575e; border-right: 2px solid var(--secundario); border-bottom: 2px solid #55575e; border-bottom: 2px solid var(--secundario);
  transform: rotate(45deg); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.industria[open] summary::after { transform: rotate(225deg); }
.industria-cuenta { margin-left: auto; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; color: #55575e; color: var(--secundario); white-space: nowrap; }
.nw { white-space: nowrap; }

/* 12. Chips ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; grid-gap: 0.625rem; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.chips li { display: flex; }
.chip {
  display: inline-flex; align-items: center; min-height: 2.125rem; padding: 0.3125rem 0.875rem; border-radius: 999px; border-radius: var(--r-pill);
  background: #f6f7f8; background: var(--superficie); border: 1px solid #e8e9ec; border: 1px solid var(--borde); color: #17181c; color: var(--tinta);
  font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
}
a.chip { min-height: 2.5rem; padding: 0.5rem 0.875rem; }
.chip-suave { background: #ffffff; background: var(--fondo); font-weight: 600; color: #55575e; color: var(--secundario); min-height: 1.75rem; padding: 0.1875rem 0.6875rem; font-size: 0.9rem; font-size: var(--t-sm); }
/* Enlaces dentro de texto corrido (selector «Cómo elegir», sin resultados, datos de la ficha, notas):
   subrayados siempre, no solo con hover (WCAG 1.4.1: el color no es la única pista). */
.sin-resultados a, .tabla td a, .datos dd a, .ficha-texto a, .nota a, .enlace-texto {
  text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px;
}
/* Enlaces de producto del selector: caja de ≥ 36 px con separación entre líneas (WCAG 2.5.8) sin
   romper el texto que los rodea (« · », rangos «32 a 150»). */
.enlace-texto { display: inline-block; padding: 0.4375rem 0.125rem; margin-left: -0.125rem; margin-right: -0.125rem; line-height: 1.4; font-weight: 700; border-radius: 0.5rem; border-radius: var(--r-sm); }
@media (pointer: coarse) { .enlace-texto { padding-top: 0.625rem; padding-bottom: 0.625rem; } }

/* 13. Nosotros ------------------------------------------------- */
.pasos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2rem; gap: 2rem; grid-gap: var(--e-6); gap: var(--e-6); }
.paso-numero { font-size: 0.9375rem; font-weight: 900; color: #b50000; color: var(--acento-oscuro); margin: 0; }
.paso h3 { font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; margin: 0.75rem 0; }
.paso p { font-size: 1rem; font-size: var(--t-base); line-height: 1.55; line-height: var(--lh-texto); color: #55575e; color: var(--secundario); margin: 0; max-width: 60ch; max-width: var(--medida); }

/* 14. Contacto ------------------------------------------------- */
.contacto { border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); text-align: center; padding: 4.5rem 0 calc(4.5rem + 0.5rem); padding: var(--seccion) 0 calc(var(--seccion) + var(--e-2)); }
.contacto h2 { font-size: 2.75rem; font-size: var(--t-4xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.02em; margin: 0; line-height: 1.05; line-height: var(--lh-titulo); }
.contacto .bajada { max-width: 40ch; margin: 1.25rem auto 0; }
.contacto-canales { margin-top: 1.75rem; }
/* De izquierda a derecha (pedido del usuario, 2026-10-06): «Canal 1» y «Canal 2» (.contacto-servicio > .contacto-canal),
   una línea divisora y «Redes» (Instagram, Facebook y YouTube), con el color de cada marca; los correos con borde. Cada
   canal va en columna: su título, el WhatsApp y debajo el correo (segunda vuelta del mismo día: WhatsApp y correo lado a
   lado «no se ve bien»). El texto del botón de WhatsApp va oscuro: en blanco sobre su verde el contraste sería de 2:1. */
.contacto-grupo + .contacto-grupo { margin-top: 1.75rem; }
.contacto-canal .contacto-fila { flex-direction: column; align-items: center; }
.contacto-servicio + .contacto-redes { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #d9dade; border-top: 1px solid var(--borde-fuerte); }
/* Desde 800 px, los dos canales lado a lado en columnas del mismo ancho (23 rem: cabe el correo más largo), con los dos
   botones del ancho de la columna; debajo, la línea y las redes en una fila. */
@media (min-width: 800px) {
  .contacto-servicio { display: flex; justify-content: center; align-items: flex-start; }
  .contacto-canal { flex: 0 1 23rem; width: 23rem; min-width: 0; }
  .contacto-grupo.contacto-canal + .contacto-canal { margin-top: 0; margin-left: 1.5rem; }
  .contacto-canal .contacto-fila { align-items: stretch; }
}
/* Desde 1120 px (70 em), todo en una fila: Canal 1, Canal 2, la línea vertical y «Redes», con las tres redes una debajo de
   otra y los tres títulos a la misma altura. El bloque mide unos 1020 px y va centrado. */
@media (min-width: 70em) {
  .contacto-canales { display: flex; justify-content: center; align-items: stretch; }
  .contacto-servicio { flex: 0 1 auto; min-width: 0; padding-right: 3rem; }
  .contacto-servicio + .contacto-redes { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; padding: 0 0 0 3rem; border-top: 0; border-left: 1px solid #d9dade; border-left: 1px solid var(--borde-fuerte); }
  .contacto-redes .contacto-fila { flex-direction: column; align-items: stretch; }
  .contacto-redes .contacto-fila > a { min-width: 11rem; }
}
.contacto-grupo-titulo { margin: 0 0 1.25rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #55575e; color: var(--secundario); }
.contacto-fila { display: flex; justify-content: center; flex-wrap: wrap; grid-gap: 0.875rem; gap: 0.875rem; }
.boton.canal-whatsapp { background: #25D366; color: #111B21; }
.boton.canal-youtube { background: #E62117; color: #ffffff; }
/* Instagram (2026-10-05): el magenta clásico #C13584 y el naranja solo en la esquina, para que el texto blanco pase de
   4,5:1 también en la casilla del celular (con #DD2A7B al 40 % quedaba en 3,3-3,5:1 sobre el naranja). */
.boton.canal-instagram { background: #C13584; background: linear-gradient(45deg, #F58529 0%, #C13584 18%, #8134AF 60%, #515BD4 100%); color: #ffffff; }
.boton.canal-facebook { background: #0866FF; color: #ffffff; }
.contacto-canales:empty { display: none; }
/* Aviso «Correo copiado» (2026-10-06): al tocar un correo se copia la dirección (main.js, copiarCorreo); el aviso sale
   abajo al centro unos 3,5 s, por encima de la barra, sin tapar el toque. Las direcciones largas se parten si no caben. */
.aviso-copia {
  position: fixed; left: 50%; bottom: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  width: max-content; max-width: calc(100% - 2rem); margin: 0; padding: 0.75rem 1.125rem; border-radius: 1rem; border-radius: var(--r-lg);
  background: #17181c; background: var(--tinta); color: #ffffff; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; line-height: 1.35; text-align: center;
  word-wrap: break-word; overflow-wrap: anywhere; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 24px rgba(23, 24, 28, 0.28);   /* el borde claro lo separa del pie, también oscuro */
  opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, 0.5rem); transform: translate(-50%, 0.5rem);
  transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1), transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.15s;
}
.aviso-copia.visible { opacity: 1; visibility: visible; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: reduce) { .aviso-copia, .aviso-copia.visible { transition: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } }
/* Donde está el botón flotante «Subir» (catálogo, guías por industria, Lubriguía), el aviso va por encima de él: en el
   celular lo tapaba (revisión 2026-10-06). */
html.pagina-catalogo .aviso-copia, html.pagina-industria .aviso-copia, html.pagina-lubriguia .aviso-copia { bottom: 4.75rem; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }

/* 15. Pie ------------------------------------------------------ */
.pie { background: #17181c; background: var(--tinta); color: #ffffff; padding: 3rem 0 2.5rem; padding: var(--e-8) 0 var(--e-7); }
@supports (padding-bottom: env(safe-area-inset-bottom)) { .pie { padding-bottom: calc(2.5rem + 0px); padding-bottom: calc(var(--e-7) + env(safe-area-inset-bottom, 0px)); } }
.pie-grilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2rem; gap: 2rem; grid-gap: var(--e-6); gap: var(--e-6); }
.pie-titulo { font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; letter-spacing: -0.02em; margin: 0; }
.pie-texto { font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.55; line-height: var(--lh-texto); color: #c9cbd2; margin: 0.875rem 0 0; }
.pie-texto.pie-direccion { margin-top: 0.25rem; }   /* dirección pegada a la línea de arriba (2026-10-15) */
.pie-etiqueta { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #a9abb3; margin: 0 0 0.5rem; }
.pie-lista { display: flex; flex-direction: column; grid-gap: 0; gap: 0; }
@media (max-width: 767.98px) { .pie-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 1rem; column-gap: 1rem; grid-column-gap: var(--e-4); column-gap: var(--e-4); } }   /* celular: enlaces del pie en 2 columnas; el pie medía más que una pantalla (2026-10-05) */
.pie-lista a { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); align-self: flex-start; color: #c9cbd2; font-size: 0.9375rem; font-weight: 600; padding: 0.25rem 0; }
.pie-dato { font-size: 0.9375rem; line-height: 1.6; color: #c9cbd2; margin: 0; }
.pie-banda { height: 3px; margin: 2.5rem 0 1.5rem; margin: var(--e-7) 0 var(--e-5); background: linear-gradient(90deg, #ED0000, #FF7A00, #FFD500, #7ACB2F, #00A9E0, #2456E6, #8E44D8); background: var(--banda); }
.pie-legal { font-size: 0.84rem; font-size: var(--t-xs); color: #a9abb3; line-height: 1.6; margin: 0; }
.pie-legal a { color: #c9cbd2; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
@media (hover: hover) and (pointer: fine) { .pie-legal a:hover { color: #fff; } }
html.tv .pie-legal a:hover { color: #fff; }
.pie-canales { display: flex; flex-direction: column; grid-gap: 0; gap: 0; margin-top: 0.5rem; }
.pie-canales a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; min-height: var(--objetivo); grid-gap: 0.625rem; gap: 0.625rem; color: #c9cbd2; font-size: 0.9375rem; font-weight: 600; padding: 0.25rem 0; }
/* Pie del celular (pedido del usuario, 2026-10-15: compactar el bloque negro final). Arriba, los datos de la empresa a
   todo el ancho; abajo, «Contacto» pegado a la izquierda y «Enlaces» pegado a la derecha, en una sola columna cada uno.
   «Enlaces» es un bloque al borde derecho con el texto alineado a la izquierda: todo empieza donde empieza el enlace
   más largo («Soluciones por industria»; corrección del usuario, 2026-10-15).
   Los correos muestran solo lo que va antes de la «@» (el enlace sigue completo). Sin canales (contacto.js vacío) el pie
   queda como antes. Desde 768 px, la grilla de tres columnas de siempre. */
@media (max-width: 767.98px) {
  .pie-grilla.con-contacto { grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "empresa empresa" "contacto enlaces"; grid-column-gap: 1.5rem; column-gap: 1.5rem; grid-column-gap: var(--e-5); column-gap: var(--e-5); }
  .pie-grilla.con-contacto > .pie-empresa { grid-area: empresa; }
  .pie-grilla.con-contacto > .pie-contacto { grid-area: contacto; }
  .pie-grilla.con-contacto > .pie-enlaces { grid-area: enlaces; justify-self: end; text-align: left; }
  .pie-grilla.con-contacto .pie-lista { display: flex; flex-direction: column; align-items: flex-start; }
  .pie-canales .correo-arroba, .pie-canales .correo-dominio { display: none; }
}

/* 16. Páginas internas: cabecera y migas ----------------------- */
.pagina-cabecera { padding: 2rem 0 2rem; padding: var(--e-6) 0 var(--e-6); }
.pagina-cabecera h1 { font-size: 2.75rem; font-size: var(--t-4xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.025em; line-height: 1.05; line-height: var(--lh-titulo); margin: 0.875rem 0 0; }
.pagina-cabecera .bajada { max-width: 60ch; max-width: var(--medida-larga); margin: 1.125rem 0 0; }
.migas { padding-top: 0.75rem; padding-top: var(--e-3); font-size: 0.9rem; font-size: var(--t-sm); }
/* El separador va DESPUÉS de cada miga salvo la última (2026-10-05, pedido del usuario): si la última baja de línea en el
   celular, la línea de arriba termina en «›» y la de abajo empieza al ras, sin «›» suelto ni sangría. */
.migas li:not(:last-child) { margin-right: 0.375rem; }   /* márgenes y no gap: televisores */
.migas ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; color: #55575e; color: var(--secundario); }
.migas li { display: inline-flex; align-items: center; min-height: 2.25rem; }
.migas li:not(:last-child)::after { content: "›"; content: "›" / ""; margin-left: 0.375rem; color: #6b6d75; color: var(--suave); }
/* Objetivo táctil de 44 px sin engordar la fila (el margen negativo devuelve la línea a 36 px). */
.migas a { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); margin-top: -0.25rem; margin-bottom: -0.25rem; color: #55575e; color: var(--secundario); font-weight: 700; }
.migas [aria-current="page"] { color: #17181c; color: var(--tinta); font-weight: 700; }
.cifras { display: flex; flex-wrap: wrap; grid-gap: 0.625rem; gap: 0.625rem; margin: 1.375rem 0 0; padding: 0; list-style: none; }

/* 17. Catálogo: herramientas ----------------------------------- */
/* Dos bloques pegajosos apilados bajo la cabecera: la fila del buscador (.herramientas, 44 px + aire) y,
   debajo, la barra de filtros (.filtros-barra, top = cabecera + buscador). Barra retráctil (main.js):
   al bajar por el catálogo la barra de filtros se oculta (visibility + opacity) y queda solo el
   buscador; al subir, o al volver al inicio, reaparece. Ocultarla NO cambia su alto en flujo, así que
   la página no salta al plegar ni al desplegar en ningún navegador (WebKit no aplica anclaje de
   desplazamiento). Oculta no recibe foco. Desde 1024 px los filtros envuelven en varias filas y dejan
   de ser pegajosos: se desplazan con la página y lo fijo nunca pasa de cabecera + buscador. */
.herramientas { position: sticky; top: calc(3.75rem + 4px); top: var(--alto-nav); z-index: 21; background: #ffffff; background: var(--fondo); padding: 0.25rem 0; padding: var(--e-1) 0; border-bottom: 1px solid transparent; }
.herramientas.plegada { border-bottom-color: #e8e9ec; border-bottom-color: var(--borde); }
.filtros-barra {
  position: sticky; top: calc((3.75rem + 4px) + 3.3125rem); top: calc(var(--alto-nav) + var(--alto-buscador)); z-index: 20;
  background: #ffffff; background: var(--fondo); border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); padding: 0.125rem 0 0.25rem; padding: 0.125rem 0 var(--e-1);
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.herramientas.plegada + .filtros-barra { visibility: hidden; opacity: 0; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.2s; }
.herramientas-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; grid-gap: 0.5rem 1.25rem; gap: 0.5rem 1.25rem; }
.buscador { display: flex; align-items: center; grid-gap: 0.75rem; gap: 0.75rem; flex: 1 1 auto; min-width: 0; max-width: 100%; }
.buscador label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; font-weight: 800; font-size: 0.9rem; font-size: var(--t-sm); }
.buscador input {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 2.75rem; min-height: var(--objetivo); height: 2.75rem; height: var(--objetivo); padding: 0 1.125rem; border-radius: 999px; border-radius: var(--r-pill);
  border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); font-size: 1rem; font-size: max(1rem, 16px);
  -webkit-appearance: none; appearance: none;
}
.buscador input:focus { border-color: #17181c; border-color: var(--tinta); }
.resultado { flex: none; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: #55575e; color: var(--secundario); margin: 0; white-space: nowrap; }
.desliza { position: relative; }
.filtros {
  display: flex; grid-gap: 0.5rem; gap: 0.5rem; margin: 0; padding: 0.375rem 0; list-style: none;   /* 6 px: sitio para el anillo de foco */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: 0.5rem; overscroll-behavior-x: contain;
}
.filtros li { flex: none; scroll-snap-align: start; }
/* «Todas» (quitar filtro) queda siempre a la vista. */
.filtros li:first-child { position: sticky; left: 0; z-index: 2; background: #ffffff; background: var(--fondo); padding-right: 0.5rem; box-shadow: 8px 0 8px -8px rgba(23, 24, 28, 0.2); }
.filtro {
  display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); padding: 0 1rem; border-radius: 999px; border-radius: var(--r-pill);
  border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta);
  font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; white-space: nowrap;
}
.filtro[aria-current="true"] { background: #17181c; background: var(--tinta); border-color: #17181c; border-color: var(--tinta); color: #ffffff; }
/* Señal de que la barra sigue (la pone el JS con data-scroll) */
.desliza::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2.5rem; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 85%); background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--fondo) 85%); opacity: 0; transition: opacity 0.2s ease;
}
.desliza[data-scroll="derecha"]::after, .desliza[data-scroll="ambos"]::after { opacity: 1; }
.sin-resultados { padding: 3rem 0; padding: var(--e-8) 0; text-align: center; color: #55575e; color: var(--secundario); font-size: 1.0625rem; font-size: var(--t-md); }

.familia { padding: 3rem 0 1.5rem; padding: var(--e-8) 0 var(--e-5); border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); }
.familia:first-of-type { border-top: 0; }
.familia-cabecera { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.5rem 1.5rem; gap: 0.5rem 1.5rem; grid-gap: 0.5rem var(--e-5); gap: 0.5rem var(--e-5); align-items: end; }
.familia-cabecera h2 { font-size: 1.9rem; font-size: var(--t-2xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.02em; margin: 0.5rem 0 0; line-height: 1.1; }
.familia-cuenta { font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: #55575e; color: var(--secundario); margin: 0; }
/* Más ancha que el texto corrido (2026-09-30): con 60ch «FLUIDMATIC» quedaba sola en la segunda línea. */
.familia-intro { grid-column: 1 / -1; max-width: 96ch; color: #55575e; color: var(--secundario); font-size: 1rem; font-size: var(--t-base); line-height: 1.55; margin: 0.5rem 0 0; }
.familia-intro-lead { margin: 0 0 0.5rem; color: #17181c; color: var(--tinta); font-weight: 700; }
/* Viñetas de texto (introducción de familia y «Cómo leer este catálogo», 2026-09-30): una idea por línea, con el
   mismo punto rojo de las tarjetas de inicio; el rótulo de cada idea va en negrita y más oscuro que el texto. */
.puntos { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 0.4375rem; gap: 0.4375rem; }
.puntos li { position: relative; padding-left: 1.125em; line-height: 1.5; text-wrap: pretty; }
.puntos li::before { content: ""; position: absolute; left: 0.125em; top: 0.6em; width: 0.4em; height: 0.4em; border-radius: 50%; background: #ED0000; background: var(--acento); }
.puntos strong { color: #17181c; color: var(--tinta); font-weight: 800; }
.familia-marcas { grid-column: 1 / -1; }

.elegir { margin: 1.75rem 0 0.5rem; background: #fbfbfc; background: var(--superficie-alt); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); }
/* Cerrados por defecto (el primer envase queda a la vista): el chevrón avisa de que se despliegan. */
.elegir summary { display: flex; align-items: center; justify-content: space-between; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); min-height: 3rem; padding: 0.875rem 1.375rem; font-weight: 800; cursor: pointer; list-style: none; }
.elegir summary::-webkit-details-marker { display: none; }
.elegir summary::after {
  content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-right: 0.25rem;
  border-right: 2px solid #55575e; border-right: 2px solid var(--secundario); border-bottom: 2px solid #55575e; border-bottom: 2px solid var(--secundario);
  transform: rotate(45deg); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.elegir[open] summary::after { transform: rotate(225deg); }
.elegir .tabla-envoltura { margin: 0 1.375rem 1.375rem; }

/* 17b. Catálogo: grilla y tarjetas ----------------------------- */
.productos-grilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.125rem; gap: 1.125rem; grid-gap: var(--gap); gap: var(--gap); margin-top: 1.75rem; }
.producto {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--radio); background: #ffffff; background: var(--fondo); overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.producto-imagen { border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); }
.producto-cuerpo { display: flex; flex-direction: column; grid-gap: 0.5rem; gap: 0.5rem; padding: 1.375rem 1.375rem calc(1.375rem + 0.125rem); padding: var(--tarjeta-pad) var(--tarjeta-pad) calc(var(--tarjeta-pad) + 0.125rem); flex: 1; }
.producto-nombre { font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; line-height: 1.25; margin: 0; letter-spacing: -0.005em; min-height: 2.5em; }
.producto-nombre a { color: #17181c; color: var(--tinta); }
.producto-nombre a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 1.125rem; border-radius: var(--radio); }
/* Mini viñetas de la tarjeta (2026-09-30): base, grado y especificaciones en líneas cortas. Los puntos rojos
   cuelgan en el margen de la tarjeta, así nombre, grado y especificaciones empiezan en el mismo borde. */
.producto-puntos { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 0.25rem; gap: 0.25rem; align-content: start; font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.4; color: #55575e; color: var(--secundario); }
.producto-puntos li { position: relative; overflow-wrap: anywhere; }
.producto-puntos li::before { content: ""; position: absolute; left: -0.75rem; top: 0.55em; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #ED0000; background: var(--acento); }
.producto-ver { margin-top: auto; padding-top: 0.25rem; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #b50000; color: var(--acento-oscuro); }
.producto.oculto, .familia.oculta, .oculto { display: none; }
.buscando .familia-intro, .buscando .elegir, .buscando .familia-marcas { display: none; }
/* Con subgrid, imagen, nombre, viñetas y CTA comparten filas en toda la fila de tarjetas. */
@supports (grid-template-rows: subgrid) {
  .producto { display: grid; grid-template-rows: subgrid; grid-row: span 4; grid-row-gap: 0; row-gap: 0; }
  .producto-cuerpo { display: grid; grid-template-rows: subgrid; grid-row: span 3; grid-row-gap: 0.625rem; row-gap: 0.625rem; }
  .producto-nombre { min-height: 0; }
  .producto-ver { align-self: end; margin-top: 0; }
}

/* 17c. Marco de imagen uniforme (grilla y ficha) ---------------
   Todas las imágenes de producto viven en un marco 4:5 idéntico (mismo fondo,
   mismo aire). El generador mide el envase dentro de cada foto (cuadro del
   contenido no blanco) y escribe --k, --ex y --ey: el envase queda centrado y
   con la misma altura en todos los marcos, sin deformar ni recortar. */
.marco-imagen { position: relative; overflow: hidden; background: #ffffff; }
.marco-imagen::before { content: ""; display: block; padding-top: 125%; }
.marco-imagen > img {
  position: absolute; left: 50%; top: 50%;
  width: auto; max-width: none; height: calc(0.82 * 100%); height: calc(var(--k, 0.82) * 100%);
  transform: translate(calc(0.5 * -100%), calc(0.5 * -100%)); transform: translate(calc(var(--ex, 0.5) * -100%), calc(var(--ey, 0.5) * -100%));
  object-fit: contain;
}
.marco-imagen[data-imagen="linea"]::after {
  content: "Imagen referencial"; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.625rem; width: fit-content; margin-left: auto; margin-right: auto;
  padding: 0.25rem 0.625rem; border-radius: 999px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); border: 1px solid #e8e9ec; border: 1px solid var(--borde);
  font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #55575e; color: var(--secundario); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center;   /* nunca sobresale del marco */
}
/* Marcador con identidad para los productos sin foto de envase en el catálogo. Mismo fondo blanco
   que las fotos (marco idéntico para los tres tipos): la identidad la dan la franja y la tipografía. */
.marcador {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 12% 8% 14%; padding: 12% var(--marco-relleno) 14%; grid-gap: 0.25em; gap: 0.25em;
}
.marco-imagen[data-imagen="marcador"], .marco-imagen[data-imagen="linea"] { container-type: inline-size; }
.marcador-franja { position: absolute; top: 0; left: 0; right: 0; height: 0.375rem; }
.marcador-linea { font-size: 1.125rem; font-weight: 900; font-weight: 1000; letter-spacing: -0.02em; line-height: 1.05; color: #17181c; color: var(--tinta); overflow-wrap: anywhere; }
.marcador-resto { font-size: 0.875rem; font-weight: 800; line-height: 1.2; color: #17181c; color: var(--tinta); overflow-wrap: anywhere; }
.marcador-grado { font-size: 0.75rem; font-weight: 700; line-height: 1.3; color: #55575e; color: var(--secundario); margin-top: 0.25em; overflow-wrap: anywhere; }
/* El tamaño del marcador sigue al ancho del marco (container query; sin soporte, quedan los tamaños de arriba). */
@container (min-width: 14rem) {
  .marcador-linea { font-size: 1.5rem; }
  .marcador-resto { font-size: 1.0625rem; }
  .marcador-grado { font-size: 0.875rem; }
}
@container (min-width: 22rem) {
  .marcador-linea { font-size: 2.25rem; }
  .marcador-resto { font-size: 1.375rem; }
  .marcador-grado { font-size: 1rem; }
}
.marcador-nota {
  position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.625rem; width: fit-content; margin-left: auto; margin-right: auto;
  padding: 0.25rem 0.625rem; border-radius: 999px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); border: 1px solid #e8e9ec; border: 1px solid var(--borde);
  font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #55575e; color: var(--secundario); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center;   /* nunca sobresale del marco */
}
/* Marcos estrechos (tarjetas de 150–190 px en celular): el rótulo puede ir en dos líneas y con menos tracking. */
@container (max-width: 12rem) {
  .marcador-nota, .marco-imagen[data-imagen="linea"]::after { white-space: normal; letter-spacing: 0.02em; line-height: 1.15; max-width: 88%; }
}

/* 18. Tablas --------------------------------------------------- */
.tabla-envoltura { position: relative; }
.tabla-pista { display: none; margin: 0 0 0.5rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; color: #55575e; color: var(--secundario); }
.tabla-envoltura[data-scroll="derecha"] .tabla-pista, .tabla-envoltura[data-scroll="ambos"] .tabla-pista { display: block; }
.tabla-contenedor { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 0.75rem; border-radius: var(--r-md); background: #ffffff; background: var(--fondo); }
.tabla-envoltura.desliza::after { border-radius: 0 0.75rem 0.75rem 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.45; }
.tabla th, .tabla td { padding: 0.6875rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); }
.tabla thead th { background: #f6f7f8; background: var(--superficie); font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #55575e; color: var(--secundario); white-space: nowrap; }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla tbody th { font-weight: 700; }
.tabla .metodo { color: #55575e; color: var(--secundario); font-size: 0.84rem; font-size: var(--t-xs); }
.tabla th .metodo { display: block; font-weight: 600; margin-top: 0.125rem; }
.tabla .codigo { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.84rem; font-size: var(--t-xs); overflow-wrap: anywhere; }
/* Tablas anchas (varios grados): desplazamiento propio con la columna «Característica» fija. */
.tabla-ancha th { white-space: nowrap; }
.tabla-ancha td { white-space: normal; min-width: 4.5rem; }
.tabla-ancha tbody th, .tabla-ancha thead th:first-child { position: sticky; left: 0; z-index: 1; background: #ffffff; background: var(--fondo); box-shadow: 1px 0 0 #e8e9ec; box-shadow: 1px 0 0 var(--borde); white-space: normal; min-width: 13rem; min-width: min(42vw, 13rem); max-width: 16rem; transition: box-shadow 0.2s ease; }
.tabla-ancha thead th:first-child { background: #f6f7f8; background: var(--superficie); z-index: 2; }
.tabla-envoltura[data-scroll="izquierda"] .tabla-ancha tbody th, .tabla-envoltura[data-scroll="ambos"] .tabla-ancha tbody th,
.tabla-envoltura[data-scroll="izquierda"] .tabla-ancha thead th:first-child, .tabla-envoltura[data-scroll="ambos"] .tabla-ancha thead th:first-child { box-shadow: 6px 0 10px -4px rgba(23, 24, 28, 0.18), 1px 0 0 #e8e9ec; box-shadow: 6px 0 10px -4px rgba(23, 24, 28, 0.18), 1px 0 0 var(--borde); }

/* 19. Ficha de producto ---------------------------------------- */
.ficha-heroe {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "figura" "datos";
  grid-gap: 1.5rem; gap: 1.5rem; grid-gap: var(--e-5); gap: var(--e-5); align-items: start; padding: 1.5rem 0 3rem; padding: var(--e-5) 0 var(--e-8);
}
.ficha-titulo { grid-area: titulo; }
.ficha-figura { grid-area: figura; margin: 0; width: 100%; max-width: 17rem; margin-left: auto; margin-right: auto; background: #ffffff; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.5rem; border-radius: var(--r-2xl); overflow: hidden; }
.ficha-figura figcaption { font-size: 0.84rem; font-size: var(--t-xs); color: #55575e; color: var(--secundario); text-align: center; padding: 0.625rem 1rem; padding: 0.625rem var(--e-4); border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); background: #fbfbfc; background: var(--superficie-alt); }
.ficha-datos { grid-area: datos; }
.ficha-info h1 { font-size: 2.75rem; font-size: var(--t-4xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.025em; line-height: 1.05; line-height: var(--lh-titulo); margin: 0.875rem 0 0; }
.ficha-info .bajada { margin: 1rem 0 0; margin: var(--e-4) 0 0; max-width: 60ch; max-width: var(--medida); }
.datos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.125rem 1.25rem; gap: 0.125rem 1.25rem; margin: 0; padding: 1.25rem 1.375rem; background: #f6f7f8; background: var(--superficie); border-radius: 1rem; border-radius: var(--r-lg); }
.datos dt { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #55575e; color: var(--secundario); padding-top: 0.125rem; }
.datos dd { margin: 0; font-weight: 700; }
.datos dd + dt { margin-top: 0.625rem; }
.datos dd a { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); margin-top: -0.5rem; margin-bottom: -0.5rem; }
/* Presentaciones en el recuadro de datos (2026-09-30): una por línea; la nota del catálogo sin negrita. */
.datos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 0.125rem; gap: 0.125rem; }
.datos-nota { display: block; font-weight: 400; color: #55575e; color: var(--secundario); }
.ficha-info .acciones { justify-content: flex-start; margin-top: 1.75rem; }

.ficha-cuerpo { padding: 0.5rem 0 4.5rem; }
.bloques { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.125rem; gap: 1.125rem; grid-gap: var(--gap); gap: var(--gap); }
.bloque { border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--radio); padding: 1.375rem calc(1.375rem + 0.125rem); padding: var(--tarjeta-pad) calc(var(--tarjeta-pad) + 0.125rem); background: #ffffff; background: var(--fondo); min-width: 0; }
.bloque-ancho { grid-column: 1 / -1; }
.bloque h2 { font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; letter-spacing: -0.01em; margin: 0 0 1rem; margin: 0 0 var(--e-4); }
.bloque h3 { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #55575e; color: var(--secundario); margin: 1.375rem 0 0.625rem; }
.bloque h3:first-of-type { margin-top: 0; }
.lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; grid-gap: 0.625rem; gap: 0.625rem; }
.lista li { position: relative; padding-left: 1.375rem; line-height: 1.55; line-height: var(--lh-texto); color: #17181c; color: var(--tinta); overflow-wrap: anywhere; max-width: 60ch; max-width: var(--medida); }
.lista li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ED0000; background: var(--acento); }
/* Ficha (2026-09-30): todo empieza en el mismo borde que el título del bloque. Los puntos rojos cuelgan en el
   relleno del bloque, la idea principal va en negrita y las tablas pierden el relleno y el borde laterales. */
.bloque .lista li { padding-left: 0; }
.bloque .lista li::before { left: -0.9375rem; }
.bloque .lista strong { font-weight: 800; }
/* Listas de nombres cortos (normas, aprobaciones) en columnas en todas las pantallas (2026-09-30); el hueco entre
   columnas deja sitio al punto que cuelga a la izquierda de cada nombre. */
.bloque .lista.lista-corta { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); grid-gap: 0.625rem 1.75rem; gap: 0.625rem 1.75rem; columns: auto; }
.bloque .lista.lista-corta li { margin-bottom: 0; }
@media (min-width: 768px) { .bloque .lista.lista-corta { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } }
.bloque .tabla-contenedor { border-left: 0; border-right: 0; border-radius: 0; }
.bloque .tabla th:first-child, .bloque .tabla td:first-child { padding-left: 0; }
.bloque .tabla th:last-child, .bloque .tabla td:last-child { padding-right: 0; }
.bloque .tabla thead th { background: transparent; border-bottom: 2px solid #d9dade; border-bottom: 2px solid var(--borde-fuerte); }
.bloque .tabla-ancha thead th:first-child { background: #ffffff; background: var(--fondo); }
.nota { font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.55; line-height: var(--lh-texto); color: #55575e; color: var(--secundario); margin: 0.875rem 0 0; max-width: 60ch; max-width: var(--medida-larga); }
.nota-destacada { border-left: 3px solid #ED0000; border-left: 3px solid var(--acento); padding: 0.25rem 0 0.25rem 0.875rem; }
.bloque .nota-destacada { margin-left: calc(-0.875rem - 3px); }   /* la barra roja cuelga en el relleno: el texto empieza en el borde del título */
.ficha-texto { margin: 0; line-height: 1.6; max-width: 60ch; max-width: var(--medida); }
.cta-ficha p { max-width: 60ch; max-width: var(--medida); }

.vecinos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); margin-top: 2.5rem; margin-top: var(--e-7); }
.vecino { display: flex; flex-direction: column; justify-content: center; grid-gap: 0.25rem; gap: 0.25rem; min-height: 4rem; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); padding: 1.125rem 1.375rem; color: #17181c; color: var(--tinta); }
.vecino-etiqueta { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #55575e; color: var(--secundario); }
.vecino-nombre { font-weight: 900; }
.vecino-siguiente { text-align: right; }

.cta-ficha { margin-top: 2.5rem; margin-top: var(--e-7); background: #f6f7f8; background: var(--superficie); border-radius: 1.5rem; border-radius: var(--r-2xl); padding: 2.5rem; padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; grid-gap: 1.5rem; gap: 1.5rem; grid-gap: var(--e-5); gap: var(--e-5); flex-wrap: wrap; }
/* Tarjeta de contacto arriba en sectores y guías (2026-10-07, pedido del usuario: más visible). Debajo de ella, el mismo
   aire que arriba (el mapa ilustrado traía 1,5 rem desde la computadora). */
.cta-ficha.cta-arriba + .mapa-visual, .cta-ficha.cta-arriba + .guia-seccion { margin-top: 2.5rem; margin-top: var(--e-7); }
.cta-ficha h2 { font-size: 1.9rem; font-size: var(--t-2xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.015em; margin: 0; line-height: 1.1; }
.cta-ficha p { margin: 0.5rem 0 0; color: #55575e; color: var(--secundario); }

/* 20. (La leyenda «Cómo leer este catálogo» se retiró el 2026-10-21, pedido del usuario.) */

/* 21. Página 404 ----------------------------------------------- */
.error { padding: 6rem 0; padding: clamp(4rem, 3rem + 5vw, 7.5rem) 0; text-align: center; }
.error h1 { font-size: 3.5rem; font-size: var(--t-hero); font-weight: 900; font-weight: 1000; letter-spacing: -0.025em; margin: 0.875rem 0 0; line-height: 1.05; line-height: var(--lh-titulo); }
.error .bajada { max-width: 55ch; margin: 1.5rem auto 0; margin: var(--e-5) auto 0; }

/* 21 bis. Lubriguía (2026-09-29) --------------------------------- */
/* Desplegables Marca → Modelo → Año (main.js), tarjeta de resultado, leyenda de prioridades y la tabla completa
   por marca (que se lee también sin JavaScript). Desplegables: uno debajo de otro en el celular, de dos en dos en la
   tableta (Año abajo; Modelo más ancho: sus textos son los más largos) y, desde 1024 px, de nuevo uno debajo de otro en
   la columna izquierda (distribución del 2026-10-12). */
.lg-panel { background: #f6f7f8; background: var(--superficie); border-radius: 1.5rem; border-radius: var(--r-2xl); padding: 2rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.lubriguia-campos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); }
.campo { display: grid; grid-gap: 0.375rem; gap: 0.375rem; min-width: 0; }
.campo label { font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #17181c; color: var(--tinta); }
.campo select {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0 2.75rem 0 1rem; border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); border-radius: 0.75rem; border-radius: var(--r-md);
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.25rem; background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.25rem;
  color: #17181c; color: var(--tinta); font: inherit; font-size: max(1rem, var(--t-base)); font-weight: 700; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.campo select:disabled { color: #6b6d75; color: var(--suave); border-color: #d9dade; border-color: var(--borde-fuerte); cursor: not-allowed; }
/* Lista desplegable con 7 opciones visibles como máximo, que se desplaza para ver el resto y se abre hacia
   abajo (pedido del 2026-09-29: la lista nativa tapaba el buscador y se salía de la pantalla). Usa el
   select personalizable (appearance: base-select, Chrome y Edge 135+); donde no existe queda el desplegable
   del sistema (en celulares, el selector propio del teléfono). */
@supports (appearance: base-select) {
  .campo select, .campo select::picker(select) { appearance: base-select; }
  .campo select { display: flex; align-items: center; }
  .campo select::picker-icon { display: none; }            /* ya lleva la flecha propia (fondo SVG) */
  .campo select::picker(select) {
    box-sizing: border-box; max-block-size: calc(7 * 2.75rem + 0.75rem + 2px); overflow-y: auto; overscroll-behavior: contain;
    margin-block: 0.375rem; padding: 0.375rem; border: 1px solid #d9dade; border: 1px solid var(--borde-fuerte); border-radius: 0.75rem; border-radius: var(--r-md);
    background: #ffffff; background: var(--fondo); box-shadow: 0 12px 32px rgba(23, 24, 28, 0.14);
    position-try-order: normal;                            /* primero hacia abajo; sube solo si abajo no cabe */
  }
  .campo select option { display: flex; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border-radius: var(--r-sm); color: #17181c; color: var(--tinta); font-weight: 600; cursor: pointer; }
  .campo select option:hover { background: #f6f7f8; background: var(--superficie); }
  .campo select option:focus-visible { background: #f6f7f8; background: var(--superficie); outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: -0.1875rem; }
  .campo select option:checked { font-weight: 800; color: #b50000; color: var(--acento-oscuro); }
  .campo select option::checkmark { color: #b50000; color: var(--acento-oscuro); }
}
/* Búsqueda escribiendo (2026-09-30): campo como los desplegables y resultados en botones debajo. */
.lg-buscar { position: relative; }
.lg-buscar input {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0 1rem; border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); border-radius: 0.75rem; border-radius: var(--r-md);
  background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); font: inherit; font-size: max(1rem, var(--t-base)); font-weight: 700;
}
.lg-buscar input::placeholder { color: #55575e; color: var(--secundario); font-weight: 600; }   /* contraste ≥ 4,5:1 */
.lg-buscar input:focus { border-color: #17181c; border-color: var(--tinta); }
/* La lista flota sobre la página (como un menú): abrirla o cerrarla no mueve los desplegables de abajo. */
.lg-sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; max-height: 60vh; max-height: min(60vh, 34rem); overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0.375rem 0 0; padding: 0.375rem; border: 1px solid #d9dade; border: 1px solid var(--borde-fuerte); border-radius: 0.75rem; border-radius: var(--r-md);
  background: #ffffff; background: var(--fondo); box-shadow: 0 12px 32px rgba(23, 24, 28, 0.14); display: grid; grid-gap: 0.125rem; gap: 0.125rem; }
.lg-sugerencias[hidden] { display: none; }
.lg-sugerencia { display: grid; width: 100%; min-height: 2.75rem; min-height: var(--objetivo); padding: 0.5rem 0.75rem; border: 0; border-radius: 0.5rem; border-radius: var(--r-sm);
  background: transparent; color: #17181c; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.lg-sugerencia:hover { background: #f6f7f8; background: var(--superficie); }
.lg-sugerencia:focus { background: #f6f7f8; background: var(--superficie); outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: -0.1875rem; }
.lg-sugerencia:focus-visible { outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: -0.1875rem; }
.lg-sugerencia-modelo { font-weight: 800; overflow-wrap: anywhere; }
.lg-sugerencia-meta { font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
.lg-sin-resultados { padding: 0.5rem 0.75rem; font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
.lg-sin-resultados a { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); margin-right: 1rem; font-weight: 700; }
.lg-o { margin: 1rem 0 0.75rem; margin: var(--e-4) 0 0.75rem; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: #55575e; color: var(--secundario); }
/* Compartir la recomendación (2026-09-30). */
.lg-compartir { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.5rem 1rem; gap: 0.5rem 1rem; margin-top: 1.5rem; margin-top: var(--e-5); }
.lg-compartir-boton { font-family: inherit; cursor: pointer; }
.lg-compartir-estado { margin: 0; font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
.lg-compartir-estado:empty { display: none; }
/* La región aria-live queda siempre en el árbol (vacía, sin margen): así se anuncia el resultado al llenarse. */
.lubriguia-resultado { margin-top: 1.5rem; margin-top: var(--e-5); }
.lubriguia-resultado:empty { margin-top: 0; }
/* Tarjeta del vehículo (2026-10-12, propuesta visual aprobada; compacta por pedido del usuario: completa pero sin espacio
   de sobra, pensando en el celular): cabecera oscura con marca, modelo, combustible y año; debajo, transmisión y aceite de
   motor (lado a lado cuando caben, transmisión a la izquierda) y «Adicionales», cada uno con el ícono de su familia. */
.lg-ficha { background: #ffffff; background: var(--fondo); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--r-xl); overflow: hidden; }
.lg-ficha-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; grid-gap: 0.875rem 1rem; gap: 0.875rem 1rem;
  padding: 1.25rem 1.5rem; background: #17181c; background: var(--tinta); color: #ffffff; }
.lg-ficha-nombre { flex: 1 1 14rem; min-width: 0; }
/* «Compartir esta recomendación» en la cabecera oscura, con el ícono de compartir; más compacto que el botón general. */
.lg-ficha-cabecera .lg-compartir { margin-top: 0; }
.lg-ficha-cabecera .lg-compartir-boton { min-height: 2.75rem; padding: 0.5rem 1.125rem; grid-gap: 0.5rem; gap: 0.5rem; font-size: 0.9rem; font-size: var(--t-sm); }
.lg-compartir-icono { width: 1.125rem; height: 1.125rem; }
.lg-ficha-cabecera .lg-compartir-estado { color: #d5d6db; }
.lg-ficha-cabecera .cejilla { color: #FFD500; }
.lg-ficha h3 { font-size: 1.9rem; font-size: var(--t-2xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.02em; line-height: 1.1; margin: 0.25rem 0 0; overflow-wrap: anywhere; color: #ffffff; }
.lg-etiquetas { display: flex; flex-wrap: wrap; grid-gap: 0.5rem; gap: 0.5rem; margin-top: 0.625rem; letter-spacing: 0; }
.lg-etiqueta { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.75rem; border-radius: 999px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.12); font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #ffffff; }
.lg-ficha-cuerpo { padding: 1.25rem; }
.lg-ficha-cuerpo > .lg-aviso:first-child { margin-top: 0; }
.lg-ficha-cuerpo > .lg-aviso + .lg-sistemas { margin-top: 1rem; margin-top: var(--e-4); }
.lg-sistema-titulo { display: flex; align-items: center; grid-gap: 0.625rem; gap: 0.625rem; margin: 0; font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; }
.lg-sistema-icono { flex: none; width: 2.125rem; height: 2.125rem; padding: 0.4375rem; box-sizing: border-box; border-radius: 0.5rem; border-radius: var(--r-sm); background: #fdeaea; color: #b50000; color: var(--acento-oscuro); }
.lg-sistemas { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.75rem; grid-gap: 0.75rem; gap: 0.75rem; }
.lg-sistema { display: flex; flex-direction: column; min-width: 0; padding: 1rem; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); background: #ffffff; background: var(--fondo); }
/* Tarjeta sin datos todavía (transmisión y diferencial): un renglón por sistema, título a la izquierda y «Próximamente» a
   la derecha, separados por una línea. */
.lg-sistema-pronto { justify-content: center; }
.lg-subsistema { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; grid-gap: 0.5rem 0.75rem; gap: 0.5rem 0.75rem; }
.lg-subsistema + .lg-subsistema { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); }
.lg-pronto-chip { display: inline-flex; align-items: center; flex: none; min-height: 1.5rem; padding: 0 0.625rem; border-radius: 999px; border-radius: var(--r-pill);
  background: #f6f7f8; background: var(--superficie); border: 1px solid #d9dade; border: 1px solid var(--borde-fuerte); font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; color: #17181c; color: var(--tinta); white-space: nowrap; }
/* Opciones dentro de la tarjeta, más ceñidas que las de antes. */
.lg-sistema .lg-opciones { margin-top: 0.75rem; grid-gap: 0.5rem; gap: 0.5rem; }
.lg-sistema .lg-opciones li { grid-gap: 0.625rem; gap: 0.625rem; padding: 0.625rem 0.75rem; }
.lg-sistema .lg-opciones .prioridad-numero { width: 1.75rem; height: 1.75rem; font-size: 0.9rem; font-size: var(--t-sm); }
.lg-sistema .lg-opciones .opcion-nombre { font-size: 1rem; font-size: var(--t-base); line-height: 1.25; }
.lg-sistema .opcion { grid-gap: 0.125rem; gap: 0.125rem; }
/* Adicionales, en el orden pedido (refrigerante, líquido de frenos, grasas de chasis): en el celular, una caja con un renglón
   por producto (ícono, nombre y «Próximamente» a la derecha); desde 600 px, tres casillas por fila, salvo de 1024 a 1279 px
   (columna derecha angosta: «Próximamente» no cabía en la casilla), donde siguen en renglones. */
.lg-sistemas + .lg-adicionales { margin-top: 1.25rem; }
.lg-adicionales-titulo { margin: 0; font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; }
.lg-adicionales-lista { list-style: none; margin: 0.625rem 0 0; padding: 0; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); }
.lg-adicionales-lista > li { display: flex; align-items: center; min-width: 0; padding: 0.5rem 0.625rem; }
.lg-adicionales-lista > li + li { border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); }
.lg-adicionales-lista .lg-sistema-icono { margin-right: 0.5rem; }
.lg-adicional-texto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex: 1; min-width: 0; grid-gap: 0.25rem 0.5rem; gap: 0.25rem 0.5rem; }
.lg-adicional-nombre { font-weight: 800; line-height: 1.25; overflow-wrap: break-word; }
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1280px) {
  .lg-adicionales-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 0.625rem; grid-gap: 0.625rem; gap: 0.625rem; border: 0; border-radius: 0; }
  .lg-adicionales-lista > li { align-items: flex-start; padding: 0.75rem; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); }
  .lg-adicionales-lista > li + li { border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); }
  .lg-adicional-texto { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
}
/* Aceite de motor a la izquierda (más ancho: el nombre de cada aceite cabe en una línea, medido el 2026-10-12) y transmisión
   a la derecha (sin datos solo lleva su título y «Próximamente»): tableta de 768 a 1023 px y PC desde 1280 px. En el
   celular y de 1024 a 1279 px (columna derecha angosta), uno debajo de otro, el aceite de motor primero. */
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1280px) {
  .lg-sistemas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  /* Al lado del aceite de motor (más alto y más ancho): en cada renglón, título y debajo «Próximamente». */
  .lg-subsistema { flex-direction: column; align-items: flex-start; }
}
@supports not (display: grid) { .lg-sistemas > * + *, .lg-adicionales-lista > li + li { margin-top: 0.75rem; } }
/* «Compartir» compacto en la esquina superior derecha de la cabecera hasta 767 px (pedido del usuario, 2026-10-12): el
   ícono y «Compartir»; «esta recomendación» queda para el lector de pantalla. Bajo 375 px, solo el ícono (el nombre del
   modelo se quedaba sin ancho). */
@media (max-width: 767.98px) {
  .lg-ficha-cabecera { flex-wrap: nowrap; align-items: flex-start; }
  .lg-ficha-nombre { flex: 1 1 auto; }
  .lg-ficha-cabecera .lg-compartir { flex: none; flex-direction: column; align-items: flex-end; margin-top: 0; }
  .lg-ficha-cabecera .lg-compartir-boton { min-height: 2.75rem; padding: 0.5rem 0.875rem; }
  .lg-ficha-cabecera .lg-compartir-estado { max-width: 9rem; font-size: 0.84rem; font-size: var(--t-xs); text-align: right; }
  .lg-compartir-resto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 374.98px) {
  .lg-ficha-cabecera .lg-compartir-boton { width: 2.75rem; padding: 0; }
  .lg-compartir-rotulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* Celulares de menos de 375 px: «Líquido de frenos» y su «Próximamente» no caben en un renglón; en los tres adicionales la
   etiqueta va debajo del nombre, para que se vean iguales. */
@media (max-width: 374.98px) { .lg-adicional-texto { flex-direction: column; align-items: flex-start; } }
/* Aviso «Elige tu vehículo»: solo desde 1024 px, en la columna derecha mientras no hay resultado. */
.lg-vacio { display: none; }
.lg-vacio-icono { width: 3rem; height: 3rem; color: #6b6d75; color: var(--suave); }
.lg-vacio p { margin: 0; max-width: 26ch; color: #55575e; color: var(--secundario); line-height: 1.5; }
.lg-vacio p strong { color: #17181c; color: var(--tinta); font-weight: 900; }
.lg-opciones { list-style: none; margin: 1.5rem 0 0; margin: var(--e-5) 0 0; padding: 0; display: grid; grid-gap: 0.75rem; gap: 0.75rem; }
.lg-opciones li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; grid-gap: 0.875rem; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); background: #fbfbfc; background: var(--superficie-alt); }
.lg-opciones li:first-child { border-color: #ED0000; border-color: var(--acento); box-shadow: inset 0.25rem 0 0 #ED0000; box-shadow: inset 0.25rem 0 0 var(--acento); }
.lg-ficha .nota { margin-top: 1rem; margin-top: var(--e-4); }
.lg-aviso { margin: 1rem 0 0; margin: var(--e-4) 0 0; padding: 0.75rem 1rem; border-radius: 0.75rem; border-radius: var(--r-md); background: #fff4f4; border: 1px solid #f3c4c4; color: #17181c; color: var(--tinta); font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.5; max-width: 60ch; max-width: var(--medida-larga); }
.lg-variante { margin: 1.5rem 0 -0.5rem; margin: var(--e-5) 0 -0.5rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #55575e; color: var(--secundario); }
/* Círculo de cada opción: el número es el orden (1, 2, 3) y el color, el tipo según el Excel: rojo = recomendación
   del fabricante («1»); gris oscuro = opción por viscosidad («2»). En la leyenda va sin número (.prioridad-color). */
.prioridad-numero { display: flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #b50000; background: var(--acento-oscuro); color: #ffffff; font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; line-height: 1; }
.prioridad-numero.prioridad-2 { background: #55575e; background: var(--secundario); }
.prioridad-color { flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: #b50000; background: var(--acento-oscuro); }
.prioridad-color.prioridad-2 { background: #55575e; background: var(--secundario); }
.opcion { display: grid; grid-gap: 0.25rem; gap: 0.25rem; min-width: 0; }
.opcion-nombre { font-weight: 800; color: #17181c; color: var(--tinta); overflow-wrap: anywhere; }
.lg-opciones .opcion-nombre { font-size: 1.0625rem; font-size: var(--t-md); line-height: 1.3; }
a.opcion-nombre { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.opcion-meta { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.25rem 0.5rem; gap: 0.25rem 0.5rem; font-size: 0.84rem; font-size: var(--t-xs); color: #55575e; color: var(--secundario); }
.opcion-sae { font-weight: 800; color: #17181c; color: var(--tinta); white-space: nowrap; }
/* Leyenda en un recuadro (2026-09-30): los círculos de color cuelgan en su relleno y el texto de cada línea
   empieza en el mismo borde que el título «Cómo leer la Lubriguía». */
.lubriguia-leyenda { margin-top: 2.5rem; margin-top: var(--e-7); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--radio); background: #ffffff; background: var(--fondo); padding: 1.375rem calc(1.375rem + 0.5rem); padding: var(--tarjeta-pad) calc(var(--tarjeta-pad) + 0.5rem); }
.lubriguia-leyenda h2, .lubriguia-lista h2 { font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; letter-spacing: -0.01em; margin: 0 0 1rem; margin: 0 0 var(--e-4); }
.lubriguia-leyenda h2 + .nota { margin-top: 0; }
.lubriguia-prioridades { list-style: none; margin: 0.875rem 0 0; padding: 0; display: grid; grid-gap: 0.75rem; gap: 0.75rem; }
.lubriguia-prioridades li { position: relative; }
.lubriguia-prioridades .prioridad-color { position: absolute; left: -1.375rem; top: 0.375em; width: 0.75rem; height: 0.75rem; }
.lubriguia-prioridades p { margin: 0; line-height: 1.5; color: #55575e; color: var(--secundario); max-width: 60ch; max-width: var(--medida-larga); }
/* Lubriguía como app en el celular (2026-10-07, pedido del usuario): «Cómo leer la Lubriguía» sin el párrafo de arriba y
   centrada, con el punto de color delante de cada texto (ya no colgando a la izquierda). La tabla completa por marca no
   se ve con JavaScript: es la fuente de datos del buscador; sin JavaScript sigue visible. */
.lubriguia-leyenda { text-align: center; }
.lubriguia-leyenda .nota { margin-left: auto; margin-right: auto; }   /* tiene ancho máximo: en PC quedaba a la izquierda */
.lubriguia-prioridades { justify-items: center; }
.lubriguia-prioridades .prioridad-color { position: static; display: inline-block; vertical-align: 0.05em; margin-right: 0.5rem; }
.lubriguia-prioridades p { display: inline; }
.js .lubriguia-lista { display: none; }
/* Sin la tabla, la leyenda es lo último antes del pie: aire de sección debajo para que no quede pegada al pie oscuro
   («se ve como si fuera una página recortada», 2026-10-07). */
.js .lubriguia-app { margin-bottom: 4.5rem; margin-bottom: var(--seccion); }
/* Desde 1024 px (2026-10-12): buscador y «Cómo leer» en la columna izquierda (26 rem), la tarjeta a la derecha. */
@media (min-width: 1024px) {
  .lubriguia-app { display: grid; grid-template-columns: 26rem minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "panel resultado" "leyenda resultado"; grid-column-gap: 2rem; column-gap: 2rem; grid-column-gap: var(--e-6); column-gap: var(--e-6); align-items: start; }
  .lg-panel { grid-area: panel; }
  .lubriguia-resultado, .lubriguia-resultado:empty { grid-area: resultado; margin-top: 0; }
  .lubriguia-resultado:empty + .lg-vacio { grid-area: resultado; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; grid-gap: 0.5rem; gap: 0.5rem;
    min-height: 20rem; padding: 2rem; padding: var(--e-6); border: 1.5px dashed #d9dade; border: 1.5px dashed var(--borde-fuerte); border-radius: 1.125rem; border-radius: var(--r-xl); text-align: center; }
  .lubriguia-leyenda { grid-area: leyenda; margin-top: 1.5rem; margin-top: var(--e-5); text-align: left; padding: 1.375rem; padding: var(--tarjeta-pad); }
  .lubriguia-leyenda h2 { font-size: 1.2rem; font-size: var(--t-lg); margin-bottom: 0.75rem; margin-bottom: var(--e-3); }
  .lubriguia-leyenda .nota { margin-left: 0; margin-right: 0; }
  .lubriguia-prioridades { justify-items: start; }
  .lubriguia-prioridades li { display: flex; align-items: baseline; }
  .lubriguia-prioridades .prioridad-color { flex: none; margin-right: 0.625rem; }
}
@supports not (display: grid) { .lubriguia-resultado:empty + .lg-vacio { display: none; } }
.lubriguia-prioridades strong { color: #17181c; color: var(--tinta); }
.lubriguia-lista { margin: 3rem 0 4rem; margin: var(--e-8) 0 4rem; margin-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.lubriguia-marcas { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.75rem; gap: 0.75rem; }
/* Tabla de cada marca (2026-09-30): el texto empieza en el mismo borde que el nombre de la marca (relleno del
   resumen), sin relleno ni bordes laterales, como las tablas de las fichas. */
.lubriguia-marca .tabla-envoltura { margin: 0 1.5rem 1rem; margin: 0 var(--e-5) var(--e-4); }
.lubriguia-marca .tabla-contenedor { border-left: 0; border-right: 0; border-radius: 0; }
.lubriguia-marca .tabla th:first-child, .lubriguia-marca .tabla td:first-child { padding-left: 0; }
.lubriguia-marca .tabla th:last-child, .lubriguia-marca .tabla td:last-child { padding-right: 0; }
.lubriguia-marca .tabla thead th { background: transparent; border-bottom: 2px solid #d9dade; border-bottom: 2px solid var(--borde-fuerte); }
.tabla-lubriguia td { min-width: 11rem; }
.tabla-lubriguia td[data-combustible] { min-width: 0; white-space: nowrap; }
.tabla-lubriguia td.vacia { color: #55575e; color: var(--secundario); }
.tabla-lubriguia tr:target > * { background: #fff4f4; }

/* 22. Botón «Subir» (catálogo largo) ---------------------------- */
.subir {
  position: fixed; z-index: 40;
  right: 1rem; bottom: 1rem; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #17181c; background: var(--tinta); color: #ffffff; box-shadow: 0 0 0 2px #ffffff, 0 6px 20px rgba(23, 24, 28, 0.25);   /* el anillo lo separa del pie */
  opacity: 0; transform: translateY(0.5rem); pointer-events: none; visibility: hidden;
  transition: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1), transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.15s;   /* invisible = fuera del orden de tabulación; sale en 150 ms */
}
.subir.visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; }   /* entra en 200 ms */
/* Con movimiento reducido, menos movimiento y no cero: fundido sin desplazamiento, como la barra de la ficha (revisión del
   catálogo, 2026-10-22: aparecía y desaparecía en un cuadro). */
@media (prefers-reduced-motion: reduce) {
  .subir { -webkit-transform: none !important; transform: none !important; transition: opacity 0.2s ease-out, visibility 0s linear 0.2s !important; }
  .subir.visible { transition: opacity 0.2s ease-out, visibility 0s !important; }
}
.subir svg { width: 1.375rem; height: 1.375rem; }

/* Guía por industria (Minería, 2026-10-01) ----------------------- */
/* Página de arriba abajo, como un brochure: mapa del proceso (zonas → etapas numeradas) y, en cada etapa, qué
   lubricante va en cada punto, con el tipo de producto de su ficha («AZOLLA ZS · Aceite hidráulico…»). */
.guia-intro { max-width: 60ch; max-width: var(--medida-larga); margin: 1rem 0 0; margin: var(--e-4) 0 0; font-size: 1rem; font-size: var(--t-base); line-height: 1.55; line-height: var(--lh-texto); color: #55575e; color: var(--secundario); }
.guia-seccion { margin-top: 4rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.guia-seccion > h2 { font-size: 1.9rem; font-size: var(--t-2xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
.guia-ayuda { margin: 0.5rem 0 1.5rem; margin: 0.5rem 0 var(--e-5); color: #55575e; color: var(--secundario); }
.mapa-zonas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2.5rem; gap: 2.5rem; grid-gap: var(--e-7); gap: var(--e-7); }
.mapa-zona { position: relative; background: #f6f7f8; background: var(--superficie); border-radius: 1.125rem; border-radius: var(--r-xl); padding: 1.5rem; padding: var(--e-5); }
/* Flecha entre zonas: hacia abajo en columna, hacia la derecha en fila. */
.mapa-zona + .mapa-zona::before { content: "↓"; position: absolute; left: 50%; top: calc(2.5rem / -2); top: calc(var(--e-7) / -2); transform: translate(-50%, -50%); color: #ED0000; color: var(--acento); font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; line-height: 1; }
.mapa-zona-titulo { display: flex; align-items: center; grid-gap: 0.625rem; gap: 0.625rem; margin: 0 0 1rem; margin: 0 0 var(--e-4); font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; color: #17181c; color: var(--tinta); }
.mapa-zona-titulo .icono, .etapas-zona .icono { flex: none; width: 1.75rem; height: 1.75rem; color: #ED0000; color: var(--acento); }
.mapa-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 0.625rem; gap: 0.625rem; }
.mapa-etapas li { position: relative; }
/* Línea que une los números de etapas seguidas. */
.mapa-etapas li + li::before { content: ""; position: absolute; left: calc(0.75rem + 1.125rem - 1px); top: -0.625rem; width: 2px; height: 0.625rem; background: #ED0000; background: var(--acento); }
.mapa-etapas a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); grid-column-gap: 0.75rem; column-gap: 0.75rem; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); padding: 0.625rem 0.875rem 0.625rem 0.75rem; background: #ffffff; background: var(--fondo); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); color: #17181c; color: var(--tinta); text-decoration: none; }
.mapa-num { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #ED0000; background: var(--acento); color: #ffffff; font-weight: 900; font-size: 0.9rem; font-size: var(--t-sm); }
.mapa-nombre { font-weight: 800; line-height: 1.25; }
.mapa-gamas { font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; color: #55575e; color: var(--secundario); line-height: 1.35; }
.mapa-soporte { margin: 1.5rem 0 0; margin: var(--e-5) 0 0; font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
.etapas-zona { display: flex; align-items: center; grid-gap: 0.625rem; gap: 0.625rem; margin: 2.5rem 0 1rem; margin: var(--e-7) 0 var(--e-4); font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; letter-spacing: -0.01em; }
.etapas-zona .icono { width: 2rem; height: 2rem; }
.etapa:target { border-color: #ED0000; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(237, 0, 0, 0.12); }   /* llegada desde un pin */
.etapa { border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--r-xl); background: #ffffff; background: var(--fondo); padding: 2rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.etapa + .etapa { margin-top: 1rem; margin-top: var(--e-4); }
.guia-seccion > .etapa:first-of-type { margin-top: 1.5rem; margin-top: var(--e-5); }
.etapa-cabecera { display: flex; align-items: center; grid-gap: 0.75rem; gap: 0.75rem; }
.etapa-num { flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #ED0000; background: var(--acento); color: #ffffff; font-weight: 900; font-size: 0.9rem; font-size: var(--t-sm); }
.etapa h3, .etapa h4 { margin: 0; font-size: 1.2rem; font-size: var(--t-lg); font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }
.etapa-texto { max-width: 60ch; max-width: var(--medida-larga); margin: 0.875rem 0 0; line-height: 1.55; line-height: var(--lh-texto); }
.etapa-equipos { margin: 0.5rem 0 0; font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.5; color: #55575e; color: var(--secundario); }
.etapa-equipos strong { color: #17181c; color: var(--tinta); }
.etapa-puntos { display: grid; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); margin: 1.5rem 0 0; margin: var(--e-5) 0 0; }
.etapa-punto { display: grid; grid-gap: 0.5rem; gap: 0.5rem; }
.etapa-punto dt { font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #17181c; color: var(--tinta); }
.etapa-punto dd { margin: 0; }
.lubricantes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); grid-gap: 0.5rem; gap: 0.5rem; }
.lubricantes li { display: flex; }
.lubricante { flex: 1 1 auto; display: flex; flex-direction: column; grid-gap: 0.1875rem; gap: 0.1875rem; min-height: 2.75rem; min-height: var(--objetivo); padding: 0.625rem 0.875rem; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-left: 3px solid #ED0000; border-left: 3px solid var(--acento); border-radius: 0.75rem; border-radius: var(--r-md); background: #fbfbfc; background: var(--superficie-alt); color: #17181c; color: var(--tinta); text-decoration: none; }
.lubricante-nombre { font-weight: 800; line-height: 1.25; }
.lubricante-tipo { font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.4; color: #55575e; color: var(--secundario); }
.lubricante-grado { font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; color: #55575e; color: var(--secundario); }
.lubricantes-tipo { margin: 0.5rem 0 0; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.4; color: #55575e; color: var(--secundario); }
.etapa-volver { margin: 1rem 0 0; margin: var(--e-4) 0 0; font-size: 0.9rem; font-size: var(--t-sm); }
.guia-revisamos { margin: 1rem 0 0; margin: var(--e-4) 0 0; padding-left: 1.25rem; display: grid; grid-gap: 0.5rem; gap: 0.5rem; line-height: 1.55; line-height: var(--lh-texto); max-width: 60ch; max-width: var(--medida-larga); }
.guia-volver { margin: 1.5rem 0 3rem; margin: var(--e-5) 0 var(--e-8); }
@media (hover: hover) and (pointer: fine) {
  .mapa-etapas a:hover, .lubricante:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); text-decoration: none; }
  .lubricante:hover { border-left-color: #ED0000; border-left-color: var(--acento); }
  .mapa-etapas a:hover .mapa-nombre, .lubricante:hover .lubricante-nombre { color: #b50000; color: var(--acento-oscuro); }
}
@media (min-width: 768px) {
  .etapa-punto { grid-template-columns: 13rem minmax(0, 1fr); grid-gap: 1rem; gap: 1rem; align-items: start; }
  .etapa-punto dt { padding-top: 0.75rem; }
}
@media (min-width: 1024px) {
  .mapa-zonas { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 2.5rem; gap: 2.5rem; grid-gap: var(--e-7); gap: var(--e-7); align-items: start; }
  .mapa-zona + .mapa-zona::before { content: "→"; left: calc(2.5rem / -2); left: calc(var(--e-7) / -2); top: 3.25rem; transform: translate(-50%, -50%); }
  .mapa-zona:nth-child(3n + 1)::before { content: none; }   /* con 4 zonas (azúcar), la que abre la segunda fila */
}

/* Mapa ilustrado (2026-10-01): la panorámica del brochure de TotalEnergies (o un dibujo propio) con un pin numerado por
   etapa, entre el título y el mapa del proceso. Desde el 2026-10-02 (pedido del usuario) el dibujo entra SIEMPRE entero en
   la pantalla, sin desplazamiento lateral: con el lienzo de 68 rem o más (46 rem en el formato compacto) los pines llevan
   su etiqueta, como se midieron sin choques; por debajo, quedan solo con su número, del tamaño del dibujo, y el nombre de
   cada etapa está en el mapa del proceso, justo debajo (como en la impresión con «imprimir_solo_numeros»). */
/* Sin min() (Chromium < 79: televisores) el ancho se calcula con calc() y el centrado con translateX; con min(), en
   @supports, el cálculo de siempre (2026-10-05). */
.mapa-visual { position: relative; left: 50%; width: calc(100vw - 2rem); max-width: 100rem; margin: 2.5rem 0 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
@supports (width: min(1px, 2px)) {
  .mapa-visual { --ancho-mapa: min(100vw - 2rem, 100rem); left: auto; max-width: none; -webkit-transform: none; transform: none; width: var(--ancho-mapa); margin: var(--e-7) 0 0 calc(50% - var(--ancho-mapa) / 2); }
}
.mapa-visual-marco { overflow: hidden; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--r-xl); background: #ffffff; }
.mapa-visual-lienzo { position: relative; }
.mapa-visual-lienzo img { display: block; width: 100%; height: auto; }
.mapa-pin { position: absolute; display: flex; align-items: center; grid-gap: 0.375rem; gap: 0.375rem; transform: translate(-1rem, -50%); color: #17181c; color: var(--tinta); text-decoration: none; }
.mapa-pin.pin-izquierda { flex-direction: row-reverse; transform: translate(calc(-100% + 1rem), -50%); }
.mapa-pin-num { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #ED0000; background: var(--acento); color: #ffffff; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 900; box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(0, 0, 0, 0.25); }
.mapa-pin-num.mapa-pin-soporte { width: 1.25rem; height: 1.25rem; margin: 0.375rem; background: #17181c url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27%23fff%27%3E%3Cpath%20d=%27M13%202v8h6L10%2022v-8H4z%27/%3E%3C/svg%3E") no-repeat center / 72%; background: var(--tinta) url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27%23fff%27%3E%3Cpath%20d=%27M13%202v8h6L10%2022v-8H4z%27/%3E%3C/svg%3E") no-repeat center / 72%; }   /* rayo: el pin de soporte no tiene número */
.mapa-pin-texto { padding: 0.25rem 0.5625rem; border-radius: 999px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; line-height: 1.25; white-space: nowrap; }
.mapa-visual figcaption { margin: 0.5rem 0 0; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.45; color: #55575e; color: var(--secundario); }
.mapa-visual-pista { display: none; }
/* Dibujos altos («formato»: «compacto» en el JSON; eólica, 2026-10-01: el aerogenerador mide 932 × 643 px): a 100 rem
   quedaría ampliado al doble y más alto que la pantalla; llega a 58 rem. */
.mapa-visual[data-formato="compacto"] { max-width: 58rem; }
html.tv .mapa-visual[data-formato="compacto"] { max-width: 48rem; }   /* en el TV el dibujo alto entra bajo la cabecera */
@supports (width: min(1px, 2px)) {
  .mapa-visual[data-formato="compacto"] { --ancho-mapa: min(100vw - 2rem, 58rem); }
  html.tv .mapa-visual[data-formato="compacto"] { --ancho-mapa: min(100vw - 2rem, 48rem); }
}
/* Solo números: con la ventana de 70,125 em o menos (figura de 68,125 rem = lienzo de 1088 px más el borde) o de 47,9375 em
   en el compacto (767 px: desde 768, el iPad vertical, el aerogenerador lleva sus etiquetas sin choques; 2026-10-05). Media queries y vw (no @container: los teléfonos y televisores viejos no lo entienden; auditoría de UX,
   2026-10-02). El círculo mide el 2,95 % del ancho (32 px a 1088 px), nunca menos de 18 px; su zona de toque crece con un
   ::before invisible y main.js manda el toque al número más cercano. */
@media screen and (max-width: 70.125em) {
    .mapa-visual:not([data-formato="compacto"]) .mapa-pin-texto { display: none; }
    .mapa-visual:not([data-formato="compacto"]) .mapa-pin,
    .mapa-visual:not([data-formato="compacto"]) .mapa-pin.pin-izquierda { transform: translate(-50%, -50%); }
    .mapa-visual:not([data-formato="compacto"]) .mapa-pin-num { width: clamp(1.125rem, 2.95vw, 2rem); height: clamp(1.125rem, 2.95vw, 2rem); font-size: clamp(0.6875rem, 1.3vw, 0.875rem); box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.25); }
    .mapa-visual:not([data-formato="compacto"]) .mapa-pin-num.mapa-pin-soporte { width: clamp(1.125rem, 1.85vw, 1.25rem); height: clamp(1.125rem, 1.85vw, 1.25rem); margin: 0; }
    .mapa-visual:not([data-formato="compacto"]) .mapa-pin::before { content: ""; position: absolute; top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem; }
    .mapa-visual:not([data-formato="compacto"]) .mapa-visual-pista { display: inline; }
}
@media screen and (max-width: 47.9375em) {
    .mapa-visual[data-formato="compacto"] .mapa-pin-texto { display: none; }
    .mapa-visual[data-formato="compacto"] .mapa-pin,
    .mapa-visual[data-formato="compacto"] .mapa-pin.pin-izquierda { transform: translate(-50%, -50%); }
    .mapa-visual[data-formato="compacto"] .mapa-pin-num { width: clamp(1.25rem, 4.35vw, 2rem); height: clamp(1.25rem, 4.35vw, 2rem); font-size: clamp(0.75rem, 1.9vw, 0.875rem); box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(0, 0, 0, 0.25); }
    .mapa-visual[data-formato="compacto"] .mapa-pin::before { content: ""; position: absolute; top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem; }
    .mapa-visual[data-formato="compacto"] .mapa-visual-pista { display: inline; }
}
@media (hover: hover) and (pointer: fine) {
  .mapa-pin:hover { color: #17181c; color: var(--tinta); text-decoration: none; }
  .mapa-pin:hover .mapa-pin-texto { background: #ffffff; }
  .mapa-pin:hover .mapa-pin-texto { color: #b50000; color: var(--acento-oscuro); }
}

/* 23. Hover: solo con puntero fino (en táctil, :active) --------- */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: #b50000; color: var(--acento-oscuro); text-decoration: underline; text-underline-offset: 3px; }
  .boton:hover { background: #b50000; background: var(--acento-oscuro); color: #ffffff; text-decoration: none; }
  .boton-secundario:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); text-decoration: none; }
  .marca:hover { color: #17181c; color: var(--tinta); text-decoration: none; }
  .nav-enlaces a:hover { color: #b50000; color: var(--acento-oscuro); text-decoration: none; }
  .nav-enlaces .boton:hover { color: #ffffff; }
  .linea:hover, .producto:hover { border-color: #d9dade; border-color: var(--borde-fuerte); box-shadow: 0 10px 30px rgba(23, 24, 28, 0.07); box-shadow: var(--sombra-2); transform: translateY(-2px); }
  .linea h3 a:hover, .producto-nombre a:hover { text-decoration: none; }
  a.chip:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); text-decoration: none; }
  .pie-lista a:hover, .pie-canales a:hover { color: #ffffff; }
  .migas a:hover { color: #17181c; color: var(--tinta); }
  .filtro:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); text-decoration: none; }
  .vecino:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); text-decoration: none; }
  .subir:hover { background: #b50000; background: var(--acento-oscuro); }
  /* Filtros del catálogo (revisión del catálogo, 2026-10-22: con ratón solo cambiaba el cursor). */
  .criterio-chip:not(:disabled):not([aria-pressed="true"]):hover, .criterio-entrada:hover { border-color: #17181c; border-color: var(--tinta); }
  .familia-plegados button:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); }
  .familia-quitar:hover { text-decoration: underline; text-underline-offset: 3px; }   /* sin text-underline-offset (Chromium < 87), subrayado normal */
}
@media (pointer: coarse) {
  a.chip { min-height: 2.75rem; min-height: var(--objetivo); }           /* 44 px en pantallas táctiles */
}
@media (hover: none) {
  .boton:active { background: #b50000; background: var(--acento-oscuro); }
  .linea:active, .producto:active { border-color: #d9dade; border-color: var(--borde-fuerte); }
  .filtro:active, a.chip:active, .vecino:active { border-color: #17181c; border-color: var(--tinta); }
}
/* Foco sobre la tarjeta entera (el enlace extendido a::after cubre la tarjeta): útil con teclado o control remoto. */
.producto:focus-within, .linea:focus-within { outline: 0.1875rem solid #2456E6; outline: 0.1875rem solid var(--foco); outline-offset: 0.1875rem; }
.producto:focus-within .producto-nombre a, .linea:focus-within h3 a { outline: 0; }
/* Tarjeta de producto: un solo anillo, el de lo que se va a abrir (revisión del catálogo, 2026-10-22: con el foco en el PDF
   se cruzaban el de la tarjeta y el del PDF). La ficha, por dentro de la tarjeta (tiene overflow: hidden); sin depender de
   :focus-within (Chromium 56-59). El contorno transparente es el que pinta el alto contraste de Windows. */
.producto:focus-within { outline: 0; }
.producto-nombre a:focus { outline: 0; }
.producto-nombre a:focus::after { box-shadow: inset 0 0 0 0.1875rem #2456E6; box-shadow: inset 0 0 0 0.1875rem #2456E6; box-shadow: inset 0 0 0 0.1875rem var(--foco); outline: 0.1875rem solid transparent; outline-offset: -0.1875rem; }
.producto-nombre a:focus:not(:focus-visible)::after { box-shadow: none; outline: 0; }
.producto-pdf:focus { outline-offset: -0.25rem; border-radius: 1rem; border-radius: 1rem; border-radius: var(--r-lg); }
/* Tarjetas del portafolio y de «Soluciones por industria» (2026-10-14, pedido del usuario: «que se vea una página trabajada
   al detalle»): al tocarlas, seleccionarlas o llegar a ellas, el contorno sigue sus esquinas redondeadas (box-shadow, no
   outline: en motores viejos el outline sale cuadrado) y toma el color de su franja (--color-linea, en el HTML); sin
   var(), rojo. */
.linea:focus-within { outline: none; border-color: #ED0000; border-color: var(--color-linea, var(--foco));
  box-shadow: 0 0 0 0.1875rem #ED0000; box-shadow: 0 0 0 0.1875rem var(--color-linea, var(--foco)); }
.linea:active { border-color: #ED0000; border-color: var(--color-linea, var(--borde-fuerte));
  box-shadow: 0 0 0 0.1875rem #ED0000; box-shadow: 0 0 0 0.1875rem var(--color-linea, var(--foco)); }
/* Con ratón o toque el contorno se ve solo mientras se pulsa: al volver con «Atrás» el navegador devolvía el foco al enlace
   y el contorno quedaba encendido (2026-10-14, pedido del usuario). Con teclado o control remoto (:focus-visible) sigue
   marcando la tarjeta. Los motores sin :has() o sin :focus-visible descartan esta regla y conservan el contorno con el foco. */
.linea:focus-within:not(:has(:focus-visible)):not(.abierta):not(:active):not(.pulsada) { border-color: #e8e9ec; border-color: var(--borde); box-shadow: none; }
/* Tarjetas de sector: el contorno solo mientras están abiertas; cerradas no lo llevan aunque el botón conserve el foco.
   Con teclado o control remoto, la tarjeta cerrada con foco se marca en el rótulo «Aplicaciones», del color del sector. */
.sector-tarjeta.desplegable:not(.abierta):not(.pulsada):focus-within { border-color: #e8e9ec; border-color: var(--borde); box-shadow: none; }
.sector-desglose-boton:focus-visible .sector-desglose { color: #17181c; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 0.125em; text-underline-offset: 0.25em; }
/* Con teclado o control remoto, la tarjeta de sector cerrada con el foco (en el nombre o en «Aplicaciones») se marca con el
   contorno de su color y un anillo oscuro por fuera; «Aplicaciones» enfocado, en la tinta del texto con subrayado grueso
   (revisión de la portada, 2026-10-22: con el foco en el nombre no se veía nada, y el color de 4 de los 7 sectores no
   llegaba a 3:1 contra el fondo, ni el texto a 4,5:1). La copia html.tv, sin :has ni :focus-visible, para los televisores. */
.sector-tarjeta.desplegable:not(.abierta):not(.pulsada):has(:focus-visible) { border-color: var(--color-linea); box-shadow: 0 0 0 0.1875rem var(--color-linea), 0 0 0 0.3125rem #17181c; }
html.tv .sector-tarjeta.desplegable:not(.abierta):not(.pulsada):focus-within { border-color: #ED0000; border-color: var(--color-linea);
  box-shadow: 0 0 0 0.1875rem #ED0000, 0 0 0 0.3125rem #17181c; box-shadow: 0 0 0 0.1875rem var(--color-linea), 0 0 0 0.3125rem #17181c; }
html.tv .sector-desglose-boton:focus .sector-desglose { color: #17181c; color: #17181c; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 0.125em; }
/* Abierta (también al llegar desde «Industria»: main.js la abre). No con :target: el ancla queda en la dirección y el
   contorno seguía encendido al cerrarla (2026-10-14, Alimentos y bebidas). Sin JavaScript, sí con :target. */
.sector-tarjeta.abierta, html:not(.js) .sector-tarjeta:target { outline: none; border-color: #ED0000; border-color: var(--color-linea);
  box-shadow: 0 0 0 0.1875rem #ED0000; box-shadow: 0 0 0 0.1875rem var(--color-linea); }
/* Portafolio (2026-10-14, pedido del usuario): al pasar el ratón el contorno de su color se dibuja despacio (1 s, la
   transición de .linea); al hacer clic, un destello más claro del contorno (main.js, initPulso) y luego va a la familia.
   El segundo selector gana a la regla que apaga el contorno con el foco del ratón, mientras el ratón sigue encima. */
/* Sin condición de (hover: hover) y (pointer: fine): el puntero del televisor no la cumple y el contorno no salía (2026-10-14,
   el usuario lo vio en la tele). En el celular el toque abre la familia, así que un «hover» pegado no molesta. */
.linea:not(.sector-tarjeta):hover, .linea:not(.sector-tarjeta):not(.abierta):focus-within:hover:not(:active) {
  border-color: #ED0000; border-color: var(--color-linea, var(--borde-fuerte));
  box-shadow: 0 0 0 0.1875rem #ED0000, 0 10px 30px rgba(23, 24, 28, 0.07); box-shadow: 0 0 0 0.1875rem #ED0000, var(--sombra-2); box-shadow: 0 0 0 0.1875rem var(--color-linea, var(--foco)), var(--sombra-2); }
.linea.pulsada { -webkit-animation: pulso-linea 0.34s ease-out; animation: pulso-linea 0.34s ease-out;
  border-color: #ED0000; border-color: var(--color-linea); box-shadow: 0 0 0 0.1875rem #ED0000; box-shadow: 0 0 0 0.1875rem var(--color-linea); transition-duration: 0.15s; }   /* tras el destello, el contorno queda hasta que abre la página */
@-webkit-keyframes pulso-linea {
  0%, 100% { box-shadow: 0 0 0 0.1875rem var(--color-linea), 0 10px 28px rgba(23, 24, 28, 0.08); }
  40% { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.72), 0 0 0 0.25rem var(--color-linea), 0 0 1.25rem 0.125rem var(--color-linea); }
}
@keyframes pulso-linea {
  0%, 100% { box-shadow: 0 0 0 0.1875rem var(--color-linea), 0 10px 28px rgba(23, 24, 28, 0.08); }
  40% { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.72), 0 0 0 0.25rem var(--color-linea), 0 0 1.25rem 0.125rem var(--color-linea); }
}

/* 24. Breakpoints (mobile-first) ------------------------------- */
@media (min-width: 360px) {
  .productos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .producto-nombre { min-height: 3.75em; }
  /* Tablas de 3 columnas (Característica · Método · Valor), presentaciones y «Cómo elegir»: en celular, tarjetas. */
  .tabla-tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas th, .tabla-tarjetas td { display: block; }
  .tabla-tarjetas tr { padding: 0.875rem 1rem; border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); }
  .bloque .tabla-tarjetas tr, .lubriguia-marca .tabla-tarjetas tr { padding-left: 0; padding-right: 0; }
  .tabla-tarjetas tbody tr:last-child { border-bottom: 0; }
  .tabla-tarjetas th, .tabla-tarjetas td { padding: 0; border: 0; white-space: normal; }
  .tabla-tarjetas th[scope="row"] { font-weight: 800; margin-bottom: 0.125rem; }
  .tabla-tarjetas td.metodo { font-size: 0.84rem; font-size: var(--t-xs); }
  .tabla-tarjetas td.metodo:empty { display: none; }   /* sin método: no se pinta «Método:» vacío */
  .tabla-tarjetas td:not(.metodo):not(:first-child) { margin-top: 0.125rem; font-weight: 700; }
  .tabla-tarjetas td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 600; color: #55575e; color: var(--secundario); }
  .tabla-tarjetas td.metodo[data-etiqueta]::before { font-weight: 600; }
  .tabla-tarjetas td[data-etiqueta]:not(.metodo):not(:first-child)::before { font-weight: 600; }
  .tabla-tarjetas .codigo { font-size: 0.9rem; font-size: var(--t-sm); }
  /* Lubriguía en celular: cada vehículo es una tarjeta con sus opciones una debajo de otra. */
  .tabla-lubriguia td { min-width: 0; }
  .tabla-tarjetas.tabla-lubriguia td[data-etiqueta^="Opción"] { margin-top: 0.625rem; }   /* gana a .tabla-tarjetas td:not():not() */
  .tabla-lubriguia td.vacia { display: none; }
}
@media (min-width: 600px) {
  .productos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portafolio-grilla, .confianza-grilla, .vecinos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vecino-siguiente { grid-column: 2; }
  .datos { grid-template-columns: max-content minmax(0, 1fr); grid-gap: 0.625rem 1.25rem; gap: 0.625rem 1.25rem; }
  .datos dd + dt { margin-top: 0; }
  .ficha-figura { max-width: 22rem; }
}
@media (min-width: 768px) {
  :root { --alto-fila: 4.75rem; --alto-buscador: 4.0625rem; }
  .marca img { height: 3.25rem; }
  .marca-sep { height: 2.125rem; }
  .productos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 2rem; gap: 2rem; grid-gap: var(--e-6); gap: var(--e-6); }
  .pie-grilla { grid-template-columns: 1.4fr 1fr 1.2fr; grid-gap: 3rem; gap: 3rem; grid-gap: var(--e-8); gap: var(--e-8); }
  /* Mientras no haya canales de contacto (contacto.js vacío) la tercera columna está oculta: el pie se reparte en
     dos (empresa a la izquierda, enlaces a la derecha en dos subcolumnas) y no queda un tercio vacío. En cuanto
     main.js muestra los canales pone .con-contacto y vuelve la grilla de tres columnas (2026-09-30; sin :has desde el
     2026-10-05, que ningún televisor anterior a 2023 entiende). */
  .pie-grilla { grid-template-columns: minmax(0, 1fr) auto; }
  .pie-grilla .pie-lista { display: grid; grid-template-columns: repeat(2, auto); grid-column-gap: 2.5rem; column-gap: 2.5rem; grid-column-gap: var(--e-7); column-gap: var(--e-7); }
  .pie-grilla.con-contacto { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .pie-grilla.con-contacto .pie-lista { display: flex; }
  .pagina-cabecera { padding: 2.5rem 0 2rem; padding: var(--e-7) 0 var(--e-6); }
  .herramientas { padding: 0.625rem 0; }
  .herramientas-fila { flex-wrap: wrap; }
  .buscador { flex: 1 1 22.5rem; max-width: 35rem; }
  .buscador label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .filtros-barra { padding: 0.25rem 0 0.5rem; }
  .familia-cabecera { grid-template-columns: minmax(0, 1fr) auto; }
  .ficha-heroe { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "figura titulo" "figura datos"; grid-gap: 1rem 2rem; gap: 1rem 2rem; grid-gap: var(--e-4) var(--e-6); gap: var(--e-4) var(--e-6); padding: 2rem 0 3rem; padding: var(--e-6) 0 var(--e-8); }
  .ficha-figura { max-width: 33rem; margin-left: 0; margin-right: 0; align-self: start; }
  .ficha-datos .datos { margin-top: 0.75rem; }
}
@media (min-width: 1024px) {
  .marca-rol { display: block; }
  html:not(.js) .nav { position: sticky; }
  .productos-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* iPad horizontal y laptops chicos (2026-10-05) */
  .portafolio-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .confianza-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 2rem; gap: 2rem; grid-gap: var(--e-6); gap: var(--e-6); }
  .bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque-ancho .lista { display: block; columns: 2; grid-column-gap: 2rem; column-gap: 2rem; grid-column-gap: var(--e-6); column-gap: var(--e-6); }
  .bloque-ancho .lista li { break-inside: avoid; margin-bottom: 0.625rem; }
  /* Filtros por familia: desde laptop envuelven en 2–3 filas (nada queda oculto tras el degradado,
     que con ratón o control remoto es fácil no descubrir) y la barra deja de ser pegajosa: se desplaza
     con la página y lo fijo se queda en cabecera + buscador (≈ 145 px, no 290–317). Deslizable y
     pegajosa solo por debajo de 1024. El JS no la pliega cuando es estática; la fila del buscador
     marca su borde inferior mientras está pegada (.pegada). */
  .filtros { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
  .filtros li:first-child { position: static; padding-right: 0; box-shadow: none; }
  .filtros-barra .desliza::after { display: none; }
  .filtros-barra, .herramientas.plegada + .filtros-barra { position: static; visibility: visible; opacity: 1; }
  .herramientas.pegada { border-bottom-color: #e8e9ec; border-bottom-color: var(--borde); }
}
/* Con ratón (laptop/escritorio) los filtros son más compactos (36 px, ≥ 24 px de WCAG 2.5.8) para que
   la barra desplegada ocupe menos alto; en táctil y en TV con control remoto siguen a 44 px. */
@media (min-width: 1024px) and (pointer: fine) {
  .filtros { grid-gap: 0.375rem; gap: 0.375rem; }
  .filtro { min-height: 2.25rem; padding: 0 0.75rem; font-size: 0.84rem; font-size: var(--t-xs); }
}
/* Celular apaisado (844×390, 932×430) o cualquier pantalla corta: la barra de herramientas deja de ser
   pegajosa (con la cabecera ocupaban el 50–55 % del alto); el buscador sigue a un «Subir» de distancia. */
@media (max-height: 500px) {
  .herramientas, .filtros-barra { position: static; }
  .herramientas.plegada + .filtros-barra { visibility: visible; opacity: 1; }
}
@media (min-width: 1280px) {
  .productos-grilla, .portafolio-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ficha-heroe { grid-column-gap: 3.5rem; column-gap: 3.5rem; }
}
@media (min-width: 1920px) {
  /* Las fotos del PDF miden 540×660: el marco de la ficha se limita a 26 rem (468 px @18, 546 @21) para
     no dibujarlas por encima de 1× hasta QHD. Con packshots ≥ 1200 px se podría volver a 33 rem. */
  .ficha-figura { max-width: 26rem; }
}
@media (min-width: 3840px) {
  .productos-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* marco ≈ 410 px: la foto no se amplía */
}

/* 25. Movimiento reducido -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .linea:hover, .producto:hover { transform: none; }
}

/* 26. Impresión (fichas técnicas en papel o PDF) --------------- */
@media print {
  .nav, .saltar, .herramientas, .filtros-barra, .cta-ficha, .vecinos, .acciones, .pie-canales, .subir, .tabla-pista { display: none !important; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
  .tabla-contenedor { overflow: visible; }
  .tabla-ancha th, .tabla-ancha td { white-space: normal; }
  .tabla-ancha tbody th, .tabla-ancha thead th:first-child { position: static; min-width: 0; box-shadow: none; }
  .bloque, .producto { break-inside: avoid; }
  /* Guía por industria impresa como brochure: sin enlaces de navegación y sin cortar tarjetas entre páginas. */
  .etapa-volver, .guia-volver, .mapa-soporte, .guia-ayuda { display: none !important; }
  .etapa, .lubricante, .mapa-zona { break-inside: avoid; }
  .mapa-visual { width: auto; margin-left: 0; left: auto; max-width: none; -webkit-transform: none; transform: none; }
  .mapa-visual-marco { overflow: visible; }
  .mapa-visual-pista { display: none; }
  /* Guías con muchos pines («imprimir_solo_numeros» en su JSON): en papel el dibujo se encoge al ancho de la hoja y las
     etiquetas se enciman; quedan los números, que coinciden con la lista de etapas, y la etiqueta del pin de soporte. */
  .mapa-visual[data-impresion="numeros"] .mapa-pin-texto { display: none; }
  .mapa-visual[data-impresion="numeros"] .mapa-pin-soporte ~ .mapa-pin-texto { display: block; }
  .mapa-visual[data-impresion="numeros"] .mapa-pin-num { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
  .mapa-visual[data-impresion="numeros"] .mapa-pin { transform: translate(-0.75rem, -50%); }
  .mapa-visual[data-impresion="numeros"] .mapa-pin.pin-izquierda { transform: translate(calc(-100% + 0.75rem), -50%); }
  .mapa-visual[data-impresion="numeros"] .mapa-pin-num.mapa-pin-soporte { width: 1rem; height: 1rem; margin: 0.25rem; }
  .ficha-figura { max-width: 18rem; }
}

/* Auditoría de UX, 2026-10-02 --------------------------------------------------------------- */
/* [10] Guías: cabecera en dos columnas (título a la izquierda, intro a la derecha) para que la ilustración suba y se vea
   al entrar en un laptop o un televisor. */
@media (min-width: 1024px) {
  .pagina-industria .pagina-cabecera { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-column-gap: 3rem; column-gap: 3rem; grid-column-gap: var(--e-8); column-gap: var(--e-8); grid-template-areas: "cejilla ." "titulo intro" "bajada intro"; align-items: end; padding-bottom: 1.5rem; padding-bottom: var(--e-5); }
  .pagina-industria .pagina-cabecera .cejilla { grid-area: cejilla; }
  .pagina-industria .pagina-cabecera h1 { grid-area: titulo; }
  .pagina-industria .pagina-cabecera .bajada { grid-area: bajada; }
  .pagina-industria .guia-intro { grid-area: intro; margin: 0; align-self: end; }
  .pagina-industria .mapa-visual { margin-top: 1.5rem; margin-top: var(--e-5); }
}
/* [15] Guías con 4 zonas: las 4 en una fila desde 1280 px, con flecha también hacia la cuarta (atributo y no :has, por
   los televisores). */
.mapa-nombre { overflow-wrap: anywhere; }
@media (min-width: 1280px) {
  .mapa-zonas[data-zonas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mapa-zonas[data-zonas="4"] .mapa-zona:nth-child(4)::before { content: "→"; }
}
/* [9] Catálogo en celular: sin búsqueda activa, el contador no le quita ancho al buscador. */
@media (max-width: 599.98px) {
  .herramientas:not(.buscando) .resultado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* [7] Lubriguía: enlace para cerrar una marca larga, alineado con su tabla. */
.lubriguia-marca .etapa-volver { margin: 0 1.5rem 1rem; margin: 0 var(--e-5) var(--e-4); }

/* ===========================================================================================================
   Auditoría por dispositivo (2026-10-05): celular, tableta, computadora y televisor, con un banco que mide cada
   página al tamaño real de cada pantalla (5 revisores y un escéptico por revisor; 44 hallazgos confirmados). Va al
   final del archivo: gana por orden a las reglas base con la misma especificidad.
   =========================================================================================================== */

/* Barra superior. Los enlaces (Nosotros · Lubriguía · Portafolio · Industrias) desde 600 px; «Habla con un asesor»
   entra a la barra desde 1024 (en tableta sigue en el héroe, el contacto y el pie). En el celular, «Lubriguía» queda
   siempre a la vista junto a la hamburguesa (pedido del 2026-10-02: «para que no la tengan que buscar»). */
.nav-atajo { display: none; }
.js .nav-atajo { display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); margin-left: auto; padding: 0 0.75rem; border-radius: 999px; border-radius: var(--r-pill); border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); color: #17181c; color: var(--tinta); font-size: 0.9375rem; font-weight: 800; white-space: nowrap; }
.nav-atajo[aria-current="page"] { border-color: #b50000; border-color: var(--acento-oscuro); color: #b50000; color: var(--acento-oscuro); }
@media (max-width: 599.98px) { .js .marca { flex: none; } }
@media (max-width: 374.98px) { .js .nav-fila { grid-gap: 0.5rem; gap: 0.5rem; } .js .marca { grid-gap: 0.5rem; gap: 0.5rem; } .js .nav-atajo { padding: 0 0.625rem; font-size: 0.875rem; } }
@media (min-width: 600px) {
  .nav-enlaces { display: flex; }
  .js .nav-menu-boton, .js .nav-panel.abierto, html:not(.js) .nav-panel, .js .nav-atajo { display: none; }
}
@media (min-width: 600px) and (max-width: 1023.98px) { .nav-enlaces .boton { display: none; } }
@media (hover: hover) and (pointer: fine) { .nav-atajo:hover { border-color: #17181c; border-color: var(--tinta); color: #17181c; color: var(--tinta); text-decoration: none; } }


/* Catálogo en el celular. (1) Por debajo de 360 px, dos columnas compactas (en una, cada tarjeta medía más que la
   pantalla). (2) La tira de 13 chips pasa a un desplegable nativo con la lista completa (main.js lo enlaza con los
   chips; sin JS vuelven los chips). (3) Con subgrid las filas ya se alinean: el nombre no reserva 3 líneas. */
@media (max-width: 359.98px) {
  .productos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.625rem; gap: 0.625rem; }
  .producto-cuerpo { padding: 0.75rem 0.75rem 0.875rem 0.875rem; }
  .producto-nombre { font-size: 0.9375rem; overflow-wrap: anywhere; }
  .producto-puntos { font-size: 0.8125rem; }
  .producto-puntos li::before { left: -0.5625rem; }
}
.filtro-elegir { display: none; }
@media (max-width: 599.98px) {
  .js .filtro-elegir { display: block; padding: 0.25rem 0 0.125rem; }
  .js .filtros-barra .filtro-elegir:not([hidden]) + .desliza { display: none; }   /* si el JS del catálogo falla, quedan los chips */
  .filtro-elegir select { display: block; width: 100%; min-height: 2.75rem; min-height: var(--objetivo); padding: 0 2.75rem 0 1rem; border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); border-radius: 999px; border-radius: var(--r-pill); background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.25rem; background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.25rem; color: #17181c; color: var(--tinta); font: inherit; font-size: 1rem; font-size: max(1rem, 16px); font-weight: 700; -webkit-appearance: none; appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .filtro-elegir select:focus { border-color: #17181c; border-color: var(--tinta); }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 599.98px) { .producto-nombre { min-height: 0; } }
}

/* Guías en el celular: menos relleno en las etapas y las tarjetas (las guías largas pasaban de 20 pantallas). */
@media (max-width: 599.98px) {
  .etapa { padding: 1rem 0.875rem; }
  .etapa-texto { margin-top: 0.625rem; }
  .etapa-puntos { grid-gap: 0.75rem; gap: 0.75rem; margin-top: 1rem; }
  .lubricante { padding: 0.5rem 0.75rem; }
  .etapa-volver { margin-top: 0.5rem; }
}

/* Ficha en el celular: «Características típicas» en dos columnas (nombre y método a la izquierda, el valor a la
   derecha, que es lo que se busca); antes, tres líneas por fila con el valor al final. */
@media (max-width: 599.98px) {
  .tabla-caracteristicas.tabla-tarjetas.tabla-un-valor tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-column-gap: 1rem; column-gap: 1rem; align-items: center; padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .tabla-caracteristicas.tabla-tarjetas.tabla-un-valor th[scope="row"] { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .tabla-caracteristicas.tabla-tarjetas.tabla-un-valor td.metodo { grid-column: 1; grid-row: 2; }
  .tabla-caracteristicas.tabla-tarjetas.tabla-un-valor td:not(.metodo) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: 10rem; text-align: right; font-size: 1.0625rem; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
  .tabla-caracteristicas.tabla-tarjetas.tabla-un-valor td:not(.metodo)::before { content: none; }
}
/* Medido el 2026-10-12 con el texto más largo de cada desplegable («C4 Hatchback VTS · Gasolina - Diesel», 279 px;
   «Primero elige el modelo», 177 px): con estas columnas y cortes ninguno se recorta. */
@media (min-width: 768px) {
  .lubriguia-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}
/* Desde 1024 px los desplegables van uno debajo de otro en la columna izquierda (distribución del 2026-10-12): la columna
   mide 26 rem para que quepa el modelo más largo. */
@media (min-width: 1024px) {
  .lubriguia-campos { grid-template-columns: minmax(0, 1fr); }
}

/* Lubriguía en el celular: menos cajas anidadas (los nombres se partían en 2 líneas) y enlaces de la tabla por marca con
   zona de toque de 44 px. Ningún texto cambia: se publican literales. */
@media (max-width: 599.98px) {
  .lg-panel { padding: 1rem 0.75rem; }
  .lg-ficha { border-radius: 1rem; border-radius: var(--r-lg); }
  .lg-ficha-cabecera { padding: 0.875rem; }
  .lg-ficha-cuerpo { padding: 0.625rem; }
  .lg-ficha h3 { font-size: 1.4rem; font-size: var(--t-xl); }
  .lg-sistema { padding: 0.625rem; }
  .lg-sistema .lg-opciones li { grid-column-gap: 0.5rem; column-gap: 0.5rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem; }   /* el nombre del aceite, en una línea desde 375 px */
  .lg-opciones li { grid-column-gap: 0.625rem; column-gap: 0.625rem; padding: 0.75rem 0.75rem 0.75rem 0.625rem; }
  .lg-opciones .prioridad-numero { width: 2rem; height: 2rem; }
  .tabla-lubriguia a.opcion-nombre { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 2.75rem; min-height: var(--objetivo); margin-top: -0.6875rem; margin-bottom: -0.6875rem; }
}

/* Celular apaisado y cualquier pantalla muy baja: cabecera de 64 px y el video entero en la pantalla. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --alto-fila: 3.75rem; }
  .marca img { height: 2.625rem; }
  .marca-sep { height: 1.625rem; }
  .heroe { padding-top: 2rem; }
  .heroe h1 { font-size: 2.5rem; }
  .heroe-video { max-width: 36rem; max-width: calc((100vh - 7rem) * 1920 / 804); max-width: calc((100dvh - 7rem) * 1920 / 804); }
}

/* Tableta: «Industria / Automotriz» en dos columnas desde 720 px (iPad mini vertical). */
@media (min-width: 45em) { .caminos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En el celular (una columna) «Automotriz» va primero (pedido del usuario, 2026-10-14); desde 45em, Industria a la izquierda. */
@media (max-width: 44.99em) { .camino-automotriz { order: -1; } }
/* Guías con 4 zonas entre 1024 y 1279 px: rejilla de 2 × 2 (en 3 columnas la cuarta quedaba sola en otra fila). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mapa-zonas[data-zonas="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-zonas[data-zonas="4"] .mapa-zona:nth-child(3)::before { content: none; }
  .mapa-zonas[data-zonas="4"] .mapa-zona:nth-child(4)::before { content: "→"; }
}

/* Computadora y tele: más contenido en la primera pantalla (revisión de la portada, 2026-10-22: sobre la cejilla quedaban
   104 px a 1440 × 900 y 156 en la tele de 1920; antes, solo en los laptops de hasta 820 px de alto). Las pantallas bajas
   tienen 2 rem (más abajo). */
@media (min-width: 1024px) { .heroe { padding-top: 2.5rem; } }
html.tv .heroe { padding-top: 2.5rem; }
/* Computadora: las tablas de varios grados caben sin deslizar (drosera-ms y carter-sh desbordaban unos px). */
@media (min-width: 1024px) {
  .tabla-ancha th, .tabla-ancha td { padding-left: 0.5rem; padding-right: 0.5rem; }
  .tabla-ancha tbody th, .tabla-ancha thead th:first-child { min-width: 11rem; }
  .tabla-ancha td { min-width: 0; }
}
/* Pantallas anchas y bajas (TV con navegador a 960 × 540: Android TV, Fire TV): cabecera más baja, buscador no
   pegajoso y 4 tarjetas por fila, para que cada producto entre entero en la pantalla. */
@media (min-width: 900px) and (max-height: 600px) {
  :root { --alto-fila: 3.75rem; }
  /* Héroe más compacto en la tele (2026-10-22): con los botones bajo la bajada («súbelo en PC y tele»), en la tele de
     960 × 540 «Ver el portafolio» empezaba en y = 535 y no se veía. Con 2 rem de aire arriba, el título de 2,5 rem (como en
     las pantallas apaisadas bajas) y 1,5 rem sobre los botones, entra con margen (y = 443-493) aunque el navegador de la tele
     deje unos 500 px de alto. La tele no reconocida y las ventanas de PC bajas, en el bloque de abajo. */
  html.tv .heroe { padding-top: 2rem; }
  html.tv .heroe h1 { font-size: 2.5rem; }
  html.tv .heroe .acciones-arriba { margin-top: 1.5rem; margin-top: var(--e-5); }
  .herramientas, .filtros-barra { position: static; }
  .herramientas.plegada + .filtros-barra { visibility: visible; opacity: 1; }
  .productos-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Pantallas bajas donde los botones del héroe van arriba (2026-10-22): lo mismo que la tele de arriba (el título más chico,
   solo en la tele no reconocida: en una ventana de PC el título se queda como está). Va después de la regla de los laptops
   (2,5 rem) para ganarle. */
@media (min-width: 1024px) and (max-height: 600px), (min-width: 900px) and (max-height: 600px) and (hover: hover) and (pointer: fine), (min-width: 900px) and (min-height: 501px) and (max-height: 600px) and (hover: none) {
  .heroe { padding-top: 2rem; }
  .heroe .acciones-arriba { margin-top: 1.5rem; margin-top: var(--e-5); }
}
@media (min-width: 900px) and (min-height: 501px) and (max-height: 600px) and (hover: none) { .heroe h1 { font-size: 2.5rem; } }
/* Computadora: catálogo en 5 columnas desde 1280 px (con 4, en un monitor Full HD cabía una sola fila por pantalla).
   En el televisor, con la letra a 1,5x, 4 columnas. (2026-10-21: se probaron 4 columnas con la tarjeta C y no bajó la
   altura, porque la foto 4:5 crece con el ancho: 615 px con 4 columnas y 607 con 5. Se quedan 5.) */
@media (min-width: 1280px) {
  .productos-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .productos-grilla .producto-cuerpo { padding: 1.125rem 1.125rem 1.25rem; }
}
@media (min-width: 1920px) { html.tv .productos-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* «Soluciones por industria» (2026-10-05): la última fila incompleta queda centrada bajo el título. Pistas de media tarjeta
   (cada tarjeta toma 2, con el mismo ancho que antes); la última fila se corre media tarjeta por cada hueco. Cuenta desde
   el final: sirve aunque cambie el número de sectores. */
@media (max-width: 1023.98px) {
  .sectores-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sectores-grilla > * { grid-column: span 2; }
  .sectores-grilla > :nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .sectores-grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sectores-grilla > * { grid-column: span 2; }
  .sectores-grilla > :nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .sectores-grilla > :nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 1280px) {
  .sectores-grilla { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sectores-grilla > * { grid-column: span 2; }
  .sectores-grilla > :nth-child(4n+1):nth-last-child(3) { grid-column: 2 / span 2; }
  .sectores-grilla > :nth-child(4n+1):nth-last-child(2) { grid-column: 3 / span 2; }
  .sectores-grilla > :nth-child(4n+1):last-child { grid-column: 4 / span 2; }
}
@supports not (display: grid) { .sectores-grilla { justify-content: center; } }

/* Contacto en el celular y la tableta vertical (hasta 800 px, donde los dos correos ya no caben lado a lado): los botones
   ocupan el ancho y la dirección de correo puede partirse después de la «@» (main.js pone un <wbr>); a 320 px los botones
   con el correo se salían de la pantalla. */
@media (max-width: 799.98px) { .contacto-fila > a { width: 100%; max-width: 22rem; padding-left: 1rem; padding-right: 1rem; } }
/* Los dos correos de los canales, partidos igual (revisión 2026-10-06): el del Canal 2 es unos 10 px más largo y, en una
   franja de anchos, uno se partía después de la «@» y el otro no. Con un poco menos de relleno, desde 357 px (incluido el
   Android típico de 360) caben los dos en un renglón; por debajo, los dos bajan el dominio al segundo. */
@media (max-width: 799.98px) { .contacto-canal .boton-secundario { padding-left: 0.875rem; padding-right: 0.875rem; } }
@media (max-width: 356.98px) { .contacto-canal .correo-dominio { display: block; } }
/* «Redes» en el celular (2026-10-05; desde el 2026-10-06 bajo su título y la línea divisora): Instagram, Facebook y
   YouTube en una fila del ancho de los botones de los canales, cada uno con el ícono sobre el nombre (a 320 px caben los
   tres: unos 90 px cada uno). */
@media (max-width: 799.98px) {
  .contacto-redes .contacto-fila { flex-wrap: nowrap; grid-gap: 0.5rem; gap: 0.5rem; max-width: 22rem; margin-left: auto; margin-right: auto; }
  .contacto-redes .contacto-fila > a { flex: 1 1 0; width: auto; min-width: 0; flex-direction: column; grid-gap: 0.3125rem; gap: 0.3125rem; min-height: 4.25rem; padding: 0.625rem 0.25rem; border-radius: 1rem; border-radius: var(--r-lg); font-size: 0.9rem; font-size: var(--t-sm); }
}

@media (hover: hover) and (pointer: fine) {
  .boton.canal-whatsapp:hover { background: #25D366; color: #111B21; filter: brightness(0.93); }
  .boton.canal-youtube:hover, .boton.canal-instagram:hover, .boton.canal-facebook:hover { color: #ffffff; filter: brightness(0.9); }
  .boton.canal-youtube:hover { background: #E62117; }
  .boton.canal-instagram:hover { background: linear-gradient(45deg, #F58529 0%, #C13584 18%, #8134AF 60%, #515BD4 100%); }
  .boton.canal-facebook:hover { background: #0866FF; }
}
/* Al tocar (táctil): el .boton:active rojo no les cambia el color. */
.boton.canal-whatsapp:active { background: #25D366; filter: brightness(0.9); }
.boton.canal-youtube:active { background: #E62117; filter: brightness(0.9); }
.boton.canal-instagram:active { background: linear-gradient(45deg, #F58529 0%, #C13584 18%, #8134AF 60%, #515BD4 100%); filter: brightness(0.9); }
.boton.canal-facebook:active { background: #0866FF; filter: brightness(0.9); }

/* ---- Televisores con motores viejos: respaldos que en los navegadores actuales no hacen nada ---- */

/* Sin CSS Grid (Chromium < 57: Samsung 2017-2018, LG webOS 3.x-4.x): flex con anchos en %. Valores literales; cada ancho
   resta 1,05 rem y no 1 rem (con el redondeo, 5 × 20 % justos a veces no cabían y la fila se partía en 4). */
@supports not (display: grid) {
  .portafolio-grilla, .productos-grilla, .confianza-grilla, .pasos, .bloques, .vecinos, .guias-grilla, .lubricantes { display: flex; flex-wrap: wrap; grid-gap: 0; gap: 0; margin-left: -0.5rem; margin-right: -0.5rem; }
  .portafolio-grilla > *, .productos-grilla > *, .confianza-grilla > *, .pasos > *, .bloques > *, .vecinos > *, .guias-grilla > *, .lubricantes > * { width: calc(100% - 1.05rem); margin: 0 0.5rem 1rem; }
  /* .caminos-grilla es también .contenedor: sin márgenes negativos (perdería el margin auto que la centra). */
  .caminos-grilla { display: flex; flex-wrap: wrap; grid-gap: 0; gap: 0; }   /* gap 0: aquí separan los márgenes (ningún motor sin grid tiene gap en flex; el simulador sí) */
  .caminos-grilla > * { width: 100%; margin: 0 0 1rem; }
  .portafolio-grilla > * { width: calc(50% - 1.05rem); }
  .productos-grilla > .familia-plegados { width: calc(100% - 1.05rem); }   /* «Ver los otros» en su propia fila (2026-10-22) */
  .lubricantes > * { width: auto; flex: 1 1 15rem; }
  .vecino-siguiente { margin-left: auto; }
  .heroe-pasos { display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 0; gap: 0; }
  .heroe-paso { width: 33.333%; }
  .mapa-zona + .mapa-zona { margin-top: 2.5rem; }
  .etapa-punto + .etapa-punto, .lubriguia-marcas > * + *, .lg-opciones > li + li, .lubriguia-prioridades > li + li, .lubriguia-campos > * + *, .pie-grilla > * + *, .ficha-heroe > * + * { margin-top: 1rem; }
  .mapa-etapas > li + li, .puntos > li + li, .guia-revisamos > li + li { margin-top: 0.5rem; }
  .datos dd + dt { margin-top: 0.625rem; }
  .etapa-punto > dd { margin-top: 0.5rem; }
  .campo label, .lg-sugerencia-modelo, .lg-sugerencia-meta, .mapa-nombre, .mapa-gamas { display: block; }
  .campo label { margin-bottom: 0.375rem; }
  .mapa-etapas a { display: block; position: relative; padding-left: 3.75rem; }
  .mapa-etapas .mapa-num { position: absolute; left: 0.75rem; top: 50%; margin-top: -1.125rem; }
  .lg-opciones li { display: flex; align-items: flex-start; grid-gap: 0; gap: 0; }
  .lg-opciones li > .prioridad-numero { margin-right: 0.875rem; }
  .lg-opciones .opcion { flex: 1 1 auto; min-width: 0; }
  @media (min-width: 360px) { .productos-grilla > * { width: calc(50% - 1.05rem); } }
  @media (min-width: 600px) { .productos-grilla > * { width: calc(33.333% - 1.05rem); } .confianza-grilla > *, .vecinos > * { width: calc(50% - 1.05rem); } }
  @media (min-width: 45em) {
    .caminos-grilla > * { width: calc(50% - 0.5rem); margin-bottom: 0; }
    .caminos-grilla > * + * { margin-left: 1rem; }
    .heroe-paso { width: 33.333%; padding: 0 1rem; }
    .heroe-paso + .heroe-paso { margin-top: 0; }
  }
  @media (min-width: 768px) {
    .pasos > * { width: calc(50% - 1.05rem); }
    .heroe > .contenedor > .cejilla, .heroe h1, .heroe .bajada { text-align: center; }
    .heroe h1 { margin: 1.375rem auto 0; max-width: 61.25rem; }
    .heroe .bajada { margin: 1.5rem auto 0; }
    .heroe-envases { margin: 2.5rem auto 0; max-width: 30rem; }
  }
  @media (min-width: 1024px) {
    .portafolio-grilla > *, .productos-grilla > * { width: calc(25% - 1.05rem); }
    .portafolio-grilla > * { width: calc(33.333% - 1.05rem); }
    .confianza-grilla > * { width: calc(25% - 1.05rem); }
    .bloques > * { width: calc(50% - 1.05rem); }
    .bloques > .bloque-ancho { width: calc(100% - 1.05rem); }
    .mapa-zonas { display: flex; align-items: flex-start; grid-gap: 0; gap: 0; }
    .mapa-zona { flex: 1 1 0%; min-width: 0; }
    .mapa-zona + .mapa-zona { margin-top: 0; margin-left: 2.5rem; }
    .mapa-zona + .mapa-zona:nth-child(3n + 1)::before { content: "→"; }
    .pagina-industria .guia-intro { margin-top: 1rem; }
  }
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .mapa-zonas[data-zonas="4"] { flex-wrap: wrap; }
    .mapa-zonas[data-zonas="4"] > .mapa-zona { flex: none; width: calc(50% - 1.3rem); }
    .mapa-zonas[data-zonas="4"] > .mapa-zona:nth-child(3) { margin-left: 0; }
    .mapa-zonas[data-zonas="4"] > .mapa-zona:nth-child(n + 3) { margin-top: 2.5rem; }
  }
  @media (min-width: 900px) and (max-height: 600px) { .productos-grilla > * { width: calc(25% - 1.05rem); } }
  @media (min-width: 1280px) { .productos-grilla > * { width: calc(20% - 1.05rem); } .portafolio-grilla > * { width: calc(25% - 1.05rem); } }
  @media (min-width: 1920px) { html.tv .productos-grilla > * { width: calc(25% - 1.05rem); } }
  @media (min-width: 600px) { .guias-grilla > * { width: calc(50% - 1.05rem); } }
  @media (min-width: 1024px) { .guias-grilla > * { width: calc(33.333% - 1.05rem); } }
}

/* Sin gap en flex (Chromium < 84: televisores hasta 2021; Safari < 14.1): márgenes equivalentes, solo con la clase
   «sin-gap-flex» que pone el script del <head> donde la prueba falla. */
.sin-gap-flex .marca > * + * { margin-left: 0.75rem; }
.sin-gap-flex .nav-fila > * + * { margin-left: 1rem; }
.sin-gap-flex .nav-fila > .nav-atajo { margin-left: auto; }
.sin-gap-flex .nav-fila > .nav-atajo + .nav-menu-boton { margin-left: 0.5rem; }
.sin-gap-flex .boton > * + *, .sin-gap-flex .boton-secundario > * + *, .sin-gap-flex .pie-canales a > * + * { margin-left: 0.625rem; }
@media (min-width: 768px) { .sin-gap-flex .buscador > * + * { margin-left: 0.75rem; } }   /* por debajo, el rótulo está oculto */
.sin-gap-flex .herramientas-fila > * + * { margin-left: 1.25rem; }
.sin-gap-flex .mapa-zona-titulo .icono, .sin-gap-flex .etapas-zona .icono { margin-right: 0.625rem; }
.sin-gap-flex .etapa-num { margin-right: 0.75rem; }
.sin-gap-flex .mapa-pin-texto { margin-left: 0.375rem; }
.sin-gap-flex .mapa-pin.pin-izquierda .mapa-pin-texto { margin-left: 0; margin-right: 0.375rem; }
.sin-gap-flex .industria summary::after, .sin-gap-flex .elegir summary::after { margin-left: 1rem; }
.sin-gap-flex .lg-compartir > * + * { margin-left: 1rem; }
.sin-gap-flex .lg-sistema-titulo > svg, .sin-gap-flex .lg-pronto-chip { margin-right: 0.75rem; }
.sin-gap-flex .lg-ficha-nombre { margin: 0 1rem 0.875rem 0; }
.sin-gap-flex .lg-compartir-icono { margin-right: 0.5rem; }
.sin-gap-flex .opcion-meta > * + * { margin-left: 0.5rem; }
/* Botón de la Lubriguía partido en dos renglones: márgenes simétricos (0,625 rem entre partes, como el gap) para que el
   segundo renglón no quede corrido 5 px; el relleno baja lo mismo y el ancho útil no cambia. */
.sin-gap-flex .camino a.camino-boton > * { margin: 0 0.3125rem; }
.sin-gap-flex .camino a.camino-boton { padding-left: 0.6875rem; padding-right: 0.6875rem; }
@media (max-width: 389.98px) { .sin-gap-flex .camino a.camino-boton { padding-left: 0.4375rem; padding-right: 0.4375rem; } }
.sin-gap-flex .linea-cabecera > * + * { margin-top: 0.875rem; }
.sin-gap-flex .producto-cuerpo > * + * { margin-top: 0.5rem; }
.sin-gap-flex .producto-cuerpo > .producto-ver { margin-top: auto; }
.sin-gap-flex .lista:not(.lista-corta) > li + li { margin-top: 0.625rem; }
.sin-gap-flex .vecino > * + * { margin-top: 0.25rem; }
.sin-gap-flex .guia-tarjeta-cuerpo > * + * { margin-top: 0.375rem; }
.sin-gap-flex .lubricante > * + * { margin-top: 0.1875rem; }
.sin-gap-flex .heroe-paso > * + * { margin-top: 0.2rem; }
.sin-gap-flex .marcador > * + * { margin-top: 0.25em; }
.sin-gap-flex .acciones > *, .sin-gap-flex .contacto-fila > * { margin: 0 0.5rem 0.75rem; }
/* Cada canal es una columna (WhatsApp sobre el correo): sin márgenes a los costados, y entre los dos 0,875 rem como el gap.
   Desde 70 em las redes también van en columna. */
.sin-gap-flex .contacto-canal .contacto-fila > * { margin: 0; }
.sin-gap-flex .contacto-canal .contacto-fila > * + * { margin-top: 0.875rem; }   /* solo entre botones: nada de más debajo */
.sin-gap-flex .contacto-redes .contacto-fila > * { margin-bottom: 0; }   /* las redes caben en una fila: sin sobrante debajo */
@media (min-width: 70em) {
  .sin-gap-flex .contacto-redes .contacto-fila > * { margin: 0; }
  .sin-gap-flex .contacto-redes .contacto-fila > * + * { margin-top: 0.875rem; }
}
@media (max-width: 799.98px) {
  /* Sin márgenes a los costados de la fila: «Redes», de borde a borde y alineada con los botones de los canales, como con
     gap (revisión 2026-10-06: quedaban corridos 4-8 px). */
  .sin-gap-flex .contacto-redes .contacto-fila > * { margin: 0; }
  .sin-gap-flex .contacto-redes .contacto-fila > * + * { margin-left: 0.5rem; }
  .sin-gap-flex .contacto-redes .boton > * + * { margin-left: 0; }   /* ícono sobre el nombre: sin el margen de la fila */
  .sin-gap-flex .contacto-redes svg { margin-bottom: 0.3125rem; }
}
.sin-gap-flex .ficha-info .acciones > :first-child { margin-left: 0; }
.sin-gap-flex .chips > li, .sin-gap-flex .cifras > li { margin: 0 0.625rem 0.625rem 0; }
.sin-gap-flex .filtros > li { margin-right: 0.5rem; }
.sin-gap-flex .cta-ficha > :first-child { margin-right: 1.5rem; }
@media (min-width: 1024px) { .sin-gap-flex .filtros > li { margin-bottom: 0.5rem; } .sin-gap-flex .bloque-ancho .lista > li + li { margin-top: 0; } }
@media (min-width: 1024px) and (pointer: fine) { .sin-gap-flex .filtros > li { margin-right: 0.375rem; margin-bottom: 0.375rem; } }

/* 25. Botones «vidrio» (2026-10-14, pedido del usuario: «que todos los botones tengan ese efecto tipo glass», como en el
   iPhone; «tener un tipo de arte en una parte y luego cambiarlo en otras desentona la página»). Va al final para ganar a
   las reglas de cada botón; los anillos de foco (.boton:focus-visible…) tienen más especificidad y siguen mandando.
   · Rojos (.boton, Lubriguía): su rojo con brillo arriba y un halo rojo suave. El brillo no llega a la altura del texto:
     blanco sobre #ED0000 sigue en 4,5:1.
   · Claros (.boton-secundario, filtros, «Lubriguía» del menú, chips con enlace): vidrio grisáceo translúcido con desenfoque
     de lo que hay detrás, borde fino y brillo; el filtro elegido, vidrio oscuro.
   · «Negocios» (tarjeta Automotriz): el bronce de Quartz (#CE9450, medido en su logotipo; Hi-Perf y Rubia usan el mismo
     tono) en vidrio, texto bronce oscuro (6,3:1). Excepción pedida por el usuario: la tarjeta «Automotriz y posventa» de
     «Soluciones por industria» conserva su morado.
   · Sectores de «Industria»: su tinte de siempre con el mismo brillo.
   Sin backdrop-filter (televisores viejos) quedan el color y el brillo, sin desenfoque. */
.boton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(237, 0, 0, 0.22); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(237, 0, 0, 0.22); }
.boton[class*="canal-"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 2px rgba(23, 24, 28, 0.06), 0 6px 18px rgba(23, 24, 28, 0.08); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.18), var(--vidrio-sombra); }
.boton-secundario, .filtro, .js .nav-atajo, a.chip {
  border-color: #d3d4d9; border-color: rgba(23, 24, 28, 0.14);
  background: #eeeef1; background: rgba(118, 118, 128, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 1px 2px rgba(23, 24, 28, 0.06), 0 6px 18px rgba(23, 24, 28, 0.08); box-shadow: var(--vidrio-brillo), var(--vidrio-sombra);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
}
.js .nav-atajo[aria-current="page"] { border-color: #b50000; border-color: var(--acento-oscuro); }
.filtro[aria-current="true"] { background: #17181c; background: var(--tinta); border-color: #17181c; border-color: var(--tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.18), 0 1px 2px rgba(23, 24, 28, 0.06), 0 6px 18px rgba(23, 24, 28, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.18), var(--vidrio-sombra); }
@media (hover: hover) and (pointer: fine) {
  .boton-secundario:hover, .filtro:hover, .nav-atajo:hover, a.chip:hover { background: #e3e3e7; background: rgba(118, 118, 128, 0.2); border-color: rgba(23, 24, 28, 0.28); color: #17181c; color: var(--tinta); }
  .filtro[aria-current="true"]:hover { background: #17181c; background: var(--tinta); color: #ffffff; }
}
.camino-negocios a {
  border: 1px solid #ebd4b9; border-color: rgba(206, 148, 80, 0.4);
  background: #f8f0e6; background: rgba(206, 148, 80, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 4px 14px rgba(206, 148, 80, 0.16); box-shadow: var(--vidrio-brillo), 0 4px 14px rgba(206, 148, 80, 0.16);
  color: #7A4F1A;
}
@media (hover: hover) and (pointer: fine) { .camino-negocios a:hover { background: rgba(206, 148, 80, 0.24); color: #6E4718; } }
.camino-negocios a:active { background: rgba(206, 148, 80, 0.3); }
.camino-sectores a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45); box-shadow: var(--vidrio-brillo); }
/* Al tocar, sin el resaltado del navegador encima de su propia respuesta (se hunden o se marcan): tarjetas, sectores,
   «Negocios» y logotipos de la portada, como ya los botones de las fichas (revisión de la portada, punto 26, 2026-10-22). */
.linea h3 a, .sector-ver, .camino-sectores a, .camino-negocios a, .camino-sellos-vehiculo a { -webkit-tap-highlight-color: transparent; }
/* Al pulsar, los sectores, los botones de «Negocios» y los logotipos de «Tu vehículo» se hunden a 0,97 en 160 ms con la
   curva común (revisión de la portada, 2026-10-22: los sectores no respondían, «Negocios» solo cambiaba de fondo y los
   logotipos iban a 0,96 en 150 ms). */
.camino-sectores a { transition: background 1.6s ease-in-out, border-color 1.6s ease-in-out, box-shadow 1.6s ease-in-out, -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.camino-negocios a { transition: background 0.15s ease, -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.camino-sellos-vehiculo a { -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.camino-sectores a:active, .camino-negocios a:active, .camino-sellos-vehiculo a:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .camino-sectores a, .camino-sellos-vehiculo a { -webkit-transition: none; transition: none; }   /* como antes de este bloque */
  .camino-sectores a:active, .camino-negocios a:active, .camino-sellos-vehiculo a:active { -webkit-transform: none; transform: none; }
}
.camino-sectores a.activo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(var(--rgb-sector), 0.2); }
@media (hover: hover) and (pointer: fine) { .camino-sectores a:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(var(--rgb-sector), 0.2); } }
html.tv .camino-sectores a:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(23, 24, 28, 0.06); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(var(--rgb-sector), 0.2); }
.camino a.camino-boton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(239, 59, 59, 0.26); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(239, 59, 59, 0.26); }

/* Contacto en vidrio (2026-10-14, pedido del usuario: WhatsApp y correo «que no sea tan sencillo blanco»; Instagram,
   Facebook y YouTube «en negro para que resalte mejor los colores»).
   · WhatsApp: vidrio verde translúcido con brillo y halo verde; texto oscuro (9:1).
   · Correo: vidrio gris más marcado que el de los demás botones claros, con el sobre en el rojo de la marca.
   · Redes: el color de cada red en vidrio (brillo, translucidez y halo de su color), sin contorno; texto e ícono blancos
     (pedido del usuario: «respeta los colores de las redes sociales»; el contorno oscuro no le gustó). */
.boton.canal-whatsapp { background: #25D366; background: rgba(37, 211, 102, 0.88); color: #111B21;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 18px rgba(37, 211, 102, 0.3); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 18px rgba(37, 211, 102, 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.boton-secundario.canal-correo { background: #e4e4e8; background: rgba(118, 118, 128, 0.2); border-color: rgba(23, 24, 28, 0.2); }
.boton-secundario.canal-correo svg { color: #ED0000; color: var(--acento); }
.boton.canal-instagram, .boton.canal-facebook, .boton.canal-youtube { color: #ffffff;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.boton.canal-instagram { background: #C13584; background: linear-gradient(45deg, rgba(245, 133, 41, 0.92) 0%, rgba(193, 53, 132, 0.92) 18%, rgba(129, 52, 175, 0.92) 60%, rgba(81, 91, 212, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(193, 53, 132, 0.3); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(193, 53, 132, 0.3); }
.boton.canal-facebook { background: #0866FF; background: rgba(8, 102, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(8, 102, 255, 0.3); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(8, 102, 255, 0.3); }
.boton.canal-youtube { background: #E62117; background: rgba(230, 33, 23, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(230, 33, 23, 0.3); box-shadow: var(--vidrio-brillo), inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(230, 33, 23, 0.3); }
@media (hover: hover) and (pointer: fine) {
  .boton.canal-whatsapp:hover { background: rgba(37, 211, 102, 1); color: #111B21; filter: none; }
  .boton-secundario.canal-correo:hover { background: rgba(118, 118, 128, 0.28); }
  .boton.canal-instagram:hover, .boton.canal-facebook:hover, .boton.canal-youtube:hover { color: #ffffff; filter: brightness(1.08); }
}
.boton.canal-whatsapp:active { background: rgba(31, 190, 92, 1); filter: none; }
.boton.canal-instagram:active, .boton.canal-facebook:active, .boton.canal-youtube:active { filter: brightness(0.92); }

/* 26. Sellos de marca sobre la foto de la página del sector (2026-10-14; generar.py, SELLOS_SECTOR; las tarjetas de la
   portada van sin sello): el logotipo recortado, sin placa y en sus colores, abajo a la izquierda. En la página del sector la figura es una rejilla:
   foto y sello en la misma celda y el crédito debajo; sin rejilla (televisores viejos) el sello no se muestra. */
.sello-foto { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.sello-foto img { display: block; width: auto; height: 1.5rem; max-width: none; }
/* En sus colores de marca (pedido del usuario: «respeta los colores de los logotipos»; Lubmarine rojo y azul, Rubia
   bronce, Nevastane las letras blancas de su logotipo: en verde no se leían sobre la foto) con un borde negro fino y translúcido que sigue la forma y una sombra suave: se
   leen sobre cualquier foto sin placa y se integran con ella (el borde blanco desentonaba; pedido del usuario, 2026-10-14).
   Regla para los sellos que se agreguen: la misma. */
.sello-foto img { -webkit-filter: drop-shadow(0.75px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(-0.75px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0.75px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 -0.75px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(0.75px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(-0.75px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0.75px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 -0.75px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); }
.sello-foto-nevastane-blanco img { height: 1.75rem; }
.sello-foto-rubia img { height: 1.125rem; }
/* «Works» con la firma de las submarcas de Rubia (como «ENGINE OIL» en su logotipo): franja bronce con la esquina
   superior izquierda curva y la palabra en blanco, cursiva y alineada a la derecha, del ancho de RUBiA. Sin borde negro
   (pedido del usuario, 2026-10-14: «se ve horrible»). */
.sello-foto-texto { align-self: stretch; margin-top: 0.1875rem; padding: 0.12em 0.45em 0.1em 1.2em; border-radius: 1.1em 0.12em 0.12em 0.12em;
  background: #BE8C4A; background: linear-gradient(180deg, #CC9C5C 0%, #BE8C4A 55%, #A97A3C 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 0.6875rem; font-style: italic; font-weight: 800; line-height: 1.15; letter-spacing: 0.06em; text-align: right; text-transform: uppercase; color: #ffffff; }
.sector-foto { display: grid; }
.sector-foto img, .sector-foto .sello-foto { grid-area: 1 / 1; }
.sector-foto figcaption { grid-row: 2; }
.sector-foto .sello-foto { position: relative; z-index: 1; align-self: end; justify-self: start; margin: 0 0 0.875rem 1rem; }
.sector-foto .sello-foto img { width: auto; height: 1.5rem; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none; }   /* no hereda el recorte de la foto */
.sector-foto .sello-foto-nevastane-blanco img { height: 1.875rem; }
.sector-foto .sello-foto-rubia img { height: 1.125rem; }
.sector-foto .sello-foto-texto { font-size: 0.6875rem; }
@media (min-width: 600px) {
  .sector-foto .sello-foto { margin: 0 0 1.5rem 1.75rem; }
  .sector-foto .sello-foto img { height: 2.75rem; }
  .sector-foto .sello-foto-nevastane-blanco img { height: 3.25rem; }
  .sector-foto .sello-foto-rubia img { height: 2rem; }
  .sector-foto .sello-foto-texto { font-size: 1.0625rem; }
}
.sector-foto .sello-foto-abajo-derecha { justify-self: end; margin: 0 1rem 0.875rem 0; }
@media (min-width: 600px) { .sector-foto .sello-foto-abajo-derecha { margin: 0 1.75rem 1.5rem 0; } }
@supports not (display: grid) { .sector-foto .sello-foto { display: none; } }

/* ---------- 27. Privacidad y aviso legal (auditoría 2026-10-15): texto largo con las secciones de las guías ---------- */
.legal .pagina-cabecera { padding-bottom: 1rem; padding-bottom: var(--e-4); }
.legal .guia-seccion { margin-top: 2.5rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.legal .guia-seccion > h2 { font-size: 1.4rem; font-size: var(--t-xl); }
.legal .etapa-texto + .etapa-texto { margin-top: 0.75rem; }
.legal .etapa-texto .enlace-texto { padding-top: 0; padding-bottom: 0; }   /* sin alterar el interlineado del párrafo */
.legal [data-correo-responsable] { text-align: left; }   /* el correo no cabe junto al rótulo: justificado abría un hueco */
.legal ul { max-width: 60ch; max-width: var(--medida-larga); margin: 0.875rem 0 0; padding-left: 1.25rem; line-height: 1.55; line-height: var(--lh-texto); }
.legal li + li { margin-top: 0.375rem; }
.legal .legal-cierre { margin-bottom: 2.5rem; margin-bottom: var(--e-7); }

/* ---------- 28. Texto corrido justificado (pedido del usuario, 2026-10-15: «textos uniformes») ----------
   Solo los párrafos largos alineados a la izquierda: bajadas de cabecera (catálogo, sectores, guías, legal), bajada de
   la ficha, introducción y textos de cada etapa de las guías, textos de la ficha y notas de guías y fichas. Quedan
   como estaban los textos centrados (héroe, contacto, 404, cabeceras de sección), las listas y las tarjetas cortas.
   La división en sílabas (lang="es") evita los huecos grandes entre palabras en columnas angostas; la última línea de
   cada párrafo queda a la izquierda. Sin :has() ni nada moderno: en los televisores viejos solo falta la división. */
.pagina-cabecera .bajada, .ficha-info .bajada, .guia-intro, .etapa-texto, .ficha-texto, .guia-seccion .nota, .bloque .nota {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Bajadas de letra grande en celular: unas 35 letras por línea; justificadas abrían huecos visibles donde el navegador no
   divide palabras (comprobado a 375 px el 2026-10-15). En celular siguen a la izquierda; desde 600 px, justificadas. */
@media (max-width: 37.49em) {
  .pagina-cabecera .bajada, .ficha-info .bajada { text-align: left; }
}

/* ---------- 29. «Ver el portafolio» y «Ver el catálogo completo» (pedido del usuario, 2026-10-15) ----------
   En reposo, el vidrio gris de los demás botones claros. Con el ratón encima, al pulsar, con foco o mientras gira, se
   tiñen de un rojo suave (fundido de ::before, sin temporizador) con texto rojo oscuro (6,3:1). «Ver el catálogo
   completo» (.boton-giro) además da una vuelta de 360° con un anillo rojo suave y difuminado por el borde (boton-giro-avance, pedido del usuario el 2026-10-15): llega al 90 % de la vuelta
   en 0,158 s y en ese momento se pide el catálogo (main.js, initGiro); mientras carga (~0,3 s en vivo) pasa del 90
   al 95 % y después sigue cada vez más lento hasta el 98 %, sin detenerse ni cerrar la vuelta. «Ver el portafolio» baja a la sección al instante: sin vuelta.
   Dónde: los dos en PC (desde 1024 px) y televisores (html.tv); «Ver el catálogo completo» también en celular y tableta
   (tercera copia, sin media query). «Ver el portafolio» del inicio no cambia en celular y tableta.
   El ángulo de la vuelta (--giro) se anima con @property; sin @property (motores viejos) el anillo aparece sin girar. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes boton-giro { from { --giro: 0deg; } to { --giro: 360deg; } }
@keyframes boton-giro-avance {
  0% { --giro: 0deg; animation-timing-function: linear; }
  9.875% { --giro: 324deg; animation-timing-function: cubic-bezier(0.3, 0.5, 0.6, 1); }
  28.625% { --giro: 342deg; animation-timing-function: cubic-bezier(0.2, 0.5, 0.4, 1); }
  100% { --giro: 354deg; }
}
@media (min-width: 1024px) {
  .boton-secundario.boton-portafolio { position: relative; z-index: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
  .boton-portafolio::before { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: -1; border-radius: inherit;
    background: linear-gradient(160deg, #fef2f2 0%, #fde0e0 60%, #feebeb 100%); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
  .boton-secundario.boton-portafolio:hover, .boton-secundario.boton-portafolio:active, .boton-secundario.boton-portafolio.girando {
    color: #b50000; color: var(--acento-oscuro); border-color: rgba(237, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 6px 18px rgba(237, 0, 0, 0.12); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(237, 0, 0, 0.12); text-decoration: none; }
  .boton-portafolio:hover::before, .boton-portafolio:active::before, .boton-portafolio.girando::before { opacity: 1; }
  .boton-giro::after { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: -2; border-radius: inherit;
    background: conic-gradient(from var(--giro), rgba(237, 0, 0, 0) 0deg, rgba(237, 0, 0, 0) 140deg, rgba(237, 0, 0, 0.18) 250deg, rgba(237, 0, 0, 0.55) 330deg, rgba(255, 92, 92, 0.85) 354deg, rgba(237, 0, 0, 0) 360deg);
    -webkit-filter: blur(1.5px); filter: blur(1.5px); opacity: 0; pointer-events: none; }
  .boton-giro.girando::after { opacity: 1; animation: boton-giro-avance 1.6s linear forwards; }
  .boton-secundario.boton-portafolio:focus-visible { color: #b50000; color: var(--acento-oscuro); border-color: rgba(237, 0, 0, 0.3); }
  .boton-portafolio:focus-visible::before { opacity: 1; }
}
html.tv .boton-secundario.boton-portafolio { position: relative; z-index: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
html.tv .boton-portafolio::before { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, #fef2f2 0%, #fde0e0 60%, #feebeb 100%); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
html.tv .boton-secundario.boton-portafolio:hover, html.tv .boton-secundario.boton-portafolio:active, html.tv .boton-secundario.boton-portafolio.girando {
  color: #b50000; color: var(--acento-oscuro); border-color: rgba(237, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 6px 18px rgba(237, 0, 0, 0.12); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(237, 0, 0, 0.12); text-decoration: none; }
html.tv .boton-portafolio:hover::before, html.tv .boton-portafolio:active::before, html.tv .boton-portafolio.girando::before { opacity: 1; }
html.tv .boton-giro::after { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--giro), rgba(237, 0, 0, 0) 0deg, rgba(237, 0, 0, 0) 140deg, rgba(237, 0, 0, 0.18) 250deg, rgba(237, 0, 0, 0.55) 330deg, rgba(255, 92, 92, 0.85) 354deg, rgba(237, 0, 0, 0) 360deg);
  -webkit-filter: blur(1.5px); filter: blur(1.5px); opacity: 0; pointer-events: none; }
html.tv .boton-giro.girando::after { opacity: 1; animation: boton-giro-avance 1.6s linear forwards; }
html.tv .boton-secundario.boton-portafolio:focus-visible { color: #b50000; color: var(--acento-oscuro); border-color: rgba(237, 0, 0, 0.3); }
html.tv .boton-portafolio:focus-visible::before { opacity: 1; }
.boton-giro.boton-secundario.boton-portafolio { position: relative; z-index: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.boton-giro.boton-portafolio::before { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, #fef2f2 0%, #fde0e0 60%, #feebeb 100%); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.boton-giro.boton-secundario.boton-portafolio:hover, .boton-giro.boton-secundario.boton-portafolio:active, .boton-giro.boton-secundario.boton-portafolio.girando {
  color: #b50000; color: var(--acento-oscuro); border-color: rgba(237, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0.875rem 0.75rem -0.75rem rgba(255, 255, 255, 0.45), 0 6px 18px rgba(237, 0, 0, 0.12); box-shadow: var(--vidrio-brillo), 0 6px 18px rgba(237, 0, 0, 0.12); text-decoration: none; }
.boton-giro.boton-portafolio:hover::before, .boton-giro.boton-portafolio:active::before, .boton-giro.boton-portafolio.girando::before { opacity: 1; }
.boton-giro.boton-giro::after { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: -2; border-radius: inherit;
  background: conic-gradient(from var(--giro), rgba(237, 0, 0, 0) 0deg, rgba(237, 0, 0, 0) 140deg, rgba(237, 0, 0, 0.18) 250deg, rgba(237, 0, 0, 0.55) 330deg, rgba(255, 92, 92, 0.85) 354deg, rgba(237, 0, 0, 0) 360deg);
  -webkit-filter: blur(1.5px); filter: blur(1.5px); opacity: 0; pointer-events: none; }
.boton-giro.boton-giro.girando::after { opacity: 1; animation: boton-giro-avance 1.6s linear forwards; }
.boton-giro.boton-secundario.boton-portafolio:focus-visible { color: #b50000; color: var(--acento-oscuro); border-color: rgba(237, 0, 0, 0.3); }
.boton-giro.boton-portafolio:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .boton-portafolio, .boton-portafolio::before { transition: none; } .boton-giro.girando::after { animation: none; } }


/* 30. Calculadora de ahorro por guía (2026-10-19). v4 el mismo día, por pedido del usuario (experiencia de uso):
   · La tarjeta del asesor sube a la cabecera, al lado del título (donde iba el texto de introducción); el texto pasa debajo,
     a lo ancho; la calculadora se despliega bajo ese texto con el botón VERDE «Calcula tu ahorro con TotalEnergies» (con el
     ícono de la calculadora) y se cierra tocando su título o «Cerrar».
   · Bloques del formulario con tonos suaves; campos alineados (subgrid) y valor pegado a su unidad; «Propuesta
     TotalEnergies» abierta con el logotipo; VERDE = beneficio, ROJO = alerta; «Ahorro estimado»; cabeceras centradas.
   · Imprimir saca SOLO la propuesta armada, en 1 o 2 carillas limpias: logotipo de Oilsuper a la izquierda, título
     centrado, logotipo de TotalEnergies y fecha/hora a la derecha, marca de agua grande, pie «Oilsuper · representante de
     TotalEnergies» / «www.oilsuper.info» y «Página N de M» en el margen (los márgenes de @page con contenido propio
     sustituyen la cabecera y el pie del navegador: así desaparece la URL). Colores de marca al imprimir (print-color-adjust).
   Sin :has (televisores: css_televisores agrega los literales de var()). */
.pagina-cabecera .cta-ficha { margin-top: 1.5rem; margin-top: var(--e-5); padding: 1.5rem; padding: var(--e-5); flex-direction: column; align-items: stretch; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); }
.pagina-cabecera .cta-ficha h2 { font-size: 1.4rem; font-size: var(--t-xl); }
/* Los dos botones, uno bajo otro y de la misma altura (grid-auto-rows: 1fr iguala las filas si el verde ocupa dos líneas). */
.cta-acciones { display: grid; grid-auto-rows: 1fr; grid-gap: 0.75rem; gap: 0.75rem; grid-gap: var(--e-3); gap: var(--e-3); }
.cta-acciones .boton { padding-left: 1.125rem; padding-right: 1.125rem; }
.boton-verde { background: #15803d; color: #ffffff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(21, 128, 61, 0.25); }
.boton-verde svg { width: 1.25rem; height: 1.25rem; flex: none; }
.boton-verde:hover, .boton-verde:focus-visible { background: #166534; }
.boton-verde[aria-expanded="true"] { background: #166534; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25); }
.pagina-industria .guia-intro { max-width: none; margin: 1.5rem 0 0; margin: var(--e-5) 0 0; }
.js .calculadora { display: none; }
.js .calculadora.abierta { display: block; -webkit-animation: entra-bajando 0.25s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: entra-bajando 0.25s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.guia-intro + .calculadora, .guia-intro + .mapa-visual { margin-top: 1.5rem; margin-top: var(--e-5); }
.calculadora { border: 1px solid #bfe3cb; border-radius: 1.5rem; border-radius: var(--r-2xl); background: #ffffff; background: var(--fondo); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
/* La cabecera de la calculadora también la cierra (toque o Enter): es un desplegable. */
.calc-cabecera { display: flex; align-items: flex-start; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); padding: 1.5rem 1.375rem; padding: var(--e-5) var(--tarjeta-pad); border-radius: 1.5rem 1.5rem 0 0; border-radius: var(--r-2xl) var(--r-2xl) 0 0; cursor: pointer; }
.calc-cabecera:hover { background: #f3faf5; }
.calc-cabecera:focus-visible { outline: 3px solid #2456E6; outline: 3px solid var(--foco); outline-offset: -3px; }
.calc-caja-icono { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 1rem; border-radius: var(--r-lg); background: #e7f6ec; color: #166534; display: flex; align-items: center; justify-content: center; }
.calc-caja-icono svg { width: 1.5rem; height: 1.5rem; }
.calc-caja-textos { flex: 1 1 auto; min-width: 0; }
.calc-caja-titulo { margin: 0; font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; color: #17181c; color: var(--tinta); }
.calc-caja-bajada { margin: 0.375rem 0 0; font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); line-height: 1.4; max-width: 60ch; max-width: var(--medida); }
.calc-cerrar { flex: 0 0 auto; display: inline-flex; align-items: center; grid-gap: 0.375rem; gap: 0.375rem; min-height: 2.25rem; padding: 0 0.875rem; border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); border-radius: 999px; border-radius: var(--r-pill); background: #ffffff; background: var(--fondo); font: inherit; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; color: #17181c; color: var(--tinta); cursor: pointer; white-space: nowrap; }
.calc-cerrar::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; -webkit-transform: translateY(2px) rotate(225deg); transform: translateY(2px) rotate(225deg); }
.calc-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1.5rem; gap: 1.5rem; grid-gap: var(--e-5); gap: var(--e-5); padding: 0 1.375rem 1.375rem; padding: 0 var(--tarjeta-pad) var(--tarjeta-pad); align-items: start; }
.calc-form { display: grid; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); }
.calc-bloque { margin: 0; padding: 1rem 1.5rem 1.5rem; padding: var(--e-4) var(--e-5) var(--e-5); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.125rem; border-radius: var(--r-xl); background: #fbfbfc; background: var(--superficie-alt); display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.75rem 1rem; gap: 0.75rem 1rem; grid-gap: var(--e-3) var(--e-4); gap: var(--e-3) var(--e-4); }
/* La leyenda flotada deja de «sentarse» en el borde y pasa a ser la cabecera del bloque (texto a la izquierda, logotipo a la derecha). */
.calc-bloque legend { float: left; width: 100%; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; grid-gap: 0.75rem; gap: 0.75rem; grid-gap: var(--e-3); gap: var(--e-3); padding: 0; margin: 0; font-weight: 900; font-size: 1.0625rem; font-size: var(--t-md); line-height: 1.2; color: #17181c; color: var(--tinta); }
.calc-bloque-operacion { background: #eef4ff; border-color: #d3e0fa; }
.calc-bloque-operacion legend { color: #1e3a8a; }
.calc-bloque-gasto { background: #fff7e6; border-color: #f6e2b4; }
.calc-bloque-gasto legend { color: #92400e; }
.calc-bloque-paros { background: #f5f0ff; border-color: #e0d4fb; }
.calc-bloque-paros legend { color: #5b21b6; }
.calc-bloque-energia { background: #e6f8f6; border-color: #bfe8e2; }
.calc-bloque-energia legend { color: #115e59; }
.calc-propuesta { background: #fff2f2; border-color: #f6cfcf; }
.calc-propuesta legend { color: #b50000; color: var(--acento-oscuro); }
.calc-logo { flex: 0 0 auto; height: 2.5rem; width: auto; }
.calc-propuesta-nota { grid-column: 1 / -1; margin-top: -0.25rem; }
/* Cada campo ocupa tres filas del bloque (rótulo · campo · ayuda) con subgrid: los campos de una misma fila quedan a la
   misma altura aunque un rótulo ocupe dos líneas. Sin subgrid (motores viejos) cada campo se apila igual que antes. */
.calc-campo { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-gap: 0.25rem; gap: 0.25rem; grid-gap: var(--e-1); gap: var(--e-1); align-content: end; }
.calc-etiqueta { font-weight: 700; font-size: 0.9rem; font-size: var(--t-sm); line-height: 1.3; color: #17181c; color: var(--tinta); align-self: end; }
/* La casilla mide lo que mide la cifra: el JS le da al input un ancho en «ch» según los dígitos escritos y crece al teclear;
   los porcentajes van compactos y centrados. Sin JS, el ancho de reserva (5 ch) sirve igual. */
.calc-entrada { display: inline-flex; justify-self: start; width: auto; max-width: 100%; align-items: center; border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); border-radius: 999px; border-radius: var(--r-pill); background: #ffffff; background: var(--fondo); min-height: 2.75rem; min-height: var(--objetivo); overflow: hidden; }
.calc-entrada:focus-within { border-color: #2456E6; border-color: var(--foco); box-shadow: 0 0 0 3px rgba(36, 86, 230, 0.18); }
.calc-entrada input { flex: 0 0 auto; min-width: 0; width: 5ch; box-sizing: content-box; border: 0; background: transparent; padding: 0 0.25rem 0 1rem; padding: 0 0.25rem 0 var(--e-4); font: inherit; font-size: 1rem; font-size: max(1rem, 16px); font-weight: 700; color: #17181c; color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; }
.calc-entrada-pct input { width: 3.5ch; text-align: center; padding-left: 0.75rem; padding-left: var(--e-3); }
.calc-entrada input:focus { outline: none; }
.calc-unidad { flex: 0 0 auto; padding: 0 1rem 0 0; padding: 0 var(--e-4) 0 0; font-size: 0.84rem; font-size: var(--t-xs); color: #55575e; color: var(--secundario); white-space: nowrap; }
.calc-ayuda { display: block; font-size: 0.78rem; font-size: var(--t-2xs); color: #6b6d75; color: var(--suave); line-height: 1.4; align-self: start; }
/* Resultado: cifras tabulares (misma anchura por dígito) para que las columnas queden alineadas. */
.calc-resultado { border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.5rem; border-radius: var(--r-2xl); padding: 1.5rem; padding: var(--e-5); background: #f6f7f8; background: var(--superficie); font-variant-numeric: tabular-nums; }
.calc-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 1.125rem; gap: 1.125rem; grid-gap: var(--gap); gap: var(--gap); }
.calc-tarjeta { background: #ffffff; background: var(--fondo); border-radius: 1rem; border-radius: var(--r-lg); padding: 1rem; padding: var(--e-4); border: 1px solid #e8e9ec; border: 1px solid var(--borde); display: grid; grid-gap: 0.25rem; gap: 0.25rem; grid-gap: var(--e-1); gap: var(--e-1); align-content: start; }
.calc-tarjeta-principal { grid-column: 1 / -1; background: #15803d; border-color: #15803d; color: #ffffff; }
.calc-tarjeta-rotulo { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; color: #55575e; color: var(--secundario); line-height: 1.3; }
.calc-tarjeta-principal .calc-tarjeta-rotulo { color: rgba(255, 255, 255, 0.88); }
.calc-tarjeta strong { font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; font-weight: 1000; letter-spacing: -0.01em; line-height: 1.1; color: #166534; }
.calc-tarjeta-principal strong { font-size: 2.25rem; font-size: var(--t-3xl); color: #ffffff; }
.calc-sin-ahorro .calc-tarjeta-principal { background: #ED0000; background: var(--acento); border-color: #ED0000; border-color: var(--acento); }
.calc-sin-ahorro .calc-tarjeta strong { color: #b50000; color: var(--acento-oscuro); }
.calc-sin-ahorro .calc-tarjeta-principal strong { color: #ffffff; }
.calc-resultado .tabla-contenedor { margin-top: 1.5rem; margin-top: var(--e-5); overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; border-radius: var(--r-lg); }
.calc-tabla { width: 100%; border-collapse: collapse; font-size: 0.84rem; font-size: var(--t-xs); background: #ffffff; background: var(--fondo); }
.calc-tabla th, .calc-tabla td { padding: 0.5rem 0.5rem; text-align: right; border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); white-space: nowrap; vertical-align: middle; }
.calc-tabla th[scope="row"], .calc-tabla thead th:first-child { text-align: left; font-weight: 700; white-space: normal; }
.calc-tabla thead th { background: #fbfbfc; background: var(--superficie-alt); font-size: 0.78rem; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: #55575e; color: var(--secundario); white-space: normal; text-align: center; vertical-align: bottom; }
.calc-tabla tfoot th, .calc-tabla tfoot td { font-weight: 900; border-top: 2px solid #d9dade; border-top: 2px solid var(--borde-fuerte); border-bottom: 0; }
.calc-tabla td:last-child, .calc-tabla tfoot td:last-child { color: #166534; font-weight: 900; background: #f0faf3; }
.calc-sin-ahorro .calc-tabla tfoot td:last-child { color: #b50000; color: var(--acento-oscuro); background: #fff2f2; }
.calc-kpi-titulo { font-size: 1.0625rem; font-size: var(--t-md); font-weight: 900; margin: 1.5rem 0 0.75rem; margin: var(--e-5) 0 var(--e-3); }
.calc-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 0.5rem; gap: 0.5rem; grid-gap: var(--e-2); gap: var(--e-2); }
.calc-kpis li { display: flex; justify-content: space-between; align-items: baseline; grid-gap: 0.75rem; gap: 0.75rem; grid-gap: var(--e-3); gap: var(--e-3); flex-wrap: wrap; padding: 0.5rem 0; padding: var(--e-2) 0; border-bottom: 1px solid #e8e9ec; border-bottom: 1px solid var(--borde); font-size: 0.9rem; font-size: var(--t-sm); }
.calc-kpi-nombre { color: #55575e; color: var(--secundario); flex: 1 1 14rem; }
.calc-kpi-valores { font-weight: 900; white-space: nowrap; margin-left: auto; }
.calc-kpi-flecha { margin: 0 0.5rem; margin: 0 var(--e-2); color: #6b6d75; color: var(--suave); font-weight: 400; }
.calc-kpi-propuesta { color: #166534; }
.calc-argumento { margin-top: 1.5rem; margin-top: var(--e-5); font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
/* Los cuatro botones en un bloque de 2 × 2, todos del mismo tamaño (2026-10-21, pedido del usuario): asesor y WhatsApp
   arriba, correo e Imprimir abajo, también en el celular. flex 1 1 40 %: dos por fila que crecen a la mitad exacta; sin
   «gap» de flex (televisores viejos, .sin-gap-flex) el aire lo dan los márgenes. */
.calc-acciones { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 0.75rem; gap: 0.75rem; grid-gap: var(--e-3); gap: var(--e-3); margin-top: 1rem; margin-top: var(--e-4); }
.calc-acciones .boton, .calc-acciones .boton-secundario {
  -webkit-box-flex: 1; -webkit-flex: 1 1 40%; flex: 1 1 40%; min-width: 0; box-sizing: border-box; min-height: 3.25rem; padding: 0.625rem 0.875rem;
  border-radius: 999px; border-radius: var(--r-pill); font: inherit; font-size: 0.9375rem; font-weight: 800; line-height: 1.2; text-align: center; cursor: pointer;
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; grid-gap: 0.5rem; gap: 0.5rem; text-decoration: none;
}
.sin-gap-flex .calc-acciones > * { margin: 0 0 0.75rem; }
.sin-gap-flex .calc-acciones > :nth-child(odd) { margin-right: 0.75rem; }
.calc-acciones .boton { background: #ED0000; background: var(--acento); color: #ffffff; border: 0; }
.calc-acciones .boton-secundario { border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); }
.calc-resultado .nota { margin-top: 1rem; margin-top: var(--e-4); font-size: 0.78rem; font-size: var(--t-2xs); color: #6b6d75; color: var(--suave); }
/* «Volver al inicio»: alineado con los bloques del formulario (mismo relleno lateral) y metido en el aire inferior. */
.calc-volver { margin: calc(-1 * 0.75rem) 0 0; margin: calc(-1 * var(--e-3)) 0 0; padding: 0 1.375rem 1.5rem; padding: 0 var(--tarjeta-pad) var(--e-5); }
/* Avisos del botón «Enviar a un asesor» (PDF, 2026-10-20): mientras se arma y qué hacer con el archivo. */
.calc-aviso { margin: 0.75rem 0 0; margin: var(--e-3) 0 0; font-size: 0.78rem; font-size: var(--t-2xs); color: #17181c; color: var(--tinta); }
.calc-acciones .boton.ocupado, .calc-acciones .boton-secundario.ocupado { opacity: 0.7; pointer-events: none; cursor: progress; }
/* Colores de Contacto (2026-10-21, pedido del usuario): «Compartir por WhatsApp» verde y «Enviar por correo» gris;
   «Imprimir» queda blanco. Más específicos que .calc-acciones .boton / .boton-secundario. */
.calc-acciones .boton.canal-whatsapp { background: #25D366; color: #111B21; }
.calc-acciones .boton-secundario.canal-correo { background: #e4e4e8; background: rgba(118, 118, 128, 0.2); border-color: rgba(23, 24, 28, 0.2); }
.calc-acciones .boton-secundario.canal-correo svg { color: #ED0000; color: var(--acento); }
.calc-acciones svg { flex: none; }
/* Celular: mosaicos de 2 × 2 con el ícono arriba y el texto debajo (en dos líneas como mucho), todos de la misma altura. */
@media (max-width: 599.98px) {
  .calc-acciones .boton, .calc-acciones .boton-secundario { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; grid-gap: 0.375rem; gap: 0.375rem; min-height: 5.25rem; padding: 0.625rem 0.5rem; border-radius: 0.75rem; border-radius: var(--r-md); }
}
/* Copia fuera de pantalla con la que main.js dibuja el PDF que se comparte (html2canvas): el ancho útil de la carilla A4
   (210 − 2 × 12 mm) y las mismas reglas que la impresión, que build/generar.py (css_calc_pdf) repite bajo .calc-pdf al
   final de la hoja publicada. */
.calc-pdf { position: absolute; left: -3000px; top: 0; width: 186mm; background: #ffffff; pointer-events: none; }
.calc-pdf .calculadora { display: block; margin: 0; }
/* html2canvas dibuja cada línea de texto unos píxeles más abajo que el navegador: aire al pie de las tres partes que se
   convierten en imagen (cabecera, cuerpo y pie), para que la última línea no quede cortada. */
.calc-pdf .calc-impresion-cabecera, .calc-pdf .calc-hoja > tbody > tr > td, .calc-pdf .calc-pie-impresion { padding-bottom: 3mm; }
/* Solo al imprimir: cabecera con logotipos, los datos escritos, la marca de agua y el pie. */
.calc-impresion, .calc-impresion-cabecera, .calc-marca-agua, .calc-pie-impresion { display: none; }
/* La sección se imprime como tabla real (thead y tfoot se repiten en cada carilla en Chromium); en pantalla, todo en bloque. */
.calc-hoja, .calc-hoja > thead, .calc-hoja > tbody, .calc-hoja > tfoot, .calc-hoja > thead > tr, .calc-hoja > tbody > tr, .calc-hoja > tfoot > tr, .calc-hoja > thead > tr > td, .calc-hoja > tbody > tr > td, .calc-hoja > tfoot > tr > td { display: block; width: auto; padding: 0; margin: 0; border: 0; background: transparent; }
.calc-hoja { border-collapse: collapse; border-spacing: 0; }
@media (min-width: 40em) { .calc-bloque { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc-tarjetas { grid-template-columns: 2fr 1fr 1fr; } .calc-tarjeta-principal { grid-column: auto; } }
@media (min-width: 64em) { .calc-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .calc-resultado { position: sticky; top: calc((3.75rem + 4px) + 1rem); top: calc(var(--alto-nav) + 1rem); } .calc-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc-tarjeta-principal { grid-column: 1 / -1; } }
/* Cabecera de la guía en la computadora: título a la izquierda y la tarjeta del asesor a la derecha (antes iba la intro). */
@media (min-width: 1024px) {
  .pagina-industria .pagina-cabecera { grid-template-areas: "cejilla ." "titulo cta" "bajada cta"; align-items: end; }
  .pagina-industria .pagina-cabecera .cta-ficha { grid-area: cta; margin-top: 0; align-self: end; }
  .pagina-industria .guia-intro { margin-top: 1rem; margin-top: var(--e-4); }
}
@media print {
  @page {
    size: A4; margin: 10mm 12mm 14mm;
    @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; }
    @bottom-left { content: ""; } @bottom-center { content: ""; }
    @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: "Nunito Sans", Arial, sans-serif; font-size: 8pt; color: #333333; }
  }
  /* >>> impresion-calculadora */
  .calc-form, .calc-acciones, .calc-cabecera, .calc-aviso, .cta-acciones .boton-verde { display: none !important; }
  .js .calculadora { display: block; }
  /* La propuesta ocupa la carilla entera (A4 menos márgenes): el pie baja al final de la hoja y el contenido se reparte. */
  /* Si la propuesta pasa de una carilla (celular), la cabecera y el pie se repiten en cada hoja: la sección se imprime como
     tabla (cabecera = table-header-group, cuerpo = table-row-group, pie = table-footer-group) y la marca de agua va fija. */
  .calculadora { position: relative; border: 0; box-shadow: none; border-radius: 0; font-size: 9.5pt; line-height: 1.28; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .calc-hoja { display: table; width: 100%; min-height: 258mm; border-collapse: collapse; }
  .calc-hoja > thead { display: table-header-group; }
  .calc-hoja > tbody { display: table-row-group; }
  .calc-hoja > tfoot { display: table-footer-group; }
  .calc-hoja > thead > tr, .calc-hoja > tbody > tr, .calc-hoja > tfoot > tr { display: table-row; }
  .calc-hoja > thead > tr > td, .calc-hoja > tbody > tr > td, .calc-hoja > tfoot > tr > td { display: table-cell; padding: 0; vertical-align: top; }
  .calc-hoja > tbody > tr > td { height: 100%; }
  .calc-impresion-cabecera, .calc-pie-impresion { display: block; }
  .calc-cuerpo { display: block; padding: 0; }
  .calc-volver { display: none !important; }
  /* Cabecera impresa: Oilsuper a la izquierda, título centrado, TotalEnergies y fecha/hora a la derecha. */
  .calc-impresion-cabecera-fila { position: relative; z-index: 1; display: grid; grid-template-columns: 34mm minmax(0, 1fr) 34mm; align-items: center; grid-gap: 4mm; gap: 4mm; padding: 0 8mm 2.5mm 0; border-bottom: 1px solid #999999; }
  .calc-logo-oilsuper { width: 34mm; height: auto; }
  .calc-impresion-titulo { margin: 0; text-align: center; font-size: 13.5pt; font-weight: 900; line-height: 1.15; }
  .calc-impresion-derecha { display: grid; justify-items: end; grid-gap: 1mm; gap: 1mm; padding-right: 2mm; }
  .calc-logo-impresion { width: 17mm; height: auto; }
  .calc-impresion-fecha { font-size: 7.5pt; color: #333333; text-align: right; white-space: nowrap; }
  .calc-resultado { position: relative; z-index: 1; border: 0; background: transparent; padding: 3mm 0 0; font-size: 9.5pt; }
  .calc-impresion { display: block; margin: 0 0 3mm; font-size: 8.5pt; break-inside: avoid; }
  .calc-impresion-nota { margin: 0; color: #333333; }
  .calc-impresion-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0 6mm; gap: 0 6mm; margin: 2mm 0 0; }
  .calc-impresion-datos div { display: flex; justify-content: space-between; align-items: baseline; grid-gap: 3mm; gap: 3mm; padding: 0.6mm 0; border-bottom: 1px dotted #999999; }
  .calc-impresion-datos dt { font-weight: 400; color: #333333; }
  .calc-impresion-datos dd { margin: 0; font-weight: 700; white-space: nowrap; }
  .calc-tarjetas { grid-template-columns: 2fr 1fr 1fr; grid-gap: 3mm; gap: 3mm; break-inside: avoid; }
  .calc-tarjeta { padding: 2.5mm 3.5mm; background: transparent; border: 1px solid #bbbbbb; border-radius: 2mm; }
  .calc-tarjeta-principal { grid-column: auto; background: transparent; color: #000000; border: 2px solid #15803d; }
  .calc-tarjeta-principal .calc-tarjeta-rotulo { color: #333333; }
  .calc-tarjeta-rotulo { font-size: 8pt; }
  .calc-tarjeta strong { font-size: 13pt; }
  .calc-tarjeta-principal strong { font-size: 19pt; color: #166534; }
  .calc-resultado .tabla-contenedor { margin-top: 3mm; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .calc-tabla { font-size: 9pt; background: transparent; }
  .calc-tabla th, .calc-tabla td { padding: 1.4mm 2mm; border-bottom: 1px solid #cccccc; }
  .calc-tabla thead { display: table-header-group; }
  .calc-tabla thead th { background: transparent; font-size: 7.5pt; border-bottom: 1px solid #999999; }
  .calc-tabla tr { break-inside: avoid; }
  .calc-tabla td:last-child, .calc-tabla tfoot td:last-child { background: transparent; }
  .calc-kpi-titulo { margin: 3mm 0 1.5mm; font-size: 10.5pt; break-after: avoid; }
  .calc-kpis { grid-template-columns: minmax(0, 1fr); grid-gap: 0; gap: 0; break-inside: avoid; }
  .calc-kpis li { font-size: 8.5pt; padding: 1mm 0; border-bottom: 1px solid #dddddd; }
  .calc-kpi-nombre { flex: 1 1 24mm; }
  .calc-argumento { margin-top: 3mm; font-size: 9pt; color: #222222; break-inside: avoid; }
  .calc-resultado .nota { margin: 2mm 0 0; font-size: 7.5pt; color: #555555; max-width: none; }
  /* Marca de agua (el logotipo de TotalEnergies) centrada en la propuesta, debajo del contenido (position: fixed no es fiable al imprimir). */
  .calc-marca-agua { display: block; position: fixed; left: 50%; top: 50%; width: 175mm; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.16; z-index: 0; }
  /* Pie al final de la propuesta: quién la emite y de dónde sale la información. */
  .calc-pie-fila { position: relative; z-index: 1; display: flex; justify-content: space-between; grid-gap: 6mm; gap: 6mm; margin-top: 4mm; font-size: 8pt; color: #333333; padding-top: 1.5mm; border-top: 1px solid #999999; break-inside: avoid; }
  /* «Imprimir» de la calculadora: SOLO la propuesta armada, no la página. */
  html.imprimir-calculadora body > *:not(main), html.imprimir-calculadora main > .contenedor > *:not(.calculadora) { display: none !important; }
  html.imprimir-calculadora .calculadora { margin-top: 0; }
  /* <<< impresion-calculadora */
}

/* 31. Catálogo por familias (2026-10-20, maqueta aprobada por el usuario en el lienzo «Catálogo Oilsuper: rediseño desde
   cero»): portada con las 12 familias como tarjetas (mismo ícono, mismo gesto y mismo color que en la portada del sitio);
   cada familia es un bloque con cabecera teñida de su color y SOLO sus botones clave (1 a 3 criterios: base, viscosidad,
   aprobación, línea/tipo/uso, espesante), sin cantidades; al filtrar, los productos que no coinciden se pliegan en una
   línea «Ver los otros N». Un solo código de etiquetas para tarjetas y fichas. Sin :has (televisores). */
.etiqueta { display: inline-flex; align-items: center; border-radius: 0.5rem; padding: 0.2rem 0.55rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; line-height: 1.3; background: #f1f2f4; color: #17181c; color: var(--tinta); white-space: nowrap; }
.etiqueta-grado { background: #17181c; background: var(--tinta); color: #ffffff; }
.etiqueta-aprobacion { background: transparent; border: 1.5px solid #17181c; border: 1.5px solid var(--tinta); padding-top: 0.1rem; padding-bottom: 0.1rem; }
.etiqueta-nivel { background: transparent; border: 1.5px dashed #6b6d75; border: 1.5px dashed var(--suave); color: #55575e; color: var(--secundario); padding-top: 0.1rem; padding-bottom: 0.1rem; }
.etiqueta-mas { background: #fff1f1; color: #b50000; color: var(--acento-oscuro); }

/* Cabecera del catálogo: título y buscador. */
.catalogo-cabecera { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); align-items: end; }
.catalogo-cabecera .bajada { margin: 0.75rem 0 0; text-align: left; max-width: 60ch; max-width: var(--medida-larga); }
.catalogo-buscar { display: flex; flex-direction: column; }
.catalogo-buscar label { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; color: #55575e; color: var(--secundario); }
.catalogo-buscar input { width: 100%; min-height: 2.75rem; min-height: var(--objetivo); padding: 0 1.125rem; border-radius: 999px; border-radius: var(--r-pill); border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); font-size: 1rem; font-size: max(1rem, 16px); -webkit-appearance: none; appearance: none; box-sizing: border-box; }
/* Con el anillo azul de todo lo demás (revisión del catálogo, 2026-10-22: solo oscurecía el borde). El contorno transparente
   es el que pinta el alto contraste de Windows. */
.catalogo-buscar input:focus { border-color: #17181c; border-color: var(--tinta); outline: 0.1875rem solid transparent; outline-offset: 0; box-shadow: 0 0 0 0.1875rem #2456E6; box-shadow: 0 0 0 0.1875rem var(--foco); }
/* «N productos» bajo la casilla: desde 768 px va en su propia capa (abajo) y no empuja la casilla hacia arriba con la primera
   tecla (revisión del catálogo, 2026-10-22). Vacío no ocupa nada. */
.catalogo-resultado { margin: 0.5rem 0 0; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: #55575e; color: var(--secundario); }
.catalogo-resultado:empty { margin-top: 0; }
.catalogo-edicion { margin: 0.75rem 0 0; font-size: 0.84rem; font-size: var(--t-xs); color: #6b6d75; color: var(--suave); }
.catalogo-edicion a { color: #b50000; color: var(--acento-oscuro); font-weight: 700; }

/* Las 12 familias como tarjetas: reutilizan .linea (ícono, gesto y contorno de la portada) en versión compacta. */
.familias-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.625rem; gap: 0.625rem; margin: 1.5rem 0 0; margin: var(--e-5) 0 0; }
/* Todo centrado y repartido parejo (pedido del usuario, 2026-10-20): ícono, nombre y marca, sin cantidades ni aire de sobra. */
.familias-mapa .linea { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; grid-gap: 0.5rem; gap: 0.5rem; padding: 0.875rem 0.75rem 0.75rem; box-shadow: inset 0 3px 0 var(--color-linea); border-radius: 1rem; border-radius: var(--r-lg); }
.familias-mapa .linea-cabecera { display: flex; align-items: center; justify-content: center; margin: 0; }
.familias-mapa .linea-icono { width: 1.75rem; height: 1.75rem; color: var(--color-linea); }
.familias-mapa .linea-acento { display: none; }
.familias-mapa h3 { margin: auto 0; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 900; line-height: 1.2; letter-spacing: -0.005em; }   /* auto: ícono arriba, marca abajo y el nombre en medio, en todas las tarjetas (revisión del catálogo, 2026-10-22) */
.familias-mapa h3 a { color: #17181c; color: var(--tinta); text-decoration: none; }
.familias-mapa h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; border-radius: var(--r-lg); }
.familias-mapa .linea-marca-zona { margin: 0; padding: 0; justify-content: center; }
.familias-mapa .linea-marca { margin: 0; font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 700; color: #6b6d75; color: var(--suave); letter-spacing: 0.04em; text-transform: uppercase; }
.familias-mapa .linea.activa { border-color: var(--color-linea); box-shadow: inset 0 3px 0 var(--color-linea), 0 0 0 3px rgba(var(--rgb-linea), 0.18); }
/* Foco con teclado o control en las tarjetas del mapa: el contorno de su color y un anillo oscuro por fuera, como las tarjetas
   de sector (revisión del catálogo, 2026-10-22: solo cambiaba el borde de 1 px, que en la tele no se ve). Con ratón o toque,
   la franja de siempre. Los motores sin :has() descartan la segunda regla y conservan el anillo con cualquier foco. */
.familias-mapa .linea:focus-within { border-color: #ED0000; border-color: var(--color-linea);
  box-shadow: inset 0 3px 0 #ED0000, 0 0 0 0.1875rem #ED0000, 0 0 0 0.3125rem #17181c;
  box-shadow: inset 0 3px 0 var(--color-linea), 0 0 0 0.1875rem var(--color-linea), 0 0 0 0.3125rem #17181c; }
.familias-mapa .linea:focus-within:not(:has(:focus-visible)):not(:hover):not(:active):not(.pulsada) { border-color: #e8e9ec; border-color: var(--borde); box-shadow: inset 0 3px 0 var(--color-linea); }
.familias-mapa .linea:focus-within:not(:has(:focus-visible)):active { border-color: var(--color-linea); box-shadow: 0 0 0 0.1875rem var(--color-linea), var(--sombra-2); }   /* con ratón, mientras se pulsa, el contorno del hover y no el anillo del teclado (verificación del catálogo, 2026-10-23) */
.familias-mapa-mas { grid-column: 1 / -1; margin: 0; }
.familias-mapa-mas button { font: inherit; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #b50000; color: var(--acento-oscuro); background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer; }
.js .familias-mapa.recortado .linea:nth-child(n+5) { display: none; }
@media (max-width: 767.98px) { .js .familias-mapa { display: none; } }
/* Al buscar, main.js pone .oculto al mapa: «.familias-mapa { display: grid }» pesaba lo mismo e iba después, y los resultados
   quedaban bajo el pliegue (revisión del catálogo, 2026-10-22). */
.familias-mapa.oculto { display: none; }

/* Cada familia: bloque con cabecera teñida de su color. */
.familia { margin-top: 1.5rem; margin-top: var(--e-5); padding: 0; border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1.5rem; border-radius: var(--r-2xl); overflow: hidden; }
.familia:first-of-type { border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); }
.familia-cabecera { display: flex; align-items: center; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); padding: 1rem 1.375rem; padding: var(--e-4) var(--tarjeta-pad); background: rgba(var(--rgb-linea), 0.08); border-bottom: 3px solid var(--color-linea); }
.familia-cabecera:focus { outline-offset: -0.1875rem; }   /* hacia dentro: .familia (overflow: hidden) lo recortaba (revisión del catálogo, 2026-10-22) */
.familia-cabecera .linea-icono { width: 1.75rem; height: 1.75rem; color: var(--color-linea); }
.familia-icono { flex: none; width: 3rem; height: 3rem; border-radius: 1rem; border-radius: var(--r-lg); background: #ffffff; background: var(--fondo); border: 1px solid rgba(var(--rgb-linea), 0.25); display: flex; align-items: center; justify-content: center; }
.familia-titulos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; grid-gap: 0.125rem; gap: 0.125rem; }
/* --tono-texto: el color de la familia oscurecido hasta 5,2:1 (generar.py, color_texto); el puro no llegaba a 4,5:1 en 10 de
   las 12 familias (revisión del catálogo, 2026-10-22). */
.familia-cabecera .cejilla { margin: 0; font-size: 0.78rem; font-size: var(--t-2xs); color: var(--tono-texto, var(--color-linea)); }
.familia-cabecera h2 { margin: 0; font-size: 1.4rem; font-size: var(--t-xl); font-weight: 900; letter-spacing: -0.015em; line-height: 1.1; }
.familia-cabecera .familia-cuenta { display: none; }
.familia-abrir { flex: none; display: none; width: 0.75rem; height: 0.75rem; border-right: 2px solid #17181c; border-right: 2px solid var(--tinta); border-bottom: 2px solid #17181c; border-bottom: 2px solid var(--tinta); transform: rotate(45deg); margin-right: 0.375rem; }
.familia-cuerpo { padding: 1rem 1.375rem 1.375rem; padding: var(--e-4) var(--tarjeta-pad) var(--tarjeta-pad); }
/* Botones clave de la familia (sin cantidades: el desglose se ve en las tarjetas). */
.familia-filtros { display: flex; flex-direction: column; grid-gap: 0.625rem; gap: 0.625rem; }
/* Rótulo en su columna y las opciones en la otra: al partirse en dos filas, la segunda queda alineada bajo la primera opción
   (pedido del usuario, 2026-10-20: el «40» debajo del «0W-20»). */
.criterio { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; grid-gap: 0.5rem; gap: 0.5rem; }
.criterio-rotulo { padding-top: 0.55rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; color: #55575e; color: var(--secundario); }
.criterio-opciones { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; min-width: 0; }
@media (max-width: 599.98px) { .criterio { grid-template-columns: minmax(0, 1fr); grid-gap: 0.25rem 0.5rem; gap: 0.25rem 0.5rem; } .criterio-rotulo { padding-top: 0; } }   /* celular: rótulo encima, opciones a lo ancho */
.criterio-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border-radius: 999px; border-radius: var(--r-pill); border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); font: inherit; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.criterio-chip[aria-pressed="true"] { background: #17181c; background: var(--tono-texto, var(--color-linea)); border-color: #17181c; border-color: var(--tono-texto, var(--color-linea)); color: #ffffff; }
.criterio-chip:disabled { opacity: 0.4; cursor: default; }
.criterio-chip:focus-visible { outline: 3px solid #2456E6; outline: 3px solid var(--foco); outline-offset: 2px; }
/* Buscador de aprobaciones (pedido del usuario, 2026-10-20): se escribe y las coincidencias van saliendo, como en Google. */
.criterio-buscador { position: relative; flex: 1 1 14rem; max-width: 30rem; min-width: 0; }   /* 30 rem: cabe el ejemplo más largo, «CINCINNATI MILACRON P68)» (revisión del catálogo, 2026-10-22) */
.criterio-entrada { width: 100%; min-height: 2.25rem; padding: 0 0.875rem; border-radius: 999px; border-radius: var(--r-pill); border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; box-sizing: border-box; text-overflow: ellipsis; }
.criterio-entrada:focus { border-color: #17181c; border-color: var(--tinta); outline: 0.1875rem solid transparent; outline-offset: 0; box-shadow: 0 0 0 0.1875rem #2456E6; box-shadow: 0 0 0 0.1875rem var(--foco); }
.criterio-texto.con-valor .criterio-entrada { border-color: var(--tono-texto, var(--color-linea)); box-shadow: inset 0 0 0 1px var(--tono-texto, var(--color-linea)); font-weight: 700; }
.criterio-texto.con-valor .criterio-entrada:focus { box-shadow: inset 0 0 0 1px var(--tono-texto, var(--color-linea)), 0 0 0 0.1875rem var(--foco); }
/* En la tele: el anillo de 4 px de la tele, la letra de las casillas a 1 rem como el resto (se quedaba en 16 px: unos 11 px a
   distancia en una tele de 1080p) y la opción enfocada de la lista con contorno, hacia dentro (con el tinte se confundía con
   la elegida; la lista con scroll lo recortaría). Revisión del catálogo, 2026-10-22. */
html.tv .criterio-entrada { font-size: 1rem; }
html.tv .catalogo-buscar input:focus, html.tv .criterio-entrada:focus { border-color: #17181c; box-shadow: 0 0 0 0.25rem #2456E6; box-shadow: 0 0 0 0.25rem #2456E6; box-shadow: 0 0 0 0.25rem var(--foco); }
html.tv .criterio-texto.con-valor .criterio-entrada:focus { box-shadow: inset 0 0 0 1px var(--tono-texto, var(--color-linea)), 0 0 0 0.25rem var(--foco); }
html.tv .criterio-sugerencias button:focus { outline: 0.25rem solid #2456E6; outline: 0.25rem solid #2456E6; outline: 0.25rem solid var(--foco); outline-offset: -0.25rem; }
.criterio-sugerencias { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 6; margin: 0; padding: 0.25rem; list-style: none; background: #ffffff; background: var(--fondo); border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); max-height: 15rem; overflow-y: auto; }
.criterio-sugerencias button { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; border: 0; border-radius: 0.75rem; border-radius: var(--r-md); background: none; color: #17181c; color: var(--tinta); font: inherit; font-size: 0.9rem; font-size: var(--t-sm); cursor: pointer; }
/* Listas de viscosidades y aprobaciones (revisión del 2026-10-22, ahora que salen todas): de alto, 6 opciones y media, para
   que la séptima asome y se vea que hay más; y sombras arriba o abajo mientras quede lista por deslizar (los degradados
   blancos «local» las tapan en los extremos). Sin «local», queda el alto de 6,5 opciones. Un código largo sin espacios
   (ZF TE-ML 02B/05A/…) se parte en vez de desbordar a 320 px. */
.criterio-sugerencias { max-height: 16rem; max-height: calc(0.5rem + 2px + 6.5 * (1rem + 1.55 * 0.9rem)); max-height: calc(0.5rem + 2px + 6.5 * (1rem + 1.55 * var(--t-sm)));
  background: linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) 0 0 / 100% 2.5rem no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100% / 100% 2.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(16, 24, 40, 0.22), rgba(16, 24, 40, 0)) 0 0 / 100% 0.875rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(16, 24, 40, 0.22), rgba(16, 24, 40, 0)) 0 100% / 100% 0.875rem no-repeat scroll,
    #ffffff; }
.criterio-sugerencias button { word-wrap: break-word; overflow-wrap: break-word; }
.criterio-sugerencias button:hover, .criterio-sugerencias button:focus-visible { background: rgba(var(--rgb-linea), 0.12); outline: none; }
/* La lista entra desde su casilla en 150 ms (revisión del catálogo, 2026-10-22). Solo al abrirse: escribir no la repite. */
.criterio-sugerencias:not([hidden]) { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: menu-entra 0.15s cubic-bezier(0.23, 1, 0.32, 1); animation: menu-entra 0.15s cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: reduce) { .criterio-sugerencias:not([hidden]) { -webkit-animation: aparecer 0.2s ease-out !important; animation: aparecer 0.2s ease-out !important; } }
.criterio-sin { padding: 0.5rem 0.75rem; font-size: 0.9rem; font-size: var(--t-sm); color: #6b6d75; color: var(--suave); }
.criterio-pista { font-size: 0.84rem; font-size: var(--t-xs); color: #6b6d75; color: var(--suave); }
.familia-estado { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.625rem; gap: 0.625rem; margin: 0.875rem 0 0; font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
.familia-estado strong { color: #17181c; color: var(--tinta); font-size: 1rem; font-size: var(--t-base); }
.familia-quitar { font: inherit; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #b50000; color: var(--acento-oscuro); background: none; border: 0; padding: 0; cursor: pointer; }
/* Zona de toque de 44 px en los filtros sin cambiar nada a la vista: una franja de 44 px centrada que no depende del borde
   (revisión del catálogo, 2026-10-22: «Quitar filtros» medía 22 px y los chips 36). Sin el gap de flex (.sin-gap-flex) las
   filas de chips se tocan: ahí no se amplía, para no robar toques. */
@media (pointer: coarse) {
  html:not(.sin-gap-flex) .criterio-chip, .familia-quitar { position: relative; }
  html:not(.sin-gap-flex) .criterio-chip::after, .familia-quitar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem; margin-top: -1.375rem; }
}
.familia .elegir { margin: 0.875rem 0 0; }
.familia .elegir summary { font-size: 0.9rem; font-size: var(--t-sm); }
.familia-intro { padding: 0 1.375rem; max-width: none; }
.familia-intro .puntos { margin-bottom: 0.75rem; }
.familia-intro .puntos li { text-indent: 0; }
.familia-intro .puntos strong { color: #17181c; color: var(--tinta); font-weight: 800; }
/* Tarjetas: las que no coinciden se pliegan en una línea. */
.productos-grilla { margin-top: 1rem; }
#lista-catalogo { padding-bottom: 3rem; padding-bottom: var(--e-8); }   /* 48 px antes del pie: la última familia quedaba pegada (revisión del catálogo, 2026-10-22) */
.producto.oculto-filtro { display: none; }
.familia.mostrar-todo .producto.oculto-filtro { display: flex; opacity: 0.55; }
.familia-plegados { grid-column: 1 / -1; margin: 0.25rem 0 0; }
.familia-plegados button { width: 100%; min-height: 3rem; border: 1px dashed #8a8c94; border: 1px dashed var(--borde-interactivo); border-radius: 1rem; border-radius: var(--r-lg); background: #fbfbfc; background: var(--superficie-alt); font: inherit; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 800; color: #55575e; color: var(--secundario); cursor: pointer; }
@supports (grid-template-rows: subgrid) {
  .familia.mostrar-todo .producto.oculto-filtro { display: grid; }
}
.producto-visual { position: relative; }
.producto-puntos { display: flex; flex-wrap: wrap; grid-gap: 0.375rem; gap: 0.375rem; align-content: start; }
.producto-puntos li { display: inline-flex; align-items: center; border-radius: 0.5rem; padding: 0.2rem 0.55rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; line-height: 1.3; background: #f1f2f4; color: #17181c; color: var(--tinta); overflow-wrap: normal; }
.producto-puntos li::before { content: none; }
.producto-puntos[data-grado] li:first-child { background: #17181c; background: var(--tinta); color: #ffffff; }
.producto-puntos .producto-mas { background: #fff1f1; color: #b50000; color: var(--acento-oscuro); }
.producto-puntos .producto-espesante { background: rgba(var(--rgb-linea), 0.12); color: var(--color-linea); }
.buscando .familia-filtros, .buscando .familia-estado, .buscando .elegir, .buscando .familia-plegados { display: none; }
/* Ficha (D1): losas y aprobaciones (sin cambios respecto al 2026-10-19). */
.ficha-titulo .bajada { font-size: 1rem; font-size: var(--t-base); color: #55575e; color: var(--secundario); }
.datos-losas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.625rem; gap: 0.625rem; padding: 0; background: transparent; }
.losa { display: flex; flex-direction: column; grid-gap: 0.25rem; gap: 0.25rem; min-width: 0; padding: 0.875rem 1rem; background: #f6f7f8; background: var(--superficie); border-radius: 1rem; border-radius: var(--r-lg); }
.losa-ancha { grid-column: 1 / -1; }
.losa-familia { grid-column: 1 / -1; flex-direction: row; align-items: baseline; grid-gap: 0.625rem; gap: 0.625rem; padding: 0.25rem 0 0; background: transparent; }
.datos-losas dd { overflow-wrap: anywhere; }
.datos-losas dd + dt { margin-top: 0; }
.ficha-aprobaciones { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; margin: 0.875rem 0 0; font-size: 0.9rem; font-size: var(--t-sm); }
.ficha-aprobaciones-rotulo { font-weight: 800; color: #55575e; color: var(--secundario); margin-right: 0.25rem; }
.ficha-aprobaciones .etiqueta { white-space: normal; }
.ficha-aprobaciones a.etiqueta-mas { text-decoration: none; }
.ficha-niveles-enlace { font-weight: 800; color: #b50000; color: var(--acento-oscuro); }
.ficha-datos .acciones { justify-content: flex-start; margin-top: 1.5rem; margin-top: var(--e-5); }
@media (max-width: 1023.98px) {
  /* Celular y tableta: cada familia se pliega desde su cabecera; la elegida (tarjeta o ?familia=) se abre. */
  .js .familia-cabecera { cursor: pointer; }
  /* La flecha gira y baja solo con transform (revisión del catálogo, 2026-10-22: animaba margin-top). Las dos listas de
     funciones son iguales: gira sin pasar por matrices. */
  .js .familia-abrir { display: block; -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
  .js .familia.abierta .familia-abrir { -webkit-transform: translateY(0.1875rem) rotate(225deg); transform: translateY(0.1875rem) rotate(225deg); }
  .js .familia-cabecera:active { background-color: rgba(var(--rgb-linea), 0.16); }   /* responde al dedo */
  .js .familia:not(.abierta) .familia-cuerpo { display: none; }
  .js .familia.abierta .familia-cuerpo { -webkit-animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
  /* Lo que dispara el teclado no se anima: mientras se busca, y al salir de la búsqueda de un golpe (.sin-fundido, main.js),
     las familias que reaparecen no se funden (revisión del catálogo, 2026-10-22: 11 fundidos por letra). Duración y no
     «none»: el nombre de la animación se mantiene y no vuelve a arrancar al quitar la clase. Gana también al de movimiento
     reducido (0,5,0 frente a 0,4,0). */
  .js .buscando .familia.abierta .familia-cuerpo, .js .sin-fundido .familia.abierta .familia-cuerpo { -webkit-animation-duration: 0s !important; animation-duration: 0s !important; }
}
@media (min-width: 600px) {
  .familias-mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .datos-losas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .js .familias-mapa.recortado .linea:nth-child(n+5) { display: flex; }
  .familias-mapa-mas { display: none; }
}
@media (min-width: 768px) {
  .catalogo-cabecera { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-column-gap: 2rem; column-gap: 2rem; grid-column-gap: var(--e-6); column-gap: var(--e-6); }
  .familias-mapa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalogo-buscar { position: relative; }
  .catalogo-resultado { position: absolute; top: 100%; left: 1.125rem; margin-top: 0.375rem; }
}
@media (min-width: 1024px) {
  .familias-mapa { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .datos-losas { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* Base · Grado · Normas (Presentaciones va a lo ancho desde el 2026-10-21) */
}
/* Catálogo en pantallas bajas (tele de 960 × 540 y celular apaisado): cabecera compacta para que el buscador y la primera
   fila del mapa entren en la primera vista (revisión del catálogo, 2026-10-22: el título llenaba la pantalla). Mismo alcance
   que la portada: en una ventana de PC de 501-600 px de alto se queda como está. La copia html.tv, para la tele reconocida. */
@media (min-width: 600px) and (max-height: 500px), (min-width: 900px) and (max-height: 600px) and (hover: none) {
  .catalogo-cabecera { padding-top: 0.75rem; padding-bottom: 0.5rem; }
  .catalogo-cabecera h1 { font-size: 2rem; }
  .catalogo-cabecera .bajada { margin-top: 0.375rem; font-size: 1rem; font-size: var(--t-base); }
  .catalogo-edicion { display: none; }
}
@media (min-width: 900px) and (max-height: 600px) {
  html.tv .catalogo-cabecera { padding-top: 0.75rem; padding-bottom: 0.5rem; }
  html.tv .catalogo-cabecera h1 { font-size: 2rem; }
  html.tv .catalogo-cabecera .bajada { margin-top: 0.375rem; font-size: 1rem; font-size: var(--t-base); }
  html.tv .catalogo-edicion { display: none; }
}
/* «N productos» va en su capa bajo la casilla desde 768 px y la cabecera compacta deja solo 8 px debajo: mientras se busca,
   la lista baja 24 px para que el contador no quede pegado a la primera familia; en reposo no cuesta alto (verificación del catálogo, 2026-10-23). */
@media (min-width: 768px) and (max-height: 500px), (min-width: 900px) and (max-height: 600px) and (hover: none) {
  #lista-catalogo.buscando { padding-top: 1.5rem; }
}
@media (min-width: 900px) and (max-height: 600px) {
  html.tv #lista-catalogo.buscando { padding-top: 1.5rem; }
}
/* Sin CSS Grid (Chromium < 57: Samsung 2017-2018, LG webOS 3-4): el mapa en mosaico de 2/3/4/6 y no en 12 filas a todo el
   ancho (revisión del catálogo, 2026-10-22). Aquí y no en el bloque de televisores viejos: allí el margin de .familias-mapa
   anularía los márgenes negativos. */
@supports not (display: grid) {
  .familias-mapa { display: flex; flex-wrap: wrap; margin-left: -0.3125rem; margin-right: -0.3125rem; margin-bottom: -0.625rem; }
  .familias-mapa > .linea { width: calc(50% - 0.65rem); margin: 0 0.3125rem 0.625rem; }   /* 0,65 y no 0,625: con el redondeo la fila se partía */
  .catalogo-buscar { margin-top: 1rem; }
  @media (min-width: 600px) { .familias-mapa > .linea { width: calc(33.333% - 0.65rem); } }
  @media (min-width: 768px) { .familias-mapa > .linea { width: calc(25% - 0.65rem); } }
  @media (min-width: 1024px) { .familias-mapa > .linea { width: calc(16.666% - 0.65rem); } }
}

/* 32. «Compatibilidad de grasas» (2026-10-20, maqueta del lienzo «Compatibilidad de grasas Oilsuper»): herramienta técnica
   de la familia Grasas, teñida del color de su familia (--color-linea, morado). Selector de espesante → tres cajas
   (verde se pueden mezclar · ámbar verificar · rojo no mezclar) con los productos TotalEnergies de cada espesante, y la
   matriz completa plegada debajo. Sin :has (televisores). */
.compat { border: 1.5px solid var(--color-linea); overflow: hidden; }
.compat > summary { background: var(--color-linea); color: #ffffff; }
.compat > summary::after { border-color: #ffffff; }
.compat-titulo { display: inline-flex; align-items: center; grid-gap: 0.625rem; gap: 0.625rem; }
.compat-titulo svg { width: 1.375rem; height: 1.375rem; flex: none; }
.compat-sello { margin-left: auto; margin-right: 0.75rem; padding: 0.3rem 0.625rem; border-radius: 999px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.18); font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.compat-cuerpo { display: flex; flex-direction: column; grid-gap: 1.5rem; gap: 1.5rem; grid-gap: var(--e-5); gap: var(--e-5); padding: 1.5rem 1.375rem 1.375rem; padding: var(--e-5) 1.375rem 1.375rem; background: #ffffff; background: var(--fondo); }
.compat-intro { margin: 0; max-width: 60rem; color: #55575e; color: var(--secundario); }
.compat-paso { display: flex; flex-direction: column; grid-gap: 0.625rem; gap: 0.625rem; }
.compat-rotulo { margin: 0; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; color: #55575e; color: var(--secundario); }
/* Espesantes en tres grupos con los botones de dos en dos (pedido del usuario, 2026-10-20). */
.compat-chips { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.875rem; gap: 0.875rem; }
.compat-grupo-esp { display: flex; flex-direction: column; grid-gap: 0.5rem; gap: 0.5rem; min-width: 0; }
.compat-rotulo-grupo { margin: 0; text-align: center; font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6d75; color: var(--suave); }
/* Tres bloques separados por una línea: debajo en celular, al lado en pantallas anchas (pedido del usuario, 2026-10-20). */
.compat-grupo-esp + .compat-grupo-esp { border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); padding-top: 0.875rem; }
.compat-lista .compat-producto { display: block; }
.compat-chips-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.5rem; gap: 0.5rem; }
.compat-chips-grupo .criterio-chip { justify-content: center; text-align: center; padding: 0.3rem 0.5rem; white-space: normal; line-height: 1.15; min-height: 2.5rem; }
@media (min-width: 48em) {
  .compat-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 1.25rem; gap: 1.25rem; }
  .compat-grupo-esp + .compat-grupo-esp { border-top: 0; padding-top: 0; border-left: 1px solid #e8e9ec; border-left: 1px solid var(--borde); padding-left: 1.25rem; }
}
.compat-elegido { font-size: 1.2rem; font-size: var(--t-lg); font-weight: 900; color: var(--color-linea); }
.compat-productos { font-weight: 400; color: #6b6d75; color: var(--suave); font-size: 0.84rem; font-size: var(--t-xs); }
.compat-resultado { display: flex; flex-direction: column; grid-gap: 0.75rem; gap: 0.75rem; }
.compat-grupos { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); }
.compat-grupo { border: 1.5px solid; border-radius: 1rem; border-radius: var(--r-lg); padding: 1rem 1.125rem; display: flex; flex-direction: column; grid-gap: 0.625rem; gap: 0.625rem; }
.compat-grupo-titulo { margin: 0; display: flex; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; font-weight: 900; }
.compat-simbolo { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: currentColor; }
.compat-simbolo::before { content: ""; }
.compat-grupo .compat-simbolo { color: inherit; background: transparent; width: auto; height: auto; font-size: 1.125rem; }
.compat-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; grid-gap: 0.5rem; gap: 0.5rem; }
.compat-lista li { display: flex; flex-direction: column; grid-gap: 0.125rem; gap: 0.125rem; }
.compat-lista strong { color: #17181c; color: var(--tinta); }
.compat-grupo-nota { margin: 0.25rem 0 0; font-size: 0.78rem; font-size: var(--t-2xs); }
.compat-grupo.compat-c { border-color: #86d1a2; background: #ecfdf3; color: #15803d; }
.compat-grupo.compat-c .compat-productos, .compat-grupo.compat-c .compat-grupo-nota { color: #4b5d52; }
.compat-grupo.compat-b { border-color: #f1c27d; background: #fff7e6; color: #b45309; }
.compat-grupo.compat-b .compat-productos, .compat-grupo.compat-b .compat-grupo-nota { color: #6b5330; }
.compat-grupo.compat-i { border-color: #f0a2a2; background: #fdecec; color: #b91c1c; }
.compat-grupo.compat-i .compat-productos, .compat-grupo.compat-i .compat-grupo-nota { color: #6b3a3a; }
.compat-grupo.compat-n { border-color: #e8e9ec; border-color: var(--borde); background: #fbfbfc; background: var(--superficie-alt); color: #6b6d75; color: var(--suave); }
.compat-detalle { border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 1rem; border-radius: var(--r-lg); background: #fbfbfc; background: var(--superficie-alt); }
.compat-detalle > summary { display: flex; align-items: center; justify-content: space-between; grid-gap: 1rem; gap: 1rem; grid-gap: var(--e-4); gap: var(--e-4); min-height: 3rem; padding: 0.75rem 1.125rem; cursor: pointer; list-style: none; }
.compat-detalle > summary::-webkit-details-marker { display: none; }
.compat-detalle > summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-right: 0.25rem; border-right: 2px solid #55575e; border-right: 2px solid var(--secundario); border-bottom: 2px solid #55575e; border-bottom: 2px solid var(--secundario); transform: rotate(45deg); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.compat-detalle[open] > summary::after { transform: rotate(225deg); }
.compat-detalle .tabla-envoltura { margin: 0 1.125rem 1.125rem; }
.compat-leyenda { margin: 0 1.125rem 0.75rem; display: flex; flex-wrap: wrap; grid-gap: 0.5rem 1.25rem; gap: 0.5rem 1.25rem; font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 700; }
.compat-leyenda .compat-c { color: #15803d; } .compat-leyenda .compat-b { color: #b45309; } .compat-leyenda .compat-i { color: #b91c1c; } .compat-leyenda .compat-n { color: #6b6d75; color: var(--suave); }
.compat-matriz { font-size: 0.78rem; font-size: var(--t-2xs); }
.compat-matriz th, .compat-matriz td { padding: 0.35rem 0.4rem; text-align: center; white-space: nowrap; }
.compat-matriz thead th { font-size: 0.7rem; vertical-align: bottom; }
.compat-matriz thead th abbr { text-decoration: none; cursor: help; }
.compat-matriz tbody th { text-align: left; font-weight: 700; }
.compat-matriz td span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.3rem; font-weight: 900; color: #ffffff; }
.compat-matriz td.compat-c span:first-child { background: #34a853; }
.compat-matriz td.compat-b span:first-child { background: #f2a93b; color: #3b2a07; }
.compat-matriz td.compat-i span:first-child { background: #e5484d; }
.compat-matriz td.compat-n span:first-child { background: #e2e3e7; color: #6b6d75; color: var(--suave); }
.compat-matriz td.compat-mismo { background: #fbfbfc; background: var(--superficie-alt); }
.compat-matriz tr.compat-activa th, .compat-matriz tr.compat-activa td { background: rgba(var(--rgb-linea), 0.12); }
.compat-matriz tr.compat-activa th { color: var(--color-linea); font-weight: 900; }
.compat-nota { margin: 0; font-size: 0.78rem; font-size: var(--t-2xs); color: #6b6d75; color: var(--suave); max-width: none; }
/* Celular (pedido del usuario, 2026-10-20): los mismos botones (probó el buscador y prefirió los botones) y la matriz
   compacta para que entre a lo ancho sin desplazar: nombres cortos en las filas (abbr con el nombre completo),
   cabeceras en vertical y celdas de 1 rem. */
.compat-corto { display: none; text-decoration: none; }
@media (max-width: 599.98px) { .compat-sello { display: none; } }   /* celular: el morado ya avisa; el sello recortaba el título */
@media (max-width: 767.98px) {
  .compat-nombre { display: none; }
  .compat-corto { display: inline; }
  .compat-matriz { font-size: 0.65rem; table-layout: fixed; width: 100%; }
  .compat-matriz th, .compat-matriz td { padding: 0.12rem 0.05rem; }
  .compat-matriz thead th:first-child, .compat-matriz tbody th { width: 3rem; text-align: left; padding-left: 0.2rem; }
  .compat-matriz thead th { height: 3.4rem; vertical-align: bottom; font-size: 0.6rem; }
  .compat-matriz thead th abbr { display: inline-block; writing-mode: vertical-rl; -webkit-transform: rotate(180deg); transform: rotate(180deg); white-space: nowrap; line-height: 1; }
  .compat-matriz thead th:first-child { height: auto; font-size: 0; }   /* «Espesante» no cabe en 3 rem y pisaba la primera columna */
  .compat-matriz td span:first-child { width: 1rem; height: 1rem; border-radius: 0.2rem; font-size: 0.65rem; }
  /* Menos aire alrededor y un «zoom out» (zoom: 0,78; sin zoom, la tabla se desplaza) para que las 15 columnas entren a lo ancho. */
  .compat-cuerpo { padding: 1rem 0.75rem 0.75rem; padding: var(--e-4) 0.75rem 0.75rem; }
  .compat-detalle .tabla-envoltura { margin: 0 0.25rem 0.5rem; }
  .compat-leyenda { margin: 0 0.5rem 0.5rem; }
  .compat-matriz { zoom: 0.78; }
}
@media (min-width: 48em) { .compat-grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 33. Celular: ningún campo con letra menor de 16 px (iPhone hace zoom al tocar un campo más pequeño y luego no vuelve solo;
   pedido del usuario, 2026-10-20). main.js (initZoomMovil) devuelve la vista si aun así hubo zoom. */
@media (max-width: 767.98px) { input, select, textarea { font-size: max(1rem, 16px) !important; } }

/* 34. Documentos (2026-10-20): fichas técnicas, hojas de seguridad, cartas de aprobación, sellos INEN y catálogos en PDF
   que antes repartía la AppSheet «App TotalEnergies». Mismos botones secundarios de siempre, con el ícono de documento y
   el peso del PDF al lado (avisa en celular antes de abrir 26 MB). La etiqueta «Aprobado por» con carta se vuelve enlace
   (borde rojo); el sello INEN es una cápsula verde. Sin :has (televisores). */
.documentos-intro { margin: 0 0 1rem; margin: 0 0 var(--e-4); font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); max-width: none; }
.documentos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; grid-gap: 0.625rem; gap: 0.625rem; }
.documentos-lista + h3 { margin-top: 1.375rem; }
.documento { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.5rem 0.875rem; gap: 0.5rem 0.875rem; }
.documento-rotulo { flex: 0 0 auto; min-width: 5.5rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #55575e; color: var(--secundario); }
.documento-enlaces { display: flex; flex-wrap: wrap; grid-gap: 0.5rem 0.75rem; gap: 0.5rem 0.75rem; min-width: 0; }
.documento-boton { font-size: 0.9rem; font-size: var(--t-sm); min-height: 2.625rem; padding: 0.5rem 1.125rem; grid-gap: 0.5rem; gap: 0.5rem; text-decoration: none; }
.documento-boton svg { width: 1.125rem; height: 1.125rem; color: #ED0000; color: var(--acento); }
.documento-peso { font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 700; color: #55575e; color: var(--secundario); white-space: nowrap; }
.ficha-info .acciones .documento-boton { font-size: 1rem; font-size: var(--t-base); min-height: 3.125rem; padding: 0.5rem 1.5rem; }
.etiqueta-carta { grid-gap: 0.3rem; gap: 0.3rem; text-decoration: none; border-color: #ED0000; border-color: var(--acento); color: #b50000; color: var(--acento-oscuro); }
.etiqueta-carta svg { width: 0.9rem; height: 0.9rem; flex: none; }
@media (hover: hover) and (pointer: fine) { .etiqueta-carta:hover { background: #fff1f1; text-decoration: none; } }
.etiqueta-carta:focus-visible { background: #fff1f1; }
html.tv .etiqueta-carta:focus { background: #fff1f1; }
.etiqueta-sello { grid-gap: 0.3rem; gap: 0.3rem; text-decoration: none; background: #e8f5e9; color: #1b5e20; border: 1.5px solid #2e7d32; padding-top: 0.1rem; padding-bottom: 0.1rem; }
.etiqueta-sello svg { width: 0.9rem; height: 0.9rem; flex: none; }
@media (hover: hover) and (pointer: fine) { .etiqueta-sello:hover { background: #d7eedb; color: #1b5e20; text-decoration: none; } }
.etiqueta-sello:focus-visible { background: #d7eedb; }
html.tv .etiqueta-sello:focus { background: #d7eedb; }
.documento-carta { display: inline-flex; align-items: center; grid-gap: 0.2rem; gap: 0.2rem; margin-left: 0.4rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 800; color: #b50000; color: var(--acento-oscuro); white-space: nowrap; vertical-align: baseline; }
.documento-carta svg { width: 0.85rem; height: 0.85rem; }
.sin-gap-flex .documento > * + *, .sin-gap-flex .documento-enlaces > * + * { margin-left: 0.75rem; }
.sin-gap-flex .documento-boton > * + * { margin-left: 0.5rem; }
/* Documentos en el encabezado de la ficha (2026-10-21, pedido del usuario): con un PDF por grado, el botón despliega la
   lista de grados (details/summary: sin JavaScript); la lista flota bajo el botón sin mover la página. */
.documentos-menu { position: relative; display: inline-block; }
.documentos-menu > summary { list-style: none; cursor: pointer; }
.documentos-menu > summary::-webkit-details-marker { display: none; }
.documentos-menu > summary::after { content: ""; width: 0.45rem; height: 0.45rem; margin: -0.2rem 0 0 0.125rem; border: solid currentColor; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.documentos-menu[open] > summary::after { margin-top: 0.25rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.documentos-menu > ul {
  position: absolute; top: 100%; left: 0; z-index: 30; min-width: 100%; box-sizing: border-box; margin: 0.375rem 0 0; padding: 0.375rem;
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
  list-style: none; border: 1px solid #d9dade; border: 1px solid var(--borde-fuerte); border-radius: 0.75rem; border-radius: var(--r-md); background: #ffffff; background: var(--fondo); box-shadow: 0 12px 32px rgba(23, 24, 28, 0.14);
}
.documentos-menu li a { display: flex; align-items: center; grid-gap: 0.5rem; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; border-radius: var(--r-sm); color: #17181c; color: var(--tinta); font-weight: 700; white-space: nowrap; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .documentos-menu li a:hover { background: #f3f4f6; } }
.documentos-menu li a:focus-visible { background: #f3f4f6; }
html.tv .documentos-menu li a:focus { background: #f3f4f6; }
.documentos-menu li a svg { width: 1.125rem; height: 1.125rem; flex: none; color: #ED0000; color: var(--acento); }
.documentos-menu li .documento-peso { margin-left: auto; padding-left: 0.75rem; }
.ficha-anteriores { margin: 0.75rem 0 0; margin: var(--e-3) 0 0; font-size: 0.84rem; font-size: var(--t-xs); color: #55575e; color: var(--secundario); }
.ficha-anteriores a { font-weight: 700; }

/* 35. Aprobaciones con listado oficial del fabricante (2026-10-20): la etiqueta «Aprobado por» sin carta propia pero
   presente en el listado público del fabricante (ZF TE-ML, Mercedes-Benz BeVo, VW, dexos, MAN ES, WinGD, Flender, SEW,
   Deutz, MTU, Detroit) enlaza a ese listado: borde azul e ícono de salida, para distinguirla de la carta propia (rojo). */
.etiqueta-lista { grid-gap: 0.3rem; gap: 0.3rem; text-decoration: none; border-color: #1e3a8a; color: #1e3a8a; }
.etiqueta-lista svg { width: 0.9rem; height: 0.9rem; flex: none; }
@media (hover: hover) and (pointer: fine) { .etiqueta-lista:hover { background: #eef2ff; color: #1e3a8a; text-decoration: none; } }
.etiqueta-lista:focus-visible { background: #eef2ff; }
.documento-carta.documento-lista { color: #1e3a8a; }
.documento-externo svg { color: #1e3a8a; }
.documento-rotulo-largo { min-width: 0; flex-basis: 100%; text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-size: var(--t-sm); color: #17181c; color: var(--tinta); }
.documentos-nota { margin: 0.75rem 0 0; font-size: 0.78rem; font-size: var(--t-2xs); color: #6b6d75; color: var(--suave); max-width: none; }
@media (min-width: 48em) { .documento-rotulo-largo { flex-basis: auto; min-width: 14rem; max-width: 20rem; } }

/* 36. Tarjeta de producto, variante C «Uso y marcas» (maqueta aprobada por el usuario el 2026-10-20): foto sobre una franja
   del color de la familia, nombre, etiquetas de uso, normas en una línea, «Aprobado por» con el nombre del fabricante como
   sello, y al pie «Ver ficha» más la ficha técnica en PDF. Sin viñeta de familia (se sobreentiende). Sin :has (televisores).
   Sin la cápsula de base ni los botones de grados desde el 2026-10-21 (pedido del usuario: ya están en el filtro). Ese
   mismo día, más compacta: una sola norma en negrita y «N aprobaciones» en vez de los sellos, y el envase recortado. */
.producto-visual { background: #f6f7f8; background: linear-gradient(180deg, rgba(var(--rgb-linea), 0.14) 0%, rgba(var(--rgb-linea), 0.02) 100%); padding: 0.75rem 0.75rem 0; }
.producto-visual .producto-imagen { border-bottom: 0; background: transparent; }   /* sin placa blanca: el envase va recortado, sin fondo (2026-10-21) */
.producto-cuerpo { grid-gap: 0.5rem; gap: 0.5rem; }
.producto-nombre { min-height: 0; }
.producto-usos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; grid-gap: 0.3rem; gap: 0.3rem; }
.producto-usos li { border-radius: 999px; border-radius: var(--r-pill); padding: 0.2rem 0.6rem; font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 800; line-height: 1.3; background: #f1f2f4; color: #17181c; color: var(--tinta); }
.producto-datos { display: flex; flex-direction: column; justify-content: flex-start; grid-gap: 0.375rem; gap: 0.375rem; min-width: 0; }
.producto-normas { margin: 0; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.4; color: #55575e; color: var(--secundario); overflow-wrap: anywhere; }
.producto-normas strong { color: #17181c; color: var(--tinta); font-weight: 800; }
/* «N aprobaciones» (2026-10-21, pedido del usuario): la cifra en el color de la familia (en línea, lo calcula generar.py:
   el mismo tono, oscurecido hasta 4,5:1 sobre blanco; sin var(), para los televisores); cuáles son, en la ficha. */
.producto-aprobado { margin: 0; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; line-height: 1.4; color: #55575e; color: var(--secundario); }
.producto-aprobado-n { font-size: 1.15em; font-weight: 900; }
.producto-pie { display: flex; align-items: center; justify-content: space-between; grid-gap: 0.5rem; gap: 0.5rem; margin-top: auto; padding-top: 0.25rem; }
.producto-pie .producto-ver { margin-top: 0; padding-top: 0; white-space: nowrap; }
.producto-pdf { position: relative; z-index: 1; display: inline-flex; align-items: center; grid-gap: 0.25rem; gap: 0.25rem; font-size: 0.78rem; font-size: var(--t-2xs); font-weight: 800; color: #17181c; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.producto-pdf svg { width: 1.125rem; height: 1.125rem; color: #ED0000; color: var(--acento); flex: none; }
.producto-pdf span { display: none; }   /* el rótulo «Ficha técnica» solo cuando la tarjeta es ancha (≥ 1600 px); si no, el ícono con su title */
@media (min-width: 1600px) { .producto-pdf span { display: inline; } }
.producto-pdf:hover, .producto-pdf:focus-visible { color: #b50000; color: var(--acento-oscuro); text-decoration: underline; }
/* Con subgrid, las seis filas (foto · nombre · usos · datos · aprobado · pie) alinean en toda la fila de tarjetas. */
@supports (grid-template-rows: subgrid) {
  .producto { grid-row: span 6; }
  .producto-cuerpo { grid-row: span 5; grid-row-gap: 0.5rem; row-gap: 0.5rem; }
  /* Sin aprobaciones (2026-10-21): las normas toman también la fila de «Aprobado por» y el pie sigue alineado. */
  .producto-sin-sellos .producto-datos { grid-row: span 2; }
}
@media (max-width: 599.98px) {
  .producto-visual { padding: 0.5rem 0.5rem 0; }
  .producto-usos li { padding: 0.15rem 0.45rem; }
}
.sin-gap-flex .producto-usos > * + * { margin-left: 0.3rem; }
/* Catálogo sin gap en flex (Chromium < 84, televisores hasta 2021): chips, filtros, cabecera y mapa con márgenes en vez de
   gap (revisión del catálogo, 2026-10-22: quedaban borde con borde). */
.sin-gap-flex .familias-mapa .linea-cabecera { margin-bottom: 0.5rem; }   /* ícono · nombre (margin auto, centrado) · marca, sin gap */
.sin-gap-flex .familias-mapa .linea-marca-zona { margin-top: 0.5rem; }
/* Celular apaisado y pantallas de hasta 500 px de alto: tarjetas del mapa más bajas, para que la primera fila entre entera
   bajo la cabecera compacta (844 × 390: terminaba 19 px por debajo; verificación del catálogo, 2026-10-23). */
@media (min-width: 600px) and (max-height: 500px) {
  .familias-mapa { margin-top: 0.75rem; }
  .familias-mapa .linea { padding-top: 0.625rem; padding-bottom: 0.5rem; grid-gap: 0.375rem; gap: 0.375rem; }
  .sin-gap-flex .familias-mapa .linea-cabecera { margin-bottom: 0.375rem; }
  .sin-gap-flex .familias-mapa .linea-marca-zona { margin-top: 0.375rem; }
}
.sin-gap-flex .familia-cabecera > * + * { margin-left: 1rem; }
.sin-gap-flex .familia-filtros > * + * { margin-top: 0.625rem; }
.sin-gap-flex .criterio-opciones { margin: 0 -0.5rem -0.5rem 0; }   /* el margen derecho negativo evita el salto de línea anticipado y la casilla 8 px más angosta */
.sin-gap-flex .criterio-opciones > * { margin: 0 0.5rem 0.5rem 0; }
.sin-gap-flex .familia-estado { margin-right: -0.625rem; margin-bottom: -0.625rem; }   /* si la línea de estado se parte, misma separación que con gap */
.sin-gap-flex .familia-estado > * { margin: 0 0.625rem 0.625rem 0; }
.sin-gap-flex .familia-titulos > .cejilla { margin-bottom: 0.125rem; }
@media (max-width: 599.98px) {
  .sin-gap-flex .familia-titulos > .cejilla { margin: 0.125rem 0 0; }   /* en el celular la cejilla va debajo (order: 2) */
  .sin-gap-flex .producto-cuerpo > * + * { margin-top: 0.3rem; }
}
@supports (display: grid) {
  .sin-gap-flex .productos-grilla .producto-cuerpo > * + * { margin-top: 0.3rem; }
  @media (min-width: 600px) { .sin-gap-flex .productos-grilla .producto-cuerpo > * + * { margin-top: 0.35rem; } }
}

/* 37. Respuesta al tocar y movimiento reducido (2026-10-21, propuesta «emil-design-eng» aprobada por el usuario):
   todo lo que se pulsa se hunde un poco (scale 0,97; las tarjetas 0,985) en 160 ms con la curva fuerte. Con movimiento
   reducido se quita el desplazamiento pero se conservan fundidos cortos que explican qué cambió. Sin CSS moderno. */
.boton, .boton-secundario, .filtro, a.chip, .criterio-chip, .familia-quitar { transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.boton:active, .boton-secundario:active, .filtro:active, a.chip:active, .criterio-chip:active, .familia-quitar:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.criterio-chip:disabled:active { -webkit-transform: none; transform: none; }
.producto:active, .linea:active { -webkit-transform: scale(0.985); transform: scale(0.985); }
/* Catálogo (revisión del catálogo, 2026-10-22): sin el destello azul rectangular de Android (en la portada ya se había
   quitado); la respuesta al toque es la propia: el fondo de la cabecera (sección 31), el 0,985 de lo ancho y el 0,97 de
   «Subir». */
.familia-cabecera, .producto-nombre a, .producto-pdf, .criterio-chip, .criterio-entrada, .criterio-sugerencias button,
.familia-plegados button, .familia-quitar, .subir, .elegir > summary, .compat-detalle > summary, .sin-resultados a, .catalogo-buscar input { -webkit-tap-highlight-color: transparent; }
.familia-plegados button { -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.familia-plegados button:active { -webkit-transform: scale(0.985); transform: scale(0.985); }   /* a lo ancho, como las tarjetas */
.subir.visible:active { -webkit-transform: scale(0.97); transform: scale(0.97); -webkit-transition-duration: 0.16s; transition-duration: 0.16s; }
.elegir > summary:active { background-color: rgba(var(--rgb-linea), 0.08); border-radius: 1rem; border-radius: 1rem; border-radius: var(--r-lg); }   /* «inherit» no sirve: el summary hereda por el slot del details */
/* Los chips que se apagan (0,4) al pulsar otro se funden en 150 ms; nunca al teclear (main.js pone .fundir solo al pulsar un
   chip o «Quitar filtros»). Revisión del catálogo, 2026-10-22. */
.familia.fundir .criterio-chip { -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.15s ease-out; transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .boton:active, .boton-secundario:active, .filtro:active, a.chip:active, .criterio-chip:active, .familia-quitar:active,
  .producto:active, .linea:active, .familia-plegados button:active, .subir.visible:active { -webkit-transform: none; transform: none; }
  .familia.fundir .criterio-chip { transition: opacity 0.15s ease-out !important; }
  .heroe > .contenedor > * { -webkit-animation: aparecer 0.2s ease-out both !important; animation: aparecer 0.2s ease-out both !important; }
  .aviso-copia, .aviso-copia.visible { transition-property: opacity, visibility !important; transition-duration: 0.2s !important; }
  .desplegable .sector-aplicaciones-dentro, .desplegable.abierta .sector-aplicaciones-dentro { transition: opacity 0.2s ease-out !important; }
  /* Con visibility en la transición: el fundido se ve también al ocultar (revisión de la portada, 2026-10-22). */
  .video-centro, .video-barra { transition: opacity 0.2s ease-out, visibility 0.2s !important; }
  .heroe-video.reproduciendo .video-centro { -webkit-transform: none; transform: none; }
}
@-webkit-keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* 38. Lo que aparece y desaparece (2026-10-21, segunda propuesta «emil-design-eng» aprobada por el usuario). Cada elemento
   nuevo trae su propia entrada (los resultados se crean de nuevo en cada cambio, así que la animación se repite sola);
   «backwards» para no dejar una transformación pegada (rompería el sticky de la calculadora). Sin CSS moderno. */
.js .nav-panel.abierto { -webkit-animation: entra-bajando 0.2s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: entra-bajando 0.2s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.js .nav-panel.cerrando { -webkit-animation: sale-subiendo 0.15s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation: sale-subiendo 0.15s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.lg-ficha { -webkit-animation: entra-subiendo 0.25s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: entra-subiendo 0.25s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
.compat-resultado > * { -webkit-animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
/* La línea «N productos · … · Quitar filtros» y «Ver los otros N» aparecen con un fundido corto al poner el primer filtro, y no
   de golpe empujando la grilla (revisión del catálogo, 2026-10-22). */
.familia-estado:not([hidden]), .familia-plegados:not([hidden]) { -webkit-animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
@-webkit-keyframes entra-bajando { from { opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); } }
@keyframes entra-bajando { from { opacity: 0; transform: translateY(-8px); } }
@-webkit-keyframes sale-subiendo { to { opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); } }
@keyframes sale-subiendo { to { opacity: 0; transform: translateY(-8px); } }
@-webkit-keyframes entra-subiendo { from { opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px); } }
@keyframes entra-subiendo { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  /* Solo fundidos, sin desplazamiento (el reset general dejaría las animaciones en 0,01 ms). */
  .js .nav-panel.abierto, .lg-ficha, .js .calculadora.abierta, .compat-resultado > *, .js .familia.abierta .familia-cuerpo,
  .familia-estado:not([hidden]), .familia-plegados:not([hidden]) {
    -webkit-animation: aparecer 0.2s ease-out backwards !important; animation: aparecer 0.2s ease-out backwards !important; }
  .js .nav-panel.cerrando { -webkit-animation: none !important; animation: none !important; }
}

/* 39. Barrido de UX (2026-10-21, skills «emil-design-eng» e «impeccable», aprobado por el usuario). Celular tipo app,
   letra mínima de 12 px, áreas táctiles de 44 px y la tarjeta entera en el televisor. Lo del celular (< 600 px) usa
   grid y display: contents, que leen todos los teléfonos actuales; nada de esto llega a los televisores viejos. */

/* Televisor: la foto de la tarjeta más baja (marco 10:9 en vez de 4:5), para que cada producto entre entero en la
   pantalla con la cabecera fija (antes 935 px de tarjeta en una pantalla de 1080). */
html.tv .productos-grilla .producto-imagen::before { padding-top: 90%; }
@media (min-width: 900px) and (max-height: 600px) { .productos-grilla .producto-imagen::before { padding-top: 90%; } }

/* Áreas táctiles de 44 px donde el dedo es el puntero: aplicaciones de los sectores (36 px) y «Privacidad» (18 px; el
   relleno de un enlace en línea agranda la zona de toque sin mover el texto). */
@media (pointer: coarse) {
  .sector-aplicaciones-lista a { min-height: 2.75rem; min-height: var(--objetivo); }
  .pie-legal a { padding: 0.8125rem 0; }
}

/* Barra fija de la ficha en el celular: «Cotizar» y «Ficha PDF» al alcance del pulgar. main.js la esconde mientras se
   ven los botones del héroe (y desde 600 px el cierre de la ficha; el pie ya no, desde el 2026-10-22). Entra en 250 ms y
   sale en 200 ms. Sin JS no aparece. */
.barra-accion { display: none; }
@media (max-width: 599.98px) {
  .js .barra-accion {
    display: flex; grid-gap: 0.5rem; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 0.625rem 1.5rem; padding: 0.625rem var(--gutter); padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background: #ffffff; border-top: 1px solid #e8e9ec; border-top: 1px solid var(--borde); box-shadow: 0 -6px 18px rgba(23, 24, 28, 0.08);
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
  }
  .js .barra-accion > * { flex: 1 1 0; min-width: 0; justify-content: center; margin: 0; }
  .js .barra-accion.escondida { -webkit-transform: translateY(110%); transform: translateY(110%); visibility: hidden;
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.2s; }
  html.pagina-ficha .aviso-copia { bottom: 5.5rem; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .barra-accion { -webkit-transform: none !important; transform: none !important; transition: opacity 0.2s ease-out, visibility 0s !important; }
  .js .barra-accion.escondida { opacity: 0; transition: opacity 0.2s ease-out, visibility 0s linear 0.2s !important; }
}

@media (max-width: 599.98px) {
  /* Migas: una sola línea para volver al nivel anterior («‹ Motores a gasolina…»), como el botón atrás de una app. */
  .migas li { display: none; }
  .migas li:nth-last-child(2) { display: inline-flex; }
  .migas li:nth-last-child(2)::after { content: none; }
  .migas li:nth-last-child(2) a::before { content: ""; width: 0.45rem; height: 0.45rem; margin: 0 0.5rem 0 0.125rem;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

  /* Catálogo compacto en el celular (revisión del catálogo, 2026-10-22): las 12 cabeceras plegadas son el índice y en la
     primera pantalla cabían 2. Mismo relleno abierta o plegada: no salta al abrir. */
  .catalogo-cabecera { padding-top: 1.25rem; padding-bottom: 1.25rem; grid-gap: 0.75rem; gap: 0.75rem; }
  .familia { margin-top: 0.625rem; }
  .familia-cabecera { grid-gap: 0.75rem; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .familia-icono { width: 2.5rem; height: 2.5rem; }
  .familia-cabecera h2 { font-size: 1.2rem; font-size: var(--t-lg); }

  /* Cabecera de familia: el nombre primero; marcas y cantidad debajo, en una línea sin mayúsculas espaciadas. */
  .familia-cabecera .familia-titulos .cejilla { -webkit-box-ordinal-group: 3; order: 2; text-transform: none; letter-spacing: 0;
    font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; line-height: 1.35; color: #55575e; color: var(--secundario); }

  /* Texto corrido: a la izquierda en el celular (justificado abría huecos entre palabras); desde 600 px, justificado. */
  .guia-intro, .etapa-texto, .ficha-texto, .guia-seccion .nota, .bloque .nota { text-align: left; }

  /* Catálogo como lista de app: una columna; foto de 6 rem a la izquierda sobre la franja de la familia y, a la derecha,
     nombre, usos en una línea de texto, la norma y «N aprobaciones». Toda la fila abre la ficha (el enlace
     del nombre la cubre); el PDF queda arriba a la derecha con zona de toque de 44 px. */
  .productos-grilla { grid-template-columns: minmax(0, 1fr); grid-gap: 0.5rem; gap: 0.5rem; margin-left: -0.5rem; margin-right: -0.5rem; }
  .producto { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-row: auto; grid-row-gap: 0; row-gap: 0;
    background: #ffffff; background: linear-gradient(90deg, rgba(var(--rgb-linea), 0.14) 0, rgba(var(--rgb-linea), 0.03) 5.25rem, #ffffff 5.25rem); }
  .producto-visual { display: contents; }
  .producto-visual .producto-imagen { grid-column: 1; grid-row: 1 / 3; align-self: center; margin: 0.5rem 0 0.5rem 0.5rem; }   /* centrada en la franja (2026-10-21) */
  .producto-cuerpo { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; grid-template-rows: none; grid-gap: 0.3rem; gap: 0.3rem;
    padding: 0.625rem 0.75rem 0.75rem; }
  .producto-nombre { min-height: 0; padding-right: 2rem; }
  .producto-usos { display: block; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.4; color: #55575e; color: var(--secundario); }
  .producto-usos[hidden] { display: none; }
  .producto-usos li { display: inline; padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 700; color: inherit; }
  .producto-usos li + li::before { content: " · "; font-weight: 400; }
  .sin-gap-flex .producto-usos > * + * { margin-left: 0; }
  .producto-pie { display: contents; }
  .producto-ver { display: none; }
  .producto-pdf { position: absolute; top: 0.25rem; right: 0.25rem; width: 2.75rem; width: var(--objetivo); height: 2.75rem; height: var(--objetivo); justify-content: center; }
}

/* 40. Páginas de sector en el celular como lista de app (2026-10-21, segunda pasada «impeccable» + «emil-design-eng»,
   aprobada por el usuario): cada guía es una fila con la ilustración a la izquierda y título y descripción a la derecha;
   toda la fila abre la guía (el enlace del título la cubre). La lista sube: el bloque «¿Quieres el plan…?» pasa debajo
   de ella (el usuario lo había subido el 2026-10-07; desde 600 px sigue bajo la foto). Solo < 600 px. */
@media (max-width: 599.98px) {
  html.pagina-sector main > .contenedor { display: flex; flex-direction: column; }
  html.pagina-sector .cta-arriba { order: 1; }
  html.pagina-sector .otros-sectores, html.pagina-sector .guia-volver { order: 2; }
  .guias-grilla { grid-gap: 0.625rem; gap: 0.625rem; }
  .guia-tarjeta { flex-direction: row; align-items: stretch; }
  .guia-tarjeta-imagen { flex: none; width: 7.5rem; display: flex; align-items: center; border-bottom: 0; border-right: 1px solid #e8e9ec; border-right: 1px solid var(--borde); }
  .guia-tarjeta-imagen img { height: 5.5rem; padding: 0.375rem; box-sizing: border-box; }
  .guia-tarjeta-cuerpo { justify-content: center; grid-gap: 0.25rem; gap: 0.25rem; padding: 0.75rem 0.875rem; }
  .guia-tarjeta h3 { font-size: 1.0625rem; font-size: var(--t-md); }
  .guia-tarjeta p { line-height: 1.4; }
  .guia-tarjeta .guia-tarjeta-ir { display: none; }
}
/* Respuesta al tocar, como las tarjetas del catálogo (0,985 en 160 ms). */
.guia-tarjeta:active { -webkit-transform: scale(0.985); transform: scale(0.985); transition-duration: 0.16s; }
@media (prefers-reduced-motion: reduce) { .guia-tarjeta:active { -webkit-transform: none; transform: none; } }

/* 41. Ficha de producto (2026-10-21, «impeccable» + «emil-design-eng», aprobado por el usuario). Encabezado más compacto
   (Presentaciones a lo ancho, sin «Ver la familia»), y en el celular: foto más baja, especificaciones en una columna y un
   selector de grado para las tablas de varios grados. Sin CSS moderno sin respaldo. */
.losa-presentaciones .datos-lista { display: flex; flex-wrap: wrap; grid-gap: 0.125rem 1.5rem; gap: 0.125rem 1.5rem; }
@media (max-width: 599.98px) {
  .losa-normas { grid-column: 1 / -1; }
  .ficha-figura { max-width: 13rem; }   /* marco 4:5: unos 260 px de alto (antes 340) */
  #especificaciones .lista.lista-corta { grid-template-columns: minmax(0, 1fr); }   /* los códigos no se parten en dos columnas */
  /* Selector de grado (main.js): un grado a la vez en vez de la tabla que se desliza; sin JS sigue la tabla completa. */
  .selector-grado { display: flex; flex-wrap: wrap; grid-gap: 0.375rem; gap: 0.375rem; margin: 0 0 0.875rem; }
  .selector-grado .criterio-chip { min-height: 2.75rem; min-height: var(--objetivo); }
  .un-grado .tabla-pista { display: none !important; }
  .tabla-envoltura.un-grado::after { display: none; }
  .un-grado .tabla-contenedor { overflow: visible; }
  .un-grado .tabla-ancha { width: 100%; min-width: 0; }
  .un-grado .tabla-ancha tbody th, .un-grado .tabla-ancha thead th:first-child { position: static; min-width: 0; box-shadow: none; }
  .un-grado .tabla-ancha td, .un-grado .tabla-ancha thead th + th { text-align: right; white-space: nowrap; }
  .un-grado .grado-oculto { display: none; }
  .un-grado.grado-cambio td:not(.grado-oculto), .un-grado.grado-cambio thead th + th:not(.grado-oculto) {
    -webkit-animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1); animation: aparecer 0.15s cubic-bezier(0.23, 1, 0.32, 1); }
}
.selector-grado { display: none; }
@media (max-width: 599.98px) { .js .selector-grado { display: flex; } }
.ficha-aprobaciones .etiqueta-detalle { font-weight: 600; color: #55575e; color: var(--secundario); }   /* el detalle del catálogo: «(compresores alternativos)» */
/* La ficha no define --color-linea (solo las familias del catálogo): el grado elegido va en tinta. */
.selector-grado .criterio-chip[aria-pressed="true"] { background: #17181c; background: var(--color-linea, var(--tinta)); border-color: #17181c; border-color: var(--color-linea, var(--tinta)); color: #ffffff; }

/* 42. Televisor: «Cotizar» y «Ficha técnica» suben justo debajo de la descripción (2026-10-21, pedido del usuario). En la
   tele no hay barra fija y el encabezado (1.108 px a 1920) dejaba los botones fuera de la primera pantalla. Solo html.tv;
   flex y order los leen los televisores viejos. */
html.tv .ficha-datos { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
html.tv .ficha-datos .acciones { -webkit-box-ordinal-group: 0; -webkit-order: -1; order: -1; margin-top: 0; margin-bottom: 1.5rem; margin-bottom: var(--e-5); }
html.tv .ficha-datos > .datos-losas:first-child { margin-top: 0; }   /* solo el primero (2026-10-22: Presentaciones y Familia quedaban pegadas) */

/* 43. Pantallas anchas y bajas (TV a 960 × 540, Android TV / Fire TV): la tarjeta de producto entera bajo la cabecera
   fija (2026-10-21, pedido del usuario; antes 557 px y hasta 606 en una pantalla que deja 476 libres). Usos en una línea
   de texto, «Aprobado por» junto a los sellos, foto más baja y menos relleno, como la fila del celular. */
@media (min-width: 900px) and (max-height: 600px) {
  .productos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* más ancho por tarjeta: grados y sellos se parten menos */
  /* Foto de alto fijo: no crece con el ancho. También con html.tv (un televisor real lleva la clase y la regla del 90 %
     de más arriba ganaba por especificidad: corregido el 2026-10-21). */
  .productos-grilla .producto-imagen::before, html.tv .productos-grilla .producto-imagen::before { padding-top: 0; height: 7.5rem; }
  .productos-grilla .producto-cuerpo { padding: 0.875rem 1rem 1rem; }
  .productos-grilla .producto-usos { display: block; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.35; color: #55575e; color: var(--secundario); }
  .productos-grilla .producto-usos[hidden] { display: none; }
  .productos-grilla .producto-usos li { display: inline; padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 700; color: inherit; }
  .productos-grilla .producto-usos li + li::before { content: " · "; font-weight: 400; }
  .sin-gap-flex .productos-grilla .producto-usos > * + * { margin-left: 0; }
}

/* 45. Lubriguía v4 (2026-10-21, pedido del usuario): campos «tipo Google» para Marca, Modelo, Año y Motor (combobox de ARIA):
   se escribe o se elige de la lista, y la lista se reduce con cada letra. Mismo aspecto que el buscador; la lista flota
   sobre la página (abrirla no mueve los campos de abajo), muestra 7 opciones y se desplaza para ver el resto. Sin CSS
   moderno sin respaldo (televisores). */
.lg-combo { position: relative; }
.lg-combo-caja { position: relative; }
.lg-combo input {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0 3rem 0 1rem; border: 1.5px solid #8a8c94; border: 1.5px solid var(--borde-interactivo); border-radius: 0.75rem; border-radius: var(--r-md);
  background: #ffffff; background: var(--fondo); color: #17181c; color: var(--tinta); font: inherit; font-size: 16px; font-size: max(1rem, var(--t-base)); font-weight: 700;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.lg-combo input::placeholder { color: #55575e; color: var(--secundario); font-weight: 600; }   /* contraste ≥ 4,5:1 */
.lg-combo input:focus { border-color: #17181c; border-color: var(--tinta); }
.lg-combo input:disabled { color: #6b6d75; color: var(--suave); border-color: #d9dade; border-color: var(--borde-fuerte); cursor: not-allowed; }
.lg-combo input:disabled::placeholder { color: #6b6d75; color: var(--suave); }   /* «Primero elige…» se lee inactivo, como el desplegable de antes */
.lg-combo-abrir {
  position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  padding: 0; border: 0; border-radius: 0 0.75rem 0.75rem 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: transparent; color: #17181c; color: var(--tinta); cursor: pointer;
}
.lg-combo-abrir:disabled { color: #6b6d75; color: var(--suave); cursor: not-allowed; }
.lg-combo-abrir svg { -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.lg-combo.abierto .lg-combo-abrir svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.lg-combo-lista {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 31; box-sizing: border-box; max-height: 20.75rem; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; list-style: none; margin: 0.375rem 0 0; padding: 0.375rem;
  border: 1px solid #d9dade; border: 1px solid var(--borde-fuerte); border-radius: 0.75rem; border-radius: var(--r-md); background: #ffffff; background: var(--fondo); box-shadow: 0 12px 32px rgba(23, 24, 28, 0.14);
  -webkit-animation: entra-bajando 0.15s cubic-bezier(0.23, 1, 0.32, 1); animation: entra-bajando 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.lg-combo-lista[hidden] { display: none; }
.lg-combo-opcion {
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-height: 2.75rem; padding: 0.375rem 0.75rem;
  border-radius: 0.5rem; border-radius: var(--r-sm); color: #17181c; color: var(--tinta); font-weight: 600; cursor: pointer;
}
.lg-combo-opcion + .lg-combo-opcion { margin-top: 0.125rem; }
@media (hover: hover) and (pointer: fine) { .lg-combo-opcion:hover { background: #f6f7f8; background: var(--superficie); } }
.lg-combo-opcion.activa { background: #f6f7f8; background: var(--superficie); box-shadow: inset 0 0 0 0.1875rem #2456E6; box-shadow: inset 0 0 0 0.1875rem #2456E6; box-shadow: inset 0 0 0 0.1875rem var(--foco); }
.lg-combo-opcion[aria-selected="true"] { font-weight: 800; color: #b50000; color: var(--acento-oscuro); }
.lg-combo-texto { overflow-wrap: anywhere; }
.lg-combo-meta { font-size: 0.9rem; font-size: var(--t-sm); font-weight: 600; color: #55575e; color: var(--secundario); }
.lg-combo-vacio { padding: 0.5rem 0.75rem; font-size: 0.9rem; font-size: var(--t-sm); color: #55575e; color: var(--secundario); }
/* Motor y años en la cabecera oscura de la tarjeta. */
.lg-ficha-motor { margin: 0.375rem 0 0; font-size: 0.9rem; font-size: var(--t-sm); font-weight: 700; color: #d5d6db; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .lg-combo-lista { -webkit-animation: aparecer 0.2s ease-out !important; animation: aparecer 0.2s ease-out !important; }
  .lg-combo-abrir svg { -webkit-transition: none; transition: none; }
}

/* 46. Ficha de producto compacta (2026-10-21, pedido del usuario): con la ficha técnica en PDF la página ya no repite
   aplicaciones, beneficios, especificaciones ni valores típicos, y los documentos van en el encabezado. Las cartillas
   (losas) se aprietan; «Cotizar», «Ficha técnica» y «Hoja de seguridad» caben en una fila (el peso del PDF queda en la
   lista de grados). */
.datos-losas { grid-gap: 0.5rem; gap: 0.5rem; }
.losa { grid-gap: 0.125rem; gap: 0.125rem; padding: 0.625rem 0.875rem; border-radius: 0.75rem; border-radius: var(--r-md); }
.losa-familia { padding-top: 0.125rem; }
.ficha-aprobaciones { grid-gap: 0.375rem; gap: 0.375rem; margin-top: 0.625rem; }
.ficha-datos .acciones { grid-gap: 0.625rem; gap: 0.625rem; margin-top: 1rem; margin-top: var(--e-4); }
.ficha-info .acciones .boton, .ficha-info .acciones .documento-boton { min-height: 3rem; padding: 0.5rem 1.125rem; font-size: 0.9rem; font-size: var(--t-sm); }
.ficha-info .acciones .documento-boton .documento-peso { display: none; }
.ficha-anteriores { margin-top: 0.5rem; }
.ficha-heroe { padding-bottom: 2rem; padding-bottom: var(--e-6); }
@media (max-width: 599.98px) {   /* celular: «Cotizar» a lo ancho; ficha técnica y hoja de seguridad, lado a lado debajo */
  .ficha-info .acciones > .boton { -webkit-flex-basis: 100%; flex-basis: 100%; }
  .ficha-info .acciones { grid-gap: 0.5rem; gap: 0.5rem; }
  .ficha-info .acciones .documento-boton { padding-left: 0.5rem; padding-right: 0.5rem; }
}
html.tv .ficha-datos .ficha-anteriores { -webkit-box-ordinal-group: 0; -webkit-order: -1; order: -1; margin: calc(-1 * 0.75rem) 0 1.5rem; margin: calc(-1 * var(--e-3)) 0 var(--e-5); }   /* sube con los botones */

/* 47. Tarjetas y fichas (2026-10-21, pedidos del usuario). (El nombre centrado de la tarjeta vertical quedó atrás: desde la
   sección 49 la tarjeta es una fila, con el nombre a la izquierda.) MULTIS COMPLEX SHD es una sola tarjeta: una palabra por línea y, en la última,
   sus variantes (00 · 100 · 220 · 460). En su ficha, el bloque «Variantes» con una cartilla por variante. */
/* El grado bajo el nombre, con su rótulo («SAE 5W-40», «ISO VG 100/220/460 · NLGI 00»): el nombre queda en dos líneas. */
.producto-grado-linea { display: block; margin-top: 0.125rem; font-size: 0.75em; font-size: max(0.75em, 0.75rem); font-weight: 800; letter-spacing: 0.01em; color: #55575e; color: var(--secundario); }
.variantes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.75rem; gap: 0.75rem; }
@media (min-width: 600px) { .variantes { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }   /* SHD en 4, MULTIS EP en 5: sin una suelta abajo */
.variante { padding: 0.875rem 1rem; border-radius: 0.75rem; border-radius: var(--r-md); background: #f6f7f8; background: var(--superficie); }
.variante h3 { margin: 0 0 0.375rem; font-size: 1rem; font-size: var(--t-base); }
.variante p { margin: 0; font-size: 0.9rem; font-size: var(--t-sm); }
.variante .variante-datos { margin-top: 0.5rem; font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; color: #55575e; color: var(--secundario); }
.variante .variante-nota { margin-top: 0.375rem; font-size: 0.84rem; font-size: var(--t-xs); color: #55575e; color: var(--secundario); }
/* Los botones del encabezado de la ficha ocupan el ancho libre de su fila (criterio del usuario, 2026-10-21). */
.ficha-info .acciones > * { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.ficha-info .acciones .documentos-menu > summary { width: 100%; box-sizing: border-box; }
@supports not (display: grid) { .variantes > li + li { margin-top: 0.75rem; } }   /* televisores sin grid: una debajo de otra */

/* 48. Encabezado de la ficha compacto: EL ESTÁNDAR de todas las fichas (2026-10-21, aprobado por el usuario sobre BARELF
   AL 100: «esa distribución es la perfecta... que un botón salga arriba y otro abajo crea desuniformidad»). Orden fijo:
   Tipo · Base, Grado y Normas en una fila (Normas ocupa lo que queda) · Presentaciones · la fila de botones (Cotizar,
   Ficha técnica, Hoja de seguridad) · Familia · «Aprobado por». Cada cartilla gris mide lo que su contenido. En el
   televisor los botones suben bajo la descripción (regla 42), igual en todos los productos. */
.datos-flujo { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 0.5rem; gap: 0.5rem; }
.datos-flujo .losa { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; box-sizing: border-box; }
.datos-flujo .losa-normas { -webkit-box-flex: 1; -webkit-flex: 1 1 10rem; flex: 1 1 10rem; }
.sin-gap-flex .datos-flujo > * { margin: 0 0.5rem 0.5rem 0; }
.ficha-datos > .datos-flujo + .datos-flujo, .ficha-datos > .ficha-anteriores + .datos-flujo, .ficha-datos > .acciones + .datos-flujo { margin-top: 0.5rem; }
.ficha-datos > .datos-flujo + .acciones { margin-top: 0.75rem; }

/* 49. La tarjeta de producto como FILA también en computadora y televisor (2026-10-21, pedido del usuario: «copia el formato
   del celular... la información en vertical sobrecargada estira la tarjeta»). La misma fila de app del celular: foto a la
   izquierda sobre la franja de la familia y, a la derecha, nombre con su grado, usos en una línea de texto, la norma y
   «N aprobaciones»; toda la fila abre la ficha y el PDF va arriba a la derecha. Una columna en el celular, dos desde 600 px y
   tres desde 1280 px (también en el televisor). Sin grid (televisores viejos) queda la tarjeta vertical de siempre. */
@supports (display: grid) {
  .productos-grilla { --foto-fila: 5.25rem; }
  .productos-grilla .producto { display: grid; grid-template-columns: var(--foto-fila) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-row: auto; grid-row-gap: 0; row-gap: 0;
    background: #ffffff; background: linear-gradient(90deg, rgba(var(--rgb-linea), 0.14) 0, rgba(var(--rgb-linea), 0.03) var(--foto-fila), #ffffff var(--foto-fila)); }
  /* Sin display: contents (Chromium 57-64, tele Samsung 2019) la caja de la foto hace de celda y la fila se mantiene (revisión
     del catálogo, 2026-10-22: salían en escalera); donde contents existe, estas propiedades no se pintan. */
  .productos-grilla .producto-visual { grid-column: 1; grid-row: 1 / 3; -webkit-align-self: center; align-self: center; padding: 0; background: transparent; }
  .productos-grilla .producto-visual { display: contents; }
  .productos-grilla .producto-visual .producto-imagen { grid-column: 1; grid-row: 1 / 3; align-self: center; margin: 0.5rem 0 0.5rem 0.5rem; }   /* sin placa, centrada en la franja (2026-10-21) */
  .productos-grilla .producto-imagen::before, html.tv .productos-grilla .producto-imagen::before { padding-top: 125%; height: auto; }
  .productos-grilla .producto-cuerpo { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; grid-template-rows: none; grid-gap: 0.3rem; gap: 0.3rem; padding: 0.625rem 0.75rem 0.75rem; }
  .productos-grilla .producto-nombre { min-height: 0; padding-right: 2rem; text-align: left; }
  .productos-grilla .producto-usos { display: block; font-size: 0.84rem; font-size: var(--t-xs); line-height: 1.4; color: #55575e; color: var(--secundario); }
  .productos-grilla .producto-usos[hidden] { display: none; }
  .productos-grilla .producto-usos li { display: inline; padding: 0; border-radius: 0; background: none; font-size: inherit; font-weight: 700; color: inherit; }
  .productos-grilla .producto-usos li + li::before { content: " · "; font-weight: 400; }
  .sin-gap-flex .productos-grilla .producto-usos > * + * { margin-left: 0; }
  .productos-grilla .producto-pie { margin-top: 0; padding-top: 0; }   /* ídem: sin contents el pie queda vacío y no suma alto */
  .sin-gap-flex .productos-grilla .producto-pie { margin-top: 0; }   /* le gana a «.sin-gap-flex .producto-cuerpo > * + *» */
  .productos-grilla .producto-pie { display: contents; }
  .productos-grilla .producto-ver { display: none; }
  .productos-grilla .producto-pdf { position: absolute; top: 0.25rem; right: 0.25rem; width: 2.75rem; width: var(--objetivo); height: 2.75rem; height: var(--objetivo); justify-content: center; }
  .productos-grilla .producto-pdf span { display: none; }
  @media (min-width: 600px) {
    .productos-grilla { --foto-fila: 6.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.75rem; gap: 0.75rem; margin-left: 0; margin-right: 0; }
    .productos-grilla .producto-visual .producto-imagen { margin: 0.625rem 0 0.625rem 0.625rem; }
    .productos-grilla .producto-cuerpo { grid-gap: 0.35rem; gap: 0.35rem; padding: 0.75rem 0.875rem 0.875rem; }
    /* La norma y «N aprobaciones» al pie de cada tarjeta, alineadas en toda la fila (revisión del catálogo, 2026-10-22). Sin
       gap en flex, el margen «auto» anulaba la separación: vuelve como relleno. */
    .productos-grilla .producto-datos { margin-top: auto; }
    .sin-gap-flex .productos-grilla .producto-datos { margin-top: auto; padding-top: 0.35rem; }
  }
  @media (min-width: 1280px) { .productos-grilla, html.tv .productos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

/* 50. Fichas de producto refinadas (2026-10-22, revisión «emil-design-eng» aprobada por el usuario, puntos 1 a 21). Con
   respaldo para televisores: flex, order e inline-block; márgenes .sin-gap-flex donde hay gap; keyframes con -webkit-. */

/* Menú de documentos por grado (1, 2 y 12): sale de su botón en 150 ms con la curva fuerte (la salida es instantánea); si
   no cabe hacia la derecha se ancla al borde derecho del botón (main.js, initDocumentosMenu). Sin JS, el último botón de
   la fila ya abre hacia la izquierda. */
.ficha-info .acciones > .documentos-menu:last-child > ul, .documentos-menu.a-la-derecha > ul { left: auto; right: 0; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }
.ficha-info .acciones > .documentos-menu.a-la-izquierda > ul { left: 0; right: auto; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.documentos-menu[open] > ul { -webkit-animation: menu-entra 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; animation: menu-entra 0.15s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
@-webkit-keyframes menu-entra { from { opacity: 0; -webkit-transform: translateY(-4px) scale(0.96); } }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-4px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .documentos-menu[open] > ul { -webkit-animation: aparecer 0.2s ease-out backwards !important; animation: aparecer 0.2s ease-out backwards !important; }
}

/* Televisores sin gap en flex (3): las mismas distancias con márgenes. */
.sin-gap-flex .losa-presentaciones .datos-lista > li { margin: 0 1.5rem 0.125rem 0; }
.sin-gap-flex .losa-familia > dd { margin-left: 0.5rem; }
.sin-gap-flex .ficha-aprobaciones > * { margin: 0 0.375rem 0.375rem 0; }
.sin-gap-flex .ficha-aprobaciones > .ficha-aprobaciones-rotulo { margin-right: 0.625rem; }
.sin-gap-flex .etiqueta-carta > svg, .sin-gap-flex .etiqueta-sello > svg, .sin-gap-flex .etiqueta-lista > svg { margin-left: 0.3rem; }
.sin-gap-flex .documentos-menu li a > svg { margin-right: 0.5rem; }
.sin-gap-flex .documentos-menu > summary::after { margin-left: 0.625rem; }

/* Ritmo del encabezado (4): el alto que sobra por la foto va debajo de los datos, no entre la bajada y «Tipo». */
@media (min-width: 768px) { .ficha-heroe { grid-template-rows: auto 1fr; } }

/* Botones (6): hasta 1150 px, el reparto del celular (Cotizar a lo ancho; ficha técnica y hoja de seguridad lado a lado),
   en vez de «Hoja de seguridad» sola en una segunda fila. */
@media (max-width: 1149.98px) {
  .ficha-info .acciones > .boton:nth-last-child(n+3) { -webkit-flex-basis: 100%; flex-basis: 100%; }
  .sin-gap-flex .ficha-info .acciones > * { margin: 0 0 0.625rem; }
  .sin-gap-flex .ficha-info .acciones > * + * + * { margin-left: 0.625rem; }
  .sin-gap-flex .ficha-info .acciones > .boton:nth-last-child(2) + * { margin-left: 0.625rem; }   /* con dos botones, en una fila */
}

/* La foto (7 y 8): sin placa ni franja gris (como la tarjeta del catálogo), la leyenda en una línea; más chica en el
   celular (antes llenaba la primera pantalla) y con tope en el televisor (medía 843 px a 1920). */
.ficha-figura { background: transparent; border: 0; border-radius: 0; overflow: visible; }
/* La leyenda puede ser más ancha que la foto chica del celular: se sale un poco por los lados, centrada, en vez de cortarse. */
.ficha-figura figcaption { margin: 0 -2rem; padding: 0.375rem 0 0; border-top: 0; background: transparent; font-size: 0.78rem; font-size: var(--t-2xs); white-space: nowrap; }
@media (max-width: 599.98px) { .ficha-figura { max-width: 10rem; } }
html.tv .ficha-figura { max-width: 20rem; }

/* Cierre (9): una línea con el botón, sin repetir el nombre; en el celular no hace falta (está la barra fija). Sin JS se queda. */
.ficha-cuerpo .cta-linea { margin-top: 2rem; margin-top: var(--e-6); padding: 1rem 1.5rem; padding: var(--e-4) var(--e-5); }
.ficha-cuerpo .cta-linea p { margin: 0; }
@media (max-width: 599.98px) { .js .ficha-cuerpo .cta-ficha { display: none; } }

/* Televisor no detectado como tal (10): la regla 42 también por tamaño de pantalla (ancha y baja, como la regla 43) y sin
   puntero que flote (hover: none): alcanza televisores y celulares apaisados, no laptops de pantalla baja. */
@media (min-width: 900px) and (max-height: 600px) and (hover: none) {
  .ficha-datos { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
  .ficha-info .ficha-datos .acciones { -webkit-box-ordinal-group: 0; -webkit-order: -1; order: -1; margin-top: 0; margin-bottom: 1.5rem; margin-bottom: var(--e-5); }
  .ficha-datos > .datos-losas:first-child { margin-top: 0; }
  .ficha-datos .ficha-anteriores { -webkit-box-ordinal-group: 0; -webkit-order: -1; order: -1; margin: calc(-1 * 0.75rem) 0 1.5rem; margin: calc(-1 * var(--e-3)) 0 var(--e-5); }
}

/* Barra fija (11): el estado de la carga se pone sin animación (main.js); gana a la regla !important de movimiento reducido.
   Desde el 2026-10-22 no se esconde con el pie (el cierre de la ficha ya no sale en el celular): el pie deja su alto libre. */
.js .barra-accion.sin-transicion { -webkit-transition: none !important; transition: none !important; }
@media (max-width: 599.98px) {
  html.pagina-ficha.js .pie { padding-bottom: 7.25rem; padding-bottom: calc(2.5rem + 4.75rem + 0px); padding-bottom: calc(var(--e-7) + 4.75rem + env(safe-area-inset-bottom, 0px)); }
}
.sin-gap-flex .barra-accion > * + * { margin-left: 0.5rem; }

/* Respuesta al pulsar (13), como el resto del sitio: cartas y sello 0,97; Anterior/Siguiente 0,985, como las tarjetas. */
.etiqueta-carta, .etiqueta-sello, .vecino { -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.etiqueta-carta:active, .etiqueta-sello:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.vecino:active { -webkit-transform: scale(0.985); transform: scale(0.985); }
.documentos-menu li a:active { background: #e9eaee; }
@media (prefers-reduced-motion: reduce) {
  .etiqueta-carta:active, .etiqueta-sello:active, .vecino:active { -webkit-transform: none; transform: none; }
}

/* Zona de toque de 44 px (14) en las etiquetas que abren un PDF, sin cambiar su tamaño a la vista. */
@media (pointer: coarse) {
  .ficha-aprobaciones a.etiqueta, .ficha-niveles-enlace { position: relative; }
  .ficha-aprobaciones a.etiqueta::after, .ficha-niveles-enlace::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem; margin-top: -1.375rem; }
  .ficha-aprobaciones { grid-row-gap: 0.625rem; row-gap: 0.625rem; }
  .ficha-anteriores a { padding: 0.75rem 0; }
}

/* «Aprobado por» (16 y 17): lo que es solo texto, con borde suave; lo que abre una carta o el sello conserva su borde fuerte.
   «+3 más en la ficha técnica» va como texto, sin cápsula. */
.ficha-aprobaciones span.etiqueta-aprobacion { border-width: 1px; border-color: #d9dade; border-color: var(--borde-fuerte); font-weight: 700; }
.ficha-aprobaciones-mas { font-size: 0.84rem; font-size: var(--t-xs); font-weight: 700; color: #55575e; color: var(--secundario); }

/* Normas (18): cada código en su caja; el salto de línea ya no lo parte por dentro. */
.losa-normas .norma, .variante-datos .norma { display: inline-block; max-width: 100%; }

/* Variantes (19): el rótulo corto («SHD 00»), en negro y sin mayúsculas: es lo que distingue a cada una. */
.variante h3 { text-transform: none; letter-spacing: 0; color: #17181c; color: var(--tinta); font-weight: 900; }

/* Bajada (20): a la izquierda hasta 1024 px; justificada abría huecos en la columna angosta de la tableta. */
@media (max-width: 63.99em) { .ficha-info .bajada { text-align: left; } }

/* 51. Fichas de producto, detalles de prioridad baja (2026-10-22, puntos 22 a 29 de la revisión «emil-design-eng»,
   aprobados por el usuario). */

/* Sin el resaltado azul del navegador al tocar (22) en lo que ya tiene su propia respuesta al pulsar. */
.boton, .boton-secundario, .vecino, .etiqueta-carta, .etiqueta-sello, .documentos-menu li a { -webkit-tap-highlight-color: transparent; }

/* Con mouse, el color de botones y «Anterior/Siguiente» cambia en 150 ms en vez de en seco (23); el hundimiento al pulsar
   sigue en 160 ms con la curva fuerte. En lo táctil no cambia nada (el :active sigue inmediato). */
@media (hover: hover) and (pointer: fine) {
  .boton, .boton-secundario { transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .vecino { -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.15s ease, color 0.15s ease;
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.15s ease, color 0.15s ease; }
}

/* La flecha del menú de documentos solo gira (24), en 200 ms, como las demás flechas del sitio: el margen ya no cambia. */
.documentos-menu > summary::after { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.documentos-menu[open] > summary::after { margin-top: -0.2rem; -webkit-transform: translateY(0.45rem) rotate(-135deg); transform: translateY(0.45rem) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .documentos-menu > summary::after { -webkit-transition: none; transition: none; } }

/* «Anterior / Siguiente» en una fila también en el celular (25), más bajas, y el blanco final como el resto de la página. */
.vecinos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.5rem; gap: 0.5rem; }
.vecino-siguiente { grid-column: 2; }
.vecino:only-child { grid-column: 1 / -1; }
@media (max-width: 599.98px) { .vecino { padding: 0.75rem 0.875rem; } }
@supports not (display: grid) { .vecinos > * { width: calc(50% - 1.05rem); } }
.ficha-cuerpo { padding-bottom: 2.5rem; padding-bottom: var(--e-7); }

/* «FAMILIA» y su enlace (26): 8 px, no 2. */
.datos-flujo .losa-familia { grid-gap: 0.5rem; gap: 0.5rem; }

/* Barra fija (28): «Cotizar» y «Ficha PDF», dos mitades iguales con la misma letra. */
@media (max-width: 599.98px) {
  .js .barra-accion > * { padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.9rem; font-size: var(--t-sm); }
}

/* Orden del foco en la tele (29): main.js mueve los botones al comienzo de los datos; el primer dl detrás de ellos no lleva
   margen (sin JS sigue la regla :first-child de la sección 42). */
html.tv .ficha-datos > .acciones + .datos-losas, html.tv .ficha-datos > .ficha-anteriores + .datos-losas { margin-top: 0; }
@media (min-width: 900px) and (max-height: 600px) and (hover: none) {
  .ficha-info .ficha-datos > .acciones + .datos-losas, .ficha-info .ficha-datos > .ficha-anteriores + .datos-losas { margin-top: 0; }
}

/* 52. Filtros y buscador del catálogo (2026-10-22, pedidos del usuario).
   Arreglo: desde la sección 49 (tarjetas en fila, tanda 79) «.productos-grilla .producto { display: grid }» ganaba a
   «.producto.oculto» y «.producto.oculto-filtro»: el filtro contaba bien pero no escondía nada. */
.productos-grilla .producto.oculto-filtro { display: none; }
.familia.mostrar-todo .productos-grilla .producto.oculto-filtro { display: flex; opacity: 0.55; }
@supports (display: grid) { .familia.mostrar-todo .productos-grilla .producto.oculto-filtro { display: grid; } }
.productos-grilla .producto.oculto { display: none !important; }   /* lo que no coincide con la búsqueda no sale ni con «Ver los otros» */

/* Lista de viscosidades «tipo Google»: la casilla lleva una flecha (se toca y se despliega) y el grado elegido se marca. */
.criterio-lista .criterio-buscador::after { content: ""; position: absolute; right: 0.875rem; top: 50%; width: 0.45rem; height: 0.45rem; margin-top: -0.35rem;
  border: solid #55575e; border: solid var(--secundario); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); pointer-events: none; }
.criterio-lista .criterio-entrada { padding-right: 2.25rem; cursor: pointer; }
.criterio-lista .criterio-entrada:focus { cursor: text; }
.criterio-lista .criterio-sugerencias button[aria-selected="true"] { font-weight: 800; background: rgba(var(--rgb-linea), 0.12); }

/* 53. Presentaciones por grado (2026-10-22, pedido del usuario): un grado por fila y sus presentaciones lado a lado. En
   el celular (tabla en tarjetas), las presentaciones de cada grado en una línea y sin las celdas vacías. */
.tabla-presentaciones tbody th[scope="row"] { font-weight: 800; white-space: nowrap; }
.tabla-presentaciones td.vacia { color: #6b6d75; color: var(--suave); }
@media (max-width: 599.98px) {
  .tabla-presentaciones.tabla-tarjetas tr { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: baseline; -webkit-align-items: baseline; align-items: baseline; }
  .tabla-presentaciones.tabla-tarjetas th[scope="row"] { margin: 0 1rem 0 0; }
  .tabla-presentaciones.tabla-tarjetas th[scope="row"]::before { content: "Grado "; font-weight: 600; color: #55575e; color: var(--secundario); }
  .tabla-presentaciones.tabla-tarjetas td { margin: 0 1rem 0 0; }
  .tabla-presentaciones.tabla-tarjetas td[data-etiqueta]::before { content: none; }
  .tabla-presentaciones.tabla-tarjetas td.vacia { display: none; }
}

/* 54. Envases de la ficha (2026-10-22, pedido del usuario): una tira de fotos que se desliza (galón, litro, balde, tanque),
   con flechas sobre la foto. Sin los botones con el nombre de cada envase que iban debajo (2026-10-23, pedido del usuario:
   la flecha ya dice que hay más fotos). Sin scroll-snap (televisores viejos) la tira igual se desplaza y las flechas llevan
   a cada foto (main.js, initEnvases). */
.envases-pista { display: -webkit-box; display: -webkit-flex; display: flex; overflow-x: auto; overflow-y: hidden;
  -webkit-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.envases-pista::-webkit-scrollbar { display: none; }
.envases-pista > .envase-diapo { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; flex: 0 0 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
/* Flechas de la galería de envases: sobre la foto, a los lados, como en una galería digital. En todos los equipos (en el
   celular, además, se desliza con el dedo): sin los botones de abajo, la flecha es la que dice que hay más fotos. */
.envases { position: relative; }
.envases-flecha { display: none; }
.envases-flecha:not([hidden]) { display: -webkit-box; display: -webkit-flex; display: flex; }
.envases-flecha { position: absolute; top: 40%; z-index: 2; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; padding: 0;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  border: 1px solid #e8e9ec; border: 1px solid var(--borde); border-radius: 50%; background: #ffffff; background: rgba(255, 255, 255, 0.92); color: #17181c; color: var(--tinta);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(23, 24, 28, 0.12);
  -webkit-tap-highlight-color: transparent; transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.15s ease; }
.envases-anterior { left: 0.25rem; }
.envases-siguiente { right: 0.25rem; }
.envases-flecha:disabled { opacity: 0.3; cursor: default; }
.envases-flecha:active:not(:disabled) { -webkit-transform: scale(0.94); transform: scale(0.94); }
@media (pointer: coarse) { .envases-flecha { width: 2.75rem; width: var(--objetivo); height: 2.75rem; height: var(--objetivo); margin-top: -1.375rem; } }   /* 44 px al dedo */
/* En el celular, a los lados de la foto y no encima: tapaban la mitad del envase y frenaban el dedo (2026-10-23). Caben en el
   margen de la columna (sin desplazamiento horizontal a 320 px). */
@media (max-width: 599.98px) {
  .envases-anterior { left: -3.25rem; }
  .envases-siguiente { right: -3.25rem; }
}
@media (prefers-reduced-motion: reduce) { .envases-flecha:active:not(:disabled) { -webkit-transform: none; transform: none; } }

/* 55. Televisor expositivo (2026-10-22, pedido del usuario: «la versión de TV tiene que ser expositiva, sin abrir links
   externos ni archivos»): la ficha muestra en la página lo que trae el PDF (aplicaciones, beneficios, especificaciones y
   valores típicos, bloques .solo-tv) y no ofrece botones que abren PDF; las cartas quedan como texto (main.js,
   initTvExpositiva, les quita el foco). En computadora y celular, la ficha compacta con sus PDF, como siempre. */
.solo-tv { display: none; }
html.tv .solo-tv { display: block; }
@media (min-width: 900px) and (max-height: 600px) and (hover: none) { .solo-tv { display: block; } }
@media print { .solo-tv { display: none !important; } }
html.tv .ficha-info .acciones .documento-boton, html.tv .ficha-info .acciones .documentos-menu, html.tv .ficha-anteriores,
html.tv .producto-pdf { display: none; }
html.tv .ficha-info .acciones > .boton { -webkit-flex-basis: auto; flex-basis: auto; }
html.tv a.etiqueta-carta, html.tv a.etiqueta-sello { pointer-events: none; }
html.tv .etiqueta-carta > svg, html.tv .etiqueta-sello > svg { display: none; }

/* Propuesta en PDF (generado por build/generar.py, css_calc_pdf: las reglas de impresión de la calculadora bajo .calc-pdf). */
.calc-pdf .calc-form, .calc-pdf .calc-acciones, .calc-pdf .calc-cabecera, .calc-pdf .calc-aviso, .calc-pdf .cta-acciones .boton-verde { display: none !important; }
.calc-pdf .calculadora { display: block; }
.calc-pdf .calculadora { position: relative; border: 0; box-shadow: none; border-radius: 0; font-size: 9.5pt; line-height: 1.28; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.calc-pdf .calc-impresion-cabecera, .calc-pdf .calc-pie-impresion { display: block; }
.calc-pdf .calc-cuerpo { display: block; padding: 0; }
.calc-pdf .calc-volver { display: none !important; }
.calc-pdf .calc-impresion-cabecera-fila { position: relative; z-index: 1; display: grid; grid-template-columns: 34mm minmax(0, 1fr) 34mm; align-items: center; gap: 4mm; padding: 0 8mm 2.5mm 0; border-bottom: 1px solid #999999; }
.calc-pdf .calc-logo-oilsuper { width: 34mm; height: auto; }
.calc-pdf .calc-impresion-titulo { margin: 0; text-align: center; font-size: 13.5pt; font-weight: 900; line-height: 1.15; }
.calc-pdf .calc-impresion-derecha { display: grid; justify-items: end; gap: 1mm; padding-right: 2mm; }
.calc-pdf .calc-logo-impresion { width: 17mm; height: auto; }
.calc-pdf .calc-impresion-fecha { font-size: 7.5pt; color: #333333; text-align: right; white-space: nowrap; }
.calc-pdf .calc-resultado { position: relative; z-index: 1; border: 0; background: transparent; padding: 3mm 0 0; font-size: 9.5pt; }
.calc-pdf .calc-impresion { display: block; margin: 0 0 3mm; font-size: 8.5pt; break-inside: avoid; }
.calc-pdf .calc-impresion-nota { margin: 0; color: #333333; }
.calc-pdf .calc-impresion-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6mm; margin: 2mm 0 0; }
.calc-pdf .calc-impresion-datos div { display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; padding: 0.6mm 0; border-bottom: 1px dotted #999999; }
.calc-pdf .calc-impresion-datos dt { font-weight: 400; color: #333333; }
.calc-pdf .calc-impresion-datos dd { margin: 0; font-weight: 700; white-space: nowrap; }
.calc-pdf .calc-tarjetas { grid-template-columns: 2fr 1fr 1fr; gap: 3mm; break-inside: avoid; }
.calc-pdf .calc-tarjeta { padding: 2.5mm 3.5mm; background: transparent; border: 1px solid #bbbbbb; border-radius: 2mm; }
.calc-pdf .calc-tarjeta-principal { grid-column: auto; background: transparent; color: #000000; border: 2px solid #15803d; }
.calc-pdf .calc-tarjeta-principal .calc-tarjeta-rotulo { color: #333333; }
.calc-pdf .calc-tarjeta-rotulo { font-size: 8pt; }
.calc-pdf .calc-tarjeta strong { font-size: 13pt; }
.calc-pdf .calc-tarjeta-principal strong { font-size: 19pt; color: #166534; }
.calc-pdf .calc-resultado .tabla-contenedor { margin-top: 3mm; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.calc-pdf .calc-tabla { font-size: 9pt; background: transparent; }
.calc-pdf .calc-tabla th, .calc-pdf .calc-tabla td { padding: 1.4mm 2mm; border-bottom: 1px solid #cccccc; }
.calc-pdf .calc-tabla thead { display: table-header-group; }
.calc-pdf .calc-tabla thead th { background: transparent; font-size: 7.5pt; border-bottom: 1px solid #999999; }
.calc-pdf .calc-tabla tr { break-inside: avoid; }
.calc-pdf .calc-tabla td:last-child, .calc-pdf .calc-tabla tfoot td:last-child { background: transparent; }
.calc-pdf .calc-kpi-titulo { margin: 3mm 0 1.5mm; font-size: 10.5pt; break-after: avoid; }
.calc-pdf .calc-kpis { grid-template-columns: minmax(0, 1fr); gap: 0; break-inside: avoid; }
.calc-pdf .calc-kpis li { font-size: 8.5pt; padding: 1mm 0; border-bottom: 1px solid #dddddd; }
.calc-pdf .calc-kpi-nombre { flex: 1 1 24mm; }
.calc-pdf .calc-argumento { margin-top: 3mm; font-size: 9pt; color: #222222; break-inside: avoid; }
.calc-pdf .calc-resultado .nota { margin: 2mm 0 0; font-size: 7.5pt; color: #555555; max-width: none; }
.calc-pdf .calc-marca-agua { display: block; position: fixed; left: 50%; top: 50%; width: 175mm; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.16; z-index: 0; }
.calc-pdf .calc-pie-fila { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 6mm; margin-top: 4mm; font-size: 8pt; color: #333333; padding-top: 1.5mm; border-top: 1px solid #999999; break-inside: avoid; }