/* BuscaMuebles — estilos de la web (portada, fichas y legal).
   Paleta de la landing anterior (verde pino + terracota). Fuentes del sistema.
   Modo oscuro: variables en :root, @media (prefers-color-scheme: dark) y
   data-theme="light|dark" en <html> (lo pone tema.js). */

:root {
  --primario: #1F3B32;
  --primario-claro: #2D5246;
  --acento: #D96B43;
  --boton-bg: #B04E2A;        /* terracota oscurecido: 5,3:1 con texto blanco (AA) */
  --boton-bg-hover: #94401F;
  --boton-texto: #FFFFFF;
  --fondo: #F8F9F7;
  --fondo-tarjeta: #FFFFFF;
  --fondo-suave: #F1F3EF;
  --borde: #CBD3C6;
  --borde-suave: #E2E6DF;
  --borde-control: #848F89;   /* bordes de campos y chips: >= 3:1 con el fondo */
  --texto: #1C2321;
  --texto-suave: #4F5A57;
  --enlace: #1F5A45;
  --foco: #B04E2A;
  --ok: #1E6B3C;
  --giro: #1D5FD1;            /* azul de ancho/fondo intercambiables: 5,9:1 sobre blanco */
  --aviso-bg: #FDF3EE;
  --aviso-borde: #E9B49C;
  --sombra: 0 4px 12px rgba(28, 35, 33, 0.07), 0 1px 3px rgba(28, 35, 33, 0.05);
  --radio: 10px;
  --radio-grande: 16px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primario: #9FD3BB;
    --primario-claro: #2D5246;
    --acento: #F0956E;
    --boton-bg: #E8865E;
    --boton-bg-hover: #F2A383;
    --boton-texto: #1A1210;
    --fondo: #111714;
    --fondo-tarjeta: #19221E;
    --fondo-suave: #202B26;
    --borde: #3B4A43;
    --borde-suave: #2A3631;
    --borde-control: #71817A;
    --texto: #E6ECE8;
    --texto-suave: #AEBAB5;
    --enlace: #9FD3BB;
    --foco: #F0956E;
    --ok: #7FD39E;
    --giro: #7DAEFF;          /* 7,4:1 sobre la tarjeta oscura */
    --aviso-bg: #2E211B;
    --aviso-borde: #7A4A35;
    --sombra: 0 4px 12px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primario: #9FD3BB;
  --primario-claro: #2D5246;
  --acento: #F0956E;
  --boton-bg: #E8865E;
  --boton-bg-hover: #F2A383;
  --boton-texto: #1A1210;
  --fondo: #111714;
  --fondo-tarjeta: #19221E;
  --fondo-suave: #202B26;
  --borde: #3B4A43;
  --borde-suave: #2A3631;
  --borde-control: #71817A;
  --texto: #E6ECE8;
  --texto-suave: #AEBAB5;
  --enlace: #9FD3BB;
  --foco: #F0956E;
  --ok: #7FD39E;
  --giro: #7DAEFF;
  --aviso-bg: #2E211B;
  --aviso-borde: #7A4A35;
  --sombra: 0 4px 12px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}
