/* ══════════════════════════════════════════════════════════════
   Prohall Professional — LP Kit Salões (VSL)
   ══════════════════════════════════════════════════════════════ */

:root {
  --ph-navy: 5, 20, 42;          /* #05142A — base do fundo, parte de baixo */
  --ph-navy-top: 9, 48, 106;     /* #09306A — azul do topo do gradiente */
  --ph-ink: 9, 11, 15;           /* #090B0F — faixas pretas (aviso e rodapé) */
  --ph-panel: 11, 14, 20;        /* #0B0E14 — caixa do player */
  --ph-panel-deep: 1, 13, 31;    /* #010D1F — barra de controle do player */
  --ph-line: 31, 39, 53;         /* #1F2735 — bordas e divisores */
  --ph-gold: 249, 211, 148;      /* #F9D394 — dourado principal */
  --ph-gold-light: 247, 223, 184;/* #F7DFB8 — dourado claro, hover */
  --ph-green: 6, 172, 70;        /* #06AC46 — CTA de compra */
  --ph-green-light: 76, 211, 128;/* #4CD380 — CTA no hover / brilho */
  --ph-text: 255, 255, 255;      /* #FFFFFF — texto principal */
  --ph-muted: 174, 182, 196;     /* #AEB6C4 — apoio do hero */
  --ph-dim: 125, 135, 152;       /* #7D8798 — legendas do player */
  --ph-soft: 139, 149, 165;      /* #8B95A5 — texto do rodapé */
  --ph-faint: 107, 116, 132;     /* #6B7484 — copyright */
  --font-base: "Satoshi", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ph-max: 1000px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-base);
  font-weight: 400;
  color: rgb(var(--ph-text));
  background: linear-gradient(0deg, rgb(var(--ph-navy-top)) 0%, rgb(var(--ph-navy)) 100%);
  text-wrap: pretty;
  overflow-x: hidden;
}
img {
  max-width: 100%;
}
a {
  color: rgb(var(--ph-gold));
  text-decoration: none;
  transition: color .2s;
}
a:hover {
  color: rgb(var(--ph-gold-light));
}
button {
  font-family: inherit;
}
::selection {
  background: rgb(var(--ph-gold));
  color: rgb(var(--ph-ink));
}

/* ── Fundo: halos de luz e malha quadriculada ──────────────────── */
/* Presos ao topo da página, sem capturar clique. */
.ph-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ph-bg--glow {
  background:
    radial-gradient(1100px 620px at 50% -60px, rgba(var(--ph-navy-top), .75), transparent 70%),
    radial-gradient(700px 480px at 12% 40%, rgba(var(--ph-gold), .07), transparent 72%),
    radial-gradient(900px 620px at 92% 82%, rgba(21, 113, 251, .12), transparent 74%);
}
.ph-bg--grid {
  opacity: .5;
  background-image:
    linear-gradient(rgba(var(--ph-text), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ph-text), .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(900px 700px at 50% 6%, #000 20%, transparent 80%);
  mask-image: radial-gradient(900px 700px at 50% 6%, #000 20%, transparent 80%);
}

/* Conteúdo sobe acima dos dois fundos. */
.ph-page {
  position: relative;
  z-index: 1;
}
.ph-wrap {
  max-width: var(--ph-max);
  margin: 0 auto;
}

/* ══════════════ AVISO DO TOPO ══════════════ */
.ph-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  text-align: center;
  background: rgb(var(--ph-ink));
  border-bottom: 1px solid rgb(var(--ph-line));
}
.ph-alert__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--ph-gold));
  animation: phDot 2.2s ease-in-out infinite;
}
.ph-alert__text {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--ph-gold));
}

/* ══════════════ HERO ══════════════ */
.ph-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 56px 24px 0;
  text-align: center;
}
/* O arquivo do logo é preto sobre fundo transparente; sobre o azul
   escuro da página ele some, então vira branco puro no filtro. */
.ph-hero__logo,
.ph-footer__logo {
  filter: brightness(0) invert(1);
}
.ph-hero__logo {
  width: 170px;
  height: auto;
}
/* O título tem dois níveis. A promessa vem grande e branca; o
   reforço entra depois, quase metade do tamanho e em dourado, para
   ler como consequência da primeira frase — e não como uma segunda
   manchete disputando a mesma atenção. */
.ph-hero__title {
  max-width: 22ch;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.06;
  letter-spacing: -.025em;
}
/* Cada linha ocupa a sua própria faixa; a quebra vem da marcação,
   não de onde o navegador resolveria quebrar. O balance distribui
   as palavras por igual quando a frase passa de uma linha. */
.ph-hero__line {
  display: block;
  text-wrap: balance;
}
.ph-hero__line--apoio {
  margin-top: .42em;
  font-size: .52em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: rgb(var(--ph-gold));
}
.ph-hero__text {
  max-width: 56ch;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  color: rgb(var(--ph-muted));
}

/* ══════════════ VSL ══════════════ */
/*
   O palco não tem mais capa listrada: o iframe do Vimeo entra já no
   carregamento, parado, mostrando o próprio frame de capa do vídeo.
   Por cima fica só o véu escuro com o play pulsando.
*/
.ph-vsl {
  padding: 32px 24px 0;
}
.ph-vsl__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--ph-line));
  border-radius: 16px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.ph-vsl__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.ph-vsl__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Véu do play: escurece o frame do vídeo só o bastante para o botão
   aparecer. Depois do primeiro play ele some e volta na pausa, já
   discreto (.is-started). */
.ph-vsl__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  border: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .68) 70%),
    linear-gradient(180deg, rgba(var(--ph-navy), .35) 0%, rgba(0, 0, 0, .55) 100%);
  transition: opacity .3s, background .3s;
}
.ph-vsl__poster[hidden] {
  display: none;
}
/* Pausa no meio do vídeo: só o play, sem escurecer a cena toda. */
.ph-vsl__poster.is-started {
  gap: 0;
  background: rgba(0, 0, 0, .34);
}
.ph-vsl__poster.is-started .ph-vsl__hint {
  display: none;
}
.ph-vsl__poster.is-started .ph-vsl__play {
  width: 62px;
  height: 62px;
}

/* Sem brilho e sem anéis: o botão pulsa sozinho, só ele. */
.ph-vsl__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--ph-gold)) 0%, rgb(var(--ph-gold-light)) 100%);
  animation: phPulse 2.2s ease-in-out infinite;
  transition: transform .25s, width .25s, height .25s;
}
/* Triângulo de play desenhado com borda, sem imagem. */
.ph-vsl__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 7px;
  border-left: 24px solid rgb(var(--ph-ink));
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/* No hover a batida para e o botão fica firme, um pouco maior. */
.ph-vsl__poster:hover .ph-vsl__play {
  animation: none;
  transform: scale(1.08);
}
@keyframes phPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Chamada abaixo do play — pílula de vidro, sem cara de legenda. */
.ph-vsl__hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 32px);
  padding: 11px 20px;
  border: 1px solid rgba(var(--ph-text), .16);
  border-radius: 99px;
  background: rgba(var(--ph-ink), .55);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(var(--ph-text), .92);
  text-align: left;
}
.ph-vsl__hint svg {
  flex: none;
  color: rgb(var(--ph-gold));
}
.ph-vsl__hint strong {
  font-weight: 600;
  color: rgb(var(--ph-gold));
}

/* Barra de controle própria — os controles do Vimeo ficam ocultos e
   a barra de progresso não é clicável: sem pular para o final. */
.ph-vsl__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgb(var(--ph-line));
  background: rgb(var(--ph-panel-deep));
}
.ph-vsl__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(var(--ph-line));
  border-radius: 50%;
  background: rgba(var(--ph-text), .05);
  color: rgba(var(--ph-text), .78);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.ph-vsl__ctrl:hover {
  color: rgb(var(--ph-text));
  background: rgba(var(--ph-text), .1);
  border-color: rgba(var(--ph-gold), .5);
}
.ph-vsl__ctrl:active {
  transform: scale(.94);
}
/* Botão principal (play/pausa) em dourado cheio. */
.ph-vsl__ctrl--main {
  width: 42px;
  height: 42px;
  border-color: transparent;
  background: linear-gradient(135deg, rgb(var(--ph-gold)) 0%, rgb(var(--ph-gold-light)) 100%);
  color: rgb(var(--ph-ink));
}
.ph-vsl__ctrl--main:hover {
  color: rgb(var(--ph-ink));
  background: linear-gradient(135deg, rgb(var(--ph-gold-light)) 0%, rgb(var(--ph-gold)) 100%);
  border-color: transparent;
}
/* Cada botão carrega os dois ícones; a classe de estado decide qual
   aparece. Sem trocar SVG na mão pelo JS. */
.ph-vsl__ctrl .ph-vsl__ic--on {
  display: none;
}
.ph-vsl__ctrl.is-on .ph-vsl__ic--on {
  display: block;
}
.ph-vsl__ctrl.is-on .ph-vsl__ic--off {
  display: none;
}
.ph-vsl__track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(var(--ph-line));
}
.ph-vsl__progress {
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgb(var(--ph-gold)) 0%, rgb(var(--ph-gold-light)) 100%);
  box-shadow: 0 0 12px rgba(var(--ph-gold), .45);
  transition: width .4s linear;
}
.ph-vsl__clock {
  min-width: 52px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgb(var(--ph-dim));
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Faixa do cadeado: quanto falta para o kit liberar. */
.ph-vsl__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid rgb(var(--ph-line));
  background: rgba(var(--ph-ink), .6);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgb(var(--ph-dim));
  text-align: center;
  transition: color .3s, background .3s;
}
.ph-vsl__lock svg {
  flex: none;
}
.ph-vsl__lock.is-open {
  color: rgb(var(--ph-green-light));
  background: rgba(var(--ph-green), .12);
}
.ph-vsl__lock .ph-vsl__ic--on {
  display: none;
}
.ph-vsl__lock.is-open .ph-vsl__ic--on {
  display: block;
}
.ph-vsl__lock.is-open .ph-vsl__ic--off {
  display: none;
}

