/* =============================================================
   AspiradoraLab — SISTEMA VISUAL v2 (prototipo AISLADO)
   =============================================================
   Se carga SOLO en 5 páginas de prueba, que llevan
   <body data-lab="v2">:
     - producto-bosch-bgs41pow1.html          (ficha de producto)
     - categorias.html                        (hub de orientación)
     - categoria-aspiradoras-sin-cable.html   (categoría editorial)
     - index.html                             (home: guías, categorías, metodología)
     - guias.html                             (índice de guías)

   Aislamiento: TODO selector va prefijado por body[data-lab="v2"].
   Sin ese atributo en el <body> ninguna regla puede aplicarse,
   aunque el archivo se enlace por error o aunque una clase comparta
   nombre con las otras 44+ URLs. Es la frontera real, no el nombre
   del archivo.

   En estas 5 páginas este archivo SUSTITUYE a los dos prototipos
   anteriores (aspiradoralab-visual-prototype.css / data-proto="visual"
   y aspiradoralab-icons-prototype.css / data-icons="proto"), y absorbe
   lo que de ellos se aprobó (nodo, kicker, raíles, numeración,
   familia-con-anillo / caso-sin-anillo). Esos dos archivos siguen
   intactos para categoria-aspiradoras-alfombras.html y
   aspiradora-arena-gato.html hasta la globalización.

   No se toca: header, footer, buscador, comparador, recomendador,
   radar (svg de buildRadarSVG), CTA/copy comercial (.btn y el HTML
   que inyecta main.js), tracking, schema, contenido editorial.
   Solo CSS + wrappers/clases en el HTML de las 5 páginas.

   -------------------------------------------------------------
   PRINCIPIO: tres niveles de superficie y cinco elementos que se
   repiten con intención. Nada más.

   NIVEL A — BASE (var(--bg)): fondo respirable; prosa y lectura.
   NIVEL B — BANDEJA (.lab-tray): tinte real de marca (7% teal sobre
             el fondo) delimitado por líneas de precisión; agrupa
             decisiones y evidencia. Lo que va DENTRO de una bandeja
             pierde su chrome de tarjeta (sin sombra, borde fino):
             objetos sobre una bandeja, no tarjetas sobre tarjetas.
   NIVEL C — PLACA (.lab-plate): bloque oscuro teal-tinta, UNA vez
             por página, para el momento de decisión. Es la geometría
             del propio logo (cuadrado oscuro + anillo teal) llevada a
             una superficie de interfaz: por eso lleva el anillo como
             marca de agua.

   LOS 5 ELEMENTOS DE IDENTIDAD
   1. Nodo      (.lab-node, h2::before): anillo + punto = el logo.
   2. Regla     (.lab-tray/.lab-plate ::before): línea + marcas de
                precisión cada 32px. Señala "aquí empieza una zona
                de decisión/evidencia".
   3. Raíl      (border-left 3–4px): sí / no / aviso. Ya aprobado.
   4. Numeración técnica (Space Grotesk, 01 02 03): secciones,
                grupos de ficha, problemas, guías.
   5. Anillo / cuadrado: anillo = humano/problema/guía (editorial);
                cuadrado = tecnología/herramienta (producto).
   ============================================================= */

body[data-lab="v2"] {
  /* Superficie B — tinte real de marca (visible, no cosmético). */
  --lab-tint:        color-mix(in srgb, var(--accent) 7%, var(--bg));
  --lab-tint-2:      color-mix(in srgb, var(--accent) 12%, var(--bg));
  /* Líneas de precisión: dos pesos, ambas con toque de marca. */
  --lab-line:        color-mix(in srgb, var(--accent) 26%, var(--border));
  --lab-line-2:      color-mix(in srgb, var(--accent-dark) 55%, var(--border));
  /* Superficie C — placa. Teal-tinta profundo, derivado del fondo
     del propio favicon (#0d1a20) girado hacia el teal. Los tokens
     de tinta/acento sobre placa son los del modo oscuro ya
     existentes en styles.css: no se inventa una paleta nueva. */
  /* Numeración técnica: --ink-faint (#7b8785) daba ~3.9:1 sobre blanco a
     11–12px; este tono llega a ~5:1 y conserva el aire "faint". */
  --lab-num-ink:     color-mix(in srgb, var(--ink-faint) 78%, var(--ink));
  --lab-plate:       #0e2624;
  --lab-plate-2:     #143432;
  --lab-plate-line:  rgba(47, 214, 198, .28);
  --lab-plate-ink:   #eef7f4;
  --lab-plate-ink-soft: #b7c9c5;
  --lab-plate-accent: #2fd6c6;
  --lab-plate-accent-ink: #06201d;

  /* Halo de marca: lavado radial en la esquina superior, como
     background del body (cero riesgo de layout/overflow). */
  background-color: var(--bg);
  background-image: radial-gradient(60% 38% at 82% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%);
  background-repeat: no-repeat;
}
[data-theme="dark"] body[data-lab="v2"] {
  --lab-plate: #0f2f2c; --lab-plate-2: #164140; --lab-plate-line: rgba(47, 214, 198, .38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-lab="v2"] {
    --lab-plate: #0f2f2c; --lab-plate-2: #164140; --lab-plate-line: rgba(47, 214, 198, .38);
  }
}

/* -------------------------------------------------------------
   1. NODO — anillo + punto, la geometría del favicon a 14px.
   Decorativo (aria-hidden), siempre junto a texto real.
   ------------------------------------------------------------- */
body[data-lab="v2"] .lab-node {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--accent-dark);
  background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .lab-node.is-sm { width: 11px; height: 11px; border-width: 1.6px; }

/* Kicker técnico: reutiliza .eyebrow (ya trae inline-flex + gap). */
body[data-lab="v2"] .lab-kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
body[data-lab="v2"] .lab-kicker::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor;
  background: radial-gradient(circle, currentColor 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .pv-kicker-row { margin: 0 0 .6rem; }

/* -------------------------------------------------------------
   2. REGLA de precisión — 1px de línea + marcas cada 32px.
   Se dibuja con gradientes en un ::before, sin imágenes.
   ------------------------------------------------------------- */
body[data-lab="v2"] .lab-tray,
body[data-lab="v2"] .lab-plate { position: relative; }
body[data-lab="v2"] .lab-tray::before,
body[data-lab="v2"] .lab-plate::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background:
    linear-gradient(var(--lab-line-2), var(--lab-line-2)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lab-line-2) 0 1px, transparent 1px 32px) 0 0 / 100% 6px no-repeat;
}
body[data-lab="v2"] .lab-plate::before {
  background:
    linear-gradient(var(--lab-plate-line), var(--lab-plate-line)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lab-plate-line) 0 1px, transparent 1px 32px) 0 0 / 100% 6px no-repeat;
}

/* -------------------------------------------------------------
   NIVEL B — BANDEJA
   ------------------------------------------------------------- */
body[data-lab="v2"] .lab-tray {
  background: var(--lab-tint);
  border-top: 1px solid var(--lab-line); border-bottom: 1px solid var(--lab-line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
/* Bandeja a sangre completa desde dentro de un .container: el fondo
   se extiende con box-shadow (no cambia el layout, no puede crear
   overflow) y se recorta arriba/abajo con clip-path. Las líneas de
   borde se prolongan con los pseudo-elementos. */
body[data-lab="v2"] .lab-tray.is-bleed {
  border-top: 0; border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--lab-tint);
  clip-path: inset(0 -100vmax);
  margin-block: 1.4rem;
}
body[data-lab="v2"] .lab-tray.is-bleed::before { left: -100vmax; right: -100vmax; }
body[data-lab="v2"] .lab-tray.is-bleed::after {
  content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: var(--lab-line);
}
/* Bandeja en caja (con radio), para bloques cortos dentro de A. */
body[data-lab="v2"] .lab-tray.is-box {
  border: 1px solid var(--lab-line); border-radius: var(--radius-l); padding: 1.4rem 1.5rem 1.5rem; overflow: hidden;
}
body[data-lab="v2"] .lab-tray.is-box::before { left: 0; right: 0; }

/* Objetos sobre bandeja: tarjetas SIN sombra, borde fino de marca. */
body[data-lab="v2"] .lab-tray .card,
body[data-lab="v2"] .lab-tray .tool-card,
body[data-lab="v2"] .lab-tray .problem-family,
body[data-lab="v2"] .lab-tray .shortlist-item {
  box-shadow: none; border-color: var(--lab-line); background: var(--surface);
}
body[data-lab="v2"] .lab-tray .card:hover,
body[data-lab="v2"] .lab-tray .tool-card:hover { box-shadow: none; transform: none; border-color: var(--accent-dark); }

/* -------------------------------------------------------------
   NIVEL C — PLACA
   ------------------------------------------------------------- */
body[data-lab="v2"] .lab-plate {
  background: var(--lab-plate); color: var(--lab-plate-ink);
  border: 1px solid var(--lab-plate-line); border-radius: var(--radius-l);
  padding: 1.5rem 1.5rem 1.6rem; overflow: hidden; isolation: isolate;
}
/* Anillo del logo como marca de agua: la señal más reconocible de la
   marca, en la superficie más fuerte, siempre en la misma esquina.
   Zona segura (2026-09-22): con 3 datos rápidos a ancho completo
   (Dyson, Estado A) el último valor tocaba el borde del anillo
   (medido: -1px de margen real). Corrección a nivel de componente
   maestro, no una excepción de producto: se desplaza el anillo 20px
   más hacia la esquina (mismo tamaño, misma opacidad) en vez de
   reducir el dato o la placa. Resultado medido: ~20px de margen en
   Dyson; en Kärcher (4 datos, placa más estrecha) el margen ya era
   mayor y sigue siéndolo tras el ajuste — sin regresión. */
body[data-lab="v2"] .lab-plate::after {
  content: ""; position: absolute; right: -92px; top: -92px; width: 220px; height: 220px; border-radius: 50%;
  border: 2px solid var(--lab-plate-line); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--lab-plate-accent) 9%, transparent) 0 22%, transparent 23% 100%);
}
body[data-lab="v2"] .lab-plate > * { position: relative; z-index: 1; }
body[data-lab="v2"] .lab-plate h1,
body[data-lab="v2"] .lab-plate h2,
body[data-lab="v2"] .lab-plate h3,
body[data-lab="v2"] .lab-plate h4,
body[data-lab="v2"] .lab-plate strong,
body[data-lab="v2"] .lab-plate b { color: var(--lab-plate-ink); }
body[data-lab="v2"] .lab-plate p,
body[data-lab="v2"] .lab-plate li,
body[data-lab="v2"] .lab-plate span { color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .lab-plate .eyebrow,
body[data-lab="v2"] .lab-plate .lab-kicker { color: var(--lab-plate-accent); }
body[data-lab="v2"] .lab-plate .lab-node {
  border-color: var(--lab-plate-accent);
  background: radial-gradient(circle, var(--lab-plate-accent) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .lab-plate a:not(.btn) {
  color: var(--lab-plate-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lab-plate-accent) 45%, transparent);
  text-underline-offset: 2px;
}
body[data-lab="v2"] .lab-plate a:not(.btn):hover { text-decoration-color: currentColor; }
/* CTA sobre placa: el botón (.btn) NO cambia de HTML ni de copy, solo
   de color de superficie: teal vivo con tinta oscura (~10:1), en vez
   del teal oscuro que desaparecería sobre la placa. El teal sigue
   significando "acción". */
body[data-lab="v2"] .lab-plate .btn-primary,
body[data-lab="v2"] .lab-plate .btn-primary:hover { background: var(--lab-plate-accent); color: var(--lab-plate-accent-ink); box-shadow: none; }
body[data-lab="v2"] .lab-plate .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
body[data-lab="v2"] .lab-plate .btn-primary.is-disabled { background: var(--lab-plate-2); color: var(--lab-plate-ink-soft); opacity: 1; }
body[data-lab="v2"] .lab-plate .btn-secondary {
  background: transparent; color: var(--lab-plate-ink); border-color: color-mix(in srgb, var(--lab-plate-accent) 45%, transparent);
}
body[data-lab="v2"] .lab-plate .btn-secondary:hover { border-color: var(--lab-plate-accent); color: var(--lab-plate-accent); }
body[data-lab="v2"] .lab-plate .btn-secondary span { color: inherit; }
body[data-lab="v2"] .lab-plate .affiliate-tag { color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .lab-plate .badge-accent { background: color-mix(in srgb, var(--lab-plate-accent) 16%, transparent); color: var(--lab-plate-accent); }

/* -------------------------------------------------------------
   4. NUMERACIÓN técnica y cabeceras de sección
   ------------------------------------------------------------- */
body[data-lab="v2"] .lab-num {
  font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--lab-num-ink);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   5. ANILLO (editorial / humano) y CUADRADO (tecnología / herramienta)
   ------------------------------------------------------------- */
body[data-lab="v2"] .icon-family,
body[data-lab="v2"] .icon-guide {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--accent-dark); color: var(--accent-dark);
}
body[data-lab="v2"] .icon-family svg,
body[data-lab="v2"] .icon-guide svg { width: 26px; height: 26px; }
body[data-lab="v2"] .icon-guide { width: 46px; height: 46px; }
body[data-lab="v2"] .icon-guide svg { width: 23px; height: 23px; }
body[data-lab="v2"] .icon-case {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
}
body[data-lab="v2"] .icon-case svg { width: 16px; height: 16px; }
body[data-lab="v2"] .icon-type {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--lab-tint-2); color: var(--accent-dark);
}
body[data-lab="v2"] .icon-type svg { width: 22px; height: 22px; }

/* =============================================================
   COMPONENTE: rejilla de TIPOS (categorias.html + index.html)
   Ocho tecnologías como "índice", no como ocho tarjetas: celdas
   separadas por líneas de 1px (el color de la rejilla es la línea
   de precisión), sin sombra, con icono propio y referencia 01–08.
   ============================================================= */
body[data-lab="v2"] .category-grid {
  gap: 1px; background: var(--lab-line); border: 1px solid var(--lab-line);
  border-radius: var(--radius-l); overflow: hidden; counter-reset: lab-type;
}
body[data-lab="v2"] .category-card {
  border: 0; border-radius: 0; box-shadow: none; background: var(--surface);
  padding: 1.25rem 1.15rem 1.3rem; position: relative; counter-increment: lab-type;
  transition: background .2s var(--ease-out);
}
body[data-lab="v2"] .category-card:hover { transform: none; box-shadow: none; background: var(--lab-tint); }
body[data-lab="v2"] .category-card::before {
  content: counter(lab-type, decimal-leading-zero); position: absolute; top: 1rem; right: 1.05rem;
  font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--lab-num-ink);
}
body[data-lab="v2"] .category-card .icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--lab-tint-2); color: var(--accent-dark);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
body[data-lab="v2"] .category-card .icon svg { width: 22px; height: 22px; }
body[data-lab="v2"] .category-card:hover .icon { background: var(--accent-dark); color: var(--accent-ink); }
body[data-lab="v2"] .category-card h3 { font-size: .98rem; }

