/* ==========================================================================
   Gonçalo Ferraz — página de vendas (tráfego pago)
   Mesma identidade do site (Bodoni Moda + Jost, navy/teal, fios sem caixas).
   Só o que é próprio da página. Carrega DEPOIS de site.css; o movimento está
   em assets/js/lp.js (e o do site em site.js). Estados iniciais sempre debaixo
   de html.js — sem JS (ou com movimento reduzido) nada fica escondido.
   ========================================================================== */

/* ---------- cabeçalho enxuto: sem navegação, para não perder o clique ---------- */
.lp-head .lp-head-side { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.lp-head .lp-tel { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px; opacity: .8; transition: opacity .3s var(--ease), color .3s var(--ease); }
.lp-head .lp-tel:hover { opacity: 1; color: var(--teal); }
.lp-head .lp-tel svg { width: 15px; height: 15px; }
.lp-head .nav-act { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 11px 20px; border: 1px solid currentColor; white-space: nowrap;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.lp-head .nav-act:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.lp-head .nav-act .sm { display: none; }
@media (max-width: 560px) {
  .lp-head .lp-tel span { display: none; }
  .lp-head .lp-tel svg { width: 20px; height: 20px; }
  .lp-head .nav-act { padding: 10px 14px; letter-spacing: .14em; }
  .lp-head .nav-act .lg { display: none; }
  .lp-head .nav-act .sm { display: inline; }
}

/* ---------- topo (o mesmo "scroll 360" do site) ---------- */
/* 4 linhas de título: em portáteis (640–720 px de altura) a linha de baixo saía do ecrã */
.lp .hero-body h1 { max-width: 19ch; font-size: clamp(34px, min(6.2vw, 8.4vh), 92px); }
.lp .hero-body .lede { max-width: 34em; }
@media (max-width: 720px) { .lp .hero-body h1 { font-size: clamp(31px, min(10.4vw, 5.4vh), 44px); } }
/* a máscara de cada linha cortava acentos das maiúsculas e o "ç" */
.lp .hero-body .line { padding: .16em 0 .1em; margin: -.16em 0 -.1em; }
/* o texto do topo entra por CSS, sem esperar pelo JS — antes ficava invisível até o GSAP,
   o Lenis e o ScrollTrigger chegarem (no telemóvel em 4G lento, 12 s sem título) */
.lp .hero-body .line > span { transition: none; animation: lp-line 1.05s var(--ease-out) both; }
.lp .hero-body .line:nth-child(2) > span { animation-delay: .09s; }
.lp .hero-body .lede, .lp .hero-body .acts, .lp .hero-colophon .wrap > * { transition: none; animation: lp-up .9s var(--ease-out) both; }
.lp .hero-body .lede { animation-delay: .25s; }
.lp .hero-body .acts { animation-delay: .38s; }
.lp .hero-colophon .wrap > * { animation-delay: .5s; }
@keyframes lp-line { from { transform: translateY(110%); } to { transform: none; } }
@keyframes lp-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* colofão: onde fica e as estrelas, legíveis */
.lp .hero-colophon span { font-size: 11.5px; color: var(--bone-2); }
.lp .hero-colophon b { color: #f7f9f8; }
.lp .hero-colophon .colo-stars { display: inline-flex; gap: 3px; margin-right: 10px; color: var(--teal); vertical-align: -1px; }
.lp .hero-colophon .colo-stars svg { width: 11px; height: 11px; }
/* o selo sobe para cima da fotografia — em baixo ficava por trás do botão do chat */
.lp .hero-seal { bottom: auto; top: 128px; }
/* telemóvel: só fotografia atrás do título — véu mais escuro para o itálico verde se ler */
@media (max-width: 720px) {
  .lp .hero-tint { background: linear-gradient(to bottom, rgba(0,36,59,.8) 0%, rgba(0,36,59,.72) 45%, rgba(0,36,59,.95) 100%); }
}

/* ---------- confiança: três números que contam ---------- */
.lp-stats { background: var(--paper-lift); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px;
  text-align: center; padding: clamp(34px, 3.8vw, 52px) clamp(12px, 2vw, 30px); }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--hair);
  transform-origin: top; transition: transform 1s var(--ease-out); }
.stat-n { display: flex; align-items: baseline; font-family: var(--display); font-weight: 400; font-size: clamp(46px, 5.6vw, 76px);
  line-height: .9; letter-spacing: -.01em; color: var(--ink); }
/* o "+" e a vírgula da Bodoni são finos demais em grande — vão na letra do texto */
.stat-plus { align-self: center; font-family: var(--sans); font-weight: 300; font-size: .56em; line-height: 1; color: var(--teal); margin: 0 .06em .08em 0; }
.stat-c { font-family: var(--sans); font-weight: 300; font-size: .74em; margin: 0 .04em 0 .02em; }
.stat i { font-style: normal; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.stat-stars { display: flex; gap: 4px; color: var(--teal); }
.stat-stars svg { width: 14px; height: 14px; transition: transform .5s var(--ease-out), opacity .5s var(--ease); }
/* a nota e as críticas são ligações, mas não mudam de cor — a fila lê-se igual */
a.stat i { transition: color .3s var(--ease); }
a.stat:hover i { color: var(--teal); }
html.js .stats .stat { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js .stats .stat + .stat::before { transform: scaleY(0); }
html.js .stats .stat-stars svg { opacity: 0; transform: scale(.4); }
html.js .stats.is-in .stat { opacity: 1; transform: none; }
html.js .stats.is-in .stat + .stat::before { transform: none; }
html.js .stats.is-in .stat-stars svg { opacity: 1; transform: none; }
.stats.is-in .stat:nth-child(2) { transition-delay: .12s; }
.stats.is-in .stat:nth-child(3) { transition-delay: .24s; }
.stats.is-in .stat-stars svg:nth-child(1) { transition-delay: .5s; }
.stats.is-in .stat-stars svg:nth-child(2) { transition-delay: .62s; }
.stats.is-in .stat-stars svg:nth-child(3) { transition-delay: .74s; }
.stats.is-in .stat-stars svg:nth-child(4) { transition-delay: .86s; }
.stats.is-in .stat-stars svg:nth-child(5) { transition-delay: .98s; }
@media (max-width: 560px) {
  .stat { padding: 28px 6px; gap: 9px; }
  .stat-n { font-size: 40px; }
  .stat i { font-size: 10px; letter-spacing: .1em; }
  .stat-stars svg { width: 10px; height: 10px; }
}

/* ---------- a dor: tópicos que acendem ao longo de uma linha ---------- */
.lp-pain .head.roomy { margin-bottom: clamp(44px, 5.4vw, 80px); }
.trail { --tr: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
html.js .trail { --tr: 0; }
.trail-col { position: relative; padding-left: 46px; }
.trail-rail { position: absolute; left: 5px; top: 10px; bottom: 30px; width: 1px; background: var(--hair); }
.trail-rail i { display: block; width: 100%; height: 100%; background: var(--teal); transform-origin: center top; transform: scaleY(var(--tr)); }
.trail-list { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.trail-item { position: relative; }
.trail-dot { position: absolute; left: -46px; top: 8px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--hair);
  background: var(--paper); transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease-out); }
.trail-item.is-on .trail-dot { background: var(--teal); border-color: var(--teal); transform: scale(1.3); }
.trail-n { display: block; font-family: var(--display); font-size: 14px; letter-spacing: .24em; color: var(--ink-3); transition: color .5s var(--ease); }
.trail-item.is-on .trail-n { color: var(--teal); }
.trail-item h3 { margin-top: 8px; font-size: clamp(25px, 2.7vw, 36px); }
.trail-item p { margin-top: 10px; font-size: 17px; color: var(--ink-2); max-width: 34em; }
.trail-thumb { display: none; }
.trail-end .label { margin-bottom: 14px; }
/* `.trail-item p` do bloco ganhava ao `.statement` do site e encolhia o resumo */
.trail-item.trail-end .statement { margin-top: 0; max-width: 17ch; font-size: clamp(29px, 4vw, 52px); line-height: 1.14; color: var(--ink); }
html.js .trail-item { opacity: .16; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .trail-item.is-on { opacity: 1; transform: none; }

.trail-media { position: sticky; top: 118px; }
.trail-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-lift); }
.trail-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease), transform 2s var(--ease-out); }
.trail-frame img.is-on { opacity: 1; transform: none; }
.trail-count { display: block; margin-top: 14px; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trail-count b { font-weight: 500; color: var(--teal); }
@media (max-width: 900px) {
  .trail { grid-template-columns: 1fr; }
  .trail-media { display: none; }
  .trail-col { padding-left: 34px; }
  .trail-dot { left: -34px; }
  .trail-item:not(.trail-end) { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: 16px; }
  .trail-item:not(.trail-end) > :not(.trail-thumb):not(.trail-dot) { grid-column: 1; }
  .trail-thumb { display: block; grid-column: 2; grid-row: 1 / span 3; width: 76px; aspect-ratio: 4 / 5; object-fit: cover; align-self: start; margin-top: 4px; }
}

/* ---------- o que já tentaste (baralho) ---------- */
.lp .deck { min-height: 360px; }
.deck-miss { display: block; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.deck-miss b { font-weight: 500; color: var(--teal); }
.lp .deck-body p { font-size: 17px; max-width: 30em; }

/* ---------- blocos imagem + texto ---------- */
.lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.lp-split-r .lp-split-media { order: 2; }
.lp-split-r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lp-split .spec-frame { aspect-ratio: 4 / 5; }
.lp-vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.lp-vframe-wide { aspect-ratio: 16 / 11 !important; }
@media (max-width: 900px) {
  .lp-split, .lp-split-r { grid-template-columns: 1fr; }
  .lp-split-r .lp-split-media { order: 0; }
  .lp-split .spec-frame { aspect-ratio: 4 / 3; }
}

/* a solução: método em linha vertical, ao lado da fotografia */
.lp-method .metodo { padding-left: 32px; }
.lp-method .mt-rail { left: 5px; right: auto; top: 7px; bottom: 9px; width: 1px; height: auto; }
.lp-method .mt-rail i { transform-origin: center top; transform: scaleY(var(--mt)); }
.lp-method .mt-list { grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 46px); }
.lp-method .mt-step { padding-top: 0; }
.lp-method .mt-dot { left: -32px; top: 7px; }
.lp-method .mt-step p { max-width: 34em; }
.lp-method .head.roomy { margin-bottom: clamp(38px, 4.4vw, 64px); }

/* a oferta */
.lp-offer-text > * + * { margin-top: clamp(20px, 2.4vw, 30px); }
.lp-offer-text h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.06; }
.offer-inc { border-top: 1px solid var(--hair); }
.offer-inc li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px 22px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--hair); }
.offer-inc b { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.8vw, 23px); }
.offer-inc span { font-size: 15.5px; color: var(--ink-2); }
.offer-price { display: flex; align-items: baseline; gap: 10px; }
.offer-price small { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.offer-price b { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 5.6vw, 74px); line-height: .9; }
.offer-price i { font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.lp-offer { padding-bottom: calc(var(--bay) * .62); }
.offer-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px !important; }
@media (max-width: 560px) { .offer-inc li { grid-template-columns: 1fr; } }

