/* =========================================================
   Diogo Esteves Pereira — Design System
   Tema "Grafite & Ouro": fundo escuro grafite, texto off-white,
   dourado do logo como acento nobre, azul-gelo em detalhes.
   Sofisticado, editorial, tecnológico.
   ========================================================= */

:root {
  /* Cores — base escura */
  --fundo: #0E1116;            /* grafite quase-preto (fundo principal) */
  --fundo-2: #12161C;          /* seções alternadas */
  --superficie: #171B22;       /* cards */
  --superficie-2: #1E232C;     /* elevado / hover */
  --borda: #2A303B;            /* bordas */
  --borda-suave: #22272F;

  --texto: #E8EAED;            /* off-white */
  --texto-forte: #F4F5F7;      /* títulos */
  --texto-suave: #9AA2AE;      /* apoio, legendas */

  --dourado: #C6A05A;          /* acento nobre (do logo) */
  --dourado-suave: #D8BB7E;
  --azul-gelo: #6E9FC9;        /* detalhe frio / tecnológico */
  --branco: #ffffff;

  /* Tipografia */
  --fonte-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Formas */
  --raio: 12px;
  --raio-sm: 6px;
  --sombra: 0 10px 34px rgba(0, 0, 0, 0.4);
  --sombra-forte: 0 18px 50px rgba(0, 0, 0, 0.55);
  --largura: 1180px;
  --transicao: 200ms ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--dourado-suave); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--dourado); }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--texto-forte);
  line-height: 1.14;
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: .3px;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 500; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--alt { background: var(--fundo-2); }
.section--azul {
  background: linear-gradient(150deg, #0B1420 0%, #10161F 55%, #0D1219 100%);
  border-top: 1px solid var(--borda-suave);
  border-bottom: 1px solid var(--borda-suave);
}
.section__head { max-width: 780px; margin-bottom: 50px; }
/* Home: cabeçalhos de seção centralizados */
.pagina-home .section__head { text-align: center; margin-left: auto; margin-right: auto; }
.pagina-home .section > .container > .btn-row { justify-content: center; }
.section__head p { color: var(--texto-suave); font-size: 1.12rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: 16px;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 28px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--dourado);
  background: var(--dourado);
  color: #14110A;
  cursor: pointer;
  transition: all var(--transicao);
  letter-spacing: .2px;
}
.btn:hover { background: var(--dourado-suave); border-color: var(--dourado-suave); color: #14110A; }
.btn--ghost { background: transparent; color: var(--texto); border-color: var(--borda); }
.btn--ghost:hover { background: transparent; border-color: var(--dourado); color: var(--dourado); }
/* usados sobre seções escuras — mantêm coerência no tema dark */
.btn--sobre-azul { background: var(--dourado); border-color: var(--dourado); color: #14110A; }
.btn--sobre-azul:hover { background: var(--dourado-suave); border-color: var(--dourado-suave); }
.btn--outline-branco { background: transparent; border-color: rgba(255,255,255,.28); color: var(--texto); }
.btn--outline-branco:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.link-seta { font-weight: 600; font-size: .95rem; color: var(--dourado-suave); }
.link-seta::after { content: " \2192"; transition: margin var(--transicao); }
.link-seta:hover { color: var(--dourado); }
.link-seta:hover::after { margin-left: 4px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,17,22,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda-suave);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav__brand { display: flex; align-items: center; gap: 11px; font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 600; color: var(--texto-forte); white-space: nowrap; }
.nav__brand span { color: var(--dourado); }
.nav__brand-icon { height: 40px; width: auto; display: block; }
@media (max-width: 420px) { .nav__brand { font-size: 1.05rem; } .nav__brand-icon { height: 34px; } }
.nav__menu { display: flex; flex: 1; align-items: center; justify-content: center; gap: 24px; margin: 0 0 0 40px; list-style: none; padding: 0; }
.nav__menu a { font-size: .9rem; font-weight: 500; letter-spacing: .3px; color: var(--texto-suave); white-space: nowrap; }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: var(--texto-forte); }
.nav__menu a[aria-current="page"] { border-bottom: 2px solid var(--dourado); padding-bottom: 4px; }
.nav__toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--texto); cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-color: #0B0E13;
  color: var(--texto);
  padding: 116px 0 96px;
  border-bottom: 1px solid var(--borda-suave);
  overflow: hidden;
}
/* Camada da FOTO — faz o zoom lento (Ken Burns) */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/hero.jpg') center right / cover no-repeat;
  transform: scale(1.05);
  transform-origin: 70% 50%;
  animation: heroZoom 24s ease-in-out infinite alternate;
}
/* Camada do degradê + brilhos — fica fixa por cima da foto */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(12,15,20,.97) 0%, rgba(12,15,20,.86) 42%, rgba(12,15,20,.55) 72%, rgba(12,15,20,.30) 100%),
    radial-gradient(900px 420px at 80% -10%, rgba(110,159,201,.12), transparent 60%),
    radial-gradient(700px 400px at 6% 6%, rgba(198,160,90,.10), transparent 55%);
}
.hero > .container { position: relative; z-index: 2; }

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.17); }
}
/* Zoom forçado para todos os visitantes (a pedido) — roda mesmo com
   "reduzir movimento" ligado no sistema. */
