/* ==========================================================================
   Elige Tú Mismo · sistema visual de la plataforma
   --------------------------------------------------------------------------
   Esta hoja es de la MARCA, no de ningún mercado. Tiene que servir igual el
   día que entre un vertical de monitores o de bicicletas, así que aquí no hay
   ni un color de formato de cafetera: esos viven en la hoja del vertical, que
   se genera desde su definición y se carga encima de ésta.

   Esto es una HERRAMIENTA DE COMPRA, no una revista. La referencia es Idealo,
   Google Shopping, Kelkoo: fondo blanco, mucha densidad, filtros a la
   izquierda, ordenación arriba y comparar siempre a mano. Tipografía de
   interfaz en todo el sitio; ningún titular con serif.

   La restricción que da forma a la retícula: aquí NO hay precio que enseñar
   (no hay fuente autorizada) y sólo hay una tienda. Así que la columna que
   decide no es el precio, son las ESPECIFICACIONES. Donde un comparador pone
   la cifra en euros, este pone los datos que deciden la compra, y el precio
   se va a buscar a Amazon con un botón. El hueco no se deja vacío: se llena
   con lo único que aquí sí está comprobado.

   Se mantiene el alfabeto de los cuatro estados (declarado / incoherente /
   no disponible / editorial), que es la honestidad del sitio convertida en
   color. Sobre blanco se apoya en la marca y en el tinte, no en la
   temperatura.

   Sin dependencias, sin fuentes remotas, sin framework.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Superficies. Gris muy claro de fondo para que las tarjetas blancas se
     recorten: es lo que da la sensación de rejilla de producto. */
  --pagina:       #eef1f5;
  --fondo:        #ffffff;
  --fondo-2:      #f7f9fb;
  --fondo-3:      #eef2f6;
  --borde:        #dce1e8;
  --borde-fuerte: #c2cad5;

  /* Texto */
  --texto:        #14181d;
  --texto-medio:  #545e6b;
  --texto-tenue:  #7b848f;

  /* Acción. Azul de interfaz: enlaces, controles, selección. */
  --accion:        #0a5fd0;
  --accion-oscuro: #08489f;
  --accion-suave:  #e8f0fd;
  --accion-borde:  #b6cff5;

  /* El botón de ir a Amazon. Es la única llamada fuerte del sitio y ocupa el
     sitio donde otros comparadores ponen el precio. */
  --amazon:        #ffa41c;
  --amazon-alto:   #ffb23f;
  --amazon-borde:  #e0901a;
  --amazon-tinta:  #14100a;

  /* Los cuatro estados. Son el alfabeto del sitio. */
  --declarado:      #4d5763;   /* neutro: es un hecho, no una virtud        */
  --contradictorio: #b45309;   /* ámbar: mira esto                          */
  --contra-fondo:   #fff7ed;
  --contra-borde:   #f4cf9a;
  --no-disponible:  #98a1ac;   /* apagado: aquí no hay nada, y está bien    */
  --editorial:      #0a5fd0;   /* azul de interfaz: esto lo decimos nosotros */
  --editorial-suave:#e8f0fd;

  /* Color por formato. Sustituye a los dibujos de producto: no finge ser una
     foto, sirve para localizar un formato de un vistazo en la rejilla. */

  /* Medidas. Ancho grande: un comparador necesita columnas. */
  --ancho:       1340px;
  --ancho-texto: 70ch;
  --filtros:     248px;
  --radio:       8px;
  --radio-s:     5px;
  --nav-alto:    56px;
  --sombra:      0 1px 2px rgba(16, 24, 40, .06);
  --sombra-alta: 0 4px 14px rgba(16, 24, 40, .1);

  --salida: cubic-bezier(.22, .61, .36, 1);

  /* Tipografía: interfaz en todo. Ninguna serif en ninguna parte.
     Inter va autoalojada (ver §1b) porque `system-ui` reparte una fuente
     distinta por sistema operativo y una rejilla de especificaciones se mide
     en píxeles: lo que en Linux cabía en una línea, en Windows saltaba a dos.
     Detrás quedan las de sistema por si el woff2 no llega, y al final
     `sans-serif`, que es la única palabra «serif» admitida en este fichero:
     pide expresamente lo contrario de una serif.
     El monoespaciado sigue siendo del sistema: sólo lo usan los contadores
     pequeños y las rutas de evidencia, no merece 15 KB de descarga, y ningún
     navegador resuelve `monospace` con una serif. */
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
          Consolas, monospace;
}

/* --- 1b. Fuentes autoalojadas ------------------------------------------- */
/* Ni una petición a fonts.googleapis.com ni a fonts.gstatic.com: los woff2
   viven en /fuentes/ y los sirve este mismo servidor, igual que en
   cesarcabreraai.com. No se cede la IP del visitante a un tercero, así que no
   hay que pedir consentimiento por este motivo.
   Es un único fichero variable (400-700) en vez de un archivo por peso. El
   `unicode-range` hace que el subconjunto latin-ext (85 KB) sólo se descargue
   si alguna página llega a necesitarlo; el castellano entero cabe en latin
   (48 KB), acentos, eñes y signos de apertura incluidos. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fuentes/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fuentes/inter-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- 2. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* `clip` y no `hidden`: `hidden` rompe position:sticky, y tanto los filtros
     como el comparador dependen de elementos fijos. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--pagina);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.22;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
h3 { font-size: 1.02rem; }
h4 { font-size: .9rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--accion); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Los controles de formulario NO heredan la tipografía: sin esto el navegador
   les pone la suya, que en algún motor es una serif, y bastaba con olvidar el
   `font` en una regla (`.nav-menu`, `.cerrar-filtros`) para que se colara. Se
   fuerza en un solo sitio para que ningún control futuro se escape. */
input, select, textarea, button, optgroup, option { font-family: inherit; }
::placeholder { font-family: inherit; }

code, kbd, samp, pre, .num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* Las rutas de evidencia (`evidencia/amazon/dp_B0FN7STVNH_20260930.html.gz`)
   son una sola palabra de 45 caracteres. Sin esto, en móvil estiraban su
   rejilla y se llevaban por delante el ancho de toda la página. */
code { overflow-wrap: anywhere; }
.num { font-feature-settings: "tnum" 1; }

img, svg { max-width: 100%; }

/* `hidden` tiene que ganar siempre. Varias piezas del sitio se ocultan con el
   atributo (los globos de recuento, los botones de limpiar) y cualquier regla
   posterior que les fije un `display` lo anulaba sin avisar. */
[hidden] { display: none !important; }

.contenedor {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto;
}
.seccion { padding-block: clamp(1.2rem, 3vw, 2rem); }

.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
a.solo-lector:focus {
  position: fixed; top: .5rem; left: .5rem; width: auto; height: auto;
  clip: auto; clip-path: none; padding: .6rem 1rem; background: var(--accion);
  color: #fff; border-radius: var(--radio-s); z-index: 999;
}

.migas {
  font-size: .82rem; color: var(--texto-tenue);
  margin-bottom: .5rem;
}
.migas a { color: var(--texto-medio); }

/* --- 3. Navegación ------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.nav-int {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto;
  height: var(--nav-alto);
  display: flex; align-items: center; gap: 1.1rem;
}
.marca {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--texto); flex-shrink: 0;
}
.marca:hover { text-decoration: none; }
.marca-sub {
  font-weight: 500; font-size: .74rem; color: var(--texto-tenue);
  border-left: 1px solid var(--borde); padding-left: .5rem; margin-left: .1rem;
}

.nav-enlaces {
  display: flex; align-items: center; gap: .15rem;
  margin-left: auto;
}
.nav-enlaces a {
  color: var(--texto-medio); font-size: .875rem; font-weight: 500;
  padding: .4rem .55rem; border-radius: var(--radio-s);
}
.nav-enlaces a:hover { background: var(--fondo-3); color: var(--texto); text-decoration: none; }
.nav-enlaces a[aria-current="page"] { color: var(--texto); font-weight: 650; }

.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem; border-radius: var(--radio-s);
  border: 1px solid var(--borde-fuerte); background: var(--fondo);
  color: var(--texto); font-size: .86rem; font-weight: 600;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--fondo-3); text-decoration: none; }
.nav-cta[data-cuenta]:not([data-cuenta="0"]) {
  border-color: var(--accion-borde); background: var(--accion-suave); color: var(--accion-oscuro);
}
.nav-cta .cuenta:not(:empty) {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: var(--accion); color: #fff;
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nav-cta-icono { display: none; }

.nav-menu {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radio-s);
  border: 1px solid var(--borde-fuerte); background: var(--fondo);
  color: var(--texto); cursor: pointer;
}

@media (max-width: 1060px) {
  .nav-enlaces {
    position: absolute; top: var(--nav-alto); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fondo); border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-alta); padding: .4rem;
    display: none;
  }
  .nav-enlaces.abierto { display: flex; }
  .nav-enlaces a { padding: .65rem .7rem; font-size: .95rem; }
  .nav-menu { display: inline-flex; }
  .nav-cta { margin-left: auto; }
  .nav-cta-texto { display: none; }
  .nav-cta-icono { display: inline-flex; }
}

/* El descriptivo de la marca es lo primero que sobra: sin él caben el nombre,
   el acceso al comparador y el menú sin que nada se salga de la pantalla. */
@media (max-width: 760px) {
  .nav-int { gap: .6rem; }
  .marca-sub { display: none; }
}

/* --- 4. Los cuatro estados: el alfabeto --------------------------------- */

.dato {
  display: inline-flex; align-items: baseline; gap: .34rem;
  font-variant-numeric: tabular-nums;
}
.marca-estado {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
  align-self: center; background: currentColor;
}
.dato .valor { font-weight: 550; }

.e-declarado       { color: var(--texto); }
.e-declarado .marca-estado { background: var(--declarado); opacity: .45; }

.e-contradictorio  { color: var(--contradictorio); }
.e-contradictorio .valor { font-weight: 600; }
.e-contradictorio .marca-estado { background: var(--contradictorio); }

.e-no_disponible   { color: var(--no-disponible); }
.e-no_disponible .valor { font-weight: 450; }
.e-no_disponible .marca-estado {
  background: none; border: 1px dashed var(--no-disponible); width: 8px; height: 8px;
}

.e-editorial       { color: var(--editorial); }
.e-editorial .marca-estado { background: var(--editorial); }

.dato-bruto {
  font-family: var(--mono); font-size: .78em;
  color: var(--texto-tenue); text-decoration: line-through;
  text-decoration-color: var(--contradictorio);
}

/* --- 5. Botones y controles --------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .52rem .85rem; border-radius: var(--radio-s);
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  transition: background .12s var(--salida), border-color .12s var(--salida);
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-amazon {
  background: var(--amazon); border-color: var(--amazon-borde);
  color: var(--amazon-tinta); box-shadow: var(--sombra);
}
.btn-amazon:hover:not(:disabled) { background: var(--amazon-alto); }

.btn-accion { background: var(--accion); border-color: var(--accion); color: #fff; }
.btn-accion:hover:not(:disabled) { background: var(--accion-oscuro); }

.btn-fantasma {
  background: var(--fondo); border-color: var(--borde-fuerte); color: var(--texto);
}
.btn-fantasma:hover:not(:disabled) { background: var(--fondo-3); }
.btn-fantasma[aria-pressed="true"] {
  background: var(--accion-suave); border-color: var(--accion-borde);
  color: var(--accion-oscuro);
}

.btn-s { padding: .36rem .6rem; font-size: .8rem; }
.btn-ancho { width: 100%; }

.nota-boton {
  font-size: .74rem; color: var(--texto-tenue); margin: .4rem 0 0; line-height: 1.35;
}

select, input[type="text"], input[type="search"] {
  font: inherit; font-size: .86rem;
  padding: .42rem .55rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s);
  background: var(--fondo); color: var(--texto);
}

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .45rem; border-radius: var(--radio-s);
  background: var(--fondo-3); border: 1px solid var(--borde);
  font-size: .76rem; color: var(--texto-medio); font-weight: 550;
  white-space: nowrap;
}
.chip-aviso {
  background: var(--contra-fondo); border-color: var(--contra-borde);
  color: var(--contradictorio);
}
.chip-accion {
  background: var(--accion-suave); border-color: var(--accion-borde);
  color: var(--accion-oscuro);
}
.chip .num { font-weight: 700; color: var(--texto); }
.chip-aviso .num { color: var(--contradictorio); }

/* --- 6. La retícula de la herramienta ----------------------------------- */
/* Filtros a la izquierda, catálogo a la derecha. Es la retícula de Idealo y
   la de Kelkoo, y es la que hace que el sitio se lea como herramienta. */

.app {
  width: min(100% - 2rem, var(--ancho));
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--filtros) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-block: 1rem 2.5rem;
}

.app-cabecera {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem;
}
.app-cabecera h1 { margin-bottom: .15rem; }
.app-cabecera p {
  color: var(--texto-medio); font-size: .92rem; margin: 0; max-width: 78ch;
}

/* --- 7. Panel de filtros ------------------------------------------------ */

.filtros {
  position: sticky; top: calc(var(--nav-alto) + 12px);
  max-height: calc(100vh - var(--nav-alto) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.filtros-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .7rem .8rem; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--fondo); z-index: 2;
  border-radius: var(--radio) var(--radio) 0 0;
}
.filtros-cab h2 { font-size: .92rem; margin: 0; }
.filtros-limpiar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--accion); font-weight: 600;
}
.filtros-limpiar[hidden] { display: none; }

.grupo-filtro { border-bottom: 1px solid var(--borde); }
.grupo-filtro:last-child { border-bottom: 0; }
.grupo-filtro > summary {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  color: var(--texto);
}
.grupo-filtro > summary::-webkit-details-marker { display: none; }
.grupo-filtro > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 1.8px solid var(--texto-tenue); border-bottom: 1.8px solid var(--texto-tenue);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--salida);
}
.grupo-filtro[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.grupo-filtro > summary:hover { background: var(--fondo-2); }
.grupo-filtro .activos {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--accion); color: #fff;
  font-size: .66rem; font-weight: 700;
}
.grupo-cuerpo { padding: 0 .8rem .7rem; }

.opcion {
  display: flex; align-items: center; gap: .5rem;
  padding: .26rem 0; cursor: pointer;
  font-size: .845rem; color: var(--texto);
}
.opcion:hover { color: var(--accion); }
.opcion input { margin: 0; accent-color: var(--accion); width: 15px; height: 15px; flex-shrink: 0; }
.opcion-texto { flex: 1; min-width: 0; }
.opcion-cuenta {
  font-size: .76rem; color: var(--texto-tenue);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
/* Recuento a cero: la opción sigue visible pero se apaga. Esconderla haría
   que el panel bailase a cada clic. */
.opcion.vacia { color: var(--texto-tenue); cursor: not-allowed; }
.opcion.vacia input { opacity: .45; }

.punto-formato {
  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
  background: var(--color-formato, var(--texto-tenue));
}

/* --- 8. Barra de herramientas (ordenación) ------------------------------ */

.herramientas {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem .8rem; margin-bottom: .9rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
  position: sticky; top: var(--nav-alto); z-index: 30;
}
.herramientas-cuenta { font-size: .875rem; color: var(--texto-medio); }
.herramientas-cuenta b { color: var(--texto); font-variant-numeric: tabular-nums; }
.herramientas-sep { margin-left: auto; }
.herramientas label { font-size: .82rem; color: var(--texto-medio); }
.abrir-filtros { display: none; }

.fichas-activas { display: flex; flex-wrap: wrap; gap: .35rem; }
.ficha-activa {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .3rem .2rem .5rem; border-radius: var(--radio-s);
  background: var(--accion-suave); border: 1px solid var(--accion-borde);
  color: var(--accion-oscuro); font-size: .78rem; font-weight: 600;
}
.ficha-activa button {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: inherit; display: inline-flex; line-height: 0; opacity: .7;
}
.ficha-activa button:hover { opacity: 1; }

/* --- 9. Rejilla y tarjeta de producto ----------------------------------- */

.rejilla {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  transition: border-color .12s var(--salida), box-shadow .12s var(--salida);
}
.tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-alta); }
.tarjeta:has(input[data-comparar]:checked) {
  border-color: var(--accion-borde); box-shadow: 0 0 0 2px var(--accion-suave);
}

/* El azulejo de formato. NO es una foto ni finge serlo: es el formato en
   color y el dato de cabecera de esa máquina en cifras grandes. Ocupa el
   sitio de la imagen y dice algo que la imagen no diría. */
.tarjeta-tile {
  display: block; position: relative;
  /* El hueco de la derecha es para la casilla de comparar, que va encima. */
  padding: .6rem 5.6rem .55rem .7rem;
  min-height: 104px;
  background: var(--tinte, var(--fondo-3));
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
}
.tarjeta-tile:hover { text-decoration: none; }
.tile-formato {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-formato, var(--texto-medio));
}
.tile-marca {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-tenue); margin-top: .1rem;
}
.tile-cifras {
  display: flex; align-items: flex-end; gap: .9rem; margin-top: .45rem;
}
.tile-cifra { display: block; line-height: 1.05; }
.tile-cifra b {
  display: block; font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--color-formato, var(--texto));
}
.tile-cifra i {
  display: block; font-style: normal; font-size: .68rem; font-weight: 600;
  color: var(--texto-medio); margin-top: .1rem;
}
/* Sin dato de cabecera declarado no se inventa una cifra: se dice. */
.tile-sindato {
  margin-top: .5rem; font-size: .76rem; color: var(--texto-tenue);
  display: block; max-width: 22ch; line-height: 1.3;
}

.tarjeta-check {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .42rem .22rem .32rem; border-radius: var(--radio-s);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--borde-fuerte);
  font-size: .74rem; font-weight: 600; color: var(--texto-medio); cursor: pointer;
}
.tarjeta-check:hover { border-color: var(--accion-borde); color: var(--accion-oscuro); }
.tarjeta-check input { margin: 0; accent-color: var(--accion); width: 14px; height: 14px; }
.tarjeta-check:has(input:checked) {
  background: var(--accion); border-color: var(--accion); color: #fff;
}
.tarjeta-check:has(input:disabled) { opacity: .5; cursor: not-allowed; }

