:root {
  --papel: #FFFBF5;
  --cartao: #FFFDF9;
  --carta: #ECE8D8;
  --veludo: #0B2216;
  --verde: #1F3A2C;
  --verde2: #2E4A3A;
  --verde-claro: #DDE5DA;
  --rosa: #B6737C;
  --rosa2: #C37378;
  --rosa-claro: #EBD3D0;
  --rosa-bg: #F6E9E6;
  --vinho: #5A2025;
  --caramelo: #9A6B4F;
  --ink: #1F3A2C;
  --ink-soft: #6B6F64;
  --linha: #E6E0D2;
  --f-titulo: 'Bodoni Moda', Georgia, serif;
  --f-texto: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --raio: 18px;
  --sombra: 0 1px 0 rgba(31, 58, 44, .04), 0 10px 30px rgba(31, 58, 44, .06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--ink);
  font: 400 15px/1.55 var(--f-texto);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; overflow-wrap: anywhere; }
h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; margin-bottom: 10px; }
h3 { font-size: 19px; margin-bottom: 14px; }
h1 em, h2 em { font-style: italic; color: var(--rosa); }
.sobre { font: 600 11px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--caramelo); margin: 0 0 10px; }
.lead { color: var(--ink-soft); font-size: 16px; margin: 10px 0 0; max-width: 60ch; }
.nota { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }
.frase { font-size: 16.5px; margin: 0 0 18px; max-width: 70ch; }
.frase.sem-margem { margin: 0; }

