/*
 * Nanqim — sistema de design.
 *
 * Interface escura por decisão de produto, não por moda: o conteúdo central
 * são fotos de tatuagem, e fundo claro estoura o contraste de pele e preto
 * chapado. Editor de imagem sério é escuro pelo mesmo motivo.
 *
 * Paleta: preto de tinta, papel envelhecido e um vermelho de flash. É a
 * paleta clássica do ofício, e serve de acento sem virar enfeite.
 *
 * Sem build (ADR-0003): CSS escrito à mão, servido direto de public/. A
 * organização abaixo é a documentação — token, base, estrutura, componente.
 * Classe nova entra na seção do componente dela, nunca no fim do arquivo.
 */

/* ═══ Fontes ═════════════════════════════════════════════════════════════
   Geist e Geist Mono, variáveis, hospedadas aqui. Fonte do sistema muda a
   cara do produto conforme o aparelho — e um produto que se parece consigo
   mesmo em todo lugar passa a impressão de coisa cuidada. São 69 KB no
   total, com `swap` para nunca esconder texto enquanto carrega.
   SIL Open Font License 1.1 — ver public/fontes/LEIA-ME.txt. */

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fontes/geist-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fontes/geist-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fontes/geist-mono-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ Tokens ═════════════════════════════════════════════════════════════ */

:root {
    /* Tinta — superfícies, da página para cima.
       Cada degrau é uma camada: página, painel, item, controle. */
    --tinta-0: #0a0908;
    --tinta-1: #121110;
    --tinta-2: #1a1817;
    --tinta-3: #232120;
    --linha: #2a2725;
    --linha-forte: #3b3734;

    /* Papel — texto, do principal ao apagado.
       `papel-3` foi clareado até passar 4.5:1 sobre `tinta-1`: cinza bonito
       que ninguém enxerga não é discrição, é defeito. */
    --papel: #f4f1ea;
    --papel-2: #b3aca3;
    --papel-3: #8b837a;

    /* Flash — o acento da marca.
       `acento` é para traço, ponto e texto sobre fundo escuro.
       `acento-solido` é para botão preenchido: mais fechado, porque é ele
       que precisa segurar 4.5:1 com o branco por cima. */
    --acento: #e2452f;
    --acento-solido: #d43c23;
    --acento-claro: #f26a55;
    --acento-fraco: rgba(226, 69, 47, 0.12);
    --acento-linha: rgba(226, 69, 47, 0.34);

    /* Compatibilidade com o nome antigo do acento. */
    --vermelho: var(--acento);
    --vermelho-claro: var(--acento-claro);
    --vermelho-fraco: var(--acento-fraco);
    --vermelho-linha: var(--acento-linha);

    /* Semânticos */
    --verde: #52a878;
    --ambar: #d99a2b;
    --azul: #7aa2c8;

    /* Raio */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* Sombra — no escuro, sombra é profundidade sutil, não contorno. */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 10px 30px -12px rgba(0, 0, 0, 0.8);

    /* Estrutura */
    --rail: 244px;
    --tabbar: 64px;
    --conteudo-max: 1140px;

    /* Movimento */
    --rapido: 120ms;
    --normal: 200ms;
    --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Tipografia */
    --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
        Consolas, monospace;

    color-scheme: dark;
    accent-color: var(--acento);
}

/* ═══ Reset e base ═══════════════════════════════════════════════════════ */

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

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--linha-forte) transparent;
}

body {
    margin: 0;
    background: var(--tinta-0);
    color: var(--papel);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: -0.022em;
    font-weight: 640;
    line-height: 1.2;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

img,
svg {
    vertical-align: middle;
}

::selection {
    background: var(--acento-linha);
    color: var(--papel);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--linha-forte);
    border: 3px solid var(--tinta-0);
    border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--papel-3);
}

/* Foco visível em tudo que recebe teclado, num lugar só. Componente que
   redefine foco por conta própria acaba esquecendo algum estado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--acento-claro);
    outline-offset: 2px;
}

/* Primeira parada do Tab: quem navega por teclado não precisa varrer o
   trilho inteiro toda vez que troca de página. Invisível até receber foco. */
.pular {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 11px 17px;
    border-radius: var(--r-sm);
    background: var(--acento-solido);
    color: #fff;
    font-weight: 570;
    transform: translateY(-250%);
    transition: transform var(--rapido) var(--curva);
}

.pular:focus {
    transform: none;
}

/* Números de dinheiro, data e hora alinham em coluna. */
.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ═══ Estrutura ══════════════════════════════════════════════════════════ */

.app {
    min-height: 100dvh;
}

.rail {
    display: none;
}

.conteudo {
    padding: 0 16px calc(var(--tabbar) + 32px);
}

@media (min-width: 900px) {
    .app {
        display: grid;
        grid-template-columns: var(--rail) minmax(0, 1fr);
        /* A faixa do trilho é pintada pelo container, não pelo trilho.
           O trilho é `sticky` e tem a altura da janela; numa página longa
           o fundo dele acabava no meio do caminho e aparecia um degrau. */
        background: linear-gradient(
            to right,
            var(--tinta-1) 0 calc(var(--rail) - 1px),
            var(--linha) calc(var(--rail) - 1px) var(--rail),
            transparent var(--rail)
        );
    }

    .rail {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: sticky;
        top: 0;
        height: 100dvh;
        padding: 20px 14px 16px;
        border-right: 1px solid var(--linha);
        background: var(--tinta-1);
    }

    .conteudo {
        padding: 0 36px 72px;
        max-width: var(--conteudo-max);
    }
}

/* ═══ Marca ══════════════════════════════════════════════════════════════ */

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 16px;
    font-size: 1.12rem;
    font-weight: 660;
    letter-spacing: -0.035em;
}

.marca-selo {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--acento-solido);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    box-shadow: var(--sombra-1);
}

/* ═══ Navegação ══════════════════════════════════════════════════════════ */

.rail-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    color: var(--papel-2);
    font-size: 0.92rem;
    font-weight: 520;
    transition: background var(--rapido) var(--curva),
        color var(--rapido) var(--curva);
}

.rail-item:hover {
    background: var(--tinta-2);
    color: var(--papel);
}

.rail-item[aria-current="page"] {
    background: var(--acento-fraco);
    color: var(--papel);
    box-shadow: inset 2px 0 0 var(--acento);
}

.rail-item svg {
    width: 18px;
    height: 18px;
    flex: none;
    opacity: 0.85;
}

.rail-item[aria-current="page"] svg {
    opacity: 1;
    color: var(--acento-claro);
}

/* Rótulo de grupo no trilho: separa o que se usa no atendimento do que se
   configura uma vez. */
.rail-grupo {
    margin: 16px 0 4px;
    padding: 0 11px;
    font-size: 0.68rem;
    font-weight: 620;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.rail-rodape {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--linha);
}

.rail-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-width: 0;
}

.rail-usuario div {
    min-width: 0;
}

.rail-usuario strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-busca {
    margin: 0 0 10px;
    padding: 0 2px;
}

.rail-busca input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-0);
    color: var(--papel);
    font: inherit;
    font-size: 0.88rem;
    transition: border-color var(--rapido) var(--curva);
}

.rail-busca input::placeholder {
    color: var(--papel-3);
}

.rail-busca input:focus {
    outline: none;
    border-color: var(--acento);
}

/* Barra inferior: é assim que aplicativo de celular se comporta, e a spec
   pede que o tatuador resolva tudo com o polegar durante o atendimento. */
.tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: var(--tabbar);
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(18, 17, 16, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--linha);
}

@media (min-width: 900px) {
    .tabbar {
        display: none;
    }
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--papel-3);
    font-size: 0.66rem;
    letter-spacing: 0.01em;
    transition: color var(--rapido) var(--curva);
}

.tab svg {
    width: 21px;
    height: 21px;
}

.tab[aria-current="page"] {
    color: var(--acento-claro);
}

.tab-destaque span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--acento-solido);
    color: #fff;
    box-shadow: 0 4px 14px -4px rgba(226, 69, 47, 0.6);
}

.tab-destaque svg {
    width: 20px;
    height: 20px;
}

/* ═══ Cabeçalho de página ════════════════════════════════════════════════ */

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0 14px;
    background: linear-gradient(var(--tinta-0) 70%, transparent);
}

