/* telas.css — telas refeitas no roteiro v0.4: T-oferta enxuta e as confirmações
   (bilhete + linha do tempo). Carregado depois de style.css, que importa
   design/tokens.css. Mesma regra de sempre: NENHUMA cor, fonte, raio ou sombra
   literal — tudo é var(--token) do STYLE-LOCK. Separado de style.css só para
   nenhum arquivo passar do teto de tamanho do projeto. */

/* ---------------- expansível ("ver mais") ----------------
   O gatilho é um <button> nativo. O anel de foco fica POR DENTRO porque os
   cartões cortam o que passa da borda. */

.expansivel-gatilho {
  width: 100%;
  min-height: var(--touch-min);
  background: none;
  color: inherit;
  text-align: left;
}
.expansivel-gatilho:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-offset-sm));
}

/* ---------------- T-oferta: bloco 1, card visual do produto (v0.5) --------
   O slot de imagem é o MESMO .retrato da T0 (style.css): 200px de altura fixa,
   hairline dourada, raio do card, foto full-bleed com scrim quando o arquivo
   chegar. Sem preço aqui. O eyebrow e o nome vêm logo abaixo da imagem, no
   mesmo ritmo da T0 (foto → sobretítulo → título). */

.oferta-produto { display: grid; }
.oferta-produto .eyebrow { margin-top: var(--space-16); }
.oferta-funcao {
  margin-top: var(--space-7);
  font-size: var(--text-support);
  color: var(--text-on-card);
}
/* Foto do produto (três potes, 16:9): enquadramento calibrado no render real.
   Em 390px o card (358x200) tem quase a proporção da foto e o corte é de ~2px;
   na coluna máxima (512x200) o cover corta ~88px na vertical. A 30% a tampa do
   pote central fica inteira e os rótulos acima do scrim; a 20% a tampa encosta
   na borda, a 40% sobra fundo em cima. A base de mármore é a parte que some. */
.retrato--produto .retrato-foto { object-position: 50% 30%; }

/* Estado vazio: o nome centralizado no espaço da imagem, desenhado em CSS —
   decorativo, fora da leitura de tela (o nome de verdade é o título abaixo).
   Quando a foto chegar, ele some e o nome fica só abaixo da imagem (§5.1). */
.retrato--produto:not(.is-preenchido)::before {
  content: 'InibioPRO';
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  letter-spacing: var(--text-h1-ls);
  color: var(--gold-light);
}

/* ---------------- T-oferta: bloco 4, card de decisão (v0.5.3) -------------
   O preço é o DESFECHO da tela, não rodapé (feedback de Samuel, 01/10). Ele
   ganha o card de "momento importante" do painel — o mesmo gradiente de foco,
   hairline dourada, raio e sombra do card do retrato no topo — para a tela
   começar num card (a foto) e terminar noutro (o preço). Nada de cor nova,
   badge ou animação: só tokens que o sistema já usa.
   v0.5.3: o card ganhou cabeçalho (a ponte), as três entregas com ✓, a linha
   de pagamento e o fecho. Divisórias hairline separam recibo, preço e fecho;
   o preço continua sendo o maior elemento. Respiro generoso acima do card. */
.oferta-preco-bloco {
  display: grid;
  gap: var(--space-14);
  margin-top: var(--space-34);
  padding: var(--space-18) var(--space-20);
  border: 1px solid var(--hair-gold);
  border-radius: var(--radius-card);
  background: var(--grad-card-focus);
  box-shadow: var(--shadow-focus);
}
/* Recibo: linhas curtas e discretas. O ✓ usa o token de sucesso, pequeno,
   para marcar sem competir com o preço. */
.oferta-recibo {
  display: grid;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}
.oferta-recibo li {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--text-body);
  color: var(--text-on-card);
}
.recibo-check {
  font-size: var(--text-small);
  color: var(--success);
}
.oferta-preco-linha {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-14);
  border-top: 1px solid var(--hair);
}
.oferta-pagamento {
  font-size: var(--text-support);
  color: var(--text-summary);
}
.oferta-fecho {
  padding-top: var(--space-14);
  border-top: 1px solid var(--hair);
  font-size: var(--text-support);
  font-style: italic;
  color: var(--text-on-card);
}
/* O valor sobe para a maior escala de display do sistema (--text-h1, a do
   título); "o pote" fica como apoio, menor. */
.oferta-preco-valor {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.oferta-preco-sufixo {
  font-size: var(--text-item);
  color: var(--text-on-card);
}

/* ---------------- títulos de bloco ---------------- */

.oferta-bloco-titulo,
.passos-titulo {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  letter-spacing: var(--text-h3-ls);
  color: var(--text);
}
.oferta-bloco-titulo { margin-top: var(--space-18); }

/* ---------------- T-oferta: as 4 linhas ----------------
   Estrutura FIXA em todas as linhas (lição do F-210): ícone à esquerda; nome,
   benefício e, na última linha, etiqueta + "ver mais". Nada troca de lugar
   conforme o tamanho do nome, então o olho desce a coluna sem tropeçar. */

.oferta-itens {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding: 0;
  list-style: none;
}
.item-oferta {
  overflow: hidden;
  border: 1px solid var(--hair-card);
  border-radius: var(--radius-node-mobile);
  background: var(--grad-card-neutral);
  box-shadow: var(--shadow-card);
}
/* O item que responde à dificuldade dela (selo dinâmico). */
.item-oferta.is-destaque { border-color: var(--hair-gold-hover); }

.item-oferta .expansivel-gatilho {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-14);
}
.item-icone {
  display: grid;
  place-items: center;
  width: var(--space-34);
  height: var(--space-34);
  border: 1px solid var(--hair-gold-mark);
  border-radius: var(--radius-mark);
  background: var(--fill-05);
  box-shadow: var(--shadow-emboss);
  color: var(--gold-light);
}
.icone {
  display: block;
  width: var(--space-18);
  height: var(--space-18);
}
.item-texto {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.item-selo {
  font-size: var(--text-micro);
  letter-spacing: var(--ls-status);
  color: var(--gold-light);
}
.item-nome {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  letter-spacing: var(--text-h3-ls);
  line-height: 1.3;
  color: var(--text);
}
.item-beneficio {
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--text-node-sub);
}
.item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-3);
}
.item-vermais {
  font-size: var(--text-small);
  white-space: nowrap;
  color: var(--btn-link-text);
}
/* A seta é desenho, não texto: vira quando o detalhe abre. */
.item-vermais::after {
  content: '▾';
  display: inline-block;
  margin-left: var(--space-5);
  transition: transform var(--motion-fast) var(--easing);
}
.expansivel.is-aberto .item-vermais::after { transform: rotate(180deg); }

