/* =============================================
   SIEMETRAFO — CSS RESPONSIVO COMPLETO v2
   Mobile First — Ajuste fino para todos os dispositivos
   Breakpoints: 480px | 768px | 900px | 1024px | 1280px
============================================= */

/* ══════════════════════════════════════════
   BASE GLOBAL
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }
img { max-width: 100%; height: auto; display: block; }

/* Evita zoom indesejado em inputs no iOS */
input, select, textarea, button {
  font-size: 16px;
  -webkit-appearance: none;
  border-radius: 0;
}
input[type="checkbox"],
input[type="radio"] {
  width: 20px; height: 20px;
  cursor: pointer;
}

/* Touch targets mínimos Google/Apple: 44px */
a, button, [role="button"],
.btn, .category-card, .product-card,
.mobile-nav a, .nav-link {
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .topbar { display: none !important; }

}

/* ══════════════════════════════════════════
   HEADER + NAV MOBILE
══════════════════════════════════════════ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* Esconde nav desktop em telas pequenas */
@media (max-width: 900px) {
  .main-nav { display: none !important; }
  .btn-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .header-inner {
    height: 60px !important;
    gap: 8px;
  }
  .logo-img { height: 36px !important; }
  .logo-text { display: none; }
  .header-actions { gap: 6px; }
}

@media (min-width: 901px) {
  .btn-menu-toggle { display: none !important; }
}

