/* ============================================================
   estilo.css — Design System da Propmind
   Tokens copiados de control-panel-ui/src/index.css.
   Cor de status nunca vira série de gráfico.
   ============================================================ */

:root {
  /* ---- Green Dark Brand (ação principal) ---- */
  --brand-100: #123C47;
  --brand-50:  #85B3BF;
  --brand-20:  #D8E6EA;

  /* ---- Green Light (accent, não CTA) ---- */
  --green-120: #22625B;
  --green-100: #3BAA9E;
  --green-10:  #CCF0EB;

  /* ---- Info / Blue ---- */
  --info-100: #0C58A3;
  --info-10:  #CCF6FF;

  /* ---- Semânticas ---- */
  --success:    #2AD04B;
  --success-10: #D6F6DC;
  --warning-120: #5C4300;
  --warning-100: #FFCC00;
  --warning-10:  #FEF0CD;
  --error-100: #EA3321;
  --error-90:  #F04438;
  --error-10:  #FFD0D0;
  --orange-100: #FF691B;
  --orange-10:  #FFEBD4;

  /* ---- Escala de cinza ---- */
  --gray-black: #2C2C2C;
  --gray-white: #FFFFFF;
  --gray-10: #EFF1F3;
  --gray-15: #F5F7F6;
  --gray-20: #E6EAE8;
  --gray-30: #E1E1E1;
  --gray-40: #A5A6A5;
  --gray-60: #909090;
  --gray-70: #737373;
  --gray-100: #5F6368;

  /* ---- Papéis ---- */
  --fundo: var(--gray-15);
  --superficie: var(--gray-white);
  --superficie-2: var(--gray-15);
  --borda: var(--gray-30);
  --texto: var(--gray-black);
  --texto-2: var(--gray-70);
  --texto-3: var(--gray-60);

  /* séries de gráfico */
  --azul: var(--info-100);
  --laranja: var(--orange-100);
  --agua: var(--green-100);

  /* status — nunca reutilizados como série */
  --verde: #1BA637;      /* success escurecido p/ contraste de texto */
  --amarelo: var(--warning-120);
  --vermelho: var(--error-100);
  --verde-fundo: var(--success-10);
  --amarelo-fundo: var(--warning-10);
  --vermelho-fundo: var(--error-10);
  --verde-barra: var(--success);
  --amarelo-barra: var(--warning-100);

  --sombra: 0 1px 2px 0 hsl(0 0% 0% / .05);
  --sombra-md: 0 4px 6px -1px hsl(0 0% 0% / .1), 0 2px 4px -2px hsl(0 0% 0% / .1);
  --raio: .75rem;      /* radius-lg */
  --raio-sm: .5rem;    /* radius-md */
}

:root[data-tema="escuro"] {
  --fundo: #0A2129;         /* background 193 60% 10% */
  --superficie: #0D2831;    /* card 193 60% 12% */
  --superficie-2: #123C47;
  --borda: #1E4A56;         /* border 193 40% 20% */
  --texto: #F2F2F2;
  --texto-2: #A6A6A6;
  --texto-3: #8A8A8A;

  --brand-100: #85B3BF;     /* na escuridão o CTA usa o tom claro da marca */
  --azul: #4E9BE0;
  --agua: #3BAA9E;
  --verde: #4FDD6C;
  --amarelo: #FFCC00;
  --vermelho: #F04438;
  --verde-fundo: #16351D;
  --amarelo-fundo: #3A2F05;
  --vermelho-fundo: #3D1512;

  --sombra: 0 1px 2px 0 hsl(0 0% 0% / .3);
  --sombra-md: 0 4px 6px -1px hsl(0 0% 0% / .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.topbar[hidden] { display: none; }
.topbar .marca { font-weight: 600; font-size: 15px; color: var(--texto); }
.topbar .marca span { color: var(--green-100); }
.topbar .espaco { flex: 1; }

.nav-principal { display: flex; gap: 2px; margin-left: 16px; }
.nav-principal a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--raio-sm);
  font-size: 14px; font-weight: 500; color: var(--texto-2);
  transition: background 180ms var(--ease, cubic-bezier(.25,.1,.25,1)), color 180ms;
}
.nav-principal a:hover { color: var(--texto); background: var(--gray-15); }
:root[data-tema="escuro"] .nav-principal a:hover { background: var(--superficie-2); }
.nav-principal a.ativo { color: var(--brand-100); font-weight: 600; background: var(--brand-20); }
:root[data-tema="escuro"] .nav-principal a.ativo { background: var(--superficie-2); color: #fff; }
.nav-principal .conta {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9999px; background: var(--error-100); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}

.perfil-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 9999px; padding: 4px 5px 4px 14px;
  font-size: 13px; color: var(--texto-2);
}
.perfil-chip strong { color: var(--texto); font-weight: 600; }
.perfil-chip button, .btn-icone {
  border: none; background: var(--gray-15); color: var(--texto-2);
  border-radius: 9999px; padding: 5px 12px; font-size: 12px; font-weight: 500;
}
:root[data-tema="escuro"] .perfil-chip button,
:root[data-tema="escuro"] .btn-icone { background: var(--superficie-2); }
.perfil-chip button:hover, .btn-icone:hover { background: var(--brand-20); color: var(--brand-100); }
.btn-icone { padding: 7px 11px; font-size: 14px; line-height: 1; }

