/* ==========================================================================
   INTERNAS — capa de página, blocos de texto e faixas compartilhadas
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Capa da página — faixa clara com trilha e título
   -------------------------------------------------------------------------- */

.capa {
  position: relative;
  padding: clamp(36px, 4.5vw, 64px) var(--pad-x) clamp(40px, 5vw, 72px);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

/* Assinatura dourada fechando a capa, alinhada com o texto. */
.capa::after {
  content: '';
  position: absolute;
  left: var(--pad-x);
  bottom: -1px;
  width: 96px;
  height: 3px;
  background: var(--ouro);
}

.capa__interno {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
  max-width: var(--container);
  margin-inline: auto;
}

.capa__titulo {
  max-width: 20ch;
  font-size: var(--t-h1);
  font-weight: var(--peso-medio);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.capa__titulo em {
  font-style: normal;
  color: var(--ouro-tinta);
}

.capa__texto {
  max-width: 62ch;
  font-size: var(--t-corpo-g);
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* Trilha de navegação */
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--t-mini);
  color: var(--tinta-tenue);
}

.trilha a {
  transition: color var(--rapida);
}

.trilha a:hover {
  color: var(--ouro-tinta);
}

.trilha [aria-current] {
  color: var(--tinta);
}

.trilha li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--linha);
}

/* --------------------------------------------------------------------------
   2. Bloco texto + mídia
   -------------------------------------------------------------------------- */

.bloco-duplo {
  display: grid;
  gap: var(--gap-bloco);
  align-items: center;
}

@media (min-width: 1000px) {
  .bloco-duplo {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 88px);
  }
  .bloco-duplo--invertido .bloco-duplo__midia {
    order: -1;
  }
}

.bloco-duplo__midia {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  outline: 1px solid var(--ouro-borda);
  outline-offset: -1px;
}

.bloco-duplo__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloco-duplo__texto {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
  max-width: 60ch;
}

.bloco-duplo__texto p {
  font-size: var(--t-corpo);
  line-height: 1.75;
  color: var(--tinta-suave);
}

/* Coluna de texto corrido, duas colunas em telas largas */
.texto-colunas {
  display: grid;
  gap: var(--gap-item);
}

@media (min-width: 900px) {
  .texto-colunas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-bloco);
  }
}

.texto-colunas p {
  font-size: var(--t-corpo);
  line-height: 1.8;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   3. Lista de valores / princípios
   -------------------------------------------------------------------------- */

.valores {
  display: grid;
  gap: var(--gap-item);
}

@media (min-width: 700px) {
  .valores {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .valores {
    grid-template-columns: repeat(3, 1fr);
  }
}

.valores__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--gap-menor);
  border-top: 2px solid var(--linha);
  transition: border-color var(--media);
}

.valores__item:hover {
  border-top-color: var(--ouro);
}

.valores__indice {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  color: var(--ouro-tinta);
}

.valores__item h3 {
  font-size: var(--t-h3);
}

.valores__item p {
  font-size: var(--t-rotulo);
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   4. Áreas detalhadas — âncora + conteúdo
   -------------------------------------------------------------------------- */

.area-detalhe {
  display: grid;
  gap: var(--gap-bloco);
  padding-block: var(--gap-bloco);
  border-top: 1px solid var(--linha);
  scroll-margin-top: calc(var(--altura-cabecalho) + 24px);
}

@media (min-width: 900px) {
  .area-detalhe {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

.area-detalhe__cabeca {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 900px) {
  .area-detalhe__cabeca {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 32px);
    align-self: start;
  }
}

.area-detalhe__indice {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  color: var(--ouro-tinta);
}

.area-detalhe__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
}

.area-detalhe__corpo p {
  font-size: var(--t-corpo);
  line-height: 1.8;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   5. Faixa de chamada intermediária
   -------------------------------------------------------------------------- */

.faixa {
  display: grid;
  gap: var(--gap-item);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--papel);
  border-left: 3px solid var(--ouro);
}

@media (min-width: 900px) {
  .faixa {
    grid-template-columns: 1fr auto;
    gap: var(--gap-bloco);
  }
}

.faixa h2 {
  max-width: 24ch;
  font-size: var(--t-h3);
  font-weight: var(--peso-medio);
}

.faixa p {
  max-width: 56ch;
  margin-top: 6px;
  font-size: var(--t-rotulo);
  color: var(--tinta-suave);
}

.faixa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}