/* ============================================================
   PÁGINA — layout de seção.
   Todo valor de cor, espaço, raio, sombra e tipografia sai de
   variável do global.css. As variáveis locais abaixo existem
   para os valores que são de LAYOUT (largura, proporção,
   desfoque), não de estilo.
   ============================================================ */
:root{
  --medida-titulo: 20ch;
  --medida-larga: 56ch;
  --captura-max: 420px;      /* teto da captura enquanto ela é coluna única */
  --captura-larga: 440px;    /* teto da captura ao lado do texto */
  --filete-acento: 2px;      /* espessura do filete de acento */
  --faixa-d: 120px;          /* diâmetro da padronagem = altura do campo */
  --medida-legenda: 52ch;
  --logo-ferramenta: 44px;
  --medida-pausa: 760px;
  /* medida do bloco IA Studio: o cap de texto corrido (--medida) traduzido
     para px. Em `ch` cada elemento resolveria uma largura diferente, porque
     a unidade acompanha a fonte de cada um, e os três precisam fechar juntos. */
  --medida-studio: 470px;
  --dep-larg: 240px;         /* largura do print no carrossel */
  --medida-fechamento: 18ch;
}
@media (min-width: 900px){ :root{ --logo-larg: 175px; } }
@media (min-width: 768px){ :root{ --faixa-d: 150px; } }
@media (min-width: 1024px){ :root{ --faixa-d: 180px; --dep-larg: 300px; } }

/* ------------------------------------------------------------
   CTA FLUTUANTE
   Em todas as telas, como no IA Studio (a página não tem mais
   cabeçalho). Aparece quando o topo sai da tela e some na oferta
   e no fechamento, para não competir com o CTA deles.
   ------------------------------------------------------------ */
.cta-flutuante{
  position: fixed; z-index: 40;
  left: 50%; bottom: calc(var(--e-5) + max(var(--cookies-h, 0px), env(safe-area-inset-bottom, 0px)));
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(var(--e-5));
  transition: opacity var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing),
              visibility 0s linear var(--tr-padrao);
}
.cta-flutuante.visivel{
  opacity: 1; visibility: visible;
  transform: translateX(-50%);
  transition: opacity var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing),
              visibility 0s;
}
.cta-flutuante .btn{ box-shadow: var(--sombra-flutuante); }
html:not(.js) .cta-flutuante{ display: none; }

/* --- volta ao topo: aparece depois de uma tela inteira de rolagem --- */
.ao-topo{
  position: fixed; z-index: 41;
  right: calc(var(--e-5) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--e-5) + max(var(--cookies-h, 0px), env(safe-area-inset-bottom, 0px)));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* vidro, nao branco solido: o botao fica sobre o rodape escuro e um
     circulo branco cheio pesava demais ao lado do CTA laranja */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--ink);
  box-shadow: var(--sombra-flutuante);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(var(--e-3));
  transition: opacity var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing),
              background-color var(--tr-padrao) var(--easing),
              visibility 0s linear var(--tr-padrao);
}
.ao-topo svg{ width: 20px; height: 20px; display: block; }
.ao-topo.visivel{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing),
              background-color var(--tr-padrao) var(--easing),
              visibility 0s;
}
@media (hover: hover) and (pointer: fine){
  .ao-topo:hover{ background: rgba(255, 255, 255, .9); }
}
.ao-topo:active{ transform: scale(.97); } /* toque do guia: .97 em botões */
html:not(.js) .ao-topo{ display: none; }
/* No celular a seta fica na MESMA linha do CTA flutuante, nao acima dele.
   O CTA tem 48px de altura e a seta 44px, entao 2px de folga alinham os
   dois pelo centro. Eles nao se encostam na horizontal: o CTA e centrado
   e a seta fica na borda direita. */
/* ------------------------------------------------------------
   AVISO DE COOKIES — barra de vidro
   Barra fixa no rodapé, de ponta a ponta, só enquanto não houver
   escolha guardada. Fica acima do CTA flutuante (40) e da seta
   (41), e empurra os dois para cima: a altura dela vai para
   `--cookies-h` pelo script, porque muda com a quebra do texto.

   O material é vidro, a forma é barra. Ela viu a versão em cartão
   flutuante e mandou voltar para a barra inteira (06/09) — então
   nada de raio, de margem lateral nem de sombra em volta: só a
   sombra PARA CIMA, que é o que separa a barra da página.

   Por que o texto aqui é BRANCO PURO e não `--sobre-escuro`: o
   `--vidro-fundo` da casa (72%) foi calibrado para cobrir foto.
   Esta barra aparece no carregamento, sobre o topo BRANCO, e
   depois viaja por cima de foto, preto e laranja. Com texto a
   72% seria preciso 78% de preto para passar — e a essa altura
   não é vidro, é painel fumê. Com texto branco puro o vidro
   desce para 60% e ainda dá, no pior caso (branco puro atrás,
   sem desfoque, na faixa de brilho mais forte), 4,90:1. Na
   altura da linha de texto, 5,49:1. Transparência é o ponto do
   material — quem paga a conta do contraste é o texto.

   Sem filete. O relevo vem do brilho de cima — preenchimento em
   gradiente, não linha. É a decisão dela de 06/09 sobre os
   blocos de vidro, e vale aqui também.

   Sobre o laranja o rótulo é PRETO. Branco sobre laranja dá
   2,99:1 e é proibido em interface — por isso "Aceitar" usa a
   variante de botão da casa, não o branco do desenho de origem.
   ------------------------------------------------------------ */
.cookies{
  --cookies-vidro: rgba(0,0,0,.6);
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0;
  padding-block: var(--e-4);
  padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  /* o brilho de cima é PREENCHIMENTO em gradiente, não filete */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.07) 0%,
      rgba(255,255,255,.02) 38%,
      rgba(255,255,255,0)   72%),
    var(--cookies-vidro);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
          backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden;
  transform: translateY(100%);
  transition: opacity var(--tr-entrada) var(--easing),
              transform var(--tr-entrada) var(--easing),
              visibility 0s linear var(--tr-entrada);
}
.cookies.visivel{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--tr-entrada) var(--easing),
              transform var(--tr-entrada) var(--easing),
              visibility 0s;
}
/* O conteúdo não vai de ponta a ponta do container: fica num bloco
   mais estreito e centrado, como no aviso das outras páginas do
   9barra7 que ela mandou de referência. A barra é que é inteira. */
.cookies__faixa{
  max-width: 880px;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--e-4);
}
.cookies__texto{ color: var(--inverso-titulo); max-width: 52ch; }
.cookies__texto a{ color: var(--inverso-titulo); text-underline-offset: 3px; }
.cookies__acoes{ display: flex; gap: var(--e-3); flex-wrap: wrap; }
.cookies .btn{ min-width: 128px; }
/* o `.btn--linha` da casa é feito para fundo claro: sobre a barra ele
   inverte. A borda a 62% dá 3,21:1 contra o vidro no pior caso (branco
   puro atrás) — é o piso da 1.4.11 para contorno de controle. */
.cookies .btn--linha{
  background: transparent;
  color: var(--inverso-titulo);
  border: 1px solid rgba(255,255,255,.62);
}
@media (hover: hover) and (pointer: fine){
  .cookies .btn--linha:hover{ border-color: var(--inverso-titulo); }
}
@media (min-width: 768px){
  .cookies__faixa{
    flex-direction: row; align-items: center;
    justify-content: space-between; gap: var(--e-6);
  }
  .cookies__acoes{ flex-wrap: nowrap; }
}
html:not(.js) .cookies{ display: none; }

