/* ==========================================================================
   Página inicial: banner, indicadores, etapas, calendário, dúvidas e chamada.
   ========================================================================== */

/* ---------- Banner (fundo em layout.css: .fundo-marca) ---------- */
.banner__grade {
  display: grid;
  gap: var(--espaco-6);
  padding-block: var(--espaco-7);
}

@media (min-width: 62em) {
  .banner__grade {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--espaco-8);
    padding-block: 5.5rem;
  }
}

.banner__texto {
  display: grid;
  gap: var(--espaco-5);
  justify-items: start;
}

.rotulo--claro {
  color: var(--cor-sobre-escuro);
}

.banner__titulo {
  max-width: 20ch;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.banner__descricao {
  max-width: 38rem;
  color: var(--cor-sobre-escuro-suave);
  font-size: 1.125rem;
}

.banner__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.banner__lateral {
  display: grid;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border-top: 4px solid var(--cor-amarelo);
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

:root[data-contraste="alto"] .banner__lateral {
  border: 2px solid var(--cor-borda);
}

.banner__lateral-rotulo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.banner__atualizacao {
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--cor-borda);
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

/* Destaque da próxima capacitação (montado por componentes/proxima-capacitacao.js). */
.proxima {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espaco-2) var(--espaco-4);
  align-items: start;
}

.proxima__titulo {
  font-size: 1.0625rem;
}

.proxima__detalhes {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.proxima__link {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 0.9375rem;
}

/* Bloco de data reutilizado no destaque e na lista do calendário. */
.data-bloco {
  display: grid;
  justify-items: center;
  min-width: 3.75rem;
  padding: var(--espaco-2) var(--espaco-2) var(--espaco-1);
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-azul);
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--cor-superficie);
  line-height: 1.1;
  text-align: center;
}

.data-bloco__dia {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--cor-azul-escuro);
}

:root[data-contraste="alto"] .data-bloco__dia {
  color: var(--cor-texto);
}

.data-bloco__mes {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.data-bloco__semana {
  font-size: 0.6875rem;
  color: var(--cor-texto-suave);
}

/* ---------- Números ---------- */
/* Grade "de livro-caixa": linhas finas formadas pelo gap sobre o fundo da borda. */
.numeros {
  display: grid;
  gap: 1px;
  margin-bottom: var(--espaco-6);
  border: 1px solid var(--cor-borda);
  background: var(--cor-borda);
}

@media (min-width: 30em) {
  .numeros {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .numeros {
    grid-template-columns: repeat(3, 1fr);
  }
}

.numeros__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--espaco-1);
  padding: var(--espaco-5);
  background: var(--cor-superficie);
}

.numeros__item::before {
  content: "";
  width: 2rem;
  height: 4px;
  margin-bottom: var(--espaco-3);
  background: var(--cor-azul);
}

.numeros__item:nth-child(3n + 2)::before {
  background: var(--cor-amarelo);
}

.numeros__item:nth-child(3n)::before {
  background: var(--cor-verde);
}

.numeros__rotulo {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.numeros__valor {
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cor-azul-escuro);
}

:root[data-contraste="alto"] .numeros__valor {
  color: var(--cor-texto);
}

