/* ==========================================================================
   André — landing page VSL
   Paleta: papel quente, tinta café, âmbar.
   ========================================================================== */


:root{
  --paper:      #F5F1E9;   /* fundo principal, creme quente               */
  --paper-warm: #EDE7D9;   /* secções alternadas                          */
  --card:       #FCFAF4;   /* cartões e moldura do vídeo                  */
  --ink:        #1F1A16;   /* texto principal, quase preto com castanho   */
  --ink-soft:   #7A6A5C;   /* texto secundário e itálicos cinza           */
  --ember:      #B07840;   /* caramelo dos destaques em itálico           */
  --ember-deep: #96632F;   /* caramelo em hover                           */
  --rule:       #E3DCD1;   /* linhas divisórias                           */
  --erro:       #D42A18;   /* o ✕ do antes, vermelho a sério              */
  --certo:      #12874A;   /* o ✓ do depois, verde a sério                 */

  /* castanho escuro para as ações principais. o hover aquece e clareia,
     para a mudança se ver mesmo                                          */
  --cta-top:      #5C3618;
  --cta-bottom:   #4F3320;
  --cta-top-h:    #83522A;
  --cta-bottom-h: #6A4527;
  --cta-ink:      #F5F1E9;
  --cta-shadow:   36, 22, 10;

  --maxw:        1180px;
  --maxw-hero:   1020px;
  --maxw-narrow: 760px;

  --step: clamp(88px, 11vw, 152px);   /* respiração vertical das secções */

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after{ box-sizing: border-box; }

/* O Safari do iPhone aumenta o texto por sua conta quando a página volta
   de um sítio onde esteve tapada — por exemplo depois de se fechar a
   janela do Calendly. Isto trava esse aumento: o texto fica do tamanho
   que aqui se define, sempre. */
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grão de papel: dá textura impressa ao creme, sem tocar em nada. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  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='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

img{ display: block; max-width: 100%; height: auto; }

a{ color: inherit; }

:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-size: 14px;
}
.skip:focus{ left: 12px; top: 12px; }

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-hero{ max-width: var(--maxw-hero); }
.wrap-narrow{ max-width: var(--maxw-narrow); }

.section{ padding-block: var(--step); }

/* As cores de fundo alternam pela posição da secção na página, não pelo
   nome: assim, mudando a ordem das secções, continua sempre claro, escuro,
   claro, escuro — sem duas seguidas iguais. */
main > .section:nth-of-type(odd){ background: var(--paper); --fundo-seccao: var(--paper); }
main > .section:nth-of-type(even){ background: var(--paper-warm); --fundo-seccao: var(--paper-warm); }/* ── elementos partilhados ──────────────────────────────────────────────── */

.eyebrow{
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember);
}
.eyebrow-center{ text-align: center; }

.section-title{
  margin: 0 0 28px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 110;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.018em;
}
.section-title em{
  font-style: italic;
  color: var(--ember);
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 110;
}
.section-title-center{ text-align: center; }

/* Pontuação final de um título cujo destaque não fica no fim da frase.
   Nesses, o ponto não encosta ao <em> e ficava em tinta escura enquanto os
   outros fechavam a caramelo. Esta classe iguala-os. */
.section-title .ponto,
.vs-title .ponto{ color: var(--ember); }

.cta-block{ margin-top: 46px; text-align: center; }

.btn{
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 17px 46px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cta-top), var(--cta-bottom));
  color: var(--cta-ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  /* aresta clara em cima + contacto curto + sombra larga: dá volume */
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 232, .22),
    0 1px 2px rgba(var(--cta-shadow), .26),
    0 14px 30px -14px rgba(var(--cta-shadow), .62);
  transition: background .24s ease, transform .24s ease, box-shadow .24s ease;
}

/* À espera do Calendly.

   Quase sempre não se chega a ver: o script já lá está quando se carrega, e
   a janela abre de imediato. Mas numa rede fraca pode haver um instante de
   espera, e um botão que não responde parece um botão avariado. Esta barra
   a atravessar o fundo diz "estou a tratar disso" sem mudar nada de sítio. */
.btn[aria-busy="true"]{ cursor: progress; }

.btn[aria-busy="true"]::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(245, 241, 233, .85);
  transform-origin: left;
  animation: btn-espera 1.1s ease-in-out infinite;
}

@keyframes btn-espera{
  0%   { transform: scaleX(0);   opacity: .25; }
  50%  { transform: scaleX(1);   opacity: .9; }
  100% { transform: scaleX(0);   opacity: .25; transform-origin: right; }
}

@media (prefers-reduced-motion: reduce){
  .btn[aria-busy="true"]::before{ animation: none; transform: scaleX(1); opacity: .6; }
}

/* brilho que atravessa o botão quando o rato passa por cima */
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 38%,
              rgba(255, 236, 208, .26) 50%,
              transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.3, .7, .3, 1);
}

.btn:hover{
  background: linear-gradient(180deg, var(--cta-top-h), var(--cta-bottom-h));
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 220, .3),
    0 2px 4px rgba(var(--cta-shadow), .3),
    0 24px 42px -16px rgba(var(--cta-shadow), .72);
}
.btn:hover::after{ transform: translateX(130%); }
.btn:active{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 3px rgba(var(--cta-shadow), .38),
    0 1px 2px rgba(var(--cta-shadow), .22);
}.cta-note{
  margin: 16px 0 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ── hero ───────────────────────────────────────────────────────────────── */

/* topo curto: o título encosta à barra, o vídeo aparece quase de imediato */
.hero{
  text-align: center;
  padding-top: clamp(34px, 4.2vw, 58px);
}

/* O título é a promessa toda, duas frases — por isso é bastante mais pequeno
   do que um título de três palavras seria. A segunda frase vai em <em>, que
   aqui é bloco: cai para a linha de baixo, em itálico âmbar. */
.hero-title{
  margin: 0 auto;
  max-width: 52ch;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 120;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero-title em{
  display: block;
  font-style: italic;
  color: var(--ember);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
}

/* A 2.a página tem um título de três palavras. Ao corpo da primeira — que
   carrega duas frases — ficava minúsculo; curto pode e deve ser maior. */
.hero-title-short{
  max-width: 16ch;
  font-size: clamp(2.3rem, 5.4vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.026em;
}

.hero-sub{
  margin: 22px auto 0;
  max-width: 58ch;
  text-wrap: balance;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── player ─────────────────────────────────────────────────────────────── */

/* moldura clara à volta do vídeo, como uma fotografia montada */
.player{
  margin: clamp(38px, 4.6vw, 56px) 0 0;
  padding: 10px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 30px 60px -34px rgba(60, 36, 18, .5);
}

.player-surface{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-warm);
  cursor: pointer;
  line-height: 0;
}/* a VSL entra logo como iframe, sem poster nem botão por cima */
.player-vsl{ position: relative; }

/* ── O topo da página sobe um pouco, no computador ──────────────────────
   O vídeo ficava cortado em baixo em ecrãs de portátil: havia espaço a
   mais acima dele e não cabia tudo sem se mexer na página. São três
   sobras, tiradas sem encostar o título ao cimo do ecrã.

   O telemóvel fica como estava — lá o espaço não sobra, e o pedido era
   só para o computador.                                                 */
@media (min-width: 561px){

  /* O primeiro era invisível e era o mais tolo: o sprite dos ícones é um
     <svg>, um <svg> é inline, e um elemento inline solto no corpo da
     página cria uma linha de texto à sua volta — 29px de nada, mesmo por
     cima de tudo o resto. Tirá-lo do fluxo não lhe muda nada: os <use>
     continuam a ir buscar lá os ícones na mesma. */
  .sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

  /* os outros dois são respiração a mais: por cima do título, e entre o
     subtítulo e o vídeo */
  .hero{ padding-top: clamp(20px, 2.4vw, 34px); }
  .hero .player{ margin-top: clamp(28px, 3.2vw, 40px); }
}

/* tira por cima do vídeo, só enquanto ele está mudo */
/* Enquanto o vídeo está mudo, esta camada cobre-o de ponta a ponta: um
   véu leve com um botão grande ao meio. Cobrir tudo é de propósito —
   esconde o "Unmute" pequeno que o Vimeo põe lá em cima (não se pode
   desligar) e faz com que qualquer toque no vídeo ligue o som, sem ser
   preciso acertar no botão. Sai ao primeiro clique, e a partir daí o
   player fica livre. */
.vsl-som{
  position: absolute;
  inset: 10px;          /* a margem do cartão, para o véu ficar só sobre o vídeo */
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  /* O "Unmute" do Vimeo não se consegue desligar, por isso desaparece
     por baixo deste véu: escurecido e bem desfocado, deixa de se ler.
     O vídeo continua a correr atrás, como um fundo, e volta nítido ao
     primeiro toque. */
  background: rgba(31, 26, 22, .42);
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
  color: var(--paper);
  font-family: var(--body);
  cursor: pointer;
  transition: background .2s ease;
}
.vsl-som:hover{ background: rgba(31, 26, 22, .48); }
.vsl-som[hidden]{ display: none; }

.vsl-som-pilula{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 30px;
  border-radius: 999px;
  background: rgba(31, 26, 22, .9);
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
  transition: transform .2s ease;
}
.vsl-som:hover .vsl-som-pilula{ transform: scale(1.04); }

/* em ecrã inteiro o vídeo manda no ecrã todo: sem proporção imposta,
   sem cantos redondos e com o fundo preto do próprio player.
   A regra da moldura fica como rede de segurança, para o caso de algum
   browser pôr a moldura em ecrã inteiro em vez do vídeo. */
.player-vsl:fullscreen,
.player-vsl:-webkit-full-screen{ padding: 0; background: #000; border-radius: 0; }
.player-vsl:fullscreen > iframe,
.player-vsl:-webkit-full-screen > iframe{ height: 100%; aspect-ratio: auto; border-radius: 0; }

.player > iframe:fullscreen,
.player > iframe:-webkit-full-screen{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: #000;
}

.player > iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
}

.player-poster{ width: 100%; height: 100%; object-fit: cover; }

/* o vídeo fica por cima do poster, dentro do próprio botão — nunca troca
   de elemento, por isso não há controlos nativos para desligar: o único
   comando é o botão, que liga e depois alterna tocar/pausar. */
.player-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

.player-play{
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 92px;
  height: 66px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cta-top), var(--cta-bottom));
  color: var(--cta-ink);
  padding-left: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 232, .22),
    0 14px 32px -14px rgba(var(--cta-shadow), .78);
  transition: transform .25s ease, background .25s ease, opacity .2s ease;
}
.player-surface:hover .player-play{
  transform: scale(1.06);
  background: linear-gradient(180deg, var(--cta-top-h), var(--cta-bottom-h));
}
/* a tocar: só o vídeo, sem ícone nem selo de duração por cima */
.player-surface.is-playing .player-play,
.player-surface.is-playing .player-time{
  opacity: 0;
  pointer-events: none;
}.player iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
}

