/* ═══════════════════════════════════════════════════════════════════════
   GUIA — página de captura e página de obrigado

   Identidade herdada de tokens.css, a mesma da LP /lp/advocacia-no-agro.
   Nenhum valor cru de cor ou tipografia aqui.

   ── Diagramação ──────────────────────────────────────────────────────
   Uma seção só, que cabe inteira em 1440x900 sem rolagem. Não há marca,
   não há menu, não há rodapé longo: a página tem um único trabalho e
   qualquer elemento a mais só disputa atenção com ele.

   A estrutura segue o padrão "Lead Magnet + Form": promessa, prévia do
   material e formulário curto. Os três campos são o limite recomendado
   para captura; acima disso a conversão cai.

   O eixo é uma grade de duas colunas. À esquerda o argumento e a prova
   visual, à direita a decisão. O cartão claro é o único bloco de luz da
   tela, e é isso que faz o olho ir direto nele.

   Sem GSAP e sem Lenis de propósito: não há rolagem para orquestrar.
   ═══════════════════════════════════════════════════════════════════════ */

.pg{
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(1.5rem,3.5svh,2.5rem) var(--gx)
}
@supports not (height:100svh){ .pg{min-height:100vh} }

/* ── Grade principal ─────────────────────────────────────────────────── */
/* As duas colunas centralizadas uma contra a outra. Enquanto havia a prévia
   do material, o certo era amarrar os topos: as alturas eram próximas e a
   linha horizontal fazia as colunas lerem como conjunto. Sem a prévia, a
   coluna de texto é quase metade da altura do cartão, e o topo compartilhado
   deixaria um vazio embaixo do texto que lê como inacabado. */
.split{
  width:100%;max-width:var(--maxw);margin-inline:auto;align-self:stretch;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center
}

/* sem limite de largura aqui: a coluna já é o limite, e o teto de 34rem
   quebrava a headline em quatro linhas curtas dentro de uma coluna larga */
.arg{max-width:none}
.arg__h1{
  font-size:clamp(2.1rem,1.2rem + 3.1vw,3.6rem);
  line-height:1.1;margin:0 0 1.15rem
}
.arg__h1 b{font-weight:400;color:var(--accent)}
.arg .lede{margin:0;max-width:30rem}


/* ═══ Cartão do formulário ═══
   Único bloco claro da tela. O contraste é o que concentra o olho aqui,
   então nada mais na página pode ser claro. */
.card{
  background:var(--bg-paper);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  box-shadow:0 2.5rem 5rem rgba(0,0,0,.45)
}
.card__h2{
  font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  color:var(--ink-on-paper);margin:0 0 1.25rem
}
.card__nota{
  margin:1rem 0 0;font-size:.75rem;line-height:1.5;
  color:var(--ink-on-paper-2)
}

/* ── Rodapé: uma linha, dentro da mesma tela ─────────────────────────── */
.pg__foot{
  padding-top:1.25rem;
  font-size:.75rem;color:var(--ink-2);text-align:center
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULÁRIO BREVO

   O HTML, os name, os id e o action vêm do Brevo e não podem mudar: são
   eles que o endpoint de inscrição espera. A folha do Brevo continua
   carregada porque o script dele depende de classes de comportamento
   (honeypot oculto, painel de mensagem, loader do botão, widget de SMS).

   Nenhuma regra abaixo mexe em display dentro do formulário, com uma
   exceção comentada. Mexer nisso faz o honeypot aparecer, e toda
   inscrição com aquele campo preenchido é recusada pelo Brevo.
   ═══════════════════════════════════════════════════════════════════════ */

/* A folha do Brevo declara box-sizing:content-box dentro de .sib-form, o
   que vence o reset do base.css por especificidade. Sem isto, todo campo
   soma altura + padding + borda e fica 26px mais alto do que o pedido. */
.card .sib-form,
.card .sib-form *,
.card .sib-form *::before,
.card .sib-form *::after{box-sizing:border-box}

.card .sib-form{padding:0;background:transparent!important;text-align:left!important}
.card #sib-form-container{max-width:none}
.card #sib-container{
  max-width:none!important;background:transparent!important;
  border:0!important;padding:0!important;text-align:left!important
}
.card .sib-form-block{padding:0}
.card form > div{padding:0 0 .85rem!important}
.card form > div:last-of-type{padding-bottom:0!important}

