/* Estudo de discovery: landing e ferramenta. Tokens do brand book da Graspem (brand/design.md). */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-pt.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --obsidian: #0C0E12;
  --grafite: #181A1E;
  --fumaca: #F5F5F5;
  --ambar: #C06F2F;
  --ambar-claro: #D08447;
  --ambar-escuro: #8C4F21;
  --teal: #2DD4BF;
  --neutro: #C2C0BD;
  --texto: var(--fumaca);
  --texto-2: rgba(245, 245, 245, 0.7);
  --texto-3: rgba(245, 245, 245, 0.52);
  --borda: rgba(132, 128, 125, 0.32);
  --borda-forte: rgba(132, 128, 125, 0.62);
  --raio: 2px;
  --gutter: 16px;
  --coluna: 40rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--texto);
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 450;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
a { color: var(--texto); text-decoration-color: var(--ambar); text-underline-offset: 3px; }
a:hover { color: var(--ambar-claro); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
::selection { background: var(--ambar); color: var(--obsidian); }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: var(--gutter); top: -60px; background: var(--ambar); color: var(--obsidian); padding: 8px 12px; border-radius: var(--raio); z-index: 10; }
.pular:focus { top: 8px; }

.pagina { width: 100%; max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Topo ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.marca { display: inline-block; padding: 4px 0; }
.marca img { width: 104px; height: auto; }
.progresso { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 0.875rem; font-weight: 500; }
/* Na leitura e na tela final a ferramenta marca hidden; sem esta linha, o display:flex de cima venceria. */
.progresso[hidden] { display: none; }
.progresso-segmentos { display: flex; gap: 4px; }
.progresso-segmentos span { width: 10px; height: 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio); }
.progresso-segmentos span.feito { background: var(--ambar); border-color: var(--ambar); }
.progresso-segmentos span.atual { border-color: var(--ambar); }

/* ---------- Passos da ferramenta ---------- */
.passo { padding-bottom: 8px; animation: entra 0.18s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.passo > h1 { margin-top: 8px; }
.lead { margin-top: 12px; font-size: 1.125rem; color: var(--texto); }
.secao { margin-top: 28px; }
.secao h2 { font-size: 1.0625rem; font-weight: 700; }
.secao p { margin-top: 6px; color: var(--texto-2); }
.secao ul { margin: 8px 0 0; padding-left: 20px; color: var(--texto-2); }
.secao li + li { margin-top: 4px; }
.nota { margin-top: 16px; color: var(--texto-2); font-size: 0.9375rem; }
.intro-bloco { margin-top: 12px; color: var(--texto-2); }

.carregando, .falha { padding: 48px 0; color: var(--texto-2); }

.aceites { margin-top: 32px; display: grid; gap: 10px; }
.autor { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.autor img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--raio); background: var(--grafite); }
.autor p { display: grid; max-width: none; line-height: 1.35; }
.autor-nome { font-weight: 650; }
.autor-linha { color: var(--texto-3); font-size: 0.9375rem; }
.autor-link { flex: none; margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 0.9375rem; }
.dados-respostas { margin-top: 20px; padding-bottom: 8px; color: var(--texto-3); font-size: 0.875rem; }
.dados-respostas h2 { font-size: 0.875rem; font-weight: 650; color: var(--texto-2); }
.dados-respostas p { margin-top: 4px; }
.dados-respostas a { color: var(--texto-2); }

/* Perguntas: fieldset com legenda, opções em linhas com marcador quadrado (o módulo do symbol). */
.pergunta { margin: 32px 0 0; padding: 0; border: 0; min-width: 0; }
.pergunta[hidden] { display: none; }
.pergunta legend, .rotulo { padding: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
/* Palavra que muda o sentido da pergunta (preparar x analisar): mais forte e em âmbar. */
.realce { color: var(--ambar-claro); font-weight: 750; }
.ajuda { margin-top: 4px; color: var(--texto-3); font-size: 0.9375rem; }
.opcoes { display: grid; gap: 8px; margin-top: 12px; }
.opcoes.curtas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcao {
  position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px;
  background: var(--grafite); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer;
  transition: border-color 0.12s ease;
}
.opcao:hover { border-color: var(--borda-forte); }
.opcao.marcada { border-color: var(--ambar); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao:focus-within { outline: 2px solid var(--ambar); outline-offset: 2px; }
.marcador { position: relative; flex: none; width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--borda-forte); border-radius: var(--raio); }
.opcao.marcada .marcador { border-color: var(--ambar); }
.opcao input[type="radio"]:checked + .marcador::after { content: ""; position: absolute; inset: 3px; background: var(--ambar); }
/* No cartão de tema, a prévia fica entre a caixa e o marcador: por isso o "~ .tema-linha". */
.opcao input[type="checkbox"]:checked + .marcador,
.opcao input[type="checkbox"]:checked ~ .tema-linha .marcador { background: var(--ambar); border-color: var(--ambar); }
.opcao input[type="checkbox"]:checked + .marcador::after,
.opcao input[type="checkbox"]:checked ~ .tema-linha .marcador::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--obsidian); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.opcao-texto { line-height: 1.4; }