/* críticas: título por cima da roda */
.lp-rhead { padding-bottom: clamp(18px, 2vw, 30px); }

/* ---------- dúvidas (abas) ---------- */
.lp .faq-set h2 { position: static; }

/* ---------- rodapé de página (uma faixa) ---------- */
.lp-foot { background: var(--night-deep); color: var(--bone-3); padding: 34px 0 30px; }
.lp-foot .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 40px; align-items: center; }
.lp-foot .brand { color: var(--bone); }
.lp-foot-c { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 30px; font-size: 14.5px; color: var(--bone-2); }
.lp-foot-c a { display: inline-flex; align-items: center; gap: 9px; transition: color .3s var(--ease); }
.lp-foot-c a:hover { color: var(--teal); }
.lp-foot-c svg { width: 15px; height: 15px; color: var(--bone-3); }
.lp-foot-l { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 20px; border-top: 1px solid var(--hair-night-soft);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lp-foot-l a:hover { color: var(--teal); }
@media (max-width: 720px) {
  .lp-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .lp-foot .wrap { grid-template-columns: 1fr; }
  .lp-foot-c { justify-content: flex-start; flex-direction: column; }
}
@media (min-width: 721px) { .lp-foot { padding-bottom: 104px; } }

/* ---------- depoimentos em vídeo (a roda das críticas, com vídeos verticais) ---------- */
.lp-proof { padding-bottom: calc(var(--bay) * .3); overflow: hidden; }
.vwheel { margin-top: clamp(34px, 4vw, 56px); }
.vcard { position: absolute; top: 0; left: 50%; width: min(330px, 70vw); margin: 0 0 0 calc(min(330px, 70vw) / -2);
  cursor: pointer; user-select: none; background: #f7f7f4; border: 1px solid var(--hair-soft);
  transition: transform .9s var(--ease-out), opacity .7s var(--ease), box-shadow .7s var(--ease), filter .7s var(--ease);
  will-change: transform, opacity; }
.vcard.is-center { cursor: default; box-shadow: 0 28px 64px rgba(0, 26, 44, .16); border-color: var(--hair); }
.vcard-media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--night); }
.vcard-media img, .vcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.vcard-media img { filter: saturate(.86) brightness(.8); transition: filter .6s var(--ease), transform 1.8s var(--ease-out); }
.vcard.is-center:hover .vcard-media img { filter: saturate(.95) brightness(.9); transform: scale(1.03); }
.vcard-tag { position: absolute; z-index: 2; left: 16px; top: 16px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone); }
.vcard-play { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; width: 100%; color: var(--bone); }
.vcard-play span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(236,238,236,.55);
  background: rgba(0,26,44,.28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease-out); }
