/* Página pública da Rede Neutra NBN (redeneutra.nbntelecom.com.br).
   Sem fonte, script ou imagem de terceiros: a CSP do nginx só libera 'self'.
   As cores saem do logo (tinta) e do portal (azul), para as duas faces
   parecerem a mesma casa. */

:root{
  --tinta:#1f2a44;
  --texto:#33405c;
  --suave:#5d6a85;
  --azul:#1f4e9c;
  --azul-forte:#163d7d;
  --azul-claro:#4da3ff;
  --fundo:#ffffff;
  --fundo-alt:#f4f7fc;
  --linha:#d4dae6;
  --raio:14px;
  --largura:1080px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
}

img,svg{max-width:100%;height:auto;display:block}

a{color:var(--azul)}
a:hover{color:var(--azul-forte)}
a:focus-visible,.botao:focus-visible{outline:3px solid var(--azul-claro);outline-offset:3px;border-radius:6px}

h1,h2,h3{color:var(--tinta);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.6vw,3.1rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em}
h3{font-size:1.125rem}
p{margin:0 0 1em}

.pular{
  position:absolute;left:-9999px;top:0;
  background:var(--tinta);color:#fff;padding:.6rem 1rem;z-index:10;
}
.pular:focus{left:16px;top:12px}

.miolo{max-width:var(--largura);margin:0 auto;padding:0 16px}

/* ---- topo ---- */
.topo{border-bottom:1px solid var(--linha);background:#fff}
.topo .miolo{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinta)}
.marca img{width:72px}
.marca span{font-weight:650;font-size:1.05rem;border-left:1px solid var(--linha);padding-left:14px}

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.75rem 1.25rem;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap;
  border:2px solid var(--azul);
}
.botao-cheio{background:var(--azul);color:#fff}
.botao-cheio:hover{background:var(--azul-forte);border-color:var(--azul-forte);color:#fff}
.botao-vazio{background:transparent;color:var(--azul)}
.botao-vazio:hover{background:var(--fundo-alt)}
.topo .botao{padding:.55rem 1.05rem;font-size:.95rem}

/* ---- abertura ---- */
.abertura{padding:64px 0 56px;background:linear-gradient(180deg,#fff 0%,var(--fundo-alt) 100%)}
.abertura .miolo{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.abertura .lide{font-size:1.2rem;color:var(--texto);max-width:34em}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sobretitulo{
  display:inline-block;margin-bottom:14px;
  font-size:.85rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--azul);
}

/* ---- seções ---- */
.secao{padding:72px 0}
.secao-alt{background:var(--fundo-alt)}
.secao .intro{max-width:40em;color:var(--suave);margin-bottom:36px}

.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:passo}
.passos li{
  counter-increment:passo;
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px 20px;
}
.passos li::before{
  content:counter(passo);
  display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:14px;
  border-radius:50%;background:var(--tinta);color:#fff;font-weight:700;
}
.passos p{color:var(--suave);font-size:.98rem;margin:0}

.recursos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px}
.recursos div{border-top:3px solid var(--azul-claro);padding-top:16px}
.recursos p{color:var(--suave);font-size:.98rem;margin:0}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.lista-limpa{list-style:none;margin:0;padding:0}
.lista-limpa li{padding:12px 0;border-bottom:1px solid var(--linha)}
.lista-limpa li:last-child{border-bottom:0}

/* ---- contato ---- */
.contato{background:var(--tinta);color:#dfe5f1}
.contato h2{color:#fff}
.contato .intro{color:#c3cce0}
.canais{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.canal{
  display:block;text-decoration:none;color:#fff;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--raio);padding:22px 20px;
}
.canal:hover{background:rgba(255,255,255,.07);color:#fff}
.canal small{display:block;color:#aab6cf;font-size:.85rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.canal strong{font-size:1.15rem;word-break:break-word}
.contato .endereco{margin-top:28px;color:#c3cce0;font-size:.95rem}

/* ---- rodapé ---- */
.rodape{border-top:1px solid var(--linha);padding:28px 0 36px;font-size:.9rem;color:var(--suave)}
.rodape .miolo{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.rodape p{margin:0}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* ---- texto corrido (privacidade, 404) ---- */
.texto{max-width:46em;padding:56px 16px 72px;margin:0 auto}
.texto h2{font-size:1.35rem;margin-top:2em}
.texto ul{padding-left:1.2em}
.texto li{margin-bottom:.4em}
.texto .data{color:var(--suave);font-size:.95rem}

@media (max-width:900px){
  .abertura .miolo,.dupla{grid-template-columns:1fr}
  .abertura{padding-top:44px}
  .passos{grid-template-columns:1fr 1fr}
  .recursos,.canais{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .marca img{width:58px}
  .marca span{display:none}
  .passos,.recursos,.canais{grid-template-columns:1fr}
  .secao{padding:56px 0}
  .acoes .botao{flex:1 1 100%}
}

@media (prefers-reduced-motion:no-preference){
  .botao,.canal{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
}