img { max-width: 100%; height: auto; }
a { color: var(--enlace); text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h2 { font-size: 1.25rem; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
button, input, select { font: inherit; color: inherit; }

.sr {
  position: absolute !important; 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: 8px; top: -60px; z-index: 10; padding: 10px 14px;
  background: var(--fondo-tarjeta); border: 2px solid var(--foco); border-radius: var(--radio);
}
.saltar:focus { top: 8px; }

.contenedor { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ---------- Cabecera y pie ---------- */
.cabecera { background: var(--fondo-tarjeta); border-bottom: 1px solid var(--borde-suave); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); min-height: 44px; }
.logo-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; color: #FFFFFF; background: linear-gradient(135deg, #1F3B32, #2D5246);
}
.logo-texto { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.logo-acento { color: var(--boton-bg); }
:root[data-theme="dark"] .logo-acento { color: var(--acento); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-acento { color: var(--acento); } }

.tema-boton {
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid var(--borde-control);
  border-radius: 999px; background: transparent; cursor: pointer; font-size: .875rem; white-space: nowrap;
}

.pie { margin-top: 48px; padding: 24px 0 32px; border-top: 1px solid var(--borde-suave); color: var(--texto-suave); font-size: .9rem; }
.pie a { display: inline-block; padding: 10px 0; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radio); font-weight: 700;
  text-decoration: none; cursor: pointer; border: 2px solid transparent; text-align: center;
}
.boton-principal { background: var(--boton-bg); color: var(--boton-texto); }
.boton-principal:hover { background: var(--boton-bg-hover); }
.boton-secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton-secundario:hover { border-color: var(--texto-suave); }

/* ---------- Portada ---------- */
.intro { padding: 28px 0 12px; }
.fuente { color: var(--texto-suave); margin: 0; }
.aviso-caducado, .aviso-no-disponible {
  background: var(--aviso-bg); border: 1px solid var(--aviso-borde); border-radius: var(--radio);
  padding: 12px 14px; margin: 12px 0;
}

.buscador { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.boton-filtros { display: none; }
.solo-movil { display: none; }

.filtros {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande);
  padding: 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto;
}
.grupo-filtro { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.grupo-filtro legend, .plegable summary { font-weight: 700; margin-bottom: 8px; padding: 0; }
.ayuda { font-size: .85rem; color: var(--texto-suave); margin: 0 0 10px; }
label { cursor: pointer; }
select, input[type="number"] {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--borde-control);
  border-radius: 8px; background: var(--fondo-tarjeta);
}
.principal {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande);
  padding: 16px; margin-bottom: 20px; display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 20px;
}
.campo-categoria label { display: block; font-weight: 700; margin-bottom: 4px; }
.medidas-filtro { border: 0; margin: 0; padding: 0; min-width: 0; }
.medidas-filtro legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.medidas-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.medidas-intro .ayuda { flex: 1 1 auto; }
.dibujo-ejes { flex: none; color: var(--texto-suave); width: 180px; height: auto; }
.dibujo-ejes .caja-ejes { color: var(--borde-control); }
.dibujo-ejes .flechas-ejes, .dibujo-ejes .textos-ejes { color: var(--primario); }
.dibujo-ejes text { font-family: var(--fuente); font-weight: 600; }
.medidas-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.medida-campo { min-width: 0; }
.medida-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.medida-nombre { font-weight: 700; }
.medida-valor { font-size: .9rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.restringida .medida-valor { color: var(--color-rango); font-weight: 700; }
.escribir-valores > summary, .que-medida > summary {
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; color: var(--enlace);
}
.que-medida { margin: 0 0 8px; }
.aviso-medidas { margin: 0; }
.aviso-medidas:not(:empty) {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radio);
  background: var(--aviso-bg); border: 1px solid var(--aviso-borde);
}

/* Deslizador de doble asa: dos <input type="range"> superpuestos; solo las asas reciben el puntero.
   Asas de 44 px (objetivo táctil) con un punto visible de 24 px. */
/* Las asas no reciben el puntero: el arrastre lo gestiona app.js sobre la pista (elige el asa más cercana). */
.doble-rango { position: relative; height: 44px; cursor: pointer; touch-action: pan-y; }
.desactivada .doble-rango { cursor: default; }
.medida-campo { --desde: 0%; --hasta: 100%; --color-rango: var(--primario); }
/* Con el giro activo, ancho y fondo se pintan en azul y llevan el texto "⇄ intercambiables". */
.medida-campo.girable { --color-rango: var(--giro); }
/* Valor pedido fuera de la barra: pista rayada en gris (el texto dice "(fuera de la barra)"). */
.medida-campo.fuera-barra .doble-rango .pista {
  background: repeating-linear-gradient(45deg, var(--borde-control) 0 4px, var(--borde-suave) 4px 8px);
}
.intercambiables { font-size: .8rem; font-weight: 700; color: var(--giro); white-space: nowrap; }
.doble-rango .pista {
  position: absolute; left: 22px; right: 22px; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 3px;
  background: linear-gradient(to right, var(--borde-control) var(--desde), var(--color-rango) var(--desde),
    var(--color-rango) var(--hasta), var(--borde-control) var(--hasta));
}
.doble-rango input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1;
}
.doble-rango input[type="range"]:focus-visible { outline: none; }
.doble-rango input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.doble-rango input[type="range"]::-moz-range-track { height: 44px; background: transparent; border: 0; }
.doble-rango input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: none;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--fondo-tarjeta) 0 6px, var(--color-rango) 7px 12px, transparent 13px);
}
.doble-rango input[type="range"]::-moz-range-thumb {
  pointer-events: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--fondo-tarjeta) 0 6px, var(--color-rango) 7px 12px, transparent 13px);
}
.doble-rango input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: radial-gradient(circle, var(--fondo-tarjeta) 0 6px, var(--color-rango) 7px 12px, var(--fondo-tarjeta) 13px 14px, var(--foco) 15px 18px, transparent 19px);
}
.doble-rango input[type="range"]:focus-visible::-moz-range-thumb {
  background: radial-gradient(circle, var(--fondo-tarjeta) 0 6px, var(--color-rango) 7px 12px, var(--fondo-tarjeta) 13px 14px, var(--foco) 15px 18px, transparent 19px);
}
.desactivada .doble-rango, .desactivada .cajas-rango { opacity: .45; }
.cajas-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cajas-rango label { display: block; font-size: .8rem; color: var(--texto-suave); }
.cajas-rango input { min-height: 44px; }
.medida-desactivada { font-size: .85rem; color: var(--texto-suave); margin: 6px 0 0; }
.casilla-sin-dato { font-size: .9rem; line-height: 1.3; }
.casilla { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.casilla input, .chip input { width: 20px; height: 20px; margin: 0; accent-color: var(--primario); flex: none; }
.cobertura { font-size: .8rem; color: var(--texto-suave); margin: 4px 0 0; }
/* En escritorio, "Escribir medida exacta" y "¿Qué es cada medida?" van siempre abiertos (app.js) y sin título. */
@media (min-width: 600px) {
  .escribir-valores > summary, .que-medida > summary { display: none; }
}
.fila-precio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-precio label { display: block; font-size: .875rem; margin-bottom: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px;
  border: 1.5px solid var(--borde-control); border-radius: 999px; background: var(--fondo-tarjeta); font-size: .9rem;
}
.chip:has(input:checked) { border-color: var(--primario); background: var(--fondo-suave); font-weight: 600; }
.chip:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip input:checked ~ .chip-texto::before { content: "✓ "; }
.muestra { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--borde); flex: none; }
.muestra-vacia { background: repeating-linear-gradient(45deg, var(--fondo-suave) 0 3px, var(--borde) 3px 5px); }
.chip-n { color: var(--texto-suave); font-size: .85em; }
.plegable summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.acciones-filtros { display: grid; gap: 8px; }