.vcard-play svg { width: 19px; height: 19px; margin-left: 3px; }
.vcard.is-center .vcard-play:hover span { background: rgba(0,175,157,.4); border-color: var(--teal); transform: scale(1.07); }
.vcard:not(.is-center) .vcard-play { pointer-events: none; }
.vcard.is-playing .vcard-play, .vcard.is-playing .vcard-tag, .vcard.is-playing img { display: none; }
.vcard figcaption { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.vcard figcaption b { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; }
.vcard figcaption em { font-style: italic; color: var(--teal); }

/* das críticas ao Gonçalo: menos ar */
.lp .rsec { padding-bottom: calc(var(--bay) * .3); }

/* ---------- o que se quer de volta: cartões ---------- */
.dreams { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.lp-dreams .head.roomy { margin-bottom: clamp(40px, 5vw, 72px); }
.lp-dreams .head h2 { color: #f7f9f8; }
.dream { position: relative; display: flex; flex-direction: column; min-height: clamp(250px, 21vw, 310px); padding: clamp(24px, 2.4vw, 34px);
  background: #f4f3ef; color: var(--ink); overflow: hidden; will-change: transform;
  box-shadow: 0 30px 60px -30px rgba(0, 10, 20, .6); transition: box-shadow .6s var(--ease); }
.dream-top { display: flex; align-items: center; justify-content: space-between; }
.dream-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair); color: var(--teal);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.dream-ico svg { width: 26px; height: 26px; }
.dream-n { font-family: var(--display); font-size: 14px; letter-spacing: .24em; color: var(--ink-3); }
.dream h3 { margin-top: auto; padding-top: 34px; font-size: clamp(27px, 2.5vw, 35px); line-height: 1.1; }
.dream h3 em { font-style: italic; color: var(--teal); }
.dream-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out); }
.dream:hover .dream-bar, .dream.is-lit .dream-bar { transform: none; }
.dream:hover .dream-ico { background: var(--teal); border-color: var(--teal); color: #fff; }
@media (max-width: 1000px) { .dreams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .dreams { grid-template-columns: 1fr; gap: 14px; }
  .dream { min-height: 0; }
  .dream h3 { padding-top: 26px; }
}

/* ---------- chat: um ponto de mensagem no botão até se abrir ---------- */
.wa-badge { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
  display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1;
  box-shadow: 0 0 0 2px var(--paper); animation: wa-badge 2.6s var(--ease-out) 1.4s infinite; }
@keyframes wa-badge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.96); } }
.wa-dock.is-open .wa-badge, .wa-dock.is-seen .wa-badge { display: none; }
@media (prefers-reduced-motion: reduce) { .wa-badge { animation: none; } }

