/* ============================================================
   Tienda Karcher — sistema de diseño "manual de taller"
   Deliberadamente distinto al resto de webs de afiliados:
   sin redondeos, sin sombras difusas, sin enlaces azules.
   El amarillo es estructura (bandas, reglas, numeración),
   no relleno de botones.
   ============================================================ */

:root {
  /* Corporativo, tomado del logo */
  --amarillo: #ffed00;
  --amarillo-hover: #ffd900;
  --tinta: #111111;
  --tinta-suave: #3d3d3d;
  --apagado: #6b6b6b;
  --papel: #ffffff;
  --papel-alt: #f4f4f2;
  --linea: #d8d8d4;
  --linea-fuerte: #111111;

  /* Semánticos del diagnóstico */
  --alerta: #c62828;
  --aviso: #b26a00;
  --correcto: #1b5e20;

  /* Fijos: NO cambian con el tema. El amarillo corporativo siempre lleva
     texto negro encima, y el pie es siempre oscuro (es la firma de la marca). */
  --sobre-amarillo: #111111;
  --negro-fijo: #111111;
  --blanco-fijo: #ffffff;
  --sombra-boton: #111111;

  --texto: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --ancho: 1180px;
  --ancho-lectura: 720px;
  --cabecera: 68px;
}

:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #f2f2f0;
    --tinta-suave: #c9c9c5;
    --apagado: #939390;
    --papel: #131313;
    --papel-alt: #1c1c1b;
    --linea: #333331;
    --linea-fuerte: #f2f2f0;
    --sombra-boton: #6b6b66;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --tinta: #f2f2f0;
  --tinta-suave: #c9c9c5;
  --apagado: #939390;
  --papel: #131313;
  --papel-alt: #1c1c1b;
  --linea: #333331;
  --linea-fuerte: #f2f2f0;
  --sombra-boton: #6b6b66;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  /* Retícula muy tenue, como papel milimetrado de taller */
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img { max-width: 100%; height: auto; display: block; }

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.lectura { max-width: var(--ancho-lectura); }

/* ---------- Tipografía ---------- */

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.05rem); margin-top: 2.6em; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); margin-top: 2em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }

a {
  color: var(--tinta);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--amarillo);
  transition: background .12s ease;
}
a:hover { background: var(--amarillo); color: var(--sobre-amarillo); text-decoration-color: transparent; }

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

code, .mono, .modelo {
  font-family: var(--mono);
  font-size: .88em;
  letter-spacing: -0.01em;
}

/* Código de modelo o referencia de recambio */
.ref {
  font-family: var(--mono);
  font-size: .82em;
  font-weight: 600;
  background: var(--tinta);
  color: var(--papel);
  padding: .12em .45em;
  white-space: nowrap;
}

/* ---------- Cabecera ---------- */

/* Barra amarilla corporativa, la de siempre. El amarillo es fijo: no
   cambia con el tema, es la firma de la marca. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--amarillo);
  border-bottom: 3px solid var(--negro-fijo);
}
.cabecera__fila {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--cabecera);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;          /* el nav movil cae a su propia fila */
}
.marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
  color: var(--sobre-amarillo);
}
.marca:hover { background: none; }
.marca__icono { width: 32px; height: 32px; }
.marca__texto {
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .02em;
  color: var(--sobre-amarillo);
}

.nav { display: flex; gap: 0; margin-left: auto; flex-wrap: wrap; }
.nav a {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 8px 8px;
  text-decoration: none;
  color: var(--sobre-amarillo);
  border-bottom: 3px solid transparent;
  white-space: nowrap;      /* que "Hidrolimpiadoras" no parta palabra a media letra */
}
.nav a:hover { background: var(--negro-fijo); color: var(--amarillo); }
.nav a[aria-current="page"] { border-bottom-color: var(--negro-fijo); }

/* --- Hamburguesa: checkbox puro, sin una linea de JS --- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-boton { display: none; }

/* 1150px, no 860: con los 10 enlaces del menu (incluida "Comparativas")
   hacen falta bastante mas de 860px para caber en una sola fila -- medido en
   el navegador, no a ojo: a 1101px de viewport seguia partiendose en dos
   lineas. Entre 860 y ~1130 no cabian pero tampoco se activaba el menu
   movil, y el .nav (que envuelve por su cuenta con flex-wrap) se partia en
   varias lineas dentro de la barra amarilla -- la cabecera de dos lineas que
   se veia rota en desktop. Verificado en el navegador que a 1150 ya cabe. */
