/* Verbenas — responsive overrides.
   The base pages use inline styles with no breakpoints, so these rules
   use !important to win over them at narrow viewports. */

html, body { max-width: 100vw; overflow-x: hidden; }
img, svg { max-width: 100%; }

/* "También desde el navegador": always one block above the other at
   100% width, at every viewport — the 50/50 split made the browser
   mockup look cramped, per explicit request. */
.vb-browser-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

@media (max-width: 900px) {
  .vb-hero-grid,
  .vb-step-grid,
  .vb-two-col,
  .vb-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .vb-step-grid-rev > *:first-child { order: 2 !important; }
  .vb-step-grid-rev > *:last-child { order: 1 !important; }

  .vb-hero-phone-wrap {
    width: 100% !important;
    max-width: 402px;
    height: auto !important;
    margin: 0 auto;
    box-sizing: border-box !important;
  }
  .vb-step-phone-wrap {
    width: 100% !important;
    max-width: 360px;
    height: auto !important;
    margin: 0 auto;
    box-sizing: border-box !important;
  }
  .vb-step-phone-scale {
    width: 100% !important;
    transform: none !important;
    height: auto !important;
  }

  .vb-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .vb-3col-grid { grid-template-columns: 1fr !important; }
  .vb-precios-grid { grid-template-columns: 1fr !important; }
  .vb-mini-grid { grid-template-columns: 1fr !important; }
  .vb-mini-grid-sub { grid-template-columns: 1fr !important; }

  .vb-faq-grid { gap: 24px !important; }

  .vb-browser-mock { max-width: 100%; box-sizing: border-box !important; }
  .vb-urlbar {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .vb-hero-h1 { font-size: 42px !important; }
  .vb-h2-lg { font-size: 38px !important; }
  .vb-h2 { font-size: 32px !important; }
  .vb-h3 { font-size: 26px !important; }
  .vb-h1-sub { font-size: 36px !important; }
}

@media (max-width: 640px) {
  .vb-nav-links { display: none !important; }
  .vb-nav-cta { display: none !important; }
  .vb-nav-inner { padding: 0 16px !important; }

  .vb-store-row { flex-direction: column !important; align-items: stretch !important; }
  .vb-store-btn { width: 100% !important; box-sizing: border-box !important; justify-content: center !important; }

  .vb-hero-h1 { font-size: 34px !important; line-height: 1.05 !important; }
  .vb-h2-lg { font-size: 30px !important; }
  .vb-h2 { font-size: 26px !important; }
  .vb-h3 { font-size: 22px !important; }
  .vb-h1-sub { font-size: 30px !important; }

  .vb-stats-grid { grid-template-columns: 1fr !important; }

  /* Comparison table: labels (Gratis/Plus) matter here, so instead of
     stacking (which would lose the header) it becomes a swipeable
     horizontal carousel — rows stay stacked vertically as normal, but
     the whole block scrolls sideways together with snap points at each
     column, since every row shares the same column widths. */
  .vb-compare-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .vb-compare-wrap::-webkit-scrollbar { height: 5px; }
  .vb-compare-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
  .vb-compare-row { grid-template-columns: 150px 120px 120px !important; min-width: 390px; }
  .vb-compare-row > div { scroll-snap-align: start; }

  /* Cookies table: each cell is a full sentence, reads fine stacked. */
  .vb-cookies-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .vb-cookies-head { display: none !important; }

  .vb-footer-inner { flex-direction: column !important; align-items: flex-start !important; text-align: left; }
}

@media (max-width: 420px) {
  .vb-hero-h1 { font-size: 30px !important; }
}