/* ---------- chamadas a meio da página ---------- */
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: clamp(44px, 5vw, 72px); }
.lp-cta-note { font-size: 15px; color: var(--ink-2); }
.on-night .lp-cta-note { color: var(--bone-2); }
.lp-fails .lp-cta { margin-top: clamp(40px, 4.4vw, 64px); }
.lp-method .lp-cta { margin-top: clamp(38px, 4vw, 56px); }
.spec .lp-cta { margin-top: clamp(26px, 3vw, 38px); }
.lp-proof .lp-cta { justify-content: center; margin-top: clamp(40px, 4.4vw, 60px); }
.lp-dreams .lp-cta { justify-content: center; }
@media (max-width: 560px) { .lp-cta .act { width: 100%; justify-content: center; } .lp-proof .lp-cta, .lp-dreams .lp-cta { text-align: center; } }

/* ---------- final: o próximo passo + vídeo com uma conversa a acontecer ---------- */
.lp-final { background: var(--night); color: var(--bone); position: relative; overflow: hidden; }
.lp-final::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("../brand/padrao-tile.svg"); background-size: 260px auto; }
.lp-final-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px);
  align-items: center; padding-top: var(--bay); padding-bottom: var(--bay); }
.lp-final-cta h2 { margin-top: 20px; font-size: clamp(38px, 5vw, 70px); color: #f7f9f8; max-width: 12ch; }
.lp-final-cta p { margin-top: 24px; color: var(--bone-2); max-width: 30em; }
.lp-final-cta .acts { margin-top: clamp(28px, 3.2vw, 40px); row-gap: 18px; }
.lp-ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.lp-ticks li { position: relative; padding-left: 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.lp-ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.chatstage { position: relative; min-height: clamp(460px, 44vw, 640px); }
.chatstage-frame { position: absolute; right: 0; top: 0; width: 76%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-deep); will-change: transform; }
.chatstage-frame video { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; max-width: none; filter: saturate(.9) contrast(1.04); }
.chatstage-back { position: absolute; right: -3%; top: 7%; width: 76%; aspect-ratio: 4 / 5; border: 1px solid rgba(0,175,157,.55); will-change: transform; }
.chatstage-chat { position: absolute; left: 0; bottom: 4%; width: min(360px, 66%); z-index: 3; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 18px; background: rgba(244,243,239,.97); color: var(--ink); box-shadow: 0 34px 70px -24px rgba(0,8,16,.75);
  transform: rotate(-2deg); transition: transform .6s var(--ease-out); will-change: transform; }
.chatstage-chat:hover { transform: rotate(0deg) translateY(-4px); }
.chatstage-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--hair-soft); }
.chatstage-head .wa-av { width: 38px; height: 38px; }
.chatstage-who b { display: block; font-weight: 500; font-size: 14px; }
.chatstage-who i { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; color: var(--ink-3); }
.chatstage-who .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: spec-live 1.8s ease-in-out infinite; }
.chatstage-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 212px; }
.cb { display: block; max-width: 86%; padding: 10px 13px; font-size: 14.5px; line-height: 1.45; background: var(--paper-lift); color: var(--ink);
  border-radius: 3px 14px 14px 14px; align-self: flex-start; }