/* =============================================================
   COMPONENTE: familias de PROBLEMA (categorias.html)
   Heredado del prototipo de iconos: cabecera clicable con anillo +
   casos como chips dentro de la misma tarjeta. Aquí la sección
   entera es una bandeja (nivel B) y las familias son objetos
   blancos sobre ella.
   ============================================================= */
body[data-lab="v2"] .hub-problem-section {
  background: var(--lab-tint); border-top: 1px solid var(--lab-line); border-bottom: 1px solid var(--lab-line); position: relative;
}
body[data-lab="v2"] .hub-problem-section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background:
    linear-gradient(var(--lab-line-2), var(--lab-line-2)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lab-line-2) 0 1px, transparent 1px 32px) 0 0 / 100% 6px no-repeat;
}
body[data-lab="v2"] .problem-family-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { body[data-lab="v2"] .problem-family-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
body[data-lab="v2"] .problem-family {
  background: var(--surface); border: 1px solid var(--lab-line); border-radius: var(--radius-l);
  padding: 1.3rem 1.4rem; scroll-margin-top: calc(var(--header-h) + 1rem);
}
body[data-lab="v2"] .problem-family-head { display: flex; gap: 1rem; align-items: flex-start; text-align: left; }
body[data-lab="v2"] .problem-family-head h3 { font-size: 1.05rem; margin-bottom: .25rem; transition: color .2s var(--ease-out); }
body[data-lab="v2"] .problem-family-head:hover h3 { color: var(--accent-dark); }
body[data-lab="v2"] .problem-family-head .desc { font-size: .86rem; color: var(--ink-soft); }
body[data-lab="v2"] .problem-cases {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--lab-line);
}
body[data-lab="v2"] .problem-case {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .35rem .35rem; border-radius: 999px;
  background: var(--lab-tint); font-size: .84rem; font-weight: 600; color: var(--ink);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
body[data-lab="v2"] .problem-case:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* Placa de cierre (CTA final de categorias.html) */
body[data-lab="v2"] .lab-plate.is-cta { text-align: center; padding: 2.2rem 1.5rem 2.4rem; }
body[data-lab="v2"] .lab-plate.is-cta p { font-size: 1.05rem; margin-bottom: 1.2rem; }
body[data-lab="v2"] .lab-plate.is-cta .section-foot { margin-top: 0; }

/* =============================================================
   COMPONENTE: menú de problemas (sin-cable, "¿Qué te preocupa?")
   Siete entradas como panel de decisión: una lista en dos
   columnas con líneas de 1px, anillo por problema y referencia
   01–07. Rompe el "tarjeta-tarjeta-tarjeta" del grid original.
   ============================================================= */
body[data-lab="v2"] .lab-menu {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--lab-line); border: 1px solid var(--lab-line); border-radius: var(--radius-l); overflow: hidden;
  counter-reset: lab-menu;
}
@media (min-width: 720px) { body[data-lab="v2"] .lab-menu { grid-template-columns: repeat(2, 1fr); } }
body[data-lab="v2"] .lab-menu .tool-card {
  border: 0; border-radius: 0; box-shadow: none; background: var(--surface);
  padding: 1.15rem 3rem 1.2rem 1.2rem; gap: 1rem; position: relative; counter-increment: lab-menu;
  transition: background .2s var(--ease-out);
}
body[data-lab="v2"] .lab-menu .tool-card:hover { transform: none; box-shadow: none; background: var(--lab-tint); }
/* El 7.º elemento ocupa las dos columnas para que la rejilla no deje
   una celda vacía del color de la línea. */
@media (min-width: 720px) { body[data-lab="v2"] .lab-menu .tool-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
body[data-lab="v2"] .lab-menu .tool-card::after {
  content: counter(lab-menu, decimal-leading-zero); position: absolute; top: 1.1rem; right: 1.1rem;
  font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--lab-num-ink);
}
body[data-lab="v2"] .lab-menu .tool-card .icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--surface);
  border: 1.5px solid var(--accent-dark); color: var(--accent-dark);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
body[data-lab="v2"] .lab-menu .tool-card .icon svg { width: 23px; height: 23px; }
body[data-lab="v2"] .lab-menu .tool-card:hover .icon { background: var(--accent-dark); color: var(--accent-ink); }
body[data-lab="v2"] .lab-menu .tool-card h3 { font-size: 1.02rem; margin-bottom: .3rem; }
body[data-lab="v2"] .lab-menu .tool-card p { margin-bottom: 0; font-size: .9rem; }
body[data-lab="v2"] .lab-menu-section > h2 { display: flex; align-items: center; gap: .7rem; }
body[data-lab="v2"] .lab-menu-section > h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--accent-dark);
  background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}

/* =============================================================
   COMPONENTE: sección de PROBLEMA con raíl-icono (sin-cable)
   Cada respuesta lleva a la izquierda el mismo anillo que en el
   menú (repetición = reconocimiento), su número y una línea
   vertical que recorre toda la sección: el raíl como elemento de
   marca, con el icono de nodo. Composición asimétrica controlada.
   ============================================================= */
body[data-lab="v2"] .lab-problems { counter-reset: lab-prob; }
body[data-lab="v2"] .lab-problem {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 1rem; row-gap: 0;
  counter-increment: lab-prob;
}
@media (min-width: 860px) { body[data-lab="v2"] .lab-problem { grid-template-columns: 52px 1fr; column-gap: 1.4rem; } }
body[data-lab="v2"] .lab-problem > :not(.lab-mark) { grid-column: 2; min-width: 0; }
body[data-lab="v2"] .lab-mark {
  grid-column: 1; grid-row: 1 / span 12; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
body[data-lab="v2"] .lab-mark svg {
  order: 1; width: 40px; height: 40px; padding: 8px; border-radius: 50%; flex: none;
  background: var(--surface); border: 1.5px solid var(--accent-dark); color: var(--accent-dark);
}
@media (min-width: 860px) { body[data-lab="v2"] .lab-mark svg { width: 52px; height: 52px; padding: 12px; } }
body[data-lab="v2"] .lab-mark::before {
  content: counter(lab-prob, decimal-leading-zero); order: 2;
  font-family: var(--display); font-weight: 500; font-size: .72rem; letter-spacing: .1em; color: var(--lab-num-ink);
}
body[data-lab="v2"] .lab-problem.is-extra .lab-mark::before { content: none; }
body[data-lab="v2"] .lab-problem.is-extra { counter-increment: none; }
body[data-lab="v2"] .lab-mark::after { content: ""; order: 3; flex: 1; width: 1px; min-height: 1rem; background: var(--lab-line-2); }
body[data-lab="v2"] .lab-problem > h2 { margin-top: .35rem; }
body[data-lab="v2"] .lab-problem .ideal-para { border-left-color: var(--accent-dark); background: var(--surface); border: 1px solid var(--lab-line); border-left: 3px solid var(--accent-dark); }
body[data-lab="v2"] .lab-problem .no-recomendado { background: var(--surface); border: 1px solid var(--lab-line); border-left: 3px solid var(--ink-faint); }

/* Placa de veredicto (sin-cable, "Los 5, en una frase") */
body[data-lab="v2"] .lab-plate.is-verdict { padding: 1.8rem 1.6rem 1.9rem; }
@media (min-width: 720px) { body[data-lab="v2"] .lab-plate.is-verdict { padding: 2.2rem 2.4rem 2.4rem; } }
body[data-lab="v2"] .lab-plate.is-verdict h2 { display: flex; align-items: center; gap: .7rem; font-size: 1.3rem; margin-bottom: 1.4rem; }
body[data-lab="v2"] .lab-plate.is-verdict h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--lab-plate-accent);
  background: radial-gradient(circle, var(--lab-plate-accent) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .lab-plate.is-verdict .editorial-cuerpo { max-width: none; color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .lab-plate.is-verdict ul { display: grid; gap: 0; padding: 0; counter-reset: lab-verdict; }
body[data-lab="v2"] .lab-plate.is-verdict li {
  position: relative; padding: .95rem 0 .95rem 3rem; border-top: 1px solid var(--lab-plate-line);
  font-size: .96rem; line-height: 1.6; color: var(--lab-plate-ink-soft); counter-increment: lab-verdict;
}
body[data-lab="v2"] .lab-plate.is-verdict li:last-child { border-bottom: 1px solid var(--lab-plate-line); }
body[data-lab="v2"] .lab-plate.is-verdict li::before {
  content: counter(lab-verdict, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem;
  font-family: var(--display); font-weight: 500; font-size: .78rem; letter-spacing: .1em; color: var(--lab-plate-accent);
}
body[data-lab="v2"] .lab-plate.is-verdict li strong { color: var(--lab-plate-ink); }
body[data-lab="v2"] .lab-plate.is-verdict li strong a { color: var(--lab-plate-ink); text-decoration-color: var(--lab-plate-line); }
body[data-lab="v2"] .lab-plate.is-verdict li strong a:hover { color: var(--lab-plate-accent); }

/* Límites (aviso) — raíl ámbar, ya usado en frontier/disclosure. */
body[data-lab="v2"] .lab-limits { border-left: 3px solid var(--gold); padding-left: 1.2rem; }
body[data-lab="v2"] .lab-limits h2 { color: var(--ink); }

/* Cabeceras de sección con nodo en las categorías editoriales */
body[data-lab="v2"] .lab-h2 { display: flex; align-items: center; gap: .7rem; }
body[data-lab="v2"] .lab-h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--accent-dark);
  background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}

/* =============================================================
   COMPONENTE: entradas de GUÍA (index.html, guias.html)
   Un icono de FUNCIÓN (qué hace la guía) o de PROBLEMA (qué
   necesidad resuelve), en anillo, + kicker de familia + título.
   Lista con líneas de 1px, no tarjetas.
   ============================================================= */
body[data-lab="v2"] .lab-guide-list { display: grid; grid-template-columns: 1fr; gap: 0 2.6rem; border-bottom: 1px solid var(--lab-line-2); }
@media (min-width: 720px) { body[data-lab="v2"] .lab-guide-list { grid-template-columns: repeat(2, 1fr); } }
body[data-lab="v2"] .lab-guide {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 0 1.3rem;
  border-top: 1px solid var(--lab-line-2); border-radius: 0; background: transparent; box-shadow: none; border-left: 0; border-right: 0; border-bottom: 0;
  transition: none;
}
body[data-lab="v2"] .lab-guide:hover { transform: none; box-shadow: none; }
body[data-lab="v2"] .lab-tray .tool-card.lab-guide,
body[data-lab="v2"] .lab-tray .tool-card.lab-guide:hover { background: transparent; border-color: var(--lab-line-2); border-left: 0; border-right: 0; border-bottom: 0; }
body[data-lab="v2"] .lab-guide:hover h3 { color: var(--accent-dark); }
body[data-lab="v2"] .lab-guide .lab-kicker { margin-bottom: .35rem; }
body[data-lab="v2"] .lab-guide h3 { font-size: 1.05rem; margin-bottom: .35rem; transition: color .2s var(--ease-out); }
body[data-lab="v2"] .lab-guide p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
body[data-lab="v2"] .lab-guide .icon-guide { transition: background .2s var(--ease-out), color .2s var(--ease-out); }
body[data-lab="v2"] .lab-guide:hover .icon-guide { background: var(--accent-dark); color: var(--accent-ink); }

/* Índice de guías (guias.html): rango · anillo · texto · familia */
body[data-lab="v2"] .lab-guide-index { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid var(--lab-line-2); margin-block: 1.4rem; }
body[data-lab="v2"] .lab-guide-index .shortlist-item {
  display: grid; grid-template-columns: 2.4ch 46px 1fr; gap: .4rem 1rem; align-items: start;
  border: 0; border-top: 1px solid var(--lab-line-2); border-radius: 0; background: transparent; padding: 1.1rem .2rem 1.2rem;
}
@media (min-width: 720px) { body[data-lab="v2"] .lab-guide-index .shortlist-item { grid-template-columns: 2.4ch 46px 1fr auto; } }
body[data-lab="v2"] .lab-guide-index .shortlist-item .rank { font-size: .8rem; font-weight: 500; letter-spacing: .1em; color: var(--lab-num-ink); width: auto; padding-top: .9rem; }
body[data-lab="v2"] .lab-guide-index .shortlist-item strong { display: block; font-family: var(--display); font-size: 1.05rem; line-height: 1.25; transition: color .2s var(--ease-out); }
body[data-lab="v2"] .lab-guide-index .shortlist-item:hover strong { color: var(--accent-dark); }
body[data-lab="v2"] .lab-guide-index .shortlist-item .lab-kicker { grid-column: 2 / -1; align-self: start; }
@media (min-width: 720px) { body[data-lab="v2"] .lab-guide-index .shortlist-item .lab-kicker { grid-column: 4; padding-top: .95rem; white-space: nowrap; } }
body[data-lab="v2"] .lab-guide-index .shortlist-item .icon-guide { transition: background .2s var(--ease-out), color .2s var(--ease-out); }
body[data-lab="v2"] .lab-guide-index .shortlist-item:hover .icon-guide { background: var(--accent-dark); color: var(--accent-ink); }

/* Leyenda del vocabulario visual (guias.html) */
body[data-lab="v2"] .lab-legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: -.6rem 0 1.6rem; }
/* Solo el <span> de etiqueta es flex; el anillo interior (.icon-case) debe
   seguir siendo grid centrado — antes esta regla lo alcanzaba y dejaba el
   icono 5px a la izquierda. */
