/* ============================================================
   BRACK BRAZIL SUPPORT — RESPONSIVE STYLESHEET
   Aplicado a todas as páginas. Ativo apenas em ≤1023px.
   Desktop (≥1024px) permanece 100% intocado.
   ============================================================ */

/* Hambúrguer sempre escondido por padrão (desktop) */
.bbs-hamburger {
  display: none;
}


/* =========================================================
   TABLET E CELULAR — ≤1023px (menu hambúrguer ativo)
   ========================================================= */
@media (max-width: 1023px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Nada excede a largura da viewport */
  *, *::before, *::after {
    max-width: 100vw !important;
  }

  /* Containers: reduzir padding horizontal */
  section, main, header, footer {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ---- REGRA UNIVERSAL: grids multi-coluna viram 1 coluna ---- */
  [class*="grid"]:not(.foot-grid):not(.agendar-details),
  .hero, .final-wrap, .agendar-header, .contact-header,
  .blog-header, .cases, .contact-grid, .cases-grid,
  .deliv-grid, .editorial-grid, .blog-list,
  .address-wrap, .bb-specs-grid,
  .section-head, .section-header,
  .model-entities, .model,
  [class*="model-entities"], [class*="entities"],
  [class*="section-head"], [class*="-head"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Garantir section-num (a coluna lateral pequena) fica em cima */
  .section-num, .section-head > :first-child {
    padding-top: 0 !important;
  }

  /* foot-grid e agendar-details ficam em 2 colunas no tablet */
  .foot-grid, .agendar-details {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  /* Style inline: forçar 1 coluna */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* SVGs e imagens */
  svg, img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- NAV: hambúrguer ativo já no tablet ---- */
  .nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.9rem 1.2rem !important;
    gap: 0.5rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: var(--bone, #EDE4D5) !important;
    border-bottom: 1px solid rgba(0,40,85,0.18) !important;
  }

  /* Compensar o nav fixo: empurra o conteúdo da página */
  body {
    padding-top: 68px !important;
  }
  .nav-brand-mark svg { width: 80px !important; height: 80px !important; }
  .nav-brand-text { font-size: 14px !important; line-height: 1.1 !important; }
  .nav-brand-text span { font-size: 8px !important; letter-spacing: 0.16em !important; margin-top: 2px !important; }

  /* Mostrar botão hambúrguer */
  .bbs-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: 1px solid rgba(0,40,85,0.25);
    padding: 9px 10px;
    cursor: pointer;
    border-radius: 3px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .bbs-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink, #002855);
    transition: transform 0.25s ease, opacity 0.2s;
  }
  .bbs-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .bbs-hamburger.open span:nth-child(2) { opacity: 0; }
  .bbs-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Esconder nav-links até abrir */
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--bone, #EDE4D5) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 1rem 1.5rem 2rem !important;
    z-index: 999 !important;
    height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
  }
  .nav-links.mobile-open {
    display: flex !important;
  }
  /* Quando menu aberto, trava scroll do body pra não ter página rolando atrás */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  .nav-links.mobile-open {
    display: flex !important;
  }
  .nav-links a {
    padding: 0.95rem 0 !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(0,40,85,0.1) !important;
    width: 100% !important;
  }
  .nav-links a:last-child { border-bottom: none !important; }

  .nav-links .nav-cta {
    margin-top: 1rem !important;
    justify-content: center !important;
    padding: 1rem 1.5rem !important;
    font-size: 11px !important;
    border-bottom: none !important;
  }

  /* Tipografia: reduzir títulos grandes */
  h1, .hero-title, .contact-header-title, .agendar-header-title,
  .blog-header-title, .final-title, .contact-final-title, .blog-final-title {
    font-size: clamp(40px, 7vw, 64px) !important;
    line-height: 1.0 !important;
  }

  /* Channels do contato: remover divisão rígida */
  .channel {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,40,85,0.18) !important;
    padding: 2rem 1.5rem !important;
    min-height: auto !important;
  }
  .channel:last-child { border-bottom: none !important; }
}


/* =========================================================
   CELULAR — ≤640px (ajustes adicionais ao tablet)
   ========================================================= */