.topo h1 {
    font-size: 1.5rem;
    flex: 1;
    min-width: 0;
}

.topo-sub {
    display: block;
    margin-top: 3px;
    font-size: 0.84rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--papel-2);
}

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 -8px;
    padding: 4px 8px 4px 0;
    font-size: 0.85rem;
    color: var(--papel-2);
    border-radius: var(--r-sm);
    transition: color var(--rapido) var(--curva);
}

.voltar:hover {
    color: var(--papel);
}

/* ═══ Superfícies ════════════════════════════════════════════════════════ */

.painel {
    background: var(--tinta-1);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    padding: 20px;
    margin-bottom: 16px;
}

.painel-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.72rem;
    font-weight: 640;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.painel-titulo a {
    color: var(--papel-2);
    transition: color var(--rapido) var(--curva);
}

.painel-titulo a:hover {
    color: var(--acento-claro);
}

/* Números do topo: sem caixa, separados por filete. */
.numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.numeros li {
    flex: 1 1 132px;
    padding: 2px 18px;
    border-left: 1px solid var(--linha);
}

.numeros li:first-child {
    padding-left: 0;
    border-left: 0;
}

/* No celular vira grade de duas colunas: em linha, o item que sobra para a
   segunda fileira ficava com o recuo do filete e desalinhava com o de cima. */
@media (max-width: 619px) {
    .numeros {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 12px;
    }

    .numeros li {
        flex: none;
        padding: 0;
        border-left: 0;
    }
}

.numeros dt {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.numeros dd {
    margin: 4px 0 0;
    font-size: 1.34rem;
    font-weight: 620;
    letter-spacing: -0.025em;
}

.numeros dd a {
    color: inherit;
    border-bottom: 1px solid var(--linha-forte);
}

.numeros dd a:hover {
    border-bottom-color: var(--acento);
}

/* ═══ Lista ══════════════════════════════════════════════════════════════ */

.lista {
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--tinta-1);
}

.linha {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-top: 1px solid var(--linha);
    transition: background var(--rapido) var(--curva);
}

.linha:first-child {
    border-top: 0;
}

.linha:hover {
    background: var(--tinta-2);
}

.linha:hover .seta {
    color: var(--papel-2);
    transform: translateX(2px);
}

.linha-corpo {
    flex: 1;
    min-width: 0;
}

.linha-nome {
    display: block;
    font-weight: 570;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linha-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    font-size: 0.81rem;
    color: var(--papel-2);
}

.linha-fim {
    flex: none;
    text-align: right;
    font-size: 0.81rem;
    color: var(--papel-2);
}

.seta {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--papel-3);
    transition: transform var(--rapido) var(--curva),
        color var(--rapido) var(--curva);
}

/* ═══ Avatar ═════════════════════════════════════════════════════════════ */

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tinta-3);
    border: 1px solid var(--linha-forte);
    font-size: 0.8rem;
    font-weight: 640;
    letter-spacing: 0.01em;
    color: var(--papel-2);
}

.avatar-g {
    width: 62px;
    height: 62px;
    font-size: 1.22rem;
}

/* ═══ Etiquetas e situação ═══════════════════════════════════════════════ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--linha-forte);
    background: var(--tinta-2);
    font-size: 0.76rem;
    font-weight: 520;
    color: var(--papel-2);
    white-space: nowrap;
    transition: border-color var(--rapido) var(--curva),
        background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

a.chip:hover {
    border-color: var(--linha-forte);
    background: var(--tinta-3);
    color: var(--papel);
}

.chip-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.chip-ativo,
a.chip-ativo:hover {
    border-color: var(--acento-linha);
    background: var(--acento-fraco);
    color: var(--papel);
}

.chip-alerta {
    border-color: rgba(217, 154, 43, 0.4);
    background: rgba(217, 154, 43, 0.12);
    color: var(--ambar);
}

/* Situação: ponto colorido + texto, sem caixa berrante em cada linha. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.79rem;
    font-weight: 540;
    color: var(--papel-2);
    white-space: nowrap;
}

.status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

/* ═══ Botões ═════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-3);
    color: var(--papel);
    font: inherit;
    font-size: 0.89rem;
    font-weight: 570;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--rapido) var(--curva),
        border-color var(--rapido) var(--curva),
        transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
}

.btn:hover {
    background: var(--linha);
    border-color: var(--papel-3);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.btn-principal {
    background: var(--acento-solido);
    border-color: var(--acento-solido);
    color: #fff;
    box-shadow: var(--sombra-1);
}

.btn-principal:hover {
    background: var(--acento-claro);
    border-color: var(--acento-claro);
}

.btn-contorno {
    background: transparent;
    border-color: var(--linha-forte);
    color: var(--papel-2);
}

.btn-contorno:hover {
    background: var(--tinta-2);
    border-color: var(--papel-3);
    color: var(--papel);
}

.btn-perigo {
    background: transparent;
    border-color: rgba(226, 69, 47, 0.35);
    color: var(--acento-claro);
}

.btn-perigo:hover {
    background: var(--acento-fraco);
    border-color: var(--acento);
}

.btn-zap {
    background: #1f7a4d;
    border-color: #1f7a4d;
    color: #fff;
}

.btn-zap:hover {
    background: #24925c;
    border-color: #24925c;
}

.btn-bloco {
    width: 100%;
}

.btn-mini {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 0.79rem;
}

.btn-mini svg {
    width: 14px;
    height: 14px;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ═══ Formulário ═════════════════════════════════════════════════════════ */

.campo {
    margin-bottom: 16px;
}

.campo label,
.rotulo {
    display: block;
    margin-bottom: 7px;
    font-size: 0.81rem;
    font-weight: 570;
    color: var(--papel-2);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-0);
    color: var(--papel);
    font: inherit;
    font-size: 0.94rem;
    transition: border-color var(--rapido) var(--curva),
        box-shadow var(--rapido) var(--curva);
}

.campo select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--papel-3) 50%),
        linear-gradient(135deg, var(--papel-3) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.campo textarea {
    min-height: 104px;
    resize: vertical;
    line-height: 1.6;
}

/* Data e dinheiro tem largura conhecida. Um campo de data com 700 px faz o
   olho procurar conteudo que nao existe. */
.campo input[type="date"],
.campo input[type="number"] {
    max-width: 280px;
}

.lancar .campo input {
    max-width: none;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
    border-color: var(--papel-3);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
    border-color: var(--acento);
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--papel-3);
}

.campo-erro {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    font-size: 0.81rem;
    color: var(--acento-claro);
}

.campo-dica {
    margin: 7px 0 0;
    font-size: 0.8rem;
    color: var(--papel-3);
}

.dupla {
    display: grid;
    gap: 0 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 620px) {
    .dupla {
        grid-template-columns: 1fr 1fr;
    }
}

/* Caixa de seleção de etiquetas: rótulo vira pastilha clicável. */
.escolha-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.escolha-tags input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.escolha-tags label {
    margin: 0;
    cursor: pointer;
}

.escolha-tags input:checked + span {
    border-color: var(--acento-linha);
    background: var(--acento-fraco);
    color: var(--papel);
}

.escolha-tags input:focus-visible + span {
    outline: 2px solid var(--acento-claro);
    outline-offset: 2px;
}

/* Linha com caixa de marcar: alvo grande, porque isto se usa de luva. */
.escolha-linha {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 2px;
    font-size: 0.93rem;
    font-weight: 400;
    color: var(--papel);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background var(--rapido) var(--curva);
}

.escolha-linha:hover {
    background: var(--tinta-2);
}

.escolha-linha input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--acento);
    cursor: pointer;
}

.escolha-linha span strong {
    display: block;
    font-weight: 580;
}

.escolha-linha input:checked + span {
    color: var(--papel-2);
}

/* ═══ Busca e filtros ════════════════════════════════════════════════════ */

.busca {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.busca-campo {
    position: relative;
    flex: 1;
}

.busca-campo svg {
    position: absolute;
    left: 13px;
    top: 50%;
    translate: 0 -50%;
    width: 17px;
    height: 17px;
    color: var(--papel-3);
    pointer-events: none;
}

.busca-campo input {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px 11px 39px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-1);
    color: var(--papel);
    font: inherit;
    font-size: 0.93rem;
    transition: border-color var(--rapido) var(--curva),
        box-shadow var(--rapido) var(--curva);
}