/* ── para quem é isto? ──────────────────────────────────────────────────────
   Vive dentro do hero: mesmo fundo, só muda o ritmo.                        */

.qualify{
  margin-top: clamp(34px, 4vw, 52px);
  text-align: left;
}

.qualify-label{
  margin: 0 0 26px;
  text-align: center;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember);
}

/* corpo mais pequeno de propósito: cada ponto cabe numa só linha em desktop.
   fit-content faz o bloco encolher até à linha mais longa, para ficar
   mesmo centrado debaixo do vídeo em vez de encostado à esquerda. */
.qualify-list{
  margin: 0 auto;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  list-style: none;
  display: grid;
  gap: 16px;
}
.qualify-list li{
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.5;
}

.ico{
  width: 21px;
  height: 21px;
  margin-top: 1px;
  color: var(--ember);
}/* ── antes de falarmos (2.a página) ─────────────────────────────────────────
   Quatro cartões iguais, lado a lado. São instruções para quem já marcou,
   não argumentos para quem está a decidir: por isso o ícone entra primeiro
   e o texto é curto. Mesmo cartão branco do resto do site.               */

.prep{ background: var(--paper); }

.prep-head{ margin-bottom: clamp(38px, 4.4vw, 58px); }
.prep-head .section-title{ margin-bottom: 0; }

.prep-grid{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.9vw, 26px);
}

.prep-card{
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 26px 24px 28px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* mesmo realce dos outros cartões da página */
.prep-card:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 22px 44px -24px rgba(60, 36, 18, .8);
}
.prep-card:hover .prep-ico{ background: color-mix(in srgb, var(--ember) 22%, transparent); }
.prep-ico{ transition: background .25s ease; }

.prep-ico{
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ember) 13%, transparent);
  color: var(--ember);
}
.prep-ico svg{ width: 23px; height: 23px; }

.prep-title{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.01em;
}

.prep-text{
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-soft);
}.faq .section-title{ margin-bottom: clamp(32px, 3.8vw, 46px); }/* ── problema vs. solução ───────────────────────────────────────────────────
   Três linhas, cada uma um par: o que não resultou à esquerda, o que muda à
   direita, e uma seta no meio a ligá-los. A seta é o que transforma duas
   listas soltas numa leitura só — é ela que diz "isto, por causa daquilo".

   Os dois lados usam o mesmo cartão branco de propósito; o que marca o lado
   da resposta é a lombada âmbar e o numeral da mesma cor.                 */

.versus{ background: var(--paper); }

/* O título da secção: uma frase só, a dizer de que vai a comparação antes
   de ela começar. Fica com mais folga por baixo do que um section-title
   normal porque o que vem a seguir são dois cabeçalhos, não texto. */
.vs-lead-title{ margin-bottom: clamp(30px, 3.4vw, 48px); }

.vs-grid{
  display: grid;
  grid-template-columns: 1fr clamp(46px, 5vw, 86px) 1fr;
  column-gap: clamp(12px, 1.5vw, 22px);
  row-gap: clamp(18px, 2.2vw, 28px);
}

.vs-head-problem{  grid-column: 1; }
.vs-head-solution{ grid-column: 3; }
.vs-problem{       grid-column: 1; }
.vs-arrow{         grid-column: 2; }
.vs-solution{      grid-column: 3; }

.vs-head{ margin-bottom: clamp(6px, 1.2vw, 16px); }

.vs-title{
  margin: 0 0 13px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 90;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.018em;
}
.vs-title em{
  font-style: italic;
  color: var(--ember);
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 90;
}