.tarjeta-cuerpo { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tarjeta-cuerpo h3 {
  font-size: .925rem; font-weight: 650; line-height: 1.28; margin: 0;
}
.tarjeta-cuerpo h3 a { color: var(--texto); }
.tarjeta-cuerpo h3 a:hover { color: var(--accion); }

/* La lista de especificaciones dentro de la tarjeta. Esto es lo que en un
   comparador de precios sería la fila de precios por tienda: aquí es lo que
   de verdad decide, así que ocupa ese sitio y ese peso visual. */
.tarjeta-specs {
  margin: 0; display: grid; gap: .1rem;
  font-size: .8rem;
}
.tarjeta-specs > div {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .12rem 0; border-bottom: 1px dotted var(--borde);
}
.tarjeta-specs > div:last-child { border-bottom: 0; }
.tarjeta-specs dt { color: var(--texto-tenue); flex-shrink: 0; min-width: 5.6rem; }
.tarjeta-specs dd { margin: 0; text-align: right; margin-left: auto; }
.tarjeta-specs .dato { justify-content: flex-end; }
/* El valor de una tarjeta puede ocupar dos líneas («Vaporizador manual» en una
   columna de 226 px). La marca de estado se ancla a la primera, no al centro
   del bloque, o se queda flotando lejos de lo que marca. */
.tarjeta-specs .marca-estado { align-self: flex-start; margin-top: .42em; }

.tarjeta-apto {
  margin: 0; font-size: .78rem; color: var(--texto-medio); line-height: 1.35;
}
.tarjeta-apto b { color: var(--texto); font-weight: 650; }

.tarjeta-pie {
  margin-top: auto; padding: .55rem .7rem .65rem;
  border-top: 1px solid var(--borde); background: var(--fondo-2);
  display: flex; flex-direction: column; gap: .45rem;
}
.tarjeta-sellos { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* Sustituye a la línea de precio. Deja claro que el precio está en Amazon y
   que aquí no hay un hueco sin rellenar. */
.tarjeta-precio {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: .78rem; color: var(--texto-tenue);
}

/* --- 10. Color por formato ---------------------------------------------- */


.sello-formato {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .44rem; border-radius: var(--radio-s);
  background: var(--tinte); color: var(--color-formato);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid currentColor;
}

/* Atajos de formato: la fila de enlaces a cada categoría. */
.formatos-atajo { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.formatos-atajo .sello-formato { gap: .35rem; }
.formatos-atajo a:hover { text-decoration: none; filter: brightness(.94); }
.formatos-atajo .num { font-weight: 700; }

/* Fila de cifras. Se usa en las páginas de método y comprobaciones, donde el
   recuento es el contenido y no un adorno de portada. */
.cifras {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.cifra {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .7rem .85rem;
}
.cifra b {
  display: block; font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cifra span { display: block; font-size: .8rem; color: var(--texto-medio); margin-top: .2rem; }

.acciones { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --- 11. Estados vacíos ------------------------------------------------- */

.vacio {
  grid-column: 1 / -1;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 2rem 1.4rem; text-align: center;
}
.vacio h3 { margin-bottom: .4rem; }
.vacio p { color: var(--texto-medio); max-width: 52ch; margin-inline: auto; font-size: .9rem; }

/* --- 12. Bloques de contenido ------------------------------------------- */

.bloque {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem 1.1rem;
}
.bloque > :last-child { margin-bottom: 0; }
.bloque h3 { display: flex; align-items: center; gap: .4rem; }
.bloque-aviso { background: var(--contra-fondo); border-color: var(--contra-borde); }
.bloque-aviso h3 { color: var(--contradictorio); }
.bloque-editorial { background: var(--accion-suave); border-color: var(--accion-borde); }

.cuerpo-editorial { max-width: var(--ancho-texto); }
.cuerpo-editorial p { margin-bottom: .8rem; line-height: 1.6; }
.cuerpo-editorial h3 { margin-top: 1.4rem; }

.lista-limpia { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lista-marcada {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
  font-size: .9rem;
}
.lista-marcada li { display: flex; gap: .5rem; align-items: flex-start; }
.lista-marcada svg { flex-shrink: 0; margin-top: .2em; }
.lista-si svg { color: #0b7a4b; }
.lista-no svg { color: var(--contradictorio); }

/* Banda editorial: el ángulo del sitio vive aquí, no en una portada entera. */
.banda {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .9rem; border-radius: var(--radio);
  background: var(--contra-fondo); border: 1px solid var(--contra-borde);
  font-size: .875rem; color: #7c3d06;
}
.banda svg { flex-shrink: 0; color: var(--contradictorio); }
.banda strong { color: #6b3405; }
.banda a { margin-left: auto; white-space: nowrap; font-weight: 650; }

.tira-confianza {
  display: flex; flex-wrap: wrap; gap: .1rem 1.4rem;
  padding: .5rem 0 0; font-size: .8rem; color: var(--texto-tenue);
}
.tira-confianza span { display: inline-flex; align-items: center; gap: .35rem; }
.tira-confianza b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* --- 13. Ficha de producto ---------------------------------------------- */

.ficha-cab {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
}
.ficha-panel {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  position: sticky; top: calc(var(--nav-alto) + 12px);
}
.ficha-tile { padding: 1rem; background: var(--tinte); border-bottom: 1px solid var(--borde); }
.ficha-tile .tile-cifra b { font-size: 2rem; }
.ficha-tile .tile-cifras { gap: 1.4rem; flex-wrap: wrap; }
.ficha-compra { padding: .8rem; display: grid; gap: .5rem; }
.ficha-nota-imagen {
  padding: .6rem .8rem; border-top: 1px solid var(--borde);
  font-size: .75rem; color: var(--texto-tenue); line-height: 1.4; background: var(--fondo-2);
}

.ficha-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .7rem; }

.titulo-resumen {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); margin: 1.2rem 0 .5rem;
}
.ficha-resumen {
  margin: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ficha-resumen > div {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .5rem .7rem;
}
.ficha-resumen dt { font-size: .76rem; color: var(--texto-tenue); margin-bottom: .1rem; }
.ficha-resumen dd { margin: 0; font-size: .92rem; }
.seccion-ficha { margin-top: 1.8rem; }
.seccion-ficha > h2 {
  padding-bottom: .4rem; border-bottom: 2px solid var(--borde); margin-bottom: .9rem;
}
.nota-seccion {
  color: var(--texto-tenue); font-size: .82rem; max-width: 70ch; margin-bottom: .9rem;
}

.pros-contras { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.similares { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); }

/* --- 14. Tabla de especificaciones -------------------------------------- */

.tabla-specs { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--fondo); }
.tabla-specs caption {
  text-align: left; font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-medio);
  padding: .7rem .8rem .35rem;
}
.tabla-specs th, .tabla-specs td {
  padding: .46rem .8rem; text-align: left; border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.tabla-specs th[scope="row"] { font-weight: 550; color: var(--texto-medio); width: 40%; }
.tabla-specs thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-medio); background: var(--fondo-3); width: auto;
}
.tabla-specs tr:last-child th, .tabla-specs tr:last-child td { border-bottom: 0; }
.tabla-specs tbody tr:nth-child(even) { background: var(--fondo-2); }
.grupo-specs {
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; margin-bottom: .8rem;
}
.ayuda-campo { display: block; font-size: .76rem; color: var(--texto-tenue); margin-top: .1rem; }

/* --- 15. Barras de puntuación ------------------------------------------- */

/* Cuatro ejes calculados y dos declarados pendientes. La barra rayada del eje
   pendiente no es adorno: distingue «no lo hemos calculado» de «sale cero»,
   que es la diferencia que este sitio se toma en serio. */
.puntuaciones { display: grid; gap: .75rem; }
.punt {
  display: grid; gap: .18rem;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}
.punt-nombre { font-size: .875rem; font-weight: 600; }
.punt-valor {
  font-size: .875rem; font-weight: 700; color: var(--editorial);
  font-variant-numeric: tabular-nums; text-align: right;
}
.punt-pista {
  grid-column: 1 / -1;
  height: 7px; border-radius: 4px; background: var(--fondo-3); overflow: hidden;
}
.punt-relleno { display: block; height: 100%; border-radius: 4px; background: var(--editorial); }
.punt-motivo {
  grid-column: 1 / -1;
  font-size: .76rem; color: var(--texto-tenue); line-height: 1.35;
}
.punt-pendiente .punt-valor { color: var(--texto-tenue); font-weight: 600; }
.punt-pendiente .punt-pista {
  background: repeating-linear-gradient(-45deg, var(--fondo-3) 0 5px, var(--borde) 5px 10px);
}

/* --- 16. Comparador ----------------------------------------------------- */

.cmp-controles {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .6rem .8rem; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.interruptor { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; cursor: pointer; }
.interruptor input { margin: 0; accent-color: var(--accion); width: 15px; height: 15px; }

.cmp-envoltura {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); margin-top: .9rem;
}

/* `table-layout: fixed` reparte el ancho a partes iguales en vez de dejar que
   el contenido más largo empuje la tabla. Sin esto, el botón «Ver precio en
   Amazon» de cada cabecera desbordaba la pantalla.
   Y la envoltura NO lleva `overflow-x: auto`: forzaría `overflow-y` a `auto`
   también, la tabla pasaría a ser su propio contenedor de desplazamiento y la
   cabecera fija dejaría de pegarse bajo la navegación. */
.cmp-tabla {
  width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0; font-size: .85rem;
}
/* `break-word`, no `anywhere`: `anywhere` parte las palabras por donde sea en
   cuanto la columna se estrecha y deja etiquetas como «Funcion / amient / o».
   Sólo se parte una palabra cuando no cabe de ninguna manera. */
.cmp-tabla th, .cmp-tabla td { overflow-wrap: break-word; }
.cmp-tabla td, .cmp-tabla tbody th {
  padding: .5rem .7rem; text-align: left; vertical-align: top;
  border-top: 1px solid var(--borde);
}
.cmp-tabla thead th {
  position: sticky; top: var(--nav-alto); z-index: 20;
  background: var(--fondo); border-bottom: 2px solid var(--borde-fuerte);
  padding: .7rem; text-align: left; vertical-align: top;
}
.cmp-tabla tbody th {
  font-weight: 550; color: var(--texto-medio); width: 26%; background: var(--fondo);
}
.cmp-grupo th {
  position: sticky; top: var(--nav-alto); z-index: 10;
  background: var(--fondo-3); font-size: .74rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--texto-medio);
  padding: .45rem .7rem; border-top: 1px solid var(--borde);
}
.cmp-tabla td.mejor { background: #f1faf5; }
.cmp-col-cabecera { display: grid; gap: .4rem; min-width: 0; }
.cmp-col-cabecera strong { font-size: .9rem; line-height: 1.25; }
.cmp-col-cabecera a { color: var(--texto); }
.cmp-col-cabecera a:hover { color: var(--accion); }
/* El azulejo reducido. Lleva su propio fondo y su propio color de formato, así
   que quien lo coloca —barra flotante o cabecera de columna— sólo pone el
   tamaño. */
.mini {
  display: block; border-radius: var(--radio-s); padding: .4rem .5rem;
  background: var(--tinte, var(--fondo-3)); overflow: hidden;
}
.mini .tile-formato { font-size: .64rem; }
.mini .tile-cifra b { font-size: 1.05rem; color: var(--color-formato, var(--texto)); }
.cmp-quitar {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--texto-tenue); text-align: left; font: inherit; font-size: .76rem;
}
.cmp-quitar:hover { color: var(--contradictorio); }
.cmp-mejor::after {
  content: "mejor"; display: inline-block; margin-left: .35rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  color: #0b7a4b; background: #e6f6ee; border: 1px solid #b6e3cd;
  padding: 0 .28rem; border-radius: 3px; vertical-align: middle;
}
/* Las filas iguales se ven por defecto y sólo se esconden con el interruptor.
   Al revés —ocultas por defecto y reveladas con un `:not()`— el diseño de
   móvil, que redefine `display` en las filas, ganaba por especificidad y
   dejaba el interruptor sin efecto. */
.cmp-envoltura.solo-diferencias .cmp-tabla tbody tr.igual { display: none; }
.cmp-oculta { display: none; }
.insignia-mejor {
  display: inline-block; margin-left: .35rem; vertical-align: middle;
  font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  color: #0b7a4b; background: #e6f6ee; border: 1px solid #b6e3cd;
  padding: 0 .28rem; border-radius: 3px;
}
.barra-texto { font-size: .86rem; color: var(--texto-medio); }
.cmp-pares { display: none; }
.cmp-vacio { padding: 2rem 1.2rem; text-align: center; }

/* Barra flotante de selección */
/* Sin selección la barra no está sólo desplazada fuera de la pantalla: está
   oculta de verdad. Desplazada seguía existiendo —el tabulador entraba en sus
   botones y las capturas de página completa la pintaban— aunque no hubiera
   nada que comparar. */
.barra-comparar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--fondo); border-top: 1px solid var(--borde-fuerte);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .1);
  transform: translateY(110%);
  visibility: hidden; pointer-events: none;
  transition: transform .18s var(--salida), visibility .18s;
}
.barra-comparar.visible { transform: none; visibility: visible; pointer-events: auto; }
.barra-int { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; flex-wrap: wrap; }
.barra-huecos { display: flex; gap: .4rem; }
.hueco { position: relative; }
.hueco-mini { width: 72px; }
.hueco-mini .mini { border: 1px solid var(--borde); }
.hueco-quitar {
  position: absolute; top: -6px; right: -6px; width: 17px; height: 17px;
  border-radius: 50%; border: 1px solid var(--borde-fuerte); background: var(--fondo);
  color: var(--texto-medio); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.hueco-quitar:hover { color: var(--contradictorio); border-color: var(--contradictorio); }

/* --- 17. Selector por necesidades --------------------------------------- */

.selector-rejilla { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.preguntas { display: grid; gap: .7rem; position: sticky; top: calc(var(--nav-alto) + 12px); }
.pregunta {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .75rem .85rem;
}
.pregunta > h3 { font-size: .9rem; margin-bottom: .1rem; }
.pregunta > p { font-size: .78rem; color: var(--texto-tenue); margin-bottom: .5rem; }
.opciones { display: grid; gap: .1rem; }

.resultado {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .8rem .9rem; margin-bottom: .7rem;
}
.resultado-cab { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .6rem; }
.resultado-puesto {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--accion); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.porques { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .84rem; }
.porques li { display: flex; gap: .5rem; align-items: baseline; }
.peso {
  flex: none; min-width: 2.6rem; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 700; color: #0b7a4b;
}
.peso.neg { color: var(--contradictorio); }
.chip-editorial {
  background: var(--accion-suave); border-color: var(--accion-borde);
  color: var(--accion-oscuro); display: block; white-space: normal;
}

/* --- 17 bis. Páginas de sólo texto -------------------------------------- */

.estrecho { width: min(100% - 2rem, 860px); margin-inline: auto; }
.estrellas { background: #fff8e8; border-color: #f0d9a4; color: #85610d; }
.estrellas svg { color: #e8a33d; }

/* --- 18. Tablas de comprobaciones y método ------------------------------ */

.tabla-simple { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla-simple th, .tabla-simple td {
  padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top;
}
.tabla-simple thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-medio); background: var(--fondo-3);
}
.tabla-simple tbody tr:nth-child(even) { background: var(--fondo-2); }
.envoltura-tabla {
  overflow-x: auto; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio);
}

.adecuacion { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; }
.adecuacion > div {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .6rem .75rem;
}
.adecuacion dt { font-weight: 650; font-size: .85rem; margin-bottom: .15rem; }
.adecuacion dd { margin: 0; font-size: .85rem; color: var(--texto-medio); }

.fuentes { margin: 0; display: grid; gap: .5rem; }
.fuentes dt { font-weight: 650; font-size: .82rem; }
.fuentes dd { margin: 0 0 .1rem; font-size: .85rem; color: var(--texto-medio); }

/* --- 19. Pie ------------------------------------------------------------ */

.pie {
  background: var(--fondo); border-top: 1px solid var(--borde);
  padding-block: 1.8rem 1.2rem; margin-top: 2rem;
}
.pie-rejilla { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pie h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); margin-bottom: .5rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pie a { color: var(--texto-medio); font-size: .855rem; }
.pie a:hover { color: var(--accion); }
.aviso-afiliados {
  margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--borde);
  font-size: .78rem; color: var(--texto-tenue); line-height: 1.5;
}
.aviso-afiliados strong { color: var(--contradictorio); }

/* --- 20. Adaptación a pantallas pequeñas -------------------------------- */

@media (max-width: 1000px) {
  .ficha-cab { grid-template-columns: 1fr; }
  .ficha-panel { position: static; }
  .selector-rejilla { grid-template-columns: 1fr; }
  .preguntas { position: static; }
}

/* Filtros en panel desplegable. Por debajo de este ancho la columna de
   filtros aplastada no se puede usar: se convierte en un cajón a pantalla
   completa que se abre desde la barra de herramientas. */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); gap: .8rem; }

  .filtros {
    position: fixed; inset: 0; z-index: 90;
    max-height: none; height: 100dvh; border-radius: 0; border: 0;
    display: none; grid-template-rows: auto 1fr auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .filtros.abierto { display: grid; }
  .filtros-cab { padding: .85rem 1rem; }
  .filtros-cab h2 { font-size: 1.05rem; }
  .filtros-cuerpo { overflow-y: auto; overscroll-behavior: contain; }
  .filtros-pie {
    display: flex; gap: .6rem; padding: .75rem 1rem;
    border-top: 1px solid var(--borde); background: var(--fondo);
  }
  .filtros-pie .btn { flex: 1; padding: .65rem 1rem; font-size: .95rem; }
  .cerrar-filtros {
    display: inline-grid; place-items: center; width: 32px; height: 32px;
    border-radius: var(--radio-s); border: 1px solid var(--borde-fuerte);
    background: var(--fondo); color: var(--texto); cursor: pointer;
  }
  .opcion { padding: .45rem 0; font-size: .92rem; }
  .opcion input { width: 18px; height: 18px; }
  .grupo-filtro > summary { padding: .8rem 1rem; font-size: .9rem; }
  .grupo-cuerpo { padding: 0 1rem .8rem; }

  .abrir-filtros { display: inline-flex; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: .7rem; }
  .tarjeta-specs dt { min-width: 4.6rem; }

  /* En columnas estrechas la casilla flotando sobre el azulejo le come el
     ancho al nombre del formato y lo parte en dos líneas. Deja de flotar y
     pasa a ser la primera fila de la tarjeta: cabe entera, se lee, y es un
     blanco de dedo decente. */
  .tarjeta-check {
    position: static; width: 100%; justify-content: flex-start;
    border: 0; border-bottom: 1px solid var(--borde); border-radius: 0;
    padding: .45rem .7rem; background: var(--fondo-2); font-size: .78rem;
  }
  .tarjeta-check input { width: 17px; height: 17px; }
  .tarjeta-tile { padding-right: .7rem; }
  .tile-cifras { flex-wrap: wrap; gap: .25rem .8rem; }
}
@media (min-width: 861px) {
  .filtros-pie, .cerrar-filtros { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 14.5px; }
  .rejilla, .similares { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .tarjeta-tile { min-height: 82px; }
  .tile-cifra b { font-size: 1.2rem; }
  .tile-formato { font-size: .64rem; }
  .tarjeta-specs { font-size: .76rem; }
  .tarjeta-specs dt { min-width: 3.6rem; }
  .app-cabecera h1 { font-size: 1.35rem; }
  .banda { font-size: .82rem; padding: .6rem .7rem; gap: .5rem; }

  .barra-int { gap: .5rem; }
  .hueco-mini { width: 60px; }
}

/* Comparador en móvil: NUNCA desplazamiento horizontal. Se comparan dos de
   golpe y se cambian con las pestañas de arriba.
   La tabla deja de ser una tabla de tres columnas: con 390 px, una columna de
   etiquetas más dos de producto dan unos 115 px por columna y todo se parte
   por la mitad. Aquí la etiqueta pasa ARRIBA, a todo lo ancho, y los dos
   valores se enfrentan debajo a mitad y mitad. */
@media (max-width: 760px) {
  .cmp-pares { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .7rem; }
  .cmp-par {
    padding: .38rem .65rem; border-radius: var(--radio-s);
    border: 1px solid var(--borde-fuerte); background: var(--fondo);
    color: var(--texto); font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer;
  }
  .cmp-par[aria-pressed="true"] {
    background: var(--accion-suave); border-color: var(--accion-borde);
    color: var(--accion-oscuro);
  }

  .cmp-tabla { display: block; font-size: .85rem; }

  .cmp-tabla thead {
    display: block; position: sticky; top: var(--nav-alto); z-index: 20;
    background: var(--fondo); border-bottom: 2px solid var(--borde-fuerte);
  }
  .cmp-tabla thead tr { display: flex; gap: .6rem; padding: .7rem; }
  .cmp-tabla thead th {
    position: static; display: block; flex: 1 1 0; min-width: 0;
    padding: 0; border: none; background: none;
  }
  .cmp-tabla thead th:first-child { display: none; }

  .cmp-tabla tbody { display: block; }
  .cmp-tabla tbody tr:not(.cmp-grupo) {
    display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .6rem;
    padding: .55rem .7rem; border-top: 1px solid var(--borde);
  }
  .cmp-tabla tbody tr:not(.cmp-grupo) th[scope="row"] {
    grid-column: 1 / -1; display: block; width: auto; padding: 0 0 .15rem;
    border: none; background: none;
    font-size: .76rem; color: var(--texto-tenue);
  }
  .cmp-tabla tbody td {
    display: block; padding: .25rem .4rem; border: none; border-radius: var(--radio-s);
  }
  /* Las filas de grupo se quedan quietas: fijarlas exigiría conocer el alto
     variable de la cabecera de productos, que aquí cambia con el nombre. */
  .cmp-grupo, .cmp-grupo th { display: block; position: static; }
  .cmp-col-cabecera { gap: .3rem; }
  .cmp-col-cabecera strong { font-size: .84rem; }
  .cmp-col-cabecera .btn { padding: .4rem .45rem; font-size: .74rem; gap: .25rem; }
  .cmp-oculta { display: none !important; }
  .punt-pista { max-width: 100% !important; }
}

/* --- 21. Movimiento e impresión ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .nav, .pie, .barra-comparar, .filtros, .herramientas, .tarjeta-check { display: none !important; }
  body { background: #fff; }
  .app { display: block; }
  .tarjeta, .bloque, .cmp-envoltura { break-inside: avoid; border-color: #bbb; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; color: #555; }
}

/* --- Plataforma --------------------------------------------------------- */
/* La home de la marca y la barra del vertical. No describen ningún producto:
   son el armazón que separa «dónde estoy» de «qué estoy mirando». */

.nav-vertical {
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  box-shadow: inset 0 3px 0 -1px var(--acento-vertical, var(--accion));
}
.nav-vertical .nav-int {
  display: flex; gap: .5rem 1.35rem; align-items: center; flex-wrap: wrap;
  padding-top: .55rem; padding-bottom: .55rem;
}
.nav-vertical a {
  color: var(--texto-medio); text-decoration: none;
  font-size: .88rem; font-weight: 650; white-space: nowrap; padding: .15rem 0;
}
.nav-vertical a:hover { color: var(--texto); }
.nav-vertical a[aria-current="page"] {
  color: var(--texto); box-shadow: 0 2px 0 0 var(--acento-vertical, var(--accion));
}

.hero-plataforma {
  background: linear-gradient(180deg, var(--fondo) 0%, var(--pagina) 100%);
  border-bottom: 1px solid var(--borde);
  padding: clamp(2.6rem, 7vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
}
.hero-plataforma h1 {
  font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: -.03em;
  text-transform: uppercase; margin: 0 0 .5rem;
}
.hero-principio {
  font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight: 750;
  color: var(--accion); line-height: 1.25; margin: 0 0 1rem;
}
.hero-sub {
  max-width: 54ch; margin: 0 auto 1.7rem;
  color: var(--texto-medio); font-size: 1.02rem; line-height: 1.55;
}
.hero-botones { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin: 0; }

.vert-rejilla { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .vert-rejilla { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }

.vert-tarjeta {
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.4rem 1.5rem 1.5rem;
  border-top: 3px solid var(--acento-vertical, var(--accion));
}
.vert-tarjeta h3 { font-size: 1.4rem; margin: .1rem 0 .5rem; }
.vert-tarjeta h3 a { color: var(--texto); text-decoration: none; }
.vert-tarjeta h3 a:hover { color: var(--accion); }
.vert-orden {
  font-size: .74rem; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-tenue); margin: 0;
}
.vert-cifras {
  font-size: .85rem; color: var(--texto-medio);
  border-top: 1px solid var(--borde); padding-top: .7rem; margin: .9rem 0 1.1rem;
}
.vert-proximamente {
  margin: 1.3rem 0 0; font-size: .9rem; color: var(--texto-tenue);
  border-left: 3px solid var(--borde-fuerte); padding-left: .8rem; max-width: 60ch;
}

.seccion-alt { background: var(--fondo-2); border-top: 1px solid var(--borde); }

.tabla-estado { width: 100%; border-collapse: collapse; margin: .6rem 0 1.6rem; font-size: .92rem; }
.tabla-estado th, .tabla-estado td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-estado th { font-weight: 650; color: var(--texto-medio); width: 32%; }
.est-detalle { color: var(--texto-tenue); font-size: .85rem; }
.sin-datos { font-weight: 750; font-size: .74rem; letter-spacing: .07em; color: var(--no-disponible); border: 1px solid var(--borde-fuerte); border-radius: 4px; padding: .1rem .4rem; }

@media (max-width: 620px) {
  /* En móvil la tabla de estado se apila. Con tres columnas y texto largo
     desbordaba la pantalla, y el detalle es justo lo que explica por qué un
     valor pone «sin datos»: recortarlo deja el panel sin sentido. */
  .tabla-estado, .tabla-estado tbody, .tabla-estado tr,
  .tabla-estado th, .tabla-estado td { display: block; width: auto; }
  .tabla-estado tr { border-bottom: 1px solid var(--borde); padding: .5rem 0; }
  .tabla-estado th, .tabla-estado td { border: none; padding: .15rem 0; }
  .tabla-estado code { overflow-wrap: anywhere; }
}


/* --- Catálogo en filas (maqueta A) -------------------------------------- */
/* Comparador denso: foto, datos y decisión en tres columnas. La tercera es
   donde un comparador de precios pone la cifra en euros. Aquí no hay precio
   que poner, así que lleva lo que sí tenemos y nadie más enseña: cuánto
   declara la ficha y si se contradice. */

.tarjeta {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  align-items: stretch;
  gap: 0;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-alta); }
.tarjeta:has(input[data-comparar]:checked) {
  border-color: var(--accion); box-shadow: 0 0 0 1px var(--accion);
}

.fila-media { display: flex; align-items: center; justify-content: center; padding: .9rem; }

/* La ranura de la foto. Es cuadrada y blanca a propósito: el día que lleguen
   las imágenes por la PA-API, aquí entra un <img> y no se mueve nada más. */
.fila-foto {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; text-align: center;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  text-decoration: none; padding: .5rem;
}
.fila-foto:hover { border-color: var(--color-formato, var(--accion)); text-decoration: none; }
.fila-foto .tile-formato {
  font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-formato, var(--texto-medio));
}
.fila-foto .tile-marca {
  font-size: .72rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .05em;
}
.fila-foto .tile-cifras { display: flex; gap: .7rem; margin-top: .2rem; }
.fila-foto .tile-cifra { display: flex; flex-direction: column; line-height: 1.05; }
.fila-foto .tile-cifra b { font-size: 1.15rem; color: var(--texto); font-weight: 800; }
.fila-foto .tile-cifra i { font-style: normal; font-size: .6rem; color: var(--texto-tenue); }
.fila-foto .tile-sindato { font-size: .68rem; color: var(--texto-tenue); max-width: 15ch; }

.fila-cuerpo {
  padding: .95rem .2rem .95rem 0;
  display: flex; flex-direction: column; gap: .4rem; min-width: 0;
}
.fila-cuerpo h3 { font-size: 1.08rem; margin: 0; line-height: 1.25; }
.fila-cuerpo h3 a { color: var(--accion); text-decoration: none; font-weight: 700; }
.fila-cuerpo h3 a:hover { text-decoration: underline; }
.fila-specs {
  margin: 0; font-size: .86rem; line-height: 1.5; color: var(--texto-medio);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Los cuatro datos clave bajo la retahíla, en línea y con separadores. */
.fila-cuerpo .tarjeta-specs {
  display: flex; flex-wrap: wrap; gap: .1rem 1.1rem;
  margin: .15rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--borde);
}
.fila-cuerpo .tarjeta-specs > div {
  display: flex; align-items: baseline; gap: .35rem;
  border: 0; padding: 0; font-size: .8rem;
}
.fila-cuerpo .tarjeta-specs dt { color: var(--texto-tenue); min-width: 0; }
.fila-cuerpo .tarjeta-specs dd { margin: 0; text-align: left; }

.fila-accion {
  display: flex; flex-direction: column; align-items: stretch; gap: .45rem;
  padding: .9rem .9rem .9rem 1rem;
  border-left: 1px solid var(--borde);
  background: var(--fondo-2);
}