.cta-flutuante.visivel ~ .ao-topo{
  bottom: calc(var(--e-5) + 2px + max(var(--cookies-h, 0px), env(safe-area-inset-bottom, 0px)));
}

/* --- WhatsApp ao lado da seta (William, 16/10, igual ao IA Studio): verde do WhatsApp,
   aparece e some com a seta. Abaixo de 600 px fica em cima dela, para não encostar no CTA do centro. --- */
.whats-flutuante{
  position: fixed; z-index: 41;
  right: calc(var(--e-5) + 44px + var(--e-2) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--e-5) + max(var(--cookies-h, 0px), env(safe-area-inset-bottom, 0px)));
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: #25D366; color: #fff;
  box-shadow: var(--sombra-flutuante);
  opacity: 0; visibility: hidden; transform: translateY(var(--e-3));
  transition: opacity var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing),
              background-color var(--tr-padrao) var(--easing),
              visibility 0s linear var(--tr-padrao);
}
.whats-flutuante svg{ width: 20px; height: 20px; display: block; }
.whats-flutuante.visivel{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--tr-padrao) var(--easing),
              transform var(--tr-padrao) var(--easing),
              background-color var(--tr-padrao) var(--easing),
              visibility 0s;
}
@media (hover: hover) and (pointer: fine){ .whats-flutuante:hover{ background: #1ebe5d; } }
.whats-flutuante:active{ transform: scale(.97); }
html:not(.js) .whats-flutuante{ display: none; }
.cta-flutuante.visivel ~ .whats-flutuante{ bottom: calc(var(--e-5) + 2px + max(var(--cookies-h, 0px), env(safe-area-inset-bottom, 0px))); }
@media (max-width: 599px){
  .whats-flutuante, .cta-flutuante.visivel ~ .whats-flutuante{
    right: calc(var(--e-5) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--e-5) + 2px + 44px + var(--e-2) + max(var(--cookies-h, 0px), env(safe-area-inset-bottom, 0px)));
  }
}

/* ------------------------------------------------------------
   1. TOPO
   ------------------------------------------------------------ */
.topo{ background: var(--paper); }
.topo__conteudo{ gap: var(--e-5); align-items: flex-start; }
/* sobretítulo em cima do título de cada seção, como no IA Studio:
   caixa alta, 11 px, cinza de apoio, 12 px acima do título */
.sobretitulo{
  margin: 0 0 var(--e-3);
  font-size: 11px; font-weight: 400; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink2);
}

/* logo em cima do título, como no IA Studio: 20 px de altura no celular,
   26 px no computador; o respiro vertical vira alvo de toque */
.topo__marca{ display: inline-flex; padding-block: var(--e-3); margin-block: calc(var(--e-3) * -1) calc(var(--e-2) - var(--e-3)); }
.topo__marca img{ display: block; height: 20px; width: auto; }
@media (min-width: 1024px){ .topo__marca img{ height: 26px; } }
.topo__titulo{ max-width: var(--medida-titulo); }
@media (max-width: 767px){ .topo__titulo{ font-size: 36px; } } /* = IA Studio no celular */
.topo__sub{ max-width: var(--medida-larga); }
.topo__acao{ gap: var(--e-3); align-items: flex-start; margin-top: var(--e-2); }
.topo__figura{ margin: 0; margin-top: var(--e-3); width: 100%; }

/* comparador print × render: a alça é um input range, então o
   componente já nasce com teclado e leitor de tela funcionando */
.comparador{
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--wash2);
  --pos: 30%;
}
.comparador__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.comparador__frente{
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.comparador__linha{
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: var(--filete-acento); background: var(--paper);
  transform: translateX(-50%); pointer-events: none;
}
.comparador__alca{
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0; padding: 0;
  background: transparent; border: 0;
  -webkit-appearance: none; appearance: none;
  cursor: ew-resize;
}
.comparador__alca::-webkit-slider-runnable-track{ background: transparent; }
.comparador__alca::-moz-range-track{ background: transparent; }
/* o thumb some e vira alvo invisível: o círculo visível é a peça
   abaixo, porque um thumb nativo não aceita conteúdo dentro */
/* `background: transparent` não bastava: no iOS o polegar nativo volta a
   desenhar o próprio botão branco com sombra, e ele aparece ao lado do
   círculo visível — duas bolas. `opacity: 0` apaga sem tirar o alvo de
   toque, que continua sendo este elemento. */
.comparador__alca::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: var(--e-7); height: var(--e-7); border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; opacity: 0;
  cursor: ew-resize;
}
.comparador__alca::-moz-range-thumb{
  width: var(--e-7); height: var(--e-7); border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; opacity: 0;
  cursor: ew-resize;
}
.comparador__botao{
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: var(--e-7); height: var(--e-7); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--sombra-flutuante);
  display: grid; place-items: center;
  pointer-events: none;
}
.comparador__botao svg{ width: var(--e-5); height: var(--e-5); }

@media (min-width: 768px){
  .topo__conteudo{ align-items: center; text-align: center; gap: var(--e-6); }
  .topo__acao{ align-items: center; }
  .topo__figura{ margin-top: var(--e-5); }
  .topo__figura .marcacao{ aspect-ratio: 1180 / 400; }
}


/* ------------------------------------------------------------
   2. O PROBLEMA
   Texto de um lado, grade de tentativas frustradas do outro.
   Abaixo de 1024px o texto vem inteiro e a grade fecha o bloco.
   ------------------------------------------------------------ */
.problema__grade{ display: grid; gap: var(--e-7); align-items: start; }
.problema__texto{ gap: var(--e-5); }
/* o único h2 que quebra em quatro linhas. Nessa largura o `balance` herdado
   monta uma escadinha (217·333·387·272px); `pretty` fecha três linhas cheias
   e uma curta no fim, que é o rag que se espera de um título. */
.problema__texto h2{ text-wrap: pretty; }

/* a linha que escala a dor fica sozinha, com respiro em volta */

.problema__tentativas{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.tentativa{ margin: 0; padding: var(--e-2); container-type: inline-size; }
.tentativa__img{
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm);
}
/* a etiqueta fica sempre em uma linha: quando ela quebrava em duas, o card
   perdia altura e a imagem saía menor que a dos vizinhos. Sem recuo lateral
   e com corpo que acompanha a largura disponível, a mais longa cabe desde
   1024px, onde o card é mais estreito (126px úteis) */
.tentativa__etiqueta{
  padding: var(--e-3) 0 var(--e-1);
  white-space: nowrap; overflow: hidden;
  /* o corpo acompanha a largura do próprio card, não a da janela: em 1024px
     o card é o mais estreito da página e a etiqueta mais longa ainda cabe */
  font-size: clamp(10px, 7cqw, 12.5px);
}

