/* =============================================================
   AspiradoraLab — PROTOTIPO de identidad visual (aislado)
   =============================================================
   Se carga SOLO en 3 páginas de prueba:
     - producto-bosch-bgs41pow1.html
     - categoria-aspiradoras-alfombras.html
     - aspiradora-arena-gato.html

   Aislamiento: todo selector va prefijado por body[data-proto="visual"],
   que solo existe en el <body> de esas 3 páginas. Aunque este archivo se
   enlazara por error en otra página, o aunque estas reglas compartan
   nombre de clase con componentes usados en las otras 44+ URLs (p. ej.
   .ficha-section, .spec-table, .product-role-card), NINGUNA regla de
   aquí puede aplicarse sin ese atributo en el <body> — es la frontera de
   seguridad real, no el nombre del archivo.

   No se toca: recomendador, comparador, buscador, radar (svg de
   buildRadarSVG), botones/CTA (.btn), tracking, contenido editorial.
   No se añaden imágenes ni librerías. Solo CSS.
   ============================================================= */

body[data-proto="visual"] {
  /* -----------------------------------------------------------
     A. COLOR — todo parte de los tokens ya existentes en :root
        (ver styles.css). Solo se añaden mezclas derivadas para
        huecos que la home no necesitaba pero una página interior sí:
        tarjetas con tinte de marca, raíles de color por estado,
        bordes con toque de marca.
     ----------------------------------------------------------- */
  --pv-accent: var(--accent);            /* #0f9e94 — verde principal, ya en uso (CTA, iconos, eyebrow) */
  --pv-accent-dark: var(--accent-dark);  /* #0c6f68 — verde secundario, ya en uso (texto/fondo con contraste AA) */
  --pv-accent-soft: var(--accent-soft);  /* #e3f5f2 — verde de fondo muy suave, ya en uso (badges, iconos) */
  --pv-tint: color-mix(in srgb, var(--accent) 5%, var(--surface));       /* superficie casi blanca con un 5% de verde: firma discreta de marca en tarjetas */
  --pv-border-accent: color-mix(in srgb, var(--accent) 32%, var(--border)); /* borde con toque de marca, más sutil que el verde puro */
  --pv-rail-si: var(--accent-dark);      /* raíl para "para quién sí" / cubierto / decisión positiva */
  --pv-rail-no: var(--ink-faint);        /* raíl para "para quién no" / neutral */
  --pv-rail-aviso: var(--gold);          /* raíl para límites / advertencias / "no confirmado" — reutiliza el ámbar ya usado en frontier-box */
  --pv-rail-stop: var(--danger);         /* raíl para límites de seguridad — reutiliza el rojo ya usado en safety-box */

  /* Halo de fondo, equivalente contenido del .hero-halo de la home:
     un lavado radial muy suave en la esquina superior, SOLO como
     background-image del body (no crea overflow ni rompe layout,
     a diferencia de un elemento posicionado en absoluto). Es la señal
     de marca más "gratuita": aparece en cada carga, cero riesgo de
     layout, se ve incluso en una captura sin scroll. */
  background-image: radial-gradient(60% 38% at 82% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%);
  background-repeat: no-repeat;
  background-color: var(--bg);
}

/* -----------------------------------------------------------
   EL NODO — motivo visual propietario, derivado directamente de
   la geometría del icono real de AspiradoraLab (assets/img/favicon.svg):
   un anillo (círculo hueco) con un punto sólido en el centro
   —el mismo aperture/diana que ya usa el logo—, aquí reducido a
   una sola pieza de interfaz de ~14px. Sustituye a la marca de
   "regla técnica" (barra plana) de la iteración anterior: mismo
   rol —marcar el inicio de un bloque—, pero con una forma que
   nadie más puede reclamar como propia porque es la del propio
   icono, no un recurso genérico de dashboard/SaaS.

   Implementación: un único elemento, sin SVG ni imagen nueva —
   border (el anillo) + radial-gradient (el punto central) sobre
   el mismo círculo. Decorativo puro (aria-hidden en el HTML),
   nunca el único portador de significado: siempre acompaña a un
   texto real (el título, o la etiqueta "Decisión/Evidencia/
   Producto"), nunca lo sustituye.
   ----------------------------------------------------------- */