@media (max-width: 640px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* ---- REGRA BRUTA: nada excede a largura da tela ---- */
  *, *::before, *::after {
    max-width: 100vw !important;
  }

  /* Forçar quebra apenas em palavras muito longas (não partir palavras normais) */
  h1, h2, h3, h4, p, span, div, a, li {
    overflow-wrap: break-word !important;
  }

  /* Elementos com white-space nowrap que podem estourar */
  .legal-meta-item, .legal-meta, [class*="meta-item"],
  .nav-meta, .hud-value, .services-count, .editorial-link,
  [class*="services-count"], [class*="editorial-link"],
  [class*="legal-meta"], [class*="-count"], [class*="-link"] {
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* Valores numéricos que NÃO devem quebrar */
  .stat-value, .stat-number, .metric-value,
  [class*="stat-"], [class*="metric-"] {
    white-space: nowrap !important;
  }

  /* Legal-meta e similares em coluna */
  .legal-meta, .nav-meta,
  .services-head, .editorial-head,
  [class*="-head"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
  }

  /* <br> nos títulos: manter funcionando como quebra natural
     (não esconder — escondê-los juntava palavras sem espaço) */

  /* ---- Containers específicos das LPs que estouram ---- */
  .hud, .hud-grid, .hud-row, .entity-grid, .entities,
  .tickets, .ticket-grid, .model-grid, .specs,
  .bb-specs-grid, .bb-about, .bb-about-body,
  .featured, .featured-post, .featured-content,
  .discipline-table, .discipline, .disciplines,
  [class*="hud"], [class*="entity"], [class*="ticket"],
  [class*="case"], [class*="deliv"], [class*="spec"],
  [class*="flow"], [class*="data-table"], [class*="bb-"],
  [class*="featured"], [class*="discipline"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow-x: hidden !important;
    min-height: auto !important;
    max-height: none !important;
  }

  /* Remover min-height fixas de cards (quebra a caixa) */
  [class*="-step"], [class*="-card"], [class*="-item"],
  .flow-step, .case-item, .channel, .deliv, .deliv-item,
  .entity-card {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Elementos absolutamente posicionados (setas/marcadores entre cards) */
  .flow-arrow, [class*="-arrow"],
  [class*="-connector"]:not(.model-connector) {
    display: none !important;
  }

  /* Filhos desses containers em largura total */
  .hud > *, .hud-grid > *, .entity-grid > *, .entities > *,
  .tickets > *, .ticket-grid > *, .model-grid > *,
  [class*="hud-cell"], [class*="entity-card"], [class*="ticket-spec"],
  [class*="case-item"], [class*="deliv-item"], [class*="spec-item"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  /* ---- QUALQUER grid multi-coluna vira 1 coluna ---- */
  [class*="grid"], [class*="-row"], [class*="-cols"],
  .hero, .final-wrap, .agendar-header, .contact-header,
  .blog-header, .cases, .agendar-details, .address-wrap,
  .bb-specs-grid, .foot-grid, .contact-grid, .cases-grid,
  .deliv-grid, .editorial-grid, .blog-list {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* Grids filhos viram blocos empilhados */
  [class*="grid"] > *, .cases > *, .deliv-grid > *,
  .editorial-grid > *, .hero > *, .final-wrap > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
    border-right: none !important;
  }

  /* Tabelas e elementos com scroll horizontal */
  table, .data-table, .diagram-wrap {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 13px !important;
  }

  /* SVGs e imagens nunca estouram */
  svg, img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Elementos com style inline multi-coluna forçados */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* Nav ainda menor no celular */
  .nav {
    padding: 0.8rem 1rem !important;
  }
  .nav-brand-mark svg { width: 50px !important; height: 50px !important; }
  .nav-brand-text { font-size: 13px !important; }
  .nav-brand-text span { font-size: 7px !important; letter-spacing: 0.14em !important; }
  .nav-links { top: 62px !important; }

  /* ---- Containers gerais ---- */
  section, main, header, footer, div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Exceções: elementos que NÃO devem ter padding extra */
  .nav, .nav-links, .foot, .hero, .final,
  .agendar-embed-frame, #bbs-cal-embed,
  .hero-ctas, .final-ctas, .nav-brand, .bbs-hamburger,
  .foot-grid, .foot-col, .foot-brand, .nav-links a {
    padding-left: initial !important;
    padding-right: initial !important;
  }
  .nav { padding: 0.8rem 1rem !important; }
  .foot { padding: 2.5rem 1.1rem 1.5rem !important; }
  .hero { padding: 2.5rem 1.1rem !important; }
  .final { padding: 3rem 1.1rem !important; }

  /* Header institucional: remover coluna numeração lateral */
  .agendar-header,
  .contact-header,
  .blog-header {
    padding: 3rem 1.1rem 2.5rem !important;
  }
  .agendar-header-num,
  .contact-header-num,
  .blog-header-num {
    padding-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Tipografia geral no mobile */
  h1, .hero-title, .contact-header-title, .agendar-header-title,
  .blog-header-title, .final-title, .contact-final-title, .blog-final-title,
  .section-title {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    overflow-wrap: break-word !important;
  }
  h2, .section-title {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
  }
  h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  /* Spans serif dentro de títulos */
  h1 .serif, h2 .serif, .section-title .serif,
  .hero-title .serif, .final-title .serif {
    overflow-wrap: break-word !important;
  }
  p, li { font-size: 15px !important; line-height: 1.55 !important; }
  .agendar-header-lede,
  .contact-header-lede,
  .blog-header-lede,
  .final-sub, .contact-final-sub, .blog-final-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Números grandes tipo "01 / 02 / 03" que aparecem enormes */
  [class*="case-tag"], [class*="deliv-tag"], [class*="step-num"],
  [class*="editorial-num"], .case-visual, .big-num {
    font-size: 20px !important;
  }

  /* Botões */
  .btn-primary, .btn-ghost, .btn-ghost-dark {
    padding: 1rem 1.25rem !important;
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-ctas, .final-ctas {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* Seção final */
  .final-bg-svg { display: none !important; }

  /* Channel (página contato) */
  .channel {
    border: none !important;
    border-bottom: 1px solid rgba(0,40,85,0.18) !important;
    padding: 1.75rem 0 !important;
  }
  .channel:last-child { border-bottom: none !important; }
  .channel-title { font-size: 20px !important; line-height: 1.25 !important; }

  /* Agendar: strip de detalhes vertical */
  .agendar-details {
    gap: 1.25rem !important;
    padding: 1.75rem 1.1rem !important;
    text-align: left !important;
  }
  .detail-value { font-size: 16px !important; }
  .agendar-embed-wrap { padding: 1.75rem 1.1rem 2.5rem !important; }
  .agendar-embed-frame { min-height: 620px !important; }
  #bbs-cal-embed { min-height: 620px !important; }

  /* Address section (contato) */
  .address-section { padding: 3rem 1.1rem !important; margin-top: 2.5rem !important; }
  .address-section::before, .address-section::after {
    width: 24px !important; height: 24px !important;
  }

  /* Footer */
  .foot-grid { gap: 1.5rem !important; padding-bottom: 1.75rem !important; }
  .foot-col-title { margin-bottom: 0.75rem !important; }
  .foot-legal { font-size: 9px !important; padding-top: 1.25rem !important; }

  /* Termos / Privacy / Disclaimer (páginas legais) */
  .legal-main, .legal-wrap, .terms-main, .privacy-main, .disclaimer-main {
    padding: 2rem 1.1rem !important;
  }

  /* HUD / badges */
  .hud-value { font-size: 14px !important; }
}


/* =========================================================
   Ajustes extras para telas muito pequenas (≤380px)
   ========================================================= */
@media (max-width: 380px) {
  .nav-brand-text { font-size: 12px !important; }
  .nav-brand-mark svg { width: 44px !important; height: 44px !important; }
  h1, .hero-title, .contact-header-title, .agendar-header-title,
  .blog-header-title, .final-title {
    font-size: clamp(28px, 8.5vw, 36px) !important;
  }
}