/* ═══════════════════════════════════════════════════════════════════════
   O AUTO DO REINO DO SOL — Teatro Moara 8º Ano 2026
   Xilogravura de J. Borges · cordel · Armorial · circo mambembe no sertão
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- cor (OKLCH) ---- */
  /* paleta puxada da colagem Taperoá (aquarelas do hero) — 1ª aproximação.
     azuis mais ultramarinos, marrons de serra, amarelos/laranjas do sol. */
  --noite:        oklch(0.235 0.070 274);  /* menos roxo, mais azul-noite    */
  --noite-2:      oklch(0.172 0.060 272);
  --noite-3:      oklch(0.30 0.076 276);
  --barro:        oklch(0.52 0.140 46);    /* terracota da serra             */
  --barro-esc:    oklch(0.38 0.120 44);
  --barro-claro:  oklch(0.64 0.145 54);
  --sol:          oklch(0.85 0.155 90);    /* amarelo-gema do sol            */
  --sol-forte:    oklch(0.71 0.175 58);    /* laranja-poente                 */
  --ceu:          oklch(0.46 0.150 262);   /* azul ultramarino do céu pintado */
  --ceu-esc:      oklch(0.31 0.125 264);
  --verde:        oklch(0.64 0.140 148);   /* verde-mandacaru                */
  --verde-esc:    oklch(0.47 0.100 152);
  --rosa:         oklch(0.60 0.160 3);     /* flor do mandacaru / vestido    */
  --osso:         oklch(0.955 0.020 86);
  --osso-2:       oklch(0.87 0.028 84);
  --tinta:        oklch(0.17 0.028 292);   /* preto de goiva                  */
  --tinta-pura:   oklch(0.14 0.02 290);
  --linha:        oklch(1 0 0 / 0.15);

  /* ---- tipografia ---- */
  --f-display: 'Rye', Georgia, serif;
  --f-corpo:   'Fraunces', Georgia, 'Times New Roman', serif;

  /* ---- medidas ---- */
  --topo: 4.25rem;
  --raio: 2px;
  --traco: 3px;                    /* espessura base do "risco" da goiva */
  --pad-secao: clamp(3.5rem, 7vh, 6rem);
  --lado: clamp(1.25rem, 5vw, 5rem);
  --medida: 64ch;

  --z-cena: 0; --z-conteudo: 1; --z-topbar: 40; --z-barra: 45;
  --z-modal-fundo: 60; --z-modal: 61; --z-toast: 80;

  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);

  /* moldura irregular de xilogravura (9-slice) */
  --moldura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23231733' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath 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 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");
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--noite);
  color: var(--osso);
  font-family: var(--f-corpo);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  line-height: 1.68;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* textura global — grão de papel/pano de xilogravura */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
.secao, .hero { position: relative; }
/* textura sutil, uma forma diferente por seção (só um detalhe) */
.secao::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.05; mix-blend-mode: soft-light;
  background-repeat: repeat; background-position: center;
}
.secao > * { position: relative; z-index: 1; }

/* A peça — hachura de goiva */
#a-peca::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg stroke='%23fff' stroke-width='2'%3E%3Cpath d='M-4 12 L12 -4 M6 22 L22 6 M16 32 L32 16'/%3E%3C/g%3E%3C/svg%3E");
}
/* Elenco — pontos de xilogravura */
#elenco::before {
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='4' cy='4' r='1.6' fill='%23fff'/%3E%3Ccircle cx='15' cy='13' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
}
/* Sessões — ondas do sertão */
#sessoes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Cpath d='M0 12 C 15 2 30 22 45 12 S 60 2 75 12' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
/* Ingressos — cruzinhas / sementes */
#ingressos::before {
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 4v8M4 8h8M22 18v8M18 22h8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Onde é — chevron do céu */
#onde::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16'%3E%3Cpath d='M0 13 L13 3 L26 13' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
/* Dúvidas — anéis / cordel */
#duvidas::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='30' cy='28' r='4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.04; } }

img, svg { max-width: 100%; display: block; }
::selection { background: var(--sol); color: var(--tinta); }
a { color: var(--sol); text-underline-offset: 0.18em; }

h1, h2, h3 { line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }

.skip-link {
  position: fixed; top: 0; left: 0; padding: 0.6rem 1rem; z-index: 100;
  background: var(--sol); color: var(--tinta); font-weight: 700;
  transform: translateY(-120%); transition: transform 0.2s;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 2px;
}

/* ══════════ utilidades de xilogravura ══════════ */

.xilo {
  border: 7px solid transparent;
  border-image: var(--moldura) 34 / 18px / 0 round;
  background: var(--noite-2);
}
.xilo--sol { background: var(--sol); color: var(--tinta); }
.xilo--barro { background: var(--barro); color: var(--osso); }

.selo {                            /* etiqueta manuscrita de cordel */
  display: inline-block;
  font-family: var(--f-display);
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--tinta); background: var(--sol);
  padding: 0.28em 0.9em;
  border: var(--traco) solid var(--tinta);
  transform: rotate(-1.4deg);
  transition: transform 0.3s var(--ease-saida);
}
.secao__topo:hover .selo { transform: rotate(1.6deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .selo, .secao__topo:hover .selo { transform: rotate(-1.4deg); } }

/* faixa de chevron (céu de xilogravura) */
.chevron {
  height: 22px;
  background:
    repeating-linear-gradient(135deg, var(--tinta) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(45deg,  var(--tinta) 0 3px, transparent 3px 11px);
  background-color: var(--sol-forte);
  opacity: 0.9;
}

/* ══════════ botões ══════════ */

.btn {
  --_bg: var(--osso); --_fg: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.9em 1.6em;
  font-family: var(--f-display); font-size: 0.98rem; letter-spacing: 0.01em;
  color: var(--_fg); background: var(--_bg);
  border: var(--traco) solid var(--tinta); border-radius: var(--raio);
  box-shadow: 4px 4px 0 var(--tinta);
  text-decoration: none; cursor: pointer; text-wrap: balance;
  transition: transform 0.14s var(--ease-saida), box-shadow 0.14s var(--ease-saida), background-color 0.14s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.btn--sol { --_bg: var(--sol); }
.btn--sol:hover { --_bg: var(--sol-forte); }
.btn--barro { --_bg: var(--barro); --_fg: var(--osso); }
.btn--grande { padding: 1.05em 2em; font-size: clamp(1rem, 0.94rem + 0.4vw, 1.18rem); }
.btn--fantasma { --_bg: transparent; --_fg: var(--osso); border-color: var(--osso); box-shadow: none; }
.btn--fantasma:hover { --_bg: oklch(1 0 0 / 0.09); box-shadow: none; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
/* "Continuar" ainda não liberado (ex.: falta ver a doação/total no passo de
   ingressos) — cinza e sem sombra, só "acende" de novo quando libera. Continua
   CLICÁVEL de propósito (não é [disabled]/pointer-events:none): clicar nele
   nesse estado rola até o fim do passo em vez de travar sem feedback. */
.btn--bloqueado {
  --_bg: var(--linha); --_fg: var(--osso-2); border-color: var(--osso-2);
  box-shadow: none;
}
.btn--bloqueado:hover { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
}

/* ══════════ cabeçalho ══════════ */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-topbar); height: var(--topo);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--lado);
  background: color-mix(in oklab, var(--noite-2) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--traco) solid var(--tinta);
  transition: transform 0.35s var(--ease-saida);
}
.topbar[data-hidden] { transform: translateY(-100%); }
.topbar__brand { display: flex; align-items: center; gap: 0.55rem; color: var(--osso); text-decoration: none; font-weight: 700; margin-right: auto; }
.topbar__sol { color: var(--sol); display: grid; place-items: center; }
.topbar__sol svg { animation: girar 60s linear infinite; }
.topbar__nome { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: 0.02em; }
.topbar__nav { display: flex; gap: clamp(0.9rem, 0.4rem + 1vw, 1.4rem); }
.topbar__nav a { color: var(--osso-2); text-decoration: none; font-size: 0.95rem; padding: 0.3rem 0; position: relative; }
.topbar__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--sol); transition: right 0.25s var(--ease-saida); }
.topbar__nav a:hover, .topbar__nav a[aria-current] { color: var(--osso); }
.topbar__nav a:hover::after, .topbar__nav a[aria-current]::after { right: 0; }
.topbar__cta { padding: 0.6em 1.15em; font-size: 0.9rem; box-shadow: 3px 3px 0 var(--tinta); }

/* link secundário "Meus Ingressos" — pro comprador que já tem pedido
   voltar a gerenciar (cancelar, trocar de sessão, editar nomes). Fica
   visível em TODAS as larguras (ao contrário do .topbar__cta, que some
   abaixo de 560px) — é a única porta de volta pra quem já comprou. */
.topbar__conta-wrap { position: relative; display: inline-flex; }
.topbar__conta {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--f-display); font-size: 0.88rem; color: var(--osso);
  text-decoration: none; white-space: nowrap; padding: 0.5em 0.3em;
  transition: color 0.15s;
}
.topbar__conta:hover, .topbar__conta:focus-visible { color: var(--sol); }
.topbar__conta-wrap .tooltip {
  position: absolute; top: calc(100% + 10px); right: 0; width: 15.5rem; z-index: var(--z-topbar);
  background: var(--noite); color: var(--osso); border: var(--traco) solid var(--tinta);
  border-radius: 8px; box-shadow: 4px 5px 0 var(--tinta); padding: 0.8rem 0.95rem;
  font-family: var(--f-corpo); font-size: 0.8rem; line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.18s var(--ease-saida), transform 0.18s var(--ease-saida), visibility 0.18s;
}
.topbar__conta-wrap .tooltip::before {
  content: ''; position: absolute; top: -9px; right: 18px; width: 16px; height: 16px;
  background: var(--noite); border-left: var(--traco) solid var(--tinta); border-top: var(--traco) solid var(--tinta);
  transform: rotate(45deg);
}
.tooltip__titulo { display: block; font-family: var(--f-display); font-size: 0.82rem; color: var(--sol); margin-bottom: 0.35rem; }
.topbar__conta-wrap:hover .tooltip,
.topbar__conta:focus-visible ~ .tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
/* sem hover não tem como fechar o tooltip de forma limpa — no toque, o
   link já navega direto pra meus-ingressos.html, sem precisar dele */
@media (hover: none) { .topbar__conta-wrap .tooltip { display: none; } }

@media (prefers-reduced-motion: reduce) { .topbar__sol svg { animation: none; } }
@media (max-width: 1200px) { .topbar__nav { display: none; } }
@media (max-width: 560px) { .topbar__cta { display: none; } .topbar__nome { font-size: 0.98rem; } }

/* ══════════ HERO ══════════ */

.hero {
  position: relative; min-height: 100svh; background: var(--noite);
  display: grid; align-items: center;
  padding: calc(var(--topo) + clamp(0.75rem, 2vh, 1.6rem)) var(--lado) clamp(4rem, 8vh, 5.5rem);
  isolation: isolate; overflow: hidden;
}
.hero__cena { position: absolute; inset: 0; z-index: var(--z-cena); }
.cena__camada { position: absolute; inset: 0; will-change: transform; }
.cena__camada svg:not(.cena__bicho-svg) { position: absolute; inset: 0; width: 100%; height: 100%; }

.cena__ceu {
  background:
    radial-gradient(58% 50% at 78% 27%,
      var(--sol) 0%, var(--sol-forte) 16%,
      color-mix(in oklab, var(--sol-forte) 55%, var(--barro-esc)) 34%,
      color-mix(in oklab, var(--barro-esc) 60%, var(--noite)) 58%, transparent 82%),
    linear-gradient(158deg, var(--noite-2) 0%, var(--noite) 40%, var(--barro-esc) 100%);
}
.cena__grao {
  position: absolute; inset: -20%; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: 0.5;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: var(--z-cena); pointer-events: none;
  background:
    linear-gradient(to top, var(--noite) 3%, color-mix(in oklab, var(--noite) 62%, transparent) 26%, transparent 52%),
    linear-gradient(105deg, color-mix(in oklab, var(--noite) 88%, transparent) 0%, color-mix(in oklab, var(--noite) 55%, transparent) 30%, transparent 56%);
}

/* cartaz de cordel */
.hero__texto {
  position: relative; z-index: var(--z-conteudo);
  max-width: 43rem;
  padding: clamp(1.35rem, 0.9rem + 1.7vw, 2.1rem);
  background: color-mix(in oklab, var(--noite) 82%, transparent);
  backdrop-filter: blur(4px);
  border: 9px solid transparent;
  border-image: var(--moldura) 34 / 20px / 0 round;
  box-shadow: 12px 14px 0 color-mix(in oklab, var(--tinta) 62%, transparent);
}
@supports not (backdrop-filter: blur(4px)) { .hero__texto { background: color-mix(in oklab, var(--noite) 93%, transparent); } }

.hero__kicker { font-family: var(--f-corpo); font-style: italic; font-size: clamp(0.9rem, 0.86rem + 0.3vw, 1.05rem); color: var(--sol); margin-bottom: 0.3rem; }
.hero__titulo {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 1.35rem + 3.9vw, 3.9rem);
  line-height: 0.98; letter-spacing: -0.015em; color: var(--osso);
  text-shadow: 3px 3px 0 var(--barro-esc), 4px 4px 0 var(--tinta);
  margin-bottom: 0.4rem;
}
.hero__suassuna {
  display: inline-block; margin: 0 0 0.6rem;
  padding: 0.14em 0.7em 0.2em;
  font-family: 'Rubik Distressed', var(--f-display), serif;
  font-size: clamp(0.95rem, 0.82rem + 1vw, 1.3rem);
  letter-spacing: 0.16em; line-height: 1; color: var(--osso);
  background: var(--tinta-pura);
  border: 6px solid transparent; border-image: var(--moldura) 34 / 11px / 0 round;
  transform: rotate(-2.4deg);
}
.hero__linha { font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.08rem); line-height: 1.45; color: var(--osso-2); max-width: 34rem; margin-bottom: 0.85rem; }
.hero__linha strong { color: var(--osso); font-weight: 600; }

.hero__acao { display: flex; align-items: center; gap: 0.8rem 1.3rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.hero__lote { font-family: var(--f-corpo); font-style: italic; font-size: 0.92rem; color: var(--sol); line-height: 1.4; margin-bottom: 0.7rem; }
.hero__lote strong { font-style: normal; font-family: var(--f-display); font-weight: 400; }

.hero__preco { display: inline-flex; flex-direction: column; line-height: 1.05; }
.hero__preco-rot { font-family: var(--f-corpo); font-style: italic; font-size: 0.78rem; color: var(--osso-2); }
.hero__preco-val { font-family: var(--f-display); font-size: 1.45rem; color: var(--sol); }

/* contagem em destaque */
.contagem {
  display: flex; align-items: stretch; gap: 0.45rem;
  margin-bottom: 0.8rem;
}
.contagem__rot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.35rem 0.7rem;
  background: var(--sol); color: var(--tinta);
  border: var(--traco) solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
  font-family: var(--f-display); font-size: 0.92rem; line-height: 1.02;
  letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
}
.contagem__grade { display: flex; gap: 0.4rem; }
.contagem__cel {
  min-width: 3.3rem; padding: 0.5rem 0.35rem 0.4rem;
  text-align: center; background: var(--noite-3);
  border: var(--traco) solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
}
.contagem__num { display: block; font-family: var(--f-display); font-size: 1.65rem; line-height: 1; color: var(--sol); font-variant-numeric: tabular-nums; }
.contagem__und { display: block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--osso-2); margin-top: 0.25rem; }
.contagem--hoje { font-family: var(--f-display); font-size: 1.4rem; color: var(--sol); align-self: center; }

.hero__info { display: flex; flex-wrap: wrap; gap: 0.7rem 2.2rem; padding-top: 0.75rem; border-top: 1px solid var(--linha); }
.hero__info dt { font-family: var(--f-corpo); font-style: italic; font-size: 0.8rem; color: var(--osso-2); margin-bottom: 0.15rem; }
.hero__info dd { font-family: var(--f-display); font-size: 1rem; color: var(--osso); }
.hero__info dd small { display: block; font-family: var(--f-corpo); font-style: italic; font-size: 0.76rem; color: var(--osso-2); margin-top: 0.1rem; }

/* seta artesanal "veja mais" */
.hero__rolar {
  position: absolute; left: 50%; bottom: clamp(0.6rem, 2vh, 1.5rem);
  translate: -50% 0; z-index: var(--z-conteudo);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  color: var(--osso); text-decoration: none;
  font-family: var(--f-display); font-size: 0.9rem; letter-spacing: 0.03em;
}
.hero__rolar__texto {
  background: color-mix(in oklab, var(--noite) 72%, transparent);
  padding: 0.2em 0.85em; border: 2px solid var(--tinta);
  box-shadow: 2px 2px 0 var(--tinta);
}
.hero__rolar svg { color: var(--sol); animation: flutuar 2.2s ease-in-out infinite; filter: drop-shadow(2px 2px 0 var(--tinta)); }
.hero__rolar:hover .hero__rolar__texto { background: var(--sol); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .hero__rolar svg { animation: none; } }

/* laptops com pouca altura: encosta o cartaz no topo, reserva o rodapé p/ a seta e comprime */
@media (max-height: 900px) and (min-width: 640px) {
  .hero { align-items: start; padding-top: calc(var(--topo) + 1rem); padding-bottom: 4.75rem; }
  .hero__titulo { font-size: clamp(1.9rem, 1rem + 3.3vw, 3rem); }
  .hero__kicker { margin-bottom: 0.25rem; }
  .hero__linha { margin-bottom: 0.55rem; font-size: 1rem; }
  .hero__texto { padding: 1.2rem 1.55rem; }
  .contagem { margin-bottom: 0.5rem; }
  .hero__lote { margin-bottom: 0.4rem; }
  .hero__suassuna { margin-bottom: 0.4rem; }
  .hero__info { padding-top: 0.5rem; gap: 0.45rem 1.8rem; }
}
@media (max-height: 730px) and (min-width: 640px) {
  .hero__titulo { font-size: 2.4rem; margin-bottom: 0.3rem; }
  .hero__suassuna { font-size: 1rem; }
  .hero__rolar { gap: 0.25rem; font-size: 0.82rem; }
  .hero__rolar svg { width: 34px; height: 40px; }
}
@media (max-height: 660px) and (min-width: 640px) {
  .hero__linha { display: none; }
}

@media (max-width: 639px) {
  /* no celular a seta entra no fluxo, logo abaixo do cartaz */
  .hero { align-items: center; align-content: center; padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .hero__rolar { position: static; translate: none; margin: 0.9rem auto 0; gap: 0.3rem; }
  .hero__rolar svg { width: 36px; height: 43px; }
}
@media (max-width: 560px) {
  .hero__texto { padding: 1.3rem 1.15rem; box-shadow: 8px 10px 0 color-mix(in oklab, var(--tinta) 62%, transparent); }
  .hero { padding-top: calc(var(--topo) + 0.6rem); }
  .hero__info { gap: 0.8rem 1.7rem; }
  .contagem__cel { min-width: 2.9rem; }
  .contagem__num { font-size: 1.45rem; }
  .hero__rolar { font-size: 0.82rem; }
}

/* ══════════ SEÇÕES (base) ══════════ */

.secao { padding: var(--pad-secao) var(--lado); position: relative; }
.secao--claro { background: var(--barro-esc); }
.secao--noite { background: var(--noite); }
.secao--ceu { background: var(--ceu-esc); }
.secao__topo { max-width: var(--medida); margin: 0 auto clamp(2rem, 5vh, 3.5rem); }
.secao__titulo {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 3vw, 3.2rem);
  color: var(--osso); margin: 0.7rem 0 0.6rem;
  text-shadow: 2px 2px 0 var(--tinta);
}
.secao__intro { color: var(--osso-2); font-size: 1.08rem; max-width: 52ch; }
.secao--claro .secao__intro, .secao--claro .peca__nota,
.secao--ceu .secao__intro { color: var(--osso); }
.secao--sol .secao__titulo, .secao--sol .secao__intro { color: var(--tinta); text-shadow: none; }

/* ══════════ A PEÇA ══════════ */

.peca { max-width: 68rem; margin: 0 auto; display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .peca { grid-template-columns: 1.3fr 1fr; } }
.peca__texto p { margin-bottom: 1rem; max-width: 60ch; }
.peca__texto p:first-of-type::first-letter {
  font-family: var(--f-display); float: left; font-size: 3.6rem; line-height: 0.8;
  padding: 0.1em 0.12em 0 0; color: var(--sol);
}
.peca__figura {
  align-self: stretch; min-height: 320px; aspect-ratio: 1 / 1;
  position: relative; overflow: hidden; background: var(--ceu-esc);
  border: 10px solid transparent; border-image: var(--moldura) 34 / 20px / 0 round;
}
.peca__figura svg { display: block; width: 100%; height: 100%; }
.fig-camada { will-change: transform; }
.fig-sol { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .peca__figura svg { animation: fig-flutua 9s ease-in-out infinite; }
  .fig-sol { animation: fig-sol-bob 7s ease-in-out infinite; }
}
@keyframes fig-flutua { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fig-sol-bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(4deg); } }

.peca__nota { margin-top: 1.4rem; font-style: italic; font-size: 0.92rem; color: var(--osso-2); }
.ingressos-cta__nota { display: inline-block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--osso-2); font-style: italic; }

/* ══════════ ELENCO ══════════ */

.filtro-sessao {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  max-width: var(--medida); margin: 0 auto clamp(1.8rem, 4vh, 2.6rem);
}
.filtro-sessao__rot { font-family: var(--f-corpo); font-style: italic; color: var(--osso-2); font-size: 0.95rem; margin-right: 0.3rem; }
.filtro-sessao button {
  font-family: var(--f-display); font-size: 0.85rem;
  padding: 0.45em 0.9em; color: var(--osso); background: transparent;
  border: var(--traco) solid var(--tinta); cursor: pointer;
  box-shadow: 2px 2px 0 var(--tinta); transition: background-color 0.15s, transform 0.12s;
}
.filtro-sessao button:hover { transform: translate(-1px,-1px); }
.filtro-sessao button[aria-pressed="true"] { background: var(--sol); color: var(--tinta); }

/* ── varal de cordel: cards pendurados numa corda ── */
.elenco-varais { max-width: 80rem; margin: 0 auto; }
.varal { position: relative; margin-top: clamp(2.6rem, 6vh, 4.2rem); }
.varal:first-child { margin-top: 0; }
.varal__nome {
  font-family: var(--f-display); font-size: 1.3rem; color: var(--sol);
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem;
}
.varal__nome::after { content: ''; flex: 1; height: var(--traco); background: var(--linha); }
.varal__corda { display: block; width: 100%; height: 34px; margin-bottom: -14px; color: var(--tinta); }
.varal__cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.2rem) clamp(0.8rem, 2vw, 1.4rem);
  padding-top: 0.5rem;
}

.pendura {
  position: relative; width: clamp(10rem, 40vw, 12.5rem); margin-top: 1.7rem;
  transform-origin: top center;
  transition: transform 0.3s var(--ease-saida), rotate 0.3s var(--ease-saida), z-index 0s;
}
.pendura__fio { position: absolute; left: 50%; top: -1.7rem; width: 2px; height: 1.7rem; background: var(--tinta); translate: -50% 0; }
.pendura__pin {
  position: absolute; left: 50%; top: -2rem; z-index: 3;
  width: 13px; height: 24px; translate: -50% 0; rotate: var(--pin-rot, 0deg);
  background: var(--barro-claro); border: 2px solid var(--tinta); border-radius: 3px;
}
.pendura__pin::after { content: ''; position: absolute; inset: 5px 4px auto; height: 12px; border-left: 2px solid var(--tinta); }
.pendura__card {
  padding: 0.95rem 1rem 1.05rem;
  background: var(--noite-2);
  border: 6px solid transparent; border-image: var(--moldura) 34 / 12px / 0 round;
}
.pendura__nome { font-family: var(--f-display); font-size: 1rem; color: var(--osso); line-height: 1.15; }
.pendura__detalhe { font-size: 0.8rem; color: var(--osso-2); font-style: italic; margin-top: 0.15rem; }
.pendura__papeis { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pendura__papel { font-family: var(--f-corpo); font-size: 0.78rem; padding: 0.15em 0.55em; background: var(--sol); color: var(--tinta); border: 2px solid var(--tinta); }
.pendura__papel--vazio { background: transparent; color: var(--osso-2); border-color: var(--linha); font-style: italic; }

.pendura:nth-child(4n+1) { rotate: -2.4deg; --pin-rot: 6deg; }
.pendura:nth-child(4n+2) { rotate: 1.8deg;  --pin-rot: -8deg; }
.pendura:nth-child(4n+3) { rotate: -1.2deg; --pin-rot: 4deg; }
.pendura:nth-child(4n)   { rotate: 2.6deg;  --pin-rot: -5deg; }

@media (prefers-reduced-motion: no-preference) {
  .pendura { animation: balanca 6s ease-in-out infinite; }
  .pendura:nth-child(3n) { animation-duration: 7.4s; animation-delay: -2s; }
  .pendura:nth-child(4n) { animation-duration: 5.5s; animation-delay: -3s; }
}
@keyframes balanca {
  0%, 100% { rotate: calc(var(--sway, 0deg) - 0.8deg); }
  50%      { rotate: calc(var(--sway, 0deg) + 1deg); }
}
.pendura:nth-child(4n+1) { --sway: -2.4deg; }
.pendura:nth-child(4n+2) { --sway: 1.8deg; }
.pendura:nth-child(4n+3) { --sway: -1.2deg; }
.pendura:nth-child(4n)   { --sway: 2.6deg; }

@media (hover: hover) {
  .pendura:hover { animation: none; rotate: 0deg; transform: translateY(-6px) scale(1.04); z-index: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .pendura { animation: none; }
  .pendura:hover { transform: none; }
}

/* ══════════ SESSÕES ══════════ */

.sessoes-grade { max-width: 68rem; margin: 0 auto; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sessao-card {
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1.5rem 1.4rem;
  background: var(--noite-2); color: var(--osso);
  border: 8px solid transparent; border-image: var(--moldura) 34 / 16px / 0 round;
}
.sessao-card__dia { font-family: var(--f-corpo); font-style: italic; font-size: 0.9rem; color: var(--osso-2); letter-spacing: 0.02em; }
.sessao-card__data { font-family: var(--f-display); font-size: 1.35rem; color: var(--osso); margin-top: -0.15rem; }
.sessao-card__hora {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 2rem + 2.5vw, 3.4rem);
  line-height: 0.95; color: var(--sol);
  text-shadow: 3px 3px 0 var(--tinta);
  margin: 0.35rem 0 0.1rem;
}
.sessao-card__local { font-size: 0.9rem; color: var(--osso-2); }
.sessao-card__disp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; margin-top: auto; padding-top: 0.6rem; }
.sessao-card__pin { width: 0.85rem; height: 0.85rem; border: 2px solid var(--tinta); flex-shrink: 0; }
.sessao-card__pin--ok { background: var(--verde); animation: co-pulsar 1.3s ease-in-out infinite; }
.sessao-card__pin--pouco { background: var(--sol); animation: co-pulsar 1.3s ease-in-out infinite; }
.sessao-card__pin--esg { background: var(--barro); }
.sessao-card__pin--carregando { background: var(--osso-2); opacity: 0.6; animation: co-pulsar 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sessao-card__pin--ok, .sessao-card__pin--pouco, .sessao-card__pin--carregando { animation: none; } }
.sessao-card--esgotada { opacity: 0.62; }
.sessao-card .btn { margin-top: 0.4rem; }
.sessao-card { transition: transform 0.24s var(--ease-saida); }
@media (hover: hover) {
  .sessao-card:not(.sessao-card--esgotada):hover { transform: translateY(-6px) rotate(-0.5deg); }
}
@media (prefers-reduced-motion: reduce) { .sessao-card, .sessao-card:hover { transform: none; } }

/* ══════════ INGRESSOS ══════════ */

.ingressos-topo { max-width: var(--medida); margin: 0 auto clamp(2rem, 5vh, 3rem); text-align: center; }
.ingressos-resumo {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem;
  margin-top: 1.2rem; padding: 0.8rem 1.4rem;
  background: var(--noite-2); border: var(--traco) solid var(--tinta);
  font-family: var(--f-display); font-size: 0.95rem;
}
.ingressos-resumo b { color: var(--sol); }

.tipos-grade { max-width: 70rem; margin: 0 auto; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tipo-card {
  padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--noite-2);
  border: 8px solid transparent; border-image: var(--moldura) 34 / 16px / 0 round;
  cursor: pointer;
}
.tipo-card:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
.tipo-card--destaque { background: var(--sol); color: var(--tinta); }
.tipo-card__nome { font-family: var(--f-display); font-size: 1.35rem; color: var(--sol); }
.tipo-card--destaque .tipo-card__nome { color: var(--tinta); }
.tipo-card__preco { font-family: var(--f-display); font-size: 2rem; line-height: 1; }
.tipo-card__de { font-size: 0.8rem; font-style: italic; opacity: 0.7; }
.tipo-card__desc { font-size: 0.92rem; line-height: 1.55; color: var(--osso-2); flex: 1; }
.tipo-card__extra {
  margin-top: 0.4rem; font-family: var(--f-corpo); font-style: italic;
  font-size: 0.85rem; color: var(--sol);
}
.tipo-card--destaque .tipo-card__desc { color: color-mix(in oklab, var(--tinta) 82%, transparent); }
.tipo-card--destaque .tipo-card__de { color: var(--tinta); opacity: 0.6; }
.tipo-card--destaque .tipo-card__extra { color: var(--barro-esc); font-weight: 600; }

/* ── ícone de xilogravura no topo de cada tipo ── */
.tipo-card__icone {
  width: 3.4rem; height: 3.4rem; margin-bottom: 0.2rem;
  color: var(--sol);
}
.tipo-card--destaque .tipo-card__icone { color: var(--tinta); }
.tipo-card__icone svg { width: 100%; height: 100%; overflow: visible; }

/* ── micro-interação: card de preço fica MAIS CLARO e cresce no hover ── */
.tipos-grade { align-items: start; }
.tipo-card {
  transition: transform 0.28s var(--ease-saida), box-shadow 0.28s var(--ease-saida),
              filter 0.28s var(--ease-saida), background-color 0.28s var(--ease-saida);
}
.tipo-card__preco, .tipo-card__nome { transition: transform 0.28s var(--ease-saida); transform-origin: left center; }
.tipo-card__icone { transition: transform 0.4s var(--ease-saida); transform-origin: 50% 60%; }
@media (hover: hover) {
  .tipos-grade:hover .tipo-card:not(:hover):not(:focus-within) { filter: saturate(0.7) brightness(0.82); }
  /* no hover, QUALQUER card fica com o laranja/dourado do card principal */
  .tipo-card:hover, .tipo-card:focus-within {
    transform: translateY(-10px) scale(1.045);
    background: var(--sol); color: var(--tinta);
    box-shadow: 10px 14px 0 var(--tinta), 0 0 40px color-mix(in oklab, var(--sol) 55%, transparent);
    position: relative; z-index: 2;
  }
  .tipo-card:hover .tipo-card__nome,
  .tipo-card:hover .tipo-card__icone,
  .tipo-card:hover .tipo-card__preco { color: var(--tinta); }
  .tipo-card:hover .tipo-card__desc { color: color-mix(in oklab, var(--tinta) 82%, transparent); }
  .tipo-card:hover .tipo-card__de { color: var(--tinta); opacity: 0.55; }
  .tipo-card:hover .tipo-card__extra { color: var(--barro-esc); font-weight: 600; font-style: italic; }
  .tipo-card:hover .tipo-card__preco { transform: scale(1.14); }
  .tipo-card:hover .tipo-card__nome { transform: translateX(3px); }
  .tipo-card:hover .tipo-card__icone { transform: rotate(-8deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .tipo-card, .tipo-card:hover, .tipo-card:hover .tipo-card__icone { transform: none; }
  .tipos-grade:hover .tipo-card:not(:hover) { filter: none; }
}

.ingressos-cta { max-width: 40rem; margin: clamp(2.5rem, 6vh, 3.5rem) auto 0; text-align: center; }
.ingressos-cta p { color: var(--osso-2); font-size: 0.95rem; margin-top: 0.9rem; }

/* ══════════ DÚVIDAS ══════════ */

.faq { max-width: 46rem; margin: 0 auto; }
.faq details {
  border-bottom: var(--traco) solid var(--linha);
  padding: 0.3rem 0;
}
.faq details:first-child { border-top: var(--traco) solid var(--linha); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1rem 2rem 1rem 0; position: relative;
  font-family: var(--f-display); font-size: 1.05rem; color: var(--osso);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  font-size: 1.4rem; color: var(--sol); transition: transform 0.2s;
}
.faq summary:hover { color: var(--sol); }
.faq details[open] summary { color: var(--sol); }
.faq details[open] summary::after { content: '\2013'; }
.faq details > *:not(summary) { padding: 0 0 1.1rem; color: var(--osso); max-width: 60ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > *:not(summary) { animation: faq-abre 0.34s var(--ease-saida) both; }
}
@keyframes faq-abre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ══════════ ONDE ══════════ */

.onde {
  max-width: 68rem; margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .onde { grid-template-columns: 1.4fr 1fr; } }

.onde__mapa {
  position: relative; overflow: hidden;
  min-height: 300px; aspect-ratio: 16 / 11;
  background: var(--noite-2);
}
.onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9) contrast(1.02); }
.onde__mapa-fallback { position: absolute; inset: 0; }
.onde__mapa-fallback svg { width: 100%; height: 100%; }
.onde__mapa-legenda {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--f-display); font-size: 0.85rem; color: var(--tinta);
  background: var(--sol); padding: 0.2em 0.7em; border: 2px solid var(--tinta);
}
.onde__mapa[data-carregado] .onde__mapa-fallback { opacity: 0; transition: opacity 0.4s; }

.onde__lado { display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; }
.onde__linha { color: var(--osso); font-size: 1.02rem; line-height: 1.6; }
.onde__linha strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; color: var(--sol); }
.onde__dica { font-style: italic; color: var(--osso-2); font-size: 0.95rem; }
.onde__dica strong { color: var(--osso); font-family: var(--f-corpo); font-style: normal; }
.onde__botoes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.3rem; }

/* ══════════ barra de compra (mobile) ══════════ */

.barra-compra {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-barra);
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--noite-2); border-top: var(--traco) solid var(--tinta);
  font-family: var(--f-display); font-size: 0.9rem; line-height: 1.2; color: var(--osso);
}
.barra-compra [data-buybar-preco] { flex: 1; text-wrap: balance; }
.barra-compra .btn { flex-shrink: 0; padding: 0.7em 1.2em; box-shadow: 3px 3px 0 var(--tinta); }
@media (min-width: 1001px) { .barra-compra { display: none !important; } }

/* ══════════ rodapé ══════════ */

