/* ===========================================================================
   CABEÇALHO E RODAPÉ — Life Be (2026-09-01)
   Depende de tokens.css, que precisa vir antes.
   =========================================================================== */

*,*::before,*::after{ box-sizing:border-box }
body{ margin:0 }

/* Pular para o conteúdo: invisível até receber foco pelo TAB. */
.lb-pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--lb-floresta); color:#fff; padding:12px 20px;
  font-weight:700; text-decoration:none; border-radius:0 0 var(--lb-r) 0;
}
.lb-pular:focus{ left:0 }

/* ------------------------------------------------------------ tarja de topo */
.lb-tarja{
  background:var(--lb-floresta); color:#fff;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
}
.lb-tarja .lb-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap;
}
.lb-tarja span[aria-hidden]{ color:var(--lb-limao) }

/* ---------------------------------------------------------------- cabeçalho */
.lb-topo{
  position:sticky; top:0; z-index:100;
  background:var(--lb-branco);
  border-bottom:1px solid var(--lb-linha);
}
.lb-topo-in{
  display:flex; align-items:center; gap:20px;
  padding-top:10px; padding-bottom:10px;
}

.lb-marca{ display:block; flex:none; line-height:0 }
.lb-marca img{ height:40px; width:auto; display:block }

.lb-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.lb-nav a{
  padding:9px 13px; border-radius:999px;
  color:var(--lb-tinta); text-decoration:none;
  font-size:.9rem; font-weight:600; white-space:nowrap;
}
.lb-nav a:hover{ background:var(--lb-esmeralda-pale); color:var(--lb-floresta) }
/* A página atual é marcada por aria-current, não por uma classe: o estado fica
   um só, e o leitor de tela anuncia "página atual" sem CSS nenhum. */
.lb-nav a[aria-current="page"]{ background:var(--lb-esmeralda); color:#fff }

.lb-topo-dir{ margin-left:auto; display:flex; align-items:center; gap:6px; flex:none }
.lb-icone{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 11px; border-radius:var(--lb-r);
  color:var(--lb-tinta); text-decoration:none;
}
.lb-icone:hover{ background:var(--lb-fundo) }
.lb-icone svg{
  width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.lb-icone-rot{ font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.lb-badge{
  position:absolute; top:2px; right:4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--lb-esmeralda); color:#fff;
  font-size:.66rem; font-weight:700; line-height:18px; text-align:center;
}

/* ------------------------------------------- menu: checkbox escondido puro */
/* No desktop a nav ocupa o meio e o hamburguer não existe. */
.lb-nav{ flex:1 1 auto }
.lb-hamb-bt{ display:none }

@media (max-width: 980px){
  .lb-hamb-bt{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:var(--lb-r);
    cursor:pointer; order:3; flex:none;
  }
  .lb-hamb-bt:hover{ background:var(--lb-fundo) }
  /* o alvo do dedo tem 44px: é a medida mínima para acertar sem mirar */
  .lb-hamb{ display:flex; flex-direction:column; gap:5px; width:22px }
  .lb-hamb i{ display:block; height:2px; background:var(--lb-tinta); border-radius:2px }

  .lb-topo-in{ flex-wrap:wrap }
  .lb-marca{ order:1 }
  .lb-topo-dir{ order:2; margin-left:auto }

  .lb-nav{
    order:4; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    width:100%; padding:8px 0 12px; border-top:1px solid var(--lb-linha); margin-top:10px;
  }
  .lb-menu-toggle:checked ~ .lb-nav{ display:flex }
  .lb-nav a{ border-radius:var(--lb-r); padding:13px 14px; font-size:.98rem }
}

/* O checkbox está escondido, mas continua focável pelo TAB: sem este anel,
   quem navega por teclado abriria o menu sem enxergar onde está. */
.lb-menu-toggle:focus-visible + .lb-hamb-bt{
  outline:3px solid var(--lb-limao); outline-offset:2px;
}

@media (max-width: 560px){
  .lb-marca img{ height:34px }
  .lb-icone-rot{ display:none }
  .lb-tarja{ font-size:.72rem }
}

/* -------------------------------------------------------------------- rodapé */
.lb-rodape{
  margin-top:clamp(48px, 8vw, 90px);
  background:var(--lb-floresta); color:#fff;
  padding:clamp(40px, 6vw, 66px) 0 30px;
}
.lb-rodape-grade{
  display:grid; gap:32px;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
}
@media (max-width: 860px){ .lb-rodape-grade{ grid-template-columns:1fr 1fr } }
@media (max-width: 520px){ .lb-rodape-grade{ grid-template-columns:1fr } }

.lb-rodape h2{
  font-family:var(--lb-corpo);
  font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lb-limao); margin:0 0 14px;
}
.lb-rodape a{
  display:block; padding:5px 0;
  color:rgba(255,255,255,.86); text-decoration:none; font-size:.92rem;
}
.lb-rodape a:hover{ color:#fff; text-decoration:underline }

.lb-rodape-marca img{ height:56px; width:auto; display:block;
  /* o logo é verde sobre transparente; no fundo floresta ele sumiria */
  filter:brightness(0) invert(1);
}
.lb-rodape-marca p{
  margin:14px 0 0; font-size:.95rem; color:rgba(255,255,255,.82); max-width:26ch;
}

.lb-rodape-aviso{
  margin:34px 0 0; padding:16px 18px;
  background:rgba(255,255,255,.07); border-radius:var(--lb-r);
  color:rgba(255,255,255,.9); max-width:none;
}

.lb-rodape-pe{
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.8rem; color:var(--lb-sobre-floresta);
}
.lb-rodape-pe p{ margin:4px 0 }

/* ===========================================================================
   GRAFISMO DA MARCA (2026-09-01)

   O rodapé e o bloco de fecho eram retângulos verdes chapados -- corretos e
   sem vida. A seção 2 do documento pede "curvas amplas, arcos e círculos", e é
   exatamente o que falta aqui.

   Tudo feito em CSS: gradiente e círculo de borda. Nenhum byte de imagem, nada
   para carregar, e escala em qualquer tela sem borrar.
   =========================================================================== */

.lb-rodape{
  position:relative; overflow:hidden;
  border-radius:var(--lb-r-g) var(--lb-r-g) 0 0;
  /* o verde deixa de ser chapado: clareia no canto superior direito, como se
     a luz entrasse por ali */
  background:
    radial-gradient(78% 70% at 92% 0%, rgba(0,136,90,.55) 0%, rgba(0,136,90,0) 62%),
    var(--lb-floresta);
}

/* fio limão no topo: liga o rodapé à paleta em vez de deixá-lo isolado */
.lb-rodape::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--lb-esmeralda), var(--lb-limao));
}

