/* Estilo compartilhado do site da NodeIA.
   Estava embutido no index.html; virou arquivo quando surgiram as paginas de
   privacidade e termos, para os tres nao sairem do lugar entre si. */
:root{
  --fundo:#0b1216; --fundo-2:#101c22; --borda:#1e2f38;
  --texto:#e7eef2; --texto-2:#9fb2bc; --acento:#14b8a6; --acento-forte:#0d9488;
  --max:1080px; --raio:14px;
}
@media (prefers-color-scheme: light){
  :root{ --fundo:#f7fafb; --fundo-2:#fff; --borda:#dde7ec;
         --texto:#0f1c22; --texto-2:#546874; --acento:#0d9488; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}
.env{max-width:var(--max); margin:0 auto; padding:0 22px}

header{border-bottom:1px solid var(--borda); background:var(--fundo-2)}
.topo{display:flex; align-items:center; gap:12px; padding:18px 0}
.marca{display:flex; align-items:center; gap:11px; font-weight:700; font-size:1.22rem;
       letter-spacing:-.02em; color:var(--texto)}
.marca:hover{text-decoration:none}
.marca svg{width:30px; height:30px; flex:none}
.marca span i{color:var(--acento); font-style:normal}

.hero{padding:76px 0 60px}
.hero h1{margin:0 0 18px; font-size:clamp(1.9rem,5vw,3rem); line-height:1.15;
         letter-spacing:-.03em; font-weight:800; max-width:19ch}
.hero p{margin:0; font-size:clamp(1.02rem,2.2vw,1.2rem); color:var(--texto-2); max-width:56ch}
.acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:11px;
     font-weight:650; border:1px solid transparent; transition:transform .15s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-1{background:var(--acento-forte); color:#fff}
.btn-2{border-color:var(--borda); color:var(--texto)}
.btn svg{width:19px; height:19px; flex:none}

section{padding:56px 0; border-top:1px solid var(--borda)}
h2{margin:0 0 8px; font-size:1.42rem; letter-spacing:-.02em}
.sub{margin:0 0 32px; color:var(--texto-2)}

.grade{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio); padding:24px}
.card h3{margin:0 0 8px; font-size:1.05rem}
.card p{margin:0; color:var(--texto-2); font-size:.96rem}
.card .ico{width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
           justify-content:center; margin-bottom:14px;
           background:color-mix(in srgb, var(--acento) 16%, transparent); color:var(--acento)}
.card .ico svg{width:21px; height:21px}

dl{display:grid; gap:16px 28px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:0}
dt{color:var(--texto-2); font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px}
dd{margin:0; font-weight:600}

footer{border-top:1px solid var(--borda); padding:30px 0 44px; color:var(--texto-2); font-size:.9rem}
.rodape{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; align-items:center}
.rodape nav{display:flex; gap:18px; flex-wrap:wrap}

/* Paginas de texto corrido (privacidade, termos) */
.doc{padding:52px 0 64px; max-width:760px}
.doc h1{margin:0 0 6px; font-size:clamp(1.6rem,4vw,2.1rem); letter-spacing:-.025em}
.doc .data{margin:0 0 38px; color:var(--texto-2); font-size:.92rem}
.doc h2{margin:38px 0 10px; font-size:1.14rem}
.doc p, .doc li{color:var(--texto); font-size:1rem}
.doc ul{padding-left:22px}
.doc li{margin:7px 0}
.doc .nota{
  background:var(--fundo-2); border:1px solid var(--borda); border-left:3px solid var(--acento);
  border-radius:10px; padding:16px 20px; margin:24px 0;
}
.doc .nota p{margin:0; color:var(--texto-2); font-size:.95rem}
.tabela-wrap{overflow-x:auto; margin:18px 0}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:.95rem}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--borda); vertical-align:top}
th{color:var(--texto-2); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600}

.conectar{max-width:760px; padding-top:54px; padding-bottom:72px}
.conectar-cabecalho{margin-bottom:32px}
.conectar-cabecalho h1{margin:10px 0 14px; font-size:clamp(1.8rem,5vw,2.65rem); line-height:1.15; letter-spacing:-.03em}
.conectar-cabecalho p{margin:0; color:var(--texto-2); max-width:62ch}
.etiqueta{display:inline-flex; padding:5px 10px; border-radius:999px; background:color-mix(in srgb,var(--acento) 14%,transparent); color:var(--acento); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.conectar-card{margin-top:18px; padding:24px; border:1px solid var(--borda); border-radius:var(--raio); background:var(--fundo-2)}
.conectar-card h2{font-size:1.14rem}
.conectar-card p{margin:6px 0 18px; color:var(--texto-2)}
.conectar-card ol{margin:16px 0 20px; padding-left:24px}
.conectar-card li{margin:8px 0}
.conectar-card.sucesso{border-color:var(--acento)}
.oculto{display:none}
.campo-acao{display:flex; align-items:stretch; gap:10px; margin-top:7px}
.campo-acao input{min-width:0; flex:1; padding:12px 14px; border:1px solid var(--borda); border-radius:10px; background:var(--fundo); color:var(--texto); font:inherit}
.campo-acao input:focus{outline:2px solid var(--acento); outline-offset:1px}
.conectar-card label{display:block; color:var(--texto-2); font-size:.88rem}
.conectar-card button:disabled{opacity:.55; cursor:not-allowed; transform:none}
.aviso{margin:18px 0; padding:14px 16px; border-left:3px solid #d9a514; border-radius:8px; background:color-mix(in srgb,#d9a514 10%,transparent); color:var(--texto)}
.conectar-rodape{margin:24px 0 0; color:var(--texto-2); font-size:.85rem}
@media (max-width:560px){.campo-acao{align-items:stretch; flex-direction:column}.campo-acao .btn{justify-content:center}.conectar-card{padding:20px}}