/* ══════════════════════════════════════════════════════════════
   THEME.CSS — fonte única de cor e tipografia do site
   Base: assessment.html (cores) + diagnostico-maturidade.html (cabeçalho/rodapé)
   Editar SÓ este arquivo muda cor/fonte em toda página que o carregar.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* fundo */
  --dark:#12122A;
  --dark-footer:#0b0b1a;

  /* texto */
  --white:#F0EDE6;
  --muted:#A0A0B0;
  --muted2:#8a8ab5;
  --muted3:#7a7aa8;

  /* marca */
  --gold:#D4AF5A;

  /* cores de dimensão (5 dimensões do assessment) */
  --color-red:#C0392B;
  --color-blue:#2471A3;
  --color-green:#1E8449;
  --color-purple:#6C3483;
  --color-orange:#B7950B;

  /* níveis de resultado (assessment) */
  --level-baixo:#E74C3C;
  --level-medio:#E67E22;
  --level-alto:#27AE60;

  /* fontes */
  --font-body:'Trebuchet MS', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title:Georgia, serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--dark);font-family:var(--font-body);color:var(--white);overflow-x:hidden;font-size:15px !important;line-height:1.75 !important}
a{text-decoration:none;transition:color 0.3s ease,opacity 0.3s ease}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

h1,h2,h3{font-family:var(--font-title);font-weight:bold;line-height:1.2}
h1{font-size:28.8px !important;line-height:1.25 !important;letter-spacing:-0.5px;margin-bottom:24px !important;color:var(--white) !important;text-align:left !important;border-left:3px solid var(--gold);padding-left:20px}
h2{font-size:clamp(1.35rem,3vw,1.85rem) !important;line-height:1.3 !important;margin-bottom:28px;color:var(--white)}
h2 em{color:var(--gold);font-style:normal}
h3{font-size:clamp(1.08rem,2vw,1.25rem) !important;line-height:1.35 !important;font-weight:bold;color:var(--white)}
p{font-size:15px !important;line-height:1.6 !important;color:var(--white) !important;margin-bottom:20px !important;text-align:left !important}
li{font-size:0.88rem !important;line-height:1.65 !important;color:var(--muted)}
.gold{color:var(--gold)}

/* ── LAYOUT ── */
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.wrap-sm{max-width:800px;margin:0 auto;padding:0 32px}
.sec-label{font-size:0.68rem;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:16px;display:block}

/* ── EYEBROW — rótulo dourado com travessão antes, usado em heros e aberturas de seção ── */
.eyebrow{font-size:0.68rem;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:'';display:inline-block;width:32px;height:1px;background:var(--gold)}

/* ══════════════════════════════════════════════════════════════
   CABEÇALHO — estrutura de diagnostico-maturidade.html e artigos.html
   ══════════════════════════════════════════════════════════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(18,18,42,0.98);backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,175,90,0.15);height:60px;display:flex;align-items:center}
.hdr-inner{max-width:1120px;width:100%;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.hdr-logo{font-family:var(--font-title);font-size:1.8rem;font-weight:bold;color:var(--gold);text-decoration:none}
.hdr-nav{display:flex;gap:40px}
.hdr-nav a{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:1px;color:var(--white);text-transform:uppercase;text-underline-offset:3px;padding:5px 0;opacity:0.8;transition:opacity 0.3s,color 0.3s}
.hdr-nav a:hover{color:var(--gold);text-decoration:underline;opacity:1}
.hdr-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.main-content{padding-top:60px !important}

.hdr-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:6px;z-index:1100}
.hdr-burger span{display:block;width:24px;height:2px;background:var(--gold);transition:transform 0.3s ease,opacity 0.3s ease}
.hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hdr-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.hdr-burger:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.hdr-mobile-nav{position:fixed;top:60px;left:0;right:0;bottom:0;background:var(--dark);z-index:999;display:flex;flex-direction:column;padding:32px;gap:4px;transform:translateX(100%);transition:transform 0.35s ease;overflow-y:auto}
.hdr-mobile-nav.is-open{transform:translateX(0)}
.hdr-mobile-nav a{font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--white);padding:18px 8px;border-bottom:1px solid rgba(212,175,90,0.12);letter-spacing:0.5px;text-transform:uppercase;opacity:0.9;transition:opacity 0.3s,color 0.3s}
.hdr-mobile-nav a:hover,.hdr-mobile-nav a:focus-visible{color:var(--gold)}
.hdr-mobile-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.menu-open{overflow:hidden}

@media(max-width:768px){
  .hdr-nav{display:none}
  .hdr-burger{display:flex}
}

/* ══════════════════════════════════════════════════════════════
   PROTEÇÃO DE RODAPÉ E DIAGNÓSTICO — sobrescreve alinhamento genérico
   ══════════════════════════════════════════════════════════════ */
footer,footer p,footer a{text-align:center !important;border-left:none !important;padding-left:0 !important}

/* ══════════════════════════════════════════════════════════════
   DIAGNÓSTICO — Simetria Central (funil de decisão, não editorial)
   ══════════════════════════════════════════════════════════════ */
.main-content h1,.main-content h2,.main-content p{text-align:center !important;border-left:none !important;padding-left:0 !important;margin-left:auto !important;margin-right:auto !important}
.main-content p{max-width:700px}
.main-content h1{font-size:28.8px !important;margin-bottom:24px !important}
.main-content h2{margin-top:48px;margin-bottom:24px}

.diagnostico-wrap,.diagnostico-form,.diagnostico-header{text-align:center !important}
.diagnostico-wrap h1{text-align:center !important;border-left:none !important;padding-left:0 !important}
.diagnostico-wrap p,.diagnostico-form p{text-align:center !important;border-left:none !important;padding-left:0 !important}

/* ══════════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   FAQ — accordion nativo, reutilizado nas páginas com Perguntas Frequentes
   ══════════════════════════════════════════════════════════════ */
.faq-section{padding:80px 0}
.faq-item{border-bottom:1px solid rgba(212,175,90,0.15)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{cursor:pointer;padding:22px 40px 22px 4px;font-family:var(--font-title);font-size:1.05rem;color:var(--white);list-style:none;position:relative;transition:color 0.25s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:4px;top:20px;font-size:1.6rem;font-weight:300;color:var(--gold);transition:transform 0.25s ease;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--gold)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.faq-item .faq-answer{padding:0 4px 24px;margin:0;color:rgba(240,237,230,0.8);line-height:1.8;font-size:0.98rem}

footer{background:var(--dark);padding:40px 28px;text-align:center;border-top:1px solid rgba(255,255,255,0.05)}
.footer-nav{display:flex;gap:32px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.footer-nav a{font-size:0.75rem;color:#B8B8CC;text-transform:uppercase;letter-spacing:1.5px;text-underline-offset:3px}
.footer-nav a:hover{color:var(--gold);text-decoration:underline}
.footer-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.footer-copy{font-size:0.75rem;color:#C0C0D0;margin-top:8px}
.footer-privacidade{color:#B0B0C8;text-decoration:underline;text-underline-offset:3px}
.footer-privacidade:hover{color:var(--gold)}