/* ==========================================================================
   Ergonomía en Casa — hoja de estilos única

   TIPOGRAFÍA
   Newsreader para los titulares y los nombres de producto: una serif editorial
   dibujada para pantalla, con el contraste justo para que un titular grande se
   vea elegante sin que un subtítulo pequeño se rompa. Es el registro que usan
   las tiendas de mobiliario buenas: serif para el nombre, sans para el dato.

   Inter para todo lo demás —interfaz, tablas, fichas técnicas—, porque a
   tamaños pequeños se lee mejor que ninguna y porque trae **cifras tabulares**:
   en el comparador, los números de cada columna quedan alineados en vertical
   como en una hoja de cálculo. Con cifras proporcionales, un 1 y un 8 ocupan
   distinto y las columnas bailan.

   Las dos van **servidas desde este dominio**, no desde Google. Antes se pedían
   con un @import, lo que encadenaba cuatro descargas antes de que el texto se
   viera bien y además enviaba la IP de cada visitante a Google sin su permiso.
   Los archivos los prepara tools/descargar_fuentes.py: recortados al alfabeto
   que usa la web y con los ejes variables que no se usan ya fijados, pasan de
   319 KB a 93 KB.

   OJO CON LAS RUTAS: en CSS, url() es relativa a la hoja de estilos, no a la
   página. Esta hoja acaba en dist/assets/styles.css y las letras en
   dist/assets/fuentes/, así que la ruta correcta es "fuentes/…" y no
   "assets/fuentes/…", que buscaría dist/assets/assets/fuentes.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fuentes/inter.woff2") format("woff2");
  font-weight: 100 900;          /* un solo archivo para los doce pesos */
  font-style: normal;
  font-display: swap;            /* el texto se lee desde el primer instante */
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fuentes/schibsted.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fuentes/schibsted-italica.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Ergonomía en Casa — hoja de estilos única
   Orden: 1 tokens · 2 base · 3 tipografía · 4 layout · 5 cabecera · 6 pie
          7 botones · 8 tarjetas · 9 home · 10 ficha · 11 radar
          12 comparador · 13 categorías y guías · 15 legal
          16 utilidades y responsive
   ========================================================================== */

/* 1 · TOKENS ============================================================== */

