/* ==========================================================================
   Picä Tumilho — template "taberna"
   Bootstrap 5 (local) + este ficheiro. Ordem: bootstrap → fonts.css → taberna.css

   Ideia: a página é o interior de uma taberna à noite. Correntes de ferro nas
   ombreiras, madeira e brasa por todo o lado, e a única luz é a da candeia do
   canto. Tudo o que não é foto é feito em CSS — não há uma única textura .jpg
   de fundo.
   ========================================================================== */

/* §1 — Tokens ============================================================ */
:root {
  /* cor — vinda do mockup */
  --bg:      #090705;   /* noite */
  --panel:   #15100c;   /* madeira à sombra */
  --panel2:  #20150d;   /* madeira à luz */
  --gold:    #d8a244;   /* dourado das molduras */
  --cream:   #f2e8d4;   /* linho dos títulos */
  --red:     #a9231d;   /* o vermelho dos botões */
  --ember:   #f25a2a;   /* brasa */
  --text:    #ded0b7;
  --muted:   #a28d71;
  --border:  #5a3519;

  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --corpo:   'Roboto Slab', Georgia, serif;

  --corrente: 44px;     /* largura das correntes laterais */
  --nav-h:    86px;
  --player-h: 78px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* §2 — Base ============================================================== */
* { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(153, 50, 18, .18), transparent 38%),
    radial-gradient(circle at 8% 92%, rgba(255, 150, 40, .10), transparent 26%),
    radial-gradient(circle at 94% 90%, rgba(242, 90, 42, .12), transparent 24%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--corpo);
  overflow-x: hidden;
  padding-bottom: var(--player-h);
}

/* grão de filme */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

/* vinheta — fecha os cantos, como no mockup */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(125% 95% at 50% 45%, transparent 42%, rgba(6, 4, 3, .82) 100%);
}

a { text-decoration: none }
img { max-width: 100% }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.salta-nav { position: absolute; left: -9999px; z-index: 200; padding: .6rem 1rem; background: var(--red); color: #fff }
.salta-nav:focus { left: 1rem; top: 1rem }

/* §3 — Correntes das ombreiras ========================================== */
/* Um SVG que se repete na vertical. Encostadas ao bordo, com sombra para a
   página parecer pendurada nelas. */
.corrente {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--corrente);
  z-index: 40;
  pointer-events: none;
  background: url('../img/corrente.svg') repeat-y center top;
  background-size: var(--corrente) 64px;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, .95));
}
.corrente--esq { left: 0 }
.corrente--dir { right: 0 }

/* a madeira das ombreiras, por trás da corrente */
.corrente::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #16100a, #2a1c11 45%, #0d0906);
  border-right: 1px solid #3a2414;
  z-index: -1;
}
.corrente--dir::before { border-right: 0; border-left: 1px solid #3a2414 }

/* §4 — Ornamentos fixos (candeeiro, pipo) ============================== */
/* Recortados do mockup. Fora do fluxo, sem eventos: são cenário.
   Escondem-se em ecrãs estreitos — no telemóvel roubavam metade da página. */
.ornamento {
  position: fixed;
  bottom: 0;
  z-index: 35;
  pointer-events: none;
  user-select: none;
}
.ornamento--candeeiro {
  left: calc(var(--corrente) - 6px);
  width: clamp(120px, 13vw, 205px);
}
.ornamento--pipo {
  right: calc(var(--corrente) - 10px);
  width: clamp(130px, 14vw, 225px);
}
/* o halo da chama: o brilho é CSS, a imagem é só o objeto */
.ornamento--candeeiro::after,
.ornamento--pipo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: bruxulear 3.4s ease-in-out infinite;
}
.ornamento--candeeiro::after {
  left: 14%; top: 26%; width: 46%; height: 26%;
  background: radial-gradient(circle, rgba(255, 190, 90, .55), transparent 70%);
}
.ornamento--pipo::after {
  left: 20%; top: 2%; width: 62%; height: 32%;
  background: radial-gradient(circle, rgba(255, 120, 40, .5), transparent 70%);
  animation-duration: 2.2s;
}
@keyframes bruxulear {
  0%, 100% { opacity: .75; transform: scale(1) }
  40%      { opacity: 1;   transform: scale(1.08) }
  70%      { opacity: .6;  transform: scale(.95) }
}

