/* Pedidos do dono de 31/10 na landing (equipes/00-diretoria/pedidos-31-10.md; decisão 0058). Carregado por último. */

/* Celular sem "sambar" para os lados (reclamação do dono em 31/10): clip, e não hidden, para a faixa continuar presa */
html, body { overflow-x: clip }
.passos-tour, .metas-grade, .tabela-comparativo { overscroll-behavior-x: contain }

/* Revisão dos banners (31/10, pedido do dono): o cartaz do Fundador numa regra só por tamanho de tela. Antes, 6 regras em
   4 arquivos (landing, hype, founder e cenario) brigavam, e o "R$5" encostava no texto. Letra de no mínimo 13 px. */
.cartaz-parceiro { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; width: min(340px, 100%); margin-top: -12px; padding: 20px 22px 18px; background: var(--ouro); color: var(--preto); border: 3px solid var(--preto); border-radius: 14px; transform: rotate(-3deg); box-shadow: 0 8px 0 #10091F }
.cartaz-parceiro:hover { transform: rotate(-2deg) scale(1.02) }
.cartaz-topo { font: 800 14px/1.3 Rubik, sans-serif }
.cartaz-valor { display: block; margin: 4px 0 0; font: 900 clamp(84px, 8vw, 124px)/1.05 'Big Shoulders Display', Rubik, sans-serif; letter-spacing: -.01em; white-space: nowrap }
.cartaz-de-por { display: block; margin: 0; font: 800 20px/1.25 Rubik, sans-serif }
.cartaz-de-por s { opacity: .6; margin-right: 4px }
.cartaz-de-por b { display: inline-block; white-space: nowrap; background: var(--preto); color: var(--ouro); padding: 1px 8px; border-radius: 6px }
.cartaz-texto { max-width: 26ch; font: 600 14px/1.4 Rubik, sans-serif }
@media (max-width: 860px) {
  .cartaz-parceiro { width: 100%; margin-top: 0; padding: 16px 12px 14px }
  .cartaz-valor { font-size: clamp(64px, 14vw, 92px) }
  .cartaz-de-por { font-size: 17px }
}
@media (max-width: 480px) {
  .cartaz-topo { font-size: 13px }
  .cartaz-valor { font-size: 64px }
  .cartaz-texto { font-size: 13px }
}
@media (prefers-reduced-motion: reduce) { .cartaz-parceiro:hover { transform: rotate(-3deg) } }
/* O outro cartaz da abertura e as etiquetas das metas: nada abaixo de 12 px */
.selo-onda small { font-size: 12px }
.selo-onda span { font-size: 13px }
.meta-card .tag { font-size: 12px }

/* 13. Faixa preta presa embaixo do topo, com a tabela do Fundador */
.faixa-fundador { position: sticky; top: var(--altura-topo, 64px); z-index: 19; display: flex; align-items: center; justify-content: center; gap: 8px 18px; padding: 8px 16px; background: #000; color: #fff; font: 500 14px/1.3 Rubik, sans-serif; border-bottom: 1px solid rgba(255, 233, 199, .15) }
.faixa-texto { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px }
.faixa-texto > span + span::before { content: '·'; margin-right: 14px; color: #777 }
.faixa-fundador b { color: var(--ouro); font-variant-numeric: tabular-nums }
.faixa-fundador .btn-faixa { min-height: 38px; padding: 0 14px; font-size: 13px; box-shadow: none; flex: none }
@media (max-width: 700px) {
  .faixa-fundador { justify-content: space-between; padding: 6px 10px 6px 14px; font-size: 12.5px; text-align: left; gap: 10px }
  .faixa-texto { flex-direction: column; align-items: flex-start; gap: 0 }
  .faixa-texto > span + span::before { display: none }
  .faixa-texto .faixa-prazo, .faixa-fundador .so-largo { display: none }
  .faixa-fundador .btn-faixa { font-size: 12px; padding: 0 12px }
}

/* 14 e 23. Parceria em uma linha e a verba numa linha legível logo depois, sem caixa (decisão 0058, item 2) */
.parceria-linha { margin: 14px 0 6px; font-size: 17px; line-height: 1.5 }
.abertura-lado .parceria-linha { font-size: 14px; color: #F2E9FF }
.verba-linha { margin: 0 0 22px; font-size: 15px; line-height: 1.55; max-width: 62ch }
.abertura-lado .verba-linha { font-size: 13px; color: #E2D6F5 }
.verba-linha a, .parceria-linha a { color: inherit; text-decoration: underline; text-underline-offset: 3px }

/* O botão fixo do celular some enquanto outro botão de compra está na tela */
.cta-fixo { transition: transform .25s ease, opacity .25s ease }
.cta-fixo.escondido { transform: translateY(140%); opacity: 0; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .cta-fixo { transition: none } }

/* 28. A faixa que corre para com o toque (o mouse já parava) */
.faixa.pausada .faixa-trilho, .animacoes-pausadas .faixa-trilho { animation-play-state: paused }

/* 16. Veja o Maq trabalhando: relógio do teste, resultado e "Ver de novo" */
.demo-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap }
.demo-cabeca h2 { margin: 0 }
.demo-cabeca .sobretitulo { margin: 0 0 8px }
.demo-de-novo { min-height: 44px; color: #fff; border-color: rgba(255, 255, 255, .5) }
.demo-relogio { margin: 14px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border: 2px solid rgba(255, 214, 10, .6); border-radius: 14px }
.demo-relogio b { font: 900 34px/1 'Big Shoulders Display', Rubik, sans-serif; color: var(--ouro); font-variant-numeric: tabular-nums }
.demo-relogio small { font-size: 12px; color: #BDBDBD }
#passos li { position: relative; transition: background-color .25s, border-color .25s }
#passos li.feito b::before { content: '✓ '; color: var(--ouro) }
.demo-resultado { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--ouro); color: var(--preto); animation: aparece-resultado .4s ease }
.demo-resultado[hidden] { display: none }
.demo-resultado p { margin: 0; line-height: 1.45 }
.demo-cortes { display: flex; gap: 6px; flex: none }
.demo-cortes i { width: 22px; height: 38px; border-radius: 5px; background: var(--preto); box-shadow: inset 0 -8px 0 rgba(255, 255, 255, .25) }
@keyframes aparece-resultado { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .demo-resultado { animation: none } }

/* Qualquer tela (pedido do dono em 31/10): áreas seguras do iPhone e a letra que não cresce ao deitar */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px) }
.topo { padding-top: max(10px, env(safe-area-inset-top, 0px)) }
.cta-fixo { left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)) }
/* Celular deitado: só o topo fica preso; a faixa do Fundador rola junto, para sobrar espaço para o conteúdo */
@media (orientation: landscape) and (max-height: 500px) { .faixa-fundador { position: static } }

/* No celular, o que era só ao passar o mouse acontece quando entra na tela (landing.js, pedido do dono em 01/11) */
@media (hover: none) {
  .cartaz-parceiro { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) }
  .cartaz-parceiro.visto { transform: rotate(-2deg) scale(1.02) }
  .passo-tour.visto .celular-tour { transform: rotate(0deg) translateY(-6px) }
}
@media (hover: none) and (prefers-reduced-motion: reduce) { .cartaz-parceiro.visto { transform: rotate(-3deg) } .passo-tour.visto .celular-tour { transform: rotate(var(--giro, 0deg)) } }