/* ================================================
   Skalary — landing page de pré-reunião (/lp)
   ------------------------------------------------
   Quem abre isto já falou connosco e recebeu o link
   por WhatsApp. A página tem um trabalho só: pôr a
   pessoa a ver o vídeo e a mandar mensagem.

   Por isso não há menu, não há links para fora, e o
   vídeo tem de aparecer no primeiro ecrã do telemóvel.

   Paleta fechada do brief. Uma cor de acento: o ouro.
   Sem gradientes, sem glow. A profundidade vem do
   contorno a 1px, não da luz.
   ================================================ */

:root {
  /* Paleta — valores exactos do brief */
  --preto:       #0B0A07;
  --superficie:  #14120C;
  --linha:       #282318;
  --texto:       #F7F5F0;
  --texto-suave: #8C877B;   /* 5,5:1 sobre o fundo — passa AA */

  /* Sistema de ouro igual ao do onboarding.skalary.com: um só tom, o
     texto por cima é o próprio preto do fundo, e o estado de rato é
     opacidade — não um segundo dourado. */
  --ouro:        #D4AF37;   /* 9,4:1 sobre o fundo */
  --sobre-ouro:  #0B0A07;   /* 9,4:1 sobre o ouro */
  --ouro-tenue:  rgba(212, 175, 55, 0.32);   /* contornos, nunca preenchimento */

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Ritmo vertical — base 8. Nada fora desta escala. */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 40px;
  --e6: 48px;
  --e7: 64px;
  --e8: 96px;

  /* Larguras. A headline nunca atravessa o ecrã todo —
     acima de ~900px passa a ler-se como cartaz. */
  --largura-texto:  900px;    /* hero: a headline não passa daqui */
  --largura-seccao: 1120px;   /* o mesmo das páginas legais */
  /* De volta aos 720: a 640 o vídeo ficava pequeno no computador. Custa
     o preço sair do primeiro ecrã dos portáteis mais baixos — decisão
     tomada em consciência, o vídeo é o que a página tem para mostrar. */
  --largura-video:  720px;
  --largura-cta:    420px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Foco de teclado sempre visível. O afastamento de 3px é o que
   salva o botão: um anel dourado encostado a um fundo dourado
   não se veria — assim assenta no preto à volta. */
a:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* O anel segue o raio do próprio botão, senão fica um rectângulo
   de cantos vivos à volta de um botão arredondado. */
.cta-botao:focus-visible { border-radius: 12px; }

/* ================================================
   HERO
   ================================================ */

/* O fecho da página vive aqui: cada secção só traz o espaço de cima,
   para o de baixo não somar duas vezes entre blocos. */
main { padding-bottom: var(--e7); }

/* Tudo aqui está apertado ao serviço de uma coisa: no computador, o preço
   tem de entrar no primeiro ecrã. Cada vão do topo foi cortado ao mínimo
   que ainda respira, para o CTA subir sem ninguém ter de rolar. */
.hero {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: var(--e3) 20px 0;
  text-align: center;
}

/* Marca — o mesmo lockup das páginas legais. */
.marca {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  color: var(--texto);
}

.marca .ponto {
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: var(--ouro);
  margin-bottom: 2px;
}

/* ================================================
   Headline
   Três linhas, a do meio roda. Quatro tamanhos em
   toda a página — quanto menos degraus, mais sólido.
   ================================================ */

.titulo {
  margin: var(--e3) 0 0;
  font-size: clamp(1.75rem, 1.25rem + 2.05vw, 2.375rem);  /* 28px → 38px */
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.titulo-l1,
.rotativo,
.titulo-l3 { display: block; }

/* A linha rotativa reserva a sua altura de antemão. É isto que
   impede o vídeo de saltar a cada palavra escrita e apagada. */
.rotativo {
  min-height: 1.12em;
  color: var(--ouro);
}

/* Halo mais suave do que o do preço: aqui a palavra já está em ouro e
   ainda por cima muda a toda a hora — carregar na luz tornava a linha
   inquieta em vez de destacada. */
.rot-anim {
  display: inline;
  text-shadow:
    0 0 26px rgba(212, 175, 55, 0.38),
    0 0 9px rgba(212, 175, 55, 0.18);
}

/* O cursor pisca a 530ms, como manda o brief. É um bloco vertical
   colado à última letra, não um caractere de texto — assim não
   entra em leitores de ecrã nem no copiar-colar. */
.rot-cursor {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 0.82em;
  margin-left: 0.06em;
  background: var(--ouro);
  vertical-align: baseline;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
  animation: piscar 1060ms steps(1, end) infinite;
}

@keyframes piscar {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* A lista completa está sempre no documento, mas fora do ecrã: é o que
   os leitores de ecrã anunciam enquanto a animação corre. Não usa
   display:none — isso apagá-la-ia também para quem ouve a página. */
.rot-estatico {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.titulo-l3 { color: var(--texto); }

/* Ouro chapado, sem halo. O glow fica para a linha que se move e para o
   preço — aqui seria luz a mais na mesma frase. */
.titulo-destaque { color: var(--ouro); }

/* ================================================
   Vídeo
   ================================================ */

.video-caixa {
  position: relative;
  max-width: var(--largura-video);
  margin: var(--e4) auto 0;
  aspect-ratio: 16 / 9;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Qualquer embed que entre aqui preenche a caixa e herda o recorte. */
.video-caixa iframe,
.video-caixa video,
.video-caixa wistia-player,
.depoimento-caixa iframe,
.depoimento-caixa video,
.depoimento-caixa wistia-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Enquanto o Wistia não se define, o elemento é uma caixa vazia. Estas
   regras dão-lhe a miniatura desfocada do próprio vídeo, para o espaço
   já reservado não ficar um buraco preto à espera. O padding-top do
   código original não entra: a proporção é do contentor, e duplicá-la
   aqui empurrava o layout. */
wistia-player[media-id='7ouqvhmfqk']:not(:defined) {
  background: center / cover no-repeat url('https://fast.wistia.com/embed/medias/7ouqvhmfqk/swatch');
  filter: blur(5px);
}
wistia-player[media-id='d2ammw03em']:not(:defined) {
  background: center / cover no-repeat url('https://fast.wistia.com/embed/medias/d2ammw03em/swatch');
  filter: blur(5px);
}
wistia-player[media-id='d3foo6h0bi']:not(:defined) {
  background: center / cover no-repeat url('https://fast.wistia.com/embed/medias/d3foo6h0bi/swatch');
  filter: blur(5px);
}
wistia-player[media-id='ulchu8rovz']:not(:defined) {
  background: center / cover no-repeat url('https://fast.wistia.com/embed/medias/ulchu8rovz/swatch');
  filter: blur(5px);
}

.video-legenda {
  max-width: 54ch;
  margin: var(--e3) auto 0;
  font-size: clamp(0.906rem, 0.83rem + 0.32vw, 1rem);   /* 14.5px → 16px */
  font-weight: 400;
  line-height: 1.55;
  color: var(--texto);
}

/* "Passo 1:" no mesmo ouro da palavra que roda — liga as duas coisas
   e marca onde a instrução começa, sem mudar uma palavra da copy. */
.legenda-passo { color: var(--ouro); }

/* ================================================
   SECÇÕES
   ================================================ */

/* Mais larga do que o hero: três vídeos verticais lado a lado a 900px
   ficavam estreitos de mais para se ver alguém a falar. O título e a
   nota continuam presos à sua própria medida de leitura. */
.seccao {
  max-width: var(--largura-seccao);
  margin: 0 auto;
  padding: var(--e7) 20px 0;
  text-align: center;
}

/* Sem medida de leitura: o título estica-se ao longo da secção e resolve-se
   numa linha só no desktop. Uma frase curta partida em duas dava-lhe um ar
   apertado que a página não tem. */
.seccao-titulo {
  margin: 0 auto;
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);   /* 26px → 38px */
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--texto);
  /* Halo branco, não dourado: o ouro é da oferta e do que se move.
     Aqui é só a luz que tira o título do preto chapado. */
  text-shadow: 0 0 42px rgba(247, 245, 240, 0.28);
}

/* ================================================
   Prova
   ================================================ */

/* Três depoimentos verticais: em fila no desktop, empilhados no
   telemóvel. Sem carrossel, sem setas — com três peças o loop
   nota-se e dá a impressão contrária à pretendida. */
/* Encostado ao título: a frase e as caras são a mesma ideia, e o vão
   grande que aqui estava separava-as como se fossem duas secções. */
.depoimentos {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e3);
}

/* Cartão: vídeo em cima, frase em baixo. O halo dourado é largo e fraco
   — levanta o cartão do preto sem virar mancha. */
/* O vídeo preenche o topo do cartão de ponta a ponta, como na referência.
   Estava encaixado com margem à volta, o que o encolhia e punha o cartão
   a competir com aquilo que ele devia mostrar. O recorte é do cartão. */
.depoimento {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 60px rgba(212, 175, 55, 0.10);
}

.depoimento-caixa {
  aspect-ratio: 9 / 16;
  background: var(--preto);
  position: relative;
}

.depoimento-frase {
  margin: 0;
  padding: var(--e3) var(--e3) var(--e3);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* 15px → 16px */
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--texto);
  text-align: center;
}

/* align-items:start para cada imagem ficar com a altura que tem. Em
   stretch, a mais baixa esticava até à altura da vizinha e sobrava uma
   faixa de superfície por baixo dela. */
.prova-grelha {
  display: grid;
  align-items: start;
  gap: var(--e3);
  margin-top: var(--e5);
}

/* Proporção fixa nas duas caixas: é isto que as alinha, apesar de as
   imagens virem com formatos diferentes. Reserva também o espaço antes
   de a imagem chegar, por isso nada salta ao carregar. */
.prova-item {
  display: block;
  aspect-ratio: 5 / 6;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--preto);
}

