/* ============================================================================
   VITRINA · Sistema de Diseño
   ----------------------------------------------------------------------------
   Tokens + componentes base. Namespace propio (--v-*) para poder convivir con
   los estilos inline actuales durante la migración sin colisionar.

   Filosofía:
   - Sin gradientes en CTAs. Rellenos sólidos, jerarquía por peso/color.
   - Neutros calibrados con temperatura fría consistente (no slate de Tailwind).
   - Color de estado dentro de la misma familia visual que la marca.
   - Sombras direccionales (luz desde arriba), suaves y en capas.
   - Escala tipográfica real en Poppins con tracking negativo en headings.
   ========================================================================== */

:root {
  /* ---- Marca: Vitrina Teal (paleta definitiva, más profunda) ---- */
  --v-brand-50:  #e9f3f1;
  --v-brand-100: #cfe6e2;
  --v-brand-200: #a0cec8;
  --v-brand-300: #6bb0a8;
  --v-brand-400: #3b8d84;
  --v-brand-500: #12665f;   /* base de marca */
  --v-brand-600: #0e5a55;
  --v-brand-700: #0c4e4a;   /* relleno de CTA primario */
  --v-brand-800: #0a3e3a;
  --v-brand-900: #082f2c;

  /* ---- Acento azul del logo (uso escaso: enlaces, foco de datos) ---- */
  --v-accent-400: #3f92cf;
  --v-accent-500: #1f6fb2;
  --v-accent-600: #1a5c94;

  /* ---- Acción / compra: coral cálido (precios, descuentos, CTA de conversión).
         Regla: ~10% de la pantalla; nunca como fondo de secciones. ---- */
  --v-action-50:  #ffede8;
  --v-action-400: #ff7357;
  --v-action-500: #ff4d2e;   /* precios, badges de descuento, CTA comprar */
  --v-action-600: #e23a1c;   /* hover del CTA */
  --v-action-700: #c02f14;

  /* ---- Destacar (etiquetas "nuevo", estrellas) ---- */
  --v-highlight-400: #ffc53d;
  --v-highlight-500: #ffb000;

  /* ---- WhatsApp (canal principal de venta) ---- */
  --v-wa-500: #25d366;
  --v-wa-600: #1fb755;

  /* ---- Neutros calibrados (fríos, no slate default) ---- */
  --v-ink:       #121615;   /* casi negro con tinte verde-gris */
  --v-neutral-0:   #ffffff;
  --v-neutral-25:  #fafbfb;
  --v-neutral-50:  #f5f7f6;
  --v-neutral-100: #edf0ef;
  --v-neutral-200: #e0e4e3;
  --v-neutral-300: #c8cecd;
  --v-neutral-400: #99a1a0;
  --v-neutral-500: #6b7473;
  --v-neutral-600: #4c5453;
  --v-neutral-700: #383f3e;
  --v-neutral-800: #242928;
  --v-neutral-900: #161a19;

  /* ---- Estados (misma familia, no "plugins" de otro sistema) ---- */
  --v-success-50:  #e9f5ee;
  --v-success-500: #2f9e6f;
  --v-success-600: #24815b;
  --v-success-700: #1d6749;

  --v-warning-50:  #fbf1e2;
  --v-warning-500: #c9820a;
  --v-warning-600: #a66a07;
  --v-warning-700: #855507;

  --v-danger-50:   #fbecea;
  --v-danger-500:  #d1483a;
  --v-danger-600:  #b23a2e;
  --v-danger-700:  #8f2f25;

  --v-info-50:     #e8f1f8;
  --v-info-500:    var(--v-accent-500);
  --v-info-600:    var(--v-accent-600);

  /* ---- Superficies semánticas ---- */
  --v-surface:        var(--v-neutral-0);
  --v-surface-sunken: var(--v-neutral-50);
  --v-surface-raised: var(--v-neutral-0);
  --v-border:         var(--v-neutral-200);
  --v-border-strong:  var(--v-neutral-300);
  --v-text:           var(--v-neutral-900);
  --v-text-secondary: var(--v-neutral-600);
  --v-text-muted:     var(--v-neutral-500);
  --v-text-onbrand:   #ffffff;

  /* ---- Tipografía ---- */
  --v-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --v-size-display: clamp(2.75rem, 1.8rem + 3.4vw, 3.75rem); /* 44 → 60 */
  --v-size-h1:      clamp(2.1rem, 1.6rem + 1.8vw, 2.75rem);  /* 34 → 44 */
  --v-size-h2:      clamp(1.7rem, 1.4rem + 1.1vw, 2.1rem);   /* 27 → 34 */
  --v-size-h3:      1.5rem;
  --v-size-h4:      1.25rem;
  --v-size-body-lg: 1.125rem;
  --v-size-body:    1rem;
  --v-size-sm:      0.9375rem;
  --v-size-caption: 0.8125rem;
  --v-size-overline:0.6875rem;

  --v-weight-regular:  400;
  --v-weight-medium:   500;
  --v-weight-semibold: 600;
  --v-weight-bold:     700;

  --v-tracking-display: -0.03em;
  --v-tracking-heading: -0.02em;
  --v-tracking-tight:   -0.01em;
  --v-tracking-normal:  0;
  --v-tracking-wide:    0.02em;
  --v-tracking-overline:0.12em;

  --v-leading-tight: 1.12;
  --v-leading-snug:  1.3;
  --v-leading-body:  1.6;

  /* ---- Espaciado (escala propia, no múltiplos default) ---- */
  --v-space-3xs: 0.125rem; /* 2  */
  --v-space-2xs: 0.25rem;  /* 4  */
  --v-space-xs:  0.5rem;   /* 8  */
  --v-space-sm:  0.75rem;  /* 12 */
  --v-space-md:  1rem;     /* 16 */
  --v-space-lg:  1.5rem;   /* 24 */
  --v-space-xl:  2rem;     /* 32 */
  --v-space-2xl: 3rem;     /* 48 */
  --v-space-3xl: 4rem;     /* 64 */
  --v-space-4xl: 6rem;     /* 96 */

  /* ---- Radios ---- */
  --v-radius-xs:   6px;
  --v-radius-sm:   10px;
  --v-radius-md:   14px;
  --v-radius-lg:   20px;
  --v-radius-xl:   28px;
  --v-radius-pill: 999px;

  /* ---- Sombras direccionales (luz desde arriba) ---- */
  --v-shadow-xs: 0 1px 2px rgba(18, 22, 21, 0.05);
  --v-shadow-sm: 0 1px 2px rgba(18, 22, 21, 0.04), 0 2px 4px rgba(18, 22, 21, 0.05);
  --v-shadow-md: 0 2px 4px rgba(18, 22, 21, 0.04), 0 6px 14px rgba(18, 22, 21, 0.07);
  --v-shadow-lg: 0 4px 8px rgba(18, 22, 21, 0.04), 0 14px 32px rgba(18, 22, 21, 0.10);
  --v-shadow-xl: 0 8px 16px rgba(18, 22, 21, 0.06), 0 28px 60px rgba(18, 22, 21, 0.14);
  --v-ring:      0 0 0 3px rgba(18, 102, 95, 0.22);
  --v-ring-danger: 0 0 0 3px rgba(209, 72, 58, 0.22);

  /* ---- Movimiento ---- */
  --v-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --v-dur-fast: 120ms;
  --v-dur: 200ms;
  --v-dur-slow: 320ms;
}