body[data-proto="visual"] .pv-node {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--pv-accent-dark);
  background: radial-gradient(circle, var(--pv-accent-dark) 0 26%, transparent 27% 100%);
}
body[data-proto="visual"] .pv-node.pv-node-sm { width: 11px; height: 11px; border-width: 1.6px; }

/* -----------------------------------------------------------
   Kicker / rótulo técnico — reutiliza .eyebrow tal cual (misma
   clase que ya usa toda la web; ya trae display:inline-flex y
   gap, así que el .pv-node añadido delante del texto se alinea
   solo, sin CSS de layout adicional) para las etiquetas
   "Decisión" / "Evidencia" / "Producto" que hacen visible la
   lógica editorial.
   ----------------------------------------------------------- */
body[data-proto="visual"] .pv-kicker-row { margin: 1.6rem 0 .6rem; }

/* -----------------------------------------------------------
   Marca de sección — el nodo antes de cada H2 de contenido,
   mismo rol que cumplía la barra plana: señalar dónde empieza
   cada bloque de lectura (y, ahora, con la forma del propio
   icono en vez de un tick genérico).
   ----------------------------------------------------------- */
body[data-proto="visual"] .ficha-section > h2,
body[data-proto="visual"] .guide-body > h2,
body[data-proto="visual"] .ficha-section h2 {
  display: flex; align-items: center; gap: .7rem;
}
body[data-proto="visual"] .ficha-section > h2::before,
body[data-proto="visual"] .guide-body > h2::before,
body[data-proto="visual"] .ficha-section h2::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--pv-accent-dark);
  background: radial-gradient(circle, var(--pv-accent-dark) 0 26%, transparent 27% 100%);
}

/* .ficha-section ya es compartida por las otras 44+ fichas: el
   borde superior estándar se mantiene, solo se sustituye por un
   tono con un toque de marca en vez del gris neutro plano. */
body[data-proto="visual"] .ficha-section { border-top-color: var(--pv-border-accent); }

/* =============================================================
   FICHA DE PRODUCTO (producto-bosch-bgs41pow1.html)
   ============================================================= */

/* Caja de precio/CTA: se mantiene el botón (.btn) intacto, solo
   se viste el contenedor — tinte de superficie, borde de marca y
   una línea superior tipo "regla de laboratorio" vía inset
   box-shadow (no añade una capa nueva, no puede desbordar ni
   solaparse con nada, respeta el radio del borde). */
body[data-proto="visual"] .ficha-precio-box {
  background: var(--pv-tint);
  border-color: var(--pv-border-accent);
  box-shadow: inset 0 3px 0 var(--pv-accent-dark);
  position: relative;
}
/* Corchetes de esquina — motivo de "medición/precisión", puramente
   decorativo (pointer-events:none, no interfiere con el CTA real). */
body[data-proto="visual"] .ficha-precio-box::before,
body[data-proto="visual"] .ficha-precio-box::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .55;
}
body[data-proto="visual"] .ficha-precio-box::before {
  top: 8px; left: 8px; border-top: 2px solid var(--pv-accent-dark); border-left: 2px solid var(--pv-accent-dark);
}
body[data-proto="visual"] .ficha-precio-box::after {
  bottom: 8px; right: 8px; border-bottom: 2px solid var(--pv-accent-dark); border-right: 2px solid var(--pv-accent-dark);
}
@media (max-width: 480px) {
  /* En pantallas muy estrechas los corchetes compiten con el texto: se retiran, el resto del tratamiento se mantiene. */
  body[data-proto="visual"] .ficha-precio-box::before,
  body[data-proto="visual"] .ficha-precio-box::after { display: none; }
}

