/* Mapa Ancap — estilo compartilhado */

:root{
  --fundo:      #07171B;
  --amarelo:    #E0C626;
  --branco:     #F2F5F4;
  --texto:      #C6CDCF;
  --cinza:      #AEB6B8;
  --cinza-esc:  #737D80;
  --creme:      #E2D6A0;
  --linha:      #16292E;
}

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

html,body{ height:100%; }

body{
  margin:0;
  background:var(--fundo);
  color:var(--branco);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

a{ color:inherit; }

.container{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Topo ---------- */

.topo{ padding-top:22px; }

.topo-grade{
  display:grid;
  grid-template-columns:42% 1fr;
  align-items:center;
  gap:16px;
}

.logo img{
  display:block;
  width:216px;
  max-width:100%;
  height:auto;
}

.menu{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:22px;
  font-weight:400;
}

.menu a{
  text-decoration:none;
  color:var(--branco);
  white-space:nowrap;
  transition:color .15s ease;
}

.menu a:hover,
.menu a:focus-visible{ color:var(--amarelo); }

.menu a.ativo{ color:var(--amarelo); }

/* ---------- Capa (página inicial) ---------- */

.principal{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  padding:130px 0 90px;
}

.titulo{
  margin:0 0 44px;
  color:var(--amarelo);
  font-size:44px;
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.005em;
  max-width:12ch;
}

.botao{
  display:inline-flex;
  align-items:center;
  gap:11px;
  background:var(--amarelo);
  color:#111;
  text-decoration:none;
  font-size:17px;
  font-weight:400;
  padding:13px 30px;
  border-radius:8px;
  transition:filter .15s ease;
}

.botao:hover,
.botao:focus-visible{ filter:brightness(1.08); }

.botao svg{ display:block; }

.visual{ text-align:center; }

.visual img{
  display:block;
  width:292px;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

.legenda{
  margin:44px 0 0;
  font-size:15px;
  font-weight:700;
  color:var(--cinza);
}

.legenda a{ color:var(--amarelo); text-decoration:none; }
.legenda a:hover, .legenda a:focus-visible{ text-decoration:underline; }

/* ---------- Páginas de conteúdo ---------- */

.pagina{
  flex:1 0 auto;
  padding:76px 0 96px;
}

.pagina-texto{ max-width:70ch; }

.titulo-pagina{
  margin:0 0 18px;
  color:var(--amarelo);
  font-size:40px;
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.005em;
}

.abertura{
  margin:0 0 10px;
  font-size:19px;
  line-height:1.6;
  color:var(--cinza);
  max-width:62ch;
}

.atualizado{
  margin:0 0 46px;
  font-size:14px;
  color:var(--cinza-esc);
}

.pagina-texto h2{
  margin:44px 0 14px;
  font-size:23px;
  font-weight:600;
  color:var(--branco);
}

.pagina-texto h3{
  margin:30px 0 10px;
  font-size:18px;
  font-weight:600;
  color:var(--branco);
}

.pagina-texto p,
.pagina-texto li{
  color:var(--texto);
  font-size:16.5px;
  line-height:1.68;
}

.pagina-texto p{ margin:0 0 16px; }

.pagina-texto ul,
.pagina-texto ol{ margin:0 0 16px; padding-left:22px; }

.pagina-texto li{ margin-bottom:9px; }

.pagina-texto strong{ color:var(--branco); font-weight:600; }

.pagina-texto a{ color:var(--amarelo); text-decoration:none; }
.pagina-texto a:hover, .pagina-texto a:focus-visible{ text-decoration:underline; }

.pagina-texto hr{
  border:0;
  border-top:1px solid var(--linha);
  margin:44px 0;
}

/* Perguntas frequentes */

.perguntas{ margin-top:8px; max-width:70ch; }

.perguntas details{
  border-top:1px solid var(--linha);
  padding:4px 0;
}

.perguntas details:last-of-type{ border-bottom:1px solid var(--linha); }

.perguntas summary{
  cursor:pointer;
  list-style:none;
  padding:18px 34px 18px 0;
  position:relative;
  font-size:18px;
  font-weight:600;
  color:var(--branco);
  transition:color .15s ease;
}

.perguntas summary::-webkit-details-marker{ display:none; }

.perguntas summary:hover{ color:var(--amarelo); }

.perguntas summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:16px;
  font-size:22px;
  font-weight:400;
  color:var(--amarelo);
  line-height:1;
}

.perguntas details[open] summary::after{ content:"−"; }

.perguntas .resposta{ padding:0 34px 20px 0; }

.perguntas .resposta p,
.perguntas .resposta li{ color:var(--texto); font-size:16.5px; line-height:1.68; }
.perguntas .resposta p{ margin:0 0 14px; }
.perguntas .resposta p:last-child{ margin-bottom:0; }
.perguntas .resposta ul{ margin:0 0 14px; padding-left:22px; }
.perguntas .resposta a{ color:var(--amarelo); text-decoration:none; }
.perguntas .resposta a:hover{ text-decoration:underline; }

/* Blocos de destaque e contato */

.cartoes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  margin:26px 0 34px;
  max-width:70ch;
}

.cartao{
  border:1px solid var(--linha);
  border-radius:8px;
  padding:22px 22px 24px;
}

.cartao h3{ margin:0 0 8px; font-size:17px; font-weight:600; color:var(--amarelo); }
.cartao p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--texto); }
.cartao a{ color:var(--amarelo); text-decoration:none; }
.cartao a:hover{ text-decoration:underline; }

