/* Header, secoes e rodape no formato de cartaz. Nascido como previa da landing
   -- a landing de verdade (src/pages/index.html) e' um arquivo unico com CSS
   proprio embutido, e nao carrega isto. Quem carrega hoje sao privacy.html e
   terms.html, que precisam do mesmo header e do mesmo rodape.

   A paleta, a tipografia, o grao e a folga de registro vem de base.css: a
   direcao do cartaz e' do produto inteiro, nao desta folha. Aqui ficam so' o
   layout das secoes e as pecas que so' existem aqui. */

/* Mobile-first. Breakpoints: 480 / 600 / 768 / 1024 / 1280. */

:root {
  /* Escala de espacamento e raios da pagina de cartaz. As cores nao entram:
     saem dos tokens de base.css. */
  --lp-max: 1120px;
  --lp-gutter: 1.25rem;
  --lp-section-y: 3.5rem;

  --lp-radius: var(--raio-cartao);
  --lp-radius-sm: 10px;
  --lp-radius-xs: 8px;

  --lp-accent-soft: rgba(74, 236, 125, 0.12);
  --lp-accent-line: rgba(74, 236, 125, 0.30);
}

.lp-html {
  scroll-behavior: smooth;
}

/* A pagina ja' nasce pintada: `.lp` so' marca o que e' desta composicao e
   devolve a fonte de corpo (o `body` do app usa a mesma, entao e' redundancia
   barata que deixa a classe util em qualquer container). */
.lp {
  font-family: var(--font-sans);
}

/* Titulos em maiuscula pesada: a voz do cartaz. Pega .lp-person-name (h3
   dentro do card de pessoa) e os h2 de secao de proposito -- e' o mesmo
   tratamento tipografico em toda a pagina, nao so' no heroi. */
.lp h1,
.lp h2,
.lp h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.02em;
}

.lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-accent-text {
  color: var(--color-accent);
}

.lp-skip {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  transform: translate(-50%, -160%);
  padding: 0.7rem 1.1rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 0 0 var(--lp-radius-xs) var(--lp-radius-xs);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast);
}

.lp-skip:focus-visible {
  transform: translate(-50%, 0);
}

/* --- Header ---
   Herda o seletor de elemento `header` la de cima, que ja e o visual certo.
   flex-direction: row neutraliza o @media (max-width:640px) que empilha o
   header da sala: .lp-header (0,1,0) vence header (0,0,1) sem !important. */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-direction: row;
  align-items: center;
  padding: 0.7rem var(--lp-gutter);
  background: var(--color-background);
  border-bottom: 2px solid var(--regra);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-foreground);
  text-decoration: none;
  flex-shrink: 0;
}

.lp-brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.lp-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sem JS nao ha menu hamburguer: abaixo de 768px o header guarda so a marca e
   os dois CTAs. As ancoras internas sao redundantes com a rolagem no mobile. */
.lp-nav {
  display: none;
}

.lp-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.lp-btn-sm {
  min-height: 44px;
  padding: 0 0.9rem;
  font-size: 0.86rem;
  white-space: nowrap;
}

.lp-btn-ghost,
.lp-cta-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
}

.lp-btn-ghost:hover,
.lp-cta-ghost:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary-hover);
}

/* --- Botao: a folga de registro -------------------------------------------
   Nao e' sombra, e' a segunda tinta saindo do registro -- o defeito
   caracteristico da risografia. So aparece aqui e atras da sala (.lp-mock);
   em qualquer outro elemento ela vira enfeite. Todo .button-link da landing
   ganha o tratamento (o ghost tambem, so muda o preenchimento), igual na
   previa: .btn e .btn-vazio compartilham a mesma folga. */
.lp .button-link {
  border: 2.5px solid var(--tinta);
  border-radius: var(--lp-radius-xs);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--roxo);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), border-color var(--transition-fast);
}

.lp .button-link:hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--roxo);
}

.lp .button-link:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--roxo);
}

.lp .button-link.primary {
  background: var(--verde);
  color: var(--color-background);
  border-color: var(--tinta);
}

.lp .lp-btn-ghost,
.lp .lp-cta-ghost {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}

.lp .lp-btn-ghost:hover,
.lp .lp-cta-ghost:hover {
  background: rgba(231, 235, 226, 0.08);
  border-color: var(--tinta);
}

/* Botoes pequenos do header: mesma folga, escala menor. */
.lp .lp-btn-sm {
  border-width: 2px;
  box-shadow: 3px 3px 0 var(--roxo);
}

.lp .lp-btn-sm:hover:not(:disabled) {
  box-shadow: 1px 1px 0 var(--roxo);
}

/* --- Secoes --- */

.lp-section {
  padding-block: var(--lp-section-y);
  scroll-margin-top: 5rem;
  /* Regua estrutural entre secoes -- mais discreta no escuro que no claro
     (era tinta cheia), pra nao competir com o halo da sala la' em cima. */
  border-top: 2px solid var(--regra);
}