/* ---------- lateral ---------- */
.lateral {
  position: sticky; top: 0; height: 100vh;
  background: radial-gradient(120% 70% at 20% 0%, rgba(70, 110, 85, .35), transparent 60%), linear-gradient(170deg, #173828, var(--veludo) 60%, #04140B);
  color: #EDE9DD; padding: 26px 18px; display: flex; flex-direction: column; gap: 26px;
}
.marca { display: flex; gap: 12px; align-items: center; }
.marca b { font-family: var(--f-titulo); font-weight: 500; font-size: 20px; display: block; color: #FFFBF5; }
.marca b em { color: var(--rosa-claro); }
.marca small { color: #B9C3B4; font-size: 12px; }
.selo {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #D5959B, var(--rosa) 55%, #8E4F57);
  color: #FFF6F2; font: italic 500 22px var(--f-titulo); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .3);
}
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { color: #D9DED3; text-decoration: none; padding: 9px 12px; border-radius: 10px; font-size: 14px; display: flex; gap: 10px; align-items: center; transition: background .2s; }
.menu a i { font-style: normal; font-size: 11px; color: #8FA08D; width: 18px; }
.menu a:hover, .menu a.on { background: rgba(255, 251, 245, .09); color: #FFFBF5; }
.menu a.on i { color: var(--rosa-claro); }
.menu a.sub { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; padding-top: 16px; }
.privado { margin-top: auto; font-size: 12px; color: #9EAD9B; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; }

/* ---------- principal ---------- */
main { padding: 34px clamp(16px, 4vw, 54px) 60px; min-width: 0; }
.bloco { padding: 34px 0; border-top: 1px solid var(--linha); scroll-margin-top: 10px; }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; }
.topo-controles { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.campo.inline { flex-direction: row; align-items: center; gap: 10px; }
select {
  font: 500 14px var(--f-texto); color: var(--ink); background: var(--cartao); border: 1.5px solid var(--linha);
  border-radius: 12px; padding: 9px 34px 9px 12px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--verde) 50%), linear-gradient(135deg, var(--verde) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  text-transform: none; letter-spacing: 0;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px var(--f-texto); color: #FFFBF5; text-decoration: none; cursor: pointer;
  background: linear-gradient(120deg, var(--verde2), var(--verde)); border: 0; border-radius: 999px; padding: 11px 20px;
  box-shadow: 0 10px 24px rgba(31, 58, 44, .22); transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--verde); box-shadow: none; border: 1.5px solid var(--verde2); }
.btn.arquivo input { display: none; }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.faixa-exemplo { background: var(--rosa-bg); color: var(--vinho); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.faixa-exemplo button { font: 600 13px var(--f-texto); color: var(--vinho); background: none; border: 1px solid var(--rosa); border-radius: 999px; padding: 6px 12px; cursor: pointer; }

.avisos:empty { display: none; }
.avisos { background: #FBF3E6; border: 1px solid #EAD7B5; color: #6A4A2E; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 8px; }
.avisos p { margin: 2px 0; }

.vazio { padding: 10vh 0; max-width: 640px; }
.vazio-botoes { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ---------- cartões ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.cartao {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 18px 14px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.cartao.principal { background: linear-gradient(160deg, #173828, var(--veludo)); color: #F3F0E6; border: 0; }
.cartao .rotulo { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.cartao.principal .rotulo { color: #B9C3B4; }
.cartao .valor { font: 500 32px/1.1 var(--f-titulo); letter-spacing: -.01em; }
.cartao .var { font-size: 12.5px; font-weight: 600; }
.var.sobe { color: #3E7350; }
.var.desce { color: var(--vinho); }
.var.igual { color: var(--ink-soft); }
.cartao.principal .var.sobe { color: #A9D3A6; }
.cartao .simples { font-size: 13px; color: var(--ink-soft); margin: 0; }
.cartao.principal .simples { color: #C9D1C5; }
details.detalhe { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
details.detalhe summary { cursor: pointer; color: var(--rosa); font-weight: 600; list-style: none; }
details.detalhe summary::-webkit-details-marker { display: none; }
details.detalhe summary::after { content: ' +'; }
details.detalhe[open] summary::after { content: ' −'; }
details.detalhe p { margin: 6px 0 0; }
.cartao.principal details.detalhe { color: #C9D1C5; }
.cartao.principal details.detalhe summary { color: var(--rosa-claro); }

.painel-card { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); margin-bottom: 14px; min-width: 0; }
.painel-card.destaque { background: var(--rosa-bg); border-color: var(--rosa-claro); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duas > .painel-card { margin-bottom: 0; }
.duas + .duas, .painel-card + .duas, .duas + .painel-card { margin-top: 14px; }
.linha-controle { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.linha-controle h3 { margin: 0; }

/* ---------- constância ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario .dsem { font-size: 11px; text-align: center; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.calendario .dia { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 13px; background: #F4F1E8; color: var(--ink-soft); }
.calendario .dia.on { background: linear-gradient(135deg, var(--verde2), var(--verde)); color: #FFFBF5; font-weight: 600; }
.calendario .dia.vazio-dia { background: none; }
.legenda-cal { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; display: flex; align-items: center; gap: 8px; }
.ponto { width: 12px; height: 12px; border-radius: 4px; display: inline-block; background: #F4F1E8; }
.ponto.on { background: var(--verde); }
.mini-numeros { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.mini-numeros div b { display: block; font: 500 26px var(--f-titulo); }
.mini-numeros div span { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- barras ---------- */
.barras { display: flex; flex-direction: column; gap: 12px; }
.barra { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.barra .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .nome small { color: var(--ink-soft); }
.barra .trilho, .barra .enche { display: block; }
.barra .trilho { height: 14px; background: #F1EDE2; border-radius: 99px; overflow: hidden; }
.barra .enche { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--verde2), var(--verde)); transition: width 1.1s cubic-bezier(.22, 1, .36, 1); }
.barra:first-child .enche { background: linear-gradient(90deg, var(--rosa2), var(--rosa)); }
.barra .num { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.abas button { font: 600 13px var(--f-texto); color: var(--verde); background: transparent; border: 1.5px solid var(--linha); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.abas button.on { background: var(--verde); border-color: var(--verde); color: #FFFBF5; }

/* ---------- funil ---------- */
.funil-passo { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.funil-passo .nome { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.funil-passo .linha-faixa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.funil-passo .faixa { height: 46px; border-radius: 12px; background: linear-gradient(90deg, var(--verde), var(--verde2)); color: #FFFBF5; display: flex; align-items: center; padding: 0 14px; font: 500 20px var(--f-titulo); width: 0; min-width: 96px; max-width: calc(100% - 150px); transition: width 1.1s cubic-bezier(.22, 1, .36, 1); white-space: nowrap; flex: none; }
.funil-passo:last-child .faixa { background: linear-gradient(90deg, var(--rosa), var(--rosa2)); }
.funil-passo .rel { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

/* ---------- gráfico ---------- */
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .eixo text { font: 11px var(--f-texto); fill: var(--ink-soft); }
.grafico .grade { stroke: var(--linha); stroke-width: 1; }
.grafico .linha-vis { fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area-vis { fill: url(#gradVis); }
.grafico .barra-seg { fill: var(--rosa-claro); }
.grafico .marca-post { fill: var(--rosa); cursor: pointer; transition: r .15s; }
.grafico .marca-post:hover, .grafico .marca-post.on { fill: var(--vinho); }
.anima .linha-vis { stroke-dasharray: var(--comp); stroke-dashoffset: var(--comp); animation: desenha 1.6s cubic-bezier(.22, 1, .36, 1) forwards; }
.anima .barra-seg { transform-origin: bottom; transform-box: fill-box; animation: sobe .9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes sobe { from { transform: scaleY(0); } }
.post-do-dia { margin-top: 16px; border-top: 1px solid var(--linha); padding-top: 14px; }

/* ---------- posts ---------- */
.top3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.top-post { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; }
.top-post .pos { font: italic 500 30px var(--f-titulo); color: var(--rosa); line-height: 1; }
.top-post .leg { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.top-post .porque { font-size: 13.5px; color: var(--verde); background: var(--verde-claro); border-radius: 12px; padding: 10px 12px; margin: 0; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--rosa-bg); color: var(--vinho); }
.tag.v { background: var(--verde-claro); color: var(--verde); }
.numeros-post { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }
.numeros-post b { color: var(--ink); font-size: 14px; }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid #F0EBDF; vertical-align: top; }
.tabela td.n, .tabela th.n { text-align: right; white-space: nowrap; }
.tabela td.leg { min-width: 240px; max-width: 360px; }
.tabela td.leg span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabela tr.forte td { background: var(--rosa-bg); }

/* ---------- público ---------- */
.dupla-barra { display: flex; height: 18px; border-radius: 99px; overflow: hidden; margin: 10px 0 12px; }
.dupla-barra span { display: block; height: 100%; transition: width 1.1s; }
.dupla-barra .a { background: var(--verde); }
.dupla-barra .b { background: var(--rosa); }
.legenda-dupla { display: flex; gap: 18px; font-size: 13px; flex-wrap: wrap; }
.legenda-dupla i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.mapa { display: grid; gap: 4px; font-size: 11px; color: var(--ink-soft); }
.mapa .cel { aspect-ratio: 1.6; border-radius: 6px; background: var(--verde); }
.mapa .rot { display: flex; align-items: center; }

/* ---------- caderno ---------- */
.leitura p { font-size: 16px; margin: 0 0 12px; max-width: 75ch; }
.leitura p:last-child { margin: 0; }
.aprendizados { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.aprendizados li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.selo-conf { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.selo-conf.pista { background: #F4ECDD; color: var(--caramelo); }
.selo-conf.padrao { background: var(--verde); color: #FFFBF5; }
.acoes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.hip-texto { font: 500 19px/1.35 var(--f-titulo); margin: 0 0 10px; }
.hip-linha { font-size: 13.5px; margin: 4px 0; }
.hip-anterior { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rosa-claro); font-size: 13.5px; }
.resultado-hip { font-weight: 700; }
.resultado-hip.funcionou { color: #3E7350; }
.resultado-hip.nao_funcionou { color: var(--vinho); }
.resultado-hip.inconclusivo { color: var(--caramelo); }

/* ---------- área do Claude ---------- */
.atualizar { border-top: 2px solid var(--carta); }
.caderno-claude { white-space: pre-wrap; background: #F7F4EC; border-radius: 12px; padding: 14px; font: 12.5px/1.55 ui-monospace, Consolas, monospace; max-height: 280px; overflow: auto; margin: 0; }
textarea { width: 100%; min-height: 150px; border: 1.5px solid var(--linha); border-radius: 12px; padding: 12px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; background: #FFFEFB; color: var(--ink); resize: vertical; }
textarea:focus, select:focus, .btn:focus-visible, .abas button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.resultado:empty { display: none; }
.resultado { margin-top: 12px; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.resultado.ok { background: var(--verde-claro); color: var(--verde); }
.resultado.erro { background: var(--rosa-bg); color: var(--vinho); }
.resultado ul { margin: 6px 0 0; padding-left: 18px; }

.rodape { margin-top: 30px; font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: sticky; top: 0; z-index: 5; height: auto; padding: 12px 16px; gap: 10px; }
  .marca small, .privado { display: none; }
  .menu { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; }
  .menu a { white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  .menu a.sub { margin: 0; border: 0; padding-top: 7px; }
  .duas { grid-template-columns: 1fr; }
  .funil-passo { grid-template-columns: 1fr; gap: 6px; }
  main { padding-top: 22px; }
  .bloco { scroll-margin-top: 110px; }
}

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

/* ---------- impressão / PDF ---------- */
@media print {
  body { display: block; background: #fff; }
  .lateral, .atualizar, .topo-controles, .faixa-exemplo, #post-do-dia, .linha-controle select, .abas, .rodape { display: none !important; }
  .bloco { break-inside: avoid; padding: 18px 0; }
  .painel-card, .cartao, .top-post { box-shadow: none; break-inside: avoid; }
  .barra .enche, .funil-passo .faixa { transition: none; }
  details.detalhe { display: none; }
}
.tag.turb { background: #F4ECDD; color: var(--caramelo); }

/* ---------- entrada com o e-mail da compra ---------- */
.porta { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto;
  background: radial-gradient(120% 90% at 20% 0%, var(--verde2) 0%, var(--veludo) 60%); }
.porta-card { width: min(480px, 100%); background: var(--papel); border-radius: 24px; padding: 34px 30px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.porta-card .selo { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rosa2); color: var(--papel);
  font: italic 500 22px/1 var(--f-titulo); margin-bottom: 16px; }
.porta-card h1 { font-size: clamp(26px, 6vw, 34px); margin: 4px 0 10px; }
.porta-card h1 em { color: var(--rosa); }
.porta-card .lead { margin: 0 0 20px; color: var(--ink-soft); }
.porta-campo { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.porta-campo input { width: 100%; border: 1.5px solid var(--linha); border-radius: 12px; padding: 13px 14px; font: 16px var(--f-texto); color: var(--ink); background: #FFFEFB; }
.porta-campo input:focus { outline: 2px solid var(--rosa); outline-offset: 2px; }
.porta-card .btn { width: 100%; justify-content: center; }
.porta-card .btn[disabled] { opacity: .6; cursor: wait; }
.porta-rodape { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.porta-rodape a { color: var(--vinho); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--vinho); text-decoration: underline; cursor: pointer; }