/* Rialesa Produções — Modernidade intemporal
   Estilo irmão do site da Academia Atelier da Música: fundo escuro, barra em cápsula,
   cartões arredondados, luzes de ambiente em CSS. Sem 3D em tempo real: as cenas do
   palco são imagens já renderizadas (assets/palco/). */

:root {
  --fundo: #05090a;
  --fundo-2: #080e0f;
  --painel: rgba(255, 255, 255, 0.035);
  --linha: rgba(255, 255, 255, 0.115);
  --linha-viva: rgba(0, 196, 208, 0.42);
  --texto: #f4f6f6;
  --suave: #b9c4c5;
  --fraco: #8b9899;
  --turquesa: #00c4d0;
  --turquesa-2: #5fe6ee;
  --petroleo: #154248;
  --tungstenio: #f2c078;
  --tungstenio-2: #ffd596;
  --sombra: 0 28px 80px rgba(0, 0, 0, 0.5);
  --raio: 28px;
  --raio-p: 18px;
  --max: 1320px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --titulos: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --corpo: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --italica: "Playfair Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--fundo); scroll-padding-top: 7.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texto); font-family: var(--corpo); line-height: 1.6;
  background:
    radial-gradient(1100px 560px at 86% 6%, rgba(0, 196, 208, 0.13), transparent 62%),
    radial-gradient(780px 480px at 10% 22%, rgba(242, 192, 120, 0.07), transparent 66%),
    linear-gradient(180deg, #040708 0%, #060b0c 40%, #05090a 100%);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 64ch; }
h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--turquesa-2); outline-offset: 3px; border-radius: 6px; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 1rem; top: -5rem; z-index: 200; background: var(--turquesa); color: #021416; padding: 0.7rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 1rem; }

/* ---------- Ambiente (tudo estático: não pesa) ---------- */
.ambiente, .grao, .foco-cursor { position: fixed; pointer-events: none; z-index: 0; }
.ambiente.a1 { right: -22vw; top: -20vh; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, rgba(0, 196, 208, 0.10), transparent 62%); }
.ambiente.a2 { left: -24vw; bottom: -26vh; width: 62vw; height: 62vw; border-radius: 50%; background: radial-gradient(circle, rgba(242, 192, 120, 0.07), transparent 66%); }
.grao { inset: 0; opacity: 0.10; background-image: radial-gradient(rgba(255, 255, 255, 0.4) 0.6px, transparent 0.6px); background-size: 4px 4px; }
.foco-cursor {
  left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 192, 120, 0.10), rgba(242, 192, 120, 0) 66%);
  opacity: 0; transition: opacity 0.3s ease; transform: translate3d(-999px, -999px, 0);
}
.ponteiro .foco-cursor { opacity: 1; }