@media (min-width: 768px){
  .problema__tentativas{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
}
@media (min-width: 1024px){
  .problema__grade{ grid-template-columns: 42fr 58fr; gap: var(--e-8); align-items: stretch; }
  /* a grade acompanha a altura da coluna de texto: as duas linhas
     dividem a altura disponível e a foto preenche o que sobra */
  .problema__tentativas{ height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  /* o <li> é o item da grade e estica; o <figure> precisa ser mandado
     a acompanhar, senão cada cartão volta a ter a altura do conteúdo */
  .problema__tentativas > li{ display: flex; min-height: 0; min-width: 0; }
  .tentativa{ display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
  .tentativa__img{ flex: 1; min-height: 0; aspect-ratio: auto; }
}

/* ------------------------------------------------------------
   3. O QUE É O PROMPTHUB
   Cabeçalho partido em desktop, captura centralizada, e a tese
   do produto fechando com respiro maior — sem virar caixa.
   ------------------------------------------------------------ */
.oque{ background: var(--paper); }
.oque__grade{ display: grid; gap: var(--e-6); align-items: center; }
.oque__texto{ gap: var(--e-5); }

.oque__captura{ margin: 0; }

/* A captura é o campo do ChatGPT com o pedido se escrevendo dentro.
   As medidas abaixo são percentuais da própria imagem, medidas nela:
   o campo branco vai de 10% a 88% da largura e de 43,6% a 57,1% da
   altura, e a barra de ícones (+, Alta, microfone) começa em 53,1%.
   O texto ocupa a faixa livre entre o topo do campo e essa barra,
   alinhado com o "+". Trocando a imagem, remedir estas quatro. */
.captura{
  position: relative;
  max-width: var(--captura-max); margin-inline: auto;
  container-type: inline-size;
}
.captura__img{ display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.captura__digitando{
  position: absolute;
  left: 12.5%; right: 14.5%;
  top: 43.6%; height: 9.5%;
  margin: 0;
  display: flex; align-items: center;
  color: var(--ink);
  /* piso de 8px, nao 9: abaixo de ~348px de tela a fonte parava de
     encolher enquanto o campo continuava estreitando, e a frase mais
     longa passava para 3 linhas e vazava do campo desenhado na foto.
     Este texto e decorativo (aria-hidden) e a versao legivel esta no
     alt da imagem, entao 8px aqui nao custa leitura a ninguem. */
  font-size: clamp(8px, 3cqw, 13.5px);
  line-height: 1.45; letter-spacing: .005em;
}
/* duas linhas sempre reservadas: sem isso o bloco sobe e desce a cada
   vez que a frase passa de uma linha para duas no meio da digitação */
.captura__linhas{ display: block; width: 100%; min-height: 2.9em; }
/* pre-wrap: a quebra vem escrita no texto (
), nao do navegador.
   Deixada a cargo dele, a linha 1 terminava em "o piso, a" e em
   "tecnica do" — artigo e preposicao orfaos, que entregam que o
   texto foi quebrado por maquina. E em telas de 320px a primeira
   frase estourava para 3 linhas e vazava do campo. */
.captura__texto{ white-space: pre-wrap; }
.captura__cursor{
  display: inline-block; width: .09em; height: 1.05em;
  margin-left: .1em; vertical-align: text-bottom;
  background: var(--laranja);
  animation: captura-piscar 1.1s steps(1, end) infinite;
}
@keyframes captura-piscar{ 50%{ opacity: 0; } }

@media (min-width: 1024px){
  .oque__grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
  .oque__captura{ order: -1; }
  .captura{ max-width: var(--captura-larga); margin-inline: 0 auto; }
}

/* ------------------------------------------------------------
   5. QUEM CRIOU
   Igual ao "Quem conduz" do IA Studio e à home do Cora (14/10):
   texto e foto lado a lado a partir de 900px, e embaixo do texto
   os dois números em cartões (alunos e anos).
   ------------------------------------------------------------ */
.autora{ background: var(--paper); --salto-bloco: var(--e-6); }
@media (min-width: 768px){ .autora{ --salto-bloco: var(--e-7); } }
.autora__grade{ display: grid; gap: var(--salto-bloco); align-items: center; }
@media (min-width: 900px){
  .autora__grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
}
.autora__texto{ gap: var(--e-4); }
.titulo-linhas span{ display: block; }
.autora__foto{
  margin: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--wash2);
}
.autora__foto img{ display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.autora__numeros{ display: flex; flex-wrap: wrap; gap: var(--e-4); }
.autora__numero{
  align-self: flex-start; gap: var(--e-2); margin-top: var(--e-3);
  padding: var(--e-5) var(--e-6); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--paper);
}
@media (max-width: 599px){ .autora__numeros > .autora__numero{ flex: 1 1 0; min-width: 0; padding: var(--e-5); } }

/* as duas camadas dividem a mesma célula: a de baixo é um fantasma com
   o valor final, que fixa a largura enquanto os algarismos giram */
.autora__valor{ display: grid; margin: 0; color: var(--ink); }
.autora__valor > span{ grid-area: 1 / 1; }
.autora__fantasma{ visibility: hidden; }
/* rolos de algarismos, iguais aos do IA Studio e da home do Cora */
.autora__valor .rolos{ display: inline-flex; height: 1.2em; margin-block: -0.125em; line-height: 1.2em; mask-image: linear-gradient(transparent 0, #000 14%, #000 86%, transparent); }
.autora__valor .rolo{ display: block; height: 1.2em; text-align: center; overflow: hidden; transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1); }
.autora__valor .rolo__fita{ display: block; transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.autora__valor .rolo__fita > span{ display: block; height: 1.2em; }

/* ------------------------------------------------------------
   4. OS SEIS PROMPTADORES
   Grade de duas colunas em desktop. Cada cartão é só nome e
   descrição: o que o promptador faz se conta em texto.
   ------------------------------------------------------------ */
.promptadores__lista{
  display: grid; gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: var(--e-6) 0 0; padding: 0;
}
.promptador{ display: flex; flex-direction: column; gap: var(--e-4); }
/* ícone do guia 9barra7-ui (traço 1.75, 24 px) num quadro de 44 px,
   como o .link__icone do guia, no laranja do PromptHub */
.promptador__icone{
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--vidro-claro); color: var(--laranja);
}
.promptador__icone svg{ width: 24px; height: 24px; }

@media (min-width: 768px){
  .promptadores__lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); }
}
@media (min-width: 1024px){
  .promptadores__lista{ margin-top: var(--e-7); }
}

/* ------------------------------------------------------------
   FAIXA DE PADRONAGEM
   Peça decorativa, sem texto. Separa dois blocos de leitura.
   O diâmetro vem de --faixa-d e é igual à altura do campo.
   ------------------------------------------------------------ */
.faixa{ --d: var(--faixa-d); }

/* ------------------------------------------------------------
   6. PROVA
   A imagem manda e o texto legenda. 16:9 dentro da área segura,
   com a legenda em vidro no canto inferior esquerdo, por dentro.
   Em mobile a legenda desce para baixo da imagem, na mesma
   largura, porque sobreposta ela roubaria metade da cena.
   ------------------------------------------------------------ */
.prova__lista{
  display: grid; gap: var(--e-7);
  list-style: none; margin: var(--e-6) 0 0; padding: 0;
}
.prova__item{ margin: 0; }
.prova__quadro{ position: relative; }
.prova__img{
  width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg);
}
/* o comparador dentro da prova segue a mesma moldura das imagens */
.prova__comparador{ aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
/* Só nesta seção o vidro é bem mais translúcido que no resto da página:
   fundo a 41% contra os 72% do token, desfoque de 8px contra 20px e todo
   o texto em branco puro, inclusive o apoio, que no resto da página é
   branco a 72%.

   O par 41% / 8px foi medido, não estimado, e os dois números andam
   juntos: o desfoque não muda o brilho médio atrás da caixa, só apaga o
   detalhe fino que aparece entre as letras. Com 34px de desfoque dava
   para descer o fundo até 38%; com 8px, o mínimo sobe para 41%. Foi o
   desfoque mais baixo que se pagou com só 3 pontos de preenchimento —
   abaixo de 8px o custo passa a ser maior.

   O piso é 4,5:1 nas seis imagens da seção. A mais apertada é a do
   terraço com a represa, que tem céu claro atrás da caixa: 4,51:1.

   Dois avisos para quem mexer aqui depois:
   1. Estes valores dependem das imagens. Ao contrário dos 72% do token,
      que aguentam até uma foto branca, 41% só se sustenta porque nenhuma
      das seis é clara demais atrás da legenda. Trocou a imagem, remede.
   2. A sombra do texto não é decoração: com pouco preenchimento e pouco
      desfoque, é ela que segura a leitura sobre detalhe fino. */
/* Crédito de quem fez o projeto, no canto oposto ao da legenda. Mesmo
   vidro dela, em corpo menor: é assinatura, não conteúdo. O fundo é 2
   pontos mais cheio que o da legenda (43% contra 41%) porque este canto
   é mais claro nas fotos — na do terraço com a represa, o deck de concreto
   fica logo atrás. A 41% ali dava 4,37:1 e reprovava; a 43% dá 4,63:1. */
/* o crédito se prende à imagem, não ao quadro inteiro: abaixo de 768px a
   legenda desce para fora da foto e o quadro fica mais alto que ela — sem
   esta caixa, o crédito iria parar em cima da legenda. */
.prova__foto{ position: relative; }
.prova__credito{
  position: absolute;
  pointer-events: none;
  right: var(--e-5); bottom: var(--e-5);
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.43);
  border: 0;
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  color: var(--paper);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  font-size: 12px; line-height: 1.2; letter-spacing: .005em;
  white-space: nowrap;
}
@media (min-width: 1024px){
  .prova__credito{ right: var(--e-6); bottom: var(--e-6); }
}

.prova__legenda{
  gap: var(--e-1);
  margin-top: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.41);
  border: 0;
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  color: var(--paper);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.prova__legenda .apoio{ color: var(--paper); }

@media (min-width: 768px){
  .prova__lista{ gap: var(--e-8); margin-top: var(--e-7); }
  .prova__legenda{
    position: absolute;
    left: var(--e-5); right: auto; bottom: var(--e-5);
    margin-top: 0;
    /* largura fixa, não máxima: as cinco caixas têm o mesmo tamanho
       independentemente do tamanho do texto. O min() é só para a caixa
       nunca encostar na borda direita da imagem em 768px, onde a moldura
       é a mais estreita em que a legenda ainda fica por dentro. */
    /* largura fixa, não máxima: as caixas têm todas o mesmo tamanho,
       independentemente do tamanho do texto. Os 170px descontados são a
       reserva do crédito no canto direito — o @ mais longo da página mede
       153px e o resto é a folga entre os dois. A conta só morde entre
       768 e 1023px, onde a moldura é estreita; de 1024 para cima a
       medida de 52ch é sempre a menor. */
    width: min(var(--medida-legenda), calc(100% - var(--e-5) * 2 - 170px));
  }
  /* a altura também: o apoio reserva sempre duas linhas, mesmo quando o
     texto ocupa uma só. Sem isso a caixa de "Do print ao render" e a de
     "Outro clima, mesma cena" ficam 23px mais baixas que as outras três.
     O fallback em em vale o mesmo que 2lh enquanto a entrelinha for 1,55.
     O grid centra o texto dentro da altura reservada: quando ele ocupa uma
     linha só, a folga se divide em cima e embaixo, em vez de virar um
     buraco no pé da caixa. */
  .prova__legenda .apoio{ min-height: 3.1em; display: grid; align-content: center; }
}
@supports (height: 1lh){
  @media (min-width: 768px){
    .prova__legenda .apoio{ min-height: 2lh; }
  }
}
@media (min-width: 1024px){
  .prova__lista{ gap: var(--e-9); }
  .prova__legenda{ left: var(--e-6); bottom: var(--e-6); }
}

/* ------------------------------------------------------------
   7. O QUE VOCÊ PRECISA TER
   Ícone Phosphor acima do nome. Marca própria só onde existe
   ativo sob licença aberta — ChatGPT e Magnific não têm, então
   o set inteiro fica neutro para não virar uma metade só.
   ------------------------------------------------------------ */
.requisitos{ background: var(--paper); }
.requisitos__lista{
  display: grid; gap: var(--e-5);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: var(--e-6) 0 0; padding: 0;
}
.requisito{ display: flex; gap: var(--e-4); align-items: flex-start; }
.requisito__icone{
  flex: none;
  width: var(--logo-ferramenta); height: var(--logo-ferramenta);
  color: var(--ink);
}
.requisito__texto{ gap: var(--e-2); }


/* a linha que subtrai fecha a seção em bloco invertido. A padronagem
   foi testada aqui e reprovada: com o diâmetro preso à altura da
   caixa, as formas ficam pequenas e o texto atravessa uma troca de
   cor a cada duas palavras. */
.requisitos__fecho{ margin-top: var(--e-7); }
.caixa-destaque{
  background: var(--preto);
  color: var(--paper);          /* 21:1 */
  font-weight: 600;             /* o peso é do bloco inteiro, não só do rótulo */
  border-radius: var(--r-lg);
  padding: var(--e-6) var(--e-5);
  text-align: center;
}

@media (min-width: 768px){
  .requisitos__lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); }
  .requisito{ flex-direction: column; gap: var(--e-3); }
  .caixa-destaque{ padding: var(--e-7) var(--e-6); }
}
@media (min-width: 1024px){
  .requisitos__lista{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--e-7); }
  .requisitos__fecho{ margin-top: var(--e-6); }
  .caixa-destaque{ padding: var(--e-8) var(--e-7); }
}

