/* Destrave Giro — base visual única do produto.
   Tokens, componentes e movimento. Trocar cor ou fonte aqui muda todas as telas. */

:root {
  --base: #FAF8F5;
  --surface: #FFFFFF;
  --faixa: #F2ECE5;
  --ink: #241F1B;
  --ink2: #5C534B;
  --ink3: #8B8078;
  --linha: #E6DFD7;
  --linha2: #F0EAE3;
  --borda: #D6CDC3;
  --terra: #B85C38;
  --terra-escuro: #9A4A2C;
  --terra-claro: #D98A63;
  --terra-tenue: #FCF0EA;
  --ambar: #C08A2E;
  --grafite: #211C18;
  --grafite2: #2A231E;
  --grafite3: #3A322B;
  --grafite-texto: #C7BCB2;
  --grafite-texto2: #A79C92;
  --liberado: #2F6B4F;
  --liberado-claro: #7FBF9A;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --gutter: 20px;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 760px) { :root { --gutter: 48px; } }
@media (min-width: 1200px) { :root { --gutter: 72px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--base); color: var(--ink); font-family: var(--sans);
       -webkit-font-smoothing: antialiased; }
a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--terra-escuro); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0;
             letter-spacing: -0.01em; text-wrap: pretty; }
p { margin: 0; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.fonte { font-size: 11px; color: var(--ink3); line-height: 1.5; }
.env { padding-inline: var(--gutter); max-width: 1440px; margin: 0 auto; }

/* ---- ações ---- */
.btn { display: inline-block; background: var(--terra); color: #FFF; padding: 16px 28px;
       border-radius: 3px; font-weight: 600; font-size: 15px; text-align: center;
       min-height: 44px; border: 0; font-family: inherit; cursor: pointer;
       transition: background 160ms var(--curva), transform 160ms var(--curva); }
.btn:hover { background: var(--terra-escuro); color: #FFF; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-2 { display: inline-block; padding: 16px 22px; font-size: 15px; font-weight: 600;
         color: var(--ink); border: 1px solid var(--borda); border-radius: 3px;
         min-height: 44px; background: transparent; font-family: inherit; cursor: pointer;
         transition: border-color 160ms var(--curva); }
.btn-2:hover { color: var(--ink); border-color: var(--ink3); }
.btn-largo { display: block; width: 100%; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

/* ---- cabeçalho público ---- */
body > header { border-bottom: 1px solid var(--linha); position: sticky; top: 0;
         background: color-mix(in srgb, var(--base) 88%, transparent); backdrop-filter: blur(8px); z-index: 20; }
.barra { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.logo { display: flex; align-items: center; gap: 9px; color: var(--terra); }
.logo span { font-family: var(--serif); font-size: 24px; color: var(--ink); line-height: 1; }
nav { display: none; align-items: center; gap: 30px; font-size: 14px; color: var(--ink2); }
nav a { color: var(--ink2); }
nav a:hover { color: var(--ink); }
nav a.cta { background: var(--terra); color: #FFF; padding: 11px 18px; border-radius: 3px; font-weight: 600; }
nav a.cta:hover { background: var(--terra-escuro); color: #FFF; }
@media (min-width: 900px) { nav { display: flex; } }

/* ---- blocos de conteúdo ---- */
section { padding-block: 56px; }
@media (min-width: 900px) { section { padding-block: 84px; } }
.cabeca { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: 36px; }
.cabeca h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; }
.cabeca p { font-size: 16px; line-height: 1.65; color: var(--ink2); }

.grade-2 { display: grid; gap: 20px; }
@media (min-width: 860px) { .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.grade-3 { display: grid; gap: 20px; }
@media (min-width: 860px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }

.caixa { background: var(--surface); border: 1px solid var(--linha); border-radius: 5px; padding: 28px; }
.caixa h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; margin-bottom: 8px; }
.caixa p { font-size: 14px; line-height: 1.65; color: var(--ink2); }

.cartao-escuro { background: var(--grafite); border-radius: 5px; padding: 28px;
                 display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 760px) { .cartao-escuro { padding: 40px; gap: 26px; } }
.linha-valor { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.linha-valor .k { font-size: 14px; color: var(--grafite-texto2); }
.linha-valor .v { font-family: var(--mono); font-size: 19px; color: var(--base);
                  font-variant-numeric: tabular-nums; }

/* ---- tabelas ---- */
.rolar { overflow-x: auto; border: 1px solid var(--linha); border-radius: 5px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th { background: var(--faixa); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
     font-weight: 600; color: var(--ink3); text-align: right; padding: 15px 14px; white-space: nowrap; }
th:first-child { text-align: left; padding-left: 24px; }
td { font-size: 14px; padding: 18px 14px; text-align: right; border-top: 1px solid var(--linha2); }
td:first-child { text-align: left; padding-left: 24px; }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.grave td { color: var(--terra-escuro); font-weight: 600; background: var(--faixa); }
tr.aviso td.marca { color: var(--terra); font-weight: 500; }

/* ---- formulários ---- */
.campo { display: flex; flex-direction: column; gap: 9px; }
.campo .topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo .nome { font-size: 14px; font-weight: 600; }
.campo .val { font-family: var(--mono); font-size: 20px; color: var(--terra); font-variant-numeric: tabular-nums; }
.campo .dica { font-size: 12px; color: var(--ink3); line-height: 1.45; }
input[type=text], input[type=email], input[type=password] {
  font-size: 16px; border: 1px solid var(--borda); border-radius: 3px; padding: 13px 14px;
  width: 100%; background: var(--surface); color: var(--ink); min-height: 44px; font-family: inherit;
  transition: border-color 140ms var(--curva); }
input[type=text].num-in { font-family: var(--mono); font-size: 19px; }
input:focus { outline: 2px solid var(--terra); outline-offset: -1px; border-color: var(--terra); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: #E2D9CF; border-radius: 2px; margin: 12px 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%; background: var(--base);
  border: 2px solid var(--terra); cursor: pointer; box-shadow: 0 1px 3px rgba(36,31,27,.2);
  transition: transform 120ms var(--curva); }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.08); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%;
  background: var(--base); border: 2px solid var(--terra); cursor: pointer; }
.dupla { display: grid; gap: 18px; }
@media (min-width: 620px) { .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- ciclo ---- */
.barra-ciclo { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--grafite3); }
.barra-ciclo > div { transition: width 420ms var(--curva); }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--grafite-texto2); }
.legenda span { display: flex; align-items: center; gap: 7px; }
.ponto { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.alavanca { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            padding: 15px 0; border-bottom: 1px solid var(--linha2); }
.alavanca .t { font-size: 14px; font-weight: 600; }
.alavanca .d { font-size: 12px; color: var(--ink3); margin-top: 3px; }
.alavanca .v { font-family: var(--mono); font-size: 18px; color: var(--liberado);
               white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- planos ---- */
.precos { display: grid; gap: 20px; }
@media (min-width: 900px) { .precos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.plano { background: var(--grafite2); border: 1px solid var(--grafite3); border-radius: 5px;
         padding: 30px; display: flex; flex-direction: column; gap: 20px;
         transition: transform 200ms var(--curva); }
.plano:hover { transform: translateY(-3px); }
.plano.destaque { background: var(--base); border-color: var(--terra); }
.plano h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--base); }
.plano.destaque h3 { color: var(--ink); }
.plano .quem { font-size: 13px; color: var(--ink3); margin-top: 4px; }
.plano .preco { font-family: var(--mono); font-size: 36px; color: var(--base); font-variant-numeric: tabular-nums; }
.plano.destaque .preco { color: var(--ink); }
.plano ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
            gap: 10px; font-size: 14px; color: var(--grafite-texto); line-height: 1.5; }
.plano.destaque ul { color: var(--ink2); }
.plano .fim { margin-top: auto; }
.plano .btn-plano { display: block; text-align: center; border: 1px solid #4A4038; color: var(--base);
                    padding: 13px; border-radius: 3px; font-weight: 600; font-size: 14px; }
.plano .btn-plano:hover { color: var(--base); border-color: var(--ink3); }
.plano.destaque .btn-plano { background: var(--terra); border-color: var(--terra); color: #FFF; }
.plano.destaque .btn-plano:hover { background: var(--terra-escuro); }

footer { border-top: 1px solid var(--linha); padding-block: 32px; }
.rodape { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.rodape .links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--ink3); }
.rodape .links a { color: var(--ink3); }

/* =======================  ÁREA LOGADA  ======================= */

.app { display: flex; min-height: 100vh; }
.lateral { width: 246px; flex-shrink: 0; background: var(--grafite); padding: 26px 20px;
           display: none; flex-direction: column; gap: 30px; }
@media (min-width: 1000px) { .lateral { display: flex; } }
.lateral .logo span { color: var(--base); font-size: 21px; }
.lateral .logo { color: var(--terra-claro); padding-inline: 6px; }
.grupo { display: flex; flex-direction: column; gap: 4px; }
.grupo .titulo { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
                 font-weight: 600; color: #6B6158; padding: 0 6px 8px; }
.item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 3px;
        background: transparent; color: var(--grafite-texto2); font-size: 14px; border: 0;
        font-family: inherit; text-align: left; cursor: pointer; width: 100%;
        transition: background 140ms var(--curva), color 140ms var(--curva); }
.item:hover { background: var(--grafite2); color: var(--base); }
.item .i { font-family: var(--mono); font-size: 11px; opacity: 0.6; min-width: 14px; }
.item[aria-current="page"], .item.ativo { background: var(--terra); color: #FFF; font-weight: 600; }
.item.ativo .i { opacity: 0.8; }
.vigilancia { margin-top: auto; background: var(--grafite2); border-radius: 3px; padding: 16px; }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--liberado-claro);
         animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }

.conteudo { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.topo-app { background: var(--base); border-bottom: 1px solid var(--linha); padding: 18px var(--gutter);
            display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topo-app .quem { font-size: 17px; font-weight: 600; }
.topo-app .meta { font-size: 13px; color: var(--ink3); margin-top: 3px; }
.aviso-faixa { background: var(--terra-tenue); border-bottom: 1px solid #EDD5C8;
               padding: 15px var(--gutter); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aviso-faixa .txt { font-size: 14px; color: #6B3A26; line-height: 1.5; flex: 1 1 260px; }
.abas-mobile { display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--gutter);
               border-bottom: 1px solid var(--linha); }
@media (min-width: 1000px) { .abas-mobile { display: none; } }
.abas-mobile .item { width: auto; white-space: nowrap; background: var(--surface);
                     border: 1px solid var(--linha); color: var(--ink2); }
.abas-mobile .item.ativo { background: var(--terra); border-color: var(--terra); color: #FFF; }

.painel-corpo { padding: 28px var(--gutter) 44px; display: flex; flex-direction: column; gap: 22px; }
.titulo-painel { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.titulo-painel h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.titulo-painel .sub { font-size: 13px; color: var(--ink3); }
.cartoes { display: grid; gap: 18px; }
@media (min-width: 800px) { .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { background: var(--base); border: 1px solid var(--linha); border-radius: 5px; padding: 22px; }
.stat.grave { border-color: #EDD5C8; }
.stat .v { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 32px); margin-top: 12px;
           font-variant-numeric: tabular-nums; }
.stat.grave .v { color: var(--terra-escuro); }
.stat .d { font-size: 13px; color: var(--ink3); margin-top: 6px; line-height: 1.45; }

.aba-conteudo { display: none; }
.aba-conteudo.visivel { display: block; animation: entra 320ms var(--curva) both; }

/* ---- movimento ---- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].dentro { opacity: 1; transform: none;
  transition: opacity 520ms var(--curva), transform 520ms var(--curva); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.desenha { stroke-dasharray: var(--tam, 2000); stroke-dashoffset: var(--tam, 2000);
           animation: desenhar 1100ms var(--curva) forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.sobe { transform-origin: bottom; animation: sobe 620ms var(--curva) both; }
@keyframes sobe { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.aparece-tarde { animation: entra 520ms var(--curva) 700ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important;
    transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .desenha { stroke-dashoffset: 0; }
  .pulso { animation: none; }
}

/* =====================  PAINEL PREMIUM  ===================== */

.dica-grafico { position: absolute; top: 0; background: var(--grafite); border-radius: 3px;
  padding: 9px 12px; pointer-events: none; opacity: 0; transform: translateX(-50%);
  transition: opacity 140ms var(--curva); white-space: nowrap; z-index: 3; }
.dica-grafico.visivel { opacity: 1; }
.dica-grafico .q { font-size: 11px; color: var(--grafite-texto2); }
.dica-grafico .v { font-family: var(--mono); font-size: 15px; color: var(--base);
  margin-top: 3px; font-variant-numeric: tabular-nums; }

/* seletor de período */
.periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.periodo .rot { font-size: 12px; color: var(--ink3); }
.chip { border: 1px solid var(--linha); background: var(--surface); color: var(--ink2);
  font-family: var(--mono); font-size: 12px; padding: 8px 12px; border-radius: 3px;
  cursor: pointer; min-height: 36px; transition: all 140ms var(--curva); }
.chip:hover { border-color: var(--ink3); color: var(--ink); }
.chip.ativo { background: var(--ink); border-color: var(--ink); color: var(--base); }

/* cartões de indicador */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--linha); border-radius: 5px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative;
  overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--linha); }
.kpi.alerta::before { background: var(--terra); }
.kpi.boa::before { background: var(--liberado); }
.kpi .rot { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink3); }
.kpi .val { font-family: var(--mono); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.kpi.alerta .val { color: var(--terra-escuro); }
.kpi.boa .val { color: var(--liberado); }
.kpi .sub { font-size: 12px; color: var(--ink3); line-height: 1.45; }

/* barras horizontais */
.barra-linha { display: grid; grid-template-columns: minmax(120px, 1.3fr) 2.4fr auto;
  gap: 14px; align-items: center; padding: 9px 0; }
.barra-linha .rot { font-size: 13px; color: var(--ink2); }
.barra-linha .trilho { height: 10px; background: var(--linha2); border-radius: 2px; overflow: hidden; }
.barra-linha .preenche { height: 100%; width: 0; border-radius: 2px; }
.barra-linha .val { font-size: 13px; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* blocos do painel */
.cartao { background: var(--surface); border: 1px solid var(--linha); border-radius: 5px;
  padding: 24px; }
.cartao > header { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cartao > header h3 { font-family: var(--sans); font-weight: 600; font-size: 16px; }
.cartao > header .nota { font-size: 12px; color: var(--ink3); }
.duas-colunas { display: grid; gap: 18px; }
@media (min-width: 1100px) { .duas-colunas { grid-template-columns: 1.35fr 1fr; } }

/* recurso bloqueado por plano */
.bloqueado { position: relative; }
.bloqueado > .conteudo-bloqueado { filter: blur(5px); opacity: 0.5; pointer-events: none;
  user-select: none; }
.cadeado { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: 24px; background: color-mix(in srgb, var(--base) 62%, transparent); border-radius: 5px; }
.cadeado .titulo { font-size: 15px; font-weight: 600; }
.cadeado .texto { font-size: 13px; color: var(--ink2); max-width: 380px; line-height: 1.55; }

/* seletor de plano da demonstração */
.planos-demo { display: flex; gap: 4px; background: var(--faixa); padding: 4px; border-radius: 3px; }
.planos-demo button { border: 0; background: transparent; font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--ink2); padding: 9px 14px; border-radius: 2px; cursor: pointer;
  min-height: 40px; white-space: nowrap; transition: all 150ms var(--curva); }
.planos-demo button.ativo { background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(36,31,27,.08); }

/* simulador */
.simulador { display: grid; gap: 20px; }
@media (min-width: 900px) { .simulador { grid-template-columns: 1fr 1fr; } }
.sim-campo { display: flex; flex-direction: column; gap: 6px; }
.sim-campo .topo { display: flex; justify-content: space-between; align-items: baseline; }
.sim-campo .nome { font-size: 13px; font-weight: 600; }
.sim-campo .val { font-family: var(--mono); font-size: 17px; color: var(--terra); }
.sim-resultado { background: var(--grafite); border-radius: 5px; padding: 22px;
  display: flex; flex-direction: column; gap: 16px; }
.sim-resultado .linha { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 14px; color: var(--grafite-texto2); }
.sim-resultado .linha b { font-family: var(--mono); font-weight: 400; color: var(--base);
  font-variant-numeric: tabular-nums; }
.sim-resultado .destaque { border-top: 1px solid var(--grafite3); padding-top: 16px; }
.sim-resultado .destaque b { font-size: 22px; color: var(--liberado-claro); }

/* assistente */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 440px; }
.chat .conversa { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding-right: 4px; }
.bolha { max-width: 92%; font-size: 14px; line-height: 1.6; border-radius: 4px; padding: 13px 15px; }
.bolha.dele { align-self: flex-end; background: var(--terra); color: #FFF; }
.bolha.nossa { align-self: flex-start; background: var(--faixa); color: var(--ink); }
.bolha .valor { display: block; font-family: var(--mono); font-size: 20px; color: var(--terra-escuro);
  margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.chat .sugestoes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chat .sugestoes button { border: 1px solid var(--borda); background: var(--surface);
  color: var(--ink2); font-family: inherit; font-size: 12px; padding: 8px 11px; border-radius: 3px;
  cursor: pointer; text-align: left; transition: all 140ms var(--curva); }
.chat .sugestoes button:hover { border-color: var(--terra); color: var(--terra); }
.chat .escrever { display: flex; gap: 8px; margin-top: 16px; }
.chat .escrever input { flex: 1; }
.digitando { display: inline-flex; gap: 4px; align-items: center; }
.digitando i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink3);
  animation: pontinho 1.1s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* faixa de marca no topo do painel */
.marca-plano { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; padding: 3px 7px; border-radius: 2px; background: var(--terra); color: #FFF; }
.marca-plano.neutra { background: var(--linha); color: var(--ink2); }