/* Tocando: o véu vira só uma folha de clique invisível — clicar no
   vídeo pausa, sem controle nenhum na frente da cena. */
.ph-vsl__poster.is-playing {
  gap: 0;
  background: transparent;
}
.ph-vsl__poster.is-playing .ph-vsl__play,
.ph-vsl__poster.is-playing .ph-vsl__hint {
  display: none;
}

/* Tela cheia entra no palco, então ele larga a proporção fixa. */
.ph-vsl__stage:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.ph-vsl__stage:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

/* ══════════════ CTA ══════════════ */
.ph-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 24px 96px;
  text-align: center;
}
/* Nasce escondido; o JS libera quando o tempo de vídeo fecha. */
.ph-cta__btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 21px 46px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgb(var(--ph-green)) 0%, rgb(var(--ph-green-light)) 100%);
  color: rgb(var(--ph-text));
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 23px);
  letter-spacing: .01em;
  transition: background .2s;
}
.ph-cta__btn:hover {
  background: linear-gradient(90deg, rgb(var(--ph-green-light)) 0%, rgb(var(--ph-green)) 100%);
  color: rgb(var(--ph-text));
}
.ph-cta__btn.is-visible {
  display: inline-flex;
  animation:
    phReveal 700ms cubic-bezier(.22, 1, .36, 1) both,
    phPulse 2.4s ease-in-out 700ms infinite;
}
.ph-cta__btn svg {
  display: block;
}

/* ══════════════ RODAPÉ ══════════════ */
.ph-footer {
  padding: 46px 24px 30px;
  border-top: 1px solid rgb(var(--ph-line));
  background: rgb(var(--ph-ink));
}
.ph-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.ph-footer__logo {
  width: 132px;
  height: auto;
}
.ph-footer__text {
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(var(--ph-soft));
}
.ph-footer__rule {
  width: 100%;
  max-width: 640px;
  height: 1px;
  background: rgb(var(--ph-line));
}
.ph-footer__copy {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--ph-faint));
}

/* ══════════════ ANIMAÇÕES ══════════════ */
@keyframes phDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}
@keyframes phReveal {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phPulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(var(--ph-green), .38); transform: scale(1); }
  50%      { box-shadow: 0 18px 52px rgba(var(--ph-green-light), .62); transform: scale(1.025); }
}
@keyframes phRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada dos blocos ao carregar a página. */
.ph-anim {
  opacity: 0;
}
.ph-anim.is-in {
  animation: phRise 700ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--delay, 0s);
}

/* ══════════════ RESPONSIVO ══════════════ */
@media (max-width: 640px) {
  .ph-alert {
    padding: 10px 16px;
  }
  .ph-alert__text {
    font-size: 11px;
    letter-spacing: .08em;
  }
  .ph-hero {
    padding: 40px 16px 0;
  }
  .ph-hero__logo {
    width: 140px;
  }
  /* No celular o título encolhe até o mínimo do clamp; sem subir a
     proporção, a linha de reforço ficaria menor que o subtítulo e a
     escada de leitura se inverteria. */
  .ph-hero__line--apoio {
    margin-top: .5em;
    font-size: .62em;
  }
  .ph-vsl {
    padding: 24px 16px 0;
  }
  .ph-vsl__bar {
    gap: 8px;
    padding: 10px 12px;
  }
  .ph-vsl__ctrl {
    width: 34px;
    height: 34px;
  }
  .ph-vsl__ctrl--main {
    width: 38px;
    height: 38px;
  }
  .ph-vsl__clock {
    min-width: 44px;
    font-size: 12px;
  }
  .ph-vsl__lock {
    padding: 10px 14px;
    font-size: 11.5px;
  }
  .ph-vsl__play {
    width: 66px;
    height: 66px;
  }
  .ph-vsl__play::after {
    margin-left: 5px;
    border-left-width: 19px;
    border-top-width: 12px;
    border-bottom-width: 12px;
  }
  .ph-vsl__poster {
    gap: 16px;
  }
  .ph-vsl__poster.is-started .ph-vsl__play {
    width: 54px;
    height: 54px;
  }
  .ph-vsl__hint {
    padding: 9px 15px;
    font-size: 12.5px;
  }
  .ph-cta {
    padding: 28px 16px 72px;
  }
  .ph-cta__btn {
    width: 100%;
    padding: 19px 24px;
  }
}

/* Sem movimento: nada pisca, nada desliza, tudo já visível. */
@media (prefers-reduced-motion: reduce) {
  .ph-alert__dot,
  .ph-vsl__play,
  .ph-cta__btn.is-visible {
    animation: none;
  }
  .ph-anim,
  .ph-anim.is-in {
    opacity: 1;
    animation: none;
  }
}