/* El anillo. Gradiente cónico: ni SVG ni JavaScript ni una petición más. */
.anillo {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--accion) calc(var(--pct) * 1%), var(--fondo-3) 0),
    var(--fondo);
  position: relative;
}
.anillo::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--fondo);
}
.anillo-num { position: relative; font-weight: 800; font-size: 1rem; color: var(--texto); line-height: 1; }
.anillo-num i { font-style: normal; font-size: .68rem; color: var(--texto-tenue); font-weight: 600; }
.anillo-rot {
  position: relative; font-size: .56rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-tenue); margin-top: .1rem;
}

.pastilla {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  font-size: .7rem; font-weight: 650; padding: .2rem .45rem; border-radius: 4px;
  text-align: center;
}
.pastilla-ok { background: #e8f6ee; color: #11693d; border: 1px solid #b6e0c7; }
.pastilla-aviso {
  background: var(--contra-fondo); color: var(--contradictorio);
  border: 1px solid var(--contra-borde);
}

.fila-precio {
  font-size: .72rem; color: var(--texto-tenue); text-align: center; margin-top: auto;
}
.fila-accion .tarjeta-check { justify-content: center; font-size: .75rem; }

@media (max-width: 900px) {
  .tarjeta { grid-template-columns: 128px minmax(0, 1fr); }
  .fila-accion {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    border-left: 0; border-top: 1px solid var(--borde); padding: .7rem .9rem;
  }
  .anillo { margin: 0; }
  .fila-precio { margin: 0; }
  .fila-accion .btn { flex: 1; min-width: 11rem; }
  .fila-foto .tile-cifras { display: none; }
}
@media (max-width: 480px) {
  .tarjeta { grid-template-columns: 96px minmax(0, 1fr); }
  .fila-cuerpo { padding: .75rem .7rem .75rem 0; }
  .fila-cuerpo .tarjeta-specs { display: none; }
}

/* Correcciones de la fila ------------------------------------------------- */

/* La casilla vivía flotando en absoluto sobre la tarjeta vieja y en la fila le
   tapaba el anillo. Aquí tiene su sitio dentro de la columna de decisión. */
.fila-accion .tarjeta-check {
  position: static; background: transparent; border-color: var(--borde);
  width: 100%;
}

/* El hueco de la imagen: un marco vacío y callado. Cuando lleguen las fotos
   por la PA-API, aquí entra el <img> y no se mueve nada más. */
.fila-foto .tile-hueco {
  display: block; width: 44px; height: 44px; margin: .4rem auto 0;
  border: 2px dashed var(--borde-fuerte); border-radius: 6px; opacity: .5;
}
.fila-foto { aspect-ratio: auto; min-height: 116px; }
.fila-media { padding: .75rem; }

/* Filas más compactas: idealo mete cinco productos en una pantalla, no tres. */
.tarjeta { grid-template-columns: 150px minmax(0, 1fr) 196px; }
.fila-cuerpo { padding: .8rem .2rem .8rem 0; gap: .3rem; }
.fila-accion { padding: .75rem .8rem; gap: .4rem; }

/* El anillo tenía el texto apretujado dentro. El rótulo sale fuera. */
.anillo { width: 54px; height: 54px; }
.anillo::before { inset: 4px; }
.anillo-num { font-size: .95rem; }
.anillo-num i { font-size: .62rem; }
.anillo-pie {
  font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue); text-align: center; margin: .05rem 0 .1rem;
}

