/*
   app.css — Shopilot (app.shopilot.matheusmorais.com).
   Padrão de SaaS no acabamento de Linear/Vercel: neutros zinco, bordas de 1px
   em vez de sombra, um único acento índigo (ação, seleção, série dos gráficos).
   Claro/escuro seguem o sistema. Sem estilo inline: a CSP bloqueia.
   */

@font-face{ font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/static/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/static/fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  color-scheme:light dark;
  --fundo:#fafafa;        /* chão do app */
  --superficie:#ffffff;   /* blocos */
  --sutil:#f4f4f5;        /* hover, trilhos */
  --borda:#e4e4e7;
  --borda-forte:#d4d4d8;
  --texto:#09090b;        /* 19:1 */
  --texto-2:#52525b;      /* 7.7:1 */
  --texto-3:#71717a;      /* 4.8:1 */
  --acento:#5e6ad2;       /* botão primário e seleção; branco por cima 4.6:1 */
  --acento-hover:#4f5bc4;
  --acento-suave:#eef0fc;
  --dado:#5e6ad2;         /* série dos gráficos: validado (dataviz) no claro */
  --contexto:#d4d4d8;     /* barras de contexto, sempre com valor escrito ao lado */
  --perigo:#dc2626;
  --ok:#16a34a;
  --raio:8px;
  --fonte:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lateral:232px;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#09090b;
    --superficie:#111113;
    --sutil:#1c1c1f;
    --borda:#27272a;
    --borda-forte:#3f3f46;
    --texto:#fafafa;
    --texto-2:#a1a1aa;     /* 7.6:1 */
    --texto-3:#8b8b94;     /* 5.3:1 */
    --acento-suave:#1d1f3a;
    --dado:#7b84f0;        /* validado (dataviz) no escuro */
    --contexto:#3f3f46;
    --perigo:#f87171;
    --ok:#4ade80;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:var(--borda-forte) transparent; }
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:400 15px/1.55 var(--fonte); -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--acento); color:#fff; }
a{ color:var(--texto); text-decoration-color:var(--borda-forte); text-underline-offset:.2em; }
a:hover{ text-decoration-color:currentColor; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:4px; }
h1, h2, h3{ text-wrap:balance; letter-spacing:-.02em; }
h1{ margin:0; font-size:24px; font-weight:600; line-height:1.25; }
h2{ margin:0; font-size:15px; font-weight:600; }
p{ margin:0; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; padding:.5rem 1rem; background:var(--texto); color:var(--fundo); z-index:20; }
.num, td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quiet{ color:var(--texto-2); }

/* ===== estrutura: lateral fixa no computador, barra superior no celular ===== */
.app{ display:grid; grid-template-columns:var(--lateral) minmax(0, 1fr); min-height:100vh; }
.lateral{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:.25rem;
  padding:16px 12px; border-right:1px solid var(--borda); background:var(--fundo);
}
.marca{ display:flex; align-items:center; gap:10px; padding:6px 8px 18px; font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--texto); text-decoration:none; }
.marca svg{ width:24px; height:24px; flex:none; }
.nav{ display:flex; flex-direction:column; gap:2px; }
.nav a{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px;
  color:var(--texto-2); text-decoration:none; font-weight:500; font-size:14px;
}
.nav a svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nav a:hover{ background:var(--sutil); color:var(--texto); }
.nav a[aria-current="page"]{ background:var(--sutil); color:var(--texto); }
.lateral .quem{
  margin-top:auto; display:flex; align-items:center; gap:10px; padding:8px; border-radius:6px;
  color:var(--texto); text-decoration:none; font-size:14px; font-weight:500;
}
.lateral .quem:hover{ background:var(--sutil); }
.quem img, .quem .avatar{ width:26px; height:26px; border-radius:50%; flex:none; background:var(--sutil); object-fit:cover; }
.quem small{ display:block; color:var(--texto-3); font-size:12px; font-weight:400; }
.conteudo{ min-width:0; }
.miolo{ max-width:1120px; margin:0 auto; padding:32px 40px 64px; }

/* topo público (sem login) */
.topo-publico{ border-bottom:1px solid var(--borda); background:var(--fundo); position:sticky; top:0; z-index:5; }
.topo-publico .miolo{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; }
.topo-publico .marca{ padding:0; }

