/* Site institucional do Emitta.
   Tokens copiados de app/web/static/estilo.css do portal (mesmos nomes e valores; guia em
   docs/prompts/01-upgrade-visual-portal.md). Mudou token lá, mude aqui na mesma mudança.
   Cor só por token: nenhum valor de cor fora dos dois blocos de tokens abaixo.
   Componentes (.botao, .cartao, .selo, .rotulo-caixa, .beneficios, .recolhivel, .pular) seguem
   as mesmas regras do portal; o resto é só layout do site.

   Índice
     1. Tokens (claro e escuro)
     2. Base
     3. Componentes do portal
     4. Layout do site: topo, seções, faixa escura, hero
     5. Seções: cartões, passos, código, FAQ, rodapé
     6. Telas largas
     7. Impressão */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fontes/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fontes/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fontes/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fontes/Inter-Bold.woff2") format("woff2"); }

/* ---------- 1. Tokens ---------- */
:root {
  /* paleta da marca (verde, amarelo e azul do logotipo NFS-e) */
  --base-950: #07170f;
  --base-900: #0a2016;
  --base-800: #134228;
  --base-700: #1a4a2e;
  --marca: #7cc487;
  --marca-forte: #6bb577;
  --azul: #313b8f;
  --azul-claro: #6c78d6;
  --amarelo: #e9c03a;
  --branco: #ffffff;

  /* papéis: área clara */
  --fundo: #f5f9f4;
  --superficie: #ffffff;
  --superficie-2: #edf4ec;
  --texto: #10231a;
  --sutil: #52665a;
  --borda: #d9e5d9;
  --borda-campo: #7b9182;
  --link: #2c6b3a;
  --foco: #2c6b3a;

  /* ação primária: verde da marca com texto escuro (o verde claro sobre branco não passa em AA) */
  --acao: var(--marca);
  --acao-hover: var(--marca-forte);
  --acao-texto: var(--base-950);

  /* área escura (no portal, barra lateral e destaque da tela de entrada) */
  --lateral: var(--base-950);
  --lateral-2: var(--base-900);
  --lateral-texto: #cbdacd;
  --lateral-sutil: #94a89a;
  --lateral-ativo: rgba(124, 196, 135, 0.14);
  --lateral-hover: rgba(255, 255, 255, 0.07);
  --lateral-linha: rgba(255, 255, 255, 0.1);
  --destaque-texto: #b8c9bb;

  /* estados: cor do texto + fundo (só nos selos) */
  --perigo: #a3262a;
  --perigo-texto: #ffffff;
  --erro: #a3262a;
  --erro-fundo: #fbeaea;
  --ok: #0e6a42;
  --ok-fundo: #e1f4ea;
  --aviso: #7a5600;
  --aviso-fundo: #fdf3d6;
  --info: #313b8f;
  --info-fundo: #eaecf8;
  --falha: #9a3b00;
  --falha-fundo: #fdebdc;
  --neutro: #4a5a50;
  --neutro-fundo: #e8ece8;

  /* escalas (grade de 4 px) */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.75rem;   --lh-xs: 1rem;
  --t-sm: 0.875rem;  --lh-sm: 1.25rem;
  --t-base: 1rem;    --lh-base: 1.5rem;
  --t-md: 1.125rem;  --lh-md: 1.75rem;
  --t-lg: 1.25rem;   --lh-lg: 1.75rem;
  --t-xl: 1.5rem;    --lh-xl: 2rem;
  --t-2xl: 2rem;     --lh-2xl: 2.5rem;
  --t-3xl: 2.5rem;
  --t-h1: 1.75rem;   --lh-h1: 2.25rem;
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --controle: 2.5rem;
  --raio-s: 8px;
  --raio-m: 12px;
  --raio-g: 16px;
  --sombra-1: 0 1px 2px rgba(7, 23, 15, 0.06), 0 1px 1px rgba(7, 23, 15, 0.04);
  --sombra-2: 0 10px 30px rgba(7, 23, 15, 0.14);
  --sobreposicao: rgba(7, 23, 15, 0.6);
  --realce-1: rgba(7, 23, 15, 0.14);
  --halo-marca: rgba(124, 196, 135, 0.25);
  --anel: 0 0 0 3px rgba(44, 107, 58, 0.28);
  --raio-pilula: 999px;
  --largura-util: 96rem;
  --largura-lateral: 16rem;

  /* só do site */
  --lh-3xl: 1.1;                 /* título do hero (no portal, 1.1 solto em .acesso-titulo) */
  --largura-site: 72rem;         /* largura do conteúdo das seções */
  --linha-faixa: transparent;    /* linha entre faixa escura e página; só aparece no escuro */
}