:root {
  /* Fondo cálido, superficies blancas. Es el reparto que usan casi todas las
     tiendas: la página tiene temperatura y el producto se recorta limpio sobre
     blanco puro, que es lo que hace que una foto parezca de catálogo.
     Se podía hacer porque las fotos llevan `mix-blend-mode: multiply`: el
     blanco de un recorte multiplicado por el fondo DA el fondo, así que el
     recorte desaparece sea cual sea su color. Sin ese blend, un fondo cálido
     dejaría ver el rectángulo blanco de cada foto. */
  --paper:        #faf8f5;
  --paper-2:      #f3f0ea;
  --surface:      #ffffff;
  --surface-2:    #f7f5f1;
  /* Tinta casi negra, no gris oscuro: el contraste alto es lo que separa una
     tienda de un blog. */
  --ink:          #14161a;
  --ink-2:        #4d5259;
  /* Gris apagado para rótulos secundarios: fechas, cabeceras de tabla, cifras
     de reseñas. Estaba en #8b8e96, que sobre blanco daba 3,28:1 y sobre el gris
     de las tarjetas 2,98:1 — por debajo del 4,5:1 que exige la norma para texto
     pequeño. A #6b6e76 cumple sobre todas las superficies claras y sigue
     leyéndose como secundario frente al negro del texto principal. */
  /* Gris cálido para rótulos secundarios. Estuvo en #6d7278 —frío y más claro—
     y sobre --paper-2 daba 4,27:1, por debajo del 4,5 que pide la norma para
     texto pequeño. Al calentar el fondo de la web, este gris tuvo que bajar con
     él: comprobado ahora en 4,89:1 sobre la superficie más oscura de las claras. */
  --ink-3:        #6b6862;
  --line:         #e8e4dc;
  --line-2:       #d7d2c7;

  /* UN solo color saturado y cuatro apoyos apagados.
     Es la regla que comparten Apple, Nike e IKEA: fondo neutro y un acento que
     manda. Cinco colores al mismo nivel es una revista, no una tienda.

     El acento es AZUL PETRÓLEO. Azul porque es el color que la gente asocia a
     lo técnico y lo clínico, que es de lo que va medir posturas y alturas. Pero
     no un azul cualquiera: el de IKEA (#0058a3) y el de Apple (#0071e3) son
     primarios brillantes y se reconocen al instante. Este es oscuro y tirando a
     verde, así que se lee como instrumento y no como marca prestada. */
  --petroleo:     #12586b;
  --piedra:       #4a6076;
  --arena:        #7a663a;
  --arcilla:      #9a5f4a;
  --ciruela:      #6f5a70;
  /* El verde vive aparte del acento: es el de «a favor», y una marca de
     aprobación tiene que verse verde aunque la marca sea azul. */
  --verde:        #2f6b4f;

  --petroleo-suave: #e5eff2;
  --piedra-suave:   #ecf0f4;
  --arena-suave:    #f4f1e8;
  --arcilla-suave:  #f7efec;
  --ciruela-suave:  #f2eef2;
  --verde-suave:    #e9f1ec;

  --accent:       var(--petroleo);
  --accent-hot:   #0d4353;
  --accent-soft:  var(--petroleo-suave);
  --accent-line:  #bfd8df;

  --night:        #17181b;
  --night-2:      #202226;
  --night-ink:    #f2f2f3;
  /* El pie y los avisos sobre fondo oscuro se ven así en los DOS temas, así que
     necesitan su propio verde claro. Antes usaban --accent-hot, que en el tema
     claro es un verde oscuro: sobre el negro del pie daba 2,3:1 y los rótulos
     apenas se leían. Este no cambia con el tema, porque el fondo del pie
     tampoco cambia. */
  --night-accent: #9ed6e5;

  /* A favor / en contra reutilizan salvia y arcilla: siguen leyéndose como
     «bien» y «mal» sin el semáforo saturado de siempre. */
  --good:         var(--verde);
  --good-soft:    var(--verde-suave);
  --bad:          var(--arcilla);
  --bad-soft:     var(--arcilla-suave);

  --radius:       14px;
  --radius-lg:    22px;
  --radius-sm:    9px;

  --shadow-sm:    0 1px 2px rgba(23, 21, 15, .05), 0 2px 8px rgba(23, 21, 15, .04);
  --shadow:       0 2px 4px rgba(23, 21, 15, .05), 0 12px 28px -10px rgba(23, 21, 15, .14);
  --shadow-lg:    0 4px 8px rgba(23, 21, 15, .05), 0 28px 60px -20px rgba(23, 21, 15, .22);

  /* Dos tipografías, las dos de palo seco.
     Apple, Nike e IKEA son de palo seco de arriba abajo, y esta web está llena
     de tablas de datos, donde una serif se lee peor. Antes los titulares iban
     en Newsreader (serif): daba aire de revista, no de tienda.
     · Instrument Sans para titulares: una grotesca con carácter propio, que
       aguanta bien a 4 rem sin parecerse a Helvetica ni a la de Apple.
     · Inter para todo el texto y las tablas: es la mejor que hay para cifras
       pequeñas y dígitos alineados.
     El nombre --display sustituye al viejo --serif, que ya mentía. */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Schibsted Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Cifras de ancho fijo. Se aplican donde los números se comparan en columna
     —el comparador, las fichas técnicas, los rankings—, para que un 1 ocupe lo
     mismo que un 8 y las cifras queden alineadas en vertical. En el texto
     corrido NO se usan: ahí las proporcionales se leen mejor. */
  --cifras-tabulares: "tnum" 1, "lnum" 1;

  --wrap: 1180px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --alto-cabecera: 66px;   /* lo usan los elementos que se fijan bajo la cabecera */

  /* El fondo de las fotos NO cambia con el tema. Las imágenes de Amazon vienen
     recortadas sobre blanco: si la caja se oscurece, el recorte se ve como un
     rectángulo claro flotando. Dejándola siempre clara, la foto y su caja son
     el mismo blanco y en modo oscuro queda como una pastilla de catálogo.

     Y es BLANCO PURO, no un blanco roto. Con el #f4f2ed de antes se veía un
     cambio de tono entre el recorte de la foto —que Amazon entrega sobre
     blanco puro— y la caja que lo rodea: un rectángulo más claro flotando
     dentro de otro grisáceo. El `multiply` funde el blanco de la foto con el
     de la caja, así que igualándolos la junta desaparece del todo. */
  --foto-fondo: #ffffff;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #121110;
    --paper-2:     #181715;
    --surface:     #1c1b19;
    --surface-2:   #232220;
    --ink:         #f2f1ee;
    --ink-2:       #b5b3ad;
    /* Este gris se usa también sobre --surface-2, la superficie más clara del
       tema oscuro. Comprobado ahí: 4,91:1, por encima del 4,5 que pide la norma
       para texto pequeño. */
    --ink-3:       #918f89;
    --line:        #2c2b28;
    --line-2:      #3b3a36;

    /* El verde del acento sube de tono en oscuro: el pino de #1d6b4f sobre un
       fondo casi negro se quedaría en nada. Este da 8,6:1 sobre las tarjetas. */
    --petroleo:     #6fc3d8;
    --piedra:       #9db3cb;
    --arena:        #c4ae7b;
    --arcilla:      #d19b85;
    --ciruela:      #b39bb4;

    --petroleo-suave: #132229;
    --verde:        #7fc4a3;
    --verde-suave:  #16211c;
    --piedra-suave:  #1b2029;
    --arena-suave:   #221f17;
    --arcilla-suave: #241c19;
    --ciruela-suave: #211c22;

    --accent:      var(--petroleo);
    --accent-hot:  #9ed6e5;
    --accent-soft: var(--petroleo-suave);
    --accent-line: #29404a;

    --night:       #0c0b0a;
    --night-2:     #181715;
    --night-ink:   #f2f1ee;

    --good:        var(--verde);
    --good-soft:   var(--verde-suave);
    --bad:         var(--arcilla);
    --bad-soft:    var(--arcilla-suave);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
    --shadow:      0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px -10px rgba(0, 0, 0, .5);
    --shadow-lg:   0 4px 8px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:       #121110;
  --paper-2:     #181715;
  --surface:     #1c1b19;
  --surface-2:   #232220;
  --ink:         #f2f1ee;
  --ink-2:       #b5b3ad;
  /* Este gris se usa también sobre --surface-2, la superficie más clara del
     tema oscuro. Comprobado ahí: 4,91:1, por encima del 4,5 que pide la norma
     para texto pequeño. */
  --ink-3:       #918f89;
  --line:        #2c2b28;
  --line-2:      #3b3a36;

  /* El verde del acento sube de tono en oscuro: el pino de #1d6b4f sobre un
     fondo casi negro se quedaría en nada. Este da 8,6:1 sobre las tarjetas. */
  --petroleo:     #6fc3d8;
  --piedra:       #9db3cb;
  --arena:        #c4ae7b;
  --arcilla:      #d19b85;
  --ciruela:      #b39bb4;

  --petroleo-suave: #132229;
    --verde:        #7fc4a3;
    --verde-suave:  #16211c;
  --piedra-suave:  #1b2029;
  --arena-suave:   #221f17;
  --arcilla-suave: #241c19;
  --ciruela-suave: #211c22;

  --accent:      var(--petroleo);
  --accent-hot:  #9ed6e5;
  --accent-soft: var(--petroleo-suave);
  --accent-line: #29404a;

  --night:       #0c0b0a;
  --night-2:     #181715;
  --night-ink:   #f2f1ee;

  --good:        var(--verde);
  --good-soft:   var(--verde-suave);
  --bad:         var(--arcilla);
  --bad-soft:    var(--arcilla-suave);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);
  --shadow:      0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px -10px rgba(0, 0, 0, .5);
  --shadow-lg:   0 4px 8px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* 2 · BASE =============================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--accent-soft); color: var(--ink); }

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

.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.saltar-al-contenido:focus { left: 0; }

/* 3 · TIPOGRAFÍA ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* La escala es más alta que la de una web de contenido normal, a propósito. En
   una tienda el titular tiene que sostener la pantalla él solo, porque muchas
   veces es lo único que hay arriba: si el titular es pequeño, la página parece
   un blog. Apple y Nike llevan esto al extremo; aquí se queda a medio camino,
   porque debajo siempre hay datos que también tienen que leerse. */
h1 { font-size: clamp(2.4rem, 6.2vw, 4.2rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); letter-spacing: -.024em; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
/* Un filete y nada más. Aquí hubo una cinta métrica dibujada con marcas, de
   cuando la idea de la web giraba alrededor de medir. Al cambiar el logo y el
   titular, esa metáfora desapareció y el adorno se quedaba solo, contando algo
   que ya no dice nadie más en la página. Una línea limpia acompaña al rótulo
   sin pedir atención, que es lo que hace falta. */
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 64px;
  background: var(--accent-line);
}
.eyebrow--centrado { justify-content: center; }
.eyebrow--centrado::after { display: none; }

.entradilla {
  font-size: clamp(1.02rem, 1.7vw, 1.19rem);
  color: var(--ink-2);
  line-height: 1.62;
  max-width: 62ch;
}

.prosa { max-width: 68ch; }
.prosa p { margin-bottom: 1.15em; }
.prosa strong { font-weight: 640; color: var(--ink); }
.prosa h3 { margin-top: 2.1em; }
.prosa ul, .prosa ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prosa li { margin-bottom: .45em; }
.prosa a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prosa a:hover { color: var(--accent-hot); }

