/* =============================================================
   ComparaElige — styles.css
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Brand */
  --navy: #08245c;
  --navy-2: #0b2f78;
  --navy-ink: #061838;
  --blue: #087ff5;
  --blue-soft: #e8f3ff;
  --orange: #ff8a00;
  --orange-ink: #7a3f00;
  --yellow: #ffc107;
  --red: #e5342a;
  --green: #1a9c5c;
  --green-soft: #e6f7ee;
  --white: #ffffff;

  /* Neutrals */
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --line: #e3e8f0;
  --text: #0f1b33;
  --text-soft: #4a5670;
  --text-mute: #8592ab;

  /* Semantic on navy */
  --on-navy-text: #f4f7fd;
  --on-navy-soft: #b9c6e6;

  /* Radii / shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(8, 20, 50, 0.06), 0 1px 1px rgba(8, 20, 50, 0.04);
  --shadow-md: 0 8px 24px rgba(8, 20, 50, 0.10), 0 2px 6px rgba(8, 20, 50, 0.06);
  --shadow-lg: 0 20px 48px rgba(8, 20, 50, 0.16), 0 6px 16px rgba(8, 20, 50, 0.08);

  /* Type */
  --sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 76px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; overflow-wrap: anywhere; word-break: break-word; }
::selection { background: var(--orange); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--white); color: var(--navy);
  z-index: 9999; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .75rem;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); }
.section-sub { color: var(--text-soft); font-size: 1.05rem; margin-top: .6rem; max-width: 52ch; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; } /* defensive per gotcha A.4.5 */

/* =============================================================
   4. Typography
   ============================================================= */
.hl-orange { color: var(--orange); }
.hl-yellow { color: var(--yellow); }

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: var(--r-pill); font-weight: 700; font-size: .96rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 6px 18px rgba(255,138,0,.32); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,138,0,.42); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-2); transform: translateY(-2px); }
.btn-ghost { background: var(--white); color: var(--navy); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
/* Botón de compra REAL (afiliación activa) — pastilla chica, mismo
   naranja/pill/tipografía que .ce-badge ("RECOMENDADO", etc., más
   abajo en este archivo) para que se sienta parte del mismo sistema
   visual. Nunca es un botón grande/bloque como el fallback "Ver
   producto en X" — a propósito, para que se lea como una etiqueta,
   no como el CTA dominante de la página. */
.btn-affiliate-badge {
  width: auto; gap: .55rem; padding: .5rem 1rem .5rem .55rem; border-radius: var(--r-pill);
  background: var(--orange); color: var(--white);
  font-weight: 800; font-size: .8rem; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(255,138,0,.3);
}
.btn-affiliate-badge:hover { background: #e67d00; transform: translateY(-1px); }

/* Botón de compra (real o fallback) — el logo de la tienda a tamaño
   equivalente al de la barra de plataformas del Home (~24px de alto,
   store-pill), NUNCA un iconito genérico. La "chip" blanca detrás del
   logo garantiza contraste real sobre cualquier color de botón
   (navy/naranja) sin recortar ni deformar el wordmark — solo agrega
   aire alrededor (proporción original intacta vía brandLogo()). */
.cta-buy-btn { gap: .65rem; }
.cta-buy-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; background: #fff; border-radius: 8px; padding: .32rem .55rem;
}
.cta-buy-logo-chip .logo-badge { width: 22px; height: 22px; font-size: .68rem; }
.cta-buy-btn-label { white-space: normal; text-align: left; }
@media (max-width: 480px) {
  /* Reducir proporcionalmente en móvil, pero el logo se mantiene
     claramente reconocible (nunca un favicon diminuto) — se sobreescribe
     el alto inline que fija brandLogo() a propósito para este caso. */
  .cta-buy-logo-chip .brand-logo { height: 20px !important; }
  .cta-buy-logo-chip { padding: .26rem .45rem; }
  .cta-buy-btn-label { font-size: .92rem; }
}
.btn-icon {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--surface-2);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.btn-icon:hover { background: var(--blue-soft); color: var(--blue); }
.btn-icon svg { width: 20px; height: 20px; }

/* Cards (base) */
.card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

/* Logo */
.brand {
  display: inline-flex; align-items: center; gap: .55rem; font-size: 1.28rem; font-weight: 800; letter-spacing: -0.01em;
}
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-compara { color: var(--navy); }
.brand-elige { color: var(--orange); }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: var(--nav-h);
}
.nav-links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); flex: 1; justify-content: center; }
.nav-links a {
  font-size: .93rem; font-weight: 600; color: var(--text-soft); padding: .4rem .2rem; position: relative;
  transition: color .2s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--orange);
  transition: right .25s var(--ease-out);
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.nav-toggle { display: none; }

/* Insignia "🔥 Ofertas desde X%" — se distingue a propósito del resto
   del nav (acento naranja/rojo llamativo) porque enlaza a una sección
   real de ahorro, no a un listado de tienda más. Empieza oculta
   (hidden) y solo se activa por JS (main.js: mountOfferBadges) cuando
   hay al menos una oferta real que la respalde. */
.nav-offer-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  /* !important en TODAS las propiedades que también toca la regla
     genérica ".nav-links a" (bloque "CORRECCIÓN VISUAL ESPECÍFICA —
     BOTÓN OFERTAS", 02/09/2026): esa regla es MÁS específica que
     ".nav-offer-badge" sola (elemento+clase vs. solo clase) y le estaba
     ganando el padding/font-size real, aplastando el botón a algo
     mucho más chico/apretado de lo que este bloque declara — la causa
     confirmada de que se viera como una simple etiqueta en vez de un
     CTA. font-weight/color ya usaban este mismo parche; ahora se
     extiende a TODO lo que define su tamaño/forma, para que este
     selector gane siempre sin depender del orden en la hoja.
  */
  font-weight: 800 !important; color: var(--white) !important;
  font-size: 1rem !important; line-height: 1 !important;
  padding: .68rem 1.4rem !important;
  background: linear-gradient(120deg, var(--red), var(--orange));
  border-radius: 14px; /* redondeado, NUNCA cápsula: 14px sobre ~46px de alto se lee como rectángulo, no como pastilla */
  border: 1px solid rgba(255,255,255,.4); /* borde/brillo interior — define el botón contra el fondo claro del nav */
  position: relative; overflow: hidden; isolation: isolate;
  /* Halo exterior en dos capas: una sombra ajustada (define el botón) +
     un resplandor grande y difuso (el "halo/luz alrededor" pedido) —
     antes era una sola sombra chica, poco visible sobre fondo blanco. */
  box-shadow:
    0 6px 16px rgba(229, 52, 42, .38),
    0 0 0 3px rgba(255, 138, 0, .12),
    0 0 22px 4px rgba(255, 90, 30, .45),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -6px 10px rgba(0,0,0,.14);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  animation: nav-offer-glow 2.4s ease-in-out infinite;
}
/* Brillo "glossy" — reflejo diagonal de luz sobre el degradado rojo/naranja,
   igual al efecto de botón pulido pedido por el usuario (ref: botón naranja
   "OPTIONS" con resplandor). Puramente decorativo (pointer-events: none) y
   por debajo del texto/ícono gracias a isolation+z-index en ese contenido. */
.nav-offer-badge::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 62%);
}
/* Brillo ANIMADO recorriendo el botón (bloque "CORRECCIÓN ALIEXPRESS +
   OFERTAS + PLATAFORMAS", 01/09/2026, requisito 4; franja ensanchada
   02/09/2026 para que se note con el botón ya en su tamaño real de
   CTA) — una banda diagonal clara que viaja de izquierda a derecha en
   bucle, por encima del gloss estático de ::before pero por debajo del
   texto/ícono (mismo z-index:0 + isolation ya usado arriba). */