@media (max-width: 1150px) {
  .cabecera__fila { justify-content: space-between; gap: 12px; }

  .nav-boton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;      /* area tactil comoda */
    cursor: pointer;
    margin-left: auto;
    padding: 0 8px;
  }
  .nav-boton span {
    display: block;
    height: 3px;
    background: var(--negro-fijo);
    transition: transform .18s ease, opacity .18s ease;
  }

  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-wrap: nowrap;              /* nunca crear una segunda columna */
    flex-direction: column;
    gap: 0;
    margin: 0 0 10px;
    border-top: 2px solid var(--negro-fijo);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav a {
    width: 100%;
    padding: 13px 4px;
    border-bottom: 1px solid rgba(0,0,0,.18);
  }
  .nav a[aria-current="page"] { background: var(--negro-fijo); color: var(--amarillo); }

  /* Aspa al abrir */
  .nav-toggle:checked ~ .nav-boton span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-boton span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-boton span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-boton span { transition: none; }
}

/* ---------- Migas ---------- */

.migas {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--apagado);
  padding: 14px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.migas a { text-decoration: none; color: var(--apagado); }
.migas a:hover { background: var(--amarillo); color: var(--sobre-amarillo); }

/* ---------- Portada del artículo ---------- */

.portada { padding: 26px 0 34px; border-bottom: 1px solid var(--linea); }

.etiqueta {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  padding: .3em .7em;
  margin-bottom: 18px;
}

.entradilla {
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  color: var(--tinta-suave);
  max-width: 62ch;
  margin-top: .8em;
}

/* Tira de datos técnicos bajo el titular */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: 30px;
}
.datos__celda { background: var(--papel); padding: 13px 15px; }
.datos__clave {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--apagado);
  display: block;
  margin-bottom: 3px;
}
.datos__valor { font-weight: 700; font-size: .96rem; }

/* ---------- Cuerpo ---------- */

.cuerpo { padding: 40px 0 60px; }
.cuerpo > * { max-width: var(--ancho-lectura); }
.cuerpo h2 {
  padding-top: .5em;
  border-top: 3px solid var(--linea-fuerte);
}

.cuerpo ul, .cuerpo ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.cuerpo li { margin-bottom: .5em; }

.cuerpo strong { font-weight: 700; }

blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 22px;
  border-left: 5px solid var(--amarillo);
  font-size: 1.06em;
}

/* ---------- Pasos numerados (manual de taller) ---------- */

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 2em 0; }
.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 26px 62px;
  border-left: 2px solid var(--linea);
  margin-left: 21px;
}
.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: -21px;
  top: -4px;
  width: 42px;
  height: 42px;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  display: grid;
  place-items: center;
}
.pasos h3 { margin: 0 0 .35em; font-size: 1.08rem; }

/* ---------- Bloque de diagnóstico: síntoma → causa → solución ---------- */

