/*
  Site institucional do NuvDocs: só o que é próprio do site.
  Tokens, base, topo, botões e avisos vêm de _content/nuvdocs.visual/fluxo.css (template Fluxo).
  Regras: usável a partir de 360 px de largura, área de toque de pelo menos 44 px e foco sempre visível.
*/

:root { --largura-do-site: 72rem; --largura-do-texto: 44rem; }

body { overflow-wrap: anywhere; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }

/* Atalho para o conteúdo */
.pular {
  position: absolute;
  left: var(--espaco-2);
  top: -4rem;
  z-index: 10;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie);
  border-radius: var(--raio-do-campo);
}
.pular:focus { top: var(--espaco-2); }

/*
  Topo: a marca fica em duas cores, sem espaço entre as partes. Abaixo de 760 px, a marca e os botões ficam na primeira
  linha e o menu fica numa faixa só, com rolagem lateral.
*/
.topo { padding-inline: max(var(--espaco-5), calc((100% - var(--largura-do-site)) / 2 + var(--espaco-5))); }
.topo .marca { gap: 0; }
.topo nav { flex: 1 1 auto; }
.botao[aria-current="page"] { border-color: var(--marca); color: var(--link); }

@media (max-width: 760px) {
  .topo { padding: var(--espaco-2) var(--espaco-4); gap: var(--espaco-2) var(--espaco-3); }
  .topo nav { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--espaco-4)); padding: 0 var(--espaco-4); overflow-x: auto; scrollbar-width: none; }
  .topo nav::-webkit-scrollbar { display: none; }
  .topo .menu { flex-wrap: nowrap; }
  .topo .menu a { white-space: nowrap; padding: 0 var(--espaco-3); }
  .topo .acao-do-topo .botao { min-height: var(--altura-minima-clicavel); padding: 0 var(--espaco-4); }
}

/* Conteúdo: cada seção da página é um cartão */
main {
  width: 100%;
  max-width: var(--largura-do-site);
  margin: 0 auto;
  padding: var(--espaco-6) var(--espaco-5);
  min-width: 0;
}
main section, .resultado, .incidente {
  margin: 0 0 var(--espaco-4);
  padding: var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  box-shadow: var(--sombra-do-cartao);
}
main section > :last-child, .resultado > :last-child { margin-bottom: 0; }
main.contratar, main.contato, main.documento-legal, main.desenvolvedores, main.situacao-dos-servicos { max-width: 52rem; }
main ul, main ol { padding-left: var(--espaco-5); }
main li { margin: var(--espaco-1) 0; }
main h2 { margin-bottom: var(--espaco-4); }

/* Grades de cartões: três colunas no desktop, uma no celular */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--espaco-4);
  margin: 0 0 var(--espaco-4);
  padding: 0;
  list-style: none;
}
main .grade > li {
  margin: 0;
  padding: var(--espaco-5);
  background: var(--fundo);
  border-radius: var(--raio-do-campo);
}
.grade h3 { margin-bottom: var(--espaco-2); color: var(--link); }
.grade p { margin: 0; color: var(--suave); }

/* Ícones: SVG no próprio HTML, na cor da marca, dentro de um círculo claro */
.icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio-do-campo);
  background: var(--marca-clara);
  color: var(--marca);
}
.icone svg { width: 60%; height: 60%; }
.icone-grande { width: 4.5rem; height: 4.5rem; border-radius: var(--raio-do-cartao); }
.grade-com-icones .icone { margin-bottom: var(--espaco-3); }
main .grade-com-icones > li { background: var(--superficie); border: 1px solid var(--borda); }
.cabecalho-com-icone { display: flex; align-items: center; gap: var(--espaco-3); margin: 0 0 var(--espaco-3); }
.cabecalho-com-icone h2 { margin: 0; }
.resumo { color: var(--suave); font-size: 1.05rem; }
.como-cobramos { margin-bottom: var(--espaco-6); }
.como-cobramos h2 { margin-bottom: var(--espaco-2); font-size: 18px; color: var(--link); }
.vantagens .grade { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

/* Início: chamada com o desenho ao lado no desktop e embaixo no celular */
.inicio .destaque {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--espaco-6);
  padding: clamp(var(--espaco-6), 5vw, 4rem) clamp(var(--espaco-5), 5vw, 4rem);
  background: var(--marca-clara);
  border-color: var(--marca-clara);
}
.inicio .destaque h1 { margin: 0 0 var(--espaco-4); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.inicio .destaque p { font-size: 1.15rem; }
.inicio .destaque .acoes { margin-top: var(--espaco-5); }
.inicio .destaque .destaque-nota { display: flex; align-items: center; gap: var(--espaco-2); margin: var(--espaco-4) 0 0; color: var(--suave); font-size: var(--tamanho-do-corpo-menor); }
.destaque-nota .icone { width: 1.5rem; height: 1.5rem; background: none; }
.destaque-nota .icone svg { width: 100%; height: 100%; }
.ilustracao { width: 100%; max-width: 22rem; height: auto; justify-self: center; }
.explicacao { display: flex; gap: var(--espaco-5); align-items: flex-start; }
.explicacao p { max-width: var(--largura-do-texto); }

/* Perguntas frequentes: cada pergunta abre e fecha */
.perguntas details { border-bottom: 1px solid var(--borda); }
.perguntas details:last-of-type { border-bottom: 0; }
.perguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  min-height: var(--altura-do-controle);
  padding: var(--espaco-2) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; color: var(--marca); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.perguntas details[open] summary::after { content: "\2212"; }
.perguntas details p { max-width: var(--largura-do-texto); color: var(--suave); }

/* Chamada final */
.chamada { text-align: center; background: var(--marca); border-color: var(--marca); }
main .chamada h2, main .chamada p { color: var(--texto-sobre-a-marca); }
.chamada .acoes { justify-content: center; }
.chamada .botao.principal { background: var(--superficie); border-color: var(--superficie); color: var(--link); }
.chamada .botao.principal:hover { background: var(--marca-clara); color: var(--link-ao-passar); }

.passos .grade { counter-reset: passo; }
main .passos .grade > li { counter-increment: passo; color: var(--suave); }
.passos .grade > li::before {
  content: counter(passo);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--espaco-3);
  border-radius: 50%;
  background: var(--marca);
  color: var(--texto-sobre-a-marca);
  font-weight: 800;
}
.passos .grade strong { display: block; color: var(--texto); }