@media (max-width: 1199px) {
  .ornamento { display: none }
}

/* §5 — Navegação ======================================================== */
.taberna-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--nav-h);
  padding-inline: calc(var(--corrente) + 8px);
  background: linear-gradient(180deg, rgba(7, 5, 4, .98) 60%, rgba(7, 5, 4, .82));
  border-bottom: 1px solid #3c2414;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .9);
}

/* o medalhão sai da barra e assenta por cima, como no mockup */
.nav-medalhao {
  position: absolute;
  top: -2px;
  left: calc(var(--corrente) - 14px);
  width: clamp(84px, 8vw, 132px);
  z-index: 2;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .9));
}

.nav-marca {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.7vw, 2.9rem);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cream);
  text-shadow: 0 3px 0 #000, 0 0 26px rgba(231, 116, 37, .35);
  line-height: 1;
  white-space: nowrap;
}

.nav-lista {
  display: flex;
  gap: clamp(.5rem, 1.4vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-lista a {
  font-family: var(--display);
  font-size: clamp(.72rem, .9vw, .95rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ddcba9;
  position: relative;
  padding: .3rem 0;
  white-space: nowrap;
  transition: color .18s;
}
.nav-lista a:hover { color: #fff0d2 }
.nav-lista a.is-on { color: var(--cream) }
.nav-lista a.is-on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 8px var(--ember);
}

.nav-redes { display: flex; gap: .55rem }
.nav-redes a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 5px;
  font-size: .8rem;
  color: #fff;
  transition: transform .18s, box-shadow .18s;
}
.nav-redes a:hover { transform: translateY(-2px); box-shadow: 0 0 12px currentColor }
.rede-yt { background: #ff0000 }
.rede-fb { background: #1877f2 }
.rede-ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) }
.rede-sp { background: #1db954 }

.nav-abrir {
  background: none;
  border: 1px solid #72502c;
  border-radius: 4px;
  color: var(--gold);
  padding: .3rem .6rem;
}

/* §6 — Hero / slider principal ========================================= */
/* Comporta-se como a imagem 2: foto a sangrar, título ao centro, lema por
   baixo. O mockup tem três painéis lado a lado; aqui é um slide de cada vez,
   que é o que a BD dá (site_slider). */
.palco {
  position: relative;
  margin-inline: var(--corrente);
  border-bottom: 3px solid #38200f;
  overflow: hidden;
}
.palco-slide {
  position: relative;
  min-height: clamp(380px, 62vh, 660px);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center 46%;
}
.palco.tem-varios .palco-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s;
}
.palco.tem-varios .palco-slide:first-child { position: relative; visibility: visible }
.palco.tem-varios .palco-slide.is-on { opacity: 1; visibility: visible }

.palco-sombra {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--bg) 2%, rgba(8, 5, 3, .55) 28%, transparent 60%),
    radial-gradient(60% 55% at 50% 52%, transparent 35%, rgba(6, 4, 3, .6) 100%);
}
.palco-brasas {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 66% 52%, rgba(255, 95, 25, .22), transparent 22%);
  mix-blend-mode: screen;
}

.palco-texto {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
}
.palco-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.6vw, 6.4rem);
  letter-spacing: .04em;
  color: var(--cream);
  margin: 0;
  line-height: .95;
  text-shadow: 0 4px 2px rgba(0, 0, 0, .9), 0 0 40px rgba(231, 116, 37, .3);
}
.palco-lema {
  font-family: var(--display);
  font-size: clamp(.7rem, 1.1vw, .95rem);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.1rem 0 0;
  text-shadow: 0 2px 6px #000;
}
.palco-botoes { margin-top: 1.6rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap }

/* a tabuleta de madeira — canto esquerdo, torta, como no mockup */
.tabuleta {
  position: absolute;
  left: clamp(1rem, 3vw, 3.5rem);
  top: clamp(1rem, 6vh, 4rem);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  transform: rotate(-3deg);
  padding: .8rem 1.6rem;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.16) 0 2px, transparent 2px 9px),
    linear-gradient(#5d3a21, #2a170c);
  border: 4px solid #160b05;
  box-shadow: 0 0 0 2px #79502b, 0 16px 38px rgba(0, 0, 0, .9);
  color: #f4e8cc;
  text-align: center;
  font-family: var(--display);
}
.tabuleta span   { font-size: clamp(.7rem, 1vw, .95rem); letter-spacing: .2em }
.tabuleta strong { font-size: clamp(1.1rem, 1.9vw, 1.9rem); line-height: 1; letter-spacing: .04em }

