/* Autonomía Real · La cartelera */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pared: #131416;
  --pared-2: #1b1d21;
  --pared-3: #24272c;
  --linea: #33363c;
  --linea-2: #474b52;
  --texto: #f3f3f1;
  --sub: #b7b9bd;
  --real: #ff8a3d;
  --real-tinta: #1c0e04;
  --real-hover: #ffa065;
  --no: #ff7b7b;
  --no-fondo: rgba(255, 123, 123, 0.14);
  --foto: #e9eaec;
  --foto-tinta: #4d5157;

  --r-1: 4px;
  --r-2: 6px;
  --margen: 32px;
  --fila-gap: 12px;
  --portada-w: clamp(212px, 22vw, 320px);
  --portada-max: 420px;
  --abierta-w: clamp(520px, 42vw, 600px);
  --abierta-foto: clamp(240px, 19vw, 284px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  background: var(--pared);
  color: var(--texto);
  font: 400 15px/1.5 Figtree, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--real); color: var(--real-tinta); }
:focus-visible { outline: 3px solid var(--real); outline-offset: 3px; border-radius: 2px; }
input { caret-color: var(--real); }
/* Para quien usa el teclado: el primer Tab salta el encabezado. */
.saltar {
  position: absolute; left: var(--margen); top: 8px; z-index: 1100; padding: 10px 16px;
  background: var(--texto); color: var(--pared); border-radius: var(--r-1); font-weight: 800; text-decoration: none;
  transform: translateY(-160%);
}
.saltar:focus-visible { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }

html { scrollbar-color: var(--linea-2) var(--pared); }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 10px; border: 2px solid var(--pared); }

/* ---------- Encabezado ---------- */

.tope {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(19, 20, 22, 0.94);
  border-bottom: 1px solid var(--linea);
}
.tope-in {
  display: flex; align-items: center; gap: 32px;
  height: 64px; padding: 0 var(--margen);
}
.marca { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.marca-nombre { font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: -0.015em; }
.marca-nombre b { color: var(--real); font-weight: 900; }
.marca-bajada { font-size: 12px; line-height: 1.2; color: var(--sub); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: var(--r-1);
  color: var(--sub); text-decoration: none; font-weight: 600;
}
.nav a:hover { color: var(--texto); background: var(--pared-2); }
.nav a[aria-current="page"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--real); border-radius: 0; }
.contador {
  min-width: 20px; padding: 0 6px; border-radius: 3px;
  background: var(--real); color: var(--real-tinta);
  font-size: 13px; font-weight: 800; line-height: 20px; text-align: center;
}
/* Buscador de modelos: campo con su botón pegado y la lista de modelos debajo, que se tocan para ir a la ficha. */
.buscar { margin-left: auto; position: relative; display: flex; }
.buscar-campo { position: relative; display: flex; flex: 1; min-width: 0; }
.buscar-campo .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); pointer-events: none; }
.buscar input {
  width: 230px; min-height: 40px; padding: 0 12px 0 38px;
  background: var(--pared-2); border: 1px solid var(--linea); border-right: 0; border-radius: var(--r-1) 0 0 var(--r-1);
}
.buscar input::-webkit-search-cancel-button { display: none; }
.buscar input::placeholder { color: var(--sub); }
.buscar input:hover { border-color: var(--linea-2); }
.buscar input:focus { outline: none; border-color: var(--real); }
.buscar-ir {
  min-height: 40px; padding: 0 14px; flex: none;
  background: var(--texto); color: var(--pared); border: 1px solid var(--texto); border-radius: 0 var(--r-1) var(--r-1) 0;
  font-weight: 800; font-size: 14px; cursor: pointer; transition: background-color 160ms var(--ease);
}
.buscar-ir:hover { background: #ffffff; }
.buscar-ir:focus-visible { outline: 3px solid var(--real); outline-offset: 2px; }
.buscar-res {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 2; width: max(100%, 340px);
  background: var(--pared-2); border: 1px solid var(--linea-2); border-radius: var(--r-2);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.buscar-res[hidden] { display: none; }
.buscar-res ul { list-style: none; margin: 0; padding: 4px; max-height: min(380px, 60vh); overflow-y: auto; }
.buscar-res ul:empty { display: none; }
.buscar-aviso { padding: 10px 16px; font-size: 13.5px; color: var(--sub); }
.buscar-aviso:empty { display: none; }
.buscar-aviso + ul { border-top: 1px solid var(--linea); }
.buscar-aviso b { color: var(--texto); }
.buscar-op { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--r-1); text-decoration: none; }
.buscar-op:hover, .buscar-op[aria-selected="true"] { background: var(--pared-3); }
.buscar-op[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--real); }
.buscar-op b { font-size: 14px; font-weight: 800; color: var(--texto); }
.buscar-op span { font-size: 13px; color: var(--sub); white-space: nowrap; }
.buscar-op .ico { width: 16px; height: 16px; color: var(--sub); }
.buscar-abrir, .menu-btn, .menu { display: none; }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-1);
  font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.boton-comprar { background: var(--real); color: var(--real-tinta); }
