/* Norte Distribuidora · LP
   Mobile first, com três degraus: base, 700 px e 1000 px.

   As regras vêm do manual:
   - nada de filete de 1 px separando bloco: a separação é fresta de 8 px mostrando o fundo
   - nada de card com canto arredondado e sombra: bloco chapado, canto reto
   - a telha aparece uma vez por seção, e é sempre a ação
   - a linha que sobrevive é a que fecha os quatro lados de um objeto (campo, botão fantasma)
   - foto sangra até a borda e encontra a cor numa passagem, nunca num corte seco

   No desktop o conteúdo mora numa coluna de 1320 px centralizada, e cada seção
   com pouco conteúdo vira duas colunas. Sem isso, um bloco de uma palavra só
   esticava 600 px numa tela de 1900.                                            */

@font-face{font-family:'Familjen Grotesk';src:url('fontes/familjen-grotesk.woff2') format('woff2-variations');font-weight:400 700;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fontes/instrument-sans.woff2') format('woff2-variations');font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  --verde:#16301F;
  --degrau:#1E3D29;
  --kraft:#CBAE84;
  --telha:#D95F2E;
  --creme:#F1EDE3;

  --titulo:'Familjen Grotesk',system-ui,sans-serif;
  --texto:'Instrument Sans',system-ui,sans-serif;

  --fresta:8px;        /* a medida de encosto do manual */
  --margem:22px;
  --limite:1320px;     /* a coluna de conteúdo no desktop */
  --medida:34rem;      /* largura confortável de leitura */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

body{
  margin:0;
  background:var(--degrau);
  color:var(--creme);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--margem);top:10px;z-index:50;background:var(--telha);color:var(--verde);padding:12px 18px;font-weight:600}

.limite{max-width:var(--limite);margin:0 auto;padding:0 var(--margem)}

/* ---------- topo ---------- */
.topo{background:var(--verde);padding:16px 0}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo-marca img{width:128px;height:auto}
.topo a.topo-acao{display:none}

/* ---------- blocos e a fresta entre eles ---------- */
main{display:flex;flex-direction:column;gap:var(--fresta)}
.bloco{--fundo:var(--verde);background:var(--fundo);padding:56px 0 60px}
.bloco.claro{--fundo:var(--creme);color:var(--verde)}
.bloco.degrau{--fundo:var(--degrau)}
.medida{max-width:var(--medida)}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--titulo);font-weight:700;letter-spacing:-.025em;margin:0}
h1{font-size:2.1rem;line-height:1.08}
h2{font-size:1.75rem;line-height:1.12}
h3{font-size:1.125rem;line-height:1.2;letter-spacing:-.015em}

.etiqueta{
  font-size:.8125rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kraft);margin:0 0 18px;
}
.etiqueta-escura{color:#786140}   /* o kraft puro sobre creme dá 2,5 de contraste */
.apoio{margin:18px 0 0;max-width:var(--medida)}
.bloco:not(.claro) .apoio{color:rgba(241,237,227,.88)}
.nota{font-size:.9375rem;color:var(--kraft);margin:22px 0 0;max-width:var(--medida)}
.nota-escura{color:#7d6540}

/* ---------- botões ---------- */
.botao{
  display:inline-block;text-decoration:none;font-family:var(--texto);
  font-size:1rem;font-weight:600;line-height:1;
  padding:17px 26px;border:2px solid transparent;cursor:pointer;
  transition:background-color .15s linear,color .15s linear,border-color .15s linear;
}
/* trocar para verde num bloco verde é sumir, não é troca: o botão inverte
   contra o fundo em que ele está                                         */
.botao-destaque{background:var(--telha);color:var(--verde);border-color:var(--telha)}
.botao-destaque:hover,.botao-destaque:focus-visible{background:var(--creme);color:var(--verde);border-color:var(--creme)}
.bloco.claro .botao-destaque:hover,.bloco.claro .botao-destaque:focus-visible{background:var(--verde);color:var(--creme);border-color:var(--verde)}
/* a objeção é um bloco verde dentro da seção creme, e precisa vencer a regra
   acima, que tem especificidade maior e deixava verde sobre verde           */
.bloco.claro .objecao .botao-destaque:hover,
.bloco.claro .objecao .botao-destaque:focus-visible{background:var(--creme);color:var(--verde);border-color:var(--creme)}
.botao-fantasma{background:transparent;color:var(--creme);border-color:rgba(241,237,227,.45)}
.botao-fantasma:hover,.botao-fantasma:focus-visible{background:var(--creme);color:var(--verde);border-color:var(--creme)}
.acoes{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.acoes .botao{flex:1 1 auto;text-align:center}
:focus-visible{outline:3px solid var(--telha);outline-offset:3px}

/* ---------- a passagem em volta da foto ----------
   camada de gradientes na cor do próprio bloco, por cima da foto. Cobre topo,
   pé e a aresta que encosta no texto, e funciona em qualquer navegador.       */
.foto{position:relative}
.foto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--fundo),transparent var(--passa-topo,72px)),
    linear-gradient(to top,var(--fundo),transparent var(--passa-pe,72px)),
    linear-gradient(to right,var(--fundo),transparent var(--passa-lado,0px));
}