.vs-sub{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* o cartão branco, igual dos dois lados */
.vs-card{
  padding: 24px 24px 26px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* leve realce ao passar o rato — dá um ar mais premium sem exagerar */
.vs-card:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 22px 44px -24px rgba(60, 36, 18, .8);
}

.vs-problem .pillar-num{ color: var(--ink-soft); }

.vs-solution{ border-left: 3px solid var(--ember); }
.vs-solution .pillar-num{ color: var(--ember); }

.vs-arrow{
  display: grid;
  place-items: center;
  color: var(--ember);
}
.vs-arrow svg{
  width: clamp(32px, 3.8vw, 54px);
  height: auto;
}

/* ❌ e ✅ substituem o numeral no telemóvel: à largura de meia coluna, o que
   se quer é reconhecer o lado num relance, não contar pares. Vive dentro do
   título, antes das palavras. */
/* Os emojis ❌ e ✅ do sistema traziam o desenho e as cores de quem os
   desenhou — vermelho e verde berrantes, com sombra e brilho. Estes são
   os mesmos selos das histórias completas: um círculo de fundo suave com
   o símbolo dentro, na cor da paleta. */
.vs-mark{
  display: inline-grid;
  place-items: center;
  /* o símbolo na letra do corpo (não na do título): é a mesma que desenha
     os selos das histórias completas, e o traço fica mais limpo */
  font-family: var(--body);
  line-height: 1;
  width: 1.45em;
  height: 1.45em;
  margin-right: .42em;
  border-radius: 50%;
  font-size: .78em;
  font-weight: 700;
  /* medido: alinha o meio do círculo com o meio das maiúsculas do título */
  vertical-align: .09em;
}
.vs-mark-erro{
  color: var(--erro);
  background: color-mix(in srgb, var(--erro) 13%, transparent);
}
.vs-mark-erro::before{ content: "✕"; }
.vs-mark-certo{
  color: var(--certo);
  background: color-mix(in srgb, var(--certo) 14%, transparent);
}
/* o ✓ tem mais espaço à esquerda do que à direita: sem este empurrão de
   um pixel, o traço encosta-se à direita do círculo */
.vs-mark-certo::before{ content: "✓"; transform: translateX(-.08em); }

/* miolo dos cartões, partilhado pelos dois lados */
.pillar{
  display: grid;
  align-content: start;
  gap: 11px;
}

.pillar-num{
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 40;
  font-size: 29px;
  line-height: 1;
}

.pillar-title{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
}

.pillar-text{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* só para leitores de ecrã: diz de que lado está cada cartão, que a seta
   e a coluna não se ouvem */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── não é para ti se ───────────────────────────────────────────────────────
   O reverso da lista de cima, e de propósito mais curto: aqui não se
   convence ninguém, só se poupa tempo a quem não é para isto. */
.qualify-nao{ margin-top: clamp(26px, 3vw, 40px); }

/* As duas listas ao centro, com a mesma largura: os pontos das duas
   começam no mesmo sítio e os ícones alinham em coluna. */
.qualify{ text-align: center; }
.qualify-list{
  width: 100%;
  max-width: 64ch;
  margin-inline: auto;
  text-align: left;
}
/* a etiqueta é igual à de cima: o que distingue os dois blocos são os ✕ */
.qualify-nao .ico{ color: var(--ink-soft); }

/* ── listas do problema vs. solução ─────────────────────────────────────────
   Os mesmos selos das histórias completas: círculo de fundo suave com o
   símbolo dentro, na cor da paleta. */
/* As duas introduções têm comprimentos diferentes (uma linha à esquerda,
   três à direita). Reservar três linhas nas duas faz com que as listas —
   e, portanto, os ✕ e os ✓ — comecem à mesma altura nas duas colunas. */
/* Cada cartão é um ponto só: o número (ou o selo, no telemóvel) e a
   frase. Sem parágrafo por baixo — o que antes era explicação passou a
   estar nas duas linhas de apoio, por cima das colunas. */
.pillar-frase{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.45;
}
.vs-problem .pillar-frase{ color: var(--ink); }

.pillar-intro{
  margin: 0 0 14px;
  min-height: calc(16px * 1.55 * 3);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.vs-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
}
.vs-list li{
  position: relative;
  padding-left: 33px;
}
.vs-list li::before{
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--body);
}
.vs-list-erro li::before{
  content: "✕";
  color: var(--erro);
  background: color-mix(in srgb, var(--erro) 13%, transparent);
}
.vs-list-certo li::before{
  content: "✓";
  color: var(--certo);
  background: color-mix(in srgb, var(--certo) 14%, transparent);
  transform: none;
}
.vs-list-certo li::before{ text-indent: -.08em; }

/* o remate fecha a secção inteira, e não uma das colunas: por baixo das
   duas, centrado e mais estreito, para se ler como conclusão */
.vs-remate{
  max-width: 62ch;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── como funciona o acompanhamento ─────────────────────────────────────────
   Três fases em três colunas, pela ordem por que acontecem. O número é
   grande de propósito: é ele que diz "isto tem princípio, meio e fim".
   Cada cartão fecha com o que fica no fim da fase, separado por uma linha
   a tracejado — é a promessa de cada etapa, e lê-se sozinha. */
.metodo .section-title{ margin-bottom: clamp(38px, 4.2vw, 56px); }

.fases{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  max-width: var(--maxw);
  margin-inline: auto;
  align-items: stretch;
}

.fase{
  /* coluna flexível para o "no fim desta fase" encostar ao fundo em todos
     os cartões, mesmo quando as listas têm alturas diferentes */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fase:hover{
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 22px 44px -24px rgba(60, 36, 18, .8);
}

.fase-num{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ember) 15%, transparent);
  color: var(--ember-deep);
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 21px;
  font-weight: 600;
}

.fase-titulo{
  margin: 2px 0 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
}

.fase-intro{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.fase-lista{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 15.5px;
  line-height: 1.45;
}
.fase-lista li{ position: relative; padding-left: 20px; }
.fase-lista li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
}

.fase-fim{
  margin: auto 0 0;
  padding-bottom: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.fase-fim strong{ color: var(--ink); }

/* O que não muda em nenhuma das fases. Era uma caixa preta; passou a ser
   uma linha de três promessas, cada uma com o seu visto, sobre o fundo da
   secção. Sem caixa, o bloco deixa de competir com os cartões das fases e
   lê-se como o que está por trás de todas elas. */
.sempre{
  max-width: var(--maxw);
  margin: clamp(30px, 3.4vw, 46px) auto 0;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--rule);
  text-align: center;
}

.sempre-titulo{
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sempre-lista{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
}
.sempre-lista li{
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 26ch;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.45;
}

.sempre-selo{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ember) 14%, transparent);
  color: var(--ember-deep);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.metodo-remate{
  max-width: var(--maxw-narrow);
  margin: clamp(30px, 3.4vw, 44px) auto 0;
  text-align: center;
}
.metodo-remate-titulo{
  margin: 0 0 14px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 90;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 500;
  line-height: 1.22;
}
.metodo-remate p{
  margin: 0 0 12px;
  color: var(--ink-soft);
}

.booking-nota{
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ── porquê eu ──────────────────────────────────────────────────────────── */

.why{ background: var(--paper); }

/* O retrato ocupa a coluna direita inteira; o título fica sempre acima do
   texto, tanto lado a lado como empilhado. */
.why-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  grid-template-areas:
    "head  photo"
    "text  photo";
  column-gap: clamp(36px, 6vw, 82px);
  row-gap: 0;
  align-items: start;
}
.why-head{ grid-area: head; }
.why-text{ grid-area: text; }
.why-photo{ grid-area: photo; }

.why-text p{
  margin: 0 0 20px;
  color: var(--ink-soft);
  max-width: 54ch;
}
.why-lead{
  color: var(--ink) !important;
  font-size: 18.5px;
  padding-left: 20px;
  border-left: 2px solid var(--ember);
}.why-photo{
  position: sticky;
  top: 104px;
  margin: 0;
}
.why-photo img{
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 28px 56px -32px rgba(60, 36, 18, .6);
}
.why-photo figcaption{
  margin-top: 14px;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* ── equilíbrio ─────────────────────────────────────────────────────────────
   As fotos do antes/depois são medidas e alinhadas ao pixel. Estas são o
   contrário de propósito: tortas, com margem branca de revelação, como
   fotografias largadas em cima da mesa. É a secção a dizer o que o texto
   diz — que há vida fora disto. Ao passar o rato, endireitam-se.         */

.balance{ background: var(--paper); }

.balance-grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  column-gap: clamp(36px, 6vw, 78px);
  align-items: center;
}

.balance-text .section-title{ margin-bottom: 18px; }

.balance-lead{
  margin: 0 0 18px;
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.34;
  color: var(--ink);
}

.balance-body{
  margin: 0;
  max-width: 48ch;
  color: var(--ink-soft);
}

.balance-photos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 26px);
  padding-block: 12px;
}

.snap{
  position: relative;
  margin: 0;
  padding: 9px 9px 30px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 22px 44px -28px rgba(60, 36, 18, .75);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.snap img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1px;
}

/* Quatro fotografias, duas a duas. As inclinações alternam e as margens
   desencontram-se de propósito: o que se quer é o ar de fotografias
   largadas em cima da mesa, não uma grelha certinha. */