/* ---------- Barra de navegação ---------- */
.topo { position: sticky; top: 14px; z-index: 100; padding: 14px 0 0; }
.barra-nav {
  width: min(calc(100% - 48px), var(--max)); margin: 0 auto; min-height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 14px 10px 26px; border: 1px solid var(--linha); border-radius: 999px;
  background: rgba(5, 10, 11, 0.9); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.marca { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.marca img { height: clamp(2.6rem, 4.4vw, 3.5rem); width: auto; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 15px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 0.94rem; color: rgba(255, 255, 255, 0.88);
  transition: background 0.2s ease, color 0.2s ease;
}
.menu a:hover, .menu a[aria-current="true"] { background: rgba(255, 255, 255, 0.07); color: #fff; }
.menu a.destaque { margin-left: 8px; background: linear-gradient(135deg, #009aa6, var(--turquesa)); color: #021416; font-weight: 700; padding: 0 22px; }
.menu a.destaque:hover { background: linear-gradient(135deg, var(--turquesa), var(--turquesa-2)); color: #021416; }
.abre-menu { display: none; background: none; border: 1px solid var(--linha); color: #fff; font: inherit; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 999px; cursor: pointer; }

/* ---------- Secções ---------- */
main, .rodape { position: relative; z-index: 1; }
.cena { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.corpo { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 1.1rem; max-width: none;
  font-family: var(--titulos); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--turquesa-2);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--turquesa); }
h2 { font-family: var(--titulos); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.045em; margin-bottom: 1.5rem; }
h3 { font-family: var(--titulos); font-weight: 700; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-family: var(--titulos); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; }
.entrada { font-size: 1.22rem; line-height: 1.5; color: var(--texto); max-width: 34ch; }
.nota { font-size: 0.85rem; color: var(--fraco); }
em { font-family: var(--italica); font-style: italic; color: var(--tungstenio-2); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  border: 1px solid transparent; background: linear-gradient(135deg, #009aa6, var(--turquesa)); color: #021416;
  font: inherit; font-weight: 700; font-size: 0.97rem; text-decoration: none; cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 196, 208, 0.22); transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background 0.25s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(0, 196, 208, 0.34); }
.botao.contorno { background: rgba(255, 255, 255, 0.04); color: #fff; border-color: var(--linha); box-shadow: none; }
.botao.contorno:hover { border-color: var(--linha-viva); background: rgba(255, 255, 255, 0.07); }
.botao[disabled] { opacity: 0.6; cursor: progress; }
.ligacao { color: var(--turquesa-2); text-decoration: underline; text-decoration-color: rgba(95, 230, 238, 0.4); text-underline-offset: 0.3em; font-weight: 600; }
.ligacao:hover { text-decoration-color: var(--turquesa-2); }

/* ---------- Abertura ---------- */
.abertura { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.heroi { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.abertura h1 { font: inherit; }
.lema { display: block; font-family: var(--titulos); font-weight: 700; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.92; letter-spacing: -0.055em; margin-bottom: 1.6rem; }
.lema span { display: block; }
.lema .eterna { font-family: var(--italica); font-style: italic; font-weight: 500; letter-spacing: -0.03em; color: var(--tungstenio-2); padding-bottom: 0.1em; }
.abertura h1 .entrada { display: block; font-family: var(--corpo); font-weight: 400; letter-spacing: 0; color: var(--suave); font-size: 1.15rem; max-width: 38ch; margin-bottom: 1.9rem; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 2.2rem; max-width: 34rem; }
.chips li { border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--painel); padding: 14px 16px; font-size: 0.82rem; color: var(--suave); line-height: 1.35; }
.chips b { display: block; font-family: var(--titulos); font-size: 1.02rem; color: var(--turquesa-2); margin-bottom: 4px; }
.heroi-cena { position: relative; padding: 12px; border: 1px solid var(--linha); border-radius: calc(var(--raio) + 12px); background: var(--painel); box-shadow: var(--sombra); }
.heroi-cena img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); }
.flutua {
  position: absolute; display: block; text-decoration: none; padding: 13px 18px; border-radius: 16px; border: 1px solid var(--linha);
  background: rgba(5, 10, 11, 0.92); font-weight: 700; font-size: 0.95rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transition: border-color 0.2s ease, transform 0.25s var(--ease);
}
.flutua:hover { border-color: var(--linha-viva); transform: translateY(-2px); }
.flutua span { display: block; font-family: var(--titulos); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--turquesa-2); margin-bottom: 3px; }
.flutua.f1 { left: -18px; top: 15%; }
.flutua.f2 { right: -14px; bottom: 11%; }

/* ---------- Blocos partilhados ---------- */
.duplo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.quadro-cena { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--raio); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.programa article, .aulas article, .blocos article, .cartaz, .hino, .moradas, .formulario, .realizados article, .filme-palco {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel);
}

/* No palco */
.cartaz { display: grid; grid-template-columns: 10rem 1fr; gap: 0.5rem 2rem; padding: 1.75rem 2rem; margin: 2.5rem 0 3rem; max-width: 52rem; border-color: var(--linha-viva); background: linear-gradient(135deg, rgba(0, 196, 208, 0.10), rgba(255, 255, 255, 0.03)); }
.cartaz .rotulo { font-family: var(--titulos); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tungstenio-2); padding-top: 0.6rem; }
.cartaz h3 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -0.035em; margin-bottom: 0.5rem; }
.cartaz p { color: var(--suave); }
.subtitulo { font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; margin: 0 0 1.25rem; color: var(--texto); }
.programa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.programa.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.programa article, .aulas article, .blocos article { padding: 1.75rem; }
.programa h3, .aulas h3 { margin-bottom: 0.8rem; }
.programa p, .aulas p, .blocos p { color: var(--suave); font-size: 0.97rem; }
.salas { margin-top: 1rem; font-size: 0.93rem; }
.salas li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--linha); }
.salas li span:first-child { color: var(--turquesa-2); font-weight: 600; }