body[data-proto="visual"] .ficha-badges .badge-accent {
  background: var(--pv-accent-soft); color: var(--pv-accent-dark);
}
body[data-proto="visual"] .ficha-quicklist li { border-bottom-color: var(--pv-border-accent); }
body[data-proto="visual"] .ficha-quicklist b { color: var(--pv-accent-dark); }

/* Ficha técnica: subtítulos de cada grupo (Formato y capacidad, Uso y
   conexión...) con raíl izquierdo — lectura tipo hoja de datos. */
body[data-proto="visual"] .spec-group { border-left: 3px solid var(--pv-border-accent); padding-left: .9rem; }
body[data-proto="visual"] .spec-group h3 { color: var(--pv-accent-dark); }
body[data-proto="visual"] .spec-table th { color: var(--ink-soft); font-family: var(--display); font-weight: 600; letter-spacing: .01em; }

/* "Valoración del editor": el radar (svg) NO se toca. Solo se viste el
   marco del bloque para que combine con el resto — sin tocar
   .radar-wrap (ancho ya calibrado para que ninguna etiqueta se corte). */
body[data-proto="visual"] .radar-note { border-top: 1px dashed var(--pv-border-accent); padding-top: .6rem; }

/* Pros/contras: se conserva el verde/rojo ya existente, solo se
   refuerza el raíl lateral para que la jerarquía "sí/no" sea más
   evidente de un vistazo (mismo patrón en las 3 páginas). */
body[data-proto="visual"] .pc-col.pros { border-left: 4px solid var(--pv-rail-si); }
body[data-proto="visual"] .pc-col.contras { border-left: 4px solid var(--pv-rail-no); }
body[data-proto="visual"] .ideal-para { border-left-color: var(--pv-rail-si); }
body[data-proto="visual"] .no-recomendado { border-left-color: var(--pv-rail-no); }

/* Audience-grid (Vivienda recomendada / Con mascotas / Con alfombras):
   de tarjeta plana a tarjeta con raíl + numeración técnica (contador
   CSS, sin tocar el HTML) para que se lea como ficha de laboratorio,
   no como bloque de blog genérico. */
body[data-proto="visual"] .audience-grid { counter-reset: pv-audience; }
body[data-proto="visual"] .audience-card {
  counter-increment: pv-audience;
  border-left: 3px solid var(--pv-accent-dark);
  background: var(--pv-tint);
  position: relative; padding-left: 1.3rem;
}
body[data-proto="visual"] .audience-card h4::before {
  content: counter(pv-audience, decimal-leading-zero) " · "; color: var(--pv-accent-dark); font-family: var(--display);
}

body[data-proto="visual"] .disclosure-box { border-left: 3px solid var(--gold); }

/* Enlaces dentro de prosa editorial: subrayado de marca en vez del
   subrayado por defecto del navegador. */
body[data-proto="visual"] .editorial-cuerpo a,
body[data-proto="visual"] .guide-body p a {
  color: var(--pv-accent-dark); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--pv-accent) 55%, transparent);
  text-underline-offset: 2px; font-weight: 600;
}
body[data-proto="visual"] .editorial-cuerpo a:hover,
body[data-proto="visual"] .guide-body p a:hover { text-decoration-color: currentColor; }

/* =============================================================
   CATEGORÍA / PROBLEMA (categoria-aspiradoras-alfombras.html)
   ============================================================= */

body[data-proto="visual"] .pets-hero {
  background: var(--pv-tint); border-color: var(--pv-border-accent);
  box-shadow: inset 0 3px 0 var(--pv-accent-dark);
}

body[data-proto="visual"] .hub-problem-card {
  border-left: 4px solid var(--pv-accent-dark); background: var(--pv-tint);
}
body[data-proto="visual"] .hub-problem-card:has(.hub-tag.is-pending) { border-left-color: var(--pv-rail-aviso); }
body[data-proto="visual"] .hub-tag {
  background: var(--pv-accent-soft); color: var(--pv-accent-dark);
  display: inline-flex; align-items: center; gap: .4rem;
}
body[data-proto="visual"] .hub-tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
body[data-proto="visual"] .hub-tag.is-pending { background: var(--gold-soft); color: #93610e; }
body[data-proto="visual"] .hub-links a { color: var(--pv-accent-dark); }

body[data-proto="visual"] .cmp-table thead th { border-bottom: 2px solid var(--pv-accent-dark); color: var(--pv-accent-dark); }
body[data-proto="visual"] .cmp-table tbody tr:nth-child(even) td,
body[data-proto="visual"] .cmp-table tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--accent) 3%, transparent); }

