/* =============================================================
   AspiradoraLab · FICHA MAESTRA v1 (prototipo, 2026-10)
   Encapsulado: todo selector va bajo body[data-lab="v2"] .fm, así que
   no afecta a ninguna otra página ni a las fichas legacy y puede
   convivir con ellas. Usa los tokens de styles.css y del sistema V2
   (--lab-plate*, --lab-tint, --lab-line). Sin JS nuevo.
   Orden: DECISIÓN → ENCAJE → PRÁCTICA → EVIDENCIA → OPINIÓN → SALIDA.
   ============================================================= */

body[data-lab="v2"] .fm { --fm-gap: clamp(2rem, 4vw, 2.8rem); }
/* Medidas de línea en «ch de Inter» fijos: ch es el ancho del «0» de la fuente que se está pintando, así que mientras Inter carga
   (display=swap) las cajas en ch eran un 7–11 % más estrechas, el texto cortaba otra línea y la página saltaba al llegar Inter (CLS).
   --fm-ch = avance del «0» de Inter 400 (1292/2048 em): con Inter cargada el ancho es el mismo que con ch; durante la carga ya no cambia. */
body[data-lab="v2"] .fm { --fm-ch: .630859375em; }
/* Reserva de Inter con su misma anchura: mientras Inter carga se pintaba la reserva del sistema (Segoe UI, Arial…), un 5–9 % más
   estrecha, y un texto cortaba una línea menos y saltaba al llegar Inter (CLS). Estas caras son locales (no descargan nada): Arial
   escalada a la anchura media de Inter, medida con los textos de síntesis del catálogo (400 → 105,8 %; negrita → 101,5 %).
   Cubren solo el subconjunto latin de Inter: lo que Inter no trae (✓, →…) se sigue pintando con la fuente del sistema, como antes.
   Con Inter cargada no se usan, así que el aspecto final no cambia. Solo las usa .fm (no afecta a --display ni al resto del sitio). */
@font-face { font-family: "Inter reserva FM"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 105.8%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter reserva FM"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 101.5%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body[data-lab="v2"] .fm { --sans: "Inter", "Inter reserva FM", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: var(--sans); }
body[data-lab="v2"] .fm h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin: 0 0 1.1rem; }
body[data-lab="v2"] .fm h3 { font-size: 1.05rem; margin: 0 0 .55rem; }
body[data-lab="v2"] .fm p { line-height: 1.65; }
body[data-lab="v2"] .fm .fm-kicker { margin: 0 0 .6rem; }
body[data-lab="v2"] .fm ul { padding: 0; margin: 0; list-style: none; }
body[data-lab="v2"] .fm img { max-width: 100%; height: auto; display: block; }

/* ── 1 · DECISIÓN ─────────────────────────────────────────── */
body[data-lab="v2"] .fm-decision {
  background: var(--bg-alt); box-shadow: 0 0 0 100vmax var(--bg-alt); clip-path: inset(0 -100vmax);
  padding-block: 1.6rem 2.2rem; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr);
}
body[data-lab="v2"] .fm-cabecera .ficha-nombre { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin: 0 0 .9rem; }
body[data-lab="v2"] .fm-sintesis { display: flex; flex-direction: column; gap: .55rem; max-width: calc(62 * var(--fm-ch)); }
body[data-lab="v2"] .fm-sintesis-linea { margin: 0; padding-left: .9rem; border-left: 3px solid var(--accent-dark); font-size: .98rem; line-height: 1.55; color: var(--ink-soft); }
body[data-lab="v2"] .fm-sintesis-linea.is-no { border-left-color: var(--gold); }
body[data-lab="v2"] .fm-sintesis-linea strong { display: block; color: var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .1rem; }
body[data-lab="v2"] .fm-dato { margin: .3rem 0 0; padding: .85rem 1rem; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--lab-line); font-size: .95rem; line-height: 1.55; }
body[data-lab="v2"] .fm-dato strong { color: var(--ink); }
body[data-lab="v2"] .fm-fuente { display: block; margin-top: .3rem; font-size: .76rem; font-weight: 600; color: var(--ink-faint); }