.destaque{
  border-left:3px solid var(--amarelo);
  background:rgba(224,198,38,.05);
  border-radius:0 8px 8px 0;
  padding:18px 22px;
  margin:26px 0 30px;
  max-width:70ch;
}

.destaque p{ margin:0; color:var(--texto); }

.acoes{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:30px 0 0; }

.secundario{
  text-decoration:none;
  color:var(--branco);
  font-size:16px;
  border-bottom:1px solid var(--cinza-esc);
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}

.secundario:hover,
.secundario:focus-visible{ color:var(--amarelo); border-bottom-color:var(--amarelo); }

/* ---------- Rodapé ---------- */

.rodape{
  flex-shrink:0;
  padding:40px 0 56px;
}

.rodape-grade{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

.copyright{ margin:0; font-size:15px; color:var(--cinza-esc); }

.rodape-links{ display:flex; gap:60px; flex-wrap:wrap; }
.rodape-links ul{ margin:0; padding:0; list-style:none; }
.rodape-links li{ margin-bottom:6px; }

.rodape-links a{
  font-size:15px;
  color:var(--creme);
  text-decoration:none;
}

.rodape-links a:hover,
.rodape-links a:focus-visible{ text-decoration:underline; }

/* ---------- Acessibilidade / responsivo ---------- */

a:focus-visible,
summary:focus-visible{
  outline:2px solid var(--amarelo);
  outline-offset:3px;
}

@media (max-width: 900px){
  .topo-grade{ grid-template-columns:1fr; justify-items:center; gap:22px; text-align:center; }
  .menu{ justify-content:center; gap:26px; font-size:19px; flex-wrap:wrap; }

  .principal{ grid-template-columns:1fr; gap:52px; padding:60px 0; text-align:center; }
  .titulo{ font-size:34px; max-width:none; margin-bottom:32px; }

  .pagina{ padding:48px 0 64px; }
  .titulo-pagina{ font-size:31px; }
  .abertura{ font-size:17.5px; }

  .rodape-grade{ justify-content:center; text-align:center; }
  .rodape-links{ justify-content:center; gap:44px; }
}

@media (max-width: 460px){
  .titulo{ font-size:29px; }
  .titulo-pagina{ font-size:27px; }
  .menu{ gap:18px; font-size:17px; }
  .rodape-links{ gap:30px; }
  .perguntas summary{ font-size:17px; }
}