/* Estilos do site público do LocusHub (landing e páginas legais).
 *
 * O grosso da landing usa estilo inline — herança do documento do Claude
 * Design de onde ela veio. Aqui ficam só as regras que inline não expressa:
 * seletores globais, hover e keyframes.
 *
 * As animações são as mesmas do protótipo, sem alteração.
 */

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:84px; }
  html,body{ margin:0; padding:0; background:#F6F4EF; }
  body{ font-family:"Geist",sans-serif; color:#1C1A17; -webkit-font-smoothing:antialiased; }
  a{ color:#C8503D; text-decoration:none; }
  a:hover{ color:#9E3B2C; }
  ::selection{ background:rgba(200,80,61,.18); }
  #lh-feat-track::-webkit-scrollbar{ display:none; }
  /* As imagens declaram width/height para o navegador reservar espaço e o
   * conteúdo não saltar. Sem isto a altura do atributo vira altura de layout e
   * a imagem estica — o estilo inline só define a largura. Os logos têm altura
   * inline, que prevalece sobre esta regra. */
  img{ height:auto; }
  @keyframes lhRise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
  @keyframes chatDot{ 0%,80%,100%{ transform:scale(.6); opacity:.4;} 40%{ transform:scale(1); opacity:1;} }
  @keyframes chatMsg1{ 0%,5%{opacity:0;transform:translateY(6px);} 8%,90%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes chatTyping1{ 0%,11%,26%,100%{opacity:0;} 13%,24%{opacity:1;} }
  @keyframes chatMsg2{ 0%,26%{opacity:0;transform:translateY(6px);} 29%,90%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes chatMsg3{ 0%,44%{opacity:0;transform:translateY(6px);} 47%,90%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes chatTyping2{ 0%,54%,69%,100%{opacity:0;} 56%,67%{opacity:1;} }
  @keyframes chatMsg4{ 0%,69%{opacity:0;transform:translateY(6px);} 72%,90%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes waMsg1{ 0%,4%{opacity:0;transform:translateY(6px);} 7%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes waMsg2{ 0%,17%{opacity:0;transform:translateY(6px);} 20%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes waTyping1{ 0%,26%,38%,100%{opacity:0;} 28%,36%{opacity:1;} }
  @keyframes waMsg3{ 0%,38%{opacity:0;transform:translateY(6px);} 41%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes waMsg4{ 0%,50%{opacity:0;transform:translateY(6px);} 53%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes waTyping2{ 0%,59%,71%,100%{opacity:0;} 61%,69%{opacity:1;} }
  @keyframes waMsg5{ 0%,71%{opacity:0;transform:translateY(6px);} 74%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes waTyping3{ 0%,79%,90%,100%{opacity:0;} 81%,88%{opacity:1;} }
  @keyframes waMsg6{ 0%,90%{opacity:0;transform:translateY(6px);} 93%,97%{opacity:1;transform:translateY(0);} 100%{opacity:0;} }
  @keyframes waScroll{ 0%,20%{transform:translateY(0);} 32%{transform:translateY(-60px);} 46%{transform:translateY(-140px);} 60%{transform:translateY(-280px);} 74%{transform:translateY(-350px);} 88%,96%{transform:translateY(-428px);} 100%{transform:translateY(0);} }
  /* régua de cobrança: mesmo esquema do waMsg, história mais longa (8 mensagens + 2 digitando) */
  @keyframes reguaMsg1{ 0%,3%{opacity:0;transform:translateY(6px);} 6%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaMsg2{ 0%,13%{opacity:0;transform:translateY(6px);} 16%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaTyping1{ 0%,18%,24%,100%{opacity:0;} 20%,22%{opacity:1;} }
  @keyframes reguaMsg3{ 0%,23%{opacity:0;transform:translateY(6px);} 26%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaMsg4{ 0%,35%{opacity:0;transform:translateY(6px);} 38%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaMsg5{ 0%,47%{opacity:0;transform:translateY(6px);} 50%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaTyping2{ 0%,52%,58%,100%{opacity:0;} 54%,56%{opacity:1;} }
  @keyframes reguaMsg6{ 0%,57%{opacity:0;transform:translateY(6px);} 60%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaMsg7{ 0%,67%{opacity:0;transform:translateY(6px);} 70%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaMsg8{ 0%,77%{opacity:0;transform:translateY(6px);} 80%,88%{opacity:1;transform:translateY(0);} 96%,100%{opacity:0;} }
  @keyframes reguaFinal{ 0%,90%{opacity:0;transform:translateY(6px);} 93%,97%{opacity:1;transform:translateY(0);} 100%{opacity:0;} }
  @keyframes reguaScroll{ 0%,50%{transform:translateY(0);} 58%{transform:translateY(-82px);} 64%{transform:translateY(-124px);} 72%{transform:translateY(-188px);} 80%{transform:translateY(-252px);} 88%,96%{transform:translateY(-520px);} 100%{transform:translateY(0);} }
  /* assinatura: o pendente respira, o assinado entra e fica */
  @keyframes signWait{ 0%,100%{ opacity:.35; transform:scale(.82);} 50%{ opacity:1; transform:scale(1);} }
  @keyframes signDone{ 0%,42%{ opacity:0; transform:scale(.7);} 55%{ opacity:1; transform:scale(1.14);} 62%,100%{ opacity:1; transform:scale(1);} }
  @keyframes signRow{ 0%,42%{ opacity:.5;} 56%,100%{ opacity:1;} }
  @keyframes signFile{ 0%,62%{ opacity:0; transform:translateY(7px);} 72%,100%{ opacity:1; transform:translateY(0);} }
  @keyframes signGone{ 0%,45%{ opacity:1;} 52%,100%{ opacity:0;} }
  @media (prefers-reduced-motion: reduce){
    [style*="signWait"],[style*="signDone"],[style*="signRow"],[style*="signFile"]{ animation:none !important; opacity:1 !important; transform:none !important; }
  }

/* --- hover -----------------------------------------------------------------
 *
 * O documento original usava um atributo `style-hover="..."`, que o runtime do
 * Claude Design interpretava e o HTML ignora. Cada valor distinto virou uma
 * classe; o estilo-base continua inline no elemento.
 */
.hov-texto:hover        { color:#1C1A17; }
.hov-borda-verde:hover  { border-color:#1F4632; }
.hov-borda-verde-txt:hover { border-color:#1F4632; color:#1F4632; }
.hov-verde:hover        { background:#1F4632; color:#fff; }
.hov-verde-esc:hover    { background:#163524; }
.hov-verde-esc-b:hover  { background:#163524; color:#fff; }
.hov-verde-esc-c:hover  { background:#163524; color:#F6F4EF; }
.hov-vinho:hover        { background:#b3442f; }
.hov-vinho-esc:hover    { background:#a83628; color:#fff; }

/* Botões e áreas clicáveis precisam do estado de foco visível — o documento
 * original não tinha nenhum, e a landing é navegável por teclado. */
a:focus-visible, button:focus-visible, .faixa:focus-visible {
  outline: 2px solid #C8503D;
  outline-offset: 2px;
}

/* --- faixa de carteira (formulário de contato) ------------------------------
 *
 * Era um `<sc-for>` cujo item recalculava as cores em runtime. Agora são
 * quatro elementos fixos e o estado de seleção é uma classe.
 */
.faixa {
  text-align:center; cursor:pointer; padding:10px 8px; border-radius:9px;
  font-size:13.5px; font-weight:600;
  border:1.5px solid #E4E0D5; background:#fff; color:#3B372F;
}
.faixa:hover { border-color:#C8503D; }
.faixa.sel   { border-color:#C8503D; background:#FBE9DE; color:#C8503D; }

/* --- páginas legais --------------------------------------------------------
 * Texto corrido, que a landing não tem.
 */
.doc { max-width:760px; margin:0 auto; padding:48px 24px 80px; }
.doc h1 { font-family:'Source Serif 4',serif; font-size:34px; font-weight:600;
          letter-spacing:-.01em; margin:0 0 6px; }
.doc h2 { font-family:'Source Serif 4',serif; font-size:22px; font-weight:600;
          margin:34px 0 10px; }
.doc p, .doc li { font-size:15px; line-height:1.65; color:#3B372F; }
.doc ul { padding-left:20px; }
.doc li { margin-bottom:6px; }
.doc .meta { font-size:13px; color:#8A8377; margin-bottom:28px; }
.doc table { border-collapse:collapse; width:100%; margin:14px 0; font-size:14px; }
.doc th, .doc td { border:1px solid #E4E0D5; padding:9px 11px; text-align:left; }
.doc th { background:#FBF9F5; font-weight:600; }