/* ============================================================
   Legal Center
   Uma pagina, varios documentos. Cada um com versao e data
   propria, porque o Anexo do compliance guide exige que o
   cliente saiba exatamente qual versao ele aceitou.
   ============================================================ */

.lg{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);
}

/* ---------- indice lateral ---------- */
.lg__side{position:sticky;top:88px}
.lg__side h2{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-paper-fine);margin:0 0 .7rem;
}
.lgnav{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line)}
.lgnav a{
  display:block;padding:.62rem .1rem;font-size:.86rem;line-height:1.35;
  color:var(--on-paper-dim);text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .2s,padding-left .2s;
}
.lgnav a:hover{color:var(--navy);padding-left:.3rem}
.lgnav a.is-on{color:var(--navy);font-weight:600}

/* ---------- documentos ---------- */
.lg__docs{min-width:0}

.lgdoc{
  border-top:2px solid var(--navy);
  padding-top:1.4rem;margin-bottom:3.2rem;
  scroll-margin-top:96px;
}
.lgdoc:last-child{margin-bottom:0}
.lgdoc__h{margin-bottom:1.2rem}
.lgdoc__h h2{
  font-family:var(--display);
  font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.18;font-weight:400;
  margin:0 0 .5rem;color:var(--navy);
}
.lgdoc__meta{
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  font-size:.72rem;letter-spacing:.04em;color:var(--on-paper-fine);
}
.lgdoc__meta b{font-weight:600;color:var(--on-paper-dim)}

.lgdoc h3{
  font-size:.95rem;font-weight:700;margin:1.5rem 0 .45rem;
  color:var(--navy);
}
.lgdoc h3:first-of-type{margin-top:0}
.lgdoc p{margin:0 0 .8rem;line-height:1.65;color:var(--on-paper-dim);font-size:.93rem}
.lgdoc ul{margin:0 0 .9rem;padding-left:1.15rem}
.lgdoc li{margin-bottom:.35rem;line-height:1.6;color:var(--on-paper-dim);font-size:.93rem}

/* ---------- marcacoes ---------- */
.pend{
  display:block;
  border-left:3px solid #c8a24a;
  background:rgba(200,162,74,.07);
  padding:.7rem .9rem;margin:0 0 .9rem;
  font-size:.85rem;line-height:1.55;color:var(--on-paper-dim);
}
.pend b{
  display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:#765a14;margin-bottom:.28rem;font-weight:700;
}
.fill{
  background:rgba(7,27,51,.07);border-radius:3px;
  padding:.05em .38em;font-size:.92em;font-weight:600;color:var(--navy);
  white-space:nowrap;
}

/* Fronteira clinica no formulario de reclamacao (Clausula 12.6).
   Este e o unico formulario do produto que nao pede login, entao o aviso
   precisa ser lido antes de a pessoa comecar a escrever. Nao e vermelho de
   proposito: nao e um erro dela nem uma ameaca, e uma orientacao. */
.noclin{
  border:1px solid rgba(7,27,51,.22);border-left:4px solid var(--navy);
  background:rgba(7,27,51,.04);
  border-radius:8px;padding:.85rem 1rem;margin:.2rem 0 .4rem;
}
.noclin p{margin:0;color:var(--on-paper-dim);font-size:.86rem;line-height:1.6}
.noclin b{display:block;color:var(--navy);font-size:.92rem;font-weight:700;margin-bottom:.3rem}

/* aviso de emergencia, precisa saltar aos olhos */
.emerg{
  border:2px solid #b4433a;background:#fdf4f3;
  border-radius:10px;padding:1rem 1.15rem;margin:0 0 1.4rem;
}
.emerg p{margin:0;color:#7d2b24;font-size:.9rem;line-height:1.6}
.emerg p b{color:#8f2a20}

/* tabela de politica por marco */
.lgtbl{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.86rem}
.lgtbl th,.lgtbl td{
  text-align:left;vertical-align:top;padding:.6rem .7rem;
  border-bottom:1px solid var(--line);line-height:1.5;
}
.lgtbl thead th{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-paper-fine);border-bottom:1px solid var(--navy);
}
.lgtbl tbody th{font-weight:600;color:var(--navy);width:34%}

/* cabecalho da pagina */
.lghead{padding:calc(72px + clamp(1.6rem,4vw,3rem)) 0 0}
.lghead h1{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3rem);line-height:1.1;font-weight:400;
  margin:0 0 .7rem;color:var(--navy);
}
.lghead p{max-width:44rem;color:var(--on-paper-dim);line-height:1.65;margin:0 0 .5rem}

/* ---------- formulario de reclamacao ----------------------------------------
   Este e o unico formulario publico do site que nao mora numa tela interna.
   A marcacao dele usa .form2 / .f / .f__err, que nasceram em assessment.css e
   nunca foram carregadas aqui: sem isso o .f__err ficava visivel o tempo todo
   e as quatro mensagens de erro apareciam com o formulario em branco.
   As regras abaixo sao a copia minima de que o formulario precisa, escritas
   com as variaveis do site.css. assessment.css e console.css continuam fora
   desta pagina de proposito: sao folhas de tela interna, grandes demais para
   uma pagina publica. */
.form2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:1.1rem}
.form2 .f--wide,.form2 .fw{grid-column:1 / -1}

.f{display:grid;gap:6px;align-content:start}
.f label{
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-paper-fine);
}
.f__opt{
  font-weight:500;letter-spacing:.04em;text-transform:none;
  color:var(--on-paper-fine);opacity:.75;
}
.f input,.f select,.f textarea{
  width:100%;min-height:52px;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--paper);
  font-family:var(--sans);font-size:1rem;color:var(--on-paper);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.f textarea{min-height:96px;resize:vertical;line-height:1.6}
.f input[type="file"]{padding:13px 16px;font-size:.9rem;cursor:pointer}
.f select{
  appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a6d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px;
  cursor:pointer;
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(37,198,224,.16);
}
.f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:#b03a48}

/* o display:none e o motivo desta secao existir: sem ele as mensagens ficam
   na tela desde o primeiro carregamento. O legal.js so acrescenta .is-on. */
.f__err{font-size:.8rem;color:#a52f3c;display:none}
.f__err.is-on{display:block}
.f__hint{font-size:.8rem;color:var(--on-paper-fine);line-height:1.5;margin:0}

.form2 .btn{justify-self:start}

@media (max-width:880px){
  .lg{grid-template-columns:1fr;gap:1.6rem}
  .lg__side{position:static}
  .lgnav{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:0 1rem;border-top:1px solid var(--line);
  }
}
@media (max-width:620px){
  .form2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lgtbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lgtbl tbody th{display:block;width:auto;border-bottom:0;padding-bottom:.15rem}
  .lgtbl td{display:block;padding-top:0}
}