/* `contain` e não `cover`: estas são conversas para ler, e cortar-lhes
   as pontas era cortar a mensagem. */
.prova-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prova-nota {
  margin: var(--e5) auto 0;
  max-width: 42ch;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ================================================
   O que recebe — 4 componentes
   ================================================ */

.componentes {
  list-style: none;
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: 0;
  text-align: left;
}

.componente {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: var(--e3);
}

/* O número é o único ornamento permitido aqui. Fica em ouro chapado,
   sem halo — o glow é só do BLOCO CTA e da linha que se move. */
.componente-num {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ouro);
  margin-bottom: var(--e2);
}

.componente-titulo {
  margin: 0 0 var(--e1);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);   /* 17px → 19px */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--texto);
}

.componente-texto {
  margin: 0;
  font-size: clamp(0.906rem, 0.88rem + 0.11vw, 0.9375rem);   /* 14.5px → 15px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* ================================================
   BLOCO CTA — componente único, 4 ocorrências
   ------------------------------------------------
   Aparece no hero, depois da prova, depois dos
   componentes e no fecho. Sempre igual: mesmo
   tamanho, mesmo espaçamento, mesmas cores.
   Alterar aqui altera as quatro.
   ================================================ */

.cta {
  margin: var(--e5) auto 0;
  max-width: var(--largura-cta);
  text-align: center;
}

/* Preço na disposição do print: o valor manda, o período é satélite.
   Ambos no branco do texto — o ouro fica só para o botão. */
/* O tamanho do valor vive aqui, no pai, para o "/mês" o poder medir
   em em. Posto no filho, o em resolveria contra os 16px do body. */
.cta-preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0;
  color: var(--texto);
  line-height: 1.2;
  font-size: clamp(2rem, 1.5rem + 2.1vw, 2.75rem);   /* 32px → 44px */
}