.lp-section-tight {
  padding-block: 0 var(--lp-section-y);
}

.lp-section-band {
  background: var(--color-card);
  border-top: 2px solid var(--regra);
  border-bottom: 2px solid var(--regra);
}

.lp-section-head {
  max-width: 56ch;
  margin-bottom: 2rem;
}

.lp-section-head-center {
  margin-inline: auto;
  text-align: center;
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.lp-kicker svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.lp-section-head h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  text-wrap: balance;
}

.lp-section-head p {
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.65;
  color: var(--color-muted-foreground);
}

/* --- Hero --- */

.lp-hero {
  position: relative;
  overflow: hidden;
  padding-block: 2.5rem var(--lp-section-y);
}

/* Sem glow ambiente aqui de proposito: a sala (.lp-mock) e' a UNICA coisa da
   pagina que acende. Um halo verde espalhado atras do heroi inteiro competiria
   com o halo dela, que e' a assinatura. */

.lp-hero-grid {
  position: relative;
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

/* So' texto + ponto pulsando, sem pilula de fundo: no cartaz nada alem da
   sala e dos botoes ganha preenchimento colorido. */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  color: var(--tinta-70);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lp-eyebrow-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--verde);
  animation: lp-accent-pulse 1.8s ease-out infinite;
}

@keyframes lp-accent-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 236, 125, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(74, 236, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 236, 125, 0); }
}

.lp-h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  text-wrap: balance;
}

.lp-lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-muted-foreground);
}

.lp-points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lp-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-foreground);
}

.lp-points svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-accent);
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.lp-cta-row-center {
  justify-content: center;
}

.lp-cta {
  flex: 1 1 100%;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* --- Mock do produto: reusa .participant-tile de verdade --- */

/* A sala: o unico objeto aceso da pagina. O verde nao esta solto por ai, esta
   atras da tela -- a tinta que escapa do registro. E' a assinatura: nenhum
   outro elemento da pagina pode ganhar brilho colorido, senao ela deixa de
   ser a unica acesa. */
.lp-mock {
  background: var(--color-card);
  border: 2.5px solid var(--tinta);
  border-radius: var(--lp-radius);
  box-shadow:
    10px 10px 0 var(--roxo),
    0 0 110px rgba(74, 236, 125, 0.20);
  overflow: hidden;
}

.lp-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

.lp-mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-secondary);
  flex-shrink: 0;
}

.lp-mock-title {
  margin-left: 0.35rem;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-mock-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-family: var(--font-sans);
  color: var(--color-muted-foreground);
}

.lp-mock-chip svg {
  width: 13px;
  height: 13px;
}

.lp-mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.75rem;
}

.lp-mock .participant-tile .avatar {
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
}

.lp-mock .participant-tile .label {
  bottom: 0.4rem;
  left: 0.45rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
}

.lp-mock .live-badge {
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.22rem 0.5rem 0.22rem 0.42rem;
  font-size: 0.58rem;
}

.lp-mock .live-dot {
  width: 6px;
  height: 6px;
}

.lp-mock .mic-off-badge {
  width: 1.4rem;
  height: 1.4rem;
}

.lp-mock .mic-off-badge svg {
  width: 11px;
  height: 11px;
}

/* --- Recursos --- */

.lp-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.lp-feature {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius);
  padding: 1.5rem 1.25rem;
}

/* Sem crachá verde: no cartaz o icone e' marca tipografica, na tinta roxa --
   o verde fica reservado pra sala. */
.lp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  color: var(--roxo);
}

.lp-feature-icon svg {
  width: 24px;
  height: 24px;
}

.lp-feature h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}

.lp-feature p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

/* --- Pessoas ---
   O auto-fit conta as trilhas pelo MAXIMO da minmax, nao pelo minimo. Com
   minmax(150px, 190px) o calculo em 375px daria uma coluna so. Por isso o
   maximo fica em 1fr (a contagem passa a sair dos 150px) e o tamanho do card
   e limitado no filho. Sem esse limite, 3 pessoas virariam tres cards de
   350px numa tela larga.
   Colunas resultantes: 2 / 3 / 4 / 5 / 6 em 375 / 600 / 768 / 1024 / 1280. */

.lp-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}

.lp-people > li {
  width: 100%;
  max-width: 190px;
  margin-inline: auto;
}

.lp-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  height: 100%;
  padding: 1.25rem 0.75rem 1.1rem;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--lp-radius);
}

.lp-person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  background: var(--avatar-color, var(--color-secondary));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: var(--color-foreground);
  /* 28px/700 conta como "texto grande" no WCAG, onde o limiar cai para 3:1.
     avatarColor() gera hsl(H,55%,32%), cujo pior caso (matiz 60) da 4,10:1 —
     reprova em texto normal, passa em texto grande. NUNCA colocar texto
     pequeno sobre --avatar-color. */
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.lp-person-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.lp-person-role {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-muted-foreground);
}

/* .participant-chip ja existe (lobby) e usa --color-muted; dentro do card,
   que tambem e --color-muted, sobe um degrau. */
