/* Site institucional Remeti — folha única.
   Camadas: base → layout → componentes → secoes → animacao.
   As coordenadas de desktop saem de design/mockups/remeti_*.geometry.svg.
   A relacao entre cada data-spec e sua origem esta em design/spec-map.md. */

@import url("/fonts/poppins.css");

@layer base, layout, componentes, secoes, animacao;

/* ------------------------------------------------------------------ base */
@layer base {
  :root {
    /* Tokens da secao 4 do contrato. */
    --tinta-forte: #102d24;
    --tinta: #18382d;
    --tinta-media: #28453a;
    --texto-suave: #586b60;
    --verde-escuro: #173a2d;
    --verde: #315f45;
    --verde-medio: #35654b;
    --verde-claro: #76ac63;
    --menta-a: #eaf4d9;
    --menta-b: #d7eac0;
    --menta-cartao: #edf5e3;
    --creme: #fbfaf5;
    --creme-b: #f2f5e9;
    --fundo: #f8f8f2;
    --linha: #e4e9de;
    --branco: #ffffff;

    /* Ajustes de contraste aprovados (secao 4 do contrato). */
    --micro: #6a7670;          /* era #758179 */
    --eyebrow: #5a7563;        /* era #64816c */
    --cinza-verde: #677368;    /* era #718078 */

    /* Sombras convertidas do feDropShadow (blur CSS = 2x stdDeviation). */
    --sombra-cartao: 0 12px 32px rgb(23 55 43 / .10);
    --sombra-painel: 0 12px 36px rgb(16 43 34 / .11);
    --sombra-mapa: 0 15px 40px rgb(16 43 34 / .09);
    --sombra-faq: 0 5px 18px rgb(16 43 34 / .055);

    /* Unidade do canvas de 1440px; vira 1px a partir de 1440 de largura. */
    --u: calc(min(100vw, 1440px) / 1440);
    --cabecalho-altura: 100px;
    --margem: 20px;

    color-scheme: light;
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    position: relative;
    background: var(--fundo);
    color: var(--tinta-media);
    font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    /* Sem -webkit-font-smoothing: afina o traco e afasta o texto da referencia. */
    overflow-x: clip;
  }

  h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, picture { display: block; max-width: 100%; }
  svg { display: block; }
  button { font: inherit; color: inherit; }

  a { color: inherit; text-decoration: none; }
  a:where(.rodape-link, .legal-link, .nav-link):hover { text-decoration: underline; }

  :focus-visible {
    outline: 3px solid var(--verde-medio);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .pular {
    position: fixed;
    inset-inline-start: 16px;
    top: -200px;
    z-index: 60;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--verde-escuro);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: top .2s ease;
  }
  .pular:focus-visible { top: 16px; }

  .oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  [id] { scroll-margin-top: 110px; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .secao { position: relative; isolation: isolate; }

  .palco {
    position: relative;
    width: min(100%, 1440px);
    margin-inline: auto;
    padding-inline: var(--margem);
  }

  /* Formas decorativas: so existem a partir do layout 1:1. */
  .enfeite { display: none; }

  /* Linhas de texto: quebra fixa no desktop, fluxo natural abaixo. */
  .l { display: inline; }
  .l:not(:last-child)::after { content: " "; }

  @media (min-width: 1280px) {
    .palco { padding-inline: 0; }

    .enfeite {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 0;
    }

    .l { display: block; }
    .l:not(:last-child)::after { content: none; }
  }
}

/* ----------------------------------------------------------- componentes */
@layer componentes {
  /* ---- cabecalho --------------------------------------------------- */
  .cabecalho {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 40;
    height: var(--cabecalho-altura);
    background: var(--creme);
  }

  .cabecalho--fixo {
    position: fixed;
    box-shadow: 0 6px 20px rgb(16 45 36 / .08);
  }

  .cabecalho .palco {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
  }

  .marca { display: block; flex: 0 0 auto; width: 170px; }
  .marca img { width: 100%; height: auto; }

  .menu-botao {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
  }
  .menu-botao svg { width: 22px; height: 22px; }
  .menu-botao .barra { transform-origin: center; transition: transform .22s ease, opacity .18s ease; }
  .menu-botao[aria-expanded="true"] .barra-1 { transform: translateY(5px) rotate(45deg); }
  .menu-botao[aria-expanded="true"] .barra-2 { opacity: 0; }
  .menu-botao[aria-expanded="true"] .barra-3 { transform: translateY(-5px) rotate(-45deg); }

  .nav {
    position: absolute;
    inset-inline: var(--margem);
    top: calc(var(--cabecalho-altura) - 10px);
    display: none;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--linha);
    border-radius: 18px;
    background: var(--creme);
    box-shadow: 0 18px 40px rgb(16 45 36 / .12);
  }
  .nav[data-aberto="sim"] { display: grid; }

  /* Sem script o botão não abre nada: a navegação fica visível por padrão. Como ela deixa de
     ser um painel sobreposto, o cabeçalho sai do absoluto e passa a ocupar espaço no fluxo,
     senão o menu cobre a primeira dobra. */
  html:not(.js) .nav {
    position: static;
    display: grid;
    inset: auto;
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
  }
  html:not(.js) .menu-botao { display: none; }
  html:not(.js) .cabecalho { position: static; height: auto; padding-block: 14px 16px; }
  html:not(.js) .cabecalho .palco { height: auto; flex-wrap: wrap; }

  .nav-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding-inline: 12px;
    border-radius: 12px;
    color: var(--tinta);
    font-size: 15px;
    font-weight: 500;
  }
  .nav-link:hover { background: var(--menta-cartao); text-decoration: none; }

  .nav .cabecalho-cta { margin-top: 8px; width: 100%; }

  /* ---- botoes ------------------------------------------------------ */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding-inline: 26px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }

  .btn-escuro { background: var(--verde-escuro); color: #fff; }
  .btn-escuro:hover { background: #1d4737; }

  /* O stroke da maquete é centrado na borda: metade para dentro, metade para fora. */
  .btn-contorno {
    background: transparent;
    color: var(--verde);
    box-shadow: inset 0 0 0 .9px var(--verde), 0 0 0 .9px var(--verde);
  }
  .btn-contorno:hover { background: rgb(49 95 69 / .06); }

  .btn-menta { background: #d8edb8; color: var(--verde-escuro); font-weight: 700; }
  .btn-menta:hover { background: #cfe9a8; }

  .btn-menta-contorno {
    background: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 .85px #b8d69d, 0 0 0 .85px #b8d69d;
  }
  .btn-menta-contorno:hover { background: rgb(216 237 184 / .12); }

  .btn .seta { flex: 0 0 auto; overflow: visible; transition: transform .25s ease; }
  .btn:hover .seta { transform: translateX(4px); }

  /* ---- tipografia recorrente -------------------------------------- */
  .eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .153846em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--eyebrow);
  }

  .titulo-secao {
    font-size: clamp(30px, 5.2vw, 43px);
    font-weight: 800;
    letter-spacing: -.04186em;
    line-height: 1.12;
    color: var(--tinta-forte);
  }

  /* Texto corrido: o navegador evita viúva sozinha na última linha. Não afeta os blocos
     medidos contra a maquete, que no layout 1:1 têm uma linha por elemento e não quebram. */
  .hero-paragrafo,
  .hero-selo,
  .apoio,
  .detalhe-texto,
  .faq-resposta,
  .rotas-aviso .rotulo,
  .mapa-nota,
  .nota-micro,
  .rodape-faixa,
  .rodape-tagline,
  .cta-titulo,
  .cta-apoio,
  .baixar-apoio,
  .baixar-modo p,
  .ajuda-apoio,
  .ajuda-bloco p,
  .ajuda-rodape,
  .pagina-simples p { text-wrap: pretty; }

  .ajuda-titulo,
  .ajuda-bloco h2,
  .ajuda-ressalva,
  .ajuda-lista li,
  .baixar-titulo,
  .cartao-texto { text-wrap: balance; }

  .apoio {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--tinta-media);
  }

  /* ---- cartoes de detalhe (secoes 3 e 4) --------------------------- */
  .detalhe {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      "icone titulo"
      "icone texto";
    column-gap: 18px;
    row-gap: 6px;
    padding: 20px;
    border-radius: 20px;
    background: var(--branco);
    box-shadow: var(--sombra-painel);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .detalhe:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgb(16 43 34 / .14); }

  .detalhe-icone {
    grid-area: icone;
    align-self: start;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--menta-cartao);
    display: grid;
    place-items: center;
  }
  .detalhe-icone svg { width: 54px; height: 54px; }

  .detalhe-titulo { grid-area: titulo; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--tinta); }
  .detalhe-texto { grid-area: texto; font-size: 14px; font-weight: 400; line-height: 1.64; color: var(--texto-suave); }
}