/* Serviços */
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 2.5rem; }
.duas > div { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel); padding: 1.75rem 1.75rem 1rem; }
.duas > div > h3 { margin-bottom: 0.35rem; }
.duas > div > p { color: var(--suave); margin-bottom: 1.1rem; }
details { border-top: 1px solid var(--linha); }
summary { list-style: none; cursor: pointer; padding: 1rem 2.2rem 1rem 0; position: relative; font-weight: 600; font-size: 1.03rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-54%); font-size: 1.5rem; font-weight: 400; color: var(--turquesa-2); line-height: 1; }
details[open] > summary::after { content: "–"; }
details[open] > summary, summary:hover { color: var(--turquesa-2); }
details > div { padding: 0 1.5rem 1.2rem 0; color: var(--suave); font-size: 0.97rem; }
details > div p:last-child { margin-bottom: 0; }

.hino { margin-top: 18px; padding: 2rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem 3.5rem; align-items: start; background: linear-gradient(135deg, rgba(0, 196, 208, 0.08), rgba(255, 255, 255, 0.03)); }
.hino h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.035em; margin-bottom: 1rem; }
.hino p { color: var(--suave); }
.passos { counter-reset: passo; margin-bottom: 1.5rem; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid var(--linha); color: var(--suave); font-size: 0.97rem; }
.passos li:first-child { border-top: 0; padding-top: 0; }
.passos li::before { content: "0" counter(passo); font-family: var(--titulos); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; color: var(--turquesa-2); padding-top: 0.2rem; }
.passos b { display: block; color: var(--texto); }

/* Aulas */
.aulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 2.5rem; }
.idades { margin-top: 1rem; font-size: 0.93rem; }
.idades li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--linha); color: var(--suave); }
.idades li span:first-child { color: var(--turquesa-2); font-weight: 600; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.4rem; }
.etiquetas li { font-size: 0.86rem; font-weight: 600; border: 1px solid var(--linha); border-radius: 999px; padding: 0.3rem 0.85rem; background: var(--painel); }

/* Galeria */
.sub { font-size: 1.6rem; letter-spacing: -0.03em; margin: 3.5rem 0 1.4rem; }
.fita { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; margin: 2rem 0 0; padding-bottom: 1rem; scrollbar-color: var(--petroleo) transparent; }
.fita button { flex: 0 0 auto; scroll-snap-align: start; padding: 0; border: 1px solid var(--linha); background: var(--fundo-2); cursor: zoom-in; border-radius: var(--raio-p); overflow: hidden; height: clamp(11rem, 24vw, 17rem); }
.fita img { width: auto; height: 100%; max-width: none; transition: transform 0.5s var(--ease); }
.fita button:hover img { transform: scale(1.04); }
.realizados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.realizados article { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem; }
.realizados article > .poster { flex: 0 0 10rem; width: 10rem; }
.realizados article > div { flex: 1 1 0; min-width: 0; }
.realizados h4 { margin-bottom: 0.6rem; }
.realizados p { color: var(--suave); font-size: 0.95rem; }
.realizados .video { max-width: 15rem; margin-top: 1rem; }
.poster { display: block; width: 100%; padding: 0; border: 1px solid var(--linha); background: var(--fundo-2); cursor: zoom-in; border-radius: var(--raio-p); overflow: hidden; }
.poster img { width: 100%; height: auto; transition: transform 0.5s var(--ease); }
.poster:hover img { transform: scale(1.03); }
.filme-palco { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 2.5rem; align-items: center; margin-top: 18px; padding: 1.5rem; }
.filme-palco video, .filme { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--raio-p); }
.filme-palco > .video { max-width: none; }
.filme { max-width: 46rem; margin-bottom: 3rem; }
.filme-palco h4 { margin-bottom: 0.6rem; }
.filme-palco p { color: var(--suave); font-size: 0.95rem; }
.cartazes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cartazes figure { margin: 0; }
.cartazes figcaption { font-size: 0.85rem; color: var(--suave); margin-top: 0.7rem; line-height: 1.45; }
.videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.videos.todos { margin-top: 3rem; }
.video { display: block; text-decoration: none; color: var(--texto); }
.video .quadro { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--fundo-2); overflow: hidden; border-radius: var(--raio-p); border: 1px solid var(--linha); }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.video:hover img { transform: scale(1.05); }
.video:hover .quadro { border-color: var(--linha-viva); }
.video .quadro::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(5, 10, 11, 0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%235fe6ee'/%3E%3C/svg%3E") center / 26px no-repeat;
  border: 1px solid var(--linha-viva);
}
.video .nome { display: block; font-family: var(--corpo); font-size: 0.92rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin: 0.65rem 0 0; color: var(--suave); }
.video:hover .nome { color: var(--turquesa-2); }
dialog.ampliada { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
dialog.ampliada::backdrop { background: rgba(3, 7, 8, 0.94); }
dialog.ampliada img { max-width: 94vw; max-height: 84vh; margin: 0 auto; border-radius: var(--raio-p); }
dialog.ampliada form { text-align: right; margin-bottom: 0.6rem; }
dialog.ampliada button { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linha); color: #fff; font: inherit; font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer; }
.parceiro { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.parceiro p { color: var(--suave); }

/* Contactos */
.contactos { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 18px; margin-top: 2rem; align-items: start; }
.moradas { padding: 0.5rem 1.75rem; }
.moradas > div { padding: 1.25rem 0; border-top: 1px solid var(--linha); }
.moradas > div:first-child { border-top: 0; }
.moradas h3 { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--turquesa-2); margin-bottom: 0.5rem; }
.moradas a { text-decoration: none; font-weight: 600; }
.moradas a:hover { color: var(--turquesa-2); }
.telefone { font-family: var(--titulos); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; display: inline-block; }
.formulario { padding: 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.formulario .inteiro { grid-column: 1 / -1; }
.formulario label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--suave); }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario select, .formulario textarea {
  width: 100%; font: inherit; color: var(--texto); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--linha); border-radius: 14px; padding: 0.8rem 0.95rem;
}
.formulario select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--turquesa-2) 50%), linear-gradient(135deg, var(--turquesa-2) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; }
.formulario select option { background: #0a1112; }
.formulario textarea { min-height: 8.5rem; resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--turquesa); outline-offset: 1px; border-color: transparent; }
.consente { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; align-items: start; font-size: 0.86rem; color: var(--suave); }
.consente input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--turquesa); }
.consente label { margin: 0; font-size: inherit; font-weight: 400; }
.armadilha { position: absolute; left: -9999px; }
.estado { margin: 0; font-size: 0.94rem; min-height: 1.5em; }
.estado.ok { color: var(--turquesa-2); }
.estado.erro { color: #ffb4a0; }

/* ---------- Páginas de serviço ---------- */
.pagina { padding-top: clamp(2.5rem, 5vw, 4rem); }
.migalhas { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; color: var(--fraco); margin-bottom: 2rem; }
.migalhas a { color: var(--suave); text-decoration: none; }
.migalhas a:hover { color: var(--turquesa-2); }
.titulo { font-family: var(--titulos); font-weight: 700; font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -0.05em; margin-bottom: 1.4rem; }
.pagina .entrada { max-width: 38ch; margin-bottom: 1.75rem; color: var(--suave); }
.blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 4rem 0; }
.blocos h2 { font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.blocos p { margin: 0; }
.perguntas { max-width: 52rem; margin-bottom: 3.5rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel); padding: 1.75rem 1.75rem 0.5rem; }
.perguntas h2, .relacionadas h2 { font-size: 1.45rem; letter-spacing: -0.02em; margin-bottom: 1rem; }
.relacionadas ul { display: flex; flex-wrap: wrap; gap: 10px; }
.relacionadas a { display: inline-flex; align-items: center; min-height: 46px; text-decoration: none; font-weight: 600; border: 1px solid var(--linha); border-radius: 999px; padding: 0 1.2rem; background: var(--painel); }
.relacionadas a:hover { border-color: var(--linha-viva); color: var(--turquesa-2); }

/* ---------- Rodapé ---------- */
.rodape { overflow: hidden; margin-top: 2rem; padding: 4.5rem 0 2rem; border-top: 1px solid var(--linha); background: #030607; font-size: 0.95rem; color: var(--suave); }
.rodape .coroa { position: absolute; right: -4vw; bottom: -18%; width: min(60vw, 44rem); height: auto; max-width: none; opacity: 0.04; pointer-events: none; }
.rodape-grelha, .direitos { position: relative; width: min(calc(100% - 48px), var(--max)); margin-left: auto; margin-right: auto; }
.rodape-grelha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 2.5rem 4rem; }
.rodape .marca img { height: clamp(4rem, 7.5vw, 6rem); }
.lema-rodape { font-family: var(--italica); font-style: italic; font-size: 1.35rem; color: var(--tungstenio-2); margin: 1.25rem 0 0; }
.rodape h2 { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--turquesa-2); margin: 0 0 0.9rem; line-height: 1.4; }
.rodape li { padding: 0.22rem 0; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--turquesa-2); }
.direitos { margin-top: 3.5rem; margin-bottom: 0; padding-top: 1.25rem; border-top: 1px solid var(--linha); color: var(--fraco); max-width: var(--max); }

/* ================= Efeitos (só transform e opacity: correm na placa gráfica, não pesam) ================= */

@view-transition { navigation: auto; }

/* barra de progresso de leitura */
.progresso { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 150; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--lido, 0)); background: linear-gradient(90deg, var(--turquesa), var(--turquesa-2) 60%, var(--tungstenio-2)); }

/* cartão do palco: inclina com o cursor, com um fio de luz a correr à volta */
.heroi-cena { padding: 0; border: 0; background: none; box-shadow: none; transform-style: preserve-3d; transform: perspective(1200px) rotateX(calc(var(--iy, 0) * -5deg)) rotateY(calc(var(--ix, 0) * 7deg)); transition: transform 0.6s var(--ease); }
.aro { position: relative; overflow: hidden; padding: 2px; border-radius: calc(var(--raio) + 12px); background: rgba(255, 255, 255, 0.09); box-shadow: var(--sombra), 0 0 90px rgba(0, 196, 208, 0.10); }
.aro::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; background: conic-gradient(from 200deg, transparent 0 8%, rgba(0, 196, 208, 0.9) 20%, transparent 36%, transparent 58%, rgba(255, 213, 150, 0.85) 72%, transparent 86%); }
.aro::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10), transparent); transform: translateX(-140%) skewX(-14deg); animation: reflexo 7.5s ease-in-out 2.5s infinite; pointer-events: none; }
.aro img { position: relative; border-radius: calc(var(--raio) + 10px); animation: respira 16s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.heroi-cena .flutua { transform: translateZ(46px); }
.heroi-cena .flutua:hover { transform: translateZ(60px); }
@keyframes roda { to { transform: rotate(360deg); } }
@keyframes reflexo { 0%, 62% { transform: translateX(-140%) skewX(-14deg); } 100% { transform: translateX(420%) skewX(-14deg); } }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.07); } }

.fora-de-cena .aro::before, .fora-de-cena .aro::after, .fora-de-cena .aro img, .fora-de-cena .eq b, .faixa.fora-de-cena .faixa-tira { animation-play-state: paused; }

/* equalizador */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; margin-left: 6px; vertical-align: -1px; }
.flutua span { display: flex; align-items: center; }
.eq b { width: 2px; height: 100%; background: var(--tungstenio-2); transform-origin: 50% 100%; animation: bate 0.9s ease-in-out infinite alternate; }
.eq b:nth-child(2) { animation-delay: -0.35s; } .eq b:nth-child(3) { animation-delay: -0.6s; } .eq b:nth-child(4) { animation-delay: -0.15s; }
@keyframes bate { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* título de abertura: as duas linhas sobem de trás de uma máscara */
.js .lema span { animation: sobe 1.1s var(--ease) both; }
.js .lema .eterna { animation-delay: 0.14s; }
.js .abertura .kicker, .js .abertura h1 .entrada, .js .abertura .acoes, .js .abertura .chips, .js .heroi-cena { animation: surge 0.9s var(--ease) both; }
.js .abertura h1 .entrada { animation-delay: 0.3s; } .js .abertura .acoes { animation-delay: 0.42s; } .js .abertura .chips { animation-delay: 0.54s; }
.js .heroi-cena { animation-name: surge-cena; animation-duration: 1.3s; animation-delay: 0.1s; }
@keyframes sobe { from { clip-path: inset(0 0 100% 0); transform: translateY(42%); } to { clip-path: inset(-12% -6% -16% -6%); transform: none; } }
@keyframes surge { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surge-cena { from { opacity: 0; transform: perspective(1200px) translateY(34px) scale(0.95) rotateY(-9deg); } to { opacity: 1; transform: perspective(1200px) rotateX(0) rotateY(0); } }

/* faixa de serviços em movimento */
.faixa { overflow: hidden; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 1.1rem 0; margin-top: 1rem; background: rgba(255, 255, 255, 0.015); }
.faixa-tira { display: flex; width: max-content; animation: corre 38s linear infinite; }
.faixa span { font-family: var(--titulos); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.7rem); letter-spacing: -0.04em; white-space: nowrap; padding: 0 1.4rem; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.34); }
.faixa span:nth-child(3n + 1) { color: var(--turquesa-2); -webkit-text-stroke: 0; }
.faixa span::after { content: "✦"; margin-left: 2.8rem; color: var(--tungstenio-2); -webkit-text-stroke: 0; font-size: 0.55em; vertical-align: middle; }
@keyframes corre { to { transform: translateX(-50%); } }