/* ------------------------------------------------------------
   8. MATERIAL DE CONSULTA
   Cópia do "Outros usos no seu projeto" (.usos) do IA Studio, com
   os mesmos valores: fundo branco, cabeçalho em .cab--split, linhas
   com filete, ativo em --ink e os outros em --ink2, nome que se
   preenche em 5 s e passa para o próximo. A diferença é a capa, que
   mantém a proporção do pôster (600 × 1051) e não é recortada.
   ------------------------------------------------------------ */
.aprender{ background: var(--paper); --grade-gap: 20px; --cab-y: var(--e-6); --salto-bloco: var(--e-6); }
/* fundo de seção inteiro, de ponta a ponta, como os outros fundos da página
   (14/10, William: sem cantos arredondados e sem a margem nas laterais).
   Vale para o cinza do Material de consulta e o preto da oferta. */
.vitrine__palco{ padding-inline: 0; }
.vitrine{ padding-block: var(--secao-y); }
.vitrine--cinza{ background: var(--wash2); }
#como-aprender, #depoimentos{ padding-top: 0; } /* branco depois de branco, como no IA Studio */
@media (min-width: 768px){ .aprender{ --grade-gap: var(--e-5); --cab-y: var(--e-7); --salto-bloco: var(--e-7); } }
@media (min-width: 1024px){ .aprender{ --grade-gap: var(--e-6); } }