.busca-campo input::placeholder {
    color: var(--papel-3);
}

.busca-campo input:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

.filtros {
    display: flex;
    gap: 7px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.filtros::-webkit-scrollbar {
    display: none;
}

/* Divisa entre dois grupos de filtro na mesma faixa — sem ela, "Dia" e
   "Todos" parecem do mesmo conjunto e os dois acesos confundem. */
.filtros-divisa {
    flex: none;
    width: 1px;
    margin: 4px 4px;
    background: var(--linha-forte);
}

/* ═══ Linha do tempo ═════════════════════════════════════════════════════ */

.tempo {
    position: relative;
    margin: 0;
    padding: 2px 0 0 24px;
    list-style: none;
}

.tempo::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    bottom: 12px;
    width: 1px;
    background: var(--linha);
}

.tempo li {
    position: relative;
    padding-bottom: 18px;
}

.tempo li::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tinta-3);
    border: 1px solid var(--linha-forte);
}

.tempo li:first-child::before {
    background: var(--acento);
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

.tempo-quando {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--papel-3);
}

.tempo-que {
    font-weight: 540;
}

a.tempo-que:hover {
    color: var(--acento-claro);
}

.tempo-detalhe {
    margin: 2px 0 0;
    font-size: 0.86rem;
    color: var(--papel-2);
}

/* ═══ Avisos ═════════════════════════════════════════════════════════════ */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    margin-bottom: 16px;
    border: 1px solid var(--linha-forte);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    background: var(--tinta-1);
    font-size: 0.89rem;
}

.aviso svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

.aviso-ok {
    border-left-color: var(--verde);
    color: var(--papel);
}

.aviso-ok svg {
    color: var(--verde);
}

.aviso-atencao {
    border-left-color: var(--ambar);
}

.aviso-atencao svg {
    color: var(--ambar);
}

.aviso-erro {
    border-left-color: var(--acento);
}

.aviso-erro svg {
    color: var(--acento-claro);
}

.aviso-info {
    border-left-color: var(--azul);
}

.aviso-info svg {
    color: var(--azul);
}

/* ═══ Estado vazio ═══════════════════════════════════════════════════════ */

.vazio {
    padding: 52px 24px;
    text-align: center;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--r-md);
    background: linear-gradient(var(--tinta-1), transparent);
}

.vazio-marca {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 16px;
    border-radius: 15px;
    background: var(--tinta-2);
    border: 1px solid var(--linha);
    color: var(--papel-3);
}

.vazio-marca svg {
    width: 22px;
    height: 22px;
}

.vazio h2 {
    font-size: 1.06rem;
    margin-bottom: 6px;
}

.vazio p {
    margin: 0 auto 20px;
    max-width: 42ch;
    font-size: 0.9rem;
    color: var(--papel-2);
}

/* ═══ Miscelânea ═════════════════════════════════════════════════════════ */

.discreto {
    color: var(--papel-2);
}

.ponto-sep::before {
    content: "·";
    margin: 0 2px 0 0;
}

.pilha > * + * {
    margin-top: 14px;
}

.entre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nota {
    white-space: pre-wrap;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--papel);
    text-wrap: pretty;
}

/* Rótulo que só aparece quando há largura: no celular o ícone basta, no
   desktop ícone sozinho vira adivinhação. Para leitor de tela o texto está
   sempre lá, nos dois tamanhos. */
.so-larga {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 620px) {
    .so-larga {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ═══ Cartões e galeria ══════════════════════════════════════════════════ */

.cartoes {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}

.cartao {
    display: block;
    background: var(--tinta-1);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--normal) var(--curva),
        transform var(--normal) var(--curva),
        box-shadow var(--normal) var(--curva);
}

.cartao:hover {
    border-color: var(--linha-forte);
    transform: translateY(-2px);
    box-shadow: var(--sombra-2);
}

.cartao-capa {
    aspect-ratio: 4 / 3;
    background: var(--tinta-2);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cartao-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--normal) var(--curva);
}

.cartao:hover .cartao-capa img {
    transform: scale(1.03);
}

.cartao-capa svg {
    width: 26px;
    height: 26px;
    color: var(--papel-3);
    opacity: 0.5;
}

.cartao-corpo {
    padding: 13px 14px 15px;
}

.cartao-titulo {
    display: block;
    font-weight: 580;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartao-meta {
    margin-top: 3px;
    font-size: 0.81rem;
    color: var(--papel-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartao-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 11px;
}

.galeria {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

@media (min-width: 620px) {
    .galeria {
        grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    }
}

.foto {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--tinta-2);
    border: 1px solid var(--linha);
}

.foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--normal) var(--curva),
        transform var(--normal) var(--curva);
}

.foto:hover img {
    opacity: 0.85;
    transform: scale(1.04);
}

/* O botão de apagar só aparece no hover no desktop; no toque fica sempre
   visível, porque hover não existe lá. */
.foto-apagar {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: rgba(10, 9, 8, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--papel);
    cursor: pointer;
    opacity: 1;
    transition: opacity var(--rapido) var(--curva),
        background var(--rapido) var(--curva);
}

.foto-apagar svg {
    width: 14px;
    height: 14px;
}

.foto-apagar:hover {
    background: var(--acento-solido);
}

@media (hover: hover) {
    .foto-apagar {
        opacity: 0;
    }

    .foto:hover .foto-apagar,
    .foto-apagar:focus-visible {
        opacity: 1;
    }
}

/* Antes e depois lado a lado (§21). */
.antes-depois {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.antes-depois figure {
    margin: 0;
}

.antes-depois figcaption {
    margin-bottom: 7px;
    font-size: 0.7rem;
    font-weight: 620;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.antes-depois img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--linha);
    display: block;
}

/* ═══ Envio de imagem ════════════════════════════════════════════════════ */

.envio {
    display: block;
    padding: 22px;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--r-md);
    text-align: center;
    cursor: pointer;
    color: var(--papel-2);
    font-size: 0.88rem;
    transition: border-color var(--normal) var(--curva),
        background var(--normal) var(--curva), color var(--normal) var(--curva);
}

.envio:hover {
    border-color: var(--acento-linha);
    background: var(--acento-fraco);
    color: var(--papel);
}

.envio:focus-within {
    outline: 2px solid var(--acento-claro);
    outline-offset: 2px;
}

.envio input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.envio svg {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 8px;
}

/* ═══ Barra de progresso ═════════════════════════════════════════════════ */

.barra {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--tinta-3);
    overflow: hidden;
    margin: 10px 0 6px;
}

.barra span {
    display: block;
    height: 100%;
    background: var(--acento);
    border-radius: var(--r-pill);
    transition: width var(--normal) var(--curva);
}

.barra-cheia span {
    background: var(--ambar);
}

.barra-quitada span {
    background: var(--verde);
}

/* ═══ Briefing ═══════════════════════════════════════════════════════════ */

.briefing {
    margin: 0;
}

.briefing dt {
    font-size: 0.83rem;
    font-weight: 570;
    color: var(--papel-2);
}

.briefing dd {
    margin: 3px 0 16px;
    white-space: pre-wrap;
}

.briefing dd:last-child {
    margin-bottom: 0;
}

/* ═══ Agenda ═════════════════════════════════════════════════════════════ */

.periodo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.periodo-titulo {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    /* Sem `capitalize`: ele maiusculiza toda palavra e "agosto de 2026"
       vira "Agosto De 2026". A primeira letra sobe no PHP. */
}

.seta-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-1);
    color: var(--papel-2);
    cursor: pointer;
    transition: background var(--rapido) var(--curva),
        color var(--rapido) var(--curva);
}

.seta-btn:hover {
    background: var(--tinta-2);
    color: var(--papel);
}

.seta-btn svg {
    width: 16px;
    height: 16px;
}

/* Dia da agenda: hora à esquerda, atendimento à direita. */
.dia-titulo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 20px 0 8px;
    font-size: 0.74rem;
    font-weight: 640;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.dia-titulo.hoje {
    color: var(--acento);
}

.sessao {
    display: flex;
    gap: 14px;
    padding: 13px 16px;
    border-top: 1px solid var(--linha);
    transition: background var(--rapido) var(--curva);
}

.sessao:first-child {
    border-top: 0;
}

.sessao:hover {
    background: var(--tinta-2);
}

.sessao-hora {
    flex: none;
    width: 48px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.sessao-hora small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--papel-3);
}