/* Valor em ouro, com o halo do botão mais fraco por trás. O "/mês"
   fica em branco: se ambos fossem dourados, o valor perdia o destaque
   que o ouro lhe vem dar. */
.cta-valor {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ouro);
  text-shadow:
    0 0 30px rgba(212, 175, 55, 0.55),
    0 0 10px rgba(212, 175, 55, 0.32);
}

.cta-periodo {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Fica logo abaixo do preço: é uma condição da oferta, não uma
   nota de rodapé — por isso não encolhe até ao tamanho da micro-copy. */
.cta-fidelizacao {
  margin: var(--e1) 0 var(--e3);
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14px → 15px */
  font-weight: 400;
  color: var(--texto-suave);
}

.cta-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: var(--e2) var(--e3);
  background: var(--ouro);
  color: var(--sobre-ouro);
  font-size: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);   /* 16px → 17px */
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 12px;

  /* Duas camadas, nenhuma delas um gradiente:
     · um halo dourado por baixo, que faz o botão levantar do preto;
     · um fio de luz branca no rebordo de cima, que dá espessura ao ouro
       em vez de o deixar chapado.
     É o único sítio da página com glow. */
  box-shadow:
    0 6px 26px rgba(212, 175, 55, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

  transition: opacity 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}

/* O halo abre e o botão sobe 1px. Ao carregar, assenta —
   o dedo sente que carregou em alguma coisa. */
