/* =========================================================================
   Instituto Auravitta — folha de estilo do site

   O layout das páginas continua com os estilos no próprio elemento, como
   saiu do design. Aqui ficam: o que era o <style> do <head>, os estados
   :hover (que no original eram um atributo style-hover) e o acessório de
   acessibilidade.

   As cores da marca vêm de inc/config.php e são publicadas como variáveis
   CSS pelo inc/head.php: --gold, --gold-claro e --bg.
   ========================================================================= */

/* ---- o que vinha no <head> das páginas de origem ---- */
body { margin: 0; background: #000; }
    * , *::before, *::after { box-sizing: border-box; }
    a { color: #D9A93C; }
    a:hover { color: #F0D18A; }
    ::-webkit-scrollbar { height: 6px; width: 6px; }
    ::-webkit-scrollbar-track { background: #111; }
    ::-webkit-scrollbar-thumb { background: #6E4C12; border-radius: 10px; }

/* ---- acréscimos ---- */

/* link de pular navegação: não existia, e o cabeçalho é fixo */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold, #D9A93C);
  color: #0A0A0A;
  font: 600 14px/1.4 Poppins, sans-serif;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

/* foco visível — o desenho original não previa */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold, #D9A93C);
  outline-offset: 2px;
}

.link-menu:hover { color: var(--gold, #D9A93C) !important; }

/* a galeria da Estrutura rola na horizontal */
#gal-estrutura { scroll-behavior: smooth; }

img { max-width: 100%; }

/* =========================================================================
   Responsivo

   O material de origem não tinha nenhuma media query: o site era desenhado
   para uma tela de 1080px de altura e as medidas saíam em vh. Depois de
   converter tudo para px, dá para ajustar por largura.

   Como os estilos moram no atributo style de cada elemento, os ajustes aqui
   selecionam pelo próprio valor (por exemplo [style*="width: 600px"]) e usam
   !important. É feio, mas é preciso: são exatamente os blocos medidos como
   causadores de estouro em 375px.
   ========================================================================= */

/* ---- botão de menu: escondido quando os sete itens cabem ---- */
.cabecalho__botao {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  margin-left: auto;
  border: 1px solid rgba(217, 169, 60, .35);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.cabecalho__botao span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold, #D9A93C);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}
.cabecalho__botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecalho__botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cabecalho__botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .cabecalho { flex-wrap: wrap; gap: 12px !important; }
  .cabecalho__botao { display: flex; }

  /* a logo deixa de ser posicionada por cima e passa a ocupar o fluxo */
  .cabecalho__marca { position: static !important; }
  .cabecalho__marca img { width: 240px !important; }

  .cabecalho__nav {
    display: none !important;
    flex-basis: 100%;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 4px 0 12px;
    border-top: 1px solid rgba(217, 169, 60, .22);
  }
  .cabecalho__nav.aberto { display: flex !important; }
  .cabecalho__nav > ul {
    flex-direction: column;
    gap: 0 !important;
    width: 100%;
  }
  .cabecalho__nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    width: 100%;
    border-bottom: 1px solid rgba(217, 169, 60, .14);
  }
}

@media (max-width: 900px) {
  /* --- tipografia decorativa: os números e as palavras grandes --- */
  [style*="font-size: 180px"] { font-size: 56px !important; line-height: 1.05 !important; }
  [style*="font-size: 140px"] { font-size: 46px !important; line-height: 1.05 !important; }
  [style*="font-size: 120px"] { font-size: 40px !important; line-height: 1.05 !important; }
  [style*="font-size: 92.88px"] { font-size: 34px !important; line-height: 1.1 !important; }
  [style*="font-size: 80px"] { font-size: 32px !important; line-height: 1.1 !important; }
  [style*="font-size: 50px"] { font-size: 27px !important; line-height: 1.2 !important; }
  [style*="font-size: 40px"] { font-size: 24px !important; line-height: 1.25 !important; }
  [style*="font-size: 36px"] { font-size: 23px !important; line-height: 1.3 !important; }
  [style*="font-size: 35px"] { font-size: 22px !important; line-height: 1.3 !important; }
  [style*="font-size: 30px"] { font-size: 20px !important; line-height: 1.35 !important; }
  [style*="font-size: 24px"] { font-size: 19px !important; }

  /* --- blocos de largura fixa passam a caber na tela --- */
  [style*="width: 1280px"], [style*="width: 1200px"], [style*="width: 1000px"],
  [style*="width: 900px"],  [style*="width: 800px"],  [style*="width: 650px"],
  [style*="width: 620px"],  [style*="width: 600px"],  [style*="width: 590px"],
  [style*="width: 500px"],  [style*="width: 453.6px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="flex-shrink: 0"] { flex-shrink: 1 !important; }
  [style*="max-width: 800px"], [style*="max-width: 650px"] { max-width: 100% !important; }

  /* --- linhas lado a lado viram uma coluna --- */
  [style*="display: flex"][style*="height: 600px"],
  [style*="display: flex"][style*="height: 245px"] {
    flex-direction: column !important;
    height: auto !important;
  }

  /* --- grades de coluna automática: uma coluna só --- */
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fill"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* --- as palavras decorativas soltas param de empurrar a página --- */
  [style*="position: absolute"][style*="right: 50%"],
  [style*="position: absolute"][style*="right: 100px"] {
    right: auto !important;
    left: 16px !important;
    max-width: calc(100% - 32px);
  }

  /* --- respiro nas laterais --- */
  section { padding-left: 18px !important; padding-right: 18px !important; }

  /* o cabeçalho é fixo: o conteúdo começa abaixo dele */
  main { padding-top: 8px; }
}

@media (max-width: 560px) {
  .cabecalho__marca img { width: 200px !important; }
  [style*="font-size: 180px"] { font-size: 42px !important; }
  [style*="font-size: 140px"] { font-size: 36px !important; }
  [style*="font-size: 120px"] { font-size: 32px !important; }
  [style*="font-size: 92.88px"] { font-size: 28px !important; }
  [style*="font-size: 80px"] { font-size: 27px !important; }
}


/* ---- estados :hover, gerados a partir dos atributos style-hover ---- */
.hv-1:hover,.hv-1:focus-visible{color:var(--gold, #D9A93C) !important}
.hv-2:hover,.hv-2:focus-visible{background:var(--gold, #D9A93C) !important;color:#0A0A0A !important}
.hv-3:hover,.hv-3:focus-visible{background:#F0D18A !important}
.hv-4:hover,.hv-4:focus-visible{color:#F0D18A !important}
.hv-5:hover,.hv-5:focus-visible{background:#F0D18A !important;color:#0A0A0A !important}