/* ============================================================================
   PRIMITIVAS TIPOGRÁFICAS
   ========================================================================== */
.v-display,
.v-h1, .v-h2, .v-h3, .v-h4 {
  font-family: var(--v-font-sans);
  color: var(--v-text);
  margin: 0;
}

.v-display {
  font-size: var(--v-size-display);
  font-weight: var(--v-weight-bold);
  letter-spacing: var(--v-tracking-display);
  line-height: var(--v-leading-tight);
}
.v-h1 {
  font-size: var(--v-size-h1);
  font-weight: var(--v-weight-bold);
  letter-spacing: var(--v-tracking-heading);
  line-height: var(--v-leading-tight);
}
.v-h2 {
  font-size: var(--v-size-h2);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-heading);
  line-height: var(--v-leading-snug);
}
.v-h3 {
  font-size: var(--v-size-h3);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-tight);
  line-height: var(--v-leading-snug);
}
.v-h4 {
  font-size: var(--v-size-h4);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-tight);
  line-height: var(--v-leading-snug);
}
.v-body-lg {
  font-size: var(--v-size-body-lg);
  font-weight: var(--v-weight-regular);
  line-height: var(--v-leading-body);
  color: var(--v-text-secondary);
}
.v-body {
  font-size: var(--v-size-body);
  font-weight: var(--v-weight-regular);
  line-height: var(--v-leading-body);
  color: var(--v-text-secondary);
}
.v-caption {
  font-size: var(--v-size-caption);
  font-weight: var(--v-weight-medium);
  color: var(--v-text-muted);
  line-height: 1.45;
}
.v-overline {
  font-size: var(--v-size-overline);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-overline);
  text-transform: uppercase;
  color: var(--v-text-muted);
}

