/* Heralds Band — layout e componentes */

/* ---------- utilidades ---------- */

.envelope {
  width: min(100%, var(--largura));
  margin-inline: auto;
  padding-inline: var(--borda-x);
}

.secao {
  padding-block: var(--secao-y);
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao);
}

.botao--cheio {
  background: var(--dourado);
  color: var(--abismo);
}

.botao--cheio:hover {
  background: var(--creme);
}

.botao--vazio {
  border-color: rgba(212, 169, 84, 0.45);
  color: var(--dourado-claro);
}

.botao--vazio:hover {
  border-color: var(--dourado);
  background: rgba(212, 169, 84, 0.1);
}

/* ---------- cabeçalho ---------- */

.topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, var(--largura));
  margin-inline: auto;
  padding: 1.5rem var(--borda-x);
}

.topo__logo img {
  width: clamp(92px, 11vw, 132px);
  height: auto;
}

.topo__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
}

.topo__link {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
  text-decoration: none;
}

.topo__link:hover {
  color: var(--dourado-claro);
}

/* ---------- abertura ---------- */

.abertura {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: 8rem 3.5rem;
  overflow: hidden;
}

.abertura__foto {
  position: absolute;
  inset: 0;
  background: url("../img/palco/abertura.webp") center 28% / cover no-repeat;
  filter: contrast(1.05);
}

.abertura__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      rgba(4, 4, 12, 0.92) 0%,
      rgba(4, 4, 12, 0.72) 38%,
      rgba(4, 4, 12, 0.18) 72%,
      rgba(4, 4, 12, 0.05) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(4, 4, 12, 0.62) 0%,
      rgba(4, 4, 12, 0.22) 30%,
      rgba(4, 4, 12, 0.82) 76%,
      var(--abismo) 100%
    ),
    radial-gradient(
      120% 80% at 84% 16%,
      rgba(31, 30, 135, 0.5) 0%,
      transparent 60%
    );
}

.abertura__conteudo {
  position: relative;
  z-index: 2;
  width: min(100%, var(--largura));
  margin-inline: auto;
  padding-inline: var(--borda-x);
}

.abertura__titulo {
  max-width: 17ch;
  font-size: clamp(2.7rem, 7.4vw, 5.6rem);
}

.abertura__titulo em {
  display: block;
  font-style: normal;
  color: var(--dourado);
}

.abertura__apoio {
  max-width: 46ch;
  margin: 1.4rem 0 2rem;
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.28rem);
  color: var(--branco);
}

.abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.abertura__pentagrama {
  margin-bottom: 1.6rem;
  max-width: 180px;
}

/* a etiqueta da abertura fica sobre foto, então ganha um pouco mais de peso */
.abertura .etiqueta {
  color: var(--dourado-claro);
  text-shadow: 0 1px 8px rgba(4, 4, 12, 0.9);
}

/* ---------- faixa de credibilidade ---------- */

.numeros {
  background: linear-gradient(to bottom, var(--noite), var(--abismo));
  border-block: 1px solid rgba(212, 169, 84, 0.18);
}

.numeros__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.numeros__item {
  border-left: 1px solid rgba(212, 169, 84, 0.28);
  padding-left: 1.1rem;
}

.numeros__valor {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  line-height: 0.9;
  color: var(--dourado);
}