.cta-botao:hover {
  opacity: .94;
  transform: translateY(-1px);
  box-shadow:
    0 10px 34px rgba(212, 175, 55, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.cta-botao:active {
  transform: translateY(0);
  box-shadow:
    0 4px 16px rgba(212, 175, 55, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.cta-seta {
  font-weight: 400;
  transition: transform 140ms ease;
}

.cta-botao:hover .cta-seta { transform: translateX(2px); }

.cta-micro {
  margin: var(--e2) 0 0;
  font-size: clamp(0.8125rem, 0.8rem + 0.05vw, 0.84375rem);  /* 13px → 13.5px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ================================================
   Desktop — os mesmos saltos, mais folga à volta
   do vídeo, que é o objecto principal.
   ================================================ */

@media (min-width: 768px) {
  .hero { padding: var(--e3) 32px 0; }
  .marca { font-size: 19px; }
  .titulo { margin-top: var(--e3); }
  .video-caixa { margin-top: var(--e4); }
  .video-legenda { margin-top: var(--e2); }
  .cta { margin-top: var(--e3); }

  main { padding-bottom: var(--e8); }
  .seccao { padding: var(--e8) 32px 0; }
  .depoimentos { grid-template-columns: repeat(3, 1fr); margin-top: var(--e5); }
  .prova-grelha { grid-template-columns: repeat(2, 1fr); margin-top: var(--e7); }
  .prova-nota { margin-top: var(--e6); }

  .componentes {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e3);
    margin-top: var(--e5);
  }
  .componente { padding: var(--e4); }
}

/* ================================================
   Sem movimento
   ------------------------------------------------
   A linha do meio passa a mostrar a lista completa.
   Aqui a altura pode ser livre: sem animação, nada
   muda depois de carregar, logo nada salta.
   ================================================ */

@media (prefers-reduced-motion: reduce) {
  .rot-anim { display: none; }
  .rotativo { min-height: 0; }

  /* A lista sai de fora do ecrã e passa a ser a linha visível.
     Ao tamanho da headline ocupava quatro linhas e pesava mais do que as
     outras duas juntas; reduzida, lê-se como enumeração e a headline
     continua a mandar. */
  .rot-estatico {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: inline-block;
    font-size: 0.62em;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}