/* ==========================================================================
   Picä Tumilho — layout do mockup (BASE_SITE_2)
   Carregar DEPOIS de site.css e site-fundo.css.

   O que este ficheiro faz, por ordem do mockup:
     §1  logo com animação ao passar o rato
     §2  as cartas sobem e ficam meio integradas no slider
     §3  footer com as imagens laterais (telemóvel: só a esquerda)
     §4  o player que sobe com fade-up quando algo toca
     §5  onda sonora + progresso + volume
     §6  painel lateral da letra
     §7  modal de vídeo (YouTube / Instagram / TikTok)
   ========================================================================== */

/* §0 — Sem overflow horizontal ========================================
   O body já tem overflow-x:hidden, mas o root não; um único elemento com
   uns px a mais fazia aparecer a "barra preta" à direita no browser em modo
   mobile (na scrollbar do desktop). `clip` corta sem criar um contexto de
   scroll — não parte position:sticky/fixed. */
html { overflow-x: clip }

/* §1 — Logo: balança ao passar o rato ================================== */
.brand-logo {
  transform-origin: 50% 8%;          /* pendurado pelo topo, como no mockup */
  transition: filter .3s;
}
.site-header a:hover .brand-logo,
.site-header a:focus-visible .brand-logo {
  animation: logo-balanca 1.6s ease-in-out;
  filter: drop-shadow(0 0 18px rgba(216, 162, 68, .45));
}
@keyframes logo-balanca {
  0%   { rotate: 0deg }
  20%  { rotate: -6deg }
  45%  { rotate: 4.5deg }
  70%  { rotate: -2.5deg }
  100% { rotate: 0deg }
}

/* §2 — As cartas sobem para dentro do slider =========================== */
/* O hero fica por baixo; a secção music entra por cima da borda inferior,
   sem fundo próprio, para as cartas parecerem pousadas no palco. */
.section.music {
  position: relative;
  z-index: 2;               /* sob a lanterna/copo e o pipo (z4), como pedido */
  margin-top: clamp(-190px, -14vw, -90px);
  padding-top: 0;
  background: transparent !important;
}
.section.music .title {
  /* o título fica por cima da zona escura do hero */
  text-shadow: 0 3px 14px #000;
}
/* sem o corte serrilhado entre hero e cartas — a sobreposição substitui-o */
.hero + .section-cut { display: none }

/* A face da IMAGEM não leva moldura nem fundo — mostra só a fotografia.
   (A face de trás, o texto, mantém a moldura e o fundo próprios.) */
.flip-card .front {
  border: 0;
  background: transparent;
}

/* §3 — Footer com as imagens laterais ================================== */
.bottom {
  position: relative;
  overflow: hidden;
}
.bottom-left,
.bottom-right {
  /* fixos ao browser: a página rola e eles não mexem (como as correntes) */
  position: fixed;
  bottom: 0;
  z-index: 4;                        /* acima das correntes (3), abaixo do player */
  max-height: clamp(140px, 26vh, 300px);   /* mais pequenos, como pedido */
  width: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8));
  /* a chama: um brilho quente a tremular, como lume vivo */
  animation: chama-arde 2.8s ease-in-out infinite;
}
@keyframes chama-arde {
  0%, 100% { filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(242, 122, 32, .38)) }
  18%      { filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(255, 154, 40, .55)) }
  41%      { filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(226, 98, 20, .32)) }
  63%      { filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(255, 140, 46, .5)) }
  82%      { filter: drop-shadow(0 6px 18px rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(238, 110, 26, .4)) }
}
@media (prefers-reduced-motion: reduce) { .bottom-left, .bottom-right { animation: none } }
.bottom-left  { left:  clamp(4px, 2vw, 40px) }
.bottom-right { right: clamp(4px, 2vw, 40px) }

@media (max-width: 700px) {
  /* telemóvel: só a imagem da esquerda, como pedido */
  .bottom-right { display: none }
  .bottom-left { max-height: clamp(110px, 20vh, 180px) }
}