/* Menu Mobile — Gaveta aberta */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: #0f1f5c;
  padding: 0;
  gap: 0;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  border-top: 2px solid var(--red, #C61E29);
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open { display: flex; }

.mobile-nav a {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: rgba(255,255,255,.9);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
  min-height: 52px;
  gap: 10px;
}
.mobile-nav a:active,
.mobile-nav a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
/* Links especiais no menu mobile */
.mobile-nav a.nav-promo,
.mobile-nav a.nav-promo:hover,
.mobile-nav a.nav-promo:active { color: #ff4444 !important; }
.mobile-nav a.nav-calc,
.mobile-nav a.nav-calc:hover,
.mobile-nav a.nav-calc:active  { color: #fbbf24 !important; }
.mobile-nav a:last-child { border-bottom: none; }

/* ══════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }

/* ══════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { min-height: auto !important; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 48px 0 56px !important;
    text-align: center;
    gap: 24px !important;
  }
  .hero-img-wrap,
  .hero-img-bg { display: none !important; }
  .hero-desc { margin: 0 auto 28px !important; max-width: 560px; }
  .hero-actions { justify-content: center !important; flex-wrap: wrap; }
  .hero-stats { justify-content: center !important; }
  .hero-badge-row { justify-content: center !important; flex-wrap: wrap; }
  .hero-eyebrow { justify-content: center !important; }
}

@media (max-width: 768px) {
  .hero-inner { padding: 36px 0 44px !important; }
  .hero-title { font-size: 2rem !important; line-height: 1.15 !important; }
  .hero-desc { font-size: .9rem !important; margin-bottom: 20px !important; }
  .hero-eyebrow { font-size: .7rem !important; }
  .hero-badge-row { gap: 6px !important; }
  .hero-badge { font-size: .72rem !important; padding: 4px 10px !important; }
}

@media (max-width: 480px) {
  .hero-inner { padding: 28px 0 36px !important; }
  .hero-title { font-size: 1.7rem !important; }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: .95rem !important;
  }
  .hero-stats {
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    justify-content: center !important;
  }
  .hero-stat-val { font-size: 1.8rem !important; }
}

/* ══════════════════════════════════════════
   SEÇÕES
══════════════════════════════════════════ */
.section { padding: 64px 0; }
@media (max-width: 768px) {
  .section { padding: 44px 0; }
  .section-header { margin-bottom: 32px !important; }
  .section-title { font-size: 1.5rem !important; }
  .section-subtitle { font-size: .88rem !important; }
}
@media (max-width: 480px) {
  .section { padding: 32px 0; }
  .section-title { font-size: 1.3rem !important; }
}

/* ══════════════════════════════════════════
   CATEGORIAS — CARDS CLICÁVEIS
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 600px) {
  .categories-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Deixa card mais compacto e fácil de tocar */
  .category-card {
    padding: 18px 16px !important;
    gap: 12px !important;
    border-radius: 10px !important;
    min-height: 72px;
    align-items: center !important;
  }
  .cat-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
  }
  .cat-icon-wrap svg { width: 22px !important; height: 22px !important; }
  .cat-name { font-size: .92rem !important; }
  .cat-desc { display: none; } /* oculta descrição no mobile para cards mais limpos */
  .cat-count { font-size: .7rem !important; }
  .cat-arrow { display: flex; align-items: center; }
}

/* ══════════════════════════════════════════
   CARDS DE PRODUTO
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card-name { font-size: .88rem !important; }
  .product-card-actions {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .product-card-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: .82rem !important;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
  .product-card-body { padding: 12px !important; }
  .price-val { font-size: 1.1rem !important; }
}

/* ══════════════════════════════════════════
   FEATURES / DIFERENCIAIS
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr !important; }
  .feature-card { padding: 20px 16px !important; }
  .feature-icon { width: 48px !important; height: 48px !important; }
  .feature-icon svg { width: 24px !important; height: 24px !important; }
}

/* ══════════════════════════════════════════
   BANNER / CTA
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .quote-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 20px !important;
    gap: 20px !important;
    border-radius: 14px !important;
  }
  .quote-banner .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .cta-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .cta-actions .btn {
    width: 100% !important;
    max-width: 340px !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════
   STAT CARDS (KPIs)
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stat-card { padding: 16px 12px !important; }
  .stat-val { font-size: 1.5rem !important; }
}

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .footer-bottom-links { justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; }
  .social-section { padding: 36px 0 !important; }
  .social-cards-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
}

/* ══════════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select, textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }
  .form-row,
  .form-grid-2 {
    flex-direction: column !important;
    display: flex !important;
    gap: 0 !important;
  }
  .form-group { margin-bottom: 14px !important; }
  .form-label { font-size: .85rem !important; }
}

/* ══════════════════════════════════════════
   BOTÕES
══════════════════════════════════════════ */
@media (max-width: 480px) {
  .btn {
    padding: 11px 18px !important;
    font-size: .88rem !important;
    border-radius: 8px !important;
  }
  .btn-lg {
    padding: 13px 22px !important;
    font-size: .95rem !important;
  }
  .btn svg { width: 16px !important; height: 16px !important; }
}

/* ══════════════════════════════════════════
   MODAIS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .modal,
  .modal-overlay,
  [id*="modal"],
  [class*="modal-overlay"] {
    padding: 12px !important;
  }
  .modal-content,
  .modal-box,
  [class*="modal-inner"],
  [class*="modal-wrap"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Modal fixo na parte de baixo */
  .modal {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .modal-header,
  .modal-footer {
    padding: 14px 16px !important;
  }
  .modal-body { padding: 16px !important; }
  .modal-title { font-size: 1rem !important; }
  .modal-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .modal-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* ══════════════════════════════════════════
   TABELAS — SCROLL HORIZONTAL
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-wrap,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  table { min-width: 550px; }
  th, td {
    padding: 8px 10px !important;
    font-size: .8rem !important;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════
   CATÁLOGO
══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Layout sidebar + conteúdo vira coluna */
  .catalog-layout,
  .catalogo-wrap {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .catalog-sidebar,
  .filtros-sidebar {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
  }
  /* Filtros viram linha horizontal com scroll */
  .catalog-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}
@media (max-width: 768px) {
  .catalog-grid,
  .produtos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 420px) {
  .catalog-grid,
  .produtos-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   CALCULADORA
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .calc-layout,
  .calculadora-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .calc-form,
  .calc-result,
  .calculadora-form,
  .calculadora-resultado {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* ══════════════════════════════════════════
   LOCAÇÃO
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .locacao-grid,
  .locacao-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .locacao-card { margin-bottom: 0 !important; }
  .price-table { font-size: .78rem !important; }
  .price-table th,
  .price-table td { padding: 6px 8px !important; }
}

/* ══════════════════════════════════════════
   REVISADOS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .revisados-grid,
  .revisados-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ══════════════════════════════════════════
   BLOG
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .blog-layout,
  .post-layout {
    flex-direction: column !important;
  }
  .blog-sidebar,
  .post-sidebar {
    width: 100% !important;
    position: static !important;
  }
}

/* ══════════════════════════════════════════
   BANNER CALCULADORA
══════════════════════════════════════════ */
.calc-banner-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.calc-banner-cards {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}
@media (max-width: 900px) {
  .calc-banner-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .calc-banner-cards {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    min-width: unset !important;
  }
  .calc-banner-cards > div {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
  }
}
@media (max-width: 480px) {
  .calc-banner-cards {
    flex-direction: column !important;
  }
  .calc-banner-cards > div {
    flex: 1 1 100% !important;
  }
}

/* ══════════════════════════════════════════
   PROMOÇÕES
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .promo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  #promo-slides { grid-template-columns: repeat(2, 1fr) !important; }
  #secao-promocoes { padding: 28px 0 24px !important; }
  #secao-promocoes .container { padding-left: 12px !important; padding-right: 12px !important; }
  /* Cabeçalho da seção de promos */
  #secao-promocoes > .container > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* Countdown boxes menores */
  .promo-cd-box { min-width: 32px !important; padding: 4px 5px !important; }
  .promo-cd-num { font-size: .85rem !important; }
  .promo-countdown { gap: 4px !important; }
  /* Imagem do card menor no mobile */
  .promo-slide-img { height: 130px !important; }
}
@media (max-width: 480px) {
  .promo-grid { grid-template-columns: 1fr !important; }
  /* Em telas pequenas: 1 coluna e scroll horizontal suave */
  #promo-slides {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 8px !important;
    gap: 12px !important;
  }
  #promo-slides::-webkit-scrollbar { display: none !important; }
  .promo-slide {
    min-width: 260px !important;
  }
  .promo-cd-box { min-width: 28px !important; padding: 3px 4px !important; }
  .promo-cd-num { font-size: .78rem !important; }
}

/* ══════════════════════════════════════════
   CANAL DO CLIENTE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .canal-steps,
  .etapas-row {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .step-connector,
  .etapa-seta { display: none !important; }
  .canal-step,
  .etapa-item {
    width: 100% !important;
    text-align: center;
  }
}

/* ══════════════════════════════════════════
   CARRINHO / ORÇAMENTO
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .cart-layout,
  .orcamento-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .cart-summary,
  .orcamento-resumo {
    width: 100% !important;
    position: static !important;
  }
  .cart-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ══════════════════════════════════════════
   ADMIN PAINEL
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-layout {
    flex-direction: column !important;
  }
  .admin-sidebar {
    width: 100% !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    overflow: visible !important;
  }
  .admin-main {
    width: 100% !important;
    padding: 16px !important;
    min-height: unset !important;
  }
}
@media (max-width: 768px) {
  .admin-stats-grid,
  .admin-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .admin-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .admin-card { padding: 16px !important; }
  .admin-tabs { overflow-x: auto; white-space: nowrap; }
  .admin-tab-btn { padding: 8px 14px !important; font-size: .82rem !important; }
}
@media (max-width: 480px) {
  .admin-stats-grid,
  .admin-kpis { grid-template-columns: 1fr !important; }
}



/* ══════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
  pointer-events: none;
}
#toast-container .toast { pointer-events: auto; }

@media (max-width: 480px) {
  #toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }
}

/* ══════════════════════════════════════════
   NORMAS STRIP (ticker)
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .normas-strip { overflow: hidden; }
  .normas-item { font-size: .72rem !important; padding: 0 12px !important; }
}

/* ══════════════════════════════════════════
   PARCEIROS / OPORTUNIDADES
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .parceiros-grid,
  .oportunidades-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ══════════════════════════════════════════
   SOBRE / EMPRESA
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .sobre-layout,
  .empresa-grid {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .timeline { padding-left: 20px !important; }
  .timeline-item { padding-left: 20px !important; }
}

/* ══════════════════════════════════════════
   FRETE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .frete-layout,
  .frete-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .frete-mapa { width: 100% !important; }
}

/* ══════════════════════════════════════════
   TYPOGRAPHY FLUIDA
══════════════════════════════════════════ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.3rem, 4vw, 1.8rem) !important; }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important; }
}

/* ══════════════════════════════════════════
   ESPAÇAMENTOS MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .p-6 { padding: 16px !important; }
  .p-8 { padding: 20px !important; }
  .px-6 { padding-left: 16px !important; padding-right: 16px !important; }
  .py-8 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .gap-8 { gap: 20px !important; }
  .mb-8 { margin-bottom: 24px !important; }
  .mt-8 { margin-top: 24px !important; }
}

/* ══════════════════════════════════════════
   UTILITÁRIOS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .text-center-mobile { text-align: center !important; }
  .full-width-mobile { width: 100% !important; }
  .flex-col-mobile { flex-direction: column !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ══════════════════════════════════════════
   SCROLL HORIZONTAL
══════════════════════════════════════════ */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
}
.scroll-x::-webkit-scrollbar { height: 4px; }
.scroll-x::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }

/* ══════════════════════════════════════════
   TABLET (481–900px)
══════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 900px) {
  .container { padding: 0 20px; }
  .hero-title { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }
  .section { padding: 52px 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════
   LANDSCAPE MOBILE
══════════════════════════════════════════ */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-inner { padding: 28px 0 36px !important; }
  .hero-title { font-size: 1.5rem !important; }
  .mobile-nav { max-height: 80dvh; }
}

/* ══════════════════════════════════════════
   LGPD BANNER MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  #stf-lgpd-banner {
    /* Garante que não cubra botões importantes */
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════
   PÁGINA DE PRODUTO — MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Layout empilha galeria + info */
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Galeria fica no topo sem sticky */
  .product-gallery {
    position: static !important;
    top: auto !important;
  }
  /* Imagem principal menor */
  .gallery-main {
    aspect-ratio: 16/10 !important;
    border-radius: 12px !important;
  }
  /* Miniaturas scroll horizontal */
  .gallery-thumbs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .gallery-thumb {
    width: 58px !important;
    height: 58px !important;
    flex-shrink: 0;
  }
  /* Botões de ação — coluna única */
  .product-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .product-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    font-size: .92rem !important;
    text-align: center !important;
    word-break: break-word !important;
  }
  /* Preço legível */
  .product-price { font-size: 1.6rem !important; }
  .product-price-wrap { padding: 14px 16px !important; border-radius: 10px !important; }
  /* Chips menores */
  .product-meta-chips { gap: 6px !important; }
  .tag, .spec-chip { font-size: .72rem !important; padding: 3px 8px !important; }
  /* Tabs scroll horizontal */
  .tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
  }
  .tab-btn {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: .82rem !important;
  }
  /* Spec grid — linhas mais compactas */
  .spec-row > div {
    padding: 8px 10px !important;
    font-size: .8rem !important;
  }
  /* Título do produto menor no mobile */
  .product-title { font-size: 1.3rem !important; }
  /* Grid de produtos relacionados */
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 420px) {
  .related-grid {
    grid-template-columns: 1fr !important;
  }
  .product-price { font-size: 1.4rem !important; }
}