body[data-lab="v2"] .lab-legend > span { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
body[data-lab="v2"] .lab-legend .icon-case { display: grid; place-items: center; width: 26px; height: 26px; background: var(--surface); border: 1.5px solid var(--accent-dark); }
body[data-lab="v2"] .lab-legend .icon-case svg { width: 14px; height: 14px; }

/* Bandeja de rankings (guias.html) */
body[data-lab="v2"] .lab-tray.is-box .section-head { margin-bottom: 1rem; }
body[data-lab="v2"] .lab-tray.is-box .shortlist-item {
  display: grid; grid-template-columns: 2.4ch 46px 1fr; gap: .4rem 1rem; align-items: start;
  border-radius: var(--radius-m); padding: 1rem 1.1rem 1.1rem;
}
@media (min-width: 720px) { body[data-lab="v2"] .lab-tray.is-box .shortlist-item { grid-template-columns: 2.4ch 46px 1fr auto; } }
body[data-lab="v2"] .lab-tray.is-box .shortlist-item .rank { color: var(--gold); font-size: 1.1rem; width: auto; padding-top: .55rem; }
body[data-lab="v2"] .lab-tray.is-box .shortlist-item strong { display: block; font-family: var(--display); font-size: 1.05rem; line-height: 1.25; }
body[data-lab="v2"] .lab-tray.is-box .shortlist-item .lab-kicker { grid-column: 2 / -1; }
@media (min-width: 720px) { body[data-lab="v2"] .lab-tray.is-box .shortlist-item .lab-kicker { grid-column: 4; padding-top: .95rem; white-space: nowrap; } }
/* En la home la bandeja de guías conserva el aire de .section */
body[data-lab="v2"] .lab-tray.section { padding-block: clamp(3rem, 6vw, 5rem); }

/* =============================================================
   HOME (index.html) — metodología como placa, guías como bandeja
   ============================================================= */
body[data-lab="v2"] .how-we-choose { background: transparent; border: 0; padding-block: clamp(1rem, 2vw, 1.6rem); }
/* La placa es el .container interior (objeto con radio, como en las
   demás páginas), alineado con el ancho de contenido del resto. */
body[data-lab="v2"] .how-we-choose .section.container {
  max-width: calc(var(--container) - 2.5rem); background: var(--lab-plate); color: var(--lab-plate-ink);
  border: 1px solid var(--lab-plate-line); border-radius: var(--radius-l);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.3rem, 3vw, 2.6rem); position: relative; overflow: hidden; isolation: isolate;
}
body[data-lab="v2"] .how-we-choose .section.container::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background:
    linear-gradient(var(--lab-plate-line), var(--lab-plate-line)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lab-plate-line) 0 1px, transparent 1px 32px) 0 0 / 100% 6px no-repeat;
}
body[data-lab="v2"] .how-we-choose .section.container::after {
  content: ""; position: absolute; right: -110px; top: -120px; width: 340px; height: 340px; border-radius: 50%;
  border: 2px solid var(--lab-plate-line); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--lab-plate-accent) 8%, transparent) 0 22%, transparent 23% 100%);
}
body[data-lab="v2"] .how-we-choose .section.container > * { position: relative; z-index: 1; }
body[data-lab="v2"] .how-we-choose .eyebrow { color: var(--lab-plate-accent); }
body[data-lab="v2"] .how-we-choose h2,
body[data-lab="v2"] .how-we-choose h4 { color: var(--lab-plate-ink); }
body[data-lab="v2"] .how-we-choose p { color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .how-we-choose .hwc-item { padding-left: 1.1rem; border-left: 1px solid var(--lab-plate-line); }
body[data-lab="v2"] .how-we-choose .hwc-item .num { color: var(--lab-plate-accent); font-weight: 500; letter-spacing: .06em; }

/* Consistencia: toda cabecera de sección (h2) lleva el nodo, esté o no
   sobre bandeja — en la home alternaban con y sin nodo. */
body[data-lab="v2"] .section-head h2 { display: flex; align-items: center; gap: .7rem; }
body[data-lab="v2"] .section-head h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--accent-dark);
  background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .lab-tray .section-foot .btn-secondary { background: var(--surface); border-color: var(--lab-line-2); }

/* =============================================================
   FICHA DE PRODUCTO (producto-bosch-bgs41pow1.html)
   Ritmo: A (cabecera + PLACA) → A (decisión) → B (radar) →
          A (ficha técnica) → A (análisis) → B (bandeja de decisión)
          → A (compradores, fuentes).
   ============================================================= */
@media (min-width: 960px) {
  body[data-lab="v2"] .ficha-top { grid-template-columns: .84fr 1.16fr; gap: 2.8rem; }
}
/* Marco de la imagen: deja de ser un vacío blanco; es una bandeja
   con regla — un "marco de espécimen", y con menos peso visual. */
body[data-lab="v2"] .ficha-img-main {
  background: var(--lab-tint); border-color: var(--lab-line); position: relative;
}
body[data-lab="v2"] .ficha-img-main::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background:
    linear-gradient(var(--lab-line-2), var(--lab-line-2)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lab-line-2) 0 1px, transparent 1px 32px) 0 0 / 100% 6px no-repeat;
}
body[data-lab="v2"] .ficha-img-main img { width: 74%; height: 74%; }

/* La PLACA comercial: precio/nota + CTA + comparador + datos
   rápidos, todo lo que pertenece a la decisión de compra en una
   sola superficie. La caja original (.ficha-precio-box) se convierte
   en .lab-plate en el HTML; aquí solo se anula su estilo previo. */
body[data-lab="v2"] .ficha-precio-box.lab-plate { padding: .85rem 1.2rem .9rem; margin-bottom: 1.4rem; }
body[data-lab="v2"] .ficha-precio-box .ficha-precio-nota { font-size: .78rem; margin: .15rem 0 0; }
body[data-lab="v2"] .ficha-precio-box .ficha-cta { margin-top: .55rem; }
body[data-lab="v2"] .ficha-precio-box .ficha-quicklist {
  margin-top: 0; padding-top: 0; border-top: 0;
  grid-template-columns: 1fr 1fr; gap: .45rem 1.4rem; font-size: .86rem;
}
body[data-lab="v2"] .ficha-precio-box .ficha-quicklist li { border-bottom: 1px dashed var(--lab-plate-line); padding-block: .4rem; }
body[data-lab="v2"] .ficha-precio-box .ficha-quicklist li span { color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .ficha-precio-box .ficha-quicklist b { color: var(--lab-plate-ink); font-family: var(--display); }
@media (max-width: 420px) { body[data-lab="v2"] .ficha-precio-box .ficha-quicklist { grid-template-columns: 1fr; } }
body[data-lab="v2"] .ficha-badges .badge-accent { background: var(--accent-soft); color: var(--accent-dark); }

/* Secciones: línea de marca, nodo delante del h2 y referencia de
   sección (01…) alineada a la derecha, como en una hoja técnica. */
body[data-lab="v2"] .ficha { counter-reset: lab-sec; }
body[data-lab="v2"] .ficha-section { border-top: 1px solid var(--lab-line); padding-block: clamp(2.2rem, 4vw, 3.2rem); counter-increment: lab-sec; }
body[data-lab="v2"] .ficha-section > h2 { display: flex; align-items: center; gap: .7rem; }
body[data-lab="v2"] .ficha-section > h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--accent-dark);
  background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .ficha-section > h2::after {
  content: counter(lab-sec, decimal-leading-zero); margin-left: auto; padding-left: 1rem;
  font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--lab-num-ink);
}
body[data-lab="v2"] .ficha-section.is-quiet { counter-increment: none; }
body[data-lab="v2"] .ficha-section .editorial-cuerpo { font-size: 1.04rem; }
body[data-lab="v2"] .ficha-section .editorial-cuerpo p { line-height: 1.78; }

/* Radar en bandeja: el svg no se toca; solo la superficie alrededor
   y las filas de la leyenda (blancas sobre tinte, sin borde). */
body[data-lab="v2"] .ficha-section.lab-tray { border-top: 0; }
body[data-lab="v2"] .ficha-section.lab-tray > h2::after { color: var(--lab-num-ink); }
body[data-lab="v2"] .lab-tray .radar-legend .row { background: var(--surface); border: 1px solid var(--lab-line); }
body[data-lab="v2"] .lab-tray .radar-note { border-top: 1px dashed var(--lab-line-2); padding-top: .7rem; }

/* Ficha técnica como hoja de datos: cada grupo = fila con su título
   numerado en una columna estrecha y la tabla a la derecha. */