.boton-comprar:hover { background: var(--real-hover); }
.boton-claro { background: var(--texto); color: var(--pared); }
.boton-claro:hover { background: #ffffff; }
.boton-borde { background: transparent; border-color: var(--linea-2); color: var(--texto); }
.boton-borde:hover { border-color: var(--sub); background: var(--pared-2); }
.boton-borde[aria-pressed="true"] { border-color: var(--texto); }
.boton-chico { min-height: 38px; padding: 0 14px; font-size: 14px; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boton .ico { width: 17px; height: 17px; }

/* ---------- Recorrido (chips editables) ---------- */

.viaje { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 14px;
  background: var(--pared-2); border: 1px solid var(--linea); border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.chip-campo { cursor: text; transition: border-color 160ms var(--ease); }
.chip-campo:hover { border-color: var(--linea-2); }
.chip-campo:focus-within { border-color: var(--real); }
.chip-campo .ico { width: 16px; height: 16px; color: var(--sub); }
.chip-et { color: var(--sub); font-weight: 600; }
.chip-u { color: var(--sub); }
.chip input {
  border: 0; background: none; padding: 0; min-width: 0;
  font-weight: 800; font-size: 15px; color: var(--texto);
}
.chip input:focus { outline: none; }
.chip input::placeholder { color: #8d9096; font-weight: 600; }
.chip input[inputmode] { width: 3.4ch; text-align: right; }
.chip input[aria-invalid="true"] { color: var(--no); }
.chip-campo:has(input[aria-invalid="true"]) { border-color: var(--no); }
.chip-seg { padding: 3px; gap: 2px; }
.chip-seg label { position: relative; cursor: pointer; }
.chip-seg input { position: absolute; opacity: 0; inset: 0; }
.chip-seg span { display: block; padding: 7px 12px; border-radius: 999px; color: var(--sub); transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.chip-seg label:hover span { color: var(--texto); }
.chip-seg input:checked + span { background: var(--texto); color: var(--pared); font-weight: 800; }
.chip-seg input:focus-visible + span { outline: 3px solid var(--real); outline-offset: 1px; }
.chip-borrar { background: none; border-color: transparent; color: var(--sub); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chip-borrar:hover { color: var(--texto); }
.chip-ir { min-height: 42px; border-radius: 999px; }
.viaje-nota { flex-basis: 100%; font-size: 13px; color: var(--sub); }
.viaje-nota:empty { display: none; }
.viaje-nota.is-error { color: var(--no); font-weight: 600; }
.viaje-opc { flex-basis: 100%; display: grid; gap: 12px; }
.viaje-opc:empty { display: none; }
.opc-t { font-size: 13px; color: var(--sub); }
.opc-t + .opc-lista { margin-top: 6px; }
.opc-t b { color: var(--texto); font-weight: 800; }
.opc-mas {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--texto); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.opc-mas:hover { color: var(--real); }
.opc-mas:focus-visible { outline: 3px solid var(--real); outline-offset: 2px; }
.opc-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.opc {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 42px; padding: 6px 12px; text-align: left;
  background: var(--pared-2); border: 1px solid var(--linea); border-radius: var(--r-2);
  color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.opc:hover { border-color: var(--linea-2); }
.opc:focus-visible { outline: 3px solid var(--real); outline-offset: 1px; }
.opc[aria-pressed="true"] { border-color: var(--texto); background: var(--pared-3); box-shadow: inset 0 0 0 1px var(--texto); }
.opc-zona { font-size: 14px; font-weight: 800; }
.opc-calle { font-size: 12px; color: var(--sub); }
.chip-dir input { width: 20ch; field-sizing: content; min-width: 11ch; max-width: 28ch; }
.chip-dir-in { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: text; }
.chip-gps {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -8px;
  border: 0; border-radius: 999px; background: none; color: var(--sub); cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.chip-gps:hover { color: var(--real); background: var(--pared); }
.chip-gps:focus-visible { outline: 3px solid var(--real); outline-offset: 1px; }
.chip-gps .ico { width: 16px; height: 16px; color: inherit; }
.chip-est { font-size: 12px; font-weight: 700; color: var(--real); }

/* Sugerencias mientras escribís: debajo del campo, por encima del mapa y de la barra del comparador. */
.sug {
  position: absolute; z-index: 950; width: max-content; max-width: min(460px, 100%);
  background: var(--pared-2); border: 1px solid var(--linea-2); border-radius: var(--r-2);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.sug[hidden] { display: none; }
.sug ul { list-style: none; margin: 0; padding: 4px; max-height: 330px; overflow-y: auto; }
.sug-op { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: var(--r-1); cursor: pointer; }
.sug-op:hover { background: var(--pared-3); }
.sug-op[aria-selected="true"] { background: var(--pared-3); box-shadow: inset 3px 0 0 var(--real); }
.sug-calle { font-size: 14px; font-weight: 800; color: var(--texto); }
.sug-zona { font-size: 12.5px; color: var(--sub); }
.sug-pie { padding: 6px 16px 8px; border-top: 1px solid var(--linea); font-size: 11.5px; color: var(--sub); }

/* ---------- Cartelera (primera pantalla) ---------- */

.cartelera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 44%);
  gap: 40px;
  padding: 24px var(--margen) 32px;
  border-bottom: 1px solid var(--linea);
  align-items: stretch;
}
.cartelera-txt { display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: 8px 0; }
.cartelera-txt .viaje { margin-bottom: 28px; }
.titular {
  font-weight: 900; font-size: 52px; line-height: 1.02; letter-spacing: -0.03em;
  max-width: 17ch; text-wrap: balance;
}
.titular .es-real { color: var(--real); }
.porque { font-size: 19px; line-height: 1.45; color: var(--sub); margin: 16px 0 24px; max-width: 48ch; }
.porque b { color: var(--texto); font-weight: 800; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.letra-chica { margin-top: 16px; font-size: 13px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.letra-chica a { color: var(--texto); }
.letra-chica .vieja { color: var(--no); }
/* Lo que el JavaScript arma según tu recorrido: le guardamos el lugar para que la página no salte al cargar. */
.porque:empty { min-height: 55px; }
.acciones:empty { min-height: 46px; }
.cartelera:not(.comp-cartelera) .letra-chica:empty, .letra-chica.con-modelos:empty { min-height: 20px; }
[data-filas]:empty { min-height: 100vh; }

/* ---------- Mapa ---------- */

.mapa-caja {
  position: relative; min-height: 380px;
  border: 1px solid var(--linea); border-radius: var(--r-2); overflow: hidden;
  background: #1b1d21;
}
/* isolation: los controles de Leaflet (z-index 1000) no pasan por encima del menú ni del buscador. */
.mapa { position: absolute; inset: 0; background: #1b1d21; isolation: isolate; }
.mapa.leaflet-container { font: 400 13px/1.4 Figtree, system-ui, sans-serif; }
.mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.25); }
.mapa .leaflet-control-zoom { border: 1px solid var(--linea-2); border-radius: var(--r-1); overflow: hidden; }
.mapa .leaflet-control-zoom a { background: var(--pared-2); color: var(--texto); border-color: var(--linea); width: 34px; height: 34px; line-height: 32px; font-family: Figtree, system-ui, sans-serif; }
.mapa .leaflet-control-zoom a:hover { background: var(--pared-3); }
.mapa .leaflet-control-attribution { background: rgba(19, 20, 22, 0.86); color: var(--sub); font: 400 11px/1.4 Figtree, sans-serif; }
.mapa .leaflet-control-attribution a { color: var(--texto); }
.mapa-et span {
  display: inline-block; transform: translate(-4px, -50%);
  padding: 3px 7px; border-radius: 3px; white-space: nowrap;
  background: var(--pared); color: var(--texto); border: 1px solid var(--linea-2);
  font: 800 12.5px/1.2 Figtree, sans-serif; font-variant-numeric: tabular-nums;
}
.mapa-et.is-dest span { background: var(--real); color: var(--real-tinta); border-color: var(--real); }
.mapa-vos span { transform: translate(10px, -50%); }
.mapa-dst span { transform: translate(12px, -50%); background: var(--texto); color: var(--pared); border-color: var(--texto); }
.mapa-ley {
  position: absolute; left: 10px; top: 10px; z-index: 500;
  display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 70px);
  padding: 7px 10px; border-radius: var(--r-1);
  background: rgba(19, 20, 22, 0.9); border: 1px solid var(--linea);
  font-size: 12.5px; color: var(--sub);
}
.mapa-ley .ley b { color: var(--texto); }
.mapa-sin .mapa-ley { position: static; }
.comp-cartelera .mapa-caja { display: flex; flex-direction: column; }
.comp-cartelera .mapa-caja .mapa { position: relative; inset: auto; flex: 1; min-height: 340px; }
.comp-cartelera .mapa-caja .mapa-ley { position: static; max-width: none; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: var(--pared-2); padding: 10px 12px; }

/* marcas de leyenda: real, declarada, por batería */
.ley { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ley i { display: inline-block; flex: none; }
.m-real { width: 14px; height: 4px; background: var(--real); border-radius: 1px; }
.m-dec { width: 14px; height: 0; border-top: 2px dashed var(--sub); }
.m-bat { width: 10px; height: 10px; border: 2px solid var(--sub); border-radius: 50%; }
.m-viaje { width: 2px; height: 12px; background: var(--texto); }

/* ---------- Barra de alcance ---------- */

.barra { position: relative; height: 24px; margin: 12px 0 6px; }
.barra-dec { position: absolute; inset: 0 auto 0 0; border: 1.5px dashed var(--sub); border-radius: 2px; }
.barra-real { position: absolute; top: 5px; bottom: 5px; left: 0; background: var(--real); border-radius: 1px; transition: width 300ms var(--ease); }
.barra-viaje { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto); transition: left 300ms var(--ease); }
.barra-viaje span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-size: 11.5px; font-weight: 800; color: var(--texto); white-space: nowrap; }
.barra-falta { font-size: 13.5px; color: var(--sub); margin: 10px 0; }

/* ---------- Herramientas del catálogo ---------- */

.herramientas {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px;
  padding: 20px var(--margen) 4px;
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--sub); }
.select {
  appearance: none; -webkit-appearance: none;
  min-height: 40px; padding: 0 36px 0 12px;
  background: var(--pared-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b7b9bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--linea); border-radius: var(--r-1);
  font-weight: 600; cursor: pointer;
}
.select:hover { border-color: var(--linea-2); }
.select:focus-visible { outline: none; border-color: var(--real); box-shadow: 0 0 0 1px var(--real); }
.select option { background: var(--pared-2); }
.herramientas-cuenta { margin-left: auto; font-size: 14px; color: var(--sub); align-self: center; }
.herramientas-cuenta b { color: var(--texto); }
.limpiar { background: none; border: 0; padding: 0; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* ---------- Filas de portadas ---------- */

.filas { padding-bottom: 32px; }
.fila { padding: 24px 0 0 var(--margen); }
.fila-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-right: var(--margen); margin-bottom: 12px; }
.fila-cab h2 { font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.fila-cab .cuantos { color: var(--sub); font-weight: 600; font-size: 15px; }
.fila-cab .aclara { color: var(--sub); font-size: 14px; }
.fila-nav { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.fila-nav button {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--pared-2); border: 1px solid var(--linea); border-radius: 50%; cursor: pointer;
}
.fila-nav button:hover { border-color: var(--sub); }
.fila-nav button:disabled { opacity: 0.35; cursor: default; }
.fila-nav .atras .ico { transform: scaleX(-1); }
.fila-vacia { color: var(--sub); font-size: 14.5px; padding: 6px 0 10px; }
.fila.is-vacia { display: none; }

.carril {
  position: relative;
  display: flex; gap: var(--fila-gap); align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 0;
  padding: 4px var(--margen) 14px 4px; margin-left: -4px;
  scrollbar-width: thin;
}

.titulo {
  /* Las filas cortas estiran sus portadas hasta llenar el carril, como una pared; las largas desbordan. */
  position: relative; flex: 1 0 var(--portada-w); max-width: var(--portada-max); scroll-snap-align: start;
  display: grid; grid-template-columns: 100%; align-content: start;
  background: var(--pared-2); border: 1px solid var(--linea); border-radius: var(--r-2); overflow: hidden;
  transition: flex-basis 260ms var(--ease), border-color 160ms var(--ease), opacity 200ms var(--ease);
}
.titulo:hover { border-color: var(--linea-2); }
.carril:has(.titulo.is-abierto) .titulo:not(.is-abierto) .portada { opacity: 0.5; transition: opacity 200ms var(--ease); }
.carril:has(.titulo.is-abierto) .titulo:not(.is-abierto):hover .portada { opacity: 1; }
.titulo-abrir {
  all: unset; display: block; cursor: pointer; position: absolute; inset: 0; z-index: 1;
}
.titulo-abrir:focus-visible { outline: 3px solid var(--real); outline-offset: -3px; border-radius: var(--r-2); }
/* Misma altura para toda portada cerrada: las filas cortas se estiran a lo ancho, nunca a lo alto. */
.titulo .portada { height: calc(var(--portada-w) * 0.75); }
.titulo .portada svg { width: auto; height: 86%; max-width: 78%; }
.titulo-txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.titulo-nombre { font-weight: 800; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.titulo-dato { font-size: 13.5px; color: var(--sub); }
.titulo-dato b { color: var(--texto); font-weight: 700; }
.titulo-mas { display: none; }

.titulo.is-abierto, .titulo.is-solo {
  flex: 0 0 var(--abierta-w); max-width: none;
  grid-template-columns: var(--abierta-foto) minmax(0, 1fr);
}
.titulo.is-abierto { border-color: var(--real); }
.titulo.is-abierto .titulo-abrir { inset: 0 auto 0 0; width: var(--abierta-foto); }
.titulo.is-abierto .portada, .titulo.is-solo .portada { aspect-ratio: auto; height: 100%; min-height: 100%; }
.titulo.is-abierto .portada svg, .titulo.is-solo .portada svg { width: 86%; height: auto; max-width: none; }
.titulo.is-abierto .titulo-txt, .titulo.is-solo .titulo-txt { padding: 14px 16px 16px; }
.titulo.is-abierto .titulo-nombre, .titulo.is-solo .titulo-nombre { min-height: 0; font-size: 17px; }
.titulo.is-abierto .titulo-mas, .titulo.is-solo .titulo-mas { display: block; position: relative; z-index: 2; }
.titulo-mas .barra { margin-bottom: 24px; }
.titulo .pastilla { white-space: normal; }
.titulo-mas .ley-fila { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--sub); margin-top: 10px; }
.titulo-mas .ley-fila b { color: var(--texto); }
.titulo-mas .precio-km { font-size: 13px; color: var(--sub); margin-top: 6px; }
.titulo-mas .precio-km b { color: var(--texto); }
.titulo-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.titulo-botones .boton { min-height: 46px; padding: 0 14px; font-size: 14px; }
.titulo.is-abierto .titulo-txt, .titulo.is-solo .titulo-txt { gap: 4px; }

/* Etiqueta del veredicto */
.pastilla {
  align-self: flex-start; display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 3px;
  font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap;
}
.pastilla.is-claro { background: var(--texto); color: var(--pared); }
.pastilla.is-justo { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--texto); }
.pastilla.is-no { background: var(--no-fondo); color: var(--no); }
.pastilla.is-gris { background: transparent; color: var(--sub); box-shadow: inset 0 0 0 1px var(--linea-2); }

/* ---------- Portada ---------- */

.portada {
  position: relative; background: var(--foto);
  display: grid; place-items: center; overflow: hidden;
}
.portada svg { width: 78%; height: auto; max-height: 86%; }
/* Fotos de Mercado Libre: fondo claro, el producto entero, sin recortar. La foto llena la caja de la portada
   (que fija su alto) en vez de una fila de la grilla, que se estiraba con la foto y la cortaba.
   El blanco de la foto se funde con el fondo de la portada. */
.portada-foto { background: #f7f7f5; }
.portada-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 6%; mix-blend-mode: multiply;
}
.portada-nota {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--foto-tinta);
}

/* ---------- Bandeja para comparar ---------- */

.bandeja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--margen);
  background: var(--pared-3); border-top: 1px solid var(--linea-2);
  transform: translateY(0); transition: transform 220ms var(--ease);
}
.bandeja.is-oculta { transform: translateY(110%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s 220ms; }
body:has(.bandeja:not(.is-oculta)) .pie { padding-bottom: 96px; }
.bandeja-txt { font-size: 14.5px; color: var(--sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja-txt b { color: var(--texto); }
.bandeja .boton { margin-left: auto; }

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

.pie {
  border-top: 1px solid var(--linea);
  padding: 24px var(--margen) 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px;
  font-size: 13.5px; color: var(--sub);
}
.pie p { max-width: 38em; }
.pie-txt { display: grid; gap: 8px; }
.pie-txt a { color: var(--texto); }
.pie b { color: var(--texto); font-weight: 700; }
.pie nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: start; }
.pie nav a { color: var(--texto); }
.pie .proto { grid-column: 1 / -1; }

/* ---------- Ficha del modelo ---------- */

.miga { padding: 16px var(--margen) 0; font-size: 13.5px; color: var(--sub); }
.miga a { color: var(--sub); }
.miga a:hover { color: var(--texto); }
.miga span[aria-current] { color: var(--texto); }

.ficha-cartelera {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 40%);
  gap: 40px; padding: 16px var(--margen) 32px; border-bottom: 1px solid var(--linea);
}
.ficha-cartelera .titular { font-size: 46px; max-width: 18ch; }
.ficha-veredicto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.ficha-veredicto:empty { min-height: 30px; }
.cifras:empty { min-height: 84px; }
.ficha-veredicto .pastilla { font-size: 15px; padding: 5px 10px; }
.ficha-veredicto p { font-size: 17px; color: var(--sub); }
.ficha-veredicto p b { color: var(--texto); }
.cifras {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.cifra { padding: 14px 16px 14px 0; }
.cifra + .cifra { padding-left: 16px; border-left: 1px solid var(--linea); }
.cifra dt { font-size: 13px; color: var(--sub); font-weight: 600; }
.cifra dd { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.cifra dd small { font-size: 15px; font-weight: 700; color: var(--sub); letter-spacing: 0; }
.cifra.es-real dd { color: var(--real); }
.cifra .cifra-sub, .cifra.es-real .cifra-sub { font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--sub); }
.precio-grande { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px; }
.precio-grande strong { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.precio-grande span { font-size: 14px; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; }
.precio-grande span .ico { width: 16px; height: 16px; }
.precio-grande .vieja { color: var(--no); }
.ficha-portada { border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--linea); }
.ficha-portada .portada { height: 100%; min-height: 380px; }
.ficha-portada .portada svg { width: 82%; }
.nota-dueno { margin-top: 16px; font-size: 15px; color: var(--texto); max-width: 52ch; }
.nota-dueno span { color: var(--sub); }

.seccion { padding: 32px var(--margen) 8px; }
.seccion > h2 { font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 6px; }
.seccion > .bajada { color: var(--sub); max-width: 36em; margin-bottom: 20px; }
/* Páginas de texto: cómo calculamos, aviso de afiliados. */
.seccion > .titular + .texto { margin-top: 20px; }
/* En Figtree, 70ch daban unos 100 caracteres por renglón: el ancho se mide en em para quedar cerca de 70. */
.texto { max-width: 36em; font-size: 17px; line-height: 1.6; }
.texto p, .texto ul { margin-bottom: 14px; }
.texto ul { padding-left: 20px; }
.texto h2 { font-weight: 800; font-size: 22px; line-height: 1.25; margin: 28px 0 8px; }
.texto .cuenta { margin: 18px 0 22px; }

.alcance { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 32px; align-items: start; }
.alcance .mapa-caja { min-height: 400px; }
/* ---------- Guías ---------- */

.guia .texto { margin-top: 16px; }
.guia-aviso { margin: 8px 0 14px; font-size: 13.5px; color: var(--sub); max-width: 36em; }
.ranking { list-style: none; padding: 0; max-width: 960px; border-top: 1px solid var(--linea); }
.rank { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.rank-n { font-size: 28px; font-weight: 900; color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }
.rank:first-child .rank-n { color: var(--real); }
.rank-nombre { font-size: 18px; font-weight: 800; line-height: 1.25; }
.rank-nombre a { text-decoration: none; }
.rank-nombre a:hover { text-decoration: underline; }
.rank-dato { margin-top: 4px; font-size: 14.5px; color: var(--sub); }
.rank-dato b { color: var(--texto); font-weight: 700; }
.rank-dato b.es-real { color: var(--real); font-weight: 800; }
.rank-compra { display: flex; align-items: center; gap: 14px; }
.rank-precio { font-size: 17px; font-weight: 800; white-space: nowrap; }
.guia-tabla { margin-top: 20px; }
.guia-tabla .tabla td a { color: var(--texto); }
.guia-tabla .tabla tbody th { color: var(--texto); font-weight: 800; }
.guia-tabla .tabla .falta { font-weight: 400; color: var(--sub); }
.guia-cierre { margin-top: 24px; }
.guias-lista { list-style: none; padding: 0; margin-top: 20px; max-width: 70ch; border-top: 1px solid var(--linea); }
.guias-lista a { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.guias-lista b { font-size: 18px; font-weight: 800; }
.guias-lista span { color: var(--sub); font-size: 15px; }
.guias-lista a:hover b { text-decoration: underline; text-decoration-color: var(--real); text-underline-offset: 4px; }

.cuenta { border: 1px solid var(--linea); border-radius: var(--r-2); padding: 20px; background: var(--pared-2); }
.cuenta h3 { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.cuenta ol { list-style: none; padding: 0; display: grid; gap: 0; }
.cuenta li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.cuenta li span { color: var(--sub); }
.cuenta li b { font-weight: 800; text-align: right; }
.cuenta li.total { border-bottom: 0; padding-top: 14px; }
.cuenta li.total span { color: var(--texto); font-weight: 700; }
.cuenta li.total b { color: var(--real); font-size: 22px; font-weight: 900; }
.cuenta .barra { margin: 18px 0 26px; }
.cuenta .ley-fila { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--sub); }
.cuenta p.chica { font-size: 13.5px; color: var(--sub); margin-top: 14px; }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.specs-grupo h3 { font-size: 13px; font-weight: 800; color: var(--sub); letter-spacing: 0.02em; padding: 18px 0 8px; border-bottom: 1px solid var(--linea-2); }
.specs-grupo dl { display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr) auto; }
.specs-grupo dt, .specs-grupo dd { padding: 11px 0; border-bottom: 1px solid var(--linea); }
.specs-grupo dt { color: var(--sub); padding-right: 16px; }
.specs-grupo dd { font-weight: 700; }
.specs-grupo dd.origen { padding-left: 12px; text-align: right; }
.specs-grupo dd.falta { font-weight: 400; color: var(--sub); }

.origen-et {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.origen-et.ml { color: var(--sub); box-shadow: inset 0 0 0 1px var(--linea-2); }
.origen-et.calc { color: var(--texto); background: var(--pared-3); }
.origen-et.falta { color: var(--texto); box-shadow: inset 0 0 0 1px var(--sub); }
.origenes { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--sub); margin-bottom: 4px; }
.origenes span { display: inline-flex; align-items: center; gap: 6px; }

.tambien { padding-bottom: 8px; }

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

.comp-cartelera { grid-template-columns: minmax(0, 1fr) minmax(440px, 46%); }
.comp-numeros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.comp-numeros.con-modelos:empty { min-height: 59px; }
.comp-numero-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 12px 0 6px;
  background: var(--pared-2); border: 1px solid var(--linea); border-radius: var(--r-1);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.comp-numero-btn:hover { border-color: var(--linea-2); }
.comp-numero-btn[aria-pressed="true"] { border-color: var(--real); }
.num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 3px;
  background: var(--texto); color: var(--pared); font-weight: 900; font-size: 13px; flex: none;
}
[aria-pressed="true"] .num, .is-dest .num { background: var(--real); color: var(--real-tinta); }

.tabla-caja { position: relative; overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r-2); }
.tabla {
  width: max-content; border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
}
.tabla col.c-et { width: 220px; }
.tabla col.c-mod { width: 282px; }
.tabla-caja { width: fit-content; max-width: 100%; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla thead th { vertical-align: bottom; background: var(--pared-2); border-bottom-color: var(--linea-2); }
.tabla tbody th { font-weight: 600; color: var(--sub); }
.tabla th:first-child { position: sticky; left: 0; z-index: 2; background: var(--pared); }
.tabla thead th:first-child { background: var(--pared-2); }
.tabla td { font-weight: 700; }
.tabla td + td, .tabla th + td, .tabla thead th + th { border-left: 1px solid var(--linea); }
.tabla tr.grupo th { padding-top: 20px; font-size: 13px; font-weight: 800; color: var(--texto); letter-spacing: 0.02em; background: var(--pared); border-bottom-color: var(--linea-2); }
.tabla tr.grupo td { background: var(--pared); border-bottom-color: var(--linea-2); }
.tabla td.falta { font-weight: 400; color: var(--sub); font-size: 14px; }
.tabla td.mejor { color: var(--texto); }
.tabla .mejor-et { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 3px; background: var(--pared-3); color: var(--texto); font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.tabla td.es-real { color: var(--real); font-size: 17px; font-weight: 900; }
.tabla td .sub { display: block; font-size: 12.5px; color: var(--sub); font-weight: 600; margin-top: 2px; }
.vieja, .tabla .vieja { color: var(--no); }
.tabla thead th .sub { margin: 0; }
.spec-sub { display: block; font-size: 13px; font-weight: 400; color: var(--sub); margin-top: 2px; }
.tabla col.is-dest { background: rgba(255, 138, 61, 0.05); }
.tabla .cab-modelo { display: flex; flex-direction: column; gap: 10px; }
.tabla .cab-modelo .portada { aspect-ratio: 16 / 10; border-radius: var(--r-1); }
.tabla .cab-nombre { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--texto); }
.tabla .cab-nombre a { text-decoration: none; }
.tabla .cab-nombre a:hover { text-decoration: underline; }
.tabla .cab-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.tabla .cab-botones .boton { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
.quitar {
  width: 38px; min-height: 38px; display: grid; place-items: center;
  background: none; border: 1px solid var(--linea-2); border-radius: var(--r-1); color: var(--sub); cursor: pointer;
}
.quitar:hover { color: var(--texto); border-color: var(--sub); }
.sumar { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-height: 180px; }
.sumar p { font-size: 14px; color: var(--sub); font-weight: 400; }
.tabla .sumar .select { width: 100%; }
.comp-herr { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; margin-bottom: 14px; }
.comp-herr .interruptor { min-height: 40px; }
.campo-fila .select { min-width: 280px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .pista { width: 40px; height: 24px; border-radius: 999px; background: var(--pared-3); border: 1px solid var(--linea-2); position: relative; transition: background-color 160ms var(--ease); }
.interruptor .pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sub); transition: transform 200ms var(--ease), background-color 160ms var(--ease); }
.interruptor input:checked + .pista { background: var(--texto); border-color: var(--texto); }
.interruptor input:checked + .pista::after { transform: translateX(16px); background: var(--pared); }
.interruptor input:focus-visible + .pista { outline: 3px solid var(--real); outline-offset: 2px; }
.tabla tr.igual { display: none; }
.tabla.todo tr.igual { display: table-row; }
.tabla tr.rotulos { display: none; }
.aviso { padding: 16px 20px; border: 1px solid var(--linea-2); border-radius: var(--r-2); background: var(--pared-2); color: var(--sub); max-width: 36em; }
.aviso b { color: var(--texto); }

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---------- Escritorio angosto ---------- */

@media (max-width: 1180px) {
  .buscar input { width: 200px; }
  .titular { font-size: 44px; }
  .ficha-cartelera .titular { font-size: 40px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { padding-left: 0; border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .cifras:empty { min-height: 166px; }
  .comp-numeros.con-modelos:empty { min-height: 105px; }
  .cartelera:not(.comp-cartelera) .acciones:empty { min-height: 102px; }
  .specs { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .cartelera, .ficha-cartelera, .comp-cartelera { grid-template-columns: minmax(0, 1fr); }
  /* En una columna va primero la respuesta y el botón de compra, y el mapa después. */
  .cartelera .mapa-caja, .comp-cartelera .mapa-caja { min-height: 300px; }
  .cartelera:not(.comp-cartelera) .acciones:empty { min-height: 46px; }
  .alcance { grid-template-columns: minmax(0, 1fr); }
  .ficha-portada .portada { min-height: 260px; }
  .nav a:not([aria-current]):not(.nav-comparar) { display: none; }
  .tope-in { gap: 20px; }
  .buscar input { width: 172px; }
}

/* ---------- Celular ---------- */

@media (max-width: 720px) {
  :root { --margen: 16px; --portada-w: 164px; --portada-max: 164px; --abierta-w: 300px; }
  body { font-size: 16px; }
  /* Barra: marca, lupa, Comparar y menú. El buscador abierto va en una segunda fila, a todo el ancho. */
  .tope-in { flex-wrap: wrap; height: auto; min-height: 56px; gap: 0; }
  .marca { min-height: 56px; justify-content: center; }
  .marca-bajada { display: none; }
  .marca-nombre { font-size: 19px; }
  .buscar-abrir, .menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 0; border-radius: var(--r-1); color: var(--texto); cursor: pointer;
  }
  .nav { margin-left: auto; }
  .menu-btn { margin-right: -10px; }
  .buscar-abrir .ico { width: 22px; height: 22px; }
  .menu-btn .ico { width: 24px; height: 24px; }
  .buscar-abrir[aria-expanded="true"], .menu-btn[aria-expanded="true"] { background: var(--pared-3); }
  .nav a:not(.nav-comparar) { display: none; }
  .nav a.nav-comparar { padding: 0 6px; }
  .nav a[aria-current="page"] { box-shadow: none; }
  .buscar { display: none; order: 9; flex-basis: 100%; margin: 0 0 12px; }
  .buscar.is-abierto { display: flex; }
  .buscar input { width: 100%; min-height: 48px; font-size: 16px; }
  .buscar-ir { min-height: 48px; padding: 0 18px; font-size: 16px; }
  .buscar-res { width: 100%; }
  .buscar-op { min-height: 52px; }
  .buscar-op b { font-size: 15px; }
  .buscar-aviso { font-size: 14.5px; }
  .menu:not([hidden]) {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; padding: 8px 0;
    background: var(--pared); border-bottom: 1px solid var(--linea); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
  }
  .menu a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 16px; font-weight: 600; color: var(--sub); text-decoration: none; }
  .menu a:hover { color: var(--texto); background: var(--pared-2); }
  .menu a[aria-current="page"] { font-weight: 800; color: var(--texto); text-decoration: underline; text-decoration-color: var(--real); text-decoration-thickness: 2px; text-underline-offset: 6px; }

  .cartelera, .ficha-cartelera { gap: 18px; padding: 12px var(--margen) 24px; }
  .cartelera-txt .viaje { margin-bottom: 18px; gap: 6px; }
  .chip { min-height: 46px; padding: 0 10px; font-size: 15px; }
  .chip-est { font-size: 11px; }
  .opc { min-height: 46px; flex: 1 1 100%; }
  .opc-zona { font-size: 15px; }
  .opc-t { font-size: 14px; }
  .opc-mas { padding: 6px 0; }
  .sug-op { min-height: 46px; justify-content: center; }
  .sug-calle { font-size: 15px; }
  .sug-zona { font-size: 13px; }
  .chip-seg span { padding: 10px 12px; }
  .boton-chico, .titulo-botones .boton, .quitar, .tabla .cab-botones .boton, .select { min-height: 46px; }
  .quitar { width: 46px; }
  /* Un botón con el nombre largo del modelo baja de renglón en vez de empujar la página hacia el costado. */
  .boton { white-space: normal; text-align: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
  .nav a { min-height: 44px; }
  .mapa .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 42px; }
  .titulo-dato { font-size: 15px; }
  .titulo-nombre { min-height: 0; }
  .rank { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  .rank-n { font-size: 22px; }
  .rank-compra { grid-column: 2; justify-content: space-between; }
  .rank-compra .boton { min-height: 46px; }
  .chip-dir { flex-basis: 100%; }
  .chip-dir input { flex: 1; width: auto; max-width: none; }
  .chip-gps { width: 44px; height: 44px; }
  .titular { font-size: 33px; line-height: 1.05; }
  .ficha-cartelera .titular { font-size: 30px; }
  .porque { font-size: 16.5px; margin: 10px 0 18px; }
  .porque:empty { min-height: 72px; }
  .acciones:empty, .cartelera:not(.comp-cartelera) .acciones:empty { min-height: 102px; }
  .ficha-veredicto:empty { min-height: 66px; }
  .cifras:empty { min-height: 149px; }
  .acciones .boton { flex: 1 1 auto; }
  .acciones .boton-comprar { flex-basis: 100%; }
  .letra-chica { font-size: 13px; }

  .herramientas { padding-top: 16px; gap: 10px; }
  .herramientas .campo { flex: 1 1 calc(50% - 10px); }
  .herramientas .select { width: 100%; }
  .herramientas-cuenta { margin-left: 0; flex-basis: 100%; }
  .fila { padding-top: 20px; }
  .fila-cab h2 { font-size: 19px; }
  .fila-nav { display: none; }
  .fila-cab .aclara { flex-basis: 100%; }
  .cartelera .mapa-caja, .comp-cartelera .mapa-caja, .alcance .mapa-caja { display: flex; flex-direction: column; min-height: 0; }
  .mapa-caja .mapa { position: relative; inset: auto; height: 236px; }
  .alcance .mapa-caja .mapa { height: 300px; }
  .mapa-caja .mapa-ley { position: static; max-width: none; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: var(--pared-2); padding: 8px 12px; }
  .titulo-nombre { font-size: 14.5px; }
  .titulo.is-abierto, .titulo.is-solo { grid-template-columns: 100%; }
  .titulo.is-abierto .titulo-abrir { width: auto; inset: 0 0 auto 0; height: 180px; }
  .titulo.is-abierto .portada, .titulo.is-solo .portada { height: 180px; min-height: 0; }
  .titulo-botones .boton { flex: 1 1 auto; }
  .bandeja { padding: 10px var(--margen); gap: 10px; }
  .bandeja-txt { font-size: 13.5px; }

  .cifras { margin: 18px 0; }
  .cifra { padding: 12px 10px 12px 0; }
  .cifra + .cifra { padding-left: 12px; }
  .cifra:nth-child(3) { padding-left: 0; }
  .cifra dd { font-size: 24px; }
  .precio-grande strong { font-size: 30px; }
  .ficha-portada .portada { min-height: 220px; }
  .seccion { padding: 28px var(--margen) 4px; }
  .seccion > h2 { font-size: 21px; }
  .specs-grupo dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .specs-grupo dd.origen { grid-column: 2; padding: 0 0 11px; text-align: left; border-bottom: 1px solid var(--linea); margin-top: -1px; }
  .specs-grupo dd:not(.origen) { border-bottom: 0; padding-bottom: 6px; }
  .specs-grupo dt { border-bottom: 1px solid var(--linea); grid-row: span 2; }

  .tabla col.c-et { width: 118px; }
  .tabla col.c-mod { width: 168px; }
  .tabla th, .tabla td { padding: 10px 12px; font-size: 14.5px; }
  .tabla tbody th { font-size: 13.5px; }
  .tabla .mejor-et { margin: 4px 0 0; display: table; }
  /* Con dos modelos la tabla entra entera en el celular: lado a lado de verdad, sin deslizar. */
  .tabla-caja:has(.tabla.n2) { width: 100%; }
  .tabla.n2 { width: 100%; }
  .tabla.n2 col.c-et { width: 30%; }
  .tabla.n2 col.c-mod { width: 35%; }
  .tabla.n2 th, .tabla.n2 td { padding: 10px 8px; }
  /* Con 3 o 4 tampoco se desliza: el nombre de cada dato va arriba y los valores en columnas debajo.
     Una tira con el número y el nombre de cada modelo queda fija arriba mientras bajás. */
  .tabla-caja:has(.tabla.n3, .tabla.n4) { width: 100%; overflow: visible; }
  .tabla:is(.n3, .n4) { display: block; width: 100%; }
  .tabla:is(.n3, .n4) colgroup { display: none; }
  .tabla:is(.n3, .n4) :is(thead, tbody) { display: block; }
  .tabla:is(.n3, .n4) tr, .tabla:is(.n3, .n4).todo tr.igual { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .tabla.n3 { --cols: 3; }
  .tabla.n4 { --cols: 4; }
  .tabla:is(.n3, .n4) tr.igual { display: none; }
  .tabla:is(.n3, .n4) thead tr { border-radius: var(--r-2) var(--r-2) 0 0; overflow: hidden; }
  .tabla:is(.n3, .n4) thead th:first-child { display: none; }
  .tabla:is(.n3, .n4) thead th { padding: 10px 6px; }
  .tabla:is(.n3, .n4) thead th + th { border-left: 1px solid var(--linea); }
  .tabla:is(.n3, .n4) tbody th { grid-column: 1 / -1; position: static; padding: 10px 6px 0; border-bottom: 0; background: none; font-size: 12.5px; }
  .tabla:is(.n3, .n4) tr.grupo th { padding-top: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--linea-2); }
  .tabla:is(.n3, .n4) tr.grupo td { display: none; }
  .tabla:is(.n3, .n4) td { padding: 4px 6px 10px; font-size: 13.5px; overflow-wrap: anywhere; }
  .tabla:is(.n3, .n4) th + td { border-left: 0; }
  .tabla:is(.n3, .n4) td.falta { font-size: 12.5px; }
  .tabla:is(.n3, .n4) td.es-real { font-size: 15px; }
  .tabla:is(.n3, .n4) .pastilla { white-space: normal; font-size: 12px; padding: 2px 5px; }
  .tabla:is(.n3, .n4) .cab-modelo { gap: 8px; }
  .tabla:is(.n3, .n4) .cab-nombre { flex-direction: column; gap: 4px; font-size: 13px; overflow-wrap: anywhere; }
  .tabla:is(.n3, .n4) .cab-botones { flex-direction: column; }
  .tabla:is(.n3, .n4) .cab-botones .boton { width: 100%; min-height: 44px; padding: 4px 6px; font-size: 12.5px; }
  .tabla:is(.n3, .n4) .cab-ver { display: none; }
  .tabla:is(.n3, .n4) .quitar { width: 100%; min-height: 44px; }
  .tabla:is(.n3, .n4) tr.rotulos {
    display: grid; position: sticky; top: 56px; z-index: 3;
    background: var(--pared-2); border-bottom: 1px solid var(--linea-2); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
  }
  /* El número arriba y el nombre abajo, así una marca larga como Velocifero entra sin cortarse. */
  .tabla tr.rotulos td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px; font-size: 12px; font-weight: 800; line-height: 1.2; border-bottom: 0; }
  .tabla tr.rotulos td span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tabla tr.rotulos .num { width: 18px; height: 18px; font-size: 11.5px; }
  .comp-herr > div, .campo-fila { width: 100%; }
  .campo-fila .select { min-width: 0; width: 100%; }
  .pie { grid-template-columns: 1fr; padding: 20px var(--margen) 28px; }
}

@media (max-width: 480px) {
  .buscar-abrir, .menu-btn { width: 40px; }
  .cartelera:not(.comp-cartelera) .letra-chica:empty, .letra-chica.con-modelos:empty { min-height: 43px; }
}

/* Celulares muy angostos: la marca y Comparar se achican para que la barra entre en un renglón. */
@media (max-width: 374px) {
  .marca-nombre { font-size: 17px; }
  .nav a.nav-comparar { font-size: 15px; padding: 0 2px; gap: 4px; }
  .buscar-abrir, .menu-btn { width: 38px; }
  .tabla:is(.n3, .n4) td { padding-left: 4px; padding-right: 4px; font-size: 13px; }
  .tabla:is(.n3, .n4) thead th, .tabla tr.rotulos td { padding-left: 4px; padding-right: 4px; }
}