/* ══════════════════════════════════════════
   CHECKOUT — MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .checkout-layout,
  .checkout-grid {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .checkout-sidebar,
  .checkout-resumo {
    width: 100% !important;
    position: static !important;
  }
  .checkout-steps {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
  }
  .checkout-step {
    flex-shrink: 0 !important;
    font-size: .78rem !important;
  }
}

/* ══════════════════════════════════════════
   ORCAMENTO — MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .orcamento-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .orcamento-sidebar,
  .orcamento-resumo {
    width: 100% !important;
    position: static !important;
  }
}



/* ══════════════════════════════════════════
   PREFERS REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════
   PRODUTO — PÁGINA DETALHE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .produto-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .produto-img-wrap {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
  .produto-info { width: 100% !important; }
  .produto-actions { flex-direction: column !important; gap: 10px !important; }
  .produto-actions .btn { width: 100% !important; justify-content: center !important; }
  .specs-table th,
  .specs-table td { font-size: .8rem !important; padding: 8px 10px !important; }
}

/* ══════════════════════════════════════════
   WHATSAPP BOTÃO FLUTUANTE — NÃO SOBREPÕE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .whatsapp-float,
  .btn-whatsapp-float,
  #whatsapp-float {
    bottom: 16px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* ══════════════════════════════════════════
   CARDS GENÉRICOS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .card {
    border-radius: 10px !important;
  }
  .card-body {
    padding: 14px !important;
  }
}

/* ══════════════════════════════════════════
   CATÁLOGO — FILTROS CHIPS MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Chips de filtro com scroll horizontal */
  .filter-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: .82rem !important;
    min-height: 36px !important;
    border-radius: 20px !important;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Hero do catálogo — empilha em mobile */
  .catalog-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .search-box {
    width: 100% !important;
    max-width: 100% !important;
  }
  .search-box input {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  /* Sidebar oculta em mobile — botão de filtro */
  .catalog-sidebar { display: none !important; }
  .catalog-sidebar.mobile-open { display: block !important; }
  .catalog-layout {
    grid-template-columns: 1fr !important;
  }

  /* Toolbar — botão filtro + ordenar */
  .catalog-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .catalog-toolbar-left,
  .catalog-toolbar-right {
    width: 100% !important;
    justify-content: space-between;
  }

  /* Cards de produto no catálogo */
  .products-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Lista de produto mobile */
  .product-list-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .product-list-actions {
    width: 100% !important;
    gap: 8px !important;
  }
  .product-list-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    font-size: .82rem !important;
    padding: 9px 10px !important;
  }

  /* Paginação mobile */
  .pagination { gap: 4px !important; flex-wrap: wrap !important; }
  .page-btn { width: 38px !important; height: 38px !important; }
}

