/* Silva — camada responsiva
 *
 * As páginas são escritas com estilo inline: é o formato do Claude Design, cada
 * elemento carrega o seu style="". Regra de folha de estilo não vence atributo
 * inline, então quase todo override aqui usa !important. Não é preferência de
 * escrita — é a única forma de alcançar o valor que está no atributo.
 *
 * Este arquivo só trata tela estreita. Nenhuma regra fora de @media, exceto as
 * de base marcadas abaixo, e nada aqui muda o desktop.
 *
 * Ao mexer no layout de uma seção em src/*.dc.html, confira as classes que ela
 * usa aqui. As classes de estrutura são:
 *
 *   sec        div interna da seção (max-width + margin auto + padding lateral)
 *   sec-hero   a mesma coisa, no hero: o padding de topo tem que passar do header
 *   sec-foot   a mesma coisa, no rodapé
 *   g-1        grade que vira uma coluna em tela estreita
 *   g-2        grade que vira duas colunas (cards pequenos, logos, time)
 *   card-pad   card de padding generoso, que aperta no celular
 *   band       faixa de imagem de altura fixa
 *   silva-bar / silva-logo / silva-burger / silva-nav / silva-actions   header
 *
 * Breakpoints:
 *   <= 940px   o menu vira gaveta — a nav desktop não cabe mais na barra
 *   <= 720px   grades de duas colunas viram uma; respiro vertical comprime
 *   <= 400px   respiro lateral menor
 */

/* ---------- base (vale em qualquer largura) ---------- */

/* Uma palavra longa ("Potencializando") não pode empurrar a largura da página. */
h1, h2, h3, p, span, a, li { overflow-wrap: break-word; }

/* O header é fixo: a âncora tem que parar abaixo dele, não atrás. Quem já
   declara scroll-margin-top no inline continua com o seu valor. */
section[id], footer[id] { scroll-margin-top: 72px; }

/* Campo de formulário não tem largura intrínseca boa: o padrão do input é ~20
   caracteres, e isso estoura o container antes de qualquer media query. */
input, select, textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* O botão do menu só existe no mobile, mas a base fica aqui para não repetir. */
.silva-burger {
  display: none;
  width: 44px; height: 44px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent;
  border: 0.5px solid rgba(13, 27, 42, .2);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.silva-burger > span {
  display: block;
  width: 18px; height: 2px;
  background: #1E5B3A;
  border-radius: 2px;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.silva-burger:hover { background: #e8f2ec; }
#silva-header[data-menu="open"] .silva-burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#silva-header[data-menu="open"] .silva-burger > span:nth-child(2) { opacity: 0; }
#silva-header[data-menu="open"] .silva-burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- <= 940px: o menu vira gaveta ---------- */

@media (max-width: 940px) {
  .silva-burger { display: inline-flex; }

  .silva-bar {
    /* box-sizing padrão é content-box: sem isto o min-height soma o padding e a
       barra vira 74px, o que desalinha a âncora e o padding de topo do hero. */
    box-sizing: border-box !important;
    padding: 6px 16px !important;
    min-height: 62px !important;
    row-gap: 0 !important;
    flex-wrap: wrap !important;
  }

  /* O logo de 78px domina a barra num celular. */
  .silva-logo img { height: 50px !important; width: 77px !important; }

  /* Fechado, nav e ações saem da barra. Cada um ocupa a sua linha ao abrir —
     a barra já é flex-wrap: wrap, então flex-basis 100% basta. */
  .silva-nav, .silva-actions {
    display: none !important;
    flex-basis: 100%;
  }
  #silva-header[data-menu="open"] .silva-nav,
  #silva-header[data-menu="open"] .silva-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }

  /* Gaveta muito alta (tela pequena, ou celular deitado) tem que rolar. */
  #silva-header[data-menu="open"] {
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* A barra fechada é translúcida (.97) de propósito, e numa faixa fina isso
       fica bem. Aberta, são ~500px sobre o conteúdo: o texto do hero aparece
       atrás do menu. Aberta, opaca. */
    background: #F7F5F1 !important;
  }

  #silva-header[data-menu="open"] .silva-nav {
    gap: 0 !important;
    margin-top: 6px;
    border-top: 0.5px solid rgba(13, 27, 42, .12);
  }
  /* 48px de alvo: um link de 37px de altura é difícil de acertar com o dedo. */
  #silva-header[data-menu="open"] .silva-nav > a {
    font-size: 16px !important;
    padding: 15px 10px !important;
    border-radius: 8px !important;
    border-bottom: 0.5px solid rgba(13, 27, 42, .08);
  }
  #silva-header[data-menu="open"] .silva-actions {
    gap: 10px !important;
    padding: 14px 0 10px !important;
  }
  #silva-header[data-menu="open"] .silva-actions > a,
  #silva-header[data-menu="open"] .silva-actions > button {
    font-size: 15px !important;
    padding: 15px 18px !important;
    text-align: center;
    justify-content: center;
  }

  /* Duas colunas de 320px não caber é o que joga a página para 720px de largura. */
  .g-1 { grid-template-columns: minmax(0, 1fr) !important; }
  .g-1 > * { min-width: 0; }
}

