/* Checkup de posicionamento, v10 (31/10/2026). Reescrito do zero depois de a Bruna achar o site "sem personalidade,
   sem o ar da marca e não moderno como a Apple". Duas fontes de verdade:
   1. A marca, tirada dos posts dela (Cópia Bruna + Brands.pdf): fundo branco e cinza claro com muito ar, título em
      Poppins médio com a palavra-chave em negrito sublinhada por um traço bordô feito à mão, pontuação em bordô,
      Bruna de preto recortada com um número gigante atrás, cartão de tweet, moldura de post (texto miúdo nos cantos,
      "© 2026 Bruna Benvindo", ícone de salvar).
   2. A linha Apple: título enorme, blocos claros arredondados, botão em pílula, barra fosca no topo, frase que acende
      palavra por palavra com a rolagem e tudo que entra junto da rolagem (movimento.js).
   Cores: navy #040B24 na letra, bordô #950505 só em letra e no traço, fundo claro sempre. */
:root {
  --navy: #040B24; --azul: #313B72; --bordo: #950505; --branco: #FFFFFF;
  --cinza: #F5F5F7; --lilas: #EBEEFA; --linha: #E2E3EA; --apagado: #B9BCC8;
  --raio: 28px; --raio-p: 18px;
  --apple: cubic-bezier(.28, .11, .32, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--branco); color: var(--navy); font-family: 'Public Sans', sans-serif; font-size: 17px; line-height: 1.55;
  padding-bottom: 96px; -webkit-font-smoothing: antialiased; }
body.resultado { padding-bottom: 40px; }
h1, h2, h3, .frente b, .opcao b, .tile b, .mini-valor, .fase-nome, .efeito-texto, .assina b, .regua b, .tempo .no, .causa .num {
  font-family: 'Poppins', sans-serif; }