.aprender__cab{ display: grid; gap: var(--e-4); margin-bottom: var(--cab-y); }
.aprender__cab > .sobretitulo{ margin-bottom: calc(var(--e-3) - var(--e-4)); }
@media (min-width: 768px){
  .aprender__cab{
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start; justify-content: space-between;
    gap: var(--e-3) var(--grade-gap);
  }
  .aprender__cab > .sobretitulo{ grid-column: 1 / -1; margin-bottom: 0; }
}
@media (min-width: 1024px){
  .aprender__cab{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aprender__cab .h2{ grid-column: 1 / 3; }
}

.modulos-grade{ display: grid; column-gap: var(--grade-gap); }
.modulos{ list-style: none; margin: 0; padding: 0; display: grid; }
/* no bloco cinza o --line some; o --line2 é o tom seguinte do guia */
.modulos li{ display: flex; border-top: 1px solid var(--line2); }
.modulos li:last-child{ border-bottom: 1px solid var(--line2); }
.modulo{
  flex: 1; display: grid; gap: var(--e-2); align-content: center;
  padding: var(--e-4) 0; border: 0; background: none;
  font: inherit; text-align: left; color: var(--ink2); cursor: pointer;
  transition: color var(--tr-rapida) var(--easing);
}
.modulo__n{ font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.modulo__nome{ color: inherit; }
.modulo__texto{ color: var(--ink2); max-width: 46ch; }
.modulo[aria-pressed="true"]{ color: var(--ink); }
@media (hover: hover) and (pointer: fine){ .modulo:hover{ color: var(--ink); } }
.modulos[data-auto] .modulo[aria-pressed="true"] .modulo__nome{
  color: transparent;
  background: linear-gradient(90deg, var(--ink) 50%, var(--ink2) 50%) 100% 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: modulo-preenche 5s linear forwards;
}
.modulos[data-auto]:not([data-visivel]) .modulo[aria-pressed="true"] .modulo__nome{ animation-play-state: paused; }
.modulos[data-segura] .modulo[aria-pressed="true"] .modulo__nome{ animation: none; background: none; color: var(--ink); }
@keyframes modulo-preenche{ to{ background-position: 0 0; } }

.modulos__capas{ position: relative; width: min(72%, 300px); aspect-ratio: 600 / 1051; margin-top: var(--salto-bloco); }
.modulos__capa{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line); /* a capa tem fundo branco: o filete segura a borda sobre a página */
  opacity: 0; transition: opacity var(--tr-padrao) var(--easing);
}
.modulos__capa.ativo{ opacity: 1; }
@media (min-width: 768px){
  .modulos-grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulos{ grid-template-rows: repeat(3, 1fr); }
  .modulos__capas{ width: 100%; margin-top: 0; }
}
@media (min-width: 1024px){
  .modulos-grade{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modulos{ grid-column: 1 / 3; }
  .modulos__capas{ grid-column: 3; }
}
/* o bloco cabe na tela (14/10, William): a partir de 768 px a altura do
   bloco é a da janela, até 860 px. O cabeçalho fica com a altura dele e
   a grade ocupa o resto; a capa toma a altura da grade e a largura sai
   da proporção do pôster, alinhada ao início da coluna do apoio. */
@media (min-width: 768px){
  .aprender .vitrine{ height: min(100svh, 860px); padding-block: var(--e-8); }
  .aprender .vitrine > .wrap{ height: 100%; display: flex; flex-direction: column; }
  .aprender__cab{ flex: none; }
  .modulos-grade{ flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .modulos{ grid-row: 1; min-height: 0; }
  .modulos__capas{ grid-row: 1; height: 100%; width: auto; max-width: 100%; justify-self: start; }
}

/* ------------------------------------------------------------
   9. DEPOIMENTOS
   Em mobile é rolagem nativa, que tem inércia e o dedo já espera.
   A partir de 900px vira carrossel infinito com movimento próprio:
   para no hover e no foco, e pode ser arrastado com o mouse.
   ------------------------------------------------------------ */
.depoimentos{ background: var(--paper); }
.depoimentos__palco{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin-block: var(--e-6) 0;
  padding-block: 0 var(--e-3);
}
.depoimentos__trilho{
  display: flex; gap: var(--e-4);
  list-style: none; margin: 0; padding: 0;
}
.depoimento{
  flex: 0 0 auto;
  width: var(--dep-larg);
  scroll-snap-align: start;
}
.depoimento .marcacao{ aspect-ratio: 5 / 7; }

/* filete claro para o print não perder a borda sobre --paper */
.depoimento img{
  width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.depoimentos__palco:focus-visible{ outline-offset: calc(var(--e-1) * -1); }

/* Antes de a seção chegar perto, o palco fica sem rolagem própria.
   Isso não é estética: `loading="lazy"` não segura imagem que está
   dentro de um contêiner com rolagem, porque o navegador mede a
   distância pela janelinha do contêiner, não pela da página — e os
   cinco prints, meio mega, viajavam no primeiro carregamento de uma
   seção que está a 11 mil pixels de distância. `clip` e não `hidden`:
   `hidden` continua sendo contêiner de rolagem e o problema fica. */
.depoimentos__palco[data-laco="espera"]{ overflow: clip; }

/* laço ligado: o JS assume a rolagem e o palco vira superfície de
   arraste. touch-action: pan-y devolve a rolagem vertical da página
   para o dedo, que senão ficaria presa no carrossel. */
.depoimentos__palco[data-laco="ativo"]{
  overflow: hidden;
  scroll-snap-type: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.depoimentos__palco[data-laco="ativo"].arrastando{ cursor: grabbing; }
.depoimentos__palco[data-laco="ativo"] .depoimentos__trilho{ will-change: transform; }

/* os cards entram e saem pela borda da tela, não pela do container */
.depoimentos__palco{
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}
@media (min-width: 1024px){
  .depoimentos__palco{ margin-top: var(--e-7); }
  .depoimentos__trilho{ gap: var(--e-5); }
}

/* ------------------------------------------------------------
   10. A OFERTA
   Mesma estrutura da oferta do IA Studio (14/10, William): painel
   preto de cantos arredondados na seção branca; cabeçalho partido;
   um cartão com a compra à esquerda e o que tira o risco à direita;
   embaixo, o upgrade para o IA Studio (no lugar dos bônus) e a
   comparação com o IA Studio (no lugar do comparativo com cursos).
   ------------------------------------------------------------ */
#oferta{ padding-top: 0; padding-bottom: 0; }
.oferta{ --grade-gap: 20px; --cab-y: var(--e-6); }
@media (min-width: 768px){ .oferta{ --grade-gap: var(--e-5); --cab-y: var(--e-7); } }
@media (min-width: 1024px){ .oferta{ --grade-gap: var(--e-6); } }
.oferta :focus-visible{ outline-color: var(--inverso-titulo); }

/* cabeçalho partido: sobretítulo em cima, título à esquerda, apoio à direita */
.oferta__cab{ display: grid; gap: var(--e-4); margin-bottom: var(--cab-y); }
.oferta__cab > .sobretitulo{ margin-bottom: calc(var(--e-3) - var(--e-4)); }
.oferta__cab .apoio{ text-wrap: balance; } /* 16/10: linhas equilibradas no apoio curto, em todas as telas */
@media (min-width: 768px){
  .oferta__cab{
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start; justify-content: space-between;
    gap: var(--e-3) var(--grade-gap);
  }
  .oferta__cab > .sobretitulo{ grid-column: 1 / -1; margin-bottom: 0; }
  .oferta__cab .apoio{ align-self: center; }
}
@media (min-width: 1024px){ .oferta__cab{ grid-template-columns: minmax(0, 1fr) minmax(0, 500px); } }

/* o cartão: a decisão à esquerda, as garantias à direita, a linha no meio */
.oferta__cartao{
  --preco: clamp(46px, 5vw, 72px);
  display: grid; gap: var(--e-6); padding: var(--e-6);
  border: 1px solid var(--inverso-linha); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper) 8%, var(--preto));
}
.oferta__compra{ display: grid; justify-items: center; align-content: center; text-align: center; }
/* preço (William): em cima o total se parcelar em 18x, riscado; no meio a
   parcela em 12x; embaixo o valor à vista. Valores do checkout da Greenn
   em 14/10 (tarifa de 3,39% a.m. a partir de 2x). */
.oferta__de{ font-size: max(15px, calc(var(--preco) * .23)); line-height: 1.2; color: rgba(255,255,255,.5); }
.oferta__de s{ position: relative; text-decoration: none; }
.oferta__de s::after{ content: ""; position: absolute; left: -.3em; right: -.3em; top: 55%; height: 1.5px; background: currentColor; }
.oferta__valor{ display: flex; align-items: flex-start; justify-content: center; gap: calc(var(--preco) * .18); margin: calc(var(--preco) * .3) 0 calc(var(--preco) * .36); }
.oferta__vezes{ display: grid; justify-items: end; gap: 4px; padding-top: calc(var(--preco) * .2); font-size: max(15px, calc(var(--preco) * .23)); font-weight: 400; line-height: 1; color: var(--inverso-titulo); }
.oferta__vezes span{ white-space: nowrap; }
.oferta__valor .numero-preco{ font-size: var(--preco); letter-spacing: 0; white-space: nowrap; color: var(--inverso-titulo); }
.oferta__avista{ font-size: max(16px, calc(var(--preco) * .25)); line-height: 1.3; color: rgba(255,255,255,.55); text-wrap: balance; }
.oferta__acoes{ display: grid; width: max-content; justify-items: stretch; gap: var(--e-3); margin-top: var(--e-6); }
@media (max-width: 767px){ .oferta__acoes{ width: 100%; } }
.oferta__seguranca{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); align-content: center; }
.oferta__seguranca li{ display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.oferta__seg-ic{ width: 24px; height: 24px; color: var(--laranja); }
.oferta__seguranca p{ display: grid; gap: var(--e-1); }
.oferta__seguranca strong{ font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--inverso-titulo); }
.oferta__seguranca span{ font-size: 15px; line-height: 1.45; color: var(--inverso-apoio); }
@media (max-width: 899px){ .oferta__seguranca{ padding-top: var(--e-2); } }
@media (min-width: 900px){
  .oferta__cartao{ position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: var(--e-7) 0; align-items: center; }
  .oferta__cartao > *{ padding-inline: var(--e-7); }
  .oferta__cartao::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--inverso-linha); pointer-events: none; }
  .oferta__seguranca{ justify-self: center; width: min(100%, calc(max(var(--preco) * 5.3, 288px) + 2 * var(--e-7))); }
  .oferta__seguranca span{ text-wrap: balance; }
}

