/* politica.css · Codec Studio · a página "Política de privacidade e uso de imagens" (prévia, 20/10/2026, designer-ui). Só desenho, não é o site.
   Aqui fica só o que é desta página: a coluna de leitura, o índice, as seções numeradas, a ficha de contato e as marcas de rascunho.
   O topo, o rodapé, os botões, as letras, as cores e o foco vêm da home (../home-b-v3.css e ../identidade/), sem mudar nada lá.
   Vem DEPOIS do CSS da home: o que está aqui vale sobre ele. */

.pagina-politica {
  --pol-medida: 38.75rem;                /* a coluna de leitura: ~68 caracteres por linha no texto corrido (medido no navegador, em 1440) */
  --pol-num: 48px;                       /* no computador, a coluna do número fica pendurada à esquerda do texto */
  --pol-num-vao: 28px;
  --pol-entre-secoes: clamp(56px, 5.6vw, 80px);
  /* RASCUNHO: o amarelo-claro marca o que falta resolver antes de publicar (a faixa, os campos e as notas). Não é cor da marca: sai na publicação */
  --pol-amarelo: #FFF3BF;
  --pol-amarelo-traco: #B88A00;
}
html { scroll-padding-top: calc(var(--topo-h) + 24px); }

/* ---------- o topo da home: preto, o logo e a pílula "Monte seu projeto". Aqui ele fica preso no fluxo (sticky) e não fixo, para a faixa de
   rascunho caber em cima dele; sem a faixa, fica igual ao da home. A pílula leva de volta ao Monte seu projeto da home ---------- */
.pagina-politica .topo { position: sticky; }
.pagina-politica .topo__in { gap: 8px; }   /* o logo e a pílula ficam nas pontas; o vão mínimo entre eles é 8 px (a home usa 24 px, mas lá o celular tem o Menu, mais curto) */
.pol-topo__monte { flex: none; }
@media (max-width: 479px) {   /* no celular a pílula perde o ícone para caber ao lado do logo, que nunca encolhe (28 px) */
  .pol-topo__monte .ico { display: none; }
  .pol-topo__monte { padding-inline: 14px; }
}
@media (max-width: 374px) { .pol-topo__monte { padding-inline: 12px; font-size: 14px; } }   /* 360 a 374 px: 14 px (o mínimo de letra do site) e o vão de 12 px até o logo */
@media (max-width: 359px) {   /* em 320 a 359 px o logo e o texto inteiro não cabem lado a lado: a pílula vira só o ícone (44 px), com o nome para o leitor de tela */
  .pol-topo__monte { width: var(--cx-alvo-min); padding: 0; }
  .pol-topo__monte .ico { display: block; }
  .pol-topo__monte span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- RASCUNHO: a faixa no alto da página, os campos [entre colchetes] e as notas. Tudo em amarelo-claro com traço, para ver o que falta
   preencher. A faixa, as notas e o noindex saem na publicação; os campos viram o texto definitivo ---------- */
.pol-rascunho { padding: 10px var(--margem); background: var(--pol-amarelo); border-bottom: 1.5px dashed var(--pol-amarelo-traco); color: var(--cx-grafite); text-align: center; }
.pol-rascunho p { font: 700 14px / 1.35 var(--cx-fonte-titulo); letter-spacing: 0.02em; text-wrap: balance; }
.pol-rascunho strong { font-weight: 700; }
mark.pol-campo { padding: 0 0.22em; border-radius: 0.2em 0.2em 0 0; background: var(--pol-amarelo); color: inherit; border-bottom: 1.5px dashed var(--pol-amarelo-traco); white-space: nowrap; }   /* o campo curto não se parte em 2 linhas */
.pol-nota { padding: 14px 18px; border: 1.5px dashed var(--pol-amarelo-traco); border-radius: 12px; background: var(--pol-amarelo); color: var(--cx-grafite); }
.pol-secao .pol-nota { font-size: 16px; line-height: 1.55; }
.pol-nota mark.pol-campo { padding: 0; border: 0; background: none; white-space: normal; }   /* dentro da nota, o colchete já está no amarelo: sem marca dupla */
.pol-fim { margin-top: var(--pol-entre-secoes); font: 300 16px / 1.55 var(--fonte-texto); }
.pol-fim strong { font-weight: 700; }

/* ---------- a coluna de leitura (corpo branco). Embaixo, o respiro padrão da home mais meia curva: a curva do rodapé fica no meio do vão ---------- */
.pol { width: min(100% - 2 * var(--margem), var(--pol-medida)); margin-inline: auto; padding: var(--pad-y) 0 calc(var(--pad-y) + var(--curva-h-meio) / 2); }

/* a cabeça: o rótulo da home, o título com 1 palavra em Fraunces e a data */
.pol-cabeca { display: grid; gap: 16px; justify-items: start; }
.pol-titulo { font: var(--cx-peso-titulo) var(--cx-tam-h2) / 1.12 var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-h2); color: var(--cx-titulo); text-wrap: balance; }
.pol-titulo .destaque { padding-right: 0.06em; }
.pol-data { margin-top: 4px; font: 300 16px / 1.5 var(--fonte-texto); color: var(--cx-texto-2); }
.pol-data strong { font-weight: 500; color: var(--cx-grafite); }

/* ---------- o índice: uma lista numerada com hover, sem sublinhado. A partir de 640 px, 2 colunas que descem (01 a 06 | 07 a 11), cada
   item na sua altura (colunas de texto, e não grade: um título de 2 linhas não abre buraco ao lado) ---------- */