.hero h1 { color: var(--texto-forte); max-width: 17ch; }
.hero__lead { font-size: 1.2rem; max-width: 62ch; color: var(--texto-suave); }
.hero .btn-row { margin-top: 32px; }
.hero__assinatura { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--dourado-suave); }
/* Hero centralizado */
.hero--centro > .container { text-align: center; }
.hero--centro h1, .hero--centro .hero__lead { margin-left: auto; margin-right: auto; }
.hero--centro .btn-row { justify-content: center; }

/* ---------- Carrossel de destaques no hero ---------- */
.hero-carrossel { margin: 40px 0 44px; text-align: left; }
.hc-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.hc-cabecalho .eyebrow { margin-bottom: 0; }
.hc-nav { display: flex; gap: 10px; }
.hc-seta {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--borda); background: rgba(23,27,34,.6);
  color: var(--texto); font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transicao); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hc-seta:hover { border-color: var(--dourado); color: var(--dourado); }
.hc-seta:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

/* pista deslizante */
.hc-track {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 8px; margin: 0 -2px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.hc-track::-webkit-scrollbar { display: none; }

.hc-item {
  flex: 0 0 clamp(178px, 72vw, 222px);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: #141922;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.hc-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); border-color: rgba(198,160,90,.5); }
.hc-item:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

/* card de livro — capa preenche o cartão */
.hc-livro img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-livro--contain img { object-fit: contain; background: #0b1a38; padding: 14px; }
.hc-livro .hc-cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 32px 16px 14px;
  background: linear-gradient(to top, rgba(8,10,14,.94), rgba(8,10,14,.5) 55%, transparent);
  color: var(--dourado-suave); font-weight: 600; font-size: .86rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--transicao), transform var(--transicao);
}
.hc-item:hover .hc-cta, .hc-item:focus-visible .hc-cta { opacity: 1; transform: none; }

/* card de artigo — pôster editorial */
.hc-artigo { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 18px; background: linear-gradient(155deg, #0B1420, #12161F 60%, #0D1219); }
.hc-regua { display: block; width: 36px; height: 3px; background: var(--dourado); border-radius: 2px; margin-bottom: 16px; }
.hc-artigo .hc-eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dourado); }
.hc-artigo .hc-titulo { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.15rem; line-height: 1.22; color: var(--texto-forte); margin-top: 10px; }
.hc-artigo .hc-data { display: block; font-size: .74rem; color: var(--texto-suave); margin-top: 14px; }
.hc-artigo .hc-cta { display: block; color: var(--dourado-suave); font-weight: 600; font-size: .86rem; margin-top: 8px; }

/* indicadores (bolinhas) */
.hc-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.hc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: all var(--transicao); }
.hc-dot:hover { background: rgba(255,255,255,.45); }
.hc-dot.ativo { width: 22px; border-radius: 100px; background: var(--dourado); }

@media (max-width: 720px) { .hero-carrossel { margin-top: 40px; } }

/* ---------- Grids e Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 30px;
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); border-color: rgba(198,160,90,.45); }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--texto-suave); font-size: .97rem; }
.card__tag { display: inline-block; font-size: .70rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dourado); margin-bottom: 12px; }
.card__meta { font-size: .82rem; color: var(--texto-suave); margin-bottom: 10px; }
/* Valores de contato (telefone, e-mail) — fonte limpa e profissional */
.contato-valor { font-family: var(--fonte-corpo); font-size: 1.2rem; font-weight: 600; letter-spacing: .2px; color: var(--texto-forte); margin: 0 0 .5em; }

/* Marcos (números) */
.marco { text-align: left; }
.marco__num { font-family: var(--fonte-titulo); font-size: 2.7rem; color: var(--dourado); line-height: 1; margin-bottom: 10px; }