/* "screen": na impressão vale sempre o tema claro, como no portal */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --fundo: #07130c;
    --superficie: #0d2216;
    --superficie-2: #133021;
    --texto: #e6efe6;
    --sutil: #96ab9a;
    --borda: #1f3d2b;
    --borda-campo: #5f8468;
    --link: #7cc487;
    --foco: #7cc487;
    --lateral: #040f09;
    --lateral-2: #06150d;
    --perigo: #b42328;
    --erro: #f59a9d;
    --erro-fundo: #3a1d20;
    --ok: #7fdcab;
    --ok-fundo: #14331f;
    --aviso: #f1d174;
    --aviso-fundo: #392f14;
    --info: #aab4f2;
    --info-fundo: #1f2650;
    --falha: #f6b27a;
    --falha-fundo: #3a2412;
    --neutro: #aab8ae;
    --neutro-fundo: #1b2b22;
    --anel: 0 0 0 3px rgba(124, 196, 135, 0.35);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 10px 30px rgba(0, 0, 0, 0.5);
    --linha-faixa: var(--borda);   /* no escuro, a faixa escura quase some no fundo (1,03:1) */
  }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e8); }
body {
  margin: 0;
  font: 400 var(--t-base)/var(--lh-base) var(--fonte);
  font-feature-settings: "calt", "kern";
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-underline-offset: 0.18em; }
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--e5); }
h2 { font-size: var(--t-md); line-height: var(--lh-md); font-weight: 600; letter-spacing: -0.005em; margin: var(--e5) 0 var(--e2); }
h3 { font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600; margin: 0 0 var(--e1); }
p { margin: 0 0 var(--e4); }
code { font-size: 0.875em; background: var(--superficie-2); padding: 0.1em 0.35em; border-radius: 4px; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.18em; cursor: help; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.sutil { color: var(--sutil); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .botao, summary { transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; }
}

/* "Pular para o conteúdo": primeiro item do Tab, aparece só com foco */
.pular { position: absolute; left: var(--e3); top: -10rem; z-index: 100; padding: var(--e2) var(--e4); background: var(--acao); color: var(--acao-texto); border-radius: var(--raio-s); font-weight: 600; text-decoration: none; }
.pular:focus { top: var(--e3); }

/* ---------- 3. Componentes do portal ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--controle); padding: 0 var(--e4); font: inherit; font-weight: 600; line-height: var(--lh-base);
  color: var(--acao-texto); background: var(--acao); border: 1px solid transparent; border-radius: var(--raio-s);
  box-shadow: inset 0 -1px 0 var(--realce-1); cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--acao-hover); }
.botao:active { box-shadow: none; transform: translateY(1px); }
.botao.secundario { background: transparent; color: var(--link); border-color: var(--borda-campo); box-shadow: none; }
.botao.secundario:hover { background: var(--superficie-2); }
.botao.grande { min-height: 3rem; padding: 0 var(--e5); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e5); }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); box-shadow: var(--sombra-1); padding: var(--e5); }
.cartao p:last-child { margin-bottom: 0; }

.selo { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--e1); min-height: 1.5rem; padding: 0 var(--e3) 0 var(--e2); border-radius: var(--raio-pilula); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; background: var(--neutro-fundo); color: var(--neutro); }
.selo::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin: 0.25rem; border-radius: 50%; background: currentColor; }
.selo.autorizada { color: var(--ok); background: var(--ok-fundo); }
.selo.rejeitada { color: var(--erro); background: var(--erro-fundo); }
.selo.erro_comunicacao { color: var(--falha); background: var(--falha-fundo); }
.selo.pendente { color: var(--aviso); background: var(--aviso-fundo); }
.selo.cancelada { color: var(--neutro); background: var(--neutro-fundo); }
.selo.autorizada::before { content: "\2713"; content: "\2713" / ""; width: 1rem; height: 1rem; margin: 0; background: none; font-size: var(--t-xs); line-height: 1rem; text-align: center; }
.selo.rejeitada::before { content: "\2715"; content: "\2715" / ""; width: 1rem; height: 1rem; margin: 0; background: none; font-size: var(--t-xs); line-height: 1rem; text-align: center; }
.selo.erro_comunicacao::before { content: "!"; content: "!" / ""; width: 0.875rem; height: 0.875rem; margin: 0.0625rem; background: none; border: 1.5px solid currentColor; font-size: 0.625rem; line-height: 0.75rem; text-align: center; }
.selo.pendente::before { background: none; border: 2px solid currentColor; }
.selo.cancelada::before { width: 0.625rem; height: 0.625rem; margin: 0.1875rem; box-sizing: border-box; border: 1.5px solid currentColor; background: linear-gradient(135deg, transparent 44%, currentColor 44% 58%, transparent 58%); }
.selos { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none; }

.rotulo-caixa { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.rotulo-caixa::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.escuro .rotulo-caixa { color: var(--marca); }

.beneficios { display: grid; gap: var(--e3); margin: var(--e5) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--destaque-texto); }
.beneficios li { display: flex; gap: var(--e3); align-items: center; }
.beneficios li::before { content: "\2713"; content: "\2713" / ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--lateral-ativo); color: var(--marca); font-size: var(--t-xs); font-weight: 700; }

.recolhivel > summary { display: flex; align-items: center; gap: var(--e2); cursor: pointer; list-style: none; }
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary::before { content: "\25B8"; content: "\25B8" / ""; flex: none; color: var(--link); font-size: var(--t-sm); }
.recolhivel[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .recolhivel > summary::before { transition: transform 0.15s; } }

/* ---------- 4. Layout do site ---------- */
.marca { display: inline-flex; align-items: center; gap: var(--e3); color: var(--texto); text-decoration: none; }
.marca img { width: 2rem; height: 2rem; flex: none; }
.marca-produto { font-weight: 600; font-size: var(--t-md); line-height: var(--lh-md); letter-spacing: -0.01em; }

.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); max-width: var(--largura-site); margin: 0 auto; padding: var(--e3) var(--e4); }
.menu { flex: 1 0 100%; }
.menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); margin: 0 calc(-1 * var(--e3)); padding: 0; list-style: none; }
.menu .entrar { margin-left: auto; }
.menu a:not(.botao) { display: inline-flex; align-items: center; min-height: var(--controle); padding: 0 var(--e3); border-radius: var(--raio-s); color: var(--sutil); font-weight: 500; font-size: var(--t-sm); line-height: var(--lh-sm); text-decoration: none; }
.menu a:not(.botao):hover { background: var(--superficie-2); color: var(--texto); }