body[data-lab="v2"] .lab-specs { counter-reset: lab-spec; }
body[data-lab="v2"] .spec-group { counter-increment: lab-spec; border-top: 1px solid var(--lab-line); padding-top: 1rem; margin-bottom: 1.4rem; }
body[data-lab="v2"] .spec-group h3 { display: flex; align-items: baseline; gap: .6rem; font-size: .95rem; color: var(--ink); margin-bottom: .6rem; }
body[data-lab="v2"] .spec-group h3::before {
  content: counter(lab-spec, decimal-leading-zero); font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--accent-dark);
}
@media (min-width: 860px) {
  body[data-lab="v2"] .spec-group { display: grid; grid-template-columns: 190px 1fr; column-gap: 2rem; align-items: start; }
  body[data-lab="v2"] .spec-group h3 { flex-direction: column; gap: .35rem; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 1rem); }
}
body[data-lab="v2"] .spec-table th {
  font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  width: 38%;
}
body[data-lab="v2"] .spec-table th, body[data-lab="v2"] .spec-table td { border-bottom-color: color-mix(in srgb, var(--lab-line) 70%, transparent); padding: .6rem .7rem; }
body[data-lab="v2"] .spec-table tr:nth-child(even) th, body[data-lab="v2"] .spec-table tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 3%, transparent); }
body[data-lab="v2"] .specs-extra { border-top: 1px solid var(--lab-line); }
body[data-lab="v2"] .specs-extra summary { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
body[data-lab="v2"] .specs-extra summary::before { content: "+"; font-family: var(--display); font-weight: 500; width: 1.2em; }
body[data-lab="v2"] .specs-extra[open] summary::before { content: "−"; }
body[data-lab="v2"] .specs-extra summary::-webkit-details-marker { display: none; }
body[data-lab="v2"] .specs-extra summary { list-style: none; }

/* Bandeja de decisión (dentro de "Análisis"): ventajas/inconvenientes,
   ideal/no recomendado y audiencia como objetos blancos con raíl
   sobre el tinte. Los lavados verde/rosa se sustituyen por raíles:
   el significado sí/no lo siguen llevando el color del raíl, el
   icono y el texto del propio título. */
body[data-lab="v2"] .lab-decision { padding-block: clamp(1.8rem, 3.5vw, 2.6rem); margin-top: 2rem; }
body[data-lab="v2"] .lab-decision .pros-contras { margin-top: 0; }
body[data-lab="v2"] .lab-decision .pc-col { background: var(--surface); border: 1px solid var(--lab-line); border-radius: var(--radius-m); }
body[data-lab="v2"] .lab-decision .pc-col.pros { border-left: 4px solid var(--ok); }
body[data-lab="v2"] .lab-decision .pc-col.contras { border-left: 4px solid var(--danger); }
body[data-lab="v2"] .lab-decision .pc-col.pros h3 { color: var(--ok); }
body[data-lab="v2"] .lab-decision .pc-col.contras h3 { color: var(--danger); }
body[data-lab="v2"] .lab-decision .pc-col.pros li svg { color: var(--ok); }
body[data-lab="v2"] .lab-decision .pc-col.contras li svg { color: var(--danger); }
body[data-lab="v2"] .lab-decision .ideal-para { background: var(--surface); border: 1px solid var(--lab-line); border-left: 3px solid var(--accent-dark); }
body[data-lab="v2"] .lab-decision .no-recomendado { background: var(--surface); border: 1px solid var(--lab-line); border-left: 3px solid var(--ink-faint); }
body[data-lab="v2"] .lab-decision .audience-grid { counter-reset: lab-aud; }
body[data-lab="v2"] .lab-decision .audience-card {
  counter-increment: lab-aud; background: var(--surface); border: 1px solid var(--lab-line); border-left: 3px solid var(--accent-dark);
}
body[data-lab="v2"] .lab-decision .audience-card h4 { display: flex; align-items: baseline; gap: .5rem; }
body[data-lab="v2"] .lab-decision .audience-card h4::before {
  content: counter(lab-aud, decimal-leading-zero); font-family: var(--display); font-weight: 500; font-size: .72rem; letter-spacing: .1em; color: var(--lab-num-ink);
}

/* Compradores: cita con raíl, sin caja. */
body[data-lab="v2"] .review-summary { background: transparent; border-left: 3px solid var(--lab-line-2); border-radius: 0; padding: .2rem 0 .2rem 1.2rem; max-width: 72ch; }

/* Fuentes: viñetas de nodo. */
body[data-lab="v2"] .lab-sources { padding-left: 0; display: flex; flex-direction: column; gap: .45rem; }
body[data-lab="v2"] .lab-sources li { position: relative; padding-left: 1.4rem; }
body[data-lab="v2"] .lab-sources li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--accent-dark);
  background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .disclosure-box { border-left: 3px solid var(--gold); }

/* Enlaces en prosa: subrayado de marca. */
body[data-lab="v2"] .editorial-cuerpo a,
body[data-lab="v2"] .ideal-para a,
body[data-lab="v2"] .no-recomendado a {
  color: var(--accent-dark); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 2px; font-weight: 600;
}
body[data-lab="v2"] .editorial-cuerpo a:hover,
body[data-lab="v2"] .ideal-para a:hover,
body[data-lab="v2"] .no-recomendado a:hover { text-decoration-color: currentColor; }

/* =============================================================
   HOME — HERO v2: "mapa de decisión"
   =============================================================
   Izquierda: eyebrow, H1, lead corto, acciones, buscador y cuatro
   microseñales (nodo + texto). Derecha: el TABLERO — nivel B en caja
   con regla — donde los seis chips (los mismos botones que lee
   main.js: data-need-chips / .chip / aria-pressed) son los nodos de
   entrada; un bus de precisión los recoge y entra en el nodo de
   decisión (la geometría del favicon); del nodo sale un abanico hacia
   los cinco tipos entre los que se decide. Marcar un chip enciende su
   tramo; con cualquiera marcado se activa nodo, abanico y tipos.
   Las rutas van de problemas a LA DECISIÓN, no de cada problema a un
   tipo: eso lo hace el recomendador con más variables.
   Composición: ≥1200 esquema horizontal (5 columnas); 960–1199 y
   móvil: chips arriba + tira de decisión horizontal debajo.
   Solo CSS; sin librerías; transiciones de color de 0,2 s, anuladas
   por la regla global de prefers-reduced-motion.
   ------------------------------------------------------------- */
body[data-lab="v2"] .hero-v2 { padding-block: clamp(2rem, 4.5vw, 3.4rem) clamp(1.8rem, 4vw, 3rem); --hero-line: color-mix(in srgb, var(--accent-dark) 72%, var(--border)); /* líneas del esquema: ≥3:1 sobre la bandeja */ }
body[data-lab="v2"] .hero-v2 .hero-grid { gap: 2.2rem; align-items: center; }
@media (min-width: 960px) { body[data-lab="v2"] .hero-v2 .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 3rem; } }
@media (min-width: 1240px) { body[data-lab="v2"] .hero-v2 .hero-grid { gap: 4rem; } }
/* Fondo: en lugar del halo difuso, una retícula de puntos de precisión
   muy tenue que aparece solo detrás del tablero (papel milimetrado). */
body[data-lab="v2"] .hero-v2 .hero-halo {
  inset: 0; z-index: -1; opacity: 1;
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent-dark) 22%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 78% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 70% at 78% 45%, #000 20%, transparent 100%);
}
@media (max-width: 959px) {
  body[data-lab="v2"] .hero-v2 .hero-halo { -webkit-mask-image: radial-gradient(90% 40% at 50% 85%, #000 20%, transparent 100%); mask-image: radial-gradient(90% 40% at 50% 85%, #000 20%, transparent 100%); }
}

/* Columna de texto */
body[data-lab="v2"] .hero-v2 .h1-hero { font-size: clamp(2.15rem, 4.1vw, 3.3rem); max-width: 22ch; text-wrap: balance; line-height: 1.06; letter-spacing: -.012em; margin-top: .55rem; }
body[data-lab="v2"] .hero-v2 .lead { font-size: 1.08rem; line-height: 1.55; max-width: 46ch; margin-top: 1.05rem; }
body[data-lab="v2"] .hero-v2 .hero-actions { margin-top: 1.5rem; }
body[data-lab="v2"] .hero-v2 .hero-search { margin-top: 1.5rem; max-width: 430px; }
body[data-lab="v2"] .hero-search-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
body[data-lab="v2"] .hero-proof {
  list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: 540px;
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem; font-size: .83rem; line-height: 1.4; color: var(--ink-soft); white-space: nowrap;
}
body[data-lab="v2"] .hero-proof li { position: relative; padding-left: 1.15rem; }
body[data-lab="v2"] .hero-proof li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--accent-dark); background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
}
body[data-lab="v2"] .hero-proof b { color: var(--ink); font-family: var(--display); font-weight: 600; }
@media (max-width: 640px) { body[data-lab="v2"] .hero-proof { grid-template-columns: 1fr; white-space: normal; } }
@media (max-width: 480px) { body[data-lab="v2"] .hero-v2 .lead { font-size: 1rem; } }

/* Tablero (nivel B en caja): anula la tarjeta blanca con sombra de .hero-visual */
body[data-lab="v2"] .hero-map { background: var(--lab-tint); border: 1px solid var(--lab-line); border-radius: var(--radius-l); box-shadow: none; padding: 1.3rem 1.35rem 1.3rem; }
body[data-lab="v2"] .hero-map-head { margin-bottom: 1.1rem; }
body[data-lab="v2"] .hero-map-head .lab-kicker { display: inline-flex; }
body[data-lab="v2"] .hero-map-title { font-size: 1.04rem; line-height: 1.35; margin: .4rem 0 0; max-width: 36ch; color: var(--ink); }

/* Cuerpo: esquema horizontal ≥1200 */
body[data-lab="v2"] .hero-map-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center; }
@media (min-width: 1200px) {
  body[data-lab="v2"] .hero-map-body { grid-template-columns: minmax(0, 1fr) 34px 88px 60px 132px; gap: 0; }
}
/* Entradas: los chips como filas-nodo (un color por estado, nada más) */
body[data-lab="v2"] .hero-map .hero-map-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; }
@media (min-width: 1200px) { body[data-lab="v2"] .hero-map .hero-map-inputs { grid-template-columns: 1fr; gap: .45rem; } }
@media (max-width: 599px) { body[data-lab="v2"] .hero-map .hero-map-inputs { grid-template-columns: 1fr; } }
body[data-lab="v2"] .hero-map .chip {
  position: relative; display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; white-space: normal; line-height: 1.25;
  padding: .55rem .8rem .55rem .85rem; font-size: .86rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--lab-line); border-radius: 10px;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
