/* ===========================================================================
   PÁGINAS DE CONTEÚDO — Como usar, Sobre, Qualidade, FAQ, Contato
   Depende de tokens.css e site-novo.css.
   =========================================================================== */

/* ------------------------------------------------------------- capa da página */
.lb-capa{
  background:var(--lb-fundo);
  padding:clamp(46px, 7vw, 84px) 0 clamp(40px, 6vw, 70px);
  border-radius:0 0 var(--lb-r-g) var(--lb-r-g);
}
.lb-capa h1{ margin:0; max-width:16ch }
.lb-capa .lb-intro{
  margin:18px 0 0; max-width:56ch;
  font-size:clamp(1rem, 2.2vw, 1.15rem); color:var(--lb-tinta-2);
}

/* ------------------------------------------------------------------- prosa */
/* Largura de leitura limitada: linha de 100 caracteres cansa e faz o olho
   perder a próxima. 62ch é o intervalo em que se lê sem esforço. */
.lb-prosa{ max-width:62ch }
.lb-prosa p{ margin:0 0 16px }
.lb-prosa p:last-child{ margin-bottom:0 }

.lb-secao h2{ margin:0 0 18px }
.lb-secao h3{ margin:0 0 10px }

/* ------------------------------------------------------------------ blocos */
.lb-grade{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) }

.lb-cartao{
  background:var(--lb-branco);
  border:1px solid var(--lb-linha);
  border-radius:var(--lb-r-g);
  padding:26px 24px;
}
.lb-cartao h3{ margin:0 0 12px; color:var(--lb-floresta) }
.lb-cartao p{ margin:0; color:var(--lb-tinta-2); font-size:.95rem }

/* lista de fatos: cada linha é um dado do rótulo, não uma promessa */
.lb-fatos{ list-style:none; margin:0; padding:0 }
.lb-fatos li{
  display:flex; gap:11px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--lb-linha);
  font-size:.95rem;
}
.lb-fatos li:last-child{ border-bottom:0 }
.lb-fatos li::before{
  content:""; flex:none;
  width:7px; height:7px; border-radius:50%;
  background:var(--lb-limao);
  transform:translateY(-2px);
}
.lb-fatos strong{ font-weight:700 }

/* ------------------------------------------------------------------- aviso */
.lb-caixa-aviso{
  margin-top:26px; padding:20px 22px;
  background:var(--lb-esmeralda-pale);
  border-left:4px solid var(--lb-esmeralda);
  border-radius:0 var(--lb-r) var(--lb-r) 0;
}
.lb-caixa-aviso h3{ margin:0 0 8px; font-size:1rem; color:var(--lb-floresta) }
.lb-caixa-aviso p{ margin:0; font-size:.92rem; color:var(--lb-tinta-2) }

/* ------------------------------------------------------------------- FAQ */
/* <details> nativo: abre e fecha sem JavaScript, é focável pelo teclado e o
   leitor de tela já anuncia aberto/fechado. Acordeão feito à mão precisaria de
   aria-expanded, role e listener para chegar no mesmo lugar. */
.lb-faq{ max-width:70ch }
.lb-faq details{
  border-bottom:1px solid var(--lb-linha);
}
.lb-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 2px; cursor:pointer; list-style:none;
  font-weight:700; font-size:1rem; color:var(--lb-tinta);
}
.lb-faq summary::-webkit-details-marker{ display:none }
.lb-faq summary::after{
  content:"+"; flex:none;
  font-size:1.5rem; font-weight:400; line-height:1; color:var(--lb-esmeralda);
}
.lb-faq details[open] summary::after{ content:"−" }
.lb-faq summary:hover{ color:var(--lb-esmeralda) }
.lb-faq details > div{
  padding:0 2px 20px; max-width:62ch;
  color:var(--lb-tinta-2); font-size:.96rem;
}
.lb-faq details > div p{ margin:0 0 12px }
.lb-faq details > div p:last-child{ margin:0 }

/* --------------------------------------------------------------- contato */
.lb-canais{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) }
.lb-canal{
  display:block; padding:20px 22px;
  background:var(--lb-branco); border:1px solid var(--lb-linha);
  border-radius:var(--lb-r-g); text-decoration:none; color:var(--lb-tinta);
}
.lb-canal:hover{ border-color:var(--lb-esmeralda); background:var(--lb-esmeralda-pale) }
.lb-canal .rot{
  display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lb-tinta-3);
  margin-bottom:6px;
}
.lb-canal .val{ font-weight:700; font-size:1.02rem; word-break:break-word }