.barra-resultados { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.recuento { font-weight: 700; margin: 0; }
.orden { display: flex; align-items: center; gap: 8px; }
.orden select { width: auto; }
.criterio { font-size: .85rem; color: var(--texto-suave); margin: 6px 0 16px; }
.estado-mensaje {
  background: var(--fondo-tarjeta); border: 1px dashed var(--borde); border-radius: var(--radio-grande);
  padding: 20px; margin-bottom: 16px;
}
.estado-mensaje p { margin: 0 0 12px; }
.estado-mensaje.error { border-style: solid; border-color: var(--aviso-borde); background: var(--aviso-bg); }
.recuento:focus { outline: none; }
.recuento:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.mas { display: flex; margin: 16px auto 0; }

/* ---------- Tarjetas ---------- */
.rejilla {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tarjeta {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}
.tarjeta-enlace {
  display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;
  border-radius: var(--radio-grande);
}
.tarjeta-enlace:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.tarjeta-enlace:hover .tarjeta-titulo { text-decoration: underline; }
/* La imagen va después en el DOM (el título primero para lectores) y se coloca arriba con order. */
.tarjeta-img {
  order: -1; aspect-ratio: 4 / 3; background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}
.tarjeta-img .foto { width: 100%; height: 100%; object-fit: contain; }
.es-agotado .tarjeta-img .foto { opacity: .45; filter: grayscale(.6); }
.tarjeta-cuerpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta-cuerpo p { margin: 0; }
.medidas { order: -1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primario); }
.medidas-unidad { font-weight: 500; color: var(--texto-suave); }
.etiqueta-girado {
  order: -1; align-self: flex-start; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--fondo-suave); border: 1px solid var(--primario); color: var(--texto);
}
.fila-girar { margin-top: 12px; }
.fila-girar .ayuda { margin: 0; }
.etiqueta-sin-dato {
  order: -1; align-self: flex-start; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--aviso-bg); border: 1px solid var(--aviso-borde); color: var(--texto);
}
.tarjeta-titulo {
  font-size: 1rem; font-weight: 600; margin: 2px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-marca, .tarjeta-envio, .tarjeta-tienda { font-size: .85rem; color: var(--texto-suave); }
.tarjeta-precio { font-size: 1.15rem; font-weight: 800; }
.tarjeta-variantes { font-size: .85rem; color: var(--texto-suave); }
.etiqueta-agotado {
  align-self: flex-start; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--texto-suave); color: var(--texto);
}