/* --------------------------------------------------------------- secoes */
@layer secoes {

  /* =========================== 1. hero ============================= */
  .hero {
    background: linear-gradient(124.78deg, var(--creme) 0%, var(--creme-b) 100%);
    padding-block: calc(var(--cabecalho-altura) + 24px) 56px;
  }

  .hero-conteudo { display: grid; gap: 34px; }
  .hero-texto { display: grid; gap: 28px; }

  .hero-titulo {
    font-size: clamp(38px, 9.6vw, 67px);
    font-weight: 800;
    letter-spacing: -.046269em;
    line-height: 1.1045;
    color: var(--tinta-forte);
  }
  .hero-titulo .verde { color: var(--verde); }

  .hero-paragrafo {
    font-size: clamp(17px, 4.6vw, 20px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--tinta-forte);
  }

  .hero-acoes { display: flex; flex-wrap: wrap; gap: 16px; }
  .hero-acoes .seta { width: 16px; height: 12px; }

  .hero-selo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--texto-suave);
  }
  .hero-ponto { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4.7px; border-radius: 50%; background: #83b96b; }

  .hero-figura { position: relative; }
  .hero-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 690 / 460;
    object-fit: cover;
    border-radius: 28px;
  }

  /* =========================== 2. escolha ========================== */
  .escolha { background: var(--creme); padding-block: 56px; }

  .escolha-cabecalho { display: grid; gap: 12px; }
  .escolha .apoio { font-size: 18px; color: var(--texto-suave); }
  .escolha-cartoes { display: grid; gap: 24px; margin-top: 34px; }

  .cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: var(--branco);
    box-shadow: var(--sombra-cartao);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .cartao:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgb(23 55 43 / .15); }

  .cartao-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 620 / 327;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
  }

  .cartao-corpo { position: relative; flex: 1 1 auto; padding: 24px; display: grid; gap: 14px; justify-items: start; }

  .pilula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding-inline: 14px;
    border-radius: 14px;
    background: var(--menta-a);
    color: var(--verde);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .cartao-titulo {
    font-size: clamp(21px, 4.4vw, 27px);
    font-weight: 700;
    letter-spacing: -.022222em;
    line-height: 1.26;
    color: var(--tinta-forte);
  }

  .cartao-texto { font-size: 16px; font-weight: 400; line-height: 1.625; color: var(--texto-suave); }
  .cartao-botao { min-height: 54px; font-size: 14px; }
  .cartao-botao .seta { width: 15px; height: 12px; }

  .rodape-faixa::before,
  .rodape-base::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
  }
  .rodape-faixa::before { background: rgb(226 231 221 / .5); }
  .rodape-base::before { background: rgb(227 233 223 / .75); }

  .rodape-faixa {
    position: relative;
    margin-top: 38px;
    padding-top: 26px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--texto-suave);
  }

  /* ========================= 3. confianca ========================== */
  .confianca,
  .rotas,
  .faq { background: var(--fundo); padding-block: 56px; }

  .confianca-texto { display: grid; gap: 14px; }

  .confianca .eyebrow,
  .rotas .eyebrow { font-size: 14px; letter-spacing: .15em; }

  .confianca-titulo {
    font-size: clamp(31px, 5.4vw, 44px);
    font-weight: 750;
    letter-spacing: -.032955em;
    line-height: 1.2045;
    color: var(--tinta-forte);
  }
  .confianca-titulo .destaque { color: var(--verde-medio); }

  .confianca-lista { display: grid; gap: 18px; margin-top: 30px; }

  /* Mesma altura nas duas: a maquete dimensiona a moldura pelo conteudo, mas celular
       real tem tela fixa. As telas foram re-renderizadas em 414x950 com a barra de abas
       presa embaixo, entao as duas caixas sao identicas. */
  .telas { display: flex; align-items: flex-start; gap: 20px; margin-top: 36px; justify-content: center; }
  .tela {
    --larg-tela: 244;
    --alt-tela: 560;
    width: 244px;
    max-width: calc(50% - 10px);
    border-radius: 25px;
    background: var(--branco);
    box-shadow: var(--sombra-painel);
    overflow: hidden;
  }
  /* contain nunca corta; a caixa já tem a proporção exata do master, então não sobra tarja. */
  .tela img { width: 100%; height: auto; aspect-ratio: var(--larg-tela) / var(--alt-tela); object-fit: contain; }

  .nota-micro { margin-top: 30px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--cinza-verde); }

  .divisoria { height: 2px; margin-top: 26px; background: rgb(228 233 222 / .75); }

  /* ============================ 4. rotas =========================== */
  .rotas-texto { display: grid; gap: 14px; }

  .rotas-titulo {
    font-size: clamp(32px, 5.6vw, 46px);
    font-weight: 750;
    letter-spacing: -.032609em;
    line-height: 1.1957;
    color: var(--tinta-forte);
  }

  .rotas .detalhe { margin-top: 26px; }

  .rotas-aviso {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 18px;
    background: #e8f3dc;
  }
  .rotas-aviso .rotulo { font-size: 17px; font-weight: 700; line-height: 1.4; color: #244a37; }
  .rotas-aviso-icone {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #d5e9c3;
    display: grid;
    place-items: center;
  }
  .rotas-aviso-icone svg { width: 34px; height: 34px; }

  .mapa {
    position: relative;
    margin-top: 30px;
    padding: 28px 24px;
    border-radius: 32px;
    background: var(--branco);
    box-shadow: var(--sombra-mapa);
  }

  .junto { white-space: nowrap; }

  .mapa-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .107692em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--cinza-verde);
  }

  .mapa-titulo {
    margin-top: 12px;
    font-size: clamp(19px, 2.3vw, 26px);
    font-weight: 750;
    line-height: 1.4;
    color: var(--tinta-forte);
  }

  .mapa-desenho { position: relative; margin-top: 24px; }
  .mapa-desenho svg { width: 100%; height: auto; }

  .mapa-cidades { display: flex; justify-content: space-between; margin-top: 10px; }
  .mapa-cidade { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--tinta); }

  .mapa-nota {
    display: grid;
    place-items: center;
    min-height: 83px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 17px;
    background: #f2f6ed;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
    color: #294b39;
  }

  /* ============================= 5. faq ============================ */
  .faq-cabecalho { display: grid; gap: 12px; }
  .faq .apoio { color: #536b5e; }

  .faq-titulo {
    font-size: clamp(29px, 5vw, 40px);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.16;
    color: var(--tinta-forte);
  }

  .faq-lista { display: grid; gap: 10px; margin-top: 30px; }

  .faq-item {
    border-radius: 19px;
    background: var(--branco);
    box-shadow: var(--sombra-faq);
  }

  .faq-pergunta {
    position: relative;
    display: block;
    padding: 18px 48px 18px 70px;
    cursor: pointer;
    list-style: none;
    font-size: clamp(16px, 3.8vw, 18px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--tinta);
  }
  .faq-pergunta::-webkit-details-marker { display: none; }

  .faq-numero {
    position: absolute;
    left: 20px;
    top: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--menta-cartao);
    color: var(--verde-medio);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
  }

  .faq-chevron {
    position: absolute;
    right: 22px;
    top: 24px;
    width: 13px;
    height: 8px;
    color: var(--texto-suave);
    transition: transform .25s ease;
  }
  .faq-item[open] .faq-chevron { transform: rotate(180deg); }

  .faq-resposta {
    padding: 0 20px 18px 70px;
    /* paragrafo corrido: evita palavra sozinha na ultima linha */
    text-wrap: pretty;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5714;
    color: var(--texto-suave);
  }

  /* ======================= 6. cta + rodape ========================= */
  .rodape { background: var(--fundo); padding-block: 48px; }

  .cta-painel {
    position: relative;
    padding: 36px 26px 40px;
    border-radius: 32px;
    background: linear-gradient(110.6deg, #173a2d 0%, #204936 100%);
    overflow: hidden;
    z-index: 1;
  }
  .cta-painel::after {
    content: "";
    position: absolute;
    right: -20%;
    top: -30%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #2c5a43;
    opacity: .5;
    z-index: 1;
  }

  .cta-conteudo { position: relative; z-index: 3; display: grid; gap: 16px; }

  .cta-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .153846em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #cbe8ae;
  }

  .cta-titulo {
    font-size: clamp(29px, 5.4vw, 42px);
    font-weight: 750;
    letter-spacing: -.030952em;
    line-height: 1.3095;
    color: #fff;
  }
  .cta-titulo .claro { color: #d6edba; }

  .cta-apoio { font-size: clamp(17px, 4.4vw, 20px); font-weight: 400; line-height: 1.4; color: #f4f7f1; }

  .cta-acoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
  .cta-acoes .seta { width: 19px; height: 14px; }

  .rodape-corpo { display: grid; gap: 34px; margin-top: 48px; }

  .rodape-marca { display: block; width: 190px; }
  .rodape-marca img { width: 100%; height: auto; }
  .rodape-tagline { margin-top: 14px; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--texto-suave); }

  .rodape-coluna-titulo { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--tinta); }
  .rodape-lista { display: grid; gap: 10px; margin-top: 16px; }

  .rodape-link,
  .rodape-social {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--texto-suave);
  }
  .rodape-social svg { flex: 0 0 auto; width: 18px; height: 18px; }
  /* Afordância só no hover: em repouso o bloco tem de ficar igual à maquete. */
  a.rodape-social:hover { color: var(--tinta); }

  .rodape-base {
    position: relative;
    display: grid;
    gap: 10px;
    margin-top: 34px;
    padding-top: 26px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--micro);
  }
  .rodape-legais { display: block; }
  .rodape-base-marca { display: grid; gap: 4px; }
  .rodape-empresa { color: inherit; }

  /* ======================== pagina /baixar ========================= */
  /* Sem maquete: compõe com os mesmos tokens e componentes do resto do site,
     em fluxo normal, sem o layout absoluto 1:1 das seções da home. */
  .baixar {
    background: linear-gradient(124.78deg, var(--creme) 0%, var(--creme-b) 100%);
    padding-block: calc(var(--cabecalho-altura) + 48px) 72px;
  }
  .baixar .palco { max-width: 1248px; }

  .baixar-topo { display: grid; gap: 16px; max-width: 720px; }

  .baixar-titulo {
    font-size: clamp(32px, 6.4vw, 52px);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.1;
    color: var(--tinta-forte);
  }

  .baixar-apoio {
    font-size: clamp(17px, 4.4vw, 20px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--tinta-media);
  }

  .selos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }

  .selo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 22px;
    border-radius: 15px;
    background: var(--verde-escuro);
    color: #fff;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  }
  .selo:hover {
    background: #1d4737;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgb(16 45 36 / .18);
  }
  .selo svg { flex: 0 0 auto; width: 28px; height: 28px; }
  .selo-texto { display: grid; }
  .selo-linha-1 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #cfe3d6;
  }
  .selo-linha-2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }

  .baixar-requisitos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--texto-suave);
  }
  .baixar-requisito { display: flex; align-items: center; gap: 9px; }
  .baixar-requisito svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--verde-medio); }

  .baixar-modos { display: grid; gap: 24px; margin-top: 60px; }
  .baixar-modo {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding: 30px;
    border-radius: 26px;
    background: var(--branco);
    box-shadow: var(--sombra-cartao);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .baixar-modo:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgb(23 55 43 / .15); }
  .baixar-modo h2 {
    font-size: clamp(21px, 4.4vw, 27px);
    font-weight: 700;
    letter-spacing: -.022222em;
    line-height: 1.26;
    color: var(--tinta-forte);
  }
  .baixar-modo p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.625;
    color: var(--texto-suave);
  }

  .baixar-nota {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--linha);
    font-size: 14px;
    line-height: 1.6;
    color: var(--texto-suave);
  }

  @media (min-width: 768px) {
    .baixar-modos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Com o cabeçalho no fluxo, a folga reservada para ele deixa de ser necessária. */
  html:not(.js) .hero,
  html:not(.js) .baixar,
  html:not(.js) .pagina-simples { padding-top: 28px; }

  /* ========================= pagina /ajuda ========================= */
  /* Mesmos tokens e ritmo das outras páginas; nenhum componente novo. */
  .ajuda { background: var(--fundo); padding-block: calc(var(--cabecalho-altura) + 48px) 72px; }
  .ajuda .palco { max-width: 860px; }

  .ajuda-topo { display: grid; gap: 14px; }
  .ajuda-titulo {
    font-size: clamp(30px, 5.6vw, 44px);
    font-weight: 750;
    letter-spacing: -.032955em;
    line-height: 1.15;
    color: var(--tinta-forte);
  }
  .ajuda-apoio { font-size: clamp(16px, 4.2vw, 18px); font-weight: 400; line-height: 1.6; color: var(--tinta-media); }

  .ajuda-bloco {
    margin-top: 40px;
    padding: 30px;
    border-radius: 22px;
    background: var(--branco);
    box-shadow: var(--sombra-painel);
  }
  .ajuda-bloco h2 {
    font-size: clamp(20px, 4.4vw, 26px);
    font-weight: 750;
    letter-spacing: -.022em;
    line-height: 1.3;
    color: var(--tinta-forte);
  }
  .ajuda-bloco p { margin-top: 12px; font-size: 16px; line-height: 1.625; color: var(--texto-suave); }
  .ajuda-ressalva { color: var(--cinza-verde); }

  .ajuda-tabela-area { margin-top: 18px; overflow-x: auto; }
  .ajuda-tabela { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
  .ajuda-tabela th,
  .ajuda-tabela td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linha); }
  .ajuda-tabela thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eyebrow);
    border-bottom-color: var(--menta-b);
  }
  .ajuda-tabela tbody th { font-weight: 600; color: var(--tinta); white-space: nowrap; }
  .ajuda-tabela tbody td { color: var(--texto-suave); white-space: nowrap; }
  .ajuda-tabela tbody tr:last-child th,
  .ajuda-tabela tbody tr:last-child td { border-bottom: 0; }

  .ajuda-lista { display: grid; gap: 9px; margin-top: 16px; }
  .ajuda-lista li {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto-suave);
  }
  .ajuda-lista li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verde-claro);
  }

  .ajuda-rodape {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--linha);
    font-size: 15px;
    line-height: 1.65;
    color: var(--texto-suave);
  }

  /* ======================== paginas simples ======================== */
  .pagina-simples { padding-block: calc(var(--cabecalho-altura) + 48px) 64px; background: var(--creme); }
  .pagina-simples .palco { max-width: 760px; }
  .pagina-simples h1 {
    font-size: clamp(30px, 5.2vw, 43px);
    font-weight: 800;
    letter-spacing: -.04186em;
    line-height: 1.12;
    color: var(--tinta-forte);
  }
  .pagina-simples p { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--tinta-media); }

  /* ---------------------- documentos legais ----------------------- */
  /* Termos e privacidade vêm de Markdown: o CSS precisa cobrir o que o renderizador emite,
     não uma marcação escrita à mão. Texto longo para ler, não para escanear. */
  .documento-estado {
    margin-top: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--menta-a);
    font-size: 15px;
    line-height: 1.6;
    color: var(--tinta-forte);
  }
  .documento-estado code { font-size: .92em; }

  /* Com o pixel desligado não há parágrafo de estado, e o documento é o primeiro filho. */
  .documento-legal { margin-top: 28px; }
  .documento-estado + .documento-legal { margin-top: 28px; }
  .palco > .documento-legal:first-child { margin-top: 0; }
  .documento-legal h1 {
    font-size: clamp(28px, 4.8vw, 40px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.14;
    color: var(--tinta-forte);
  }
  .documento-legal h2 {
    margin-top: 44px;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tinta-forte);
    scroll-margin-top: calc(var(--cabecalho-altura) + 16px);
  }
  .documento-legal h3 {
    margin-top: 28px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tinta-forte);
  }
  .documento-legal p,
  .documento-legal li { font-size: 16px; line-height: 1.7; color: var(--tinta-media); }
  .documento-legal p { margin-top: 16px; }
  .documento-legal strong { color: var(--tinta-forte); font-weight: 600; }
  .documento-legal ul { margin: 16px 0 0; padding-left: 22px; list-style: disc; }
  .documento-legal li { margin-top: 8px; }
  .documento-legal li::marker { color: var(--verde-medio); }
  .documento-legal hr {
    margin: 40px 0 0;
    border: 0;
    border-top: 1px solid var(--linha);
  }
  .documento-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .documento-legal code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--creme-b);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
  }

  /* A tabela de finalidades e bases legais é larga: rola sozinha em vez de estourar a página. */
  .documento-legal table {
    display: block;
    overflow-x: auto;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 15px;
  }
  .documento-legal th,
  .documento-legal td {
    padding: 10px 14px;
    border: 1px solid var(--linha);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
    color: var(--tinta-media);
  }
  .documento-legal th { background: var(--creme-b); color: var(--tinta-forte); font-weight: 600; }

  .documento-fonte {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
    font-size: 15px;
    color: var(--texto-suave);
  }
}