.cb.me { align-self: flex-end; background: var(--teal); color: #fff; border-radius: 14px 3px 14px 14px; }
.cb-typing { display: none; gap: 5px; padding: 13px 14px; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: wa-dot 1.2s infinite ease-in-out; }
.cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
html.js .chatstage .cb:not(.cb-typing) { display: none; }
html.js .chatstage .cb.is-in { display: block; animation: cb-in .5s var(--ease-out) both; }
html.js .chatstage .cb-typing.is-in { display: inline-flex; animation: cb-in .35s var(--ease-out) both; }
@keyframes cb-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.chatstage-note { position: absolute; right: 0; bottom: -30px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
/* telemóvel: vídeo em cima, conversa por baixo a entrar só na parte de baixo do vídeo
   (em absoluto, com as 4 mensagens, tapava o Gonçalo); o espaço da conversa inteira fica
   reservado para a página não saltar enquanto as mensagens aparecem */
@media (max-width: 900px) {
  .lp-final-in { grid-template-columns: 1fr; }
  .chatstage { min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
  .chatstage-frame { position: relative; width: 84%; margin-left: auto; aspect-ratio: 1 / 1; }
  .chatstage-back { width: 84%; aspect-ratio: 1 / 1; top: 3%; right: -3%; }
  .chatstage-chat { position: relative; left: auto; bottom: auto; width: 92%; max-width: 420px; margin-top: -26%; }
  .chatstage-log { min-height: 262px; }
  .cb { font-size: 13.5px; padding: 9px 12px; }
  .chatstage-note { position: static; margin-top: 18px; }
}

/* críticas: título por cima da roda */
.lp-rsec .head { margin-bottom: clamp(30px, 3.6vw, 52px); }


/* telemóvel: a fotografia do topo recortada à faixa que se vê (431 KB → ~70 KB) */
@media (max-width: 720px) { .lp .hero-still { background-image: url("../img/hero-inicio-telemovel.jpg") !important; } }

/* ---------- vagas reais, por baixo dos botões ---------- */
.vagas { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.vagas[hidden] { display: none; }
.vagas-k { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vagas-k b { font-weight: 500; color: var(--ink); }
.vagas-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(0,175,157,.55); animation: vagas-ping 2.2s var(--ease-out) infinite; }
@keyframes vagas-ping { 0% { box-shadow: 0 0 0 0 rgba(0,175,157,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0,175,157,0); } }
.vagas-l { display: flex; flex-wrap: wrap; gap: 8px; }
.vagas-v { padding: 8px 13px; border: 1px solid var(--hair); font-size: 13.5px; letter-spacing: .02em; color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.vagas-v:hover { border-color: var(--teal); background: rgba(0,175,157,.08); }
.on-night .vagas-k { color: var(--bone-3); }
.on-night .vagas-k b { color: #f7f9f8; }
.on-night .vagas-v { border-color: var(--hair-night); color: var(--bone); }
.on-night .vagas-v:hover { border-color: var(--teal); background: rgba(0,175,157,.14); color: #fff; }
.hero-body .vagas { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .vagas-dot { animation: none; } }

/* ---------- aviso de cookies ---------- */
/* computador: canto direito, por cima do botão do chat — à esquerda tapava os botões do topo */
.ck { position: fixed; z-index: 90; right: clamp(16px, 2.4vw, 34px); bottom: calc(clamp(16px, 2.4vw, 34px) + 78px); width: min(400px, calc(100vw - 24px));
  background: var(--paper); color: var(--ink); padding: 20px 20px 18px; border: 1px solid var(--hair);
  box-shadow: 0 24px 60px rgba(0, 26, 44, .24); opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.ck.is-in { opacity: 1; transform: none; }
.ck-t { font-family: var(--display); font-size: 22px; line-height: 1.2; }
.ck-d { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ck-mais { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.ck-mais summary { cursor: pointer; color: var(--ink-3); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ck-mais p { margin-top: 8px; line-height: 1.55; }
.ck-mais a { text-decoration: underline; text-underline-offset: 2px; }
/* recusar tem de ser tão fácil como aceitar: mesmo tamanho, lado a lado */
.ck-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ck-acts button { padding: 13px 10px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--ink); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.ck-acts button[data-ck="sim"] { background: var(--ink); color: var(--paper); }
.ck-acts button:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.lp-foot-ck { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 0; }
.lp-foot-ck:hover { color: var(--teal); }
@media (max-width: 720px) { .ck { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); } }
/* a vírgula da Bodoni, em grande, lê-se como um ponto (61.50) */
.offer-price .vg { font-family: var(--sans); font-weight: 300; font-size: .74em; margin: 0 .03em 0 .01em; }
.vagas-k > span { line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }

/* telemóvel: o topo tem a altura exata do ecrã (o vídeo anda com o scroll) — com as vagas
   passava do ecrã nos telemóveis baixos. No topo: 2 vagas numa linha e sem a morada. */
@media (max-width: 720px) {
  .hero-body .vagas-v:nth-child(n+3) { display: none; }
  .hero-body .vagas-l { flex-wrap: nowrap; }
  .hero-body .vagas-k { font-size: 10.5px; letter-spacing: .08em; }
  .lp .hero-colophon .wrap > span:nth-child(3) { display: none; }
  .lp .hero-body .acts { row-gap: 14px; }
}
@media (max-width: 720px) and (max-height: 740px) {
  .lp .hero-body h1 { font-size: clamp(29px, min(9.2vw, 5vh), 40px); }
  .lp .hero-body .lede { font-size: 15.5px; line-height: 1.5; margin-top: 12px; }
  .lp .hero-body .acts { margin-top: 18px; row-gap: 10px; }
  .hero-body .vagas-v { padding: 7px 10px; font-size: 12.5px; }
}

/* ---------- v7: prova num só bloco + resposta a "a massagem só alivia" ---------- */
.lp-proof, .lp-rsec { background: var(--paper-lift); }
.lp-rsec .lp-cta { justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
/* texto corrido, na letra do texto (Jost) e mais carregado — a Bodoni fica para os títulos */
.lp-contrast { margin-top: clamp(40px, 4.6vw, 64px); max-width: 46em; padding-left: 20px; border-left: 2px solid var(--teal);
  font-family: var(--sans); font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.6; letter-spacing: .005em; color: var(--ink); }
.lp-contrast b { font-weight: 500; font-style: normal; color: var(--teal); }
.lp-fails .lp-contrast + .lp-cta { margin-top: clamp(26px, 3vw, 38px); }
@media (max-width: 560px) { .lp-rsec .lp-cta { text-align: center; } }

/* v8: críticas logo a seguir à solução, vídeos por baixo — um só bloco de prova */
/* v10: críticas entre a solução e os sonhos; vídeos entre os sonhos e a consulta (secções soltas) */
.lp .lp-rsec { padding-top: var(--bay); padding-bottom: calc(var(--bay) * .85); }
.lp .lp-proof { padding-top: var(--bay); padding-bottom: var(--bay); }

/* ---------- v11: o momento "aha" — onde dói ≠ de onde vem ---------- */
.aha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px clamp(18px, 2.4vw, 36px); align-items: center; }
.aha-corpo { width: 100%; max-width: 250px; height: auto; justify-self: center; overflow: visible; }
.aha-traco { fill: none; stroke: rgba(236, 238, 236, .42); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.aha-coluna { fill: none; stroke: rgba(236, 238, 236, .3); stroke-width: 1.2; stroke-dasharray: 2 6; }
.aha-liga { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-dasharray: 4 5; transition: opacity .45s var(--ease); }
.aha-p { transition: transform .8s var(--ease-out), opacity .45s var(--ease); }
.aha-p-dor circle { fill: #f7f9f8; }
.aha-p-causa circle { fill: var(--teal); }
.aha-p .aha-onda { fill: none; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: aha-onda 1.9s ease-out infinite; }
.aha-p-dor .aha-onda { stroke: #f7f9f8; }
.aha-p-causa .aha-onda { stroke: var(--teal); }
@keyframes aha-onda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes aha-flui { to { stroke-dashoffset: -18; } }
.aha-a, .aha-b { font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; color: #f7f9f8; }
.aha-a span, .aha-b span { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); }
.aha-a b { font-weight: 400; }
.aha-b { margin-top: 20px; transition: opacity .5s var(--ease); }
.aha-b em { font-style: italic; color: var(--teal); }
.aha-nota { margin-top: 18px; font-size: 14.5px; color: var(--bone-2); }
.aha-abas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.aha-aba { padding: 8px 14px; border: 1px solid var(--hair-night); color: var(--bone-2); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.aha-aba:hover, .aha-aba.is-on { border-color: var(--teal); color: #fff; background: rgba(0, 175, 157, .16); }
/* com JS: primeiro só a dor; depois a linha; depois a causa */
html.js .aha-liga { opacity: 0; }
html.js .aha.is-liga .aha-liga { opacity: 1; animation: aha-flui 1s linear infinite; }
html.js .aha-p-causa { opacity: 0; }
html.js .aha.is-causa .aha-p-causa { opacity: 1; }
html.js .aha-b { opacity: .22; }
html.js .aha.is-causa .aha-b { opacity: 1; }
@media (max-width: 900px) { .lp-method .lp-split-media { max-width: 520px; } }
@media (max-width: 420px) { .aha { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .aha-a, .aha-b { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .aha-onda, .aha-liga { animation: none !important; } }

/* críticas: a queixa por cima de cada uma */
.rcard-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rcard-tag { padding: 4px 8px; border: 1px solid rgba(0, 175, 157, .38); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }

/* a oferta com nome (texto corrido destacado: Jost, não Bodoni) */
.offer-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 16px; background: var(--paper-lift); border-left: 2px solid var(--teal); }
.offer-nome b { font-family: var(--sans); font-weight: 500; font-size: 17px; color: var(--ink); }
.offer-nome span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* segurança no clique */
.lp-seguro { font-size: 12.5px; letter-spacing: .02em; color: var(--ink-3); }
.on-night .lp-seguro { color: var(--bone-2); }
@media (max-width: 720px) and (max-height: 740px) { .hero-body .lp-seguro { display: none; } }