/* Recursos: as seções em duas colunas no desktop */
.topo-da-pagina, .precos-topo { text-align: center; margin: 0 auto var(--espaco-6); max-width: var(--largura-do-texto); }
.topo-da-pagina p, .precos-topo p { color: var(--suave); font-size: 1.1rem; margin: 0; }
.grade-de-secoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: var(--espaco-4); margin: 0 0 var(--espaco-4); }
main .grade-de-secoes > section { margin: 0; }
.chamada-final { justify-content: center; }

@media (max-width: 620px) {
  main { padding: var(--espaco-5) var(--espaco-4); }
  main section { padding: var(--espaco-5) var(--espaco-4); }
  .inicio .destaque .acoes .botao { flex: 1 1 100%; }
  .inicio .destaque { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .inicio .destaque .destaque-nota { display: block; }
  .destaque-nota .icone { vertical-align: middle; }
  .ilustracao { max-width: 16rem; }
  .explicacao { flex-direction: column; }
}

/* Mensagens */
.aviso, .tudo-bem {
  margin: var(--espaco-3) 0;
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid;
  border-radius: var(--raio-do-campo);
}
.aviso { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao-escuro); }
.tudo-bem { background: var(--marca-clara); border-color: var(--marca); color: var(--link-ao-passar); font-weight: 700; }
.tudo-bem p { margin: 0; }

/* Formulário de contratação */
.campo { display: flex; flex-direction: column; gap: var(--espaco-1); margin: 0 0 var(--espaco-4); }
.campo label { font-weight: 600; }
.campo.caixa { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--espaco-3); }
.campo.caixa label { flex: 1 1 14rem; min-height: var(--altura-minima-clicavel); }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  width: 100%;
  min-height: var(--altura-minima-clicavel);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1.5px solid var(--borda-do-campo);
  border-radius: var(--raio-do-campo);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}
input:focus { border-color: var(--marca); }
input[aria-invalid="true"] { border-color: var(--atencao-texto); }
input[type="checkbox"] { width: 1.4rem; height: 1.4rem; min-height: 1.4rem; margin: var(--espaco-3) 0 0; accent-color: var(--marca); }
.erro-do-campo { flex-basis: 100%; margin: 0; color: var(--atencao-texto); font-weight: 600; }
.ajuda { color: var(--suave); font-size: 0.9rem; }

/*
  Preços: quatro cartões lado a lado (Gratuito, Essencial, Volume e Personalizado). Abaixo de 1000 px, dois por linha;
  abaixo de 620 px, um por linha. Os cartões da mesma linha têm a mesma altura; a nota e o botão ficam no rodapé do cartão.
*/
.planos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espaco-5);
  align-items: stretch;
  margin: 0 0 var(--espaco-5);
}
.plano {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  box-shadow: var(--sombra-do-cartao);
  text-align: center;
}
.plano-topo { margin: 0 var(--espaco-5); padding: var(--espaco-5) 0; border-bottom: 1px solid var(--borda); min-height: 9.5rem; }
.plano-nome { margin: 0; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; }
.plano-preco {
  margin: var(--espaco-2) 0 0;
  font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.plano-periodo { margin: var(--espaco-1) 0 0; color: var(--suave); font-size: var(--tamanho-do-corpo-menor); }
.plano-inclui {
  display: block;
  margin: var(--espaco-5) 0 var(--espaco-3);
  color: var(--suave);
  font-size: var(--tamanho-do-rotulo);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plano-itens { list-style: none; margin: 0 var(--espaco-5); padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
main .plano-itens li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.75rem;
  color: var(--texto);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
main .plano-itens li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--marca);
  font-weight: 800;
}
main .plano-itens li.plano-base { color: var(--link); }
main .plano-resultado li { padding: 0; text-align: center; color: var(--suave); }
main .plano-resultado li::before { content: none; }
.plano-nota { margin: auto var(--espaco-5) var(--espaco-4); padding-top: var(--espaco-5); color: var(--suave); font-size: 0.9rem; }
.plano-acao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-do-controle);
  margin: 0 var(--espaco-5) var(--espaco-5);
  border-radius: var(--raio-da-pilula);
  background: var(--marca);
  color: var(--texto-sobre-a-marca);
  font-weight: 700;
  text-decoration: none;
}
.plano-acao:hover { background: var(--link-ao-passar); color: var(--texto-sobre-a-marca); }