.erro { margin-top: 8px; color: var(--ambar-claro); font-weight: 600; font-size: 0.9375rem; }
.erro[hidden] { display: none; }
.pergunta.invalida .opcao, .campo.invalido input, .campo.invalido select { border-color: var(--ambar); }
.resumo-erros { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--ambar); border-radius: var(--raio); }
.resumo-erros p { font-weight: 600; }
.resumo-erros ul { margin: 8px 0 0; padding-left: 18px; }

/* Campos de texto e listas */
.campo { margin-top: 24px; }
.campo label { display: block; font-weight: 600; }
.campo input, .campo select {
  display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px 14px;
  background: var(--obsidian); color: var(--texto); font: inherit; font-weight: 450;
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F5F5F5' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.campo input::placeholder { color: var(--texto-3); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Confirmações da pesquisa prévia */
.confirmacao { margin-top: 20px; padding: 16px; background: var(--grafite); border: 1px solid var(--borda); border-radius: var(--raio); }
.confirmacao.invalida { border-color: var(--ambar); }
.frase { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.segmentado { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.segmentado .opcao { flex: 1 1 auto; min-height: 44px; padding: 10px 12px; background: var(--obsidian); }
.correcao { margin-top: 4px; padding-top: 4px; }
.correcao[hidden] { display: none; }
.correcao .pergunta:first-child, .correcao .campo:first-child { margin-top: 16px; }

/* Ações */
.acoes {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 40px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--obsidian); border-top: 1px solid var(--borda);
}
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--ambar); color: var(--obsidian); font: inherit; font-weight: 650; font-size: 1rem;
  border: 0; border-radius: var(--raio); cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--ambar-claro); color: var(--obsidian); }
