/* =====================================================
   Portal Interativo — tema "Anoitecer"
   Fonte única de verdade para cores, tipografia e peças
   compartilhadas entre todas as páginas públicas.
   ===================================================== */

:root{
  /* --- Fundo: ameixa quente, não preto-azulado --- */
  --ink:#150d12;
  --ground:#1e1219;
  --ground-2:#281822;
  --raised:#33202b;

  /* --- Acentos --- */
  --rose:#ff7a6b;         /* primário: ação, links, foco */
  --rose-deep:#d94f63;    /* fim do gradiente */
  --blush:#f9cdc3;        /* realce suave */
  --brass:#d9a34e;        /* idade, detalhes de maturidade */
  --live:#4ad38a;         /* presença online */

  /* --- Texto --- */
  --text:#f8eeec;
  --muted:#c6afb7;
  --faint:#8d7681;

  --line:rgba(255,255,255,.08);
  --line-warm:rgba(255,122,107,.22);

  --shadow:0 18px 45px rgba(10,4,8,.45);
  --shadow-lift:0 26px 60px rgba(10,4,8,.55);

  --radius:22px;
  --radius-sm:14px;
  --container:1180px;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/*
 * Cor de fundo no html.
 *
 * O gradiente do body usa background-attachment:fixed, ou seja, ele tem
 * o tamanho da janela, nao do documento. Sem uma cor solida por baixo,
 * qualquer area que o gradiente nao alcance mostra o fundo do navegador
 * — cinza no modo escuro, branco no claro. Era a faixa cinza no rodape.
 */
html{background:#120a0f}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(255,122,107,.12), transparent 62%),
    radial-gradient(700px 460px at 6% 4%, rgba(217,163,78,.07), transparent 60%),
    linear-gradient(180deg,#150d12 0%,#1a1017 46%,#120a0f 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* Terminais arredondados do Fraunces: o calor vem da própria letra. */
.display,h1,h2,.profile-name,.footer-brand,.brand-word{
  font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1;
  font-weight:500;
  letter-spacing:-.015em;
}

/* --- Foco visível: obrigatório, e no tom do tema --- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
  border-radius:6px;
}

/* =====================================================
   BARRAS DE ROLAGEM
   A barra padrão do sistema é grossa e destoa do tema.
   Aqui ela fica fina e discreta — some quando não é
   necessária, mas continua sinalizando que há mais coisa.
   ===================================================== */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
}

*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-track{background:transparent}

*::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:2px solid transparent;
  background-clip:content-box;
}

*::-webkit-scrollbar-thumb:hover{background:rgba(255,122,107,.45);background-clip:content-box}

*::-webkit-scrollbar-corner{background:transparent}

/* Painéis internos: a barra só aparece com o ponteiro por perto. */
.rolagem-discreta{scrollbar-color:transparent transparent}
.rolagem-discreta::-webkit-scrollbar-thumb{background:transparent}

.rolagem-discreta:hover,
.rolagem-discreta:focus-within{scrollbar-color:rgba(255,255,255,.16) transparent}

.rolagem-discreta:hover::-webkit-scrollbar-thumb,
.rolagem-discreta:focus-within::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  background-clip:content-box;
}

.rolagem-discreta:hover::-webkit-scrollbar-thumb:hover{
  background:rgba(255,122,107,.45);
  background-clip:content-box;
}

/* =====================================================
   Marca — o balão de conversa substitui a estrela
   ===================================================== */
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:20px;
}

.brand-mark{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:block;
}

.brand-mark svg{width:100%;height:100%;display:block}