.sessao-corpo {
    flex: 1;
    min-width: 0;
}

.sessao-cliente {
    display: block;
    font-weight: 570;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sessao-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 9px;
    margin-top: 2px;
    font-size: 0.81rem;
    color: var(--papel-2);
}

/* Mês: a grade existe porque ocupação do mês se lê de relance, não em lista. */
.mes-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.mes-cabecalho {
    text-align: center;
    padding: 6px 0;
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.mes-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 62px;
    padding: 7px 2px;
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
    background: var(--tinta-1);
    font-size: 0.83rem;
    font-variant-numeric: tabular-nums;
    color: var(--papel-2);
    transition: border-color var(--rapido) var(--curva),
        color var(--rapido) var(--curva);
}

.mes-dia:hover {
    border-color: var(--linha-forte);
    color: var(--papel);
}

.mes-dia.fora {
    opacity: 0.3;
}

.mes-dia.hoje {
    border-color: var(--acento-linha);
    background: var(--acento-fraco);
    color: var(--papel);
}

.mes-pontos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

.mes-ponto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acento);
}

/* ═══ Dinheiro ═══════════════════════════════════════════════════════════ */

/* Número do orçamento na lista: marca de documento, não de interface. */
.numero-doc {
    flex: none;
    width: 46px;
    font-family: var(--mono);
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--papel-3);
}

/* Orçamento parado há mais de uma semana esfria — a §27 é sobre isso. */
.esfriando {
    color: var(--ambar);
}

.link-caixa {
    display: flex;
    gap: 8px;
}

.link-caixa input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-0);
    color: var(--papel-2);
    font-family: var(--mono);
    font-size: 0.78rem;
}

.link-caixa input:focus {
    outline: none;
    border-color: var(--acento);
    color: var(--papel);
}

.lancamentos {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.lancamentos li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}

.lancamentos li:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Estornado continua à vista, mas em voz baixa e riscado: é registro que
   não conta mais, e esconder deixaria o total sem explicação. */
.lancamentos li.estornado .lancamento-valor {
    text-decoration: line-through;
    color: var(--papel-3);
}

.lancamento-corpo {
    flex: 1;
    min-width: 0;
}

.lancamento-valor {
    display: block;
    font-weight: 600;
    font-size: 1.04rem;
    font-variant-numeric: tabular-nums;
}

.lancamento-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px;
    margin-top: 3px;
    font-size: 0.79rem;
    color: var(--papel-2);
}

.lancamento-nota {
    display: block;
    margin-top: 4px;
    font-size: 0.81rem;
    color: var(--papel-3);
}

.lancamento-acoes {
    display: flex;
    flex: none;
    gap: 6px;
}

/* Formulário de lançamento: uma linha no desktop, empilhado no celular. */
.lancar {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding-top: 18px;
    border-top: 1px dashed var(--linha-forte);
}

.lancar .campo {
    margin: 0;
}

.lancar > button {
    grid-column: 1 / -1;
}

@media (min-width: 780px) {
    .lancar {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
    }

    .lancar > button {
        grid-column: auto;
    }
}

/* ═══ Painel ═════════════════════════════════════════════════════════════ */

/* Atalhos (§47): a linha de ações que abre o dia. Rola no celular em vez
   de quebrar em duas fileiras desalinhadas. */
.atalhos {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.atalhos::-webkit-scrollbar {
    display: none;
}

.atalho {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 7px 15px 7px 7px;
    border: 1px solid var(--linha);
    border-radius: var(--r-pill);
    background: var(--tinta-1);
    font-size: 0.87rem;
    font-weight: 550;
    white-space: nowrap;
    transition: border-color var(--rapido) var(--curva),
        background var(--rapido) var(--curva);
}

.atalho:hover {
    border-color: var(--acento-linha);
    background: var(--acento-fraco);
}

.atalho-selo {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tinta-3);
    color: var(--papel-2);
    transition: color var(--rapido) var(--curva);
}

.atalho-selo svg {
    width: 14px;
    height: 14px;
}

.atalho:hover .atalho-selo {
    color: var(--acento-claro);
}

/* Próximo atendimento: o cartão que o tatuador procura de manhã. */
.proximo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--linha-forte);
    border-left: 3px solid var(--acento);
    border-radius: var(--r-md);
    background: var(--tinta-2);
    transition: background var(--rapido) var(--curva);
}

.proximo:hover {
    background: var(--tinta-3);
}

.proximo-hora {
    flex: none;
    font-size: 1.26rem;
    font-weight: 640;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.proximo-hora small {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--papel-3);
}

.proximo-corpo {
    flex: 1;
    min-width: 0;
}

.proximo-corpo strong {
    display: block;
    font-weight: 580;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proximo-corpo .discreto {
    display: block;
    font-size: 0.83rem;
}

.busca-painel {
    margin-bottom: 14px;
}

/* ═══ Checklists e termos ════════════════════════════════════════════════ */

.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.checklist li:first-child {
    border-top: 0;
}

.checklist-progresso {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--papel-2);
}

.itens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.itens li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--linha);
}

.itens li:first-child {
    border-top: 0;
}

.itens li.desligado .itens-texto {
    color: var(--papel-3);
    text-decoration: line-through;
}

.itens-texto {
    flex: 1;
    min-width: 0;
}

.itens-acoes {
    display: flex;
    flex: none;
    gap: 6px;
}

.termo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}

.termo-linha:first-child {
    border-top: 0;
}

.termo-corpo {
    flex: 1;
    min-width: 0;
}

.termo-nome {
    display: block;
    font-weight: 560;
}

.termo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 9px;
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--papel-2);
}

.termo-meta a {
    border-bottom: 1px solid var(--linha-forte);
}

.termo-meta a:hover {
    color: var(--acento-claro);
    border-bottom-color: var(--acento);
}

.termo-acao {
    flex: none;
}

/* Assinatura do texto: monoespaçada, quebrável, discreta. */
.impressao-digital {
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--papel-3);
    overflow-wrap: anywhere;
}

/* ═══ Documento do cliente (§25) ═════════════════════════════════════════ */

/* Esta é a única tela que gente de fora vê. Ela não pode parecer um painel:
   é um documento, com respiro de documento, e a decisão no fim da leitura. */
.doc-fundo {
    background: radial-gradient(130% 62% at 50% 0%, #191210 0%, transparent 66%),
        var(--tinta-0);
    min-height: 100dvh;
}

.doc {
    max-width: 560px;
    margin: 0 auto;
    padding: 34px 22px 64px;
}

.doc-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--linha);
}

.doc-estudio {
    font-size: 1.04rem;
    font-weight: 660;
    letter-spacing: -0.028em;
}

