/* ═══════════ MUEBLA UI — menú lateral + buscador + sesión (compartido en todas las páginas) ═══════════ */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');

/* Logo: tipografía General Sans, sin letra de color (nav, menú y footer) */
.logo, .mv-logo, .footer-logo { font-family: 'General Sans', 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: -0.6px; }
.logo em, .mv-logo em, .footer-logo em { font-style: normal !important; color: inherit !important; }

/* La hamburguesa antigua de móvil se sustituye por el menú nuevo */
.menu-toggle { display: none !important; }

/* ═══════════════════ EL HEADER ═══════════════════
   Rediseñado el 14/08/2026. Antes era una barra apretada: hamburguesa de tres
   rayas dibujadas a mano, un buscador que en el móvil se encogía hasta ser un
   cuadrado gris con una lupa dentro, la campana metida en otro cuadrado gris,
   «♡ Favoritos», «Iniciar sesión» y «+ Vender». Seis cosas peleándose por 360
   píxeles, y el eslogan recortado con puntos suspensivos.

   Ahora: hamburguesa, logo · campana, cuenta, «Vender».

   El buscador se va de la barra. No se pierde nada: al tocarlo lo único que
   hacía era abrir el buscador a pantalla completa, y a eso se llega igual
   desde el menú lateral, que lo tiene arriba del todo.

   Los iconos son trazo y nada más: sin fondo gris, sin esquinas redondeadas,
   sin borde. El color lo heredan del texto (`currentColor`), así que el hover
   los pone del naranja de la marca sin escribir el color dos veces.

   Van a 24 px, pero el botón mide 44×44 gracias al relleno. Esos 44 son la
   medida mínima para acertar con el dedo; agrandar el dibujo en su lugar deja
   un icono enorme y feo. */
nav {
  height: 60px;
  padding: 0 10px;
  gap: 8px;
}
@media (min-width: 768px) {
  nav { height: 72px; padding: 0 24px; }
}

.nav-ico {
  box-sizing: border-box;
  width: 44px; height: 44px; padding: 10px;
  flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0;
  color: #1a0d07; text-decoration: none; cursor: pointer;
  transition: color 0.2s ease;
}
.nav-ico svg { width: 24px; height: 24px; display: block; }
.nav-ico:hover { color: #c96a38; background: none; }

/* La hamburguesa es un botón de icono más. Antes eran tres <span> con una
   animación de anchura al pasar el ratón; el icono de línea dice lo mismo y
   con el mismo trazo que los demás. */
.nav-burger { box-sizing: border-box; width: 44px; height: 44px; padding: 10px; }

/* El punto de «tienes algo sin leer». Sin fondo detrás necesita un borde
   blanco para despegarse del trazo de la campana.

   OJO CON `width`. Cinco páginas traen su propia regla `.bell-badge` con
   `width: 16px; height: 16px` —la chapa redonda de antes—, y esta de aquí
   solo la pisa en lo que nombra. La primera versión ponía `min-width` en vez
   de `width`: se quedaba el ancho de 16 de la página con el alto de 8 de
   aquí, y salía una pastilla tumbada encima de la campana. Al sustituir una
   regla ajena hay que nombrar TODO lo que ella fijaba, no solo lo que se
   quiere cambiar. */
.nav-ico .bell-badge {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; min-width: 0; padding: 0;
  border-radius: 50%; background: #c96a38;
  border: 2px solid #fff; box-sizing: content-box;
  font-size: 0; line-height: 0; color: transparent;
}

/* «Vender» conserva el naranja de la marca: es lo único que queremos que se
   pulse desde cualquier página. En el móvil se le recorta el relleno lateral
   para que no empuje al resto. */
/* OJO: hay DOS clases para el mismo botón. La mayoría de páginas usan
   .nav-btn-sell, pero favoritos, producto, ofertas y lote usan .btn-sell a
   secas. Toda regla del botón de vender tiene que nombrar LAS DOS: la primera
   versión solo ponía tamaño al dibujo en una, y en las otras cuatro páginas
   el + salía GIGANTE — un SVG sin medida ocupa todo lo que le dejan. */
nav .nav-btn-sell, nav .btn-sell { margin-left: 4px; }   /* 8 del hueco + 4 = 12 */
nav .nav-btn-sell svg, nav .btn-sell svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }

.nav-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: #1a0d07; color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.25s ease;
}
.nav-avatar:hover { transform: scale(1.08); background: #c96a38; }

html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

body.drawer-open { overflow: hidden; }

/* ─── Overlays ─── */
.sd-overlay, .mv-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,8,4,0.35);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1);
}
.sd-overlay.open, .mv-overlay.open { opacity: 1; pointer-events: auto; }

/* ─── Panel de búsqueda (derecha) ─── */
.sd-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 310;
  width: min(520px, 100vw); background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  box-shadow: -24px 0 60px rgba(0,0,0,0.12);
  font-family: 'Plus Jakarta Sans', sans-serif; color: #1a0d07;
}
.sd-panel.open { transform: translateX(0); }
.sd-head { display: flex; align-items: center; gap: 14px; padding: 26px 28px 18px; }
.sd-input-wrap { flex: 1; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #1a0d07; padding-bottom: 10px; }
.sd-input-wrap .lens { font-size: 18px; opacity: 0.45; }
.sd-input { flex: 1; border: none; outline: none; min-width: 0; font-family: inherit; font-size: 22px; font-weight: 600; color: #1a0d07; background: transparent; letter-spacing: -0.4px; }
.sd-input::placeholder { color: #c9c2bb; font-weight: 500; }
.sd-clear { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; color: #717171; padding: 4px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.sd-clear.visible { opacity: 1; pointer-events: auto; }
.sd-close, .mv-close {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid #e5e0da; background: #fff;
  font-size: 15px; color: #1a0d07; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.sd-close:hover, .mv-close:hover { background: #f5f0e8; transform: rotate(90deg); }
.sd-body { flex: 1; overflow-y: auto; padding: 6px 28px 40px; overscroll-behavior: contain; }
.sd-body::-webkit-scrollbar { width: 5px; }
.sd-body::-webkit-scrollbar-thumb { background: #e0d9d1; border-radius: 3px; }
.sd-section-title { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #a0a0a0; margin: 26px 0 14px; }
.sd-cats { display: flex; flex-direction: column; }
.sd-cat {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 11px 2px; border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left; border-bottom: 1px solid #f1ede8;
  transition: padding-left 0.3s cubic-bezier(0.22,1,0.36,1);
}
.sd-cat .name { font-size: 17px; font-weight: 600; color: #1a0d07; letter-spacing: -0.3px; }
.sd-cat .n { font-size: 12px; color: #a0a0a0; }
.sd-cat:hover { padding-left: 10px; }
.sd-cat:hover .name { color: #c96a38; }
.sd-recent { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-chip { border: 1px solid #e5e0da; background: #fff; border-radius: 100px; padding: 7px 16px; font-family: inherit; font-size: 13px; font-weight: 500; color: #1a0d07; cursor: pointer; transition: border-color 0.25s, background 0.25s; }
.sd-chip:hover { border-color: #1a0d07; background: #f5f0e8; }
.sd-results { display: flex; flex-direction: column; }
.sd-item {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 6px; margin: 0 -6px; border-radius: 14px; text-decoration: none;
  opacity: 0; transform: translateY(10px);
  animation: sdItemIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
  transition: background 0.25s ease;
}
.sd-item:nth-child(1) { animation-delay: 0.03s; } .sd-item:nth-child(2) { animation-delay: 0.07s; }
.sd-item:nth-child(3) { animation-delay: 0.11s; } .sd-item:nth-child(4) { animation-delay: 0.15s; }
.sd-item:nth-child(5) { animation-delay: 0.19s; } .sd-item:nth-child(6) { animation-delay: 0.23s; }
.sd-item:nth-child(n+7) { animation-delay: 0.27s; }
@keyframes sdItemIn { to { opacity: 1; transform: none; } }
.sd-item:hover { background: #f5f0e8; }
.sd-item img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: #f5f0e8; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.sd-item:hover img { transform: scale(1.05); }
.sd-item .info { flex: 1; min-width: 0; }
.sd-item .t { font-size: 15px; font-weight: 600; color: #1a0d07; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.sd-item .m { font-size: 12px; color: #717171; }
.sd-item .p { font-size: 15px; font-weight: 700; color: #1a0d07; flex-shrink: 0; }
.sd-empty { padding: 40px 0; text-align: center; color: #717171; font-size: 14px; line-height: 1.7; }
.sd-empty strong { color: #1a0d07; }
.sd-all { display: block; width: 100%; margin-top: 18px; background: #1a0d07; color: #fff; border: none; border-radius: 100px; padding: 15px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.25s, transform 0.3s; }
.sd-all:hover { background: #33190d; transform: translateY(-1px); }

/* ─── Menú lateral (izquierda) ─── */
.mv-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 310;
  width: min(430px, 100vw); background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(-103%);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 24px 0 60px rgba(0,0,0,0.12);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.mv-panel.open { transform: translateX(0); }
.mv-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 8px 34px; }
.mv-logo { font-size: 28px; color: #1a0d07; text-decoration: none; }
/* Va con flex:0 1 auto, no con flex:1. Con flex:1 este bloque se comía toda
   la altura sobrante y empujaba el pie del menú contra el borde de abajo: con
   ocho enlaces parecía intencionado, y al quedarse en tres era medio móvil de
   hueco. min-height:0 conserva el overflow-y por si el menú vuelve a crecer. */
.mv-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 22px 34px 10px; overscroll-behavior: contain; }
.mv-search-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  border: 1px solid #e5e0da; border-radius: 100px;
  padding: 13px 22px; margin-bottom: 30px;
  background: #fff; cursor: pointer; font-family: inherit;
  font-size: 14px; color: #717171; text-align: left;
  transition: border-color 0.25s, background 0.25s;
}
.mv-search-row .lens { font-size: 17px; opacity: 0.5; }
.mv-search-row:hover { border-color: #1a0d07; background: #f5f0e8; }
.mv-links { display: flex; flex-direction: column; }
.mv-link {
  font-size: 31px; font-weight: 800; color: #1a0d07;
  text-decoration: none; letter-spacing: -1.2px; line-height: 1.15; padding: 9px 0;
  transition: color 0.25s ease, padding-left 0.35s cubic-bezier(0.22,1,0.36,1);
}
.mv-link:hover { color: #c96a38; padding-left: 10px; }
.mv-link.accent { color: #c96a38; }
.mv-link.accent:hover { color: #b85e30; }
/* ── Categorías, el desplegable del menú ──
   OJO con la animación: los .mv-link nacen con opacity 0 y solo se la sube la
   cadena de reglas nth-child de abajo. Este bloque va con regla PROPIA, fuera
   de esa cadena, porque meterlo dentro corre los números y deja invisibles los
   enlaces que van después. No fallan: simplemente no se ven. */
.mv-cat-toggle {
  background: none; border: 0; padding: 9px 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 31px; font-weight: 800; color: #1a0d07;
  letter-spacing: -1.2px; line-height: 1.15;
  transition: color 0.25s ease, padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mv-cat-toggle:hover { color: #c96a38; padding-left: 10px; }
.mv-cat-toggle::after { content: '›'; display: inline-block; margin-left: 8px; transition: transform 0.25s ease; }
.mv-cat-toggle[aria-expanded='true']::after { transform: rotate(90deg); }
.mv-cat-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px 2px; }
.mv-cat-list[hidden] { display: none; }
.mv-cat-item { font-size: 15px; font-weight: 500; color: #717171; text-decoration: none; transition: color 0.2s ease; }
.mv-cat-item:hover { color: #1a0d07; }
.mv-cat-toggle { opacity: 0; }
.mv-panel.open .mv-cat-toggle { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.34s forwards; }
.mv-foot { padding: 20px 34px 34px; display: flex; flex-direction: column; gap: 11px; }
.mv-flink { font-size: 13px; font-weight: 500; color: #717171; text-decoration: none; transition: color 0.2s; }
.mv-flink:hover { color: #1a0d07; }
.mv-search-row, .mv-link, .mv-flink { opacity: 0; }
.mv-panel.open .mv-search-row { animation: mvIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.10s forwards; }
.mv-panel.open .mv-link:nth-child(1) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.14s forwards; }
.mv-panel.open .mv-link:nth-child(2) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.19s forwards; }
.mv-panel.open .mv-link:nth-child(3) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.24s forwards; }
.mv-panel.open .mv-link:nth-child(4) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.29s forwards; }
.mv-panel.open .mv-link:nth-child(5) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.34s forwards; }
.mv-panel.open .mv-link:nth-child(6) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.39s forwards; }
/* OJO al añadir enlaces al menú: `.mv-link` nace con opacity 0 y solo lo
   levanta la animación de su nth-child. Un enlace sin su línea aquí se queda
   INVISIBLE para siempre, sin que nada falle a la vista. */
.mv-panel.open .mv-link:nth-child(7) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.44s forwards; }
.mv-panel.open .mv-link:nth-child(8) { animation: mvIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.49s forwards; }
.mv-panel.open .mv-flink { animation: mvIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.51s forwards; }

/* ── Cuántos sin leer ── */
.mv-badge {
  display: none; margin-left: 10px; vertical-align: middle;
  background: #c96a38; color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
  min-width: 24px; height: 24px; border-radius: 12px;
  padding: 0 7px; line-height: 24px; text-align: center;
}
.mv-flink .mv-badge { font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; margin-left: 7px; }

/* Hubo un botón 💬 aparte en la barra durante un rato el 11/08/2026. Se quitó
   a propósito: dos números compitiendo (campana y mensajes) es peor que uno.
   La campana avisa de TODO —ventas, revisiones y mensajes—, y desde el aviso
   se entra directo a la conversación. Las conversaciones se ven en el menú. */
@keyframes mvIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .sd-panel, .mv-panel { width: 100vw; }
  .sd-head { padding: 20px 18px 14px; }
  .sd-body { padding: 4px 18px 32px; }
  .sd-input { font-size: 18px; }
  .mv-body { padding: 16px 26px 10px; }
  .mv-head { padding-left: 26px; }
  .mv-foot { padding: 16px 26px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-panel, .sd-overlay, .mv-panel, .mv-overlay { transition-duration: 0.1s; }
  .sd-item, .mv-search-row, .mv-link, .mv-flink { animation-duration: 0.1s !important; animation-delay: 0s !important; }
}

/* reglas mobile-first (skill mobile-first-ui): teclado sin zoom en iOS y areas tactiles de 44px */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
  .nav-burger { width: 44px; height: 44px; }
  .sd-close, .mv-close { width: 44px; height: 44px; }
}

/* el input de busqueda no puede imponer ancho minimo (rompia el nav a 360px) */
@media (max-width: 760px) {
  nav { min-width: 0; }
  .nav-search { min-width: 0; flex: 1; }
  .nav-search input { min-width: 0; width: 100%; flex: 1; }
}

/* Buscador sin resultados: dejar el correo para avisar cuando llegue */
.sd-avisame {
  margin-top: 20px; padding: 16px; border-radius: 12px;
  background: #f7f0e6; border: 1px solid #ede3d5; text-align: left;
}
.sd-avisame-t { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: #1a0d07; }
.sd-avisame-f { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-avisame-f input {
  flex: 1 1 180px; min-width: 0; padding: 11px 13px; font-size: 16px;
  font-family: inherit; border: 1.5px solid #ede3d5; border-radius: 10px; background: #fff;
}
.sd-avisame-f button {
  padding: 11px 18px; min-height: 44px; border: none; border-radius: 10px;
  background: #c96a38; color: #fff; font-family: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer;
}
.sd-avisame-c {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; color: #7a726b; line-height: 1.5; margin-top: 10px; cursor: pointer;
}
.sd-avisame-c input { margin-top: 2px; accent-color: #c96a38; }
.sd-avisame-msg { font-size: 13px; font-weight: 600; margin-top: 8px; }
.sd-avisame-msg.bien { color: #2d7a4f; }
.sd-avisame-msg.mal { color: #d94040; }

/* los enlaces del pie siempre con salto de linea */
footer .footer-links, .footer-links { flex-wrap: wrap; }

/* paquete auditoria movil: nav limpio, tablas y pestanas con scroll propio */
@media (max-width: 760px) {
  /* Nav movil: hamburguesa + logo + buscador + Vender + avatar (o Iniciar sesion).
     Lo demas (campana, favoritos, enlaces sueltos) vive en el menu lateral. */
  nav .nav-right, nav .nav-actions {
    display: flex !important; align-items: center; gap: 6px;
    flex-wrap: nowrap; margin-left: auto; flex-shrink: 0;
    /* por si alguna pagina conserva el antiguo desplegable flotante */
    position: static !important; flex-direction: row !important;
    padding: 0; border: 0; box-shadow: none; background: none;
  }
  /* Favoritos, al menu lateral. LA CAMPANA SE QUEDA: es el unico sitio donde
     Muebla avisa de algo -incluidos los mensajes nuevos-, y escondida en el
     menu no avisa de nada. Estaba oculta hasta el 11/08/2026 y en el movil no
     habia forma de enterarse de que te habian escrito.
     Ojo: no forzamos la visibilidad de nadie, que la sesion decide quien se ve. */
  nav .nav-right > .nav-fav-link, nav .nav-actions > .nav-fav-link,
  nav .nav-right > a[href="/favoritos"], nav .nav-actions > a[href="/favoritos"] {
    display: none !important;
  }
  /* La campana ya no lleva cuadrado gris: es un botón de icono como los demás
     y mantiene sus 44×44 de área táctil en todas las pantallas. */
  nav .nav-right .nav-btn, nav .nav-actions .nav-btn {
    padding: 9px 14px; font-size: 12px; white-space: nowrap; min-height: 38px;
  }
  nav .nav-avatar { width: 36px; height: 36px; font-size: 14px; }

  /* El buscador se fue de la barra el 14/08/2026. Aquí había una regla que lo
     encogía hasta un cuadrado de 38 px con una lupa dentro, porque con seis
     cosas en la barra no cabía de otra forma. Ya no hace falta: se busca desde
     el menú lateral, que lo tiene arriba del todo. */
}

/* EL ESLOGAN SE VE, TAMBIÉN EN EL MÓVIL.
   Esto ha ido y venido tres veces, así que queda escrita la cuenta entera.

   Se escondía desde los 430 px y no salía en casi ningún móvil. Fede lo
   reclamó. Se quitaron todos los `display: none` y se encogió a 9 px: salía
   recortado con puntos suspensivos. Se escondió otra vez por debajo de 768,
   porque a 360 px la barra pedía 384. Y Fede volvió a reclamarlo.

   Tres veces es una decisión, no un despiste: el eslogan se queda. Lo que
   había que hacer no era discutir el número, era buscar los 24 px que
   faltaban. Salen de dos sitios que no le importan a nadie:

     · el «+» dibujado dentro del botón «Vender» — el botón ya es naranja y
       pone «Vender»; el signo no añade nada, y son 19 px
     · los márgenes de la barra y del botón, de 10 y 14 a 8 y 12

   A 360 px: 16 (márgenes) + 44 (menú) + 8 + 116 (logo y eslogan) + 44
   (campana) + 8 + 44 (cuenta) + 12 + 65 («Vender») = 357. Caben.

   Los puntos suspensivos se quedan de red: si una tipografía cae más ancha
   de lo previsto, que se recorte antes que empujar la barra. La cuenta la
   rehace pruebas/header.js a 360, 390 y 430, leyendo estos mismos tamaños
   del CSS — si alguien devuelve el «+» o ensancha un margen, salta. */
@media (max-width: 767px) {
  nav { padding: 0 8px; }
  /* El logo no se aplasta. Tenia min-width: 0 y era el unico que podia
     encogerse: cuando la barra iba llena, el logo se estrujaba y su texto se
     desbordaba DEBAJO del enlace vecino — se leia «Muebla» con «Tiendas»
     escrito encima. */
  nav .logo-wrap { flex-shrink: 0; }

  /* Los enlaces de texto sueltos («Tiendas», «Mi perfil», «Ayuda»...) se van
     al menu en el movil: una veintena de paginas los llevaba y no caben —
     eran justo lo que aplastaba el logo. Todos estan en el menu lateral.
     «Vender» no es de estos: es .nav-btn-sell y se queda. */
  nav .nav-btn-ghost, nav a.nav-link { display: none; }
  nav .logo-slogan {
    font-size: 9px; letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis; max-width: 150px;
  }
  nav .nav-btn-sell, nav .btn-sell { padding-left: 12px; padding-right: 12px; }
  nav .nav-btn-sell svg, nav .btn-sell svg { display: none; }
}
@media (min-width: 768px) {
  nav .logo-slogan { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
}

@media (max-width: 760px) {

  /* tablas de datos: scroll lateral contenido, nunca empujar la pagina */
  .cookie-table, .compare-table, .pct-table, .carriers-table { display: block; overflow-x: auto; max-width: 100%; }

  /* filas de pestanas y TOC: deslizables sin partir texto */
  .section-tabs, .page-toc, .filter-tabs, .tabs-header, .store-tabs-inner, .detail-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .section-tabs a, .page-toc a, .filter-tabs button, .tabs-header button { white-space: nowrap; flex-shrink: 0; }

  /* perfil: filas que envuelven en vez de desbordar */
  .profile-actions { flex-wrap: wrap; }
  .profile-stats { flex-wrap: wrap; row-gap: 10px; }
}