.diagnostico {
  margin: 2.4em 0;
  border: 3px solid var(--linea-fuerte);
  max-width: none;
}
.diagnostico__cabeza {
  background: #131313;
  color: #f2f2f0;
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
/* La tabla de diagnostico tiene cuatro columnas y a 375 px de ancho pedia
   441: desbordaba la pagina entera y obligaba a arrastrar el articulo de
   lado para leerlo. Es el bloque principal de las paginas de averia, que son
   las de mas trafico del sitio y se leen sobre todo en el movil. El scroll
   se queda DENTRO de la tabla, como en .tabla-scroll. */
.diagnostico__tabla { overflow-x: auto; }
.diagnostico table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 440px; }
.diagnostico th {
  text-align: left;
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--apagado);
  padding: 11px 18px;
  border-bottom: 1px solid var(--linea);
  font-weight: 700;
}
.diagnostico td { padding: 14px 18px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.diagnostico tr:last-child td { border-bottom: none; }
.diagnostico td:first-child { font-weight: 700; width: 30%; }

.gravedad { font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.gravedad--alta { color: var(--alerta); }
.gravedad--media { color: var(--aviso); }
.gravedad--baja { color: var(--correcto); }

/* Tablas normales, con scroll propio en móvil */
.tabla-scroll { overflow-x: auto; margin: 2em 0; max-width: none; }
.tabla-scroll table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 420px; }
.tabla-scroll th {
  background: var(--papel-alt);
  text-align: left;
  padding: 11px 14px;
  border-bottom: 2px solid var(--linea-fuerte);
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tabla-scroll td { padding: 11px 14px; border-bottom: 1px solid var(--linea); }

/* ---------- Aviso ---------- */

.aviso {
  border-left: 5px solid var(--aviso);
  background: var(--papel-alt);
  padding: 15px 18px;
  margin: 2em 0;
  font-size: .95rem;
}
.aviso strong { display: block; margin-bottom: .2em; }
.aviso--peligro { border-left-color: var(--alerta); }

/* ---------- Tabla de comparativa entre dos modelos ----------
   La columna de la izquierda es siempre el modelo mas barato, para que la
   tabla se lea como una escalera. La celda marcada es la que da la cifra
   mayor: es lo unico que se destaca, y solo en las filas donde "mas" tiene
   un sentido claro (bares, caudal, superficie). En el precio no se marca
   nada, porque ahi mas no es mejor. */

table.comparativa th[scope="col"] {
  font-size: 1.05rem;
  text-align: center;
}
table.comparativa th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--apagado);
  white-space: nowrap;
}
table.comparativa td { text-align: center; }
table.comparativa td.mas {
  font-weight: 700;
  background: var(--papel-alt);
  box-shadow: inset 3px 0 0 var(--amarillo);
}

.cita-fabricante {
  border-left: 3px solid var(--linea);
  padding: 2px 0 2px 16px;
  margin: 1.2em 0 1.6em;
}
.cita-fabricante p { margin: .6em 0; }

/* ---------- Parrilla de producto (categorias) ----------
   Escaparate para quien llega con intencion de comprar. Cuatro por fila en
   escritorio, dos en movil: por debajo de dos la foto deja de servir para
   comparar, que es justo para lo que esta. */

.parrilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 1.5em 0 .6em;
}
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: inherit;
  text-decoration: none;
}
.tarjeta:hover { border-color: var(--linea-fuerte); }
.tarjeta__img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: var(--papel-alt);
}
.tarjeta__nombre {
  font-size: .84rem;
  line-height: 1.35;
  /* Titulos de Amazon larguisimos: se cortan a cuatro lineas para que las
     tarjetas de una fila queden a la misma altura y se puedan comparar. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta__precio {
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: auto;
}
.tarjeta__ir {
  display: inline-block;
  align-self: flex-start;
  font-size: .8rem;
  font-weight: 700;
  border-bottom: 2px solid var(--amarillo);
}
.tarjeta:hover .tarjeta__ir { background: var(--amarillo); color: var(--sobre-amarillo); }
.parrilla__nota { font-size: .78rem; color: var(--apagado); margin: 0 0 1.8em; }

@media (max-width: 900px) {
  .parrilla { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tarjeta__img { height: 120px; }
}

/* ---------- Enlace de afiliado dentro del texto ----------
   La tarjeta .recambio se salta con la vista igual que un banner. Este es el
   mismo enlace puesto en la palabra donde se nombra la pieza, que es donde
   el lector la esta buscando. Se distingue del enlace interno por el
   subrayado amarillo, para que se vea que sale del sitio. */

.enlace-pieza {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--amarillo);
  padding-bottom: 1px;
}
.enlace-pieza:hover,
.enlace-pieza:focus-visible {
  background: var(--amarillo);
  color: var(--sobre-amarillo);
}
.enlace-pieza::after {
  content: "\2197";              /* flecha: sale del sitio */
  font-size: .78em;
  margin-left: .15em;
  color: var(--apagado);
}
.enlace-pieza:hover::after { color: var(--sobre-amarillo); }

/* ---------- Recambio recomendado (afiliado) ---------- */

.recambio {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--linea);
  border-left: 5px solid var(--amarillo);
  padding: 18px;
  margin: 1.5em 0;
  background: var(--papel);
  max-width: none;
}
.recambio__img { width: 116px; height: 116px; object-fit: contain; }
.recambio__marca {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apagado);
  display: block;
  margin-bottom: 4px;
}
.recambio__nombre { font-weight: 700; font-size: 1rem; line-height: 1.3; margin: 0 0 6px; }
.recambio__nombre a { text-decoration: none; }
.recambio__precio { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; }
.recambio__nota { font-size: .76rem; color: var(--apagado); margin-top: 2px; }