body[data-proto="visual"] .excluded-box { border-left: 4px solid var(--pv-rail-aviso); border-style: solid; background: var(--gold-soft); }
body[data-proto="visual"] .excluded-box h4:first-child { color: var(--pv-accent-dark); }
body[data-proto="visual"] .excluded-box h4:first-child::before { content: "✓ "; }
body[data-proto="visual"] .excluded-box h4:not(:first-child)::before { content: "— "; color: var(--ink-faint); }

/* =============================================================
   PÁGINA DE PROBLEMA/DECISIÓN PROFUNDA (aspiradora-arena-gato.html)
   ============================================================= */

body[data-proto="visual"] .litter-hero {
  background: var(--pv-tint); border-color: var(--pv-border-accent);
  box-shadow: inset 0 3px 0 var(--pv-accent-dark);
}

/* Tabla de decisión: cabecera con raíl de marca; las etiquetas de
   estado ganan un punto de color para no depender solo del texto
   dentro de la propia etiqueta (la etiqueta ya tiene texto propio,
   el punto es refuerzo, nunca el único portador de significado). */
body[data-proto="visual"] .decision-table thead th { border-bottom: 2px solid var(--pv-accent-dark); color: var(--pv-accent-dark); }
body[data-proto="visual"] .decision-tag { display: inline-flex; align-items: center; gap: .4rem; }
body[data-proto="visual"] .decision-tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }

body[data-proto="visual"] .safety-box { box-shadow: inset 0 3px 0 var(--pv-rail-stop); }
body[data-proto="visual"] .frontier-box { box-shadow: inset 0 3px 0 var(--pv-rail-aviso); }

/* Tarjetas "qué producto responde a cada bifurcación": numeración
   técnica vía contador CSS (01, 02, 03…) + raíl de marca, mismo
   lenguaje que las audience-card de la ficha de producto. */
body[data-proto="visual"] .product-role-card {
  counter-increment: pv-role; border-left: 3px solid var(--pv-accent-dark); background: var(--pv-tint);
  position: relative;
}
body[data-proto="visual"] .product-role-card:first-of-type { counter-reset: pv-role 1; }
body[data-proto="visual"] .product-role-tag { background: var(--pv-accent-soft); color: var(--pv-accent-dark); }
body[data-proto="visual"] .product-role-card h3::before {
  content: counter(pv-role, decimal-leading-zero) " "; color: var(--ink-faint); font-family: var(--display); font-weight: 500;
}

body[data-proto="visual"] .faq-item { border-left: 3px solid var(--pv-border-accent); padding-left: 1rem; margin-bottom: 1.2rem; }
body[data-proto="visual"] .faq-item h3 { font-size: 1rem; margin-bottom: .35rem; }
body[data-proto="visual"] .faq-item p { color: var(--ink-soft); font-size: .94rem; line-height: 1.6; margin: 0; }

/* -----------------------------------------------------------
   Accesibilidad / movimiento reducido
   Ningún elemento nuevo de este archivo depende solo del color
   (los estados ya llevan texto propio: "Robot", "Manual", "NO
   CONFIRMADO"...); los puntos de color son refuerzo, no el único
   portador de significado. No se ha introducido ninguna animación
   con bucle propio; el único movimiento (transform en :hover ya
   existente en .card/.tool-card) es del sistema global, no de este
   archivo. Esta regla es una salvaguarda explícita por si en el
   futuro se añade alguna transición aquí.
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-proto="visual"] * { transition: none !important; animation: none !important; }
}