/* ==========================================================================
   RADAN — identidade do site público
   Usada por index.html, orcamento.html e painel-orcamentos.html.

   ESTES TOKENS NÃO FORAM INVENTADOS AQUI. São os mesmos de viewer.html,
   admin.html, display.html e cartaz.html — as telas que o operador e o
   público já usam. O site é a porta de entrada do MESMO produto, então
   ele usa a mesma paleta e a mesma tipografia, não uma identidade paralela.

   UM ACENTO SÓ: o verde #5CCA7F. Âmbar e vermelho existem para dizer
   ESTADO (termo de glossário, atenção, erro), nunca para enfeitar.
   Não há gradiente em lugar nenhum da página: a única coisa colorida
   é o próprio logo, e é justamente por isso que ele aparece.
   ========================================================================== */

:root{
  /* superfícies — preto neutro, sem viés de cor */
  --bg:        #0A0A0A;
  --bg-alta:   #131313;
  --bg-topo:   #1B1B1B;
  --linha:     #242424;
  --linha-viva:#3A3A3A;

  /* texto */
  --branco:    #F2F3F5;
  --muted:     #8A8A8A;   /* mesmo cinza do sistema */
  /* Terceiro nível, para rótulo de dado e legenda de campo. Começou em #666666
     e foi clareado: aquele valor dava 3,24:1 sobre --bg-alta, abaixo do mínimo
     de 4,5:1 da WCAG AA — e carrega justamente o texto MENOR da página.
     Este dá 4,88:1 sobre --bg e 4,58:1 sobre --bg-alta. */
  --muted-fraco:#7E7E7E;

  /* estado — o único acento é o verde */
  --verde:      #5CCA7F;
  --verde-brilho:#C2FFCF;
  --ambar:      #F2A93B;   /* termo travado pelo glossário */
  --vermelho:   #E5484D;   /* erro */

  /* tipografia — mesma do sistema */
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --corpo:   'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --dado:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* ritmo */
  --lg:    clamp(1rem, 4vw, 2rem);
  --secao: clamp(4.5rem, 10vw, 7.5rem);
  --raio:    12px;
  --raio-p:   8px;
  --raio-g:  16px;
}

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

/* O atributo hidden tem que ganhar de qualquer display definido por classe.
   A regra [hidden]{display:none} vem da folha do NAVEGADOR, e folha de autor
   sempre ganha da do navegador — não importa a especificidade. Resultado: toda
   classe daqui que define display anulava o hidden em silêncio.
   Foi assim que o cartão de login apareceu por cima do painel de orçamentos
   já logado: .login define display:grid, e o hidden do JavaScript não tinha
   força pra apagá-lo. Também afetava o botão Sair (.btn é inline-flex) e o
   resumo do formulário (.resumo-linhas é grid). */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; scroll-padding-top:5rem }

body{
  margin:0;
  background:var(--bg);
  color:var(--branco);
  font-family:var(--corpo);
  font-size:clamp(1rem,.95rem + .3vw,1.08rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  margin:0;
  font-family:var(--display);
  font-weight:700;           /* Space Grotesk vai até 700 */
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.2rem,6vw,4rem) }
h2{ font-size:clamp(1.75rem,4vw,2.7rem) }
h3{ font-size:clamp(1.05rem,1.7vw,1.25rem); font-weight:600; letter-spacing:-.01em }
p{ margin:0; text-wrap:pretty }
a{ color:inherit }

.env{ width:min(1120px, 100% - 2*var(--lg)); margin-inline:auto }

/* Rótulo em mono com entrelinha larga — é o mesmo tratamento do letreiro do
   logo (R A D A N) e das etiquetas do painel. */