.pol-indice { margin-top: clamp(32px, 3.4vw, 48px); padding: 8px; border-radius: var(--r2); background: var(--cx-cinza-50); }
.pol-indice ol { display: grid; gap: 2px; }
@media (min-width: 640px) { .pol-indice ol { display: block; columns: 2; column-gap: 8px; } .pol-indice li { break-inside: avoid; padding-bottom: 2px; } }
.pol-indice a { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; column-gap: 8px; min-height: 48px; padding: 13px 32px 13px 14px; border-radius: 16px;
  font: var(--cx-peso-menu) 16px / 1.3 var(--cx-fonte-titulo); color: var(--cx-grafite); transition: background-color var(--cx-dur-1), color var(--cx-dur-1); }
@media (max-width: 639px) { .pol-indice a { min-height: var(--cx-alvo-min); padding-block: 11px; } }
@media (hover: none) { .pol-indice a { padding-right: 14px; } .pol-indice .ico { display: none; } }   /* no toque não há hover: a seta não ocupa lugar */
.pol-indice a > span:not(.pol-num) { text-wrap: balance; }
.pol-indice a:hover { background: var(--cx-branco); }
.pol-indice a:focus-visible { outline-offset: 0; }
.pol-indice .ico { position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--cx-vermelho); opacity: 0;
  transform: rotate(90deg) translateX(-4px); transition: opacity var(--cx-dur-1), transform var(--cx-dur-2) var(--cx-curva-saida); }   /* a seta desce: leva à seção */
.pol-indice a:hover .ico, .pol-indice a:focus-visible .ico { opacity: 1; transform: rotate(90deg) translateX(0); }
.pol-num { font: var(--cx-peso-rotulo) 14px / 1 var(--cx-fonte-titulo); letter-spacing: 0.06em; color: var(--cx-vermelho); font-variant-numeric: tabular-nums; }

/* ---------- as 11 seções: o número, o título (Nunito Sans) e o texto (Museo Sans). No computador o número fica pendurado à esquerda, na linha do título ---------- */
.pol-secao { margin-top: var(--pol-entre-secoes); }
.pol-indice + .pol-secao { margin-top: calc(var(--pol-entre-secoes) + 8px); }
.pol-secao__num { display: block; margin-bottom: 10px; }
.pol-secao__titulo { margin-bottom: 16px; font: var(--cx-peso-titulo) var(--cx-tam-h3) / var(--cx-entrelinha-h3) var(--cx-fonte-titulo); letter-spacing: var(--cx-espaco-h3); color: var(--cx-titulo); }
@media (min-width: 1024px) {
  .pol-secao { display: grid; grid-template-columns: var(--pol-num) minmax(0, 1fr); column-gap: var(--pol-num-vao); align-items: baseline; margin-left: calc(-1 * (var(--pol-num) + var(--pol-num-vao))); }
  .pol-secao > * { grid-column: 2; }
  .pol-secao > .pol-secao__num { grid-column: 1; grid-row: 1; margin: 0; text-align: right; }
  .pol-secao > .pol-secao__titulo { grid-row: 1; }
}
.pol-secao p, .pol-secao li { font: 300 var(--cx-tam-texto) / 1.65 var(--fonte-texto); color: var(--cx-texto); }
.pol-secao strong { font-weight: 700; }
.pol-secao > * + *:not(.pol-secao__titulo) { margin-top: 1em; }
.pol-secao > .pol-secao__titulo + * { margin-top: 0; }
.pol-secao > p:has(+ .pol-lista) + .pol-lista { margin-top: 12px; }

/* as listas: o anel da marca, em traço, no lugar da bolinha */
.pol-lista { display: grid; gap: 8px; }
.pol-lista li { position: relative; padding-left: 28px; }
.pol-lista li::before { content: ""; position: absolute; left: 4px; top: calc(0.825em - 5px); width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--cx-grafite); box-sizing: border-box; }

/* a ficha de contato (Contato): a mesma superfície cinza do índice, linha por linha */
.pol-ficha { display: grid; gap: 2px; padding: 24px 28px; border-radius: var(--r); background: var(--cx-cinza-50); font-style: normal; }
.pol-ficha > span { display: block; font: 300 var(--cx-tam-texto) / 1.55 var(--fonte-texto); color: var(--cx-texto); }
.pol-ficha > span:first-child { margin-bottom: 6px; font: var(--cx-peso-titulo) var(--cx-tam-h4) / var(--cx-entrelinha-h4) var(--cx-fonte-titulo); color: var(--cx-titulo); }
.pol-ficha > span:first-child strong { font-weight: inherit; }
@media (max-width: 479px) { .pol-ficha { padding: 20px; } }

/* ---------- o e-mail: link mailto sem sublinhado (vermelho e mais pesado que o texto); no hover, escurece e ganha um fundo cinza ---------- */
.pol-email { white-space: nowrap; color: var(--cx-vermelho); font-weight: 500; border-radius: 6px; transition: color var(--cx-dur-1), background-color var(--cx-dur-1), box-shadow var(--cx-dur-1); }
.pol-email:hover { color: var(--cx-vermelho-700); background: var(--cx-cinza-50); box-shadow: 0 0 0 4px var(--cx-cinza-50); }
.pol-ficha .pol-email:hover { background: var(--cx-branco); box-shadow: 0 0 0 4px var(--cx-branco); }
strong .pol-email { font-weight: 700; }

/* ---------- o rodapé da home, sem a faixa de fotos do Instagram (esta página não tem imagem): a grade começa logo depois da curva,
   no mesmo vão padrão das seções da home (176 px em 1440, 112 px no celular, com a curva no meio) ---------- */
.pagina-politica .rodape__grade { padding-top: 0; }
.pagina-politica .rodape { display: flow-root; }   /* a margem de baixo do "voltar ao topo" (celular) fica dentro do rodapé: sem ela, sobrava uma faixa branca de 20 px embaixo da página */