/* Belmake, visual novo (23/09/2026, SITE-BELMAKE-VISUAL.md).
   Celular primeiro: o que esta fora de @media vale a partir de 320 px; os @media so ampliam.
   Cores exatas do PDF da capa do carne. --laranja nunca e cor de texto (2,69 sobre branco).
   Contraste, alvos de toque e CSS compativel com celular velho: ferramentas/belmake/confere.py. */

@font-face {
  font-family: "Outfit";
  src: url("../fontes/outfit.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --verde: #1E473F;
  --verde-escuro: #163831;
  --verde-suave: #3D5C56;
  --laranja: #FF751F;
  --laranja-texto: #CC4E00;
  --pessego: #FFBA8F;
  --pessego-claro: #FFF1E8;
  --cinza-claro: #F2F3F3;
  --branco: #FFFFFF;
  --toque: 3rem;
  --margem: 18px;
  /* "only": sem ele o escurecimento automatico do Chrome e do Samsung inverte as cores da marca
     (e este valor vence o <meta name="color-scheme"> do HTML) */
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 106.25%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--verde);
  background: var(--branco);
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }
h1, h2 { margin: 0 0 .75rem; line-height: 1.15; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 1rem; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--laranja-texto); outline-offset: 3px; }

.dentro { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--margem); }

/* faixa do aviso de queda: so aparece quando js/aviso.js tira o hidden */
.aviso { background: var(--pessego); }
.aviso[hidden] { display: none; }
.aviso .dentro { display: flex; align-items: flex-start; padding-top: .75rem; padding-bottom: .75rem; }
.aviso-ponto { flex: none; width: .75rem; height: .75rem; margin: .45rem .75rem 0 0; border-radius: 50%;
  background: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 117, 31, .3); }
.aviso p { margin: 0; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }

/* topo */
.topo { position: relative; background: var(--verde); color: var(--branco);
  border-bottom: .375rem solid var(--laranja); --logo-letras: var(--branco); --logo-detalhe: var(--branco); }
.topo .dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 4.5rem; }
.marca { display: flex; align-items: center; min-height: var(--toque); }
/* logo em px: com a letra do sistema ampliada, o texto cresce e o logo nao */
.marca svg { width: 160px; height: 55px; }
.menu-largo { display: none; }
.menu-largo a, .menu-celular nav a { text-decoration: none; font-weight: 600; }
.menu-celular summary { list-style: none; display: flex; align-items: center; min-height: var(--toque);
  padding: 0 .75rem; border-radius: 10px; font-weight: 600; cursor: pointer; }
.menu-celular summary::-webkit-details-marker { display: none; }
.menu-celular summary svg { width: 1.5rem; height: 1.5rem; margin-right: .5rem; }
.menu-celular[open] summary { background: rgba(255, 255, 255, .12); }
.menu-celular nav { position: absolute; left: 0; right: 0; top: 100%; margin-top: .375rem; z-index: 5;
  display: flex; flex-direction: column; padding: .5rem var(--margem) 1rem;
  background: var(--verde); border-bottom: .375rem solid var(--laranja); }
.menu-celular nav a { display: flex; align-items: center; min-height: var(--toque); padding: 0 .5rem; border-radius: 10px; }
/* o realce de pagina atual nao vale para o botao laranja: na Area do cliente ele virava verde sobre verde */
.menu-celular nav a[aria-current="page"]:not(.botao) { background: rgba(255, 255, 255, .12); }
/* dentro do menu o botao continua em negrito: sem isso a regra do menu (600) vence e o laranja
   deixa de ser texto grande, caindo abaixo do contraste minimo */
.menu-celular nav .botao { margin-top: .5rem; font-weight: 700; }

/* botoes: toda acao e botao, nunca link pelado */
.botao { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--toque); padding: .75rem 14px;
  border: 2px solid transparent; border-radius: 12px; font-weight: 700; line-height: 1.2;
  text-decoration: none; }
.botao svg { flex: none; width: 1.375rem; height: 1.375rem; margin: .125rem .75rem .125rem 0; }
/* o rotulo fica num <span>. Com icone, ele tem base de 5em: quando a letra do sistema cresce e nao
   cabem icone e palavra na mesma linha, o rotulo desce para baixo do icone em vez de partir a
   palavra no meio. So o que nao cabe de jeito nenhum (e-mail) quebra dentro da palavra. */