.doc-numero {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.doc-saudacao {
    margin: 34px 0 8px;
    font-size: 0.93rem;
    color: var(--papel-2);
}

.doc-titulo {
    margin: 0;
    font-size: 1.78rem;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.doc-descricao {
    margin: 16px 0 0;
    white-space: pre-wrap;
    color: var(--papel-2);
    text-wrap: pretty;
}

.doc-rotulo {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--papel-3);
}

/* O valor é o que a pessoa abriu para ver. Ele domina a página. */
.doc-valor {
    margin: 34px 0 0;
    padding: 22px 24px;
    border: 1px solid var(--linha-forte);
    border-left: 3px solid var(--acento);
    border-radius: var(--r-md);
    background: var(--tinta-1);
    box-shadow: var(--sombra-2);
}

.doc-valor strong {
    display: block;
    margin-top: 5px;
    font-size: 2.4rem;
    font-weight: 680;
    letter-spacing: -0.042em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.doc-parcelas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.doc-parcelas > div {
    /* Coluna com o valor no rodapé: o rótulo de um cartão quebra em duas
       linhas e o do outro não, e sem isto os dois valores saem em alturas
       diferentes. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 17px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--tinta-1);
}

.doc-parcelas strong {
    display: block;
    margin-top: 4px;
    font-size: 1.18rem;
    font-weight: 620;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.doc-bloco {
    margin-top: 32px;
}

.doc-bloco h2 {
    font-size: 0.72rem;
    font-weight: 640;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--papel-3);
}

.doc-bloco p {
    margin: 11px 0 0;
    white-space: pre-wrap;
    color: var(--papel-2);
    font-size: 0.94rem;
    line-height: 1.65;
}

.doc-validade {
    margin: 28px 0 0;
    font-size: 0.91rem;
    color: var(--papel-2);
}

.doc-acoes {
    margin-top: 36px;
}

.doc-btn {
    display: block;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-size: 1rem;
    font-weight: 620;
    cursor: pointer;
    transition: background var(--rapido) var(--curva),
        border-color var(--rapido) var(--curva),
        transform var(--rapido) var(--curva);
}

.doc-btn:active {
    transform: translateY(1px);
}

.doc-btn-sim {
    background: var(--acento-solido);
    color: #fff;
    box-shadow: 0 8px 24px -10px rgba(226, 69, 47, 0.8);
}

.doc-btn-sim:hover {
    background: var(--acento-claro);
}

.doc-btn-nao {
    margin-top: 12px;
    background: transparent;
    border-color: var(--linha-forte);
    color: var(--papel-2);
}

.doc-btn-nao:hover {
    background: var(--tinta-2);
    color: var(--papel);
}

/* Recusar é decisão legítima, mas não disputa espaço com aprovar. */
.doc-recusa {
    margin-top: 18px;
}

.doc-recusa summary {
    cursor: pointer;
    text-align: center;
    font-size: 0.89rem;
    color: var(--papel-3);
    list-style: none;
    padding: 6px;
    border-radius: var(--r-sm);
    transition: color var(--rapido) var(--curva);
}

.doc-recusa summary::-webkit-details-marker {
    display: none;
}

.doc-recusa summary:hover {
    color: var(--papel-2);
}

.doc-recusa label {
    display: block;
    margin: 18px 0 7px;
    font-size: 0.83rem;
    color: var(--papel-2);
}

.doc-recusa label span {
    color: var(--papel-3);
}

.doc-recusa input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-sm);
    background: var(--tinta-0);
    color: var(--papel);
    font: inherit;
    font-size: 0.95rem;
}

.doc-recusa input:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-fraco);
}

.doc-desfecho {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 36px;
    padding: 19px 21px;
    border: 1px solid var(--linha-forte);
    border-left-width: 3px;
    border-radius: var(--r-md);
    background: var(--tinta-1);
    font-size: 0.93rem;
    color: var(--papel-2);
}

.doc-desfecho strong {
    color: var(--papel);
    font-size: 1.02rem;
}

.doc-ok {
    border-left-color: var(--verde);
}

.doc-rodape {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
}

.doc-contato {
    margin: 0 0 10px;
    font-size: 0.89rem;
    color: var(--papel-2);
}

.doc-contato a {
    color: var(--acento-claro);
}

.doc-contato a:hover {
    text-decoration: underline;
}

.doc-selo {
    margin: 0;
    font-size: 0.77rem;
    color: var(--papel-3);
}

/* ═══ Autenticação ═══════════════════════════════════════════════════════ */

/* Duas colunas no desktop: a marca de um lado, a tarefa do outro. É a
   primeira tela que alguém vê do produto — ela precisa parecer o produto,
   e não um formulário genérico com o nome trocado. */
.auth {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 940px) {
    .auth {
        grid-template-columns: 1.05fr 1fr;
    }
}

.auth-vitrine {
    display: none;
    position: relative;
    /* Marca no alto, argumento no meio, assinatura embaixo. Com
       `space-between` puro os três blocos se afastam até a coluna parecer
       vazia numa tela grande. */
    grid-template-rows: auto 1fr auto;
    padding: 44px;
    background: radial-gradient(120% 80% at 15% 0%, #1c1310 0%, transparent 62%),
        var(--tinta-1);
    border-right: 1px solid var(--linha);
    overflow: hidden;
}

@media (min-width: 940px) {
    .auth-vitrine {
        display: grid;
    }
}

.auth-vitrine-corpo {
    align-self: center;
    padding: 36px 0;
}

.auth-nota {
    margin: 0;
    font-size: 0.82rem;
    color: var(--papel-3);
}

/* Traço de agulha ao fundo: textura em gradiente, sem imagem para baixar. */
.auth-vitrine::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 120%;
    background: repeating-linear-gradient(
        115deg,
        transparent 0 22px,
        rgba(226, 69, 47, 0.05) 22px 23px
    );
    pointer-events: none;
}

.auth-vitrine > * {
    position: relative;
    z-index: 1;
}

.auth-frase {
    max-width: 22ch;
    font-size: 2.1rem;
    font-weight: 660;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.auth-frase span {
    color: var(--acento-claro);
}

.auth-apoio {
    margin: 18px 0 0;
    max-width: 40ch;
    color: var(--papel-2);
    font-size: 0.97rem;
}

.auth-pontos {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.auth-pontos li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.91rem;
    color: var(--papel-2);
}

.auth-pontos svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--acento-claro);
}

.auth-palco {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 20px 48px;
}

.auth-caixa {
    width: 100%;
    max-width: 396px;
    margin: 0 auto;
}

.auth-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
    font-size: 1.14rem;
    font-weight: 660;
    letter-spacing: -0.035em;
}

/* No desktop a vitrine já mostra a marca; repetir do lado do formulário
   é ruído. No celular a vitrine não existe, então ela precisa estar aqui. */
@media (min-width: 940px) {
    .auth-marca-movel {
        display: none;
    }
}

.auth-titulo {
    font-size: 1.62rem;
    letter-spacing: -0.03em;
}

.auth-sub {
    margin: 8px 0 26px;
    color: var(--papel-2);
    font-size: 0.94rem;
}

.auth-rodape {
    margin: 24px 0 0;
    font-size: 0.9rem;
    color: var(--papel-2);
    text-align: center;
}

.auth-rodape a {
    color: var(--acento-claro);
    font-weight: 540;
}

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

/* Linha do "esqueci a senha", alinhada com o rótulo do campo. */
.auth-linha-rotulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-linha-rotulo a {
    font-size: 0.8rem;
    color: var(--papel-3);
}

.auth-linha-rotulo a:hover {
    color: var(--acento-claro);
}

.auth-lembrar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.89rem;
    color: var(--papel-2);
    cursor: pointer;
}

.auth-lembrar input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--acento);
    cursor: pointer;
}

/* ═══ Planos e cobrança ══════════════════════════════════════════════════ */

.planos {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}

@media (min-width: 760px) {
    .planos {
        grid-template-columns: 1fr 1fr;
    }
}

.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    background: var(--tinta-1);
}

.plano-destaque {
    border-color: var(--acento-linha);
    background: linear-gradient(var(--acento-fraco), transparent 40%),
        var(--tinta-1);
    box-shadow: var(--sombra-2);
}

.plano-atual {
    border-color: var(--verde);
}

.plano-selo {
    position: absolute;
    top: -11px;
    left: 24px;
    padding: 3px 11px;
    border-radius: var(--r-pill);
    background: var(--acento-solido);
    color: #fff;
    font-size: 0.71rem;
    font-weight: 620;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.plano-selo-atual {
    background: var(--verde);
}

.plano-nome {
    font-size: 1.16rem;
    letter-spacing: -0.02em;
}

.plano-para {
    margin: 5px 0 18px;
    font-size: 0.88rem;
    color: var(--papel-2);
}

.plano-preco {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 20px;
}

.plano-preco strong {
    font-size: 2.15rem;
    font-weight: 680;
    letter-spacing: -0.042em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.plano-preco span {
    font-size: 0.88rem;
    color: var(--papel-3);
}

.plano-lista {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
    flex: 1;
}

.plano-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--papel-2);
}

.plano-lista svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--verde);
}

.plano-lista strong {
    color: var(--papel);
    font-weight: 570;
}

/* Formas de pagamento aceitas: o tatuador precisa ver Pix antes de decidir. */
.metodos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.metodo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
    background: var(--tinta-2);
    font-size: 0.83rem;
    color: var(--papel-2);
}

.metodo svg {
    width: 15px;
    height: 15px;
    color: var(--papel-3);
}

.metodo-ativo {
    border-color: var(--acento-linha);
    color: var(--papel);
}

.metodo-ativo svg {
    color: var(--acento-claro);
}

/* Explicação de cada forma: prazo e pegadinha, sem letra miúda. */
.metodo-detalhe {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--linha);
}

.metodo-detalhe:first-child {
    border-top: 0;
    padding-top: 0;
}

.metodo-selo {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--tinta-3);
    color: var(--papel-2);
}

