/* ==========================================================================
   Automa Software — páginas legais (privacidade, termos, exclusão de dados).
   ADITIVO ao base.css: só classes novas.
   ========================================================================== */

.legal-hero { background: var(--primary-dark); color: #fff; padding: 56px 0 48px; }
.legal-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.legal-hero p { color: #c8d6ea; font-size: 16px; max-width: 640px; }
.legal-hero .atualizado { margin-top: 14px; font-size: 13px; color: #9fb4d0; }

.legal-nav { background: var(--neutral-100); border-bottom: 1px solid var(--neutral-300); padding: 14px 0; }
.legal-nav .container { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.legal-nav a { font-size: 14px; font-weight: 600; color: var(--neutral-700); }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--primary); }
.legal-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.legal { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px;
  /* E-mail e URL longos nao tem onde quebrar e estouram a largura no celular.
     Tem que ser `anywhere`, nao `break-word`: os dois quebram a linha, mas so
     `anywhere` reduz o min-content do elemento. Com `break-word` o <li> de
     .passos continuava PEDINDO os 289px do e-mail mais os 78px de padding e
     esticava para 369px num viewport de 360. */
  overflow-wrap: anywhere; }
.legal h2 { color: var(--primary-dark); font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { color: var(--primary-dark); font-size: 16.5px; font-weight: 700; margin: 24px 0 8px; }
.legal p { color: var(--neutral-700); font-size: 15.5px; margin-bottom: 14px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 7px; }
.legal li { color: var(--neutral-700); font-size: 15.5px; }
.legal strong { color: var(--neutral-900); }
.legal code { background: var(--neutral-100); border: 1px solid var(--neutral-300); border-radius: var(--r-sm); padding: 1px 6px; font-size: 13.5px; }

.legal table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--neutral-300); vertical-align: top; color: var(--neutral-700); }
.legal th { background: var(--neutral-100); color: var(--primary-dark); font-weight: 700; font-size: 13.5px; }
.legal .tabela-scroll { overflow-x: auto; }

.legal .destaque { background: var(--primary-light); border-left: 4px solid var(--primary); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 20px; }
.legal .destaque p:last-child { margin-bottom: 0; }
.legal .aviso { background: var(--accent-light); border-left: 4px solid var(--accent); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 20px; }
.legal .aviso p:last-child { margin-bottom: 0; }

.legal .id-empresa { background: #fff; border: 1px solid var(--neutral-300); border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.legal .id-empresa dl { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; font-size: 15px; }
.legal .id-empresa dt { color: var(--neutral-500); font-weight: 600; }
.legal .id-empresa dd { color: var(--neutral-900); }
@media (max-width: 620px) { .legal .id-empresa dl { grid-template-columns: 1fr; gap: 2px; } .legal .id-empresa dd { margin-bottom: 10px; } }

.legal .passos { counter-reset: passo; list-style: none; padding-left: 0; gap: 14px; }
.legal .passos li { counter-increment: passo; background: #fff; border: 1px solid var(--neutral-300); border-radius: var(--r-md); padding: 18px 20px 18px 58px; position: relative; box-shadow: var(--shadow-sm); }
.legal .passos li::before { content: counter(passo); position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }