/* ============================================================
   ACELERA RENDER COM IA — camada do workshop sobre o sistema do
   PromptHub (global.css + pagina.css, copiados sem alteração),
   que é a aplicação do guia 9barra7-ui nas páginas de venda.

   Regras do guia seguidas aqui (9barra7-ui/CLAUDE.md):
   - escala de títulos e corpo do sistema (.display, .h2, .h3, .h4,
     .corpo-g, .corpo-m), sem tamanhos próprios;
   - espaço só da escala (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128);
   - raios 6 · 10 · 14 · 20 · 28 · pílula; cartão e imagem em 20;
   - sombras só --sombra-1…4; destaque por borda;
   - movimento 140 · 180 · 260 ms com --easing (e as curvas do guia);
   - hover só com mouse; com "reduzir movimento", só opacidade;
   - página escura com os valores da .secao--inversa do guia.
   Cores do workshop (decisão do William): fundo preto, ação rosa,
   acento laranja, padronagem rosa sobre laranja.
   ============================================================ */

:root{
  /* identidade do workshop: card "Acelera Render com IA" do link da bio */
  --laranja:       #FF5800;   /* acento: 3,2:1 sobre branco e 6,4:1 sobre preto */
  --laranja-hover: #E04E00;
  --rosa:          #FE63FE;   /* ação: texto preto em cima, ≈ 8:1 */
  --rosa-hover:    color-mix(in oklab, #FE63FE 87%, #fff); /* hover do guia no escuro: clareia */
  --branco:        #FFFFFF;
  /* a padronagem do PromptHub é laranja sobre azul; a do workshop é
     rosa sobre laranja, como no card */
  --azul:          var(--laranja);

  /* tokens do guia que o global.css do PromptHub não traz */
  --e-0: 2px;
  --r-xl: 28px;
  --curva-movimento: cubic-bezier(0.77, 0, 0.175, 1);
  --curva-gaveta:    cubic-bezier(0.32, 0.72, 0, 1);

  /* .secao--inversa do guia */
  --s0: #000000;   /* fundo */
  --s1: #111113;   /* superfície: seção alternada e cartão sobre o preto */
  --s2: #18181B;   /* superfície 2: cartão sobre a seção alternada */
  --s3: #232327;   /* superfície 3 */

  /* camadas de cor sobre foto e decoração */
  --veu-forte: rgba(0, 0, 0, .86);
  --veu-meio:  rgba(0, 0, 0, .55);
  --rotulo-fundo: rgba(0, 0, 0, .6);            /* rótulo do comparador, como no guia */
  --laranja-fraco: rgba(255, 88, 0, .14);
  --laranja-borda: rgba(255, 88, 0, .38);
  --laranja-anel:  rgba(255, 88, 0, .22);
  --rosa-fraco:    rgba(254, 99, 254, .14);
  --moldura-depoimento: linear-gradient(160deg, rgba(255, 88, 0, .30) 0%, rgba(254, 99, 254, .20) 55%, rgba(254, 99, 254, .06) 100%);
  /* brilhos de fundo (Black Friday): só em hero, ofertas e fechamento */
  --brilho-laranja: rgba(255, 88, 0, .26);
  --brilho-rosa:    rgba(254, 99, 254, .18);
  /* furta-cor: ciclo laranja → vermelho → rosa → vermelho → laranja. Os tons do
     meio foram calculados em OKLCH com passagem suave em cada cor-chave (sem
     vinco nem faixa escura). O rosa é uma passagem curta (≈ 30% do ciclo com os
     tons rosados) e fica sem o magenta, que puxava para o roxo. */
  --holo: linear-gradient(90deg, #FF5800, #FF5610, #FF5326, #FE4F36, #FF4940, #FF4647, #FF4A52, #FF607E, #FF74A9, #FF81C2, #FF7BB3, #FE667E, #FE5B61, #FF5A56, #FF5941, #FF5821, #FF5800);
}

/* ---------- página escura: tokens semânticos do sistema com os valores da .secao--inversa ---------- */
body.escuro{
  --wash:  var(--s0);
  --wash2: var(--s1);
  --paper: var(--s1);
  --ink:   #FFFFFF;
  --ink2:  rgba(255, 255, 255, .74);
  --ink3:  rgba(255, 255, 255, .52);
  --line:  rgba(255, 255, 255, .14);
  --line2: rgba(255, 255, 255, .24);
  --foco:  var(--rosa);
  /* sombras do tema escuro do guia */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .4);
  --sombra-3: 0 8px 32px rgba(0, 0, 0, .5);
  --sombra-4: 0 24px 64px rgba(0, 0, 0, .6);
  --vidro: rgba(26, 26, 30, .72);
  --vidro-filtro: blur(18px) saturate(1.8);
  background: var(--s0);
  color: var(--ink);
  padding-bottom: calc(var(--e-9) + var(--e-5)); /* a barra fixa não cobre o rodapé */
}

.escuro .s0{ background: var(--s0); }
/* o pagina.css do PromptHub zera o respiro de #oferta (lá a oferta tem moldura
   própria) e o topo de .depoimentos (lá vem colado na seção anterior); aqui as
   duas são seções comuns e voltam ao respiro do sistema */
.escuro #depoimentos{ padding-block: 0 var(--secao-y); } /* vem depois de outra seção aberta no mesmo preto: um respiro só */
/* a primeira oferta vem depois da Marilia (fundo cinza): respiro só em cima (ver painel de vidro) */
.escuro #oferta{ padding-block: var(--secao-y) 0; }
.escuro .s1{ background: var(--s1); --paper: var(--s2); }

/* sobre o preto o texto engrossa opticamente: o sistema usa 350 */
.escuro .corpo-g, .escuro .corpo, .escuro .corpo-m, .escuro .corpo-p{ font-weight: var(--peso-corpo-inverso); }

/* ---------- tipografia: a escala é a do sistema; aqui só cor e o sobretítulo ---------- */
/* sobretítulo = .t-sobrelinha do guia (500 11px, 0,1em, caixa alta), em furta-cor:
   o degradê (regra do furta-cor, abaixo) recortado no texto, na largura do texto */
.escuro .sobretitulo{
  width: fit-content; margin: 0 0 var(--e-3);
  font-size: 11px; font-weight: 500; letter-spacing: .1em; line-height: 1.3;
}
.escuro a{ text-underline-offset: 3px; }

/* ---------- furta-cor do workshop ----------
   O degradê do --holo, 3,5 vezes mais largo que o elemento. Um relógio só (no fim
   do index.html) desliza o degradê em todos os elementos na mesma fase, com
   velocidade que vai e volta; com "reduzir movimento", fica parado. */
.furta, .preparar::before, .barra__rotulo b, .barra__contador b, .escuro .sobretitulo, .bilhete__lote, .bilhete__contagem b{
  background-image: var(--holo);
  background-size: 350% 100%;
  background-position: var(--holo-x, 0%) 0;
}
/* textos em furta-cor (sobretítulos, lote e contagem do ingresso, contagem da barra): o degradê recortado no texto */
.escuro .sobretitulo, .bilhete__lote, .bilhete__contagem b, .barra__rotulo b, .barra__contador b{ color: transparent; -webkit-background-clip: text; background-clip: text; }
/* botão de ação: tamanho e forma do .btn do sistema, em furta-cor, rótulo preto */
.btn--furta{ color: var(--preto); transition: filter var(--tr-padrao) var(--easing), transform var(--tr-press) var(--easing); }
@media (hover: hover) and (pointer: fine){ .btn--furta:hover{ filter: brightness(1.08); } }
/* botão preto, sobre o furta-cor do hero */
.btn--preto{ background: var(--preto); color: var(--branco); }
@media (hover: hover) and (pointer: fine){ .btn--preto:hover{ background: var(--preto-hover); } }
.escuro .btn:focus-visible{ outline: 2px solid var(--foco); outline-offset: 2px; }
/* como no .abertura__acoes do guia: abaixo de 600px o botão ocupa a largura */
@media (max-width: 599px){ .hero .btn--grande, .fechamento .btn--grande{ width: 100%; } }


/* "ao vivo": ponto laranja antes da data */
.ao-vivo{ display: inline-flex; align-items: flex-start; gap: var(--e-3); font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.ao-vivo::before{ content: ''; flex: none; width: var(--e-2); height: var(--e-2); margin-top: .5em; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 var(--e-1) var(--laranja-anel); }

/* ---------- cabeçalho de seção = .cab-secao do guia ---------- */
.cab{ display: grid; gap: var(--e-4); margin-bottom: clamp(var(--e-6), 5vw, var(--e-7)); }
.cab__titulo .h2{ margin: 0; }
.cab__apoio{ max-width: 52ch; }
/* = .cab-secao--lado do guia: com texto de apoio, ele fica à direita do título, alinhado pela base */
@media (min-width: 768px){
  .cab--lado{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--e-7); align-items: end; }
  #workshop .cab--lado{ align-items: center; }
  #workshop .cab__titulo{ display: contents; }
  #workshop .cab__titulo > .sobretitulo{ grid-column: 1; grid-row: 1; margin: 0; }
  #workshop .cab__titulo > .h2{ grid-column: 1; grid-row: 2; }
  #workshop .cab__apoio{ grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
}

/* ---------- marcações de pendência (não publicar com elas) ---------- */
.escuro .marcacao{
  color: var(--ink2); border-color: var(--rosa);
  background: repeating-linear-gradient(45deg, var(--rosa-fraco), var(--rosa-fraco) 8px, transparent 8px, transparent 16px);
  flex-direction: column; gap: var(--e-1);
}
.marcacao small{ font-size: 11px; opacity: .75; }

/* ---------- padronagem: rosa sobre laranja ---------- */
.padrao__o, .padrao__meio{ background: var(--rosa); }

/* ---------- letreiro em movimento no topo (texto em .t-sobrelinha) ---------- */
/* fica fixo no topo durante toda a rolagem; as âncoras param abaixo dele */
.letreiro{ position: sticky; top: 0; z-index: 45; background: var(--preto); color: var(--branco); overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); }
html{ scroll-padding-top: var(--e-7); }
.letreiro__trilho{ display: inline-flex; animation: letreiro 40s linear infinite; }
.letreiro__item{ font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: var(--e-3) var(--e-4); }
.letreiro__item b{ font-weight: 500; padding-inline: var(--e-1); }
@keyframes letreiro{ to{ transform: translateX(-50%); } }

/* ---------- painel de vidro: separa as seções de conteúdo das seções abertas ----------
   Fundo translúcido com o vidro do guia, borda fina e raio de 28px, sobre os brilhos
   laranja e rosa da seção. overflow: clip (e não hidden) para não quebrar o título
   fixo da programação. */
.secao--painel{ position: relative; isolation: isolate; overflow: clip; }
/* a borda do painel conta como a borda da seção: entre ela e o conteúdo vizinho fica
   um respiro só (--secao-y), como entre o hero e a seção seguinte, e não dois somados.
   Entre dois painéis seguidos, ou depois de uma seção de outro fundo, o respiro fica em cima. */
.secao.secao--painel{ padding-block: 0; }
.secao--painel + .secao--painel{ padding-top: var(--secao-y); }
.secao--painel::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  background:
    radial-gradient(30% 45% at 22% 30%, var(--brilho-laranja), transparent 70%),
    radial-gradient(30% 45% at 78% 70%, var(--brilho-rosa), transparent 70%);
}
.painel{
  position: relative;
  padding: clamp(var(--e-6), 5vw, var(--e-8)); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  border: 1px solid var(--line);
}
@media (max-width: 599px){ .painel{ padding: var(--e-5); border-radius: var(--r-lg); } }
@media (prefers-reduced-transparency: reduce){ .painel{ background: var(--s1); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- ícone do guia (24px, traço 1,75) e cartão com ícone ---------- */
.ic{ width: 24px; height: 24px; flex: none; }
.cartoes-icone{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
@media (min-width: 768px){
  .cartoes-icone{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
  .cartoes-icone--5 .cartao-icone:last-child{ grid-column: 1 / -1; }
}
/* cinco cartões: três em cima e dois embaixo, ocupando a largura toda */
@media (min-width: 1024px){
  .cartoes-icone--5{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cartoes-icone--5 .cartao-icone{ grid-column: span 2; }
  .cartoes-icone--5 .cartao-icone:nth-child(n+4){ grid-column: span 3; }
}
.cartao-icone{ display: grid; gap: var(--e-2); align-content: start; padding: var(--e-6); border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); }
@media (max-width: 599px){ .cartao-icone{ padding: var(--e-5); } }
.cartao-icone__icone, .agenda__icone{ display: grid; place-items: center; width: var(--e-7); height: var(--e-7); border-radius: var(--r-md); background: var(--laranja-fraco); color: var(--laranja); }
.cartao-icone__icone{ margin-bottom: var(--e-3); }
.cartao-icone .apoio{ max-width: 46ch; }

/* ---------- 1 · hero = .abertura do guia, sobre o furta-cor, texto e botão pretos ---------- */
.escuro .hero{
  /* sobre o furta-cor os tokens de texto voltam ao preto */
  --ink:  #000000;
  --ink2: rgba(0, 0, 0, .78);
  --ink3: rgba(0, 0, 0, .6);
  --line: rgba(0, 0, 0, .16);
  --foco: var(--preto);
  color: var(--ink);
  padding-bottom: clamp(var(--e-7), 8vw, var(--e-9));
}
.escuro .hero .corpo-g{ font-weight: var(--peso-corpo); }
.hero__wrap{ padding-top: clamp(var(--e-7), 8vw, var(--e-9)); }
.hero__marca{ display: inline-flex; max-width: 100%; margin-bottom: var(--e-5); }
.hero__marca img{ display: block; height: auto; width: 248px; max-width: 100%; }
@media (min-width: 1024px){ .hero__marca img{ width: 322px; } }
.hero__grade{ display: grid; gap: var(--e-7); }
.hero__texto{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-5); }
.hero__titulo .display{ margin: 0; text-wrap: balance; }
.hero__apoio{ max-width: 54ch; margin: 0; }
.hero__texto .btn{ margin-top: var(--e-2); }
/* computador: texto à esquerda, comparador à direita, metade cada; o comparador
   acompanha a altura do bloco de texto, então os dois começam e terminam juntos */
@media (min-width: 1024px){
  .hero__grade{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); }
  .hero__texto{ justify-content: center; }
  .hero__comparativo{ display: flex; }
  .hero__comparativo .comparador{ aspect-ratio: auto; min-height: 400px; }
}
.hero__comparativo{ position: relative; margin: 0; }
.hero__comparativo .comparador{ aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
/* alça e linha do comparador ficam brancas sobre a foto, como no guia */
.escuro .comparador__linha{ background: var(--branco); }
.escuro .comparador__botao{ background: var(--branco); color: var(--preto); }

/* ---------- 2 · o workshop ---------- */
.aplicacoes{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); }
@media (min-width: 768px){ .aplicacoes{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); } }
.aplicacao__moldura{ border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper); margin-bottom: var(--e-4); }
.aplicacao .comparador{ aspect-ratio: 4 / 3; border-radius: 0; }
@media (min-width: 768px){ .aplicacao .comparador{ aspect-ratio: 4 / 5; } }
/* sala de jantar: centraliza o grupo de cadeiras no recorte, mesma folga dos dois lados */
.aplicacao--elementos .comparador__img{ object-position: 42.5% 50%; }
.aplicacao .h3{ margin-bottom: var(--e-2); }
.aplicacao .apoio{ max-width: 32ch; }

/* ---------- 3 · conteúdo: cinco cartões com ícone, no painel (estilos do cartão acima) ---------- */

/* ---------- 4 · resultados: cinco imagens em faixa, com ampliação ---------- */
.resultados__galeria{ --foto-h: clamp(176px, 44vw, 352px); overflow: hidden; touch-action: pan-y; cursor: grab; }
.resultados__trilho{ display: flex; gap: var(--e-4); width: max-content; }
.resultados__item{ position: relative; flex: none; height: var(--foto-h); aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); cursor: zoom-in; }
.resultados__item img{ display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.resultados__lupa{ position: absolute; top: var(--e-3); right: var(--e-3); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.resultados__lupa svg{ width: 16px; height: 16px; }
@media (min-width: 768px){ .resultados__galeria{ --foto-h: calc(((min(100vw, 1180px) - 2 * var(--gutter) - 16px) / 2.7 * 1.5 + 16px) * .8); } }
.resultados__modal{ position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 64px; border: 0; color: white; background: rgba(0,0,0,.96); }
.resultados__modal[open]{ display: grid; place-items: center; }
.resultados__modal::backdrop{ background: rgba(0,0,0,.92); }
.resultados__modal figure{ display: grid; justify-items: center; gap: var(--e-3); margin: 0; }
.resultados__grande{ max-width: calc(100vw - 128px); max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); }
.resultados__modal figcaption{ text-align: center; font-size: 14px; }
.resultados__fechar,.resultados__anterior,.resultados__proxima{ position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.12); color: white; font-size: 32px; cursor: pointer; }
.resultados__fechar{ top: 16px; right: 16px; }
.resultados__anterior{ left: 12px; top: calc(50% - 22px); }
.resultados__proxima{ right: 12px; top: calc(50% - 22px); }
@media (max-width: 767px){ .resultados__modal{ padding: 64px 12px 90px; } .resultados__grande{ max-width: calc(100vw - 24px); max-height: calc(100dvh - 210px); } .resultados__anterior,.resultados__proxima{ top: auto; bottom: 24px; } .resultados__anterior{ left: calc(50% - 56px); } .resultados__proxima{ right: calc(50% - 56px); } }

/* ---------- 5 · Marilia ---------- */
/* As seções vizinhas já fornecem o respiro entre os conteúdos. */
.escuro #quem-criou{ padding-block: 0; }
.marilia{ display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1024px){ .marilia{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e-8); } }
.marilia__foto{ margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; background: var(--paper); }
.marilia__foto img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.marilia__texto{ display: grid; gap: var(--e-4); }
.marilia__texto .sobretitulo{ margin: 0; }
.marilia__texto .apoio{ max-width: 52ch; }
.marilia__numeros{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.escuro .autora__numero{ margin: 0; padding: var(--e-5); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.escuro .autora__valor{ color: var(--ink); }

/* ---------- 6 e 11 · oferta: texto à esquerda e ingresso à direita, no painel ----------
   Sem sobretítulo e sem a linha da data (as duas informações já aparecem no letreiro, no
   hero e no próprio ingresso). A hierarquia vem só de tamanho, peso e espaço: título,
   apoio e a lista do que vem no ingresso, sem filetes separando. */
.oferta-ingresso{ display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1024px){ .oferta-ingresso{ grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: var(--e-8); row-gap: var(--e-7); } }
.oferta-ingresso__texto{ display: grid; gap: var(--e-4); align-content: center; }
/* tamanhos um degrau abaixo do resto da página (o ingresso é o protagonista): título no
   .h3-cartao do sistema (até 34px), apoio no .corpo (16px), lista no .corpo-m (15px) */
.oferta-ingresso__texto .h3-cartao{ margin: 0; max-width: 18ch; text-wrap: balance; }
/* a data do workshop é o sobretítulo do título (furta-cor, como os outros) */
.oferta-ingresso__texto .apoio{ margin: 0; max-width: 44ch; }
.inclusoes-bloco{ display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.inclusoes__titulo{ margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
/* = .oferta__itens do guia, sem a borda: marca de check num círculo na cor de acento */
.inclusoes{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.inclusoes li{ display: grid; grid-template-columns: var(--e-5) minmax(0, 1fr); gap: var(--e-3); align-items: start; font-size: 15px; line-height: 1.55; color: var(--ink); }
.inclusoes li::before{ content: ''; width: var(--e-5); height: var(--e-5); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5800' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 16px no-repeat, var(--laranja-fraco); }
/* rodapé do painel: o que preparar, discreto (.legenda) e centralizado no bloco */
.oferta-ingresso__rodape{ margin: 0; font-size: 13px; line-height: 1.45; letter-spacing: .01em; color: var(--ink3); text-align: center; }
/* ícone na linha do texto, para acompanhar a centralização quando o texto quebra */
.oferta-ingresso__rodape .ic{ display: inline-block; width: 16px; height: 16px; margin-right: var(--e-2); vertical-align: -3px; color: var(--ink3); }
.oferta-ingresso__rodape a{ color: var(--ink2); text-decoration-color: var(--line2); }
@media (min-width: 1024px){ .oferta-ingresso__rodape{ grid-column: 1 / -1; } }

/* ingresso = .oferta do guia (padding 32, borda, raio 20, até 440px) em duas partes, com o
   picote do Video Lab: os recortes são buracos de verdade (máscara), então mostram o que
   está atrás do ingresso, e não bolinhas pintadas */
.bilhete{ --entalhe: 12px; display: grid; width: 100%; max-width: 440px; justify-self: center; container-type: inline-size; }
@media (min-width: 1024px){ .bilhete{ justify-self: end; } }
.bilhete__topo, .bilhete__base{ display: grid; gap: var(--e-4); padding: var(--e-6); background: var(--s1); border: 1px solid var(--line); }
.bilhete__topo{
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 1px dashed var(--line2);
  -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) right / 51% 100% no-repeat;
}
.bilhete__base{
  border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0;
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 0, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 0, transparent var(--entalhe), #000 calc(var(--entalhe) + .5px)) right / 51% 100% no-repeat;
}
@media (max-width: 599px){ .bilhete__topo, .bilhete__base{ padding: var(--e-5); } }
/* cabeçalho: logo e campanha */
.bilhete__cab{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); padding-bottom: var(--e-4); border-bottom: 1px solid var(--line); }
.bilhete__cab img{ height: 16px; width: auto; filter: invert(1); }
/* ingresso estreito (celular): logo e campanha empilhados e centralizados, como o valor */
@container (max-width: 360px){ .bilhete__cab{ flex-direction: column; justify-content: center; } }
/* lote atual no canto, em furta-cor */
.bilhete__lote{ font-size: 11px; font-weight: 500; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
/* valor centralizado: rótulo do lote, "de / por", preço e prazo, um embaixo do outro */
.bilhete__valor{ display: grid; justify-items: center; gap: var(--e-2); padding-top: var(--e-3); text-align: center; }
.bilhete__preco{ display: grid; justify-items: center; gap: var(--e-1); margin: var(--e-2) 0 0; }
/* "DE R$ 39 POR" em caixa alta, na sobrelinha do sistema */
.bilhete__de{ font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.bilhete__de s{ color: var(--ink3); }
/* preço grande = .numero do sistema */
.bilhete__por{ font-size: clamp(48px, 7vw, 96px); font-weight: 600; letter-spacing: -0.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.bilhete__prazo{ margin: 0; font-size: 14px; color: var(--ink2); }
/* contagem do lote, como na referência, em caixa normal; os números em furta-cor */
.bilhete__contagem{ margin: var(--e-1) 0 0; font-size: 14px; line-height: 1.45; color: var(--ink2); font-variant-numeric: tabular-nums; }
.bilhete__contagem b{ font-weight: 500; }
.bilhete .btn{ width: 100%; }
/* canhoto: aviso do cadastro logo abaixo do botão; depois o replay */
.bilhete__base{ gap: var(--e-3); }
.bilhete__aviso{ margin: 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink3); }
.bilhete__replay{ margin: var(--e-1) 0 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--ink2); }

/* ---------- 7 · o que vem com seu ingresso: seção aberta, entre dois painéis ----------
   Quatro cartões compactos lado a lado (ícone, título e texto curto), a preparação numa
   faixa logo abaixo e a nota do prazo. Texto um degrau abaixo (.h4 e .corpo-p): é
   informação de apoio, depois da oferta. */
.itens-icone{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
@media (min-width: 768px){ .itens-icone{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 1024px){ .itens-icone{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.item-icone.cartao-icone{ padding: var(--e-5); }
.item-icone .cartao-icone__icone{ margin-bottom: var(--e-2); }
.item-icone .h4, .item-icone .apoio{ margin: 0; }
.item-icone .apoio{ max-width: 36ch; text-wrap: pretty; }
/* títulos dos itens em duas linhas curtas; no celular (ícone ao lado) eles cabem em uma */
@media (max-width: 767px){ .quebra-larga{ display: none; } }
/* celular: ícone à esquerda e texto à direita, para a lista não crescer demais */
@media (max-width: 767px){
  .item-icone{ grid-template-columns: var(--e-7) minmax(0, 1fr); column-gap: var(--e-4); row-gap: var(--e-1); }
  .item-icone .cartao-icone__icone{ grid-row: span 2; margin: 0; }
}
/* preparação: trecho próprio no fim da seção (é para onde leva o link das ofertas), sem caixa,
   com título maior e três passos lado a lado em cartões. O respiro maior em cima separa dos cartões. */
.preparar{
  position: relative; margin: var(--e-8) calc(var(--e-6) * -1) 0; padding: var(--e-6);
  border-radius: var(--r-xl); scroll-margin-top: var(--e-7);
  display: grid; gap: var(--e-6);
}
@media (max-width: 599px){ .preparar{ margin-inline: calc(var(--e-4) * -1); padding: var(--e-4); gap: var(--e-5); } }
@media (min-width: 1024px){
  .preparar{ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--e-8); align-items: center; }
}
.preparar__cab{ display: grid; gap: var(--e-3); }
.preparar__cab .h3-cartao, .preparar__cab .apoio{ margin: 0; }
.preparar__cab .h3-cartao{ max-width: 14ch; text-wrap: balance; }
.preparar__cab .apoio{ max-width: 34ch; }
/* passos em cartões compactos, iguais aos itens de cima */
.preparar__passos{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
@media (min-width: 768px){ .preparar__passos{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); } }
.preparar__passo.cartao-icone{ padding: var(--e-5); }
.preparar__passo .cartao-icone__icone{ margin-bottom: var(--e-2); }
.preparar__passo .h4, .preparar__passo .apoio{ margin: 0; }
@media (max-width: 767px){
  .preparar__passo{ grid-template-columns: var(--e-7) minmax(0, 1fr); column-gap: var(--e-4); row-gap: var(--e-1); }
  .preparar__passo .cartao-icone__icone{ grid-row: span 2; margin: 0; }
}
/* chegada pelo link das ofertas: o trecho ganha por um instante a borda fina em furta-cor,
   que depois some. Com "reduzir movimento", a borda só aparece, sem animação. */
.preparar::before{
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.preparar:target::before{ animation: chegada-preparar 2800ms var(--easing) both; }
@keyframes chegada-preparar{ 0%{ opacity: 0; } 12%{ opacity: 1; } 70%{ opacity: 1; } 100%{ opacity: 0; } }
/* as duas notas da seção numa linha só, centralizada no fim: o custo da API e o prazo dos promptadores */
.nota-rodape{ margin: var(--e-5) 0 0; font-size: 13px; line-height: 1.45; color: var(--ink3); text-align: center; text-wrap: balance; }

/* ---------- 8 · depoimentos: print recortado sobre moldura com as cores do workshop ---------- */
.escuro .depoimentos__palco{ margin-top: 0; }
.escuro .depoimento{ padding: var(--e-2); border-radius: var(--r-lg); background: var(--moldura-depoimento); border: 1px solid var(--line); }
/* raio interno = raio do cartão menos o respiro, para as curvas ficarem paralelas */
.escuro .depoimento img{ aspect-ratio: 490 / 734; object-fit: cover; border: 0; border-radius: calc(var(--r-lg) - var(--e-2)); -webkit-user-drag: none; }

/* ---------- 9 · programação: à esquerda, vídeo em cima e título embaixo; à direita, a linha do tempo ----------
   O vídeo (timelapse de um workshop anterior) ocupa da altura em que a linha do tempo
   começa até o título, e o título fecha alinhado com o último item. Sem título fixo. */
.agenda{ display: grid; gap: var(--e-6); }
.agenda__cab .h2{ margin: 0; }
.agenda__video{ display: flex; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); object-fit: cover; object-position: 100% 0; }
@media (min-width: 1024px){
  .agenda{
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-areas: "video lista" "cab lista";
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: var(--e-8); row-gap: var(--e-6);
  }
  .agenda__video{ grid-area: video; aspect-ratio: auto; height: 100%; min-height: 240px; }
  .agenda__cab{ grid-area: cab; }
  .agenda__lista{ grid-area: lista; }
}
.agenda__lista{ list-style: none; margin: 0; padding: 0; }
.agenda__item{ position: relative; display: grid; grid-template-columns: var(--e-7) minmax(0, 1fr); gap: var(--e-5); padding-bottom: var(--e-7); }
.agenda__item:last-child{ padding-bottom: 0; }
/* fio que liga um ícone ao próximo */
.agenda__item::after{ content: ''; position: absolute; left: calc(var(--e-7) / 2 - .5px); top: calc(var(--e-7) + var(--e-2)); bottom: var(--e-2); width: 1px; background: var(--line2); }
.agenda__item:last-child::after{ display: none; }
.agenda__texto{ display: grid; gap: var(--e-2); }
/* horário no tamanho do .h2 do sistema */
.agenda__hora{ margin: 0 0 var(--e-1); font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.032em; line-height: 1; font-variant-numeric: tabular-nums; }
.agenda__item .apoio{ max-width: 46ch; }

/* ---------- 10 · certificação ---------- */
.certificado{ display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 1024px){ .certificado{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-9); } }
.certificado__texto{ display: grid; gap: var(--e-4); }
.certificado__texto .sobretitulo{ margin: 0; }
.certificado__texto .apoio{ max-width: 52ch; }
.certificado__arte{ width: 100%; height: auto; aspect-ratio: 297 / 210; object-fit: cover; border-radius: var(--r-lg); }

/* ---------- 12 · perguntas ---------- */
@media (min-width: 1024px){ .perguntas__titulo{ position: sticky; top: var(--e-9); } }
.escuro .pergunta__sinal{ color: var(--ink2); }
.escuro .perguntas__lista li.aberta .pergunta__sinal{ color: var(--rosa); }

/* ---------- 13 · CTA final = fechamento do PromptHub ----------
   A partir de 1024px a padronagem (rosa sobre laranja) é o campo e o texto passa por
   cima, em preto, com botão preto; abaixo disso o texto fica no preto da página, com o
   botão furta-cor, e a padronagem fecha a página em faixa. */
/* Mantém a padronagem animada em uma camada atrás do conteúdo no Safari. */
.fechamento{ isolation: isolate; }
.fechamento__campo{ z-index: 0; pointer-events: none; }
.fechamento__conteudo{ position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-5); }
/* logo do Acelera Render no topo (como no hero): branco no preto do celular, preto sobre a padronagem */
.fechamento__marca{ display: block; height: 20px; width: auto; filter: invert(1); }
.fechamento__titulo{ margin: 0; }
.fechamento__apoio{ max-width: 46ch; }
.fechamento__botao{ margin-top: var(--e-3); }
/* abaixo de 1024px o fechamento fica no mesmo preto das perguntas: um respiro só entre os dois */
@media (max-width: 1023px){ .secao.fechamento{ padding-top: 0; } }
@media (min-width: 1024px){
  /* texto em preto sólido: com transparência (o --sobre-campo-apoio do PromptHub), ele mudava de
     tom ao passar do rosa para o laranja e parecia estar atrás dos círculos */
  .escuro .fechamento{ --ink: #000000; --ink2: #000000; --foco: var(--preto); color: var(--ink); }
  .fechamento__marca{ height: 26px; filter: none; }
  .escuro .fechamento .corpo-g{ font-weight: var(--peso-corpo); }
  .fechamento .fechamento__botao{ background-image: none; background-color: var(--preto); color: var(--branco); filter: none; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){ .fechamento .fechamento__botao:hover{ background-color: var(--preto-hover); } }

/* ---------- rodapé ---------- */
.escuro .rodape__coluna .h4{ color: var(--ink); }
.escuro .rodape__link{ color: var(--ink2); text-decoration: none; }
@media (hover: hover) and (pointer: fine){ .escuro .rodape__link:hover{ color: var(--ink); } }
.rodape__agua img{ width: 100%; height: auto; }

/* ---------- barra flutuante: vidro do tema escuro do guia ----------
   Sem borda e sem linha de progresso (pedido do William, 22/10). Refino: largura menor
   (sem o vão no meio), o lote em destaque e o prazo em segundo plano, e tudo alinhado
   pelo centro da barra: lote, preço e botão na mesma linha. Sem o selo, a largura
   desceu na mesma medida dele, para o vão entre os dois lados não crescer. */
.barra{
  position: fixed; left: 50%; bottom: calc(var(--e-4) + var(--cookies-h, 0px)); z-index: 40;
  width: min(calc(100% - var(--e-5)), 680px);
  /* escondida, desce o bastante para a sombra não manchar o pé da tela (o hero é claro) */
  transform: translate(-50%, calc(100% + var(--e-8)));
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  border-radius: var(--r-lg);
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--sombra-4);
  color: var(--ink);
  transition: transform var(--tr-painel) var(--curva-gaveta);
}
.barra.visivel{ transform: translate(-50%, 0); }
.barra__corpo{ display: flex; align-items: center; gap: var(--e-5); min-height: 48px; }
/* textos do estado: o lote numa linha, ou o aviso e a contagem empilhados */
.barra__estado{ display: flex; align-items: center; gap: var(--e-3); flex: 1 1 auto; min-width: 0; }
.barra__textos{ display: grid; gap: var(--e-0); min-width: 0; }
/* = .t-rotulo do guia */
.barra__rotulo{ font-size: 13px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.barra__prazo{ font-weight: 400; color: var(--ink2); }
.barra__contador{ font-size: 14px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.barra__contador:empty{ display: none; }
.barra__texto{ font-size: 14px; color: var(--ink2); }
/* contagem em furta-cor (o recorte do degradê no texto está na regra do furta-cor) */
.barra__rotulo b, .barra__contador b{ font-weight: 500; }
/* centrado e não pela base: assim "De R$ 39 por" fica na mesma linha do lote */
.barra__preco{ display: flex; align-items: center; gap: var(--e-2); white-space: nowrap; font-size: 13px; color: var(--ink2); }
.barra__preco s{ color: var(--ink2); }
.barra__preco strong{ font-size: 24px; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.barra .btn{ flex: none; }
.barra[data-estado="antes"] .barra__preco, .barra[data-estado="antes"] .btn,
.barra[data-estado="encerrado"] .barra__preco, .barra[data-estado="encerrado"] .btn{ display: none; }
/* antes da abertura e depois do encerramento só há o aviso: a barra fica do tamanho dele */
@media (min-width: 768px){ .barra[data-estado="antes"], .barra[data-estado="encerrado"]{ width: max-content; padding-right: var(--e-5); } }
/* celular: estado e preço na mesma linha, botão embaixo */
@media (max-width: 767px){
  .barra{ padding: var(--e-3); bottom: calc(var(--e-3) + var(--cookies-h, 0px)); }
  .barra__corpo{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2) var(--e-3); align-items: center; min-height: 0; }
  .barra__estado{ flex-direction: column; align-items: flex-start; gap: var(--e-1); padding-left: var(--e-1); }
  .barra__rotulo{ font-size: 12px; }
  .barra__preco{ font-size: 12px; gap: var(--e-1); }
  .barra__preco strong{ font-size: 20px; }
  .barra .btn{ grid-column: 1 / -1; width: 100%; min-width: 0; }
  .barra[data-estado="antes"] .barra__estado, .barra[data-estado="encerrado"] .barra__estado{ grid-column: 1 / -1; padding-block: var(--e-1); }
}
/* telas de 360px: a contagem não quebra no meio */
@media (max-width: 389px){
  .barra__rotulo{ font-size: 11px; }
  .barra__rotulo b, .barra__contador b{ white-space: nowrap; }
  .barra__preco{ font-size: 11px; }
  .barra__preco strong{ font-size: 18px; }
}
@media (prefers-reduced-transparency: reduce){
  .barra{ background: var(--s1); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* botão de compra fora do período de inscrições */
.btn[aria-disabled="true"]{ pointer-events: none; }

/* "O workshop": título em três linhas de tamanho parecido (pedido do William, 22/10), para
   não encostar no apoio; a partir de 600px cada linha fica inteira. No celular quebra sozinho. */
.escuro .titulo-tres-linhas{ max-width: none; }
@media (min-width: 600px){ .titulo-tres-linhas span{ white-space: nowrap; } }
@media (max-width: 599px){ .titulo-tres-linhas span{ display: inline; } }

.resultados__galeria.arrastando, .resultados__galeria.arrastando *{ cursor: grabbing; user-select: none; }
.resultados__galeria:not([data-animada]){ overflow-x: auto; }

/* ---------- barra de rolagem: trilho preto e alça grafite em pílula, no tom da página ---------- */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{ background: var(--preto); }
::-webkit-scrollbar-thumb{ background: #2b2b2b; border: 3px solid var(--preto); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: #474747; }
::-webkit-scrollbar-button{ display: none; }
@supports not selector(::-webkit-scrollbar){ html{ scrollbar-color: #2b2b2b var(--preto); scrollbar-width: thin; } }