/* ==========================================================================
   Site AIONE — estilos próprios
   Depende de tokens.css (importe-o antes). Nenhuma cor fora dos tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout base
   -------------------------------------------------------------------------- */

html { height: 100%; }

body.page {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.page__main { flex: 1 0 auto; }

/* Faixa laranja fina no topo — único uso de laranja sólido em área grande.
   3px em 100vw fica muito abaixo dos ~10% previstos no design system. */
.topline {
   height: 3px;
   background: var(--color-primary);
   flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Home — em construção
   -------------------------------------------------------------------------- */

.hero {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: var(--space-8) var(--space-5);
   min-height: 70vh;
}

.hero__logo {
   width: 300px;
   max-width: 72vw;
   height: auto;
   margin-bottom: var(--space-7);
}

.hero__title {
   font-size: var(--text-title);
   font-weight: var(--weight-bold);
   letter-spacing: -.01em;
   margin: 0 0 var(--space-3);
}

.hero__text {
   font-size: var(--text-body);
   font-weight: var(--weight-regular);
   color: var(--color-text);
   margin: 0;
   max-width: 44ch;
}

/* --------------------------------------------------------------------------
   Cabeçalho das páginas internas
   -------------------------------------------------------------------------- */

.topbar {
   height: 64px;
   background: var(--color-surface);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   flex: 0 0 auto;
}

.topbar .container {
   width: 100%;
   display: flex;
   align-items: center;
}

/* Versão horizontal do logo — a empilhada fica ilegível em 64px de barra */
.topbar__logo {
   height: 30px;
   width: auto;
   display: block;
}

@media (max-width: 640px) {
   .topbar__logo { height: 26px; }
}

.topbar__link {
   display: inline-flex;
   align-items: center;
   border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Conteúdo de documento
   -------------------------------------------------------------------------- */

.doc {
   padding: var(--space-7) 0 var(--space-8);
}

.doc__header { margin-bottom: var(--space-6); }

.doc__eyebrow {
   font-size: var(--text-footnote);
   font-weight: var(--weight-medium);
   color: var(--color-muted);
   margin: 0 0 var(--space-2);
}

.doc h1 {
   font-size: var(--text-display);
   margin: 0 0 var(--space-4);
}

.doc__lead {
   font-size: var(--text-body);
   font-weight: var(--weight-regular);
   max-width: 62ch;
}

.doc section + section { margin-top: var(--space-7); }

.doc h2 {
   font-size: var(--text-heading);
   margin: 0 0 var(--space-4);
}

.doc .card + .card { margin-top: var(--space-4); }

/* Lista de passos numerados */
.steps {
   list-style: none;
   margin: 0;
   padding: 0;
   counter-reset: step;
}

.steps li {
   counter-increment: step;
   position: relative;
   padding-left: 44px;
   min-height: 32px;
   margin-bottom: var(--space-4);
   max-width: 62ch;
}

.steps li:last-child { margin-bottom: 0; }

.steps li::before {
   content: counter(step);
   position: absolute;
   left: 0;
   top: -2px;
   width: 28px;
   height: 28px;
   border-radius: var(--radius-full);
   background: var(--color-primary-100);
   color: var(--color-ink);
   font-size: var(--text-footnote);
   font-weight: var(--weight-bold);
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Listas com marcador laranja */
.list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.list li {
   position: relative;
   padding-left: var(--space-5);
   margin-bottom: var(--space-2);
   max-width: 62ch;
}

.list li:last-child { margin-bottom: 0; }

.list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 11px;
   width: 6px;
   height: 6px;
   border-radius: var(--radius-full);
   background: var(--color-primary);
}

/* Grade de dois blocos lado a lado */
.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-4);
}

.card h3 {
   font-size: var(--text-section);
   margin: 0 0 var(--space-3);
}

.card p:last-child,
.card ul:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Sumário de documento longo (política de privacidade)
   -------------------------------------------------------------------------- */

.sumario {
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
   box-shadow: var(--shadow-card);
   margin: var(--space-5) 0 var(--space-6);
}

.sumario__titulo {
   font-size: var(--text-label);
   font-weight: var(--weight-medium);
   color: var(--color-muted);
   margin: 0 0 var(--space-3);
}

.sumario__lista {
   margin: 0;
   padding: 0 0 0 var(--space-5);
   columns: 2;
   column-gap: var(--space-6);
   font-size: var(--text-sub);
}

.sumario__lista li {
   margin-bottom: var(--space-2);
   break-inside: avoid;
}

/* texto pequeno em laranja não passa no contraste — o design system manda brick */
.sumario__lista a {
   color: var(--color-brick);
   border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
   .sumario__lista { columns: 1; }
}

/* âncora não pode nascer colada no topo da janela */
.doc section[id] { scroll-margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Formulário de solicitação
   Espaço entre campos empilhados: 16px (design system, §4.2)
   -------------------------------------------------------------------------- */

.form { margin-top: var(--space-5); }

.form .field { margin-bottom: var(--space-4); }

/* a mensagem de erro sobe para junto do campo a que pertence */
.form .field-message {
   margin-top: calc(var(--space-2) * -1);
   margin-bottom: var(--space-4);
}

.form .btn { margin-top: var(--space-2); }

/* Campo-armadilha para robôs: fora da tela, fora da ordem de tabulação */
.hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* Indicador de envio em andamento.
   Sob prefers-reduced-motion o giro para (tokens.css zera as animações) e
   quem comunica o estado é o rótulo "Enviando…" mais o botão desabilitado. */
.spinner {
   width: 16px;
   height: 16px;
   border: 2px solid rgba(255, 255, 255, .45);
   border-top-color: #fff;
   border-radius: var(--radius-full);
   animation: girar .7s linear infinite;
}

@keyframes girar {
   to { transform: rotate(360deg); }
}

#msg-ok,
#msg-erro { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.footer {
   flex: 0 0 auto;
   border-top: 1px solid var(--color-border);
   padding: var(--space-5) 0;
   background: var(--color-bg);
}

.footer .container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
}

.footer__text {
   font-size: var(--text-footnote);
   color: var(--color-muted);
   margin: 0;
}

/* Texto pequeno nunca em #FF6600 — o design system manda usar brick */
.footer__link {
   font-size: var(--text-footnote);
   font-weight: var(--weight-medium);
   color: var(--color-brick);
   border-radius: var(--radius-sm);
   padding: var(--space-1) var(--space-2);
   margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1);
}

.footer__link:hover { background: var(--color-primary-100); text-decoration: none; }

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */

.mt-5 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; }

.skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   background: var(--color-surface);
   color: var(--color-ink);
   padding: var(--space-3) var(--space-4);
   border-radius: var(--radius-md);
   z-index: 10;
}

.skip-link:focus {
   left: var(--space-4);
   top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Responsivo — o design system exige funcionar em 375px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
   .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
   .doc h1 { font-size: var(--text-title); }
   .doc { padding: var(--space-6) 0 var(--space-7); }
   .hero { min-height: 60vh; padding: var(--space-7) var(--space-4); }
   .hero__logo { margin-bottom: var(--space-6); }
   .footer .container { flex-direction: column; align-items: flex-start; }
   .btn--responsive { width: 100%; }
}

/* --------------------------------------------------------------------------
   Impressão — a página de exclusão costuma ser impressa/arquivada
   -------------------------------------------------------------------------- */

@media print {
   .topline, .footer__link { display: none; }
   body.page { background: #fff; }
   .card { box-shadow: none; border: 1px solid var(--color-border); }
}