/* ============================================================================
   BOTONES · rellenos sólidos, sin gradiente. Jerarquía por color/peso.
   ========================================================================== */
.v-btn {
  --_bg: var(--v-neutral-900);
  --_fg: #fff;
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-space-xs);
  font-family: var(--v-font-sans);
  font-size: var(--v-size-sm);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-tight);
  line-height: 1;
  padding: 0.7rem 1.15rem;
  border-radius: var(--v-radius-sm);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--v-dur-fast) var(--v-ease),
              box-shadow var(--v-dur) var(--v-ease),
              background-color var(--v-dur) var(--v-ease),
              border-color var(--v-dur) var(--v-ease),
              color var(--v-dur) var(--v-ease);
}
.v-btn:active { transform: translateY(0.5px) scale(0.995); }
.v-btn:focus-visible { outline: none; box-shadow: var(--v-ring); }

.v-btn--primary {
  --_bg: var(--v-brand-700);
  --_fg: var(--v-text-onbrand);
  box-shadow: var(--v-shadow-xs);
}
.v-btn--primary:hover { --_bg: var(--v-brand-800); box-shadow: var(--v-shadow-sm); }

.v-btn--secondary {
  --_bg: var(--v-neutral-0);
  --_fg: var(--v-neutral-800);
  --_bd: var(--v-border-strong);
  box-shadow: var(--v-shadow-xs);
}
.v-btn--secondary:hover { --_bg: var(--v-neutral-50); --_bd: var(--v-neutral-400); }

.v-btn--ghost {
  --_bg: transparent;
  --_fg: var(--v-neutral-700);
}
.v-btn--ghost:hover { --_bg: var(--v-neutral-100); --_fg: var(--v-neutral-900); }

.v-btn--danger {
  --_bg: var(--v-danger-500);
  --_fg: #fff;
}
.v-btn--danger:hover { --_bg: var(--v-danger-600); }
.v-btn--danger:focus-visible { box-shadow: var(--v-ring-danger); }

.v-btn--sm { padding: 0.5rem 0.85rem; font-size: var(--v-size-caption); border-radius: var(--v-radius-xs); }
.v-btn--lg { padding: 0.9rem 1.5rem; font-size: var(--v-size-body); }
.v-btn--block { width: 100%; }
.v-btn--icon { padding: 0.6rem; width: 2.5rem; height: 2.5rem; }

/* ============================================================================
   CARD · superficie sólida, borde 1px neutro, sombra fina, lift sutil.
   ========================================================================== */
