/* ===================================================
   Estilo do site - Jornada nas Estrelas (fã-site)
   Regras fixas do usuário:
   - Nunca fundo escuro
   - Nunca negrito
   - Nunca sublinhado
   - Fontes grandes (baixa visão)
   - Compatível com Windows 7 / navegadores comuns
   =================================================== */

:root{
  --azul-frota:      #14406b;   /* azul "Frota Estelar", usado só em textos/bordas */
  --azul-claro:      #eaf2fb;   /* fundo claro com leve tom azul */
  --dourado:         #b8860b;   /* dourado, para destaques e links */
  --vermelho-cmd:    #8c2f2f;   /* vermelho comando, só para acentos pequenos */
  --fundo:           #ffffff;   /* fundo geral, sempre claro */
  --fundo-lateral:   #f4f7fa;   /* fundo da barra lateral, claro */
  --texto:           #1a1a1a;   /* texto quase preto sobre fundo claro */
  --borda:           #c7d3e0;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Verdana, Arial, "Segoe UI", sans-serif;
  font-size: 20px;          /* base grande */
  line-height: 1.6;
}

a{
  color: var(--azul-frota);
  text-decoration: none;     /* nunca sublinhado */
  border-bottom: 3px solid transparent;
  padding-bottom: 1px;
}
a:hover, a:focus{
  color: var(--dourado);
  border-bottom: 3px solid var(--dourado); /* destaque sem sublinhar */
}

/* ---------- Barra superior ---------- */
.topo{
  background: var(--azul-claro);
  border-bottom: 4px solid var(--dourado);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.topo .marca{
  display: flex;
  align-items: center;
  gap: 12px;
}
.topo .logo-icone{
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}
.topo .logo-icone svg{
  width: 100%;
  height: 100%;
  display: block;
}
.topo .logo{
  font-size: 28px;
  color: var(--azul-frota);
  letter-spacing: 1px;
}
.topo .busca input{
  font-size: 18px;
  padding: 8px;
  border: 2px solid var(--borda);
  background: #ffffff;
  color: var(--texto);
}
.faixa-anuncio-topo{
  background: #fdf6e3;
  border-bottom: 1px solid var(--borda);
  text-align: center;
  padding: 6px;
  font-size: 15px;
  color: #555;
}

/* ---------- Menu principal (abaixo da barra superior) ---------- */
.menu-principal{
  background: #ffffff;
  border-bottom: 3px solid var(--borda);
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.menu-principal ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.menu-principal ul li a{
  display: inline-block;
  padding: 6px 12px;
  font-size: 16px;
  color: var(--azul-frota);
  border-bottom: 3px solid transparent;
}
.menu-principal ul li a:hover,
.menu-principal ul li a:focus{
  color: var(--dourado);
  border-bottom: 3px solid var(--dourado);
  background: var(--azul-claro);
}
.contato-rapido{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
.contato-rapido a,
.contato-rapido button{
  font-size: 15px;
  color: var(--azul-frota);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 2px;
  cursor: pointer;
  font-family: inherit;
}
.contato-rapido a:hover,
.contato-rapido button:hover{
  color: var(--dourado);
  border-bottom: 2px solid var(--dourado);
}
@media (max-width: 800px){
  .menu-principal{ flex-direction: column; align-items: flex-start; }
}

/* ---------- Layout geral: lateral + conteúdo ---------- */
.envelope{
  display: flex;
  align-items: flex-start;
}

.lateral{
  width: 260px;
  flex-shrink: 0;
  background: var(--fundo-lateral);
  border-right: 3px solid var(--borda);
  padding: 18px 0;
  min-height: 80vh;
}
.lateral .versao{
  font-size: 12px;
  color: #8a97a6;
  padding: 0 18px 12px 18px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 8px;
}
.lateral h2{
  font-size: 16px;
  color: var(--vermelho-cmd);
  margin: 16px 18px 6px 18px;
}
.lateral ul{
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}
.lateral li a{
  display: block;
  padding: 6px 18px;
  font-size: 15px;
  color: var(--texto);
}
.lateral li a:hover{
  background: #ffffff;
  color: var(--dourado);
}
.lateral .sub{
  padding-left: 30px;
  font-size: 13px;
}

.conteudo{
  flex: 1;
  padding: 30px 40px;
  max-width: 900px;
}

.conteudo aside.anuncio{
  border: 1px dashed var(--borda);
  background: #fdf6e3;
  text-align: center;
  padding: 18px;
  margin: 24px 0;
  font-size: 15px;
  color: #555;
}

/* ---------- Rodapé ---------- */
.rodape{
  background: var(--azul-claro);
  border-top: 3px solid var(--borda);
  padding: 16px 24px;
  font-size: 15px;
  color: #444;
  text-align: center;
}

@media (max-width: 800px){
  .envelope{ flex-direction: column; }
  .lateral{ width: 100%; border-right: none; border-bottom: 3px solid var(--borda); min-height: auto; }
  .conteudo{ padding: 20px; }
}