/* Detalhe alinhado à coluna do texto, não à do ícone. */
.item-oferta .expansivel-painel {
  padding: 0 var(--space-14) var(--space-14)
           calc(var(--space-14) + var(--space-34) + var(--space-12));
}
.item-detalhe {
  padding-top: var(--space-10);
  border-top: 1px solid var(--hair-soft);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text-list);
}

/* ---------------- T-oferta: blocos 3 e 4 (v0.5) ----------------
   O qualificador fecha os itens; a ponte de valor (o antigo fechamento, sem o
   preço) prepara o olho para o número logo abaixo. */

.oferta-qualificador {
  margin-top: var(--space-14);
  font-size: var(--text-body);
  color: var(--text-summary);
}
/* A ponte é o cabeçalho do card de decisão desde a v0.5.3. */
.oferta-ponte {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  letter-spacing: var(--text-h3-ls);
  color: var(--text);
}

/* Rodapé: uma linha pequena que abre o texto legal completo. */
.oferta-rodape {
  margin-top: var(--space-10);
  border-top: 1px solid var(--hair-faintest);
}
.oferta-rodape .expansivel-gatilho {
  display: block;
  padding: var(--space-6) 0;
  font-size: var(--text-small);
  color: var(--text-footer);
}
.expansivel-seta {
  display: inline-block;
  transition: transform var(--motion-fast) var(--easing);
}
.oferta-rodape.is-aberto .expansivel-seta { transform: rotate(180deg); }
.oferta-rodape .expansivel-painel {
  display: grid;
  gap: var(--space-10);
  padding-bottom: var(--space-8);
}
.oferta-rodape .expansivel-painel p {
  font-size: var(--text-micro);
  line-height: 1.8;
  color: var(--text-footer);
}

#tela-toferta > .acoes { margin-top: var(--space-14); }

/* ---------------- confirmação: o bilhete ----------------
   Cartão com cara de papel (roteiro §7). É o único momento claro da ficha:
   papel creme e tinta escura, ambos tirados de tokens que o painel já tem —
   o creme é o tom de ênfase do texto e a tinta é a do botão primário.
   A assinatura é tipografia: a serifada do painel em itálico. */

.bilhete {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-20) var(--space-18);
  border-radius: var(--radius-chip);
  background: var(--text-emphasis);
  box-shadow: var(--shadow-card);
  color: var(--btn-primary-text);
  transform: rotate(-0.6deg);
}
.bilhete-saudacao {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
}
.bilhete-linha {
  font-size: var(--text-item);
  line-height: var(--body-lh);
}
.bilhete-fecho {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.bilhete-despedida { font-size: var(--text-item); }
.bilhete-assinatura {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
}

/* ---------------- confirmação: o que acontece agora ---------------- */

.passos { margin-top: var(--space-26); }
.passos-lista {
  display: grid;
  gap: var(--space-18);
  margin-top: var(--space-14);
  padding: 0;
  list-style: none;
}
.passo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
}
/* O fio que liga um passo ao seguinte. */
.passo:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--space-34) / 2);
  top: var(--space-34);
  bottom: calc(-1 * var(--space-18));
  width: 1px;
  background: var(--hair-strong);
}
.passo-no {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--space-34);
  height: var(--space-34);
  border: 1px solid var(--hair-gold-mark);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--gold-light);
}
/* O passo que já aconteceu leva a cor de sucesso do sistema e o halo do beacon. */
.passo.is-agora .passo-no {
  color: var(--success);
  box-shadow: var(--halo-beacon);
}
.passo-corpo {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-6);
}
.passo-titulo {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  letter-spacing: var(--text-h3-ls);
  color: var(--text);
}
.passo-texto {
  font-size: var(--text-item);
  line-height: 1.5;
  color: var(--text-list);
}
.passo-link {
  justify-self: start;
  padding-left: 0;
  text-align: left;
}

@media (min-width: 760px) {
  .item-oferta { border-radius: var(--radius-node); }
}

/* Campo-armadilha anti-robô da T-contato (render-contato.js → campoObservacao).
   Fora da vista por POSICIONAMENTO: robô que ignora campo display:none,
   visibility:hidden ou type=hidden ainda o enxerga e preenche. Absoluto, sai do
   grid do .formulario sem mexer no layout; para a esquerda, não cria rolagem
   horizontal. Classe (e não style inline) por causa da CSP do vercel.json. */
.campo-obs {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}