.rodape { padding: 3rem var(--lado) calc(8rem + env(safe-area-inset-bottom)); background: var(--noite-2); border-top: var(--traco) solid var(--tinta); text-align: center; }
.rodape__sol { color: var(--sol); margin: 0 auto 0.8rem; }
.rodape p { font-family: var(--f-display); color: var(--osso); }
.rodape__fina { font-family: var(--f-corpo); font-style: italic; color: var(--osso-2); font-size: 0.9rem; margin-top: 0.4rem; }
.rodape a { color: var(--sol); }
@media (min-width: 1001px) { .rodape { padding-bottom: 5rem; } }

/* ══════════ FLUXO DE COMPRA (dialog) ══════════ */

.checkout {
  margin: auto;
  border: none; padding: 0; background: transparent; color: var(--osso);
  max-width: 40rem; width: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
}
@media (min-width: 700px) { .checkout { max-width: 50rem; } }
@media (min-width: 1000px) { .checkout { max-width: 54rem; } }
.checkout::backdrop {
  background: color-mix(in oklab, var(--tinta) 74%, transparent);
  backdrop-filter: blur(3px);
}
.checkout[open] { animation: co-entra 0.34s var(--ease-saida); }
@keyframes co-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .checkout[open] { animation: none; } }

.checkout__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.4rem);
  display: flex; flex-direction: column; gap: 1.15rem;
  max-height: calc(100dvh - 2rem);
}
.checkout__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);
}
.checkout__fechar:hover { background: var(--sol-forte); }

.checkout__cabeca { display: flex; flex-direction: column; gap: 0.4rem; padding-right: 2rem; }
.checkout__titulo { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); color: var(--osso); }
.checkout__passos { display: flex; gap: 0.35rem; list-style: none; padding: 0; margin: 0.3rem 0 0; }
.checkout__passos li { flex: 1; height: 6px; background: var(--linha); border: 1px solid var(--tinta); }
.checkout__passos li[data-feito] { background: var(--sol); }
.checkout__passos li[data-atual] { background: var(--sol-forte); }

/* padding em volta pra não cortar o contorno (outline) dos campos em foco na borda do scroll */
.checkout__corpo { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 8px; }

/* seta "tem mais embaixo" dentro do modal — fica grudada no fundo do scroll
   (sticky no mesmo container que rola, funciona igual em celular e desktop)
   e só some quando o fim do passo (doação + total) já foi visto. O degradê
   por trás evita que o círculo pouse em cima de uma frase no meio do texto —
   o conteúdo esmaece antes de chegar nele, em vez de ficar tampado de vez. */
.co-scroll-dica-wrap {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: center;
  height: 4.2rem; padding-bottom: 0.35rem;
  background: linear-gradient(to bottom, transparent, var(--noite-2) 68%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.co-scroll-dica-wrap--ativa { opacity: 1; pointer-events: auto; }
/* fundo escuro (não branco) + anel e emoji dourados — o emoji "👇" já vem
   amarelo por padrão, então um círculo claro por trás dele quase não dava
   contraste nenhum; contra o azul-tinta ele se destaca de verdade */
.co-scroll-dica {
  display: flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem;
  background: var(--tinta); color: var(--sol); border: var(--traco) solid var(--sol);
  border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  animation: flutuar 1.8s ease-in-out infinite;
}
.co-scroll-dica:hover { background: var(--noite); }
@media (prefers-reduced-motion: reduce) { .co-scroll-dica { animation: none; } }
.checkout__erro {
  margin: 0; padding: 0.7rem 0.9rem; background: color-mix(in oklab, var(--rosa) 22%, var(--noite-2));
  border: var(--traco) solid var(--rosa); color: var(--osso); font-size: 0.92rem;
}
.checkout__rodape { display: flex; gap: 0.8rem; }
.checkout__rodape [data-co-avancar] { flex: 1; }
.checkout__rodape [data-co-voltar] { flex: 0 0 auto; }

/* ── mascote reativo da doação — pop-up efêmero num canto do modal, preso
   em .checkout__caixa (não no corpo que rola), pra nunca ficar deslocado
   nem cortado pelo overflow do scroll. Colorida = acabou de marcar doação;
   P&B = zerou a doação, "pedindo" pra doar de novo. */
.co-doacao-mascote {
  position: absolute; left: 50%; bottom: 1rem; z-index: 4;
  width: clamp(118px, 30vw, 195px);
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
  transform: translate(-50%, 130%); opacity: 0;
  transition: transform 0.5s var(--ease-saida), opacity 0.4s var(--ease-saida);
}
.co-doacao-mascote--ativo { transform: translate(-50%, 0); opacity: 1; }
.co-doacao-mascote img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .co-doacao-mascote { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
}

/* ── conteúdo dos passos ── */
.co-passo { display: flex; flex-direction: column; gap: 1rem; }
.co-passo__intro { color: var(--osso-2); font-size: 0.95rem; }

.co-opcoes { display: flex; flex-direction: column; gap: 0.6rem; }
.co-opcao {
  display: flex; align-items: center; gap: 0.8rem; cursor: pointer;
  padding: 0.9rem 1rem; background: var(--noite-3);
  border: var(--traco) solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
  transition: transform 0.14s var(--ease-saida), background-color 0.14s;
}
/* esqueleto — mesma moldura do .co-opcao (sem pulo de layout quando troca
   pro conteúdo real), com barrinhas piscando no lugar do texto */
.co-skel {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.9rem 1rem; background: var(--noite-3);
  border: var(--traco) solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
}
.co-skel__linha {
  height: 0.95rem; border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--osso) 10%, var(--noite-3)) 25%,
    color-mix(in oklab, var(--osso) 22%, var(--noite-3)) 50%,
    color-mix(in oklab, var(--osso) 10%, var(--noite-3)) 75%);
  background-size: 200% 100%;
  animation: co-skel-brilho 1.5s ease-in-out infinite;
}
.co-skel__linha--tit { width: 50%; height: 1.1rem; }
.co-skel__linha--sub { width: 72%; }
@keyframes co-skel-brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .co-skel__linha { animation: none; background: color-mix(in oklab, var(--osso) 14%, var(--noite-3)); }
}
.co-opcao:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.co-opcao input { accent-color: var(--sol); width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.co-opcao--sel { background: var(--sol); color: var(--tinta); }
/* no card selecionado (fundo amarelo) a bolinha do radio fica preta p/ aparecer */
.co-opcao--sel input, .co-opcao input:checked { accent-color: var(--tinta); }
.co-opcao__nome { font-family: var(--f-display); font-size: 1.05rem; }
.co-opcao__sub { font-size: 0.85rem; opacity: 0.85; }
.co-opcao--off { opacity: 0.5; pointer-events: none; }
.co-opcao__tag { margin-left: auto; font-size: 0.8rem; font-style: italic; white-space: nowrap; }
.co-opcao__tag--pouco { color: var(--sol); font-style: normal; font-weight: 700; }
/* card selecionado vira fundo amarelo — o texto dourado do "🔥 últimos N"
   ficaria invisível (amarelo no amarelo) sem essa troca de cor */
.co-opcao--sel .co-opcao__tag--pouco { color: var(--tinta); }
.co-opcao__fogo, .co-opcao__bolinha { display: inline-block; animation: co-pulsar 1.3s ease-in-out infinite; }
.co-opcao__fogo { margin-right: 0.3em; }
/* verde-sinal mais vivo que o --verde da paleta (que é bem oliva) + halo suave,
   pra ficar visível e "chamativo de boa notícia" contra o fundo escuro */
.co-opcao__bolinha {
  width: 0.6em; height: 0.6em; border-radius: 50%;
  background: oklch(0.8 0.21 152);
  box-shadow: 0 0 0.55em 0.12em oklch(0.8 0.21 152 / 0.6);
  margin-right: 0.55em; vertical-align: middle;
}
@keyframes co-pulsar { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .co-opcao__fogo, .co-opcao__bolinha { animation: none; } }

.co-campo { display: flex; flex-direction: column; gap: 0.3rem; }
.co-campo label { font-family: var(--f-display); font-size: 0.9rem; color: var(--osso-2); }
.co-campo input {
  font: inherit; padding: 0.7rem 0.8rem; color: var(--osso);
  background: var(--noite-3); border: var(--traco) solid var(--tinta);
}
.co-campo input:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.co-campo input::placeholder { color: color-mix(in oklab, var(--osso-2) 48%, transparent); opacity: 1; }
.co-campo--erro input { border-color: var(--rosa); }
.co-campo__dica { font-size: 0.8rem; color: var(--osso-2); font-style: italic; }
.co-grade2 { display: grid; gap: 0.9rem; }
@media (min-width: 460px) { .co-grade2 { grid-template-columns: 1fr 1fr; } }

/* aviso de lote na tela de ingressos */
.co-lote {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.9rem; font-size: 0.88rem; line-height: 1.4;
  background: color-mix(in oklab, var(--sol) 16%, var(--noite-2));
  border: var(--traco) solid var(--sol); color: var(--osso);
}
.co-lote strong { color: var(--sol); font-family: var(--f-display); font-weight: 400; }

/* tudo esgotado no passo "Escolha a sessão" — substitui a lista + o botão
   Continuar (que ficaria sem função nenhuma) por um aviso só */
.co-esgotado {
  text-align: center; padding: 2.2rem 1.2rem;
  border: 6px solid transparent; border-image: var(--moldura) 34 / 12px / 0 round;
  background: var(--noite-3);
}
.co-esgotado__titulo { font-family: var(--f-display); font-size: 1.4rem; font-weight: 400; color: var(--sol); margin-bottom: 0.7rem; }
.co-esgotado__texto { color: var(--osso-2); font-size: 0.95rem; line-height: 1.6; max-width: 30rem; margin: 0 auto; }

/* card de tipo = botão de +1 */
.co-tipo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  padding: 0.95rem 1rem; background: var(--noite-3); border: var(--traco) solid var(--tinta);
  cursor: pointer; user-select: none;
  transition: transform 0.12s var(--ease-saida), background-color 0.15s, box-shadow 0.12s;
}
.co-tipo:hover { background: color-mix(in oklab, var(--noite-3) 82%, var(--sol) 10%); box-shadow: 3px 3px 0 var(--tinta); }
.co-tipo:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.co-tipo--pulou { animation: co-pulo 0.32s var(--ease-saida); }
@keyframes co-pulo { 0% { transform: scale(1); } 32% { transform: scale(1.028); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .co-tipo--pulou { animation: none; } }

.co-tipo__info { flex: 1 1 9rem; display: flex; flex-direction: column; gap: 0.12rem; }
.co-tipo__nome { font-family: var(--f-display); font-size: 1.05rem; color: var(--sol); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.co-tipo__badge {
  font-family: var(--f-corpo); font-style: normal; font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--osso);
  background: var(--barro); border: 2px solid var(--tinta); padding: 0.1em 0.5em;
}
.co-tipo--esg { cursor: not-allowed; }
.co-tipo--esg .co-tipo__info { opacity: 0.5; }
.co-tipo--esg .co-tipo__stepper { display: none; }
.co-tipo--esg:hover { transform: none; background: var(--noite-3); box-shadow: none; }
.co-tipo__desc { font-size: 0.8rem; color: var(--osso-2); font-style: italic; line-height: 1.35; }
.co-tipo__preco { font-size: 0.85rem; color: var(--osso); }
.co-tipo__preco small { color: var(--osso-2); font-style: italic; }

.co-tipo__stepper { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.co-tipo__stepper button {
  width: 2.2rem; height: 2.2rem; font-family: var(--f-display); font-size: 1.3rem; line-height: 1;
  background: var(--sol); color: var(--tinta); border: var(--traco) solid var(--tinta); cursor: pointer;
}
.co-tipo__stepper button:hover:not(:disabled) { background: var(--sol-forte); }
.co-tipo__stepper button:disabled { opacity: 0.32; cursor: not-allowed; }
.co-tipo__stepper output {
  min-width: 1.7rem; height: 1.5em; overflow: hidden;
  text-align: center; font-family: var(--f-display); font-size: 1.35rem; color: var(--osso);
}
.co-tipo__stepper output span { display: block; }
.co-num--sobe { animation: co-num-sobe 0.28s var(--ease-saida); }
.co-num--desce { animation: co-num-desce 0.28s var(--ease-saida); }
@keyframes co-num-sobe { from { transform: translateY(0.7em); opacity: 0; } }
@keyframes co-num-desce { from { transform: translateY(-0.7em); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .co-num--sobe, .co-num--desce { animation: none; } }

.co-tipo__aviso { flex-basis: 100%; font-size: 0.8rem; color: var(--sol); font-style: italic; }
.co-tipo__aviso--alerta { color: var(--rosa); }

.co-total {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 1.1rem; background: var(--noite-3); border: var(--traco) solid var(--tinta);
}
.co-total__linha { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--osso-2); }
.co-total__linha--desc { color: var(--verde); }
.co-total__linha--final { border-top: 1px solid var(--linha); margin-top: 0.3rem; padding-top: 0.5rem; }
.co-total__linha--final span:last-child { font-family: var(--f-display); font-size: 1.6rem; color: var(--sol); }

.co-resumo { display: flex; flex-direction: column; gap: 0.5rem; }
.co-resumo__item { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.94rem; padding: 0.5rem 0; border-bottom: 1px solid var(--linha); }
.co-resumo__item span:first-child { color: var(--osso-2); }
.co-resumo__nomes { font-size: 0.9rem; color: var(--osso-2); }

/* passo Pix */
.co-pix { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
.co-pix__cabeca { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.co-pix__ok { font-family: var(--f-display); font-size: 1.05rem; color: var(--sol); }
.co-pix__cod { font-family: var(--f-display); font-size: 0.85rem; background: var(--sol); color: var(--tinta); padding: 0.2em 0.7em; border: var(--traco) solid var(--tinta); }
.co-pix__valor-caixa {
  align-self: stretch; padding: 0.5rem 1rem; margin: 0.1rem 0;
  background: var(--noite-3); border: var(--traco) solid var(--sol);
}
.co-pix__valor-rot { display: block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--osso-2); }
.co-pix__valor { display: block; font-family: var(--f-display); font-size: clamp(1.6rem, 1.35rem + 1.8vw, 2rem); line-height: 1; color: var(--sol); text-shadow: 2px 2px 0 var(--tinta); margin-top: 0.05rem; }
.co-pix__recebedor { display: block; font-size: 0.72rem; color: var(--osso-2); margin-top: 0.3rem; }
.co-pix__recebedor strong { color: var(--osso); font-weight: 600; }
.co-pix__qr { width: 140px; max-width: 42vw; background: var(--osso); padding: 7px; border: var(--traco) solid var(--tinta); }
.co-pix__cec {
  width: 100%; word-break: break-all; font-family: monospace; font-size: 0.7rem;
  background: var(--noite-3); border: 1px dashed var(--linha); padding: 0.55rem; color: var(--osso-2);
}
.co-pix__copiar { align-self: stretch; }
.co-pix__copiar svg { flex: none; }
.co-pix__aviso { font-size: 0.85rem; color: var(--osso-2); line-height: 1.5; }
.co-pix__email { color: var(--sol); font-weight: 400; word-break: break-all; }

/* confirmação de saída */
.co-sair {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 1.2rem;
  background: color-mix(in oklab, var(--noite-2) 88%, transparent);
  backdrop-filter: blur(2px);
  animation: co-entra 0.2s var(--ease-saida);
}
.co-sair__caixa {
  max-width: 24rem; text-align: center;
  padding: 1.6rem 1.4rem; background: var(--noite-3);
  border: 6px solid transparent; border-image: var(--moldura) 34 / 14px / 0 round;
  box-shadow: 8px 10px 0 color-mix(in oklab, var(--tinta) 60%, transparent);
}
.co-sair__titulo { font-family: var(--f-display); font-size: 1.35rem; color: var(--sol); margin-bottom: 0.5rem; }
.co-sair__texto { font-size: 0.92rem; color: var(--osso-2); line-height: 1.6; margin-bottom: 1.2rem; }
.co-sair__botoes { display: flex; flex-direction: column; gap: 0.6rem; }
@media (min-width: 400px) { .co-sair__botoes { flex-direction: row; } .co-sair__botoes .btn { flex: 1; } }
.co-pix__outras { margin-top: 0.4rem; font-size: 0.88rem; }
.co-pix__outras a { display: inline-block; margin: 0.2rem; }

.co-retomar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; margin-bottom: 0.4rem;
  background: color-mix(in oklab, var(--sol) 16%, var(--noite-2));
  border: var(--traco) solid var(--sol); font-size: 0.9rem;
}
.co-retomar button { font: inherit; text-decoration: underline; background: none; border: none; color: var(--sol); cursor: pointer; }

/* ── compra multi-sessão ── */
.co-opcao--duas { border-style: dashed; }
.co-opcao__tag--duas { font-weight: 700; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.68rem; }
.co-opcao--sel .co-opcao__tag--duas { color: var(--tinta); }

.co-noite-bloco {
  border: 6px solid transparent; border-image: var(--moldura) 34 / 12px / 0 round;
  padding: 0.9rem 1rem; margin-bottom: 0.9rem;
}
.co-noite-bloco__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-family: var(--f-display); font-size: 1.02rem; color: var(--sol);
  margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linha);
}
.co-noite-bloco__sub {
  margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--linha);
  font-size: 0.9rem; color: var(--osso-2); text-align: right;
}

