/* ===========================================================================
   HOME — Life Be (2026-09-01)
   Depende de tokens.css e site-novo.css.
   =========================================================================== */

/* ================================================================== HERO */
/* A mídia ocupa a largura inteira da primeira dobra, e o texto vem logo
   abaixo. Foi o pedido: o vídeo na primeira parte toda.

   NADA É RECORTADO. Nem caixa de proporção fixa, nem object-fit:cover -- a
   imagem e o vídeo definem a própria altura. Foi recortar para preencher uma
   medida que eu escolhi que cortou as pessoas nas versões anteriores, e o
   jeito de isso não voltar é não haver medida minha para preencher.

   O custo é que a altura depende do arquivo: um vídeo em 16:9 numa tela larga
   fica alto. É a troca que o pedido implica, e é reversível.
   =========================================================================== */

.lb-hero{ background:var(--lb-fundo) }

.lb-hero-arte{ position:relative; line-height:0; background:var(--lb-branco) }
.lb-hero-arte picture{ display:block }
.lb-hero-arte img,
.lb-hero-video{ display:block; width:100%; height:auto }

/* o texto, na faixa de baixo */
.lb-hero-texto{ padding-top:clamp(26px,4vw,44px); padding-bottom:clamp(30px,4.5vw,52px) }
.lb-hero-texto h1{ margin:0; max-width:16ch }
.lb-hero-texto p{
  margin:16px 0 0; max-width:52ch;
  font-size:clamp(1rem, 2.4vw, 1.18rem); color:var(--lb-tinta-2);
}
.lb-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.lb-hero-nota{
  margin:20px 0 0; font-size:.8rem; color:var(--lb-tinta-3); max-width:52ch;
}

/* Botão de pausa, exigido pela seção 12. Discreto, com 44px de alvo. */
.lb-video-pausa{
  position:absolute; right:16px; bottom:16px; z-index:3;
  width:44px; height:44px; border:0; border-radius:999px;
  background:rgba(18,60,50,.62); color:#fff; cursor:pointer;
  font-size:15px; line-height:44px; text-align:center;
  backdrop-filter:blur(3px);
}
.lb-video-pausa:hover{ background:rgba(18,60,50,.85) }

/* ============================================================ seção padrão */
.lb-dupla{
  display:grid; gap:clamp(28px, 5vw, 60px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width: 860px){
  .lb-dupla{ grid-template-columns:1fr 1fr }
  .lb-dupla.invertida .lb-dupla-arte{ order:2 }
}
.lb-dupla-arte img{ display:block; width:100%; height:auto; border-radius:var(--lb-r-g) }
.lb-dupla-texto h2{ margin:0 0 16px }
.lb-dupla-texto p{ margin:0 0 16px; color:var(--lb-tinta-2); max-width:52ch }
.lb-dupla-texto .lb-bt{ margin-top:10px }

/* linha de fatos do produto */
.lb-linhas{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px }
.lb-linhas li{ display:flex; gap:10px; align-items:baseline; font-size:.96rem }
.lb-linhas li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--lb-limao); transform:translateY(-2px);
}

/* preço */
.lb-preco{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 6px }
.lb-preco strong{
  font-family:var(--lb-corpo); font-size:1.9rem; font-weight:700;
  color:var(--lb-floresta); letter-spacing:-.02em;
}
.lb-parcela{ font-size:.9rem; color:var(--lb-tinta-2) }

/* ============================================================== benefícios */
.lb-beneficios{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) }
.lb-beneficio{
  padding:26px 24px; background:var(--lb-branco);
  border:1px solid var(--lb-linha); border-radius:var(--lb-r-g);
}
.lb-beneficio svg{
  width:34px; height:34px; margin-bottom:14px;
  fill:none; stroke:var(--lb-esmeralda); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.lb-beneficio h3{ margin:0 0 8px; font-size:1.05rem }
.lb-beneficio p{ margin:0; font-size:.93rem; color:var(--lb-tinta-2) }

/* ============================================================ faixa do kit */
.lb-kit{
  background:var(--lb-fundo);
  border-radius:var(--lb-r-g);
  padding:clamp(30px, 5vw, 56px);
}


/* ------------------------------------------------- texto sobre a mídia
   O painel encosta na borda esquerda e some em degradê para dentro do vídeo,
   em vez de ser um cartão flutuante com borda visível. É o que faz ele
   "conversar" com a imagem em vez de ficar colado por cima dela.

   O texto ocupa só a parte OPACA do degradê -- termina antes de a
   transparência começar. Se ele invadisse a parte que desvanece, a última
   linha voltaria a cair sobre imagem, que é o defeito que estamos consertando.

   Só no desktop. Em tela estreita não sobra largura para texto e imagem
   dividirem o mesmo espaço, e o texto continua embaixo. */
@media (min-width: 900px){
  .lb-hero{ position:relative }

  .lb-hero-texto{
    position:absolute; top:0; bottom:0; left:0;
    /* Largo o bastante para o texto caber INTEIRO na parte opaca. Estava
       min(62%,860px), e as linhas chegavam a 88% do painel -- onde o degradê
       já tinha desvanecido para 26%. A conta do contraste reprovava ali. */
    width:min(76%, 1080px);
    display:flex; flex-direction:column; justify-content:center;
    margin:0; max-width:none;
    padding-top:0; padding-bottom:0;
    /* alinha com a coluna de conteúdo do resto da página */
    padding-left:max(20px, calc((100vw - var(--lb-max)) / 2));
    padding-right:0;
    /* A opacidade só cai DEPOIS de onde o texto termina. O desvanecer é a
       transição para o vídeo, não o fundo de nenhuma palavra. */
    background:linear-gradient(90deg,
      rgba(245,248,241,.98) 0%,
      rgba(245,248,241,.96) 62%,
      rgba(245,248,241,.92) 74%,
      rgba(245,248,241,0)   100%);
  }

  /* o texto termina antes do degradê começar a sumir */
  .lb-hero-texto h1{ max-width:13ch }
  .lb-hero-texto p,
  .lb-hero-texto .lb-hero-nota{ max-width:34ch }

  /* A nota usava o tom de apoio, que sobre o painel dá 4,39:1 quando o vídeo
     atrás é escuro -- abaixo do mínimo. Sobre a mídia ela usa o tom de corpo,
     que dá 5,87:1. Fora do hero o tom de apoio continua valendo. */
  .lb-hero-texto .lb-hero-nota{ color:var(--lb-tinta-2) }
}

/* Telas muito baixas: o painel não pode ficar mais alto que a mídia. */
@media (min-width: 900px) and (max-height: 620px){
  .lb-hero-texto h1{ font-size:2rem }
  .lb-hero-texto p{ font-size:.98rem; margin-top:10px }
  .lb-hero-ctas{ margin-top:16px }
  .lb-hero-nota{ display:none }
}