.v-card {
  background: var(--v-surface-raised);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-lg);
  box-shadow: var(--v-shadow-sm);
  transition: transform var(--v-dur) var(--v-ease),
              box-shadow var(--v-dur) var(--v-ease),
              border-color var(--v-dur) var(--v-ease);
}
.v-card--pad { padding: var(--v-space-lg); }
.v-card--interactive { cursor: pointer; }
.v-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--v-shadow-lg);
  border-color: var(--v-border-strong);
}

/* ============================================================================
   BADGES · NO usan la fórmula "borde + fondo opaco del mismo color" en todo.
   Estados = fondo neutro tenue + texto de color + punto sólido (sin pulse).
   Tag/chip = neutro plano. Numérico fuerte = relleno sólido.
   ========================================================================== */
.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--v-size-caption);
  font-weight: var(--v-weight-medium);
  line-height: 1;
  padding: 0.3rem 0.6rem;
  border-radius: var(--v-radius-xs);
  background: var(--v-neutral-100);
  color: var(--v-neutral-700);
}
.v-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.v-badge--success { background: var(--v-success-50); color: var(--v-success-700); }
.v-badge--warning { background: var(--v-warning-50); color: var(--v-warning-700); }
.v-badge--danger  { background: var(--v-danger-50);  color: var(--v-danger-700); }
.v-badge--info    { background: var(--v-info-50);    color: var(--v-info-600); }

/* Chip neutro plano (tags, categorías) — sin color de estado */
.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--v-size-caption);
  font-weight: var(--v-weight-medium);
  padding: 0.3rem 0.65rem;
  border-radius: var(--v-radius-pill);
  background: var(--v-neutral-100);
  color: var(--v-neutral-600);
  border: 1px solid transparent;
}
.v-chip--outline { background: transparent; border-color: var(--v-border); }

/* Contador sólido (uso puntual, alto contraste) */
.v-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  font-size: var(--v-size-overline);
  font-weight: var(--v-weight-bold);
  border-radius: var(--v-radius-pill);
  background: var(--v-danger-500);
  color: #fff;
}

/* ============================================================================
   INPUTS · limpios, borde 1px, label arriba, foco con anillo de marca.
   ========================================================================== */
.v-field { display: flex; flex-direction: column; gap: var(--v-space-2xs); }
.v-label {
  font-size: var(--v-size-caption);
  font-weight: var(--v-weight-medium);
  color: var(--v-neutral-700);
}
.v-input,
.v-textarea,
.v-select {
  font-family: var(--v-font-sans);
  font-size: var(--v-size-sm);
  color: var(--v-text);
  background: var(--v-surface);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  padding: 0.6rem 0.8rem;
  width: 100%;
  transition: border-color var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease);
}
.v-input::placeholder,
.v-textarea::placeholder { color: var(--v-neutral-400); }
.v-input:focus,
.v-textarea:focus,
.v-select:focus {
  outline: none;
  border-color: var(--v-brand-500);
  box-shadow: var(--v-ring);
}
.v-input:disabled { background: var(--v-neutral-50); color: var(--v-neutral-400); cursor: not-allowed; }
.v-hint { font-size: var(--v-size-caption); color: var(--v-text-muted); }
.v-hint--error { color: var(--v-danger-600); }

/* Input con icono adjunto */
.v-input-group { position: relative; display: flex; align-items: center; }
.v-input-group > .v-input-icon {
  position: absolute; left: 0.75rem;
  color: var(--v-neutral-400);
  pointer-events: none;
  font-size: 0.9rem;
}
.v-input-group > .v-input { padding-left: 2.25rem; }

/* ============================================================================
   UTILIDADES mínimas del sistema
   ========================================================================== */
.v-stack { display: flex; flex-direction: column; }
.v-row   { display: flex; align-items: center; }
.v-divider { height: 1px; background: var(--v-border); border: 0; }
.v-surface-sunken { background: var(--v-surface-sunken); }

/* ============================================================================
   VV · Look marketplace "Vitrina Viva" (scope .vv)
   Estándar visual de las páginas públicas (index, categorías, explorar…).
   Marca = teal (confianza). Acción = coral (compra). WhatsApp = verde.
   ========================================================================== */