/* ===== botões ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:34px; padding:0 14px;
  border:1px solid transparent; border-radius:var(--raio); cursor:pointer;
  background:var(--acento); color:#fff; font:500 14px var(--fonte); text-decoration:none; white-space:nowrap;
  transition:background-color .15s, border-color .15s;
}
.btn:hover{ background:var(--acento-hover); }
.btn[disabled]{ background:var(--sutil); color:var(--texto-3); border-color:var(--borda); cursor:not-allowed; }
.btn.secundario{ background:var(--superficie); color:var(--texto); border-color:var(--borda); }
.btn.secundario:hover{ background:var(--sutil); }
.btn.perigo{ background:var(--superficie); color:var(--perigo); border-color:var(--borda); }
.btn.perigo:hover{ border-color:var(--perigo); }
.btn.carregando{ cursor:progress; background:var(--sutil); color:var(--texto-2); }
.btn.grande{ height:42px; padding:0 20px; font-size:15px; }
.link{ background:none; border:0; padding:0; color:var(--texto-2); font:inherit; text-decoration:underline; cursor:pointer; }

/* ===== cabeçalho de página ===== */
.cabeca{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 24px; }
.cabeca p{ margin-top:4px; color:var(--texto-2); font-size:14px; }
.voltar{ display:inline-block; margin-bottom:12px; color:var(--texto-2); font-size:14px; text-decoration:none; }
.voltar:hover{ color:var(--texto); }
.aviso{
  margin:0 0 20px; padding:10px 14px; border:1px solid var(--borda); border-radius:var(--raio);
  background:var(--superficie); color:var(--texto); font-size:14px;
}

/* ===== blocos ===== */
.bloco{ background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:20px; margin:0 0 16px; }
.bloco .sub{ margin:2px 0 16px; color:var(--texto-2); font-size:13px; }
.card{ background:var(--superficie); border:1px solid var(--borda); border-radius:12px; padding:20px; }
.grade-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; margin:0 0 16px; }
.grade-2 > .bloco{ margin:0; }
.nota{ margin-top:12px; font-size:13px; color:var(--texto-3); }
.nota a{ color:var(--texto-2); }
.vazio{ padding:28px; text-align:center; border:1px dashed var(--borda-forte); border-radius:var(--raio); color:var(--texto-2); font-size:14px; }