.botao.largo { width: 100%; }
.botao-sec {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; background: none; color: var(--texto-2);
  font: inherit; font-weight: 600; font-size: 1rem; border: 0; cursor: pointer;
}
.botao-sec:hover { color: var(--texto); }
.botao-contorno {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  background: none; color: var(--texto); font: inherit; font-weight: 600; font-size: 1rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio); cursor: pointer; text-decoration: none;
}
.botao-contorno:hover { border-color: var(--texto-2); }
/* Enquanto o envio é confirmado: o botão fica apertado (âmbar escuro), com o círculo girando e o texto trocado. */
.botao[aria-busy="true"], .botao[aria-busy="true"]:hover { gap: 10px; background: var(--ambar-escuro); color: var(--fumaca); cursor: progress; }
.botao:disabled:not([aria-busy="true"]), .botao-sec:disabled { opacity: 0.45; cursor: not-allowed; }
.gira { flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Leitura ---------- */
.leitura-cabeca { padding-bottom: 8px; }
.leitura-cabeca .quem { margin-top: 8px; color: var(--texto-3); font-size: 0.9375rem; }
.leitura-cabeca .explicacao-geral { margin-top: 20px; }
.leitura-cabeca .explicacao-geral + .explicacao-geral { margin-top: 12px; }
.leitura-cabeca .linha-fontes { margin-top: 12px; color: var(--texto-2); font-size: 0.9375rem; }
.bloco { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--borda); }
.bloco > .aviso { margin-top: 10px; color: var(--texto-2); }
.grupo { margin-top: 24px; }
.grupo .sub { margin-top: 4px; color: var(--texto-3); font-size: 0.9375rem; }
.status { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--borda); }
.status li { display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.status .criterio { font-weight: 500; line-height: 1.4; }
.status .resultado { grid-column: 2; margin-top: 4px; font-size: 0.9375rem; color: var(--texto-2); }
.status .resultado strong { color: var(--texto); font-weight: 650; }
.glifo { position: relative; width: 14px; height: 14px; margin-top: 4px; border: 1.5px solid var(--borda-forte); border-radius: var(--raio); }
.glifo.tem, .glifo.acompanha, .glifo.sinais { background: var(--teal); border-color: var(--teal); }
.glifo.em_parte { border-color: var(--teal); }
.glifo.em_parte::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--teal); }
.glifo.nao_informado, .glifo.a_confirmar { border-style: dashed; }
.glifo.conversar { border-color: var(--ambar); }
.explicacao { margin-top: 16px; color: var(--texto-2); font-size: 0.9375rem; }
.numeros { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.nota-fonte { margin-left: 2px; font-size: 0.7em; font-weight: 650; line-height: 0; }
.nota-fonte a { color: var(--texto-3); text-decoration: none; padding: 0 1px; }
.nota-fonte a:hover, .nota-fonte a:focus-visible { color: var(--ambar-claro); }

/* Gráficos: barras em HTML; a largura vem do JS (CSP sem estilo inline) e cresce uma vez, quando a leitura abre. */
.grafico { margin: 24px 0 0; }
.grafico figcaption { font-weight: 650; font-size: 1rem; line-height: 1.35; }
.barras { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.barras li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 2.75rem; align-items: center; column-gap: 10px; font-size: 0.875rem; color: var(--texto-2); line-height: 1.25; }
.barras .trilho { display: block; height: 10px; }
.barras .barra { display: block; width: var(--v, 0); height: 100%; background: var(--borda-forte); border-radius: var(--raio); transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.barras .val { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.barras li.destaque { color: var(--texto); font-weight: 700; }
.barras li.destaque .barra { background: var(--ambar); }
.grafico.colunas .barras { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 8px; }
.grafico.colunas .barras li { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }
.grafico.colunas .val { order: 1; text-align: center; }
.grafico.colunas .trilho { order: 2; display: flex; align-items: flex-end; height: 88px; }
.grafico.colunas .barra { width: 100%; height: var(--v, 0); transition: height 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.grafico.colunas .rot { order: 3; }
.legenda { margin-top: 10px; color: var(--texto-2); font-size: 0.9375rem; }
.legenda.destaque { color: var(--texto); font-size: 1rem; }
.graficos-par { display: grid; gap: 0 28px; }
.numeros .mercado { font-size: 0.75rem; color: var(--ambar-claro); font-weight: 600; margin-left: 6px; white-space: nowrap; }
.preparar { margin: 12px 0 0; padding-left: 20px; }
.preparar li { margin-top: 6px; }
.bloco p + p { margin-top: 10px; }
.lista-fontes { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--borda); }
.lista-fontes h2 { font-size: 0.9375rem; font-weight: 650; color: var(--texto-2); }
.lista-fontes ol { margin: 10px 0 0; padding-left: 22px; color: var(--texto-3); font-size: 0.8125rem; line-height: 1.5; }
.lista-fontes li + li { margin-top: 4px; }
.lista-fontes li:target { color: var(--texto); }
.pdf { margin-top: 24px; color: var(--texto-2); }
.aviso-envio { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ambar); border-radius: var(--raio); font-size: 0.9375rem; }

/* Tela 8 */
.alem { margin-top: 48px; padding: 24px 16px; background: var(--grafite); border: 1px solid var(--borda); border-radius: var(--raio); }
.alem p { margin-top: 8px; color: var(--texto-2); }
.alem .opcao { background: var(--obsidian); }
.alem-cabeca { display: flex; align-items: center; gap: 12px; }
.alem-cabeca img { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: var(--raio); }
.temas { display: grid; gap: 10px; margin-top: 14px; }
.opcao.tema { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 0 14px; overflow: hidden; }
.tema-previa { position: relative; display: block; height: 156px; overflow: hidden; background: var(--grafite); border-bottom: 1px solid var(--borda); }
.tema-linha { display: flex; align-items: flex-start; gap: 12px; padding: 0 14px; }
.cadeado { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--obsidian); border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto-2); font-size: 0.75rem; font-weight: 650; }
.cadeado svg { display: inline-block; }
/*
 * Prévias: um pedaço do relatório que abre na conversa, com as cores da leitura (âmbar para você e para a série
 * principal, cinza para o mercado). Os dados são fictícios; o texto vai desfocado e as formas ficam nítidas.
 */