.metodo-selo svg {
    width: 17px;
    height: 17px;
}

.metodo-corpo strong {
    display: block;
    font-weight: 570;
}

.metodo-corpo p {
    margin: 3px 0 0;
    font-size: 0.85rem;
    color: var(--papel-2);
}

/* ═══ Impressão ══════════════════════════════════════════════════════════ */

/* O cliente imprime o orçamento e o termo. Papel é branco. */
@media print {
    body {
        background: #fff;
        color: #111;
    }

    .rail,
    .tabbar,
    .voltar,
    .doc-acoes,
    .doc-recusa,
    .acoes,
    .foto-apagar {
        display: none !important;
    }

    .doc-fundo,
    .doc-valor,
    .doc-parcelas > div,
    .painel,
    .lista {
        background: #fff !important;
        color: #111 !important;
        border-color: #ddd !important;
        box-shadow: none !important;
    }

    .doc,
    .conteudo {
        max-width: none;
        padding: 0;
    }

    .discreto,
    .doc-rotulo,
    .doc-selo,
    .painel-titulo {
        color: #555 !important;
    }
}

/* ═══ Movimento reduzido ═════════════════════════════════════════════════ */

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

/* ═══ Capa pública ═══════════════════════════════════════════════════════

   A única página do produto escrita para quem ainda não é cliente. Ela tem
   um trabalho: fazer um tatuador entender, em cinco segundos, que isto foi
   feito para o trabalho dele — e depois provar, com a tela do produto e não
   com adjetivo.

   Tudo aqui usa o prefixo `lp-` e não toca em nenhuma classe da aplicação.
   Duas folhas de estilo seria duas verdades sobre a marca; um prefixo
   resolve o mesmo problema sem dividir o sistema.

   Nada de imagem de banco, contador falso ou depoimento inventado: as
   capturas são do produto rodando, e os números vêm da configuração de
   planos. */

.lp {
    /* Mais largo que o produto (1140) de propósito: aqui dentro mora uma
       captura de 1360 px, e cada pixel a menos de moldura é um pixel a
       menos de texto legível na prova visual. */
    --lp-max: 1240px;
    --lp-lado: clamp(20px, 5vw, 44px);
    --lp-secao: clamp(68px, 9vw, 120px);
    --lp-barra-h: 62px;

    background: var(--tinta-0);
}

.lp-largura {
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding-inline: var(--lp-lado);
}

.lp-secao {
    padding-block: var(--lp-secao);
    position: relative;
}

/* Filete entre seções: separa sem desenhar caixa. A alternativa seria
   alternar a cor de fundo, e o produto inteiro é de um preto só. */
.lp-secao + .lp-secao {
    border-top: 1px solid var(--linha);
}

/* ── Barra do topo ─────────────────────────────────────────────────────
   Fica grudada porque a página é longa e o botão de assinar não pode
   depender de o visitante lembrar de voltar ao topo. */

.lp-barra {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--lp-barra-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--linha);
    background: color-mix(in srgb, var(--tinta-0) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.lp-barra-corpo {
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding-inline: var(--lp-lado);
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 640;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    color: var(--papel);
    text-decoration: none;
    margin-right: auto;
}

.lp-marca .marca-selo {
    width: 26px;
    height: 26px;
    font-size: 0.82rem;
}

/* Âncoras da página. Somem no celular: seis links de 13px espremidos em
   360 px viram um alvo impossível, e o rodapé já repete todos. */
.lp-nav {
    display: none;
    gap: 4px;
}

.lp-nav a {
    padding: 7px 11px;
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    color: var(--papel-2);
    text-decoration: none;
    transition: color var(--rapido) var(--curva),
        background var(--rapido) var(--curva);
}

.lp-nav a:hover {
    color: var(--papel);
    background: var(--tinta-2);
}

.lp-barra-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    padding-left: 14px;
    border-left: 1px solid var(--linha);
}

@media (max-width: 939px) {
    .lp-barra-acoes {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

.lp-entrar {
    display: none;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--papel-2);
    text-decoration: none;
    border-radius: var(--r-sm);
}

.lp-entrar:hover {
    color: var(--papel);
}

@media (min-width: 560px) {
    .lp-entrar {
        display: inline-flex;
    }
}

@media (min-width: 940px) {
    .lp-nav {
        display: flex;
    }
}

/* ── Botões da capa ────────────────────────────────────────────────────
   Os da aplicação são desenhados para densidade; aqui o alvo é o polegar
   de quem está decidindo. Mesma paleta, outra escala. */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--papel);
    font: inherit;
    font-size: 0.97rem;
    font-weight: 560;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--rapido) var(--curva),
        background var(--rapido) var(--curva),
        border-color var(--rapido) var(--curva);
}

.lp-btn:hover {
    background: var(--tinta-2);
    border-color: var(--papel-3);
}

.lp-btn:active {
    transform: translateY(1px);
}

.lp-btn-cheio {
    background: var(--acento-solido);
    border-color: var(--acento-solido);
    color: #fff;
    font-weight: 620;
    box-shadow: 0 10px 26px -14px var(--acento);
}

.lp-btn-cheio:hover {
    background: var(--acento);
    border-color: var(--acento);
}

.lp-btn-pequeno {
    min-height: 38px;
    padding: 0 15px;
    font-size: 0.9rem;
}

.lp-btn-largo {
    width: 100%;
}

/* ── Rótulo de seção ───────────────────────────────────────────────────
   Número em monoespaçada, como marcação de prancha de flash. É o detalhe
   que dá ritmo à leitura e diz onde a pessoa está numa página longa. */

.lp-etiqueta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acento);
}

.lp-etiqueta::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--acento-linha);
}

.lp-titulo {
    margin: 0 0 16px;
    font-size: clamp(1.75rem, 4vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.038em;
    font-weight: 680;
    max-width: 18em;
}

.lp-titulo em {
    font-style: normal;
    color: var(--acento);
}

.lp-linha-fina {
    margin: 0;
    max-width: 46em;
    font-size: 1.04rem;
    line-height: 1.62;
    color: var(--papel-2);
}

.lp-cabeca {
    margin-bottom: clamp(34px, 5vw, 54px);
}

/* ── Hero ──────────────────────────────────────────────────────────────
   Duas colunas a partir de 1060 px: o texto vende, a tela prova. Abaixo
   disso vira uma coluna e a tela desce — no celular, quem lê primeiro é o
   texto, e a imagem tem largura demais para competir. */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(46px, 7vw, 84px);
    padding-bottom: clamp(56px, 8vw, 96px);
}

/* Traço de agulha ao fundo: linhas finas em gradiente, sem imagem para
   baixar. A mesma textura das telas de entrada, para a capa e o produto
   parecerem a mesma casa. */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 130%;
    pointer-events: none;
    background:
        radial-gradient(60% 46% at 50% 0%, var(--acento-fraco), transparent 70%),
        repeating-linear-gradient(
            118deg,
            transparent 0 22px,
            rgba(244, 241, 234, 0.028) 22px 23px
        );
    mask-image: radial-gradient(72% 58% at 50% 22%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(72% 58% at 50% 22%, #000 30%, transparent 100%);
}

.lp-hero .lp-largura {
    position: relative;
}

.lp-hero-texto {
    max-width: 46rem;
    margin-bottom: clamp(38px, 5vw, 58px);
}

.lp-selo {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 13px 6px 9px;
    margin-bottom: 22px;
    border: 1px solid var(--acento-linha);
    border-radius: var(--r-pill);
    background: var(--acento-fraco);
    font-size: 0.82rem;
    color: var(--papel);
}

/* Alinhado ao alto, e não ao centro: no celular o selo quebra em duas
   linhas e um ícone centralizado fica boiando entre elas. */
.lp-selo svg {
    width: 15px;
    height: 15px;
    margin-top: 3px;
    flex: none;
    color: var(--acento-claro);
}

.lp-hero h1 {
    margin: 0 0 20px;
    max-width: 15em;
    font-size: clamp(2.35rem, 5.6vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -0.048em;
    font-weight: 700;
    text-wrap: balance;
}

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

.lp-hero-sub {
    margin: 0 0 30px;
    max-width: 34em;
    font-size: clamp(1.03rem, 1.5vw, 1.14rem);
    line-height: 1.6;
    color: var(--papel-2);
}

.lp-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Chamada que fecha uma seção longa, separada do último bloco. */
.lp-acoes-fim {
    margin-top: clamp(30px, 4vw, 44px);
}

/* Reforços logo abaixo do botão: é onde bate a dúvida "vai me cobrar?". */
.lp-reforcos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--papel-3);
}