/* Livro card */
.livro-card { display: flex; flex-direction: column; }
.livro-card__capa { aspect-ratio: 3/4; background: linear-gradient(160deg,#141922,#1B212B); border: 1px solid var(--borda); border-radius: var(--raio-sm); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--texto-suave); font-family: var(--fonte-titulo); font-size: 1.05rem; margin-bottom: 18px; }
/* Quando a capa é uma imagem real do livro */
img.livro-card__capa { object-fit: cover; padding: 0; background: #ffffff; }
.livro-card h3 { font-size: 1.15rem; }

/* Lista de links / artigos */
.lista-artigos { list-style: none; padding: 0; margin: 0; }
.lista-artigos li { border-bottom: 1px solid var(--borda); padding: 22px 0; }
.lista-artigos li:last-child { border-bottom: 0; }
.lista-artigos .veiculo { font-size: .78rem; color: var(--dourado); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.lista-artigos h3 { font-size: 1.15rem; margin: 6px 0; }
.lista-artigos h3 a { color: var(--texto); }
.lista-artigos h3 a:hover { color: var(--dourado); }

/* Vídeos */
.video-card { display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao); }
.video-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); border-color: rgba(198,160,90,.45); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transicao); }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(198,160,90,.94); color: #14110A; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; padding-left: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.video-card h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.15rem; line-height: 1.35; margin: 0; padding: 16px 18px 20px; color: var(--texto); }

/* Faixa de identificação */
.faixa { background: #0A0D11; color: var(--dourado-suave); text-align: center; padding: 18px 0; font-size: .9rem; letter-spacing: 2.5px; text-transform: uppercase; }

/* ---------- Formulário ---------- */
.form-grid { display: grid; gap: 18px; max-width: 720px; }
.form-grid label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: 6px; color: var(--texto); }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 12px 14px; font-family: var(--fonte-corpo); font-size: 1rem;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto);
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--texto-suave); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid var(--dourado); border-color: var(--dourado); }
.form-grid option { background: var(--superficie); color: var(--texto); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: #0A0D11; color: var(--texto-suave); padding: 66px 0 30px; border-top: 1px solid var(--borda-suave); }
.site-footer h4 { color: var(--texto-forte); font-size: 1.1rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: var(--texto-suave); font-size: .92rem; }
.footer-grid a:hover { color: var(--dourado-suave); }
.footer__assinatura { font-family: var(--fonte-titulo); font-size: 1.35rem; color: var(--texto-forte); margin-bottom: 6px; }
.footer__cargo { font-size: .82rem; color: var(--dourado-suave); letter-spacing: 1px; }
.footer__base { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; font-size: .82rem; color: var(--texto-suave); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer__aviso { font-size: .76rem; line-height: 1.55; color: var(--texto-suave); opacity: .78; max-width: 960px; margin: 0 0 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- Página interna: cabeçalho ---------- */
.page-head {
  background:
    radial-gradient(800px 380px at 82% -20%, rgba(110,159,201,.10), transparent 60%),
    linear-gradient(160deg, #0B0E13, #12161D);
  color: var(--texto);
  padding: 80px 0 68px;
  border-bottom: 1px solid var(--borda-suave);
}
.page-head h1 { color: var(--texto-forte); }
.page-head p { max-width: 62ch; color: var(--texto-suave); font-size: 1.1rem; }
.breadcrumb { font-size: .82rem; color: var(--dourado-suave); margin-bottom: 14px; }
.breadcrumb a { color: var(--dourado-suave); }

.prose { max-width: 760px; }
.prose p { color: var(--texto); }
.prose h2 { margin-top: 1.6em; }

/* Aviso / disclaimer */
.aviso { background: var(--superficie); border-left: 3px solid var(--dourado); padding: 18px 22px; border-radius: var(--raio-sm); font-size: .92rem; color: var(--texto-suave); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Nav colapsa para o menu hambúrguer em telas médias (fonte maior não cabe na barra) */
@media (max-width: 1120px) {
  .nav__menu {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--fundo); border-bottom: 1px solid var(--borda);
    padding: 8px 24px 20px; display: none;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav__menu.aberto { display: flex; }
  .nav__menu li { width: 100%; }
  .nav__menu a { display: block; padding: 12px 0; width: 100%; font-size: .95rem; }
  .nav__menu a[aria-current="page"] { border-bottom: 0; color: var(--dourado); }
  .nav__toggle { display: block; }
}
@media (max-width: 720px) {
  .section { padding: 62px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-2col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Redes sociais e perfis ---------- */
.rede-card { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.rede-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); border-color: rgba(198,160,90,.45); }
.rede-card__icone {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border: 1px solid var(--borda);
  color: var(--dourado); margin-bottom: 18px; transition: all var(--transicao);
}
.rede-card__icone svg { width: 21px; height: 21px; display: block; }
.rede-card:hover .rede-card__icone { background: var(--dourado); color: #14110A; border-color: var(--dourado); }
.rede-card h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.15rem; margin: 0 0 5px; color: var(--texto-forte); }
.rede-card__handle { font-size: .84rem; color: var(--dourado); margin: 0 0 12px; word-break: break-word; }
.rede-card p { font-size: .9rem; color: var(--texto-suave); margin: 0; line-height: 1.55; }
.rede-contato { border-top: 1px solid var(--borda); padding-top: 46px; }