.secao { padding: var(--e7) var(--e4); }
.secao.alt { background: var(--superficie); }
.secao.realce { background: var(--superficie-2); }
.dentro { max-width: var(--largura-site); margin: 0 auto; }
.secao-cabeca { max-width: 44rem; margin-bottom: var(--e6); }
.secao h2 { margin: 0 0 var(--e3); font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 700; letter-spacing: -0.015em; }
.secao-cabeca p { margin: 0; color: var(--sutil); font-size: var(--t-md); line-height: var(--lh-md); }

/* faixa escura: hero, segurança e rodapé */
.escuro { --foco: var(--marca); background: var(--lateral-2); color: var(--lateral-texto); border-top: 1px solid var(--linha-faixa); border-bottom: 1px solid var(--linha-faixa); }
.escuro h2, .escuro h3 { color: var(--branco); }
.escuro .secao-cabeca p { color: var(--destaque-texto); }
.escuro a { color: var(--marca); }
.escuro .botao { color: var(--acao-texto); }
.escuro .botao.secundario { color: var(--branco); border-color: var(--lateral-sutil); }
.escuro .botao.secundario:hover { background: var(--lateral-hover); }

.heroi { position: relative; overflow: hidden; padding: var(--e7) var(--e4) var(--e8); background: var(--base-950) url("marca/fundo-acesso.svg") center / cover no-repeat; border-top: 0; }
.heroi-texto { max-width: 42rem; }
.heroi .selo { margin: 0 0 var(--e5); white-space: normal; padding-top: var(--e1); padding-bottom: var(--e1); }
.heroi h1 { margin: 0 0 var(--e4); font-size: clamp(var(--t-2xl), 6vw, var(--t-3xl)); line-height: var(--lh-3xl); font-weight: 700; letter-spacing: -0.025em; color: var(--branco); }
.heroi h1 span { color: var(--marca); }
.heroi .subtitulo { max-width: 36rem; margin: 0; font-size: var(--t-md); line-height: var(--lh-md); color: var(--destaque-texto); }

/* ---------- 5. Seções ---------- */
.grade { display: grid; gap: var(--e4); margin: 0; padding: 0; list-style: none; }
.grade > li { display: flex; flex-direction: column; }
.grade .cartao { height: 100%; }
.grade h3 { margin-top: var(--e3); }
.grade p { color: var(--sutil); margin: 0; }

.icone { align-self: flex-start; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--raio-s); background: var(--superficie-2); color: var(--link); }
.icone svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.escuro .icone { background: var(--lateral-ativo); color: var(--marca); }
.escuro .grade p { color: var(--lateral-texto); }
.escuro .item { padding: var(--e5); border: 1px solid var(--lateral-linha); border-radius: var(--raio-m); height: 100%; }