.snap-1{ transform: rotate(-2.4deg); }
.snap-2{ transform: rotate(2deg); margin-top: clamp(20px, 3vw, 38px); }
.snap-3{
  margin-top: clamp(-30px, -2.2vw, -14px);
  transform: rotate(1.7deg);
  z-index: 2;
}
.snap-4{
  margin-top: clamp(-4px, .8vw, 12px);
  transform: rotate(-2.8deg);
  z-index: 2;
}

.snap:hover{ transform: rotate(0deg) translateY(-5px); z-index: 3; }

/* ── antes / depois ─────────────────────────────────────────────────────── */

.results{ background: var(--paper); }

.results-sub{
  margin: 0 auto;
  max-width: 52ch;
  text-align: center;
  color: var(--ink-soft);
}

.marquee{
  position: relative;
  margin-top: 54px;
  display: grid;
  gap: 22px;
  overflow: hidden;
}

/* As pontas esbatem-se com duas faixas da cor do fundo, uma de cada lado,
   e não com uma máscara sobre a faixa toda. A máscara obrigava o browser a
   redesenhar 5000px de fotos a cada fotograma — era ela a travar a
   animação nos telemóveis. Estas faixas ficam paradas por cima e não
   custam nada. */
.marquee::before,
.marquee::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 9%;
  pointer-events: none;
}
.marquee::before{
  left: 0;
  background: linear-gradient(90deg, var(--fundo-seccao, var(--paper)), transparent);
}
.marquee::after{
  right: 0;
  background: linear-gradient(270deg, var(--fundo-seccao, var(--paper)), transparent);
}

/* O espaço entre cartões é margem de cada cartão e não `gap`: com `gap` a
   pista tinha um espaço a menos do que duas cópias da lista, e o -50% ficava
   meio espaço ao lado do ponto de partida — um salto a cada volta. */
.marquee-row{
  display: flex;
  width: max-content;
  animation: drift 45s linear infinite;
  /* parada até o script dizer que as medidas estão finais: a animação
     arrancar antes disso era o que dava o salto logo a seguir ao refresh */
  animation-play-state: paused;
  /* A faixa anda sempre, mesmo fora do ecrã: assim o ritmo é o mesmo em
     qualquer momento e nunca há um arranque a meio. Estas três linhas são
     o que a mantém na placa gráfica, longe do trabalho da página. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.marquee-row > .ba-card{ margin-right: 22px; }
/* a de baixo anda mais depressa do que a de cima: é a diferença entre as duas
   que dá a sensação de profundidade, não a velocidade de cada uma */
.marquee-row-reverse{ animation-duration: 30s; animation-direction: reverse; }

/* o script põe esta classe no <html> quando tudo está medido */
.faixa-pronta .marquee-row{ animation-play-state: running; }

@keyframes drift{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(-50%, 0, 0); }
}

.ba-card{
  flex: 0 0 auto;
  width: 400px;
  padding: 18px 18px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
}

.ba-name{
  margin: 0 0 12px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.ba-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ba-shot{ margin: 0; }

/* A moldura é sempre igual em todos os cartões e a foto preenche-a sempre,
   de ponta a ponta. As fotos originais não têm todas o mesmo formato, por
   isso as que fogem ao 3:4 perdem uma fatia — `--crop` decide de que lado.
   O valor por omissão é o centro; a lista no script.js afina caso a caso. */
.ba-shot img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--crop, 50% 50%);
  border-radius: 7px;
}
.ba-shot figcaption{
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ba-shot-after figcaption{ color: var(--ember); }

.ba-meta{
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
}

/* ── fecho ──────────────────────────────────────────────────────────────── */

.closing{
  text-align: center;
  background: var(--paper);
}

.closing-title{
  margin: 0 0 22px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.024em;
}
.closing-title em{
  font-style: italic;
  color: var(--ember);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
}

.closing-sub{
  margin: 0 auto;
  max-width: 50ch;
  color: var(--ink-soft);
}

/* ── rodapé ─────────────────────────────────────────────────────────────── */

.footer{
  padding-block: 40px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.footer-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-soft);
}
.footer-mark{
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
}
.footer-links{ display: flex; gap: 22px; }
.footer-links a{ text-decoration: none; }
.footer-links a:hover{ color: var(--ember); }

/* ── etiqueta de secção ─────────────────────────────────────────────────────
   A "sobrancelha" das secções novas, em chip. Faz o mesmo trabalho que o
   .eyebrow mas com peso suficiente para aguentar um título centrado logo
   por baixo, sem parecer legenda solta.                                  */

.pill{
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 6px 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ember) 13%, transparent);
  color: var(--ember);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ── testemunhos ────────────────────────────────────────────────────────────
   Os vídeos são verticais (é como as pessoas os gravam no telemóvel), por
   isso a moldura é 4:5 e não 16:9 como a VSL. A citação fica por fora do
   cartão, em itálico: é a legenda do vídeo, não parte dele.             */

.proof{ background: var(--paper); }
.proof .section-title{ margin-bottom: clamp(38px, 4.2vw, 56px); }

/* Um vídeo por linha, também no desktop: são oito pessoas diferentes e a
   coluna única faz-se percorrer uma a uma, em vez de se ler tudo de uma
   vez como uma grelha. A coluna não vai à largura toda do .wrap — a
   moldura é larga (formato de chamada) e a esta altura da página o que
   conta é a cara de quem fala, não o tamanho do bloco. */
.proof-grid{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 720px;
  gap: clamp(38px, 4.4vw, 64px);
}

.proof-item{ display: grid; align-content: start; gap: 16px; }

.proof-card{
  margin: 0;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* leve realce ao passar o rato — mesmo tratamento do "problema vs. solução" */
.proof-card:hover{
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 22px 44px -24px rgba(60, 36, 18, .8);
}

/* Cada gravação tem a sua forma — umas são 4:3, outras vêm com uma faixa
   preta colada em cima ou em baixo. Em vez de as meter todas na mesma
   moldura (e ficar com as faixas à vista), cada cartão traz a medida da
   sua própria imagem em `--moldura`: a moldura encolhe até ao sítio onde
   as duas pessoas acabam. `--video` é a forma do vídeo em si, para o
   player entrar sem bandas ao lado quando se carrega no play. */
.proof-surface,
.proof-card .player-espreita{
  position: relative;
  display: block;
  width: 100%;
  /* Uma só forma para todos os cartões desta fila.

     Antes cada um adotava a forma do seu poster (`--moldura`), para a
     imagem entrar inteira. O poster ficava perfeito e a fila ficava às
     ondas: oito cartões com oito alturas entre 395 e 531px, e o botão de
     play de cada um a uma altura diferente — 170px num, 239px no outro.

     3:2 é o meio-termo das oito formas reais, por isso é o que corta menos
     de cada lado. Os posters já usam `object-fit: cover`, portanto
     preenchem sempre sem deformar. O `--moldura` de cada cartão fica no
     HTML: não faz nada agora, mas diz a forma verdadeira de cada imagem se
     um dia quiseres voltar atrás. */
  /* A caixa toma a forma do vídeo que vai mostrar.

     Já esteve fixa em 3:2, para o botão de play cair à mesma altura em
     todos os cartões. Mas com uma forma fixa só há duas saídas, e nenhuma
     serve: ou sobram barras pretas, ou se corta o vídeo — e o que se corta
     primeiro é a barra de controlos do Vimeo, que é onde está o ecrã
     inteiro. Com a forma do vídeo não sobra nada e não se corta nada. */
  aspect-ratio: var(--video, 3 / 2);
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-warm);
  cursor: pointer;
}
/* contain, não cover: os três marcadores ainda são verticais (4:5) e um
   recorte a cover cortava-lhes o nome. Quando o vídeo real é 4:3, como o
   quarto, enche a moldura sem sobrar quase nada. */
.proof-surface img,
.proof-surface .player-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.proof-surface .player-play{
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 54px;
  border-radius: 12px;
}
.proof-surface:hover .player-play{ transform: translate(-50%, -50%) scale(1.06); }

/* só entra em jogo se algum dia houver data-embed nos testemunhos —
   o vídeo local já não troca de elemento, fica dentro do .proof-surface */