/* ===== faixa de métricas: um bloco só, dividido por linhas ===== */
.kpis{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  background:var(--superficie); border:1px solid var(--borda); border-radius:12px; margin:0 0 16px; overflow:hidden;
}
.kpis .kpi{ padding:16px 20px; border-right:1px solid var(--borda); min-width:0; }
.kpis .kpi:last-child{ border-right:0; }
.kpi .rotulo{ font-size:13px; color:var(--texto-2); font-weight:500; }
.kpi .valor{ margin-top:6px; font-size:28px; font-weight:600; letter-spacing:-.025em; line-height:1.1; }
.kpi .delta{ margin-top:4px; font-size:13px; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.kpi .delta .sobe{ color:var(--ok); }
.kpi .delta .cai{ color:var(--perigo); }
.spark{ display:block; width:100%; height:28px; margin-top:10px; }
.spark path{ fill:none; stroke:var(--dado); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }

/* ===== meta ===== */
.meta .linha-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.meta .linha-meta strong{ font-size:20px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.meta svg{ display:block; width:100%; height:6px; margin:12px 0 10px; }
.meta .trilho{ fill:var(--sutil); }
.meta .feito{ fill:var(--dado); }
.meta p{ font-size:14px; color:var(--texto-2); }
.meta p strong{ color:var(--texto); font-weight:600; }

/* ===== gráfico de linha ===== */
.linha{ position:relative; margin:4px 0 0; }
.linha .plot{ display:block; width:100%; height:220px; overflow:visible; }
.linha .eixo-x{ display:block; width:100%; height:22px; overflow:visible; }
.linha .area{ fill:var(--dado); opacity:.08; }
.linha .traco{ fill:none; stroke:var(--dado); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.linha .grade line{ stroke:var(--borda); stroke-width:1; shape-rendering:crispEdges; }
.linha text{ fill:var(--texto-3); font:400 12px var(--fonte); font-variant-numeric:tabular-nums; }
.linha .rotulo-fim{ fill:var(--texto); font-weight:600; }
.linha .ponto{ fill:var(--dado); stroke:var(--superficie); stroke-width:2; }
.linha .cruz{ stroke:var(--borda-forte); stroke-width:1; visibility:hidden; }
.dica{
  position:absolute; pointer-events:none; visibility:hidden; transform:translate(-50%, calc(-100% - 10px));
  padding:6px 10px; border:1px solid var(--borda); border-radius:6px; background:var(--superficie);
  box-shadow:0 4px 12px rgb(0 0 0 / .08); font-size:12px; color:var(--texto-2); white-space:nowrap;
}
.dica strong{ display:block; font-size:14px; color:var(--texto); font-variant-numeric:tabular-nums; }
details.tabela-dados{ margin-top:12px; font-size:13px; }
details.tabela-dados summary{ cursor:pointer; color:var(--texto-3); width:max-content; }
details.tabela-dados summary:hover{ color:var(--texto); }
details.tabela-dados table{ margin-top:8px; max-width:320px; }

/* ===== barras horizontais ===== */
.barras{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.barras li{ display:grid; grid-template-columns:minmax(0, 15rem) minmax(0, 1fr) 4.5rem; align-items:center; gap:12px; font-size:13px; min-height:28px; }
.barras.curtas li{ grid-template-columns:minmax(0, 8.5rem) minmax(0, 1fr) 4.5rem; }
.barras .nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texto-2); }
.barras .nome a{ color:inherit; text-decoration:none; }
.barras .nome a:hover{ color:var(--texto); text-decoration:underline; }
.barras svg{ display:block; width:100%; height:16px; }
.barras rect{ fill:var(--contexto); }
.barras .destaque rect{ fill:var(--dado); }
.barras li:hover rect{ opacity:.8; }
.barras .valor{ text-align:right; font-variant-numeric:tabular-nums; color:var(--texto); font-weight:500; }
.barras .det{ display:block; font-size:11px; color:var(--texto-3); font-weight:400; }

/* ===== tabelas ===== */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th, td{ padding:10px 12px; border-bottom:1px solid var(--borda); text-align:left; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
th{ color:var(--texto-3); font-weight:500; font-size:12px; background:var(--superficie); }
td{ font-variant-numeric:tabular-nums; }
tbody tr:hover td{ background:var(--sutil); }
th a{ color:inherit; text-decoration:none; }
th a:hover{ color:var(--texto); }
th a[aria-current="true"]{ color:var(--texto); }
th a[aria-current="true"]::after{ content:" ↓"; }
.tabela{ overflow-x:auto; background:var(--superficie); border:1px solid var(--borda); border-radius:12px; }
td.legenda{ max-width:26rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.legenda a{ text-decoration:none; font-weight:500; }
td.legenda a:hover{ text-decoration:underline; }
td.capa{ width:44px; padding-right:0; }
td.capa img{ display:block; width:28px; height:38px; object-fit:cover; border-radius:4px; background:var(--sutil); }

/* filtros (controle segmentado) */
.filtros{ display:inline-flex; gap:2px; padding:3px; margin:0 0 16px; background:var(--sutil); border-radius:var(--raio); }
.filtros a{ padding:4px 12px; border-radius:6px; color:var(--texto-2); text-decoration:none; font-size:13px; font-weight:500; }
.filtros a:hover{ color:var(--texto); }
.filtros a[aria-current="true"]{ background:var(--superficie); color:var(--texto); box-shadow:0 1px 2px rgb(0 0 0 / .08); }

/* ===== vídeo ===== */
.video-topo{ display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:start; margin:0 0 24px; }
.video-topo.sem-capa{ grid-template-columns:1fr; }
.video-topo img{ width:120px; aspect-ratio:3/4; object-fit:cover; border-radius:var(--raio); background:var(--sutil); border:1px solid var(--borda); }
.video-topo .meta-video{ margin:6px 0 12px; color:var(--texto-2); font-size:14px; }
.video-topo .legenda-completa{ white-space:pre-line; max-width:68ch; }

/* ===== análises ===== */
.analises-lista{ list-style:none; margin:0; padding:0; background:var(--superficie); border:1px solid var(--borda); border-radius:12px; overflow:hidden; }
.analises-lista li + li{ border-top:1px solid var(--borda); }
.analises-lista a{ display:block; padding:14px 20px; color:var(--texto); text-decoration:none; }
.analises-lista a:hover{ background:var(--sutil); }
.analises-lista .data{ font-weight:600; font-size:14px; }
.analises-lista .info{ color:var(--texto-3); font-size:13px; margin-left:8px; }
.analises-lista p{ margin-top:4px; color:var(--texto-2); font-size:14px; max-width:90ch; }
.resumo{ font-size:16px; line-height:1.6; max-width:72ch; color:var(--texto); margin:8px 0 28px; }
.secao{ margin:0 0 28px; }
.secao > h2{ margin-bottom:12px; }
.padrao{ padding:14px 0; border-top:1px solid var(--borda); }
.padrao:first-of-type{ border-top:0; padding-top:0; }
.padrao strong{ font-weight:600; }
.padrao .quiet{ margin-top:4px; font-size:14px; max-width:80ch; }
.selo{ display:inline-block; margin-left:6px; padding:1px 8px; border:1px solid var(--borda); border-radius:99px; font-size:12px; color:var(--texto-2); vertical-align:1px; }
.selo.forte{ border-color:var(--dado); color:var(--dado); }
.teste{ padding:16px 20px; background:var(--superficie); border:1px solid var(--borda); border-radius:12px; margin:0 0 8px; }
.teste strong{ font-weight:600; }
.teste .linha-teste{ margin-top:6px; font-size:14px; max-width:80ch; }
.teste .quiet{ font-size:14px; }
.teste form{ display:flex; gap:6px; margin-top:12px; }
.chip{ height:28px; padding:0 12px; border:1px solid var(--borda); border-radius:6px; background:var(--superficie); color:var(--texto-2); font:500 13px var(--fonte); cursor:pointer; }
.chip:hover{ background:var(--sutil); color:var(--texto); }
.chip[aria-pressed="true"]{ background:var(--acento-suave); border-color:var(--dado); color:var(--texto); }
.secao ul{ padding-left:18px; color:var(--texto-2); }
.secao li{ margin:4px 0; }

/* ===== conta ===== */
.config{ background:var(--superficie); border:1px solid var(--borda); border-radius:12px; overflow:hidden; margin:0 0 16px; }
.config > section{ display:grid; grid-template-columns:minmax(0, 18rem) minmax(0, 1fr); gap:24px; padding:20px; }
.config > section + section{ border-top:1px solid var(--borda); }
.config h2{ margin-bottom:4px; }
.config .sub{ color:var(--texto-2); font-size:13px; }
.config.zona-perigo{ border-color:color-mix(in srgb, var(--perigo) 35%, var(--borda)); }
textarea{
  width:100%; min-height:9rem; padding:10px 12px; border:1px solid var(--borda); border-radius:var(--raio);
  background:var(--superficie); color:var(--texto); font:14px/1.55 var(--fonte); resize:vertical;
}
textarea::placeholder{ color:var(--texto-3); }
textarea:focus{ outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.acoes{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
label.confirma{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--texto-2); }
input[type="checkbox"]{ accent-color:var(--acento); width:16px; height:16px; }
.dados-conta{ display:grid; gap:2px; font-size:14px; }
.dados-conta span{ color:var(--texto-3); }

/* boas-vindas */
.boas-vindas{ border-color:var(--acento); background:var(--acento-suave); }
.passos-inicio{ margin:8px 0 0; padding-left:20px; color:var(--texto-2); font-size:14px; }
.passos-inicio li{ margin:4px 0; }
.passos-inicio a{ color:var(--texto); font-weight:500; }

/* ===== página inicial ===== */
.landing{ padding:72px 0 40px; }
.landing .hero{ max-width:46rem; margin:0 0 56px; }
.landing .rotulo-teste{ display:inline-block; margin-bottom:20px; padding:3px 10px; border:1px solid var(--borda); border-radius:99px; font-size:13px; color:var(--texto-2); background:var(--superficie); }
.landing h1{ font-size:clamp(34px, 5vw, 52px); line-height:1.05; letter-spacing:-.035em; font-weight:600; margin-bottom:18px; }
.landing .hero p{ font-size:17px; color:var(--texto-2); max-width:38rem; margin-bottom:28px; }
.prova{ border:1px solid var(--borda); border-radius:14px; overflow:hidden; background:var(--fundo); margin:0 0 72px; }
.prova .barra{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--borda); background:var(--superficie); }
.prova .barra i{ width:10px; height:10px; border-radius:50%; background:var(--borda-forte); display:block; }
.prova .barra span{ margin-left:auto; font-size:12px; color:var(--texto-3); }
.prova .tela{ padding:20px; display:grid; gap:16px; }
.prova .kpis, .prova .bloco{ margin:0; }
.landing h2{ font-size:22px; letter-spacing:-.025em; margin:0 0 20px; }
.beneficios{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--borda); margin:0 0 72px; }
.beneficios div{ padding:24px 24px 24px 0; border-bottom:1px solid var(--borda); }
.beneficios div:nth-child(odd){ border-right:1px solid var(--borda); }
.beneficios div:nth-child(even){ padding-left:24px; }
.beneficios h3{ margin:0 0 6px; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.beneficios p{ color:var(--texto-2); font-size:14px; }
.passos{ list-style:none; margin:0 0 72px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; counter-reset:passo; }
.passos li{ counter-increment:passo; padding:20px; background:var(--superficie); border:1px solid var(--borda); border-radius:12px; font-size:14px; color:var(--texto-2); }
.passos li::before{ content:counter(passo); display:grid; place-items:center; width:24px; height:24px; margin-bottom:14px; border-radius:6px; background:var(--sutil); color:var(--texto); font-weight:600; font-size:13px; }
.passos strong{ display:block; color:var(--texto); font-weight:600; margin-bottom:4px; }
.faq{ max-width:46rem; margin:0 0 40px; }
.faq details{ border-bottom:1px solid var(--borda); padding:14px 0; }
.faq summary{ cursor:pointer; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--texto-3); }
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin-top:8px; color:var(--texto-2); font-size:14px; max-width:68ch; }
.erro{ padding:96px 0; text-align:center; }
.erro p{ margin:8px 0 24px; }

/* rodapé */
.foot{ margin-top:48px; padding-top:20px; border-top:1px solid var(--borda); font-size:12px; color:var(--texto-3); }
.foot a{ color:var(--texto-2); }

/* ===== celular ===== */
@media (max-width:860px){
  .app{ grid-template-columns:minmax(0, 1fr); }
  .lateral{
    position:sticky; top:0; z-index:10; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:0; padding:10px 16px 0; border-right:0; border-bottom:1px solid var(--borda);
  }
  .marca{ padding:4px 0 10px; }
  .lateral .quem{ margin:0 0 10px auto; padding:4px; }
  .lateral .quem > span{ display:none; }
  .nav{ order:3; flex-basis:100%; flex-direction:row; gap:4px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 12px; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ padding:8px 10px 10px; border-radius:0; border-bottom:2px solid transparent; white-space:nowrap; }
  .nav a:hover{ background:none; }
  .nav a[aria-current="page"]{ background:none; border-bottom-color:var(--texto); }
  .nav a svg{ display:none; }
  .miolo{ padding:20px 16px 48px; }
  .kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:nth-child(2){ border-right:0; }
  .kpis .kpi:nth-child(-n+2){ border-bottom:1px solid var(--borda); }
  .barras li, .barras.curtas li{ grid-template-columns:minmax(0, 6.5rem) minmax(0, 1fr) 3.5rem; gap:8px; }
  .config > section{ grid-template-columns:1fr; gap:12px; }
  .beneficios{ grid-template-columns:1fr; }
  .beneficios div, .beneficios div:nth-child(even){ padding:20px 0; border-right:0; }
  .passos{ grid-template-columns:1fr; }
  .landing{ padding-top:40px; }
  .video-topo{ grid-template-columns:84px 1fr; gap:16px; }
  .video-topo img{ width:84px; }
  .linha .plot{ height:180px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* logo */
.marca-fundo{ fill:var(--acento); }
.marca-risco{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ajustes da revisão visual */
.bloco .resumo:last-child{ margin-bottom:0; }
.prova h2{ font-size:15px; letter-spacing:-.01em; margin:0; }
@media (max-width:860px){
  /* em páginas curtas a grade de uma coluna esticava a barra do topo até 100vh */
  .app{ grid-template-rows:auto 1fr; align-content:start; }
}

/* ===== correções da revisão final ===== */
.marca img{ width:26px; height:26px; flex:none; display:block; }
.ico{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.voltar{ display:inline-flex; align-items:center; gap:4px; }
.faq summary::after{ content:none; }
.faq summary .ico{ color:var(--texto-3); transition:transform .2s cubic-bezier(.16, 1, .3, 1); }
.faq details[open] summary .ico{ transform:rotate(180deg); }
.landing .prova h2{ font-size:15px; letter-spacing:-.01em; margin:0; }
.barras .valor{ white-space:nowrap; }
.barras .det{ display:inline; font-size:12px; }
.barras li{ grid-template-columns:minmax(0, 15rem) minmax(0, 1fr) auto; }
.barras.curtas li{ grid-template-columns:minmax(0, 7.5rem) minmax(0, 1fr) auto; }
.secao > h2 + .nota{ margin:-6px 0 12px; }
/* o único movimento do app: a linha do gráfico se desenha ao abrir */
@media (prefers-reduced-motion: no-preference){
  /* revela a linha da esquerda para a direita (o traço não escala, então dasharray não serve) */
  .linha .plot > svg{ animation:revela .9s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
}
@keyframes revela{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@media (max-width:860px){
  th.sec, td.sec{ display:none; }
  td.legenda{ max-width:11rem; }
  .barras li{ grid-template-columns:minmax(0, 6.5rem) minmax(0, 1fr) auto; }
  .barras.curtas li{ grid-template-columns:minmax(0, 6rem) minmax(0, 1fr) auto; }
  .beneficios div, .beneficios div:nth-child(odd), .beneficios div:nth-child(even){ padding:20px 0; border-right:0; }
}