.lp-reforcos li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lp-reforcos svg {
    width: 15px;
    height: 15px;
    color: var(--verde);
    flex: none;
}

/* ── Molduras do produto ───────────────────────────────────────────────
   A captura entra dentro de uma janela e de um aparelho porque tela solta
   flutuando no meio do texto lê como banner. A moldura diz "isto é um
   programa", que é exatamente o que precisa ser dito. */

.lp-palco {
    position: relative;
}

.lp-janela {
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-lg);
    background: var(--tinta-1);
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(244, 241, 234, 0.03);
}

.lp-janela-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--linha);
    background: var(--tinta-2);
}

/* Sem os três círculos coloridos de sempre: um traço e o endereço real
   dizem a mesma coisa e não copiam a barra de ninguém. */
.lp-janela-barra span {
    width: 34px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--linha-forte);
    flex: none;
}

.lp-janela-barra code {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--papel-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-janela picture,
.lp-janela img {
    display: block;
    width: 100%;
    height: auto;
}

/* Em tela estreita a moldura vira aparelho: o `<picture>` já trocou a
   captura de desktop pela de celular, e captura de celular dentro de uma
   janela de navegador leria como erro de montagem.

   O corte é 1024 px, e não um valor de celular: numa faixa de 700 px a
   captura de 1360 px cai para 51% e o texto dela deixa de ser texto. Se a
   prova visual não se lê, ela não prova. */
@media (max-width: 1024px) {
    .lp-janela {
        max-width: 320px;
        margin-inline: auto;
        border-radius: 30px;
        padding: 8px;
        background: var(--tinta-2);
    }

    .lp-janela-barra {
        display: none;
    }

    .lp-janela img {
        border-radius: 23px;
    }
}

/* Aparelho: a tela pública do orçamento nasceu para o celular e é assim
   que o cliente do estúdio a vê. */
.lp-aparelho {
    border: 1px solid var(--linha-forte);
    border-radius: 30px;
    padding: 8px;
    background: var(--tinta-2);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(244, 241, 234, 0.04);
}

.lp-aparelho img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 23px;
}

/* No hero o aparelho encosta na janela, mostrando os dois lados do mesmo
   orçamento: o painel que o estúdio usa e o documento que o cliente abre.
   Some abaixo de 1025 px — dali para baixo a moldura já é um aparelho, e
   um aparelho encostado no outro não diz nada. */
.lp-palco-duplo .lp-aparelho {
    display: none;
}

@media (min-width: 1025px) {
    .lp-palco-duplo {
        padding-bottom: 40px;
        padding-right: 40px;
    }

    .lp-palco-duplo .lp-aparelho {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 18%;
        min-width: 168px;
        max-width: 222px;
    }
}

.lp-legenda {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: var(--papel-3);
}

/* ── O problema ────────────────────────────────────────────────────────
   Lista do que o tatuador faz hoje. Cada item é um lugar diferente onde a
   informação do mesmo cliente está guardada. */

.lp-dor {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

@media (min-width: 640px) {
    .lp-dor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .lp-dor {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lp-dor li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 18px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--tinta-1);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--papel-2);
}

.lp-dor li strong {
    color: var(--papel);
    font-weight: 590;
}

.lp-dor-marca {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--tinta-3);
    color: var(--papel-3);
    font-family: var(--mono);
    font-size: 0.72rem;
}

.lp-remate {
    margin: 0;
    padding: 20px 22px;
    border-left: 2px solid var(--acento);
    background: var(--tinta-1);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--papel);
}

/* O mesmo bloco quando fecha uma seção em vez de abrir. */
.lp-remate-solto {
    margin-top: 22px;
    font-size: 0.96rem;
    color: var(--papel-2);
}

.lp-remate-solto strong {
    color: var(--papel);
}

/* ── O ciclo ───────────────────────────────────────────────────────────
   Uma linha só, com nós. Cartão por etapa daria nove caixas iguais e a
   página perderia a ideia principal: isto é um caminho, não um menu. */

.lp-ciclo {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: etapa;
}

.lp-ciclo li {
    position: relative;
    padding: 0 0 26px 34px;
    counter-increment: etapa;
}

.lp-ciclo li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: -4px;
    width: 1px;
    background: linear-gradient(var(--linha-forte), var(--linha));
}

.lp-ciclo li:last-child {
    padding-bottom: 0;
}

.lp-ciclo li:last-child::before {
    display: none;
}

.lp-ciclo li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tinta-0);
    border: 1px solid var(--acento-linha);
}

.lp-ciclo li:first-child::after,
.lp-ciclo li:last-child::after {
    background: var(--acento);
    border-color: var(--acento);
}

.lp-ciclo b {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 3px;
}

.lp-ciclo span {
    font-size: 0.92rem;
    color: var(--papel-2);
    line-height: 1.5;
}

/* A partir do tablet a linha deita: nove etapas em coluna viram rolagem
   demais, e o ciclo se lê melhor da esquerda para a direita. */
@media (min-width: 800px) {
    .lp-ciclo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 26px;
        row-gap: 30px;
    }

    .lp-ciclo li {
        padding: 22px 0 0;
    }

    .lp-ciclo li::before {
        left: 22px;
        right: 0;
        top: 4px;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, var(--linha-forte), var(--linha));
    }

    .lp-ciclo li::after {
        left: 0;
        top: 0;
    }

    /* Fim de linha da grade: o filete some em degradê em vez de bater na
       borda e parecer que a etapa continua fora da tela. */
    .lp-ciclo li:nth-child(3n)::before,
    .lp-ciclo li:last-child::before {
        display: block;
        background: linear-gradient(90deg, var(--linha-forte), transparent);
    }
}

/* ── Recursos ──────────────────────────────────────────────────────────*/

.lp-cartoes {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 620px) {
    .lp-cartoes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .lp-cartoes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lp-cartao {
    padding: 22px 20px 24px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--tinta-1);
    transition: border-color var(--normal) var(--curva),
        transform var(--normal) var(--curva);
}

.lp-cartao:hover {
    border-color: var(--linha-forte);
    transform: translateY(-2px);
}

.lp-cartao-selo {
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--acento-fraco);
    border: 1px solid var(--acento-linha);
}

.lp-cartao-selo svg {
    width: 17px;
    height: 17px;
    color: var(--acento-claro);
}

.lp-cartao h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.lp-cartao p {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.55;
    color: var(--papel-2);
}

/* O ganho concreto, separado da descrição: é ele que fecha a venda, e
   junto no mesmo parágrafo ninguém lê. */
.lp-cartao p + p {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--linha);
    color: var(--papel);
    font-size: 0.88rem;
}

/* ── Blocos de tela ────────────────────────────────────────────────────
   Texto de um lado, produto do outro, alternando o lado a cada bloco. */

.lp-mostra {
    display: grid;
    gap: clamp(28px, 4vw, 46px);
    align-items: center;
    padding-block: clamp(34px, 5vw, 54px);
}

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

@media (min-width: 940px) {
    .lp-mostra {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 54px;
    }
}

/* Bloco largo: texto em cima, captura embaixo ocupando a faixa inteira.
   Ao lado do texto, uma captura de 1360 px cai para 450 px e vira borrão —
   e prova visual ilegível é decoração cara. */
.lp-mostra-larga {
    display: block;
}

.lp-mostra-texto {
    display: grid;
    gap: 18px 48px;
    margin-bottom: clamp(26px, 3.4vw, 38px);
}

@media (min-width: 940px) {
    .lp-mostra-texto {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.lp-mostra-texto > div > p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--papel-2);
}

.lp-mostra-texto .lp-itens {
    margin-top: 0;
}

.lp-mostra h3 {
    margin: 0 0 14px;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    font-weight: 660;
}

.lp-mostra > div > p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--papel-2);
}

.lp-itens {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.lp-itens li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--papel-2);
}

.lp-itens svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--acento);
}

/* Aparelho isolado no bloco do orçamento: ali ele é o assunto, não um
   detalhe encostado na janela. */
.lp-palco-aparelho {
    display: flex;
    justify-content: center;
}

