/*
 * Landing do Apurum — CSS próprio, sem Tailwind.
 *
 * ## Por que não usa o pipeline do app.css
 *
 * `resources/css/app.css` está cheio de utilitários escritos à mão sob o
 * comentário "Basic Tailwind utilities that should be generated but aren't" —
 * as classes de valor arbitrário (`bg-[--color-ink]`) não estão sendo geradas
 * pelo JIT, e o arquivo compensa isso na unha. Construir uma página nova sobre
 * essa base significaria descobrir, uma a uma, quais classes existem de fato.
 *
 * Aqui o escopo é pequeno e fechado: uma página de marketing, sem estado, sem
 * componentes compartilhados. CSS explícito rende mais legível e não depende de
 * nada que possa não ser gerado.
 *
 * ## Identidade
 *
 * Deliberadamente distinta do site da Arcanjo Contábil, que roda na mesma
 * aplicação: lá é pergaminho, dourado e Fraunces; aqui é papel de formulário,
 * violeta de carimbo e Bricolage Grotesque. São dois produtos com públicos
 * diferentes — o cliente final da Arcanjo e o dono do escritório contábil.
 */

:root {
    /* Papel de formulário contínuo: cinza-frio com leve viés verde. */
    --papel: #e7e9e6;
    --papel-alto: #f2f3f1;
    --grafite: #191c21;
    --grafite-medio: #4c545c;
    --linha: #cdd2cd;

    /* Violeta de carimbo. Acento de assinatura — CTA e marca de aprovação. */
    --carimbo: #5b3fa8;
    --carimbo-claro: #7a5fc4;

    /* Teal de grade de formulário. Estrutural: a régua do tempo. */
    --pauta: #0d6e70;

    /* Âmbar. Só nos marcos em que o ISS encolhe e se extingue. */
    --vencimento: #a8500f;

    --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --corpo: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --dado: 'IBM Plex Mono', ui-monospace, monospace;

    --medida: 68rem;
    --margem-rotulo: 8.5rem;
}

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

body.apurum {
    margin: 0;
    background: var(--papel);
    color: var(--grafite);
    font-family: var(--corpo);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/*
 * `:not(.botao)` é o que impede o bug de contraste: sem ele este seletor
 * (0,1,1) vence a cor declarada em `.botao` (0,1,0), e todo botão sai com texto
 * grafite sobre violeta — ilegível, e invisível numa leitura casual do código.
 */
.apurum a:not(.botao) {
    color: inherit;
}

.apurum :focus-visible {
    outline: 2px solid var(--carimbo);
    outline-offset: 3px;
}

/* Salto para o conteúdo: existe para teclado e leitor de tela. */
.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--grafite);
    color: var(--papel);
    padding: 0.75rem 1.25rem;
    z-index: 50;
}

.pular:focus {
    left: 0;
}

/* ---------------------------------------------------------------- estrutura */

.faixa {
    padding: 5.5rem 1.5rem;
}

.interno {
    max-width: var(--medida);
    margin: 0 auto;
}

/*
 * A margem de rótulo é a coluna do livro razão: citação legal à esquerda,
 * conteúdo à direita. Abaixo de 60rem ela vira uma linha acima do conteúdo,
 * porque coluna dupla em tela estreita espreme os dois lados.
 */
.pauta-dupla {
    display: grid;
    grid-template-columns: var(--margem-rotulo) 1fr;
    gap: 2.5rem;
    align-items: start;
}

.rotulo {
    font-family: var(--dado);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--pauta);
    text-transform: uppercase;
}

.rotulo span {
    display: block;
    color: var(--grafite-medio);
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 60rem) {
    .pauta-dupla {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

/* --------------------------------------------------------------- tipografia */

/*
 * Resets em seletor de elemento, sem o prefixo `.apurum`.
 *
 * Não é descuido de escopo: esta folha só é carregada por
 * `layouts/apurum.blade.php`, e o `app.css` não entra nessa página. O prefixo
 * seria redundante — e caro: `.apurum p` (0,1,1) vence `.marco-fracao` (0,1,0),
 * então um reset assim silenciosamente derruba o posicionamento declarado nos
 * componentes. Aconteceu três vezes ao construir esta página.
 */
h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.4rem, 6vw, 4.25rem);
}

h2 {
    font-size: clamp(1.85rem, 3.6vw, 2.75rem);
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
    text-wrap: pretty;
}

ol {
    margin: 0;
    padding: 0;
}

.conduz {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--grafite-medio);
    max-width: 46ch;
}

.dado {
    font-family: var(--dado);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- topo */

.topo {
    border-bottom: 1px solid var(--linha);
}

.topo .interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 1.5rem;
    max-width: calc(var(--medida) + 3rem);
}