.palco-pontos {
  position: absolute;
  bottom: 1.1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; gap: .5rem;
}
.palco-pontos button {
  width: 9px; height: 9px; padding: 0;
  border: 1px solid var(--cream);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.palco-pontos button.is-on { background: var(--red); border-color: var(--ember); transform: scale(1.3) }

/* §7 — Carrossel de cartas ============================================= */
/* Scroll-snap horizontal. 7 cartas cabem num ecrã largo; abaixo disso o
   número baixa sozinho — não há media query a contar cartas. */
.cartas-zona {
  position: relative;
  margin-inline: var(--corrente);
  padding: clamp(1.2rem, 3vh, 2.4rem) 0;
  background: linear-gradient(180deg, rgba(12, 8, 6, .9), rgba(9, 7, 5, .4));
}
.cartas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, calc((100vw - 2 * var(--corrente) - 5rem) / 7), 210px);
  gap: .7rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .5rem clamp(.8rem, 2.5vw, 2.4rem);
  scrollbar-width: none;
}
.cartas::-webkit-scrollbar { display: none }

.carta {
  scroll-snap-align: center;
  perspective: 1200px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.carta-face {
  position: relative;
  aspect-ratio: 3 / 4.4;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
/* O rato vira a carta; o teclado também (o :focus-within apanha o <a> de trás). */
.carta:hover .carta-face,
.carta:focus-visible .carta-face,
.carta.is-virada .carta-face { transform: rotateY(180deg) }

.carta-frente,
.carta-verso {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 2px solid #6b4a22;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #2a1a0e, 0 16px 34px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.carta-frente { background: #120c08 }
.carta-frente img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.86) sepia(.16);
  transition: filter .5s;
}
.carta:hover .carta-frente img { filter: brightness(1) sepia(0) }

/* moldura dourada por dentro, como as cartas do mockup */
.carta-frente::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(216, 162, 68, .45);
  pointer-events: none;
}
.carta-topo {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: .5rem .4rem .8rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(9, 6, 4, .96) 55%, transparent);
}
.carta-nome {
  font-family: var(--display);
  font-size: clamp(.62rem, .82vw, .8rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  line-height: 1.25;
}
.carta-tempo { font-size: .68rem; color: var(--gold) }

.carta-play {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--red);
  background: rgba(0, 0, 0, .6);
  color: #fff;
  display: grid; place-items: center;
  transition: background .18s, transform .18s;
}
.carta-play:hover { background: var(--red); transform: translateX(-50%) scale(1.12) }

.carta-rodape {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: .45rem;
  text-align: center;
  font-family: var(--display);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(0deg, rgba(9, 6, 4, .96) 55%, transparent);
}

