/* PimentaPT · site do Pedro — folha de estilo.
   Pensada primeiro para o telemóvel, como a app. */
:root {
  --fundo:   #07080b;
  --fundo-2: #101218;
  --texto:   #f2f4f8;
  --texto-2: #8b95a7;
  --chama:   #ff4a1c;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
/* Sem isto, TODAS as ligações saem no azul de fábrica do browser — a marca
   apareceu «Pimenta» azul e «PT» vermelho na primeira captura. */
a { color: inherit; text-decoration: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte); color: var(--texto); background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
.centro { padding: 2rem 1.5rem; max-width: 34rem; }
.marca {
  display: flex; align-items: center; gap: .625rem; margin-bottom: 2rem;
}
.marca-chama {
  width: 14px; height: 18px; flex: none; border-radius: 60% 60% 50% 50% / 70% 70% 40% 40%;
  background: linear-gradient(180deg, var(--chama), #ffb020);
}
.marca-nome { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.marca-nome b { color: var(--chama); font-weight: 800; }
h1 {
  margin: 0 0 1rem; font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.05; letter-spacing: -.03em; font-weight: 800;
}
h1 em { font-style: normal; color: var(--chama); }
p { margin: 0; color: var(--texto-2); font-size: 1.0625rem; line-height: 1.55; }
.linha {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #1c2029;
  font-size: .8125rem; color: #5c6577;
}

/* ============================ ESTRUTURA DO SITE ========================== */
/* O corpo deixa de ser uma caixa centrada quando há página a sério. */
body { display: block; }

.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem;
  /* Sem fundo, o conteúdo passava por baixo da barra e ficava ilegível — a
     marca por cima de um cartão a meio da rolagem. Apanhado numa captura. */
  background: rgba(7, 8, 11, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
/* As âncoras têm de parar ABAIXO da barra: sem isto, quem carrega em «ver as
   formas de treinar» chega com o título já escondido por trás dela. */
[id] { scroll-margin-top: 4.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* O botão do topo é curto («Falar») de propósito: assim cabe ao lado da marca
   mesmo num telemóvel estreito. Escondê-lo, como estava, tirava a acção mais
   valiosa do aparelho onde ela mais conta. */
.btn-topo { padding: .5rem 1rem; font-size: .8125rem; }
.btn {
  display: inline-block; padding: .75rem 1.125rem; border-radius: 999px;
  font-size: .875rem; font-weight: 650; text-decoration: none; line-height: 1;
  border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.btn-chama { background: var(--chama); color: #150500; font-weight: 750; }
.btn-chama:hover { background: #ff6b43; }
.btn-fantasma { border-color: #2a2f3a; color: var(--texto); }
.btn-fantasma:hover { border-color: #4a515f; }
.topo .btn-fantasma { padding: .5rem .875rem; font-size: .8125rem; }

/* --- herói --- */
/* Duas camadas empilhadas, não sobrepostas: o corpo em cima, o texto em baixo.
   Sobrepostos, o título tapava a figura e a figura sujava o título — os dois
   ao centro, a disputar o mesmo sítio. */
.heroi {
  min-height: 100svh; width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.heroi-palco { position: relative; flex: 1 1 46svh; min-height: 34svh; }
.heroi canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.heroi-texto {
  flex: 0 0 auto; text-align: center;
  /* `min-width: 0` e a largura em `min()` são o que impede a caixa de crescer
     com a frase mais comprida: sem isso a página ficava mais larga do que o
     telemóvel e os botões saíam pela direita. */
  width: 100%; min-width: 0; max-width: min(46rem, 100%);
  margin: 0 auto; padding: 0 1.5rem 3.5rem;
}
h1 {
  margin: 0 0 1rem; font-size: clamp(2rem, 7.5vw, 3.75rem);
  line-height: 1.03; letter-spacing: -.035em; font-weight: 800;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--chama); }
.chamada {
  font-size: clamp(1rem, 3.4vw, 1.125rem);
  max-width: min(34rem, 100%); margin: 0 auto;
}
.heroi-accoes {
  display: flex; gap: .625rem; justify-content: center; flex-wrap: wrap;
  margin: 1.75rem 0 1rem;
}
.heroi-accoes .btn { max-width: 100%; }
.mini { font-size: .8125rem; color: #5c6577; }

/* --- faixas --- */
.faixa { max-width: 46rem; margin: 0 auto; padding: 5rem 1.5rem; }
/* A tira já traz o seu próprio espaço em baixo; somado ao da secção seguinte,
   ficava meio ecrã vazio entre os testemunhos e o «Começar». */
.faixa.larga { padding-bottom: 1.5rem; }
.faixa h2 {
  margin: 0 0 1rem; font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 800;
}
.faixa h2 em { font-style: normal; color: var(--chama); }
.faixa p { font-size: 1.0625rem; }
.por-escrever { color: #5c6577; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------- oferta e prova --- */
.sobrancelha {
  margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chama);
}
.intro { max-width: 38rem; }

.cartoes {
  display: grid; gap: 1rem; margin: 2.5rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cartao {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.5rem 1.375rem; border-radius: 18px;
  border: 1px solid #1c2029; background: var(--fundo-2);
}
/* O do meio é o que a maioria deve escolher — e a única forma de o dizer sem o
   escrever é dar-lhe peso. */
.cartao.destaque { border-color: rgba(255, 74, 28, .45); background: #14100f; }
.cartao h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
.para-quem { margin: 0; color: var(--texto-2); font-size: .9375rem; }
.inclui { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.inclui li {
  position: relative; padding-left: 1.25rem;
  font-size: .9375rem; color: var(--texto-2); line-height: 1.4;
}
.inclui li::before { content: "—"; position: absolute; left: 0; color: var(--chama); }
/* «Sob consulta» sozinho lê-se como «é caro e não te dizem». A linha pequena
   por baixo dá o MOTIVO, e um motivo transforma segredo em feito à medida. */
.preco {
  margin: .75rem 0 .25rem; font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.02em; display: flex; flex-direction: column; gap: .25rem;
}
.preco span {
  font-size: .8125rem; font-weight: 500; color: var(--texto-2);
  letter-spacing: 0; line-height: 1.35;
}
.nota-preco {
  margin: 1.5rem 0 0; padding: 1rem 1.125rem;
  border-left: 2px solid var(--chama); background: rgba(255, 74, 28, .06);
  border-radius: 0 12px 12px 0;
  font-size: .9375rem; color: var(--texto-2); max-width: 38rem;
}
.cartao .btn { margin-top: auto; }
.btn-largo { display: block; text-align: center; }


.complemento {
  display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
  justify-content: space-between; margin-top: 1rem;
  padding: 1.5rem 1.375rem; border-radius: 18px;
  border: 1px dashed #262b35;
}
.complemento h3 { margin: 0 0 .375rem; font-size: 1.125rem; }
.complemento p { margin: 0; color: var(--texto-2); font-size: .9375rem; max-width: 34rem; }

.provas { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.provas li {
  display: flex; flex-direction: column; gap: .125rem;
  padding: 1rem 1.125rem; border-radius: 14px;
  border: 1px solid #1c2029; background: var(--fundo-2);
}
.provas b { font-size: .9375rem; }
.provas span { font-size: .875rem; color: var(--texto-2); }

.rodape {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 3rem;
  border-top: 1px solid #1a1d24; font-size: .8125rem; color: #5c6577;
}

/* --------------------------------------------------------------- falar --- */
.fala-accao { margin: 2rem 0 1.25rem; }
.btn-grande { padding: 1rem 1.5rem; font-size: 1rem; }
/* Enquanto não houver número, o botão diz-se por ligar em vez de mentir. */
.btn.por-ligar { opacity: .45; cursor: not-allowed; }
.btn.por-ligar::after { content: " · por ligar"; font-weight: 500; }

/* A bio do Pedro chegou a 09/09 e a secção deixou de ser uma grelha de foto +
   texto: o retrato faz falta é lá no fim, ao pé do botão. Fica só a medida de
   linha, que é o que decide se um parágrafo se lê. */
.quem-texto { margin-top: 1.5rem; }
.quem-texto p { max-width: 38rem; }
/* O reset lá em cima põe `p { margin: 0 }`, e sem isto os quatro parágrafos
   saem colados num bloco só — vi-o na captura, não no código. */
.quem-texto p + p { margin-top: 1rem; }

.testemunhos { display: grid; gap: 1rem; margin-top: 2rem; }
.testemunhos blockquote { margin: 0; }
.testemunhos p { margin: 0 0 .625rem; font-size: 1rem; line-height: 1.5; }
.testemunhos footer { font-size: .8125rem; color: #5c6577; }

/* ---------------------------------------------------- tira de testemunhos --- */
/* Uma tira que se arrasta, e não um carrossel com setas.
   Com setas, sete dos oito ficam escondidos a cada momento e os motores de
   busca não lêem nenhum. Assim estão todos na página; o dedo é que escolhe. E
   o cartão seguinte fica meio à vista — é isso que diz «há mais», sem precisar
   de o escrever. */
.faixa.larga { max-width: none; padding-left: 0; padding-right: 0; }
.faixa.larga > :not(.tira) { max-width: 46rem; margin-left: auto; margin-right: auto;
  padding-left: 1.5rem; padding-right: 1.5rem; }
.tira {
  /* `flex-start` e não o esticar de fábrica: com oito testemunhos de tamanhos
     muito diferentes, todos ficavam à altura do mais comprido e os curtos
     apareciam com meio cartão vazio. Cada um passa a ter a sua altura — os
     fundos ficam desalinhados, e num carrossel horizontal onde se vê um de
     cada vez isso não se nota; o vazio notava-se. */
  align-items: flex-start;
  display: flex; gap: 1rem; margin-top: 2rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem 1.5rem 1.5rem;
  scrollbar-width: thin; scrollbar-color: #2b3240 transparent;
}
.tira blockquote {
  flex: 0 0 min(22rem, 82vw); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; gap: .875rem;
  padding: 1.5rem 1.375rem; border-radius: 18px;
  border: 1px solid #1c2029; background: var(--fundo-2);
}
.tira blockquote p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--texto); }
.tira blockquote p::before { content: "“"; color: var(--chama); font-size: 1.5rem; line-height: 0; }
.tira footer { margin-top: auto; display: flex; flex-direction: column; gap: .125rem; }
.tira footer b { font-size: .9375rem; }
.tira footer span { font-size: .75rem; color: #5c6577; line-height: 1.3; }

.rodape a { color: var(--texto-2); }
.rodape a:hover { color: var(--chama); }

/* --------------------------------------------------- o que é comum às três --- */
/* A app não é uma linha dentro de um cartão: é o chão dos três. Desenhada como
   faixa POR BAIXO deles, em vez de item de lista, porque a forma tem de dizer o
   mesmo que as palavras — se estivesse dentro de um, era desse. */
.comum {
  margin-top: 1rem; padding: 1.5rem 1.375rem; border-radius: 18px;
  border: 1px solid rgba(255, 74, 28, .3); background: rgba(255, 74, 28, .05);
}
.comum-tit {
  margin: 0 0 .875rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chama);
}
.comum ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .625rem; }
.comum li {
  position: relative; padding-left: 1.5rem;
  font-size: .9375rem; color: var(--texto); line-height: 1.45;
}
.comum li::before {
  content: "✓"; position: absolute; left: 0; color: var(--chama); font-weight: 700;
}
.comum-mais {
  display: inline-block; margin-top: 1rem;
  font-size: .875rem; font-weight: 650; color: var(--chama);
}
.comum-mais:hover { text-decoration: underline; }

/* -------------------------------------------------------------- dúvidas --- */
.duvidas { margin: 2rem 0 0; }
.duvidas dt {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--chama); margin-top: 1.75rem;
}
.duvidas dt:first-child { margin-top: 0; }
.duvidas dd {
  margin: .5rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--texto-2);
  padding-left: 1rem; border-left: 1px solid #262b35;
}

/* --------------------------------------------------------------- retrato --- */
.retrato { margin: 0; }
.retrato img {
  /* `height: auto` é obrigatório: os atributos width/height do <img> — que lá
     estão de propósito, para o texto não saltar enquanto a imagem carrega —
     valem como altura fixa em CSS e ganham à `aspect-ratio`. Sem isto a
     fotografia sai com 136 px de largura e os 1000 px originais de altura. */
  width: 100%; max-width: 16rem; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 20%;   /* pela cara, não pelo tronco */
  border-radius: 18px; display: block;
}

/* ------------------------------------------------- a cara ao pé do botão --- */
.fala-bloco {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin: 2rem 0 1.25rem;
}
.retrato-pequeno img { width: 8.5rem; max-width: 8.5rem; }
.fala-bloco .fala-accao { margin: 0; }

/* ========================= VIDA: o que se mexe, e porquê ================== */
/* Uma regra manda em tudo o que vem a seguir: **nada se esconde sem o
   JavaScript ter chegado**. As opacidades a zero só valem debaixo de
   `html.anima`, que o `vida.js` põe ao arrancar. Sem essa cautela, um erro no
   script deixava a página em branco — e a animação é o enfeite, o texto é o
   site. */

/* O percurso é uma VARIÁVEL, e essa é a lição desta secção.
   A primeira versão subia 14 px, fossem quais fossem. Numa pergunta do «E se…»,
   que tem 22 px de altura, 14 px são dois terços do próprio bloco e vê-se muito
   bem. Num cartão de 386 px são 3,6% — não se vê nada. O Fábio disse-o de
   caras: «só há dinâmica quando aparecem as perguntas». Um percurso fixo não
   diz a mesma coisa a um bloco pequeno e a um grande; tem de ser proporcional
   ao que está a entrar. */
html.anima .surge {
  /* Declarados aqui e não escondidos num valor por omissão do `var()`: assim
     lêem-se de fora e um teste pode compará-los. Com o valor só na chamada, a
     verificação media 0 para os blocos de texto e passava a comparar 34 com
     nada — verde a dizer o que não sabia. */
  --sobe: 22px;
  --encolhe: 1;
  opacity: 0;
  transform: translateY(var(--sobe)) scale(var(--encolhe));
}
html.anima .surge.dentro {
  opacity: 1; transform: none;
  /* A curva sai depressa e assenta devagar: uma entrada linear lê-se como uma
     máquina a empurrar, esta lê-se como uma coisa a pousar. */
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0s),
              transform .62s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0s);
}

/* Um cartão é uma superfície, não uma linha de texto: além de subir mais,
   CRESCE dos 96,5%. A escala mexe os quatro lados ao mesmo tempo e é o que se
   nota num bloco grande — subir sozinho, não. */
html.anima .cartao.surge,
html.anima .comum.surge,
html.anima .complemento.surge,
html.anima .tira.surge,
html.anima .fala-bloco.surge,
html.anima .provas > li.surge { --sobe: 40px; --encolhe: .955; }

/* O herói entra ao carregar, sem esperar por rolagem nenhuma: é o primeiro
   segundo que decide se o site parece vivo. */
html.anima .heroi-texto > .surge { --sobe: 26px; }

/* --- e por dentro dos cartões --- */
/* As linhas de cada cartão entram uma a uma, DEPOIS do cartão. Ficam presas à
   entrada do próprio cartão (`.surge.dentro`) e não têm observador nenhum, e
   isso é de propósito: assim não existe o caso de um cartão aparecer com a
   lista vazia. Enquanto o cartão está escondido, elas também estão — e o
   cartão escondido é a única coisa que se pode perder. */
html.anima .cartao.surge .inclui > li,
html.anima .comum.surge ul > li { opacity: 0; transform: translateX(-8px); }
html.anima .cartao.surge.dentro .inclui > li,
html.anima .comum.surge.dentro ul > li {
  opacity: 1; transform: none;
  transition: opacity .42s ease, transform .42s ease;
  transition-delay: calc(var(--atraso, 0s) + 300ms);
}
html.anima .cartao.surge.dentro .inclui > li:nth-child(2),
html.anima .comum.surge.dentro ul > li:nth-child(2) { transition-delay: calc(var(--atraso, 0s) + 390ms); }
html.anima .cartao.surge.dentro .inclui > li:nth-child(3),
html.anima .comum.surge.dentro ul > li:nth-child(3) { transition-delay: calc(var(--atraso, 0s) + 480ms); }

/* Vêm da ESQUERDA, e os blocos vêm de baixo. Duas direcções diferentes para
   dois níveis diferentes: se tudo subisse, a cascata de dentro perdia-se
   dentro da cascata de fora. */

/* --- reagir ao toque e ao rato --- */
/* Só onde HÁ rato: num telemóvel, `:hover` fica colado depois do toque e o
   cartão ficava levantado até se tocar noutro sítio. */
.cartao, .tira blockquote, .provas li {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Tudo o que vai reagir tem de saber transitar. Declarado uma vez, aqui. */
.cartao h3, .inclui li, .comum li, .comum, .complemento,
.duvidas dt, .duvidas dd, .comum-mais, .rodape a, .marca-chama,
.tira blockquote p::before, .retrato img, .provas b {
  transition: color .2s ease, transform .25s ease, border-color .25s ease,
              background-color .25s ease, box-shadow .25s ease, filter .25s ease,
              padding-left .22s ease;
}
/* O retrato tem de CORTAR o que cresce lá dentro, senão a fotografia
   transborda da moldura ao ampliar. */
.retrato { overflow: hidden; border-radius: 18px; line-height: 0; width: max-content; }
.retrato img { border-radius: 0; }

@media (hover: hover) {
  /* --- o cartão, e o que se mexe DENTRO dele --- */
  /* Passar o rato no cartão mexe o cartão E as suas partes. É a diferença
     entre um objecto que reage e um objecto que só se desloca. */
  .cartao:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 74, 28, .55);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 74, 28, .12);
  }
  .cartao:hover h3 { color: var(--chama); }
  /* A LINHA abre, o travessão fica. Empurrar o travessão para a direita
     colava-o ao texto («—Sessões», sem espaço) — vi-o numa captura com o estado
     de rato forçado. E não se pode empurrar a linha com `transform`: a regra da
     entrada já lhe fixa `transform: none` e tem mais peso, portanto o hover
     nunca ganharia. Mexer o espaço à esquerda não briga com ninguém. */
  .cartao:hover .inclui li { padding-left: 1.5rem; }
  /* O botão acende ao passar por QUALQUER ponto do cartão, e não só por cima
     dele: quem está a decidir passa o rato pelo texto, não pelo botão. */
  .cartao:hover .btn-fantasma { border-color: rgba(255, 74, 28, .55); }
  .cartao:hover .btn-chama { background: #ff6b43; }

  /* --- as outras superfícies --- */
  .tira blockquote:hover {
    transform: translateY(-3px); border-color: #3a4351;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  }
  .tira blockquote:hover p::before { transform: scale(1.35); display: inline-block; }
  .provas li:hover { transform: translateY(-3px); border-color: #333b49; }
  .provas li:hover b { color: var(--chama); }
  .comum:hover { border-color: rgba(255, 74, 28, .55); transform: translateY(-2px); }
  .comum:hover li { padding-left: 1.75rem; }
  .complemento:hover { border-color: rgba(255, 74, 28, .45); transform: translateY(-2px); }

  /* --- as perguntas --- */
  .duvidas dt:hover { transform: translateX(5px); }
  .duvidas dt:hover + dd { border-left-color: rgba(255, 74, 28, .55); }

  /* --- as ligações deslizam --- */
  /* Uma ligação que desliza para a direita diz «vai por aqui» sem uma palavra.
     É o gesto que o site da Leanked usa em todas as suas, e é dos mais baratos
     que existem. */
  .comum-mais:hover { transform: translateX(5px); text-decoration: none; }
  .rodape a:hover { transform: translateX(4px); display: inline-block; }

  /* --- a marca e os botões --- */
  /* A chama não pode usar `transform` no hover: já está a respirar com uma
     animação que ocupa essa propriedade e a animação ganharia sempre. Acende-se
     por brilho e halo, que é o que sobra e resulta melhor no escuro. */
  .marca:hover .marca-chama { filter: brightness(1.35); box-shadow: 0 0 14px rgba(255, 122, 40, .65); }
  .btn:hover { transform: translateY(-2px); }
  .btn-chama:hover { box-shadow: 0 10px 26px rgba(255, 74, 28, .35); }

  /* --- a fotografia amplia dentro da moldura --- */
  .retrato:hover img { transform: scale(1.05); }
}
/* O botão cede um bocadinho ao ser carregado. É o sinal mais barato que existe
   de que a coisa reagiu — e no telemóvel, onde não há `:hover`, é o único. */
.btn { transition: border-color .15s, background .15s, transform .12s ease; }
.btn:active { transform: scale(.97); }

/* --- a chama da marca respira --- */
@keyframes respirar {
  0%, 100% { transform: scaleY(1);    opacity: 1;   }
  50%      { transform: scaleY(1.14); opacity: .86; }
}
.marca-chama { transform-origin: 50% 100%; animation: respirar 3.4s ease-in-out infinite; }

/* --- a barra do topo, depois de se sair do topo --- */
.topo { transition: border-color .3s ease, background .3s ease; }
.topo.rolado { border-bottom-color: #1c2029; background: rgba(7, 8, 11, .92); }

/* --- quanto da tira já se viu --- */
/* Uma tira que se arrasta não diz quanto falta. Esta linha diz, e é a única
   coisa nova que aparece por baixo dos testemunhos. */
.tira-progresso {
  max-width: 46rem; margin: 0 auto; padding: 0 1.5rem;
  height: 2px; background: #1a1d24; border-radius: 2px; overflow: hidden;
}
.tira-progresso i {
  display: block; height: 100%; background: var(--chama); border-radius: 2px;
  transform-origin: 0 50%; transform: scaleX(.04);
  transition: transform .18s linear;
}

/* --- quem pediu menos movimento --- */
/* A regra geral lá em cima já zera as durações, mas isso deixava os blocos a
   ENTRAR à mesma, só que de repente. Aqui não entram: já lá estão. */
@media (prefers-reduced-motion: reduce) {
  html.anima .surge, html.anima .surge.dentro { opacity: 1; transform: none; }
  html.anima .cartao.surge .inclui > li,
  html.anima .comum.surge ul > li { opacity: 1; transform: none; }
  .marca-chama { animation: none; }
  .cartao:hover, .tira blockquote:hover, .provas li:hover,
  .comum:hover, .complemento:hover, .duvidas dt:hover,
  .comum-mais:hover, .rodape a:hover, .btn:hover, .retrato:hover img { transform: none; }
  .rolar span { animation: none; }
}


/* --------------------------------------------- a linha que diz «há mais» --- */
/* O site da Leanked tem UMA animação contínua em toda a folha: um traço
   vermelho que corre para baixo. É pouca coisa e faz muito — há sempre alguma
   coisa a acontecer, mesmo com o rato parado, e diz que a página continua.
   Aqui vale o mesmo, e ainda tem função: o herói ocupa o ecrã inteiro e sem
   isto nada promete que exista mais alguma coisa por baixo. */
.rolar {
  width: 1px; height: 36px; margin: .5rem auto 0;
  background: #232833; overflow: hidden; position: relative;
}
.rolar span {
  position: absolute; left: 0; top: 0; width: 100%; height: 45%;
  background: var(--chama);
  animation: correr-linha 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes correr-linha {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(260%); }
}

/* ------------------------------------------- a página dos treinadores --- */
/* O `h1` da folha está dimensionado para o herói, que ocupa um ecrã inteiro.
   Numa faixa normal ficava a gritar; aqui usa a escala dos `h2`, que é a que a
   página tem. */
.h1-b2b {
  margin: 0 0 1rem; font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 800;
}
.h1-b2b em { font-style: normal; color: var(--chama); }

/* A ponte entre os dois públicos. Discreta e no FIM: quem veio treinar já
   decidiu quando chega aqui, e quem é treinador reconhece-se na primeira linha.
   Uma faixa destas a meio da página roubava a conversa a quem vinha treinar. */
.ponte {
  max-width: 46rem; margin: 0 auto; padding: 0 1.5rem 3rem;
}
.ponte-caixa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.25rem 1.375rem; border-radius: 18px;
  border: 1px dashed #262b35;
}
.ponte-caixa p { margin: 0; font-size: .9375rem; max-width: 30rem; }
.ponte-caixa b { color: var(--texto); }

/* -------------------------------------------- a tira dos treinadores --- */
/* Altura CONSTANTE, e é o que faz isto funcionar: o cabeçalho é fixo e é
   empurrado por ela, e as âncoras têm de parar abaixo dos dois. Se a tira
   quebrasse em duas linhas num telemóvel estreito, o cabeçalho descia com ela e
   as âncoras passavam a parar no sítio errado. Daí `nowrap` e reticências. */
:root { --barra-h: 34px; }
.barra-b2b {
  position: fixed; inset: 0 0 auto 0; z-index: 21;
  height: var(--barra-h); display: flex; align-items: center; justify-content: center;
  padding: 0 1rem; gap: .375rem;
  background: linear-gradient(90deg, #1a0c06, #2a1108 55%, #1a0c06);
  border-bottom: 1px solid rgba(255, 74, 28, .35);
  font-size: .75rem; color: var(--texto-2);
  white-space: nowrap; overflow: hidden;
}
.barra-b2b span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-b2b b { color: var(--chama); font-weight: 700; }
@media (hover: hover) {
  .barra-b2b:hover { background: linear-gradient(90deg, #22100a, #37160b 55%, #22100a); }
  .barra-b2b:hover b { color: #ff7a49; }
}

/* O cabeçalho desce o que a tira ocupa, e as âncoras param abaixo dos dois.
   Marcado por uma CLASSE no <body>, e não por `:has()`: o selector novo não
   existe em telemóveis mais antigos, e aí o cabeçalho ficaria por baixo da
   tira, a tapar-lhe o texto. É a mesma regra de casa do resto do site. */
body.com-barra .topo { top: var(--barra-h); }
body.com-barra [id] { scroll-margin-top: calc(4.5rem + var(--barra-h)); }
/* O herói perde a altura da tira, senão a página começa com um resto a
   transbordar por baixo da dobra. */
body.com-barra .heroi { min-height: calc(100svh - var(--barra-h)); }

@media (prefers-reduced-motion: reduce) {
  .barra-b2b { transition: none; }
}