/* ------------------------------------------------------------- formulário */
.lb-form{ max-width:560px }
.lb-form label{
  display:block; margin:16px 0 6px;
  font-size:.86rem; font-weight:700; color:var(--lb-tinta);
}
.lb-form .opcional{ font-weight:500; color:var(--lb-tinta-3) }
.lb-form input,
.lb-form select,
.lb-form textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--lb-borda-campo); border-radius:var(--lb-r);
  font:inherit; font-size:.98rem; color:var(--lb-tinta);
  background:var(--lb-branco);
}
.lb-form input:focus,
.lb-form select:focus,
.lb-form textarea:focus{
  outline:none; border-color:var(--lb-esmeralda);
  box-shadow:0 0 0 3px var(--lb-esmeralda-pale);
}
.lb-form textarea{ min-height:150px; resize:vertical }
.lb-form button{ margin-top:24px }

/* Erro junto do campo, como pede o documento -- não numa lista no topo, que
   obriga a pessoa a decorar qual campo errou e ir procurar. */
.lb-erro-campo{
  display:block; margin-top:6px;
  font-size:.84rem; font-weight:600; color:#9F1239;
}
.lb-form input[aria-invalid="true"],
.lb-form textarea[aria-invalid="true"]{ border-color:#9F1239 }

.lb-ok{
  padding:18px 20px; margin-bottom:26px;
  background:var(--lb-esmeralda-pale); border-left:4px solid var(--lb-esmeralda);
  border-radius:0 var(--lb-r) var(--lb-r) 0; color:var(--lb-floresta); font-weight:600;
}
.lb-falhou{
  padding:18px 20px; margin-bottom:26px;
  background:#FFE4E6; border-left:4px solid #9F1239;
  border-radius:0 var(--lb-r) var(--lb-r) 0; color:#881337; font-weight:600;
}

/* ----------------------------------------------------------- encerramento */
.lb-fecho{
  background:var(--lb-floresta); color:#fff;
  border-radius:var(--lb-r-g);
  padding:clamp(36px, 6vw, 62px) clamp(24px, 5vw, 54px);
  text-align:center;
}
.lb-fecho h2{ margin:0 auto; max-width:20ch }
.lb-fecho p{ margin:16px auto 0; max-width:46ch; color:rgba(255,255,255,.85) }
.lb-fecho .lb-bt{ margin-top:26px }
.lb-fecho .lb-bt.vazado{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5) }
.lb-fecho .lb-bt.vazado:hover{ background:rgba(255,255,255,.12) }

/* ------------------------------------------------- fecho, com o grafismo */
.lb-fecho{
  position:relative; overflow:hidden;
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(183,224,69,.18) 0%, rgba(183,224,69,0) 58%),
    radial-gradient(95% 85% at 0% 100%, rgba(0,136,90,.50) 0%, rgba(0,136,90,0) 62%),
    var(--lb-floresta);
}
/* dois arcos concêntricos, cortados pela borda do bloco */
.lb-fecho::before,
.lb-fecho::after{
  content:""; position:absolute; border-radius:50%;
  border:2px solid rgba(183,224,69,.20); pointer-events:none;
}
.lb-fecho::before{ right:-140px; top:-190px;  width:420px; height:420px }
.lb-fecho::after { left:-170px;  bottom:-230px; width:380px; height:380px;
                   border-color:rgba(255,255,255,.12) }
.lb-fecho > *{ position:relative; z-index:1 }

/* o título ganha um sublinhado curto em limão, para não ser só texto branco */
.lb-fecho h2::after{
  content:""; display:block; width:58px; height:4px; margin:18px auto 0;
  border-radius:999px; background:var(--lb-limao);
}

/* ------------------------------------------------------- figura na seção */
.lb-figura{ margin:0 }
.lb-figura img{ display:block; width:100%; height:auto; border-radius:var(--lb-r-g) }
.lb-figura figcaption{
  margin-top:12px; font-size:.82rem; color:var(--lb-tinta-3); line-height:1.5;
}

/* par de imagens lado a lado (os dois rótulos, por exemplo) */
.lb-par{ display:grid; gap:22px; grid-template-columns:1fr }
@media (min-width: 760px){ .lb-par{ grid-template-columns:1fr 1fr } }

/* imagem + texto, alternando lado */
.lb-lado{ display:grid; gap:clamp(24px,4vw,48px); align-items:center; grid-template-columns:1fr }
@media (min-width: 860px){
  .lb-lado{ grid-template-columns:1fr 1fr }
  .lb-lado.invertida .lb-figura{ order:2 }
}