/* ---------- hero ---------- */
.hero{padding-bottom:0}
.hero h1{margin-top:0}
.hero-foto{margin:44px calc(var(--margem) * -1) 0}

/* ---------- painel de blocos, separado por fresta ---------- */
.painel{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:var(--fresta)}
.painel li{background:var(--degrau);color:var(--creme);padding:26px 24px 28px}
.bloco.degrau .painel li{background:var(--verde)}
.painel p{margin:10px 0 0;font-size:.9688rem;color:rgba(241,237,227,.85)}
.painel-segmento li{padding:22px 24px}
.painel-segmento h3{font-size:1.25rem}

/* ---------- jornada numerada (aqui o número existe de verdade) ---------- */
.jornada{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:var(--fresta)}
.jornada li{background:var(--degrau);padding:22px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.jornada .passo{
  grid-row:1 / span 2;font-family:var(--titulo);font-weight:700;font-size:1.5rem;
  color:var(--telha);line-height:1;padding-top:2px;
}
.jornada p{margin:6px 0 0;font-size:.9688rem;color:rgba(241,237,227,.85)}
.jornada + .botao{margin-top:30px}

/* ---------- trocas de item ---------- */
.trocas{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:var(--fresta)}
.trocas li{display:grid;grid-template-columns:1fr 1fr;gap:var(--fresta)}
.trocas span{padding:18px 20px;font-weight:600;font-size:1rem}
.trocas .de{background:#e2ddd0;color:#5f5a50}
.trocas .para{background:var(--verde);color:var(--creme)}

/* ---------- objeção ---------- */
.objecao{background:var(--verde);color:var(--creme);padding:32px 26px 34px;margin:var(--fresta) 0 0}
.objecao h3{font-size:1.3rem}
.objecao p{margin:14px 0 0;color:rgba(241,237,227,.88);max-width:var(--medida)}
.objecao .botao{margin-top:26px}

/* ---------- fotos ---------- */
.duas-foto{margin:40px calc(var(--margem) * -1) 0}
.faixa-foto{margin:40px 0 0;--passa-topo:88px;--passa-pe:88px}
.faixa-foto img{width:100%;aspect-ratio:3 / 2;object-fit:cover}

/* ---------- formulário ---------- */
.formulario{margin:36px 0 0;display:grid;gap:18px}
.campo{margin:0;display:flex;flex-direction:column}
.campo label{font-size:.9375rem;font-weight:500;margin-bottom:7px;color:var(--kraft)}
.opcional{color:rgba(203,174,132,.65);font-weight:400}
.campo input,.campo textarea{
  font-family:var(--texto);font-size:1.0625rem;color:var(--creme);
  background:var(--degrau);border:2px solid rgba(203,174,132,.62);
  padding:14px 16px;width:100%;
}
.campo textarea{resize:vertical;min-height:110px}
.campo ::placeholder{color:rgba(241,237,227,.62);opacity:1}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--telha)}
.campo.erro input,.campo.erro textarea{border-color:var(--telha)}
.acoes-form{margin-top:12px}
.aviso{margin:4px 0 0;font-size:.9375rem;color:var(--kraft);min-height:1.4em}
.aviso.ruim{color:var(--telha)}