.numeros__detalhe {
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.tendencia {
  font-weight: 700;
  color: var(--cor-verde-texto);
}

/* ---------- Painéis com barras ---------- */
.paineis {
  display: grid;
  gap: var(--espaco-5);
  margin-bottom: var(--espaco-4);
}

@media (min-width: 62em) {
  .paineis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.painel {
  display: grid;
  align-content: start;
  gap: var(--espaco-5);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.painel__titulo {
  font-size: 1.1875rem;
}

.painel__descricao {
  margin-top: var(--espaco-1);
  font-size: 0.9375rem;
  color: var(--cor-texto-suave);
}

.barras {
  display: grid;
  gap: var(--espaco-4);
  padding: 0;
  list-style: none;
}

.barras__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "rotulo rotulo"
    "trilho valor";
  align-items: center;
  gap: var(--espaco-1) var(--espaco-3);
}

.barras__rotulo {
  grid-area: rotulo;
  font-size: 0.9375rem;
  font-weight: 600;
}

.barras__trilho {
  grid-area: trilho;
  height: 0.75rem;
  background: #e7eaee;
  overflow: hidden;
}

:root[data-contraste="alto"] .barras__trilho {
  outline: 1px solid var(--cor-borda);
  background: transparent;
}

.barras__preenchimento {
  display: block;
  height: 100%;
  width: calc(var(--proporcao, 0) * 100%);
  background: var(--cor-azul);
  transition: width 700ms ease-out;
}

.barras__item--final .barras__preenchimento {
  background: var(--cor-verde);
}

.barras__valor {
  grid-area: valor;
  min-width: 5.5rem;
  font-weight: 700;
  text-align: right;
}

.barras__valor small {
  margin-left: var(--espaco-1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

@media (min-width: 30em) {
  .barras--compactas .barras__item {
    grid-template-columns: 7rem minmax(0, 1fr) 3.5rem;
    grid-template-areas: "rotulo trilho valor";
  }

  .barras--compactas .barras__valor {
    min-width: 0;
  }
}

.meta {
  display: grid;
  gap: var(--espaco-2);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}

.meta__cabecalho {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-3);
  font-weight: 600;
  font-size: 0.9375rem;
}

.meta__cabecalho strong {
  font-size: 1.25rem;
  color: var(--cor-verde-texto);
}

.meta__barra {
  width: 100%;
  height: 0.75rem;
  border: 0;
  background: #e7eaee;
  -webkit-appearance: none;
  appearance: none;
}

.meta__barra::-webkit-progress-bar {
  background: #e7eaee;
}

.meta__barra::-webkit-progress-value {
  background: var(--cor-verde);
}

.meta__barra::-moz-progress-bar {
  background: var(--cor-verde);
}

.meta__legenda {
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

/* ---------- Etapas ---------- */
.etapas {
  display: grid;
  gap: var(--espaco-6) var(--espaco-5);
}

@media (min-width: 40em) {
  .etapas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .etapas {
    grid-template-columns: repeat(4, 1fr);
  }
}

.etapas__item {
  display: grid;
  align-content: start;
  gap: var(--espaco-2);
  padding-top: var(--espaco-4);
  border-top: 2px solid var(--cor-texto);
}

.etapas__numero {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cor-azul);
}

.etapas__item:nth-child(2) .etapas__numero {
  color: #c48f00;
}

.etapas__item:nth-child(3) .etapas__numero {
  color: var(--cor-verde-texto);
}

:root[data-contraste="alto"] .etapas__numero {
  color: var(--cor-amarelo) !important;
}

.etapas__titulo {
  font-size: 1.125rem;
}

.etapas__item p {
  color: var(--cor-texto-suave);
  font-size: 0.9375rem;
}

/* ---------- Calendário ---------- */
.calendario {
  display: grid;
  gap: var(--espaco-6);
  margin-bottom: var(--espaco-4);
}

@media (min-width: 48em) {
  .calendario {
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 62em) {
  .calendario {
    grid-template-columns: 23rem minmax(0, 1fr);
    gap: var(--espaco-7);
  }

  .calendario__mes {
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--espaco-5));
  }
}

.calendario__mes {
  display: grid;
  gap: var(--espaco-4);
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.calendario__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
}

.calendario__titulo {
  font-size: 1.125rem;
  text-align: center;
}

.calendario__navegar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  cursor: pointer;
}

.calendario__navegar:hover {
  border-color: var(--cor-azul);
  color: var(--cor-azul);
}

.calendario__grade {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendario__grade th {
  padding-bottom: var(--espaco-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.calendario__grade abbr {
  text-decoration: none;
}

.calendario__grade td {
  padding: 2px;
  text-align: center;
}

.dia {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--raio);
  font-size: 0.875rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--cor-texto);
  text-decoration: none;
}

.dia--evento {
  background: #e6eef8;
  color: var(--cor-azul-escuro);
  font-weight: 800;
}

.dia--evento:hover {
  background: var(--cor-azul);
  color: #fff;
}

:root[data-contraste="alto"] .dia--evento {
  background: transparent;
  outline: 1px solid var(--cor-amarelo);
  color: var(--cor-amarelo);
}

.dia--hoje {
  box-shadow: inset 0 0 0 2px var(--cor-amarelo);
}

.dia__marcas {
  position: absolute;
  bottom: 12%;
  display: flex;
  gap: 2px;
}

/* Cores por modalidade: .marca-modalidade--* fica em base.css. */
.legenda__marca--presencial {
  background: var(--cor-azul);
}

.legenda__marca--online {
  background: var(--cor-verde);
}

.legenda__marca--hibrida {
  background: var(--cor-amarelo);
}

.calendario__filtro {
  display: grid;
  gap: var(--espaco-1);
  font-size: 0.875rem;
  font-weight: 700;
}

.calendario__filtro select {
  min-height: 2.75rem;
  padding: 0 var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-weight: 500;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
}

.legenda__marca {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

/* Lista de capacitações do mês. */
.eventos {
  display: grid;
}

.evento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--espaco-4);
  padding: var(--espaco-5) var(--espaco-3);
  border-bottom: 1px solid var(--cor-borda);
  transition: background-color var(--transicao);
}

.evento:first-child {
  border-top: 1px solid var(--cor-borda);
}

.evento:target {
  background: #fff6d6;
}

:root[data-contraste="alto"] .evento:target {
  background: transparent;
  outline: 2px solid var(--cor-amarelo);
}

.evento__corpo {
  display: grid;
  gap: var(--espaco-2);
}

.evento__titulo {
  font-size: 1.0625rem;
}

.evento__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-4);
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.evento__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
}

.eventos__vazio {
  padding: var(--espaco-6) var(--espaco-4);
  border: 1px dashed var(--cor-borda);
  color: var(--cor-texto-suave);
  text-align: center;
}

/* ---------- Dúvidas ---------- */
@media (min-width: 62em) {
  .duvidas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--espaco-7);
    align-items: start;
  }
}

.duvidas__lista {
  border-top: 2px solid var(--cor-texto);
}

.duvida {
  border-bottom: 1px solid var(--cor-borda);
}

.duvida summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-4) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.duvida summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--cor-azul);
}

.duvida[open] summary::after {
  content: "−";
  background: var(--cor-amarelo);
  border-color: var(--cor-amarelo);
  color: #111;
}

.duvida summary:hover {
  color: var(--cor-azul-escuro);
}

.duvida p {
  max-width: 44rem;
  padding-bottom: var(--espaco-5);
  color: var(--cor-texto-suave);
}

/* ---------- Chamada ---------- */
.chamada {
  background: var(--cor-azul-escuro);
  color: var(--cor-sobre-escuro);
}

.chamada__conteudo {
  display: grid;
  gap: var(--espaco-5);
  padding-block: var(--espaco-7);
}

@media (min-width: 62em) {
  .chamada__conteudo {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espaco-7);
  }
}

.chamada__titulo {
  margin-bottom: var(--espaco-2);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

.chamada p {
  color: var(--cor-sobre-escuro-suave);
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}