/* ======================================================= 768px e acima */
@media (min-width: 768px) {
  @layer secoes {
    :root { --margem: 40px; }

    .hero { padding-block: calc(var(--cabecalho-altura) + 48px) 72px; }
    .hero-conteudo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }

    .escolha-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartao-corpo { padding: 28px; }

    /* Tablet: texto e cartões à esquerda, apoio visual numa coluna própria. */
    .confianca-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
    .confianca-texto { grid-column: 1; }
    .confianca-lista { grid-column: 1; }
    .telas { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

    .rotas-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
    .rotas-texto,
    .rotas .detalhe,
    .rotas-aviso { grid-column: 1; }
    .mapa { grid-column: 2; grid-row: 1 / span 3; }

    .mapa { margin-top: 0; padding: 34px 32px; }
    .rotas-aviso { max-width: 500px; }

    .cta-painel { padding: 48px 44px 52px; }
    .rodape-corpo { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
    .rodape-base { grid-template-columns: 1fr auto; align-items: center; }
  }
}

/* ============================== abaixo de 1280px: alvos de toque ===== */
/* Nenhum alvo interativo fica abaixo de 44px fora do layout 1:1. */
@media (max-width: 1279.98px) {
  @layer secoes {
    .rodape-link,
    .rodape-social { min-height: 44px; }

    /* Só os links soltos do rodapé. Link dentro de frase é isento do alvo de 44px
       (WCAG 2.5.8 exclui inline links) e um inline de 44px infla a caixa de linha. */
    .rodape-base .legal-link,
    .rodape-legais .legal-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
    }

    .marca,
    .rodape-marca { padding-block: 4px; }

    .faq-pergunta { min-height: 56px; }
  }
}

