/* ═══════════════════════════════════════════════════════════════
   COLAGEM TAPEROÁ — hero (parallax) + eco no rodapé
   Camadas recortadas à mão (aquarela / nanquim) + grão de papel.
   Fica ATRÁS do .hero__texto (cartaz de cordel). z-index: 0.
   Portado de "Hero Taperoa Colagem.dc.html" (Claude Design).
═══════════════════════════════════════════════════════════════ */

/* ── cor do cartaz de cordel: puxa pro azul do céu da colagem ──── */
:root {
  /* navy profundo levemente esverdeado→azul, casa com o #1a3ca0 do céu */
  --cartaz-bg: color-mix(in oklab, #14183f 88%, #1a3ca0 12%);
  /* moldura "costurada" do cartaz — TESTE: linha num amarelo-areia ESCURO
     (tom puxado da areia.png), com ruído/deslocamento pra ficar orgânica;
     os "pontos" (marcas de costura) num tom mais claro que a linha.
     Pra voltar ao original é só apagar o override de border-image em
     .hero__texto abaixo. */
  --moldura-cartaz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cdefs%3E%3Cfilter id='ru' x='-14%25' y='-14%25' width='128%25' height='128%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='2' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.27 0 0 0 0 0.08 0.45 0.45 0.45 0 -0.32' result='gc'/%3E%3CfeComposite in='gc' in2='d' operator='in' result='gi'/%3E%3CfeMerge%3E%3CfeMergeNode in='d'/%3E%3CfeMergeNode in='gi'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke-width='7' stroke-linejoin='round' stroke-linecap='round' filter='url(%23ru)'%3E%3Cpath stroke='%23c19a34' d='M12 16 C 40 9, 72 13, 104 10 S 128 14, 128 20 C 131 48, 126 78, 129 104 S 126 128, 120 128 C 92 131, 60 126, 34 129 S 12 126, 11 120 C 8 92, 13 60, 10 34 S 12 18, 12 16 Z'/%3E%3Cpath stroke='%23e9d091' stroke-width='6' d='M22 6 L26 16 M52 8 L54 18 M84 5 L88 15 M114 8 L116 18 M6 24 L16 26 M8 54 L18 56 M5 86 L15 84 M8 116 L18 114 M134 26 L124 24 M132 56 L122 54 M135 88 L125 86 M132 118 L122 116 M26 134 L24 124 M56 132 L54 122 M88 135 L86 125 M118 132 L116 122'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__texto {
  background: color-mix(in oklab, var(--cartaz-bg) 82%, transparent);
  /* TESTE de borda: linha amarelo-areia no lugar do azul/roxo escuro */
  border-image: var(--moldura-cartaz) 34 / 20px / 0 round;
  /* sombra mais macia: menos "adesivo duro", um pouco de blur, opacidade
     um tico maior pra não sumir */
  box-shadow: 9px 12px 26px color-mix(in oklab, var(--tinta) 70%, transparent);
}
@media (max-width: 560px) {
  .hero__texto { box-shadow: 6px 9px 20px color-mix(in oklab, var(--tinta) 70%, transparent); }
}
@supports not (backdrop-filter: blur(4px)) {
  .hero__texto { background: color-mix(in oklab, var(--cartaz-bg) 94%, transparent); }
}

/* ── título por imagem (com fallback pro texto/fonte atual) ────── */
.hero__titulo-img {
  display: block;
  width: 100%;
  max-width: min(100%, 33rem);
  height: auto;
}
.hero__titulo:has(.hero__titulo-img) {
  text-shadow: none;              /* a imagem já tem sombra própria */
  line-height: 1;
}
.hero__titulo-fallback:not([hidden]) { display: block; }

/* ═══════════════ CENA DO HERO ═══════════════ */
.hero-cena {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* fallback: céu → terra (nunca azul chapado no rodapé da section) */
  background: linear-gradient(#2f5faf 0%, #3a63a8 44%, #6b5a3e 76%, #3a2c1e 100%);
}
.hero-cena__defs { position: absolute; width: 0; height: 0; }

.hero-cena__camada {
  position: absolute;
  will-change: transform;
  backface-visibility: hidden;
  /* IMPORTANTE: o reset global tem `img{max-width:100%}` — sem isto as
     camadas de largura cheia ficam presas em 100% e sobra faixa do fundo
     na direita (o left negativo puxa tudo pra esquerda). */
  max-width: none;
}

/* ── camadas (fundo → frente) ───────────────────────────────────── */
/* largura cheia: <img> é elemento substituído — com `right` + width auto
   ele usa a largura INTRÍNSECA (ou derivada do height). Então: width
   explícito (128–132%) + só `left` negativo. `max-width:none` acima
   destrava o clamp do reset. */
.hc-ceu {
  left: -14%; width: 128%; top: -5%;
  height: 84%;
  object-fit: fill;
}
.hc-sol {
  right: clamp(3%, 20%, 18%);
  top: clamp(58px, 27%, 32%);   /* mais baixo (~+7% em relação à areia) */
  width: clamp(160px, 33vw, 640px);
  height: auto;
  filter: drop-shadow(4px 8px 10px rgba(30, 20, 10, 0.22));
}
/* monitores largos: o sol não fica jogado na borda — puxa pro centro,
   e ~20% menor que antes */
@media (min-width: 1500px) {
  .hc-sol { right: 22%; width: clamp(336px, 24vw, 448px); }
}
@media (min-width: 1900px) {
  .hc-sol { right: 38%; top: 16%; }
}
/* celular: sol maior e mais baixo, com ~20% escondido atrás da areia */
@media (max-width: 640px) {
  .hc-sol {
    right: clamp(4%, 12%, 18%);
    top: auto;
    bottom: 44%;                 /* mais baixo: base do sol some mais atrás da duna */
    width: clamp(150px, 44vw, 300px);
  }
}

/* igrejinha — ATRÁS da montanha (renderiza ANTES de areia/serra no DOM,
   depth 0.26 < areia 0.30). A duna/serra cobrem a base; só a torre/telhado
   aparece contra o céu. Como a camada que a esconde se move MAIS que ela
   no parallax, a base nunca "descola" → não flutua.
   Fica à ESQUERDA e À FRENTE do sol (depth 0.26 > sol 0.13). */
.hc-igreja {
  right: 47%;
  bottom: 44%;                /* atrás da areia: só a torre aparece acima da duna */
  height: 300px;             /* telas médias (laptop / tablet) */
  width: auto;
  opacity: 1;
  filter: drop-shadow(3px 7px 9px rgba(18, 12, 6, 0.3));
}
@media (min-width: 1500px) {
  .hc-igreja { right: 51%; height: 350px; }   /* telas grandes */
}
@media (max-width: 640px) {
  /* right menor: com 300px de altura (~204px de largura) a igreja
     cabe inteira num celular de 375px */
  .hc-igreja { right: 36%; bottom: 38%; height: 300px; }
}

.hc-areia {
  left: -14%; width: 128%; bottom: 0%;
  height: 50%;
  object-fit: fill;
}
@media (max-width: 640px) {
  .hc-areia { bottom: 18%; height: 24%; }
}

/* chão-de-fundo: cópia escura do chão, quase parada (depth baixo).
   Garante que ao rolar SEMPRE tenha terra embaixo — nada de fundo
   chapado aparecendo. */
.hc-chao-fundo {
  left: -16%; width: 132%; bottom: -20%;
  height: 46%;
  object-fit: fill;
  filter: brightness(0.4) saturate(0.6) contrast(1.05);
}

.hc-serra {
  left: -14%; width: 128%; bottom: 0%;
  height: 37%;
  object-fit: fill;
}
/* mandacaru + placa "TAPEROÁ" — imagem única, FIXA (sem animação) */
.hc-cacto {
  right: clamp(7%, 15%, 22%);
  bottom: 17%;
  height: clamp(170px, min(54vh, 46vw), 780px);
  width: auto;
  filter: drop-shadow(8px 12px 14px rgba(30, 20, 10, 0.3));
}
.hc-chao {
  left: -16%; width: 132%; bottom: -12%;
  height: 35%;
  object-fit: fill;
}
.hc-caveira {
  right: clamp(3%, 8%, 13%);
  bottom: 2%;
  width: clamp(140px, 27vw, 560px);
  height: auto;
  filter: drop-shadow(8px 10px 12px rgba(30, 20, 10, 0.34));
}
.hc-colibri-wrap {
  right: clamp(0%, 2%, 7%);
  top: clamp(56px, 16%, 22%);
  width: clamp(88px, 17vw, 380px);
}
@media (max-width: 640px) {
  /* voando perto do mandacaru, mais pra baixo */
  .hc-colibri-wrap { top: 72%; right: clamp(3%, 8%, 12%); }
}
.hc-colibri {
  display: block;
  width: 100%; height: auto;
  filter: drop-shadow(6px 10px 10px rgba(30, 20, 10, 0.3));
  animation: hcFloatBird 8s ease-in-out infinite;
}
@keyframes hcFloatBird {
  0%   { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50%  { transform: translate3d(-18px, -22px, 0) rotate(1.5deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
}

/* ── grão / textura / vinheta / scrim ──────────────────────────── */
.hero-cena__grao {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.2;
  pointer-events: none;
}
.hero-cena__vinheta {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%,
    rgba(0, 0, 0, 0) 55%, rgba(38, 24, 10, 0.28) 100%);
}
.hero-cena__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      color-mix(in oklab, var(--cartaz-bg) 70%, transparent) 0%,
      color-mix(in oklab, var(--cartaz-bg) 34%, transparent) 30%,
      transparent 58%),
    linear-gradient(to top,
      color-mix(in oklab, #241a10 55%, transparent) 0%,
      transparent 40%);
}
@media (max-width: 640px) {
  .hero-cena__scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in oklab, var(--cartaz-bg) 72%, transparent) 0%,
        color-mix(in oklab, var(--cartaz-bg) 28%, transparent) 36%,
        transparent 56%),
      linear-gradient(to top,
        color-mix(in oklab, #241a10 58%, transparent) 0%,
        transparent 42%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-colibri { animation: none; }
  .hero-cena__camada { transform: none !important; }
}

/* ═══════════════ "ONDE É" + RODAPÉ — céu de aquarela (ceu.png) ═══════════════
   A imagem do céu cobre a "Onde é" e CONTINUA no rodapé (background-attachment
   fixed → o céu fica preso à viewport e "passa" continuamente ao rolar).
   Degradê de fallback embaixo caso a imagem não carregue. */
:root {
  --ceu-fallback: linear-gradient(to bottom,
    color-mix(in oklab, var(--noite-2) 80%, var(--ceu-esc)) 0%,
    var(--ceu-esc) 46%,
    color-mix(in oklab, var(--ceu-esc) 58%, var(--ceu)) 100%);
}

#onde,
.rodape {
  background-color: var(--ceu-esc);
  background-repeat: no-repeat;
}

/* "Onde é": céu + o MESMO overlay escuro do rodapé (consistência) */
#onde {
  background-image:
    linear-gradient(to bottom,
      color-mix(in oklab, #0b1030 34%, transparent) 0%,
      color-mix(in oklab, #0b1030 46%, transparent) 55%,
      color-mix(in oklab, #0b1030 30%, transparent) 100%),
    url("layers/webp/ceu.webp"),
    var(--ceu-fallback);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  background-attachment: scroll, fixed, scroll;
}

/* "Onde é" — bug de layout: no Chrome, `aspect-ratio` no `.onde__mapa`
   (grid item esticado por `align-items: stretch`) fazia o Chrome derivar a
   LARGURA a partir da altura esticada → o mapa saía ~50px mais largo que a
   coluna e cobria o texto ao lado (Firefox respeitava a coluna). Sem
   aspect-ratio + `min-height` fluida, a altura vem do stretch (= coluna do
   lado) igual nos dois navegadores. */
.onde__mapa {
  aspect-ratio: auto;
  min-height: clamp(300px, 34vw, 460px);
  align-self: stretch;
}
.onde > * { min-width: 0; }   /* trava clássica de "grid blowout" */

/* Rodapé: mesmo céu, continuando. O chão vem só como faixa embaixo
   (fundo transparente por cima) — o céu não é interrompido.
   Overlay escuro por cima do céu → texto branco fica legível. */
.rodape {
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 0;
  background-image:
    linear-gradient(to bottom,
      color-mix(in oklab, #0b1030 34%, transparent) 0%,
      color-mix(in oklab, #0b1030 46%, transparent) 55%,
      color-mix(in oklab, #0b1030 30%, transparent) 100%),
    url("layers/webp/ceu.webp"),
    var(--ceu-fallback);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  background-attachment: scroll, fixed, scroll;
}
.rodape > * { position: relative; z-index: 1; }

.rodape__cena {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.rodape__cena img { position: absolute; max-width: none; }

/* chão do RODAPÉ — classe própria (.rc-chao), independente das camadas do
   hero (.hc-chao / .hc-chao-fundo). Só compartilham o arquivo chao.png.
   É uma FAIXA embaixo do rodapé: altura limitada (não vira um bloco em
   telas grandes), `cover` + `object-position` no topo pra manter a borda
   rasgada (a horizonte) e cortar só o excesso de baixo, que fica fora da tela. */
.rc-chao {
  left: -12%;
  right: -12%;
  bottom: clamp(-2.5rem, -7%, -1.25rem);
  width: 124%;
  height: clamp(240px, 90%, 340px);
  object-fit: cover;
  object-position: 50% 0%;   /* topo alinhado → borda rasgada intacta, corta só o excesso de baixo */
}
.rc-scrim { display: none; }   /* o "gradiente esquisito" saiu */
/* legibilidade do texto do rodapé sem fundo: sombra no próprio texto */
.rodape p { text-shadow: 0 1px 5px rgba(6, 8, 20, 0.5); }
.rodape__fina { text-shadow: 0 1px 4px rgba(6, 8, 20, 0.55); }
.rodape a { text-shadow: 0 1px 3px rgba(6, 8, 20, 0.6); }
/* caveira no canto INFERIOR DIREITO */
.rc-caveira {
  right: clamp(-3%, 1%, 5%);
  bottom: clamp(-6%, -2%, 3%);
  width: clamp(150px, 27vw, 360px);
  height: auto;
  transform: rotate(4deg);
  filter: brightness(0.94) saturate(0.6) drop-shadow(4px 8px 10px rgba(0, 0, 0, 0.45));
  opacity: 0.92;
}
@media (max-width: 560px) { .rc-caveira { width: 150px; opacity: 0.8; } }

/* ── sol do rodapé: gira devagar ── */
.rodape__sol { animation: rodapeSolGira 26s linear infinite; }
@keyframes rodapeSolGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rodape__sol { animation: none; } }

/* link em volta do logo — position:static pra não virar o container do
   posicionamento absoluto do logo (o .rodape > * ali em cima daria
   position:relative pro link, e o logo ia se posicionar relativo a ele
   em vez de relativo ao rodapé inteiro) */
.rodape__moara-link { position: static; display: block; }

/* ── logo da Moara: canto esquerdo, colado no fim da página (20px de margem) ── */
.rodape__moara {
  position: absolute;
  left: clamp(0.75rem, 3vw, 2.5rem);
  bottom: 20px;
  top: auto;
  transform: none;
  width: clamp(84px, 11vw, 132px); /* menor */
  height: auto;
  z-index: 1;
  background: white;
  padding: 8px;
  border-radius: 8px;
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.35));
}
@media (max-width: 760px) {
  .rodape { padding-top: 6.5rem; }
  .rodape__moara {
    position: static; transform: none;
    display: block; margin: 0 auto 1.4rem; width: 156px;
  }
}

/* ── bloco "Apoio" + logo GDF, embaixo dos botões da "Onde é" ── */
.onde__apoio { margin-top: 1.4rem; }
.onde__apoio-rot {
  font-family: var(--f-corpo); font-style: italic;
  font-size: 0.95rem; color: var(--osso-2); margin-bottom: 0.4rem;
}
/* logo-GDF_v2.webp (378x38) — faixa horizontal com texto (era um selo em pé,
   280x320, na v1); agora o tamanho é fixado pela LARGURA, não pela altura,
   senão o texto fica minúsculo demais pra ler */
.onde__apoio-gdf {
  display: block;
  width: clamp(160px, 34vw, 240px);
  aspect-ratio: 378 / 38;
  background: url("../assets/img/logo-GDF_v2.webp") center / contain no-repeat;
}

/* ═══════════════ SEÇÃO "A PEÇA" — pôster da igreja ═══════════════
   Um único pôster (poster-igreja.jpg — já tem borda de papel rasgado),
   levemente inclinado, com sombra de adesivo. Sem moldura extra. */
.peca__figura--igreja {
  align-self: center;
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
.peca__igreja-img {
  width: min(100%, 26rem);
  height: auto;
  max-width: none;
  rotate: -2.5deg;
  filter:
    drop-shadow(2px 3px 0 rgba(8, 6, 16, 0.28))
    drop-shadow(5px 12px 16px rgba(8, 6, 16, 0.42));
}
@media (prefers-reduced-motion: no-preference) {
  .peca__igreja-img { transition: rotate 0.4s var(--ease-saida, ease); }
  .peca__figura--igreja:hover .peca__igreja-img { rotate: -0.5deg; }
}

/* ═══════════════ ELENCO — entrada dos cards (varal) ═══════════════
   Ao entrar na tela, cada card "cai" e balança pra assentar, em cascata.
   Depois assume o balanço suave de sempre (`balanca`). Hover e
   prefers-reduced-motion continuam funcionando. */
@media (prefers-reduced-motion: no-preference) {
  .varal.revela .pendura { opacity: 0; }

  .varal.revela.dentro .pendura {
    animation:
      penduraEntra 0.8s var(--ease-saida, cubic-bezier(0.22, 1, 0.36, 1)) forwards,
      balanca 6s ease-in-out infinite;
    animation-delay: 0s, 0.95s;
  }
  .varal.revela.dentro .pendura:nth-child(1) { animation-delay: 0.000s, 0.950s; }
  .varal.revela.dentro .pendura:nth-child(2) { animation-delay: 0.055s, 1.005s; }
  .varal.revela.dentro .pendura:nth-child(3) { animation-delay: 0.110s, 1.060s; }
  .varal.revela.dentro .pendura:nth-child(4) { animation-delay: 0.165s, 1.115s; }
  .varal.revela.dentro .pendura:nth-child(5) { animation-delay: 0.220s, 1.170s; }
  .varal.revela.dentro .pendura:nth-child(6) { animation-delay: 0.275s, 1.225s; }
  .varal.revela.dentro .pendura:nth-child(7) { animation-delay: 0.330s, 1.280s; }
  .varal.revela.dentro .pendura:nth-child(8) { animation-delay: 0.385s, 1.335s; }
  .varal.revela.dentro .pendura:nth-child(9) { animation-delay: 0.440s, 1.390s; }
  .varal.revela.dentro .pendura:nth-child(10) { animation-delay: 0.495s, 1.445s; }
  .varal.revela.dentro .pendura:nth-child(11) { animation-delay: 0.550s, 1.500s; }
  .varal.revela.dentro .pendura:nth-child(12) { animation-delay: 0.605s, 1.555s; }
  .varal.revela.dentro .pendura:nth-child(13) { animation-delay: 0.660s, 1.610s; }
  .varal.revela.dentro .pendura:nth-child(14) { animation-delay: 0.715s, 1.665s; }
  .varal.revela.dentro .pendura:nth-child(15) { animation-delay: 0.770s, 1.720s; }
  .varal.revela.dentro .pendura:nth-child(16) { animation-delay: 0.825s, 1.775s; }
  .varal.revela.dentro .pendura:nth-child(17) { animation-delay: 0.880s, 1.830s; }
  .varal.revela.dentro .pendura:nth-child(18) { animation-delay: 0.935s, 1.885s; }
  .varal.revela.dentro .pendura:nth-child(19) { animation-delay: 0.990s, 1.940s; }
  .varal.revela.dentro .pendura:nth-child(20) { animation-delay: 1.045s, 1.995s; }
  .varal.revela.dentro .pendura:nth-child(21) { animation-delay: 1.100s, 2.050s; }
  .varal.revela.dentro .pendura:nth-child(22) { animation-delay: 1.155s, 2.105s; }
  .varal.revela.dentro .pendura:nth-child(23) { animation-delay: 1.210s, 2.160s; }
  .varal.revela.dentro .pendura:nth-child(24) { animation-delay: 1.265s, 2.215s; }
  .varal.revela.dentro .pendura:nth-child(25) { animation-delay: 1.320s, 2.270s; }
  .varal.revela.dentro .pendura:nth-child(26) { animation-delay: 1.375s, 2.325s; }

}

/* HOVER — fora do @media reduced-motion p/ neutralizar o `animation:none`
   herdado do styles.q (que fazia o card SUMIR, pois a opacidade caía pro 0
   do estado pré-entrada). Aqui: mantém visível, dá um leve destaque
   (sobe + cresce), o balanço continua por baixo. */
@media (hover: hover) {
  .varal .pendura:hover {
    animation-name: penduraEntra, balanca;   /* vence o `animation:none` */
    opacity: 1;
    z-index: 6;
    transform: translateY(-10px) scale(1.07);
  }
  .varal .pendura:hover .pendura__card {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  }
}

/* entrada: anima `translate`/`rotate` (props individuais), NÃO `transform`
   → o `transform` fica livre pro hover. `forwards` fixa opacity/translate. */
@keyframes penduraEntra {
  0%   { opacity: 0; translate: 0 -24px; rotate: -11deg; }
  38%  { opacity: 1; }
  56%  { translate: 0 4px; rotate: 7deg; }
  74%  { translate: 0 -1px; rotate: -3.6deg; }
  88%  { rotate: calc(var(--sway, 0deg) + 1.4deg); }
  100% { opacity: 1; translate: 0 0; rotate: var(--sway, 0deg); }
}

/* ═══════════════ CONTAGEM — frase de cordel (itálico) ═══════════════
   A frase é PARENTE da contagem (fala dela), então fica AO LADO dos números.
   `.contagem-bloco` embrulha os dois; a frase segue com seu próprio
   [hidden] (quando o evento começa/passa a caixa some e ela fica sozinha).
   Regras/texto em config.js → FRASES_CONTAGEM. */
.contagem-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin-bottom: 0.8rem;
}
.contagem-bloco .contagem { margin-bottom: 0; }
.contagem__frase {
  flex: 1 1 13rem;
  min-width: 11rem;
  max-width: 34ch;
  margin: 0;
  align-self: center;
  min-height: 4.3em;             /* reserva ~3 linhas → o layout nunca "pula" ao trocar */
  /* centra o TEXTO na vertical (pelo meio do countdown) com 1, 2 ou 3 linhas */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--f-corpo, Georgia, serif);
  font-style: italic;
  font-size: clamp(0.92rem, 0.86rem + 0.32vw, 1.08rem);
  line-height: 1.34;
  color: var(--sol);
  text-wrap: normal;             /* estável enquanto digita (sem reflow por letra) */
  white-space: pre-wrap;         /* mantém o espaço final durante a digitação */
  transition:
    opacity 0.42s var(--ease-saida),
    filter 0.42s var(--ease-saida),
    transform 0.42s var(--ease-saida);
}
.contagem__frase-t { display: block; }
/* cursor de máquina de escrever — no ::after do <span>, segue a última letra */
.contagem__frase-t::after {
  content: '';
  display: inline-block;
  width: 0.09em;
  height: 1.05em;
  margin-left: 0.12em;
  vertical-align: -0.16em;
  background: currentColor;
  opacity: 0.75;
  animation: cdCursor 1.05s steps(1, end) infinite;
}
.contagem__frase[hidden] .contagem__frase-t::after { display: none; }
.contagem__frase--digita .contagem__frase-t::after { animation: none; opacity: 0.9; }  /* aceso durante a digitação */
@keyframes cdCursor { 0%, 49% { opacity: 0.75; } 50%, 100% { opacity: 0; } }
/* saída: some pra cima com um leve desfoque (casa com CD_SAI no app.js) */
.contagem__frase--sai {
  opacity: 0;
  filter: blur(2.5px);
  transform: translateY(-6px);
}
/* no celular a frase desce e ocupa a linha inteira, centralizada com o resto */
@media (max-width: 560px) {
  .contagem__frase { flex-basis: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contagem__frase { transition: opacity 0.3s ease; }
  .contagem__frase--sai { filter: none; transform: none; }
  .contagem__frase--troca { opacity: 0; }
  .contagem__frase-t::after { display: none; }
}

/* ═══════════════ CONTAGEM — cartaz "Falta pouco" ═══════════════
   Era amarelo (var(--sol)) e confundia com o botão do CTA. Agora é
   escuro (var(--noite-3)) com letra clara — combina com as células. */
.contagem__rot {
  background: var(--noite-3);
  color: var(--osso);
}

/* ═══════════════ INGRESSOS — card de preço não fica "grudado" ═══════════════
   O styles.q realça o card no `:hover, :focus-within`. Como o card tem
   tabindex=0, clicar nele dá foco e o realce ficava preso (fundo amarelo
   + texto dourado por cima = ilegível). Aqui o realce cheio fica SÓ no
   hover; o foco (teclado ou clique) só ganha o contorno padrão. */
@media (hover: hover) {
  .tipo-card:focus-within:not(:hover) {
    transform: none;
    background: var(--noite-2);
    color: var(--osso);
    box-shadow: none;
    z-index: auto;
  }
  .tipo-card--destaque:focus-within:not(:hover) {
    background: var(--sol);
    color: var(--tinta);
  }
  /* ao passar o mouse por outro card, o card focado também escurece
     (o protagonista é sempre o que está sob o mouse) */
  .tipos-grade:hover .tipo-card:not(:hover) {
    filter: saturate(0.7) brightness(0.82);
  }
}

/* ═══════════════ RODAPÉ — link "Ficha técnica e créditos" ═══════════════ */
.rodape__link {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
  color: var(--sol);
  text-decoration: underline; text-underline-offset: 0.18em;
  text-shadow: 0 1px 3px rgba(6, 8, 20, 0.6);
}
.rodape__link:hover { color: var(--sol-forte); }
.rodape__link:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 2px; }

/* ═══════════════ MODAL — Ficha técnica e créditos ═══════════════
   Mesma linguagem visual do checkout (moldura de xilogravura, fundo
   noite-2, botão de fechar amarelo). Conteúdo rola dentro de .ficha__corpo. */
.ficha {
  margin: auto; border: none; padding: 0; background: transparent; color: var(--osso);
  width: calc(100% - 2rem); max-width: 44rem;
  max-height: calc(100dvh - 2rem);
}
@media (min-width: 900px) { .ficha { max-width: 48rem; } }
.ficha::backdrop {
  background: color-mix(in oklab, var(--tinta) 76%, transparent);
  backdrop-filter: blur(3px);
}
.ficha[open] { animation: co-entra 0.34s var(--ease-saida); }
@media (prefers-reduced-motion: reduce) { .ficha[open] { animation: none; } }

.ficha__caixa {
  position: relative; background: var(--noite-2);
  border: 10px solid transparent; border-image: var(--moldura) 34 / 22px / 0 round;
  padding: clamp(1.4rem, 1rem + 2.4vw, 2.6rem);
  max-height: calc(100dvh - 2rem);
  display: flex; flex-direction: column;
}

/* ═══════════════ MOLDURA AMARELO-AREIA nas modais ═══════════════
   Mesma borda "costurada" com ruído do cartaz do hero, agora também
   no fluxo de compra e na ficha técnica (a moldura interna dos cards
   menores da compra continua a escura, pra dar hierarquia). */
.checkout__caixa,
.ficha__caixa {
  border-image: var(--moldura-cartaz) 34 / 22px / 0 round;
}
.ficha__fechar {
  position: absolute; top: 0.55rem; right: 0.7rem; z-index: 2;
  width: 2.1rem; height: 2.1rem; display: grid; place-content: center;
  background: var(--sol); color: var(--tinta); border: var(--traco) solid var(--tinta);
  font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: var(--raio);
}
.ficha__fechar:hover { background: var(--sol-forte); }

.ficha__corpo {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 2px 2px;
}
.ficha__titulo {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.1rem); color: var(--osso);
  margin: 0.35rem 0 0.1rem; padding-right: 2rem;
}

.ficha__bloco { margin-top: 1.6rem; }
.ficha__bloco h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.16rem; color: var(--sol);
  margin: 0 0 0.55rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--linha);
}
.ficha__bloco p {
  font-size: 0.94rem; line-height: 1.62; color: var(--osso-2);
  margin: 0 0 0.65rem; max-width: 64ch;
}
.ficha__bloco p:last-child { margin-bottom: 0; }
.ficha__bloco strong { color: var(--osso); font-weight: 600; }
.ficha__bloco em { color: var(--osso); }

.ficha__creditos { margin: 0; display: grid; gap: 0.55rem 1.2rem; }
.ficha__creditos > div {
  display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.1rem 1rem; align-items: baseline;
}
.ficha__creditos dt {
  font-family: var(--f-corpo); font-style: italic;
  font-size: 0.85rem; color: var(--osso-2);
}
.ficha__creditos dd {
  margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--osso);
}
.ficha__pend { font-style: italic; color: color-mix(in oklab, var(--osso-2) 62%, transparent); }
@media (max-width: 520px) {
  .ficha__creditos > div { grid-template-columns: 1fr; gap: 0; }
  .ficha__creditos dt { margin-bottom: 0.05rem; }
  .ficha__creditos dd { margin-bottom: 0.35rem; }
}

.ficha__copy {
  margin: 1.9rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--linha);
  font-size: 0.82rem; font-style: italic; line-height: 1.55;
  color: var(--osso-2);
}

/* ═══════════════ MODO "APRECIAR A ARTE" ═══════════════
   Botão discreto no canto inferior esquerdo do hero. Ao ativar,
   o cartaz (.hero__texto) desliza pra fora e a colagem aparece
   inteira; volta com clique na tela, scroll, Esc ou no próprio botão.
   (o JS põe/tira .hero--arte no <section class="hero">) */

/* — o cartaz entra/sai deslizando (ease-in-out) — */
.hero__texto {
  transition:
    transform 0.72s cubic-bezier(0.83, 0, 0.17, 1),
    opacity 0.52s ease;
}
.hero--arte .hero__texto {
  transform: translateX(calc(-100% - var(--lado) - 2rem)) rotate(-3deg) scale(0.94);
  opacity: 0;
  pointer-events: none;
}
/* seta "veja mais" some junto (aponta pra info escondida) */
.hero__rolar { transition: opacity 0.4s ease; }
.hero--arte .hero__rolar { opacity: 0; pointer-events: none; }
/* deixa a arte respirar: alivia os véus escuros que existem só pra
   legibilidade do cartaz */
.hero::before,
.hero-cena__scrim { transition: opacity 0.6s ease; }
.hero--arte::before { opacity: 0.32; }
.hero--arte .hero-cena__scrim { opacity: 0.4; }

/* — botão toggle — */
.hero__arte {
  position: absolute;
  left: var(--lado);
  bottom: clamp(0.85rem, 2.2vh, 1.7rem);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.48rem 0.9rem 0.48rem 0.78rem;
  font-family: var(--f-corpo, Georgia, serif);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--osso-2);
  background: color-mix(in oklab, var(--noite) 50%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(6, 8, 20, 0.35);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.hero__arte:hover,
.hero__arte[aria-pressed="true"] {
  color: var(--osso);
  border-color: color-mix(in oklab, var(--sol) 55%, var(--linha));
  background: color-mix(in oklab, var(--noite) 66%, transparent);
}
.hero__arte:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
.hero__arte-ico { display: inline-flex; }
.hero__arte-ico svg { width: 17px; height: 17px; }
.hero__arte-ico--ver { display: block; }
.hero__arte-ico--voltar { display: none; }
.hero__arte[aria-pressed="true"] .hero__arte-ico--ver { display: none; }
.hero__arte[aria-pressed="true"] .hero__arte-ico--voltar { display: block; }
.hero__arte-txt { white-space: nowrap; }

/* — legenda discreta que aparece com a arte — */
.hero__arte-nota {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 2.6vh, 1.9rem);
  z-index: 4;
  margin: 0;
  max-width: min(88vw, 30rem);
  text-align: center;
  font-family: var(--f-corpo, Georgia, serif);
  font-style: italic;
  font-size: clamp(0.82rem, 0.78rem + 0.3vw, 0.96rem);
  color: var(--osso);
  text-shadow: 0 1px 6px rgba(6, 8, 20, 0.8), 0 0 22px rgba(6, 8, 20, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.5s ease 0.12s, transform 0.6s var(--ease-saida) 0.12s;
}
.hero--arte .hero__arte-nota { opacity: 1; transform: translate(-50%, 0); }

/* — dica de arrastar (só celular — sem mouse não dá pra ver o parallax) —
   some sozinha depois de uns segundos, ou assim que o usuário arrasta de
   verdade (JS do hero.js bota .hero--arraste-feito na hora do 1º arrasto) */
.hero__arraste-dica {
  display: none;
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 4;
  flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.65rem 1.1rem;
  background: color-mix(in oklab, var(--noite) 55%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid var(--linha);
  border-radius: 1.1rem;
  color: var(--osso);
  text-align: center;
  text-shadow: 0 1px 6px rgba(6, 8, 20, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.3s;
}
.hero--arte .hero__arraste-dica { opacity: 1; }
.hero--arte.hero--arraste-feito .hero__arraste-dica { opacity: 0; transition-delay: 0s; }
.hero__arraste-dica-mao { font-size: 1.7rem; line-height: 1; animation: heroArrasteBalanca 1.4s ease-in-out infinite; }
.hero__arraste-dica-txt { font-family: var(--f-corpo, Georgia, serif); font-style: italic; font-size: 0.84rem; white-space: nowrap; }
@keyframes heroArrasteBalanca {
  0%, 100% { transform: translateX(-11px) rotate(-8deg); }
  50%      { transform: translateX(11px) rotate(8deg); }
}
@media (max-width: 760px) { .hero__arraste-dica { display: flex; } }

/* no celular: botão menor no canto, legenda ACIMA dele (não colidem);
   a seta "veja mais" (estática no fluxo) some sem empurrar nada */
@media (max-width: 639px) {
  .hero__arte { font-size: 0.76rem; padding: 0.42rem 0.78rem; bottom: 0.95rem; }
  .hero__arte-nota { bottom: 3.7rem; max-width: 82vw; font-size: 0.86rem; }
  .hero--arte .hero__rolar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__texto { transition: opacity 0.28s ease; }
  .hero--arte .hero__texto { transform: none; opacity: 0; }
  .hero__arte-nota { transition: opacity 0.28s ease; transform: translate(-50%, 0); }
  .hero--arte .hero__arte-nota { transform: translate(-50%, 0); }
  .hero__arraste-dica { display: none !important; }
}