/* =========================================================
   COMIDEC — Design System (Fase 3)
   Paleta extraída do logotipo oficial + uniforme institucional.
   ========================================================= */

:root {
  /* Cores */
  --verde: #2C5A38;         /* Verde Institucional — primária */
  --verde-folha: #009944;   /* Verde Folha — acento */
  --dourado: #F5C400;       /* Dourado Ouro — secundária */
  --dourado-escuro: #C98A20;
  --terra: #A07828;         /* Terra Clara */
  --terra-escura: #7B6739;  /* Terra Escura */
  --terracota: #B5502E;     /* CTA exclusivo */
  --terracota-escuro: #9A4325;
  --areia: #FAF7F1;         /* Fundo padrão */
  --verde-noturno: #17311D; /* Fundo escuro */
  --grafite: #1E1E1E;       /* Texto primário */
  --cinza: #5B5B5B;         /* Texto secundário */
  --branco: #FFFFFF;
  --borda: #E4DFD3;

  /* Tipografia */
  --fonte-display: 'Fraunces', Georgia, serif;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaçamento (base 8px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --raio: 8px;
  --sombra: 0 4px 20px rgba(23, 49, 29, 0.10);
  --sombra-forte: 0 10px 30px rgba(23, 49, 29, 0.16);
}

/* ---------- Reset básico ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--grafite);
  background: var(--areia);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--fonte-display); font-weight: 700; color: var(--verde); margin: 0 0 var(--sp-4); line-height: 1.2; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.375rem; font-family: var(--fonte-texto); font-weight: 600; }
h4 { font-size: 1.125rem; font-family: var(--fonte-texto); font-weight: 600; }
p { margin: 0 0 var(--sp-4); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}
.pular-para-conteudo {
  position: absolute; left: -999px; top: 0; background: var(--verde); color: #fff;
  padding: var(--sp-3) var(--sp-4); z-index: 1000;
}
.pular-para-conteudo:focus { left: var(--sp-3); top: var(--sp-3); }

:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }

/* ---------- Botões ---------- */
.botao {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 1rem;
  padding: var(--sp-3) var(--sp-6);
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
.botao:hover { box-shadow: 0 4px 14px rgba(23,49,29,.18); }
.botao:hover { text-decoration: none; transform: translateY(-1px); }
.botao--cta, .botao--primario {
  background: var(--terracota); color: #fff;
}
.botao--cta:hover, .botao--primario:hover { background: var(--terracota-escuro); color: #fff; }
.botao--secundario {
  background: transparent; color: var(--verde); border-color: var(--verde);
}
.botao--secundario:hover { background: var(--verde); color: #fff; }
.botao--fantasma {
  background: transparent; color: var(--verde); border: none; padding: var(--sp-2) 0;
  text-decoration: underline;
}
.botao:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.botao--grande { padding: var(--sp-4) var(--sp-6); font-size: 1.0625rem; }

/* ---------- Aviso (banner de comunicados) ---------- */
.aviso-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--dourado); color: var(--grafite);
  font-size: .92rem;
}
.aviso-banner--urgente { background: var(--terracota); color: var(--branco); }
.aviso-banner__texto { flex: 1; }
.aviso-banner__link { font-weight: 600; color: inherit; white-space: nowrap; }
.aviso-banner__fechar {
  background: none; border: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: inherit; opacity: .7;
  padding: 0 var(--sp-1);
}
.aviso-banner__fechar:hover { opacity: 1; }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  transition: box-shadow .2s ease;
}
.cabecalho--rolado { box-shadow: var(--sombra); }
.cabecalho__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-3); padding-bottom: var(--sp-3);
}
.cabecalho__marca { display: flex; align-items: center; gap: var(--sp-3); color: var(--grafite); margin-left: calc(-1 * var(--sp-3)); }
.cabecalho__marca:hover { text-decoration: none; }
.cabecalho__marca-texto { font-family: var(--fonte-display); font-weight: 700; font-size: 1.25rem; color: var(--verde); white-space: nowrap; }
.cabecalho__marca img { border-radius: 50%; }

.cabecalho__menu-botao {
  display: none; background: none; border: none; cursor: pointer; padding: var(--sp-2);
}
.cabecalho__menu-icone, .cabecalho__menu-icone::before, .cabecalho__menu-icone::after {
  display: block; width: 26px; height: 2px; background: var(--verde); position: relative; transition: .2s;
}
.cabecalho__menu-icone::before, .cabecalho__menu-icone::after { content: ''; position: absolute; }
.cabecalho__menu-icone::before { top: -8px; }
.cabecalho__menu-icone::after { top: 8px; }