body[data-lab="v2"] .hero-map .chip::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--accent-dark); background: radial-gradient(circle, var(--accent-dark) 0 26%, transparent 27% 100%);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
body[data-lab="v2"] .hero-map .chip:hover { background: var(--surface); border-color: var(--accent-dark); color: var(--ink); }
body[data-lab="v2"] .hero-map .chip.is-active { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); }
body[data-lab="v2"] .hero-map .chip.is-active::before { border-color: var(--accent-ink); background: radial-gradient(circle, var(--accent-ink) 0 26%, transparent 27% 100%); }
/* Tramo de cada entrada hacia el bus (solo en el esquema horizontal) */
body[data-lab="v2"] .hero-map .chip::after { content: none; }
@media (min-width: 1200px) {
  body[data-lab="v2"] .hero-map .chip::after {
    content: ""; position: absolute; left: 100%; top: 50%; width: 34px; height: 1.5px; margin-top: -.75px;
    background: var(--hero-line); transition: background .2s var(--ease-out), height .2s var(--ease-out);
  }
  body[data-lab="v2"] .hero-map .chip:hover::after { background: var(--accent-dark); }
  body[data-lab="v2"] .hero-map .chip.is-active::after { background: var(--accent-dark); height: 2px; margin-top: -1px; }
}
/* Bus vertical + conector al nodo */
body[data-lab="v2"] .hero-map-bus { display: none; }
@media (min-width: 1200px) {
  body[data-lab="v2"] .hero-map-bus { display: block; position: relative; align-self: stretch; }
  body[data-lab="v2"] .hero-map-bus::before { content: ""; position: absolute; right: 0; top: 1.3rem; bottom: 1.3rem; width: 1.5px; background: var(--hero-line); transition: background .2s var(--ease-out); }
  body[data-lab="v2"] .hero-map-bus::after { content: ""; position: absolute; left: 100%; top: 50%; width: 16px; height: 1.5px; margin-top: -.75px; background: var(--hero-line); transition: background .2s var(--ease-out); }
  body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-bus::before,
  body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-bus::after { background: var(--accent-dark); }
}
/* Nodo de decisión (anillo + punto, la geometría del favicon a 56px) */
body[data-lab="v2"] .hero-map-core { position: relative; display: grid; place-items: center; }
body[data-lab="v2"] .hero-map-node {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--accent-dark);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
body[data-lab="v2"] .hero-map-node span { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-dark); transition: background .2s var(--ease-out); }
body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-node { background: var(--accent-dark); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-node span { background: var(--accent-ink); }
body[data-lab="v2"] .hero-map-core-label { position: absolute; top: calc(50% + 34px); left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font-family: var(--display); font-weight: 600; font-size: .78rem; line-height: 1.15; color: var(--ink); }
body[data-lab="v2"] .hero-map-core-label small { display: block; font: 500 .66rem/1.2 var(--sans); color: var(--ink-soft); letter-spacing: .02em; }
/* Abanico hacia los tipos */
body[data-lab="v2"] .hero-map-fan { display: none; }
@media (min-width: 1200px) { body[data-lab="v2"] .hero-map-fan { display: block; width: 60px; height: 240px; } }
body[data-lab="v2"] .hero-map-fan path { fill: none; stroke: var(--hero-line); stroke-width: 1.5; transition: stroke .2s var(--ease-out); }
body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-fan path { stroke: var(--accent-dark); }
/* Salidas: los cinco tipos (cuadrado = tecnología) */
body[data-lab="v2"] .hero-map-outputs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(5, 48px); align-items: center; height: 240px; }
body[data-lab="v2"] .hero-map-outputs li { display: flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; line-height: 1.15; color: var(--ink-soft); transition: color .2s var(--ease-out); }
body[data-lab="v2"] .hero-map-outputs .icon-type { width: 34px; height: 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--lab-line); color: var(--lab-num-ink); transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
body[data-lab="v2"] .hero-map-outputs .icon-type svg { width: 18px; height: 18px; }
body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-outputs li { color: var(--ink); }
body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-outputs .icon-type { color: var(--accent-dark); border-color: var(--accent-dark); }
/* Tira de decisión (960–1199 y móvil): nodo → línea → cinco tipos en fila */
@media (max-width: 1199px) {
  body[data-lab="v2"] .hero-map-body { grid-template-areas: "inputs" "strip"; }
  body[data-lab="v2"] .hero-map .hero-map-inputs { grid-area: inputs; }
  body[data-lab="v2"] .hero-map-core { grid-area: strip; justify-self: start; }
  body[data-lab="v2"] .hero-map-outputs { grid-area: strip; }
  body[data-lab="v2"] .hero-map-body::after { content: ""; grid-area: strip; align-self: center; height: 1.5px; background: var(--hero-line); margin-left: 64px; margin-right: 0; z-index: 0; transition: background .2s var(--ease-out); }
  body[data-lab="v2"] .hero-map:has(.chip.is-active) .hero-map-body::after { background: var(--accent-dark); }
  body[data-lab="v2"] .hero-map-core { z-index: 1; width: 56px; margin-top: 1.4rem; margin-bottom: 1.6rem; }
  body[data-lab="v2"] .hero-map-core-label { top: calc(50% + 32px); }
  body[data-lab="v2"] .hero-map-outputs { height: auto; grid-template-rows: none; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin: 1.4rem 0 1.6rem 84px; z-index: 1; align-items: start; }
  body[data-lab="v2"] .hero-map-outputs li { flex-direction: column; text-align: center; gap: .35rem; font-size: .68rem; }
  body[data-lab="v2"] .hero-map-outputs .icon-type { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
  body[data-lab="v2"] .hero-map-outputs { margin-left: 74px; }
  body[data-lab="v2"] .hero-map-body::after { margin-left: 58px; }
  body[data-lab="v2"] .hero-map-outputs li { font-size: .62rem; }
  body[data-lab="v2"] .hero-map-outputs .icon-type { width: 34px; height: 34px; }
  body[data-lab="v2"] .hero-map-outputs .icon-type svg { width: 17px; height: 17px; }
}
/* Pie del tablero: estado + CTA de continuar (hooks de main.js intactos) */
body[data-lab="v2"] .hero-map .hero-need-status { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--lab-line-2); min-height: 0; }
body[data-lab="v2"] .hero-map .hero-need-empty { font-size: .84rem; margin: 0; }
body[data-lab="v2"] .hero-map .hero-need-confirm { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
body[data-lab="v2"] .hero-map .hero-need-count { margin: 0; color: var(--accent-dark); }
body[data-lab="v2"] .hero-map .hero-need-cta { align-self: auto; padding: .7rem 1.1rem; font-size: .9rem; }

/* Móvil: el orden del hero se decide por CSS (eyebrow, H1, lead,
   acciones, TABLERO, buscador, microseñales) para que el visual entre
   en la primera pantalla antes que el buscador. */
@media (max-width: 959px) {
  body[data-lab="v2"] .hero-v2 .hero-grid { gap: 0; }
  body[data-lab="v2"] .hero-v2 .hero-copy { display: contents; }
  body[data-lab="v2"] .hero-v2 .eyebrow { order: 1; }
  body[data-lab="v2"] .hero-v2 .h1-hero { order: 2; }
  body[data-lab="v2"] .hero-v2 .lead { order: 3; }
  body[data-lab="v2"] .hero-v2 .hero-actions { order: 4; }
  body[data-lab="v2"] .hero-v2 .hero-map { order: 5; margin-top: 1.7rem; }
  body[data-lab="v2"] .hero-v2 .hero-search { order: 6; margin-top: 1.6rem; max-width: none; }
  body[data-lab="v2"] .hero-v2 .hero-proof { order: 7; margin-top: 1.3rem; }
  body[data-lab="v2"] .hero-v2 .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* =============================================================
   HOME — "¿No sabes por dónde empezar?" (onboarding para novatos)
   Panel de decisión: a la izquierda, un plano técnico propio de una
   vivienda (paredes de 1px, regla, anillos numerados con los mismos
   iconos de tipo, raíl del robot); a la derecha, seis rutas en
   lenguaje humano numeradas 01–06 que llevan a páginas existentes.
   El plano no decora: es el mapa de la decisión (los números se
   corresponden). Nivel B a sangre, justo debajo del hero.
   ============================================================= */
body[data-lab="v2"] .lab-start { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); margin-top: 0; }
body[data-lab="v2"] .lab-start-grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: start; }
@media (min-width: 1040px) { body[data-lab="v2"] .lab-start-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3rem; } }
body[data-lab="v2"] .lab-start .section-head { margin-bottom: 1.2rem; }
body[data-lab="v2"] .lab-start .section-head h2 { display: flex; align-items: flex-start; gap: .7rem; }
body[data-lab="v2"] .lab-start .section-head h2::before { margin-top: .5em; }
body[data-lab="v2"] .lab-start .section-head p { max-width: 46ch; }

/* Plano */
body[data-lab="v2"] .lab-plan { display: block; width: 100%; height: auto; max-width: 520px; }
body[data-lab="v2"] .lab-plan .pl-rule { stroke: var(--lab-line-2); stroke-width: 1; fill: none; }
body[data-lab="v2"] .lab-plan .pl-wall { stroke: var(--lab-line-2); stroke-width: 1.5; fill: none; stroke-linejoin: round; }
body[data-lab="v2"] .lab-plan .pl-door { stroke: var(--lab-line-2); stroke-width: 1; fill: none; stroke-dasharray: 2 3; }
body[data-lab="v2"] .lab-plan .pl-fill { fill: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
body[data-lab="v2"] .lab-plan .pl-rug { fill: var(--surface); stroke: var(--lab-line); stroke-width: 1; }
body[data-lab="v2"] .lab-plan .pl-rug-line { stroke: var(--lab-line); stroke-width: 1; }
body[data-lab="v2"] .lab-plan .pl-counter,
body[data-lab="v2"] .lab-plan .pl-bed,
body[data-lab="v2"] .lab-plan .pl-car { fill: var(--surface); stroke: var(--lab-line-2); stroke-width: 1.25; }
body[data-lab="v2"] .lab-plan .pl-bed-line { stroke: var(--lab-line); stroke-width: 1; }
body[data-lab="v2"] .lab-plan .pl-cable { stroke: var(--accent-dark); stroke-width: 1.5; stroke-linecap: round; }
body[data-lab="v2"] .lab-plan .pl-route { stroke: var(--accent); stroke-width: 1.75; fill: none; stroke-dasharray: 4 5; stroke-linecap: round; }
body[data-lab="v2"] .lab-plan .pl-dot { fill: var(--ink-faint); }
body[data-lab="v2"] .lab-plan .pl-ico-soft { color: var(--ink-faint); opacity: .75; }
body[data-lab="v2"] .lab-plan .pl-label { fill: var(--lab-num-ink); font: 600 8px var(--display); letter-spacing: .14em; }
body[data-lab="v2"] .lab-plan .pl-node circle { fill: var(--surface); stroke: var(--accent-dark); stroke-width: 1.5; transition: fill .2s var(--ease-out); }
body[data-lab="v2"] .lab-plan .pl-node use { color: var(--accent-dark); transition: color .2s var(--ease-out); }
body[data-lab="v2"] .lab-plan .pl-node text { fill: var(--accent-dark); font: 500 9px var(--display); letter-spacing: .1em; }
body[data-lab="v2"] .lab-plan .pl-node.is-guide circle { fill: var(--accent-soft); }
/* Enlace plano ↔ lista: al pasar por una ruta se enciende su nodo (mejora progresiva con :has) */
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(1) .lab-start-item:hover) .pl-node[data-node="1"] circle,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(2) .lab-start-item:hover) .pl-node[data-node="2"] circle,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(3) .lab-start-item:hover) .pl-node[data-node="3"] circle,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(4) .lab-start-item:hover) .pl-node[data-node="4"] circle,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(5) .lab-start-item:hover) .pl-node[data-node="5"] circle,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(6) .lab-start-item:hover) .pl-node[data-node="6"] circle { fill: var(--accent-dark); }
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(1) .lab-start-item:hover) .pl-node[data-node="1"] use,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(2) .lab-start-item:hover) .pl-node[data-node="2"] use,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(3) .lab-start-item:hover) .pl-node[data-node="3"] use,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(4) .lab-start-item:hover) .pl-node[data-node="4"] use,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(5) .lab-start-item:hover) .pl-node[data-node="5"] use,
body[data-lab="v2"] .lab-start:has(.lab-start-list li:nth-child(6) .lab-start-item:hover) .pl-node[data-node="6"] use { color: var(--accent-ink); }

/* Rutas: lista con líneas, numerada, sin tarjetas */
body[data-lab="v2"] .lab-start-list { list-style: none; padding: 0; margin: 0; counter-reset: lab-start; border-top: 1px solid var(--lab-line-2); border-bottom: 1px solid var(--lab-line-2); background: var(--surface); border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--lab-line); }
body[data-lab="v2"] .lab-start-list li { counter-increment: lab-start; border-top: 1px solid var(--lab-line); }
body[data-lab="v2"] .lab-start-list li:first-child { border-top: 0; }
body[data-lab="v2"] .lab-start-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; position: relative;
  padding: 1.05rem 3.2rem 1.15rem 1.15rem; color: var(--ink); transition: background .2s var(--ease-out);
}
body[data-lab="v2"] .lab-start-item::after {
  content: counter(lab-start, decimal-leading-zero); position: absolute; top: 1.05rem; right: 1.1rem;
  font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .1em; color: var(--lab-num-ink);
}
body[data-lab="v2"] a.lab-start-item:hover { background: var(--lab-tint); }
body[data-lab="v2"] a.lab-start-item:hover h3 { color: var(--accent-dark); }
body[data-lab="v2"] .lab-start-item .icon-type { width: 44px; height: 44px; transition: background .2s var(--ease-out), color .2s var(--ease-out); }
body[data-lab="v2"] .lab-start-item .icon-type svg { width: 23px; height: 23px; }
body[data-lab="v2"] a.lab-start-item:hover .icon-type { background: var(--accent-dark); color: var(--accent-ink); }
body[data-lab="v2"] .lab-start-item .icon-guide { width: 44px; height: 44px; background: var(--accent-soft); }
body[data-lab="v2"] .lab-start-item .icon-guide svg { width: 22px; height: 22px; }
body[data-lab="v2"] .lab-start-item h3 { font-size: 1.02rem; line-height: 1.3; margin: .1rem 0 .3rem; transition: color .2s var(--ease-out); }
body[data-lab="v2"] .lab-start-item p { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 60ch; }
body[data-lab="v2"] .lab-start-item p b { color: var(--accent-dark); }
body[data-lab="v2"] .lab-start-item.is-guide { background: var(--lab-tint); }
body[data-lab="v2"] .lab-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .75rem; }
body[data-lab="v2"] .lab-start-alt { font-size: .88rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 3px; }
body[data-lab="v2"] .lab-start-alt:hover { text-decoration-color: currentColor; }
@media (max-width: 480px) {
  body[data-lab="v2"] .lab-start-item { grid-template-columns: 40px 1fr; gap: .8rem; padding: 1rem 2.6rem 1.05rem .95rem; }
  body[data-lab="v2"] .lab-start-item .icon-type, body[data-lab="v2"] .lab-start-item .icon-guide { width: 40px; height: 40px; }
}

/* Home: tres productos → tres columnas iguales (sin 4.ª columna vacía);
   la primera fila del icono del comparador hereda el anillo de guía. */
@media (min-width: 1040px) { body[data-lab="v2"] .lab-grid-3 { grid-template-columns: repeat(3, 1fr); } }
body[data-lab="v2"] .lab-guide .icon-guide svg[viewBox] { width: 22px; height: 22px; }