/* ---------------- layout ---------------- */
.pagina { max-width: 1240px; margin: 0 auto; padding: 28px 24px 72px; }
.titulo-pagina { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.sub-pagina { color: var(--texto-2); margin: 0 0 24px; font-size: 14px; }

.secao { margin-top: 32px; }
.secao > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); font-weight: 600; margin: 0 0 12px;
}

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px;
}

/* ---------------- KPIs ---------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda);
       border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; }
.kpi .rotulo { font-size: 13px; color: var(--texto-2); margin-bottom: 6px; }
.kpi .valor { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
.kpi .nota { font-size: 12px; color: var(--texto-3); margin-top: 4px; }

/* ---------------- hero: valor agregado ---------------- */
.hero {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 28px;
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr); gap: 32px;
}
.hero h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
.hero .explica { color: var(--texto-2); font-size: 14px; margin: 0 0 18px; }
.hero .numerao {
  font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  color: var(--green-120); margin-bottom: 6px;
}
:root[data-tema="escuro"] .hero .numerao { color: var(--green-100); }
.hero .numerao-nota { font-size: 13px; color: var(--texto-2); }

.componentes { margin-top: 20px; display: grid; gap: 8px; }
.componente { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
              padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.componente:last-child { border-bottom: none; }
.componente .nome { font-weight: 500; font-size: 14px; }
.componente .det { font-size: 12px; color: var(--texto-3); }
.componente .val { font-weight: 600; white-space: nowrap; }

.comparacao { margin-bottom: 20px; }
.comparacao .cab { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.comparacao .cab strong { font-weight: 600; }
.barra-dupla { display: grid; gap: 6px; }
.barra-linha { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.barra-linha .leg { color: var(--texto-2); }
.barra-trilho { background: var(--gray-10); border-radius: 9999px; height: 8px; overflow: hidden; }
:root[data-tema="escuro"] .barra-trilho { background: var(--superficie-2); }
.barra-preenche { height: 100%; border-radius: 9999px; transition: width 350ms cubic-bezier(0,0,.2,1); }
.barra-linha .num { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 56px; text-align: right; }
.fonte-nota { font-size: 12px; color: var(--texto-3); margin-top: 8px; }

/* ---------------- distribuição de score ---------------- */
.distribuicao { display: flex; height: 32px; border-radius: var(--raio-sm); overflow: hidden; }
.distribuicao div { display: flex; align-items: center; justify-content: center;
                    font-size: 12px; font-weight: 600; transition: flex 250ms; }
/* preenchimento usa o tom vivo; o texto, o tom que contrasta com ele */
.distribuicao .v { background: var(--success); color: #0B3D16; }
.distribuicao .a { background: var(--warning-100); color: var(--warning-120); }
.distribuicao .r { background: var(--error-100); color: #fff; }

/* ---------------- grade de imóveis ---------------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
.card-imovel {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px; display: block;
  transition: box-shadow 180ms, border-color 180ms;
}
.card-imovel:hover { border-color: var(--brand-50); box-shadow: var(--sombra-md); }
.card-imovel .topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-imovel .end { font-weight: 600; font-size: 14px; }
.card-imovel .meta { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.card-imovel .linhas { margin-top: 16px; display: grid; gap: 6px; }
.card-imovel .linha { display: flex; justify-content: space-between; font-size: 13px; }
.card-imovel .linha span { color: var(--texto-2); }
.card-imovel .linha strong { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------- badges de score ---------------- */
.badge-score {
  --cor: var(--verde); --cor-fundo: var(--verde-fundo);
  display: grid; place-items: center; border-radius: 9999px;
  width: 48px; height: 48px; flex: 0 0 auto;
  background: var(--cor-fundo); border: 1.5px solid var(--cor); color: var(--cor);
  font-weight: 700; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums;
}
.badge-score.g { width: 72px; height: 72px; font-size: 23px; }
.badge-score.p { width: 38px; height: 38px; font-size: 13px; }
.badge-score.verde { --cor: var(--verde); --cor-fundo: var(--verde-fundo); }
.badge-score.amarelo { --cor: var(--amarelo); --cor-fundo: var(--amarelo-fundo); }
.badge-score.vermelho { --cor: var(--vermelho); --cor-fundo: var(--vermelho-fundo); }

/* status sempre com ícone + texto, nunca só cor */
.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 9999px;
  background: var(--cor-fundo, var(--gray-10)); color: var(--cor, var(--texto-2));
}
.pilula.verde { --cor: var(--green-120); --cor-fundo: var(--verde-fundo); }
.pilula.amarelo { --cor: var(--warning-120); --cor-fundo: var(--amarelo-fundo); }
.pilula.vermelho { --cor: var(--error-100); --cor-fundo: var(--vermelho-fundo); }
.pilula.neutra { --cor: var(--texto-2); --cor-fundo: var(--gray-10); }
:root[data-tema="escuro"] .pilula.verde { --cor: var(--verde); }
:root[data-tema="escuro"] .pilula.amarelo { --cor: var(--amarelo); }
:root[data-tema="escuro"] .pilula.neutra { --cor-fundo: var(--superficie-2); }

.delta.pos { color: var(--green-120); font-weight: 600; }
.delta.neg { color: var(--error-100); font-weight: 600; }
:root[data-tema="escuro"] .delta.pos { color: var(--verde); }
:root[data-tema="escuro"] .delta.neg { color: var(--vermelho); }

/* ---------------- detalhe ---------------- */
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2);
          font-size: 13px; margin-bottom: 16px; }
.voltar:hover { color: var(--brand-100); }
:root[data-tema="escuro"] .voltar:hover { color: var(--brand-50); }

.cabecalho-imovel { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }

.banner-resumo {
  background: var(--brand-20);
  border: 1px solid var(--brand-50);
  border-radius: var(--raio); padding: 18px 20px; margin: 20px 0 8px;
  font-size: 14px; line-height: 1.6; color: var(--texto);
}
:root[data-tema="escuro"] .banner-resumo { background: var(--superficie-2); border-color: var(--borda); }
.banner-resumo .cab { display: flex; align-items: center; gap: 8px; font-size: 12px;
                      text-transform: uppercase; letter-spacing: .06em; color: var(--brand-100);
                      font-weight: 600; margin-bottom: 8px; }
:root[data-tema="escuro"] .banner-resumo .cab { color: var(--brand-50); }

.duas-colunas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }

/* ---------------- gráficos ---------------- */
.gr-barras { display: flex; align-items: flex-end; gap: 5px; height: 160px; margin-top: 12px; }
.gr-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
          align-items: center; gap: 6px; height: 100%; }