.lp-person .participant-chip {
  margin-top: 0.35rem;
  background: var(--color-secondary);
  font-size: 0.72rem;
}

.lp-person-join-cell {
  display: flex;
  height: 100%;
}

/* Faz dobradinha: e CTA de conversao e tambem evita que um time pequeno
   pareca vazio. */
.lp-person-join {
  width: 100%;
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--lp-accent-line);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.lp-person-join:hover {
  background: var(--lp-accent-soft);
  border-color: var(--color-accent);
}

.lp-person-join .lp-person-avatar {
  background: var(--lp-accent-soft);
  box-shadow: inset 0 0 0 1px var(--lp-accent-line);
  color: var(--color-accent);
  font-weight: 400;
  font-size: 2rem;
}

.lp-person-join .lp-person-name {
  color: var(--color-accent);
}

/* --- Como funciona --- */

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

/* Aqui a ordem carrega informacao de verdade (conta -> sala -> link), entao o
   numeral fica grande: tipo de cartaz, nao bolinha decorativa. Regua em cima,
   nao verde na lateral -- este numeral e' estrutura, nao estado ao vivo. */
.lp-step {
  padding-top: 1rem;
  border-top: 3px solid var(--regra);
}

.lp-step-num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 900;
  line-height: 0.8;
  color: var(--roxo);
}

/* Contorno oco em vez de preenchido, so' onde o navegador suporta -- com
   fallback solido acima, o numero nunca fica invisivel. */
@supports (-webkit-text-stroke: 1px black) {
  .lp-step-num {
    color: transparent;
    -webkit-text-stroke: 2px var(--roxo);
  }
}

.lp-step h3 {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.lp-step p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

/* --- CTA final --- */

/* Antes havia uma faixa/gradiente verde aqui. No escuro ela virava uma
   segunda fonte de luz do tamanho do bloco, concorrendo com o halo da sala
   (a assinatura da pagina). Agora e' um painel chapado com a folga de
   registro em ROXO -- o verde sobra so' no botao: a pagina abre com a sala
   ja' acesa e fecha no interruptor que voce aperta pra acender a sua. */
.lp-final {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 2.5px solid var(--tinta);
  border-radius: var(--lp-radius);
  background: var(--color-card);
  box-shadow: 8px 8px 0 var(--roxo);
}

.lp-final h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.75rem, 5.5vw, 2.75rem);
  text-wrap: balance;
}

.lp-final > p {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

.lp-final-note {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

/* --- Footer --- */

.lp-footer {
  background: var(--color-card);
  border-top: 2px solid var(--regra);
  padding-block: 2.5rem 1.5rem;
}

.lp-footer-inner {
  display: grid;
  gap: 2rem;
}

.lp-footer-tag {
  margin: 0.85rem 0 0;
  max-width: 34ch;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-muted-foreground);
}

.lp-footer-title {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.lp-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.lp-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-foreground);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lp-footer-nav a:hover {
  color: var(--color-accent);
}

.lp-footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.lp-footer-bottom p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

/* ============================================================
   BREAKPOINTS DA LANDING (mobile-first)
   ============================================================ */

@media (min-width: 480px) {
  .lp-cta {
    flex: 0 0 auto;
  }
}

@media (min-width: 600px) {
  .lp-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --lp-gutter: 1.5rem;
    --lp-section-y: 4.5rem;
  }

  .lp-nav {
    display: block;
    margin-inline: auto;
  }

  .lp-nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lp-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-muted-foreground);
    font-size: 0.88rem;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .lp-nav a:hover {
    color: var(--color-foreground);
  }

  .lp-header-actions {
    margin-left: 0;
  }

  .lp-people {
    gap: 1rem;
  }

  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .lp-final {
    padding: 3.5rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --lp-gutter: 2rem;
    --lp-section-y: 5.5rem;
  }

  .lp-hero {
    padding-block: 4rem var(--lp-section-y);
  }

  .lp-hero-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 3.5rem;
  }

  .lp-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .lp-people {
    gap: 1.25rem;
  }

  .lp-mock-grid {
    gap: 0.75rem;
    padding: 0.9rem;
  }

  .lp-mock .participant-tile .avatar {
    width: 52px;
    height: 52px;
    font-size: 1.35rem;
  }

  .lp-mock .participant-tile .label {
    font-size: 0.78rem;
  }

  .lp-mock .live-badge {
    font-size: 0.65rem;
  }

  .lp-mock .live-dot {
    width: 7px;
    height: 7px;
  }
}

@media (min-width: 1280px) {
  :root {
    --lp-section-y: 6rem;
  }
}

/* O bloco de movimento reduzido la de cima ja zera as transicoes; aqui vao so
   os elementos novos da landing. Nao ha scroll-reveal, parallax nem autoplay
   em lugar nenhum desta pagina. */
@media (prefers-reduced-motion: reduce) {
  .lp-html {
    scroll-behavior: auto;
  }

  .lp-eyebrow-dot {
    animation: none !important;
  }
}