@media (max-width: 420px) {
  .products-grid-3 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════
   CALCULADORA — MOBILE COMPLETO
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .calc-steps,
  .calculadora-steps {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .calc-step-connector { display: none !important; }
  .calc-options-grid,
  .opcoes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .calc-option-card,
  .opcao-card {
    padding: 14px 10px !important;
    font-size: .82rem !important;
  }
  .calc-result-card {
    padding: 20px 16px !important;
  }
}
@media (max-width: 420px) {
  .calc-options-grid,
  .opcoes-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════
   LOCAÇÃO — CARDS E PREÇOS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Cards de locação em 1 coluna */
  [class*="locacao"] [style*="grid-template-columns: repeat(3"],
  [class*="locacao"] [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Tabela de preços legível */
  .tabela-precos {
    font-size: .78rem !important;
    overflow-x: auto !important;
    display: block !important;
  }

  /* Botões de ação dos cards */
  .card-actions-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .card-actions-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Toggle disponibilidade */
  .disponibilidade-toggle {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* ══════════════════════════════════════════
   REVISADOS — FILTROS E CARDS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Filtros de tipo/disponibilidade em linha */
  .revisados-filtros {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .revisados-filtros select,
  .revisados-filtros button {
    flex: 1 !important;
    min-width: 130px !important;
    font-size: .85rem !important;
    padding: 9px 12px !important;
  }
}

/* ══════════════════════════════════════════
   CANAL DO CLIENTE — PEDIDOS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .pedido-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .pedido-card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pedido-status-badge {
    font-size: .72rem !important;
    padding: 4px 10px !important;
  }
  .pedido-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pedido-actions .btn {
    flex: 1 !important;
    min-width: 120px !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════
   GRIDS GENÉRICOS 3/4 COLUNAS → MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   SEÇÃO TECNOLOGIA SIEMETRAFO — MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  #secao-tecnologia-siemetrafo {
    padding-bottom: 0 !important;
  }
  #tech-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .siemtech-card {
    padding: 22px 18px !important;
  }
  #tech-diff-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .tech-diff-item {
    padding: 16px 12px !important;
  }
  #stats-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-bar-item {
    padding: 20px 14px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  /* Seção de headline */
  #secao-tecnologia-siemetrafo h2 {
    font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
    text-align: center;
  }
  /* CTA final */
  #secao-tecnologia-siemetrafo [style*="display:flex;gap:16px;justify-content:center"] {
    flex-direction: column !important;
    align-items: center !important;
  }
  #secao-tecnologia-siemetrafo a[style*="padding:16px 32px"] {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Selos de confiança */
  #secao-tecnologia-siemetrafo [style*="display:flex;gap:24px;justify-content:center;margin-top:32px"] {
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* Badge topo */
  #secao-tecnologia-siemetrafo [style*="SISTEMA EXCLUSIVO"] {
    font-size: .65rem !important;
    text-align: center !important;
    letter-spacing: .06em !important;
    padding: 7px 14px !important;
  }
  /* Bloco interno de tecnologia */
  #secao-tecnologia-siemetrafo [style*="padding:40px 40px"] {
    padding: 24px 18px !important;
  }
  /* CTA interno */
  #secao-tecnologia-siemetrafo [style*="padding:48px 40px"] {
    padding: 28px 18px !important;
  }
}

@media (max-width: 480px) {
  #tech-diff-grid {
    grid-template-columns: 1fr !important;
  }
  #stats-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-bar-item {
    border-right: 1px solid rgba(255,255,255,.07) !important;
  }
  .stat-bar-item:nth-child(even) {
    border-right: none !important;
  }
}