.botao > span { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
.botao svg + span { flex: 1 1 5em; }
.fone { white-space: nowrap; }
.botao-verde { background: var(--verde); color: var(--branco); }
.botao-verde:hover { background: var(--verde-escuro); }
.botao-contorno { background: var(--branco); color: var(--verde); border-color: var(--verde); }
.botao-contorno:hover { background: var(--pessego-claro); }
/* verde sobre laranja da 3,85: so passa como texto grande, entao 1.125rem (19 px) em negrito */
.botao-laranja { background: var(--laranja); color: var(--verde); font-size: 1.125rem; }

/* pagina inicial */
.abertura { padding: 1.5rem 0 2rem; }
.abertura .dentro { display: flex; flex-direction: column; }
.ja-cliente { order: -1; margin-bottom: 1.75rem; padding: 1.25rem 12px; border-left: 6px solid var(--laranja);
  border-radius: 16px; background: var(--pessego-claro); }
.ja-cliente h2 { font-size: 1.375rem; margin-bottom: .75rem; }
.ja-cliente .botao { margin-top: .625rem; }
.slogan h1 { font-size: 2rem; }
.slogan p { font-size: 1.0625rem; color: var(--verde-suave); }
.slogan .botao { justify-content: center; }
.tecnologias { padding: 2rem 0; background: var(--cinza-claro); }
.cartao { padding: 1.25rem 16px; border-radius: 16px; background: var(--branco); }
.cartao + .cartao { margin-top: 1rem; }
.cartao h2 { font-size: 1.25rem; margin-bottom: .375rem; }
.cartao p { margin: 0; color: var(--verde-suave); }
.cartao-cinza { background: var(--cinza-claro); }

/* paginas internas */
.pagina { padding: 1.75rem 0 2.5rem; }
.pagina .dentro { max-width: 46rem; }
.lead { font-size: 1.125rem; color: var(--verde-suave); }
.bloco { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--cinza-claro); }
/* Area do cliente no ar antes do portal (pedido do dono, 25/09/2026): aviso "Em breve" */
.em-breve { margin: 0 0 .5rem; padding: 1rem 14px; border-left: 6px solid var(--laranja); border-radius: 14px;
  background: var(--pessego-claro); }
.em-breve p { margin: .5rem 0 0; }
.selo { display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: var(--verde);
  color: var(--branco); font-size: .9375rem; font-weight: 700; }
.pagina .botao { margin-top: .75rem; }
.cartoes { margin-bottom: 1.5rem; }
.passos, .direitos { margin: 0 0 1rem; padding-left: 1.5rem; }
.passos li, .direitos li { margin-bottom: .625rem; }
.lista-botoes .botao { margin-top: .75rem; }
.valores dt { margin-top: 1rem; font-weight: 700; }
.valores dd { margin: 0; }

/* rodape */
.rodape { padding: 1.5rem 0; background: var(--verde); color: var(--branco); border-top: .375rem solid var(--laranja); }
.rodape p { margin: 0 0 .5rem; font-size: .9375rem; }
.rodape-contato { display: flex; flex-wrap: wrap; }
/* min-width 0: sem isso o botao do e-mail, item de flex, nao encolhe abaixo do e-mail inteiro e empurra a pagina */
.rodape-contato .botao { min-width: 0; max-width: 100%; margin: .5rem .75rem 0 0; padding: .5rem 14px; font-weight: 600; }
.botao-rodape { color: var(--branco); border-color: var(--branco); }
.botao-rodape:hover { background: var(--verde-escuro); }

/* zoom de pagina de 200% do Chrome no Android (tela de 160 a 206 px): folgas e logo menores */
@media (max-width: 299px) {
  :root { --margem: 10px; }
  .ja-cliente { padding: 1rem 8px; border-left-width: 4px; }
  .botao, .cartao { padding-left: 10px; padding-right: 10px; }
  .marca svg { width: 120px; height: 41px; }
  h1, .slogan h1 { font-size: 1.625rem; }
}

@media (min-width: 720px) {
  h1, .slogan h1 { font-size: 2.5rem; }
  .abertura { padding: 3rem 0; }
  .abertura .dentro { flex-direction: row; align-items: center; }
  .slogan { flex: 1 1 auto; margin-right: 2.5rem; }
  .ja-cliente { order: 0; flex: 0 0 22rem; margin-bottom: 0; padding: 1.5rem 20px; }
  .slogan .botao, .pagina .botao { display: inline-flex; }
  .tecnologias .dentro, .cartoes { display: flex; }
  .cartao { flex: 1 1 0; }
  .cartao + .cartao { margin-top: 0; margin-left: 1rem; }
  .lista-botoes .botao { display: flex; max-width: 28rem; }
  .rodape .dentro { display: flex; align-items: center; justify-content: space-between; }
  .rodape p { margin: 0; }
  .rodape-contato .botao { margin: 0 0 0 .75rem; }
}

@media (min-width: 1024px) {
  html { font-size: 112.5%; }
  .slogan h1 { font-size: 2.75rem; }
  .menu-celular { display: none; }
  .menu-largo { display: flex; align-items: center; }
  .menu-largo a { display: flex; align-items: center; min-height: var(--toque); padding: 0 .875rem; border-radius: 10px; }
  .menu-largo a:hover, .menu-largo a[aria-current="page"] { background: rgba(255, 255, 255, .12); }
  .menu-largo .botao { margin-left: .5rem; font-weight: 700; }
  .menu-largo .botao:hover, .menu-largo .botao[aria-current="page"] { background: var(--laranja); }
}