/* Páginas legais: topo escuro curto, índice lateral fixo e texto longo feito para ser lido. */
.leg-topo { position: relative; background: #0F2830; color: #fff; overflow: hidden; padding-bottom: 72px; }
.leg-grade { position: absolute; inset: 0; background-image: linear-gradient(rgba(53,208,222,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(53,208,222,.07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 25% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 25% 0%, #000, transparent 70%); }
.leg-cab { position: relative; z-index: 2; padding: 56px 70px 0; max-width: 920px; display: flex; flex-direction: column; gap: 18px; }
.leg-cab h1 { margin: 0; font-size: 60px; line-height: 1.02; font-weight: 800; letter-spacing: -2.2px; }
.leg-vig { margin: 0; font-family: var(--mono); font-size: 13.5px; color: #9FB0B6; }
.leg-abas { align-self: flex-start; display: inline-flex; gap: 4px; padding: 5px; margin-top: 10px; border-radius: 40px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.leg-abas a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 30px; font-size: 14px; font-weight: 600; color: #CDD8DC; text-decoration: none; transition: background .2s, color .2s; }
.leg-abas a:hover { color: #fff; background: rgba(255,255,255,.08); }
.leg-abas a[aria-current="page"] { background: #15B5C6; color: #fff; }

.leg-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 80px; padding: 72px 70px 0; align-items: start; }
.leg-indice { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.leg-indice-t { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: #0C8695; }
.leg-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--linha); }
.leg-indice a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: #586A71; text-decoration: none; transition: color .2s, border-color .2s; }
.leg-indice a:hover { color: #0F2830; border-left-color: #15B5C6; }

.leg-texto { max-width: 720px; font-size: 17.5px; line-height: 1.8; color: #3F4E54; text-wrap: pretty; }
.leg-texto > :first-child { margin-top: 0; }
.leg-texto p { margin: 0 0 20px; }
.leg-texto h2 { scroll-margin-top: 24px; margin: 52px 0 16px; padding-top: 26px; border-top: 1px solid var(--linha); font-size: 15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0F2830; }
.leg-texto h2:first-child { padding-top: 0; border-top: 0; }
.leg-texto ol { counter-reset: it; list-style: none; margin: 4px 0 24px; padding: 0; }
.leg-texto ol li { counter-increment: it; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid var(--linha); }
.leg-texto ol li:last-child { border-bottom: 1px solid var(--linha); }
.leg-texto ol li::before { content: counter(it, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: #0C8695; }
.leg-texto strong { color: #16211F; }
.leg-texto a { color: #0C8695; }

.leg-contato { margin: 96px 70px; padding: 40px 48px; border-radius: 24px; background: #fff; border: 1px solid #E1E9EC; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.leg-contato-t { display: flex; flex-direction: column; gap: 12px; }
.leg-contato .h2 { font-size: 34px !important; }
.leg-canais { display: flex; flex-direction: column; gap: 12px; }
.leg-canal { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 14px; border: 1px solid #E1E9EC; background: #F6FAFB; color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.leg-canal:hover { border-color: #15B5C6; background: #ECFBFD; }
.leg-canal-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #E3F7FA; color: #0C8695; }
.leg-canal-ic.zap { background: #17B26A; color: #fff; }
.leg-canal small { display: block; font-size: 12px; color: #586A71; }
.leg-canal strong { display: block; font-size: 15px; color: #0F2830; }

@media (max-width: 900px) {
  .leg-cab { padding: 32px 24px 0; }
  .leg-cab h1 { font-size: 42px; letter-spacing: -1.4px; }
  .leg-topo { padding-bottom: 56px; }
  .leg-corpo { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px !important; }
  .leg-indice { position: static; }
  .leg-contato { grid-template-columns: minmax(0, 1fr); margin: 64px 24px; padding: 32px 24px; }
}
@media (max-width: 560px) {
  .leg-cab { padding: 24px 18px 0; }
  .leg-cab h1 { font-size: 34px; }
  .leg-abas { max-width: 100%; overflow-x: auto; }
  .leg-abas a { white-space: nowrap; padding: 0 14px; }
  .leg-texto { font-size: 16.5px; }
  .leg-texto ol li { padding-left: 40px; }
  .leg-contato { margin: 48px 18px; }
  .leg-canal strong { font-size: 14px; word-break: break-all; }
}