.lp-palco-aparelho .lp-aparelho {
    width: min(300px, 74vw);
}

/* ── Antes e depois ────────────────────────────────────────────────────*/

.lp-antes-depois {
    display: grid;
    gap: 16px;
    align-items: stretch;
}

@media (min-width: 820px) {
    .lp-antes-depois {
        grid-template-columns: 1fr auto 1fr;
        gap: 22px;
    }
}

.lp-coluna {
    padding: 24px 22px;
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    background: var(--tinta-1);
}

.lp-coluna h3 {
    margin: 0 0 16px;
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--papel-3);
    font-weight: 500;
}

.lp-coluna ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.lp-coluna li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--papel-2);
}

.lp-coluna li svg {
    flex: none;
    width: 15px;
    height: 15px;
}

.lp-antes li {
    color: var(--papel-3);
}

.lp-antes li span {
    text-decoration: line-through;
    text-decoration-color: var(--linha-forte);
    text-decoration-thickness: 1px;
}

.lp-antes li svg {
    color: var(--papel-3);
}

.lp-depois {
    border-color: var(--acento-linha);
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--acento) 7%, var(--tinta-1)),
        var(--tinta-1) 62%
    );
}

.lp-depois h3 {
    color: var(--acento);
}

.lp-depois li {
    color: var(--papel);
}

.lp-depois li svg {
    color: var(--verde);
}

.lp-seta {
    display: grid;
    place-items: center;
    color: var(--papel-3);
}

.lp-seta svg {
    width: 22px;
    height: 22px;
    transform: rotate(90deg);
}

@media (min-width: 820px) {
    .lp-seta svg {
        transform: none;
    }
}

/* ── Segurança ─────────────────────────────────────────────────────────*/

.lp-garantias {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .lp-garantias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lp-garantias li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--tinta-1);
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--papel-2);
}

.lp-garantias strong {
    display: block;
    color: var(--papel);
    font-weight: 590;
    margin-bottom: 2px;
}

.lp-garantias svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--verde);
}

/* ── Planos ────────────────────────────────────────────────────────────
   Reaproveita a ideia da tela de cobrança, em escala de vitrine. Preço
   visível: esconder valor atrás de "fale conosco" só faz sentido para
   quem vende para empresa grande, e este produto vende para uma pessoa. */

.lp-planos {
    display: grid;
    gap: 16px;
    align-items: start;
}

@media (min-width: 820px) {
    .lp-planos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

.lp-plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    background: var(--tinta-1);
}

.lp-plano-destaque {
    border-color: var(--acento-linha);
    background: linear-gradient(
        168deg,
        color-mix(in srgb, var(--acento) 8%, var(--tinta-1)),
        var(--tinta-1) 58%
    );
    box-shadow: 0 30px 70px -46px var(--acento);
}

.lp-plano-selo {
    position: absolute;
    top: -11px;
    left: 26px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--acento-solido);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 620;
    letter-spacing: 0.02em;
}

.lp-plano h3 {
    margin: 0 0 4px;
    font-size: 1.24rem;
    font-weight: 660;
    letter-spacing: -0.02em;
}

.lp-plano-para {
    margin: 0 0 20px;
    font-size: 0.92rem;
    color: var(--papel-2);
}

.lp-plano-preco {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--linha);
}

.lp-plano-preco strong {
    font-size: 2.5rem;
    font-weight: 680;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.lp-plano-preco span {
    font-size: 0.9rem;
    color: var(--papel-3);
}

.lp-plano ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
    flex: 1;
}

.lp-plano li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.94rem;
    line-height: 1.45;
    color: var(--papel-2);
}

.lp-plano li svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--verde);
}

/* O que os dois planos têm, dito uma vez só em vez de repetido nos dois
   cartões: repetição faz a lista inchar e some com a diferença real. */
.lp-planos-comuns {
    margin: 22px 0 0;
    padding: 20px 22px;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--r-md);
}

.lp-planos-comuns h3 {
    margin: 0 0 14px;
    font-size: 0.94rem;
    font-weight: 600;
}

.lp-planos-comuns ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 760px) {
    .lp-planos-comuns ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 26px;
    }
}

.lp-planos-comuns li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.91rem;
    line-height: 1.5;
    color: var(--papel-2);
}

.lp-planos-comuns svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    color: var(--acento);
}

/* Formas de pagamento: sai da mesma configuração que o Checkout usa. Se a
   conta do Stripe ainda não tem Pix, a página não promete Pix. */
.lp-formas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.87rem;
    color: var(--papel-3);
}

.lp-formas li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lp-formas svg {
    width: 16px;
    height: 16px;
    color: var(--papel-2);
}

/* ── Perguntas ─────────────────────────────────────────────────────────
   `details` nativo: acordeão sem uma linha de JavaScript, com teclado e
   leitor de tela funcionando de graça. */

.lp-perguntas {
    display: grid;
    gap: 10px;
    max-width: 54em;
}

.lp-pergunta {
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--tinta-1);
    overflow: hidden;
}

.lp-pergunta[open] {
    border-color: var(--linha-forte);
}

.lp-pergunta summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    cursor: pointer;
    font-size: 0.99rem;
    font-weight: 560;
    list-style: none;
    transition: background var(--rapido) var(--curva);
}

.lp-pergunta summary::-webkit-details-marker {
    display: none;
}

.lp-pergunta summary:hover {
    background: var(--tinta-2);
}

.lp-pergunta summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 1.6px solid var(--papel-3);
    border-bottom: 1.6px solid var(--papel-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--normal) var(--curva);
}

.lp-pergunta[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.lp-pergunta div {
    padding: 0 20px 19px;
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--papel-2);
    max-width: 46em;
}

.lp-pergunta div p {
    margin: 0;
}

.lp-pergunta div p + p {
    margin-top: 10px;
}

/* ── Fechamento ────────────────────────────────────────────────────────*/

.lp-fechamento {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: clamp(72px, 10vw, 128px);
}

.lp-fechamento::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(52% 66% at 50% 100%, var(--acento-fraco), transparent 72%),
        repeating-linear-gradient(
            118deg,
            transparent 0 22px,
            rgba(244, 241, 234, 0.026) 22px 23px
        );
    mask-image: radial-gradient(70% 90% at 50% 100%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000 20%, transparent 100%);
}

.lp-fechamento > * {
    position: relative;
}

.lp-fechamento h2 {
    margin: 0 auto 16px;
    max-width: 15em;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.042em;
    font-weight: 700;
    text-wrap: balance;
}

.lp-fechamento h2 em {
    font-style: normal;
    color: var(--acento);
}

.lp-fechamento p {
    margin: 0 auto 30px;
    max-width: 40em;
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--papel-2);
}

.lp-fechamento .lp-acoes {
    justify-content: center;
}

.lp-fechamento .lp-reforcos {
    justify-content: center;
}

/* ── Rodapé ────────────────────────────────────────────────────────────*/

.lp-rodape {
    border-top: 1px solid var(--linha);
    padding-block: 46px 34px;
}

.lp-rodape-grade {
    display: grid;
    gap: 32px;
}

@media (min-width: 760px) {
    .lp-rodape-grade {
        grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
        gap: 46px;
    }
}

.lp-rodape-sobre p {
    margin: 14px 0 0;
    max-width: 30em;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--papel-3);
}

.lp-rodape h2 {
    margin: 0 0 14px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--papel-3);
    font-weight: 500;
}

.lp-rodape ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.lp-rodape a {
    font-size: 0.92rem;
    color: var(--papel-2);
    text-decoration: none;
}

.lp-rodape a:hover {
    color: var(--papel);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lp-rodape-fim {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--linha);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
    font-size: 0.83rem;
    color: var(--papel-3);
}

/* ── Movimento ─────────────────────────────────────────────────────────
   Aparição suave presa à rolagem, sem JavaScript e sem biblioteca. Vem
   dentro de um `@supports` de propósito: em navegador que não conhece
   `animation-timeline`, a regra inteira é ignorada e o conteúdo nasce
   visível — o contrário disso é uma página em branco. */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lp-anima {
            animation: lp-surgir linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 26%;
        }

        @keyframes lp-surgir {
            from {
                opacity: 0;
                transform: translateY(16px);
            }
            to {
                opacity: 1;
                transform: none;
            }
        }
    }
}