/* ---------- rodapé ---------- */
.rodape{background:var(--degrau);padding:52px 0 120px;margin-top:var(--fresta)}
.rodape img{width:150px;height:auto}
.rodape-frase{font-family:var(--titulo);font-weight:700;font-size:1.25rem;margin:26px 0 0;letter-spacing:-.02em}
.rodape-dados{margin-top:28px}
.rodape-dado{font-size:.9375rem;color:var(--kraft);margin:10px 0 0}
.rodape-dado a{text-decoration:none;border-bottom:2px solid rgba(203,174,132,.4)}
.rodape-dado a:hover{border-bottom-color:var(--kraft)}

/* ---------- barra fixa, só no celular ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:var(--fresta);padding:var(--fresta);
  background:var(--verde);
}
.barra .botao{flex:1;text-align:center;padding:15px 12px;font-size:.9375rem}
.barra .botao-fantasma{flex:0 0 33%}

/* ================= 700 px ================= */
@media (min-width:700px){
  :root{--margem:44px}
  body{font-size:1.125rem}
  h1{font-size:3.1rem}
  h2{font-size:2.35rem}
  .bloco{padding:78px 0 82px}
  .painel-4{grid-template-columns:1fr 1fr}
  .painel-segmento{grid-template-columns:repeat(3,1fr)}
  .jornada{grid-template-columns:1fr 1fr}
  .acoes .botao{flex:0 0 auto}
  .trocas{max-width:40rem}
  .barra{display:none}
  .rodape{padding-bottom:60px}
  .topo a.topo-acao{display:inline-block;padding:14px 22px;font-size:.9375rem}
  .topo-marca img{width:150px}
}

/* ================= 1000 px ================= */
@media (min-width:1000px){
  :root{--margem:64px}
  h1{font-size:3.55rem}
  h2{font-size:2.5rem}
  .bloco{padding:104px 0 108px}
  .medida{max-width:36rem}

  /* cabeça de seção: título à esquerda, apoio à direita, para a linha não
     atravessar 1300 px nem deixar metade da faixa vazia                   */
  .cabeca{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:end}
  .cabeca h2{max-width:14em}
  .cabeca .apoio{margin:0;max-width:30rem;padding-bottom:.4em}

  /* seção em duas colunas: texto de um lado, conteúdo do outro */
  .dupla{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .dupla-texto{max-width:34rem}
  .dupla .trocas,.dupla .painel,.dupla .formulario{margin-top:0}

  /* hero: o texto alinha com a coluna de 1320 e a foto sangra até a borda */
  .hero{padding:0}
  .hero .limite{max-width:none;padding:0}
  .hero-linha{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .hero-texto{
    width:100%;max-width:calc(var(--limite) / 2);margin-left:auto;
    padding:100px 56px 104px var(--margem);align-self:center;
  }
  .hero-foto{--passa-lado:150px;--passa-topo:96px;--passa-pe:96px;margin:0;align-self:stretch}
  .hero-foto picture{display:block;height:100%}
  .hero-foto img{width:100%;height:100%;object-fit:cover}

  /* como funciona: a jornada vira uma linha por passo */
  .duas{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center}
  .duas-texto{max-width:none}
  .duas-texto .apoio{max-width:32rem}
  .duas-foto{--passa-lado:130px;--passa-topo:84px;--passa-pe:96px;margin:0}
  .duas-foto img{width:100%;aspect-ratio:3 / 3.4;object-fit:cover}
  .jornada{grid-template-columns:1fr}
  .jornada li{grid-template-columns:auto 10rem 1fr;align-items:baseline;column-gap:24px}
  .jornada .passo{grid-row:auto}
  .jornada p{margin:0}

  .painel-4{grid-template-columns:repeat(4,1fr)}
  .painel-segmento{grid-template-columns:1fr}
  .trocas{max-width:none}

  .faixa-foto{margin-top:64px}
  .faixa-foto img{aspect-ratio:3 / 1}

  .objecao{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;padding:44px 48px}
  .objecao .botao{margin-top:0;white-space:nowrap}
  .objecao p{margin-top:12px;max-width:34rem}

  .formulario{grid-template-columns:1fr 1fr;gap:22px 24px}
  .campo-largo,.acoes-form,.aviso{grid-column:1 / -1}

  .rodape{padding:76px 0}
  .rodape-linha{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end}
  .rodape-dados{margin:0;text-align:right}
}