/* ===================================================== 1280px e acima */
/* Reproducao 1:1 do canvas de 1440px: x escala com --u, y fica em px. */
@media (min-width: 1280px) {
  @layer secoes {
    :root { --margem: 0px; }

    /* ---------------------------- cabecalho ------------------------ */
    .cabecalho .palco { display: block; height: var(--cabecalho-altura); }
    .marca { position: absolute; left: calc(96 * var(--u)); top: 24.5px; width: calc(206 * var(--u)); }
    .menu-botao { display: none; }

    html:not(.js) .cabecalho { position: absolute; height: var(--cabecalho-altura); padding-block: 0; }
    html:not(.js) .cabecalho .palco { height: var(--cabecalho-altura); flex-wrap: nowrap; }
    html:not(.js) .hero,
    html:not(.js) .baixar,
    html:not(.js) .pagina-simples { padding-top: calc(var(--cabecalho-altura) + 48px); }
    html:not(.js) .hero { padding-top: 0; }

    .nav,
    .nav[data-aberto="sim"] {
      position: static;
      display: block;
      inset: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
    .nav-link {
      position: absolute;
      display: block;
      min-height: 0;
      padding: 0;
      top: 42.25px;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--tinta);
      background: none;
    }
    .nav-link:hover { background: none; }
    .nav-link-1 { left: calc(622 * var(--u)); }
    .nav-link-2 { left: calc(779 * var(--u)); }
    .nav-link-3 { left: calc(952 * var(--u)); }
    .nav-link-4 { left: calc(1138 * var(--u)); }

    .nav .cabecalho-cta {
      display: inline-flex;
      position: absolute;
      margin: 0;
      left: calc(1243 * var(--u));
      top: 25px;
      width: calc(132 * var(--u));
      min-height: 0;
      height: 50px;
      padding: 4px 0 0;
      font-size: 14px;
      font-weight: 600;
    }

    /* ------------------------------- hero -------------------------- */
    .hero { padding: 0; }
    .hero .palco { height: 1000px; }
    .hero-conteudo,
    .hero-texto { display: block; }

    .hero-titulo {
      position: absolute;
      left: calc(96 * var(--u));
      top: 230.55px;
      font-size: 67px;
      line-height: 74px;
    }
    .hero-paragrafo {
      position: absolute;
      left: calc(96 * var(--u));
      top: 554px;
      width: calc(588 * var(--u));
      font-size: 20px;
      line-height: 30px;
    }

    .hero-acoes { display: block; }
    .hero-acoes .btn {
      position: absolute;
      top: 684px;
      height: 58px;
      min-height: 0;
      padding: 2px 0 0;
    }
    /* O rótulo da maquete está ancorado em x=217, não no centro do botão. */
    .btn-hero-enviar { left: calc(96 * var(--u)); width: calc(234 * var(--u)); padding-left: calc(8 * var(--u)); }
    /* O traço de 1,8px da maquete é centrado na borda do retângulo. */
    .btn-hero-entregar { left: calc(346 * var(--u)); width: calc(257 * var(--u)); }
    .btn-hero-enviar .seta { position: absolute; top: 23px; right: calc(18 * var(--u)); }

    .hero-selo { position: absolute; left: calc(105 * var(--u)); top: 786.3px; }

    .hero-figura {
      position: absolute;
      left: calc(697 * var(--u));
      top: 260px;
      width: calc(690 * var(--u));
      height: 460px;
      z-index: 1;
    }
    .hero-foto { height: 460px; aspect-ratio: auto; border-radius: 50px; }
    .hero-rota { z-index: 2; }

    /* ----------------------------- escolha ------------------------- */
    .escolha { padding: 0; }
    .escolha .palco { height: 1000px; }
    .escolha-cabecalho { display: block; }

    .escolha .eyebrow { position: absolute; left: calc(96 * var(--u)); top: 30.35px; color: var(--verde); }
    .escolha .titulo-secao { position: absolute; left: calc(96 * var(--u)); top: 56.85px; font-size: 43px; line-height: 60.2px; }
    .escolha .apoio { position: absolute; left: calc(96 * var(--u)); top: 124.1px; font-size: 18px; line-height: 25.2px; }

    .escolha-cartoes {
      position: absolute;
      left: calc(96 * var(--u));
      top: 202px;
      width: calc(1248 * var(--u));
      grid-template-columns: repeat(2, calc(612 * var(--u)));
      gap: calc(24 * var(--u));
      margin: 0;
    }
    .cartao { min-height: 650px; }
    .cartao-foto { height: 327px; aspect-ratio: auto; }
    .cartao-corpo { display: block; padding: 27px calc(30 * var(--u)) 30px; }

    .cartao .pilula {
      display: flex;
      width: calc(var(--larg-pilula, 190) * var(--u));
      align-items: flex-start;
      padding: 8.45px 0 0;
      line-height: 1.4;
    }
    .cartao-titulo { margin-top: 16.55px; font-size: 27px; line-height: 34px; }
    .cartao-texto { margin-top: 21.85px; font-size: 16px; line-height: 26px; }
    .cartao-botao {
      margin-top: 25.6px;
      width: calc(var(--larg-botao, 321) * var(--u));
      height: 54px;
      min-height: 0;
      padding: 6px calc(var(--recuo-rotulo, 0) * var(--u)) 0 0;
    }
    .cartao-botao .seta { position: absolute; top: 21px; right: calc(var(--seta-dir, 15) * var(--u)); }

    .rodape-faixa {
      position: absolute;
      left: calc(96 * var(--u));
      top: 913px;
      width: calc(1248 * var(--u));
      margin: 0;
      padding-top: 20.35px;
      font-size: 13px;
      line-height: 18.2px;
    }

    /* ---------------------------- confianca ------------------------ */
    .confianca { padding: 0; }
    .confianca .palco { height: 900px; }
    .confianca-painel,
    .confianca-texto { display: block; }

    .confianca .eyebrow { position: absolute; left: calc(96 * var(--u)); top: 80.3px; }
    .confianca-titulo { position: absolute; left: calc(96 * var(--u)); top: 120.1px; font-size: 44px; line-height: 53px; }
    .confianca .apoio { position: absolute; left: calc(96 * var(--u)); top: 298.55px; font-size: 17px; line-height: 27px; }

    .confianca-lista { display: block; margin: 0; }
    .confianca .detalhe {
      position: absolute;
      left: calc(96 * var(--u));
      display: block;
      width: calc(500 * var(--u));
      height: 143px;
      padding: 0;
      border-radius: 20px;
    }
    /* O cartao 1 cresceu 25px porque a copy aprovada ocupa quatro linhas: com 143px o
       texto encostava na borda inferior. O cartao 2 desce o mesmo tanto e o vao de 18px
       entre eles e preservado. */
    .confianca .detalhe-1 { top: 415px; height: 168px; }
    .confianca .detalhe-2 { top: 601px; }
    .confianca .detalhe-icone { position: absolute; left: calc(21 * var(--u)); top: 21px; }
    .confianca .detalhe-titulo { position: absolute; left: calc(90 * var(--u)); top: 18.1px; font-size: 18px; line-height: 25.2px; }
    .confianca .detalhe-texto { position: absolute; left: calc(90 * var(--u)); top: 49.6px; width: calc(390 * var(--u)); font-size: 14px; line-height: 23px; }

    .telas { display: block; margin: 0; }
    .tela {
      position: absolute;
      top: 172px;
      width: calc(var(--larg-tela) * var(--u));
      height: calc(var(--alt-tela) * 1px);
      max-width: none;
    }
    .tela img { height: 100%; aspect-ratio: auto; }
    .tela-1 { left: calc(777 * var(--u)); }
    .tela-2 { left: calc(1064 * var(--u)); }

    .nota-micro { position: absolute; left: calc(96 * var(--u)); top: 779.35px; margin: 0; font-size: 13px; line-height: 18.2px; }

    .divisoria { position: absolute; left: calc(96 * var(--u)); width: calc(1248 * var(--u)); margin: 0; }
    .confianca .divisoria { top: 824px; }
    .rotas .divisoria { top: 799px; }
    .faq .divisoria { position: static; margin: 41px 0 0 calc(96 * var(--u)); }

    /* ------------------------------ rotas -------------------------- */
    .rotas { padding: 0; }
    .rotas .palco { height: 890px; }
    .rotas-painel,
    .rotas-texto { display: block; }

    .rotas .eyebrow { position: absolute; left: calc(96 * var(--u)); top: 80.3px; }
    .rotas-titulo { position: absolute; left: calc(96 * var(--u)); top: 121.4px; font-size: 46px; line-height: 55px; }
    .rotas .apoio {
      position: absolute;
      left: calc(96 * var(--u));
      top: 259.55px;
      width: calc(420 * var(--u));
      font-size: 17px;
      line-height: 27px;
    }

    .rotas .detalhe {
      position: absolute;
      margin-top: 0;
      left: calc(96 * var(--u));
      top: 410px;
      display: block;
      width: calc(500 * var(--u));
      height: 155px;
      padding: 0;
      border-radius: 22px;
    }
    .rotas .detalhe-icone { position: absolute; left: calc(21 * var(--u)); top: 23px; }
    .rotas .detalhe-titulo { position: absolute; left: calc(90 * var(--u)); top: 22.1px; font-size: 18px; line-height: 25.2px; }
    .rotas .detalhe-texto { position: absolute; left: calc(90 * var(--u)); top: 54.6px; font-size: 14px; line-height: 23px; }

    .rotas-aviso {
      position: absolute;
      left: calc(96 * var(--u));
      top: 595px;
      width: calc(500 * var(--u));
      max-width: none;
      height: 66px;
      display: block;
      margin: 0;
      padding: 0;
      border-radius: 18px;
    }
    .rotas-aviso-icone { position: absolute; left: calc(18 * var(--u)); top: 16px; }
    .rotas-aviso .rotulo { position: absolute; left: calc(65 * var(--u)); top: 23.15px; font-size: 17px; line-height: 23.8px; }

    .mapa {
      position: absolute;
      left: calc(680 * var(--u));
      top: 105px;
      width: calc(650 * var(--u));
      height: 560px;
      margin: 0;
      padding: 0;
      border-radius: 32px;
    }
    .mapa-eyebrow { position: absolute; left: calc(50 * var(--u)); top: 41.35px; font-size: 13px; line-height: 18.2px; }
    .mapa-titulo { position: absolute; left: calc(50 * var(--u)); top: 83.7px; margin: 0; font-size: 26px; line-height: 36.4px; }

    /* A faixa do traçado ocupa y 190–290 dentro do cartão (viewBox 0 190 650 100). */
    .mapa-desenho { position: absolute; left: 0; top: 190px; width: 100%; height: 100px; margin: 0; }
    .mapa-desenho svg { width: 100%; height: 100%; }

    .mapa-cidades { display: block; margin: 0; }
    .mapa-cidade { position: absolute; top: 294.1px; translate: -50% 0; font-size: 18px; line-height: 25.2px; }
    .mapa-cidade-1 { left: calc(110 * var(--u)); }
    .mapa-cidade-2 { left: calc(334 * var(--u)); }
    .mapa-cidade-3 { left: calc(541 * var(--u)); }

    .mapa-nota {
      position: absolute;
      left: calc(50 * var(--u));
      top: 390px;
      width: calc(550 * var(--u));
      height: 83px;
      min-height: 0;
      margin: 0;
      padding: 2px 0 0;
      border-radius: 17px;
      font-size: 15px;
      line-height: 21px;
    }

    /* ------------------------------- faq --------------------------- */
    .faq { padding: 0; }
    /* A lista cresce com as respostas novas; a divisória acompanha. */
    .faq .palco { height: auto; padding: 222px 0 71px; }
    .faq-cabecalho { display: block; }

    .faq .eyebrow { position: absolute; left: calc(96 * var(--u)); top: 59.35px; }
    .faq-titulo { position: absolute; left: calc(96 * var(--u)); top: 86px; font-size: 40px; line-height: 56px; }
    .faq .apoio { position: absolute; left: calc(96 * var(--u)); top: 153.15px; font-size: 17px; line-height: 23.8px; }

    .faq-lista {
      width: calc(1248 * var(--u));
      margin: 0 0 0 calc(96 * var(--u));
      gap: 10px;
    }
    /* A altura do item precisa fechar em pixel inteiro: a fração escorria para a seção
       seguinte e deslocava os rótulos dos botões da seção 6 em 1px. */
    .faq-item[open] { min-height: 116px; padding-bottom: 17.92px; }
    .faq-pergunta { padding: 20px calc(60 * var(--u)) 0 calc(74 * var(--u)); font-size: 18px; line-height: 25.2px; }
    /* Mesmo motivo do item aberto: 20 + 25,203 + 20 deixava 0,203px de resto em cada
       item fechado, e os oito somavam 1,6px que escorriam para a seção 6. */
    .faq-item:not([open]) .faq-pergunta { padding-bottom: 19.797px; }
    .faq-numero { left: calc(20 * var(--u)); top: 20px; padding-top: 2px; }
    .faq-chevron { right: calc(34 * var(--u)); top: 26px; }
    .faq-resposta {
      margin: 8.9px 0 0 calc(74 * var(--u));
      /* A maquete quebrava cada resposta em duas linhas a mao, e 700px era a largura da
         linha mais longa: resquicio, nao medida de projeto. Com o texto revisado isso
         deixava 475px vazios a direita e quebrava o que caberia inteiro. */
      max-width: calc(1140 * var(--u));
      padding: 0;
      font-size: 14px;
      line-height: 22px;
    }

    /* -------------------------- cta + rodape ----------------------- */
    /* O layout 1:1 do rodapé pertence à seção cta-rodape da home. Nas outras páginas
       o mesmo rodapé precisa fluir normalmente, senão sobra meia tela em branco. */
    [data-section="cta-rodape"] { padding: 0; }
    [data-section="cta-rodape"] .palco { height: 1000px; }

    [data-section="cta-rodape"] .cta-painel {
      position: absolute;
      left: calc(96 * var(--u));
      top: 56px;
      width: calc(1248 * var(--u));
      height: 472px;
      padding: 0;
      border-radius: 32px;
      overflow: visible;
    }
    [data-section="cta-rodape"] .cta-painel::after { content: none; }
    [data-section="cta-rodape"] .cta-conteudo { display: block; }
    [data-section="cta-rodape"] .cta-eyebrow { position: absolute; left: calc(58 * var(--u)); top: 64.35px; font-size: 13px; line-height: 18.2px; }
    [data-section="cta-rodape"] .cta-titulo { position: absolute; left: calc(58 * var(--u)); top: 114.8px; font-size: 42px; line-height: 55px; }
    [data-section="cta-rodape"] .cta-apoio { position: absolute; left: calc(60 * var(--u)); top: 241px; font-size: 20px; line-height: 28px; }

    [data-section="cta-rodape"] .cta-acoes { display: block; margin: 0; }
    [data-section="cta-rodape"] .cta-acoes .btn {
      position: absolute;
      top: 311px;
      height: 58px;
      min-height: 0;
      justify-content: flex-start;
      font-size: 15px;
    }
    [data-section="cta-rodape"] .btn-cta-enviar { left: calc(58 * var(--u)); width: calc(258 * var(--u)); padding: 2px 0 0 calc(28 * var(--u)); }
    [data-section="cta-rodape"] .btn-cta-entregar { left: calc(332 * var(--u)); width: calc(273 * var(--u)); padding: 2px 0 0 calc(32 * var(--u)); }
    [data-section="cta-rodape"] .btn-cta-entregar .seta { right: calc(20 * var(--u)); }
    [data-section="cta-rodape"] .cta-acoes .seta { position: absolute; top: 22px; right: calc(20 * var(--u)); }

    [data-section="cta-rodape"] .rodape-corpo { display: block; margin: 0; }
    [data-section="cta-rodape"] .rodape-marca { position: absolute; left: calc(96 * var(--u)); top: 602.3px; width: calc(190 * var(--u)); }
    [data-section="cta-rodape"] .rodape-tagline { position: absolute; left: calc(96 * var(--u)); top: 659.75px; margin: 0; font-size: 15px; line-height: 24px; }

    [data-section="cta-rodape"] .rodape-coluna { position: absolute; top: 602.3px; }
    [data-section="cta-rodape"] .rodape-coluna-1 { left: calc(536 * var(--u)); }
    [data-section="cta-rodape"] .rodape-coluna-2 { left: calc(791 * var(--u)); }
    [data-section="cta-rodape"] .rodape-coluna-3 { left: calc(1076 * var(--u)); }
    [data-section="cta-rodape"] .rodape-coluna-titulo { font-size: 14px; line-height: 19.6px; }
    [data-section="cta-rodape"] .rodape-lista { display: block; margin-top: 18.4px; gap: 0; }
    [data-section="cta-rodape"] .rodape-link,
    [data-section="cta-rodape"] .rodape-social {
      height: 28px;
      min-height: 0;
      align-items: flex-start;
      font-size: 14px;
      line-height: 19.6px;
    }
    [data-section="cta-rodape"] .rodape-coluna-3 .rodape-lista { margin-top: 22.4px; }
    [data-section="cta-rodape"] .rodape-social { height: 38px; padding-left: calc(5 * var(--u)); gap: calc(9 * var(--u)); }
    [data-section="cta-rodape"] .rodape-social svg { margin-top: var(--ajuste-marca, 1px); }

    [data-section="cta-rodape"] .rodape-base {
      position: absolute;
      left: calc(96 * var(--u));
      top: 794px;
      width: calc(1248 * var(--u));
      padding-right: calc(8 * var(--u));
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: 0;
      padding-top: 32.4px;
      font-size: 12px;
      line-height: 16.8px;
    }
  }
}