h1 { font-weight: 500; font-size: clamp(38px, 9vw, 76px); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-weight: 500; font-size: clamp(28px, 6vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
h1 b, h2 b { font-weight: 600; }
b { font-weight: 700; }
.red { color: var(--bordo); }
.ponto { color: inherit; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Traço bordô feito à mão sob a palavra-chave, como nos posts. Desenha ao abrir (movimento.js). */
.sublinha { position: relative; white-space: nowrap; display: inline-block; }
.sublinha .traco { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .22em; overflow: visible; }
.sublinha .traco path { fill: none; stroke: var(--bordo); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 520px) { .sublinha { white-space: normal; display: inline; } .sublinha .traco { display: none; }
  .sublinha { text-decoration: underline; text-decoration-color: var(--bordo); text-decoration-thickness: 3px; text-underline-offset: .14em; } }

/* Barra do topo fosca, como a da Apple */
.topo { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  height: 52px; padding: 0 max(16px, calc(50vw - 490px)); background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(4,11,36,.06); }
.marca img { display: block; height: 24px; width: auto; }
.etapa { font-size: 14px; color: var(--azul); }
.progresso { position: sticky; top: 52px; z-index: 19; height: 2px; background: var(--linha); }
.progresso i { display: block; height: 100%; width: 0; background: var(--bordo); transition: width .6s var(--apple); }
.pdf { background: none; border: 1px solid var(--linha); color: var(--navy); border-radius: 980px; padding: 7px 14px;
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .14em; cursor: pointer; }

/* Rótulo de sub-tópico: a fonte rara da identidade */
.eyebrow, .rotulo, .tag, .etapa-it { font-family: 'Libre Baskerville', Georgia, serif; font-style: normal; font-weight: 400; }
.eyebrow { font-size: 16px; color: var(--bordo); margin-bottom: 10px; }
.rotulo { font-size: 15px; color: var(--azul); margin: 24px 0 10px; }
.lead { color: var(--azul); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; max-width: 34em; }
.sub { color: var(--azul); margin-bottom: 18px; }
.aviso { background: var(--cinza); border-radius: var(--raio-p); padding: 14px 18px; margin: 16px 0; }

/* Botão: pílula da Apple com a letra da identidade (Open Sans, caixa alta, espaçada) */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: var(--navy); color: var(--branco);
  border: 0; border-radius: 980px; padding: 16px 28px; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .25s var(--apple), background .25s; }
.btn:hover { background: #18204a; }
.btn:active { transform: scale(.97); }
.btn.pendente { background: var(--cinza); color: var(--apagado); }
.btn.claro { background: var(--branco); color: var(--navy); border: 1px solid var(--linha); }
.btn.retomar { display: flex; width: 100%; margin: 0 0 16px; }
.link-seta { color: var(--bordo); text-decoration: none; font-size: 17px; }
.link-seta::after { content: " ›"; display: inline-block; transition: transform .3s var(--apple); }
.link-seta:hover::after { transform: translateX(4px); }

/* Tela */
.tela { display: none; padding: 32px 0 24px; }
.tela.ativa { display: block; }
.tela[data-tela="0"] { padding-top: 12px; }

/* Abertura em forma de post da Bruna, em tamanho de site */
.abre { margin: 0 calc(50% - 50vw); padding: 0 max(12px, calc(50vw - 600px)); }
.quadro { position: relative; overflow: hidden; background: var(--cinza); border-radius: var(--raio); min-height: 620px;
  display: grid; grid-template-columns: 1fr; padding: 72px 24px 0; }
.canto { position: absolute; font-size: 11px; line-height: 1.35; color: var(--azul); }
.canto-se { top: 22px; left: 24px; }
.canto-ie { bottom: 20px; left: 24px; z-index: 3; }
.canto-id { bottom: 20px; right: 24px; width: 18px; height: 18px; color: var(--navy); z-index: 3; }
.abre-txt { position: relative; z-index: 2; }
.abre-txt h1 { margin-bottom: 20px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.abre-foto { position: relative; display: grid; place-items: end center; margin-top: 18px; min-height: 380px; }
.numeral { position: absolute; z-index: 0; left: 50%; bottom: 20px; transform: translateX(-62%); font-family: 'Poppins', sans-serif;
  font-weight: 800; font-size: clamp(300px, 70vw, 560px); line-height: .8; color: var(--navy); letter-spacing: -.06em; user-select: none; }
.foto { position: relative; z-index: 1; display: block; width: min(68vw, 300px); height: auto; }
.tweet { position: absolute; z-index: 2; right: -6px; bottom: 120px; width: min(74vw, 290px); background: var(--branco);
  border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px -18px rgba(4,11,36,.35); }
.tweet-quem { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.tweet-quem img { width: 38px; height: 38px; border-radius: 50%; }
.tweet-quem span { display: grid; line-height: 1.2; }
.tweet-quem b { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.tweet-quem i { font-style: normal; font-size: 12px; color: var(--azul); }
.selo { width: 15px; height: 15px; }
.tweet p { font-size: 15px; line-height: 1.4; }
@media (min-width: 900px) {
  .quadro { grid-template-columns: 1.1fr .9fr; align-items: center; padding: 80px 64px 0; min-height: 700px; }
  .abre-txt { align-self: center; padding-bottom: 80px; }
  .abre-foto { align-self: end; min-height: 600px; margin: 0; }
  .numeral { font-size: 600px; transform: translateX(-58%); bottom: 0; }
  .foto { width: 380px; }
  .tweet { right: -20px; bottom: 180px; width: 300px; }
}

/* Frase que acende com a rolagem */
.frase { max-width: 860px; margin: 120px auto 100px; text-align: left; }
.acende { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(28px, 5.4vw, 52px); line-height: 1.16; letter-spacing: -.02em; color: var(--navy); }
.acende .p { color: var(--apagado); transition: color .35s; }
.acende .p.on { color: var(--navy); }

/* Prova em blocos */
.prova { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 110px; }
.tile { background: var(--cinza); border-radius: var(--raio); padding: 34px 28px; display: grid; gap: 10px; align-content: start; }
.tile b { font-weight: 600; font-size: clamp(56px, 12vw, 84px); line-height: 1; letter-spacing: -.04em; color: var(--navy); }
.tile:first-child b { color: var(--bordo); }
.tile span { color: var(--azul); font-size: 17px; max-width: 22em; }
.prova-marcas { grid-column: 1 / -1; text-align: center; color: var(--azul); font-family: 'Libre Baskerville', Georgia, serif; font-style: normal; font-size: 16px; margin-top: 10px; }
@media (min-width: 720px) { .prova { grid-template-columns: 1.3fr 1fr 1fr; } }

/* Títulos de seção */
.titulo-sec { font-size: clamp(32px, 6.4vw, 56px); margin-bottom: 28px; }

/* Frentes em blocos clicáveis */
.frentes { display: grid; gap: 12px; margin-bottom: 110px; }
.frente { position: relative; text-align: left; background: var(--cinza); border: 0; border-radius: var(--raio); padding: 32px 28px 28px; min-height: 220px;
  display: grid; align-content: start; gap: 8px; color: var(--navy); font: inherit; cursor: pointer; transition: transform .45s var(--apple), background .3s; }
.frente:hover, .frente:focus-visible { transform: scale(1.015); background: var(--lilas); outline: none; }
.frente .tag { font-size: 15px; color: var(--bordo); }
.frente b { font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.frente span:not(.tag) { color: var(--azul); font-size: 16px; }
.frente i { font-style: normal; color: var(--bordo); font-size: 16px; margin-top: 10px; }
.frente i::after { content: " ›"; display: inline-block; transition: transform .3s var(--apple); }
.frente:hover i::after { transform: translateX(4px); }
@media (min-width: 900px) { .frentes { grid-template-columns: repeat(3, 1fr); } }

/* O que recebe e para quem */
.exemplo { margin-bottom: 90px; }
.recebe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recebe > div { background: var(--cinza); border-radius: var(--raio-p); padding: 22px 20px; }
.recebe p { font-size: 15px; color: var(--azul); line-height: 1.4; }
.recebe b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--navy); font-size: 18px; margin-bottom: 4px; }
@media (min-width: 900px) { .recebe { grid-template-columns: repeat(4, 1fr); } }
.para { display: grid; gap: 12px; margin-bottom: 40px; }
.para > div { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 24px 22px; }
@media (min-width: 720px) { .para { grid-template-columns: 1fr 1fr; } }
.lista { list-style: none; display: grid; gap: 8px; }
.lista li { position: relative; padding-left: 18px; }
.lista li::before { content: "—"; position: absolute; left: 0; color: var(--bordo); }
.lista.nao li { color: var(--azul); }
.lista.nao li::before { content: "×"; color: var(--apagado); }
.numerada { padding-left: 22px; display: grid; gap: 10px; }
.numerada li::marker { color: var(--bordo); font-family: 'Poppins', sans-serif; font-weight: 600; }

/* Quiz */
.contador { font-size: 14px; color: var(--azul); margin-bottom: 12px; }
.chips, .opcoes { display: grid; gap: 10px; }
.chip, .opcao { text-align: left; background: var(--cinza); border: 2px solid transparent; border-radius: var(--raio-p); padding: 16px 18px;
  font: inherit; font-size: 16px; color: var(--navy); cursor: pointer; transition: transform .25s var(--apple), border-color .2s, background .2s; }
.chip:hover, .opcao:hover { background: var(--lilas); }
.chip:active, .opcao:active { transform: scale(.98); }
.chip.on, .opcao.on { background: var(--branco); border-color: var(--navy); }
.chip.on::before { content: "✓  "; color: var(--bordo); font-weight: 700; }
.opcao { display: grid; gap: 2px; }
.opcao b { font-weight: 600; font-size: 18px; }
.opcao span { color: var(--azul); font-size: 15px; }
@media (min-width: 720px) { .chips { grid-template-columns: 1fr 1fr; } }
h2.segunda { margin-top: 48px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.atalhos button { background: var(--cinza); border: 0; border-radius: 980px; padding: 9px 16px; font: inherit; font-size: 14px; color: var(--navy); cursor: pointer; }
textarea, input, select { width: 100%; font: inherit; font-size: 16px; color: var(--navy); background: var(--cinza); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--navy); background: var(--branco); }
.nota-campo { font-size: 12px; color: var(--azul); text-align: right; margin-top: 4px; }
.campo { display: grid; gap: 6px; font-size: 15px; margin-bottom: 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--azul); margin: 8px 0 4px; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.parcial { background: var(--cinza); border-radius: var(--raio); padding: 28px 24px; margin-bottom: 14px; }
.teaser { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 16px 18px; margin: 14px 0 22px; }
.teaser p { font-size: 15px; color: var(--azul); }
.teaser b { color: var(--navy); }
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(4,11,36,.06);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; }
.barra .btn { flex: 1; max-width: 520px; font-size: 12px; letter-spacing: .1em; }
.voltar { background: none; border: 0; font: inherit; color: var(--azul); padding: 0 8px; cursor: pointer; }
.assinatura { text-align: center; font-size: 12px; color: var(--azul); padding: 28px 16px; }

/* Ícones: só onde têm função (cadeado da fase fechada, marca do teaser) */
.ic { display: none; width: 24px; height: 24px; flex: none; color: var(--bordo); }
.teaser .ic, .tempo .no .ic { display: block; }

/* Resultado */
.abre-res { margin: 0 0 18px; padding: 56px 0 28px; }
.abre-res h1 { font-size: clamp(36px, 7.4vw, 64px); margin-bottom: 22px; }
.raiz { display: flex; gap: 12px; background: var(--cinza); border-radius: var(--raio-p); padding: 18px 20px; margin: 0 0 12px; }
.raiz p { color: var(--azul); font-size: 16px; }
.raiz b { color: var(--navy); }
.painel { display: grid; gap: 12px; margin: 0 0 12px; }
.painel-nota, .mini { background: var(--cinza); border-radius: var(--raio); padding: 26px 24px; }
.painel-nota { text-align: center; }
.painel-nota .eyebrow { margin-bottom: 4px; }
.medidor { display: block; width: 100%; max-width: 280px; margin: 6px auto 14px; }
.regua { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.regua div { border-radius: 12px; padding: 9px 4px; background: var(--branco); display: grid; gap: 2px; }
.regua b { font-size: 13px; font-weight: 500; color: var(--azul); }
.regua span { font-size: 11px; color: var(--azul); }
.regua .on { background: var(--navy); }
.regua .on b, .regua .on span { color: var(--branco); }
.nivel { color: var(--azul); font-size: 14px; margin-top: 12px; }
.painel-lado { display: grid; gap: 12px; }
.mini { display: grid; align-content: start; }
.mini-valor { font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.mini-texto { font-size: 14px; color: var(--azul); margin-top: 6px; }
@media (min-width: 720px) { .painel { grid-template-columns: 1.3fr 1fr; } }
.bloco { padding: 72px 0 0; }
.bloco h2 { margin-bottom: 22px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilulas span { background: var(--cinza); border-radius: 980px; padding: 9px 16px; font-size: 15px; }
.pilulas.peq { margin-top: 12px; }
.pilulas.peq span { background: var(--branco); font-size: 12px; padding: 4px 11px; border: 1px solid var(--linha); }
.citacao { margin-top: 14px; color: var(--azul); font-family: 'Libre Baskerville', Georgia, serif; font-style: normal; }
.causas, .custos { display: grid; gap: 12px; }
.causa, .custo { background: var(--cinza); border-radius: var(--raio-p); padding: 24px 22px; display: grid; gap: 10px; align-content: start; }
.causa .num { font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -.03em; color: var(--bordo); }
.causa p, .custo p { font-size: 16px; color: var(--azul); }
.causa b { color: var(--navy); font-family: 'Poppins', sans-serif; font-weight: 600; }
@media (min-width: 720px) { .causas, .custos { grid-template-columns: repeat(3, 1fr); } }
.efeito { margin-top: 12px; text-align: center; padding: 26px 20px; border: 1px solid var(--linha); border-radius: var(--raio-p); }
.efeito .rotulo { margin: 0 0 6px; }
.efeito-texto { font-weight: 600; font-size: clamp(22px, 4vw, 30px); letter-spacing: -.02em; color: var(--bordo); }
.tempo { list-style: none; position: relative; display: grid; gap: 14px; margin-top: 8px; }
.tempo::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--navy); transform-origin: top; }
.tempo li { position: relative; display: flex; gap: 16px; }
.tempo .no { position: relative; z-index: 1; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--branco);
  border: 2px solid var(--navy); display: grid; place-items: center; font-weight: 600; }
.tempo .no .ic { width: 18px; height: 18px; color: var(--azul); }
.tempo .primeira .no { background: var(--navy); color: var(--branco); }
.tempo .fechada .no { border-color: var(--linha); }
.fase-corpo { flex: 1; background: var(--cinza); border-radius: var(--raio-p); padding: 18px 20px; }
.tempo .fechada .fase-corpo { background: var(--branco); border: 1px dashed var(--linha); }
.fase-corpo .rotulo { margin: 0 0 2px; }
.fase-nome { font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.fase-texto { font-size: 16px; color: var(--azul); margin-top: 4px; }
.semana { margin-top: 28px; }
.checks { list-style: none; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--bordo); font-weight: 700; }
.cta { margin-top: 72px; background: var(--cinza); border-radius: var(--raio); padding: 40px 26px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.cta h2 { max-width: 16em; }
.cta p { color: var(--azul); max-width: 34em; }
.cta .btn { margin-top: 6px; }
.cta .link { color: var(--bordo); font-size: 15px; text-decoration: none; }
.assina { display: flex; gap: 12px; align-items: center; text-align: left; }
.assina img { width: 56px; height: 56px; border-radius: 50%; }
.assina b { display: block; font-size: 16px; font-weight: 500; }
.assina span { font-size: 13px; color: var(--azul); }

/* Movimento na linha Apple (movimento.js). Só transform e opacity; sem JS ou com "reduzir movimento" nada disso vale. */
html.mov [data-rev] { opacity: 0; transform: translate3d(0, 40px, 0);
  transition: opacity 1s var(--apple) var(--d, 0ms), transform 1.2s var(--apple) var(--d, 0ms); }
html.mov [data-rev].vis { opacity: 1; transform: none; }
html.mov .quadro { transform: scale(.94); opacity: 0; animation: quadro-entra 1.3s var(--apple) .05s forwards; }
@keyframes quadro-entra { to { transform: none; opacity: 1; } }
html.mov .numeral { opacity: 0; animation: numeral-entra 1.6s var(--apple) .35s forwards; }
@keyframes numeral-entra { from { opacity: 0; transform: translate(-62%, 60px); } to { opacity: 1; } }
html.mov .foto { opacity: 0; animation: foto-entra 1.4s var(--apple) .5s forwards; }
@keyframes foto-entra { from { opacity: 0; transform: translate3d(0, 50px, 0); } to { opacity: 1; transform: none; } }
html.mov .tweet { opacity: 0; animation: tweet-entra 1s var(--apple) 1.1s forwards; }
@keyframes tweet-entra { from { opacity: 0; transform: translate3d(20px, 16px, 0) scale(.96); } to { opacity: 1; transform: none; } }
html.mov .sublinha .traco path { stroke-dasharray: 320; stroke-dashoffset: 320; }
html.mov .vis .sublinha .traco path, html.mov .sublinha.vis .traco path, html.mov .quadro .sublinha .traco path { animation: risca .9s var(--apple) forwards; }
html.mov .quadro .sublinha .traco path { animation-delay: .9s; }
@keyframes risca { to { stroke-dashoffset: 0; } }
html.mov .tela.ativa:not([data-tela="0"]) { animation: tela-entra .7s var(--apple) both; }
@keyframes tela-entra { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
html.mov .medidor .arco { stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--apple) .2s; }
html.mov .medidor.cheio .arco { stroke-dasharray: var(--n) 100; }
html.mov .tempo::before { transform: scaleY(var(--traco, 0)); transition: transform .2s linear; }

@media print {
  .topo .pdf, .cta .btn, .cta .link, .assinatura, .progresso { display: none; }
  .topo { position: static; }
  html.mov [data-rev], html.mov .quadro, html.mov .foto, html.mov .numeral, html.mov .tweet { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.mov .medidor .arco { stroke-dasharray: var(--n) 100; }
  html.mov .tempo::before { transform: none; }
  .bloco, .painel > *, .cta, .tempo li, .causa, .custo { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Regras da Fábrica de Sites (docs/03-padroes-de-design.md e bin/checar.sh), aplicadas em 31/10/2026:
   headline em Title Case ("Mnnn Mn Mnnn", que é também o "iniciais maiúsculas" da identidade), fundo claro e escuro
   alternando com contraste de verdade, respiro na escala de 8 (64 no celular, 96 no computador entre seções) e o
   mesmo botão a cada duas ou três seções. */
h1, h2, .frente b, .fase-nome, .tile-titulo { text-transform: capitalize; }
.frase { margin: 64px calc(50% - 50vw); padding: 96px max(16px, calc(50vw - 430px)); background: var(--navy); }
.acende { color: var(--branco); }
.acende .p { color: rgba(255,255,255,.28); }
.acende .p.on { color: var(--branco); }
.prova, .frentes { margin-bottom: 64px; }
.exemplo { margin-bottom: 64px; }
.cta-linha { display: flex; justify-content: center; margin: 0 0 64px; }
.bloco { padding-top: 64px; }
.cta { margin-top: 64px; }
@media (min-width: 900px) {
  .frase { margin: 96px calc(50% - 50vw); padding: 128px max(16px, calc(50vw - 430px)); }
  .prova, .frentes, .exemplo, .cta-linha { margin-bottom: 96px; }
  .bloco { padding-top: 96px; }
  .cta { margin-top: 96px; }
}
.quadro { scale: var(--saida, 1); transform-origin: 50% 0; }
.nw { white-space: nowrap; }
@media (max-width: 520px) { .nw { white-space: normal; } }
.frase { max-width: none; }
.acende { max-width: 860px; margin: 0 auto; }
h1 { font-size: clamp(36px, 8.4vw, 64px); }
.abre-res h1 { font-size: clamp(34px, 7vw, 56px); }
.link-seta::after, .frente i::after { content: "\00a0›"; }
.marca, .link-seta { display: inline-flex; align-items: center; min-height: 44px; }
.link-seta { min-height: 48px; }
/* Marcador de lista em traço curto desenhado, nunca o caractere travessão (regra de escrita da Bruna). */
.lista li::before { content: ""; top: .78em; width: 10px; height: 2px; background: var(--bordo); }
.lista.nao li::before { content: "×"; top: 0; width: auto; height: auto; background: none; }



/* Capa bordô (31/10/2026, v11). A Bruna estranhou a saída da capa bordô no v10 e reprovou o bordô quase preto do
   rascunho ("ficou muito tarde"). Fica o bordô da marca em degradê leve, só na primeira dobra; o resto segue claro.
   Foto 15 do Ensaio 2025, de frente, com a borda do recorte escurecida para não deixar halo claro no fundo bordô. */
.quadro { background: #950505 radial-gradient(120% 100% at 75% 60%, #B10A0A 0%, #950505 45%, #7A0404 100%); color: var(--branco); }
.quadro::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.quadro .canto { color: rgba(255,255,255,.72); }
.quadro .canto-id, .quadro h1, .quadro .ponto, .quadro .link-seta { color: var(--branco); }
.quadro .sublinha .traco path { stroke: var(--branco); }
@media (max-width: 520px) { .quadro .sublinha { text-decoration-color: var(--branco); } }
.quadro .lead { color: rgba(255,255,255,.82); }
.quadro .btn { background: var(--branco); color: var(--navy); }
.quadro .btn:hover { background: var(--cinza); }
.quadro .numeral { color: #B51414; }
.quadro .tweet { color: var(--navy); bottom: 64px; }
@media (min-width: 900px) { .quadro .tweet { bottom: 70px; right: -40px; } .quadro .numeral { transform: translateX(-30%); } }

/* Exemplo de resposta embaixo do campo (Instagram e site), pedido da Bruna em 03/11/2026 */
.exemplo-campo { font-size: 13px; color: var(--azul); line-height: 1.4; }

/* Nota por área (checkup de entrada única, 03/11/2026). A barra mostra quanto a área já funciona;
   a do gargalo principal fica em bordô, as outras em navy. */
.areas { display: grid; gap: 18px; margin-top: 8px; }
.area { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; }
.area-nome { grid-column: 1 / -1; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px; }
.area-tag { font-family: 'Public Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--bordo); margin-left: 6px; }
.area-barra { height: 10px; border-radius: 980px; background: var(--linha); overflow: hidden; }
.area-barra i { display: block; height: 100%; border-radius: inherit; background: var(--navy); }
.area.principal .area-barra i { background: var(--bordo); }
.area-valor { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* Sinais vitais e achados no resultado (04/11/2026), na linha do raio-x que a Bruna mandou de referência:
   primeiro os números que a pessoa informou, depois o que a leitura achou, em cartões com número grande. */
.vitais, .achados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (min-width: 900px) { .vitais { grid-template-columns: repeat(4, 1fr); } .achados { grid-template-columns: repeat(4, 1fr); } }
.vital, .achado { background: var(--cinza); border-radius: var(--raio-p); padding: 20px 18px; display: grid; gap: 8px; align-content: start; }
.vital .rotulo, .achado .rotulo { margin: 0; font-size: 13px; }
.vital b, .achado b { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(24px, 6vw, 34px); line-height: 1.05; letter-spacing: -.02em; color: var(--navy); }
.vital b.txt, .achado b.txt { font-weight: 600; font-size: clamp(19px, 4.6vw, 24px); }
.achado b small { font-size: .45em; font-weight: 600; color: var(--azul); letter-spacing: 0; }
.vital span, .achado span { font-size: 14px; line-height: 1.4; color: var(--azul); }
.achado.principal { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--bordo); }
.achado.principal b { color: var(--bordo); }
.achado.principal .area-barra i { background: var(--bordo); }

/* Raio-X completo (raiox.php, 04/11/2026): página de acesso com senha, faixa de validade, carta. */
.raiox-faixa { background: var(--cinza); color: var(--navy); text-align: center; font-size: 13px; padding: 8px 16px; }
.raiox-faixa b { color: var(--bordo); }
.raiox-sub { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(22px, 4.4vw, 32px); line-height: 1.2; color: var(--bordo); margin: 0 0 18px; }
.raiox-porta { max-width: 520px; margin: 64px auto; }
.raiox-porta h1 { font-size: clamp(34px, 7vw, 52px); margin-bottom: 14px; }
.raiox-porta .btn { margin-top: 22px; }
.raiox-senha { margin-top: 24px; }
.raiox-senha input { font-size: 22px; letter-spacing: .3em; }
.raiox-carta p { max-width: 38em; margin-bottom: 16px; font-size: 18px; line-height: 1.6; }
.raiox-carta .assina { margin-top: 24px; }
.raiox-quem p { max-width: 42em; color: var(--azul); }

/* Raio-X visual (04/11/2026): números da abertura, linha do tempo dos posts, prints do site e da grade, checklist do site, medidor. Aprovado em rascunho pela Bruna. */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 72px; }
.numeros div { border-top: 1px solid var(--linha); padding-top: 14px; }
.numeros b { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(40px, 11vw, 88px); line-height: 1; letter-spacing: -.04em; color: var(--bordo); font-variant-numeric: tabular-nums; }
.numeros span { display: block; margin-top: 8px; font-size: 14px; color: var(--azul); line-height: 1.35; }
.linha-tempo { width: 100%; height: auto; margin-top: 8px; }
.linha-tempo .eixo { stroke: var(--linha); stroke-width: 2; }
.linha-tempo .pt circle { fill: var(--navy); }
.linha-tempo .vazio { fill: rgba(149, 5, 5, .08); }
.linha-tempo .vazio-txt { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; fill: var(--bordo); }
.linha-tempo .eixo-txt { font-size: 13px; fill: var(--azul); }
.vitrine { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 900px) { .vitrine { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.vitrine figure { margin: 0; }
.vitrine figcaption { font-size: 13px; color: var(--azul); margin-top: 8px; }
.tela-site { border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); box-shadow: 0 18px 40px -24px rgba(4, 11, 36, .35); }
.tela-site img { display: block; width: 100%; height: auto; }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 14px; overflow: hidden; }
.grade img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.checklist { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.checklist li { display: flex; gap: 12px; align-items: center; background: var(--cinza); border-radius: 12px; padding: 14px 16px; font-size: 16px; }
.ck { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 15px; }
.ck.sim { background: var(--navy); color: var(--branco); }
.ck.nao { background: var(--branco); color: var(--bordo); box-shadow: inset 0 0 0 1.5px var(--bordo); }
.nota-raiox { display: grid; gap: 18px; align-items: center; }
.nota-raiox .medidor { width: min(260px, 70vw); margin: 0 auto; }
@media (min-width: 900px) { .nota-raiox { grid-template-columns: 280px 1fr; } .nota-raiox .achados { grid-template-columns: repeat(3, 1fr); } }

/* Raio-X, segunda rodada visual (04/11/2026): capa bordô com a foto do lead, índice fixo dos capítulos,
   print do site com as marcações do checklist, triângulo das 3 áreas, faixa do gargalo e ícone nos achados.
   A faixa do gargalo é navy, não bordô: a identidade só deixa bordô de fundo na primeira dobra. */
.capa-raiox { min-height: 0; padding-bottom: 72px; }
.capa-raiox .capa-txt { position: relative; z-index: 2; }
.capa-rotulo { font-family: 'Libre Baskerville', Georgia, serif; font-style: normal; font-size: 18px; color: rgba(255,255,255,.8); margin-bottom: 8px; }
.capa-raiox h1 { color: var(--branco); font-size: clamp(34px, 7vw, 64px); margin-bottom: 16px; }
.capa-raiox .raiox-sub { color: rgba(255,255,255,.92); }
.capa-raiox .lead { color: rgba(255,255,255,.82); }
.capa-perfil { position: relative; z-index: 2; display: grid; justify-items: start; gap: 6px; margin-top: 28px; color: var(--branco); }
.capa-perfil .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(255,255,255,.9); margin-bottom: 6px; }
.capa-perfil b { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 20px; }
.capa-perfil span { font-size: 15px; color: rgba(255,255,255,.75); }
@media (min-width: 900px) {
  .capa-raiox { grid-template-columns: 1.4fr .6fr; padding: 96px 64px 88px; }
  .capa-perfil { justify-items: center; text-align: center; margin: 0; align-self: center; }
  .capa-perfil .avatar { width: 180px; height: 180px; }
}
.indice { position: sticky; top: 52px; z-index: 15; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 20px calc(50% - 50vw) 0;
  padding: 10px max(16px, calc(50vw - 490px)); background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--linha); }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex: none; font-size: 13px; color: var(--navy); text-decoration: none; padding: 8px 14px; border-radius: 980px; background: var(--cinza); min-height: 36px; display: inline-flex; align-items: center; }
.indice a:hover { background: var(--lilas); }
.bloco[id] { scroll-margin-top: 120px; }
.site-marcado { position: relative; }
.pins { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.pins li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; background: var(--cinza); border-radius: 10px; padding: 9px 12px; }
.pins i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; }
.pins .sim i { background: var(--navy); color: var(--branco); }
.pins .nao i { background: var(--branco); color: var(--bordo); box-shadow: inset 0 0 0 1.5px var(--bordo); }
@media (min-width: 900px) { .pins { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
.nota-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.nota-graficos .medidor { width: 100%; max-width: 240px; margin: 0 auto; }
.triangulo { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.tri-grade { fill: none; stroke: var(--linha); stroke-width: 1; }
.tri-valor { fill: rgba(149, 5, 5, .14); stroke: var(--bordo); stroke-width: 2; stroke-linejoin: round; }
.tri-rot { font-family: 'Public Sans', sans-serif; font-size: 14px; fill: var(--azul); }
.tri-rot.pr { fill: var(--bordo); font-weight: 700; }
@media (max-width: 520px) { .nota-graficos { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .nota-raiox { grid-template-columns: 1fr; } .nota-graficos { max-width: 760px; margin: 0 auto; gap: 40px; } .triangulo { max-width: 360px; } .nota-graficos .medidor { max-width: 300px; } }
.faixa-gargalo { margin: 96px calc(50% - 50vw) 0; padding: 48px max(24px, calc(50vw - 480px)); background: var(--navy); color: var(--branco); }
.faixa-gargalo .rotulo { color: rgba(255,255,255,.7); margin: 0 0 10px; }
.faixa-gargalo .frase { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(34px, 7.5vw, 72px); line-height: 1.05; letter-spacing: -.025em; text-transform: capitalize; }
.faixa-gargalo .frase span { color: var(--branco); }
.achado.com-icone .rotulo { display: flex; align-items: center; gap: 8px; }
.ic-origem { flex: none; color: var(--bordo); }
.achado.com-icone b { font-size: clamp(30px, 7vw, 44px); }

/* Inspirações da página da Human Academy (05/11/2026), traduzidas para a identidade clara da Bruna:
   faixa que corre com as chamadas, antes e depois de arrastar (vitrine x porta) e a faixa de marcas. */
.corre { margin: 28px calc(50% - 50vw) 0; overflow: hidden; border-block: 1px solid var(--linha); background: var(--branco); }
.corre-trilho { display: flex; width: max-content; align-items: center; gap: 22px; padding: 14px 0; animation: corre 38s linear infinite; }
.corre span { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--navy); white-space: nowrap; }
.corre i { width: 6px; height: 6px; border-radius: 50%; background: var(--bordo); flex: none; }
@keyframes corre { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .corre-trilho { animation: none; } }
.compara { margin: 0 0 96px; }
.compara-chave { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--cinza); border-radius: 980px; padding: 4px; margin: 14px 0 12px; }
.compara-chave button { position: relative; z-index: 1; border: 0; background: none; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); padding: 12px 22px; min-height: 44px; cursor: pointer; transition: color .3s; }
.compara-chave button[aria-pressed="true"] { color: var(--branco); }
.chave-bola { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 980px; background: var(--navy); transition: transform .45s var(--apple); }
.compara-chave.porta .chave-bola { transform: translateX(100%); }
.compara-caixa { position: relative; display: grid; border-radius: var(--raio); overflow: hidden; }
.lado { grid-area: 1 / 1; padding: 64px 24px 32px; display: grid; gap: 16px; align-content: start; transition: opacity .5s var(--apple), transform .5s var(--apple); }
.lado-vitrine { background: #ECEAE6; }
.lado-porta { background: var(--cinza); opacity: 0; transform: translateY(8px); pointer-events: none; }
.compara-caixa.porta .lado-porta { opacity: 1; transform: none; pointer-events: auto; }
.compara-caixa.porta .lado-vitrine { opacity: 0; }
.selo-lado { position: absolute; top: 20px; left: 20px; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 980px; }
.lado-vitrine .selo-lado { background: var(--branco); color: var(--azul); }
.lado-porta .selo-lado { background: var(--navy); color: var(--branco); }
.perfil-mock { display: flex; gap: 12px; align-items: center; }
.perfil-mock .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--branco); font-family: 'Poppins', sans-serif; font-weight: 600; }
.perfil-mock b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; }
.perfil-mock span { font-size: 14px; color: var(--azul); }
.bio { font-size: 17px; line-height: 1.5; max-width: 26em; }
.lado-porta .bio { font-weight: 700; }
.leitura { list-style: none; display: grid; gap: 8px; }
.leitura li { font-size: 15px; color: var(--azul); padding-left: 18px; position: relative; }
.leitura li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--azul); }
.lado-porta .leitura li { color: var(--navy); }
.lado-porta .leitura li::before { background: var(--bordo); }
@media (prefers-reduced-motion: reduce) { .lado, .chave-bola { transition: none; } }
.nota-ilustr { font-size: 12px; color: var(--azul); margin-top: 8px; }
@media (min-width: 900px) { .lado { padding: 80px 64px 48px; } .bio { font-size: 20px; } .compara-caixa { max-width: 760px; } }
.bastidores { grid-column: 1 / -1; text-align: center; margin-top: 24px; }
.bastidores .rotulo { margin: 0 0 14px; }
.bastidores ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.bastidores li { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(20px, 4.4vw, 28px); letter-spacing: -.02em; color: #7E8191; }
.nota-graficos.so-medidor { grid-template-columns: 1fr; }

/* Ajustes da Bruna em 05/11/2026: sem a foto na capa do celular, vitrine e porta um embaixo do outro no
   celular (a chave fica só no computador) e uma ponte de texto antes dos números de prova. */
@media (max-width: 899px) {
  .abre-foto { display: none; }
  .quadro:not(.capa-raiox) { min-height: 0; padding-bottom: 64px; }
  .compara-chave { display: none; }
  .compara-caixa { gap: 12px; overflow: visible; border-radius: 0; }
  .compara-caixa .lado { grid-area: auto; border-radius: var(--raio); position: relative; }
  .compara-caixa .lado-porta, .compara-caixa.porta .lado-porta { opacity: 1; transform: none; pointer-events: auto; box-shadow: inset 0 0 0 1.5px var(--navy); }
  .compara-caixa.porta .lado-vitrine { opacity: 1; }
}
.ponte { margin: 0 0 24px; }
.ponte h2 { max-width: 18em; }

/* Prova logo abaixo da capa no /checkup2 (06/11/2026, pedido da Bruna): marcas atendidas (imagem dela),
   números da Brands em faixa navy e rostos dos bastidores. */
.numeros-brands { margin: 40px calc(50% - 50vw) 0; padding: 48px max(16px, calc(50vw - 490px)); background: var(--navy); color: var(--branco);
  display: grid; grid-template-columns: 1fr; gap: 28px; text-align: center; }
.numeros-brands b { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(44px, 9vw, 72px); line-height: 1; letter-spacing: -.03em; }
.numeros-brands span { display: block; margin-top: 10px; font-size: 17px; color: rgba(255,255,255,.82); max-width: 16em; margin-inline: auto; }
@media (min-width: 900px) { .numeros-brands { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .numeros-brands > div + div { border-left: 1px solid rgba(255,255,255,.25); } }
.rostos { margin: 56px 0 0; text-align: center; }
.rostos .eyebrow { margin-bottom: 16px; }
.rostos-nomes { margin-top: 12px; font-size: 14px; color: var(--azul); line-height: 1.6; }
.frente.on { box-shadow: inset 0 0 0 2px var(--navy); }
#bloco-sintomas { margin-top: 40px; scroll-margin-top: 80px; }
.numeros-brands b { white-space: nowrap; font-size: clamp(40px, 8vw, 64px); }
.rostos + .corre { margin-bottom: 72px; }

/* 06/11/2026: as marcas rodam numa faixa contínua (logo por logo, 17 + cópia para emendar) e os rostos viram grade,
   com todos aparecendo no celular (4 por linha) e os 7 numa linha no computador. Substitui a imagem inteira e a rolagem lateral. */
.marcas { overflow: hidden; margin: 40px calc(50% - 50vw) 0; padding: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marcas-trilho { display: flex; align-items: center; gap: 56px; width: max-content; animation: corre 45s linear infinite; }
.marcas-trilho img { display: block; height: 44px; width: auto; max-width: none; }
.marcas-trilho img[src$="m10.png"] { height: 64px; }
@media (max-width: 899px) { .marcas { padding: 0; margin-inline: calc(50% - 50vw); } .marcas-trilho { gap: 40px; } .marcas-trilho img { height: 34px; } .marcas-trilho img[src$="m10.png"] { height: 50px; } }
@media (prefers-reduced-motion: reduce) { .marcas-trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.rostos-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
@media (min-width: 900px) { .rostos-grade { grid-template-columns: repeat(7, 1fr); gap: 12px; } }
.rostos-grade figure { margin: 0; }
.rostos-grade img { display: block; width: 100%; height: auto; aspect-ratio: 228 / 288; object-fit: cover; border-radius: 12px; }
.rostos-grade figcaption { font-size: 12px; line-height: 1.3; color: var(--azul); margin-top: 6px; }

/* Movimento nos rostos (06/11/2026): sem tirar ninguém da tela. Cada rosto entra subindo, um depois do outro, quando
   a grade aparece; depois cada foto respira com um zoom lento, em tempos diferentes, e um rosto de cada vez acende
   em destaque. Com "reduzir movimento", tudo parado e visível. */
.rostos-grade .ft { display: block; overflow: hidden; border-radius: 12px; }
.rostos-grade .ft img { border-radius: 0; }
.rostos-grade.vivo figure { opacity: 0; transform: translateY(18px); }
.rostos-grade.vivo.entrou figure { opacity: 1; transform: none; transition: opacity .7s var(--apple), transform .7s var(--apple); }
.rostos-grade.vivo.entrou figure:nth-child(2) { transition-delay: .08s; } .rostos-grade.vivo.entrou figure:nth-child(3) { transition-delay: .16s; }
.rostos-grade.vivo.entrou figure:nth-child(4) { transition-delay: .24s; } .rostos-grade.vivo.entrou figure:nth-child(5) { transition-delay: .32s; }
.rostos-grade.vivo.entrou figure:nth-child(6) { transition-delay: .40s; } .rostos-grade.vivo.entrou figure:nth-child(7) { transition-delay: .48s; }
.rostos-grade.vivo.entrou img { animation: respira 9s ease-in-out infinite; transform-origin: 50% 35%; }
.rostos-grade.vivo.entrou figure:nth-child(2n) img { animation-duration: 11s; animation-delay: -3s; }
.rostos-grade.vivo.entrou figure:nth-child(3n) img { animation-duration: 13s; animation-delay: -6s; }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.rostos-grade.vivo figure img { filter: saturate(.55); transition: filter .8s; }
.rostos-grade.vivo figure.acesa img { filter: none; }
.rostos-grade.vivo figure.acesa figcaption { color: var(--navy); font-weight: 700; }
.rostos-grade figcaption { transition: color .4s; }
@media (prefers-reduced-motion: reduce) { .rostos-grade.vivo figure, .rostos-grade.vivo.entrou figure { opacity: 1; transform: none; } .rostos-grade.vivo img { animation: none !important; filter: none; } }

/* 06/11/2026, segunda rodada: "Nos bastidores de" no topo, logos rodando, as 5 pessoas que a Bruna escolheu rodando no
   sentido contrário (a lista vai 3 vezes para cobrir telas largas sem buraco) e os números depois. */
.bastidores-topo { margin: 48px 0 0; text-align: center; }
.bastidores-topo .eyebrow { margin: 0; }
.bastidores-topo + .marcas { margin-top: 20px; }
.rostos { margin: 36px calc(50% - 50vw) 0; overflow: hidden; text-align: left; }
.rostos-trilho { display: flex; gap: 14px; width: max-content; animation: corre-tres 40s linear infinite reverse; }
.rostos-trilho figure { margin: 0; width: 150px; flex: none; }
@media (min-width: 900px) { .rostos-trilho figure { width: 210px; } .rostos-trilho { gap: 18px; } }
.rostos-trilho .ft { display: block; overflow: hidden; border-radius: 14px; }
.rostos-trilho img { display: block; width: 100%; height: auto; aspect-ratio: 228 / 288; object-fit: cover; }
.rostos-trilho figcaption { font-size: 13px; line-height: 1.3; color: var(--navy); margin-top: 8px; font-family: 'Poppins', sans-serif; font-weight: 600; }
@keyframes corre-tres { to { transform: translateX(-33.3333%); } }
.rostos + .numeros-brands { margin-top: 48px; }
@media (prefers-reduced-motion: reduce) { .rostos-trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .rostos-trilho figure[aria-hidden] { display: none; } }

/* Raio-X: título e subtítulos são frases inteiras escritas pelo Claude do VPS. Em Title Case ficavam pesados;
   a Bruna pediu só a primeira letra maiúscula (07/11/2026). */
.raiox h1, .raiox h2, .raiox .faixa-gargalo .frase { text-transform: none; }

/* 07/11/2026: no celular, logos e pessoas em 2 linhas, cada linha correndo num sentido (pedido da Bruna).
   No computador fica uma linha só. Cada linha repete a própria lista 3 vezes para emendar sem buraco. */
.so-cel { display: none !important; }
@media (max-width: 899px) {
  .so-pc { display: none !important; }
  .marcas-trilho.so-cel, .rostos-trilho.so-cel { display: flex !important; }
  .marcas-trilho.so-cel { animation-name: corre-tres; animation-duration: 30s; }
  .marcas-trilho.so-cel + .marcas-trilho.so-cel { margin-top: 22px; }
  .rostos-trilho.so-cel { animation-duration: 28s; gap: 12px; }
  .rostos-trilho.so-cel figure { width: 120px; }
  .rostos-trilho.so-cel figcaption { font-size: 12px; }
  .rostos-trilho.so-cel + .rostos-trilho.so-cel { margin-top: 16px; }
  .marcas-trilho.volta { animation-direction: reverse; }
  .rostos-trilho.volta { animation-direction: normal; }
}
@media (prefers-reduced-motion: reduce) { .marcas-trilho img[alt=""], .rostos-trilho figure[aria-hidden] { display: none; } }

/* 07/11/2026: números oficiais da Brands viram 4 (empresas, faturamento dos clientes, mídia e ABRID).
   2 por linha no celular, 4 no computador. */
.numeros-brands { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
.numeros-brands b { font-size: clamp(30px, 8.4vw, 56px); }
.numeros-brands span { font-size: 14px; }
@media (min-width: 900px) { .numeros-brands { grid-template-columns: repeat(4, 1fr); gap: 0; } .numeros-brands b { font-size: 48px; } .numeros-brands span { font-size: 15px; padding-inline: 12px; } }

/* 07/11/2026: as fotos são pessoas, então ganham o próprio título ("Nos bastidores de"), separado do título das logos.
   Os cases do "Na prática" viraram 4 e ficam em 2 por linha a partir do tablet. */
.rostos-titulo { text-align: center; margin: 40px 0 0; }
.rostos-titulo + .rostos { margin-top: 18px; }
@media (min-width: 720px) { .prova { grid-template-columns: 1fr 1fr; } .tile b { font-size: clamp(56px, 6vw, 72px); white-space: nowrap; } }

/* Quiz de uma pergunta por tela (08/11/2026): campo de dado grande, como resposta, e espaço para o consentimento. */
.campo-grande { width: 100%; font-size: 20px; padding: 18px 18px; margin-top: 18px; }
.campo-grande + .consent { margin-top: 20px; }
.tela .opcoes { margin-top: 20px; }
.tela .contador { margin-bottom: 12px; }

/* Raio-X a caminho (08/11/2026): diz que fica pronto em 10 minutos, que chega no WhatsApp e no e-mail,
   e puxa o lead para mandar a primeira mensagem. Tudo anima para a pessoa não sair sem clicar. */
.aviso-raiox { display: flex; gap: 12px; align-items: flex-start; background: var(--lilas); border-radius: var(--raio-p); padding: 14px 16px; margin-top: 14px; }
.aviso-raiox p { font-size: 15px; color: var(--azul); }
.aviso-raiox b { color: var(--navy); }
.chegando { background: var(--cinza); border-radius: var(--raio); padding: 28px 20px 30px; margin: 18px 0 28px; text-align: center;
  animation: tela-entra .6s var(--apple) both; }
.chegando h2 { font-size: clamp(26px, 5.4vw, 40px); }
.relogio-grande { display: grid; justify-items: center; margin: 6px 0 16px; }
.relogio-grande span { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(56px, 16vw, 96px); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.relogio-grande small { color: var(--azul); font-size: 14px; margin-top: 4px; }
.etapas { list-style: none; display: grid; gap: 8px; max-width: 420px; margin: 0 auto 18px; text-align: left; }
.etapas li { display: flex; gap: 10px; align-items: center; background: var(--branco); border-radius: 14px; padding: 11px 14px; font-size: 15px;
  color: var(--apagado); transition: color .4s; }
.etapas li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linha); }
.etapas li.agora { color: var(--navy); }
.etapas li.agora::before { border-color: var(--linha); border-top-color: var(--bordo); animation: gira .8s linear infinite; }
.etapas li.feita { color: var(--navy); }
.etapas li.feita::before { content: "✓"; border: 0; background: var(--navy); color: var(--branco); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; animation: marca .35s var(--apple); }
.chegando-txt { max-width: 460px; margin: 0 auto 10px; color: var(--azul); }
.chegando-txt b { color: var(--navy); }
.zap-chama { display: grid; justify-items: center; gap: 8px; }
.seta { font-size: 28px; color: var(--bordo); font-weight: 700; animation: pula 1.1s ease-in-out infinite; }
.btn-zap { gap: 10px; position: relative; font-size: 15px; padding: 20px 28px; width: 100%; max-width: 420px;
  animation: chama 2.4s ease-in-out infinite; }
.btn-zap svg { color: #25D366; flex: none; }
.btn-zap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(149,5,5,.45);
  animation: pulso 1.8s ease-out infinite; pointer-events: none; }
.zap-nota { font-size: 14px; color: var(--azul); }
.chegando.enviado .btn-zap, .chegando.enviado .btn-zap::after, .chegando.enviado .seta { animation: none; }
.chegando.enviado .seta { visibility: hidden; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes marca { from { transform: scale(.3); } }
@keyframes pula { 50% { transform: translateY(7px); } }
@keyframes pulso { to { box-shadow: 0 0 0 18px rgba(149,5,5,0); } }
@keyframes chama { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-2deg) scale(1.03); } 90% { transform: rotate(2deg) scale(1.03); } 94% { transform: rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .seta, .btn-zap, .btn-zap::after, .etapas li.agora::before { animation: none; } }
@media print { .chegando { display: none; } }
.btn-zap { white-space: nowrap; letter-spacing: .06em; }
@media (max-width: 380px) { .btn-zap { font-size: 13px; padding: 18px 16px; } }

/* Rodapé da capa do checkup (09/11/2026) */
body:has(.rodape:not([hidden])) { padding-bottom: 0; } /* a barra do quiz não aparece na capa */
.rodape { background: var(--navy); color: var(--branco); margin-top: 0; padding: 40px 16px 28px; }
.rodape[hidden] { display: none; }
.rodape-in { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; }
.rodape-marca img { filter: brightness(0) invert(1); height: 33px; width: auto; }
.rodape-marca p { margin: 10px 0 0; font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 15px; opacity: .85; }
.rodape-links { display: flex; flex-direction: column; gap: 10px; }
.rodape-links a { color: var(--branco); text-decoration: none; font-size: 15px; opacity: .85; overflow-wrap: anywhere; }
.rodape-links a:hover, .rodape-links a:focus-visible { opacity: 1; text-decoration: underline; }
.rodape-copy { max-width: 1080px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; opacity: .6; }
@media print { .rodape { display: none; } }