.marca {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.marca-ponto {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--carimbo);
    border-radius: 50%;
    transform: translateY(-0.1rem);
}

.topo-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    font-size: 0.9375rem;
}

/*
 * `:not(.botao)` não é preciosismo: sem ele estes seletores (0,2,0) vencem a
 * cor do `.botao` (0,1,0) e o CTA do topo sai violeta sobre violeta, ilegível.
 */
.topo-nav a:not(.botao) {
    text-decoration: none;
    color: var(--grafite-medio);
}

.topo-nav a:not(.botao):hover {
    color: var(--grafite);
}

@media (max-width: 44rem) {
    .topo-nav .oculta-estreito {
        display: none;
    }
}

/* -------------------------------------------------------------------- botão */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding: 0.75rem 1.375rem;
    border: 1px solid var(--carimbo);
    border-radius: 2px;
    background: var(--carimbo);
    color: var(--papel-alto);
    font-family: var(--corpo);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.botao:hover {
    background: var(--carimbo-claro);
    border-color: var(--carimbo-claro);
}

.botao--vazado {
    background: transparent;
    color: var(--grafite);
    border-color: var(--grafite);
}

.botao--vazado:hover {
    background: rgba(25, 28, 33, 0.06);
    border-color: var(--grafite);
}

.botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* -------------------------------------------------------------------- hero */

.hero {
    padding-top: 4.5rem;
    padding-bottom: 3rem;
}

.hero-texto {
    max-width: 52rem;
}

.hero .rotulo-eyebrow {
    font-family: var(--dado);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pauta);
    margin-bottom: 1.5rem;
}

.hero h1 em {
    font-style: normal;
    color: var(--carimbo);
}

.hero .conduz {
    margin-top: 1.75rem;
    max-width: 44ch;
}

.hero .botoes {
    margin-top: 2.25rem;
}

/* ------------------------------------------------------- régua de vigência */

/*
 * A assinatura da página. Não é ornamento: cada marco é uma data real com a
 * norma que a produz, e a fração do ISS encolhe até desaparecer em 2033. É o
 * que o motor de apuração faz — mostrar isso convence mais que prometer.
 *
 * Em tela estreita o eixo gira para a vertical. Seis marcos numa régua
 * horizontal de 375px seriam ilegíveis.
 */
.regua {
    margin-top: 4.5rem;
    border-top: 1px solid var(--linha);
    padding-top: 2.25rem;
}

.regua-titulo {
    font-family: var(--dado);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grafite-medio);
    margin-bottom: 2rem;
}

/*
 * `<ol>` porque a ordem é real — mas sem os marcadores: o número da lista
 * repetiria o que a data já diz, e marcador que não carrega informação é
 * ornamento.
 */
.regua-eixo {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A linha do tempo propriamente dita. */
.regua-eixo::before {
    content: '';
    position: absolute;
    top: 0.4375rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--pauta);
    opacity: 0.35;
}

/*
 * Coluna flexível com a fração empurrada para o fim: os textos acima têm
 * alturas diferentes, e sem isso as barras ficam em linhas distintas. Aí a
 * descida do ISS deixa de ser legível — que é a única razão de a régua existir.
 */
.marco {
    position: relative;
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.marco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid var(--pauta);
    border-radius: 50%;
    background: var(--papel);
}

.marco--agora::before {
    background: var(--carimbo);
    border-color: var(--carimbo);
    box-shadow: 0 0 0 4px rgba(91, 63, 168, 0.16);
}

.marco--fim::before {
    background: var(--vencimento);
    border-color: var(--vencimento);
}

.marco-ano {
    font-family: var(--dado);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.marco--agora .marco-ano {
    color: var(--carimbo);
}

.marco--fim .marco-ano {
    color: var(--vencimento);
}

.marco-fato {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--grafite-medio);
    margin-top: 0.375rem;
}

.marco-norma {
    font-family: var(--dado);
    font-size: 0.6875rem;
    color: var(--pauta);
    margin-top: 0.5rem;
    letter-spacing: 0.01em;
}

/*
 * A fração do ISS encolhendo — o argumento da régua.
 *
 * A barra sozinha lia como sublinho de tamanho aleatório. A trilha visível dá
 * a referência do que é "cheio", e o rótulo em mono diz a fração exata: sem
 * ele, "80%" é uma impressão, não um dado.
 */
.marco-fracao {
    /* Empurra para a base da coluna: alinha todas as barras na mesma linha. */
    margin-top: auto;
    padding-top: 0.875rem;
}