/* =====================================================
   Cabeçalho
   ===================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(18,10,15,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  width:min(calc(100% - 32px),var(--container));
  margin:auto;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:15px;
  font-weight:500;
}

.nav a{color:var(--muted);transition:color .18s}
.nav a:hover,.nav a.active{color:var(--text)}

.nav a.active{
  position:relative;
}

.nav a.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-7px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--rose),var(--rose-deep));
}

.header-cta{
  padding:12px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#2a0f14;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  box-shadow:0 8px 22px rgba(217,79,99,.28);
  transition:transform .18s,box-shadow .18s;
}

.header-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(217,79,99,.38);
}

.menu-toggle{
  display:none;
  width:46px;height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--ground-2);
  color:var(--text);
  cursor:pointer;
  font-size:20px;
}

/* =====================================================
   Presença online
   ===================================================== */
.status,.online{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(14,7,11,.7);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:#eadfe2;
}

.status-dot,.dot{
  width:8px;height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(74,211,138,.5);
  animation:pulseLive 2.4s ease-out infinite;
}

@keyframes pulseLive{
  0%{box-shadow:0 0 0 0 rgba(74,211,138,.45)}
  70%{box-shadow:0 0 0 7px rgba(74,211,138,0)}
  100%{box-shadow:0 0 0 0 rgba(74,211,138,0)}
}

.status.offline,.online.offline{color:var(--faint)}

.status.offline .status-dot,.online.offline .dot{
  background:#6d5a63;
  animation:none;
  box-shadow:none;
}

/* =====================================================
   Botão principal
   ===================================================== */
.btn-talk{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  padding:15px 22px;
  border:0;
  border-radius:999px;
  color:#2a0f14;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  box-shadow:0 12px 30px rgba(217,79,99,.3);
  transition:transform .18s,box-shadow .18s,filter .18s;
}

.btn-talk:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 18px 38px rgba(217,79,99,.4);
}

.btn-talk .arrow{transition:transform .18s}
.btn-talk:hover .arrow{transform:translateX(3px)}

/* =====================================================
   Rodapé
   ===================================================== */
footer{
  border-top:1px solid var(--line);
  background:rgba(12,6,10,.6);
}

.footer-inner{
  width:min(calc(100% - 32px),var(--container));
  margin:auto;
  padding:46px 0 30px;
}

.footer-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  padding-bottom:30px;
}

.footer-brand{font-size:26px;margin-bottom:8px}
.footer-copyline{color:var(--faint);font-size:14px}

.footer-links{
  display:flex;
  justify-content:center;
  gap:24px;
  color:var(--muted);
  font-size:14px;
  flex-wrap:wrap;
}

.footer-links a:hover{color:var(--rose)}

.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  color:var(--faint);
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
  gap:8px 20px;
}

@media(max-width:760px){
  .header-inner{min-height:66px}
  .nav{
    display:none;
    position:absolute;
    left:16px;right:16px;
    top:74px;
    padding:14px;
    border-radius:20px;
    background:var(--ground-2);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 10px;font-size:16px}
  .nav a.active::after{display:none}
  .header-cta{display:none}
  .menu-toggle{display:block}
  .footer-top,.footer-bottom{flex-direction:column;align-items:center}
}

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

/* =====================================================
   ACESSIBILIDADE
   Peças para quem navega por teclado ou leitor de tela,
   sem alterar o visual para os demais visitantes.
   ===================================================== */

/* Visível só para leitores de tela: títulos e rótulos que
   fazem sentido ouvir, mas não precisam aparecer na tela. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* "Pular para o conteúdo": o primeiro Tab da página revela
   este atalho, que leva direto ao conteúdo, pulando o menu.
   Fica fora da tela até receber foco pelo teclado.
   (A animação é neutralizada pelo bloco prefers-reduced-motion acima.) */
.skip-link{
  position:fixed;
  top:-120px;left:16px;
  z-index:1100;
  padding:12px 20px;
  border-radius:0 0 14px 14px;
  background:var(--rose);
  color:#2a0f14;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(10,4,8,.5);
  transition:top .2s ease;
}

.skip-link:focus{top:0}

/* O alvo do atalho recebe foco via tabindex="-1"; como o
   contorno de foco só se aplica a a/button/input, o <main>
   não ganha borda visível ao ser focado. */