/* Sin cable: cinco modelos → 3 + 2 con la segunda fila centrada (flex):
   sin tarjeta huérfana y sin estrechar el texto (a 5 columnas quedaban
   líneas de ~17 caracteres). Las tarjetas sobre bandeja van sin sombra. */
@media (min-width: 1040px) {
  body[data-lab="v2"] .lab-grid-5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem; }
  body[data-lab="v2"] .lab-grid-5 > .product-card { flex: 0 0 calc((100% - 2.6rem) / 3); max-width: calc((100% - 2.6rem) / 3); }
}
body[data-lab="v2"] .lab-tray .product-card { box-shadow: none; border-color: var(--lab-line); }

/* =============================================================
   PROPUESTA (NO ACTIVA): panel de dropdown para Categorías / Guías
   =============================================================
   Solo diseño, para garantizar compatibilidad futura del lenguaje
   visual. Ninguna regla de aquí se aplica hoy porque no existe
   ningún elemento .lab-menu-panel en el HTML: el header funcional
   no se toca.

   DESKTOP (hover/focus-within en el <li> de "Categorías" o "Guías"):
   - Superficie: nivel B en caja (var(--surface) + regla arriba +
     borde var(--lab-line) + sombra --shadow-l). Se abre bajo el
     enlace, alineado a la izquierda del nav, ancho 640–720px.
   - Categorías: dos columnas que repiten la jerarquía aprobada:
       izquierda "Por tipo" → 8 filas con .icon-type (cuadrado)
       derecha "Por problema" → 4 familias con .icon-case (anillo)
       + sus casos como chips .problem-case.
     Cada columna lleva su kicker (.lab-kicker) con nodo.
   - Guías: 5 grupos por familia (Elección, Comparación, Problema,
     Técnica, Vivienda) con .icon-guide y 2–3 guías por grupo;
     último elemento "Ver todas las guías" como .btn-secondary btn-sm.
   MÓVIL: mismo contenido como acordeón dentro de .mobile-menu, bajo
     el enlace correspondiente; el anillo/cuadrado se mantiene a
     28px (.icon-case / .icon-type reducido).
   ------------------------------------------------------------- */
body[data-lab="v2"] .lab-menu-panel {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 500; min-width: 640px;
  background: var(--surface); border: 1px solid var(--lab-line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); padding: 1.2rem 1.3rem 1.3rem; display: none;
}
body[data-lab="v2"] .lab-menu-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background:
    linear-gradient(var(--lab-line-2), var(--lab-line-2)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--lab-line-2) 0 1px, transparent 1px 32px) 0 0 / 100% 6px no-repeat;
}
body[data-lab="v2"] .lab-menu-panel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
body[data-lab="v2"] .lab-menu-panel .row { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem; border-radius: var(--radius-s); font-weight: 600; font-size: .9rem; }
body[data-lab="v2"] .lab-menu-panel .row:hover { background: var(--lab-tint); color: var(--accent-dark); }
body[data-lab="v2"] .lab-menu-panel .icon-type { width: 32px; height: 32px; border-radius: 8px; }
body[data-lab="v2"] .lab-menu-panel .icon-type svg { width: 17px; height: 17px; }

/* -------------------------------------------------------------
   Accesibilidad / movimiento reducido
   Ningún elemento nuevo depende solo del color: raíles y números
   acompañan a texto real; los iconos son decorativos (aria-hidden)
   junto a su título. Sin animaciones con bucle propio.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-lab="v2"] * { transition: none !important; animation: none !important; }
}

/* =============================================================
   COMPARADOR — bandeja de selección v2 (PROTOTIPO, en staging,
   NO desplegado)
   Aislamiento: todo el bloque va bajo .compare-selector-v2 y sus
   descendientes. A propósito NO se usa body[data-lab="v2"]: ese
   atributo activaría de golpe todo el sistema "lab" de arriba
   (header, hub, menú, categorías…) en una página que no tiene
   nada que ver con ese trabajo — ver auditoría en el README de
   _staging-comparador-d1. Este bloque solo se carga en
   comparador.html (link propio en esa página) y solo puede
   afectar a marcado que use estas clases nuevas.
   ============================================================= */
.compare-selector-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  padding: 1.3rem 1.4rem 1.5rem;
  margin-bottom: 1.6rem;
}
/* Ronda 3: en escritorio ancho (contenedor a su tope de 1240px) la
   bandeja se estiraba a todo el ancho aunque su contenido real (4 slots +
   buscador) solo necesita ~464px, dejando un vacío enorme a la derecha.
   860px se eligió midiendo ese contenido real y probando 780/860/900 en
   vivo: dejaba aire de sobra sin volver a abrir el hueco, y cabe entero
   incluso el status más largo ("0 de 4 · añade al menos 2 para
   comparar"). El breakpoint es min-width:1100px a propósito (no un valor
   "de libro" como 1024): a 1024×768 (iPad landscape) la bandeja debe
   seguir a ancho completo como ya está aprobado, así que el corte va
   claramente por encima de ese ancho. Efecto secundario aceptado: a
   960×800 (bajo 1100) la bandeja NO se compacta y conserva el vacío
   actual — ver nota en el informe de esta ronda. */
@media (min-width: 1100px) { .compare-selector-v2 { max-width: 860px; } }

.compare-selector-v2__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; margin-bottom: 1rem;
}
.compare-selector-v2__title { font-family: var(--display); font-size: 1.05rem; font-weight: 700; margin: 0; }
.compare-selector-v2__status { font-size: .86rem; font-weight: 600; color: var(--ink-soft); margin: 0; }

.compare-selector-v2__slots { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

.compare-selector-v2__num {
  position: absolute; top: -8px; left: -8px; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-soft); font-size: .66rem; font-weight: 800; letter-spacing: .01em;
  display: grid; place-items: center; line-height: 1;
}

.compare-selector-v2__slot.compare-slot { position: relative; }