/* placa: datos decisivos + compra */
body[data-lab="v2"] .fm-placa { margin-top: 1.4rem; max-width: 560px; }
body[data-lab="v2"] .fm-placa-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; margin: 0 0 .4rem; }
body[data-lab="v2"] .fm-placa-datos dt { font-size: .76rem; color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .fm-placa-datos dd { margin: .1rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--lab-plate-ink); overflow-wrap: anywhere; }
body[data-lab="v2"] .fm-procedencia { display: block; font-family: var(--sans); font-weight: 500; font-size: .7rem; color: var(--lab-plate-ink-soft); }
/* Hueco del CTA: main.js inyecta botón (btn-sm, margin-top .5rem) + línea del retailer (.affiliate-tag).
   Se reserva su altura con min-height (no altura rígida): margen + botón + margen + una línea del rótulo.
   El interlineado del botón se fija aquí para que la reserva sea exacta; si el contenido ocupa más, crece. */
body[data-lab="v2"] .fm .fm-cta { min-height: calc(.5rem + 1.1rem + .85rem * 1.4 + .35rem + .72rem * 1.35); }
body[data-lab="v2"] .fm .fm-cta .btn { line-height: 1.4; }
body[data-lab="v2"] .fm-nota-precio { margin: .55rem 0 0; font-size: .78rem; text-align: center; color: var(--lab-plate-ink-soft); }
body[data-lab="v2"] .fm-estado-tienda {
  margin: .5rem 0 0; padding: .7rem .9rem; border-radius: var(--radius-m); border: 1px dashed var(--lab-plate-line);
  font-size: .88rem; text-align: center; color: var(--lab-plate-ink-soft);
}
body[data-lab="v2"] .fm-comparar { margin-top: .7rem; }

/* hero: Estado B dos columnas desde 960; Estado A una columna estrecha */
body[data-lab="v2"] .fm-hero img { width: 100%; border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--surface); }
body[data-lab="v2"] .fm-decision.is-con-imagen .fm-hero { max-width: 520px; width: 100%; justify-self: center; }
@media (min-width: 960px) {
  body[data-lab="v2"] .fm-decision.is-con-imagen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 3rem; }
  body[data-lab="v2"] .fm-decision.is-con-imagen .fm-hero { justify-self: stretch; max-width: none; position: sticky; top: calc(var(--header-h) + 1rem); }
  body[data-lab="v2"] .fm-decision.is-sin-imagen .fm-cabecera { max-width: 780px; }
}

/* ── zonas comunes ─────────────────────────────────────────── */
body[data-lab="v2"] .fm-zona { padding-block: var(--fm-gap); }
body[data-lab="v2"] .fm-zona:not(.lab-tray) + .fm-zona:not(.lab-tray) { border-top: 1px solid var(--border); }
body[data-lab="v2"] .fm-intro { max-width: calc(70 * var(--fm-ch)); margin: 0 0 1.4rem; color: var(--ink-soft); }