.co-troca {
  display: block; margin: -0.2rem 0 0.9rem; padding: 0;
  font: inherit; font-size: 0.88rem; font-style: italic;
  background: none; border: none; color: var(--sol);
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.co-troca:hover { color: var(--sol-forte); }

.co-total--geral { margin-top: 0.2rem; }

.co-resumo__grupo {
  border: 6px solid transparent; border-image: var(--moldura) 34 / 12px / 0 round;
  padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.co-resumo__grupo-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  margin-bottom: 0.35rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--linha);
}
.co-resumo__grupo-cab strong { font-family: var(--f-display); font-weight: 400; font-size: 1.02rem; color: var(--osso); }
.co-resumo__acoes { display: flex; gap: 0.7rem; flex-shrink: 0; }
.co-resumo__acoes button {
  font: inherit; font-size: 0.82rem; background: none; border: none;
  color: var(--sol); text-decoration: underline; cursor: pointer; padding: 0;
}
.co-resumo__sub {
  display: flex; justify-content: space-between; margin-top: 0.4rem; padding-top: 0.4rem;
  border-top: 1px solid var(--linha); font-weight: 700; color: var(--osso);
}
.co-resumo__sub span:last-child { font-family: var(--f-display); font-weight: 400; color: var(--sol); }
.co-resumo__total-geral {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 0.3rem; padding: 0.8rem 1rem;
  background: var(--noite); border: var(--traco) solid var(--sol);
  font-weight: 700; color: var(--osso);
}
.co-resumo__total-val { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--sol); text-shadow: 2px 2px 0 var(--tinta); }

.co-upsell {
  margin-top: 0.4rem; padding: 0.9rem 1rem;
  background: color-mix(in oklab, var(--sol) 12%, var(--noite-2));
  border: var(--traco) dashed var(--sol);
}
.co-upsell__tit { font-family: var(--f-display); font-size: 1.02rem; color: var(--osso); }
.co-upsell__txt { font-size: 0.88rem; color: var(--osso-2); margin: 0.2rem 0 0.7rem; line-height: 1.5; }
.co-upsell__btn { width: 100%; }

.co-pix__avisos {
  align-self: stretch; display: flex; flex-direction: column; gap: 0.3rem;
  background: var(--noite-3); border-radius: 8px; padding: 0.5rem 0.75rem;
}
.co-pix__prazo, .co-pix__espera { font-size: 0.8rem; line-height: 1.4; text-align: left; }
.co-pix__prazo { color: var(--sol); }
.co-pix__espera { color: var(--verde); }

/* obrigatório + erro que treme */
.co-campo label::after { content: ' *'; color: var(--sol); }
.co-obrig { font-size: 0.85rem; color: var(--osso-2); font-style: italic; margin-bottom: 0.2rem; }
.checkout__erro--treme { animation: co-treme 0.45s var(--ease-saida); }
@keyframes co-treme {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) { .checkout__erro--treme { animation: none; } }

/* passo: pagamento confirmado + confete */
.co-sucesso { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.co-sucesso__marca { width: 5rem; height: 5rem; color: var(--sol); }
.co-sucesso__titulo { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); color: var(--sol); }
.co-sucesso__texto { color: var(--osso-2); font-size: 0.95rem; line-height: 1.6; max-width: 30rem; }
.co-sucesso__texto strong { color: var(--osso); }

.confete { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.confete i {
  position: absolute; top: -6vh; width: 11px; height: 15px;
  will-change: transform; animation: confete-cai linear forwards;
}
@keyframes confete-cai {
  to { transform: translateY(115vh) rotate(720deg); }
}
@media (prefers-reduced-motion: reduce) { .confete { display: none; } }

/* ── botão de música de fundo (canto inferior direito) ── */
.trilha {
  position: fixed; z-index: 46;
  right: clamp(0.85rem, 2vw, 1.4rem);
  bottom: clamp(0.85rem, 2vh, 1.4rem);
  width: 2.85rem; height: 2.85rem;
  display: grid; place-content: center;
  color: var(--sol); background: var(--noite-2);
  border: var(--traco) solid var(--tinta);
  box-shadow: 3px 3px 0 var(--tinta);
  border-radius: 999px; cursor: pointer;
  transition: transform 0.14s var(--ease-saida), box-shadow 0.14s var(--ease-saida), opacity 0.25s;
}
.trilha:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.trilha:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tinta); }
.trilha:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
.trilha__corte { display: none; }
.trilha[aria-pressed="false"] { color: var(--osso-2); }
.trilha[aria-pressed="false"] .trilha__ondas { opacity: 0.25; }
.trilha[aria-pressed="false"] .trilha__corte { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .trilha[aria-pressed="true"] .trilha__ondas { animation: trilha-onda 1.8s ease-in-out infinite; }
}
@keyframes trilha-onda { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .trilha--convidando { animation: trilha-convite 1.5s ease-in-out infinite; }
}
@keyframes trilha-convite {
  0%, 100% { box-shadow: 3px 3px 0 var(--tinta); }
  50% { box-shadow: 3px 3px 0 var(--tinta), 0 0 0 7px color-mix(in oklab, var(--sol) 42%, transparent); }
}
@media (max-width: 1000px) { .trilha { bottom: calc(4.6rem + env(safe-area-inset-bottom)); } }
.checkout[open] ~ .trilha { opacity: 0; pointer-events: none; }

/* ── loading "Reino do Sol" enquanto o pedido é enviado ── */
.co-enviando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; padding: 2.4rem 1rem 2rem; text-align: center; min-height: 15rem;
}
.co-enviando__sol { width: 6.5rem; height: 6.5rem; overflow: visible; filter: drop-shadow(3px 3px 0 var(--tinta)); }
.co-enviando__raios { transform-box: view-box; transform-origin: 60px 60px; animation: girar 2.6s linear infinite; }
.co-enviando__disco { transform-box: view-box; transform-origin: 60px 60px; animation: co-enviando-pulso 2.4s ease-in-out infinite; }
.co-enviando__msg { font-family: var(--f-display); font-size: 1.12rem; color: var(--sol); min-height: 1.5em; }
.co-enviando__aviso {
  font-size: 0.85rem; line-height: 1.55; color: var(--osso-2); max-width: 22rem;
  background: color-mix(in oklab, var(--sol) 10%, var(--noite-3));
  border-radius: 10px; padding: 0.75rem 1rem;
}
.co-enviando__aviso strong { color: var(--sol); font-weight: 700; }
@keyframes co-enviando-pulso { 0%, 100% { transform: scale(0.93); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .co-enviando__raios { animation-duration: 9s; }
  .co-enviando__disco { animation: none; }
}

/* ── layout em 2 colunas dentro do modal (telas largas) ── */
.co-ing-grid { display: grid; gap: 0.9rem; }
.co-parts-grid { display: grid; gap: 0.9rem; }
@media (min-width: 640px) {
  .co-ing-grid { grid-template-columns: 1.55fr 1fr; align-items: start; }
  .co-ing-lado { position: sticky; top: 0; display: flex; flex-direction: column; gap: 0.7rem; }
  .co-parts-grid { grid-template-columns: 1fr 1fr; }
}
.co-ing-lista { display: flex; flex-direction: column; gap: 0.7rem; }
.co-ing-lado { display: flex; flex-direction: column; gap: 0.7rem; }

/* ── celular: modal ocupa a tela toda ── */
@media (max-width: 560px) {
  .checkout {
    inset: 0; margin: 0; width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
  }
  .checkout__caixa {
    height: 100%; max-height: 100%;
    border: none; border-image: none;
    border-top: 5px solid var(--sol);
    padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    gap: 0.9rem;
  }
  .checkout__fechar { top: 0.35rem; right: 0.4rem; }
  .checkout__cabeca { padding-right: 2.4rem; }
  .checkout__corpo { flex: 1; }
  .checkout__rodape { position: sticky; bottom: 0; padding-top: 0.6rem; background: var(--noite-2); }
  .checkout__rodape .btn { padding: 1em 1.4em; }
  .co-sair { padding: 1rem; }
}

/* ══════════ animações ══════════ */

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flutuar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* sol que respira */
.cena-sol-bob { transform-box: view-box; transform-origin: 1030px 235px; animation: sol-bob 8s ease-in-out infinite; }
@keyframes sol-bob { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.015); } }

/* bicho que atravessa o sertão ao rolar */
/* sem z-index próprio: fica na ordem do DOM entre .cena__frente (duna) e .cena__cactos
   → tatu no plano de frente: NA FRENTE da duna, ATRÁS dos 2 mandacarus */
.cena__bicho { overflow: hidden; }
/* sprite pequeno, no plano de frente do hero — não depende do slice da cena,
   então nunca aparece cortado em telas estreitas tipo iPad.
   O deslocamento vertical no scroll vem do JS (mesmo fator do parallax da camada da frente). */