.boton {
  display: inline-block;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  font-weight: 800;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 13px 22px;
  text-decoration: none;
  border: 2px solid var(--negro-fijo);
  box-shadow: 4px 4px 0 var(--sombra-boton);
  transition: transform .1s ease, box-shadow .1s ease;
  white-space: nowrap;
}
.boton:hover { background: var(--amarillo-hover); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sombra-boton); }
.boton:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--sombra-boton); }

@media (max-width: 620px) {
  .recambio { grid-template-columns: 84px 1fr; }
  .recambio__img { width: 84px; height: 84px; }
  .recambio > .boton { grid-column: 1 / -1; text-align: center; }
}

/* ---------- Rejilla de fichas ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin: 2em 0;
  max-width: none;
}
.ficha {
  background: var(--papel);
  padding: 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .12s ease;
}
.ficha:hover { background: var(--amarillo); color: var(--sobre-amarillo); }
.ficha__tipo {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apagado);
}
.ficha:hover .ficha__tipo { color: #4a4a4a; }
.ficha__titulo { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.ficha__extra { font-size: .84rem; color: var(--apagado); margin-top: auto; }
.ficha:hover .ficha__extra { color: #4a4a4a; }

/* ---------- Índice de contenidos ---------- */

.indice {
  border: 1px solid var(--linea);
  border-top: 3px solid var(--linea-fuerte);
  padding: 20px 22px;
  margin: 0 0 2.4em;
  background: var(--papel);
}
.indice__titulo {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apagado);
  margin: 0 0 12px;
}
.indice ol { margin: 0; padding-left: 1.3em; }
.indice li { margin-bottom: .4em; }
.indice a { text-decoration: none; font-weight: 600; }

/* ---------- Pie ---------- */

.pie {
  background: #131313;
  color: #e8e8e6;
  margin-top: 70px;
  padding: 52px 0 30px;
  border-top: 8px solid var(--amarillo);
}
.pie a { color: #e8e8e6; text-decoration-color: var(--amarillo); }
.pie a:hover { background: var(--amarillo); color: var(--sobre-amarillo); }
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 34px;
  margin-bottom: 40px;
}
.pie__titulo {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #96968f;
  margin: 0 0 12px;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 7px; font-size: .9rem; }

.descargo {
  border-top: 1px solid #333331;
  padding-top: 22px;
  font-size: .8rem;
  color: #96968f;
  line-height: 1.6;
}
.descargo strong { color: #e8e8e6; }

/* ---------- Utilidades ---------- */

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--amarillo); color: var(--sobre-amarillo); padding: 12px 20px;
  font-weight: 700; z-index: 100;
}
.saltar:focus { left: 0; }

/* ---------- Fuentes: de donde sale lo que afirmamos ---------- */

.fuentes {
  border-top: 3px solid var(--linea-fuerte);
  padding-top: 18px;
  margin: 3em 0 0;
  font-size: .88rem;
}
.fuentes__titulo {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apagado);
  margin: 0 0 10px;
}
.fuentes ul { list-style: none; padding: 0; margin: 0; }
.fuentes li { margin-bottom: 6px; padding-left: 18px; position: relative; }
.fuentes li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--amarillo);
}

/* ---------- Comparador ---------- */

.comparativa table { min-width: 620px; font-size: .92rem; }
.comparativa th[scope="col"] {
  background: var(--papel-alt);
  border-bottom: 3px solid var(--linea-fuerte);
  white-space: nowrap;
}
.comp__modelo {
  text-align: left;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .86rem;
  white-space: nowrap;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: 11px 14px;
}
.comparativa td { white-space: nowrap; }
.comp__vacio { color: var(--apagado); }
.comp__precio { font-family: var(--mono); font-weight: 700; }
.comp__ir {
  display: inline-block;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  font-weight: 800;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 12px;
  text-decoration: none;
  border: 2px solid var(--negro-fijo);
}
.comp__ir:hover { background: var(--amarillo-hover); }
.comp__nota {
  font-size: .8rem;
  color: var(--apagado);
  margin: -1em 0 2em;
  max-width: 62ch;
}

/* ---------- Rangos: entre qué cifras se mueve la gama ---------- */

