/* Capa com imagens cadastradas no admin: mesmo layout centralizado da capa padrão,
   com as imagens no lugar da arte de fundo. Uma imagem só ou carrossel.
   A capa acompanha a imagem mais larga (--capa-proporcao): as imagens preenchem a
   largura e só são cortadas em cima e embaixo, nunca ampliadas. */

.capa--personalizada .capa__cenario{
  aspect-ratio: var(--capa-proporcao, 2000 / 668);
  background: none;
}
.capa--personalizada .capa__conteudo{ left: 50%; z-index: 1; }

.capa__slides{
  position: absolute;
  inset: 0;
}

.capa__slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--curva);
}
.capa__slide.esta-ativo{ opacity: 1; }

.capa__controles{
  position: absolute;
  right: 3%;
  bottom: 5%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.capa__seta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--r-pilula);
  background: rgba(255, 252, 250, .85);
  color: var(--marrom-choc);
  cursor: pointer;
  box-shadow: var(--sombra-p);
  transition: background .2s var(--curva), transform .2s var(--curva);
}
.capa__seta:hover{ background: var(--branco-quente); transform: translateY(-1px); }
.capa__seta:focus-visible{ outline: 2px solid var(--terracota); outline-offset: 2px; }
.capa__seta svg{ width: 1.1rem; height: 1.1rem; }
.capa__seta--anterior svg{ transform: scaleX(-1); }

.capa__pontos{
  display: flex;
  gap: .5rem;
}

.capa__ponto{
  width: .625rem;
  height: .625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 252, 250, .6);
  cursor: pointer;
  transition: background .2s var(--curva), transform .2s var(--curva);
}
.capa__ponto[aria-current="true"]{ background: var(--terracota); transform: scale(1.2); }
.capa__ponto:focus-visible{ outline: 2px solid var(--terracota); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .capa__slide{ transition: none; }
}

@media (max-width: 1279px){
  .capa--personalizada .capa__cenario{ aspect-ratio: auto; }
  .capa__slides{
    position: relative;
    inset: auto;
    aspect-ratio: var(--capa-proporcao, 2000 / 668);
  }
}

@media (max-width: 640px){
  .capa__seta{ width: 2rem; height: 2rem; }
  .capa__controles{ gap: .5rem; }
}