.cena__bicho-svg {
  position: absolute;
  inset: auto auto max(1rem, 3.5vh, 2vw) 0;
  width: clamp(122px, 15vw, 210px);
  height: auto;
  transition: none;
}
.cena-bicho { transform-box: fill-box; }
.cena-bicho-pernas .p1 { animation: passo 0.42s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
.cena-bicho-pernas .p2 { animation: passo 0.42s ease-in-out infinite reverse; transform-box: fill-box; transform-origin: top center; }
@keyframes passo { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@media (prefers-reduced-motion: reduce) {
  .cena-sol-bob, .cena-bicho-pernas .p1, .cena-bicho-pernas .p2 { animation: none; }
}
.cena-sopro { transform-box: fill-box; transform-origin: 50% 100%; animation: sopro 6s ease-in-out infinite; }
.cena-sopro--2 { animation-duration: 7.5s; animation-delay: -2s; }
.cena-sopro--3 { animation-duration: 5.4s; animation-delay: -1s; }
@keyframes sopro { 0%,100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.4deg); } }
.cena-raios { transform-box: view-box; transform-origin: 1030px 235px; animation: girar 120s linear infinite; }
.cena-estrela { animation: cintilar 4s ease-in-out infinite; }
.cena-estrela:nth-of-type(2) { animation-delay: -1.5s; }
.cena-estrela:nth-of-type(3) { animation-delay: -2.7s; }
@keyframes cintilar { 0%,100% { opacity: 0.28; } 50% { opacity: 0.95; } }

/* pulo do número da contagem quando muda */
.contagem__num { display: block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .contagem__cel--pulou .contagem__num { animation: cd-pulo 0.5s var(--ease-saida); }
}
@keyframes cd-pulo {
  0% { transform: translateY(0); }
  35% { transform: translateY(-0.32em) scale(1.12); color: var(--osso); }
  100% { transform: translateY(0); }
}

.revela { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-saida), transform 0.6s var(--ease-saida); }
  .revela.dentro { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cena-sopro, .cena-raios, .cena-estrela { animation: none; }
  .cena-estrela { opacity: 0.6; }
}

/* ══════════ hover-preview: termo com card de imagem ao passar o mouse ══════════
   sublinhado tipo rabisco de caneta que se desenha ao passar o mouse/foco, com um
   card mostrando uma imagem relacionada perto do cursor. Em telas sem hover de
   verdade (toque), o rabisco já fica desenhado como dica visual, e um toque no
   termo abre/fecha o card (tocar fora também fecha) — ver iniciarHoverPreview()
   em app.js. Reaproveitado por vários termos (Suassuna, livros, teatro). */
/* inline-block (não só "relative") é necessário aqui: um <span> só
   "relative" e ainda display:inline vira ambíguo pra filho absolute se
   posicionar contra — o Safari/iOS resolve a largura do "-3%/-3%" do
   rabisco contra a linha de texto inteira em vez do termo, esticando o
   sublinhado bem além da palavra (só apareceu no iPhone, não no Chrome
   redimensionado). inline-block dá um retângulo bem definido pro filho
   absolute usar, sem mudar a aparência do texto corrido. */
.hp-termo { position: relative; font-weight: 700; display: inline-block; }
.hp-termo__corda {
  position: absolute; left: -3%; right: -3%; bottom: -0.58em; height: 0.85em;
  overflow: visible; pointer-events: none;
}
.hp-termo__corda path {
  fill: none; stroke: var(--sol); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset 0.55s var(--ease-saida);
}
@media (hover: hover) {
  .hp-termo:hover .hp-termo__corda path,
  .hp-termo:focus-visible .hp-termo__corda path { stroke-dashoffset: 0; }
}
@media (hover: none) {
  .hp-termo__corda path { stroke-dashoffset: 0; transition: none; }
}

.hp-card {
  position: fixed; z-index: 70; pointer-events: none; width: min(15.5rem, calc(100vw - 2rem));
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.22s var(--ease-saida), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hp-card.hp-card--visivel { opacity: 1; transform: translateY(0) scale(1); }
.hp-card__inner {
  background: var(--noite-2); border: var(--traco) solid var(--tinta); border-radius: 12px;
  box-shadow: 6px 8px 0 var(--tinta); overflow: hidden;
}
.hp-card__img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #fdf6e3; }
.hp-card__nome { padding: 0.75rem 0.9rem 0; font-family: var(--f-display); font-size: 1.05rem; color: var(--osso); }
.hp-card__sub { padding: 0.15rem 0.9rem 0.85rem; font-size: 0.78rem; color: var(--osso-2); font-style: italic; }
.hp-card__sub[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hp-termo__corda path { transition: none; }
  .hp-card { transition: opacity 0.15s linear; transform: none; }
}

/* ══════════ Elenco — foto do personagem no card ══════════
   card com foto sempre visível no topo; o corpo de texto usa a mesma
   cor que já está atrás do personagem na ilustração (--cor-cartao,
   definida por JS em renderElenco), com um grão de textura por cima
   pra ficar com cara de papel impresso, não de bloco de cor chapada.
   Texto em tinta (preto), tags em "recorte" (fundo preto, letra
   branca) — testado e ajustado com o Guilherme antes de ir pro ar. */
.varal__cards { align-items: flex-start; }

.pendura--tem-foto .pendura__card { padding: 0; overflow: hidden; }
.pendura__card-topo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.pendura__card-corpo {
  padding: 0.85rem 1rem 1.05rem; position: relative;
  background-color: var(--cor-cartao, var(--osso));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.35' intercept='0.7'/%3E%3CfeFuncG type='linear' slope='0.35' intercept='0.7'/%3E%3CfeFuncB type='linear' slope='0.35' intercept='0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  background-size: 160px 160px;
}
.pendura__card-corpo::before {
  content: ''; position: absolute; top: 0; left: 1rem; right: 1rem; height: 3px;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 6px, transparent 6px 11px);
}

.pendura--tem-foto .pendura__nome { color: #000; }
.pendura--tem-foto .pendura__detalhe { color: #000; opacity: 0.75; }
.pendura--tem-foto .pendura__papel {
  background: #000; color: #fff; font-weight: 700; border-color: #000;
}
.pendura--tem-foto .pendura__papel--vazio { background: transparent; color: #000; opacity: 0.6; border-color: #000; }

/* ══════════ Elenco — lightbox ══════════
   clicar num card com foto amplia e centraliza na tela, com o fundo
   escurecido + desfocado atrás. Setas nas laterais e teclado (← →, Esc)
   trocam de personagem; clicar fora ou no X fecha. Testado e ajustado
   com o Guilherme antes de ir pro ar — ver iniciarLightboxElenco() no
   app.js. */
[data-elenco] .varal .pendura--tem-foto { cursor: zoom-in; }

.lb-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 6, 20, 0.8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease-saida), visibility 0s linear 0.28s;
}
.lb-overlay.lb-aberto {
  opacity: 1; visibility: visible;
  transition: opacity 0.28s var(--ease-saida), visibility 0s linear 0s;
}

/* limitado por espaço de tela, não pela imagem (as ilustrações são
   1024×1024 — dá folga bem além disso); 68vh deixa espaço de sobra pro
   nome/tag embaixo e o botão de fechar em cima sem estourar a tela */
.lb-palco {
  position: relative; width: min(34rem, 86vw, 68vh);
  transform: scale(0.9); opacity: 0;
  transition: transform 0.32s var(--ease-saida), opacity 0.28s var(--ease-saida);
}
.lb-overlay.lb-aberto .lb-palco { transform: scale(1); opacity: 1; }

/* o próprio .pendura, só que centralizado no palco, sem fio/pin (não
   tem sentido pendurado dentro do lightbox) e mantendo o mesmo
   "balanço" que já tinha lá no varal — ver JS, que copia a rotação
   atual pro estilo inline antes de mover o elemento */
.pendura.pendura--lb {
  position: relative; width: 100%; margin-top: 0; z-index: 1;
}
.pendura--lb .pendura__fio, .pendura--lb .pendura__pin { display: none; }
@media (hover: hover) { .pendura--lb:hover { transform: none; } }

.lb-fechar, .lb-seta {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--noite-2); color: var(--osso); border: 2px solid var(--osso);
  border-radius: 50%; cursor: pointer; line-height: 1;
  transition: transform 0.15s var(--ease-saida), background 0.15s;
}
.lb-fechar:hover, .lb-seta:hover { background: var(--noite-3); }

.lb-fechar { top: -3.2rem; right: 0; width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }

.lb-seta { position: fixed; top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; font-size: 1.6rem; }
.lb-seta:hover { translate: 0 -50%; transform: scale(1.08); }
.lb-seta--prev { left: clamp(0.6rem, 2.5vw, 2.5rem); }
.lb-seta--next { right: clamp(0.6rem, 2.5vw, 2.5rem); }

@media (max-width: 560px) {
  .lb-seta { width: 2.3rem; height: 2.3rem; font-size: 1.25rem; }
  .lb-fechar { top: -2.8rem; width: 2.1rem; height: 2.1rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-overlay, .lb-palco, .lb-fechar, .lb-seta { transition: opacity 0.12s linear !important; transform: none !important; }
}