.proof-card iframe{
  display: block;
  width: 100%;
  /* A mesma forma da capa, não a do vídeo.

     Usar a forma do vídeo era mais correto no papel e dava um salto no
     ecrã: onde a capa e o vídeo têm formas diferentes, o cartão crescia no
     instante em que se carregava no play e a fila estremecia.

     Com a forma da capa, o cartão não mexe um pixel. O vídeo fica com uma
     barra fina de um dos lados lá dentro — que é o que qualquer leitor faz
     quando a forma não bate certa, e ninguém estranha. */
  aspect-ratio: var(--video, 3 / 2);
  border: 0;
  border-radius: 10px;
  background: var(--ink);
}

/* O nome e a citação são a legenda do vídeo: o nome diz quem fala, a
   citação o que ficou da conversa. */
.proof-name{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: center;
}

.proof-quote{
  margin: 0;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.proof-quote::before{ content: "“"; }
.proof-quote::after{ content: "”"; }

/* ── perguntas e respostas (2.a página) ─────────────────────────────────────
   As perguntas que aparecem sempre antes de uma chamada, respondidas em
   vídeo. Só a imagem e o título: quem chega aqui está a procurar uma
   pergunta em concreto, não a ler uma secção de fio a pavio. O vídeo
   abre ao centro do ecrã, como nas histórias.                          */

.qa-grid{
  --qa-gap: clamp(22px, 2.6vw, 34px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--qa-gap);
  max-width: var(--maxw);
}
/* São cinco: o último fica sozinho na última linha. Em vez de ficar
   encostado à esquerda, passa a ocupar as duas colunas e centra-se,
   com a largura de uma coluna. */
.qa-item:last-child:nth-child(odd){
  grid-column: 1 / -1;
  width: calc((100% - var(--qa-gap)) / 2);
  margin-inline: auto;
}

.qa-item{
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 12px 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.qa-item:hover{
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 22px 44px -24px rgba(60, 36, 18, .8);
}

.qa-surface{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 11px;
  overflow: hidden;
  background: var(--paper-warm);
  cursor: pointer;
}
.qa-surface img{ width: 100%; height: 100%; object-fit: cover; }
.qa-surface .player-play{
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 54px;
  border-radius: 12px;
}
.qa-surface:hover .player-play{ transform: translate(-50%, -50%) scale(1.06); }

.qa-title{
  margin: 0 4px 2px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── testemunhos · história inteira ─────────────────────────────────────────
   Os cartões de cima vendem-se pela cara e pela frase; estes vendem-se
   pelo antes e pelo depois escritos a par. Daí o texto maior, as duas
   listas com o mesmo peso e o vídeo a abrir ao centro do ecrã, fora do
   cartão: aqui o vídeo é a prova do que está escrito, não o cartaz.   */

.stories-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 3vw, 40px);
  max-width: var(--maxw);
  margin-inline: auto;
}

@supports (grid-template-rows: subgrid){
  .stories-grid{ grid-template-rows: repeat(8, auto); }
  .story{
    grid-row: span 8;
    grid-template-rows: subgrid;
    align-content: stretch;
  }
}

/* Cada cartão usa as linhas da grelha de fora (subgrid): assim o nome, a
   idade, a etiqueta "Desafio", cada lista e a frase final começam à mesma
   altura em todos os cartões, mesmo quando um tem mais pontos ou a
   profissão ocupa duas linhas. Onde o browser não souber fazer subgrid,
   os cartões ficam como antes — desalinhados, mas inteiros. */
.story{
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story:hover{
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 22px 44px -24px rgba(60, 36, 18, .8);
}

.story-surface{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 11px;
  overflow: hidden;
  background: var(--paper-warm);
  cursor: pointer;
}
.story-surface img{ width: 100%; height: 100%; object-fit: cover; }
.story-surface .player-play{
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 54px;
  border-radius: 12px;
}
.story-surface:hover .player-play{ transform: translate(-50%, -50%) scale(1.06); }.story-name{
  margin: 6px 0 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.story-meta{
  margin: -8px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.story-label{
  margin: 6px 0 -6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.story-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 16px;
  line-height: 1.45;
}
.story-list li{
  position: relative;
  padding-left: 33px;
}
/* Cada símbolo dentro do seu círculo: sobre creme, um traço solto some-se
   por muito forte que seja a cor — a mancha do círculo é que o faz ler-se
   ao passar os olhos, sem ter de aumentar o símbolo. */
.story-list li::before{
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* Vermelho e verde, mas os desta paleta: um tijolo queimado e um verde de
   sálvia, para não parecerem duas luzes de semáforo em cima do creme. */
.story-list-antes li::before{
  content: "✕";
  color: var(--erro);
  background: color-mix(in srgb, var(--erro) 13%, transparent);
}
.story-list-depois li::before{
  content: "✓";
  color: var(--certo);
  background: color-mix(in srgb, var(--certo) 14%, transparent);
}

/* A frase final é o remate do cartão, não o seu corpo: mais pequena do
   que o resto, para não empurrar dois cartões para alturas diferentes só
   porque um cliente falou mais. */
.story-quote{
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.story-quote::before{ content: "“"; }
.story-quote::after{ content: "”"; }

/* ── vídeo ao centro do ecrã ────────────────────────────────────────────────
   O cartão da história é comprido; trocar o poster pelo vídeo lá dentro
   deixava-o a tocar num canto, minúsculo. Abre por cima de tudo, à
   largura que o ecrã der, e fecha-se com o X, com Esc ou clicando fora. */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(31, 26, 22, .88);
}

.lightbox-caixa{
  position: relative;
  width: min(1120px, 100%);
  margin-inline: auto;

  /* A largura encolhe até o vídeo caber em altura. Sem isto, num telemóvel
     deitado — ou com um vídeo 4:3 — a janela saía por baixo do ecrã e os
     controlos do Vimeo ficavam fora de alcance.

     Os 130px são o que fica para o ✕ por cima e uma margem por baixo.
     `dvh` é a altura real do ecrã no telemóvel: o `vh` conta a barra de
     endereço do Safari como se ela não estivesse lá, e o vídeo ficava
     sempre um bocado cortado. A linha de cima fica para quem não entende
     `dvh`. */
  max-width: calc((100vh - 130px) * var(--lb-razao, 1.778));
  max-width: calc((100dvh - 130px) * var(--lb-razao, 1.778));
}

/* A tira de som da janela grande: a mesma da VSL, mas encostada às bordas
   do vídeo em vez das do cartão, porque aqui não há margem à volta. */
/* Na janela grande o vídeo fica à vista desde o primeiro instante: sem véu
   e sem desfoque, ao contrário da VSL.

   Lá em cima o desfoque tem uma razão — esconde o "Unmute" do Vimeo, que
   não se consegue desligar, para não haver dois botões a dizer o mesmo.
   Aqui o vídeo é a estrela e tapá-lo não faz sentido: quem abriu quer
   vê-lo já. Fica só a pastilha por cima, e o toque em qualquer ponto do
   vídeo liga o som e faz a pastilha sair. */
.lightbox-som{
  inset: 0;
  border-radius: 14px;
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  /* a pastilha ao centro do vídeo, como na VSL */
  place-items: center;
}
.lightbox-som[hidden]{ display: none; }

.lightbox iframe{
  display: block;
  width: 100%;
  /* a forma vem do cartão que abriu a janela (ver abrirGrande no script) */
  aspect-ratio: var(--lb-forma, 16 / 9);
  border: 0;
  border-radius: 14px;
  background: #000;
}

.lightbox-fechar{
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 241, 233, .9);
  color: var(--ink);
  font-size: 19px;
  line-height: 36px;
  cursor: pointer;
}
.lightbox-fechar:hover{ background: var(--paper); }

/* ── capa por cima do player (telemóvel) ────────────────────────────────────
   O player do Vimeo está por baixo, à espera; a capa e o botão de play são
   só desenho e deixam o dedo passar, para o toque cair no play deles e o
   vídeo começar com som à primeira. Quando arranca, a capa sai. */
.player-espreita{ position: relative; cursor: pointer; }
.player-espreita{ overflow: hidden; }

/* O vídeo enche a caixa, que já tem a forma dele: nem barras nem corte,
   e a barra de controlos do Vimeo fica inteira à vista.              */
.player-espreita > iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: var(--ink);
}
.player-espreita > :not(iframe){
  position: absolute;
  pointer-events: none;
  transition: opacity .25s ease;
}
.player-espreita > .player-poster{
  inset: 0;
  width: 100%;
  height: 100%;
}
.player-espreita.is-playing > :not(iframe){ opacity: 0; }

/* Depois de o vídeo já ter tocado uma vez, a capa volta a apanhar o toque:
   o botão ao centro é o que retoma, em vez de se ir procurar o play à
   barra do Vimeo.

   Só depois da primeira vez, e é de propósito. À primeira, a capa tem de
   deixar passar o toque para dentro do leitor — é lá, e só lá, que o iOS
   autoriza o som. A partir do momento em que o som já entrou uma vez, esse
   leitor fica desbloqueado e pode ser comandado daqui. */
.player-espreita.ja-tocou:not(.is-playing) > .player-play{
  pointer-events: auto;
  cursor: pointer;
}

/* ── mensagens ──────────────────────────────────────────────────────────────
   Mosaico a sério, mas não com `columns` (bug de reflow no Safari com
   lazy-load — ver histórico). Em vez disso: grid com colunas que se
   ajustam sozinhas à largura (auto-fill — não força um número fixo), e
   cada célula com a altura calculada à medida da sua imagem (script.js,
   "acomodarMensagens"), a partir do width/height já no HTML — não é
   preciso esperar a imagem carregar, por isso não há recálculo a meio
   nem o bug de antes. Todas as células ficam do tamanho da imagem, não
   de uma proporção imposta. Uma rotação leve e alternada tira o ar de
   grelha impressa — mais mosaico colado à mão. */

.msgs{ background: var(--paper); }
.msgs .section-title{ margin-bottom: clamp(38px, 4.2vw, 56px); }

.msgs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 2px;
  gap: 20px;
  max-width: var(--maxw);
  margin-inline: auto;
}

.msg{
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 12px 26px -22px rgba(60, 36, 18, .65);
  transition: transform .25s ease, box-shadow .25s ease;
}
.msg img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* rotação cíclica, pequena, para não parecer impressa */
.msg:nth-child(5n+1){ transform: rotate(-1.1deg); }
.msg:nth-child(5n+2){ transform: rotate(0.9deg); }
.msg:nth-child(5n+3){ transform: rotate(-0.6deg); }
.msg:nth-child(5n+4){ transform: rotate(1.4deg); }
.msg:nth-child(5n+5){ transform: rotate(-1.6deg); }
.msg:hover{
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 18px 34px -20px rgba(60, 36, 18, .5);
  z-index: 2;
}

/* as que passam da contagem VISIVEIS (script.js); o botão tira esta classe a todas */
.msg-extra{ display: none; }
.msgs-abertas .msg-extra{ display: block; }

.msgs-mais{ margin-top: clamp(22px, 2.6vw, 34px); text-align: center; }

/* botão secundário: contorno, não bloco cheio — o CTA da página é outro
   e este não lhe pode roubar o olhar */
.btn-quiet{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-soft);
  box-shadow: none;
  padding: 14px 34px;
}
.btn-quiet::after{ content: none; }
.btn-quiet:hover{
  background: transparent;
  border-color: var(--ember);
  color: var(--ember);
  transform: translateY(-2px);
  box-shadow: none;
}

/* ── marcar a reunião ───────────────────────────────────────────────────────
   O último pedido da página. Caixa própria, centrada, com o botão à
   largura toda: não há mais nada a competir com ele a esta altura.      */

.booking{ background: var(--paper); }

.booking-box{
  padding: clamp(34px, 4.4vw, 58px) clamp(22px, 4vw, 54px) clamp(30px, 4vw, 50px);
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--card);
  text-align: center;
  box-shadow: 0 30px 60px -38px rgba(60, 36, 18, .65);
}