.nav-offer-badge::after {
  content: ""; position: absolute; top: -30%; left: -45%; width: 34%; height: 160%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  pointer-events: none; z-index: 0;
  animation: nav-offer-shine 3.2s ease-in-out infinite;
}
.nav-offer-badge-icon, .nav-offer-badge [data-offer-badge-text] { position: relative; z-index: 1; }
.nav-offer-badge-icon { font-size: 1.05em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.nav-offer-badge:hover {
  color: var(--white); transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(229, 52, 42, .46),
    0 0 0 3px rgba(255, 138, 0, .16),
    0 0 30px 6px rgba(255, 90, 30, .6),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -6px 10px rgba(0,0,0,.16);
}
.nav-offer-badge:active { transform: translateY(0); }
.nav-offer-badge[aria-current="page"],
.nav-offer-badge.is-active { outline: 2px solid var(--white); outline-offset: -4px; }
.mobile-drawer-panel .nav-offer-badge { align-self: flex-start; }

/* Resplandor pulsante suave — llama la atención sin ser agresivo.
   Desactivado por completo si el usuario prefiere menos movimiento. */
@keyframes nav-offer-glow {
  0%, 100% {
    box-shadow:
      0 6px 16px rgba(229, 52, 42, .38),
      0 0 0 3px rgba(255, 138, 0, .12),
      0 0 20px 3px rgba(255, 90, 30, .4),
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -6px 10px rgba(0,0,0,.14);
  }
  50% {
    box-shadow:
      0 6px 20px rgba(229, 52, 42, .5),
      0 0 0 4px rgba(255, 138, 0, .18),
      0 0 32px 7px rgba(255, 90, 30, .7),
      inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 -6px 10px rgba(0,0,0,.14);
  }
}
/* Recorrido de la franja de brillo: pausa breve a la izquierda (para
   que se note el punto de partida), barrido rápido a través del botón,
   pausa larga fuera del botón antes de repetir — nunca un movimiento
   continuo tipo "cinta sin fin", que se ve como un glitch más que como
   un brillo intencional. */
@keyframes nav-offer-shine {
  0%, 12% { left: -45%; }
  55% { left: 135%; }
  100% { left: 135%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-offer-badge { animation: none; }
  .nav-offer-badge::after { animation: none; content: none; }
}

/* Search bar */
.searchbar {
  display: flex; align-items: center; gap: .5rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .45rem .5rem .45rem 1.25rem;
  box-shadow: var(--shadow-md); max-width: 560px;
}
.searchbar svg { width: 20px; height: 20px; color: var(--text-mute); flex: none; }
.searchbar input {
  border: 0; outline: 0; flex: 1; font: inherit; font-size: 1rem; color: var(--text); background: none; min-width: 0;
}
.searchbar input::placeholder { color: var(--text-mute); }
.searchbar .btn { flex: none; }

/* Store selector (hero pills) */
.store-row-label { font-weight: 700; color: var(--navy); font-size: .95rem; margin-bottom: .75rem; }
.store-row { display: flex; flex-wrap: nowrap; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.store-pill {
  display: flex; align-items: center; gap: .55rem; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .55rem 1.05rem .55rem .55rem; flex: none;
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
.store-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue); }
.store-pill .logo-badge { width: 30px; height: 30px; }
.store-pill span { font-size: .88rem; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* Tienda "pending" (23/08/2026 — hoy solo Amazon: "el de amazon dejalo
   como proximante"): la marca sigue visible, nunca se esconde como una
   "disabled", pero sin enlace ni hover activo — main.js (StoreCard/
   StoreCardWide/NavStoreLink) pinta un <span> en vez de <a> y agrega la
   pastilla "Próximamente" que viene de aquí. */
.store-pill.is-pending,
.card.is-pending { cursor: default; opacity: .82; }
.store-pill.is-pending:hover,
.card.is-pending:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.store-pill-soon {
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; color: var(--text-mute);
  background: var(--surface-2); border-radius: var(--r-pill); padding: .15rem .5rem; white-space: nowrap;
}
.nav-store-pending {
  font-size: .93rem; font-weight: 600; color: var(--text-mute); padding: .4rem .2rem;
  display: inline-flex; align-items: center; gap: .3rem; cursor: default;
}
.nav-store-pending em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--text-mute); }

/* Generic store logo badge (placeholder lettermark, not a real trademark).
   --platform-glow llega inline desde js/utils.js:brandLogo() (uno de los
   dos únicos lugares que renderizan esto — regla "no hardcodear esta
   lógica en múltiples componentes") con el color de identidad de la
   plataforma (lib/manifest.js: stores[].glow) — resplandor sutil, nunca
   agresivo. */
.logo-badge {
  border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .8rem;
  color: var(--white); flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 2px 8px -2px var(--platform-glow, transparent);
}

/* Brand wordmark logos (hand-built SVG recreations, not the official trademarks) */
.brand-logo { display: inline-flex; align-items: center; flex: none; filter: drop-shadow(0 1px 5px color-mix(in srgb, var(--platform-glow, transparent) 45%, transparent)); }
.brand-logo svg { height: 100%; width: auto; display: block; }

/* Promo strip de descuentos — franja angosta entre el header y el
   hero (23/08/2026, ver comentario en index.html). Gradiente navy de
   marca + acento naranja en el número, para que "se distinga" del
   resto de la página sin desentonar con la paleta existente. */
.promo-strip { background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%); }
.promo-strip-inner {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding-block: .6rem; text-align: center; flex-wrap: wrap;
}
.promo-strip-inner p { margin: 0; font-size: .88rem; font-weight: 600; letter-spacing: .01em; color: var(--on-navy-text); }
.promo-strip-inner strong { color: var(--orange); font-weight: 800; }
.promo-strip-icon { width: 18px; height: 18px; flex: none; color: var(--orange); }
.promo-strip-icon svg { width: 100%; height: 100%; }

/* Hero — full-bleed banner image (edge to edge) + real controls below it */
.hero { padding-block: 0 clamp(2.5rem, 6vw, 3.5rem); overflow: visible; position: relative; background: #f7f7f7; }
.hero-banner { width: 100%; line-height: 0; }
.hero-banner-img { width: 100%; height: auto; display: block; }
.hero-bottom { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.hero-search { max-width: 640px; }
.hero-stores { margin-top: 2rem; }

/* Second section (navy) — full-bleed banner image (edge to edge) + real CTA below it */
.section-navy { background: linear-gradient(165deg, var(--navy-ink), var(--navy) 55%, var(--navy-2)); color: var(--on-navy-text); position: relative; overflow: hidden; }
.section-navy::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(8,127,245,.25), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.navy-banner { position: relative; z-index: 1; width: 100%; line-height: 0; }
.navy-banner-img { width: 100%; height: auto; display: block; }
.navy-bottom { position: relative; z-index: 1; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* Categories */
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.cat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.15rem 1.1rem;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.cat-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.cat-ico svg { width: 22px; height: 22px; }
.cat-card span { font-weight: 700; font-size: .9rem; color: var(--navy); }

/* Rating stars */
.rating { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--text-soft); }
.rating .stars { color: var(--yellow); letter-spacing: 1px; }

/* Comparison score chip */
.cscore {
  display: inline-flex; align-items: center; gap: .45rem; background: var(--blue-soft); color: var(--navy);
  border-radius: var(--r-pill); padding: .35rem .7rem .35rem .35rem; font-size: .78rem; font-weight: 700;
}
.cscore b {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(150deg, var(--navy), var(--blue)); color: var(--white); font-size: .72rem;
}
.cscore.is-top { background: #fff2e0; color: var(--orange-ink); }
.cscore.is-top b { background: linear-gradient(150deg, var(--orange), var(--yellow)); }

/* Product grid + card */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.product-card { padding: 1.1rem 1.1rem 1.25rem; display: flex; flex-direction: column; }
.product-thumb {
  aspect-ratio: 1.3/1; border-radius: var(--r-sm); background: linear-gradient(150deg, var(--surface-2), var(--blue-soft));
  display: grid; place-items: center; margin-bottom: .9rem; position: relative;
}
.product-thumb svg { width: 40px; height: 40px; color: var(--blue); }
.product-store-tag {
  position: absolute; top: .55rem; left: .55rem; font-size: .68rem; font-weight: 700; color: var(--navy);
  background: rgba(255,255,255,.92); padding: .2rem .5rem; border-radius: var(--r-pill); border: 1px solid var(--line);
}
.product-brand { font-size: .74rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }
.product-name { font-size: .98rem; font-weight: 700; color: var(--navy); margin-top: .2rem; }
.product-rating { margin-top: .4rem; }
.product-price-row { display: flex; align-items: baseline; gap: .5rem; margin-top: .6rem; }
.price-now { font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.price-before { font-size: .84rem; color: var(--text-mute); text-decoration: line-through; }
.price-discount { font-size: .74rem; font-weight: 800; color: #1a9c5c; background: #e6f7ee; padding: .1rem .4rem; border-radius: 6px; }
.product-score-row { margin-top: .65rem; }
.product-actions { display: flex; gap: .55rem; margin-top: 1rem; }
.product-actions .btn { flex: 1; padding-inline: .8rem; font-size: .84rem; }

/* Offers */
.offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.offer-card { padding: 1rem; display: flex; flex-direction: column; }
.offer-badge { align-self: flex-start; background: var(--orange); color: var(--white); font-size: .72rem; font-weight: 800; padding: .25rem .55rem; border-radius: var(--r-pill); margin-bottom: .7rem; }
.offer-store { font-size: .72rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }
.offer-name { font-size: .9rem; font-weight: 700; color: var(--navy); margin-top: .15rem; }
.offer-price-row { display: flex; align-items: baseline; gap: .45rem; margin-top: .55rem; }

/* Footer */
.site-footer { background: var(--navy-ink); color: var(--on-navy-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand p { margin-top: .9rem; font-size: .9rem; max-width: 32ch; color: var(--on-navy-soft); }
.footer-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--white); margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .65rem; }
.footer-col a { font-size: .9rem; color: var(--on-navy-soft); transition: color .2s var(--ease-out); }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: .82rem; color: var(--on-navy-soft); flex-wrap: wrap; gap: .75rem; }
/* ---- SÍGUENOS (13/09/2026) ----
   El bloque anterior describía una fila de iconos redondos que nunca
   llegó a existir (no había cuentas reales que enlazar). Ahora hay una
   página de Facebook de verdad, así que se sustituye por un botón real,
   con el azul de la marca sobre el navy del pie. Está pensado para
   crecer: cuando existan Instagram o TikTok, se añaden como otro
   `.btn-social--<red>` y la fila los acomoda sola. */
.footer-social { margin-top: 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
/* 16/09/2026: ya son cuatro redes, asi que los botones van en una fila
   que envuelve sola. Antes colgaban del propio .footer-social (columna)
   y con cuatro habrian hecho una torre en el pie. */
.footer-social-row { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
.footer-social-title {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--white); font-weight: 700; margin: 0;
}
.btn-social {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.1rem .55rem .6rem; border-radius: 999px;
  font-size: .92rem; font-weight: 700; line-height: 1.2;
  color: #fff; text-decoration: none; max-width: 100%;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s var(--ease-out);
}
.btn-social:hover, .btn-social:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.btn-social-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.btn-social-mark svg { width: 100%; height: 100%; display: block; }
.btn-social-text { min-width: 0; }
.btn-social-text b { font-weight: 800; }

.btn-social--facebook {
  background: linear-gradient(180deg, #1c84ff 0%, #1877f2 55%, #0d61cc 100%);
  box-shadow: 0 6px 18px rgba(24, 119, 242, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-social--facebook:hover, .btn-social--facebook:focus-visible {
  box-shadow: 0 10px 26px rgba(24, 119, 242, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-social--facebook .btn-social-mark { color: #fff; }

/* ---- Instagram, TikTok y YouTube (16/09/2026) ----
   Mismo sistema que Facebook: cada red es un `.btn-social--<red>` que
   solo cambia el fondo y la sombra. El glifo va en blanco sobre el
   color de la marca, que es como cada plataforma pide que se enlace a
   un perfil. Si manana entra otra red, se copia uno de estos bloques. */
.btn-social--instagram {
  background: linear-gradient(115deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  box-shadow: 0 6px 18px rgba(214, 41, 118, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-social--instagram:hover, .btn-social--instagram:focus-visible {
  box-shadow: 0 10px 26px rgba(214, 41, 118, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-social--tiktok {
  background: linear-gradient(180deg, #2b2b2b 0%, #101010 55%, #000 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-social--tiktok:hover, .btn-social--tiktok:focus-visible {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-social--youtube {
  background: linear-gradient(180deg, #ff3d35 0%, #f00 55%, #c4302b 100%);
  box-shadow: 0 6px 18px rgba(255, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-social--youtube:hover, .btn-social--youtube:focus-visible {
  box-shadow: 0 10px 26px rgba(255, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-social--instagram .btn-social-mark,
.btn-social--tiktok .btn-social-mark,
.btn-social--youtube .btn-social-mark { color: #fff; }

/* Teléfono: el botón ocupa el ancho de la columna para que sea fácil de
   pulsar, pero nunca se estira en escritorio. */
@media (max-width: 719px) {
  .footer-social { align-items: stretch; }
  .btn-social { justify-content: center; padding: .6rem 1rem; }
  /* Con cuatro redes ya no tiene sentido una pastilla por linea: van
     de dos en dos, que siguen siendo grandes de pulsar. */
  .footer-social-row .btn-social { flex: 1 1 calc(50% - .25rem); min-width: 0; }
}

/* Mobile nav drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 200; background: rgba(8,20,50,.42); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.mobile-drawer.is-open { opacity: 1; pointer-events: auto; }
.mobile-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); background: var(--white);
  box-shadow: var(--shadow-lg); padding: 1.5rem; transform: translateX(100%); transition: transform .35s var(--ease-out);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.mobile-drawer.is-open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-panel .nav-links { flex-direction: column; align-items: flex-start; gap: .25rem; }
.mobile-drawer-panel .nav-links a { padding: .6rem 0; width: 100%; }
.drawer-close { align-self: flex-end; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (max-width: 1279px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .nav-toggle, .mobile-drawer { display: none; }
}

@media (max-width: 959px) {
  /* Bug real confirmado en vivo (bloque "CORRECCIÓN VISUAL ESPECÍFICA —
     BOTÓN OFERTAS", 02/09/2026): esta regla apagaba TODO ".nav-links"
     por igual, incluida la copia que vive DENTRO del drawer móvil
     (index.html declara <nav class="nav-links"> dos veces — una en el
     header, otra en .mobile-drawer-panel). Resultado: el drawer se
     abría (su panel SÍ es visible), pero la lista entera de adentro
     ("Todas las tiendas", el botón "🔥 Ofertas desde XX%", "Guías", las
     tiendas) tenía display:none real — nunca se veía nada del nav ahí,
     solo el botón de cerrar. Se acota el apagado SOLO a la copia del
     header (".site-header .nav-links") — la del drawer conserva su
     display:flex de siempre (línea ~212), que es justo lo que
     ".mobile-drawer-panel .nav-links" (más abajo) ya esperaba poder
     reordenar en columna.
  */
  .site-header .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  :root { --nav-h: 66px; }
  /* .product-grid y .offer-grid a 1 columna: eliminado el 10/09/2026.
     Son las grillas REALES de las dos secciones de la home
     ("Productos que vale la pena comparar" -> [data-products] y
     "Ofertas que encontramos" -> [data-offers]); las reemplaza la
     densidad de 2 columnas del bloque 14, al final del archivo. */
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-row { flex-wrap: nowrap; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .searchbar { flex-wrap: wrap; padding: .5rem; border-radius: var(--r-md); }
  .searchbar input { order: 1; width: 100%; padding: .4rem .3rem; }
  .searchbar svg { order: 1; }
  .searchbar .btn { order: 2; width: 100%; }
  .ofertas-toolbar { flex-direction: column; align-items: flex-start; }
  .ofertas-sort-select { width: 100%; }
}

@media (max-width: 539px) {
  .btn-lg { padding: .95rem 1.5rem; font-size: 1rem; }
}

/* =============================================================
   9. Reduced-motion (only intrusive effects)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   10. App view — búsqueda / resultados / producto / comparación
   ============================================================= */
[hidden] { display: none !important; }

.view-toolbar { position: sticky; top: var(--nav-h); z-index: 60; background: rgba(247,249,252,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.view-toolbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 58px; }
.vt-back {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; color: var(--navy);
  padding: .5rem .3rem; border-radius: var(--r-sm); transition: color .2s var(--ease-out);
}
.vt-back:hover { color: var(--blue); }
.vt-back svg { width: 18px; height: 18px; }
.vt-home {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center;
  font-size: 1.05rem; flex: none; transition: background .2s var(--ease-out);
}
.vt-home:hover { background: var(--blue-soft); }
.breadcrumbs { flex: 1; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .84rem; min-width: 0; }
.crumb-link { color: var(--text-soft); font-weight: 600; }
.crumb-link:hover { color: var(--blue); text-decoration: underline; }
.crumb-current { color: var(--navy); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.crumb-sep { color: var(--text-mute); }

.view-body { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(3rem, 6vw, 4.5rem); min-height: 50vh; }
.view-body h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--navy); }

/* Estados: vacío / error */
.view-state { text-align: center; max-width: 440px; margin: clamp(2.5rem, 6vw, 4rem) auto; }
.view-state-icon { width: 48px; height: 48px; color: var(--text-mute); margin: 0 auto 1rem; }
.view-state h2 { font-size: 1.15rem; color: var(--navy); margin-bottom: .5rem; }
.view-state p { color: var(--text-soft); font-size: .95rem; }
.view-state-error .view-state-icon { color: var(--orange); }

/* Encabezado de resultados */
.results-head { margin-bottom: 1.75rem; }
.results-platform-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.results-platform-head h1 { margin-bottom: .15rem; }
.results-platform-head p { color: var(--text-soft); font-size: .92rem; }
.view-search { margin-top: 1rem; max-width: 520px; }
.results-loading { color: var(--text-soft); font-size: .95rem; padding-block: 1.5rem; }

/* Vista /comparar/:slug — Home de una tienda (categorías reales + destacados) */
.platform-search-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.platform-search-row .searchbar.platform-search { flex: 1 1 320px; min-width: 240px; max-width: none; }
.platform-cat-select, .platform-sort-select {
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--navy); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .6rem 1.1rem; cursor: pointer; flex: none;
}
.platform-featured-title { font-size: 1.05rem; color: var(--navy); margin-bottom: 1rem; }
/* Catálogo por tienda (25/08/2026, prompt "Modificar únicamente la
   presentación del catálogo" — eliminar el carrusel horizontal y
   convertirlo en grid vertical). Reemplaza a ".platform-featured-scroll"
   (display:flex + overflow-x:auto, ya eliminado) en las 3 ramas de
   renderPlatformInto (categoría seleccionada / ver todos / destacados) —
   grid propio, INDEPENDIENTE de ".result-grid" (que sigue igual en
   búsqueda/categoría/ofertas, fuera del alcance de este cambio).
   auto-fill (no auto-fit) para que las tarjetas mantengan su tamaño
   aunque haya pocos productos, en vez de estirarse a lo ancho. */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
@media (max-width: 959px) {
  /* En este ancho ya no hay espacio para 4-5 columnas de escritorio —
     minmax(150px,1fr) da 2 columnas en la mayoría de celulares y cae a
     1 sola en pantallas muy angostas (regla explícita del prompt),
     sin necesidad de un tercer breakpoint propio. */
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
}
.platform-cta-row { display: flex; justify-content: center; margin-top: 1.75rem; }

/* Carga progresiva (FASE A3, 12/09/2026) — pie de las cuadriculas que
   se pintan de 60 en 60. Mismo lenguaje visual que .platform-cta-row. */
.progressive-more { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.75rem; }
.progressive-count { margin: 0; font-size: .9rem; color: var(--muted, #6b7280); }

/* Skeleton de resultados (regla 32 — evitar pantalla vacía) */
.result-card-skeleton { padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.skel { border-radius: var(--r-sm); background: linear-gradient(100deg, var(--surface-2) 30%, #e7ecf4 50%, var(--surface-2) 70%); background-size: 220% 100%; animation: skelShimmer 1.4s ease-in-out infinite; }
.skel-thumb { aspect-ratio: 4 / 3; border-radius: var(--r-md); margin-bottom: .3rem; }
.skel-line { height: 12px; }
.skel-w80 { width: 80%; } .skel-w60 { width: 60%; } .skel-w50 { width: 50%; } .skel-w40 { width: 40%; }
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Vista /ofertas ("🔥 Ofertas desde X%") */
.ofertas-head h1 {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--navy);
}
.ofertas-head h1 svg { width: 26px; height: 26px; color: var(--red); flex: none; }
.ofertas-sub { color: var(--text-soft); font-size: .92rem; margin-top: .4rem; max-width: 62ch; }
.ofertas-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .9rem;
  margin-bottom: 1.5rem;
}
.ofertas-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.ofertas-chip {
  font-size: .82rem; font-weight: 700; color: var(--text-soft); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: .45rem 1rem;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.ofertas-chip:hover { border-color: var(--blue); color: var(--navy); }
.ofertas-chip.is-active { color: var(--white); background: var(--navy); border-color: var(--navy); }
.ofertas-sort-label { font-size: .82rem; font-weight: 600; color: var(--text-soft); margin-right: .5rem; }
.ofertas-sort-select {
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--navy); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .7rem; cursor: pointer;
}
.result-deal-chip-percent { color: var(--white); background: linear-gradient(120deg, var(--red), var(--orange)); }

/* Banner de descuentos de la página de tienda (23/08/2026, hoy solo
   Mercado Libre — ver hasVerifiedDiscountBanner() en js/views.js).
   Mismo gradiente cálido que .result-deal-chip-percent, pero en
   formato franja para que se distinga claramente del aviso gris
   neutro (.provider-notice) que va justo debajo. */
.provider-discount-banner {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem;
  padding: .7rem 1rem; border-radius: var(--r-md); color: var(--white);
  background: linear-gradient(120deg, var(--red), var(--orange));
  box-shadow: var(--shadow-sm);
}
.provider-discount-banner svg { width: 22px; height: 22px; flex: none; }
.provider-discount-banner p { margin: 0; font-size: .88rem; font-weight: 700; }

/* Aviso de proveedor no disponible — un adapter caído/desactivado nunca
   rompe la búsqueda, solo se avisa y el resto de tiendas sigue mostrando
   resultados con normalidad. */
.provider-notice { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.provider-notice-item {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600;
  color: #7a3f00; background: #fff2e0; border-radius: var(--r-sm); padding: .55rem .8rem;
}
.provider-notice-item svg { width: 16px; height: 16px; flex: none; }

/* Grid de resultados */
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
/* min-width:0 (13/09/2026): sin esto, el tamano minimo automatico de la
   tarjeta dentro de la rejilla es su contenido, y la FOTO del producto
   aporta su ancho intrinseco (a veces 800-1200 px). Resultado: la
   columna crecia hasta el tamano de la imagen y la fila se salia de la
   pantalla. Se vio en /categoria/mouse con las fotos de Banggood. */
.result-card { padding: 1.1rem; display: flex; flex-direction: column; min-width: 0; }
.result-card > *, .showcase-card > * { min-width: 0; }
.result-thumb, .showcase-thumb { min-width: 0; } .result-body { display: flex; flex-direction: column; flex: 1; }
.result-thumb-link { display: block; }
.result-card { position: relative; }
.result-thumb {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-sm); background: linear-gradient(150deg, var(--surface-2), var(--blue-soft));
  display: grid; place-items: center; margin-bottom: .9rem; overflow: hidden;
}
.result-thumb svg { width: 40px; height: 40px; color: var(--blue); }
/* Insignia de plataforma (bloque "CORRECCIÓN DE PROBLEMAS ACTUALES",
   02/09/2026, §1): pastilla con logo (22px, antes 18px) + nombre
   COMPLETO de la tienda en tipografía legible (antes .76rem gris
   apenas visible) — fondo/borde/halo derivados de --platform-glow
   (misma variable que ya trae brandLogo() desde el registro central
   de lib/manifest.js, nunca un color fijo para una tienda en
   particular) para que el color de identidad de cada proveedor se
   note de un vistazo sin confundirse con la marca del producto (esa
   sigue en .result-brand, una línea aparte). */
.platform-badge {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 800; color: var(--navy);
  background: color-mix(in srgb, var(--platform-glow, var(--line)) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--platform-glow, var(--line)) 30%, transparent);
  border-radius: var(--r-pill); padding: .28rem .7rem .28rem .5rem; margin-bottom: .4rem;
  box-shadow: 0 2px 10px -5px color-mix(in srgb, var(--platform-glow, transparent) 55%, transparent);
  max-width: 100%;
}
.platform-badge .brand-logo, .platform-badge .logo-badge { flex: none; }
.platform-badge > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-name { display: block; font-size: .98rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; overflow-wrap: anywhere; word-break: break-word; }
.result-brand { font-size: .78rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .35rem; }
.result-rating { margin-bottom: 0; }
.result-rating-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.result-classify {
  font-size: .72rem; font-weight: 800; color: var(--blue); background: var(--blue-soft);
  padding: .15rem .5rem; border-radius: var(--r-pill);
}
.result-desc { font-size: .84rem; color: var(--text-soft); margin-bottom: .5rem; line-height: 1.45; }
.result-meta-line { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-mute); margin-bottom: .3rem; }
.result-meta-line svg { width: 14px; height: 14px; flex: none; }
.result-availability { color: var(--text-soft); font-weight: 600; }
.not-available { color: var(--text-mute); font-style: italic; font-size: .88rem; }
.result-price-row, .product-view-price .result-price-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
/* positive-feedback (bloque "CORRECCIÓN ALIEXPRESS", 01/09/2026): %
   de valoraciones positivas real (ej. AliExpress evaluate_rate) —
   visualmente DISTINTO de .stars a propósito (verde + ícono de pulgar
   arriba, nunca amarillo/estrellas) para que nunca se confunda con
   una calificación de estrellas de otra tienda. */
.positive-feedback-rating { margin-bottom: 0; }
.positive-feedback {
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: #0a7a3d;
}
.positive-feedback svg { width: 14px; height: 14px; flex: none; }
/* result-recent-sales: volumen de ventas recientes real (ej.
   AliExpress lastest_volume) — NUNCA junto a reseñas/rating, línea
   propia y compacta. */
.result-recent-sales {
  display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600;
  color: var(--text-mute); margin: .15rem 0 .3rem;
}
.result-recent-sales svg { width: 14px; height: 14px; flex: none; color: var(--blue); }
/* Pastilla "En oferta" (11/09/2026) — boton glossy con el color de SU
   tienda, calcado de las referencias: cuerpo en degradado vertical,
   filo superior brillante, borde luminoso y halo del mismo color.
   El slug lo pone priceBlock() en js/views.js (onsale-tag--<slug>);
   una tienda sin modificador propio se queda con el acabado calido de
   abajo. Todo es CSS estatico: ni animaciones ni imagenes, para no
   tocar el rendimiento de la ficha. */
.onsale-tag {
  --of-ini: #ff8a33;
  --of-fin: #e24a00;
  --of-borde: #ffbb86;
  --of-glow: rgba(226, 74, 0, .55);
  --of-tinta: #fff;
  position: relative; isolation: isolate;
  /* .result-body es una columna flex: sin esto la pastilla se estiraba
     a todo el ancho de la tarjeta (349 px) en vez de ajustarse al
     texto, y dejaba de parecerse al boton de la referencia. */
  align-self: flex-start; width: fit-content;
  display: inline-flex; align-items: center; gap: .38rem;
  margin-top: .45rem; padding: .33rem .75rem .33rem .58rem;
  max-width: 100%; border-radius: 999px;
  border: 1.5px solid var(--of-borde);
  background: linear-gradient(180deg, var(--of-ini) 0%, var(--of-fin) 100%);
  color: var(--of-tinta);
  font-size: .74rem; font-weight: 800; line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 0 18px 0 var(--of-glow),
    0 2px 6px rgba(3, 10, 28, .26);
}
/* Reflejo glossy de la mitad superior. z-index negativo = se pinta
   sobre el fondo de la pastilla pero debajo del texto. */
.onsale-tag::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 1.5px 3px 48% 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
}
/* Aro interior luminoso: es lo que da el aspecto de tubo de neon de
   las referencias. Va despues del reflejo para pintarse encima de el. */
.onsale-tag::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 1.5px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .42);
}
.onsale-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onsale-tag-ico { width: 16px; height: 16px; flex: none; }
/* La etiqueta va siempre blanca (como en las cuatro referencias) y su
   agujero deja ver el color de la pastilla; los destellos siguen a la
   tinta del texto: azul marino sobre el amarillo, blancos sobre el
   resto. */
.onsale-tag-ico .i-etiqueta { fill: #fff; }
.onsale-tag-ico .i-destellos { stroke: currentColor; }

.onsale-tag--mercadolibre { --of-ini: #ffe800; --of-fin: #ffc800; --of-borde: #fff384; --of-glow: rgba(255, 214, 0, .8);  --of-tinta: #0a1f47; }
.onsale-tag--aliexpress   { --of-ini: #fb2b1e; --of-fin: #bb0700; --of-borde: #ff9187; --of-glow: rgba(255, 45, 30, .72); --of-tinta: #fff; }
.onsale-tag--banggood     { --of-ini: #ff9628; --of-fin: #e85c00; --of-borde: #ffc487; --of-glow: rgba(255, 122, 0, .72); --of-tinta: #fff; }
.onsale-tag--lenovo       { --of-ini: #e41c23; --of-fin: #920007; --of-borde: #ff7d7d; --of-glow: rgba(198, 10, 22, .78); --of-tinta: #fff; }
/* CyberPuerta (17/09/2026): azul de su marca, el mismo del boton que
   usa la tienda. Misma receta que las otras cuatro — claro arriba,
   oscuro abajo, borde en tinte claro y halo del color — asi que la
   pastilla se lee igual de lejos que la amarilla de Mercado Libre.
   priceBlock() ya emite onsale-tag--cyberpuerta solo, a partir de
   l.platform: no hay nada que tocar en JS. */
/* Motorola (28/09/2026, decision del usuario): pastilla NEGRA, con borde y
   halo azul claro de su marca para que no se pierda sobre fondo oscuro. */
.onsale-tag--motorola     { --of-ini: #3a3a3f; --of-fin: #000000; --of-borde: #8fb4ff; --of-glow: rgba(92, 146, 250, .7); --of-tinta: #fff; }
/* Levi's (28/09/2026): azul mezclilla con borde y halo rojos de su marca. */
.onsale-tag--levis        { --of-ini: #3b6aa3; --of-fin: #1a3355; --of-borde: #ff8a95; --of-glow: rgba(196, 18, 48, .65); --of-tinta: #fff; }
/* Super Naturista (28/09/2026): verde de su marca. */
.onsale-tag--supernaturista { --of-ini: #2e9e4f; --of-fin: #16622e; --of-borde: #a8e6ab; --of-glow: rgba(46, 158, 79, .7); --of-tinta: #fff; }
/* RedMagic México (30/09/2026) */
.onsale-tag--redmagic { --of-ini: #3a1014; --of-fin: #0c0c0f; --of-borde: #ff6b75; --of-glow: rgba(255, 45, 61, .7); --of-tinta: #fff; }
/* Samsonite México (30/09/2026) */
.onsale-tag--samsonite { --of-ini: #2f49d1; --of-fin: #0b1660; --of-borde: #9db1ff; --of-glow: rgba(74, 108, 255, .7); --of-tinta: #fff; }
/* Tienda Panini México (30/09/2026) */
.onsale-tag--panini { --of-ini: #e3343b; --of-fin: #8f1016; --of-borde: #ffe066; --of-glow: rgba(255, 204, 0, .65); --of-tinta: #fff; }
/* StyleWe (30/09/2026) */
.onsale-tag--stylewe { --of-ini: #8e2a52; --of-fin: #3d0f24; --of-borde: #f3a9c4; --of-glow: rgba(243, 169, 196, .65); --of-tinta: #fff; }
/* Noracora (30/09/2026) */
.onsale-tag--noracora { --of-ini: #0e6b66; --of-fin: #063633; --of-borde: #7ee0d6; --of-glow: rgba(126, 224, 214, .65); --of-tinta: #fff; }
/* JustFashionNow (30/09/2026) */
.onsale-tag--justfashionnow { --of-ini: #e8590c; --of-fin: #8a2f00; --of-borde: #ffc078; --of-glow: rgba(255, 192, 120, .65); --of-tinta: #fff; }
/* Sunsky (30/09/2026) */
.onsale-tag--sunsky { --of-ini: #0b6fb8; --of-fin: #06365c; --of-borde: #8fd0ff; --of-glow: rgba(143, 208, 255, .65); --of-tinta: #fff; }
/* Nubia México (30/09/2026) */
.onsale-tag--nubia { --of-ini: #3b2a8f; --of-fin: #150f3d; --of-borde: #b9a8ff; --of-glow: rgba(185, 168, 255, .65); --of-tinta: #fff; }
/* Nieion México (30/09/2026) */
.onsale-tag--nieion { --of-ini: #3d3200; --of-fin: #14110a; --of-borde: #ffd43b; --of-glow: rgba(255, 212, 59, .65); --of-tinta: #fff; }
/* Whirlpool (28/09/2026): grafito con borde y halo dorados de su marca. */
.onsale-tag--whirlpool    { --of-ini: #44484f; --of-fin: #15171a; --of-borde: #f5c542; --of-glow: rgba(238, 177, 17, .7); --of-tinta: #fff; }
.onsale-tag--cyberpuerta  { --of-ini: #2b86ff; --of-fin: #0b47c4; --of-borde: #8dbcff; --of-glow: rgba(21, 101, 255, .76); --of-tinta: #fff; }
/* eBay (17/09/2026): el verde de su marca. Ojo — eBay esta AISLADO del
   catalogo general por la licencia del API, asi que esta pastilla solo
   aparece en sus vistas propias (panel de tiendas, ficha y su seccion de
   la home). Hasta hoy caia al naranja por defecto de .onsale-tag, que no
   era de ninguna tienda. */
.onsale-tag--ebay         { --of-ini: #35cc2a; --of-fin: #067d15; --of-borde: #96ef88; --of-glow: rgba(45, 200, 40, .76); --of-tinta: #fff; }
.result-deal-chip {
  position: absolute; top: .55rem; left: .55rem; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 800; color: #b3350a; background: rgba(255,255,255,.95);
  padding: .25rem .55rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.result-deal-chip svg { width: 12px; height: 12px; }
/* Tarjeta simplificada del catálogo por tienda (25/08/2026, ver
   ResultCard(l, {catalogView:true}) en js/views.js) — insignia "MÁS
   VENDIDO"/similar SOLO si el listing la trae (l.bestSellerBadge, dato
   observado en la fuente real, nunca inventado — hoy ningún producto
   del catálogo demo la tiene todavía, así que no se pinta en ningún
   lado hasta que se cargue ese dato). Mismo lugar que .result-deal-chip
   pero en dorado para no confundirse con un chip de descuento (que esta
   tarjeta ya no muestra). */
.result-bestseller-chip {
  position: absolute; top: .55rem; left: .55rem; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 800; color: #6b4a00; background: #ffe6a8;
  padding: .25rem .55rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
/* Cantidad de ventas (l.salesCount, mismo criterio de "solo si existe" —
   hoy tampoco cargada). Reusa la tipografía de .result-meta-line sin el
   ícono. */
.result-sales-count { font-size: .78rem; color: var(--text-mute); margin-bottom: .3rem; }
.result-video-chip {
  position: absolute; top: .55rem; right: .55rem; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 800; color: var(--white); background: rgba(8,36,92,.82);
  padding: .25rem .55rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.result-video-chip svg { width: 12px; height: 12px; }
.gallery-video-chip {
  position: absolute; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; font-weight: 800; color: var(--white); background: rgba(8,36,92,.82);
  padding: .3rem .65rem; border-radius: var(--r-pill);
}
.gallery-video-chip svg { width: 14px; height: 14px; }
.gallery-video-player { margin-top: .8rem; border-radius: var(--r-md); overflow: hidden; background: #000; }
.gallery-video-player video { width: 100%; display: block; }
.result-features { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.result-feature-chip {
  font-size: .72rem; font-weight: 600; color: var(--text-soft); background: var(--surface-2);
  padding: .18rem .5rem; border-radius: var(--r-pill); border: 1px solid var(--line);
}

/* Etiqueta de condición NUEVO/USADO (js/utils.js: conditionTag) — se
   oculta sola cuando la tienda no declara el dato (nunca se asume
   "Nuevo"), así que solo necesita estilo para los dos estados reales. */
.result-badge-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.condition-tag {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 800;
  padding: .15rem .55rem; border-radius: var(--r-pill); letter-spacing: .01em;
}
.condition-tag.is-new { color: var(--blue); background: var(--blue-soft); }
.condition-tag.is-used { color: var(--orange-ink); background: #fff2e0; }

.compare-tray-actions a.is-disabled-hint { opacity: .55; }
/* .result-thumb-slot (§12, 02/09/2026): envuelve el link de la foto +
   el botón de favorito — mismo tamaño que la foto, position:relative
   propio — para que .result-fav quede anclado a SU esquina sin
   importar qué más traiga la tarjeta arriba (ahora la insignia de
   plataforma, §12). Antes .result-fav era absolute relativo a toda la
   tarjeta asumiendo que la foto siempre era el primer elemento. */
.result-thumb-slot { position: relative; }
.result-fav {
  position: absolute; top: .6rem; right: .6rem; width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--text-mute); box-shadow: var(--shadow-sm); transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.result-fav svg { width: 17px; height: 17px; }
.result-fav:hover { color: #e0106a; border-color: #e0106a; }
.result-fav[aria-pressed="true"], .result-fav.is-active { color: #e0106a; border-color: #e0106a; }
.result-fav[aria-pressed="true"] svg, .result-fav.is-active svg { fill: currentColor; }
.result-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: 1rem; }
.result-actions .btn { flex: 1; padding-inline: .7rem; font-size: .82rem; }
.btn-compare-toggle svg { width: 16px; height: 16px; }
.btn-compare-toggle[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* Showcase multiplataforma (Home) — mismo tema, sin precio */
.showcase-section { background: var(--surface-2); }
.showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.showcase-dots { display: flex; gap: .5rem; }
.showcase-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.showcase-dot.is-active { background: var(--blue); transform: scale(1.3); }
.showcase-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.showcase-card { padding: 1rem; display: flex; flex-direction: column; min-width: 0; }
.showcase-card-empty { align-items: center; justify-content: center; text-align: center; gap: .5rem; min-height: 220px; }
.showcase-thumb-link { display: block; }
.showcase-thumb {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-sm); background: linear-gradient(150deg, var(--surface-2), var(--blue-soft));
  display: grid; place-items: center; margin-bottom: .75rem; overflow: hidden;
}
.showcase-thumb svg { width: 34px; height: 34px; color: var(--blue); }
.showcase-body { display: flex; flex-direction: column; gap: .35rem; }
.showcase-name { display: block; font-size: .88rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: .1rem; overflow-wrap: anywhere; word-break: break-word; }
.showcase-body .btn { margin-top: .5rem; font-size: .8rem; padding-inline: .6rem; }

/* Vista de producto */
.product-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.gallery-main {
  position: relative; aspect-ratio: 1/1; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--surface-2), var(--blue-soft));
  display: grid; place-items: center; border: 1px solid var(--line); overflow: hidden;
}
.gallery-main-icon { width: 30%; height: 30%; color: var(--blue); }
.gallery-main.flash { animation: galleryFlash .35s var(--ease-out); }
@keyframes galleryFlash { from { opacity: .45; } to { opacity: 1; } }
.gallery-thumbs { display: flex; gap: .6rem; margin-top: .8rem; max-width: 100%; overflow-x: auto; }
.gallery-thumb {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--surface-2); border: 2px solid transparent;
  display: grid; place-items: center; transition: border-color .2s var(--ease-out); overflow: hidden;
}
.gallery-thumb svg { width: 26px; height: 26px; color: var(--blue); }
.gallery-thumb.is-active { border-color: var(--blue); }
.gallery-note { font-size: .78rem; color: var(--text-mute); margin-top: .8rem; }

/* Fotografía real de producto (prompt "PRIMER PRODUCTO REAL DE MERCADO
   LIBRE" §2/§5; corregido en el bloque "CORRECCIÓN DE PROBLEMAS
   ACTUALES", 02/09/2026, §2/§3) — mismo contenedor/tamaño de siempre
   en cada contexto (tarjeta/Home/ficha/comparación). object-fit:cover
   recortaba fotos verticales/horizontales que no fueran ya 1:1 (caso
   real de productos manuales de Mercado Libre, cuya foto viene tal
   cual la entrega la tienda). Ahora el CONTENEDOR es siempre cuadrado
   (aspect-ratio:1/1, ver reglas de cada clase abajo) y la imagen usa
   object-fit:contain con un respiro (~6%) para que se vea COMPLETA,
   centrada y sin deformarse — nunca recortada ni estirada, sin
   importar el formato que entregue la tienda. El fondo del contenedor
   (gradiente de siempre para el ícono genérico) pasa a un tono neutro
   sólido cuando SÍ hay foto real (:has, único punto de la regla — no
   se duplica en cada clase) para no competir visualmente con la foto.
   Cuando listing.images[0].url no existe, esta regla nunca aplica —
   productThumbHtml() sigue usando el <svg> genérico de siempre. */
.result-thumb .product-thumb-img,
.showcase-thumb .product-thumb-img,
.gallery-main .product-thumb-img,
.gallery-thumb .product-thumb-img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: inherit;
  padding: 6%; box-sizing: border-box;
}
.result-thumb:has(.product-thumb-img),
.showcase-thumb:has(.product-thumb-img),
.gallery-main:has(.product-thumb-img),
.gallery-thumb:has(.product-thumb-img) {
  background: var(--surface-2);
}
.compare-th-icon.product-thumb-img { width: 32px; height: 32px; object-fit: contain; border-radius: var(--r-sm); }

.product-view-info h1 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--navy); margin-top: .4rem; }
.product-view-brand { font-size: .82rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }
.product-view-price { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--surface-2); border-radius: var(--r-md); }
.product-view-price .price-now { font-size: 1.7rem; }
.price-updated, .price-updated-note { font-size: .8rem; color: var(--text-mute); margin-top: .5rem; }
.price-updated-note-stale { display: flex; align-items: center; gap: .35rem; color: #7a3f00; font-weight: 700; }
.price-updated-note-stale svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Notas de Mercado Libre (23/08/2026, fix — "esa sección está muy
   grande, hay vacíos"): el icono ("info", ver js/utils.js) no tenía
   ninguna regla de tamaño acotándolo — sin width/height explícitos, el
   navegador lo renderizaba a su tamaño de reemplazo por default
   (~300×300px), dos veces (nota corta + nota larga), que era
   exactamente el "gran recuadro que se desperdicia". Mismo patrón que
   el resto del set de iconos del sitio: cada contenedor declara su
   propio tamaño explícito (no hay una regla global "svg {}"). */
.ml-no-price-note svg,
.ml-limited-note svg { width: 15px; height: 15px; flex: none; vertical-align: -3px; }
.product-view-desc { margin-top: 1.2rem; color: var(--text-soft); }
.product-view-info h2 { font-size: 1.05rem; color: var(--navy); margin-top: 1.6rem; margin-bottom: .6rem; }
.product-view-info h3 { font-size: .92rem; color: var(--navy); margin-bottom: .25rem; }
.feature-list { display: grid; gap: .5rem; }
.feature-list li { padding-left: 1.3rem; position: relative; color: var(--text-soft); font-size: .93rem; }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table th, .spec-table td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.spec-table th { color: var(--text-mute); font-weight: 600; width: 42%; }
.spec-table td { color: var(--navy); font-weight: 600; }
.avail-ship-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.6rem; }
.review-list { display: grid; gap: 1rem; }
.review-item-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
.review-item-head .stars { color: var(--yellow); }
.review-item p { color: var(--text-soft); font-size: .92rem; }
.product-view-cta { margin-top: 2rem; }
.cta-note { font-size: .78rem; color: var(--text-mute); margin-top: .6rem; text-align: center; }
.cta-disclosure { font-size: .78rem; color: var(--text-soft); margin-top: .6rem; text-align: center; }

/* Otras tiendas donde se encontró el mismo producto */
.other-stores { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.other-stores h2 { font-size: 1.1rem; color: var(--navy); margin-bottom: 1rem; }
.other-stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.other-store-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem; }
.other-store-name { font-weight: 700; color: var(--navy); font-size: .88rem; }
.other-store-price { font-weight: 800; color: var(--navy); font-size: 1rem; }

/* Comparación — bloque UX/UI/BRANDING 01/09/2026: la tarjeta de
   producto (.compare-col-head) y la tabla de atributos son AHORA la
   MISMA <table> — la tarjeta vive dentro del <th> del <thead> y cada
   fila de atributo es un <tr> del <tbody>. Antes eran dos bloques de
   DOM independientes (un grid CSS + una tabla aparte) sin ningún
   sistema de columnas compartido, así que en móvil, con cada uno
   haciendo su propio scroll horizontal, la fila de abajo podía
   mostrar el dato de un producto distinto al de la tarjeta de arriba.
   Al ser una sola tabla, la columna N-ésima es SIEMPRE el mismo
   producto en el encabezado y en cada fila — lo garantiza el propio
   HTML, no hay forma de que se desincronicen. */
.compare-col-head { position: relative; padding: 1.1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.compare-col-remove {
  position: absolute; top: .6rem; right: .6rem; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--surface-2); color: var(--text-mute); display: grid; place-items: center; cursor: pointer;
}
.compare-col-remove svg { width: 13px; height: 13px; }
/* Insignia de plataforma DENTRO del encabezado de comparación (§1/§12,
   02/09/2026): CompareColumnHead ya pasa un logo más chico (18px, ver
   platformBadge(l.platform, 18)), pero la pastilla en sí (fondo/borde/
   padding nuevos de §1) seguía sumando alto en un espacio ya muy
   ajustado — se compacta aquí, una sola vez, en vez de repetir estos
   valores en cada media query de comparación. */
.compare-col-head .platform-badge { padding: .12rem .5rem .12rem .35rem; gap: .3rem; font-size: .74rem; }
.compare-col-name { font-weight: 700; color: var(--navy); font-size: .92rem; margin: .2rem 0; }
.compare-col-score { font-size: .8rem; color: var(--text-soft); }
.compare-col-score b { color: var(--blue); font-size: 1.05rem; }

/* overflow-x vive SOLO aquí — nunca en el body/página (regla: "no
   causar overflow horizontal global"). max-width:100% evita que la
   propia tabla empuje el ancho del contenedor padre. */
.compare-table-wrap { overflow-x: auto; max-width: 100%; margin-top: 1.25rem; -webkit-overflow-scrolling: touch; }
.compare-table { border-collapse: collapse; width: 100%; }
.compare-table th, .compare-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.compare-table thead th { vertical-align: top; border-bottom: 2px solid var(--line); }
.compare-table thead th.compare-col-head-cell { padding: 0; }
.compare-th-icon { width: 32px; height: 32px; color: var(--blue); }
/* Columna de etiquetas (primera de cada fila, incluida la del thead)
   fija al hacer scroll horizontal — el usuario nunca pierde de vista a
   qué característica corresponde la fila mientras desliza. */
.compare-table th:first-child, .compare-table td:first-child {
  color: var(--text-mute); font-weight: 600; font-size: .82rem; white-space: nowrap;
  position: sticky; left: 0; background: var(--white); z-index: 1;
}
.compare-table td.is-winner { background: var(--blue-soft); font-weight: 700; }
.compare-rows-toggle { margin-top: .8rem; }

/* Ancho de columna por producto según cuántos hay seleccionados
   (2 a 4 — regla 5/6 del bloque). Solo la columna de PRODUCTO se
   reduce proporcionalmente; la de etiquetas siempre queda legible.
   Con 4 productos, .compare-table-wrap ya permite scroll horizontal
   controlado si no caben — nunca desborda la página completa. */
.compare-table th:first-child, .compare-table td:first-child { min-width: 108px; }
.compare-count-2 .compare-table th:not(:first-child), .compare-count-2 .compare-table td:not(:first-child) { min-width: 260px; }
.compare-count-3 .compare-table th:not(:first-child), .compare-count-3 .compare-table td:not(:first-child) { min-width: 200px; }
.compare-count-4 .compare-table th:not(:first-child), .compare-count-4 .compare-table td:not(:first-child) { min-width: 168px; }
.compare-count-5 .compare-table th:not(:first-child), .compare-count-5 .compare-table td:not(:first-child) { min-width: 150px; }
.compare-count-6 .compare-table th:not(:first-child), .compare-count-6 .compare-table td:not(:first-child) { min-width: 132px; }
.compare-count-3 .compare-col-head, .compare-count-4 .compare-col-head { padding: .8rem .6rem; gap: .3rem; }
.compare-count-5 .compare-col-head, .compare-count-6 .compare-col-head { padding: .7rem .45rem; gap: .25rem; }
.compare-count-4 .compare-col-name { font-size: .84rem; }
.compare-count-5 .compare-col-name { font-size: .8rem; }
.compare-count-6 .compare-col-name { font-size: .76rem; line-height: 1.25; }
.compare-count-5 .compare-col-name-text, .compare-count-6 .compare-col-name-text { -webkit-line-clamp: 3; }
/* --- Imagen del encabezado de comparación (fase 10/09/2026) ---
   Antes era un thumbnail de 32px (26px con 4 productos): el usuario
   reportó que "casi no se ve" y que la comparación no permite
   reconocer el producto. La foto es justo el dato que más rápido
   identifica un producto, así que pasa a ser el elemento dominante de
   la cabecera. Se mantiene object-fit:contain (nunca cover) para no
   recortar producto, y aspect-ratio 1/1 para no deformarlo. El ancho
   se ajusta por cantidad de columnas para que 6 sigan cabiendo en el
   contenedor de 1280px sin desplazamiento. */
.compare-th-icon, .compare-th-icon.product-thumb-img {
  width: 100%; max-width: 132px; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; border-radius: var(--r-sm); background: var(--white);
}
.compare-count-4 .compare-th-icon, .compare-count-4 .compare-th-icon.product-thumb-img { max-width: 116px; }
.compare-count-5 .compare-th-icon, .compare-count-5 .compare-th-icon.product-thumb-img { max-width: 104px; }
.compare-count-6 .compare-th-icon, .compare-count-6 .compare-th-icon.product-thumb-img { max-width: 92px; }
/* El ícono SVG de respaldo (producto sin foto real) no debe estirarse
   a 132px: se centra dentro del mismo hueco cuadrado. */
svg.compare-th-icon { max-width: 56px; margin-inline: auto; }
/* Cabeceras pegajosas: al recorrer una tabla larga de características,
   el producto de cada columna sigue visible arriba. Sin esto, con 6
   columnas el usuario pierde de vista de quién es cada celda. */
.compare-table thead th { position: sticky; top: 0; z-index: 2; background: var(--white); }
.compare-table thead th:first-child { z-index: 3; }
.compare-count-line { color: var(--text-mute); font-size: .9rem; margin-top: -.35rem; }
.compare-viewport-note {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; padding: .7rem .9rem;
  background: var(--blue-soft); border: 1px solid #cfe0fb; border-radius: var(--r-sm);
  font-size: .86rem; line-height: 1.5; color: var(--navy);
}
.compare-viewport-note svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: .15rem; }
@media (max-width: 640px) {
  .compare-count-2 .compare-table th:not(:first-child), .compare-count-2 .compare-table td:not(:first-child) { min-width: 200px; }
  .compare-count-3 .compare-table th:not(:first-child), .compare-count-3 .compare-table td:not(:first-child) { min-width: 168px; }
  .compare-count-4 .compare-table th:not(:first-child), .compare-count-4 .compare-table td:not(:first-child) { min-width: 148px; }
}
.winner-chip {
  display: inline-flex; align-items: center; gap: .2rem; margin-left: .4rem; font-size: .68rem; font-weight: 800;
  color: var(--blue); vertical-align: middle;
}

/* Ficha avanzada — Valoración ComparaElige, etiquetas, resumen editorial */
.ce-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ce-badge {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  padding: .32rem .6rem; border-radius: var(--r-pill); background: var(--orange); color: #fff;
}
.ce-score-block { margin-top: 1rem; padding: 1.1rem; display: grid; gap: .9rem; }
.ce-score-overall { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.ce-score-overall b { font-size: 1.9rem; color: var(--blue); line-height: 1; }
.ce-score-overall span { color: var(--text-mute); font-size: .85rem; }
.ce-score-label { width: 100%; font-size: .82rem; font-weight: 700; color: var(--navy); margin-top: .1rem; }
.ce-score-parts { display: grid; gap: .5rem; }
.ce-score-part { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: .6rem; }
.ce-score-part-label { font-size: .78rem; color: var(--text-mute); }
.ce-score-part-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.ce-score-part-bar span { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.ce-score-part-val { font-size: .78rem; font-weight: 700; color: var(--navy); text-align: right; }
.ce-score-note { font-size: .74rem; color: var(--text-mute); }
.ce-editorial { margin-top: 1.2rem; padding: 1.1rem; background: var(--blue-soft); }
.ce-editorial h2 { margin: 0 0 .4rem !important; }
.ce-editorial p { color: var(--text-soft); font-size: .92rem; }
.product-view-cta .btn-compare-toggle { margin-bottom: .7rem; }

/* Mapa de autonomía (movilidad eléctrica) — diagrama esquemático propio,
   sin mapas/tiles externos; se construye solo cuando se abre la sección. */
.ce-range-map { margin-top: 1.6rem; padding: 0; overflow: hidden; }
.ce-range-map-toggle {
  width: 100%; display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border: none;
  background: var(--surface-2); color: var(--navy); font-weight: 700; font-size: .9rem; cursor: pointer; text-align: left;
}
.ce-range-map-toggle svg:first-child { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }
.ce-range-map-toggle span { flex: 1; }
.ce-range-map-chevron { width: 15px; height: 15px; color: var(--text-mute); transition: transform .2s var(--ease-out); }
.ce-range-map.is-open .ce-range-map-chevron { transform: rotate(90deg); }
.ce-range-map-body { padding: 1.2rem 1.1rem; display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.2rem; align-items: center; }
.ce-range-map-diagram { display: flex; justify-content: center; }
.ce-range-map-svg { width: 100%; max-width: 220px; height: auto; }
.ce-map-ring { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .8; }
.ce-map-ring-outer { fill: none; }
.ce-map-axis { stroke: var(--line); stroke-width: 1; }
.ce-map-center { fill: var(--navy); }
.ce-map-label { font-size: 11px; fill: var(--navy); font-weight: 700; }
.ce-range-map-info p { font-size: .85rem; color: var(--text-soft); margin-bottom: .55rem; }
.ce-range-map-info p:last-child { margin-bottom: 0; }
.ce-range-map-disclaimer { font-size: .76rem !important; color: var(--text-mute) !important; }
@media (max-width: 560px) {
  .ce-range-map-body { grid-template-columns: 1fr; }
}

/* Análisis de batería / motor (movilidad eléctrica) */
.ce-analysis-block { margin-top: 1rem; padding: 1.1rem; }
.ce-analysis-block h3 { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--navy); margin: 0 0 .8rem; }
.ce-analysis-block h3 svg { width: 18px; height: 18px; color: var(--blue); }
.ce-analysis-cells { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.ce-analysis-cell { display: flex; flex-direction: column; gap: .2rem; }
.ce-analysis-cell span { font-size: .74rem; color: var(--text-mute); }
.ce-analysis-cell b { font-size: 1.15rem; color: var(--navy); }
.ce-analysis-cell-wide { margin-bottom: .6rem; }
.ce-analysis-power-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin-bottom: .7rem; }
.ce-analysis-power-bar span { display: block; height: 100%; background: var(--orange); border-radius: var(--r-pill); }
.ce-analysis-note { font-size: .76rem; color: var(--text-mute); }
.winner-chip svg { width: 11px; height: 11px; }
.compare-feature-list { margin: 0; padding-left: 1.1rem; font-size: .85rem; }
.compare-blocked-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.compare-blocked-item { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); flex-wrap: wrap; }
.compare-blocked-item.is-blocked { background: #fff2e0; border-color: #f3d3a8; }
.compare-blocked-name { font-weight: 700; color: var(--navy); flex: 1; min-width: 120px; }
.compare-blocked-tag { font-size: .74rem; font-weight: 700; color: #7a3f00; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

/* Bandeja flotante de comparación */
.compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--navy);
  box-shadow: 0 -8px 24px rgba(8,20,50,.18);
}
.compare-tray-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; flex-wrap: wrap; }
.compare-tray-inner > span { color: var(--white); font-weight: 700; font-size: .92rem; }
.compare-tray-actions { display: flex; gap: .6rem; }
.compare-tray-actions .btn-ghost { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.2); }

@media (max-width: 959px) {
  .product-view { grid-template-columns: minmax(0, 1fr); }
  .avail-ship-row { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  /* .result-grid a 1 columna: eliminado el 10/09/2026, lo reemplaza
     la densidad de 2 columnas del bloque 14 (final del archivo). */
  .breadcrumbs { display: none; } /* en móvil, Regresar + Home bastan; evita que el header se apriete */
  .view-toolbar-inner { justify-content: space-between; }
  /* .showcase-grid a 1 columna: idem, ver bloque 14. */
  .showcase-head { align-items: flex-start; }
  .platform-search-row { flex-direction: column; align-items: stretch; }
  .platform-cat-select, .platform-sort-select { width: 100%; }
}

/* Aviso de transparencia del footer (afiliados) — siempre visible,
   en las 5 tiendas, en cualquier vista, no solo en la Política de
   Afiliados. */
.footer-transparency {
  display: flex; align-items: flex-start; gap: .65rem; padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-top: -.1rem;
}
.footer-transparency-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.footer-transparency p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--on-navy-soft); max-width: 68ch; }
.footer-transparency a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.footer-transparency a:hover { color: var(--orange); }

/* Páginas legales/institucionales (Sobre ComparaElige, Privacidad,
   Términos, Afiliados, Contacto) — vista genérica, ver
   js/views.js#renderLegalPageInto y lib/legal-content.js. */
.legal-page { max-width: 840px; margin: 0 auto; padding-block: .5rem 3rem; }
.legal-subnav {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.legal-subnav-link {
  font-size: .82rem; font-weight: 700; color: var(--text-soft); background: var(--surface-2);
  padding: .45rem .85rem; border-radius: var(--r-pill); transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.legal-subnav-link:hover { background: var(--blue-soft); color: var(--navy); }
.legal-subnav-link.is-active { background: var(--navy); color: var(--white); }

.legal-head { margin-bottom: 1.8rem; }
.legal-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy); margin-bottom: .5rem; }
.legal-updated { font-size: .78rem; color: var(--text-mute); margin-bottom: .9rem; }
.legal-intro { font-size: 1rem; color: var(--text-soft); max-width: 62ch; }

.legal-section { margin-bottom: 1.7rem; }
.legal-section h2 { font-size: 1.05rem; color: var(--navy); margin-bottom: .55rem; }
.legal-section p { font-size: .92rem; line-height: 1.65; color: var(--text-soft); margin-bottom: .7rem; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0 0 .7rem; padding-left: 1.2rem; font-size: .92rem; line-height: 1.65; color: var(--text-soft); }
.legal-section ul:last-child { margin-bottom: 0; }
.legal-section li { margin-bottom: .35rem; }
.legal-section a { color: var(--blue); font-weight: 600; }
.legal-section a:hover { text-decoration: underline; }
.legal-note { font-size: .8rem; color: var(--text-mute); font-style: italic; }

/* Política de Afiliados — resumen + tarjetas por tienda, siempre
   generadas en vivo desde lib/legal-content.js (nunca texto fijo). */
.legal-affiliate-overall { background: var(--surface-2); border-radius: var(--r-md); padding: 1.1rem 1.3rem; }
.legal-affiliate-overall p { color: var(--text); margin-bottom: 0; }
.legal-affiliate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.legal-affiliate-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem 1.2rem;
}
.legal-affiliate-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.legal-affiliate-card-head h3 { font-size: .96rem; color: var(--navy); }
.legal-affiliate-badge {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: .25rem .55rem; border-radius: var(--r-pill); white-space: nowrap;
}
.legal-affiliate-badge-pending { background: #fff2e0; color: var(--orange-ink); }
.legal-affiliate-badge-active { background: var(--green-soft); color: var(--green); }
.legal-affiliate-card p { font-size: .86rem; }
.legal-affiliate-legend { font-size: .78rem; font-style: italic; color: var(--text-mute); border-top: 1px dashed var(--line); padding-top: .6rem; margin-top: .6rem !important; }

@media (max-width: 719px) {
  .legal-affiliate-grid { grid-template-columns: 1fr; }
  .footer-transparency { flex-direction: column; }
}

/* =============================================================
   Slots de publicidad (PROMPT 4/5 §16-18) — hoy siempre [hidden]
   (lib/ads.js: interruptor maestro apagado), así que estas reglas no
   se ven todavía. Se dejan listas para cuando se active: separación
   visual clara de PRODUCTO/COMPARAELIGE (nunca reutiliza .result-card/
   .showcase-card ni queda pegado al bloque de compra — regla 17),
   etiqueta "Publicidad" siempre visible, y una altura máxima en móvil
   para que un anuncio nunca domine la pantalla (regla 18).
   ============================================================= */
.ad-slot {
  margin-block: 1.25rem;
  padding: .9rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}
.ad-slot-label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-mute);
  margin-bottom: .5rem;
}
.ad-slot-body:empty { min-height: 0; }
@media (max-width: 719px) {
  .ad-slot { max-height: 280px; overflow: hidden; }
}

/* =============================================================
   PROMPT 5/5 — Contenido editorial, hubs de categoría, 404
   (lib/content.js, lib/categories.js, js/router.js, js/views.js)
   ============================================================= */

/* Tarjetas de guía — reutilizadas en el índice de guías, en "Guías
   relacionadas" del artículo y en "Guías relacionadas" del hub de
   categoría, para que la misma pieza visual signifique lo mismo en
   cualquier lugar del sitio (regla de coherencia). */
.guide-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.guide-link-card {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem 1.2rem;
}
.guide-link-kicker {
  display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--blue); margin-bottom: .4rem;
}
.guide-link-card h2, .guide-link-card h3 { font-size: .98rem; color: var(--navy); line-height: 1.35; }
.guide-link-card p { font-size: .84rem; color: var(--text-soft); margin-top: .45rem; line-height: 1.55; }

/* Índice de guías (#guias) */
.guides-index { max-width: 1080px; margin: 0 auto; padding-block: .5rem 3rem; }
.guides-index-head { max-width: 62ch; margin-bottom: 1.8rem; }
.guides-index-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy); margin-bottom: .5rem; }
.guides-index-head p { color: var(--text-soft); font-size: .95rem; }

/* Artículo/guía individual (#guias/:slug) */
.guide-article { max-width: 760px; margin: 0 auto; padding-block: .5rem 3rem; }
.guide-article-head { margin-bottom: 1.6rem; }
.guide-kicker {
  display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--blue); background: var(--blue-soft); padding: .3rem .65rem; border-radius: var(--r-pill); margin-bottom: .7rem;
}
.guide-article-head h1 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); color: var(--navy); margin-bottom: .5rem; line-height: 1.25; }
.guide-byline { font-size: .8rem; color: var(--text-mute); margin-bottom: .9rem; }
.guide-intro { font-size: 1rem; color: var(--text-soft); line-height: 1.65; }

.guide-section { margin-bottom: 1.7rem; }
.guide-section h2 { font-size: 1.1rem; color: var(--navy); margin-bottom: .6rem; }
.guide-section p { font-size: .94rem; line-height: 1.7; color: var(--text-soft); margin-bottom: .8rem; }
.guide-section p:last-child { margin-bottom: 0; }
.guide-section ul { margin: 0 0 .8rem; padding-left: 1.2rem; font-size: .94rem; line-height: 1.7; color: var(--text-soft); }
.guide-section li { margin-bottom: .4rem; }
.guide-section li b { color: var(--text); }
.guide-section a { color: var(--blue); font-weight: 600; }
.guide-section a:hover { text-decoration: underline; }
.guide-section code {
  background: var(--surface-2); border-radius: 6px; padding: .1rem .4rem; font-size: .86em; color: var(--navy);
}

.guide-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .86rem; }
.guide-table th, .guide-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.guide-table th { color: var(--navy); font-weight: 700; background: var(--surface-2); }
.guide-table td { color: var(--text-soft); }
.guide-table tr:last-child td { border-bottom: none; }

.guide-category-link { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.guide-category-link a { color: var(--blue); font-weight: 700; font-size: .92rem; }
.guide-category-link a:hover { text-decoration: underline; }

.guide-related { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.guide-related h2 { font-size: 1rem; color: var(--navy); margin-bottom: .8rem; }

/* Hub de categoría (#categoria/:slug) */
.category-hub { max-width: 1080px; margin: 0 auto; padding-block: .5rem 3rem; }
.category-hub-head { max-width: 68ch; margin-bottom: 1rem; }
.category-hub-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy); margin-bottom: .5rem; }
.category-hub-desc { color: var(--text-soft); font-size: .95rem; line-height: 1.6; }
.category-hub-subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.category-hub-subcat {
  font-size: .8rem; font-weight: 700; color: var(--navy); background: var(--surface-2);
  padding: .4rem .8rem; border-radius: var(--r-pill);
}
.category-hub-products { margin-bottom: 2rem; }
.category-hub-products h2 { font-size: 1.1rem; color: var(--navy); margin-bottom: 1rem; }
.category-hub-articles h2 { font-size: 1.1rem; color: var(--navy); margin-bottom: 1rem; }

/* 404 real (#/hash no reconocido) */
.view-state-notfound .view-state-icon { color: var(--orange); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.3rem; }

@media (max-width: 959px) {
  .guide-links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 719px) {
  .guide-links-grid { grid-template-columns: 1fr; }
  .guide-table { display: block; overflow-x: auto; }
}

/* =============================================================
   11. Bloque "CATÁLOGO REAL + CATEGORÍAS DINÁMICAS + OFERTAS REALES +
       COMPARACIÓN POR PLATAFORMA + UX MOBILE" (02/09/2026)
   ============================================================= */

/* --- Sección navy: franja de plataformas (sustituye a la imagen
   estática con logos de tiendas ya fuera del roadmap, §17/§18) --- */
.navy-inner { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.navy-copy { max-width: 720px; }
.eyebrow-on-navy { color: var(--on-navy-text); }
.section-title-on-navy { color: var(--white); }
.navy-sub { color: var(--on-navy-soft); font-size: 1.02rem; margin-top: .6rem; max-width: 56ch; }
.navy-benefits { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.navy-benefits li { display: flex; gap: .7rem; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: .9rem 1rem; }
.navy-benefits li > span { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); color: var(--orange); display: grid; place-items: center; }
.navy-benefits li > span svg { width: 18px; height: 18px; }
.navy-benefits li b { display: block; color: var(--white); font-size: .92rem; margin-bottom: .15rem; }
.navy-benefits li div > span { color: var(--on-navy-soft); font-size: .84rem; line-height: 1.45; }
.platform-strip { display: flex; flex-wrap: wrap; gap: .75rem; }
.platform-strip-item {
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem .6rem .7rem; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 0 4px color-mix(in srgb, var(--platform-glow, transparent) 22%, transparent);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.platform-strip-item .brand-logo, .platform-strip-item .logo-badge { flex: none; }
.platform-strip-item.is-active:hover { transform: translateY(-2px); }
.platform-strip-item.is-pending { opacity: .85; cursor: default; }
.platform-strip-name { font-weight: 800; color: var(--navy); font-size: .9rem; white-space: nowrap; }
.platform-strip-state { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-pill); padding: .18rem .5rem; white-space: nowrap; }
.platform-strip-state.is-active { background: #e6f7ee; color: #1a7a48; }
.platform-strip-state.is-pending { background: var(--surface-2); color: var(--text-mute); }
.navy-cta { display: flex; }
@media (max-width: 959px) { .navy-benefits { grid-template-columns: 1fr; } }

/* --- Categorías dinámicas: tarjeta con conteo + subcategorías (§1/§2) --- */
.cat-card { gap: .6rem; }
.cat-card-main { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; width: 100%; }
.cat-card-name { font-weight: 700; font-size: .9rem; color: var(--navy); }
.cat-card-count { font-size: .74rem; font-weight: 600; color: var(--text-mute); }
.cat-card-subs { display: flex; flex-wrap: wrap; gap: .35rem; }
.cat-card-sub {
  font-size: .72rem; font-weight: 700; color: var(--blue); background: var(--blue-soft);
  padding: .22rem .55rem; border-radius: var(--r-pill); transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.cat-card-sub:hover { background: var(--blue); color: var(--white); }
.category-hub-parent { margin-bottom: .8rem; font-size: .88rem; font-weight: 700; }
.category-hub-parent a { display: inline-flex; align-items: center; gap: .25rem; color: var(--blue); }
.category-hub-parent svg { width: 16px; height: 16px; }
.category-hub-subcat-link { display: inline-flex; align-items: center; gap: .4rem; transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.category-hub-subcat-link:hover { background: var(--blue); color: var(--white); }
.category-hub-subcat-count { font-size: .7rem; font-weight: 800; background: rgba(8,36,92,.08); border-radius: var(--r-pill); padding: .05rem .4rem; }
.category-hub-subcat-link:hover .category-hub-subcat-count { background: rgba(255,255,255,.22); }

/* --- Showcase real (temas por categoría con productos) --- */
.showcase-head-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 959px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* (≤539px .showcase-grid a 1 columna: eliminado el 10/09/2026 — ver bloque 14.) */
/* object-fit/aspect-ratio del showcase ya viven en la regla compartida
   de arriba (§2/§3, "CORRECCIÓN DE PROBLEMAS ACTUALES") — esta regla
   duplicada (y con object-fit:cover, que además la contradecía) se
   elimina en vez de mantener dos definiciones del mismo selector. */

/* --- Fecha/hora REAL de actualización de precio (§7) --- */
.price-freshness { display: inline-flex; align-items: flex-start; gap: .3rem; font-size: .74rem; color: var(--text-mute); line-height: 1.35; margin-top: .3rem; }
.price-freshness svg { width: 13px; height: 13px; flex: none; margin-top: .1rem; }
.result-card-catalog .price-freshness { font-size: .7rem; }

/* --- Entrada de comparación por tienda (§12) + nota de alcance (§11) --- */
.platform-compare-entry {
  display: flex; align-items: flex-start; gap: .7rem; margin: .9rem 0 1.1rem; padding: .85rem 1rem;
  background: var(--blue-soft); border: 1px solid #cfe0fb; border-radius: var(--r-md); color: var(--navy);
}
.platform-compare-entry > svg { width: 20px; height: 20px; flex: none; color: var(--blue); margin-top: .1rem; }
.platform-compare-entry p { margin: 0; font-size: .88rem; line-height: 1.5; }
.platform-compare-entry em { font-style: normal; font-weight: 700; color: var(--blue); }
.compare-scope-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; font-size: .88rem; color: var(--text-soft); line-height: 1.5; }
.compare-scope-note svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: .1rem; }
.compare-scroll-hint { display: none; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .8rem; font-weight: 700; color: var(--blue); }
.compare-scroll-hint svg { width: 16px; height: 16px; }
@media (max-width: 959px) { .compare-scroll-hint:not([hidden]) { display: inline-flex; } }

/* --- Buscador compacto en móvil (§16): un solo renglón, botón
   proporcionado. Corrige además el bloque gigante de las páginas de
   tienda: .platform-search-row pasa a columna en ≤719px y el
   `flex: 1 1 320px` del buscador se interpretaba como ALTO de 320px. --- */
@media (max-width: 719px) {
  .searchbar { flex-wrap: nowrap; padding: .3rem .3rem .3rem .85rem; border-radius: var(--r-pill); gap: .4rem; }
  .searchbar input { order: 0; width: auto; flex: 1 1 0; min-width: 0; padding: .45rem .1rem; font-size: .95rem; }
  .searchbar svg { order: 0; width: 17px; height: 17px; }
  .searchbar .btn { order: 0; width: auto; padding: .55rem .95rem; font-size: .84rem; border-radius: var(--r-pill); }
  .platform-search-row .searchbar.platform-search { flex: none; min-width: 0; }
  .platform-search-row { gap: .55rem; }
  .platform-cat-select, .platform-sort-select { padding: .5rem .9rem; font-size: .82rem; }
  .results-platform-head { gap: .75rem; margin-bottom: .8rem; }
  .results-platform-head h1 { font-size: 1.25rem; }
  .results-platform-head p { font-size: .84rem; }
  .view-search { margin-top: .75rem; }
  .platform-compare-entry { padding: .7rem .8rem; }
  .platform-compare-entry p { font-size: .82rem; }
}

/* --- Comparación en móvil (§14/§15): una sola tabla sincronizada,
   columnas más angostas con 3-4 productos, etiquetas que envuelven,
   encabezados compactos; nunca se oculta información — se desplaza. --- */
/* El recorte a N líneas va en .compare-col-name-text (hijo del <a>,
   nunca hijo directo del flex container — ver CompareColumnHead). */
.compare-col-name { display: block; }
.compare-col-name-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.compare-count-4 .compare-col-name-text, .compare-count-3 .compare-col-name-text { -webkit-line-clamp: 3; }
@media (max-width: 640px) {
  .compare-table th, .compare-table td { padding: .6rem .6rem; font-size: .84rem; }
  .compare-table th:first-child, .compare-table td:first-child { white-space: normal; min-width: 84px; max-width: 96px; font-size: .72rem; line-height: 1.25; padding-left: .4rem; }
  .compare-count-2 .compare-table th:not(:first-child), .compare-count-2 .compare-table td:not(:first-child) { min-width: 150px; }
  .compare-count-3 .compare-table th:not(:first-child), .compare-count-3 .compare-table td:not(:first-child) { min-width: 108px; }
  /* 4 productos en vertical: 58px de etiquetas + 4 × 86 = 402px. Entra
     completo desde 412px de ancho y deja un desplazamiento mínimo en
     360-390px (con el aviso "desliza" que ya existía). Antes eran
     136px por columna = 602px, es decir media tabla fuera de pantalla. */
  .compare-count-4 .compare-table th:not(:first-child), .compare-count-4 .compare-table td:not(:first-child) { min-width: 80px; }
  /* El % de valoraciones positivas ocupaba 3 renglones dentro de una
     cabecera de 80px ("90.0% valoraciones positivas"). Se recorta a 2
     con puntos suspensivos — el número real sigue completo, y el dato
     entero sigue en la ficha y en la fila "% Reseñas positivas" de
     esta misma tabla. */
  .compare-col-head .positive-feedback { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .66rem; line-height: 1.2; }
  .compare-col-head .not-available { font-size: .66rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .compare-col-head { padding: .7rem .5rem; gap: .25rem; }
  .compare-col-head .result-badge-row { justify-content: center; }
  .compare-col-head .platform-badge span { font-size: .68rem; }
  .compare-table .compare-col-name { font-size: .78rem; line-height: 1.25; }
  .compare-table .compare-col-name-text { -webkit-line-clamp: 3; }
  .compare-count-4 .compare-table .compare-col-name { font-size: .68rem; line-height: 1.2; }
  .compare-count-4 .compare-table th, .compare-count-4 .compare-table td { padding: .5rem .35rem; font-size: .76rem; }
  .compare-count-4 .compare-table th:first-child, .compare-count-4 .compare-table td:first-child { min-width: 58px; max-width: 62px; font-size: .66rem; padding-left: .3rem; }
  .compare-count-4 .compare-col-head { padding: .5rem .3rem; }
  .compare-count-4 .compare-col-score { display: none; } /* el dato sigue en la ficha; a 86px no cabe legible */
  .compare-count-3 .compare-table th:first-child, .compare-count-3 .compare-table td:first-child { min-width: 70px; max-width: 76px; }
  /* La foto sigue siendo el elemento dominante también en móvil: es el
     problema principal que reportó el usuario ("las imágenes son
     demasiado pequeñas, en móvil casi no se ven"). */
  .compare-th-icon, .compare-th-icon.product-thumb-img { width: 100%; max-width: 96px; height: auto; }
  .compare-count-3 .compare-th-icon, .compare-count-3 .compare-th-icon.product-thumb-img { max-width: 84px; }
  .compare-count-4 .compare-th-icon, .compare-count-4 .compare-th-icon.product-thumb-img { max-width: 72px; }
  svg.compare-th-icon { max-width: 40px; }
  .compare-col-head .rating { font-size: .72rem; }
  .compare-col-score { font-size: .7rem; }
  .compare-col-score b { font-size: .92rem; }
  .compare-col-head .btn { padding: .4rem .6rem; font-size: .74rem; }
  .compare-col-remove { width: 22px; height: 22px; top: .35rem; right: .35rem; }
  .winner-chip { display: block; margin: .15rem 0 0; }
}
/* Móvil HORIZONTAL (poca altura): aprovecha el ancho — 3-4 columnas
   completas — y reduce el alto de los encabezados para que la tabla
   se vea sin tener que desplazar la página. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  .compare-table-wrap { margin-top: .75rem; }
  .compare-table th, .compare-table td { padding: .45rem .6rem; font-size: .82rem; }
  .compare-table th:first-child, .compare-table td:first-child { min-width: 96px; font-size: .72rem; white-space: normal; }
  /* Anchos pensados para 844px de ancho útil (~800px de contenido):
     4 × 150 + 96 = 696 y 3 × 190 + 96 = 666 caben completos sin
     desplazamiento; columnas más anchas = menos saltos de línea =
     encabezados más bajos. */
  /* En horizontal el recurso escaso es el ALTO, no el ancho: con 844px
     útiles caben 4 columnas anchas completas (76 + 4 × 186 = 820), así
     que se reparte todo el ancho en vez de dejarlo sin usar. */
  .compare-count-2 .compare-table th:not(:first-child), .compare-count-2 .compare-table td:not(:first-child) { min-width: 320px; }
  .compare-count-3 .compare-table th:not(:first-child), .compare-count-3 .compare-table td:not(:first-child) { min-width: 240px; }
  .compare-count-4 .compare-table th:not(:first-child), .compare-count-4 .compare-table td:not(:first-child) { min-width: 172px; }
  .compare-col-head { padding: .45rem .45rem; gap: .15rem; }
  /* 72px de foto contra los 30px anteriores: en horizontal sobra ancho
     y la cabecera cabe igual sin empujar la tabla fuera de pantalla. */
  /* Tamaños POR CONTEO y con la misma especificidad que las reglas de
     escritorio (.compare-count-N .compare-th-icon): sin esto, la regla
     genérica de este bloque perdía contra la de escritorio, que es más
     específica, y el resultado dependía del azar en vez del diseño. */
  .compare-th-icon, .compare-th-icon.product-thumb-img { width: 100%; max-width: 120px; height: auto; }
  .compare-count-2 .compare-th-icon, .compare-count-2 .compare-th-icon.product-thumb-img { max-width: 132px; }
  .compare-count-3 .compare-th-icon, .compare-count-3 .compare-th-icon.product-thumb-img { max-width: 108px; }
  .compare-count-4 .compare-th-icon, .compare-count-4 .compare-th-icon.product-thumb-img { max-width: 92px; }
  svg.compare-th-icon { max-width: 40px; }
  .compare-viewport-note { padding: .5rem .7rem; font-size: .78rem; margin-top: .5rem; }
  .compare-count-line { font-size: .8rem; }
  .compare-table .compare-col-name { font-size: .74rem; line-height: 1.25; margin: .1rem 0; }
  .compare-table .compare-col-name-text { -webkit-line-clamp: 2; }
  .compare-col-head .rating { font-size: .7rem; }
  .compare-col-score { font-size: .68rem; }
  /* El botón "Ver ficha" del encabezado es una acción DUPLICADA (el
     nombre del producto ya enlaza a la ficha): en horizontal, donde la
     altura es el recurso escaso, se omite para que la tabla se vea de
     inmediato. Ninguna información desaparece. */
  .compare-col-head > .btn { display: none; }
  .compare-col-head .rating, .compare-col-head .positive-feedback-rating { font-size: .66rem; line-height: 1.2; }
  .compare-col-head .result-badge-row { margin: 0; }
  .view-body h1 { font-size: 1.2rem; margin-bottom: .4rem; }
  .view-toolbar-inner { min-height: 38px; }
  .view-body { padding-block: .6rem 2.5rem; }
  .compare-tray-inner { padding-block: .5rem; }
  /* En horizontal el alto es el recurso escaso: la cabecera del sitio
     ocupaba 66px de los 390px del viewport ANTES de que empezara la
     tabla. Se compacta solo aquí (nunca en vertical ni en escritorio)
     para que la comparación se vea cuanto antes. */
  :root { --nav-h: 48px; }
  .site-header .container { min-height: 48px; }
  .brand-logo-mark, .site-header .brand svg { max-height: 30px; }
  .compare-scroll-hint { margin-top: .4rem; font-size: .74rem; }
  .compare-count-line { margin-top: -.2rem; }
}
/* Dentro de la vista de comparación la bandeja flotante es redundante
   (la página tiene "Vaciar comparación" y "quitar" por producto) y en
   móvil horizontal ocupaba ~70px de 390px — se oculta solo ahí. */
html[data-view="comparativa"] .compare-tray { display: none; }

/* Header entre 960 y 1180px (02/09/2026): con el roster actual (Todas
   las tiendas · Ofertas · Guías · Amazon · Mercado Libre · AliExpress ·
   Temu, dos de ellas con "Próximamente") el nav desbordaba ~20px en
   1024px de ancho. Se compacta tipografía/espaciado y se permite que
   las entradas envuelvan antes de desbordar la página. */
@media (min-width: 960px) and (max-width: 1180px) {
  .nav-links { gap: .7rem; flex-wrap: wrap; row-gap: 0; min-width: 0; }
  .nav-links a, .nav-store-pending { font-size: .84rem; }
  .nav-store-pending em { font-size: .66rem; }
  .site-header .container { gap: .75rem; }
}
/* El panel del drawer móvil vive fuera de pantalla (translateX(100%))
   dentro de un contenedor fixed; se recorta explícitamente para que
   ningún navegador lo cuente como ancho desplazable. */
.mobile-drawer { overflow: hidden; }
@media (max-width: 640px) {
  /* Con 3-4 columnas angostas el badge de tienda muestra solo el logo
     (el nombre completo sigue en la ficha) para no recortarse. */
  .compare-count-3 .compare-col-head .platform-badge > span:not(.brand-logo):not(.logo-badge),
  .compare-count-4 .compare-col-head .platform-badge > span:not(.brand-logo):not(.logo-badge) { display: none; }
}

/* =============================================================
   14. DENSIDAD MÓVIL DE CATÁLOGO (fase responsive, 10/09/2026)
   =============================================================
   PROBLEMA REAL: en ≤719px las tres grillas del sitio caían a UNA
   columna (`.result-grid`/`.showcase-grid` a 1fr), así que una tarjeta
   con foto cuadrada + título + rating + precio + dos botones ocupaba
   prácticamente toda la pantalla: ~1 producto por viewport y una
   cantidad enorme de scroll para recorrer el catálogo.

   SOLUCIÓN: 2 columnas y una variante COMPACTA de la MISMA tarjeta.
   No hay markup nuevo ni un segundo componente — `.result-card`,
   `.showcase-card` y `.catalog-grid` siguen generándose exactamente
   igual desde js/views.js; aquí solo cambia su presentación por
   debajo del breakpoint. Por eso nada de esto puede afectar al
   escritorio: todo vive dentro de `@media (max-width: 719px)`.

   Qué se conserva en la tarjeta compacta (lo que sirve para decidir):
   foto, tienda, condición, título, calificación, precio, precio
   anterior, descuento y los dos botones.
   Qué se oculta (secundario, sigue completo en la ficha): marca,
   descripción recortada, líneas de meta, frescura de precio y
   volumen de ventas. Ningún dato se inventa ni se sustituye — solo
   se deja de pintar en este ancho.
   ============================================================= */
@media (max-width: 719px) {
  /* --- TODAS las grillas de tarjetas a 2 columnas ---
     Son cinco, no tres: las dos secciones de la home tienen contenedor
     propio en index.html (`.product-grid` = "Productos que vale la pena
     comparar", `.offer-grid` = "Ofertas que encontramos") y no
     reutilizan `.result-grid`. Dejarlas fuera fue justo el fallo que
     el usuario vio en su teléfono: el resto del sitio ya iba a 2
     columnas y esas dos seguían a pantalla completa. */
  .result-grid,
  .product-grid,
  .offer-grid,
  .showcase-grid,
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  /* Separación suficiente entre columnas para que el pulgar no active
     la tarjeta vecina (objetivo táctil): .65rem de gap + el padding
     propio de cada tarjeta dan ~18px de zona muerta entre superficies. */

  /* --- Tarjeta compacta --- */
  .result-card, .showcase-card { padding: .55rem; border-radius: var(--r-sm); min-width: 0; }
  /* Hueco de foto 4/3 en vez de 1/1: en una tarjeta de media pantalla,
     el cuadrado se comía ~178px de alto y era el principal culpable de
     que solo cupiera un producto por pantalla. La imagen NO se recorta
     ni se deforma — el object-fit:contain heredado la centra dentro del
     hueco (letterbox), así que se sigue viendo el producto completo. */
  .result-thumb, .showcase-thumb { aspect-ratio: 3 / 2; margin-bottom: .4rem; border-radius: var(--r-sm); }

  .result-card .result-badge-row { gap: .25rem; margin-bottom: .25rem; }
  .result-card .platform-badge { font-size: .64rem; padding: .12rem .4rem .12rem .26rem; gap: .24rem; margin-bottom: 0; max-width: 100%; }
  .result-card .platform-badge .brand-logo svg, .result-card .platform-badge .logo-badge svg { max-height: 12px; }

  .result-name, .showcase-name {
    font-size: .8rem; line-height: 1.3; margin-bottom: .25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .result-rating-row { gap: .3rem; margin-bottom: .25rem; }
  .result-rating-row .rating, .result-rating-row .positive-feedback { font-size: .72rem; }
  .result-classify { font-size: .62rem; padding: .1rem .35rem; }

  /* Precio: el dato que más pesa en la decisión, se mantiene grande. */
  .result-price-row { gap: .35rem; margin-bottom: .15rem; }
  .result-price-row .price { font-size: 1.02rem; }
  .result-price-row .price-old { font-size: .74rem; }
  .discount-chip, .onsale-tag { font-size: .64rem; padding: .12rem .4rem; }

  /* Secundarios: se ocultan por espacio, nunca se falsean.
     Todos siguen visibles completos en la ficha del producto. */
  .result-card .result-brand,
  .result-card .result-desc,
  .result-card .price-freshness,
  .result-card .result-meta-line,
  .result-card .result-sales-count,
  .result-card .result-recent-sales,
  /* Chips de características: 95px de alto medidos en la validación
     del 10/09/2026, en una tarjeta de media pantalla. Es justo el tipo
     de detalle que se lee en la ficha, no al explorar. */
  .result-card .result-features { display: none; }
  /* La fila de insignias (tienda + condición) envolvía a 2 renglones
     cuando el producto trae "NUEVO": se mantiene en uno solo. */
  .result-card .result-badge-row { flex-wrap: nowrap; overflow: hidden; }
  .result-card .condition-tag { flex: none; font-size: .62rem; padding: .12rem .35rem; }
  /* El % de valoraciones positivas (AliExpress) ocupaba dos renglones
     completos en una tarjeta de media pantalla ("83.3% valoraciones
     positivas"). Se recorta a un renglón con puntos suspensivos: el
     dato sigue siendo el real, solo deja de envolver. */
  /* text-overflow NO funciona sobre un contenedor flex (que es lo que
     .positive-feedback es por defecto), por eso el texto se cortaba a
     hueso: "83.3% valoraciones positi". Con display:block el icono
     sigue en línea y los puntos suspensivos sí aparecen. */
  .result-card .positive-feedback { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
  .result-card .positive-feedback svg { vertical-align: -2px; margin-right: .15rem; }
  /* La calificación cabe en un renglón; el conteo de reseñas
     ("· 74,804 reseñas") desbordaba la tarjeta y quedaba cortado sin
     puntos suspensivos. Se recorta con ellipsis en vez de cortarse. */
  .result-card .rating { flex-wrap: nowrap; min-width: 0; }
  .result-card .rating > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .result-card .stars { flex: none; }
  /* Chip sobre la foto: no puede desbordarla. */
  .result-card .result-deal-chip, .result-card .result-video-chip { max-width: calc(100% - .8rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* "Calificación no disponible" también a un renglón. */
  .result-card .not-available { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  /* 11/09/2026: "En oferta" ya NO se oculta en móvil. Antes era un
     texto redundante junto al % de descuento; ahora es el botón con el
     color de la tienda y es su señal de identidad en la tarjeta. Se
     mantiene visible y se compacta proporcionalmente. */
  .result-card .onsale-tag { margin-top: .3rem; font-size: .68rem; padding: .28rem .62rem .28rem .48rem; gap: .32rem; }
  .result-card .onsale-tag-ico { width: 13px; height: 13px; }

  /* Acciones en UNA sola fila. Apiladas ocupaban 91px de los 391px de
     la tarjeta — el mayor consumo después de la foto — y eran lo que
     impedía que entraran 4 productos en una pantalla. Lado a lado
     siguen midiendo 34px de alto real (cómodas de tocar) pero cuestan
     36px en total en vez de 91px. */
  .result-card .result-actions, .showcase-card .result-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: .28rem; margin-top: .4rem;
  }
  .result-card .result-actions .btn, .showcase-card .result-actions .btn {
    width: 100%; min-width: 0; padding: .42rem .3rem; font-size: .7rem; min-height: 34px; border-radius: var(--r-sm);
    gap: .22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .result-card .result-actions .btn svg, .showcase-card .result-actions .btn svg { width: 12px; height: 12px; flex: none; }
  /* Si la tarjeta no puede comparar (capability de la tienda), el único
     botón ocupa toda la fila en vez de dejar media vacía. */
  .result-card .result-actions > :only-child, .showcase-card .result-actions > :only-child { grid-column: 1 / -1; }

  /* --- El bloque "vale la pena comparar" usa .showcase-card (otro
     componente), así que necesita las mismas reglas de una línea; sin
     esto sus tarjetas quedaban 2 renglones más altas que las demás. --- */
  .showcase-card .result-rating-row { gap: .3rem; margin-bottom: .25rem; }
  .showcase-card .rating { flex-wrap: nowrap; min-width: 0; font-size: .72rem; }
  .showcase-card .rating > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .showcase-card .stars { flex: none; }
  .showcase-card .positive-feedback { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
  .showcase-card .positive-feedback svg { vertical-align: -2px; margin-right: .15rem; }
  .showcase-card .not-available { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  /* El chip de clasificación ("Excelente"/"Muy bueno") es un renglón
     entero que repite lo que ya dice la calificación de al lado. */
  .showcase-card .result-classify { display: none; }
  .showcase-card .brand-logo { max-height: 16px; }

  /* Reparto medido, no a ojo: en una tarjeta de 170px la fila de
     acciones tiene 150px útiles. Con `auto 1fr`, "Comparar" se quedaba
     80px y a "Ver producto" (72px de contenido) solo le tocaban 66 →
     se recortaba. Dos columnas iguales dan 75px cada una y ambos
     caben; el cuerpo se baja a .66rem para tener margen en los
     teléfonos más angostos. */
  .result-card .result-actions .btn, .showcase-card .result-actions .btn { font-size: .66rem; padding: .4rem .25rem; }

  .result-fav { width: 30px; height: 30px; }
  .result-fav svg { width: 15px; height: 15px; }
  .result-deal-chip, .result-video-chip { font-size: .62rem; padding: .16rem .4rem; }

  /* El grid de ofertas comparte la tarjeta, así que hereda todo lo de
     arriba; solo se ajusta su separación superior. */
  .ofertas-grid { gap: .65rem; }
  /* Skeleton al mismo ritmo, para que no salte al llegar los datos. */
  .result-card-skeleton { padding: .55rem; gap: .35rem; }
}

/* Teléfonos muy angostos (≤359px: iPhone SE y similares). Se MANTIENEN
   las 2 columnas — bajar a 1 devolvería el problema original — y solo
   se aprieta la tipografía lo justo para que nada se corte. */
@media (max-width: 359px) {
  .result-grid, .product-grid, .offer-grid, .showcase-grid, .catalog-grid { gap: .5rem; }
  .result-card, .showcase-card { padding: .45rem; }
  .result-name, .showcase-name { font-size: .76rem; }
  .result-price-row .price { font-size: .95rem; }
  .result-card .result-actions .btn, .showcase-card .result-actions .btn { font-size: .7rem; padding: .44rem .35rem; }
  .result-card .platform-badge { font-size: .64rem; }
}

/* =============================================================
   TIENDAS AFILIADAS (11/09/2026)
   Panel oscuro que sustituye la franja horizontal con scroll donde
   una tienda "Proximamente" se veia igual de disponible que una
   activa. Lo genera main.js (TiendasPanel) desde el roster real.
   12/09/2026: el panel sale del hero y pasa a su propia seccion, y el
   marco verde deja de ser un color plano — respira (ver
   .tiendas-main mas abajo). Es la unica animacion continua del sitio y
   se apaga entera con prefers-reduced-motion.
   ============================================================= */
/* Arriba, un aire fijo y pequeño (no escala con el ancho: es lo que
   hacía crecer el hueco en pantallas grandes). Abajo, el de siempre. */
.tiendas-section { padding-block: 1.1rem clamp(2rem, 4.5vw, 3.25rem); }
.hero-stores { margin-top: 0; }

.tiendas-panel {
  --tp-neon: #22e06a;
  grid-template-rows: auto 1fr auto;
  --tp-ink: #eaf2ff;
  --tp-dim: #9db4d8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(272px, 26%, 330px);
  gap: 1.1rem 1.4rem;
  padding: 1.35rem 1.4rem 1.1rem;
  border-radius: 22px;
  background:
    radial-gradient(120% 130% at 12% 0%, #123163 0%, transparent 55%),
    linear-gradient(150deg, #0b1f45 0%, #071531 60%, #050f26 100%);
  box-shadow: 0 18px 44px rgba(4, 12, 32, .42);
  color: var(--tp-ink);
  overflow: hidden;
}

/* ---- Columna principal: marco neon ---- */
.tiendas-main {
  grid-column: 1; grid-row: 2;
  min-width: 0;
  border: 2px solid color-mix(in srgb, var(--tp-neon) 62%, transparent);
  border-radius: 20px;
  padding: 1rem 1.05rem 1.05rem;
  box-shadow: 0 0 0 1px rgba(34, 224, 106, .10), 0 0 26px -6px rgba(34, 224, 106, .45), inset 0 0 30px -18px rgba(34, 224, 106, .5);
  background: linear-gradient(180deg, rgba(12, 34, 72, .55), rgba(6, 18, 44, .35));
  /* El marco RESPIRA (12/09/2026, a peticion del usuario: "que brille,
     que no sea un color estatico"). Solo cambian el color del borde y
     el halo — nunca el tamano ni la posicion, asi que el texto no se
     mueve ni un pixel y no hay reflow: la animacion corre en el
     compositor. 4,5 s de ida y vuelta, lo bastante lento para que se
     lea como un latido y no como un parpadeo. */
  animation: tiendasLatido 4.5s ease-in-out infinite;
}
@keyframes tiendasLatido {
  0%, 100% {
    border-color: color-mix(in srgb, var(--tp-neon) 48%, transparent);
    box-shadow: 0 0 0 1px rgba(34, 224, 106, .08), 0 0 20px -8px rgba(34, 224, 106, .35), inset 0 0 30px -20px rgba(34, 224, 106, .35);
  }
  50% {
    border-color: color-mix(in srgb, var(--tp-neon) 95%, transparent);
    box-shadow: 0 0 0 1px rgba(34, 224, 106, .22), 0 0 46px -4px rgba(34, 224, 106, .75), inset 0 0 34px -14px rgba(34, 224, 106, .65);
  }
}
/* El mismo latido, mas discreto, en el recuadro del CTA: los dos marcos
   verdes laten a la vez porque comparten duracion y retardo. */
.tiendas-cta { animation: tiendasLatidoSuave 4.5s ease-in-out infinite; }
@keyframes tiendasLatidoSuave {
  0%, 100% { border-color: color-mix(in srgb, var(--tp-neon) 42%, transparent); box-shadow: 0 0 16px -10px rgba(34, 224, 106, .35); }
  50% { border-color: color-mix(in srgb, var(--tp-neon) 80%, transparent); box-shadow: 0 0 30px -6px rgba(34, 224, 106, .6); }
}
/* Quien pide menos movimiento se queda con el marco encendido fijo, no
   con uno apagado: el brillo es parte del diseno, no un adorno. */
@media (prefers-reduced-motion: reduce) {
  .tiendas-main, .tiendas-cta { animation: none; }
}

.tiendas-head {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .85rem;
  margin: 0; align-items: center; align-self: end;
}
.tiendas-head-ico { grid-row: 1 / span 2; width: 46px; height: 46px; color: var(--tp-neon); stroke-width: 1.9; filter: drop-shadow(0 0 10px rgba(34, 224, 106, .6)); }
.tiendas-head-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 900; letter-spacing: .02em; line-height: 1.05; color: #fff; }
.tiendas-head-title i { font-style: normal; color: var(--tp-neon); text-shadow: 0 0 14px rgba(34, 224, 106, .55); }
.tiendas-head > span { font-size: .92rem; color: var(--tp-dim); }

/* ---- Tarjetas de tienda ----
   Una sola forma, la de los botones de referencia: PASTILLA HORIZONTAL
   con todo en una fila ->  [ marca ] [ Nombre ] [ ACTIVA ] [ > ]
   Las activas van en 2 columnas (~370 px cada una, el ancho nativo de
   la referencia); las "Proximamente" repiten la misma pastilla en
   blanco, mas baja y sin glow, en la columna lateral.
   ---- */
.tiendas-activas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

.tienda-card {
  --tienda-tint: #0b5ed7;
  --tienda-bg: #0b5ed7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: .5rem;
  height: 74px; padding: 0 .5rem 0 .45rem;
  border-radius: 999px; text-decoration: none;
  border: 2px solid color-mix(in srgb, var(--tienda-tint) 78%, transparent);
  /* --tienda-fill / --tienda-ink los pone main.js (STORE_SKIN) copiando
     el acabado de cada boton de referencia. Sin ellos, acabado generico. */
  background: var(--tienda-fill, linear-gradient(135deg,
      color-mix(in srgb, var(--tienda-bg) 8%, #fff) 0%,
      color-mix(in srgb, var(--tienda-bg) 24%, #fff) 100%));
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--tienda-tint) 75%, transparent), 0 6px 18px rgba(3, 10, 28, .35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.tienda-card:hover, .tienda-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 32px -2px color-mix(in srgb, var(--tienda-tint) 92%, transparent), 0 10px 24px rgba(3, 10, 28, .4);
}
.tienda-card-marca {
  display: block; flex: none; width: 54px; height: 54px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 8px rgba(3, 10, 28, .22);
}
.tienda-card-marca svg { display: block; width: 100%; height: 100%; }
/* Lenovo no tiene marca circular: su logotipo es el recuadro rojo
   apaisado. Lienzo 74x40 (ver STORE_MARKS), sin aro y con su propio
   ancho para que no se deforme ni se recorte. */
.tienda-card-marca[data-marca="lenovo"] { width: 92px; height: 50px; border-radius: 6px; box-shadow: none; }
.tienda-soon-marca[data-marca="lenovo"] { width: 62px; height: 34px; border-radius: 4px; }
/* Tienda sin marca cuadrada propia: cae al wordmark de manifest.js. */
.tienda-card-marca.es-wordmark {
  width: auto; min-width: 54px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 .5rem; background: #fff;
}
.tienda-card-marca.es-wordmark .brand-logo { filter: none; }
.tienda-card-nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(.82rem, 1.1vw, 1rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--tienda-ink, #0a1f47); line-height: 1.1;
}
.tienda-card-badge {
  display: inline-flex; align-items: center; gap: .28rem; flex: none;
  height: 30px; padding: 0 .7rem 0 .55rem; border-radius: 999px;
  background: linear-gradient(180deg, #2ee271, #14a94f);
  color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20, 169, 79, .45);
}
.tienda-card-badge-ico { width: 14px; height: 14px; stroke-width: 3.4; }

/* ---- Tienda con la ENTRADA DESACTIVADA (entryDisabled) ----
   Ocupa el mismo sitio y el mismo tamano que una activa: sigue
   anunciada. Lo que cambia es que no es un enlace -- se apaga el color
   de la tienda, se quita el brillo y el cursor deja de sugerir clic,
   para que nadie la pulse esperando entrar. */
.tienda-card--off {
  cursor: default;
  filter: grayscale(.85) opacity(.72);
  box-shadow: 0 4px 12px rgba(3, 10, 28, .22);
  border-color: rgba(10, 31, 71, .22);
}
.tienda-card--off:hover, .tienda-card--off:focus-visible {
  transform: none;
  box-shadow: 0 4px 12px rgba(3, 10, 28, .22);
}
.tienda-card-badge--off {
  background: linear-gradient(180deg, #9fb0c9, #74839b);
  box-shadow: none;
}
.tienda-card-go {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tienda-go-bg, #fff); color: var(--tienda-go-ink, var(--tienda-tint));
  box-shadow: 0 2px 8px rgba(3, 10, 28, .28);
}
.tienda-card-go svg { width: 15px; height: 15px; stroke-width: 3.2; }

/* ---- CTA ---- */
.tiendas-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  margin-top: .85rem; padding: .8rem .95rem;
  border: 2px solid color-mix(in srgb, var(--tp-neon) 55%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 30, 66, .6), rgba(6, 18, 44, .4));
  box-shadow: 0 0 20px -8px rgba(34, 224, 106, .5);
}
.tiendas-cta-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .8rem; margin: 0; align-items: center; }
.tiendas-cta-text b { white-space: nowrap; }
.tiendas-cta-ico { grid-row: 1 / span 2; width: 34px; height: 34px; color: var(--tp-neon); filter: drop-shadow(0 0 8px rgba(34, 224, 106, .55)); }
.tiendas-cta-text b { font-size: clamp(1rem, 1.6vw, 1.22rem); font-weight: 900; color: #fff; letter-spacing: .01em; }
.tiendas-cta-text b i { font-style: normal; color: var(--tp-neon); }
.tiendas-cta-text > span { font-size: .88rem; color: var(--tp-dim); }
.tiendas-perks { display: flex; gap: .85rem; list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 1px solid rgba(157, 180, 216, .28); }
.tiendas-perk { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--tp-dim); line-height: 1.25; }
.tiendas-perk b { display: block; color: #fff; font-weight: 700; font-size: .77rem; white-space: nowrap; }
.tiendas-perk-ico { width: 22px; height: 22px; flex: none; color: #7fb0ff; }

/* ---- Proximamente ---- */
.tiendas-soon {
  grid-column: 2; grid-row: 1 / span 2; min-width: 0;
  padding-left: 1.2rem;
  border-left: 1px solid rgba(157, 180, 216, .2);
}
.tiendas-soon-head { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; margin: 0 0 .7rem; align-items: center; }
.tiendas-soon-ico { grid-row: 1 / span 2; width: 30px; height: 30px; color: #ffc93d; }
.tiendas-soon-head b { font-size: 1.15rem; font-weight: 900; color: #ffc93d; letter-spacing: .02em; }
.tiendas-soon-head span { font-size: .82rem; color: var(--tp-dim); }
.tiendas-soon-list { display: grid; gap: .5rem; }

/* Misma pastilla que la activa, en blanco y mas baja. */
.tienda-soon-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: .4rem;
  height: 56px; padding: 0 .5rem 0 .4rem;
  border-radius: 999px; cursor: default;
  background: #fff; border: 2px solid rgba(10, 31, 71, .14);
  box-shadow: 0 4px 12px rgba(3, 10, 28, .22);
}
.tienda-soon-marca { display: block; flex: none; width: 38px; height: 38px; border-radius: 50%; }
.tienda-soon-marca svg { display: block; width: 100%; height: 100%; }
.tienda-soon-marca.es-wordmark { width: auto; min-width: 38px; height: 30px; border-radius: 999px; display: grid; place-items: center; }
.tienda-soon-marca.es-wordmark .brand-logo { filter: none; }
.tienda-soon-nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .88rem; font-weight: 800; color: #0a1f47; line-height: 1.1;
}
.tienda-soon-badge {
  flex: none; display: inline-flex; align-items: center; height: 24px;
  padding: 0 .55rem; border-radius: 999px;
  background: #e8f0fd; color: #2a4d86;
  font-size: .58rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.tienda-soon-go { display: grid; place-items: center; width: 20px; height: 20px; color: #0a1f47; flex: none; }
.tienda-soon-go svg { width: 16px; height: 16px; stroke-width: 3; }

/* ---- Pie ---- */
.tiendas-pie {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem 1rem; list-style: none; margin: .25rem 0 0; padding: .85rem 0 0;
  border-top: 1px solid rgba(157, 180, 216, .18);
}
.tiendas-pie-item { display: flex; align-items: center; gap: .55rem; font-size: .78rem; color: var(--tp-dim); line-height: 1.3; }
.tiendas-pie-item b { display: block; color: #fff; font-weight: 700; font-size: .85rem; }
.tiendas-pie-ico { width: 26px; height: 26px; flex: none; color: #6ea8ff; }

/* ---- Tablet / movil horizontal: el panel pasa a una sola columna ---- */
@media (max-width: 1040px) {
  .tiendas-panel { grid-template-columns: minmax(0, 1fr); }
  .tiendas-soon { grid-column: 1; grid-row: auto; padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid rgba(157, 180, 216, .2); }
  .tiendas-soon-list { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
  .tienda-soon-badge { font-size: .54rem; padding: 0 .45rem; }
  .tiendas-cta { grid-template-columns: minmax(0, 1fr); }
  .tiendas-perks { padding: .7rem 0 0; border-left: 0; border-top: 1px solid rgba(157, 180, 216, .22); flex-wrap: wrap; }
}

/* Por debajo de 760 px la pastilla horizontal ya no cabe entera a media
   anchura, pero la rejilla de DOS columnas si: lo que cambia es la
   tarjeta, que pasa de fila (marca | nombre | badge | flecha) a bloque
   apilado (marca arriba, nombre debajo, y badge + flecha en la ultima
   linea). Asi caben dos tiendas por fila en movil sin apretar el nombre
   ni esconder el badge, que es quien dice si la tienda esta disponible.
   No hace falta tocar el HTML: las cuatro piezas ya son hijas directas
   de la rejilla, solo se recolocan por areas. */
@media (max-width: 760px) {
  .tiendas-activas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tienda-card {
    grid-template-columns: auto auto;
    grid-template-areas:
      "marca  marca"
      "nombre nombre"
      "badge  go";
    justify-content: center; align-content: center; justify-items: center;
    height: auto; min-height: 132px;
    padding: .7rem .5rem .62rem;
    border-radius: 18px;
    gap: .42rem .34rem;
    text-align: center;
  }
  .tienda-card-marca { grid-area: marca; }
  .tienda-card-nombre {
    grid-area: nombre;
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.15;
    /* Dos lineas como maximo: "Mercado Libre" parte en dos, y un nombre
       largo se recorta con puntos suspensivos en vez de estirar la
       tarjeta y descuadrar la fila. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .tienda-card-badge { grid-area: badge; }
  .tienda-card-go { grid-area: go; }
}

/* ---- Movil vertical: mismas pastillas, algo mas compactas ---- */
@media (max-width: 620px) {
  .tiendas-panel { padding: 1.1rem .85rem .9rem; border-radius: 18px; gap: .9rem; }
  .tiendas-main { padding: .85rem .7rem .9rem; border-radius: 16px; }
  .tiendas-head-ico { width: 38px; height: 38px; }
  .tiendas-activas { gap: .55rem; }
  .tienda-card { min-height: 128px; gap: .38rem .3rem; padding: .62rem .45rem .55rem; }
  .tienda-card-marca { width: 48px; height: 48px; }
  .tienda-card-marca[data-marca="lenovo"] { width: 84px; height: 46px; }
  .tienda-card-nombre { font-size: .88rem; }
  .tiendas-cta-text b { white-space: normal; }
  .tiendas-cta { padding: .75rem .8rem; }
  .tiendas-cta-text { grid-template-columns: auto 1fr; }
  .tiendas-perks { gap: .55rem; flex-direction: column; }
  .tiendas-soon-list { grid-template-columns: minmax(0, 1fr); }
  .tiendas-pie { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
}

/* Movil estrecho (<=460 px): la tarjeta baja de ~300 px y hay que
   apretar marca, badge y flecha para que el nombre quepa ENTERO; el
   badge es lo ultimo que se toca porque es quien dice si la tienda
   esta disponible.
   el badge, que es el que dice si la tienda esta disponible. */
@media (max-width: 460px) {
  .tienda-card { min-height: 120px; padding: .55rem .35rem .5rem; gap: .34rem .26rem; }
  .tienda-card-marca { width: 44px; height: 44px; }
  .tienda-card-marca[data-marca="lenovo"] { width: 74px; height: 40px; }
  .tienda-card-nombre { font-size: .8rem; }
  .tienda-card-badge-ico { width: 12px; height: 12px; }
  .tienda-soon-marca { width: 34px; height: 34px; }
  .tienda-soon-nombre { font-size: .82rem; }
  .tienda-card-badge { height: 27px; padding: 0 .5rem 0 .42rem; font-size: .64rem; }
  .tienda-card-go { width: 28px; height: 28px; }
}
/* ---- Movil y tablet (28/09/2026): MOSAICO COMPACTO ----
   A peticion del usuario las tarjetas "gorditas" pasan a cuadritos tipo
   app: marca arriba, nombre debajo, y el badge ACTIVA se vuelve un check
   verde sobre la esquina (dice lo mismo en mucho menos sitio; el texto
   sigue ahi para lectores de pantalla). La computadora (>1040 px) no
   cambia.
   "Ver todas": como maximo 3 filas en vertical y 2 en horizontal. Si hay
   mas tiendas, la ultima casilla es el boton (main.js pone vt-9 / vt-12 /
   vt-14 segun cuantas haya y "abierto" al pulsarlo). Los rangos van
   separados para que la regla de un tamano no se cuele en otro. */
.tienda-vertodas { display: none; }
@media (max-width: 1040px) {
  .tiendas-activas { gap: .45rem; }
  .tienda-card {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marca" "nombre";
    justify-items: center; align-content: center; justify-content: stretch;
    height: auto; min-height: 0;
    padding: .5rem .3rem .45rem; border-radius: 16px; gap: .3rem;
    text-align: center;
  }
  .tienda-card-marca { grid-area: marca; width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 6px rgba(3, 10, 28, .22); }
  .tienda-card-marca[data-marca="lenovo"] { width: 58px; height: 32px; box-shadow: none; }
  .tienda-card-marca.es-wordmark { min-width: 38px; height: 30px; }
  .tienda-card-nombre {
    grid-area: nombre; font-size: .72rem; line-height: 1.1;
    white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    min-height: 2.2em; align-content: center;
  }
  .tienda-card-go { display: none; }
  .tienda-card-badge {
    position: absolute; right: 6px; top: 6px;
    width: 17px; height: 17px; padding: 0; gap: 0; justify-content: center;
    font-size: 0; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  }
  .tienda-card-badge-ico { width: 11px; height: 11px; stroke-width: 3.6; }
  .tienda-vertodas {
    --tienda-tint: #22e06a;
    cursor: pointer; font: inherit; color: #fff;
    background: rgba(12, 34, 72, .55);
    border: 2px dashed color-mix(in srgb, #22e06a 70%, transparent);
    box-shadow: 0 0 18px -6px rgba(34, 224, 106, .6);
  }
  .tienda-vertodas:hover, .tienda-vertodas:focus-visible { box-shadow: 0 0 26px -4px rgba(34, 224, 106, .85); }
  .tienda-vertodas-mas {
    grid-area: marca; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(34, 224, 106, .14); border: 2px solid #22e06a; color: #22e06a;
    font-size: 26px; font-weight: 700; line-height: 1;
  }
  .tienda-vertodas-txt { grid-area: nombre; font-size: .72rem; font-weight: 800; line-height: 1.1; min-height: 2.2em; display: grid; align-content: center; }
  .tienda-vertodas-txt small { display: block; font-size: .62rem; font-weight: 600; color: #9db4d8; }
}
@media (min-width: 761px) and (max-width: 1040px) {
  .tiendas-activas { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .tiendas-activas.vt-14 > .tienda-vertodas { display: grid; }
  .tiendas-activas.vt-14:not(.abierto) > .tienda-card:not(.tienda-vertodas):nth-child(n+14) { display: none; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .tiendas-activas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiendas-activas.vt-12 > .tienda-vertodas { display: grid; }
  .tiendas-activas.vt-12:not(.abierto) > .tienda-card:not(.tienda-vertodas):nth-child(n+12) { display: none; }
}
@media (max-width: 600px) {
  .tiendas-activas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiendas-activas.vt-9 > .tienda-vertodas { display: grid; }
  .tiendas-activas.vt-9:not(.abierto) > .tienda-card:not(.tienda-vertodas):nth-child(n+9) { display: none; }
}
/* =============================================================
   FICHA DE PRODUCTO (11/09/2026) — cuatro zonas en vez de una
   columna interminable. Medido antes del cambio: el boton de
   compra caia a 2,6 pantallas en escritorio, 3,9 en movil
   vertical y 7,4 en movil horizontal. Ahora vive en la cabecera.

   Un solo DOM para el detalle: .pdp-tabs coloca las cabeceras en
   UNA fila cuando hay sitio (pestañas) y las apila cuando no
   (acordeon). No hay markup duplicado ni contenido escondido.
   ============================================================= */
.pdp { display: grid; gap: clamp(1.1rem, 2vw, 1.8rem); }

/* ---- Zona 1: galeria + compra (+ valoracion en escritorio) ---- */
.pdp-top {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: clamp(1rem, 2.2vw, 2.1rem);
  align-items: start;
}
.pdp-media { min-width: 0; position: sticky; top: calc(var(--nav-h) + 1rem); }
.pdp-buy { min-width: 0; display: grid; align-content: start; gap: 0; }
.pdp-score { min-width: 0; display: grid; align-content: start; gap: 0; }
.pdp-title { font-size: clamp(1.1rem, 1.9vw, 1.5rem); color: var(--navy); margin-top: .45rem; line-height: 1.28; }
.pdp-buy .product-view-brand { margin-top: .25rem; }
.pdp-buy .rating { margin-top: .45rem; }
.pdp-price { margin-top: .8rem; }
/* La valoracion ya trae su propio margen pensado para ir suelta en
   mitad de la pagina; aqui abre la columna, asi que se resetea. */
.pdp-score .ce-score-block, .pdp-score .ce-editorial { margin-top: 0; }
.pdp-score .ce-editorial { margin-top: .9rem; }

/* Datos comerciales en una fila compacta: condicion, disponibilidad
   y envio. Se omite entera si la tienda tiene el precio oculto — no
   se inventa un "No disponible". */
.pdp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .55rem .9rem; margin-top: .9rem; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white);
}
.pdp-fact { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; color: var(--text-soft); line-height: 1.3; min-width: 0; }
.pdp-fact b { display: block; color: var(--navy); font-size: .78rem; font-weight: 700; }
.pdp-fact-ico { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: 1px; }

/* ---- Las dos acciones, juntas y arriba ---- */
.pdp-actions { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1.5fr); gap: .6rem; margin-top: 1rem; }
.pdp-actions .btn-compare-toggle { margin-bottom: 0; white-space: nowrap; }
/* El CTA de afiliado era una pastilla chica: en la cabecera tiene que
   leerse como la accion principal, asi que toma el tamaño del boton
   grande conservando su naranja de marca. */
.pdp-actions .btn-affiliate-badge {
  width: 100%; min-height: 52px; padding: .55rem 1rem .55rem .6rem;
  font-size: .92rem; border-radius: var(--r-pill);
}
.pdp-actions .cta-buy-btn { min-height: 52px; }
.pdp-buy .cta-note, .pdp-buy .cta-disclosure { margin-top: .55rem; }

/* ---- Zona 3: pestañas (con sitio) / acordeon (sin sitio) ---- */
.pdp-tabs {
  display: grid; grid-template-columns: repeat(var(--pdp-tabs, 5), minmax(0, 1fr));
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.pdp-tab {
  grid-row: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .9rem .6rem; background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: .86rem; font-weight: 700; color: var(--text-mute);
  cursor: pointer; min-width: 0; transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.pdp-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdp-tab:hover { color: var(--navy); }
.pdp-tab.is-open { color: var(--blue); border-bottom-color: var(--blue); background: var(--blue-soft); }
.pdp-tab-ico { width: 17px; height: 17px; flex: none; }
.pdp-tab-chev { display: none; }
.pdp-panel { grid-row: 2; grid-column: 1 / -1; display: none; padding: 1.2rem 1.25rem 1.4rem; border-top: 1px solid var(--line); }
.pdp-panel.is-open { display: block; }
.pdp-panel > h2:first-child, .pdp-panel > .product-view-desc { margin-top: 0; }
.pdp-panel .avail-ship-row { margin-top: 0; }

/* ---- Barra fija de acciones (solo pantallas chicas) ---- */
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .5rem;
  padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(3, 10, 28, .12);
}
.pdp-sticky[hidden] { display: none; }
.pdp-sticky-price { font-size: 1.05rem; font-weight: 800; color: var(--navy); white-space: nowrap; }
.pdp-sticky .btn { min-height: 44px; }
.pdp-sticky-cmp { padding: 0 .7rem; font-size: .78rem; white-space: nowrap; }
.pdp-sticky-buy { width: 100%; font-size: .82rem; padding: 0 .7rem; }
.pdp-sticky-buy .cta-buy-btn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (sustituida mas abajo por la version que tambien mira la altura) */

/* ---- Tablet / movil horizontal: dos columnas, valoracion debajo ---- */
@media (max-width: 1100px) {
  .pdp-top { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); }
  .pdp-score { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .9rem; }
  .pdp-score .ce-editorial { margin-top: 0; }
}
/* Pantallas muy bajas (movil horizontal): la galeria pegada arriba se
   comeria media pantalla al hacer scroll, asi que deja de ser sticky. */
@media (max-height: 560px) { .pdp-media { position: static; } }

/* ---- Movil vertical: una columna y barra fija ---- */
@media (max-width: 719px) {
  .pdp-top { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pdp-media { position: static; }
  .pdp-actions { grid-template-columns: minmax(0, 1fr); }
  .pdp-actions .btn-compare-toggle { width: 100%; }
  .pdp-facts { grid-template-columns: minmax(0, 1fr); }
  /* Acordeon: cabecera y panel en orden de documento. */
  .pdp-tabs { grid-template-columns: minmax(0, 1fr); }
  .pdp-tab {
    grid-row: auto; justify-content: flex-start; padding: .95rem 1rem;
    border-bottom: 1px solid var(--line); border-bottom-width: 1px;
    font-size: .92rem; color: var(--navy);
  }
  .pdp-tab.is-open { background: transparent; color: var(--navy); border-bottom-color: var(--line); }
  .pdp-tab-ico { color: var(--blue); }
  .pdp-tab-chev { display: block; width: 16px; height: 16px; margin-left: auto; flex: none; color: var(--text-mute); transition: transform .2s var(--ease-out); }
  .pdp-tab.is-open .pdp-tab-chev { transform: rotate(90deg); }
  .pdp-panel { grid-row: auto; grid-column: auto; border-top: 0; padding: .25rem 1rem 1.2rem; }
  /* Aire al final para que la barra fija nunca tape el ultimo bloque. */
  #view-app:has(.pdp-sticky) { padding-bottom: 4.6rem; }
}

/* Ajustes medidos sobre el render real (11/09/2026):
   - En movil vertical la galeria cuadrada se comia la primera pantalla
     entera y el titulo caia en y=685 de 844. Con tope de altura el
     titulo y el precio entran en la primera pantalla.
   - En la barra fija, "Ver en <tienda>" se cortaba con puntos
     suspensivos: se quita el logo (que ya esta en el boton grande de
     arriba) y, en pantallas muy angostas, la etiqueta de Comparar cede
     el sitio al icono. El boton conserva su aria-label. */
@media (max-width: 719px) {
  .pdp-media .gallery-main { aspect-ratio: auto; height: min(46vh, 330px); }
  .pdp-media .gallery-thumbs { margin-top: .6rem; }
  .pdp-media .gallery-thumb { width: 54px; height: 54px; }
}
@media (max-height: 560px) {
  .pdp-media .gallery-main { aspect-ratio: auto; height: min(62vh, 240px); }
}
.pdp-sticky-buy .cta-buy-logo-chip { display: none; }
.pdp-sticky-buy { justify-content: center; }
@media (max-width: 430px) {
  .pdp-sticky { gap: .4rem; padding-left: .55rem; padding-right: .55rem; }
  .pdp-sticky-price { font-size: .98rem; }
  /* Boton de comparar a solo icono: font-size:0 esconde el texto que
     escribe updateCompareTrayUI() (es un nodo de texto suelto, no se
     puede ocultar de otra forma) y el icono conserva su tamaño porque
     lo lleva en px. El estado sigue anunciado por aria-pressed y el
     boton conserva su aria-label. */
  .pdp-sticky-cmp { width: 44px; padding: 0; justify-content: center; font-size: 0; overflow: hidden; }
  .pdp-sticky-cmp svg { width: 18px; height: 18px; margin: 0; flex: none; }
  .pdp-sticky-cmp[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
}

/* Ajustes medidos sobre el render real, 2a pasada (11/09/2026):
   - El boton Comparar puede llevar la etiqueta larga "Comparar con
     otros de <tienda>" (cuando la tienda solo compara entre sus
     propios productos): con nowrap se cortaba y empujaba el boton de
     compra fuera de la tarjeta. Ahora las dos acciones reparten el
     ancho y la etiqueta larga se va a dos renglones.
   - Titulo un punto mas chico en escritorio: con 1.5rem ocupaba
     cuatro renglones en su columna. */
.pdp-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; }
.pdp-actions .btn-compare-toggle { white-space: normal; line-height: 1.2; text-align: center; }
.pdp-actions .btn { min-width: 0; }
.pdp-title { font-size: clamp(1.08rem, 1.55vw, 1.35rem); }
@media (max-width: 719px) {
  .pdp-media .gallery-main { height: min(38vh, 275px); }
}

/* Movil HORIZONTAL (pantallas bajas): con 400 px de alto solo caben
   ~274 px de contenido bajo la barra de navegacion, asi que las
   acciones quedan a 1,7 pantallas por mucho que se compacte. Ahi la
   barra fija SI compensa: se activa tambien para pantallas bajas
   (antes solo aparecia por debajo de 720 px de ancho) y se afina para
   ocupar lo minimo. Tablets y escritorio siguen sin ella. */
@media (min-width: 720px) and (min-height: 561px) { .pdp-sticky { display: none !important; } }
@media (max-height: 560px) {
  .pdp-sticky { padding-top: .4rem; padding-bottom: calc(.4rem + env(safe-area-inset-bottom, 0px)); }
  .pdp-sticky .btn { min-height: 38px; }
  .pdp-title { font-size: 1.05rem; margin-top: .35rem; }
  .pdp-buy .ce-badges { gap: .3rem; }
  .pdp-buy .ce-badge { font-size: .6rem; padding: .16rem .5rem; }
  .pdp-price { margin-top: .6rem; padding: .7rem .8rem; }
  .pdp-facts { margin-top: .6rem; padding: .6rem .7rem; }
  .pdp-actions { margin-top: .7rem; }
}

/* Fila de acciones: medida real antes de este ajuste, 116 px de alto en
   escritorio y 128 en movil. Dos causas: la etiqueta larga de Comparar
   (tres renglones) y el logo de la tienda a 24 px, que con el wordmark
   de Mercado Libre son 132 px de ancho y dejaban la etiqueta de compra
   en 93 px. Ahora el boton dice "Comparar" (el limite va en una nota
   debajo), el logo baja a 18 px con tope de ancho, y la fila reparte
   mas ancho al boton principal. */
/* Comparar se queda con el ancho de su texto y el boton principal se
   lleva TODO el resto: es la accion prioritaria. */
.pdp-actions { grid-template-columns: auto minmax(0, 1fr); gap: .55rem; }
.pdp-actions .btn { min-height: 50px; padding: .55rem .85rem; align-items: center; gap: .5rem; }
/* SOLO el icono propio del boton (hijo directo). Sin el ">" esta
   regla alcanzaba tambien al wordmark de la tienda dentro de la chip y
   lo aplastaba a 18x18 — medido: la chip quedaba en 31 px de ancho. */
.pdp-actions .btn > svg { width: 18px; height: 18px; flex: none; }
.pdp-actions .btn-compare-toggle { white-space: nowrap; font-size: .92rem; }
/* Sin tope de ancho: el wordmark de la tienda conserva su proporcion.
   Lo que lo hacia enorme era el alto de 24 px (132 px de ancho con
   Mercado Libre); a 18 px son ~85 px y caben con la etiqueta en un
   solo renglon. */
.pdp-actions .cta-buy-logo-chip { flex: none; padding: .22rem .4rem; }
.pdp-actions .cta-buy-btn-label { font-size: .88rem; line-height: 1.18; }
.pdp-actions .btn-affiliate-badge { min-height: 50px; font-size: .88rem; border-radius: var(--r-lg); }
.pdp-actions .cta-buy-btn { min-height: 50px; border-radius: var(--r-lg); }
/* El limite de comparabilidad, fuera del boton y legible. */
.pdp-compare-note {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .5rem; font-size: .78rem; color: var(--text-mute); line-height: 1.35;
}
.pdp-compare-note-ico { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--blue); }
@media (max-width: 719px) {
  .pdp-actions { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .pdp-actions .btn-compare-toggle { width: 100%; }
}

/* ---- Enlaces estáticos a las páginas indexables (11/09/2026) ----
   Viven en el HTML base, no los pinta main.js: son el camino por el
   que un buscador descubre /categorias/, /tiendas/ y /guias/ sin
   ejecutar JavaScript. Se ven como una fila discreta sobre el aviso
   de transparencia del pie. */
.footer-indexables {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1.2rem 0 .4rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .92rem;
}
.footer-indexables a { color: #cfe0ff; text-decoration: none; font-weight: 600; }
.footer-indexables a:hover, .footer-indexables a:focus-visible { color: #fff; text-decoration: underline; }


/* =============================================================
   REDISEÑO DE LA HOME — 12/09/2026
   Un solo sistema visual para toda la portada: navy profundo, azul
   eléctrico, naranja, verde de estado y tarjetas blancas limpias.
   Este bloque va al final a propósito: solo AJUSTA lo que ya existe
   (cabeceras de sección, hero, categorías, rejillas) sin duplicar
   ninguna regla anterior, y nada de lo de aquí sale de la home.
   ============================================================= */

/* ---- Cabecera de sección con acción a la derecha ----
   Antes el título ocupaba una columna estrecha y no había forma de
   llegar al listado completo desde la home: había que buscar el
   enlace dentro del párrafo. */
.section-head--row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
}
.section-head--row > div { max-width: 640px; min-width: 0; }
.section-head-cta {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 999px; padding: .55rem 1rem;
  border: 1px solid var(--line); background: var(--white);
  font-weight: 700; color: var(--navy); box-shadow: var(--sh-sm);
}
.section-head-cta:hover, .section-head-cta:focus-visible { border-color: var(--blue); color: var(--blue); }
.section-head-cta svg { width: 15px; height: 15px; stroke-width: 3; }
/* Alterna el fondo entre secciones para que se distingan sin poner
   una línea divisoria en cada una. */
.section-soft { background: var(--surface-2); }
.eyebrow-hot::before { background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 122, 0, .18); }

/* ---- Hero ---- */
.hero-banner { position: relative; }
/* Chip "Ofertas desde 28%" sobre la ilustración. El porcentaje lo
   escribe main.js con el umbral REAL de /ofertas y solo si hoy existe
   al menos un producto que lo cumpla; si no, el chip no aparece. */
.hero-deal-chip {
  position: absolute; top: 6%; right: 10%;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 16px;
  background: linear-gradient(135deg, #ff8a1f 0%, #f2511b 100%);
  color: #fff; font-weight: 900; font-size: clamp(.82rem, 1.3vw, 1.05rem);
  line-height: 1.15; text-decoration: none; text-align: left;
  box-shadow: 0 10px 28px rgba(226, 82, 27, .45);
  transition: transform .16s ease, box-shadow .16s ease;
}
.hero-deal-chip:hover, .hero-deal-chip:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(226, 82, 27, .55);
}
.hero-deal-chip[hidden] { display: none; }
.hero-deal-chip-icon { font-size: 1.1em; }
.hero-bottom { display: flex; justify-content: center; margin-top: clamp(1rem, 2.5vw, 1.6rem); }
/* Sin padding inferior: el panel de TIENDAS AFILIADAS va pegado a la
   ilustración, como en la referencia. Antes el hero y la sección
   aportaban cada uno su propio aire y, como los dos escalaban con el
   ancho, en un monitor grande quedaban ~160 px de blanco entre la
   familia y el panel. */
.hero { padding-bottom: 0; }
.hero-search { width: 100%; max-width: 680px; }

/* ---- Categorías: fichas compactas ----
   Se conservan las subcategorías (son enlaces reales), solo pesan
   menos: antes cada ficha era casi una tarjeta de producto y las 20
   categorías ocupaban pantalla y media. */
.cat-grid { gap: .8rem; }
.cat-card { padding: .9rem .85rem; border-radius: var(--r-md); }
.cat-ico { width: 36px; height: 36px; border-radius: 10px; }
.cat-ico svg { width: 19px; height: 19px; }
.cat-card-name { font-size: .86rem; }
.cat-card-count { font-size: .7rem; }
.cat-card-sub { font-size: .68rem; padding: .16rem .45rem; }

/* ---- Propuesta de valor navy: beneficios a la derecha del texto ---- */
@media (min-width: 960px) {
  .navy-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
  .navy-benefits { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  .navy-cta { grid-column: 1 / -1; }
}

/* =============================================================
   PRODUCTOS DESTACADOS EN MÓVIL — exactamente 4
   El bloque rota de 6 en 6 (FEATURED_LIMIT) y en escritorio caben las
   6 en dos filas de tres. En un teléfono esas 6 se convierten en tres
   filas de dos y empujan las ofertas fuera de alcance, así que se
   muestran las 4 primeras. Se ocultan las dos últimas por CSS, no se
   recorta la selección: el rotador sigue trabajando con los mismos 6
   productos y los mismos grupos, así que el orden, la rotación y lo
   que se ve al volver al escritorio no cambian.
   ============================================================= */
@media (max-width: 719px) {
  [data-products] .result-card:nth-child(n + 5) { display: none; }
}
/* Un teléfono en horizontal sigue siendo un teléfono: mide ~844x390 y
   se sale del breakpoint de arriba por ancho, no por pantalla. La
   regla de las 4 se aplica también ahí. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  [data-products] .result-card:nth-child(n + 5) { display: none; }
}


/* =============================================================
   HERO EN TELÉFONO — 12/09/2026
   El banner es UNA imagen apaisada (1536x536) con el titular dibujado
   dentro. A 390 px de ancho eso deja "Compara. Elige. Ahorra mejor."
   en unos 4 px de alto: ilegible. Como el texto viene pintado en la
   imagen no se puede reflowear, así que en vertical se recorta a 5/4
   anclando por la izquierda: entran el titular, la mascota y el globo
   a 2,3 veces el tamaño anterior, y se pierde la parte derecha del
   sofá. Ningún texto se recorta a media palabra: el encuadre está
   elegido sobre la imagen real.
   En horizontal no hace falta: a 844 px el titular ya se lee.
   ============================================================= */
@media (max-width: 719px) and (orientation: portrait) {
  /* 3/2 = los 804 px izquierdos de la imagen: ahí caben ENTEROS el
     antetítulo, el titular, el subtítulo, los tres distintivos
     (el último acaba en x≈680) y el globo con la mascota. Lo que se
     pierde es el sofá de la derecha, no información. */
  .hero-banner-img { aspect-ratio: 3 / 2; object-fit: cover; object-position: left center; }
  /* El chip baja a la esquina inferior: arriba a la derecha tapaba el
     globo de "Todas tus tiendas favoritas". */
  .hero-deal-chip { top: auto; bottom: 4%; right: 4%; padding: .45rem .8rem; border-radius: 13px; }
}


/* =============================================================
   HEADER OSCURO CON BUSCADOR — 12/09/2026
   El header era blanco translúcido con diez entradas de nav (una por
   tienda, con "Próximamente" repetido dos veces) y el buscador vivía
   debajo del hero, a una pantalla de scroll en móvil. Ahora: fondo
   navy como el resto del sistema, cuatro secciones reales y el
   buscador SIEMPRE a la vista, porque el header es sticky.
   ============================================================= */
.site-header {
  background: linear-gradient(180deg, #0a1f47 0%, #071531 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(157, 180, 216, .18);
  box-shadow: 0 6px 24px rgba(4, 12, 32, .28);
}
.site-header .container { gap: clamp(.8rem, 2vw, 1.8rem); min-height: 72px; }
.site-header .brand-compara { color: #fff; }
.site-header .nav-links { flex: 0 1 auto; justify-content: flex-start; gap: clamp(.7rem, 1.6vw, 1.5rem); }
.site-header .nav-links a { color: #cfe0ff; font-size: .95rem; font-weight: 600; white-space: nowrap; }
.site-header .nav-links a:hover, .site-header .nav-links a:focus-visible { color: #fff; }
.site-header .nav-toggle { color: #fff; }

/* Buscador del header: la misma .searchbar de siempre, más baja y
   pegada a la derecha. Crece con el espacio libre y nunca empuja al
   logotipo fuera. */
.searchbar.header-search {
  flex: 1 1 260px; max-width: 460px; margin-left: auto;
  padding: .28rem .34rem .28rem 1rem;
  box-shadow: 0 6px 18px rgba(4, 12, 32, .35);
  border-color: transparent;
}
.searchbar.header-search input { font-size: .92rem; }
.searchbar.header-search .btn { padding: .5rem 1.1rem; font-size: .88rem; }

/* Móvil: el logotipo y el botón de menú en una fila y el buscador
   entero debajo, como en la referencia. Sin esto, el buscador se
   quedaba en 80 px y no se leía ni el texto de ayuda. */
@media (max-width: 959px) {
  .site-header .container { flex-wrap: wrap; padding-block: .6rem; row-gap: .55rem; }
  .searchbar.header-search { order: 3; flex: 1 0 100%; max-width: none; margin-left: 0; }
  .site-header .nav-actions { margin-left: auto; }
}

/* =============================================================
   CHIP DEL HERO — "Presiona aquí y ve ofertas hasta 75%"
   Va sobre la ilustración, arriba y hacia el centro-derecha, que es
   donde lo pide el diseño y donde no tapa ni el titular ni el globo
   de la mascota. El texto y el porcentaje los escribe main.js con el
   techo REAL de las ofertas de hoy.
   ============================================================= */
.hero-deal-chip {
  top: 5%; right: auto; left: 62%; transform: translateX(-50%);
  max-width: min(330px, 40%); text-align: center; line-height: 1.2;
  padding: .65rem 1.15rem;
}
.hero-deal-chip:hover, .hero-deal-chip:focus-visible { transform: translateX(-50%) translateY(-2px); }
@media (max-width: 1023px) {
  .hero-deal-chip { left: 58%; max-width: min(260px, 44%); font-size: .8rem; padding: .5rem .85rem; }
}
/* En teléfono vertical el banner va recortado a 3/2 y no queda un solo
   hueco libre: arriba está el globo de la mascota y abajo los tres
   distintivos. En vez de tapar algo, el chip SALE de la imagen y se
   convierte en una llamada de ancho completo justo debajo — que además
   es más fácil de pulsar con el pulgar que una esquina. */
@media (max-width: 719px) and (orientation: portrait) {
  .hero-deal-chip {
    position: static; display: flex; justify-content: center;
    margin: .7rem auto 0; max-width: min(92%, 420px); transform: none;
    font-size: .84rem; padding: .6rem 1rem; border-radius: 14px;
  }
  .hero-deal-chip:hover, .hero-deal-chip:focus-visible { transform: translateY(-2px); }
}


/* =============================================================
   PANTALLAS GRANDES — 12/09/2026
   El hero es de ancho completo y TODO lo demás vivía en una columna
   de 1280 px fijos. En un monitor de 2560 o 4K (o simplemente con el
   zoom al 50 % para ver la página entera) eso se ve como dos sitios
   distintos pegados: arriba un escritorio y debajo una columna de
   teléfono en mitad de la pantalla.

   Se arregla por los dos lados: la columna crece con la pantalla y la
   ilustración deja de estirarse sin límite.
   ============================================================= */
@media (min-width: 1600px) { :root { --container: 1440px; } }
@media (min-width: 1920px) { :root { --container: 1640px; } }
@media (min-width: 2560px) { :root { --container: 1840px; } }
.hero-banner { max-width: 2560px; margin-inline: auto; }

/* =============================================================
   TARJETAS DE LA HOME — compactas
   La home es un escaparate, no el catálogo: aquí solo hace falta lo
   que decide un clic. Las tarjetas medían 822 px de alto porque
   arrastraban la ficha entera (descripción, fecha de consulta,
   "0 vendidos recientemente", "Calificación no disponible"...), así
   que en escritorio cabían seis productos en dos pantallas.

   No se oculta ningún dato que ayude a decidir: precio, precio
   anterior, % de descuento, tienda, favoritos, comparar e insignia de
   "Disponible en N tiendas" siguen ahí. Lo que se deja de pintar —
   descripción, fecha de la consulta, ventas recientes y la línea de
   "calificación no disponible" — sigue COMPLETO en la ficha del
   producto, a un clic. Y como es CSS acotado a las dos rejillas de la
   home, ninguna otra vista cambia.
   ============================================================= */
.product-grid, .offer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 1279px) { .product-grid, .offer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .product-grid, .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Teléfono: dos columnas. Va DESPUÉS de las de arriba a propósito —
   con tres, la tarjeta se quedaba en 107 px y no cabía ni el precio. */
@media (max-width: 719px) { .product-grid, .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } }

.product-grid .result-card, .offer-grid .result-card { padding: .6rem; border-radius: var(--r-md); min-width: 0; }
.product-grid .result-thumb, .offer-grid .result-thumb { aspect-ratio: 1 / 1; margin-bottom: .45rem; }
.product-grid .result-name, .offer-grid .result-name {
  font-size: .82rem; line-height: 1.3; margin-bottom: .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-grid .platform-badge, .offer-grid .platform-badge { font-size: .66rem; padding: .12rem .45rem .12rem .28rem; }
.product-grid .result-price-row, .offer-grid .result-price-row { gap: .35rem; margin-bottom: .35rem; flex-wrap: wrap; }
.product-grid .price-now, .offer-grid .price-now { font-size: 1.02rem; }
.product-grid .price-before, .offer-grid .price-before { font-size: .75rem; }
.product-grid .result-actions, .offer-grid .result-actions { gap: .4rem; margin-top: .45rem; }
.product-grid .result-actions .btn, .offer-grid .result-actions .btn { font-size: .74rem; padding: .42rem .6rem; }

/* Lo que se deja de pintar aquí (sigue entero en la ficha). */
.product-grid .result-desc, .offer-grid .result-desc,
.product-grid .result-brand, .offer-grid .result-brand,
.product-grid .price-freshness, .offer-grid .price-freshness,
.product-grid .result-recent-sales, .offer-grid .result-recent-sales,
.product-grid .onsale-tag, .offer-grid .onsale-tag,
.product-grid .result-meta-line:not(.result-store-count),
.offer-grid .result-meta-line:not(.result-store-count) { display: none; }
/* La calificación solo estorba cuando NO existe: "Calificación no
   disponible" ocupaba una línea entera para no decir nada. Cuando la
   tienda sí la da, se sigue viendo. */
.product-grid .result-rating-row:has(.not-available),
.offer-grid .result-rating-row:has(.not-available) { display: none; }

/* =============================================================
   CATEGORÍAS — fila de fichas compactas
   ============================================================= */
.cat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 1279px) { .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 959px)  { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-card { padding: .85rem .6rem; align-items: center; text-align: center; gap: .5rem; }
.cat-card-main { align-items: center; }
.cat-card-name { font-size: .82rem; }
/* Conteo y subcategorías se dejan de pintar en la home: la ficha de
   cada categoría las lista completas y aquí lo que se busca es
   reconocer el icono y entrar. */
.cat-card-count, .cat-card-subs { display: none; }


/* =============================================================
   "SÍGUENOS" SOBRE LA ILUSTRACIÓN — 13/09/2026
   Capa dentro del banner, no una franja aparte. Al ir en posición
   absoluta no ocupa altura propia, así que el panel de TIENDAS
   AFILIADAS se queda exactamente donde estaba: el botón se añade sin
   mover nada de lo que ya había.
   Se coloca en la esquina inferior izquierda, justo debajo de los tres
   distintivos que vienen dibujados en la imagen.
   ============================================================= */
/* La caja que de verdad manda: encierra SOLO la imagen, así el
   "abajo" del botón es el borde de la foto y no el del bloque entero
   (que en teléfono crece porque el chip de ofertas baja bajo la foto). */
.hero-banner-media { position: relative; line-height: 0; }
.hero-social {
  position: absolute; left: 4%; bottom: 3.5%; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .5rem;
  max-width: 92%;
}
/* Teléfono: la imagen va recortada y hay menos sitio, así que los
   botones se encogen. NO se estiran a lo ancho — van compactos para que
   quepan los tres en la misma fila cuando se sumen YouTube y TikTok. */
@media (max-width: 719px) {
  .hero-social { left: 3%; bottom: 3%; gap: .4rem; }
  .hero-social .btn-social { font-size: .72rem; padding: .32rem .68rem .32rem .34rem; gap: .38rem; }
  .hero-social .btn-social-mark { width: 20px; height: 20px; }
}
/* 16/09/2026: con cuatro redes, en telefono los rotulos ya no caben en
   una fila sobre la foto y, al envolver, el bloque tapaba la
   ilustracion. Sobre la imagen se quedan solo los glifos, en pastillas
   redondas; el nombre de cada red sigue estando para lectores de
   pantalla en el aria-label del enlace, y el pie los muestra con texto.
   Se oculta con width/height 1px en vez de display:none para no perder
   el nombre accesible del boton. */
@media (max-width: 719px) {
  .hero-social .btn-social { padding: .34rem; gap: 0; border-radius: 999px; }
  .hero-social .btn-social-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 420px) {
  .hero-social { gap: .34rem; }
  .hero-social .btn-social { padding: .3rem; }
  .hero-social .btn-social-mark { width: 18px; height: 18px; }
}

/* =================================================================
   VISTA DE COMPARACIÓN — REDISEÑO 13/09/2026
   -----------------------------------------------------------------
   Sigue el diseño de referencia del usuario (escritorio / móvil
   vertical / móvil horizontal). Va al final del archivo a propósito:
   afina reglas de .compare-table que ya existen más arriba (la columna
   de etiquetas sticky, el relleno de las celdas), así que tiene que
   ganar en la cascada sin borrarlas.

   La regla que no se puede romper: las tarjetas de producto y TODAS
   las tablas de sección viven dentro del mismo .cmpv-board, con un
   solo scroll horizontal y el mismo ancho de columna (--cmp-col). Por
   eso la columna N de una tabla siempre corresponde a la tarjeta N.
   ================================================================= */

/* --- Encabezado -------------------------------------------------- */
.cmpv-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center; gap: 1.2rem; margin-bottom: 1.4rem;
}
.cmpv-top.has-video { grid-template-columns: minmax(0, 1fr) minmax(0, 330px) minmax(0, 300px); }
.cmpv-top-copy { min-width: 0; }
.cmpv-title { color: var(--navy); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 .5rem; }
.cmpv-title span { color: var(--blue); }
.cmpv-sub { color: var(--text-soft); margin: 0; font-size: 1rem; max-width: 46ch; }
.cmpv-perks { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.1rem 0 0; padding: 0; }
.cmpv-perks li { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--text-soft); }
.cmpv-perks svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.cmpv-top-mascot { min-width: 0; }
.cmpv-top-mascot img { display: block; width: 100%; height: auto; }
.cmpv-top-video { min-width: 0; }

/* Tarjeta "Ver cómo funciona". Solo se pinta cuando hay una URL de
   video configurada de verdad — nunca una tarjeta muerta. */
.cmpv-video {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .9rem 1rem; box-shadow: 0 6px 18px rgba(8,36,92,.07);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cmpv-video:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(8,36,92,.12); }
.cmpv-video-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.cmpv-video-copy b { color: var(--navy); font-size: .98rem; }
.cmpv-video-copy > span { color: var(--text-soft); font-size: .8rem; }
.cmpv-video-yt svg { width: 62px; height: 44px; margin-top: .25rem; display: block; }
.cmpv-video-play {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center;
}
.cmpv-video-play svg { width: 26px; height: 26px; }
.cmpv-video-go svg { width: 18px; height: 18px; color: var(--text-mute); }

/* --- Selector de secciones --------------------------------------- */
.cmpv-picker {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  align-items: center; gap: 1rem 1.4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1.2rem; margin-bottom: 1.3rem;
}
.cmpv-picker-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cmpv-picker-copy b { color: var(--navy); font-size: .98rem; }
.cmpv-picker-copy span { color: var(--text-mute); font-size: .8rem; }
.cmpv-picker-opts { display: flex; flex-wrap: wrap; gap: .55rem 1.2rem; min-width: 0; }
.cmpv-picker-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.cmpv-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.cmpv-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmpv-check-box {
  width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid #c8d2e2;
  background: var(--white); display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.cmpv-check-box svg { width: 14px; height: 14px; }
.cmpv-check-text { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; color: var(--text-soft); }
.cmpv-check-text svg { width: 18px; height: 18px; color: var(--text-mute); }
.cmpv-check:hover .cmpv-check-box { border-color: var(--blue); }
.cmpv-check.is-on .cmpv-check-box { background: var(--blue); border-color: var(--blue); color: var(--white); }
.cmpv-check.is-on .cmpv-check-text { color: var(--navy); }
.cmpv-check.is-on .cmpv-check-text svg { color: var(--blue); }
.cmpv-check input:focus-visible + .cmpv-check-box { outline: 2px solid var(--blue); outline-offset: 2px; }

.cmpv-btn-all, .cmpv-btn-clear {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  border-radius: var(--r-pill); padding: .55rem 1.15rem; font-size: .88rem; font-weight: 800;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.cmpv-btn-all { border: 2px solid var(--blue); background: var(--white); color: var(--blue); }
.cmpv-btn-all:hover { background: var(--blue-soft); }
.cmpv-btn-clear { border: 2px solid transparent; background: transparent; color: var(--text-soft); }
.cmpv-btn-clear:hover { color: var(--blue); background: var(--blue-soft); }
.cmpv-btn-all svg, .cmpv-btn-clear svg { width: 18px; height: 18px; }

/* --- Tablero: tarjetas + secciones, UN solo scroll ---------------- */
.cmpv-board { overflow-x: auto; max-width: 100%; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.cmpv-inner {
  --cmp-label: 158px; --cmp-col: 232px;
  min-width: calc(var(--cmp-label) + var(--cmp-cols) * var(--cmp-col));
  display: flex; flex-direction: column; gap: 1rem;
}

/* --- Tarjetas de producto ---------------------------------------- */
.cmpv-cards { display: grid; grid-template-columns: repeat(var(--cmp-cols), minmax(0, 1fr)); gap: .9rem; }
.cmpv-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 2.1rem .9rem 1rem;
}
.cmpv-card > * { min-width: 0; }
/* La tarjeta ganadora NO lleva un verde estático: el marco late, igual
   que el del panel de TIENDAS AFILIADAS (mismos 4.5 s, mismo color
   neón). La animación toca SOLO border-color y box-shadow — nunca
   tamaño ni posición — para que no mueva ni un píxel del resto. */
.cmpv-card.is-best {
  border-color: var(--green); background: #f1fbf6;
  animation: mejorOpcionLatido 4.5s ease-in-out infinite;
}
@keyframes mejorOpcionLatido {
  0%, 100% {
    border-color: color-mix(in srgb, #22e06a 55%, transparent);
    box-shadow: 0 0 0 1px rgba(34, 224, 106, .16), 0 0 22px -8px rgba(34, 224, 106, .45), inset 0 0 30px -22px rgba(34, 224, 106, .40);
  }
  50% {
    border-color: color-mix(in srgb, #22e06a 100%, transparent);
    box-shadow: 0 0 0 2px rgba(34, 224, 106, .30), 0 0 46px -4px rgba(34, 224, 106, .80), inset 0 0 34px -14px rgba(34, 224, 106, .70);
  }
}
/* La cinta 🏆 respira con el mismo compás, para que se lea como una
   sola pieza y no como dos adornos sueltos. */
.cmpv-card.is-best .cmpv-card-flag { animation: mejorOpcionCinta 4.5s ease-in-out infinite; }
@keyframes mejorOpcionCinta {
  0%, 100% { box-shadow: 0 0 12px -6px rgba(34, 224, 106, .5); }
  50% { box-shadow: 0 0 22px -2px rgba(34, 224, 106, .95); }
}
/* Quien pide menos movimiento se queda con el marco encendido fijo, no
   con uno apagado: el brillo es parte del diseño, no un adorno. */
@media (prefers-reduced-motion: reduce) {
  .cmpv-card.is-best, .cmpv-card.is-best .cmpv-card-flag { animation: none; }
  .cmpv-card.is-best { box-shadow: 0 0 0 2px rgba(34, 224, 106, .55), 0 0 30px -6px rgba(34, 224, 106, .6); }
}
.cmpv-card-flag {
  position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: .3rem;
  background: var(--green); color: var(--white); font-size: .68rem; font-weight: 900; letter-spacing: .04em;
  padding: .3rem .7rem; border-radius: var(--r-md) 0 var(--r-md) 0;
}
.cmpv-card-flag svg { width: 14px; height: 14px; }
.cmpv-card-tools { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; z-index: 2; }
.cmpv-card-x {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--text-mute); cursor: pointer;
}
.cmpv-card-x:hover { color: #c0392b; border-color: #f3c6c0; }
/* B-5 (26/09/2026): el corazon hereda de .result-fav una posicion absoluta
   pensada para la foto de la tarjeta de resultados, y aqui se montaba
   encima de la X de "Quitar de la comparación". Dentro de la barra de
   herramientas va en fila, al lado de la X. */
.cmpv-card-tools .result-fav { position: static; width: 26px; height: 26px; box-shadow: none; }
.cmpv-card-tools .result-fav svg { width: 14px; height: 14px; }
.cmpv-card-x svg { width: 13px; height: 13px; }
.cmpv-card-img, img.cmpv-card-img {
  display: block; width: 100%; max-width: 130px; height: auto; margin: 0 auto .6rem;
  object-fit: contain; aspect-ratio: 1 / 1;
}
svg.cmpv-card-img { max-width: 64px; color: var(--blue); }
.cmpv-card .result-badge-row { justify-content: center; margin-bottom: .35rem; }
.cmpv-card-name {
  display: block; text-align: center; color: var(--navy); font-weight: 700; font-size: .88rem;
  line-height: 1.3; text-decoration: none; margin-bottom: .35rem;
}
.cmpv-card-name span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmpv-card-name:hover { color: var(--blue); }
.cmpv-card .rating, .cmpv-card .result-price-row { justify-content: center; text-align: center; }
.cmpv-card .onsale-tag { align-self: center; margin-top: .3rem; }
.cmpv-card .price-now { font-size: 1.4rem; }
.cmpv-card-score { text-align: center; font-size: .76rem; color: var(--text-mute); margin-top: .2rem; }
.cmpv-card-score b { color: var(--blue); font-size: .95rem; }
/* En la referencia el botón de la tarjeta es AZUL. El .btn-primary del
   proyecto es naranja (el de "Buscar"), así que aquí se redefine a
   propósito en vez de cambiar el botón global. */
.cmpv-card-cta, .cmpv-card .btn-primary.cmpv-card-cta {
  /* margin-top: auto empuja el botón (y lo que venga después) al fondo
     de la tarjeta: así los "Ver ficha" de las cuatro tarjetas quedan a
     la misma altura aunque los títulos tengan distinto número de
     líneas. */
  margin-top: auto; padding-top: .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  background: var(--blue); border-color: var(--blue); color: var(--white);
  box-shadow: none; filter: none; text-shadow: none;
}
.cmpv-card-cta:hover, .cmpv-card .btn-primary.cmpv-card-cta:hover { background: #0a6fd6; border-color: #0a6fd6; }
.cmpv-card-cta svg { width: 15px; height: 15px; }
.cmpv-card-wins { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cmpv-card-wins li { display: flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: #0d5f39; }
.cmpv-card-wins svg { width: 14px; height: 14px; flex: none; color: var(--green); }

/* --- Bloques de sección ------------------------------------------ */
/* Sin overflow:hidden a propósito: un ancestro que recorta rompe el
   `position: sticky` de la columna de etiquetas. */
.cmpv-block { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.cmpv-block[hidden] { display: none; }
.cmpv-block-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.cmpv-block-icon { display: inline-flex; }
.cmpv-block-icon svg { width: 20px; height: 20px; color: var(--blue); }
.cmpv-block[data-cmp-block="precio"] .cmpv-block-icon svg { color: var(--orange); }
.cmpv-block-name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--navy); }
.cmpv-block-count {
  font-size: .72rem; font-weight: 700; color: var(--text-mute);
  background: #eef2f8; border-radius: var(--r-pill); padding: .16rem .6rem;
}
.cmpv-block-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 800; color: #0d5f39;
  background: #b9f0d2; border-radius: var(--r-pill); padding: .18rem .65rem;
}
.cmpv-block-pill svg { width: 12px; height: 12px; }
.cmpv-block-fold {
  margin-left: auto; width: 30px; height: 30px; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-mute);
}
.cmpv-block-fold svg { width: 20px; height: 20px; transition: transform .18s ease; }
.cmpv-block.is-folded .cmpv-block-fold svg { transform: rotate(-90deg); }
.cmpv-block.is-folded .cmpv-block-body { display: none; }

/* --- Las tablas -------------------------------------------------- */
/* table-layout: fixed + <colgroup> = todas las tablas reparten el
   ancho exactamente igual, así que las columnas de dos secciones
   distintas quedan alineadas al píxel. */
.cmpv-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.cmpv-table col.cmpv-col-label { width: var(--cmp-label); }
/* Los min-width por cantidad de productos son de la maqueta anterior
   (una sola tabla sin colgroup) y aquí pelearían con el reparto fijo. */
.cmpv-table th:not(:first-child), .cmpv-table td:not(:first-child) { min-width: 0; }
.cmpv-table th, .cmpv-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmpv-table tr:last-child th, .cmpv-table tr:last-child td { border-bottom: 0; }
.cmpv-table th:first-child {
  color: var(--text-soft); font-weight: 600; font-size: .82rem; white-space: normal;
  position: sticky; left: 0; background: var(--white); z-index: 1;
}
.cmpv-table tbody tr:hover td { background: #f8fafd; }
/* El verde solo marca ganadores REALES (los que ya calcula
   buildComparisonRows: null con empate o con datos incompletos). */
.cmpv-table td.is-winner { background: var(--green-soft); font-weight: 700; color: var(--navy); }
.cmpv-table tbody tr:hover td.is-winner { background: #d8f3e4; }
.cmpv-table .winner-chip {
  display: inline-flex; align-items: center; margin-left: .4rem; vertical-align: middle;
  font-size: .68rem; font-weight: 800; color: var(--white); background: var(--green);
  border-radius: var(--r-pill); padding: .16rem .55rem; white-space: nowrap;
}
.cmpv-desc {
  font-size: .82rem; line-height: 1.55; color: var(--text-soft); font-weight: 400;
  max-height: 13rem; overflow-y: auto; white-space: pre-line; overflow-wrap: anywhere;
}

/* --- Acciones del pie -------------------------------------------- */
.cmpv-empty-sections { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; font-size: .88rem; color: var(--text-soft); }
.cmpv-empty-sections svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: .15rem; }
.cmpv-actions { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.3rem; }
.cmpv-add, .cmpv-clear {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; text-decoration: none;
  border-radius: var(--r-pill); padding: .65rem 1.35rem; font-size: .92rem; font-weight: 800;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.cmpv-add { border: 2px solid var(--line); background: var(--white); color: var(--blue); }
.cmpv-add:hover { border-color: var(--blue); background: var(--blue-soft); }
.cmpv-clear { border: 2px solid #f3d3ce; background: #fff3f1; color: #c0392b; }
.cmpv-clear:hover { background: #ffe6e2; border-color: #e79b90; }
.cmpv-add svg, .cmpv-clear svg { width: 18px; height: 18px; }
.cmpv-seeall {
  display: none; width: 100%; margin-top: 1rem; cursor: pointer;
  align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: var(--r-pill); padding: .95rem 1rem;
  background: var(--blue); color: var(--white); font-size: 1rem; font-weight: 800;
}
.cmpv-seeall svg { width: 20px; height: 20px; }
.cmpv-seeall:hover { background: #0a6fd6; }

/* --- Responsive --------------------------------------------------- */
/* 1920 / 2560 / 3840: más aire y columnas más anchas, para que el
   tablero no quede perdido en medio de la pantalla. */
@media (min-width: 1600px) {
  .cmpv-inner { --cmp-label: 190px; --cmp-col: 258px; }
  .cmpv-sub { font-size: 1.08rem; }
  .cmpv-top { gap: 1.8rem; }
}

/* Portátiles y tabletas anchas: la tarjeta del video baja a su propia
   fila para no estrujar el título. */
@media (max-width: 1199px) {
  .cmpv-top { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
  .cmpv-top-video { grid-column: 1 / -1; }
  .cmpv-video { max-width: 420px; }
}
@media (max-width: 1023px) {
  .cmpv-inner { --cmp-label: 128px; --cmp-col: 196px; }
  .cmpv-picker { grid-template-columns: minmax(0, 1fr); }
  .cmpv-picker-actions { justify-content: flex-start; }
}

/* Móvil VERTICAL: todo apilado, columnas estrechas pero legibles (con
   2 productos el tablero cabe entero en un teléfono de 390px). */
@media (max-width: 719px) {
  .cmpv-inner { --cmp-label: 84px; --cmp-col: 124px; gap: .8rem; }
  .cmpv-top, .cmpv-top.has-video { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: .7rem; margin-bottom: 1rem; }
  .cmpv-top-video { grid-column: 1 / -1; }
  .cmpv-video { max-width: none; padding: .7rem .85rem; }
  .cmpv-video-yt svg { width: 48px; height: 34px; }
  .cmpv-video-play { width: 38px; height: 38px; }
  .cmpv-title { font-size: 1.5rem; }
  .cmpv-sub { font-size: .86rem; }
  /* La referencia de teléfono no lleva las cuatro promesas: ocupan
     media pantalla antes de llegar a lo que importa. */
  .cmpv-perks { display: none; }
  .cmpv-picker { padding: .85rem .9rem; gap: .75rem; }
  .cmpv-picker-opts { gap: .5rem .9rem; }
  /* Los dos botones caben en la misma fila: "Limpiar selección"
     colgando debajo de "Ver todo" se veía descolocado. */
  .cmpv-picker-actions { flex-wrap: nowrap; gap: .35rem; }
  .cmpv-btn-all, .cmpv-btn-clear { padding: .5rem .8rem; font-size: .8rem; gap: .35rem; white-space: nowrap; }
  .cmpv-btn-all svg, .cmpv-btn-clear svg { width: 16px; height: 16px; }
  .cmpv-check-text { font-size: .8rem; }
  .cmpv-check-box { width: 20px; height: 20px; }
  .cmpv-card { padding: 1.9rem .55rem .7rem; }
  .cmpv-card-img, img.cmpv-card-img { max-width: 86px; }
  .cmpv-card-name { font-size: .76rem; }
  /* En una columna de 124 px la calificación se partía en tres líneas
     ("4.6/5 ·" / "23,704" / "reseñas"). Achicada, entra en dos. */
  .cmpv-card .rating { font-size: .68rem; line-height: 1.25; gap: .25rem; }
  .cmpv-card .stars { letter-spacing: -.06em; }
  .cmpv-card .price-now { font-size: 1.05rem; }
  .cmpv-card-wins li { font-size: .68rem; }
  .cmpv-table th, .cmpv-table td { padding: .55rem .55rem; font-size: .78rem; }
  .cmpv-table th:first-child { font-size: .7rem; line-height: 1.25; padding-left: .5rem; }
  .cmpv-table .winner-chip { font-size: .6rem; padding: .12rem .4rem; margin-left: .25rem; }
  .cmpv-block-name { font-size: .88rem; }
  .cmpv-block-count { display: none; }
  .cmpv-desc { font-size: .72rem; max-height: 9rem; }
  .cmpv-actions { gap: .6rem; }
  .cmpv-add, .cmpv-clear { flex: 1; justify-content: center; padding: .6rem .8rem; font-size: .82rem; }
  .cmpv-seeall { display: flex; }
}

/* Móvil HORIZONTAL: hay poca altura, así que el encabezado se achica y
   las 4 columnas caben sin desplazar (92 + 4 × 150 = 692 < 844). */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  .cmpv-inner { --cmp-label: 100px; --cmp-col: 150px; }
  .cmpv-top { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: .8rem; margin-bottom: .8rem; }
  .cmpv-top.has-video { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(0, 240px); }
  .cmpv-top-video { grid-column: auto; }
  .cmpv-title { font-size: 1.25rem; margin-bottom: .25rem; }
  .cmpv-sub { font-size: .78rem; }
  .cmpv-perks { display: none; }
  .cmpv-picker { grid-template-columns: minmax(0, 1fr) auto; padding: .6rem .8rem; }
  .cmpv-picker-copy { display: none; }
  .cmpv-card { padding: 1.8rem .5rem .6rem; }
  .cmpv-card-img, img.cmpv-card-img { max-width: 78px; }
  .cmpv-card-name { font-size: .74rem; }
  .cmpv-card-wins { display: none; }
  .cmpv-table th, .cmpv-table td { padding: .45rem .5rem; font-size: .74rem; }
  .cmpv-desc { max-height: 7rem; }
  .cmpv-seeall { display: none; }
}


/* B-5 (26/09/2026) — TARJETAS DE LA COMPARACIÓN COMPACTAS EN MÓVIL Y TABLET.
   En pantallas de hasta 959 px (y en móvil horizontal) la fila de tarjetas
   medía 390–540 px: en un teléfono horizontal ocupaba la pantalla entera y
   la tabla, que es lo que se vino a comparar, quedaba fuera. Lo que se
   quita de la tarjeta ya está en la tabla, fila por fila: calificación y
   reseñas, "Precio actualizado", la puntuación y las ventajas (las marca
   el chip del ganador de cada fila). Se queda lo que identifica al
   producto: foto, tienda, nombre, precio y "Ver ficha". */
@media (max-width: 959px), (orientation: landscape) and (max-height: 520px) {
  .cmpv-card { padding: 1.7rem .5rem .55rem; }
  .cmpv-card-img, img.cmpv-card-img { max-width: 64px; margin-bottom: .35rem; }
  .cmpv-card .result-badge-row { margin-bottom: .2rem; }
  .cmpv-card-name { font-size: .74rem; margin-bottom: .2rem; }
  .cmpv-card-name span { -webkit-line-clamp: 2; }
  .cmpv-card .rating,
  .cmpv-card .price-freshness,
  .cmpv-card .price-updated-note,
  .cmpv-card-score,
  .cmpv-card-wins { display: none; }
  .cmpv-card .price-now { font-size: 1rem; }
  .cmpv-card-cta, .cmpv-card .btn-primary.cmpv-card-cta { padding: .4rem .5rem; font-size: .76rem; min-height: 0; }
}
/* Móvil horizontal: la pantalla tiene ~390 px de alto. La tarjeta se queda
   en foto pequeña, tienda, nombre, precio y "Ver ficha"; precio anterior,
   descuento y la etiqueta de oferta siguen en sus filas de la tabla. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  .cmpv-card { padding-top: 1.5rem; padding-bottom: .45rem; }
  .cmpv-card-img, img.cmpv-card-img { max-width: 36px; margin-bottom: .2rem; }
  .cmpv-card-name { font-size: .7rem; line-height: 1.25; }
  .cmpv-card-cta, .cmpv-card .btn-primary.cmpv-card-cta { padding: .3rem .45rem; }
  .cmpv-card .price-before,
  .cmpv-card .price-discount,
  .cmpv-card .onsale-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmpv-video, .cmpv-check-box, .cmpv-btn-all, .cmpv-btn-clear, .cmpv-add, .cmpv-clear, .cmpv-block-fold svg { transition: none; }
  .cmpv-video:hover { transform: none; }
}


/* =============================================================
   B-6 (26/09/2026) — AJUSTES PEDIDOS POR JESUS
   ============================================================= */

/* Fila de acciones de las tarjetas: con "En comparación" (mas largo que
   "Comparar") el boton "Ver ficha" se salia de la tarjeta en las
   columnas angostas (medido: 19 px fuera en #comparar/mercadolibre a
   1280 px). Ahora, si no caben en una fila, bajan a la siguiente. */
.result-actions { flex-wrap: wrap; }
.result-actions .btn { flex: 1 1 7.2rem; min-width: 0; }

/* Chip del buscador por tienda (ver aplicarAlcanceBuscador en main.js). */
.search-scope {
  flex: none; display: inline-flex; align-items: center; gap: .2rem;
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue);
  font: inherit; font-size: .76rem; font-weight: 700; padding: .22rem .55rem; cursor: pointer;
}
.search-scope[hidden] { display: none; }
/* Con el chip dentro, el campo es el que cede espacio (si no, el buscador
   se salia por la derecha en un celular de 390 px). */
.searchbar.header-search input { flex: 1 1 0; width: 0; min-width: 0; }
.search-scope:hover, .search-scope:focus-visible { background: var(--blue); color: var(--white); }

/* SOLO CELULAR: buscador del header lo mas bajo posible (crece un poco al
   tocarlo para escribir) y mascota de la comparacion mas pequeña. En
   tablet y escritorio no cambia nada. */
@media (max-width: 719px) {
  .site-header .container { min-height: 0; padding-block: .4rem; row-gap: .4rem; }
  .searchbar.header-search { padding: .12rem .14rem .12rem .7rem; gap: .35rem; box-shadow: 0 3px 10px rgba(4, 12, 32, .3); transition: padding .2s ease; }
  .searchbar.header-search svg { width: 15px; height: 15px; }
  .searchbar.header-search input { font-size: .82rem; padding: .26rem .1rem; }
  .searchbar.header-search .btn { padding: .32rem .75rem; font-size: .76rem; box-shadow: none; }
  .searchbar.header-search .search-scope { font-size: .68rem; padding: .16rem .45rem; }
  .searchbar.header-search:focus-within { padding: .3rem .3rem .3rem .9rem; }
  .searchbar.header-search:focus-within input { font-size: 16px; padding: .42rem .1rem; }
  .searchbar.header-search:focus-within .btn { padding: .52rem .95rem; font-size: .84rem; }

  /* B-7 (26/09/2026): en celular sin el texto de ayuda bajo el titulo y
     con la mascota a 84 px — las tarjetas empiezan 66 px mas arriba. */
  .cmpv-sub { display: none; }
  .cmpv-top, .cmpv-top.has-video { grid-template-columns: minmax(0, 1fr) 84px; align-items: center; margin-bottom: .7rem; }
  .cmpv-top-mascot img { max-width: 84px; margin-left: auto; }
}


/* =============================================================
   B-8 (26/09/2026) — PEDIDOS DE JESUS (vistas previas aprobadas)
   ============================================================= */

/* 1. Pagina de tienda: un solo buscador (el del header ya busca dentro de
   la tienda), titulo grande y el descuento debajo. */
.platform-search-row .platform-search { display: none; }
.results-platform-head h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); line-height: 1.08; margin: 0 0 .35rem; }
.results-platform-head .platform-deal { margin: 0; font-size: 1rem; font-weight: 700; color: var(--navy); }
.results-platform-head .platform-deal b { color: #e8590c; font-size: 1.15em; }
.results-platform-head .platform-deal span { display: block; margin-top: .15rem; font-weight: 500; font-size: .86rem; color: var(--text-mute); }

/* 2. Nombre de la tienda en las tarjetas: pastilla con el color y el
   acabado del "En oferta" de su tienda, halo que respira y un reflejo
   que la cruza (el "En oferta" se queda quieto). */
.platform-badge[data-tienda] {
  --of-ini: #ff8a33; --of-fin: #e24a00; --of-borde: #ffbb86; --of-glow: rgba(226, 74, 0, .55); --of-tinta: #fff; --of-punto: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .38rem; max-width: 100%;
  padding: .3rem .72rem .3rem .55rem; border-radius: 999px;
  border: 1.5px solid var(--of-borde);
  background: linear-gradient(180deg, var(--of-ini) 0%, var(--of-fin) 100%);
  background-color: var(--of-fin);
  color: var(--of-tinta); font-size: .84rem; font-weight: 900; line-height: 1.1; letter-spacing: .01em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 0 12px 0 var(--of-glow), 0 2px 6px rgba(3, 10, 28, .24);
  animation: tiendaLatido 2.6s ease-in-out infinite;
}
.platform-badge[data-tienda]::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 1.5px 3px 48% 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
}
.platform-badge[data-tienda]::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: tiendaBrillo 3.2s ease-in-out infinite;
}
.platform-badge[data-tienda] .platform-badge-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--of-punto); opacity: .95; }
.platform-badge[data-tienda] .platform-badge-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.platform-badge[data-tienda="mercadolibre"] { --of-ini: #ffe800; --of-fin: #ffc800; --of-borde: #fff384; --of-glow: rgba(255, 214, 0, .8); --of-tinta: #0a1f47; --of-punto: #0a1f47; }
.platform-badge[data-tienda="aliexpress"]   { --of-ini: #fb2b1e; --of-fin: #bb0700; --of-borde: #ff9187; --of-glow: rgba(255, 45, 30, .72); }
.platform-badge[data-tienda="banggood"]     { --of-ini: #ff9628; --of-fin: #e85c00; --of-borde: #ffc487; --of-glow: rgba(255, 122, 0, .72); }
.platform-badge[data-tienda="lenovo"]       { --of-ini: #e41c23; --of-fin: #920007; --of-borde: #ff7d7d; --of-glow: rgba(198, 10, 22, .78); }
.platform-badge[data-tienda="cyberpuerta"]  { --of-ini: #2b86ff; --of-fin: #0b47c4; --of-borde: #8dbcff; --of-glow: rgba(21, 101, 255, .76); }
.platform-badge[data-tienda="motorola"]     { --of-ini: #3a3a3f; --of-fin: #000000; --of-borde: #8fb4ff; --of-glow: rgba(92, 146, 250, .7); }
.platform-badge[data-tienda="levis"]        { --of-ini: #3b6aa3; --of-fin: #1a3355; --of-borde: #ff8a95; --of-glow: rgba(196, 18, 48, .65); }
.platform-badge[data-tienda="supernaturista"] { --of-ini: #2e9e4f; --of-fin: #16622e; --of-borde: #a8e6ab; --of-glow: rgba(46, 158, 79, .7); }
.platform-badge[data-tienda="redmagic"] { --of-ini: #3a1014; --of-fin: #0c0c0f; --of-borde: #ff6b75; --of-glow: rgba(255, 45, 61, .7); }
.platform-badge[data-tienda="samsonite"] { --of-ini: #2f49d1; --of-fin: #0b1660; --of-borde: #9db1ff; --of-glow: rgba(74, 108, 255, .7); }
.platform-badge[data-tienda="panini"] { --of-ini: #e3343b; --of-fin: #8f1016; --of-borde: #ffe066; --of-glow: rgba(255, 204, 0, .65); }
.platform-badge[data-tienda="stylewe"] { --of-ini: #8e2a52; --of-fin: #3d0f24; --of-borde: #f3a9c4; --of-glow: rgba(243, 169, 196, .65); }
.platform-badge[data-tienda="noracora"] { --of-ini: #0e6b66; --of-fin: #063633; --of-borde: #7ee0d6; --of-glow: rgba(126, 224, 214, .65); }
.platform-badge[data-tienda="justfashionnow"] { --of-ini: #e8590c; --of-fin: #8a2f00; --of-borde: #ffc078; --of-glow: rgba(255, 192, 120, .65); }
.platform-badge[data-tienda="sunsky"] { --of-ini: #0b6fb8; --of-fin: #06365c; --of-borde: #8fd0ff; --of-glow: rgba(143, 208, 255, .65); }
.platform-badge[data-tienda="nubia"] { --of-ini: #3b2a8f; --of-fin: #150f3d; --of-borde: #b9a8ff; --of-glow: rgba(185, 168, 255, .65); }
.platform-badge[data-tienda="nieion"] { --of-ini: #3d3200; --of-fin: #14110a; --of-borde: #ffd43b; --of-glow: rgba(255, 212, 59, .65); }
.platform-badge[data-tienda="whirlpool"]    { --of-ini: #44484f; --of-fin: #15171a; --of-borde: #f5c542; --of-glow: rgba(238, 177, 17, .7); }
.platform-badge[data-tienda="ebay"]         { --of-ini: #35cc2a; --of-fin: #067d15; --of-borde: #96ef88; --of-glow: rgba(45, 200, 40, .76); }
@keyframes tiendaLatido {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 0 7px 0 var(--of-glow), 0 2px 6px rgba(3, 10, 28, .24); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 0 20px 2px var(--of-glow), 0 2px 6px rgba(3, 10, 28, .24); }
}
@keyframes tiendaBrillo { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .platform-badge[data-tienda] { animation: none; }
  .platform-badge[data-tienda]::after { display: none; }
}
/* La fila de la insignia deja respirar el halo y, si no cabe junto a
   "NUEVO", este baja de renglon en vez de cortar el nombre. */
.result-badge-row, .result-card .result-badge-row, .showcase-card .result-badge-row, .cmpv-card .result-badge-row { overflow: visible; flex-wrap: wrap; row-gap: .35rem; }
.result-badge-row .platform-badge[data-tienda] { flex: 0 1 auto; min-width: 0; }
@media (max-width: 719px) {
  .result-card .platform-badge[data-tienda], .showcase-card .platform-badge[data-tienda] { font-size: .74rem; padding: .28rem .62rem .28rem .5rem; gap: .32rem; }
}

/* 3-6. SOLO CELULAR HORIZONTAL (pantalla de poca altura). */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  /* 3. Buscador bajo, en el renglon del logo; crece al tocarlo. */
  .site-header .container { flex-wrap: nowrap; min-height: 0; padding-block: .3rem; column-gap: .7rem; }
  .searchbar.header-search { order: 0; flex: 1 1 auto; max-width: none; margin-left: .4rem; padding: .08rem .12rem .08rem .6rem; gap: .3rem; box-shadow: 0 2px 8px rgba(4, 12, 32, .3); transition: padding .2s ease; }
  .searchbar.header-search svg { width: 14px; height: 14px; }
  .searchbar.header-search input { font-size: .76rem; padding: .16rem .1rem; }
  .searchbar.header-search .btn { padding: .2rem .65rem; font-size: .72rem; box-shadow: none; }
  .searchbar.header-search .search-scope { font-size: .66rem; padding: .12rem .42rem; }
  .searchbar.header-search:focus-within { padding: .26rem .26rem .26rem .85rem; }
  .searchbar.header-search:focus-within input { font-size: 16px; padding: .36rem .1rem; }
  .searchbar.header-search:focus-within .btn { padding: .45rem .9rem; font-size: .82rem; }

  /* 5. Mascota pequeña junto a "productos"; el texto en una linea debajo. */
  .cmpv-top, .cmpv-top.has-video {
    display: grid; grid-template-columns: auto 64px 1fr; grid-template-areas: "titulo mascota ." "sub sub sub";
    align-items: center; column-gap: .6rem; row-gap: .15rem; margin-bottom: .45rem;
  }
  .cmpv-top-copy { display: contents; }
  .cmpv-title { grid-area: titulo; margin: 0; font-size: 1.15rem; }
  .cmpv-top-mascot { grid-area: mascota; }
  .cmpv-top-mascot img { max-width: 64px; margin: 0; }
  .cmpv-top-video { display: none; }
  /* 4. Texto y selector de secciones en una fila; "Ver todo" mas chico. */
  .cmpv-sub { grid-area: sub; max-width: none; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; }
  .cmpv-picker { gap: .6rem; padding: .45rem .7rem; }
  .cmpv-picker-opts { flex-wrap: nowrap; gap: .75rem; }
  .cmpv-check-text { font-size: .76rem; white-space: nowrap; }
  .cmpv-check-box { width: 17px; height: 17px; }
  .cmpv-picker-actions { gap: .2rem; flex-wrap: nowrap; }
  .cmpv-btn-all, .cmpv-btn-clear { padding: .3rem .65rem; font-size: .74rem; gap: .28rem; }
  .cmpv-btn-all svg, .cmpv-btn-clear svg { width: 14px; height: 14px; }

  /* 6. El producto se ve sin bajar: tarjeta acostada con foto grande. */
  .view-toolbar-inner { padding-block: .15rem; min-height: 0; }
  .compare-scroll-hint:not([hidden]) { display: none; }
  .cmpv-card {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "img badge" "img name" "img price" "img cta";
    column-gap: .7rem; row-gap: .15rem; align-items: center; padding: .6rem; text-align: left;
  }
  .cmpv-card-img, img.cmpv-card-img { grid-area: img; width: 96px; max-width: 96px; height: 96px; object-fit: contain; margin: 0; align-self: center; }
  /* Con 4 o mas productos la columna es angosta: foto de 64 px. */
  .cmpv-inner[data-cols="4"] .cmpv-card, .cmpv-inner[data-cols="5"] .cmpv-card, .cmpv-inner[data-cols="6"] .cmpv-card { grid-template-columns: 64px minmax(0, 1fr); column-gap: .5rem; }
  .cmpv-inner[data-cols="4"] .cmpv-card-img, .cmpv-inner[data-cols="5"] .cmpv-card-img, .cmpv-inner[data-cols="6"] .cmpv-card-img { width: 64px; max-width: 64px; height: 64px; }
  .cmpv-card .result-badge-row { grid-area: badge; justify-content: flex-start; margin: 0; padding-right: 60px; }
  .cmpv-card-name { grid-area: name; text-align: left; margin: 0; }
  .cmpv-card .result-price-row { grid-area: price; justify-content: flex-start; text-align: left; }
  .cmpv-card-cta, .cmpv-card .btn-primary.cmpv-card-cta { grid-area: cta; margin-top: .2rem; width: auto; justify-self: start; padding: .3rem .9rem; }
}

/* =================================================================
   PASTILLA DE OFERTAS DEL HERO (27/09/2026)
   Va en la fila de redes, justo despues de YouTube. Pedido del
   usuario: color llamativo, que brille y se mueva (no estatica) y
   texto corto. Degradado magenta-naranja-amarillo que fluye, un
   destello que la cruza y un pulso suave. Con "reducir movimiento"
   se queda quieta.
   ================================================================= */
.hero-deal-pill {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem .55rem .8rem; border-radius: 999px;
  font-size: .92rem; font-weight: 900; line-height: 1.2; letter-spacing: .01em;
  color: #fff; text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(120, 0, 40, .45);
  background: linear-gradient(90deg, #ff006e 0%, #ff4d00 30%, #ffb800 50%, #ff4d00 70%, #ff006e 100%);
  background-size: 300% 100%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 6px 22px rgba(255, 0, 110, .55);
  animation: ceDealFlow 5s linear infinite, ceDealPulse 1.8s ease-in-out infinite;
  transition: transform .16s ease;
}
.hero-deal-pill::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -60%;
  width: 45%; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  animation: ceDealShine 2.6s ease-in-out infinite;
}
.hero-deal-pill:hover, .hero-deal-pill:focus-visible { transform: translateY(-2px) scale(1.03); }
.hero-deal-pill[hidden] { display: none; }
.hero-deal-pill-icon { font-size: 1.15em; filter: drop-shadow(0 0 4px rgba(255, 220, 0, .9)); }
@keyframes ceDealFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes ceDealShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes ceDealPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 6px 22px rgba(255, 0, 110, .55); }
  50% { box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 6px 30px rgba(255, 140, 0, .9); }
}
@media (max-width: 719px) {
  .hero-social { align-items: center; }
  .hero-deal-pill { font-size: .74rem; padding: .36rem .8rem .36rem .55rem; gap: .3rem; }
}
@media (max-width: 420px) {
  .hero-deal-pill { font-size: .7rem; padding: .32rem .7rem .32rem .5rem; }
}
/* Manita que "presiona" la pastilla (pedido del usuario): da un toque
   corto cada segundo y medio para que se entienda que es un boton. */
.hero-deal-pill-hand {
  display: inline-block; font-size: 1.2em; margin-left: .1rem;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
  animation: ceDealTap 1.5s ease-in-out infinite;
}
@keyframes ceDealTap {
  0%, 55%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-4px) rotate(-8deg) scale(1.05); }
  40% { transform: translateY(2px) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-deal-pill, .hero-deal-pill::after, .hero-deal-pill-hand { animation: none; }
}

/* =================================================================
   BANNER NUEVO DEL HERO (27/09/2026)
   - Escritorio y teléfono horizontal: la imagen apaisada completa
     (2119x742), sin recortes.
   - Teléfono vertical: <picture> sirve la versión vertical (1080x1407)
     armada con las mismas piezas (titular + tiendas, bolsa + lemas,
     beneficios y una franja libre al pie); se muestra ENTERA (se anula
     el recorte 3/2 que necesitaba el banner anterior).
   - Redes + pastilla de ofertas: SIGUEN encima de la imagen, en el
     hueco libre de abajo a la izquierda (debajo de las tiendas y a la
     izquierda de la franja de beneficios). Ahí solo cabe una fila
     compacta, así que en todas las pantallas las redes van como
     glifos redondos (el nombre sigue en el aria-label).
   ================================================================= */
.hero-banner-media picture { display: block; }
@media (max-width: 719px) and (orientation: portrait) {
  .hero-banner-img { aspect-ratio: auto; object-fit: fill; }
}
.hero-social {
  left: 3.2%; bottom: 3.8%; max-width: 40%;
  flex-wrap: nowrap; align-items: center; gap: clamp(.3rem, .6vw, .6rem);
}
.hero-social .btn-social {
  padding: clamp(.22rem, .35vw, .4rem); gap: 0; border-radius: 999px;
}
.hero-social .btn-social-mark { width: clamp(18px, 2.1vw, 36px); height: clamp(18px, 2.1vw, 36px); }
.hero-social .btn-social-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-social .hero-deal-pill {
  font-size: clamp(.64rem, 1.05vw, 1.05rem);
  padding: clamp(.28rem, .45vw, .55rem) clamp(.6rem, 1vw, 1.2rem) clamp(.28rem, .45vw, .55rem) clamp(.45rem, .7vw, .85rem);
}
/* Teléfono vertical: el hueco libre es la franja del pie de la imagen
   vertical, que ocupa todo el ancho. */
@media (max-width: 719px) and (orientation: portrait) {
  .hero-social { left: 50%; bottom: 2.6%; transform: translateX(-50%); max-width: 94%; gap: .4rem; }
  .hero-social .btn-social-mark { width: 22px; height: 22px; }
  .hero-social .btn-social { padding: .32rem; }
  .hero-social .hero-deal-pill { font-size: .78rem; padding: .38rem .85rem .38rem .6rem; }
}

/* =============================================================
   HOME 29/09/2026 — 6 a 7 tarjetas por fila + fondos de seccion

   6 tarjetas (2 filas de 3 en tablet, 3 filas de 2 en telefono; 1 fila
   de 6 en escritorio). La 7a tarjeta solo se ve en pantallas >=1700px,
   donde el contenedor de la home se ensancha (1560px; 1920px desde
   2400px, p. ej. 4K) y caben 7 en una fila. Solo afecta a las
   secciones de la home que tienen estas rejillas.
   ============================================================= */
.product-grid, .offer-grid, .showcase-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.product-grid > :nth-child(n+7), .offer-grid > :nth-child(n+7), .showcase-grid > :nth-child(n+7) { display: none; }
@media (min-width: 1700px) {
  .section:has([data-offers], [data-ebay-offers], [data-products], [data-showcase-grid]) > .container { max-width: 1560px; }
  .product-grid, .offer-grid, .showcase-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .product-grid > :nth-child(7), .offer-grid > :nth-child(7), .showcase-grid > :nth-child(7) { display: flex; }
}
@media (min-width: 2400px) {
  .section:has([data-offers], [data-ebay-offers], [data-products], [data-showcase-grid]) > .container { max-width: 1920px; }
}
@media (max-width: 1279px) { .product-grid, .offer-grid, .showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799px) { .product-grid, .offer-grid, .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } }
/* Botones de eBay apilados en telefono: "Comprar en eBay" ya no se corta */
@media (max-width: 700px) {
  .ebay-section .result-actions { display: grid; grid-template-columns: 1fr; gap: .4rem; }
  .ebay-section .result-actions .btn { width: 100%; min-width: 0; white-space: nowrap; }
}

/* Fondo de "Ofertas que encontramos" (imagen nueva, nombre nuevo) */
.ofertas-section { background: #1e56c8 url("assets/img/fondo-ofertas-v3.jpg") right top / cover no-repeat; }
.ofertas-section .section-head .eyebrow,
.ofertas-section .section-head .section-title,
.ofertas-section .section-head .section-sub { color: #fff; }
/* Fondo de "Ofertas de eBay" (bolsa) */
.ebay-section { background: #e8f6ec url("assets/img/fondo-ebay-bolsa-v3.jpg") right top / cover no-repeat; }
/* Fondos de "Descubre": rotan con la categoria (main data-bg 0-3) */
.showcase-section { background-repeat: no-repeat; background-position: right center; background-size: auto 100%; }
.showcase-section[data-bg="0"] { background-image: url("assets/img/fondo-descubre-carrito-v2.jpg"); background-color: #f4ebe1; }
.showcase-section[data-bg="1"] { background-image: url("assets/img/fondo-descubre-categorias-v2.jpg"); background-color: #c7e2f7; }
.showcase-section[data-bg="2"] { background-image: url("assets/img/fondo-descubre-sala-v2.jpg"); background-color: #f4efea; }
.showcase-section[data-bg="3"] { background-image: url("assets/img/fondo-descubre-tienda-v2.jpg"); background-color: #efe2d4; }
@media (max-width: 700px) {
  .showcase-section[data-bg] { background-size: cover; background-position: center; background-blend-mode: lighten; }
  .showcase-section[data-bg="0"], .showcase-section[data-bg="1"], .showcase-section[data-bg="2"], .showcase-section[data-bg="3"] { background-color: rgba(255, 255, 255, .72); }
}
/* 29/09/2026: en telefono "Productos que vale la pena comparar" muestra 6
   (antes 4), igual que Ofertas, eBay y Descubre. Anula el limite de 4. */
@media (max-width: 719px) {
  [data-products] .result-card:nth-child(5), [data-products] .result-card:nth-child(6) { display: flex; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  [data-products] .result-card:nth-child(5), [data-products] .result-card:nth-child(6) { display: flex; }
}

/* =============================================================
   RESULTADOS EN ESCRITORIO (30/09/2026, jesus): la búsqueda, las
   categorías, las tiendas y las ofertas mostraban 3 tarjetas por fila
   en una pantalla de 1920 px. Ahora igual que la home: 5 columnas desde
   1280 px, 6 desde 1500 px y 7 desde 1700 px, con la tarjeta compacta
   de la home (la descripción, la fecha y las ventas siguen completas
   en la ficha). Bajo 1280 px no cambia nada.
   ============================================================= */
@media (min-width: 1280px) {
  .result-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
  .result-grid .result-card { padding: .6rem; border-radius: var(--r-md); min-width: 0; }
  .result-grid .result-thumb { aspect-ratio: 1 / 1; margin-bottom: .45rem; }
  .result-grid .result-name {
    font-size: .82rem; line-height: 1.3; margin-bottom: .35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .result-grid .platform-badge { font-size: .66rem; padding: .12rem .45rem .12rem .28rem; }
  .result-grid .result-price-row { gap: .35rem; margin-bottom: .35rem; flex-wrap: wrap; }
  .result-grid .price-now { font-size: 1.02rem; }
  .result-grid .price-before { font-size: .75rem; }
  .result-grid .result-actions { gap: .4rem; margin-top: .45rem; }
  .result-grid .result-actions .btn { font-size: .74rem; padding: .42rem .6rem; }
  .result-grid .result-desc,
  .result-grid .price-freshness,
  .result-grid .result-recent-sales,
  .result-grid .result-meta-line:not(.result-store-count) { display: none; }
  .result-grid .result-rating-row:has(.not-available) { display: none; }
}
@media (min-width: 1500px) { .result-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1700px) {
  .result-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .results-grid-wrap, .results-head { max-width: 1560px; margin-inline: auto; }
}

/* ---- ESCRITORIO (01/10/2026): rediseño del panel de tiendas ----
   A peticion del usuario: el panel crecera con cada tienda nueva, asi
   que en computadora las ACTIVAS van en 4 columnas y como maximo 3
   filas (12 tiendas). Las demas quedan tras "Ver todas las tiendas".
   "Proximamente" deja de ser una columna lateral y pasa a una franja
   delgada bajo las activas: lo que esta disponible manda. */
.vt-mas-largo { display: none; }
@media (min-width: 1041px) {
  .tiendas-panel { grid-template-columns: minmax(0, 1fr); }
  .tiendas-soon {
    grid-column: 1; grid-row: 3; padding: 0; border-left: 0;
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding-top: .15rem;
  }
  .tiendas-pie { grid-row: 4; }
  .tiendas-soon-head { margin: 0; grid-template-columns: auto auto; gap: 0 .45rem; }
  .tiendas-soon-ico { width: 20px; height: 20px; grid-row: auto; }
  .tiendas-soon-head b { font-size: .8rem; }
  .tiendas-soon-head span { display: none; }
  .tiendas-soon-list { display: flex; flex-wrap: wrap; gap: .5rem; }
  .tienda-soon-card { height: 38px; padding: 0 .75rem 0 .3rem; gap: .45rem; box-shadow: none; opacity: .92; }
  .tienda-soon-marca { width: 26px; height: 26px; }
  .tienda-soon-marca.es-wordmark { min-width: 26px; height: 22px; }
  .tienda-soon-marca[data-marca="lenovo"] { width: 40px; height: 22px; }
  .tienda-soon-nombre { font-size: .78rem; }
  .tienda-soon-badge { height: 20px; font-size: .52rem; padding: 0 .45rem; }
  .tienda-soon-go { display: none; }

  .tiendas-activas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .tienda-card { height: 62px; gap: .4rem; padding: 0 .4rem 0 .35rem; }
  .tienda-card-marca { width: 44px; height: 44px; }
  .tienda-card-marca[data-marca="lenovo"] { width: 70px; height: 38px; }
  .tienda-card-nombre { font-size: .9rem; }
  /* Solo el check verde (como en movil): asi el nombre cabe entero. */
  .tienda-card-badge { width: 24px; height: 24px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .tienda-card-badge-ico { width: 13px; height: 13px; }
  .tienda-card-go { width: 26px; height: 26px; }
  .tiendas-activas.vt-12:not(.abierto) > .tienda-card:not(.tienda-vertodas):nth-child(n+13) { display: none; }
  .tiendas-activas.vt-12 > .tienda-vertodas {
    display: flex; grid-column: 1 / -1; justify-content: center; align-items: center; gap: .6rem;
    height: 46px; border-radius: 999px; cursor: pointer; font: inherit; color: #fff;
    background: rgba(12, 34, 72, .55);
    border: 2px dashed color-mix(in srgb, #22e06a 70%, transparent);
    box-shadow: 0 0 18px -6px rgba(34, 224, 106, .6);
  }
  .tiendas-activas.vt-12 > .tienda-vertodas:hover,
  .tiendas-activas.vt-12 > .tienda-vertodas:focus-visible { box-shadow: 0 0 26px -4px rgba(34, 224, 106, .85); transform: none; }
  .tiendas-activas .tienda-vertodas-mas { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(34, 224, 106, .14); border: 2px solid #22e06a; color: #22e06a; font-size: 18px; font-weight: 700; line-height: 1; }
  .tiendas-activas .tienda-vertodas-txt { display: flex; align-items: baseline; gap: .35rem; font-size: .95rem; font-weight: 800; }
  .tiendas-activas .vt-mas-largo { display: inline; }
  .tiendas-activas .tienda-vertodas-txt small { font-size: .75rem; font-weight: 600; color: #9db4d8; }
}

/* Mientras main.js arma el panel el hueco no se queda vacio: marco
   tenue con la altura aproximada (sin saltos de pagina al aparecer). */
.hero-stores[data-store-pills]:empty {
  min-height: 560px; border-radius: 22px;
  background: linear-gradient(110deg, #0b1f45 30%, #12305f 50%, #0b1f45 70%) 0 0 / 220% 100%;
  animation: tiendasEsqueleto 1.6s ease-in-out infinite;
}
@keyframes tiendasEsqueleto { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@media (max-width: 1040px) { .hero-stores[data-store-pills]:empty { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { .hero-stores[data-store-pills]:empty { animation: none; } }

/* 13/10/2026: sugerencias cuando una busqueda no da resultados */
.search-suggest { max-width: 640px; margin: -1.5rem auto 2.5rem; text-align: center; }
.search-suggest-title, .search-suggest-status { color: var(--text-soft); font-size: .95rem; margin-bottom: .6rem; }
.search-suggest .ofertas-filters { justify-content: center; flex-wrap: wrap; }
.search-suggest-n { color: var(--text-mute); font-weight: 400; }

/* 14/10/2026: "Ver todos en la tienda" en la busqueda general (js/views.js). */
.search-more:empty { display: none; }
.search-more { margin: .25rem 0 1rem; }
.search-more-title { color: var(--text-soft); font-size: .9rem; margin: 0 0 .4rem; }
.search-more .ofertas-filters { flex-wrap: wrap; }

/* 14/10/2026: tiendas de enlace (Coppel) en la busqueda general. */
.tiendas-enlace { max-width: 640px; margin: 1.5rem auto 2rem; text-align: center; }
.tiendas-enlace-title { color: var(--text-soft); font-size: .95rem; margin: 0 0 .5rem; }
.tiendas-enlace .ofertas-filters { justify-content: center; flex-wrap: wrap; }
.tiendas-enlace-btn { text-decoration: none; font-weight: 600; }
.tiendas-enlace-nota { color: var(--text-mute); font-size: .78rem; margin: .5rem 0 0; }
.tiendas-enlace-compacto { max-width: none; margin: 0 0 1rem; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.tiendas-enlace-compacto .tiendas-enlace-title { margin: 0; font-size: .9rem; }
.tiendas-enlace-compacto .ofertas-filters { justify-content: flex-start; }
.tiendas-enlace-compacto .tiendas-enlace-nota { margin: 0; flex-basis: 100%; }