.rangos {
  border: 1px solid var(--linea);
  border-left: 5px solid var(--amarillo);
  padding: 16px 20px;
  margin: 2em 0;
  max-width: none;
  background: var(--papel);
}
.rangos__titulo {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apagado);
  margin: 0 0 10px;
}
.rangos ul { list-style: none; padding: 0; margin: 0; }
.rangos li { margin-bottom: 5px; font-size: .93rem; }

/* Contador junto al título de sección del índice de modelos */
.cuenta {
  font-family: var(--mono);
  font-size: .6em;
  font-weight: 700;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  padding: .2em .5em;
  vertical-align: middle;
  margin-left: .4em;
}
td.mono { font-family: var(--mono); font-size: .86rem; white-space: nowrap; }

/* ============================================================
   Producto destacado (va justo debajo de la entradilla)
   ------------------------------------------------------------
   El bloque de recambios estaba solo al final de la pagina. En movil,
   que es el 77 % del trafico, casi nadie llegaba hasta ahi: leen lo que
   necesitan y cierran. Este va arriba, es una sola linea y no empuja el
   contenido hacia abajo mas de lo imprescindible.
   ============================================================ */
.destacado {
  /* Mas presencia: es lo primero que se ve y el objetivo de la web es que se
     pulse. Franja amarilla arriba y sombra dura, para que no se lea como un
     bloque gris mas entre los del articulo. */
  margin: 0 0 1.75rem;
  border: 2px solid var(--linea-fuerte);
  border-top: 6px solid var(--amarillo);
  background: var(--papel-alt);
  box-shadow: 4px 4px 0 var(--linea);
}

.destacado__enlace {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem;
  color: inherit;
  text-decoration: none;
}

.destacado__enlace:hover .destacado__nombre { text-decoration: underline; }

.destacado__img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;          /* las fotos de Amazon vienen sobre blanco */
  border: 1px solid var(--linea);
}

.destacado__texto {
  flex: 1 1 auto;
  min-width: 0;              /* deja que el nombre largo se corte, no que desborde */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.destacado__eti {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--apagado);
}

.destacado__nombre {
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.destacado__precio {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
}

.destacado__boton {
  flex: 0 0 auto;
  align-self: center;
  padding: .8rem 1.4rem;
  background: var(--amarillo);
  color: var(--sobre-amarillo);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  border: 2px solid var(--linea-fuerte);
  box-shadow: 3px 3px 0 var(--linea-fuerte);
}

.destacado__enlace:hover .destacado__boton {
  background: var(--amarillo-hover);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--linea-fuerte);
}

@media (max-width: 620px) {
  /* En movil el boton pasa a ocupar todo el ancho: a esa anchura ya no cabe
     al lado del texto y es la zona pulsable mas clara. */
  .destacado__enlace { flex-wrap: wrap; gap: .8rem; padding: .85rem; }
  .destacado__img { width: 84px; height: 84px; }
  .destacado__precio { font-size: 1.3rem; }
  .destacado__boton { width: 100%; text-align: center; align-self: stretch; }
}

/* ============================================================
   Miniatura en la tabla comparativa
   ------------------------------------------------------------
   Sin foto hay que leer ocho nombres de modelo casi identicos para
   saber de que maquina habla cada fila.
   ============================================================ */
.comp__ficha {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: inherit;
  text-decoration: none;
}

.comp__ficha:hover span:last-child { text-decoration: underline; }

.comp__img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--linea);
}

.comp__img--vacia { background: var(--papel-alt); }

/* ============================================================
   Buscador de sintomas de la portada
   ------------------------------------------------------------
   Quien busca "karcher" no llega a leer: llega a averiguar que le pasa a
   su maquina. Va lo primero, antes del texto, y se alimenta de las paginas
   de averia con mas trafico real.
   ============================================================ */
.buscador {
  margin: 0 0 2rem;
  padding: 1.25rem;
  background: var(--papel-alt);
  border: 2px solid var(--linea-fuerte);
}

.buscador h2 { margin-top: 0; }
.buscador p { margin-bottom: .9rem; }
.buscador__pie { margin: 1rem 0 0; font-size: .92rem; color: var(--tinta-suave); }

.sintomas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.sintoma {
  display: inline-block;
  padding: .55rem .85rem;
  background: var(--papel);
  border: 2px solid var(--linea-fuerte);
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

.sintoma:hover,
.sintoma:focus-visible {
  background: var(--amarillo);
  color: var(--sobre-amarillo);
}