.booking-ico{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ember) 13%, transparent);
  color: var(--ember);
}
.booking-ico svg{ width: 26px; height: 26px; }

.booking-title{
  margin: 0 0 12px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 110;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.booking-sub{
  max-width: 44ch;
  margin: 0 auto 28px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.booking-btn{
  display: block;
  width: 100%;
  padding-block: 19px;
  font-size: 17px;
}
.booking-seta{ margin-left: 6px; }

/* ── dois vídeos na pós-chamada ─────────────────────────────────────────────
   Moldura mais estreita do que a VSL: são dois um por cima do outro, e à
   largura toda a página virava uma escada.                              */

.player-medio{
  max-width: 780px;
  margin-inline: auto;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* mesmo realce dos cartões dos testemunhos */
.player-medio:hover{
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 34px 64px -32px rgba(60, 36, 18, .62);
}

.video-label{
  margin: clamp(30px, 3.4vw, 44px) 0 clamp(16px, 1.8vw, 22px);
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 60;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-align: center;
}

/* ── duas versões do mesmo texto ────────────────────────────────────────────
   Há sítios onde o telemóvel não precisa de menos tamanho, precisa de menos
   palavras: a comparação, a história do André, os cartões da preparação.
   Em vez de encolher a letra até não se ler, o HTML traz as duas versões e
   aqui decide-se qual aparece. `display:none` também a esconde dos leitores
   de ecrã, por isso só uma é lida.                                        */

/* As duas versões só se escondem, nunca se forçam a aparecer: assim cada
   elemento mantém o display que lhe pertence (um <li> continua grid, um
   <p> continua block) e a regra ganha a seletores mais específicos. */
@media (min-width: 561px){
  .mobile-only{ display: none !important; }
}

/* ── responsivo ─────────────────────────────────────────────────────────── */

/* Só desktop: o hero e as transformações têm o mesmo fundo, por isso o
   padding de baixo de um e o de cima do outro somavam uma faixa vazia de
   ~310px. Cada lado fica a 60%. O `:has` encolhe o fundo do hero; onde não
   houver suporte, encolhe só o topo das transformações — reduz na mesma. */
@media (min-width: 861px){
  .hero:has(+ .results){ padding-bottom: calc(var(--step) * .6); }
  .hero + .results{ padding-top: calc(var(--step) * .6); }
}

@media (max-width: 860px){
  .why-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "head" "photo" "text";
    row-gap: 30px;
  }
  .why-photo{ position: static; max-width: 460px; }
  .why-text p{ max-width: none; }

  .prep-grid{ grid-template-columns: 1fr 1fr; }

  /* O versus mantém as duas colunas a toda a largura, como no desktop:
     o que faz a comparação ler-se é problema e resposta lado a lado, e isso
     perde-se se empilhar. O que encolhe é a medida, não a estrutura. */
  .vs-grid{
    grid-template-columns: 1fr clamp(30px, 4.6vw, 60px) 1fr;
    column-gap: clamp(9px, 1.4vw, 18px);
    row-gap: 16px;
  }
  .vs-card{ padding: 18px 16px 20px; }
  .vs-list{ font-size: 15px; }
  .vs-list li{ padding-left: 29px; }
  .vs-list li::before{ width: 20px; height: 20px; font-size: 11px; }
  /* no telemóvel as colunas ficam uma sobre a outra: não há nada para alinhar */
  .pillar-intro{ font-size: var(--m-small); min-height: 0; }
  .vs-remate{ font-size: var(--m-small); margin-top: 18px; }
  /* As três fases lado a lado e todas no ecrã, sem arrastar. Num ecrã de
     375px cada cartão fica com cerca de 110px, por isso tudo encolhe: a
     secção ganha as margens de fora, as caixas apertam e o texto desce ao
     tamanho mínimo que ainda se lê. */
  .fases{
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-inline: -12px;
  }
  .fase{
    padding: 12px 9px 12px;
    border-radius: 10px;
    gap: 7px;
  }
  .fase:hover{ transform: none; box-shadow: 0 16px 34px -26px rgba(60, 36, 18, .7); }
  .fase-num{
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 14px;
  }
  .fase-titulo{ font-size: 13px; line-height: 1.18; }
  .fase-lista{ font-size: 11px; gap: 6px; line-height: 1.32; }
  .fase-lista li{ padding-left: 12px; }
  .fase-lista li::before{ width: 4px; height: 4px; top: .55em; left: 0; }
  .fase-fim{ font-size: 10.5px; line-height: 1.35; padding-top: 9px; }

  /* Os três cartões partilham as linhas da grelha (subgrid): o número, o
     título, cada ponto da lista e o remate começam à mesma altura nos três,
     mesmo quando um título ocupa duas linhas e outro três. Sem isto, cada
     cartão arrumava-se por si e o conjunto ficava aos degraus. */
  @supports (grid-template-rows: subgrid){
    .fases{ grid-template-rows: repeat(5, auto); align-items: stretch; }
    .fase{
      display: grid;              /* o subgrid não funciona em flex */
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-content: stretch;
      gap: 7px;
    }
    .fase-lista{
      grid-row: span 2;
      grid-template-rows: subgrid;
      align-content: start;
    }
    .fase-lista li{ align-self: start; }
    .fase-fim{ margin-top: 0; }
  }
  /* as três promessas uma por linha, com o visto ao lado do texto */
  .sempre{ margin-top: 24px; padding-top: 20px; }
  .sempre-titulo{ margin-bottom: 16px; font-size: 10.5px; }
  .sempre-lista{ grid-template-columns: 1fr; gap: 14px; }
  .sempre-lista li{
    grid-template-columns: 28px auto;
    justify-items: start;
    align-items: center;
    gap: 12px;
    width: fit-content;
    text-align: left;
    font-size: 15px;
  }
  .sempre-selo{ width: 28px; height: 28px; font-size: 14px; }
  .qualify-nao{ margin-top: 20px; }


  /* ── equilíbrio: fica só o mural de fotos, colado ao "porquê eu" ──────
     Sem título nem texto, e com o mesmo fundo da secção de cima, as duas
     leem-se como uma só: o retrato do André e, por baixo, a vida dele. */
  .balance-text{ display: none; }
  main > .section.balance{
    background: var(--paper);
    padding-top: 0;
  }
  main > .section.why{ padding-bottom: clamp(18px, 4vw, 30px); }
  /* as seguintes acertam a alternância outra vez */
  main > .section.msgs{ background: var(--paper-warm); }
  main > .section.booking{ background: var(--paper); }

  /* ── histórias completas mais compactas ──────────────────────────────
     São quatro cartões compridos num ecrã estreito: tudo encolhe um
     pouco para a secção deixar de ser uma viagem. */
  .stories-grid{ gap: 14px; }
  .story{ padding: 14px 14px 16px; gap: 9px; }
  .story-name{ font-size: 18px; }
  .story-meta{ font-size: 12.5px; }
  .story-label{ font-size: 10px; margin-bottom: -8px; }
  .story-list{ font-size: 14px; gap: 7px; }
  .story-list li{ padding-left: 26px; }
  .story-list li::before{ width: 18px; height: 18px; font-size: 10.5px; }
  .story-quote{ font-size: 12.5px; padding-top: 10px; margin-top: 6px; }

  /* As duas listas ao centro, e com a mesma largura: assim os pontos das
     duas começam exatamente no mesmo sítio, em vez de cada bloco se
     centrar pela sua própria linha mais comprida. */
  .qualify{ text-align: center; }
  .qualify-list{ max-width: 31ch; }

  /* Todos os títulos de secção ao centro, como os outros: eram só estes
     dois a ficar encostados à esquerda. */
  .why .section-title,
  .balance .section-title{ text-align: center; }

  /* a idade e a profissão vivem nas histórias completas, não aqui */

  /* pedido: fora as frases de abertura das fases — a lista diz o mesmo
     em menos palavras */
  .fase-intro{ display: none; }



  .balance-grid{ grid-template-columns: 1fr; row-gap: 42px; }
  .balance-photos{ max-width: 440px; }
  .balance-body{ max-width: none; }
}

@media (max-width: 560px){

  /* ── escala do telemóvel ────────────────────────────────────────────────
     Sete medidas, e nada fora delas. Cada tamanho tem um trabalho:

       micro  11px   sobrancelhas, legendas, metadados
       small  12.5px texto dentro de cartões estreitos
       body   14px   corpo de leitura normal
       lead   16px   frases de destaque, botões, assinatura
       h3     15px   títulos de cartão
       h2     20px   títulos de coluna
       h1     28px   títulos de secção
       hero   32px   o h1 da página

     Antes disto havia catorze tamanhos diferentes entre 10 e 31,5px, muitos
     deles a um ponto e meio de distância uns dos outros — perto demais para
     parecerem escolha e longe demais para parecerem iguais.              */
  :root{
    --m-micro: 11px;
    --m-small: 12.5px;
    --m-body:  14px;
    --m-lead:  16px;
    --m-h3:    15px;
    --m-h2:    20px;
    --m-h1:    28px;
    --m-hero:  32px;

    /* e duas medidas de cartão, iguais em toda a página */
    --m-card-pad: 14px 12px 16px;
    --m-card-rad: 10px;

    --step: 66px;   /* secções mais curtas: aqui o scroll é o custo */
  }

  body{ font-size: var(--m-lead); }

  .wrap{ padding-inline: 20px; }  .ba-name{ font-size: var(--m-h2); }
  .footer-mark{ font-size: var(--m-lead); }

  /* ── micro ────────────────────────────────────────────────────────────*/
  .eyebrow{ font-size: var(--m-micro); letter-spacing: .18em; margin-bottom: 16px; }
  .pill{ font-size: var(--m-micro); padding: 5px 13px; margin-bottom: 14px; letter-spacing: .16em; }
  .qualify-label{ font-size: var(--m-micro); letter-spacing: .18em; margin-bottom: 14px; }  .ba-meta{ font-size: var(--m-micro); }
  .ba-card figcaption{ font-size: var(--m-micro); }
  .why-photo figcaption{ font-size: var(--m-micro); }

  /* ── títulos ──────────────────────────────────────────────────────────*/
  .hero-title{
    font-size: var(--m-hero);
    line-height: 1.05;
    letter-spacing: -.026em;
  }
  .hero-title-short{ font-size: var(--m-hero); }
  .section-title,
  .closing-title,
  .booking-title{ font-size: var(--m-h1); line-height: 1.08; }
  .video-label{ font-size: var(--m-h2); }
  .vs-title{ font-size: var(--m-h2); line-height: 1.08; letter-spacing: -.016em; }
  .pillar-title,
  .prep-title,
  .faq-item dt{ font-size: var(--m-h3); line-height: 1.2; letter-spacing: -.006em; }

  /* ── corpo ────────────────────────────────────────────────────────────*/
  .hero-sub,
  .balance-lead,
  .signature,
  .booking-sub,
  .booking-btn{ font-size: var(--m-lead); }
  .btn, .btn-large{ display: block; padding: 16px 20px; font-size: var(--m-lead); }  .why-text p,
  .why-lead,
  .cta-note,
  .faq-item dd{ font-size: var(--m-body); }
  /* a lista desce ao tamanho de cartão: são sete pontos seguidos e o que
     custa aqui é a altura, não a leitura de cada um */
  .proof-name{ font-size: 17px; }
  /* são sete pontos seguidos: aqui o que custa é a altura da coluna,
     não a leitura de cada linha */
  .qualify-list li{ font-size: 14.5px; }
  .proof-quote{ font-size: var(--m-small); }

  .pillar-text,
  /* sem hifenização: partia palavras a meio com um traço no fim da linha */
  .prep-text{ font-size: var(--m-small); line-height: 1.48; hyphens: manual; }

  /* ── cartões: mesma caixa em toda a página ────────────────────────────*/
  .vs-card,
  .prep-card{ padding: var(--m-card-pad); border-radius: var(--m-card-rad); }

  /* ── hero ─────────────────────────────────────────────────────────────*/
  .hero{ padding-top: 26px; }
  .hero-sub{ margin-top: 18px; }

  .player{ padding: 6px; border-radius: 14px; }
  .player-surface{ border-radius: 9px; }
  .player-play{ width: 66px; height: 48px; border-radius: 11px; }
  .vsl-som{ inset: 6px; border-radius: 9px; }
  .vsl-som-pilula{ padding: 14px 22px; font-size: 15.5px; gap: 9px; }
  .player-play svg{ width: 26px; height: 26px; }  /* ── isto é para ti se ────────────────────────────────────────────────*/
  .qualify{ margin-top: 18px; }
  .qualify-label{ margin-bottom: 10px; font-size: 10.5px; letter-spacing: .16em; }
  .qualify-list{ gap: 7px; }
  .qualify-list li{ grid-template-columns: 14px 1fr; gap: 8px; line-height: 1.34; }
  .ico{ width: 14px; height: 14px; margin-top: 2px; }

  .cta-block{ margin-top: 28px; }  /* ── texto curto vs. texto longo ──────────────────────────────────────*/
  .desktop-only{ display: none !important; }

  /* ── problema vs. solução ─────────────────────────────────────────────
     Duas colunas num ecrã de 375px, como no desktop. A goteira desta
     secção encolhe 4px para a coluna útil não ficar mais estreita do que
     o texto aguenta. A legenda de apoio de cada lado não aparece.       */
  .versus .wrap{ padding-inline: 16px; }
  .vs-lead-title{ margin-bottom: 26px; }
  /* Voltaram os pares lado a lado: cada ponto é curto outra vez, e é a
     leitura em paralelo que faz a secção. */
  .vs-grid{
    grid-template-columns: 1fr 22px 1fr;
    column-gap: 7px;
    row-gap: 12px;
  }
  .pillar-frase{ font-size: var(--m-small); line-height: 1.4; }
  .vs-head{ margin-bottom: 4px; }
  /* pedido: fora as sobrancelhas. Com o título da secção por cima já se
     percebe do que se trata, e são os dois títulos pretos que marcam os
     lados. Também resolve o desalinhamento que davam: "Se já tentaste
     tudo" ocupava duas linhas e "A solução" uma. */
  .vs-head .eyebrow{ display: none; }
  .vs-title{ margin-bottom: 0; }
  .vs-solution{ border-left-width: 2px; }
  .pillar{ gap: 7px; }
  /* reserva duas linhas mesmo quando o título só ocupa uma: assim o texto
     do problema e o da resposta arrancam à mesma altura */
  .pillar-title,
  .prep-title{ min-height: calc(var(--m-h3) * 1.2 * 2); }
  .vs-arrow svg{ width: 21px; }

  /* ── porquê eu ────────────────────────────────────────────────────────
     Empilhado: título, retrato a toda a largura, história por baixo.

     A duas colunas o retrato nunca passava dos 160px — pequeno para a
     única fotografia da página em que ele aparece de corpo inteiro — e a
     história ficava numa medida de vinte caracteres, cheia de hífenes.
     A toda a largura são 335px de retrato e uma medida de leitura a
     sério, sem partir palavras. Custa altura e vale a pena: é a secção
     onde a pessoa decide se confia nele.                                */
  .why-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "text"
      "photo";
    row-gap: 0;
  }
  .why-head{ margin-bottom: 22px; }
  .why-photo{
    position: static;
    max-width: none;
    margin-top: 30px;
  }
  .why-photo img{
    display: block;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 22px 44px -26px rgba(60, 36, 18, .55);
  }
  .why-photo figcaption{
    margin-top: 11px;
    line-height: 1.4;
    letter-spacing: .04em;
  }
  /* a toda a largura já não é preciso partir palavras */
  .why-text p{ margin: 0 0 15px; max-width: none; line-height: 1.6; hyphens: manual; }
  .why-text .why-first{ margin-top: 0; }
  /* na medida larga o parágrafo da viragem lê-se como citação destacada */
  .why-lead{ padding-left: 17px; margin-block: 22px !important; }  /* ── pós-chamada: os quatro cartões em 2x2, todos da mesma altura ─────*/
  .prep-head{ margin-bottom: 24px; }
  /* auto-rows iguais: as duas filas ficam com a mesma altura, senão a de
     baixo encolhe e a grelha deixa de parecer uma grelha */
  .prep-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
  .prep-card{ gap: 9px; }
  .prep-ico{ width: 32px; height: 32px; border-radius: 8px; }
  .prep-ico svg{ width: 17px; height: 17px; }

  /* ── testemunhos, mensagens e a caixa de marcação ─────────────────────
     Um vídeo por linha, a ecrã inteiro — são só quatro, e cada um é um
     bloco de chamada, não um retrato pequeno. Duas colunas no mosaico
     de mensagens: a três, as capturas ficavam pequenas demais para se
     ler a conversa.                                                    */
  .proof .section-title,
  .msgs .section-title{ margin-bottom: 26px; }
  .proof-grid{ gap: 30px; }
  .stories-grid{ grid-template-columns: 1fr; gap: 20px; }
  .qa-grid{ grid-template-columns: 1fr; gap: 16px; }
  .qa-item:last-child:nth-child(odd){ width: 100%; }
  .qa-item{ padding: 10px 10px 14px; border-radius: 13px; gap: 11px; }
  .qa-title{ font-size: 15.5px; }
  .story{ padding: 12px 12px 16px; border-radius: 13px; gap: 12px; }
  .story-name{ font-size: 21px; }
  .story-list{ font-size: 15px; }
  .story-quote{ font-size: 13px; }
  .story-list li{ padding-left: 29px; }
  .story-list li::before{ width: 20px; height: 20px; font-size: 11px; }
  .lightbox-fechar{ top: -42px; }
  .proof-item{ gap: 12px; }
  .proof-card{ padding: 6px; border-radius: 13px; }
  .proof-surface{ border-radius: 8px; }
  .proof-quote{ line-height: 1.42; }

  .msgs-grid{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .msg{ border-radius: 9px; }
  .msgs-mais{ margin-top: 18px; }
  .btn-quiet{ display: inline-block; width: auto; padding: 13px 26px; font-size: var(--m-small); }

  .booking-box{ padding: 28px 18px 26px; border-radius: 16px; }
  .booking-ico{ width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; }
  .booking-ico svg{ width: 21px; height: 21px; }
  .booking-title{ margin-bottom: 10px; }
  /* o convite em três linhas: a caixa dá mais largura ao texto e o corpo
     desce o mínimo para lá caber */
  .booking-sub{ margin-bottom: 22px; font-size: 15px; line-height: 1.5; }
  .booking-box{ padding-inline: 12px; }
  /* a linha das condições fica mais discreta do que o convite */
  .booking-nota{ font-size: 12.5px; line-height: 1.45; }
  .booking-btn{ padding-block: 16px; }

  .player-medio{ max-width: none; }
  .video-label{ margin: 26px 0 14px; }

  /* ── resultados e equilíbrio ──────────────────────────────────────────*/
  /* No telemóvel os cartões são mais estreitos, por isso a mesma duração
     dava menos pixels por segundo do que no desktop: a faixa arrastava-se.
     Estes números mantêm a proporção do desktop — a de baixo mais rápida
     do que a de cima. */
  .marquee{ gap: 16px; }
  .marquee-row{ animation-duration: 30s; }
  .marquee-row-reverse{ animation-duration: 21s; }
  .ba-card{ width: 300px; }
  .marquee-row > .ba-card{ margin-right: 16px; }
  .snap{ padding: 7px 7px 24px; }

  .footer-inner{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links{ flex-wrap: wrap; gap: 16px; }
}

/* ── movimento reduzido ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee{
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: 24px;
  }
  .marquee-row{ animation: none; }}