/* 4 · LAYOUT ============================================================= */

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap--estrecho { width: min(100% - 2.4rem, 820px); margin-inline: auto; }

.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion--fina { padding-block: clamp(2rem, 4vw, 3rem); }
.seccion--papel { background: var(--paper-2); }
.seccion--superficie { background: var(--surface); border-block: 1px solid var(--line); }

.cabecera-seccion { margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.cabecera-seccion--fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.cabecera-seccion h2 { margin-bottom: .3em; }
.cabecera-seccion .entradilla { margin: 0; }

.rejilla { display: grid; gap: var(--gap); }
/* El `min(280px, 100%)` no es un adorno. Con `minmax(280px, 1fr)` a secas, una
   columna nunca puede bajar de 280 px ni aunque el hueco disponible sea menor:
   en una pantalla de 320 px el contenedor mide 294 y la tarjeta seguía midiendo
   320, así que la página se iba 13 px a la derecha y aparecía barra horizontal.
   Con `min()` el mínimo pasa a ser «280 px o todo el ancho, lo que sea menor»,
   y en pantallas estrechas la tarjeta ocupa justo lo que hay. */
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* 5 · CABECERA =========================================================== */

/* Cabecera de una sola línea sobre blanco, separada del contenido por un filete
   de un píxel. Nada de fondos de color: la jerarquía la da el tamaño y el peso
   de la tipografía, no el relleno. */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.cabecera .marca__icono { color: var(--ink); }
.cabecera__fila {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 66px;
}

.marca { display: flex; align-items: center; gap: .62rem; flex-shrink: 0; }
.marca__icono {
  width: 30px; height: 30px; flex: none;
  color: var(--accent);
}
.marca__texto {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.05;
}
/* El subtítulo de la marca iba a 9,3 px en gris apagado: 3,8:1 de contraste y
   un tamaño por debajo de lo legible. Subido a 10,4 px y al gris medio. */
.marca__texto small {
  display: block;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
.pie .marca__texto small { color: color-mix(in srgb, var(--night-ink) 80%, transparent); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a {
  padding: .5rem .72rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 520;
  color: var(--ink-2);
  transition: background .16s ease, color .16s ease;
  white-space: nowrap;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 640; }
.nav a.nav__cta {
  background: var(--ink); color: var(--paper);
  font-weight: 600; margin-left: .4rem;
}
/* color: var(--paper) y no #fff. En el tema oscuro --accent es azul CLARO
   (#9db3cb), así que el blanco a pelo daba 2,16:1 y el botón quedaba ilegible
   al pasar el ratón. Con --paper el texto es casi blanco sobre el acento
   oscuro del tema claro (5,34:1) y casi negro sobre el acento claro del oscuro
   (8,76:1). Es el mismo token que ya usa esta regla sin :hover. */
.nav a.nav__cta:hover { background: var(--accent); color: var(--paper); }

/* Menú desplegable de categorías */
.nav__grupo { position: relative; }
.nav__disparador {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .5rem .72rem; border: 0; background: none; cursor: pointer;
  border-radius: 8px; font-size: .875rem; font-weight: 520; color: var(--ink-2);
}
.nav__disparador:hover { background: var(--paper-2); color: var(--ink); }
.nav__disparador svg { width: 11px; height: 11px; transition: transform .18s ease; }
.nav__grupo.abierto .nav__disparador svg { transform: rotate(180deg); }
.nav__panel {
  position: absolute; top: calc(100% + .5rem); right: 0;
  width: min(92vw, 640px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.15rem;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}
.nav__grupo.abierto .nav__panel { display: grid; }
.nav__panel .menu__rotulo {
  font-family: var(--sans); font-size: .655rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .5rem;
  font-weight: 650;
}
.nav__panel a {
  display: block; padding: .34rem .5rem; border-radius: 7px;
  font-size: .855rem; color: var(--ink-2);
}
.nav__panel a:hover { background: var(--accent-soft); color: var(--accent); }

.menu-movil {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-movil svg { width: 18px; height: 18px; }

/* 6 · PIE =============================================================== */

.pie {
  background: var(--night);
  color: var(--night-ink);
  padding-block: clamp(2.8rem, 5vw, 4rem) 1.6rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.pie a { color: color-mix(in srgb, var(--night-ink) 78%, transparent); }
.pie a:hover { color: var(--night-accent); }
.pie__rejilla {
  display: grid; gap: 2.4rem;
  grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pie .marca__texto { color: var(--night-ink); }
.pie .marca__icono { color: var(--night-accent); }
/* El texto del pie iba al 65 % y al 52 % de opacidad, lo que daba 3,6:1 y 2,1:1
   de contraste sobre el fondo oscuro: por debajo del 4,5:1 que pide la norma de
   accesibilidad para texto pequeño. Subido hasta cumplir sin que deje de leerse
   como texto secundario. */
.pie__lema {
  margin-top: 1rem; font-size: .9rem; line-height: 1.65;
  color: color-mix(in srgb, var(--night-ink) 82%, transparent);
  max-width: 34ch;
}
.pie .menu__rotulo {
  font-family: var(--sans); font-size: .655rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--night-accent); margin: 0 0 .85rem;
  font-weight: 650;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .48rem; font-size: .875rem; }
.pie__legal {
  padding-top: 1.6rem;
  font-size: .78rem; line-height: 1.6;
  color: color-mix(in srgb, var(--night-ink) 80%, transparent);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
}

/* Aviso de afiliados: obligatorio y visible en todas las páginas */
.aviso-afiliados {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: .78rem 1rem;
  font-size: .805rem;
  line-height: 1.55;
  color: var(--ink-2);
  display: flex; gap: .68rem; align-items: flex-start;
}
.aviso-afiliados svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--accent); }
.aviso-afiliados a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.aviso-afiliados--pie {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: color-mix(in srgb, var(--night-ink) 84%, transparent);
  margin-bottom: 1.8rem;
}
/* La variante de pie va sobre fondo oscuro en los dos temas, así que usa el
   azul claro y no --accent-hot, que en el tema claro es oscuro (daba 2,3:1). */
.aviso-afiliados--pie svg, .aviso-afiliados--pie a { color: var(--night-accent); }

/* 7 · BOTONES Y ETIQUETAS ================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .74rem 1.2rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .9rem;
  font-weight: 620;
  letter-spacing: -.005em;
  cursor: pointer;
  text-align: center;
  transition: transform .13s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--amazon {
  background: linear-gradient(180deg, #ffb44a, #f28f18);
  color: #1d1400;
  border-color: #d97e0d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, var(--shadow-sm);
}
.btn--amazon:hover { background: linear-gradient(180deg, #ffc266, #f89b23); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow); }

.btn--oscuro { background: var(--ink); color: var(--paper); }
.btn--oscuro:hover { background: var(--accent); color: var(--paper); }

.btn--fantasma {
  background: var(--surface); color: var(--ink); border-color: var(--line-2);
}
.btn--fantasma:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

.btn--bloque { width: 100%; }
.btn--grande { padding: .95rem 1.5rem; font-size: 1rem; }
.btn--mini { padding: .46rem .78rem; font-size: .8rem; border-radius: 8px; }

/* Las etiquetas cortas —«Gama alta», «Doble motor»— no deben partirse en dos
   líneas, pero la del modelo destacado lleva una frase entera («Nuestra
   favorita: la carga mejor resuelta del comparador») y con nowrap medía 415 px
   de mínimo: en un móvil de 375 empujaba toda la ficha fuera de la pantalla.
   Se deja que envuelva y se equilibran las líneas para que no quede una
   palabra suelta abajo. */
.etiqueta {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .22rem .58rem;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 660;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.32;
}
/* Las de una o dos palabras sí se mantienen en una línea. */
.etiqueta--neutra { white-space: nowrap; }
.etiqueta--destacado {
  background: var(--arena-suave); color: var(--arena);
  border: 1px solid color-mix(in srgb, var(--arena) 28%, transparent);
}
.etiqueta--neutra { background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line); }
/* .etiqueta--pack se quitó junto con los packs de dos unidades: venía de la
   maquinaria anterior, donde varios modelos se vendían por pares. Aquí no
   entra ninguno: los packs se descartan del catálogo a propósito, porque
   ganarían cualquier clasificación de calidad-precio contra unidades sueltas. */

.pastilla {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .68rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface);
  font-size: .78rem; color: var(--ink-2);
}
.pastilla svg { width: 13px; height: 13px; color: var(--accent); }

/* Estrellas */
.estrellas { display: inline-flex; align-items: center; gap: .38rem; white-space: nowrap; }
.estrellas__iconos { display: inline-flex; gap: 1px; color: var(--accent-hot); }
.estrellas__iconos svg { width: 14px; height: 14px; }
.estrellas__nota { font-size: .82rem; font-weight: 620; color: var(--ink); }
.estrellas__conteo { font-size: .78rem; color: var(--ink-3); }

/* Banda de precio. No mostramos importes: ver precio_bloque() en build_site.py */
.precio { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.precio__gama {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 620; letter-spacing: .01em;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .28rem .72rem;
}
/* .precio__unidad tampoco se usa: era el precio por unidad de los packs. */
.precio__nota {
  font-size: .72rem; color: var(--ink-3); margin-top: .38rem; line-height: 1.45;
  display: flex; align-items: center; gap: .3rem;
}
.precio__nota svg { width: 11px; height: 11px; flex: none; }

/* 8 · TARJETAS DE PRODUCTO =============================================== */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }

/* La foto crece un poco al pasar por encima. Es el gesto que usan casi todas
   las tiendas grandes y funciona por una razón concreta: confirma que la
   tarjeta entera es pulsable, sin tener que dibujar un botón que ensucie la
   rejilla. Muy sutil (2%%) —más que eso marea en una rejilla de nueve. */
.tarjeta__medio > img { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.tarjeta:hover .tarjeta__medio > img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover { transform: none; }
  .tarjeta:hover .tarjeta__medio > img { transform: none; }
}

/* Cajas de foto: manda la caja, nunca la foto. Con la imagen en flujo normal
   el alto natural del JPEG empujaba la tarjeta y rompía la rejilla, así que
   todas las fotos van posicionadas dentro de una caja con proporción fija. */
.tarjeta__medio,
.eleccion__medio,
.galeria__principal,
.tarjeta-recomendacion__medio,
.col-producto__img,
.opcion__img,
.galeria__miniaturas button {
  background: var(--foto-fondo);
}
.tarjeta__medio,
.eleccion__medio,
.galeria__principal,
.tarjeta-recomendacion__medio {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: block;
}
.tarjeta__medio > img,
.eleccion__medio > img,
.galeria__principal > img,
.tarjeta-recomendacion__medio > img {
  position: absolute; inset: var(--foto-margen, 1rem);
  width: calc(100% - var(--foto-margen, 1rem) * 2);
  height: calc(100% - var(--foto-margen, 1rem) * 2);
  object-fit: contain;
}

.tarjeta__medio {
  aspect-ratio: 4 / 3.4;
  border-bottom: 1px solid var(--line);
  --foto-margen: 1.15rem;
}
.tarjeta__medio img { mix-blend-mode: multiply; }
/* multiply funde el blanco de la foto con el de su caja en los dos temas,
   porque --foto-fondo es el mismo claro siempre. */

.tarjeta__etiquetas {
  position: absolute; z-index: 2; top: .7rem; left: .7rem; right: .7rem;
  display: flex; gap: .35rem; flex-wrap: wrap; pointer-events: none;
}
.tarjeta__cuerpo { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.tarjeta__marca {
  font-size: .68rem; font-weight: 680; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.tarjeta__titulo {
  font-family: var(--display); font-size: 1.09rem; font-weight: 620;
  letter-spacing: -.015em; line-height: 1.25; margin: 0;
}
.tarjeta__titulo a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.tarjeta__resumen {
  font-size: .845rem; color: var(--ink-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
}
.tarjeta__datos {
  display: flex; flex-wrap: wrap; gap: .3rem .45rem; margin-top: auto; padding-top: .2rem;
}
.tarjeta__dato {
  font-size: .735rem; color: var(--ink-2);
  background: var(--paper-2); border-radius: 6px; padding: .18rem .45rem;
  border: 1px solid var(--line);
}
.tarjeta__pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .8rem; padding-top: .75rem; border-top: 1px solid var(--line);
}
.tarjeta__acciones { display: flex; gap: .45rem; position: relative; z-index: 2; }

/* Barra de puntuación global en la tarjeta */
.nota-global { display: flex; align-items: center; gap: .55rem; }
.nota-global__valor {
  font-family: var(--display); font-weight: 650; font-size: 1.02rem;
  color: var(--accent); line-height: 1;
}
.nota-global__barra {
  flex: 1; height: 5px; border-radius: 999px; background: var(--paper-2);
  overflow: hidden; min-width: 54px;
}
.nota-global__relleno {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
}
.nota-global__etiqueta { font-size: .7rem; color: var(--ink-3); }

/* 9 · HOME =============================================================== */

.hero {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__rejilla {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
}
.hero h1 { margin-bottom: .42em; }
/* La palabra destacada se separa por forma, no por color: cursiva y un gris
   un punto más claro que el resto del titular. */
.hero h1 em {
  font-style: italic; color: var(--ink-2);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.hero__datos {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.75rem; }

/* Tarjeta grande de la elección del editor. Vive dentro del hero «noche», así
   que devuelve el color de texto al de una superficie clara. */
.eleccion {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.eleccion__cinta {
  background: var(--ink); color: var(--paper);
  padding: .58rem 1.15rem;
  font-size: .69rem; font-weight: 680; letter-spacing: .13em; text-transform: uppercase;
  display: flex; align-items: center; gap: .45rem;
}
.eleccion__cinta svg { width: 13px; height: 13px; color: var(--accent-hot); }
.eleccion__medio { aspect-ratio: 16 / 11; --foto-margen: 1.4rem; }
.eleccion__cuerpo { padding: 1.25rem 1.4rem 1.4rem; display: grid; gap: .75rem; }
.eleccion__titulo { font-size: 1.32rem; margin: 0; }
.eleccion__frase { font-size: .9rem; color: var(--ink-2); }

/* Las dos puertas de entrada de la portada: escritorios y sillas.
   Es lo primero que ve quien llega, así que van grandes y con su tono. */
.puertas {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.puerta {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tono, var(--accent));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.puerta:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--line-2);
  border-left-color: var(--tono, var(--accent));
}
.puerta > svg { width: 34px; height: 34px; flex: none; color: var(--tono, var(--accent)); }
.puerta__texto { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.puerta__texto strong { font-family: var(--display); font-size: 1.28rem; font-weight: 650; letter-spacing: -.02em; }
.puerta__texto span { font-size: .87rem; color: var(--ink-2); }
.puerta__flecha { margin-left: auto; color: var(--ink-3); flex: none; }
.puerta__flecha svg { width: 20px; height: 20px; }
.puerta:hover .puerta__flecha { color: var(--tono, var(--accent)); }

/* La tira de garantías, justo debajo del titular.
   Es el patrón que usan casi todas las tiendas grandes —IKEA, Nike, cualquier
   comercio serio— y cumple una función muy concreta: responde en dos segundos a
   «¿me puedo fiar de esta web?» antes de que la persona baje a mirar producto.
   Va sobre la cinta métrica, que aquí actúa de separador entre el titular y el
   resto de la página. */
.garantias {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.garantias__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.garantias__item {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.15rem 1.3rem;
  border-left: 1px solid var(--line);
}
.garantias__item:first-child { border-left: 0; }
.garantias__item svg {
  width: 21px; height: 21px; flex: none; margin-top: .12rem;
  color: var(--accent);
}
.garantias__item strong {
  display: block; font-size: .87rem; font-weight: 640;
  letter-spacing: -.01em; margin-bottom: .1rem;
}
.garantias__item span { font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
/* En móvil las columnas se apilan, así que el filete tiene que pasar de estar a
   la izquierda a estar arriba; si no, quedan rayas sueltas en el aire. */
@media (max-width: 720px) {
  .garantias__item { border-left: 0; border-top: 1px solid var(--line); }
  .garantias__item:first-child { border-top: 0; }
}

/* Tira de categorías */
.tira-categorias {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
/* Cada grupo de categorías tiene su tono, puesto por el generador en --tono.
   El icono va sobre una pastilla del tono suave: es el «toque de color» sin
   teñir la tarjeta entera. */
.tira-categorias a {
  display: flex; align-items: center; gap: .78rem;
  padding: .95rem 1.05rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.tira-categorias a:hover {
  border-color: var(--tono, var(--accent));
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.tira-categorias svg {
  width: 34px; height: 34px; flex: none;
  color: var(--tono, var(--accent));
  background: var(--tono-suave, var(--accent-soft));
  border-radius: 9px; padding: 7px;
}
.tira-categorias strong { display: block; font-size: .9rem; font-weight: 620; letter-spacing: -.01em; }
.tira-categorias span { font-size: .755rem; color: var(--ink-3); }

/* Bloque de confianza «cómo elegimos» */
.confianza { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.confianza__item { display: grid; gap: .55rem; }
/* Los cuatro pasos de «cómo elegimos» van cada uno en un tono: es lo que hace
   que se lean como cuatro cosas distintas y no como una lista repetida. */
.confianza__num {
  font-family: var(--display); font-size: 2.1rem; font-weight: 600;
  line-height: 1; letter-spacing: -.03em;
  color: var(--tono, var(--accent));
}
.confianza__item:nth-child(1) { --tono: var(--piedra); }
.confianza__item:nth-child(2) { --tono: var(--petroleo); }
.confianza__item:nth-child(3) { --tono: var(--arena); }
.confianza__item:nth-child(4) { --tono: var(--ciruela); }
.confianza__item { padding-left: .9rem; border-left: 2px solid var(--tono); }
.confianza__item h3 { font-size: 1.06rem; margin: 0; }
.confianza__item p { font-size: .875rem; color: var(--ink-2); margin: 0; }

/* 10 · FICHA DE PRODUCTO ================================================= */

.migas {
  font-size: .78rem; color: var(--ink-3);
  padding-block: 1.1rem .2rem;
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.migas a:hover { color: var(--accent); }
.migas svg { width: 11px; height: 11px; opacity: .5; }

.ficha { padding-block: 1.6rem clamp(2rem, 4vw, 3rem); }
.ficha__superior {
  display: grid; gap: clamp(1.6rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: start;
}

/* Galería */
.galeria { position: sticky; top: 88px; display: grid; gap: .75rem; }
.galeria__principal {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  --foto-margen: 1.6rem;
}
.galeria__miniaturas {
  display: flex; gap: .55rem; overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: thin;
}
.galeria__miniaturas button {
  position: relative; overflow: hidden;
  flex: 0 0 68px; width: 68px; height: 68px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--foto-fondo); padding: 0; cursor: pointer;
  transition: border-color .15s ease;
}
.galeria__miniaturas button img {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain;
}
.galeria__miniaturas button[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.galeria__contador {
  position: absolute; bottom: .7rem; right: .8rem;
  background: color-mix(in srgb, var(--ink) 78%, transparent); color: var(--paper);
  border-radius: 999px; padding: .16rem .55rem; font-size: .7rem; font-weight: 600;
}

/* Cabecera de compra */
.compra { display: grid; gap: 1.05rem; }
.compra__marca {
  font-size: .7rem; font-weight: 680; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.compra h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0; }
.compra__meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.compra__caja {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem;
  display: grid; gap: .85rem;
}
.compra__acciones { display: grid; gap: .55rem; grid-template-columns: 1fr auto; }
.compra__resumen { font-size: .93rem; color: var(--ink-2); line-height: 1.62; }
.compra__ideal {
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
  font-size: .885rem; line-height: 1.58;
}
.compra__ideal strong { display: block; font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .28rem; }

/* Rejilla de datos rápidos */
.datos-rapidos {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
.datos-rapidos > div { background: var(--surface); padding: .8rem .9rem; }
.datos-rapidos dt {
  font-size: .655rem; font-weight: 660; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem;
}
.datos-rapidos dd { margin: 0; font-size: .93rem; font-weight: 600; letter-spacing: -.01em;
  font-feature-settings: var(--cifras-tabulares); }

/* Bloques de la ficha */
.bloque { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.bloque__titulo { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.bloque__titulo h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.bloque__titulo p { margin: 0; font-size: .84rem; color: var(--ink-3); }

/* Tabla de características */
.tabla-specs { width: 100%; border-collapse: collapse; font-size: .89rem;
  font-feature-settings: var(--cifras-tabulares); }
.tabla-specs caption {
  text-align: left; font-family: var(--sans);
  font-size: .655rem; font-weight: 680; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); padding: 1.15rem 0 .5rem;
}
.tabla-specs th, .tabla-specs td {
  text-align: left; padding: .62rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabla-specs th { font-weight: 540; color: var(--ink-3); width: 46%; }
.tabla-specs td { font-weight: 570; }
.tabla-specs tr:hover th, .tabla-specs tr:hover td { background: var(--surface-2); }
.tabla-specs .vacio { color: var(--ink-3); font-weight: 400; }
.panel-specs {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .3rem 1.15rem 1.15rem;
}

/* Pros y contras */
.pros-contras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pros-contras__caja {
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
  border: 1px solid var(--line); background: var(--surface);
}
.pros-contras__caja h3 {
  font-family: var(--sans); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 680; margin: 0 0 .85rem; display: flex; align-items: center; gap: .45rem;
}
.pros-contras__caja svg { width: 15px; height: 15px; }
.pros-contras--si { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 24%, transparent); }
.pros-contras--si h3 { color: var(--good); }
.pros-contras--no { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 24%, transparent); }
.pros-contras--no h3 { color: var(--bad); }
.pros-contras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pros-contras li {
  display: flex; gap: .55rem; font-size: .875rem; line-height: 1.52; color: var(--ink-2);
}
.pros-contras li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.pros-contras--si li svg { color: var(--good); }
.pros-contras--no li svg { color: var(--bad); }

/* Reseñas */
.resenas-resumen {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  display: grid; gap: 1rem; grid-template-columns: auto 1fr; align-items: start;
}
.resenas-nota { text-align: center; padding-right: 1.35rem; border-right: 1px solid var(--line); }
.resenas-nota__valor {
  font-family: var(--display); font-size: 2.6rem; font-weight: 650;
  line-height: 1; letter-spacing: -.03em;
}
.resenas-nota__de { font-size: .74rem; color: var(--ink-3); display: block; margin-top: .35rem; }
.resenas-resumen p { font-size: .89rem; color: var(--ink-2); margin: 0; line-height: 1.6; }
.resenas-resumen .fuente { font-size: .72rem; color: var(--ink-3); margin-top: .6rem; }

.barras-estrellas { display: grid; gap: .28rem; margin-top: .9rem; }
.barras-estrellas__fila { display: grid; grid-template-columns: 46px 1fr 36px; gap: .55rem; align-items: center; font-size: .74rem; color: var(--ink-3); }
.barras-estrellas__pista { height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.barras-estrellas__relleno { height: 100%; background: var(--accent-hot); border-radius: 999px; }

.resenas-lista { display: grid; gap: .9rem; margin-top: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.resena {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
  display: grid; gap: .5rem;
}
.resena__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.resena__autor { font-size: .8rem; font-weight: 620; }
.resena__fecha { font-size: .71rem; color: var(--ink-3); }
.resena h3 { margin: 0; font-family: var(--sans); font-size: .9rem; font-weight: 650; letter-spacing: -.01em; }
.resena p { margin: 0; font-size: .855rem; color: var(--ink-2); line-height: 1.58; }

/* Barra de compra pegajosa en móvil */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .8rem;
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .25);
}
.barra-compra .btn { flex: 1; }

/* 11 · RADAR ============================================================= */

.panel-radar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.35rem;
  display: grid; gap: 1.15rem; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: center;
}
.radar { width: 100%; height: auto; display: block; overflow: visible; }
.radar__malla { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar__eje { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.radar__etiqueta {
  font-family: var(--sans); font-size: 10.5px; font-weight: 620;
  fill: var(--ink-2); letter-spacing: .01em;
}
.radar__valor { font-family: var(--sans); font-size: 9.5px; font-weight: 700; fill: var(--accent); }
.radar__poligono { stroke-width: 2; stroke-linejoin: round; }
.radar__punto { stroke: var(--surface); stroke-width: 1.5; }

.leyenda-ejes { display: grid; gap: .5rem; }
.leyenda-ejes__fila { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; }
.leyenda-ejes__nombre { font-size: .82rem; color: var(--ink-2); }
.leyenda-ejes__pista { grid-column: 1 / -1; height: 5px; background: var(--paper-2); border-radius: 999px; overflow: hidden; margin-top: -4px; }
.leyenda-ejes__relleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); }
.leyenda-ejes__valor { font-size: .8rem; font-weight: 680; color: var(--accent); font-variant-numeric: tabular-nums; }
.nota-editorial {
  font-size: .74rem; color: var(--ink-3); line-height: 1.5;
  display: flex; gap: .4rem; align-items: flex-start; margin-top: .3rem;
}
.nota-editorial svg { width: 12px; height: 12px; flex: none; margin-top: 3px; }

/* 12 · COMPARADOR ======================================================== */

.comparador { padding-block: 1.5rem clamp(2rem, 4vw, 3rem); }

.selector {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.25rem;
  margin-bottom: 1.6rem;
}
.selector__cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.selector__cabecera h2 { margin: 0; font-size: 1.2rem; }
.selector__contador { font-size: .8rem; color: var(--ink-3); }
/* Sin scroll propio: una lista que se desplaza dentro de la página confunde
   cuando el ratón cae encima. Con 30 modelos, quien busca algo concreto usa
   el buscador de arriba. */
.selector__rejilla {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
}
.selector__buscar {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface-2); padding: .1rem .8rem;
  margin-bottom: .9rem;
}
.selector__buscar svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.selector__buscar input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: .875rem; color: var(--ink);
  padding: .6rem 0;
}
.selector__buscar:focus-within { border-color: var(--accent); }

/* Apagada, no escondida: un escritorio no se puede comparar contra una silla
   —no comparten ni un eje—, pero hacer desaparecer la mitad del catálogo al
   elegir el primer modelo parecería un fallo de la web. Así se ve que está y
   se entiende, con el title, por qué no se puede pulsar ahora. */
.opcion--apagada {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(1);
}
.opcion--apagada:hover { border-color: var(--line); transform: none; }

.opcion {
  display: flex; gap: .75rem; align-items: center;
  padding: .65rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color .16s ease, background .16s ease;
  position: relative;
}
.opcion:hover { border-color: var(--line-2); }
.opcion[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opcion__img {
  position: relative; overflow: hidden;
  width: 46px; height: 46px; flex: none;
  border-radius: 8px; background: var(--foto-fondo);
}
.opcion__img img {
  position: absolute; inset: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  object-fit: contain;
}
/* Los dos son <span>: sin display:block se pegaban en la misma línea. */
.opcion__texto { min-width: 0; display: block; }
.opcion__nombre {
  display: block;
  font-size: .845rem; font-weight: 620; letter-spacing: -.01em; line-height: 1.25;
}
.opcion__meta { display: block; font-size: .74rem; color: var(--ink-3); margin-top: .15rem; }
.opcion__marca {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center; margin-left: auto;
}
.opcion[aria-pressed="true"] .opcion__marca { background: var(--accent); border-color: var(--accent); }
/* La marca de selección va sobre --accent, que cambia de claro a oscuro con el
   tema: el blanco fijo desaparecía en el tema oscuro. */
.opcion__marca svg { width: 10px; height: 10px; color: var(--paper); opacity: 0; }
.opcion[aria-pressed="true"] .opcion__marca svg { opacity: 1; }
.opcion__color { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }

.comparador__vacio {
  text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1px dashed var(--line-2); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--ink-3);
}
.comparador__vacio svg { width: 38px; height: 38px; color: var(--line-2); margin-bottom: .9rem; }
.comparador__vacio h3 { color: var(--ink-2); margin-bottom: .35rem; }

.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.tabla-comparativa { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: .875rem;
  font-feature-settings: var(--cifras-tabulares); }
.tabla-comparativa th, .tabla-comparativa td {
  padding: .7rem .85rem; text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
/* La cabecera de la tabla NO se fija en vertical, a propósito: el contenedor
   lleva scroll horizontal y eso lo convierte en el contexto de scroll, con lo
   que un `sticky` vertical nunca llega a engancharse —solo estorbaba visualmente
   contra la cabecera del sitio—. Lo que sí se fija es la primera columna, que
   es la que de verdad hace falta al desplazarse en horizontal. */
.tabla-comparativa thead th {
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  vertical-align: top; padding: .75rem .7rem;
}
.tabla-comparativa tbody th {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-2);
  font-weight: 540; color: var(--ink-3);
  min-width: 176px; border-right: 1px solid var(--line);
}
.tabla-comparativa thead th:first-child {
  position: sticky; left: 0; z-index: 4;
  background: var(--surface); border-right: 1px solid var(--line);
}
.tabla-comparativa tbody tr:hover td { background: var(--surface-2); }
.tabla-comparativa .grupo th {
  background: var(--paper-2); color: var(--accent);
  font-size: .655rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 680;
  padding-block: .55rem;
}
.tabla-comparativa td.mejor {
  background: var(--good-soft);
  font-weight: 680; color: var(--good);
  position: relative;
}
.tabla-comparativa td.mejor::after {
  content: "▲"; font-size: .5rem; margin-left: .35rem; vertical-align: middle; opacity: .75;
}
.tabla-comparativa td .vacio { color: var(--ink-3); }

.col-producto { display: grid; gap: .38rem; min-width: 148px; }
/* La foto va posicionada, no en flujo. Dentro de una tabla el `max-height:100%`
   de una imagen no resuelve —la altura de la celda es indefinida para el motor
   de tablas— y la foto se dibujaba a su tamaño natural, derramándose por encima
   de las filas de datos. Con inset + overflow hidden la caja manda siempre. */
.col-producto__img {
  position: relative; height: 46px; overflow: hidden;
  background: var(--foto-fondo); border-radius: 8px;
  display: block;
}
.col-producto__img img {
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: contain;
}
.col-producto__nombre { font-size: .84rem; font-weight: 620; line-height: 1.25; letter-spacing: -.01em; }
.col-producto__quitar {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: .72rem; color: var(--ink-3); text-decoration: underline; justify-self: start;
}
.col-producto__quitar:hover { color: var(--bad); }
.col-producto__barra { height: 3px; border-radius: 999px; }

.leyenda-radar { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; justify-content: center; margin-top: 1rem; }
.leyenda-radar__item { display: flex; align-items: center; gap: .42rem; font-size: .8rem; color: var(--ink-2); }
.leyenda-radar__punto { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.panel-radar-comparativa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.6rem;
}
.panel-radar-comparativa .radar { max-width: 520px; margin-inline: auto; }

.veredicto { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 1.6rem; }
/* Los cuatro veredictos, cada uno con su tono: se distinguen de un vistazo. */
.veredicto__caja {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--tono, var(--accent));
  border-radius: var(--radius-sm); padding: .95rem 1.1rem;
}
.veredicto__caja:nth-child(1) { --tono: var(--piedra); }
.veredicto__caja:nth-child(2) { --tono: var(--arcilla); }
.veredicto__caja:nth-child(3) { --tono: var(--petroleo); }
.veredicto__caja:nth-child(4) { --tono: var(--ciruela); }
.veredicto__caja h4 {
  font-family: var(--sans); font-size: .655rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tono, var(--accent)); margin: 0 0 .35rem; font-weight: 680;
}
.veredicto__caja p { margin: 0; font-size: .875rem; line-height: 1.5; }
.veredicto__caja strong { font-weight: 650; }

/* 13 · CATEGORÍAS Y GUÍAS ================================================ */

/* Cada familia de categorías entra con su tono en la cabecera: al saltar de
   «Por estilo» a «Por medidas» se nota que has cambiado de sitio. */
.portada-categoria {
  background:
    radial-gradient(110% 120% at 88% 0%,
      var(--tono-suave, var(--accent-soft)), transparent 64%),
    var(--paper);
  padding-block: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.portada-categoria h1 { margin-bottom: .35em; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.5rem; }
.filtros__etiqueta { font-size: .72rem; font-weight: 660; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: .3rem; }
.filtro {
  padding: .4rem .85rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: .82rem; cursor: pointer; color: var(--ink-2);
  transition: all .15s ease;
}
.filtro:hover { border-color: var(--accent); color: var(--accent); }
.filtro[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

.tabla-ranking { width: 100%; border-collapse: collapse; font-size: .89rem;
  font-feature-settings: var(--cifras-tabulares); }
.tabla-ranking th, .tabla-ranking td { padding: .8rem .85rem; border-bottom: 1px solid var(--line); text-align: left; }
.tabla-ranking thead th { font-size: .655rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 680; }
.tabla-ranking td:first-child {
  font-family: var(--display); font-size: 1.1rem; font-weight: 650; width: 52px;
  color: var(--tono, var(--accent));
}
/* El primer puesto se marca con una pastilla del tono del ranking. */
.tabla-ranking tbody tr:first-child td:first-child {
  background: var(--tono-suave, var(--accent-soft));
  border-radius: 8px; text-align: center;
}

.guia-indice {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.35rem;
  margin-bottom: 2rem;
}
.guia-indice h2 {
  font-family: var(--sans); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .75rem; font-weight: 680;
}
.guia-indice ol { margin: 0; padding-left: 1.15rem; display: grid; gap: .38rem; }
.guia-indice a { font-size: .885rem; color: var(--ink-2); }
.guia-indice a:hover { color: var(--accent); }

.tarjeta-recomendacion {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.35rem;
  margin-block: 1.5rem;
  align-items: center;
}
.tarjeta-recomendacion__medio {
  aspect-ratio: 1; border-radius: var(--radius); --foto-margen: 1rem;
}
.tarjeta-recomendacion__cuerpo { display: grid; gap: .65rem; }
.tarjeta-recomendacion h3 { margin: 0; font-size: 1.2rem; }
.tarjeta-recomendacion__pie { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }

.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.faq summary {
  padding: .95rem 1.15rem; cursor: pointer; font-weight: 620;
  font-size: .95rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.25rem; color: var(--accent); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq__cuerpo { padding: 1rem 1.15rem; font-size: .89rem; color: var(--ink-2); line-height: 1.62; }
.faq__cuerpo p { margin-bottom: .8em; }

/* 14 · (hueco) ============================================================
   Aquí vivía el apartado de OFERTAS: la portada oscura de ofertas, el globo
   rojo con el porcentaje de descuento y la línea de ahorro en verde. Se quitó
   al decidir que la web no enseña precios —Amazon exige que vengan de su API y
   tengan menos de 24 horas—, pero el CSS se quedó huérfano y sin usar en
   ninguna de las 122 páginas. Se borra a propósito: mientras las clases
   existan, es cuestión de tiempo que alguien las vuelva a usar y reaparezcan
   los precios por la puerta de atrás. Si algún día se recupera la función,
   habrá que traer los precios de la API, no de un JSON guardado.
   ======================================================================== */

/* 15 · LEGAL ============================================================= */

.legal { padding-block: clamp(2rem, 4vw, 3.2rem); }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-top: 2.2em; }
.legal h2:first-of-type { margin-top: 1em; }
.legal .destacado {
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; margin-block: 1.5rem;
}
.legal .destacado p:last-child { margin-bottom: 0; }

/* 16 · UTILIDADES Y RESPONSIVE =========================================== */

.centrado { text-align: center; }
.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;
}
.separador { height: 1px; background: var(--line); border: 0; margin-block: clamp(2rem, 4vw, 3rem); }

/* Al bajar a una sola columna se escribe minmax(0, 1fr) y nunca 1fr a secas.
   `1fr` equivale a `minmax(auto, 1fr)`, y ese `auto` impide que la columna baje
   de la anchura mínima de su contenido. Con la tira de seis miniaturas de la
   ficha, esa anchura mínima era de 415 px: en un móvil de 375 empujaba la página
   entera fuera de la pantalla y la ficha se movía en horizontal. Con minmax(0,…)
   la columna encoge y el overflow-x de la tira hace por fin su trabajo.
   Es la misma trampa que causó el problema de las imágenes del comparador. */

@media (max-width: 1040px) {
  .hero__rejilla { grid-template-columns: minmax(0, 1fr); }
  .eleccion { max-width: 520px; }
  .ficha__superior { grid-template-columns: minmax(0, 1fr); }
  .galeria { position: static; }
  .panel-radar { grid-template-columns: minmax(0, 1fr); }
}

/* El menú de escritorio necesita 989 px para caber (291 de la marca + 22 de
   hueco + 676 de los enlaces). Antes se cambiaba al menú de móvil por debajo de
   860, así que entre 861 y 990 px se mostraba el de escritorio sin sitio y la
   cabecera se salía 124 px de la pantalla: justo el ancho de una tablet en
   vertical o de una ventana a media pantalla. Ahora el cambio ocurre a 1040,
   que es el mismo punto donde el resto de la web pasa a una columna. */
@media (max-width: 1040px) {
  .nav { display: none; }
  .menu-movil { display: flex; }
  .cabecera.menu-abierto .nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .8rem; gap: .1rem; box-shadow: var(--shadow);
    max-height: calc(100dvh - 66px); overflow-y: auto;
  }
  .cabecera.menu-abierto .nav__panel { background: transparent; box-shadow: none; border: 0; }
  .cabecera.menu-abierto .nav a,
  .cabecera.menu-abierto .nav__disparador { padding: .72rem .8rem; font-size: .95rem; width: 100%; }
  .cabecera.menu-abierto .nav__disparador { justify-content: space-between; }
  .nav__panel {
    position: static; width: auto; box-shadow: none; border: 0;
    padding: .2rem .8rem .8rem; grid-template-columns: minmax(0, 1fr);
  }
  .cabecera.menu-abierto .nav a.nav__cta { margin: .5rem 0 0; justify-content: center; }
  .barra-compra { display: flex; }
  body.tiene-barra-compra { padding-bottom: 78px; }
  .resenas-resumen { grid-template-columns: minmax(0, 1fr); }
  .resenas-nota { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 1rem; }
  .tarjeta-recomendacion { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-recomendacion__medio { max-width: 240px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .wrap--estrecho { width: min(100% - 1.6rem, var(--wrap)); }
  .compra__acciones { grid-template-columns: minmax(0, 1fr); }
  .datos-rapidos { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .galeria__principal { padding: 1rem; }
  .selector__rejilla { grid-template-columns: minmax(0, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .tabla-comparativa tbody th { min-width: 132px; font-size: .78rem; }
  /* En la cabecera el hueco entre la marca y el botón del menú no necesita ser
     tan grande cuando solo hay dos cosas en la fila. */
  .cabecera__fila { gap: .8rem; }
}

/* En móviles estrechos la cabecera se salía de la pantalla: 53 px de más a 320
   y 13 px a 360, que es uno de los anchos de Android más habituales. La causa
   era el lema de la cabecera —«ESCRITORIOS Y SILLAS COMPARADOS»—, que con el
   espaciado entre letras mide unos 250 px y no puede encogerse porque `.marca` lleva
   flex-shrink: 0. En una pantalla así el lema no aporta nada —el nombre y el
   icono ya identifican la web, y el lema sigue estando en el pie— así que se
   oculta y la marca queda en icono + nombre. */
@media (max-width: 440px) {
  .cabecera .marca__texto small { display: none; }
  .cabecera .marca__texto { font-size: 1.05rem; }
}

/* Red de seguridad para el mismo problema: si algún día el nombre de la marca
   crece, que el texto pueda partirse en dos líneas en vez de empujar la página
   a lo ancho. No se recorta con overflow porque la tipografía serif va con
   line-height 1.05 y cortaría los rabos de las letras. */
@media (max-width: 1040px) {
  .cabecera .marca { min-width: 0; flex-shrink: 1; }
  .cabecera .marca__texto { min-width: 0; }
}

@media print {
  .cabecera, .pie, .barra-compra, .nav, .selector { display: none !important; }
  body { background: #fff; }
}