.card .entry__label::after{color:var(--accent-on-paper)!important;margin-left:.15em}
.card .entry__label{
  font-family:var(--font-body)!important;
  font-size:.75rem!important;font-weight:500!important;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-on-paper-2)!important;
  margin-bottom:.35rem;display:block
}

.card .input,
.card input.input,
.card select.input{
  width:100%;min-height:46px;height:auto!important;
  padding:.65rem .85rem!important;
  font-family:var(--font-body)!important;font-size:1rem!important;
  color:var(--ink-on-paper)!important;
  background:#fff!important;
  border:1px solid var(--rule-on-paper)!important;
  border-radius:.6rem!important;
  box-shadow:none!important;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.card .input:focus,
.card .input:focus-visible{
  outline:none!important;
  border-color:var(--accent-on-paper)!important;
  box-shadow:0 0 0 3px rgba(131,102,60,.18)!important
}
.card input::placeholder{color:rgba(29,42,25,.38)!important}
/* o autofill do Chrome repinta o fundo do campo e quebra a paleta do cartão */
.card input:-webkit-autofill,
.card input:-webkit-autofill:hover,
.card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink-on-paper);
  -webkit-box-shadow:0 0 0 40rem #fff inset;
  caret-color:var(--ink-on-paper)
}

/* ── Telefone ─────────────────────────────────────────────────────────
   O script do Brevo descarta o <select> do HTML e monta um widget próprio
   no lugar. Estilizar o <select> original não tem efeito nenhum depois do
   boot, por isso as regras miram as classes que o widget cria. O <select>
   continua no HTML como caminho sem JavaScript. */
.card .sib-sms-select{display:flex;flex-direction:row;gap:.5rem;align-items:stretch}
.card .sib-sms-select__title{
  flex:0 0 4.5rem;margin:0;min-height:46px;
  display:flex;align-items:center;gap:.5rem;
  padding:0 1.5rem 0 .7rem;position:relative;cursor:pointer;
  background:#fff;border:1px solid var(--rule-on-paper);border-radius:.6rem
}
.card .sib-sms-select__title::after{
  right:.6rem;top:50%;margin-top:-2px;border-top-color:var(--accent-on-paper)
}
.card .sib-sms-select__label-text{
  margin:0;padding:0;font-size:.875rem;
  color:var(--ink-on-paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.card .sib-sms-select__number-input{
  flex:1;height:auto;min-height:46px;
  background:#fff;border:1px solid var(--rule-on-paper);border-radius:.6rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.card .sib-sms-select__number-input:focus-within{
  border-color:var(--accent-on-paper);
  box-shadow:0 0 0 3px rgba(131,102,60,.18)
}
.card .sib-sms-select__calling-code{
  max-width:3.2rem;padding:0 .15rem 0 .75rem;
  border:0;outline:0;background:transparent;
  font-size:1rem;color:var(--ink-on-paper-2)
}
.card .sib-sms-select__phone-number{
  flex:1;width:auto;padding:0 .9rem 0 .2rem;
  font-size:1rem;color:var(--ink-on-paper);background:transparent
}
.card .sib-sms-select__phone-number::placeholder{color:rgba(29,42,25,.38)}
.card .sib-sms-select__list{
  border-color:var(--rule-on-paper);border-radius:.6rem;
  box-shadow:0 1rem 2.5rem rgba(29,42,25,.2)
}
/* o "?" do Brevo repete, dentro do campo, a instrução de formato que já
   aparece escrita logo abaixo, e no celular fica por cima do input */
.card .sib-sms-tooltip{display:none}
.card .entry__specification{
  font-family:var(--font-body)!important;font-size:.75rem!important;
  color:var(--ink-on-paper-2)!important;margin-top:.3rem
}
/* o <select> só existe antes do boot do Brevo, ou sem JavaScript */
.card .sib-sms-input{display:flex;gap:.5rem;align-items:flex-start}
.card .sib-sms-input > .entry__field:first-child{flex:0 0 7.5rem}

/* ── Botão: o mesmo gradiente dourado do CTA primário da marca ───────── */
.card .sib-form-block__button{
  width:100%;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.75rem!important;
  font-family:var(--font-body)!important;font-size:1rem!important;font-weight:600!important;
  text-align:center!important;
  color:var(--accent-ink)!important;
  background:var(--grad-cta)!important;
  border:0!important;border-radius:var(--radius-pill)!important;
  cursor:pointer;
  transition:background var(--dur) var(--ease),transform .25s var(--ease)
}
.card .sib-form-block__button:hover{background:var(--grad-cta-hover)!important;transform:translateY(-2px)}
.card .sib-form-block__button:focus-visible{outline:3px solid var(--accent-on-paper)!important;outline-offset:3px}

/* ── Mensagens de erro e sucesso na paleta do papel ──────────────────── */
.card .sib-form-message-panel{
  margin:0 0 .85rem;padding:.8rem .95rem;
  font-family:var(--font-body)!important;font-size:.875rem!important;
  border-radius:.6rem!important;border-width:1px!important;border-style:solid!important;
  max-width:none!important
}
.card #error-message{
  color:#7a1f16!important;background:#fdeceb!important;border-color:#e8b4ae!important
}
.card #success-message{
  color:#1d4a2c!important;background:#e8f5ec!important;border-color:#a8d3b6!important
}
.card .entry__error{
  font-family:var(--font-body)!important;font-size:.8125rem!important;
  color:#7a1f16!important;background:#fdeceb!important;border-color:#e8b4ae!important;
  border-radius:.45rem!important;padding:.35rem .55rem;margin-top:.3rem
}
.card .sib-captcha .form__label-row{display:flex;justify-content:flex-start}

