/* =========================================================================
   BALVOX — Ajustes exclusivos de MOBILE (carregado por último no <head>)
   -------------------------------------------------------------------------
   Regra do arquivo: SOMENTE blocos @media (max-width: …). Nada aqui pode
   afetar viewports desktop (≥960px); a faixa 769–959px recebe apenas a
   correção de ordem do .split (que já é 1 coluna nessa faixa).
   ========================================================================= */

/* ===== ≤959px — split é 1 coluna: texto sempre antes do diagrama ===== */
@media (max-width: 959px) {
  .split--left .split__anim { order: 2; }
  /* O canvas do diagrama (600×800, width:100%) define a própria altura;
     sem o piso de 60vh não sobra bloco vazio entre as seções. */
  .split__anim { min-height: 0; }
}

/* ===== ≤768px — menu hambúrguer, ritmo vertical, spine, polish ===== */
@media (max-width: 768px) {
  /* --- Botão hambúrguer (injetado por scripts/nav.js; ≥769px fica com o
         atributo [hidden], então nenhuma regra de desktop é necessária) --- */
  .nav__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid rgba(58, 63, 68, 0.3);
    border-radius: 50%;
    background: transparent;
    color: var(--color-cinza-bruma);
    cursor: pointer;
    transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out);
  }
  .nav__toggle:hover { color: var(--color-cinza-fumo); border-color: var(--color-cinza-fumo); }
  [data-theme="dark"] .nav__toggle { border-color: rgba(255, 255, 255, 0.22); }
  .nav__toggle .bar {
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
  }
  .nav--open .nav__toggle .bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav--open .nav__toggle .bar:nth-child(2) { opacity: 0; }
  .nav--open .nav__toggle .bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* --- Painel do menu ---
     position:absolute (NÃO fixed): o backdrop-filter do .nav cria um
     containing block que quebraria position:fixed nos descendentes.
     Acima do cookie banner (z-index 90) enquanto aberto. */
  .nav.nav--open {
    z-index: 95;
    background: var(--color-pergaminho);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.nav--open .nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    padding: var(--space-4) var(--space-4) var(--space-6);
    background: var(--color-pergaminho);
    border-top: 1px solid rgba(58, 63, 68, 0.12);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  [data-theme="dark"] .nav.nav--open .nav__links { border-top-color: var(--hair); }
  .nav.nav--open .nav__links a {
    font-size: 1.05rem;
    padding-block: 0.6rem; /* alvo de toque ≥44px */
  }

  /* --- Ritmo vertical: sem faixas vazias gigantes --- */
  section.s { min-height: auto; padding-block: var(--space-6); }
  .cta-final { padding-block: var(--space-6); }
  .hero { min-height: 100svh; }
  .split { gap: var(--space-4); }

  /* --- Spine: numa tela estreita a linha compete com o conteúdo — some. --- */
  .spine { display: none; }

  /* --- Polish --- */
  .proof__num { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cnt-featured .cnt-cover { min-height: 180px; }
}

/* ===== ≤560px — cookie banner compacto + busca do conteúdo ===== */
@media (max-width: 560px) {
  .cookie-banner {
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  /* Causa raiz da "caixa gigante": main.css dá flex:1 1 320px ao texto; em
     coluna, essa basis vira ALTURA de 320px. Volta a dimensionar por conteúdo. */
  .cookie-banner__text { flex: 0 0 auto; font-size: 0.78rem; }
  .cookie-banner__actions { gap: 0.5rem; }
  .cookie-banner__btn { padding: 0.55rem 0.6rem; font-size: 0.66rem; letter-spacing: 0.04em; }

  .cnt-search { min-width: 0; flex: 1 1 100%; }
}

/* ===== ≤360px — botões do cookie banner podem quebrar linha ===== */
@media (max-width: 360px) {
  .cookie-banner__btn { white-space: normal; }
}

/* ===== Definição permanente (Conteúdo) ===== */
@media (max-width: 560px) {
  .cnt-define { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); }
  .cnt-define__label { padding-top: 0; }
  .cnt-define__body { flex: 1 1 100%; order: 3; }
  .cnt-define__arrow { margin-left: auto; }
}