/* ---------- <= 720px: telefone ---------- */

@media (max-width: 720px) {
  /* 40px de cada lado num viewport de 390 deixa 310 para o conteúdo. */
  .sec, .sec-hero, .sec-foot {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* O respiro vertical de desktop (104px em cima e embaixo) vira meia tela. */
  .sec {
    padding-top: 60px !important;
    padding-bottom: 56px !important;
  }
  .sec-foot {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }
  /* No hero o padding de topo é o que segura o texto abaixo do header fixo. */
  .sec-hero {
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }

  /* clamp(44px, 6vw, 80px) a 390px de tela dá 44px, e "Potencializando" não
     cabe em 44px de Georgia. O piso do clamp é o problema, não o teto. */
  .sec-hero h1 { font-size: clamp(30px, 8.4vw, 44px) !important; }

  .g-1, .g-2 { gap: 16px !important; }
  .g-2 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
  .g-2 > * { min-width: 0; }

  /* Card de 44px de padding lateral come 88px dos 350 disponíveis. */
  .card-pad { padding: 24px 20px !important; }

  /* Item de grade e de flex não encolhe abaixo do próprio min-content sem isto,
     então um único filho de largura fixa lá dentro estica o card para fora do
     container. Foi o que o widget do Turnstile (300px) fazia no formulário. */
  .card-pad, .g-1 > *, .g-2 > * { min-width: 0; }

  /* Faixa de imagem de 340px ocupa 40% da tela sem dizer nada. */
  .band { height: 200px !important; }

  /* iOS dá zoom ao focar campo com fonte menor que 16px, e o zoom não volta. */
  input, select, textarea { font-size: 16px !important; }

  /* Rodapé: as duas colunas de links ficam lado a lado com gap de 64px. */
  .sec-foot .foot-cols { gap: 28px !important; }

  /* Link de rodapé tem 22px de altura de linha — metade de um alvo de toque.
     Cresce por min-height, não por padding: o padding lateral do CTA que mora
     no mesmo rodapé ("Fale com a Silva") é o que forma o botão. */
  .sec-foot .foot-cols a,
  .sec-foot button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------- <= 400px: telas pequenas ---------- */

@media (max-width: 400px) {
  .sec, .sec-hero, .sec-foot {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .silva-bar { padding-left: 12px !important; padding-right: 12px !important; }
  .card-pad { padding: 20px 16px !important; }

  /* Os CTAs são white-space: nowrap para não quebrar no meio da frase. Num
     iPhone SE (320px) um rótulo longo ("Já sei o que preciso: quero cotar")
     passa da tela inteira, e nowrap não deixa quebrar. Aqui a linha vale mais
     que a frase inteira: só muda o desenho de quem ia estourar de qualquer
     forma, porque quem já cabe não quebra. */
  .sec a, .sec button,
  .sec-hero a, .sec-hero button,
  .sec-foot a, .sec-foot button { white-space: normal !important; }
}