/* -------------------------------------------------------------- animacao */
@layer animacao {
  /* O estado escondido só existe quando há JavaScript para desfazê-lo: sem script a
     página inteira ficava invisível, porque nada adicionava .visivel. */
  .revelar {
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--atraso, 0ms);
  }
  .js .revelar { opacity: 0; transform: translateY(16px); }
  .js .revelar.visivel { opacity: 1; transform: none; }

  /* Os caminhos usam pathLength="100", entao o traco cobre todo o percurso. */
  .tracado {
    stroke-dasharray: 100;
    transition: stroke-dashoffset 1.5s ease-out;
    transition-delay: var(--atraso, 0ms);
  }
  .js .tracado { stroke-dashoffset: 100; }
  .js .tracado.visivel { stroke-dashoffset: 0; }

  /* O harness marca o documento antes de capturar: vale o estado de repouso.
     `transition: none` tambem cancela transicoes ja em andamento. */
  .sem-animacao .revelar,
  .sem-animacao .tracado { transition: none; }
  .sem-animacao .revelar { opacity: 1; transform: none; }
  .sem-animacao .tracado { stroke-dashoffset: 0; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      transition-delay: 0ms !important;
    }
    .revelar { opacity: 1; transform: none; transition: none; }
    .tracado { stroke-dashoffset: 0; transition: none; }
  }
}