/*
 * A barra ocupa a coluna inteira. Ao lado do rótulo ela media 85px, e comparar
 * 85px com 74px não comunica queda nenhuma — larguras plenas, sim.
 */
.marco-trilha {
    display: block;
    width: 100%;
    height: 0.375rem;
    background: rgba(25, 28, 33, 0.1);
    border: 1px solid rgba(13, 110, 112, 0.25);
    overflow: hidden;
}

.marco-trilha i {
    display: block;
    height: 100%;
    background: var(--pauta);
}

.marco--fim .marco-trilha {
    border-color: rgba(168, 80, 15, 0.4);
}

.marco-quanto {
    display: block;
    margin-top: 0.4375rem;
    font-family: var(--dado);
    font-size: 0.6875rem;
    color: var(--grafite-medio);
    white-space: nowrap;
}

.marco--fim .marco-quanto {
    color: var(--vencimento);
}

@media (max-width: 60rem) {
    .regua-eixo {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-left: 1.5rem;
    }

    .regua-eixo::before {
        top: 0.4375rem;
        bottom: 0.4375rem;
        left: 0.4375rem;
        right: auto;
        width: 1px;
        height: auto;
    }

    .marco {
        padding-top: 0;
        padding-left: 1.5rem;
    }

    .marco::before {
        top: 0.1875rem;
        left: -1.5rem;
    }
}

/* ----------------------------------------------------------------- seções */

.secao + .secao {
    border-top: 1px solid var(--linha);
}

.secao h2 {
    margin-bottom: 1.25rem;
}

.secao .conduz {
    max-width: 54ch;
}

.secao-escura {
    background: var(--grafite);
    color: var(--papel);
}

.secao-escura h2 {
    color: var(--papel-alto);
}

.secao-escura .conduz {
    color: rgba(231, 233, 230, 0.72);
}

.secao-escura .rotulo {
    color: #6fbcbd;
}

.secao-escura .rotulo span {
    color: rgba(231, 233, 230, 0.55);
}

/* ------------------------------------------------------- erro de um dígito */

/*
 * Mostra o erro em vez de descrevê-lo. O caso é real: uma nota de R$ 1,00
 * digitada como R$ 1.000.000,00.
 */
.comparacao {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.75rem;
    background: rgba(231, 233, 230, 0.06);
    border: 1px solid rgba(231, 233, 230, 0.14);
    border-radius: 2px;
}

.comparacao-valor {
    font-family: var(--dado);
    font-size: clamp(1.15rem, 3vw, 1.9rem);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.comparacao-rotulo {
    font-family: var(--dado);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* 0.72 e não 0.55: texto pequeno em maiúsculas precisa de contraste real. */
    color: rgba(231, 233, 230, 0.72);
    margin-bottom: 0.5rem;
}

.comparacao-seta {
    color: rgba(231, 233, 230, 0.4);
    font-family: var(--dado);
}

.comparacao-errado .comparacao-valor {
    color: #e08a4a;
}

@media (max-width: 44rem) {
    .comparacao {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .comparacao-seta {
        transform: rotate(90deg);
        width: 1rem;
    }
}

/* O selo de revisão. Único lugar, fora do CTA, onde o violeta aparece cheio. */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.5rem 0.875rem;
    border: 1px dashed var(--carimbo-claro);
    border-radius: 2px;
    font-family: var(--dado);
    font-size: 0.8125rem;
    color: #c3b2ec;
}

/* ------------------------------------------------------------------ grade */

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 2.5rem 3rem;
    margin-top: 3rem;
}

.item h3 {
    margin-bottom: 0.625rem;
}

.item p {
    color: var(--grafite-medio);
    font-size: 0.9688rem;
}

.item-norma {
    font-family: var(--dado);
    font-size: 0.6875rem;
    color: var(--pauta);
    margin-top: 0.75rem;
    letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------- CTA */

.chamada {
    border-top: 1px solid var(--linha);
}

.chamada .interno {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
}

.chamada h2 {
    max-width: 22ch;
}

.chamada p {
    color: var(--grafite-medio);
    margin-top: 0.875rem;
    max-width: 46ch;
}

@media (max-width: 52rem) {
    .chamada .interno {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ------------------------------------------------------------------ rodapé */

.rodape {
    border-top: 1px solid var(--linha);
    padding: 2.5rem 1.5rem;
    font-size: 0.875rem;
    color: var(--grafite-medio);
}

.rodape .interno {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.rodape a {
    text-decoration: none;
}

.rodape a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- movimento */

@media (prefers-reduced-motion: reduce) {
    .apurum *,
    .apurum *::before,
    .apurum *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}