/* ---------- Ficha ---------- */
.volver { margin: 16px 0; }
.volver a { display: inline-flex; align-items: center; min-height: 44px; }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ficha-img {
  background: #FFFFFF; border-radius: var(--radio-grande); overflow: hidden; border: 1px solid var(--borde-suave);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.ficha-img .foto { width: 100%; height: 100%; object-fit: contain; }
.ficha-categoria { margin: 0 0 6px; font-size: .9rem; }
.ficha-categoria a { display: inline-block; padding: 10px 0; }
.ficha-marca { color: var(--texto-suave); margin: 0 0 16px; }
.medidas-grandes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; }
.medida { background: var(--fondo-suave); border-radius: var(--radio); padding: 10px 12px; }
.medida dt { font-size: .85rem; color: var(--texto-suave); }
.medida dd { margin: 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.medida.falta dd { font-size: .9rem; font-weight: 500; color: var(--texto-suave); }
.ficha-precio p { margin: 0 0 4px; }
.precio { font-size: 2rem; font-weight: 800; }
.precio.precio-caducado { font-size: 1.25rem; }
.envio, .revisado { color: var(--texto-suave); }
.revisado { font-size: .875rem; }
.estado { font-weight: 700; }
.estado.disponible { color: var(--ok); }
.estado.agotado { color: var(--texto); }
.ficha-cta { margin: 20px 0; }
.ficha-cta .boton { width: 100%; font-size: 1.05rem; }
.aviso-afiliado { font-size: .85rem; color: var(--texto-suave); margin: 8px 0 0; }
.atributos { display: grid; gap: 6px; margin: 0; }
.atributos div { display: flex; gap: 8px; }
.atributos dt { font-weight: 600; min-width: 80px; }
.atributos dd { margin: 0; }
.bloque { margin-top: 36px; }
.variantes-medidas { font-size: 1rem; margin: 16px 0 4px; }
.variantes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.variantes a { display: inline-flex; align-items: center; min-height: 44px; }
.descripcion { white-space: pre-line; max-width: 75ch; }
.grafico { width: 100%; max-width: 680px; height: auto; display: block; }
.grafico text { fill: var(--texto-suave); font-size: 13px; font-family: var(--fuente); }
.grafico .eje { stroke: var(--borde); stroke-width: 1; }
.grafico .guia { stroke: var(--borde-suave); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico .linea { fill: none; stroke: var(--primario); stroke-width: 2.5; }
.grafico .puntos { fill: var(--boton-bg); }
.datos summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.datos table { border-collapse: collapse; min-width: 260px; }
.datos th, .datos td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--borde-suave); }

/* ---------- Legal ---------- */
.legal { max-width: 75ch; }
.legal h2 { margin-top: 1.6em; }
.pendiente { background: var(--aviso-bg); border: 1px dashed var(--aviso-borde); padding: 0 4px; font-weight: 700; }

/* ---------- Móvil ---------- */
@media (max-width: 899px) {
  .buscador { grid-template-columns: 1fr; gap: 12px; }
  .boton-filtros { display: inline-flex; width: 100%; background: var(--primario); color: var(--fondo-tarjeta); }
  .solo-movil { display: inline-flex; }
  .filtros { display: none; position: static; max-height: none; }
  .principal { grid-template-columns: 1fr; gap: 12px; }
  .filtros.abierto { display: block; }
  /* Cabeceras de medida: "⇄ intercambiables" y el valor pasan a otra línea en vez de desbordar. */
  .medida-cabecera { flex-wrap: wrap; }
  .medida-nombre { min-width: 0; }
  .casilla span { min-width: 0; overflow-wrap: anywhere; }
  /* Sin overflow propio: si no, el sticky de .acciones-filtros quedaría atrapado en el panel. */
  .filtros { overflow: visible; }
  /* "Ver N modelos" y "Quitar todos los filtros" pegados abajo mientras se recorre el panel. */
  .acciones-filtros {
    position: sticky; bottom: 0; z-index: 5; background: var(--fondo-tarjeta);
    margin: 0 -16px; padding: 10px 16px; border-top: 1px solid var(--borde-suave);
  }
  /* Que las barras pegajosas de abajo no tapen el campo con foco. */
  html { scroll-padding-bottom: 72px; }
  /* Recuento pegado abajo solo mientras se ve el bloque de medidas (no coincide con el de arriba:
     el panel va después en la página y su barra solo se pega cuando el bloque de medidas ya no se ve). */
  .recuento-movil {
    display: block; position: sticky; bottom: 0; z-index: 5; margin: 12px -16px 0; padding: 10px 16px;
    background: var(--fondo-tarjeta); border-top: 1px solid var(--borde-suave); font-weight: 700;
  }
  .recuento-movil:empty { display: none; }
  .ficha { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .medidas-fila { grid-template-columns: 1fr; gap: 18px; }
  .dibujo-ejes { width: 130px; }
  /* Textos pequeños, legibles en el móvil (.medida-valor ya va a .9rem). */
  .cajas-rango label, .cobertura { font-size: .875rem; }
}
@media (max-width: 420px) {
  .rejilla { grid-template-columns: 1fr; }
  .ficha-img { aspect-ratio: 4 / 3; }
  .medidas-grandes { grid-template-columns: 1fr; }
  .medida { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .tema-boton { padding: 0 10px; }
  .logo-texto { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }