/* ============================================================
   Do Ré Mi Fu — O Mundo Fora da Escala
   Identidade própria do espetáculo, derivada da arte de Victor.
   Paleta: noite teatral (vinho-preto), céu azul-esverdeado,
   vermelho do sapato como accent, amarelo da luminária mínimo.
   ============================================================ */

:root {
  --noite: #0b0809;
  --noite-2: #131011;
  --vinho: #1e1214;
  --ambar-escuro: #b98a3a;
  --ambar-claro: #f0cf8e;
  --vermelho: #c2122d;
  --vermelho-vivo: #e02645;
  --marfim: #f4ead0;
  --ambar: #e6b34f;
  --papel: #f4efe6;
  --papel-dim: #bdb5ac;
  --card: #171113;
  --borda: rgba(244, 239, 230, 0.13);
  --serif: 'Playfair Display', Georgia, serif;
  --display: 'Anton', 'Oswald', sans-serif;
  --cond: 'Oswald', 'Work Sans', sans-serif;
  --sans: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --contorno: #0a0405;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: dark; scrollbar-gutter: stable; }

@media (max-width: 700px) { html { scrollbar-gutter: auto; } }

body {
  background: var(--noite);
  color: var(--papel);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Grain de gravura sobre tudo, bem sutil */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E");
}

/* height: auto é obrigatório: sem ele, a imagem mantém a altura do atributo
   HTML quando a largura encolhe, e a arte chega deformada na tela. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--ambar-claro); text-decoration: none; }
a:hover { color: var(--papel); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Navegação ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 8, 9, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.topo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.marca {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 0.05em;
  color: var(--marfim);
  text-shadow: 2px 2px 0 var(--contorno);
  white-space: nowrap;
}

.marca span { color: var(--ambar); }

.menu { display: flex; align-items: center; gap: 22px; }

.menu a {
  color: var(--papel-dim);
  font-weight: 600;
  font-size: 0.95rem;
}

.menu a:hover, .menu a.ativo { color: var(--papel); }

/* ---------- Botões (pétrea: peso e presença) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-vermelho {
  background: var(--vermelho);
  color: #fff;
  box-shadow: 0 4px 14px rgba(194, 18, 45, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.btn-vermelho:hover {
  background: var(--vermelho-vivo);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(224, 38, 69, 0.5), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.btn-contorno {
  background: transparent;
  color: var(--papel);
  border: 1.5px solid var(--borda);
}

.btn-contorno:hover { border-color: var(--ambar-claro); color: var(--ambar-claro); transform: translateY(-2px); }

.btn-gigante {
  min-height: 64px;
  padding: 16px 42px;
  font-size: 1.15rem;
  border-radius: 16px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  text-align: center;
  background: var(--noite);
}

/* Palco esfumaçado ao fundo, escurecido nas bordas como luz de cena */
.hero-cenario {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-fundo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 46% at 50% 26%, rgba(230, 179, 79, 0.13), transparent 68%),
    radial-gradient(ellipse 55% 30% at 50% 8%, rgba(244, 234, 208, 0.07), transparent 70%),
    radial-gradient(ellipse 140% 60% at 50% 108%, rgba(77, 13, 24, 0.35), transparent 70%),
    linear-gradient(to bottom, #16090d, var(--noite) 82%);
}

/* Pernas de cortina nas laterais do palco */
.cortina-lateral {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11%;
  transition: opacity 1.1s ease 0.15s;
  background: repeating-linear-gradient(90deg, #4b0d19 0 16px, #6b1426 16px 30px, #360911 30px 52px);
  box-shadow: inset 0 -80px 70px rgba(0, 0, 0, 0.6);
  transform-origin: top center;
  animation: balanca 11s ease-in-out infinite alternate;
}

.cortina-lateral.esq {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 55%, transparent);
  mask-image: linear-gradient(to right, black 55%, transparent);
}

.cortina-lateral.dir {
  right: 0;
  animation-delay: 2.4s;
  -webkit-mask-image: linear-gradient(to left, black 55%, transparent);
  mask-image: linear-gradient(to left, black 55%, transparent);
}

@keyframes balanca {
  from { transform: skewX(0deg); }
  to   { transform: skewX(0.7deg) translateX(4px); }
}

/* Fumaça viva, bem sutil */
.hero-fundo::before {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse 42% 30% at 30% 42%, rgba(244, 234, 208, 0.075), transparent 70%),
    radial-gradient(ellipse 50% 34% at 72% 36%, rgba(244, 234, 208, 0.055), transparent 70%);
  animation: fumaca 26s ease-in-out infinite alternate;
}

@keyframes fumaca {
  from { transform: translate3d(-3%, 1%, 0) scale(1); opacity: 0.75; }
  50%  { opacity: 1; }
  to   { transform: translate3d(3%, -2%, 0) scale(1.12); opacity: 0.8; }
}

.hero-veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 65% at 50% 38%, rgba(11, 8, 9, 0.15), rgba(11, 8, 9, 0.78) 78%, var(--noite) 100%),
    linear-gradient(to bottom, rgba(11, 8, 9, 0.55), rgba(11, 8, 9, 0.12) 30%, rgba(11, 8, 9, 0.22) 62%, var(--noite) 97%);
}


.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 84px 24px 64px;
  max-width: 1080px;
  margin: 0 auto;
}

.hero-nomes {
  margin-bottom: 12px;
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--papel);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hero-nomes span { color: var(--ambar); padding: 0 10px; }

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, 11.5vw, 8.2rem);
  line-height: 1.04;
  margin: 18px 0 8px;
  padding: 0 12px;
  letter-spacing: 0.01em;
  color: var(--marfim);
  text-shadow:
    5px 6px 0 var(--contorno),
    0 0 42px rgba(230, 179, 79, 0.4),
    0 22px 70px rgba(0, 0, 0, 0.9);
}


.hero .subtitulo {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(1.05rem, 2.6vw, 1.7rem);
  color: var(--ambar);
  margin-top: 22px;
  text-shadow: 2px 2px 0 var(--contorno), 0 4px 18px rgba(0, 0, 0, 0.8);
}

.hero .frase {
  margin-top: 24px;
  font-size: 1.08rem;
  color: var(--papel);
  max-width: 52ch;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; justify-content: center; }

/* Plaquinha de teatro antigo: feltro com letras encaixadas e moldura dourada */
.plaquinha {
  position: relative;
  display: inline-block;
  margin-top: 38px;
  padding: 18px 38px 20px;
  background: repeating-linear-gradient(0deg, #0e0b0c 0 7px, #171213 7px 8px);
  border: 3px solid #8a6a2d;
  outline: 1px solid rgba(230, 179, 79, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.7), inset 0 0 26px rgba(0, 0, 0, 0.85);
  transform: rotate(-0.8deg);
  transform-origin: 50% -60px;
  animation: pendura 9s ease-in-out infinite alternate;
}

.plaquinha::before,
.plaquinha::after {
  content: '';
  position: absolute;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0cf8e, #8a6a2d 70%, #4d3a14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.plaquinha::before { left: 10px; }
.plaquinha::after { right: 10px; }

@keyframes pendura {
  from { transform: rotate(-0.9deg); }
  to   { transform: rotate(0.6deg); }
}

.plaquinha .rotulo-cartaz {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ambar);
}

.plaquinha .data {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--marfim);
  margin: 7px 0 5px;
  text-shadow: 2px 2px 0 var(--contorno);
}

.plaquinha .local {
  font-family: var(--cond);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papel-dim);
}

@media (prefers-reduced-motion: reduce) {
  .plaquinha { animation: none; }
}

.hero-temporada {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Faixa de fotos dos atores, como polaroides sobre a mesa */
.hero-fotos {
  /* Só aparecem depois do sorteio: moldura vazia parece defeito. */
  visibility: hidden;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1320px;
  margin: 48px auto 0;
  padding: 0 24px 64px;
}

.hero-fotos.pronta { visibility: visible; }

.hero-fotos img {
  width: 100%;
  height: clamp(150px, 14.5vw, 205px);
  object-fit: cover;
  border: 2px solid rgba(244, 239, 230, 0.85);
  border-radius: 5px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.7);
  animation: flutua 7s ease-in-out infinite alternate;
  transition: opacity 0.45s ease;
}

.hero-fotos img.trocando { opacity: 0; }

/* Luzinhas de marquise */
.luzes {
  display: flex;
  gap: clamp(10px, 2.4vw, 22px);
  justify-content: center;
  margin: 22px 0;
}

.lampada {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff8e2, #f3cd7e 45%, #c9902f 78%, #7a4f16);
  box-shadow:
    0 0 5px 1px rgba(255, 240, 200, 0.85),
    0 0 16px 5px rgba(230, 179, 79, 0.38),
    0 0 34px 12px rgba(230, 179, 79, 0.12);
  animation: cintila var(--dur, 4.6s) linear var(--delay, 0s) infinite;
}

/* Tremulação incandescente: quase sempre acesa, com quedas irregulares e curtas.
   Os picos passam de 1 para deixar a lâmpada estourar de luz por um instante —
   é o que dá a sensação de filamento quente, e não de bolinha desenhada. */
@keyframes cintila {
  0%, 100% { opacity: 1; filter: brightness(1.06); }
  6%   { opacity: 0.96; filter: brightness(1); }
  11%  { opacity: 1; filter: brightness(1.24); }
  23%  { opacity: 0.9; filter: brightness(0.9); }
  27%  { opacity: 1; filter: brightness(1.14); }
  46%  { opacity: 0.97; filter: brightness(1.02); }
  52%  { opacity: 0.85; filter: brightness(0.82); }
  55%  { opacity: 1; filter: brightness(1.28); }
  74%  { opacity: 0.94; filter: brightness(0.98); }
  81%  { opacity: 1; filter: brightness(1.18); }
  92%  { opacity: 0.9; filter: brightness(0.88); }
}

.hero-fotos a { display: block; transition: transform 0.2s ease; }
.hero-fotos a:nth-child(1) { transform: rotate(-2.2deg); }
.hero-fotos a:nth-child(2) { transform: rotate(1.4deg) translateY(8px); }
.hero-fotos a:nth-child(2) img { animation-delay: 1.6s; }
.hero-fotos a:nth-child(3) { transform: rotate(-1.2deg); }
.hero-fotos a:nth-child(3) img { animation-delay: 3.1s; }
.hero-fotos a:nth-child(4) { transform: rotate(2deg) translateY(6px); }
.hero-fotos a:nth-child(4) img { animation-delay: 4.4s; }
.hero-fotos a:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); z-index: 2; }

@keyframes flutua {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* Entrada em cena, elemento a elemento */
.hero-inner > * { animation: surge 0.7s ease-out both; }
.hero-inner > *:nth-child(2) { animation-delay: 0.1s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.18s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.28s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.38s; }
.hero-inner > *:nth-child(6) { animation-delay: 0.48s; }
.hero-inner > *:nth-child(7) { animation-delay: 0.58s; }

@keyframes surge {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fundo::before, .hero-fotos img, .hero-inner > * { animation: none; }
}

/* ---------- Transição de cena entre páginas ---------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: apaga 0.28s ease-in both; }
::view-transition-new(root) { animation: acende-pagina 0.34s ease-out both; }

@keyframes apaga { to { opacity: 0; filter: brightness(0.4); } }
@keyframes acende-pagina { from { opacity: 0; filter: brightness(0.5); } }

/* ---------- Letreiro-marquise rolante ---------- */

.letreiro {
  overflow: hidden;
  border-top: 3px solid #241d15;
  border-bottom: 3px solid #241d15;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.9), inset 0 -6px 18px rgba(0, 0, 0, 0.9);
  background: #070504;
  padding: 20px 0;
  position: relative;
}

/* Vidro do painel */
.letreiro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.045), transparent 35%, transparent 70%, rgba(0, 0, 0, 0.35));
}

.letreiro-faixa {
  display: flex;
  width: max-content;
  animation: letreiro 44s linear infinite;
}

.letreiro:hover .letreiro-faixa { animation-play-state: paused; }

.letreiro-faixa span {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.7rem);
  line-height: 1.15;
  white-space: nowrap;
  padding-right: 0.6em;
  letter-spacing: 0.06em;
  color: transparent;
  background-image: radial-gradient(circle, #ffe0a0 46%, rgba(255, 180, 70, 0.3) 56%, transparent 64%);
  background-size: 4.4px 4.4px;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.45));
}

.letreiro-faixa span strong {
  font-weight: 400;
  color: transparent;
}

@keyframes letreiro { to { transform: translateX(-50%); } }

/* ---------- Letras cinéticas do letreiro principal ---------- */

.hero h1 .palavra { display: inline-block; white-space: nowrap; }

.hero h1 .letra {
  display: inline-block;
  animation: letra-entra 0.72s cubic-bezier(0.2, 0.7, 0.25, 1.25) both;
  animation-delay: calc(var(--i) * 60ms + 480ms);
}

@keyframes letra-entra {
  from { opacity: 0; transform: translateY(0.6em) rotate(7deg); }
  to   { opacity: 1; transform: none; }
}


/* ---------- Cortina de estreia ---------- */

.cortina {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  cursor: pointer;
}

.cortina .painel {
  flex: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 30%, rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(90deg, #4d0d18 0 20px, #6e1526 20px 34px, #3d0a14 34px 58px);
  border-bottom: 7px solid var(--ambar-escuro);
  box-shadow: inset 0 -60px 90px rgba(0, 0, 0, 0.55);
  transition: transform 1.6s cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}

.cortina.aberta .painel:first-child { transform: translateX(-102%); }
.cortina.aberta .painel:last-child { transform: translateX(102%); }

/* O letreiro acende com tremida de refletor, depois que as letras sobem */
.hero-inner h1 {
  animation: acende 0.9s ease-out 1.6s both;
}

@keyframes acende {
  0%   { opacity: 1; filter: brightness(1); }
  18%  { opacity: 0.55; filter: brightness(0.65); }
  30%  { opacity: 1; filter: brightness(1.15); }
  44%  { opacity: 0.7; filter: brightness(0.8); }
  60%  { opacity: 1; filter: brightness(1.1); }
  100% { opacity: 1; filter: brightness(1); }
}

/* ---------- Entradas em cena no scroll ---------- */

.revela { opacity: 0; }

.revela.visivel { animation: sobe 0.65s ease-out both; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.numeros .numero.visivel:nth-child(2) { animation-delay: 0.09s; }
.numeros .numero.visivel:nth-child(3) { animation-delay: 0.18s; }
.numeros .numero.visivel:nth-child(4) { animation-delay: 0.27s; }
.teasers .teaser.visivel:nth-child(2) { animation-delay: 0.1s; }
.teasers .teaser.visivel:nth-child(3) { animation-delay: 0.2s; }
.veiculos .veiculo.visivel:nth-child(3n+2) { animation-delay: 0.08s; }
.veiculos .veiculo.visivel:nth-child(3n) { animation-delay: 0.16s; }
.grade-fotos a.visivel:nth-child(3n+2) { animation-delay: 0.1s; }
.grade-fotos a.visivel:nth-child(3n) { animation-delay: 0.2s; }
.ficha > div.visivel:nth-child(even) { animation-delay: 0.08s; }
.elenco .pessoa.visivel:nth-child(2) { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
  .hero-inner h1, .hero h1 .letra, .letreiro-faixa { animation: none; }
  .revela { opacity: 1; }
  .revela.visivel { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--borda);
  background: rgba(22, 15, 17, 0.72);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--papel);
}

.chip strong { color: var(--ambar); font-weight: 700; }

/* ---------- Seções ---------- */

section { padding: 44px 0; }

.secao-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin-bottom: 12px;
  color: var(--marfim);
  text-shadow: 2px 2px 0 var(--contorno);
}

.secao-titulo em { color: var(--vermelho-vivo); font-style: normal; }

.secao-sub { color: var(--papel-dim); max-width: 62ch; margin-bottom: 28px; font-size: 1.05rem; }

/* ---------- Em cartaz ---------- */

.cartaz-box {
  background: linear-gradient(160deg, var(--card), var(--vinho));
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 40px;
  display: grid;
  /* Quando e Onde precisam de mais largura que Ingressos: as linhas de
     detalhe (horários e endereço) não podem quebrar em duas. */
  grid-template-columns: 1.14fr 1.14fr 0.72fr;
  gap: 32px;
}

.cartaz-dado .rotulo {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-claro);
  margin-bottom: 8px;
}

.cartaz-dado .valor {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cartaz-dado .detalhe {
  color: var(--papel-dim);
  margin-top: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.cartaz-extras {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--borda);
  padding-top: 26px;
}

.cartaz-acao {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* ---------- Números / stats ---------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.numero {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
}

.numero .grande {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--ambar);
  line-height: 1;
  text-shadow: 2px 2px 0 var(--contorno);
}

.numero .rotulo { color: var(--papel-dim); font-weight: 600; margin-top: 8px; font-size: 0.95rem; }

/* ---------- Teasers da home ---------- */

.teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.teaser {
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 18px;
  overflow: hidden;
  color: var(--papel);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.teaser:hover { transform: translateY(-4px); border-color: var(--ambar-escuro); color: var(--papel); }

.teaser img { width: 100%; height: 190px; object-fit: cover; }

.teaser .corpo { padding: 22px 24px 26px; }

.teaser h3 { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.25rem; margin-bottom: 6px; }

.teaser p { color: var(--papel-dim); font-size: 0.97rem; }

.teaser .seta { color: var(--vermelho-vivo); font-weight: 700; margin-top: 12px; display: inline-block; }

/* ---------- Galeria ---------- */

.grade-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.grade-fotos a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--borda);
}

.grade-fotos img {
  width: 100%;
  height: clamp(200px, 22vw, 240px);
  object-fit: cover;
  transition: transform 0.25s ease;
}

.grade-fotos a:hover img { transform: scale(1.04); }

.credito-fotos { margin-top: 18px; color: var(--papel-dim); font-size: 0.95rem; }

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10, 5, 9, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.aberto { display: flex; }

.lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.lightbox button {
  position: absolute;
  background: rgba(24, 16, 18, 0.88);
  color: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  min-width: 52px;
  min-height: 52px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox button:hover { background: var(--vinho); }

.lightbox .fechar { top: 20px; right: 20px; }
.lightbox .ant { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .prox { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Página interna: cabeçalho ---------- */

.pagina-cabecalho {
  background:
    radial-gradient(900px 380px at 80% -20%, rgba(230, 179, 79, 0.14), transparent 65%),
    var(--noite-2);
  border-bottom: 1px solid var(--borda);
  padding: 64px 0 48px;
}

.pagina-cabecalho h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  color: var(--marfim);
  text-shadow: 2.5px 2.5px 0 var(--contorno);
}

.pagina-cabecalho p { color: var(--papel-dim); margin-top: 10px; max-width: 60ch; font-size: 1.05rem; }

/* ---------- Texto corrido / ficha ---------- */

.prosa { max-width: 68ch; }
.prosa p + p { margin-top: 18px; }
.prosa .destaque {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ambar-claro);
  border-left: 3px solid var(--vermelho);
  padding-left: 20px;
  margin: 30px 0;
  line-height: 1.5;
}

.ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  margin-top: 30px;
}

.ficha div {
  border-bottom: 1px solid var(--borda);
  padding-bottom: 12px;
}

.ficha .funcao {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ambar-claro);
}

.ficha .nome { font-weight: 600; font-size: 1.05rem; margin-top: 3px; }

/* ---------- Elenco ---------- */

.elenco {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 36px 0;
}

.pessoa {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 18px;
  overflow: hidden;
}

.pessoa img { width: 100%; height: 420px; object-fit: cover; object-position: center 20%; }

.pessoa .corpo { padding: 24px 26px 28px; }

.pessoa h3 { font-family: var(--cond); font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.pessoa .papel { color: var(--ambar); font-weight: 600; font-size: 0.95rem; margin: 4px 0 12px; }

.pessoa p { color: var(--papel-dim); font-size: 0.98rem; }

/* ---------- Imprensa ---------- */

.veiculos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.veiculo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 18px 22px;
  color: var(--papel);
  font-weight: 600;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.veiculo:hover { transform: translateY(-3px); border-color: var(--ambar-escuro); color: var(--papel); }

.veiculo span.seta { color: var(--vermelho-vivo); }

/* ---------- Produção ---------- */

.producao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 36px 40px;
}

.producao img { width: 190px; }

.producao p { color: var(--papel-dim); max-width: 52ch; }

.producao strong { color: var(--papel); }

/* ---------- Kit de imprensa ---------- */

/* A caixa abre a página de imprensa porque quem chega aqui quer as fotos antes
   do clipping. Texto à esquerda, botão à direita. O crédito não aparece na tela
   por decisão do Willian: ele vive dentro dos arquivos, nos campos IPTC/XMP. */
.secao-kit { padding-top: 8px; }

.kit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background:
    radial-gradient(600px 260px at 12% -40%, rgba(230, 179, 79, 0.12), transparent 70%),
    var(--noite-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ambar);
  border-radius: 18px;
  padding: 36px 40px;
}

.kit-rotulo {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 10px;
}

.kit-texto h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--marfim);
  text-shadow: 2px 2px 0 var(--contorno);
  margin-bottom: 10px;
}

.kit-texto p {
  color: var(--papel-dim);
  max-width: 46ch;
  margin-bottom: 20px;
}

.kit-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.kit-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.kit-acao .btn { width: 100%; }

/* Abaixo de 900px o botão desce para debaixo do texto e ocupa a linha inteira:
   é o alvo de toque, e alvo de toque não disputa espaço com parágrafo. */
@media (max-width: 900px) {
  .kit { flex-direction: column; align-items: stretch; gap: 26px; padding: 30px 26px; }
  .kit-texto p { max-width: none; }
  .kit-acao { align-items: stretch; }
}

@media (max-width: 700px) {
  .kit { padding: 26px 20px; }
  .kit-chips .chip { font-size: 0.86rem; padding: 7px 13px; }
}

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

.contato-caixa {
  text-align: center;
  background:
    radial-gradient(700px 300px at 50% -30%, rgba(230, 179, 79, 0.1), transparent 70%),
    var(--noite-2);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 56px 32px;
}

.contato-caixa h2 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; margin-bottom: 10px; color: var(--marfim); text-shadow: 2px 2px 0 var(--contorno); }

.contato-caixa p { color: var(--papel-dim); margin-bottom: 28px; }

.contato-acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.rodape {
  border-top: 1px solid var(--borda);
  padding: 34px 0 44px;
  color: var(--papel-dim);
  font-size: 0.92rem;
}

.rodape-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
}

.rodape a { color: var(--papel-dim); }
.rodape a:hover { color: var(--papel); }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .hero-inner { padding-top: 56px; }
  .hero-fotos { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cartaz-box { grid-template-columns: 1fr; padding: 30px 18px; gap: 24px; }
  .cartaz-dado .detalhe { font-size: clamp(0.62rem, 3.2vw, 0.9rem); }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .teasers { grid-template-columns: 1fr; }
  .grade-fotos { grid-template-columns: repeat(2, 1fr); }
  .veiculos { grid-template-columns: 1fr; }
  .elenco { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .menu { gap: 14px; }
}

@media (max-width: 520px) {
  /* Duas colunas no celular: com 100 fotos, uma coluna vira rolagem sem fim. */
  .grade-fotos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grade-fotos img { height: clamp(130px, 40vw, 190px); }
  .btn-gigante { width: 100%; }
  .hero-ctas .btn { width: 100%; }
}

/* ---------- Mosaico de cenas (página do espetáculo) ---------- */

.cenas { padding: 0 0 24px; }

.cenas-fotos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cenas-fotos a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--borda);
}

.cenas-fotos img {
  width: 100%;
  height: clamp(160px, 16vw, 210px);
  object-fit: cover;
  transition: transform 0.25s ease;
}

.cenas-fotos a:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
  .cenas-fotos { grid-template-columns: repeat(2, 1fr); }
}


.veiculo .favi {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex-shrink: 0;
}

.veiculo .nome { flex: 1; }



/* ---------- Divisor de identidade ---------- */

.divisor {
  position: relative;
  width: min(340px, 70%);
  height: 1px;
  margin: 10px auto;
  background: linear-gradient(90deg, transparent, rgba(230, 179, 79, 0.45), transparent);
}

.divisor::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3.5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ambar-escuro);
  box-shadow: 0 0 8px rgba(230, 179, 79, 0.4);
}

/* ---------- Prosa ladeada pela arte (página do espetáculo) ---------- */

/* A arte fica dentro do box de conteúdo e termina junto com o texto. Para
   isso o fecho da prosa (a citação e o último parágrafo) desce para baixo do
   bloco: com o texto inteiro ao lado, o cartaz precisaria de um corte grande
   para alcançar a mesma altura. */
.prosa-lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: 44px;
  align-items: stretch;
}

.prosa-lado .prosa { max-width: none; }

/* O fecho volta a alinhar pela esquerda do box, não pelo centro da página. */
.prosa-fecho { max-width: 1080px; margin: 34px auto 0; }
.prosa-fecho > * { max-width: 68ch; }

/* A arte preenche a célula por posicionamento absoluto: depender de
   height:100% em cadeia (figure > picture > img) quebra em alguns
   navegadores, que não resolvem a porcentagem sem altura explícita. */
.arte-lado {
  margin: 0;
  position: relative;
  align-self: stretch;
  min-height: 320px;
}

.arte-lado picture {
  position: absolute;
  inset: 0;
  display: block;
}

.arte-lado img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--borda);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
}

@media (max-width: 1100px) {
  .prosa-lado { grid-template-columns: 1fr; gap: 28px; }
  .arte-lado { position: static; min-height: 0; max-width: 420px; margin: 0 auto; }
  .arte-lado picture { position: static; }
  .arte-lado img {
    position: static;
    height: auto;
    object-fit: initial;
    border-radius: 12px;
  }
}


/* Durante a abertura da cortina, as pernas laterais aguardam na coxia */
.estreia .cortina-lateral { opacity: 0; transition: none; }


/* ---------- Atores como marcas d'água posicionadas ---------- */

.atores-cartaz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.atores-cartaz img.ator {
  position: absolute;
  top: 96px;
  width: min(34%, 500px);
  height: auto;
  opacity: 0.19;
  filter: saturate(0.45) brightness(0.88) blur(0.7px);
  transform: none;
  transition: opacity 3.6s ease 0.9s, transform 6s cubic-bezier(0.14, 0.86, 0.22, 1) 0.9s;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.atores-cartaz img.esq { top: 128px; left: max(20.5%, calc(50% - 570px)); }
.atores-cartaz img.dir { right: max(12%, calc(50% - 660px)); }

@media (max-width: 1100px) {
  .atores-cartaz img.ator { width: min(42%, 420px); opacity: 0.17; }
  .atores-cartaz img.esq { top: 116px; left: 10%; }
  .atores-cartaz img.dir { right: 2%; }
}

/* Entram em cena junto com as cortininhas, só que mais devagar: nascem um
   tiquinho menores e encostados no letreiro e vão se abrindo para os lados,
   como se saíssem de trás do nome do espetáculo. */
.atores-cartaz img.esq { transform-origin: right center; }
.atores-cartaz img.dir { transform-origin: left center; }
.estreia .atores-cartaz img.ator { opacity: 0; transform: scale(0.89); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .atores-cartaz img.ator { transition: none; transform: none; }
}


/* ============================================================
   Celular — clareza e leveza acima de tudo
   Numa tela pequena, cada camada animada custa repintura a cada
   quadro. Aqui o palco continua de pé, mas sem os efeitos que só
   fazem sentido com espaço e com uma GPU de mesa.
   ============================================================ */

@media (max-width: 700px) {
  /* --- Peso --- */
  body::before { display: none; }              /* grão de gravura em tela cheia */
  .hero-fundo::before { animation: none; }     /* fumaça */
  .cortina-lateral { animation: none; width: 7%; }
  .lampada {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 5px 1px rgba(255, 240, 200, 0.9), 0 0 15px 5px rgba(230, 179, 79, 0.36);
    animation-name: cintila-leve;
    animation-duration: var(--dur-mob, 3.2s);
  }

  /* Os atores continuam ao fundo, mas bem para dentro: as pernas de cortina
     ocupam 7% de cada lado e eles não podem encostar ali. */
  .atores-cartaz img.ator { width: 48%; opacity: 0.2; }
  .atores-cartaz img.esq { top: 120px; left: 9%; }
  .atores-cartaz img.dir { top: 108px; right: 4%; }

  /* O cabeçalho de celular vive no bloco do hambúrguer, mais abaixo. */
  .topo { backdrop-filter: none; background: rgba(11, 8, 9, 0.97); }

  /* --- Nenhuma frase quebrada no meio --- */
  .hero-nomes { font-size: 0.72rem; letter-spacing: 0.12em; }
  .plaquinha { padding: 16px 18px 18px; }
  .plaquinha .rotulo-cartaz { font-size: 0.66rem; letter-spacing: 0.18em; white-space: nowrap; }
  .plaquinha .data {
    font-size: clamp(1.05rem, 5.4vw, 1.5rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .plaquinha .local { font-size: 0.72rem; letter-spacing: 0.08em; }

  /* A data não quebra em nenhum dos dois lugares onde aparece. */
  .cartaz-dado .valor { font-size: 1.08rem; }
  .cartaz-box { padding: 26px 20px; }
  .cartaz-acao .btn { white-space: nowrap; }
  .btn-gigante { padding: 16px 20px; font-size: 1.02rem; }
}

/* Tremulação sem filtro: no celular, animar brightness repinta o brilho
   inteiro a cada quadro. Só a opacidade já dá a impressão de incandescência. */
/* No celular a lâmpada é pequena e a tela costuma estar no sol: uma queda de
   dez por cento simplesmente não se enxerga. Aqui a tremulação é funda de
   verdade, e os picos acendem mais do que no desktop para compensar. */
@keyframes cintila-leve {
  0%, 100% { opacity: 1; filter: brightness(1.08); }
  12%  { opacity: 1; filter: brightness(1.3); }
  23%  { opacity: 0.72; filter: brightness(0.82); }
  34%  { opacity: 1; filter: brightness(1.14); }
  52%  { opacity: 0.6; filter: brightness(0.72); }
  58%  { opacity: 1; filter: brightness(1.32); }
  74%  { opacity: 0.86; filter: brightness(0.94); }
  88%  { opacity: 0.7; filter: brightness(0.8); }
}


/* ============================================================
   Logotipos de realização
   Quase todos foram desenhados para fundo branco, então cada um
   ganha o mesmo cartão claro — o que dá ordem visual a marcas de
   formatos e pesos bem diferentes. A Nos Trinx é a exceção: a
   arte dela nasce sobre preto e o cartão acompanha.
   ============================================================ */

.faixa-logos { margin-top: 26px; }

.grupo-logos + .grupo-logos { margin-top: 34px; }

.grupo-logos .rotulo {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ambar);
  text-align: center;
  margin-bottom: 16px;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.marca-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 190px;
}

.marca-logo .cartao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 108px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(10, 4, 5, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.marca-logo .cartao.escuro { background: #000; border-color: rgba(244, 239, 230, 0.18); }
.marca-logo .cartao.tinta-gquest { background: #070c14; border-color: rgba(240, 160, 40, 0.32); }

.marca-logo .cartao img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.marca-logo .nome {
  font-family: var(--cond);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.35;
  color: var(--papel-dim);
}

a.marca-logo:hover .cartao {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6);
}

a.marca-logo:hover .nome { color: var(--ambar-claro); }

/* Quem vem primeiro por obrigação de crédito aparece maior. */
.grupo-logos.principal .marca-logo { width: 232px; }
.grupo-logos.principal .cartao { height: 124px; }

/* O patrocinador ocupa o dobro do cartão comum: é a marca de maior
   peso depois do incentivo, e a assinatura dele é bem horizontal. */
.grupo-logos.patrocinio .marca-logo { width: 400px; }
.grupo-logos.patrocinio .cartao { height: 144px; padding: 22px 32px; }

@media (max-width: 700px) {
  .logos { gap: 14px; }
  .marca-logo { width: calc(50% - 7px); }
  .marca-logo .cartao { height: 88px; padding: 12px 14px; }
  .grupo-logos.principal .marca-logo { width: calc(50% - 7px); }
  .grupo-logos.principal .cartao { height: 96px; }
  .grupo-logos.patrocinio .marca-logo { width: 100%; max-width: 320px; }
  .grupo-logos.patrocinio .cartao { height: 118px; padding: 18px 22px; }
  .grupo-logos .rotulo { font-size: 0.72rem; letter-spacing: 0.22em; }
  .marca-logo .nome { font-size: 0.75rem; }
}




/* ============================================================
   Menu com hambúrguer no celular
   ============================================================ */

.hamburguer {
  display: none;
  width: 46px;
  height: 42px;
  padding: 10px 8px;
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.hamburguer span {
  display: block;
  height: 2px;
  background: var(--papel);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 820px) {
  .topo-inner { position: relative; flex-direction: row; padding: 12px 16px; }
  .hamburguer { display: flex; }

  .menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 18px;
    background: #0d0a0b;
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.6);
  }

  .menu.aberto { display: flex; }

  .menu a {
    padding: 14px 4px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(244, 239, 230, 0.08);
  }

  .menu a:last-of-type { border-bottom: 0; }
  .menu .btn { margin-top: 12px; width: 100%; min-height: 50px; border-bottom: 0; }
}


/* ============================================================
   Celular — tipografia em escala menor
   O que cabe bem numa tela de mesa fica pesado em 360 pontos de
   largura: aqui tudo desce um degrau.
   ============================================================ */

@media (max-width: 700px) {
  body { font-size: 15.5px; line-height: 1.6; }
  /* As pernas de cortina ocupam 7% de cada lado: o conteúdo do hero precisa
     começar depois delas, com folga, senão parece encostado no veludo. */
  .hero-inner { padding-left: max(34px, calc(7% + 16px)); padding-right: max(34px, calc(7% + 16px)); }
  .hero-ctas { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
  .hero .frase { max-width: 30ch; margin-left: auto; margin-right: auto; }
  .marca { font-size: 1.35rem; }
  .hero h1 { font-size: clamp(2.7rem, 10.5vw, 3.6rem); }
  .hero .subtitulo { font-size: clamp(0.9rem, 3.6vw, 1.1rem); letter-spacing: 0.16em; }
  .hero .frase { font-size: 0.98rem; }
  .secao-titulo { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .secao-sub { font-size: 0.95rem; }
  .pagina-cabecalho h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .pagina-cabecalho p { font-size: 0.98rem; }
  .prosa { font-size: 0.98rem; }
  .prosa .destaque { font-size: 1.1rem; }
  .btn { font-size: 0.95rem; min-height: 48px; padding: 11px 22px; }
  .chip { font-size: 0.82rem; }
  .numero .grande { font-size: 2.4rem; }
  .pessoa h3 { font-size: 1.2rem; }
  .pessoa .corpo p { font-size: 0.9rem; }
  .ficha .nome { font-size: 1rem; }
  .rodape { font-size: 0.82rem; }
  /* O painel continua de lampadinhas: o que muda é a proporção. A letra
     cresce e a malha de pontos encolhe, para cada caractere manter cerca de
     oito pontos de altura — abaixo disso um letreiro de LED vira borrão. */
  .letreiro { padding: 15px 0; }
  .letreiro-faixa span {
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    background-size: 3px 3px;
    filter: drop-shadow(0 0 5px rgba(255, 180, 70, 0.5));
  }
}


/* ---------- Perguntas frequentes ---------- */

.perguntas {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.pergunta {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--papel);
  list-style: none;
}

.pergunta summary::-webkit-details-marker { display: none; }

.pergunta summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ambar);
  transition: transform 0.2s ease;
}

.pergunta[open] summary::after { content: '−'; }
.pergunta summary:hover { color: var(--ambar-claro); }

.pergunta p {
  padding: 0 20px 18px;
  color: var(--papel-dim);
  font-size: 0.98rem;
}

@media (max-width: 700px) {
  .pergunta summary { font-size: 0.95rem; padding: 14px 16px; }
  .pergunta p { font-size: 0.9rem; padding: 0 16px 16px; }
}

.ver-mais {
  margin-top: 28px;
  text-align: center;
  font-family: var(--cond);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ver-mais a { color: var(--vermelho-vivo); }
.ver-mais a:hover { color: var(--ambar-claro); }


/* As três chamadas dos teasers têm o mesmo comprimento: equilibrar as linhas
   evita que uma delas termine com uma palavra sozinha e ganhe uma terceira
   linha, desalinhando a altura dos cards. */
.teaser p { text-wrap: balance; }

/* Assinatura da GQuest no rodapé: marca no lugar do nome escrito */
.assinatura { display: inline-flex; align-items: center; gap: 10px; }
.assinatura a { display: inline-flex; align-items: center; }
.assinatura img { height: 30px; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.assinatura a:hover img { opacity: 1; }