/* upgrade e comparação no bloco de vidro dos bônus do IA Studio */
.oferta__bloco{
  margin-top: var(--e-3); padding: var(--e-6); border-radius: var(--r-lg);
  background: var(--vidro-claro); border: 1px solid var(--inverso-linha);
}
.oferta__bloco > .h3{ color: var(--inverso-titulo); }
/* "Comece pelo PromptHub" (16/10, William: "não gosto desse + laranja… deixa em 2 blocos separados"):
   PromptHub e IA Studio em dois cartões separados, no material dos cartões do bloco, sem filete e sem "+". */
.upgrade{ list-style: none; margin: var(--e-7) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.upgrade__parte{ position: relative; display: grid; gap: var(--e-1); align-content: start; padding: calc(var(--e-5) + 1px); border-radius: var(--r-lg); background: rgba(255,255,255,.05); }
/* 16/10 (William): PromptHub e IA Studio empilhados à esquerda, em dois cartões;
   os 30 dias à direita, como um mini-anúncio do IA Studio, no lima dele, com o logo e o selo. Lado a lado a partir de 900 px. */
.upgrade-grade{ display: grid; gap: var(--e-3); margin-top: var(--e-7); }
.upgrade-grade .upgrade{ margin: 0; }
@media (min-width: 900px){
  /* 60/40: o anúncio na largura em que título e texto vão de margem a margem (16/10, William: "buracão na direita") */
  .upgrade-grade{ grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .upgrade{ grid-auto-rows: 1fr; }
  .upgrade__parte{ padding: var(--e-6); align-content: center; }
}
/* Diagramação (16/10, William: "muito desequilibrado"): margem igual nos quatro lados (--pad); o logo e o selo
   no mesmo eixo (o centro da bola do selo fica a uma distância --selo do topo, e o logo é centrado nessa linha);
   embaixo, título e texto como um grupo só, com linhas equilibradas. O vão entre os dois grupos é o que sobra da
   altura que os dois cartões da esquerda dão ao anúncio, nunca menos que --pad. */
.upgrade__anuncio{
  --pad: var(--e-6); --selo: 60px; --logo-h: 26px;
  container-type: inline-size; position: relative; overflow: hidden; display: grid; gap: var(--pad); align-content: space-between;
  padding: var(--pad); border-radius: var(--r-lg); background: #ddfe6f; color: var(--ink);
}
/* 16/10 (William: "o espaço acima e abaixo do título"): logo, título e texto distribuídos na altura, com o mesmo espaço acima e abaixo do título */
.upgrade__anuncio-corpo{ display: contents; }
/* selo do IA Studio (16/10, William: no lugar da faixa, "igual ao terceiro bloco do problema" na página do IA Studio):
   meia bola presa na borda de cima e a bola com o símbolo, no azul do IA Studio, alinhada à margem da direita. */
.upgrade__selo{ position: absolute; top: 0; right: var(--pad); width: var(--selo); pointer-events: none; }
.upgrade__selo-meia, .upgrade__selo-o{ display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #316cf6; }
.upgrade__selo-meia{ margin-top: calc(var(--selo) / -2); }
.upgrade__selo-o{ display: grid; place-items: center; }
.upgrade__selo-o img{ display: block; width: 52%; height: auto; }
.upgrade__logo{ display: block; width: auto; height: var(--logo-h); margin-top: calc(var(--selo) - var(--logo-h) / 2 - var(--pad)); }
/* título e texto com o mesmo comprimento, de margem a margem (16/10, William): o corpo do título acompanha a largura
   útil do anúncio (a linha mais longa, "Resgate seu acesso,", mede até 8,7 vezes o corpo), até 40 px, abaixo do h2 da seção. */
.upgrade__anuncio-titulo{ font-size: clamp(24px, calc(100cqi / 9), 40px); /* 100cqi = largura útil (a caixa de conteúdo já desconta a margem) */ font-weight: 500; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.upgrade__anuncio-texto{ font-size: 15px; line-height: 1.45; color: rgba(0,0,0,.72); text-wrap: pretty; }
@media (max-width: 767px){
  .upgrade__anuncio{ --pad: var(--e-5); --selo: 48px; --logo-h: 24px; }
}
.upgrade__nome{ font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--inverso-titulo); }
.upgrade__texto{ font-size: 15px; line-height: 1.45; color: var(--inverso-apoio); text-wrap: pretty; }
@media (max-width: 767px){ .oferta__bloco{ padding: var(--e-4); } .upgrade__parte{ padding: calc(var(--e-4) + 1px); } }

/* PromptHub × IA Studio na tabela do comparativo do IA Studio: rótulo da
   linha à esquerda, PromptHub em branco com a confirmação laranja, IA Studio
   no cinza de apoio (não no apagado do "curso tradicional": aqui o IA Studio
   é o próximo passo, não o concorrente). No celular, o rótulo em cima e as
   duas respostas embaixo. */
.compara__tabela{ position: relative; width: 100%; margin-top: var(--e-7); border-collapse: collapse; table-layout: fixed; text-align: left; }
.compara__tabela th, .compara__tabela td{ padding: var(--e-4) var(--e-4) var(--e-4) 0; vertical-align: top; font-size: 15px; font-weight: 400; line-height: 1.45; text-wrap: pretty; }
.compara__tabela thead td{ width: 20%; }
.compara__tabela thead .compara__nosso{ width: 48%; }
@media (min-width: 768px){ .compara__tabela .compara__nosso{ padding-right: var(--e-8); } }
.compara__tabela thead th{ padding-top: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--inverso-titulo); }
.compara__tabela tbody th{ color: var(--inverso-apoio); }
.compara__tabela tbody td{ color: var(--inverso-apoio); }
.compara__tabela tbody .compara__nosso{ color: var(--inverso-titulo); }
.compara__tabela tbody tr > *{ border-top: 1px solid var(--inverso-linha); }
.compara__item{ display: flex; gap: var(--e-2); }
.compara__ic{ width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--laranja); }
/* dúvidas no WhatsApp: uma linha simples, a última coisa da oferta (William, 16/10, igual ao IA Studio) */
.oferta__duvida{ margin-top: var(--e-5); text-align: center; font-size: 15px; line-height: 1.45; color: var(--inverso-apoio); text-wrap: balance; }
.oferta__duvida a{ color: var(--inverso-titulo); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; transition: text-decoration-color var(--tr-padrao) var(--easing); }
@media (hover: hover) and (pointer: fine){ .oferta__duvida a:hover{ text-decoration-color: currentColor; } }
@media (max-width: 767px){
  .compara__tabela, .compara__tabela thead, .compara__tabela tbody{ display: block; }
  .compara__tabela tr{ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--e-1); }
  .compara__tabela thead tr{ display: flex; gap: var(--e-5); }
  .compara__tabela thead td{ display: none; }
  .compara__tabela thead th{ width: auto; padding: 0 0 var(--e-3); white-space: nowrap; }
  .compara__tabela tbody tr{ border-top: 1px solid var(--inverso-linha); padding-block: var(--e-4); }
  .compara__tabela tbody tr > *{ border-top: 0; padding: 0; }
  .compara__tabela tbody th{ margin-bottom: var(--e-1); font-size: 13px; }
  .compara__tabela tbody td:last-child{ padding-left: calc(18px + var(--e-2)); }
  /* no celular o nome das colunas fica lá no topo: cada resposta do IA Studio
     ganha o rótulo, para quem já rolou saber de qual produto ela é (14/10) */
  .compara__tabela tbody td:last-child::before{
    content: "IA Studio"; display: block; margin-bottom: 2px;
    font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
    color: var(--sobre-escuro-fraco);
  }
}