@media (max-width: 900px) {
  .tarjeta { grid-template-columns: 120px minmax(0, 1fr); }
  .anillo-pie { display: none; }
}
@media (max-width: 480px) {
  .tarjeta { grid-template-columns: 92px minmax(0, 1fr); }
}

/* Compactación final ------------------------------------------------------ */
/* La columna de decisión apilaba cinco elementos y era ella, no el contenido,
   la que marcaba el alto de la fila: entraban tres productos en pantalla donde
   idealo mete cinco. El anillo y el estado pasan a compartir línea. */

.fila-accion { padding: .6rem .7rem; gap: .35rem; justify-content: center; }
.fila-accion-alto { display: flex; align-items: center; gap: .55rem; }
.fila-accion-alto .anillo { margin: 0; flex-shrink: 0; }
.fila-accion-alto .pastilla { flex: 1; font-size: .67rem; padding: .18rem .35rem; }
.anillo { width: 48px; height: 48px; }
.anillo-num { font-size: .88rem; }
.anillo-pie { display: none; }
.fila-precio { font-size: .66rem; margin: 0; }
.fila-accion .tarjeta-check { padding: .14rem .4rem; font-size: .7rem; }
.fila-cuerpo { padding: .7rem .2rem .7rem 0; justify-content: center; }
.fila-foto { min-height: 100px; }
.fila-media { padding: .6rem; }
.fila-foto .tile-hueco { width: 36px; height: 36px; margin: .3rem auto 0; }

/* La marca se partía dentro de la ranura estrecha en móvil. */
.fila-foto .tile-marca, .fila-foto .tile-formato {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 480px) {
  .fila-foto .tile-formato { font-size: .55rem; }
  .fila-foto .tile-marca { font-size: .62rem; }
}

/* Fotografía de producto -------------------------------------------------- */
/* Vive en la misma ranura que el hueco: cuando llega la imagen, ocupa su sitio
   sin mover una sola línea de la maquetación. */
.fila-foto-foto, .tarjeta-tile-foto { background: #fff; padding: .35rem; }
.prod-img {
  width: 100%; height: 100%; max-height: 100%;
  object-fit: contain; display: block;
}