/* O verso: o texto que estava "por trás". */
.carta-verso {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.13) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #2b1d11, #140d08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: .9rem .8rem;
  text-align: center;
}
.carta-verso h3 {
  font-family: var(--display);
  font-size: clamp(.66rem, .85vw, .82rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.carta-verso p {
  font-size: clamp(.6rem, .72vw, .72rem);
  line-height: 1.5;
  color: #d2c4ac;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}
.carta-verso .carta-link {
  font-family: var(--display);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  border-top: 1px solid rgba(216, 162, 68, .3);
  padding-top: .5rem;
}

/* setas do carrossel */
.cartas-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 34px; height: 60px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(9, 6, 4, .9));
  color: var(--gold);
  font-size: 1.4rem;
  cursor: pointer;
}
.cartas-seta--esq { left: 0; background: linear-gradient(-90deg, transparent, rgba(9, 6, 4, .9)) }
.cartas-seta--dir { right: 0 }
.cartas-seta[disabled] { opacity: .2; cursor: default }

/* §8 — Tabuletas dos atalhos ========================================== */
.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: .5rem;
  margin-inline: calc(var(--corrente) + clamp(.5rem, 2vw, 2rem));
  padding-bottom: clamp(1rem, 3vh, 2rem);
}
.atalho {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .7rem .4rem .6rem;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.14) 0 2px, transparent 2px 8px),
    linear-gradient(#251708, #120b06);
  border: 1px solid #40270f;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(216, 162, 68, .12), 0 8px 20px rgba(0, 0, 0, .7);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.atalho:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(216, 162, 68, .25), 0 0 24px rgba(242, 90, 42, .28);
}
.atalho img {
  width: clamp(46px, 4.5vw, 68px);
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .8));
}
.atalho span {
  font-family: var(--display);
  font-size: clamp(.62rem, .8vw, .82rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
}

/* §9 — Leitor ========================================================= */
.leitor {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: min(760px, calc(100vw - 2 * var(--corrente) - 2rem));
  height: var(--player-h);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem 1rem;
  background: linear-gradient(#191007, #0a0705);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(216, 162, 68, .15);
}
.leitor-capa { width: 48px; height: 48px; object-fit: cover; border: 1px solid #4a3418; border-radius: 3px }
.leitor-info { min-width: 120px; display: flex; flex-direction: column; line-height: 1.25 }
.leitor-titulo { font-family: var(--display); font-size: .82rem; color: var(--cream) }
.leitor-sub { font-size: .68rem; color: var(--red) }

.leitor-btn {
  background: none; border: 0;
  color: #d8aa5c;
  font-size: 1.1rem;
  padding: .2rem .35rem;
  transition: color .18s;
}
.leitor-btn:hover { color: var(--cream) }
.leitor-btn.tocar {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--red);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.leitor-btn.tocar:hover { background: var(--red) }

.onda {
  flex: 1;
  height: 26px;
  min-width: 60px;
  opacity: .75;
  background: repeating-linear-gradient(90deg,
    var(--red) 0 2px, transparent 2px 5px, var(--gold) 5px 6px, transparent 6px 10px);
  mask-image: linear-gradient(90deg, #000 0 55%, rgba(0,0,0,.25) 55% 100%);
}

.leitor-som {
  display: flex; align-items: center; gap: .4rem;
  background: linear-gradient(#241708, #100a06);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--gold);
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .7rem;
  white-space: nowrap;
}
.leitor-som:hover { border-color: var(--gold); color: var(--cream) }

/* §10 — Páginas interiores ============================================ */
.pagina {
  margin-inline: var(--corrente);
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 3rem);
}
.pagina-cabeca {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(1.6rem, 4vh, 3rem);
}
.olho {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 .3rem;
}
.pagina-cabeca h1,
.pagina-cabeca h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  letter-spacing: .04em;
  color: var(--cream);
  margin: 0 0 .6rem;
}
.pagina-cabeca p { color: var(--muted); margin: 0 }

.forjado {
  height: 1px;
  border: 0;
  margin: clamp(1.5rem, 4vh, 3rem) auto;
  max-width: 460px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--gold) 50%, var(--border) 80%, transparent);
  opacity: .65;
}

.btn-pt, .btn-pt-ghost {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: .68rem 1.3rem;
}
.btn-pt { background: var(--red); color: #fff; border: 1px solid #e04b37 }
.btn-pt:hover { background: #c43229; color: #fff }
.btn-pt-ghost { border: 1px solid var(--gold); color: var(--cream); background: rgba(0, 0, 0, .5) }
.btn-pt-ghost:hover { background: var(--gold); color: #160d07 }

/* história (uma por canção) */
.historia {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(2rem, 6vh, 4rem);
  border-bottom: 1px solid #3d2515;
}
.historia:last-child { border-bottom: 0 }
.historia--troca > img { order: 2 }
.historia img {
  width: 100%;
  height: clamp(280px, 40vh, 420px);
  object-fit: cover;
  border: 2px solid #57351c;
  border-radius: 2px;
}
.historia h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  color: var(--cream);
  margin: 0 0 .3rem;
}
.historia .tempo { color: var(--gold); font-size: .8rem }
.historia p { line-height: 1.85; color: #c6b79f }

/* grelhas genéricas (galeria, vídeos, loja) */
.grelha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem;
}
.grelha-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #4a2d16;
  border-radius: 2px;
}
.grelha-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease) }
.grelha-item:hover img { transform: scale(1.06) }