@media (min-width: 1024px){
  .oferta__cabecalho{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); }
  .oferta__inclusos{ margin-top: var(--e-7); }
  .oferta__studio{ margin-top: var(--e-7); }
  .oferta__studio-grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); }
  /* título, texto e bloco de crédito na mesma largura. Preso à linha do
     título dava 37 caracteres por linha, apertado demais para ler. */
  .oferta__studio-texto{ max-width: var(--medida-studio); }
  .oferta__fecho{ margin-top: var(--e-7); }
}

/* ------------------------------------------------------------
   11. PERGUNTAS
   Acordeão do sistema: aria-expanded no botão e expansão por
   grid-template-rows, que anima altura sem precisar medir nada.
   ------------------------------------------------------------ */
.perguntas{ background: var(--paper); }
/* "frequentes" desce sempre para a segunda linha. O espaço continua no
   texto, então o leitor de tela lê "Perguntas frequentes" numa frase só. */
.perguntas__titulo .h2 span{ display: block; }
.perguntas__grade{ display: grid; gap: var(--e-6); align-items: start; }
.perguntas__lista{ list-style: none; margin: 0; padding: 0; }
.perguntas__lista li{ border-top: 1px solid var(--line); }
.perguntas__lista li:last-child{ border-bottom: 1px solid var(--line); }

.pergunta__botao{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--e-7);
  padding: var(--e-4) 0;
  background: none; border: 0;
  font-family: inherit; color: var(--ink); text-align: left;
  cursor: pointer;
}
.pergunta__sinal{
  flex: none; width: var(--e-5); height: var(--e-5);
  color: var(--ink3);
  transition: transform var(--tr-acordeao) var(--easing),
              color var(--tr-padrao) var(--easing);
}
.perguntas__lista li.aberta .pergunta__sinal{
  transform: rotate(45deg); color: var(--ink);
}
@media (hover: hover) and (pointer: fine){
  .pergunta__botao:hover .pergunta__sinal{ color: var(--ink); }
}

.pergunta__resposta{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--tr-acordeao) var(--easing);
}
.pergunta__resposta > div{ overflow: hidden; }
.perguntas__lista li.aberta .pergunta__resposta{ grid-template-rows: 1fr; }
.pergunta__resposta p{ padding-bottom: var(--e-5); max-width: var(--medida); }

/* sem JS o acordeão nasce aberto: conteúdo nunca fica inacessível */
html:not(.js) .pergunta__resposta{ grid-template-rows: 1fr; }
html:not(.js) .pergunta__sinal{ display: none; }

@media (min-width: 1024px){
  .perguntas__grade{ grid-template-columns: 34fr 66fr; gap: var(--e-8); }
  .perguntas__titulo{
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--e-6));
  }
  .pergunta__botao{ padding: var(--e-5) 0; }
}

/* ------------------------------------------------------------
   12. FECHAMENTO
   A partir de 1024px o bloco inteiro vira peça de marca: a
   padronagem é o campo e o texto passa por cima. O diâmetro
   sai da própria altura do bloco, via aspect-ratio, então a
   regra "diâmetro = altura do campo" vale em qualquer altura.
   Abaixo de 1024px o texto fica sobre --wash e a padronagem
   fecha a página em faixa, porque um bloco estreito e alto
   daria uma forma só, grande demais para ler como padronagem.
   ------------------------------------------------------------ */
.fechamento{ position: relative; }
.fechamento__campo{
  display: none;
  position: absolute; inset: 0;
  background: var(--azul);
  overflow: hidden;
}
.fechamento__campo .padrao__fila{ height: 100%; }
.fechamento__campo .padrao__o{ width: auto; height: 100%; aspect-ratio: 1 / 1; }
.fechamento__campo .padrao__meio{ width: auto; height: 100%; aspect-ratio: 1 / 2; }
.fechamento__campo .padrao__vazio-meio{ width: auto; height: 100%; aspect-ratio: 1 / 2; }

.fechamento__conteudo{ position: relative; gap: var(--e-5); }
.fechamento__titulo{ max-width: var(--medida-fechamento); }
.fechamento__acao{ gap: var(--e-3); align-items: flex-start; margin-top: var(--e-2); }
/* no celular, a linha da garantia termina antes do botão de voltar ao topo
   (44 px, a 24 px da borda): 56 px de folga à direita (14/10) */
@media (max-width: 767px){ .fechamento__acao .apoio{ padding-right: 56px; } }

@media (min-width: 1024px){
  .fechamento__campo{ display: block; }
  .fechamento__faixa{ display: none; }
  /* sobre a padronagem o texto é obrigatoriamente preto, então o
     bloco deixa de ser invertido e passa a usar os tokens de campo */
  .fechamento.inverso{ background: transparent; color: var(--sobre-campo); }
  .fechamento.inverso .apoio{ color: var(--sobre-campo-apoio); }
  /* sobre a padronagem o botão volta a ser preto: laranja sobre as
     formas laranja sumiria. Abaixo de 1024px ele é o mesmo CTA
     laranja do resto da página. */
  .fechamento.inverso .btn{ background: var(--preto); color: var(--paper); }
}