.compare-selector-v2__slot--next.compare-slot-add {
  position: relative; border-style: solid; border-color: var(--accent); color: var(--accent-dark);
  background: var(--accent-soft);
}
.compare-selector-v2__slot--next.compare-slot-add:hover,
.compare-selector-v2__slot--next.compare-slot-add:focus-visible { border-color: var(--accent-dark); }
.compare-selector-v2__slot--next .compare-selector-v2__num { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); }
.compare-selector-v2__slot--next.is-active {
  border-color: var(--accent-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Refinamiento (ronda 2): el borde discontinuo es, por convención de UI,
   una señal de "toca aquí para añadir" — justo lo contrario de lo que un
   hueco futuro (2º/3º/4º) debe comunicar cuando aún no es su turno. Se
   sustituye por un bloque plano y sin borde, claramente inerte, para que
   solo el hueco "siguiente" (borde sólido + color de acento) lea como
   accionable. Mismo tamaño/forma/numeración: no cambia la identidad. */
.compare-selector-v2__slot--empty {
  width: 96px; height: 96px; border-radius: var(--radius-m); border: 1px solid transparent;
  display: grid; place-items: center; color: var(--ink-faint); font-size: .78rem; font-weight: 600;
  opacity: .55; background: var(--bg-alt); pointer-events: none;
}
/* Refinamiento D2.1: slots con algo más de presencia en desktop/tablet
   ancho (96px → 116px, +20px moderado — siguen siendo slots de
   selección, no tarjetas de producto). Ayuda a que la columna izquierda
   del workspace se perciba con más peso visual, no solo el max-width
   nuevo de arriba. Solo desde 860px (mismo corte que el workspace de 2
   columnas); por debajo, los tamaños de D1/D2 (96px, o 72px/2×2 bajo
   480px) no cambian. */
@media (min-width: 860px) {
  .compare-selector-v2__slot.compare-slot,
  .compare-selector-v2__slot--next.compare-slot-add,
  .compare-selector-v2__slot--empty { width: 116px; }
  .compare-selector-v2__slot.compare-slot .thumb,
  .compare-selector-v2__slot--next.compare-slot-add { width: 116px; height: 116px; }
  .compare-selector-v2__slot--empty { height: 116px; }
  .compare-selector-v2__slot .name { font-size: .8rem; }
}

/* Refinamiento (ronda 2): el "×" de quitar producto medía 26×26px de
   área táctil real (heredado de producción, .compare-slot .remove-badge
   en styles.css — no se toca ese archivo). Se amplía SOLO el hit-area a
   44×44px vía un botón invisible más grande; el círculo negro visible
   sigue midiendo 26px y centrado en el mismo sitio de siempre (se dibuja
   ahora con ::after en vez de con el texto real del botón). El texto "×"
   real queda transparente pero sigue presente para lectores de pantalla
   (el aria-label ya describe la acción completa). El desplazamiento
   (top/right) se eligió para no invadir el hueco vecino ni el nombre:
   con el gap actual entre slots (.7rem desktop / .45rem móvil) el hit-area
   deja ≥5px de margen antes de tocar el siguiente slot en ambos casos,
   y el borde inferior no baja lo bastante para tocar el texto del nombre. */
.compare-selector-v2 .remove-badge {
  width: 44px; height: 44px; top: -4px; right: -2px;
  background: transparent; box-shadow: none; color: transparent;
  display: grid; place-items: center;
}
.compare-selector-v2 .remove-badge::after {
  content: "×"; width: 26px; height: 26px; border-radius: 999px;
  background: var(--ink); color: var(--bg); display: grid; place-items: center;
  box-shadow: var(--shadow-s); font-size: .8rem; line-height: 1;
}

/* Confirmación temporal (✓) tras añadir por buscador — clase añadida y
   quitada por JS (flashSlotConfirmed); puramente decorativa. */
.compare-selector-v2__slot--full.is-confirmed::after {
  content: "✓"; position: absolute; inset: 0; border-radius: var(--radius-m);
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 800;
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent-dark) 88%, transparent);
  animation: compareSlotConfirm 1.1s var(--ease-out) forwards;
}
@keyframes compareSlotConfirm {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.compare-selector-v2__subhint { font-size: .78rem; color: var(--ink-faint); margin: -.15rem 0 0; }

/* Móvil: los 4 slots se mantienen en una fila pero más compactos; los
   nombres truncan a 2 líneas en vez de reducir la tipografía a tamaños
   ilegibles. iPad/tablet no necesita ajustes propios: a esos anchos la
   bandeja ya tiene aire de sobra con el tamaño de desktop. */
@media (max-width: 480px) {
  .compare-selector-v2 { padding: 1.1rem 1rem 1.3rem; }
  .compare-selector-v2__slots { gap: .45rem; flex-wrap: nowrap; }
  .compare-selector-v2__slot.compare-slot,
  .compare-selector-v2__slot--next.compare-slot-add,
  .compare-selector-v2__slot--empty { width: 72px; }
  .compare-selector-v2__slot.compare-slot .thumb,
  .compare-selector-v2__slot--next.compare-slot-add { width: 72px; height: 72px; font-size: 1.3rem; }
  .compare-selector-v2__slot--empty { height: 72px; font-size: .7rem; }
  .compare-selector-v2__slot .name {
    font-size: .66rem; line-height: 1.15; margin-top: .3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .compare-selector-v2__head { gap: .2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-selector-v2__slot--full.is-confirmed::after { animation: none; opacity: 1; }
}

/* =============================================================
   FICHA V2 — piloto Dyson V8 Advanced (PROTOTIPO, en staging,
   NO desplegado)
   Reutiliza el sistema body[data-lab="v2"] ya vivo en la ficha de
   Bosch (lab-plate, lab-tray, lab-kicker, lab-specs, lab-sources,
   lab-decision) — nada de eso se toca aquí. Los bloques nuevos de
   este piloto (veredicto en raíles, marco de espécimen sin foto,
   evidencia "sabemos/no", fuente discreta) van bajo prefijo v2- y
   también viven dentro de body[data-lab="v2"], así que solo pueden
   afectar a páginas que ya usan ese atributo (Bosch, y ahora Dyson).
   ============================================================= */

/* Veredicto: dos raíles + un dato que decide, sin caja ni fondo de
   color. El significado sí/no lo lleva el color del raíl y el
   texto, no un lavado verde/rosa de fondo. */
body[data-lab="v2"] .ficha-head .pv-kicker-row { margin-bottom: .4rem; }
body[data-lab="v2"] .ficha-head .ficha-nombre { margin-bottom: .5rem; }
body[data-lab="v2"] .v2-verdict { margin-top: .45rem; display: flex; flex-direction: column; gap: .3rem; }
body[data-lab="v2"] .v2-verdict-line { margin: 0; padding-left: .9rem; border-left: 3px solid var(--lab-line-2); font-size: .96rem; line-height: 1.48; }
body[data-lab="v2"] .v2-verdict-line--yes { border-left-color: var(--accent-dark); }
body[data-lab="v2"] .v2-verdict-line--avoid { border-left-color: var(--gold); }
body[data-lab="v2"] .v2-verdict-decisive {
  margin: 0; padding-left: .9rem; border-left: 3px solid var(--ink-faint);
  font-size: .89rem; line-height: 1.48; color: var(--ink-soft);
}
body[data-lab="v2"] .v2-verdict-decisive strong { color: var(--ink); }

/* Respiración entre el veredicto y la placa de datos/CTA: sin esto, la
   placa (fondo oscuro) queda pegada a la última línea del veredicto, sin
   ninguna transición visual. Solo cuando el veredicto precede directamente
   a la placa (Dyson/Kärcher/Dreame); Bosch no usa .v2-verdict, así que
   este selector no lo afecta. */
body[data-lab="v2"] .v2-verdict + .ficha-precio-box.lab-plate { margin-top: 1.3rem; }

/* Fuente discreta: texto plano, nunca símbolos/superíndices que
   obliguen a memorizar una leyenda. Acompaña a cifras o afirmaciones
   concretas, no a cada palabra. */
body[data-lab="v2"] .v2-source {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-faint); margin-left: .1rem;
}
body[data-lab="v2"] .v2-source::before { content: "· "; }

/* Datos rápidos con fuente: misma rejilla que .ficha-quicklist, pero
   cada fila apila valor + procedencia (en vez de dos columnas rígidas
   label/valor) para que la fuente quepa sin ensanchar la placa. */
/* Especificidad igual a la regla compartida ".ficha-precio-box .ficha-quicklist"
   (styles.css/CSS del sistema) a propósito, para ganar por orden de
   aparición sin tocar esa regla compartida con Bosch: 3 en una fila
   en vez de 2+1. SOLO desde 960px (el mismo punto donde el hero pasa
   a una columna): por debajo, 768/390/375 ya estaban aprobados con el
   patrón 2+1 y no deben cambiar en esta ronda. */
@media (min-width: 960px) {
  body[data-lab="v2"] .ficha-precio-box .v2-quicklist { grid-template-columns: repeat(3, 1fr); gap: .3rem 1.2rem; }
}
body[data-lab="v2"] .v2-quicklist li {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: .4rem; row-gap: 0;
}
body[data-lab="v2"] .v2-quicklist li > span:first-child { color: var(--lab-plate-ink-soft); font-size: .78rem; }
body[data-lab="v2"] .v2-quicklist .v2-source {
  color: color-mix(in srgb, var(--lab-plate-ink-soft) 80%, transparent); margin-left: 0; font-size: .7rem; flex-basis: 100%;
}
@media (max-width: 640px) { body[data-lab="v2"] .v2-quicklist { grid-template-columns: 1fr 1fr; } }

/* Estado A (sin imagen oficial autorizada) — ronda 3: se retira el marco
   técnico compacto. No aportaba información suficiente y obligaba a
   reservar una segunda columna para un producto visual inexistente
   (consistencia de SISTEMA no es consistencia de REJILLA). Estado A
   pasa a ser un hero editorial de UNA columna: identificación →
   veredicto → placa, sin ninguna columna de imagen.
   Por debajo de 960px `.ficha-top` YA es una columna por la regla base
   (styles.css) — aquí solo se sobreescribe el caso ≥960px donde antes
   se activaban las 2 columnas, y solo para `.is-decision-only` (esta
   ficha). Bosch y el futuro Estado B (imagen autorizada, p. ej.
   Kärcher) NO llevan esta clase y conservan las 2 columnas intactas. */
@media (min-width: 960px) {
  body[data-lab="v2"] .ficha-top.is-decision-only {
    display: block; max-width: 760px;
  }
}

/* Evidencia — "Lo que sabemos y lo que no". Listas cortas, sin caja;
   el color de la etiqueta ya distingue la categoría, reforzado por
   el propio texto (nunca solo color). Categorías vacías se omiten
   en el HTML, no se rellenan aquí. */
body[data-lab="v2"] .v2-evidence { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { body[data-lab="v2"] .v2-evidence { grid-template-columns: 1fr 1fr; } }
body[data-lab="v2"] .v2-evidence-group h3 {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem;
}
body[data-lab="v2"] .v2-evidence-group.is-confirmado h3 { color: var(--ok); }
body[data-lab="v2"] .v2-evidence-group.is-matices h3 { color: var(--gold); }
body[data-lab="v2"] .v2-evidence-group.is-no-confirmado h3 { color: var(--ink-faint); }
body[data-lab="v2"] .v2-evidence-group.is-variante h3 { color: var(--accent-dark); }
body[data-lab="v2"] .v2-evidence-group ul { display: flex; flex-direction: column; gap: .55rem; padding: 0; margin: 0; list-style: none; }
body[data-lab="v2"] .v2-evidence-group li { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); padding-left: 1rem; position: relative; }
body[data-lab="v2"] .v2-evidence-group li::before { content: "—"; position: absolute; left: 0; color: var(--lab-line-2); }

/* Alternativas — fuera del fold, una línea por producto, sin inventar. */
body[data-lab="v2"] .v2-alt-list { display: flex; flex-direction: column; gap: .5rem; padding: 0; margin: 0; list-style: none; }
body[data-lab="v2"] .v2-alt-list a { font-weight: 700; }
body[data-lab="v2"] .v2-alt-list span { color: var(--ink-soft); font-size: .92rem; }

/* Cierre comercial — segunda oportunidad, discreta: mismo componente
   de CTA, sin repetir precio-nota completo ni convertirlo en un
   segundo bloque grande. */
body[data-lab="v2"] .v2-closing { max-width: 360px; margin: 0 auto; text-align: center; }
body[data-lab="v2"] .v2-closing p { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .8rem; }

/* Rutina — "Cómo cambia tu día a día" (piloto Dreame, producto de alta
   densidad funcional). Traduce funciones a tareas: qué hace la base, qué
   pasa a ser ocasional y qué sigue siendo del usuario. Mismo lenguaje
   tipográfico que .v2-evidence (etiqueta corta en mayúsculas + lista con
   guion), pero en 3 columnas con un filete superior por columna, para
   leerse como un reparto de tareas y no como otra lista de evidencia.
   Sin fondo ni caja nuevos. El color del filete acompaña al título, nunca
   lo sustituye. */
body[data-lab="v2"] .v2-routine-lead { font-size: .95rem; color: var(--ink-soft); max-width: 68ch; margin: .2rem 0 0; }
body[data-lab="v2"] .v2-routine { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 860px) { body[data-lab="v2"] .v2-routine { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } }
body[data-lab="v2"] .v2-routine-col { border-top: 2px solid var(--lab-line-2); padding-top: .9rem; }
body[data-lab="v2"] .v2-routine-col.is-base { border-top-color: var(--accent-dark); }
body[data-lab="v2"] .v2-routine-col.is-ocasional { border-top-color: var(--gold); }
body[data-lab="v2"] .v2-routine-col.is-tuyo { border-top-color: var(--ink-soft); }
body[data-lab="v2"] .v2-routine-col h3 {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: .6rem;
}
body[data-lab="v2"] .v2-routine-col ul { display: flex; flex-direction: column; gap: .55rem; padding: 0; margin: 0; list-style: none; }
body[data-lab="v2"] .v2-routine-col li { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); padding-left: 1rem; position: relative; }
body[data-lab="v2"] .v2-routine-col li::before { content: "—"; position: absolute; left: 0; color: var(--lab-line-2); }
body[data-lab="v2"] .v2-routine + .debes-saber-list { margin-top: 2.2rem; }
/* ==========================================================================
   ESTADO B — hero de 2 columnas con imagen oficial autorizada (Kärcher,
   piloto). Excepción de producto, NO estilo maestro todavía: es el primer
   caso real de Estado B, no se ha demostrado que esta proporción de columnas
   sirva para un segundo caso (ver nota de "qué normalizar antes de Dreame"
   en el informe de esta ronda). Si Dreame también usa Estado B con la misma
   proporción, esto pasaría a compartirse como estilo maestro.

   Mobile (por debajo de 960px): `.ficha-top` ya es de una sola columna por
   la regla base (styles.css), así que el orden visual es el orden del DOM:
   kicker → H1 → veredicto → placa → foto. La foto va SEGUNDA en el DOM
   a propósito (no primera, como en la plantilla antigua) para no anteponer
   la imagen a la decisión en móvil.

   Desktop (≥960px): rejilla de 2 columnas, decisión más ancha que la
   imagen (1.4fr vs 1fr) para que la decisión siga siendo dominante — no
   una rejilla 1:1 ni una imagen protagonista. Sobreescribe a propósito la
   regla compartida sin clase de `.ficha-top` (1fr 1.05fr, favorable a la
   imagen) SOLO para esta clase de producto. */
@media (min-width: 960px) {
  body[data-lab="v2"] .ficha-top.is-decision-with-image {
    grid-template-columns: 1.4fr 1fr;
    gap: 2.8rem;
    align-items: start;
  }
}
body[data-lab="v2"] .v2-hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-l); border: 1px solid var(--border);
  background: var(--surface-2);
}

/* Excepción de producto — Bosch BGS41POW1: la foto oficial es en retrato
   (1200×1606) y esta ficha no tiene bloque .v2-verdict (columna izquierda
   más corta que en Kärcher), así que la proporción compartida 1.4fr:1fr
   dejaba la imagen ~1.5x más alta que el contenido de decisión. Se estrecha
   SOLO la columna de imagen de este producto — misma técnica (fr), sin
   recortar la foto ni tocar la rejilla compartida con Kärcher. */
@media (min-width: 960px) {
  body[data-lab="v2"] article[data-producto-id="bosch-bgs41pow1"] .ficha-top.is-decision-with-image {
    grid-template-columns: 2.35fr 1fr;
  }
}
/* ==========================================================================
   MAESTRO — SUPERFICIE EDITORIAL DE DECISIÓN (.ficha-v2-hero)
   Común a TODOS los Estados de Ficha V2 (A sin foto, B con foto, futuro
   Dreame). Envuelve identificación + veredicto + placa [+ imagen].

   Separación de responsabilidades a propósito:
   - .ficha-v2-hero        → superficie, ritmo vertical, transición (esto).
   - .is-decision-only /
     .is-decision-with-image → SOLO la rejilla de columnas (por Estado).
   Nunca deben mezclarse ambas responsabilidades en una sola clase, o
   Dreame no podrá reutilizar la superficie sin heredar una rejilla ajena.

   Fondo: --bg-alt, no un color nuevo. Ya existe en el sistema (tokens
   base, styles.css) y dista poco de --bg (ver nota de contraste abajo):
   la diferencia es tonal, no dramática — cálido/crema, no teal. Se
   deja el tinte de marca (--lab-tint, 7% teal) reservado para .lab-tray
   (Encaje/Evidencia): si el hero usara el mismo tinte que Encaje, la
   página perdería el único límite que distingue "decisión" de
   "desarrollo". A propósito NO se añade una regla nueva al final de
   esta superficie: la bandeja de Encaje (.lab-tray.is-bleed) ya dibuja
   su propia línea de precisión en su borde superior (::before), justo
   donde termina este bloque — añadir una segunda línea aquí habría sido
   una marca decorativa redundante, no estructural.

   Contraste verificado (fórmula WCAG, no percepción): --ink sobre
   --bg-alt = 14.17:1, --ink-soft = 6.19:1, --accent-dark (kicker) =
   5.10:1 — los 3 por encima de AA (4.5:1). --ink-faint baja de 3.42:1
   a 3.15:1, ya por debajo de AA igual que sobre --bg (3.42:1): no es
   una regresión nueva, es una condición preexistente de ese token
   (ya documentado como "faint" a propósito, nunca portador único de
   significado). No se usa --ink-faint dentro de este bloque. */
body[data-lab="v2"] .ficha-v2-hero {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
  padding-block: clamp(1.7rem, 4vw, 2.4rem) clamp(2rem, 4.5vw, 2.8rem);
}

/* =============================================================
   COMPARADOR D2 — SELECCIÓN → CONFIRMAR → COMPARAR (PROTOTIPO,
   en staging, NO desplegado)

   Extiende .compare-selector-v2 (D1, arriba) sin tocar sus reglas: las
   nuevas reglas de esta sección ganan por orden de aparición (misma
   especificidad, más abajo en el archivo) donde hace falta sobreescribir
   (p. ej. quitar el max-width:860px de D1 — ver nota junto a esa regla).
   Todo lo nuevo vive bajo estas clases o bajo body[data-lab="v2"] cuando
   corresponde; nunca se toca styles.css.
   ============================================================= */