/* ═══════════════════════════════════════════════════════════════════════
   OBRIGADO — dois estados exclusivos, nenhum deles no HTML inicial

   O painel de download não existe no HTML entregue pelo servidor: quem
   abre a página sem ter preenchido o formulário não encontra o arquivo nem
   lendo o código-fonte. O JS decide qual dos dois estados exibir.
   ═══════════════════════════════════════════════════════════════════════ */
.ok{text-align:center;max-width:36rem;margin-inline:auto}
.ok__h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);line-height:1.1;margin:0}
.ok__h1 b{font-weight:400;color:var(--accent)}
.ok p{margin:1rem auto 0;max-width:28rem;color:var(--ink-1)}

.baixar{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;margin-top:2.25rem;
  padding:1.05rem 2.25rem;border-radius:var(--radius-pill);
  background:var(--grad-cta);color:var(--accent-ink);
  font-weight:600;text-decoration:none;
  transition:background var(--dur) var(--ease),transform .25s var(--ease)
}
.baixar:hover{background:var(--grad-cta-hover);transform:translateY(-2px)}
.baixar svg{flex:none}

.ok__peso{margin-top:.85rem!important;font-size:.75rem;color:var(--ink-2)}

[hidden]{display:none!important}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET E CELULAR

   Abaixo de 900px a grade vira coluna única e a página deixa de caber em
   uma tela: forçar isso no celular exigiria encolher o formulário a ponto
   de prejudicar o toque. A ordem passa a ser promessa, prova, decisão.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .split{
    grid-template-columns:minmax(0,1fr);gap:1.75rem;
    align-items:start;align-content:start
  }
  .arg{display:contents}
  .arg__cab{order:1;text-align:center;max-width:34rem;margin-inline:auto}
  .card{order:2;max-width:34rem;width:100%;margin-inline:auto}

  .arg__h1{font-size:clamp(1.75rem,6.2vw,2.25rem)}
  .arg .lede{font-size:1rem;max-width:none}

}

@media (max-width:560px){
  .card{padding:1.25rem;border-radius:var(--radius)}
  /* só aqui o seletor de país sobe: em linha, o número ficaria estreito demais */
  .card .sib-sms-select{flex-direction:column;gap:.45rem}
  .card .sib-sms-select__title{flex:0 0 auto;width:100%}
}

/* ── Telas muito estreitas ────────────────────────────────────────────
   O iframe do Turnstile tem 300px fixos, que é mais do que sobra dentro do
   cartão abaixo de 360px de tela. Sem tratamento ele empurra a grade e a
   página inteira ganha rolagem horizontal. A caixa passa a conter o excesso
   e o widget encolhe junto, para não ser cortado em vez de reduzido. */
@media (max-width:380px){
  .card .sib-captcha .form__label-row{max-width:100%;overflow:hidden}
  .card #sib-captcha{
    transform:scale(.8);transform-origin:left top;
    margin-bottom:-13px
  }
}