.vv {
    /* Marca */
    --vv-brand:      var(--v-brand-600, #0E5A55);
    --vv-brand-600:  var(--v-brand-700, #0C4E4A);
    --vv-brand-900:  var(--v-brand-800, #0A3E3A);
    /* Acción / compra (coral cálido) */
    --vv-hot:        var(--v-action-500, #FF4D2E);
    --vv-hot-dark:   var(--v-action-600, #E23A1C);
    --vv-hot-soft:   var(--v-action-50, #FFEDE8);
    /* Destacar */
    --vv-amber:      var(--v-highlight-500, #FFB000);
    /* WhatsApp */
    --vv-wa:         var(--v-wa-500, #25D366);
    --vv-wa-dark:    var(--v-wa-600, #1FB755);
    /* Neutros */
    --vv-ink:        #14201E;
    --vv-muted:      #667370;
    --vv-line:       #E4EAE8;
    --vv-surface:    #ffffff;
    --vv-sunken:     #F3F6F5;
    --vv-radius:     16px;
    background: var(--vv-sunken);
}

.vv * { box-sizing: border-box; }
.vv-wrap { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }

/* ── Hero compacto con buscador protagonista ── */
.vv-hero {
    background: linear-gradient(120deg, var(--vv-brand-900) 0%, var(--vv-brand) 100%);
    color: #fff;
    padding: 2.5rem 1rem 2rem;
}
.vv-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.vv-hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.1; margin: 0 0 .5rem; letter-spacing: -0.02em;
}
.vv-hero p { color: rgba(255,255,255,.82); margin: 0 0 1.4rem; font-size: 1rem; }
.vv-hero p:last-child { margin-bottom: 0; }
.vv-search {
    display: flex; background: #fff; border-radius: 999px;
    padding: .35rem .35rem .35rem 1.1rem; max-width: 640px; margin: 0 auto;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.vv-search input {
    flex: 1; border: 0; outline: 0; font-size: 1rem; color: var(--vv-ink);
    background: transparent;
}
.vv-search button {
    border: 0; cursor: pointer; background: var(--vv-hot); color: #fff;
    font-weight: 600; padding: .65rem 1.4rem; border-radius: 999px;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: background .2s ease;
}
.vv-search button:hover { background: var(--vv-hot-dark); }

/* ── Chips de categorías (scroll horizontal, color por rubro) ── */
.vv-cats {
    display: flex; gap: .6rem; overflow-x: auto; padding: 1rem 0 .5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vv-cats::-webkit-scrollbar { display: none; }
.vv-chip {
    flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center;
    gap: .45rem; text-decoration: none; width: 84px;
}
.vv-chip-ico {
    width: 60px; height: 60px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff; transition: transform .18s ease;
}
.vv-chip:hover .vv-chip-ico { transform: translateY(-3px); }
.vv-chip span {
    font-size: .78rem; color: var(--vv-ink); text-align: center; font-weight: 500;
    line-height: 1.15;
}

/* ── Encabezado de sección ── */
.vv-section { padding: 1.5rem 0; }
.vv-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 0 1rem; gap: 1rem;
}
.vv-sec-head h2 {
    font-family: 'Poppins', sans-serif; font-size: 1.3rem; margin: 0;
    color: var(--vv-ink); letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: .5rem;
}
.vv-sec-head h2 .vv-hot-ico { color: var(--vv-hot); }
.vv-sec-head a { color: var(--vv-brand); font-weight: 600; font-size: .88rem; text-decoration: none; }

/* ── Grid denso de productos ── */
.vv-grid {
    display: grid; gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

/* ── Tarjeta de producto ── */
.vv-card {
    background: var(--vv-surface); border: 1px solid var(--vv-line);
    border-radius: var(--vv-radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vv-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); transform: translateY(-3px); }
.vv-card-media {
    position: relative; display: block; aspect-ratio: 1/1; background: var(--vv-sunken);
    overflow: hidden;
}
.vv-card-media img { width: 100%; height: 100%; object-fit: cover; }
.vv-noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #c8cecd; font-size: 2rem;
}
.vv-badge-discount {
    position: absolute; top: .5rem; left: .5rem;
    background: var(--vv-hot); color: #fff; font-weight: 700; font-size: .8rem;
    padding: .2rem .5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(255,77,46,.38);
}
.vv-badge-finance {
    position: absolute; top: .5rem; right: .5rem;
    background: rgba(20,107,102,.92); color: #fff; font-size: .72rem;
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.vv-card-body { padding: .7rem .7rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.vv-card-cat {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--vv-muted); font-weight: 600;
}
.vv-card-title {
    font-size: .9rem; font-weight: 600; color: var(--vv-ink); text-decoration: none;
    line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.3em;
}
.vv-card-title:hover { color: var(--vv-brand); }
.vv-card-price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.vv-price-now { color: var(--vv-hot-dark); font-weight: 800; font-size: 1.05rem; }
.vv-price-old { color: var(--vv-muted); text-decoration: line-through; font-size: .8rem; }
.vv-card-shop {
    font-size: .72rem; color: var(--vv-muted); display: inline-flex; align-items: center; gap: .3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vv-card-wa {
    margin-top: .3rem; text-align: center; text-decoration: none;
    background: var(--vv-wa); color: #fff; font-weight: 600; font-size: .82rem;
    padding: .45rem; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    transition: background .2s ease;
}
.vv-card-wa:hover { background: var(--vv-wa-dark); }

/* ── Feed de publicaciones ── */
.vv-feed { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vv-post {
    background: #fff; border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vv-post:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); transform: translateY(-3px); }
.vv-post-media { aspect-ratio: 4/3; background: var(--vv-sunken); }
.vv-post-media img { width: 100%; height: 100%; object-fit: cover; }
.vv-post-body { padding: .8rem; display: flex; flex-direction: column; gap: .45rem; }
.vv-post-shop { font-weight: 700; font-size: .85rem; color: var(--vv-ink); }
.vv-post-text {
    font-size: .82rem; color: var(--vv-muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vv-post-meta { display: flex; gap: .9rem; font-size: .74rem; color: var(--vv-muted); }
.vv-post-meta i { color: var(--vv-hot); }

/* ── Empresas destacadas ── */
.vv-shops { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vv-shop {
    background: #fff; border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
    text-decoration: none; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.vv-shop:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); transform: translateY(-3px); }
.vv-shop-logo { height: 130px; background: var(--vv-sunken); display: flex; align-items: center; justify-content: center; }
.vv-shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.vv-shop-logo i { font-size: 2.4rem; color: #c8cecd; }
.vv-shop-body { padding: .8rem; }
.vv-shop-name { font-weight: 700; color: var(--vv-ink); font-size: 1rem; margin: 0 0 .2rem; }
.vv-shop-cat { font-size: .78rem; color: var(--vv-muted); }

/* ── Catálogos: barra de búsqueda + tarjetas del API (/api/businesses) ── */
.vv-biz-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.vv-biz-search {
    flex: 1; min-width: 220px; display: flex; align-items: center; gap: .55rem;
    background: #fff; border: 1px solid var(--vv-line); border-radius: 999px;
    padding: .55rem 1rem; color: var(--vv-muted);
}
.vv-biz-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: .92rem; color: var(--vv-ink);
}
.vv-biz-sort {
    border: 1px solid var(--vv-line); border-radius: 999px; background: #fff;
    padding: .55rem 1rem; font-size: .9rem; color: var(--vv-ink); cursor: pointer; outline: 0;
}
.vv-biz-info { font-size: .82rem; color: var(--vv-muted); margin: 0 0 .8rem; }
.vv-biz-spinner { display: none; justify-content: center; padding: 1.2rem; }
.vv-biz-spinner.visible { display: flex; }
.vv-biz-ring {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid var(--vv-line); border-top-color: var(--vv-brand);
    animation: vv-spin .8s linear infinite;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }
.vv-biz-more {
    display: none; margin: 1rem auto 0; border: 0; cursor: pointer;
    background: var(--vv-brand); color: #fff; font-weight: 600; font-size: .9rem;
    padding: .65rem 1.4rem; border-radius: 999px;
    align-items: center; gap: .45rem; transition: background .2s ease;
}
.vv-biz-more.visible { display: inline-flex; }
.vv-biz-more:hover { background: var(--vv-brand-600); }
.vv-biz-empty {
    grid-column: 1 / -1; text-align: center; color: var(--vv-muted); padding: 2rem;
    border: 1px dashed var(--vv-line); border-radius: var(--vv-radius); background: #fff;
}

/* Tarjetas .business-card (las devuelve /api/businesses), adaptadas al look vv */
.vv .business-card {
    background: #fff; border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
    overflow: hidden; text-decoration: none; color: var(--vv-ink); display: flex; flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vv .business-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); transform: translateY(-3px); }
.vv .business-logo {
    height: 150px; background: var(--vv-sunken);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vv .business-logo img { width: 100%; height: 100%; object-fit: cover; }
.vv .business-logo-placeholder { font-size: 2.6rem; color: #c8cecd; }
.vv .business-info { padding: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.vv .business-name { font-size: 1rem; font-weight: 700; margin: 0; }
.vv .business-categories { font-size: .76rem; color: var(--vv-muted); }
.vv .business-description {
    font-size: .8rem; color: var(--vv-muted); line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vv .business-cta {
    margin-top: .3rem; font-size: .84rem; font-weight: 600; color: var(--vv-brand);
    display: inline-flex; align-items: center; gap: .35rem;
}

/* ── CTA final ── */
.vv-cta {
    margin: 2rem 0; background: linear-gradient(120deg, var(--vv-brand) 0%, var(--vv-brand-900) 100%);
    color: #fff; border-radius: 22px; padding: 2.2rem 1.5rem; text-align: center;
}
.vv-cta h2 { font-family: 'Poppins', sans-serif; margin: 0 0 .5rem; font-size: 1.5rem; }
.vv-cta p { color: rgba(255,255,255,.85); margin: 0 0 1.3rem; }
.vv-cta a {
    background: var(--vv-hot); color: #fff; font-weight: 700; text-decoration: none;
    padding: .8rem 1.6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .5rem;
    transition: background .2s ease;
}
.vv-cta a:hover { background: var(--vv-hot-dark); }

.vv-empty {
    text-align: center; color: var(--vv-muted); padding: 2rem; font-size: .9rem;
    border: 1px dashed var(--vv-line); border-radius: var(--vv-radius); background: #fff;
}

/* ── Grids de páginas de categorías ── */
.vv-catgrid {
    display: grid; gap: .85rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.vv-catcard {
    background: #fff; border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
    padding: 1.4rem 1rem; text-align: center; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vv-catcard:hover { box-shadow: 0 10px 24px rgba(0,0,0,.10); transform: translateY(-3px); }
.vv-catcard-ico {
    width: 62px; height: 62px; border-radius: 18px; color: #fff; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.vv-catcard h3 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--vv-ink); }
.vv-catcard-count { font-size: .78rem; color: var(--vv-muted); }

/* ── Migas de pan (breadcrumb) ── */
.vv-crumbs {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--vv-muted); padding: 1rem 0 0;
}
.vv-crumbs a { color: var(--vv-brand); text-decoration: none; font-weight: 600; }
.vv-crumbs i { font-size: .6rem; }

/* ── Franja horizontal de productos (strip) ── */
.vv-strip {
    display: flex; gap: .85rem; overflow-x: auto; padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.vv-strip .vv-card { flex: 0 0 172px; }

@media (max-width: 640px) {
    .vv-grid { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); }
    .vv-catgrid { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); }
}