/* Tô Facin — folha única. Coral #FF6B4A, âmbar #FFB347, tinta #1B1B1F, fundo #FFF9F4. */
:root {
  --coral: #FF6B4A;
  --ambar: #FFB347;
  --tinta: #1B1B1F;
  --fundo: #FFF9F4;
  --cinza: #6B6B70;
  --papel: #FFFFFF;
  --borda: #F0E2D6;
  --coral-suave: #FFE7E0;
  /* Coral e âmbar puros ficam nos detalhes. Todo lugar que recebe texto branco por cima
     usa este degradê escurecido: #FF6B4A dá 2,82:1 com branco e #FFB347 dá 1,78:1, abaixo
     até do mínimo de 3:1 de texto grande. Este par fica entre 5,06:1 (na ponta coral) e
     4,86:1 (o mínimo, na ponta âmbar), acima do 4,5:1 do WCAG AA em todo o percurso. */
  --degrade: linear-gradient(135deg, #C93C1F 0%, #B25900 100%);
  /* coral escuro para texto: 5,36:1 sobre o fundo creme e 5,60:1 sobre o papel branco */
  --acento: #C0341F;
  --medida: 38rem;
  --medida-pagina: 44rem;   /* miolo da página; a landing sobrescreve para 62rem */
  --fonte: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  /* Sem isto, uma URL de 119 caracteres numa nota arrasta a página inteira para o lado
     no celular (era o caso de ipva-2026-es, com 1.108 px de largura numa tela de 360). */
  overflow-wrap: break-word;
}
p, li, td, th, dd, figcaption, summary, .dominio { overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
a { color: var(--acento); }
a:hover { color: #9E2A17; }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: #fff; padding: .6rem 1rem; border-radius: 0 0 10px 0;
}
.pular:focus { left: 0; z-index: 40; }

/* ------------------------------------------------------------------ cabeçalho */
/* Uma linha só. No celular o menu de texto sai e entra um botão curto: o cabeçalho
   fixo media 97,8 px em duas linhas (11,6% da tela do iPhone) e agora mede ~62. */
.topo {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  align-items: center; justify-content: space-between;
  padding: .55rem 1.1rem;
  max-width: 62rem; margin: 0 auto;
}
.marca {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font-weight: 800; font-size: 1.15rem; color: var(--tinta); text-decoration: none;
}
.marca img { border-radius: 9px; display: block; }
.menu { display: flex; flex-wrap: wrap; gap: 0 1.1rem; font-weight: 600; font-size: .95rem; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cinza); text-decoration: none;
}
.menu a:hover { color: var(--acento); }
.topo .botao-curto {
  display: none; align-items: center; min-height: 44px;
  background: var(--degrade); color: #fff; text-decoration: none;
  font-weight: 800; font-size: .95rem; padding: 0 1.1rem; border-radius: 999px;
}
@media (max-width: 39.99rem) {
  .topo .menu { display: none; }
  .topo .botao-curto { display: inline-flex; }
}

main {
  /* A medida vem da variável, não escrita à mão: era por isso que a variável da medida não mudava
     nada e a landing precisava anular o max-width em vez de só trocar o número. */
  max-width: var(--medida-pagina);
  margin: 0 auto;
  padding: .5rem 1.1rem 3rem;
}
main > p, main > ul, main > ol, main > .nota, .fonte > p, .cta > p { max-width: var(--medida); }
h1 {
  font-size: 2rem; line-height: 1.18; font-weight: 800;
  margin: .4rem 0 .6rem; letter-spacing: -.02em; text-wrap: balance;
}
h2 { font-size: 1.45rem; font-weight: 800; margin: 2.2rem 0 .6rem; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: 1.12rem; font-weight: 800; margin: 1.4rem 0 .4rem; }
p { margin: 0 0 1rem; }
.resumo { font-size: 1.12rem; color: #3A3A40; max-width: var(--medida); }
.mini { font-size: .92rem; color: var(--cinza); }
.dominio { color: var(--cinza); font-size: .88rem; }

/* ---------------------------------------------------- capa das páginas internas */
/* Antes as 83 páginas internas abriam em texto preto sobre creme, sem nada da marca:
   pareciam contrato em processador de texto. Agora abrem pela mesma faixa do herói. */
.capa {
  background: var(--degrade); color: #fff;
  padding: 1.6rem 1.1rem 2rem; border-radius: 0 0 26px 26px; margin-bottom: 1.4rem;
  position: relative; overflow: hidden;
}
.capa::after {
  content: ''; position: absolute; width: 20rem; height: 20rem; border-radius: 50%;
  right: -8rem; top: -11rem; background: rgba(90, 26, 4, .12); pointer-events: none;
}
.capa > .interno { position: relative; max-width: 44rem; margin: 0 auto; }
.capa h1 { color: #fff; margin: .2rem 0 .5rem; }
.capa .resumo { color: #fff; }
.capa .migalha, .capa .migalha a { color: #fff; }
.capa .migalha a { text-decoration: underline; text-underline-offset: 3px; }
.migalha { font-size: .92rem; color: var(--cinza); margin: 0; }
.migalha a { display: inline-flex; align-items: center; min-height: 44px; }
.migalha a { color: var(--cinza); }

.selo {
  display: inline-block;
  font-size: .88rem; font-weight: 700; color: #8A4A1E;
  background: #FFF1E3; border: 1px solid var(--borda);
  padding: .3rem .8rem; border-radius: 999px; margin: 0 0 1.4rem;
}

/* Botão principal: degradê escuro com texto branco (ver --degrade). Sobre fundo colorido
   (herói, chamada final) ele inverte — branco com texto #C93C1F, 5,06:1. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  background: var(--degrade);
  color: #fff; text-decoration: none;
  font-weight: 800; font-size: 1.1rem; text-align: center;
  padding: .7rem 1.8rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(201, 60, 31, .22);
}
.botao:hover { color: #fff; filter: brightness(1.06); }

a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 6px;
}

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: 2rem 0 1.4rem; padding: 0; list-style: none; }
.numeros li {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 20px;
  padding: 1.2rem .9rem 1.1rem; text-align: center;
  box-shadow: 0 8px 24px rgba(27, 27, 31, .05);
}
/* 2,7rem em peso 800 é texto grande (mínimo 3:1); o coral escuro dá 5,60:1 sobre branco. */
.numeros strong { display: block; font-size: 2.5rem; font-weight: 800; color: var(--acento); line-height: 1.1; letter-spacing: -.03em; }
.numeros span { display: block; font-size: 1rem; line-height: 1.35; color: #55555C; margin-top: .3rem; }

ul.marcada { list-style: none; padding-left: 0; margin: 0 0 1rem; font-size: 1.08rem; }
ul.marcada li { position: relative; padding-left: 1.3rem; margin-bottom: .6rem; }
ul.marcada li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--coral);
}

.passos { margin: 0 0 1rem; padding-left: 1.3rem; }
.passos li { margin-bottom: .8rem; }
.prazo { display: block; color: var(--cinza); font-size: .92rem; }
.ficha { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; max-width: var(--medida); }
.ficha li { background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; padding: .6rem .9rem; }

/* ------------------------------------------------------------------- perguntas */
details {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 14px;
  padding: .3rem 1.1rem; margin-bottom: .7rem;
}
summary {
  display: flex; align-items: center; gap: .9rem; min-height: 44px;
  font-weight: 700; cursor: pointer; list-style: none; padding: .5rem 0;
}
summary::-webkit-details-marker { display: none; }
/* Chevron próprio no lugar do ▶ preto do navegador. */
summary::after {
  content: ''; flex: none; margin-left: auto;
  width: .62rem; height: .62rem; margin-top: -.2rem;
  border-right: 2.5px solid var(--acento); border-bottom: 2.5px solid var(--acento);
  transform: rotate(45deg);
}
details[open] summary::after { transform: rotate(-135deg); margin-top: .18rem; }
@media (prefers-reduced-motion: no-preference) { summary::after { transition: transform .18s ease; } }
details p:last-child { margin-bottom: 0; }
details[open] summary { margin-bottom: .4rem; }
details > *:last-child { padding-bottom: .6rem; }

/* --------------------------------------------------------------------- tabelas */
/* A legenda fica FORA da área que rola: dentro dela era cortada junto com a tabela. */
.tabela { margin: 0 0 1.4rem; }
.legenda-tabela { font-size: .95rem; color: var(--cinza); margin: 0 0 .5rem; max-width: var(--medida); }
.rolagem {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 14px; border: 1px solid var(--borda); background: var(--papel);
  /* sombra de rolagem: mostra que há mais tabela do lado direito */
  background-image: linear-gradient(to right, rgba(27,27,31,.10), rgba(27,27,31,0) 12px),
                    linear-gradient(to left, rgba(27,27,31,.10), rgba(27,27,31,0) 12px);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 14px 100%, 14px 100%;
  background-attachment: local, local;
}
table { border-collapse: collapse; width: 100%; min-width: 20rem; font-size: .96rem; background: var(--papel); }
th, td {
  padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top;
  /* Largura mínima por coluna. Sem isto, numa tabela de cinco colunas no celular a de observação
     (20rem) comia a largura e a primeira sobrava com 42 px: "África do Sul" saía com uma letra por
     linha, e a linha ficava com 441 px de altura. A tabela já rola de lado; o que faltava era ela
     assumir a largura de que precisa em vez de se espremer. */
  min-width: 6.5rem;
}
thead th { background: #FFF1E3; font-weight: 800; }
tbody tr:last-child td { border-bottom: 0; }
td.placa { font-weight: 800; font-size: 1.05rem; }
th.obs, td.obs { min-width: 20rem; }
/* link solto dentro da célula: alvo de toque de 44 px (os links no meio da frase ficam como estão) */
.link-oficial { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
th.curta, td.curta { white-space: nowrap; }
@media (min-width: 40rem) { thead th { white-space: nowrap; } }

.nota {
  background: var(--papel); border: 1px solid var(--borda);
  box-shadow: inset 4px 0 0 var(--ambar);
  border-radius: 14px; padding: .9rem 1.1rem .9rem 1.3rem; margin: 0 0 1.4rem;
}
.nota h2 { margin-top: 0; font-size: 1.2rem; }
.nota p:last-child { margin-bottom: 0; }

.fonte { margin: 2rem 0; }
.lista-fonte { list-style: none; padding-left: 0; margin: 0 0 .6rem; }
.lista-fonte li { margin-bottom: .2rem; }
.lista-fonte a { display: inline-flex; align-items: center; min-height: 44px; }

.cta {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 1.4rem 1.4rem 1.5rem;
  margin: 2.2rem 0 1rem;
}
.cta h2 { margin-top: 0; }

.indice { columns: 1; column-gap: 1.4rem; list-style: none; padding-left: 0; margin: 0; font-size: 1.02rem; }
.indice li { break-inside: avoid; }
/* 80 links sublinhados um embaixo do outro viravam parede: o sublinhado fica no hover.
   Link no meio de frase continua sublinhado, que é onde ele precisa se destacar. */
.indice a, .rodape nav a { text-decoration: none; }
.indice a:hover, .rodape nav a:hover { text-decoration: underline; }
.indice a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------- rodapé */
.rodape {
  border-top: 1px solid var(--borda);
  padding: 2rem 1.1rem 2.4rem;
  /* segue a medida da página: 44rem nas internas, 62rem na landing (ver body.landing) */
  max-width: var(--medida-pagina); margin: 2rem auto 0;
}
.rodape-grade { display: grid; gap: 1.4rem 2rem; grid-template-columns: 1fr; }
.rodape-marca { display: inline-flex; align-items: center; min-height: 44px; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--tinta); text-decoration: none; }
.rodape-marca img { border-radius: 9px; display: block; }
.rodape h2 { font-size: .88rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); margin: 0 0 .2rem; }
.rodape nav { display: flex; flex-direction: column; font-size: 1rem; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.rodape .assinatura { border-top: 1px solid var(--borda); margin: 1.6rem 0 0; padding-top: 1rem; max-width: none; }
@media (min-width: 40rem) {
  .rodape-grade { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (min-width: 40rem) {
  body { font-size: 18px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.7rem; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .indice { columns: 2; }
  .capa { padding: 2.4rem 1.1rem 2.8rem; border-radius: 0 0 34px 34px; }
}
@media (min-width: 60rem) {
  main { padding-left: 2.5rem; padding-right: 2.5rem; }
  .capa { padding-left: 2.5rem; padding-right: 2.5rem; }
  /* mesmo recuo interno do main: capa e corpo no mesmo eixo (antes davam 288 e 328) */
  .capa > .interno { padding-left: 2.5rem; padding-right: 2.5rem; }
  /* rodapé no mesmo eixo do texto: nas internas o miolo tem recuo de 2,5rem; na landing o
     conteúdo já encosta na borda do contêiner, então lá o rodapé não leva recuo nenhum. */
  .rodape { padding-left: 2.5rem; padding-right: 2.5rem; }
  body.landing .rodape { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  a, .botao { transition: color .15s ease, background .15s ease, filter .15s ease; }
}

/* =========================================================== landing (index) */
/* A landing tem escala própria: títulos grandes e pesados, texto de apoio nunca abaixo
   de 1.05rem, seções largas com respiro e fundos alternados. Cor mora nos cards de
   categoria, no herói e nos detalhes; o fundo da página continua claro. */

body.landing { --medida-pagina: 62rem; }
body.landing main { max-width: none; padding: 0; }
body.landing .topo {
  position: sticky; top: 0; z-index: 30;
  max-width: none;
  padding: .5rem max(1.1rem, calc((100% - 62rem) / 2));
  background: rgba(255, 249, 244, .92);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(240, 226, 214, .7);
}
body.landing .menu { font-size: 1rem; gap: 0 1.2rem; }
body.landing .mini { font-size: 1.02rem; line-height: 1.55; }
body.landing p { margin-bottom: 1.1rem; }

/* O cabeçalho fixo mede ~62 px; a âncora precisa de folga maior que ele. */
.faixa { position: relative; padding: 2.4rem 1.1rem; scroll-margin-top: 5.5rem; overflow: hidden; }
[tabindex="-1"]:focus { outline: none; }
.faixa > .interno { position: relative; max-width: 62rem; margin: 0 auto; }
.faixa-clara { background: var(--papel); }
.faixa-azul { background: #EEF5FB; }
.faixa-quente { background: linear-gradient(180deg, #FFF1E8 0%, #FFF9F4 100%); }
.faixa h2 {
  font-size: 1.95rem; font-weight: 800; margin: 0 0 .9rem;
  letter-spacing: -.025em; line-height: 1.1; max-width: 26ch; text-wrap: balance;
}
.faixa h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; margin: 2.2rem 0 .8rem; text-wrap: balance; }
.olho {
  font-size: .9rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento); margin: 0 0 .7rem;
}
.chamada { font-size: 1.15rem; line-height: 1.6; color: #3A3A40; max-width: var(--medida); margin-bottom: 1.8rem; }
.faixa p { max-width: var(--medida); }
.legenda-print { font-size: 1rem; color: var(--cinza); text-align: center; margin: .9rem auto 0; max-width: 26rem; text-wrap: pretty; }
figure { margin: 0; }

/* bolhas decorativas: dois círculos suaves no canto, atrás do conteúdo */
.bolhas::before, .bolhas::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 179, 71, .26), rgba(255, 179, 71, 0) 70%);
}
.bolhas::before { width: 34rem; height: 34rem; right: -14rem; top: -12rem; }
.bolhas::after {
  width: 26rem; height: 26rem; left: -12rem; bottom: -12rem;
  background: radial-gradient(circle at 50% 50%, rgba(255, 107, 74, .18), rgba(255, 107, 74, 0) 70%);
}

/* --------------------------------------------------------------------- herói */
.hero {
  position: relative; overflow: hidden;
  background: var(--degrade);
  color: #fff;
  padding: 2.2rem 1.1rem 3rem;
  border-radius: 0 0 32px 32px;
}
/* Os dois círculos decorativos escurecem, não clareiam. Um véu branco sobre o degradê
   levantava o fundo justamente onde cai o texto de apoio do herói e derrubava o contraste
   para 4,31:1; escurecendo, o pior caso continua sendo o do próprio degradê (4,86:1). */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(90, 26, 4, .12); pointer-events: none;
}
.hero::before { width: 42rem; height: 42rem; right: -16rem; top: -22rem; }
.hero::after { width: 22rem; height: 22rem; left: -9rem; bottom: -12rem; background: rgba(90, 26, 4, .1); }
.hero .interno { position: relative; max-width: 62rem; margin: 0 auto; display: grid; gap: 2rem; align-items: center; }
.hero h1 {
  color: #fff; font-size: 2.5rem; font-weight: 800; line-height: 1.04;
  margin: 0 0 .9rem; letter-spacing: -.03em; max-width: 12ch;
}
.hero .promessa { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 1.5rem; max-width: 24rem; }
.hero .botao { background: #fff; color: #C93C1F; font-size: 1.12rem; box-shadow: 0 10px 24px rgba(120, 40, 10, .25); }
.hero .botao:hover { background: #FFF3EA; color: #C93C1F; }
.hero .mini { color: #fff; margin-top: .9rem; max-width: 26rem; }
.hero .visual { position: relative; justify-self: center; width: 100%; max-width: 21rem; }
.hero .carinha {
  position: absolute; z-index: 2; left: -.9rem; top: -2rem;
  width: 4.6rem; height: 4.6rem; border-radius: 26%;
  transform: rotate(-10deg);
  box-shadow: 0 16px 32px rgba(120, 40, 10, .32);
}

/* moldura de iPhone, só CSS.
   O raio é a medida do aparelho, perguntada a ele: o iPhone 17 Pro respondeu 402 pt de largura de
   tela e 62 pt de canto — 15,4%. Vira proporção da largura, não número fixo, para valer igual na
   moldura do desktop e no recorte largo do celular.
   Aqui usa-se ARCO DE CÍRCULO de propósito. A tentação é pedir a curva contínua do CSS, já que o
   canto do aparelho é contínuo — mas no mesmo raio ela mantém a lateral reta por mais tempo e sai
   MAIS quadrada que o arco, não menos. Comparado lado a lado, o arco na medida real é o que lê
   como iPhone. Não troque sem comparar de novo. */
.iphone {
  position: relative;
  width: 100%; max-width: 300px; margin: 0 auto;
  container-type: inline-size;
  background: #1B1B1F;
  border-radius: 56px;
  padding: 9px;
  box-shadow: 0 24px 50px rgba(27, 27, 31, .3), inset 0 0 0 2px rgba(255, 255, 255, .16);
}
/* A medida do aparelho: a tela do iPhone 17 Pro tem 402 pt de largura e canto de 62 pt — 15,4%,
   não os 13,7% que eu tinha estimado antes. Como a tela é 18 px menor que a moldura, 14,5% da
   moldura dá os 15,4% da tela. */
.iphone .tela { position: relative; border-radius: 14.5cqw; overflow: hidden; background: #fff; line-height: 0; }
.iphone .tela img { display: block; width: 100%; border-radius: 14.5cqw; }
/* A ilha dinâmica NÃO é desenhada aqui: a captura do aparelho já traz a dela, e a pílula do CSS
   caía por cima, desalinhada — duas ilhas quase juntas, que é o artefato que se via no alto da
   tela. O elemento continua no HTML só para não quebrar quem já tem a página em cache. */
.iphone .ilha { display: none; }

/* No celular a moldura de iPhone sai de cena: uma tela de 440 pt dentro de 280 px CSS
   é 0,64× — o corpo de 17 pt do iOS virava 10,8 px e o secundário de 13 pt virava 8,3 px,
   ilegível. Aqui a tela vira um recorte largo do alto, a 0,81×, com esmaecimento na base
   para o corte ser leitura e não parecer print cortado. */
@media (max-width: 47.99rem) {
  .iphone { max-width: 26rem; background: none; padding: 0; box-shadow: none; }
  .iphone .tela {
    /* Sem moldura, a tela ocupa a largura inteira do bloco: 13,7cqw é a proporção do aparelho. */
    border-radius: 15.4cqw; aspect-ratio: 900 / 1120;
    border: 1px solid rgba(27, 27, 31, .1); box-shadow: 0 14px 30px rgba(27, 27, 31, .15);
  }
  .iphone .tela img { position: absolute; left: 0; top: 0; border-radius: 15.4cqw 15.4cqw 0 0; }
  .iphone .tela::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  }
  .iphone .ilha { display: none; }
}

/* recorte de tela sem moldura: só o pedaço que interessa, grande o bastante para ler */
.recorte-tela {
  width: 100%; max-width: 26rem; margin: 0 auto; container-type: inline-size;
  border-radius: 15.4cqw; overflow: hidden; line-height: 0;
  border: 1px solid rgba(27, 27, 31, .1);
  box-shadow: 0 16px 34px rgba(27, 27, 31, .16);
}
.recorte-tela img { display: block; width: 100%; }

/* arte compartilhável, em formato de story */
.story {
  width: 100%; max-width: 220px; margin: 0 auto;
  border-radius: 24px; overflow: hidden; line-height: 0;
  border: 1px solid rgba(27, 27, 31, .08);
  box-shadow: 0 16px 34px rgba(27, 27, 31, .2);
}
.story img { display: block; width: 100%; }

/* dois visuais lado a lado (só a partir do tablet: em 544 px espremia dois iPhones) */
.par-visual { display: grid; gap: 2rem; justify-items: center; align-items: center; grid-template-columns: 1fr; margin: 0 0 2rem; }
@media (min-width: 48rem) { .par-visual { grid-template-columns: 1fr 1fr; } }

/* bloco de texto + print */
.dupla { display: grid; gap: 2rem; align-items: center; }
.dupla .texto p:last-child { margin-bottom: 0; }
.dupla .texto h2 { max-width: none; }

/* o fecho da abertura */
.fecho {
  font-size: 1.4rem; font-weight: 800; line-height: 1.25; text-align: center;
  max-width: 30rem; margin: 2.4rem auto 0; letter-spacing: -.02em; color: var(--tinta);
}
.fecho b { color: var(--acento); }

/* listas de uma linha: cartões brancos com borda de verdade (branco sobre creme dava 2%) */
.linhas { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.linhas li {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 16px;
  padding: 1rem 1.2rem; font-size: 1.06rem; line-height: 1.5;
  box-shadow: 0 6px 18px rgba(27, 27, 31, .05);
}
.faixa-clara .linhas li { background: var(--fundo); box-shadow: none; }
.linhas strong { font-weight: 800; color: var(--tinta); }
@media (min-width: 48rem) { .linhas.tres { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------ a abertura: a nuvem */
/* Um tamanho só: os três corpos anteriores não tinham relação com importância e
   deixavam pílulas de 56 e de 38 px na mesma linha. Cor marca o que importa. */
.obrigacoes {
  list-style: none; padding: 0; margin: 1.6rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.obrigacoes li {
  font-weight: 800; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.01em;
  color: #3A3A40; background: var(--papel); border: 1px solid var(--borda);
  border-radius: 999px; padding: .45rem 1rem;
}
.obrigacoes .forte { color: #fff; background: var(--degrade); border-color: transparent; box-shadow: 0 6px 16px rgba(201, 60, 31, .22); }
.problema-texto { font-size: 1.15rem; line-height: 1.6; color: #3A3A40; max-width: var(--medida); }
.problema-texto p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- cards de categoria (do app) */
/* Mesma linguagem do card que o app mostra nas boas-vindas (OnboardingView.categoria):
   cena com degradê do tema, ícone branco em pastilha translúcida com borda clara,
   título grande arredondado, pastilhas do que cobre, luz difusa com círculos
   DESFOCADOS e sombra na cor do tema. Os seis temas foram reescritos para conviver
   com o coral da marca: mesmo peso, mesma temperatura quente, e escuros o bastante
   para o texto branco passar de 4,5:1 até na ponta clara do degradê com a luz por cima.
   Medido, branco sobre a ponta clara + luz: carro 4,61 · documentos 5,01 · casa 4,55 ·
   saúde 4,65 · dinheiro 4,87 · compras 5,33. */
.cats { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .cats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
.cat {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 1.5rem 1.4rem 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow: 0 16px 34px var(--sombra);
}
.cat::before, .cat::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .12); filter: blur(40px);
}
.cat::before { width: 14rem; height: 14rem; right: -3.5rem; top: -6rem; }
.cat::after { width: 9rem; height: 9rem; left: -2rem; bottom: -3.5rem; background: rgba(255, 255, 255, .09); }
.cat .icone {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem; border-radius: 18px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .38);
  margin-bottom: .9rem;
}
.cat .icone svg { width: 2rem; height: 2rem; display: block; }
.cat h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 .8rem; color: #fff; }
.cat .cobre { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.1rem; }
.cat .cobre li {
  font-size: .88rem; font-weight: 800; line-height: 1.3;
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .42);
}
.cat .sabe { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.cat .sabe li { position: relative; padding-left: 1.1rem; font-size: 1.02rem; line-height: 1.45; max-width: 28rem; }
.cat .sabe li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .45rem; height: .45rem; border-radius: 50%; background: #FFD166;
}
.cat .sabe b { font-weight: 800; }
/* No celular os três fatos de cada categoria entram num dobrável: sem JavaScript o
   bloco fica aberto (o <details> nasce com open e o resumo escondido), e com JavaScript
   a tela estreita fecha os seis, poupando ~1.200 px de rolagem sem esconder conteúdo. */
.cat .sabe-bloco { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.cat .sabe-bloco > summary { display: none; }
.cat.dobravel .sabe-bloco > summary {
  display: flex; color: #fff; font-weight: 800; font-size: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .3); padding: .5rem 0; margin: 0;
}
.cat .sabe-bloco > summary::after { border-right-color: #fff; border-bottom-color: #fff; }
.cat .sabe-bloco[open] > .sabe { margin-top: .5rem; }
/* Páginas "o que eu sei sobre X": faixa do tema no alto e, embaixo, um assunto por bloco.
   Sem rótulo repetido em cada bloco — o que separa "o que eu sei" de "o que eu faço" é a
   forma, não uma etiqueta escrita 28 vezes, que foi o que deixou o site com cara de máquina. */
/* O card da categoria vira porta: o resumo continua no card e a página tem o assunto inteiro. */
.cat .tudo-daqui {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  color: #fff; font-weight: 700; text-decoration: none; min-height: 44px;
  border-bottom: 2px solid rgba(255,255,255,.5);
}
.cat .tudo-daqui::after { content: '›'; font-size: 1.2em; line-height: 1; }
.cat .tudo-daqui:hover { border-bottom-color: #fff; }

.capa-tema { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; padding: 2.6rem 0 2.2rem; }
/* Estas páginas têm duas colunas de texto: 44rem, a medida das páginas de leitura, esmagava
   as duas em 18rem cada. 62rem é a mesma largura da landing. */
body[class^="tema-"] { --medida-pagina: 62rem; }
.capa-tema .interno { max-width: var(--medida-pagina); }
.capa-tema .migalha, .capa-tema .migalha a { color: rgba(255,255,255,.85); }
.capa-tema h1 { color: #fff; margin: .6rem 0 .5rem; }
.capa-tema .resumo { color: rgba(255,255,255,.92); font-size: 1.15rem; max-width: 38rem; }
.capa-tema .marca-tema {
  width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); margin-bottom: .2rem;
}
.capa-tema .marca-tema svg { width: 1.9rem; height: 1.9rem; stroke: #fff; }

.assunto { padding: 2.2rem 0 .4rem; border-top: 1px solid var(--borda); }
.assunto:first-of-type { border-top: 0; }
.assunto h2 { font-size: 1.75rem; margin: 0 0 .2rem; }
.assunto .parcial {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  background: #FFF1E3; color: #8A4A12; border-radius: 999px; padding: .18rem .6rem; margin-bottom: .8rem;
}
/* o que ele sabe: número na frente, em negrito */
ul.eu-sei { list-style: none; padding: 0; margin: .9rem 0 0; }
ul.eu-sei li { position: relative; padding-left: 1.3rem; margin-bottom: .75rem; font-size: 1.05rem; line-height: 1.55; }
ul.eu-sei li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--c1, var(--coral));
}
/* o que ele faz: régua fina na lateral, sem marcador */
ul.eu-faco { list-style: none; padding: 0 0 0 1rem; margin: .9rem 0 0; border-left: 3px solid var(--c2, var(--ambar)); }
ul.eu-faco li { font-weight: 500; }
ul.eu-faco li { margin-bottom: .7rem; font-size: 1.02rem; line-height: 1.55; color: #3A3A40; }
.assunto .limite {
  margin: 1.1rem 0 0; padding: .8rem 1rem; border-radius: 12px;
  background: var(--papel); border: 1px solid var(--borda); font-size: .96rem; color: var(--cinza);
}
.assunto .limite b { color: var(--tinta); }
@media (min-width: 56rem) {
  .assunto .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}

.tema-carro      { --c1: #0C4353; --c2: #1F6E76; --sombra: rgba(12, 67, 83, .32); }
.tema-documentos { --c1: #182F63; --c2: #315C9E; --sombra: rgba(24, 47, 99, .32); }
.tema-casa       { --c1: #96300B; --c2: #AC4808; --sombra: rgba(150, 48, 11, .32); }
.tema-saude      { --c1: #970F39; --c2: #B23C48; --sombra: rgba(151, 15, 57, .32); }
.tema-dinheiro   { --c1: #135334; --c2: #2F6B35; --sombra: rgba(19, 83, 52, .32); }
.tema-compras    { --c1: #4F1F73; --c2: #77428F; --sombra: rgba(79, 31, 115, .32); }

/* ------------------------------ árvore de pastas: recortes reais, um dentro do outro */
/* Cada nível é uma linha recuada à direita da anterior, com um conector em L saindo da
   linha de cima. O recorte real do Arquivos entra sem editar o PNG: a moldura mostra só
   a faixa útil (uma pasta por --alt de largura) e o anel coral marca a pasta tocada. */
.arvore { --alt: 5.6rem; --recuo: 1rem; margin: 0; padding: 0; list-style: none; }
.arvore .nivel { position: relative; margin: 0 0 .9rem calc(var(--n) * var(--recuo)); display: grid; gap: .45rem; }
.arvore .nivel + .nivel::before {
  content: ''; position: absolute; left: calc(var(--recuo) * -.62); top: -1rem;
  width: calc(var(--recuo) * .62); height: 2rem;
  border-left: 3px solid #F4B6A3; border-bottom: 3px solid #F4B6A3; border-bottom-left-radius: 12px;
}
.arvore .rotulo {
  display: inline-flex; align-items: center; gap: .45rem; justify-self: start;
  font-weight: 800; font-size: 1rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--borda); border-radius: 999px; padding: .3rem .9rem .3rem .65rem;
}
.arvore .rotulo svg { width: 1.2rem; height: 1.2rem; display: block; flex: none; }
.arvore .rotulo .pasta { fill: #48B4EE; }
.arvore .rotulo .aba { fill: #7CCBF5; }
.arvore .rotulo .fone { fill: #1B1B1F; }
.recorte {
  position: relative; display: block; overflow: hidden;
  width: calc(var(--n-pastas) * var(--alt)); max-width: 100%;
  height: calc(var(--alt) * var(--razao, 1));
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(27, 27, 31, .1);
}
.recorte img { display: block; width: calc(3 * var(--alt)); max-width: none; height: auto; }
.recorte .toque {
  position: absolute; top: 3%; height: 92%;
  left: calc((.1 + var(--i) * 1.07) * var(--alt)); width: calc(.665 * var(--alt));
  border: 3px solid var(--coral); border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(255, 107, 74, .18);
}
.recorte .toque::after {
  content: ''; position: absolute; right: -.7rem; top: 42%;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(255, 107, 74, .5);
}
.arvore .dica { font-size: 1rem; color: #55555C; margin: 0; }
.arvore .dica b { color: var(--acento); font-weight: 800; }
.caminho {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; list-style: none; padding: 0; margin: 0 0 1.4rem;
  font-weight: 800; font-size: 1rem; color: var(--tinta);
}
.caminho li { background: var(--papel); border: 1px solid var(--borda); border-radius: 999px; padding: .3rem .85rem; }
.caminho li.seta { background: none; border: 0; padding: 0; color: var(--acento); }

/* --------------------------------------------------------------- passos numerados */
.passos-num { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: .9rem; }
.passos-num li {
  counter-increment: passo; position: relative;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 20px; padding: 1.1rem 1.2rem 1.2rem 3.6rem;
  box-shadow: 0 6px 18px rgba(27, 27, 31, .05);
}
.passos-num li::before {
  content: counter(passo);
  position: absolute; left: 1.1rem; top: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--degrade);
  color: #fff; font-weight: 800; font-size: 1.02rem;
}
.faixa-clara .passos-num li { background: var(--fundo); box-shadow: none; }
.passos-num strong { display: block; font-size: 1.14rem; margin-bottom: .2rem; letter-spacing: -.01em; }
.passos-num p { margin: 0; font-size: 1.02rem; line-height: 1.5; color: #3A3A40; }
@media (min-width: 48rem) { .passos-num.trio { grid-template-columns: repeat(3, 1fr); } }

/* etiqueta de seção (o olho, na versão em pílula) */

/* --------------------------------------------------------------------- preço */
.planos { display: grid; gap: 1rem; margin: 0 0 1.2rem; align-items: start; }
.plano {
  position: relative;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 22px;
  padding: 1.5rem 1.5rem 1.6rem;
}
.plano h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.plano .preco { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: .2rem 0 .3rem; }
.plano .preco span { font-size: 1.05rem; font-weight: 700; }
.plano ul { list-style: none; font-size: 1.04rem; margin: 1rem 0 1.2rem; padding: 0; display: grid; gap: .4rem; }
.plano li { position: relative; padding-left: 1.5rem; }
.plano li::before {
  content: ''; position: absolute; left: .15rem; top: .48em; width: .55rem; height: .3rem;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg); opacity: .85;
}
/* O plano pago era o cartão mais apagado dos dois. Agora leva a cor cheia da marca,
   selo, botão próprio — e o "/mês" na mesma cor do preço. */
.plano.destaque { background: var(--degrade); border-color: transparent; color: #fff; box-shadow: 0 16px 34px rgba(201, 60, 31, .26); }
.plano.destaque h3 { color: #fff; }
.plano.destaque .botao { background: #fff; color: #C93C1F; width: 100%; box-shadow: none; }
.plano.destaque .botao:hover { background: #FFF3EA; color: #C93C1F; }
.plano .selo-plano {
  position: absolute; right: 1.2rem; top: -.8rem;
  font-size: .88rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: #fff; color: #C93C1F; border-radius: 999px; padding: .3rem .8rem;
  box-shadow: 0 6px 14px rgba(27, 27, 31, .14);
}
.plano .apoio { font-size: .96rem; margin: 0 0 .2rem; color: var(--cinza); }
.plano.destaque .apoio { color: #fff; }
@media (min-width: 46rem) { .planos.duplo { grid-template-columns: 1fr 1.08fr; gap: 1.4rem; } }

/* chamada final antes das perguntas */
.chamada-final {
  text-align: center; padding: 2.2rem 1.3rem 2.4rem; border-radius: 28px;
  background: var(--degrade); color: #fff; margin-top: 2rem; position: relative; overflow: hidden;
}
.chamada-final::before { content: ''; position: absolute; width: 22rem; height: 22rem; border-radius: 50%; background: rgba(90, 26, 4, .12); right: -8rem; top: -12rem; }
.chamada-final h3 { margin: 0 0 .5rem; font-size: 1.7rem; color: #fff; position: relative; }
.chamada-final p { position: relative; font-size: 1.1rem; margin: 0 auto 1.2rem; max-width: 32rem; }
.chamada-final .botao { background: #fff; color: #C93C1F; box-shadow: 0 10px 24px rgba(120, 40, 10, .25); }
.chamada-final .botao:hover { background: #FFF3EA; color: #C93C1F; }
.chamada-final .mini { color: #fff; margin: .9rem auto 0; }

/* convite curto no meio do caminho: antes havia um só botão depois do herói, a 38 telas */
.convite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.4rem; margin: 2rem 0 0;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 22px; padding: 1.2rem 1.4rem;
}
.faixa-clara .convite { background: var(--fundo); }
.convite p { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; max-width: 30rem; }
.convite .botao { font-size: 1rem; min-height: 48px; }

.nota-prints { font-size: .98rem; color: var(--cinza); max-width: 62rem; margin: 0 auto; padding: 1.6rem 1.1rem 2rem; }

/* entrada suave; sem JS o conteúdo já está visível */
.js .aparece { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { transition: opacity .6s ease, transform .6s ease; }
  html:has(body.landing) { scroll-behavior: smooth; }
}
.js .aparece.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 40rem) {
  body { font-size: 18px; }
  .faixa { padding: 4rem 1.1rem; }
  .faixa h2 { font-size: 2.3rem; }
  .hero h1 { font-size: 3rem; }
}
/* A árvore só ganha a coluna de rótulo quando cabe: em 544 px ela estourava 130 px
   para fora, sem rolagem. O minmax(0,1fr) impede a imagem de empurrar a coluna. */
@media (min-width: 44rem) {
  .arvore { --alt: 6.6rem; --recuo: 1.6rem; }
  .arvore .nivel { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  .arvore .nivel + .nivel::before { top: -1rem; height: calc(1rem + 50%); }
  .arvore .dica { grid-column: 2; margin-top: -.2rem; }
}
@media (min-width: 60rem) {
  .faixa { padding: 4.6rem 2.5rem; }
  .faixa h2 { font-size: 2.6rem; }
  .chamada { font-size: 1.2rem; }
  .hero { padding: 3.2rem 2.5rem 4.4rem; border-radius: 0 0 48px 48px; }
  .hero .interno { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
  .hero h1 { font-size: 3.4rem; }
  .hero .promessa { font-size: 1.35rem; }
  .hero .visual { max-width: 24rem; }
  .hero .carinha { width: 6.4rem; height: 6.4rem; left: -1.6rem; top: 40%; transform: rotate(-12deg); }
  .dupla { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .dupla.espelhada .visual { order: -1; }
  .iphone { max-width: 320px; }
  .problema-texto { font-size: 1.2rem; }
  .fecho { font-size: 1.7rem; max-width: 36rem; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .cat h3 { font-size: 1.6rem; }
  .pastas-grade { display: grid; grid-template-columns: 1fr 17rem; gap: 3rem; align-items: start; }
}