/* agenda */
.data-linha {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid #3a2313;
  border-radius: 2px;
  background: linear-gradient(#160e08, #0c0806);
  margin-bottom: .6rem;
}
.data-caixa {
  text-align: center;
  font-family: var(--display);
  border-right: 1px solid #3a2313;
}
.data-caixa b { display: block; font-size: 1.7rem; color: var(--gold); line-height: 1 }
.data-caixa span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }

/* §11 — Rodapé ======================================================== */
.rodape {
  margin-inline: var(--corrente);
  padding: clamp(2rem, 5vh, 3rem) 1rem calc(var(--player-h) + 1.5rem);
  text-align: center;
  background: #060403;
  border-top: 1px solid #342011;
  color: var(--muted);
}
.rodape img { width: 96px; margin-bottom: .8rem }
.rodape h3 { font-family: var(--display); font-size: 1.7rem; color: var(--cream); margin: 0 0 .3rem }
.rodape small { font-size: .74rem }

/* §12 — Responsivo ==================================================== */
@media (max-width: 991px) {
  :root { --corrente: 22px; --nav-h: 66px; --player-h: 66px }
  .nav-medalhao { width: 64px; left: 4px }
  .historia, .historia--troca { grid-template-columns: 1fr }
  .historia--troca > img { order: 0 }
  .leitor { width: calc(100vw - 2 * var(--corrente)); border-radius: 0; gap: .5rem; padding-inline: .6rem }
  .leitor-info { display: none }
}
@media (max-width: 575px) {
  :root { --corrente: 14px }
  .cartas { grid-auto-columns: 62vw }
  .tabuleta { position: static; transform: rotate(-2deg); margin-bottom: 1rem }
  .palco-slide { min-height: 74vh }
  .onda { display: none }
}
/* Ecrã deitado e baixo: o leitor fixo roubava metade do que se via. */
@media (max-height: 520px) {
  .leitor { position: static; transform: none; width: 100%; border-radius: 0 }
  body { padding-bottom: 0 }
}

/* §13 — Menos movimento =============================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* A carta continua a virar — é a única forma de ler o verso —, mas sem
     rodar: troca-se e pronto. */
  .carta:hover .carta-face { transform: rotateY(180deg) }
}


/* §14 — Utilitárias das páginas interiores ============================ */
/* Nasceram de style="" espalhados pelo HTML. Ficam aqui para se mudarem
   num sítio só — e para o EJS as poder reutilizar tal e qual. */
.titulo-seccao {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  color: var(--cream);
  margin-bottom: 1rem;
}
.foto-emoldurada {
  width: 100%;
  border: 2px solid #5b3519;
  box-shadow: 0 20px 55px #000;
}
.destaque {
  color: #ead8b5;
  border-left: 3px solid var(--red);
  padding-left: 1rem;
}
.grelha-item--capa { aspect-ratio: 3 / 4 }
.capa-nome  { font-family: var(--display); color: var(--cream); margin: .5rem 0 0; font-size: .9rem }
.capa-tempo { color: var(--gold); font-size: .75rem }
.data-nome  { font-family: var(--display); color: var(--cream); margin: 0; font-size: 1.1rem }
.data-sitio { color: var(--muted); font-size: .85rem }
.contacto-titulo { font-family: var(--display); color: var(--cream); font-size: 1.5rem }
.contacto-linha  { color: var(--muted); margin: .2rem 0 }
.aviso-vazio     { text-align: center; color: var(--muted) }

/* fotoMid — a imagem sobreposta ao centro; fotoMid_W dá-lhe a largura em % */
.palco-mid {
  max-width: 100%;
  height: auto;
  margin: 1.2rem auto 0;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .85));
}
@media (max-width: 991px) {
  .palco-mid { display: none }
  /* textalign=2 (direita) mandava o texto para fora do ecrã no telemóvel */
  .palco-texto.text-end { text-align: center !important }
}

/* Carta sem sinopse: não tem verso, por isso não vira. */
.carta:not(:has(.carta-verso)) .carta-face { transform: none !important }
.carta:not(:has(.carta-verso)) { cursor: default }