.cabecalho__nav { display: flex; align-items: center; gap: var(--sp-4); }
.cabecalho__lista { display: flex; gap: var(--sp-3); }
.cabecalho__lista > li { position: relative; }
.cabecalho__lista > li > a {
  color: var(--grafite); font-weight: 500; font-size: .9rem; padding: var(--sp-2) 0; display: inline-block;
  white-space: nowrap;
}
.cabecalho__lista > li > a[aria-current="page"] { color: var(--verde); font-weight: 600; border-bottom: 2px solid var(--terracota); }
.cabecalho__lista > li > a:hover { color: var(--verde); text-decoration: none; }

.submenu {
  display: none; position: absolute; top: 100%; left: 0; background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  min-width: 220px; padding: var(--sp-2) 0; margin-top: var(--sp-3);
}
.tem-submenu:hover .submenu, .tem-submenu:focus-within .submenu { display: block; }
.submenu li a { display: block; padding: var(--sp-2) var(--sp-4); color: var(--grafite); }
.submenu li a:hover { background: var(--areia); text-decoration: none; }

.cabecalho__cta { padding: var(--sp-2) var(--sp-4); font-size: .9rem; }

/* ---------- Hero ---------- */
.hero {
  padding: var(--sp-9) 0 var(--sp-8);
  background: linear-gradient(180deg, #F1EBDA 0%, var(--areia) 100%);
}
.hero--imagem {
  position: relative; color: #fff; background-size: cover; background-position: center;
  padding: var(--sp-10) 0;
}
.hero--imagem::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,49,29,.55) 0%, rgba(23,49,29,.85) 100%);
}
.hero--imagem .container { position: relative; z-index: 1; }
.hero--imagem h1, .hero--imagem p { color: #fff; }
.hero__titulo { font-size: 2.75rem; max-width: 820px; }
.hero__subtitulo { font-size: 1.15rem; max-width: 640px; color: var(--cinza); margin-bottom: var(--sp-6); }
.hero--imagem .hero__subtitulo { color: #EDEDE3; }
.hero__botoes { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero--sobrio { background: var(--verde-noturno); color: #fff; padding: var(--sp-8) 0; }
.hero--sobrio h1, .hero--sobrio p { color: #fff; }

/* ---------- Seções ---------- */
.secao { padding: var(--sp-8) 0; }
.secao--alt { background: #F1EBDA; }
.secao--escura { background: var(--verde-noturno); color: #fff; }
.secao--escura h2 { color: #fff; }
.secao__cabecalho { max-width: 720px; margin-bottom: var(--sp-6); }

/* ---------- Barra de credenciais ---------- */
.credenciais { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.credenciais__item {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: var(--sp-5); text-align: center;
}
.credenciais__valor { display: block; font-family: var(--fonte-display); font-size: 1.4rem; color: var(--verde); font-weight: 700; }
.credenciais__rotulo { font-size: .85rem; color: var(--cinza); }

/* ---------- Bloco de destaque (Mineração Legal na Início) ---------- */
.destaque {
  background: linear-gradient(135deg, var(--dourado) 0%, var(--dourado-escuro) 100%);
  border-radius: var(--raio); padding: var(--sp-7); display: flex; gap: var(--sp-6);
  align-items: center; flex-wrap: wrap; justify-content: space-between;
}
.destaque h2, .destaque p { color: var(--grafite); }
.destaque__texto { flex: 1 1 420px; }

/* ---------- Cards ---------- */
.grade { display: grid; gap: var(--sp-5); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; transition: transform .15s ease-out, box-shadow .15s ease-out;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.card__imagem { aspect-ratio: 16/10; object-fit: cover; background: var(--terra); }
.card__corpo { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.card__categoria {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--verde); background: #E4ECE6; padding: 2px var(--sp-2);
  border-radius: 4px; margin-bottom: var(--sp-2); width: fit-content;
}
.card__titulo { font-size: 1.05rem; margin-bottom: var(--sp-2); color: var(--grafite); font-family: var(--fonte-texto); font-weight: 600; }
.card__data { font-size: .82rem; color: var(--cinza); }
.card__resumo { color: var(--cinza); font-size: .92rem; flex: 1; }
.card__impacto {
  margin-top: var(--sp-3); font-weight: 700; color: var(--terra-escura); font-size: .9rem;
}
.card--pessoa { text-align: center; padding: var(--sp-5); }
.card--pessoa img { border-radius: 50%; width: 110px; height: 110px; object-fit: cover; margin: 0 auto var(--sp-3); }
.card--pessoa .card__cargo { color: var(--cinza); font-size: .9rem; }

.card--documento { flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.card--documento .card__icone { font-size: 1.6rem; }
.card--documento .card__meta { font-size: .82rem; color: var(--cinza); }

/* ---------- Mito x Fato ---------- */
.mito-fato { border-left: 4px solid var(--dourado); background: #F2F0EA; border-radius: 0 var(--raio) var(--raio) 0; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.mito-fato__mito { font-style: italic; color: var(--cinza); }
.mito-fato__fato { color: var(--grafite); margin-top: var(--sp-2); }
.mito-fato__fato strong { color: var(--verde); }

/* ---------- Filtros (pill) ---------- */
.filtros { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.filtros button {
  font-family: var(--fonte-texto); font-weight: 600; font-size: .9rem;
  background: var(--branco); border: 1px solid var(--borda); color: var(--grafite);
  padding: var(--sp-2) var(--sp-4); border-radius: 999px; cursor: pointer;
}
.filtros button.ativo, .filtros button:hover { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------- Formulários ---------- */
.formulario { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 560px; }
.campo label { display: block; font-weight: 600; margin-bottom: var(--sp-2); font-size: .92rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: var(--sp-3); border: 1.5px solid var(--borda); border-radius: var(--raio);
  font-family: var(--fonte-texto); font-size: 1rem; background: var(--branco); color: var(--grafite);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--verde); outline: none;
}
.campo--erro input, .campo--erro textarea { border-color: var(--terracota); }
.campo__erro-msg { color: var(--terracota); font-size: .85rem; margin-top: var(--sp-1); }
.campo textarea { resize: vertical; min-height: 130px; }

/* ---------- Nota / alerta ---------- */
.nota {
  background: #F2F0EA; border-left: 4px solid var(--dourado); border-radius: 0 var(--raio) var(--raio) 0;
  padding: var(--sp-4) var(--sp-5); font-size: .95rem; color: #444;
}
.alerta-sucesso { background: #E4ECE6; border-left-color: var(--verde); }
.alerta-erro { background: #F5E1D8; border-left-color: var(--terracota); }

/* ---------- Timeline (História) ---------- */
.timeline { position: relative; padding-left: var(--sp-6); border-left: 3px solid var(--borda); }
.timeline__item { position: relative; padding-bottom: var(--sp-6); }
.timeline__item::before {
  content: ''; position: absolute; left: calc(-1 * var(--sp-6) - 7px); top: 4px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--terracota); border: 3px solid var(--areia);
}
.timeline__ano { font-family: var(--fonte-display); color: var(--verde); font-weight: 700; }

/* ---------- Lightbox (carrossel) ---------- */
.lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 999;
  align-items: center; justify-content: center;
}
.lightbox--aberto { display: flex; }

.lightbox__principal { display: flex; flex-direction: column; align-items: center; max-width: 62vw; z-index: 2; pointer-events: none; }
.lightbox__principal .lightbox__imagem-atual { pointer-events: auto; }
.lightbox__imagem-atual { max-width: 100%; max-height: 78vh; border-radius: var(--raio); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__legenda { color: #fff; margin-top: var(--sp-3); text-align: center; }

/* As setas ocupam a faixa inteira lateral (fundo + clique), sem vão entre
   o botão e a área escura — evita fechar sem querer ao clicar perto da seta. */
.lightbox__seta {
  position: absolute; top: 0; bottom: 0; width: 19vw;
  background-size: cover; background-position: center;
  border: none; cursor: pointer; z-index: 1; padding: 0; margin: 0;
  display: flex; align-items: center;
}
.lightbox__seta::before {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); transition: background .15s ease;
}
.lightbox__seta:hover::before { background: rgba(0,0,0,.2); }
.lightbox__seta--anterior { left: 0; justify-content: flex-start; }
.lightbox__seta--proxima { right: 0; justify-content: flex-end; }
.lightbox__seta-icone {
  position: relative; z-index: 1; margin: 0 var(--sp-4);
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.18);
  color: #fff; font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.lightbox__fechar {
  position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__fechar:hover { background: rgba(255,255,255,.3); }

@media (max-width: 900px) {
  .lightbox__seta { width: 16vw; }
  .lightbox__principal { max-width: 90vw; }
}

/* ---------- FAQ ---------- */
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__pergunta {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: var(--sp-4) 0; font-weight: 600; font-size: 1.02rem; color: var(--grafite);
  display: flex; justify-content: space-between; align-items: center; font-family: var(--fonte-texto);
}
.faq__resposta { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; color: var(--cinza); }
.faq__item--aberto .faq__resposta { max-height: 400px; padding-bottom: var(--sp-4); }
.faq__pergunta::after { content: '+'; font-size: 1.4rem; color: var(--verde); }
.faq__item--aberto .faq__pergunta::after { content: '–'; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--verde-noturno); color: #D9E2DB; margin-top: var(--sp-9); }
.rodape a { color: #D9E2DB; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding: var(--sp-8) 0 var(--sp-6); }
.rodape__titulo { color: #fff; font-family: var(--fonte-texto); font-size: 1rem; margin-bottom: var(--sp-3); }
.rodape__coluna ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.rodape__marca img { margin-bottom: var(--sp-3); }
.rodape__endereco, .rodape__cnpj { font-size: .85rem; color: #AEC0B2; }
.rodape__rede { display: inline-block; margin-top: var(--sp-3); font-weight: 600; }
.rodape__base { border-top: 1px solid rgba(255,255,255,.12); padding: var(--sp-4) 0; font-size: .82rem; color: #AEC0B2; }

/* =========================================================
   Responsivo — mobile-first (breakpoints da Fase 3)
   ========================================================= */
@media (max-width: 1024px) {
  .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .credenciais { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Menu vira "hambúrguer" bem antes do ponto de quebra, para telas de
   notebook/tablet menores (ex.: 1024-1280px) não terem os 6 itens do
   menu + botão CTA espremidos e sobrepondo a logo. */
@media (max-width: 1180px) {
  .cabecalho__menu-botao { display: block; }
  .cabecalho__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--branco); flex-direction: column; align-items: stretch;
    padding: var(--sp-4); border-top: 1px solid var(--borda); box-shadow: var(--sombra);
  }
  .cabecalho__nav--aberto { display: flex; }
  .cabecalho__lista { flex-direction: column; gap: 0; }
  .cabecalho__lista > li > a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--borda); }
  .submenu { position: static; display: block; box-shadow: none; border: none; margin: 0 0 0 var(--sp-4); }
  .cabecalho__cta { margin-top: var(--sp-4); text-align: center; }
}

@media (max-width: 640px) {
  .hero__titulo { font-size: 2rem; }
  .hero, .hero--imagem, .hero--sobrio { padding: var(--sp-7) 0; }

  .grade--3, .grade--2, .grade--4 { grid-template-columns: 1fr; }
  .credenciais { grid-template-columns: 1fr 1fr; }
  .destaque { padding: var(--sp-5); flex-direction: column; align-items: flex-start; }
  .botao--grande, .hero__botoes .botao { width: 100%; text-align: center; }

  .rodape__grade { grid-template-columns: 1fr; padding: var(--sp-6) 0; }
  .timeline { padding-left: var(--sp-5); }
}

/* ---------- Faixa de redes sociais ---------- */
.faixa-redes { background: var(--verde); padding: var(--sp-4) 0; }
.secao--colada-topo { padding-top: var(--sp-3); }
.faixa-redes__linha {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5); flex-wrap: wrap; text-align: center;
}
.faixa-redes__titulo { font-weight: 700; color: var(--branco); margin: 0; }
.faixa-redes__icones { display: flex; gap: var(--sp-5); align-items: center; }
.faixa-redes__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--branco); font-weight: 600; font-size: .92rem;
}
.faixa-redes__link:hover { opacity: .75; }
.faixa-redes__em-breve {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--branco); opacity: .5; font-size: .92rem; cursor: default;
}

/* ---------- Faixa de destaques recentes (teste index02) ---------- */
.faixa-destaques { display: flex; align-items: center; gap: var(--sp-3); }
.faixa-destaques__pista {
  display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; flex: 1; padding-bottom: 2px;
}
.faixa-destaques__pista::-webkit-scrollbar { display: none; }
.faixa-destaques__item {
  flex: 0 0 300px; scroll-snap-align: start; color: var(--grafite);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.faixa-destaques__item:hover .faixa-destaques__titulo { color: var(--verde); }
.faixa-destaques__imagem {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio);
  background: var(--terra);
}
.faixa-destaques__rotulo {
  align-self: flex-start; font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px;
}
.faixa-destaques__rotulo--noticia { background: var(--areia); color: var(--grafite); }
.faixa-destaques__rotulo--album { background: var(--dourado); color: var(--grafite); }
.faixa-destaques__titulo { font-size: .92rem; font-weight: 600; line-height: 1.35; }
.faixa-destaques__seta {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda);
  background: var(--branco); color: var(--grafite); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.faixa-destaques__seta:hover { border-color: var(--verde); color: var(--verde); }
.faixa-destaques__pontos { display: flex; justify-content: center; gap: 6px; margin-top: var(--sp-3); }
.faixa-destaques__pontos button {
  width: 7px; height: 7px; border-radius: 50%; border: none; background: var(--borda); padding: 0; cursor: pointer;
}
.faixa-destaques__pontos button.ativo { background: var(--verde); }

@media (max-width: 640px) {
  .faixa-destaques__item { flex-basis: 240px; }
  .faixa-destaques__seta { display: none; }
}