/* arco amplo, saindo pela lateral. É o grafismo da marca, não decoração solta */
.lb-rodape::after{
  content:""; position:absolute; z-index:0;
  right:-180px; bottom:-260px; width:520px; height:520px;
  border-radius:50%; border:2px solid rgba(183,224,69,.22);
  pointer-events:none;
}
.lb-rodape .lb-wrap{ position:relative; z-index:1 }

.lb-rodape-marca img{ height:56px }

/* ===========================================================================
   AVISO DE COOKIES (2026-09-01)

   "Igual facilidade para aceitar e rejeitar" não é um detalhe de texto: é o
   CSS. Por isso os dois botões dividem a mesma classe, o mesmo tamanho e o
   mesmo contraste. Aceitar verde e grande ao lado de um "rejeitar" cinza e
   pequeno é escolha enviesada, mesmo com as duas palavras na tela.
   =========================================================================== */

.lb-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
}
.lb-cookies-caixa{
  max-width:760px; margin:0 auto;
  background:var(--lb-branco); color:var(--lb-tinta);
  border:1px solid var(--lb-linha); border-radius:var(--lb-r-g);
  box-shadow:0 12px 44px rgba(18,60,50,.20);
  padding:22px 24px;
}
.lb-cookies h2{
  margin:0 0 8px; font-size:1.05rem;
  font-family:var(--lb-corpo); font-weight:800; text-transform:none; letter-spacing:0;
}
.lb-cookies p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--lb-tinta-2) }

.lb-cookies-acoes{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; align-items:center }
/* os dois botões de decisão ocupam o mesmo espaço, lado a lado */
.lb-cookies-acoes .lb-bt{ flex:1 1 200px; padding:13px 20px; font-size:.88rem }
.lb-cookies-config{
  flex:1 1 100%;
  border:0; background:transparent; cursor:pointer;
  color:var(--lb-esmeralda); font:inherit; font-size:.88rem; font-weight:700;
  text-decoration:underline; padding:8px 0; text-align:center;
}
@media (min-width: 620px){ .lb-cookies-config{ flex:0 0 auto; text-align:left } }

.lb-cookies-detalhe{ margin-top:18px; border-top:1px solid var(--lb-linha); padding-top:14px }
.lb-cookies-cat{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px solid var(--lb-linha);
}
.lb-cookies-cat:last-of-type{ border-bottom:0 }
.lb-cookies-cat input{ width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--lb-esmeralda) }
.lb-cookies-cat span{ font-size:.88rem; color:var(--lb-tinta-2); line-height:1.55 }
.lb-cookies-cat strong{ display:block; color:var(--lb-tinta); font-size:.94rem; margin-bottom:2px }
.lb-cookies-lista{ margin-top:12px !important; font-size:.84rem !important }
.lb-cookies-lista a{ color:var(--lb-esmeralda); font-weight:700 }

/* ---------------------------------------------------------------- 2026-09-03
   `hidden` tem que ganhar de qualquer display.

   O atributo hidden do HTML vale display:none, mas vem da folha padrão do
   navegador -- e qualquer regra com classe (como .lb-cookies-acoes{display:flex})
   tem precedência maior e a sobrescreve. Resultado: o elemento estava marcado
   como escondido e aparecia mesmo assim.

   Foi o que fez o "Salvar preferências" surgir no aviso sem ninguém ter
   clicado em "Configurar". Vale para toda a folha, não só para o aviso. */
[hidden]{ display:none !important }