/* §4 — O player ======================================================== */
/* Nasce escondido. Quando algo toca, ganha .ativo e sobe com fade-up. */
.player {
  /* Flutua sobre a página: fixo ao browser, centrado, a 40px do fundo.
     A página rola; ele fica. Entra em slide+fade up; sai em slide+fade down
     (a mesma transition serve os dois sentidos ao tirar o .ativo). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  margin-inline: auto;
  z-index: 80;   /* acima de tudo na página; só a letra (90) e o vídeo (95) o cobrem */
  display: flex;
  align-items: center;
  gap: .9rem;
  width: min(720px, calc(100% - 2rem)); /* 100% (não 100vw): 100vw inclui a
                                           scrollbar do desktop e criava a
                                           barra preta à direita no browser */
  padding: .7rem 1rem;
  background:
    linear-gradient(#1a110a, #0b0705);
  border: 1px solid #6b4a22;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(216, 162, 68, .18);

  opacity: 0;
  transform: translateY(46px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .25, 1);
  pointer-events: none;
}
.player.ativo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.player-cover {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #4a3418;
}
.player-info { min-width: 130px; line-height: 1.3 }
.player-info strong { display: block; font-family: 'Ringbearer', 'Cinzel', serif; font-size: .92rem; color: #f2e8d4 }
.player-info small  { color: #c0392b; font-size: .72rem }

.controls { display: flex; align-items: center; gap: .35rem }
.controls button {
  background: none;
  border: 0;
  color: #d8aa5c;
  font-size: 1.05rem;
  padding: .25rem .4rem;
  cursor: pointer;
  transition: color .2s, transform .2s;
}
.controls button:hover { color: #f2e8d4; transform: scale(1.12) }
.controls .play {
  width: 44px;
  height: 44px;
  border: 1px solid #a9231d;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
}
.controls .play:hover { background: #a9231d }

/* §5 — Onda + progresso + volume ====================================== */
.player-meio { flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: .3rem }

.onda-canvas {
  width: 100%;
  height: 30px;
  display: block;
}

.progresso-barra {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #241708;
  border: 1px solid #3a2313;
  cursor: pointer;
}
.progresso-feito {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #a9231d, #f25a2a);
  box-shadow: 0 0 8px rgba(242, 90, 42, .6);
  transition: width .15s linear;
}

.volume-zona { display: flex; align-items: center; gap: .3rem }
.volume-zona input[type="range"] {
  width: 74px;
  accent-color: #f25a2a;
  cursor: pointer;
}
@media (max-width: 700px) {
  .player-info { display: none }
  .volume-zona input[type="range"] { width: 52px }
}

.btn-letra {
  font-family: 'Ringbearer', 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d8a244;
  background: #160d08;
  border: 1px solid #6b4a22;
  border-radius: 4px;
  padding: .45rem .7rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-letra:hover { border-color: #d8a244; color: #f2e8d4 }
.btn-letra[hidden] { display: none }

.player-fechar {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #1a110a;
  border: 1px solid #6b4a22;
  border-radius: 50%;
  color: #d8a244;
  font-size: .8rem;
  cursor: pointer;
}
.player-fechar:hover { color: #fff; border-color: #d8a244 }

/* §6 — Painel lateral da letra ======================================== */
.letra-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 2, 1, .6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.letra-overlay.aberta { opacity: 1; pointer-events: auto }

.letra-painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(440px, 92vw);
  padding: 2.2rem 1.8rem;
  overflow-y: auto;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.12) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #1d1209, #0d0805);
  border-left: 1px solid #6b4a22;
  box-shadow: -22px 0 60px rgba(0, 0, 0, .85);
  transform: translateX(105%);
  transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}
.letra-overlay.aberta + .letra-painel,
.letra-painel.aberta { transform: none }

.letra-painel h3 {
  font-family: 'Ringbearer', 'Cinzel', serif;
  color: #f2e8d4;
  font-size: 1.3rem;
  margin: 0 0 1rem;
  padding-right: 2.2rem;
}
.letra-painel pre {
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: .9rem;
  line-height: 1.9;
  color: #d9cbb2;
  white-space: pre-line;   /* quebras de linha = estrofes (contrato §5) */
  margin: 0;
}
.letra-fechar,
.video-fechar {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid #6b4a22;
  border-radius: 50%;
  color: #d8a244;
  font-size: 1.1rem;
  cursor: pointer;
}
.letra-fechar:hover, .video-fechar:hover { color: #fff; border-color: #d8a244 }

/* §7 — Modal de vídeo ================================================= */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(3, 2, 1, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.video-overlay.aberta { opacity: 1; pointer-events: auto }

.video-caixa {
  position: relative;
  width: min(960px, 100%);
  background: #000;
  border: 1px solid #6b4a22;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .95);
  transform: scale(.94);
  transition: transform .3s;
}
.video-overlay.aberta .video-caixa { transform: none }

/* youtube (16:9) */
.video-caixa.formato-video { aspect-ratio: 16 / 9 }
/* instagram / tiktok (vertical) */
.video-caixa.formato-vertical {
  width: min(400px, 92vw);
  aspect-ratio: 9 / 16;
  max-height: 88vh;
}
.video-caixa iframe,
.video-caixa video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}
.video-fechar { top: -14px; right: -14px; z-index: 2 }

/* §8 — Menos movimento ================================================ */
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .site-header a:hover .brand-logo { animation: none }
  .player { transition: opacity .2s }
  .letra-painel { transition: none }
}

/* §9 — Menu de placas (PROCESSO_MENU_PICA_TUMILHO) ==================== */
.menu-pica {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  align-items: stretch;
  gap: 12px;
  width: min(1400px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 24px;
}
.menu-pica__item {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 2 / 3;
  /* Só a placa de madeira — sem gradiente por baixo, sem contorno, sem
     border-radius: o recorte da imagem é a forma do item. */
  background: url("/uploads/images/menu/placa_madeira_base.webp") center / contain no-repeat;
  text-decoration: none;
  transform-origin: center;
  transition: transform 220ms ease, filter 220ms ease;
}
.menu-pica__item img {
  display: block;
  width: var(--icone, 88%);
  height: var(--icone, 88%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: transform 220ms ease, filter 220ms ease;
}
.menu-pica__item:hover,
.menu-pica__item:focus-visible {
  z-index: 2;
  transform: translateY(-6px) scale(1.025);
  filter: brightness(1.12);
}
.menu-pica__item:hover img,
.menu-pica__item:focus-visible img {
  transform: scale(1.035);
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 45%));
}
.menu-pica__item:focus-visible { outline: 2px solid #c98a36; outline-offset: 4px }

@media (max-width: 1100px) { .menu-pica { grid-template-columns: repeat(4, minmax(130px, 1fr)) } }
@media (max-width: 700px)  { .menu-pica { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px } }
@media (max-width: 390px)  { .menu-pica { grid-template-columns: 1fr; width: min(260px, calc(100% - 24px)) } }
@media (prefers-reduced-motion: reduce) {
  .menu-pica__item, .menu-pica__item img { transition: none }
}

/* §10 — Slider por contrato (texto POR SLIDE, sobreposta, countdown) ==== */
/* A .hero-copy vive agora dentro de cada .hero-slide: só a do ativo se vê. */
.hero-slide .hero-copy {
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .15s;
}
.hero-slide.active .hero-copy {
  opacity: 1;
  pointer-events: auto;
}
.hero-copy .titulo-b {
  font-family: 'Ringbearer', 'Cinzel', serif;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  margin: .1em 0 0;
}
/* a imagem sobreposta ao fundo (bgOver=1 + fotoMid), centrada; --w = % */
.hero-foto-mid {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--w, auto);
  max-width: 86%;
  max-height: 78%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .7));
}
.hero-count {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: .5rem 0;
}
.hero-count-txt { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #d8a244 }
.hero-count-num { font-family: 'Cinzel', serif; font-size: clamp(1.1rem, 2.4vw, 1.7rem); color: #f2e8d4 }
.hero-botoes { display: flex; gap: .7rem; flex-wrap: wrap }
/* btn1bg=1: "link no bg" — sem caixa de botão */
.hero-cta--link {
  background: none !important;
  border: 0 !important;
  padding: .4rem 0 !important;
  text-decoration: underline;
  text-underline-offset: 5px;
}


/* §11 — Footer sem espaço + faíscas fixas + modal da história ========== */
/* O footer não tem conteúdo no fluxo (player, laterais: tudo fixed) —
   a secção colapsa para não deixar um vazio no fundo da página. */
.section.bottom { padding: 0 !important; min-height: 0 !important }
.section.bottom .texture-noise { display: none }

/* as faíscas sobem presas ao ecrã, como o fundo — a página rola, elas não */
.embers {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* modal da história — a mesma família do modal de vídeo, mas texto rolável */
.historia-overlay {
  position: fixed;
  inset: 0;
  z-index: 93;               /* acima do player (80); sob o vídeo (95) */
  display: grid;
  place-items: center;
  padding: 5vh 4vw;
  background: rgba(3, 2, 1, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.historia-overlay.aberta { opacity: 1; pointer-events: auto }
.historia-caixa {
  position: relative;
  width: min(680px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem 1.4rem;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.12) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #1d1209, #0d0805);
  border: 1px solid #6b4a22;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .95);
  transform: scale(.94);
  transition: transform .3s;
}
.historia-overlay.aberta .historia-caixa { transform: none }
.historia-caixa h3 {
  font-family: 'Ringbearer', 'Cinzel', serif;
  color: #f2e8d4;
  font-size: 1.4rem;
  margin: 0 0 .9rem;
  padding-right: 2rem;
}
.historia-texto {
  overflow-y: auto;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: .92rem;
  line-height: 1.85;
  color: #d9cbb2;
}
.historia-texto p { margin: 0 0 .9em }


/* §12 — A pilha (de baixo para cima), como pedido:
   plugins (cartas 2 / atalhos) → laterais lanterna+pipo (4) → player (80)
   → letra (90) → vídeo (95) → menu mobile (120, só mobile).
   A história (93) fica entre a letra e o vídeo. */

/* Títulos do slider mais ACIMA: as cartas sobem para dentro do hero
   (margin-top negativo) e tapavam a .hero-copy. Sobe o texto acima da
   zona invadida. */
.hero-slide .hero-copy {
  bottom: clamp(210px, 22vw, 330px);
  top: auto;
}
@media (max-width: 700px) {
  .hero-slide .hero-copy { bottom: clamp(170px, 34vw, 260px) }
}


/* §13 — A pilha com regras REAIS (não só documentação) ================= */
.section.music, .section.portal { position: relative; z-index: 2 }
.section.hero { position: relative; z-index: 1 }
.bottom-left, .bottom-right { z-index: 10 }   /* laterais ACIMA dos plugins */
/* player 80 · letra 90 · história 93 · vídeo 95 · menu mobile 120 — já definidos */

/* §14 — Atalhos com o MÍNIMO de altura ================================ */
.section.portal { padding-block: clamp(.8rem, 2vw, 1.6rem) !important }
/* ...mas se não houver secção a seguir, dá folga em baixo (antes do footer) */
.page-content > .section.portal:last-child { padding-bottom: clamp(2.5rem, 7vw, 5rem) !important }
.section.portal .title { margin-block: 0 .6rem }
.menu-pica {
  padding-block: 6px;
  gap: 10px;
  width: min(1080px, calc(100% - 32px));
  grid-template-columns: repeat(7, minmax(96px, 132px));
  justify-content: center;
}

/* §15 — Footer: caixa NENHUMA ========================================= */
/* display:contents apaga a caixa da secção (altura zero no fluxo) mas os
   filhos position:fixed (player, laterais, faíscas) continuam vivos. */
.section.bottom { display: contents }

/* §16 — O fundo geral, blindado ======================================= */
/* Nada pode tapar o body::before: nem background do html/body vindos do
   site.css, nem um main/página com fundo próprio. */
/* Cor de recurso por baixo da imagem (enquanto carrega, e nas bordas).
   NÃO pôr background-image aqui: a imagem vive no body::before, que é fixo
   ao ecrã — é isso que a mantém igual em todas as secções. */
html { background-color: #080503 }
body { background-color: transparent }
main, .page-content { background: transparent !important }


/* ═══════════════════════════════════════════════════════════════════════
   §18 — Secção Contactos (home)  ·  classes novas (não existiam no site)
   Acrescentar ao fim do site-layout.css. Fontes (Cinzel/Roboto Slab) e o
   Font Awesome já são carregados pelo site. A secção NÃO leva fundo próprio
   (o site força .section{background:transparent!important}); os cartões sim.
   ═══════════════════════════════════════════════════════════════════════ */
.sec-contactos    { padding: clamp(3rem, 7vw, 6rem) 1.2rem; }
.sec-contactos-in { max-width: 1080px; margin: 0 auto; }

@keyframes cfade { from { opacity: 0; transform: translateY(16px) } }

/* Cabeçalho + barras de som em CSS (substitui o antigo sound-bars.png) */
.contactos-cabec    { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); animation: cfade .7s ease backwards; }
.contactos-barras   { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; margin-bottom: .9rem; }
.contactos-barras i { width: 4px; background: #d8a244; border-radius: 2px; animation: cbar 1.1s ease-in-out infinite; }
.contactos-barras i:nth-child(1) { height: 40%;  animation-delay: 0s }
.contactos-barras i:nth-child(2) { height: 100%; animation-delay: .15s }
.contactos-barras i:nth-child(3) { height: 60%;  animation-delay: .3s }
.contactos-barras i:nth-child(4) { height: 85%;  animation-delay: .45s }
.contactos-barras i:nth-child(5) { height: 50%;  animation-delay: .6s }
@keyframes cbar { 50% { transform: scaleY(.45) } }

.contactos-eyebrow { display: block; font-family: 'Roboto Slab', serif; text-transform: uppercase; letter-spacing: .32em; font-size: .78rem; color: #d8a244; margin-bottom: .5rem; }
.contactos-titulo  { font-family: 'Cinzel', serif; text-transform: uppercase; font-size: clamp(2rem, 5.5vw, 3.3rem); line-height: 1.05; margin: 0; color: #ece0c7; letter-spacing: .02em; }

/* Cartões de contacto */
.contactos-grid { list-style: none; margin: 0 0 clamp(2.4rem, 5vw, 3.4rem); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.contacto-card  { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.8rem 1.3rem; background: linear-gradient(rgba(30,20,12,.6), rgba(10,6,3,.66)); border: 1px solid #6b4a22; border-radius: 14px; box-shadow: 0 12px 26px rgba(0,0,0,.4); animation: cfade .7s ease backwards; transition: transform .25s, border-color .25s, box-shadow .25s; }
.contacto-card:nth-child(1) { animation-delay: .08s }
.contacto-card:nth-child(2) { animation-delay: .16s }
.contacto-card:nth-child(3) { animation-delay: .24s }
.contacto-card:hover { transform: translateY(-4px); border-color: #d8a244; box-shadow: 0 16px 34px rgba(0,0,0,.55); }
.contacto-papel { font-family: 'Roboto Slab', serif; text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: #d8a244; }
.contacto-nome  { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #ece0c7; margin: .1rem 0 .5rem; font-weight: 600; }
.contacto-linha { font-family: 'Roboto Slab', serif; font-size: .98rem; color: #c9b590; text-decoration: none; transition: color .2s; word-break: break-word; }
.contacto-linha:hover { color: #d8a244; }

/* Redes (discos âmbar, iguais aos do header) */
.contactos-redes   { display: flex; justify-content: center; flex-wrap: wrap; gap: .85rem; animation: cfade .7s .3s ease backwards; }
.contactos-redes a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.4); border: 1px solid #6b4a22; color: #d8a244; font-size: 1.05rem; text-decoration: none; transition: transform .2s, color .2s, border-color .2s, background .2s; }
.contactos-redes a:hover { transform: translateY(-3px); border-color: #d8a244; background: rgba(216,162,68,.14); }

@media (max-width: 820px) { .contactos-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .contactos-cabec, .contacto-card, .contactos-redes, .contactos-barras i { animation: none } }


/* ═══════════════════════════════════════════════════════════════════════
   §19 — Página "A Banda" (bio · membros · plataformas) · classes novas
   Acrescentar ao fim do site-layout.css. Fontes e Font Awesome já vêm do
   site. As secções não levam fundo próprio (regra .section transparente);
   os cartões sim.
   ═══════════════════════════════════════════════════════════════════════ */
.sobre-in    { max-width: 1080px; margin: 0 auto; padding: 0 1.2rem; }
.sobre-bio, .sobre-membros, .sobre-ouvir { padding: clamp(3rem, 7vw, 6rem) 0; }

@keyframes sfade { from { opacity: 0; transform: translateY(16px) } }

/* Cabeçalho comum às 3 secções */
.sobre-cabec   { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); animation: sfade .7s ease backwards; }
.sobre-eyebrow { display: block; font-family: 'Roboto Slab', serif; text-transform: uppercase; letter-spacing: .32em; font-size: .78rem; color: #d8a244; margin-bottom: .5rem; }
.sobre-titulo  { font-family: 'Cinzel', serif; text-transform: uppercase; font-size: clamp(2rem, 5.5vw, 3.3rem); line-height: 1.05; margin: 0; color: #ece0c7; letter-spacing: .02em; }

/* 1 — Bio */
.sobre-bio-corpo { max-width: 760px; margin: 0 auto; text-align: center; animation: sfade .7s .05s ease backwards; }
.sobre-bio-corpo p { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 1.05rem; line-height: 1.85; color: #cbb994; margin: 0 0 1.2rem; }
.sobre-bio-corpo p:first-of-type { text-align: left; }
.sobre-bio-corpo p:first-of-type::first-letter { font-family: 'Cinzel', serif; font-size: 3.4rem; line-height: .8; float: left; margin: .1rem .6rem 0 0; color: #d8a244; }
.sobre-assinatura { display: block; max-width: 210px; margin: 1.8rem auto 0; opacity: .9; }

/* 2 — Membros */
.sobre-membros-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); }
.membro-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(rgba(30,20,12,.6), rgba(10,6,3,.66)); border: 1px solid #6b4a22; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.4); animation: sfade .7s ease backwards; transition: transform .25s, border-color .25s, box-shadow .25s; }
.membro-card:hover { transform: translateY(-4px); border-color: #d8a244; box-shadow: 0 16px 34px rgba(0,0,0,.55); }
.membro-card:nth-child(1){ animation-delay:.06s } .membro-card:nth-child(2){ animation-delay:.14s } .membro-card:nth-child(3){ animation-delay:.22s }
.membro-card:nth-child(4){ animation-delay:.3s }  .membro-card:nth-child(5){ animation-delay:.38s } .membro-card:nth-child(6){ animation-delay:.46s }
.membro-foto  { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; filter: saturate(.92) contrast(1.02); }
.membro-foto-vazia { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 25%, #241812, #0c0805 78%); color: #6b4a22; }
.membro-foto-vazia i { font-size: 3.4rem; }
.membro-nome  { font-family: 'Cinzel', serif; font-size: 1.25rem; color: #ece0c7; margin: .9rem 0 .1rem; }
.membro-papel { font-family: 'Roboto Slab', serif; text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; color: #d8a244; margin-bottom: 1rem; }

/* 3 — Ouvir / Comprar */
.sobre-plataformas { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 18px); }
.plataforma { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.4rem 1rem; background: rgba(0,0,0,.35); border: 1px solid #6b4a22; border-radius: 14px; color: #d8a244; text-decoration: none; animation: sfade .7s ease backwards; transition: transform .2s, border-color .2s, background .2s; }
.plataforma:hover { transform: translateY(-4px); border-color: #d8a244; background: rgba(216,162,68,.12); }
.plataforma i { font-size: 1.8rem; }
.plataforma span { font-family: 'Roboto Slab', serif; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: #c9b590; }

@media (max-width: 820px) {
  .sobre-membros-grid { grid-template-columns: repeat(2, 1fr); }
  .sobre-plataformas  { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sobre-cabec, .sobre-bio-corpo, .membro-card, .plataforma { animation: none }
}

/* §17 — Vídeo por slide =============================================== */
/* O vídeo cobre a foto do slide enquanto corre; ao acabar (evento ended,
   sem loop) perde .a-tocar e desvanece, ficando a foto — que esteve sempre
   por baixo e é também o poster. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 1;               /* sobre a <img> do slide, sob a .hero-copy */
}
.hero-video.a-tocar { opacity: 1 }

/* o texto e os botões ficam POR CIMA do vídeo — é o fundo que muda */
.hero-slide .hero-copy { z-index: 3 }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none }   /* fica a foto */
}

/* §20 — Galeria (fotos + vídeos) ====================================== */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
}
.galeria-item {
  position: relative;
  aspect-ratio: 9 / 16;          /* thumbs verticais, grelha regular */
  padding: 0;
  overflow: hidden;
  border: 1px solid #6b4a22;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .22s, border-color .22s;
}
.galeria-item:hover,
.galeria-item:focus-visible { transform: translateY(-4px); border-color: #d8a244; z-index: 2 }
.galeria-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.galeria-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8, 5, 3, .6);
  border: 1px solid #d8a244;
  color: #f2e8d4;
  font-size: 1rem;
  pointer-events: none;
}
.galeria-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .5rem .6rem;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: .7rem;
  color: #f2e8d4;
  text-align: left;
  background: linear-gradient(transparent, rgba(4, 2, 1, .85));
  pointer-events: none;
}

/* modal da galeria — próprio, para não colidir com o vídeo das cartas */
.galeria-overlay {
  position: fixed;
  inset: 0;
  z-index: 94;                   /* entre a história (93) e o vídeo (95) */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 5vh 3vw;
  background: rgba(3, 2, 1, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.galeria-overlay.aberta { opacity: 1; pointer-events: auto }
.galeria-palco {
  display: grid;
  place-items: center;
  max-height: 90vh;
}
.galeria-palco img,
.galeria-palco video {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .9);
}
.galeria-nav, .galeria-fechar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: rgba(8, 5, 3, .6);
  border: 1px solid #6b4a22;
  border-radius: 50%;
  color: #d8a244;
  font-size: 1.3rem;
  cursor: pointer;
}
.galeria-nav:hover, .galeria-fechar:hover { color: #fff; border-color: #d8a244 }
.galeria-fechar { position: absolute; top: 3vh; right: 3vw; font-size: 1.1rem }

@media (max-width: 640px) {
  .galeria-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px }
  .galeria-overlay { grid-template-columns: 1fr; padding: 8vh 4vw }
  .galeria-nav { position: absolute; bottom: 3vh }
  .galeria-nav.prev { left: 6vw } .galeria-nav.next { right: 6vw }
}