/*
 * O site do ArqApp (09/10/2026). CSS próprio, sem framework e sem build. Toda cor sai das variáveis `--arqapp-*` do
 * `marca/tokens.css` (claro e escuro do aparelho), então trocar de marca não mexe aqui. Regras do manual da marca:
 * grafite e osso de base, mel de acento, raio de 4 px, borda de 1 px, sem sombra e sem gradiente; Sora 600 nos
 * títulos, Archivo no texto, IBM Plex Mono nos rótulos.
 *
 * As fontes são servidas do próprio domínio, como no painel (`resources/views/filament/marca.blade.php`), por causa
 * da Política de Cookies da Castelapi: nada de Google Fonts.
 */
@font-face { font-family: 'Sora'; src: url('/fonts/marca/sora-600-700-normal-latin.woff2') format('woff2'); font-weight: 600 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: 'Sora'; src: url('/fonts/marca/sora-600-700-normal-latin-ext.woff2') format('woff2'); font-weight: 600 700; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB; }
@font-face { font-family: 'Archivo'; src: url('/fonts/marca/archivo-400-600-normal-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; }
@font-face { font-family: 'Archivo'; src: url('/fonts/marca/archivo-400-600-normal-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/marca/ibm-plex-mono-400-normal-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--arqapp-fundo);
    color: var(--arqapp-texto);
    font: 400 1.0625rem/1.55 var(--arqapp-fonte-corpo);
    overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--arqapp-link); text-underline-offset: 3px; }

/* O foco do manual (p. 11): anel mel de 2 px por fora de uma borda da cor do texto, que dá o contraste no claro. */
a:focus-visible {
    outline: 2px solid var(--arqapp-foco);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--arqapp-texto);
    border-radius: var(--arqapp-raio);
}

h1, h2, h3 { font-family: var(--arqapp-fonte-titulo); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

.caixa { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 16px; }

/* Cabeçalho: o logotipo sem assinatura, a 42 px de altura (página da marca v1). */
.topo { background: var(--arqapp-faixa); border-bottom: 1px solid var(--arqapp-linha); }
.topo-dentro { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.topo-marca { display: block; flex: 0 0 auto; line-height: 0; }
.logo-topo { height: 42px; width: auto; }
.topo-menu { display: flex; gap: 20px; }
.topo-menu a { color: var(--arqapp-faixa-texto); text-decoration: none; font-size: 0.9375rem; padding-block: 10px; }
.topo-menu a:hover { text-decoration: underline; }

.abertura { padding-block: 56px 24px; }
.abertura h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.1; max-width: 18ch; }
.abertura-linha { margin: 16px 0 40px; max-width: 44ch; font-size: 1.1875rem; color: var(--arqapp-texto-fraco); }

/* As telas: a foto inteira, com a borda e o raio do manual. */
.tela { margin: 0; border: 1px solid var(--arqapp-linha); border-radius: var(--arqapp-raio); overflow: hidden; background: var(--arqapp-superficie); }
.tela img { width: 100%; }
.tela + .tela { margin-top: 16px; }

.passos { padding-block: 48px 24px; }
.passos > h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.passos-lista { list-style: none; margin: 0; padding: 0; }
.passo { margin-top: 56px; }
.passo:first-child { margin-top: 32px; }
.passo-texto { margin-bottom: 24px; max-width: 46rem; }
.passo-numero { display: block; margin-bottom: 8px; font-family: var(--arqapp-fonte-mono); font-size: 0.9375rem; color: var(--arqapp-destaque-texto); }
.passo h3 { font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem); line-height: 1.25; }
.passo p { margin: 8px 0 0; color: var(--arqapp-texto-fraco); max-width: 60ch; }

.mentorias { padding-block: 64px; }
.mentorias-dentro { background: var(--arqapp-superficie); border: 1px solid var(--arqapp-linha); border-radius: var(--arqapp-raio); padding: 32px; }
.mentorias h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.mentorias p { margin: 12px 0 0; max-width: 60ch; color: var(--arqapp-texto-fraco); }

.botao {
    display: inline-block;
    margin-top: 24px;
    padding: 13px 22px;
    min-height: 48px;
    background: var(--arqapp-acao);
    color: var(--arqapp-acao-texto);
    border-radius: var(--arqapp-raio);
    font-weight: 600;
    text-decoration: none;
}
.botao:hover { text-decoration: underline; }

/*
 * Rodapé: o logotipo com a assinatura "um produto castelapi", a 200 px de largura (mínimo do manual: 192 px), a nota
 * das telas inventadas, os links dos documentos e a razão social com o CNPJ (10/10/2026).
 */
.rodape { border-top: 1px solid var(--arqapp-linha); padding-block: 40px 48px; }
.rodape-dentro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.logo-rodape { width: 200px; height: auto; }
.rodape-texto { display: flex; flex-direction: column; gap: 12px; max-width: 44ch; }
.rodape p { margin: 0; font-size: 0.9375rem; color: var(--arqapp-texto-fraco); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.rodape-links a { font-size: 0.9375rem; padding-block: 6px; }
.rodape-cnpj { white-space: nowrap; }

/*
 * As páginas legais (10/10/2026): uma coluna de leitura, títulos de seção em Sora e a tabela de finalidades com a
 * borda do manual. A tabela usa a largura da coluna e quebra as palavras, para não rolar de lado no celular.
 */
.legal { padding-block: 48px 64px; }
.legal > * { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.15; }
.legal-vigencia { margin: 12px 0 0; font-family: var(--arqapp-fonte-mono); font-size: 0.9375rem; color: var(--arqapp-texto-fraco); }
.legal h2 { margin-top: 48px; font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem); line-height: 1.25; }
.legal h3 { margin-top: 28px; font-size: 1.125rem; line-height: 1.3; }
.legal p, .legal li { color: var(--arqapp-texto); }
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-left: 1.25rem; }
.legal li + li { margin-top: 8px; }
.legal table { width: 100%; margin-top: 16px; border-collapse: collapse; table-layout: fixed; font-size: 0.9375rem; }
.legal th, .legal td { padding: 10px 8px; border: 1px solid var(--arqapp-linha); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.legal th { font-weight: 600; background: var(--arqapp-superficie); }
.legal code { font-family: var(--arqapp-fonte-mono); font-size: 0.9375em; }

/*
 * No celular cada linha da tabela vira um bloco, com o nome da coluna (`data-rotulo`) em cima de cada célula: três
 * colunas em 358 px quebravam as palavras no meio e partiam o nome dos cookies.
 */
@media (max-width: 700px) {
    .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
    .legal tr { margin-top: 12px; padding: 4px 12px; border: 1px solid var(--arqapp-linha); border-radius: var(--arqapp-raio); }
    .legal td { padding: 8px 0; border: 0; }
    .legal td + td { border-top: 1px solid var(--arqapp-linha); }
    .legal td::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-family: var(--arqapp-fonte-mono); font-size: 0.8125rem; color: var(--arqapp-texto-fraco); }
}

@media (min-width: 701px) {
    .caixa { padding-inline: 32px; }
    .legal { padding-block: 72px 96px; }
    .abertura { padding-block: 80px 32px; }
    .passo { margin-top: 88px; }
    .passo:first-child { margin-top: 40px; }
}