/* ── 2 · ENCAJE ───────────────────────────────────────────── */
body[data-lab="v2"] .fm-encaje.lab-tray { margin-block: 0; }
body[data-lab="v2"] .fm-encaje-columnas { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { body[data-lab="v2"] .fm-encaje-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
body[data-lab="v2"] .fm-encaje-col { background: var(--surface); border: 1px solid var(--lab-line); border-radius: var(--radius-l); padding: 1.2rem 1.3rem; }
body[data-lab="v2"] .fm-encaje-col ul { display: flex; flex-direction: column; gap: .7rem; }
body[data-lab="v2"] .fm-encaje-col li { position: relative; padding-left: 1.6rem; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
body[data-lab="v2"] .fm-encaje-col li::before { position: absolute; left: 0; top: .02rem; font-weight: 800; }
body[data-lab="v2"] .fm-encaje-col.is-si li::before { content: "✓"; color: var(--ok); }
body[data-lab="v2"] .fm-encaje-col.is-ojo li::before { content: "!"; color: var(--gold); left: .3rem; }
body[data-lab="v2"] .fm-contexto { margin-top: 1.8rem; }
body[data-lab="v2"] .fm-contexto-lista { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 860px) { body[data-lab="v2"] .fm-contexto-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body[data-lab="v2"] .fm-contexto-lista > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 1rem 1.1rem; }
body[data-lab="v2"] .fm-contexto-lista dt { font-family: var(--display); font-weight: 600; margin-bottom: .35rem; }
body[data-lab="v2"] .fm-contexto-lista dd { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
body[data-lab="v2"] .fm-ignorar { margin-top: 1.6rem; }
body[data-lab="v2"] .fm-ignorar li { padding-left: 1rem; border-left: 2px solid var(--border-strong); margin-bottom: .5rem; color: var(--ink-soft); }

/* ── 3 · PRÁCTICA ─────────────────────────────────────────── */
body[data-lab="v2"] .fm-figura.is-narrativa { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); align-items: center; margin-bottom: 2.4rem; }
body[data-lab="v2"] .fm-figura.is-narrativa:last-child { margin-bottom: 0; }
body[data-lab="v2"] .fm-figura-media img { width: 100%; border-radius: var(--radius-m); }
body[data-lab="v2"] .fm-figura-texto p { margin: 0; font-size: .95rem; color: var(--ink-soft); max-width: calc(52 * var(--fm-ch)); }
@media (min-width: 860px) {
  body[data-lab="v2"] .fm-figura.is-narrativa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; }
  body[data-lab="v2"] .fm-figura.is-narrativa.is-ancha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  body[data-lab="v2"] .fm-figura.is-reversa .fm-figura-media { order: 2; }
}
body[data-lab="v2"] .fm-figuras-compactas { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 1.6rem; }
body[data-lab="v2"] .fm-figura.is-compacta { margin: 0; }
body[data-lab="v2"] .fm-figura.is-compacta img { width: 100%; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
body[data-lab="v2"] .fm-figura.is-compacta figcaption { margin-top: .45rem; font-size: .85rem; color: var(--ink-soft); }
body[data-lab="v2"] .fm-rutina-intro { margin: 0 0 1.2rem; color: var(--ink-soft); max-width: calc(68 * var(--fm-ch)); }
body[data-lab="v2"] .fm-rutina { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { body[data-lab="v2"] .fm-rutina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { body[data-lab="v2"] .fm-rutina.is-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { body[data-lab="v2"] .fm-rutina.is-equilibrada { align-items: stretch; } }
body[data-lab="v2"] .fm-rutina-col { border: 1px solid var(--border); border-top: 3px solid var(--accent-dark); border-radius: var(--radius-m); padding: 1.1rem 1.2rem; background: var(--surface); }
body[data-lab="v2"] .fm-rutina-col.is-ocasional { border-top-color: var(--lab-line); }
body[data-lab="v2"] .fm-rutina-col.is-tuyo { border-top-color: var(--gold); }
body[data-lab="v2"] .fm-rutina-col li { position: relative; padding-left: 1rem; margin-bottom: .8rem; font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
body[data-lab="v2"] .fm-rutina-col li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }
body[data-lab="v2"] .fm-antes { display: flex; flex-direction: column; gap: 1.4rem; }
body[data-lab="v2"] .fm-antes-item { padding-left: 1.1rem; border-left: 2px solid var(--border); }
body[data-lab="v2"] .fm-antes-item p, body[data-lab="v2"] .fm-texto p { margin: 0 0 .8rem; font-size: .95rem; color: var(--ink-soft); max-width: calc(70 * var(--fm-ch)); }
/* aire entre bloques consecutivos de Práctica (rutina, texto, «antes de comprar»); las figuras ya llevan su margen */
body[data-lab="v2"] .fm-practica > :is(.fm-rutina, .fm-texto, .fm-antes) + * { margin-top: 2rem; }

/* ── 4 · EVIDENCIA ────────────────────────────────────────── */
body[data-lab="v2"] .fm-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1rem; }
body[data-lab="v2"] .fm-tabla caption { text-align: left; font-family: var(--display); font-weight: 600; padding: .9rem 0 .4rem; }
body[data-lab="v2"] .fm-tabla th, body[data-lab="v2"] .fm-tabla td { text-align: left; vertical-align: top; padding: .6rem .2rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
body[data-lab="v2"] .fm-tabla th { width: 38%; font-weight: 600; color: var(--ink); padding-right: 1rem; }
body[data-lab="v2"] .fm-tabla td { color: var(--ink-soft); }
body[data-lab="v2"] .fm-tecnica-completa { margin-top: .4rem; }
body[data-lab="v2"] .fm-tecnica-completa summary { cursor: pointer; font-weight: 700; color: var(--accent-dark); padding: .8rem 0; }
body[data-lab="v2"] .fm-tecnica-completa summary:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 4px; }
body[data-lab="v2"] .fm-sabemos-grupos { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { body[data-lab="v2"] .fm-sabemos-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* con tres grupos, «Con matices» (el de textos largos) ocupa la columna izquierda y «No confirmado» + «Variante» se apilan a la derecha */
@media (min-width: 720px) { body[data-lab="v2"] .fm-sabemos-grupos:has(> .is-variante) > .is-matices { grid-row: span 2; } }
body[data-lab="v2"] .fm-sabemos-grupo.is-matices h3 { color: var(--gold); }
body[data-lab="v2"] .fm-sabemos-grupo.is-no-confirmado h3 { color: var(--ink-faint); }
body[data-lab="v2"] .fm-sabemos-grupo.is-variante h3 { color: var(--accent-dark); }
body[data-lab="v2"] .fm-sabemos-grupo li { position: relative; padding-left: 1rem; margin-bottom: .8rem; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
/* separación entre ítems (.8rem) mayor que el interlineado; el último no suma margen al final de la tarjeta o del grupo */
body[data-lab="v2"] :is(.fm-rutina-col, .fm-sabemos-grupo) li:last-child { margin-bottom: 0; }
body[data-lab="v2"] .fm-sabemos-grupo li::before { content: "—"; position: absolute; left: 0; color: var(--lab-line); }

/* ── 5 · OPINIÓN ──────────────────────────────────────────── */
body[data-lab="v2"] .fm-fuera-dato { margin: 0; padding: 1.1rem 1.2rem; border-radius: var(--radius-m); background: var(--surface-2); border: 1px solid var(--border); max-width: calc(70 * var(--fm-ch)); }
body[data-lab="v2"] .fm-fuera-nota { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-faint); }
body[data-lab="v2"] .fm-valoracion { margin-bottom: 2rem; }
body[data-lab="v2"] .fm-radar { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 720px) { body[data-lab="v2"] .fm-radar { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
/* reserva el espacio del SVG que inyecta main.js (cuadrado): 0 desplazamiento al pintarlo */
body[data-lab="v2"] .fm-radar-figura { margin: 0; width: min(340px, 100%); aspect-ratio: 1 / 1; justify-self: center; }
body[data-lab="v2"] .fm-radar-leyenda { display: flex; flex-direction: column; gap: .45rem; }
body[data-lab="v2"] .fm-radar-leyenda .row { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem .7rem; border-radius: var(--radius-s); background: var(--surface-2); font-size: .9rem; }
body[data-lab="v2"] .fm-radar-leyenda b { font-family: var(--display); }
body[data-lab="v2"] .fm-radar-nota { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-faint); max-width: calc(75 * var(--fm-ch)); }
body[data-lab="v2"] .fm-analisis-seccion { margin-bottom: 1.4rem; }
body[data-lab="v2"] .fm-analisis-seccion p { margin: 0 0 .9rem; color: var(--ink-soft); max-width: calc(72 * var(--fm-ch)); }
body[data-lab="v2"] .fm-analisis-seccion ul li { position: relative; padding-left: 1rem; margin-bottom: .45rem; color: var(--ink-soft); max-width: calc(72 * var(--fm-ch)); }
body[data-lab="v2"] .fm-analisis-seccion ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }
body[data-lab="v2"] .fm-faq-item { padding-block: .9rem; border-bottom: 1px solid var(--border); }
body[data-lab="v2"] .fm-faq-item p { margin: 0; color: var(--ink-soft); max-width: calc(72 * var(--fm-ch)); }

/* ── 6 · SALIDA ───────────────────────────────────────────── */
body[data-lab="v2"] .fm-salida-lista { display: flex; flex-direction: column; gap: .7rem; }
body[data-lab="v2"] .fm-salida-lista a { font-weight: 700; color: var(--accent-dark); }
body[data-lab="v2"] .fm-salida-lista span { color: var(--ink-soft); font-size: .92rem; }
body[data-lab="v2"] .fm-salida-lista .is-ruta a::after { content: " →"; }
body[data-lab="v2"] .fm-fuentes h2 { font-size: 1rem; }
body[data-lab="v2"] .fm-fuentes li { font-size: .85rem; color: var(--ink-soft); margin-bottom: .4rem; line-height: 1.5; overflow-wrap: anywhere; }
body[data-lab="v2"] .fm-cierre { max-width: 360px; margin: 0 auto; padding-block: 1.6rem 2.2rem; text-align: center; }
body[data-lab="v2"] .fm-cierre p { margin: 0; font-family: var(--display); font-weight: 600; }

/* ── REGLA COMÚN DE ANCHO (segunda ronda, 2026-10-17) ──────────────────────────
   Ninguna zona deja su texto pegado a la izquierda con media pantalla vacía.
   · Medida de LECTURA (47,5rem ≈ 760px): encabezados, párrafos, tablas, listas, notas → centrados.
   · Medida AMPLIA (66rem ≈ 1056px): solo los componentes que de verdad tienen varias columnas
     (Encaje, contexto, figuras, rutina, «Lo que sabemos», radar) → centrados, simétricos respecto al texto.
   Regla de familia, sin excepciones por producto: la decide el tipo de componente, no la ficha.
   En móvil no actúa (el contenedor ya es más estrecho que la medida de lectura). */
body[data-lab="v2"] .fm { --fm-lectura: 47.5rem; --fm-amplio: 66rem; }
/* especificidad (0,3,1): por encima de .fm h2 / .fm ul / .fm .fm-kicker, para que el centrado gane siempre */
body[data-lab="v2"] .fm .fm-zona > * { max-width: var(--fm-lectura); margin-inline: auto; }
body[data-lab="v2"] .fm .fm-zona > .fm-kicker { display: flex; }
body[data-lab="v2"] .fm .fm-zona > :is(.fm-encaje-columnas, .fm-contexto, .fm-figura.is-narrativa, .fm-figuras-compactas, .fm-rutina, .fm-sabemos-grupos, .fm-valoracion) { max-width: var(--fm-amplio); }
/* dentro de la medida de lectura sobran los límites en ch de cada párrafo (dejaban hueco a la derecha) */
body[data-lab="v2"] .fm-zona :is(.fm-analisis-seccion p, .fm-analisis-seccion li, .fm-faq-item p, .fm-antes-item p, .fm-texto p, .fm-radar-nota) { max-width: none; }
/* Estado A (sin imagen): la cabecera de decisión es una columna → se centra con la misma medida de lectura */
body[data-lab="v2"] .fm-decision.is-sin-imagen .fm-cabecera { width: 100%; max-width: var(--fm-lectura); margin-inline: auto; }
body[data-lab="v2"] .fm-decision.is-sin-imagen .fm-placa { max-width: none; }
/* Estado B en una columna (< 960): misma cabecera que el Estado A; la imagen solo se añade debajo, centrada.
   Así la disponibilidad de imagen cambia la composición únicamente cuando hay sitio para dos columnas. */
@media (max-width: 959.98px) {
  body[data-lab="v2"] .fm-decision.is-con-imagen .fm-cabecera { width: 100%; max-width: var(--fm-lectura); margin-inline: auto; }
  body[data-lab="v2"] .fm-decision.is-con-imagen .fm-placa { max-width: none; }
}