.passos { display: grid; gap: var(--e5); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: var(--controle) minmax(0, 1fr); gap: var(--e1) var(--e4); }
.passos li::before { content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: var(--controle); height: var(--controle); border-radius: 50%; background: var(--acao); color: var(--acao-texto); font-weight: 700; }
.passos h3 { margin: var(--e2) 0 0; }
.passos p { margin: 0; color: var(--sutil); }

.situacoes { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--borda); }
.situacoes p { margin: 0 0 var(--e3); color: var(--sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }

.api { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.lista-api { margin: 0 0 var(--e5); padding: 0; list-style: none; display: grid; gap: var(--e4); }
.lista-api li { padding-left: var(--e5); position: relative; }
.lista-api li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--acao); }
.lista-api p { margin: 0; color: var(--sutil); }
.codigo { margin: 0; min-width: 0; }
.codigo figcaption { margin-bottom: var(--e2); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sutil); }
.codigo pre { margin: 0 0 var(--e3); padding: var(--e4); overflow-x: auto; border-radius: var(--raio-m); background: var(--lateral); color: var(--lateral-texto); font-size: var(--t-sm); line-height: var(--lh-sm); border: 1px solid var(--linha-faixa); }
.codigo pre:focus-visible { outline-color: var(--marca); outline-offset: -3px; }
.codigo code { padding: 0; background: none; font-size: inherit; }
.codigo .k { color: var(--marca); }
.codigo .s { color: var(--amarelo); }

.faq { display: grid; gap: var(--e3); max-width: 48rem; }
.faq details { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-m); }
.faq summary { min-height: 3rem; padding: var(--e3) var(--e4); font-weight: 600; }
.faq summary:hover { color: var(--link); }
.faq details > div { padding: 0 var(--e4) var(--e4) calc(var(--e4) + var(--e5)); color: var(--sutil); }
.faq details > div p:last-child { margin-bottom: 0; }

.contato { display: grid; gap: var(--e5); align-items: center; }
.contato .acoes { margin-top: 0; }
.contato dl { margin: 0; display: grid; gap: var(--e1) var(--e4); grid-template-columns: auto minmax(0, 1fr); }
.contato dt { font-weight: 600; }
.contato dd { margin: 0; color: var(--sutil); }

.rodape-site { padding: var(--e6) var(--e4); background: var(--lateral); color: var(--lateral-sutil); font-size: var(--t-sm); line-height: var(--lh-sm); }
.rodape-site .marca { color: var(--branco); margin-bottom: var(--e4); }
.rodape-site p { margin: 0 0 var(--e2); }
.rodape-site nav ul { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e4) 0; padding: 0; list-style: none; }
.rodape-site nav a { display: inline-flex; align-items: center; min-height: var(--controle); color: var(--lateral-texto); }
.rodape-site nav a:hover { color: var(--branco); }

/* ---------- 6. Telas largas (mobile first: tudo acima vale para o celular) ---------- */
@media (max-width: 39.99rem) {
  .heroi { background-position: center top; background-size: auto 200%; }
}
@media (min-width: 40rem) {
  .grade.duas, .grade.tres, .grade.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6) var(--e5); }
  .contato { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 64rem) {
  .topo-dentro { flex-wrap: nowrap; }
  .menu { flex: 0 1 auto; }
  .menu ul { margin: 0; }
  .menu .entrar { margin-left: var(--e3); }
  .secao { padding: var(--e8) var(--e6); }
  .heroi { padding: var(--e8) var(--e6) 6rem; }
  .grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .api { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .rodape-site { padding: var(--e7) var(--e6); }
}

/* topo fixo só onde sobra altura: no celular e com zoom ele cobriria o item focado (WCAG 2.4.11) */
@media (min-width: 64rem) and (min-height: 32rem) {
  .topo { position: sticky; top: 0; z-index: 10; }
}

/* ---------- 7. Impressão (cores do tema claro: o bloco escuro é só "screen") ---------- */
@media print {
  .pular, .topo, .acoes, .heroi .selo { display: none !important; }
  .heroi, .escuro, .rodape-site { background: none; color: var(--texto); border: 0; }
  .heroi h1, .heroi .subtitulo, .escuro h2, .escuro h3, .escuro .grade p, .escuro .secao-cabeca p, .rodape-site .marca, .beneficios { color: var(--texto); }
  .escuro a, .rodape-site nav a { color: var(--link); }
  .secao, .heroi { padding: var(--e5) 0; }
  .cartao, .faq details, .passos li, .escuro .item { box-shadow: none; break-inside: avoid; }
  .codigo pre { background: var(--superficie-2); color: var(--texto); white-space: pre-wrap; }
  .selo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}