/* cartões: brilho que acompanha o cursor e ligeira elevação */
.brilha { position: relative; transition: transform 0.35s var(--ease), border-color 0.3s ease; }
.brilha::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(0, 196, 208, 0.13), transparent 62%); }
.brilha:hover, .js .revela.visto.brilha:hover { border-color: var(--linha-viva); transform: translateY(-3px); }
.brilha:hover::before { opacity: 1; }
.brilha > * { position: relative; }

/* linha do kicker a desenhar-se e imagens a deslizar com o scroll */
.js .revela .kicker::before, .js .kicker.revela::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease) 0.2s; }
.js .revela.visto .kicker::before, .js .kicker.revela.visto::before { transform: none; }
.js .revela .quadro-cena { transform: translateY(34px) scale(0.96); transition: transform 1.1s var(--ease) 0.12s; }
.js .revela.visto .quadro-cena { transform: none; }
@supports (animation-timeline: view()) {
  .faixa-tira { animation-duration: 46s; }
  .rodape .coroa { animation: flutua-coroa linear both; animation-timeline: view(); animation-range: entry 0% cover 100%; }
  @keyframes flutua-coroa { from { transform: translateY(90px) rotate(-5deg); } to { transform: translateY(-20px) rotate(0deg); } }
}

/* ---------- Entrada suave ao descer (só com JavaScript ativo) ---------- */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.js .revela.visto { opacity: 1; transform: none; }

/* ---------- Ecrãs estreitos ---------- */
@media (max-width: 1080px) {
  .programa { grid-template-columns: 1fr 1fr; }
  .videos, .cartazes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .realizados { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .topo { top: 8px; padding-top: 8px; }
  .barra-nav { min-height: 68px; padding: 8px 10px 8px 18px; width: calc(100% - 24px); }
  .corpo, .rodape-grelha, .direitos { width: calc(100% - 36px); }
  .abre-menu { display: inline-block; position: relative; z-index: 3; }
  .menu { position: fixed; inset: 0; z-index: 2; background: rgba(3, 7, 8, 0.98); flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; padding: 6rem 1.5rem 2rem; display: none; }
  .menu.aberto { display: flex; }
  .menu a { font-family: var(--titulos); font-size: 1.5rem; min-height: 58px; }
  .menu a.destaque { margin: 1rem 0 0; justify-content: center; font-size: 1.05rem; }
  .heroi, .duplo, .duas, .aulas, .hino, .contactos, .blocos, .programa, .programa.dois, .filme-palco, .rodape-grelha { grid-template-columns: 1fr; }
  .heroi-cena { max-width: 30rem; margin: 0 auto; }
  .flutua.f1 { left: -6px; }
  .flutua.f2 { right: -6px; }
  .chips { grid-template-columns: 1fr; max-width: none; }
  .chips li { display: flex; gap: 10px; align-items: baseline; }
  .chips b { margin: 0; }
  .cartaz { grid-template-columns: 1fr; padding: 1.5rem; }
  .videos, .cartazes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realizados article { flex-direction: column; }
  .realizados article > .poster { flex-basis: auto; width: 9rem; }
  .formulario { grid-template-columns: 1fr; }
  .idades li { grid-template-columns: 1fr; gap: 0; }
  .foco-cursor { display: none; }
  .heroi-cena { transform: none; }
  .heroi-cena .flutua { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .js .revela { opacity: 1; transform: none; }
  .faixa-tira { transform: none; }
  .js .lema span { clip-path: none; }
}
@media print {
  .ambiente, .grao, .foco-cursor, .topo { display: none; }
  body, html { background: #fff; color: #000; }
}