/* -------------------------------------------------------------
   Fase SELECCIÓN — superficie "más presente" en vez de una tarjeta
   blanca flotando en la página. Reutiliza la MISMA técnica de sangrado
   a sangre (bleed) que .ficha-v2-hero (box-shadow 100vmax + clip-path):
   el fondo llega a los bordes del viewport pero el CONTENIDO real sigue
   limitado al ancho del .container (mismo padding-inline que el resto
   de la página) — así el criterio "≥90% del ancho útil" se cumple por
   definición (el workspace ocupa el 100% del contenido del container)
   sin que el texto/controles lleguen a tocar el borde de la pantalla.
   Sustituye la tarjeta blanca con borde/sombra de D1 (menos "página en
   blanco infinita", sin caer en dashboard/glass/gradiente). */
.compare-selector-v2 {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
  border: 0;
  border-radius: 0;
  padding: clamp(1.6rem, 3.5vw, 2.2rem) 0 clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 2rem;
}
/* D1 limitaba la bandeja a 860px en desktop ancho (era un widget
   pequeño a propósito). D2 la convierte en un workspace estratégico:
   se anula ese límite para que use el ancho real del container. */
@media (min-width: 1100px) { .compare-selector-v2 { max-width: none; } }

/* Resumen colapsado (comparación ya confirmada): chips con miniatura +
   nombre, más "Editar selección". Sustituye a los slots/buscador
   mientras no haga falta tocar la selección. */
/* [hidden] explícito a propósito: display:flex tiene la MISMA
   especificidad que la regla [hidden]{display:none} del user-agent, y
   una regla de autor gana siempre sobre la del user-agent aunque empate
   en especificidad — sin esto, el atributo hidden nativo (usado por JS
   para las 3 vistas mutuamente excluyentes) dejaría de ocultar nada. */
.compare-selector-v2__collapsed:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
}
.compare-selector-v2__collapsed-list {
  display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0;
}
.compare-selector-v2__collapsed-item {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .9rem .3rem .3rem; font-size: .84rem; font-weight: 700;
}
.compare-selector-v2__collapsed-item img {
  width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: var(--surface-2);
}

/* Refinamiento D2.1 — diagnóstico del "vacío" reportado tras uso real:
   con grid-template-columns: 1fr minmax(240px,320px), la columna
   izquierda (1fr) se quedaba con TODO el ancho sobrante del workspace
   (medido: 841.6px reales a 1440px de viewport) aunque su contenido
   real (4 slots + buscador de 340px) solo necesita ~480-520px — un
   hueco muerto de ~460px quedaba entre el buscador y la columna de
   estado/CTA. La columna derecha en sí ya estaba bien (320px, dentro
   de su minmax). El problema era la IZQUIERDA reclamando espacio de
   más, no la distancia entre columnas.
   Arreglo: la columna izquierda pasa a medirse por su contenido real
   (minmax(0,560px), con margen para 4 slots más grandes) y se limita
   el ancho total del workspace (max-width, centrado) en vez de dejar
   que ocupe el 100% del container — así ambas columnas quedan cerca,
   como una sola herramienta, y el sobrante (si lo hay a 1440px+)
   aparece repartido como aire exterior simétrico, no como una grieta
   en medio. El container/página no cambia de ancho. */
.compare-selector-v2__workspace:not([hidden]) {
  display: flex; flex-direction: column; gap: 1.6rem;
}
@media (min-width: 860px) {
  .compare-selector-v2__workspace:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 340px);
    gap: 2.8rem; align-items: start;
    max-width: 940px; margin-inline: auto;
  }
}
.compare-selector-v2__main { display: flex; flex-direction: column; gap: 1.2rem; }
/* .compare-selector-v2__slots hereda align-items:stretch de .__main
   (flex-column) y se estiraba al ancho completo de la columna aunque
   su propio contenido (4 slots) sea más estrecho — invisible (no tiene
   fondo propio) pero es la causa técnica exacta del "vacío": confirma
   que el hueco vivía DENTRO de la columna izquierda, no solo entre
   columnas. align-self la ciñe a su contenido real.
   SOLO desde 860px (mismo corte que las 2 columnas): por debajo, el
   grid 2×2 de slots (@media max-width:480px, más abajo) SÍ depende de
   heredar el ancho completo de .__main vía stretch para repartir sus
   columnas — quitarle el stretch ahí colapsaba el grid al tamaño
   mínimo de su contenido (bug encontrado y corregido en el QA de esta
   misma ronda: slots de ~47px en vez de ocupar su columna). */
@media (min-width: 860px) {
  .compare-selector-v2__slots { align-self: flex-start; }
}
.compare-selector-v2__side {
  display: flex; flex-direction: column; gap: .9rem;
  padding-top: .2rem;
}
@media (min-width: 860px) {
  /* Alinea visualmente el CTA con el bloque de slots, no con la cabecera
     ya repetida arriba (título + contador viven en .__head, común a las
     dos columnas). */
  .compare-selector-v2__side { padding-top: 0; }
}
.compare-selector-v2__help { font-size: .86rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.compare-selector-v2__cta { min-height: 52px; text-align: center; }

/* Aviso "selección obsoleta" (Corrección 2): nunca se reutiliza el
   bloque de resultados para esto — es un área propia, corta, que
   sustituye visualmente a los resultados ocultos mientras el usuario
   no reconfirma. Color ámbar (--gold, ya en tokens): aviso, no error. */
.compare-stale:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius-l); padding: 1.1rem 1.4rem; margin-bottom: 1.8rem;
}
.compare-stale__text { margin: 0; font-weight: 700; color: var(--ink); }

/* Encabezado de resultados — lo primero que se lee tras confirmar
   ("TU COMPARACIÓN · N MODELOS"). tabindex="-1" en el HTML lo hace un
   destino de foco programático real sin añadirlo al orden de tabulación.

   Refinamiento D2.1 (problema 2: "el resultado no impacta"): línea de
   precisión superior (2px, --accent-dark, mismo recurso ya usado en el
   sistema para marcar el arranque de un bloque — no una sombra ni un
   fondo nuevo) + kicker ("Resultado", reutiliza .eyebrow, cero CSS
   nueva) + heading algo más grande. Solución deliberadamente pequeña:
   nada de superficie/tarjeta nueva alrededor — el propio contraste
   tipográfico + el corte de color ya separan "selector" de "resultado"
   al hacer scroll. */
.compare-results-head {
  margin-bottom: 1.3rem; padding-top: 1.1rem;
  border-top: 2px solid var(--accent-dark);
}
.compare-results-kicker { margin-bottom: .5rem; }
.compare-results-heading {
  font-family: var(--display); font-weight: 700; margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.05rem); letter-spacing: -.01em;
}
.compare-results-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }

/* -------------------------------------------------------------
   Tabla — tres estados distintos (nunca un "—" genérico):
   no aplica (tenue, sin dato real posible para ESE producto),
   no publicado (aplica, no tenemos el dato) y no comparable (ambos
   tienen dato pero en unidades distintas — se muestran los dos valores
   reales, sin marcar "mejor"). El significado nunca depende solo del
   color: las tres llevan texto real ("No aplica"/"No publicado"/el
   valor con su unidad), visible también en lectores de pantalla. */
.compare-table td.is-not-applicable,
.compare-cards .row.is-not-applicable dd {
  color: var(--ink-faint); font-style: italic; font-weight: 400;
}
.compare-table td.is-not-published,
.compare-cards .row.is-not-published dd {
  color: var(--ink-faint); font-weight: 400;
}
.compare-table td.is-not-comparable,
.compare-cards .row.is-not-comparable dd {
  color: var(--ink-soft); font-weight: 600;
}
/* D2.1 ronda 2: aviso "no comparable" (Pa vs AW) — una sola vez, pegado
   a la etiqueta de la fila (th en la tabla, dt en las cards), nunca
   repetido en cada valor. Texto real, siempre visible (no tooltip). */
.compare-table .row-label .row-note,
.compare-cards dt .row-note {
  display: block; font-size: .72rem; font-weight: 500; font-style: normal;
  color: var(--ink-faint); margin-top: .2rem; text-transform: none; letter-spacing: normal;
}
/* Refinamiento D2.1 — "la diferencia que decide" como núcleo visual de
   la comparación (problema pedido: elevar su PRESENTACIÓN, no su
   contenido). Rail de acento a la izquierda (3px, --accent-dark) sobre
   la tarjeta ya existente en styles.css (.compare-diff, sin tocar ese
   archivo) — mismo recurso de "raíl" que ya usa el sistema de fichas,
   pero en un color/contexto propio del Comparador, nunca la placa
   oscura de Ficha V2 (identidad propia, no copiada). Encabezado con más
   peso tipográfico para que lea como LA respuesta, no una nota al pie. */
.compare-diff {
  border-left: 3px solid var(--accent-dark);
  background: var(--surface);
}
.compare-diff h2 {
  font-size: 1.2rem; font-family: var(--display); color: var(--ink);
}
.compare-diff p { color: var(--ink); }

/* Refinamiento D2.1 — cards "Elegiría X si…" / "Miraría X si…": la
   arquitectura (grid con align-items:stretch para igualar alturas +
   CTA con margin-top:auto para fijarlo abajo, ambas ya en styles.css)
   ya evita que los CTA "bailen" — se confirma con captura en el QA de
   esta ronda. Solo se retoca presencia: sombra suave (ya no flotan
   sobre --bg-alt como en D2, ahora --bg, así que necesitan una pizca
   más de separación propia) y algo más de aire interior y entre cards. */
.compare-decision-card, .compare-compact-card {
  box-shadow: var(--shadow-s); padding: 1.7rem;
}
.compare-decisions { gap: 1.4rem; }

/* Fila de familia (Rendimiento / Autonomía y energía / Capacidad y
   filtración / Mantenimiento / Uso y compatibilidad): reutiliza
   .compare-table .sect-row, ya definida en styles.css desde antes de
   D1 y nunca usada hasta ahora — no se redefine aquí, solo se activa. */

@media (prefers-reduced-motion: reduce) {
  .compare-selector-v2 * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------
   Móvil — slots: 2×2 en vez de 4-en-fila por debajo de 480px.
   D1 probaba 4 slots de 72px en una fila a ese ancho; medido en vivo
   para D2 (375×667, el móvil más estrecho de los 6 breakpoints): con
   el padding del container + el propio workspace, 4×72px + 3 huecos
   deja el nombre a .66rem en 2 líneas casi ilegible y el "×" de quitar
   pegado al slot vecino. 2×2 con slots más grandes (≈132px, ancho real
   medido a 375px) da nombre legible en 2 líneas a tamaño normal, "×"
   con aire de sobra, imagen reconocible — sin caer en tarjetas enormes
   verticales (siguen siendo compactas, solo 2 por fila en vez de 4). */
@media (max-width: 480px) {
  .compare-selector-v2__slots {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; flex-wrap: unset;
  }
  .compare-selector-v2__slot.compare-slot,
  .compare-selector-v2__slot--next.compare-slot-add,
  .compare-selector-v2__slot--empty {
    width: auto;
  }
  .compare-selector-v2__slot.compare-slot .thumb,
  .compare-selector-v2__slot--next.compare-slot-add {
    width: 100%; height: auto; aspect-ratio: 1/1; font-size: 1.6rem;
  }
  .compare-selector-v2__slot--empty { height: auto; aspect-ratio: 1/1; font-size: .8rem; }
  .compare-selector-v2__slot .name {
    font-size: .78rem; line-height: 1.25; margin-top: .35rem;
    -webkit-line-clamp: 2;
  }
}

/* -------------------------------------------------------------
   Refinamiento D2 (ronda 2) — superficies: la fase de DECISIÓN
   (encuadre + diferencia que decide + cards) se queda en el fondo base
   de la página (--bg) tal cual, ya tenía cards propias de sobra. La
   fase de DATOS (tabla/cards de datos técnicos; el radar vive aquí
   también pero permanece oculto) pasa a una banda a sangre completa en
   --bg-alt — misma técnica que .compare-selector-v2/.ficha-v2-hero
   (box-shadow 100vmax + clip-path): el fondo llega a los bordes del
   viewport, el contenido real sigue en el ancho del container. Objetivo
   pedido explícitamente: que DECISIÓN y DATOS se distingan al hacer
   scroll sin fondos oscuros/gradientes/cards nuevas — reutiliza
   --bg-alt, ya usado para la bandeja de selección, así toda la página
   alterna 2 tonos conocidos en vez de aparecer "en blanco infinito". */
.compare-data-phase {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
  padding-block: clamp(1.6rem, 3.5vw, 2.2rem) clamp(1.8rem, 4vw, 2.4rem);
  margin-top: .4rem;
}