/* ------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------ */
.rodape{
  background: var(--preto);
  color: var(--sobre-escuro);
  padding-block: var(--e-8) var(--e-6);
}
.rodape__grade{ display: grid; gap: var(--e-6); }
/* os dois logotipos do rodapé são arte preta sobre transparente, então
   os dois invertem para aparecer no fundo preto. O do 9barra7 é bem mais
   largo que alto (8,4:1), então na medida do cabeçalho ficava fino demais
   para se ler: aqui ele ganha largura própria. */
.rodape__marca img{ width: 180px; height: auto; filter: invert(1); }
@media (min-width: 900px){ .rodape__marca img{ width: 200px; } }
/* marca d'água: o logotipo do PromptHub grande e quase apagado no preto.
   O arquivo é preto sobre transparente, então inverte para branco e cai
   para 10% — dá cerca de #1a1a1a sobre o fundo, que é o ponto em que a
   forma se lê sem competir com os links acima. */
.rodape__agua{ margin-top: var(--e-8); }
.rodape__agua img{
  display: block; width: 100%; height: auto;
  filter: invert(1); opacity: .1;
}
.rodape__coluna{ gap: var(--e-2); }
.rodape__itens{ list-style: none; margin: 0; padding: 0; }
.rodape__coluna .h4{ color: var(--paper); }
.rodape a{ color: var(--sobre-escuro); text-decoration: none; }
@media (hover: hover) and (pointer: fine){
  .rodape a:hover{ color: var(--paper); text-decoration: underline; }
}
.rodape__link{ min-height: var(--e-7); display: flex; align-items: center; }
.rodape__base{
  margin-top: var(--e-7);
  border-top: 1px solid var(--linha-sobre-escuro);
  padding-top: var(--e-5);
  display: grid; gap: var(--e-3);
}
/* copyright e nota de marcas na mesma linha, com pesos de cor
   diferentes. A nota fecha a página como marca d'água: 46% de branco
   sobre preto dá 4,58:1, o mais fraco que ainda passa em AA. Abaixo
   disso o texto reprova. */
.rodape__final{
  text-align: center;
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--e-2);
}
.rodape__marcas-terceiros{ color: var(--sobre-escuro-fraco); }
/* Acima de 1180px as duas frases ficam na mesma linha, sem quebrar. O
   texto media 1134px contra 1116px de moldura — 18px passando da linha
   divisoria, que e o que se via na ponta direita. Trocar "9barra7" por
   "9BARRA7" foi o que estourou: caixa alta e mais larga. 12,5px devolve
   a linha para dentro com folga de 26px. */
@media (min-width: 1180px){
  .rodape__final{ flex-wrap: nowrap; font-size: 12.5px; }
  .rodape__final span{ white-space: nowrap; }
}
@media (min-width: 1180px){
  .rodape__marcas-terceiros{ white-space: nowrap; }
}

@media (min-width: 768px){
  .rodape__grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); }
}
@media (min-width: 1024px){
  .rodape{ padding-block: var(--e-9) var(--e-7); }
  .rodape__grade{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rodape__base{ gap: var(--e-3); }
}

/* ------------------------------------------------------------
   SUPERFÍCIE INVERTIDA
   Os blocos que eram --wash passam a ser --preto. A troca é feita
   redefinindo --ink2 e --line no escopo, então tudo que descende
   herda o valor invertido. --ink NÃO é redefinido de propósito:
   ele pinta o rótulo do botão laranja, que precisa continuar
   preto (branco sobre laranja dá 2,99:1).
   ------------------------------------------------------------ */
.inverso{
  --ink2: var(--inverso-apoio);
  --line: var(--inverso-linha);
  background: var(--inverso-fundo);
  color: var(--inverso-titulo);
}
/* componentes que fixam --ink e precisam inverter à mão */
.inverso .marcacao{ color: var(--inverso-titulo); }

/* o cartão perde o fundo branco: sobre preto ele viraria o conteúdo */
.inverso .cartao{ background: transparent; }

/* sobre preto o texto engrossa opticamente: um passo de peso a
   menos devolve a mancha que ele tem sobre fundo claro */
.inverso .corpo-g,
.inverso .corpo,
.inverso .corpo-m,
.inverso .corpo-p,
.inverso .legenda{ font-weight: var(--peso-corpo-inverso); }

/* `:not(.btn)` porque `a:hover` tem especificidade maior que
   `.inverso .btn` e deixava o rótulo do CTA branco sobre laranja,
   que dá 2,99:1. O botão mantém o rótulo preto e só escurece o
   fundo, igual ao do cabeçalho. */
.inverso a:not(.btn){ color: var(--inverso-apoio); }
@media (hover: hover) and (pointer: fine){
  .inverso a:not(.btn):hover{ color: var(--inverso-titulo); }
}
.inverso .btn{ color: var(--ink); }

/* ------------------------------------------------------------
   CADASTRO ANTES DO CHECKOUT
   Igual ao do IA Studio (14/10, William): modal do guia no
   computador; no celular, folha que sobe de baixo, com alça.
   ------------------------------------------------------------ */
.cadastro{
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
  overflow: auto; overscroll-behavior: contain;
}
.cadastro:focus{ outline: none; }
.cadastro[open]{ animation: cadastro-entra var(--tr-entrada) var(--easing); }
.cadastro::backdrop{ background: rgba(17,17,17,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: cadastro-fundo var(--tr-entrada) var(--easing); }
.cadastro__form{ display: grid; gap: var(--e-4); padding: var(--e-6); }
.cadastro__cab{ position: relative; display: grid; gap: var(--e-1); margin-bottom: var(--e-1); text-align: center; }
.cadastro__cab h2{ padding-inline: var(--e-7); }
.cadastro__cab .apoio{ text-wrap: pretty; }
.cadastro__fechar{
  position: absolute; top: -10px; right: -10px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink2);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--tr-padrao) var(--easing), color var(--tr-padrao) var(--easing);
}
@media (hover: hover) and (pointer: fine){ .cadastro__fechar:hover{ background: var(--wash); color: var(--ink); } }
.campo{ display: grid; gap: 6px; }
.campo__rotulo{ font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.campo__input{
  width: 100%; height: 48px; padding: 0 var(--e-4);
  border: 1px solid var(--line2); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 16px; /* 16 px: o iPhone não dá zoom ao tocar no campo */
  transition: border-color var(--tr-padrao) var(--easing), box-shadow var(--tr-padrao) var(--easing);
}
.campo__input::placeholder{ color: var(--ink3); }
.campo__input:focus{ outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.12); }
.campo__ajuda{ font-size: 13px; line-height: 1.4; color: var(--alerta); }
.campo__ajuda:empty{ display: none; }
.campo.is-erro .campo__input{ border-color: var(--alerta); }
.campo.is-erro .campo__input:focus{ box-shadow: 0 0 0 3px rgba(196,68,58,.2); }
.cadastro .btn{ margin-top: var(--e-2); }
.cadastro__nota{ text-align: center; text-wrap: balance; font-size: 13px; line-height: 1.45; }
.cadastro__nota svg{ display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
@keyframes cadastro-entra{ from{ opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes cadastro-fundo{ from{ opacity: 0; } }
@keyframes cadastro-sobe{ from{ transform: translateY(100%); } }
@media (max-width: 600px){
  .cadastro{ width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .cadastro[open]{ animation-name: cadastro-sobe; }
  .cadastro__form{ padding: var(--e-6) var(--gutter) calc(var(--e-5) + env(safe-area-inset-bottom)); }
  .cadastro__form::before{ content: ""; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line2); }
}