.numeros__rotulo {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

@media (min-width: 760px) {
  .numeros__grade {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- títulos de seção e divisores ---------- */

.titulo-secao {
  max-width: 20ch;
  margin-bottom: 1.6rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
}

.divisor {
  width: min(100%, var(--largura));
  margin-inline: auto;
  opacity: 0.35;
}

/* ---------- história ---------- */

.historia__grade {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.historia__texto p:last-child {
  margin-bottom: 0;
}

.historia__foto {
  margin: 0;
}

.historia__foto img {
  width: 100%;
  height: clamp(260px, 42vw, 440px);
  object-fit: cover;
  filter: contrast(1.06);
}

.historia__foto figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

@media (min-width: 900px) {
  .historia__grade {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- públicos ---------- */

.publicos__titulo {
  max-width: 24ch;
}

.publicos__grade {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: rgba(212, 169, 84, 0.22);
  border: 1px solid rgba(212, 169, 84, 0.22);
}

.cartao {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(to bottom, var(--noite), var(--abismo));
  transition: background-color var(--transicao);
}

.cartao:hover {
  background: linear-gradient(to bottom, #0d0b2c, var(--noite));
}

.cartao__titulo {
  margin-bottom: 0.9rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--dourado-claro);
}

.cartao p {
  margin-bottom: 1.4rem;
}

.cartao__link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 169, 84, 0.4);
  padding-bottom: 0.35rem;
  align-self: flex-start;
}

.cartao__link:hover {
  color: var(--creme);
  border-bottom-color: var(--creme);
}

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

/* ---------- ajustes de celular ---------- */

@media (max-width: 720px) {
  /* no celular o botão do topo brigaria com o logo; o pedido de orçamento
     continua acessível na abertura e no fim da página */
  .topo .botao {
    display: none;
  }

  /* o escurecimento lateral vira só vertical, senão a foto some na tela estreita */
  .abertura__veu {
    background: linear-gradient(
        to bottom,
        rgba(4, 4, 12, 0.7) 0%,
        rgba(4, 4, 12, 0.45) 26%,
        rgba(4, 4, 12, 0.88) 72%,
        var(--abismo) 100%
      ),
      radial-gradient(130% 60% at 78% 12%, rgba(31, 30, 135, 0.45) 0%, transparent 62%);
  }

  .abertura {
    padding-block: 7rem 3rem;
  }

  /* na tela estreita entra um recorte só com a fila de músicos: o painel do fundo
     repetiria o logo que já está no topo */
  .abertura__foto {
    background-image: url("../img/palco/abertura-celular.webp");
    background-position: center 62%;
  }
}

/* ---------- repertório ---------- */

.repertorio__grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.estilos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

.estilos li {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(212, 169, 84, 0.35);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado-claro);
}

.destaque {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(140deg, rgba(31, 30, 135, 0.42), rgba(7, 5, 26, 0.9));
  border: 1px solid rgba(212, 169, 84, 0.3);
}

.destaque__titulo {
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--branco);
}

.destaque__nota {
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(212, 169, 84, 0.25);
  color: var(--dourado-claro);
}

@media (min-width: 940px) {
  .repertorio__grade {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* ---------- vídeos ---------- */

.videos__grade {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(212, 169, 84, 0.25);
  background: var(--noite);
  cursor: pointer;
  overflow: hidden;
}

.video img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.75;
  transition: opacity var(--transicao), transform var(--transicao);
}

.video:hover img {
  opacity: 0.95;
  transform: scale(1.03);
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--dourado);
  border-radius: 50%;
  background: rgba(4, 4, 12, 0.78);
  box-shadow: 0 0 0 1px rgba(4, 4, 12, 0.5), 0 8px 30px rgba(4, 4, 12, 0.6);
}

.video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--dourado);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.video__rotulo {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.8rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--branco);
  background: linear-gradient(to top, rgba(4, 4, 12, 0.92), transparent);
  width: 100%;
  text-align: left;
}

.video__moldura {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

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

/* ---------- cases ---------- */

.cases__lista {
  display: grid;
  gap: 1px;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  background: rgba(212, 169, 84, 0.2);
  border: 1px solid rgba(212, 169, 84, 0.2);
}

.case {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--abismo);
}

.case__miniatura {
  padding: 0;
  border: 1px solid rgba(212, 169, 84, 0.3);
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--transicao);
}

.case__miniatura img {
  width: clamp(88px, 12vw, 116px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.05);
  transition: filter var(--transicao);
}

.case__miniatura:hover {
  border-color: var(--dourado);
}

.case__miniatura:hover img {
  filter: saturate(1);
}

.case__texto {
  display: grid;
  gap: 0.35rem;
}

.cases__extra {
  margin: 1.2rem 0 0;
  font-size: 0.95rem;
  color: var(--texto-fraco);
}

.case__tipo {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dourado);
}

.case__nome {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  text-transform: uppercase;
  line-height: 1;
  color: var(--branco);
}

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

/* ---------- ficha técnica ---------- */

.ficha {
  background: linear-gradient(to bottom, var(--abismo), var(--noite));
}

.ficha__grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.ficha__lista {
  margin: 0;
  display: grid;
  gap: 0;
}

.ficha__item {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(212, 169, 84, 0.2);
}

.ficha__item:last-child {
  border-bottom: 1px solid rgba(212, 169, 84, 0.2);
}

.ficha__item dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado);
}

.ficha__item dd {
  margin: 0;
  color: var(--texto);
}

@media (min-width: 940px) {
  .ficha__grade {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .ficha__item {
    grid-template-columns: 0.6fr 1.4fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}

/* ---------- convite para a orquestra ---------- */

.convite {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(120deg, rgba(31, 30, 135, 0.5), rgba(4, 4, 12, 0.95)),
    url("../img/palco/banda-completa.webp") center 40% / cover no-repeat;
  border-block: 1px solid rgba(212, 169, 84, 0.25);
}

.convite__conteudo {
  display: grid;
  gap: 1.8rem;
  align-items: center;
}

.convite__titulo {
  max-width: 18ch;
  margin-bottom: 1rem;
}

.convite__conteudo p {
  max-width: 48ch;
  margin-bottom: 0;
  color: var(--branco);
}

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

/* ---------- orçamento ---------- */

.orcamento__grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.orcamento__alternativa {
  font-size: 0.95rem;
  color: var(--texto-fraco);
}

.formulario {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(to bottom, var(--noite), var(--abismo));
  border: 1px solid rgba(212, 169, 84, 0.3);
}

.campo {
  display: grid;
  gap: 0.45rem;
}

.campo label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado);
}