/* Cartão personalizado: destacado, com o campo e o controle deslizante */
.plano-personalizado { border: 2px solid var(--marca); background: linear-gradient(180deg, var(--marca-clara) 0, var(--superficie) 14rem); }
.plano-personalizado .plano-periodo strong { color: var(--texto); }
.plano-personalizado[aria-busy="true"] .plano-preco { opacity: 0.55; }
.calculadora { display: flex; flex-direction: column; align-items: stretch; gap: var(--espaco-2); margin: 0 var(--espaco-5) var(--espaco-4); }
.calculadora .plano-inclui { margin-bottom: var(--espaco-1); }
.calculadora input[type="number"] { text-align: center; font-weight: 700; font-size: 1.1rem; }
.plano-personalizado > .aviso { margin: 0 var(--espaco-5) var(--espaco-4); text-align: left; }
.calculadora .deslizante { width: 100%; }
.escala { display: flex; justify-content: space-between; color: var(--suave); font-size: var(--tamanho-do-rotulo); }
details.composicao { margin: var(--espaco-3) var(--espaco-5) 0; text-align: left; }
details.composicao summary, .todas-as-faixas summary {
  display: flex;
  align-items: center;
  min-height: var(--altura-minima-clicavel);
  color: var(--link);
  font-weight: 700;
  cursor: pointer;
}
details.composicao table { font-size: 0.85rem; margin: var(--espaco-1) 0 0; }
details.composicao th, details.composicao td { padding: var(--espaco-2) var(--espaco-1); }
details.composicao td:last-child, details.composicao th:last-child { text-align: right; white-space: nowrap; }
.todas-as-faixas {
  margin: 0 0 var(--espaco-5);
  padding: var(--espaco-2) var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
}
.todas-as-faixas[open] { padding-bottom: var(--espaco-5); }

@media (max-width: 1000px) {
  .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .planos { grid-template-columns: minmax(0, 1fr); }
}

/* Tabelas */
table { border-collapse: collapse; width: 100%; margin: var(--espaco-4) 0; }
th, td { padding: var(--espaco-3); border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
th { color: var(--suave); font-size: 0.875rem; font-weight: 600; }
caption { text-align: left; font-weight: 700; padding-bottom: var(--espaco-2); }

/* Situação dos serviços */
.incidente { margin: var(--espaco-4) 0; border-left: 6px solid var(--borda-do-campo); }
.incidente[data-impacto="indisponivel"] { border-left-color: var(--atencao-texto); background: var(--atencao-fundo); }
.incidente[data-impacto="parcial"], .incidente[data-impacto="lento"] { border-left-color: var(--atencao-borda); background: var(--atencao-fundo); }
.datas { color: var(--suave); font-size: 0.9rem; }
.componentes { list-style: none; margin: var(--espaco-2) 0 0; padding: 0; }
.componente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1) var(--espaco-4);
  margin: var(--espaco-2) 0;
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--borda);
  border-left: 6px solid var(--borda-do-campo);
  border-radius: var(--raio-do-campo);
  background: var(--superficie);
}
.componente .nome { flex: 1 1 12rem; }
.componente .codigo, .componente .detalhe { color: var(--suave); font-size: 0.9rem; }
.componente .estado { padding: 2px var(--espaco-3); border-radius: var(--raio-da-pilula); background: var(--neutra-fundo); color: var(--neutra-texto); }
.componente[data-estado="no_ar"] { border-left-color: var(--marca); }
.componente[data-estado="no_ar"] .estado { background: var(--marca-clara); color: var(--link); }
.componente[data-estado="lento"] { border-left-color: var(--atencao-borda); }
.componente[data-estado="lento"] .estado { background: var(--atencao-fundo); color: var(--atencao-texto); }
.componente[data-estado="indisponivel"] { border-left-color: var(--atencao-texto); }
.componente[data-estado="indisponivel"] .estado { background: var(--atencao-fundo); color: var(--atencao-texto); }

/* Rodapé */
.rodape {
  max-width: var(--largura-do-site);
  margin: 0 auto;
  padding: var(--espaco-5);
  border-top: 1px solid var(--borda);
  color: var(--suave);
  font-size: 0.9rem;
}
.rodape nav { display: flex; flex-wrap: wrap; gap: 0 var(--espaco-4); }
.rodape nav a { display: inline-flex; align-items: center; min-height: var(--altura-minima-clicavel); }
.rodape .marca-nuvdocs { font-size: 18px; }

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