/* Landing page (/lp). Arquivo proprio porque a pagina nao estende a base.html.

   **As @font-face abaixo nao sao duplicacao decorativa.** Ate 2026-09-28 esta
   pagina puxava Manrope e IBM Plex Mono do Google Fonts -- as MESMAS familias
   que o app.css ja serve de /static/fonts. Isso vazava o IP de todo visitante
   para um terceiro, na unica pagina do produto sem aviso de privacidade. As
   fontes sao self-hosted desde o redesign para o PDF do servidor nao depender
   de rede; aqui o motivo e o mesmo mais a privacidade.

   Mesmos arquivos, mesmos unicode-range do app.css -- mexer la pede mexer aqui
   ate as duas folhas serem unificadas. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
}

:root {
      --escura: #1E5C4A;
      --clara: #5FA07D;
      --risco-medio: #C97B4E;
      --risco-alto: #B4482A;
      --bg: #FFFFFF;
      --bg-alt: #F1F5F2;
      --escura-pale: #E7F0EB;
      --clara-pale: #EEF5F0;
      --ink: #1B2420;
      --ink-soft: #57655E;
      --line: #E1E8E3;
      --card: #FFFFFF;
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); font-family: "Manrope", system-ui, sans-serif; color: var(--ink); font-weight: 500; }
    h1, h2, h3 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.01em; color: var(--escura); }
    p { margin: 0; }
    .mono { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
    a { color: var(--escura); text-decoration: none; }
    a:hover { color: var(--clara); }
    .container { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
    .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clara); }
    .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--escura); color: #FFFFFF; font-weight: 800; font-size: 16px; padding: 15px 26px; border-radius: 10px; border: none; cursor: pointer; }
    .btn-primary:hover { background: #164537; }
    .btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
    .btn-ghost:hover { border-color: var(--escura); color: var(--escura); }

    /* mobile: nada pode estourar a largura da tela */
    img, svg { max-width: 100%; }
    h1, h2, h3, p, span, a, li, blockquote, figcaption { overflow-wrap: break-word; }
    /* Trava de seguranca: a pagina nunca rola para o lado. As regras acima e a
       media query abaixo cuidam de cada bloco caber; isto cobre o que so
       aparece no aparelho -- tamanho de fonte do sistema (Android/Samsung
       aumenta o texto em px tambem), fonte substituta mais larga, zoom. Visto
       em 2026-09-29 num celular real, sem reproduzir no emulador. `hidden`
       fica de fallback para Safari < 16, que nao conhece `clip`. */
    html, body { overflow-x: hidden; overflow-x: clip; }
    /* lista que substitui o grafico por quinzena no celular (ver landing.html) */
    .q-lista { display: none; }

    /* O template e todo em style inline, por isso o `!important` abaixo: e a
       unica forma de uma media query vencer um atributo `style`. */
    @media (max-width: 720px) {
      .container { padding-left: 16px; padding-right: 16px; }
      .mono { overflow-wrap: anywhere; }
      .btn-primary { font-size: 15px; padding: 14px 20px; }
      h1 { font-size: 30px !important; }
      h2 { font-size: 25px !important; }

      /* topo: marca (logo + "powered by" empilhados) e o botao na mesma linha
         quando cabem. Antes eram tres faixas -- logo, "powered by", links --
         ~145px de tela antes do titulo. As ancoras saem: a pagina e uma
         rolagem linear e as duas secoes estao logo abaixo.
         **O topo PODE quebrar** (`wrap`, e o "powered by" tambem): com a fonte
         do sistema aumentada, `nowrap` fazia o "powered by" passar por baixo
         do botao -- e e o tipo de largura fixa que empurra a pagina. */
      .lp-topo { overflow: visible !important; }
      .lp-topo .container { height: auto !important; min-height: 64px; flex-wrap: wrap !important; padding-top: 14px; padding-bottom: 14px; row-gap: 10px !important; }
      .lp-marca { flex-direction: column; align-items: flex-start !important; gap: 2px !important; min-width: 0; max-width: 100%; }
      .lp-marca > a:first-child img { height: 34px !important; }
      .lp-powered { padding: 4px 0 !important; border-left: none !important; white-space: normal !important;
                    flex-wrap: wrap; flex-shrink: 1 !important; row-gap: 4px !important; max-width: 100%; }
      .lp-nav { gap: 0 !important; flex-shrink: 0; margin-left: auto; }
      .lp-rodape-marca { flex-wrap: wrap; flex-shrink: 1 !important; max-width: 100%; }
      .lp-rodape-marca span { white-space: normal !important; }
      .lp-ancora { display: none !important; }

      /* respiro vertical de desktop (72-96px por secao) vira buraco no celular */
      .lp-secao { padding-top: 48px !important; padding-bottom: 48px !important; }
      .lp-hero { padding-top: 32px !important; padding-bottom: 24px !important; }
      #produto > .container { gap: 32px !important; }
      .lp-depoimento { margin-bottom: 8px !important; }
      .lp-depoimento > div { padding: 20px 16px !important; }
      .lp-depoimento blockquote { font-size: 17px !important; padding-left: 16px !important; }
      .lp-depoimento figcaption { padding-left: 19px !important; }

      /* passos 1-2-3: o numero acompanha a primeira linha, nao o meio do bloco */
      .lp-passo { align-items: flex-start !important; }

      /* cartao de relatorio: tres camadas de padding (container + cartao +
         bloco) deixavam ~230px de texto numa tela de 360 */
      .rel-wrap { padding: 12px !important; margin-bottom: 8px !important; }
      .rel-wrap > div:first-child { padding: 20px 16px !important; }
      .rel-wrap > div:not(:first-child):not(.rel-duo), .rel-duo > div { padding: 18px 16px !important; }
      .rel-wrap > p { margin: 12px 4px 14px !important; }
      .rel-meta { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 16px 20px !important; }
      .rel-meta > div:last-child { grid-column: 1 / -1; }
      .rel-duo { grid-template-columns: 1fr !important; }
      .rel-wrap h3 { font-size: 26px !important; }

      /* grafico por quinzena -> lista */
      .q-grafico { display: none !important; }
      .q-lista { display: block; list-style: none; margin: 10px 0 12px; padding: 0; }
      .q-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                    padding: 9px 10px; border-bottom: 1px solid #F0EEE9; font-size: 14.5px; color: #6B6459; }
      .q-lista li:last-child { border-bottom: none; }
      .q-lista .mono { color: #17181C; font-size: 14.5px; }
      .q-lista .q-melhor { background: #EDF3EE; border-radius: 8px; border-bottom-color: transparent;
                           color: #1B5E4A; font-weight: 700; }
      .q-lista .q-melhor .mono { color: #1B5E4A; }

      /* linha do tempo vertical: a linha horizontal de seis colunas ficava
         solta sobre o primeiro item quando a grade virava uma coluna */
      .tl-intro { margin-bottom: 32px !important; }
      .tl { margin-bottom: 0 !important; padding-top: 0 !important; }
      .tl-linha { display: none; }
      .tl-grid { grid-template-columns: 1fr !important; row-gap: 22px !important; padding-left: 26px; }
      .tl-grid::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
      .tl-item { position: relative; gap: 4px !important; }
      .tl-item > div:first-child { position: absolute; left: -26px; top: 2px; }

      /* alvos de toque: icones de 18px e links de 20px ficavam abaixo do
         minimo de 24px (WCAG 2.5.8) */
      .lp-social { padding: 11px; margin: -11px -3px; }
      .lp-rodape-marca { padding: 6px 0; }
    }

/* ------------------------------------------- aviso de privacidade */
/* Copia das regras do app.css: a landing nao carrega aquela folha, e o banner
   (parcial `_banner_privacidade.html`) precisa parecer o mesmo nas duas.
   Mexer la pede mexer aqui ate as folhas serem unificadas.

   **As variaveis abaixo nao sao decoracao.** O `:root` desta folha usa outro
   vocabulario (`--bg`, `--card`, `--line`) e NAO define `--surface`, `--ink-2`,
   `--dark` e companhia. Sem elas, `background: var(--surface)` nao resolve e o
   banner sai TRANSPARENTE -- foi o que aconteceu ao copiar as regras sem os
   tokens. Redeclarar no escopo do banner e o que permite manter as regras
   identicas as do app.css, em vez de reescreve-las com os nomes daqui e ter
   duas versoes que divergem sozinhas. Os valores sao os mesmos do app.css. */
.cookie-banner {
  --surface: #FFFFFF;
  --surface-2: #F3F6F2;
  --ink-2: #5C5647;
  --dark: #1E5C4A;
  --dark-hover: #174A3B;
  --dark-wash: #E3EFE8;
  --rule-strong: rgba(28, 27, 23, .22);
  --radius: 8px;
  --shadow: 0 1px 2px rgba(28, 27, 23, .05), 0 10px 30px -22px rgba(28, 27, 23, .35);
}
.cookie-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: min(680px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  font-size: 13.5px;
}
.cookie-texto { margin: 0; line-height: 1.5; flex: 1; color: var(--ink-2); }
.cookie-link { color: var(--dark); text-underline-offset: 2px; }
.cookie-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
  padding: 7px 15px; border-radius: var(--radius);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cookie-btn-recusar {
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule-strong);
}
.cookie-btn-recusar:hover { background: var(--dark-wash); color: var(--dark); border-color: var(--dark); }
.cookie-btn-aceitar {
  background: var(--dark); color: #fff; border: 1px solid transparent;
}
.cookie-btn-aceitar:hover { background: var(--dark-hover); }
/* A media query do app.css veio junto so agora: sem ela o banner ficava em
   linha no celular, com o texto espremido em ~120px ao lado dos botoes. Fica
   no fim da folha para vencer as regras-base acima. */
@media (max-width: 620px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; bottom: 12px; padding: 14px; }
  .cookie-acoes { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}