.pv { position: absolute; inset: 12px 14px 10px; display: grid; align-content: start; gap: 6px; color: var(--texto-2); font-size: 0.8125rem; line-height: 1.3; }
.pv-t { display: block; min-width: 0; overflow: hidden; white-space: nowrap; filter: blur(2.5px); }
.pv-rot { color: var(--texto-3); font-size: 0.75rem; }
.pv-valor { flex: none; color: var(--texto); font-size: 1.5rem; font-weight: 700; line-height: 1.1; filter: blur(4px); }
.pv-chip { display: block; padding: 1px 6px; border: 1px solid var(--borda-forte); border-radius: var(--raio); font-size: 0.6875rem; }
.pv-cabeca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv-num { color: var(--texto); text-align: right; font-variant-numeric: lining-nums tabular-nums; }

/* Gráficos: SVG esticado até o cartão; linha e ponto mantêm a espessura em qualquer tamanho. */
.pv-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pv-svg line, .pv-svg path, .pv-svg polyline { fill: none; vector-effect: non-scaling-stroke; }
.pv-grade { stroke: var(--borda); stroke-width: 1px; }
.pv-grade.pv-base { stroke: var(--borda-forte); }
.pv-area { fill: rgba(192, 111, 47, 0.22); }
.pv-serie { stroke: var(--ambar); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.pv-anel, .pv-ponto { stroke-linecap: round; }
.pv-anel { stroke: var(--grafite); stroke-width: 12px; }
.pv-ponto { stroke: var(--ambar); stroke-width: 8px; }
.antecipa-item .pv-anel { stroke: var(--obsidian); }

/* Plano com eixos: valores à esquerda, anos embaixo. */
.pv-plano { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-rows: 60px auto; column-gap: 6px; row-gap: 5px; }
.pv-eixo-y { display: flex; flex-direction: column; justify-content: space-between; color: var(--texto-3); font-size: 0.625rem; line-height: 1; text-align: right; }
.pv-eixo-x { grid-column: 2; display: flex; justify-content: space-between; color: var(--texto-3); font-size: 0.625rem; line-height: 1; }

/* Legenda: a marca fica ao lado do texto; o texto nunca leva a cor da série. */
.pv-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--texto-3); font-size: 0.6875rem; }
.pv-leg { display: flex; align-items: center; gap: 6px; }
.pv-leg::before { content: ""; flex: none; width: 12px; height: 6px; background: var(--borda-forte); border-radius: 1px; }
.pv-leg-ponto::before { width: 8px; height: 8px; border-radius: 50%; }
.pv-leg-voce::before { background: var(--ambar); }
.pv-leg-tique::before { width: 2px; height: 10px; background: var(--neutro); }

/* Tabela de rodadas: a última linha fica cortada pela borda, como tabela que continua. */
.pv-tabela { gap: 0; }
.pv-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.75rem 3.75rem; align-items: center; column-gap: 8px; padding: 3px 0 3px 8px; border-bottom: 1px solid var(--borda); font-size: 0.75rem; }
.pv-linha .pv-chip { padding: 0 5px; font-size: 0.625rem; line-height: 1.25; }
.pv-cab { padding-top: 0; color: var(--texto-3); font-size: 0.6875rem; }
.pv-destaque { padding-left: 6px; border-left: 2px solid var(--ambar); color: var(--texto); }

/* Comparação com o mercado: trilho, faixa do meio, mediana e você. */
.pv-comparacao { gap: 4px; }
.pv-comparacao .pv-legenda { margin-bottom: 4px; }
.pv-bala { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); column-gap: 10px; align-items: center; height: 17px; }
.pv-bala .pv-svg { height: 14px; }
.pv-trilho { stroke: var(--borda); stroke-width: 4px; }
.pv-banda-q { stroke: var(--borda-forte); stroke-width: 8px; }
.pv-tique { stroke: var(--neutro); stroke-width: 2px; }

/* O que a rodada pede: a barra em partes usa as cores dos glifos da leitura. */
.pv-lista { gap: 4px; }
.pv-resumo { flex: none; margin-left: auto; }
.pv-barra { height: 6px; margin: 2px 0 4px; }
.pv-seg { stroke: var(--borda-forte); stroke-width: 6px; }
.pv-seg.acompanha { stroke: var(--teal); }
.pv-seg.em_parte { stroke: rgba(45, 212, 191, 0.45); }
.pv-seg.conversar { stroke: var(--ambar); }
.pv-item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; height: 16px; }
.pv-item .glifo { margin-top: 0; }
.pv-tag { color: var(--texto-3); font-size: 0.6875rem; }