.gr-barra { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--azul);
            min-height: 3px; transition: height 350ms cubic-bezier(0,0,.2,1); }
.gr-barra.vago { background: repeating-linear-gradient(45deg,
    var(--error-100), var(--error-100) 3px, transparent 3px, transparent 6px);
    border: 1px solid var(--error-100); }
.gr-rot { font-size: 10px; color: var(--texto-3); white-space: nowrap; }

.gr-horizontal { display: grid; gap: 10px; margin-top: 8px; }
.gr-h-linha { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.gr-h-trilho { background: var(--gray-10); border-radius: var(--raio-sm); height: 24px; overflow: hidden; }
:root[data-tema="escuro"] .gr-h-trilho { background: var(--superficie-2); }
.gr-h-preenche { height: 100%; border-radius: var(--raio-sm); transition: width 350ms cubic-bezier(0,0,.2,1); }
.gr-h-linha .num { font-weight: 600; font-variant-numeric: tabular-nums; }

.faixa-ocupacao { display: flex; gap: 4px; margin-top: 10px; }
.faixa-ocupacao div { flex: 1; height: 28px; border-radius: 4px; display: grid; place-items: center;
                      font-size: 10px; font-weight: 600; }
.faixa-ocupacao .ocupado { background: var(--green-10); color: var(--green-120); }
.faixa-ocupacao .vago { background: var(--error-10); color: var(--error-100);
                        border: 1px dashed var(--error-100); }
:root[data-tema="escuro"] .faixa-ocupacao .ocupado { background: #14403A; color: var(--green-100); }
:root[data-tema="escuro"] .faixa-ocupacao .vago { background: var(--vermelho-fundo); }

/* ---------------- fatores de score ---------------- */
.fatores { display: grid; gap: 6px; margin-top: 12px; }
.fator { display: grid; grid-template-columns: 1fr auto; gap: 10px;
         padding: 10px 12px; background: var(--gray-15); border-radius: var(--raio-sm); }
:root[data-tema="escuro"] .fator { background: var(--superficie-2); }
.fator .nome { font-size: 13px; font-weight: 500; }
.fator .exp { font-size: 12px; color: var(--texto-2); margin-top: 1px; }
.fator .pts { font-weight: 700; font-variant-numeric: tabular-nums; align-self: center; font-size: 14px; }
.fator .pts.pos { color: var(--green-120); }
.fator .pts.neg { color: var(--error-100); }
.fator .pts.zero { color: var(--texto-3); }
:root[data-tema="escuro"] .fator .pts.pos { color: var(--verde); }

/* ---------------- toggle efeito de rede ---------------- */
.rede {
  border: 1px solid var(--orange-100);
  background: var(--orange-10);
  border-radius: var(--raio); padding: 16px;
}
:root[data-tema="escuro"] .rede { background: #3A2314; border-color: #7A3D14; }
.rede .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             margin-bottom: 12px; flex-wrap: wrap; }
.rede .cab .tit { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
                  color: #A33D08; font-weight: 600; }
:root[data-tema="escuro"] .rede .cab .tit { color: var(--orange-100); }
.interruptor { display: inline-flex; background: var(--gray-white); border-radius: 9999px;
               padding: 3px; border: 1px solid var(--gray-30); }
:root[data-tema="escuro"] .interruptor { background: var(--superficie); border-color: var(--borda); }
.interruptor button { border: none; background: transparent; color: var(--texto-2);
                      padding: 6px 13px; border-radius: 9999px; font-size: 12px; font-weight: 600;
                      transition: background 180ms, color 180ms; }
.interruptor button.ativo { background: var(--orange-100); color: #fff; }
.rede .amostra { font-size: 12px; color: var(--texto-2); margin-top: 8px; }
.rede .amostra strong { color: var(--texto); }

.score-grande { display: flex; align-items: center; gap: 16px; }
.score-grande .n { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
                   font-variant-numeric: tabular-nums; transition: color 350ms; }
.score-grande .n.verde { color: var(--green-120); }
.score-grande .n.amarelo { color: var(--warning-120); }
.score-grande .n.vermelho { color: var(--error-100); }
:root[data-tema="escuro"] .score-grande .n.verde { color: var(--verde); }
:root[data-tema="escuro"] .score-grande .n.amarelo { color: var(--amarelo); }

/* ---------------- linha do tempo ---------------- */
.tempo { display: grid; margin-top: 8px; }
.tempo-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 0;
              border-left: 1px solid var(--borda); margin-left: 16px; padding-left: 18px; position: relative; }
.tempo-item .ic { position: absolute; left: -15px; top: 10px; width: 29px; height: 29px;
                  border-radius: 9999px; background: var(--superficie); border: 1px solid var(--borda);
                  display: grid; place-items: center; font-size: 13px; }
.tempo-item .corpo { grid-column: 2; }
.tempo-item .tit { font-weight: 500; font-size: 14px; }
.tempo-item .det { font-size: 12px; color: var(--texto-2); }
.tempo-item .quando { font-size: 11px; color: var(--texto-3); }

/* ---------------- simulador ---------------- */
.simulador .controle { display: flex; align-items: center; gap: 16px; margin: 14px 0 18px; }
.simulador input[type="range"] { flex: 1; accent-color: var(--brand-100); }
:root[data-tema="escuro"] .simulador input[type="range"] { accent-color: var(--brand-50); }
.simulador .valor-sim { font-size: 22px; font-weight: 700; letter-spacing: -.02em;
                        font-variant-numeric: tabular-nums; min-width: 128px; text-align: right; }
.sim-resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.sim-res { background: var(--gray-15); border-radius: var(--raio-sm); padding: 12px 14px; }
:root[data-tema="escuro"] .sim-res { background: var(--superficie-2); }
.sim-res .r { font-size: 12px; color: var(--texto-2); }
.sim-res .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }

.btn {
  border: none; border-radius: var(--raio-sm); padding: 10px 16px;
  font-weight: 600; font-size: 14px; background: var(--brand-100); color: #fff;
  transition: filter 180ms;
}
:root[data-tema="escuro"] .btn { color: var(--brand-100); }
.btn:hover { filter: brightness(1.12); }
.btn.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); }
.btn.secundario:hover { background: var(--gray-15); filter: none; }
:root[data-tema="escuro"] .btn.secundario { color: var(--texto); background: var(--superficie-2); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------------- recomendações ---------------- */
.recomendacoes { display: grid; gap: 12px; }
.rec {
  border-left: 3px solid var(--cor); border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  border-top: 1px solid var(--borda); border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  padding: 16px 18px;
}
.rec.alta { --cor: var(--error-100); --cor-fundo: var(--vermelho-fundo); }
.rec.media { --cor: var(--warning-100); --cor-fundo: var(--amarelo-fundo); }
.rec.info { --cor: var(--brand-100); --cor-fundo: var(--brand-20); }
:root[data-tema="escuro"] .rec.info { --cor-fundo: var(--superficie-2); --cor: var(--brand-50); }
.rec .tit { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rec .txt { font-size: 13px; color: var(--texto-2); line-height: 1.6; }
:root[data-tema="escuro"] .rec .txt { color: var(--texto); opacity: .85; }
.rec .btn { margin-top: 12px; }

/* ---------------- login ---------------- */
.login { max-width: 720px; margin: 0 auto; padding: 56px 24px; }
.login h1 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.login p { color: var(--texto-2); margin: 0 0 28px; }
.opcoes { display: grid; gap: 8px; }
.opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 15px 18px; box-shadow: var(--sombra); width: 100%; text-align: left;
  transition: border-color 180ms, box-shadow 180ms;
}
.opcao:hover { border-color: var(--brand-50); box-shadow: var(--sombra-md); }
.opcao .nome { font-weight: 600; }
.opcao .det { font-size: 12px; color: var(--texto-2); }
.opcao.destaque { border-color: var(--brand-100); background: var(--brand-20); }
:root[data-tema="escuro"] .opcao.destaque { background: var(--superficie-2); border-color: var(--brand-50); }

/* ---------------- IA ---------------- */
.ia-carregando { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }
.ia-ponto { width: 6px; height: 6px; border-radius: 9999px; background: var(--brand-100);
            animation: pulsa 1.2s infinite ease-in-out; }
:root[data-tema="escuro"] .ia-ponto { background: var(--brand-50); }
.ia-ponto:nth-child(2) { animation-delay: .15s; }
.ia-ponto:nth-child(3) { animation-delay: .3s; }
@keyframes pulsa { 0%,100% { opacity:.25; transform: scale(.8);} 50% { opacity:1; transform: scale(1);} }
.selo-ia { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
           color: var(--texto-3); font-weight: 600; }

.rodape-nota { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--borda);
               font-size: 12px; color: var(--texto-3); line-height: 1.6; }

@media (max-width: 900px) {
  .duas-colunas, .hero { grid-template-columns: 1fr; }
  .pagina { padding: 20px 16px 56px; }
}
@media (max-width: 640px) {
  .nav-principal a { padding: 8px 9px; font-size: 13px; }
}

@media print {
  .topbar, .btn, .voltar { display: none !important; }
  body { background: #fff; color: #000; }
}