.campo input,
.campo select {
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: var(--corpo);
  font-size: 1rem;
  color: var(--branco);
  background: rgba(4, 4, 12, 0.7);
  border: 1px solid rgba(194, 196, 210, 0.28);
}

.campo input:focus,
.campo select:focus {
  outline: 2px solid var(--dourado);
  outline-offset: 1px;
}

.formulario__enviar {
  justify-content: center;
  margin-top: 0.4rem;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
}

.formulario__erro {
  margin: 0;
  font-size: 0.85rem;
  color: #ffb4a8;
}

@media (min-width: 940px) {
  .orcamento__grade {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- rodapé ---------- */

.rodape {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(212, 169, 84, 0.25);
  /* leve clareada em relação ao corpo da página, para o rodapé se destacar */
  background: linear-gradient(to bottom, #0a0920, #060616);
}

.rodape__grade {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.rodape__logo {
  width: clamp(130px, 14vw, 160px);
  height: auto;
}

.rodape__contato p {
  margin-bottom: 0.3rem;
}

.rodape__assinatura {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.9;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

@media (min-width: 820px) {
  .rodape__grade {
    grid-template-columns: auto 1fr auto;
    gap: 3rem;
  }

  .rodape__assinatura {
    text-align: right;
  }
}

.repertorio__foto {
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  margin-top: 1.5rem;
}

/* ---------- página da orquestra ---------- */

.capa {
  position: relative;
  padding-block: clamp(7rem, 14vw, 10rem) clamp(3rem, 6vw, 4.5rem);
  background: url("../img/palco/banda-completa.webp") center 35% / cover no-repeat;
}

.capa__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      rgba(4, 4, 12, 0.94) 0%,
      rgba(4, 4, 12, 0.76) 45%,
      rgba(4, 4, 12, 0.35) 100%
    ),
    linear-gradient(to bottom, rgba(4, 4, 12, 0.55), var(--abismo) 96%);
}

.capa__conteudo {
  position: relative;
  z-index: 2;
}

.capa__pentagrama {
  max-width: 180px;
  margin-bottom: 1.4rem;
}

.capa__titulo {
  font-size: clamp(3rem, 9vw, 6rem);
}

.capa__apoio {
  max-width: 54ch;
  margin-top: 1.4rem;
  color: var(--branco);
}

.maestro__grade {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
}

.maestro__foto {
  width: 100%;
  max-width: 420px;
  height: auto;
  align-self: start;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(0.35) contrast(1.05);
}

@media (min-width: 880px) {
  .maestro__grade {
    grid-template-columns: 0.75fr 1.25fr;
  }
}

/* naipes */

.naipe + .naipe {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.naipe__cabeca {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(212, 169, 84, 0.25);
}

.naipe__titulo {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  color: var(--dourado);
}

.naipe__papel {
  max-width: 62ch;
  margin: 0;
  color: var(--texto);
}

.naipe__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 2vw, 1.6rem);
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}

.musico {
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.musico img,
.musico__silhueta {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 0.7rem;
  background: linear-gradient(160deg, var(--marinho), var(--abismo));
  filter: saturate(0.32) contrast(1.06);
  transition: filter var(--transicao);
}

.musico:hover img {
  filter: saturate(1) contrast(1.02);
}

.musico__silhueta {
  display: block;
  border: 1px dashed rgba(212, 169, 84, 0.35);
}

.musico__nome {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--branco);
}

.musico__instrumento {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado);
}

.naipe--tecnico .naipe__grade {
  grid-template-columns: repeat(2, 1fr);
}

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

@media (min-width: 1000px) {
  .naipe__grade {
    grid-template-columns: repeat(5, 1fr);
  }

  .naipe--tecnico .naipe__grade {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- foto ampliada ---------- */

.ampliada {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 4, 12, 0.94);
}

.ampliada[hidden] {
  display: none;
}

.ampliada__moldura {
  margin: 0;
  max-width: min(100%, 1100px);
}

.ampliada__foto {
  width: 100%;
  max-height: 78svh;
  object-fit: contain;
  border: 1px solid rgba(212, 169, 84, 0.3);
}

.ampliada__legenda {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado);
}

.ampliada__fechar {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.5rem);
  right: clamp(0.8rem, 2vw, 1.5rem);
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--branco);
  background: none;
  border: 1px solid rgba(212, 169, 84, 0.4);
  cursor: pointer;
}

.ampliada__fechar:hover {
  border-color: var(--dourado);
  color: var(--dourado);
}

/* a figura musical do logo usa um cinza escuro (#4E4E58): aparece sobre o fundo
   escuro sem competir com o dourado do nome — pedido do cliente em 28/09/2026 */