/* Venda: o múltiplo mediano em destaque e uma linha por tipo de comprador (barra do múltiplo, valor e fatia das vendas). */
.pv-faixa { gap: 5px; }
.pv-compra { display: grid; grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr) 2.25rem 2.25rem; column-gap: 8px; align-items: center; height: 17px; font-size: 0.75rem; }
.pv-compra.pv-cab { height: auto; margin-top: 3px; }
.pv-compra .pv-svg { height: 14px; }
.pv-barra-h { stroke: var(--borda-forte); stroke-width: 8px; }
.pv-barra-h.pv-barra-principal { stroke: var(--ambar); }
.agenda { margin-top: 20px; }
.agenda[hidden] { display: none; }
.agenda iframe { display: block; width: 100%; height: 1100px; margin-top: 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fumaca); }
.alem-botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.alem .nota-agenda { margin-top: 10px; font-size: 0.875rem; color: var(--texto-3); }
.alem .feito { margin-top: 16px; color: var(--texto); }
.marcou { margin-top: 20px; }
.marcou[hidden] { display: none; }
.marcou .botao { margin-top: 10px; }
.linha-final { margin-top: 28px; color: var(--texto-2); }

/* Tela final: a conversa marcada. O selo é o marcador da caixa de seleção, em tamanho grande. */
.conversa .selo { position: relative; display: block; width: 44px; height: 44px; margin-top: 8px; background: var(--ambar); border-radius: var(--raio); }
.conversa .selo::after { content: ""; position: absolute; left: 15px; top: 7px; width: 11px; height: 21px; border: solid var(--obsidian); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.conversa > h1 { margin-top: 20px; }
.antecipa { display: grid; gap: 14px; margin-top: 28px; }
.antecipa-item { overflow: hidden; background: var(--grafite); border: 1px solid var(--borda); border-radius: var(--raio); }
.antecipa-item .tema-previa { background: var(--obsidian); }
.antecipa-item h2 { padding: 16px 16px 0; font-size: 1.0625rem; }
.antecipa-item p { padding: 6px 16px 16px; color: var(--texto-2); }
.antecipa-item .antecipa-tema { padding-top: 14px; color: var(--texto); }
.conversa .autor { margin-top: 32px; }
.conversa .nota { margin-top: 20px; }
.conversa-saidas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---------- Página inicial do estudo: a lista de ferramentas ---------- */
.inicio h1 { max-width: 20ch; }
.ferramentas { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.ferramenta-cartao {
  display: grid; gap: 8px; padding: 20px 18px; background: var(--grafite); border: 1px solid var(--borda);
  border-radius: var(--raio); color: var(--texto); text-decoration: none; transition: border-color 0.12s ease;
}
.ferramenta-cartao:hover, .ferramenta-cartao:focus-visible { border-color: var(--ambar); }
.ferramenta-nome { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.ferramenta-texto { color: var(--texto-2); }
.ferramenta-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--texto-3); font-size: 0.875rem; }
.ferramenta-acao { color: var(--ambar-claro); font-weight: 650; font-size: 1rem; }

/* ---------- Rodapé ---------- */
.rodape { margin-top: 56px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: 0.875rem; }
.rodape p { max-width: none; }
.rodape p + p { margin-top: 6px; }
.rodape a { color: var(--texto-2); }
/* Aviso dos termos: pequeno para quem lê, claro para assistente de IA que receba o link. */
.rodape .aviso-ia { margin-top: 14px; font-size: 0.8125rem; }

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  h1 { font-size: 2.25rem; }
  .acoes { position: static; margin: 48px 0 0; padding: 0; border-top: 0; flex-direction: row-reverse; justify-content: flex-end; }
  .alem { padding: 32px; }
  .marca img { width: 120px; }
  .graficos-par { grid-template-columns: 1fr 1fr; }
  .temas { grid-template-columns: 1fr 1fr; }
  .temas .tema:first-child { grid-column: 1 / -1; }
  .antecipa { grid-template-columns: 1fr 1fr; }
  .antecipa-item:only-child { grid-column: 1 / -1; }
  .barras li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.aviso-demo { margin: 0 0 16px; padding: 10px 12px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); color: var(--texto-2); font-size: 0.875rem; }
.bloco > h2 { margin-bottom: 12px; }
.alem .pergunta { margin-top: 20px; }