.rotulo{
  font-family:var(--dado);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- MARCA ----------------------------------------------------------------
   O quadradinho aceso é o mesmo indicador do display.html (border-radius 1px,
   não é círculo) — pequeno detalhe que faz o site parecer a mesma coisa que
   as telas do sistema. */
.led{
  display:inline-block; width:6px; height:6px; border-radius:1px;
  background:var(--verde); flex:none;
  animation:respira 2.6s ease-in-out infinite;
}
@keyframes respira{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* --- BOTÕES ---------------------------------------------------------------
   Cantos suaves, não cápsula. Botão redondo demais é a assinatura de página
   genérica; o painel do sistema também usa canto discreto. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.4rem;
  border-radius:var(--raio-p);
  font-family:var(--corpo); font-weight:600; font-size:.94rem; line-height:1;
  text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, opacity .18s;
}
.btn[disabled]{ opacity:.45; cursor:not-allowed }

.btn-verde{ background:var(--verde); color:#08170D; font-weight:600 }
.btn-verde:hover{ background:var(--verde-brilho) }

.btn-claro{ background:var(--branco); color:var(--bg) }
.btn-claro:hover{ background:#fff }

.btn-vazio{ border-color:var(--linha-viva); color:var(--branco); background:transparent }
.btn-vazio:hover{ border-color:var(--muted); background:#ffffff0d }

.btn-fantasma{ color:var(--muted); background:transparent; padding-inline:.85rem }
.btn-fantasma:hover{ color:var(--branco) }

/* --- CABEÇALHO ------------------------------------------------------------ */
.topo{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px);
  background:#0a0a0ad9;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.topo[data-rolado="1"]{ border-bottom-color:var(--linha) }
.topo-barra{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0 }

.marca{ display:flex; align-items:center; gap:.55rem; text-decoration:none; flex:none }
.marca img{ height:28px; width:auto; display:block }
.marca span{
  font-family:var(--display); font-weight:700;
  font-size:.98rem; letter-spacing:.24em;   /* espaçamento do letreiro do logo */
  padding-left:.15em;
}

.topo-nav{ display:none; gap:1.8rem; margin-left:auto }
.topo-nav a{ font-size:.9rem; color:var(--muted); text-decoration:none; transition:color .2s }
.topo-nav a:hover{ color:var(--branco) }
.topo-acoes{ display:flex; align-items:center; gap:.5rem }

.so-largo{ display:none }
@media (min-width:520px){ .so-largo{ display:inline } }
@media (max-width:519px){ .topo-acoes .btn{ padding:.68rem .95rem; font-size:.86rem } }

.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--raio-p);
  background:transparent; border:1px solid var(--linha); color:var(--branco);
  cursor:pointer;
}
.menu-btn svg{ width:18px; height:18px }
.menu-painel{ display:none; flex-direction:column; padding:.4rem 0 1rem; border-top:1px solid var(--linha) }
.menu-painel[data-aberto="1"]{ display:flex }
.menu-painel a{
  padding:.72rem .2rem; text-decoration:none; color:var(--branco);
  border-bottom:1px solid #ffffff0f;
}
@media (min-width:900px){
  .topo-nav{ display:flex }
  .menu-btn{ display:none }
  .menu-painel{ display:none !important }
}

/* --- SEÇÕES ---------------------------------------------------------------
   Uma regra só governa o espaçamento vertical. Modificador mexe em fundo e
   borda, nunca em padding — assim não há duas regras disputando o mesmo valor. */
.secao{ padding-block:var(--secao) }
.secao-alta{ background:var(--bg-alta); border-block:1px solid var(--linha) }

.secao-cab{ max-width:56ch; margin-bottom:clamp(2.2rem,4.5vw,3.2rem) }
.secao-cab .rotulo{ display:block; margin-bottom:.9rem }
.secao-cab p{ margin-top:1.05rem; color:var(--muted) }

.cartao{
  border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--bg-alta);
  padding:clamp(1.3rem,3vw,2.1rem);
}
.secao-alta .cartao{ background:var(--bg-topo) }

/* --- REVELAÇÃO POR SCROLL -------------------------------------------------
   O estado escondido só existe enquanto a animação está de pé. Quando o script
   desiste dela (cão de guarda em index.html), sem-anima apaga opacidade,
   deslocamento E transição — marcar só o atributo não bastava, porque a
   transição podia travar no quadro inicial e o texto sumia do mesmo jeito. */
.revela{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1) }
.revela[data-visivel="1"]{ opacity:1; transform:none }
html.sem-anima .revela{ opacity:1 !important; transform:none !important; transition:none !important }

/* --- FORMULÁRIO ----------------------------------------------------------- */
.campo{ display:flex; flex-direction:column; gap:.4rem }
.campo > label,
.campo-titulo{ font-size:.82rem; font-weight:600; color:var(--branco) }
.campo .ajuda{ font-size:.78rem; color:var(--muted); line-height:1.45 }

input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;
  padding:.72rem .85rem;
  border-radius:var(--raio-p);
  border:1px solid var(--linha);
  background:var(--bg);
  color:var(--branco);
  font-family:var(--corpo); font-size:.94rem; line-height:1.4;
  transition:border-color .18s;
}
.secao-alta input,.secao-alta select,.secao-alta textarea{ background:var(--bg-alta) }
input::placeholder,textarea::placeholder{ color:var(--muted-fraco) }
input:hover,select:hover,textarea:hover{ border-color:var(--linha-viva) }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--verde) }
textarea{ resize:vertical; min-height:6.5rem }
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%, calc(100% - 13px) 51%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--vermelho) }
.erro-campo{ font-size:.78rem; color:var(--vermelho) }

.ficha{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.46rem .8rem; border-radius:var(--raio-p);
  border:1px solid var(--linha); background:var(--bg);
  font-size:.86rem; color:var(--muted); cursor:pointer;
  transition:border-color .18s, color .18s, background .18s;
  user-select:none;
}
.ficha:hover{ border-color:var(--linha-viva); color:var(--branco) }
.ficha input{ position:absolute; opacity:0; width:0; height:0 }
.ficha:has(input:checked){
  color:var(--verde); border-color:var(--verde);
  background:color-mix(in srgb, var(--verde) 12%, transparent);
}
.ficha:has(input:focus-visible){ outline:2px solid var(--verde); outline-offset:3px }
.ficha .cod{ font-family:var(--dado); font-size:.7rem; letter-spacing:.06em; opacity:.7 }

.marcar{ display:flex; gap:.6rem; align-items:flex-start; font-size:.89rem; color:var(--muted); cursor:pointer }
.marcar input{ margin-top:.3em; accent-color:var(--verde); width:1rem; height:1rem; flex:none }

/* --- RODAPÉ --------------------------------------------------------------- */
.rodape{ border-top:1px solid var(--linha); padding-block:3rem 2.2rem; color:var(--muted); font-size:.87rem }
.rodape-grade{ display:grid; gap:2rem; grid-template-columns:1fr }
@media (min-width:760px){ .rodape-grade{ grid-template-columns:1.4fr 1fr 1fr } }
.rodape h4{
  margin:0 0 .85rem; font-family:var(--dado); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted-fraco);
}
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.rodape a{ text-decoration:none; color:var(--muted); transition:color .2s }
.rodape a:hover{ color:var(--branco) }
.rodape-fim{
  margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--linha);
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between;
  font-family:var(--dado); font-size:.7rem; color:var(--muted-fraco);
}

:focus-visible{ outline:2px solid var(--verde); outline-offset:3px; border-radius:4px }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto }
  .revela{ opacity:1; transform:none }
}