/*
 * Caprichado — sistema de design.
 *
 * Interface CLARA por decisão do dono: o produto substitui o talão de OS
 * de papel, e papel é claro. A metáfora guia a paleta — papel quente de
 * bloco de nota, grafite de caneta, e um azul-petroleo de uniforme tecnico como acento.
 * A serrilha de talão destacável é o elemento que só existe aqui: ela
 * aparece onde um documento "se destaca" do sistema (moldura de entrada,
 * documento da OS, estados vazios).
 *
 * 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 ═════════════════════════════════════════════════════════════
   Inter variável, hospedada 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. 133 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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fontes/inter-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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fontes/inter-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;
}

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

:root {
    /* Papel — superfícies, da página para cima.
       A página é o balcão; o cartão é a folha do talão sobre ele. No tema
       claro quem separa as camadas é a SOMBRA, não a aresta de luz — cartão
       mais claro que o fundo + sombra curta é o que faz a folha "assentar". */
    --papel-0: #f4f2ed;
    --papel-1: #fdfcfa;
    --papel-2: #eeebe4;
    --papel-3: #e5e1d8;
    --linha: #e0dbd1;
    --linha-forte: #c7c0b2;

    /* Grafite — texto, do principal ao apagado.
       `grafite-2` passa de 7:1 sobre `papel-1`; texto pequeno nunca usa
       menos que ele. `grafite-3` é para número grande e decoração. */
    --grafite: #29241f;
    --grafite-2: #5d564c;
    --grafite-3: #8a8271;

    /* Azul-petróleo — a cor de agir, e o uniforme da marca. Uma cor só,
       dosada: botão principal, link, foco. Acento que aparece em todo canto
       deixa de apontar para onde olhar.

       ⚠ Regra do cluster (2026-08-21): cada SaaS tem a SUA cor primária —
       o laranja da primeira versão vivia no mesmo quente do vermelho do
       produto 1 e os dois pareciam irmãos. O token chama `marca`, não o
       nome da cor, para a próxima troca não deixar o nome mentindo. */
    --marca: #0e7490;
    --marca-vivo: #0a5a70;
    --marca-suave: #ddedf3;

    /* Semáforo de status — o vocabulário de OS: verde é aprovado/pago,
       âmbar é aguardando, vermelho é atrasado/erro. Cada um com o fundo
       suave para badge. */
    --verde: #22713f;
    --verde-suave: #e3f1e7;
    --ambar: #8f6407;
    --ambar-suave: #f7eed3;
    --vermelho: #b13a20;
    --vermelho-suave: #f9e6e0;

    --sombra: 0 1px 2px rgba(41, 36, 31, 0.05), 0 4px 14px rgba(41, 36, 31, 0.06);
    --sombra-alta: 0 2px 4px rgba(41, 36, 31, 0.07), 0 12px 32px rgba(41, 36, 31, 0.1);

    --raio: 10px;
    --raio-g: 14px;

    --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, Arial, sans-serif;

    --transicao: 150ms ease;
}

/* ═══ Base ═══════════════════════════════════════════════════════════════ */

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

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

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--grafite);
    background: var(--papel-0);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0 0 0.5rem;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.015em;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.125rem;
}

h3 {
    font-size: 1rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--marca);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 4px;
}

svg {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* Números que se alinham em coluna: valor, quantidade, número de OS. */
.num {
    font-variant-numeric: tabular-nums;
}

/* Armadilha para robo: some de verdade, inclusive para leitor de tela
   (o container leva `aria-hidden`). Diferente de `.sr`, que ESCONDE dos
   olhos e mantem para quem ouve. */
.fora-de-vista {
    display: none;
}

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

.pular {
    position: absolute;
    left: -100vw;
    top: 0;
    z-index: 50;
    padding: 0.6rem 1rem;
    background: var(--grafite);
    color: var(--papel-1);
    border-radius: 0 0 var(--raio) 0;
}

.pular:focus-visible {
    left: 0;
}

/* ═══ Serrilha ═══════════════════════════════════════════════════════════
   A borda de talão destacável — o traço que só o Caprichado tem. Uma
   fileira de furos sobre a linha, como a picotada de onde a via do cliente
   se destaca. Usada com parcimônia: onde um "documento" se separa do
   sistema, nunca como enfeite de toda divisória. */

.serrilha {
    height: 10px;
    background-image: radial-gradient(circle at 5px 5px, var(--papel-0) 2.6px, transparent 3.1px),
        linear-gradient(to bottom, transparent 4px, var(--linha) 4px, var(--linha) 5px, transparent 6px);
    background-size: 14px 10px, 100% 10px;
    background-repeat: repeat-x, no-repeat;
}

/* ═══ Estrutura: app ═════════════════════════════════════════════════════ */

.app {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100dvh;
}

.conteudo {
    padding: 1.6rem clamp(1rem, 3.5vw, 2.4rem) 5.5rem;
    min-width: 0;
    max-width: 74rem;
    width: 100%;
}

/* Formulário se lê em coluna, como texto: a faixa estreita é a medida de
   leitura de parágrafo, não economia de tela. */
.conteudo-estreito {
    max-width: 34rem;
}

/*
   O espaço entre um bloco e o seguinte é do CONTINENTE, não do bloco.
   Bloco não sabe quem vem depois dele — e é exatamente aí que nasce todo
   "elemento grudado": no par que ninguém previu. O cartão de consumo
   seguido da grade de planos, os controles da agenda seguidos do
   calendário: cada um estava certo sozinho, e o encontro dos dois não era
   de ninguém. Aqui esse encontro passa a ter dono.
   ⚠ Isto é um PISO, não uma medida: margens de irmãos colapsam, então uma
   margem inferior maior continua valendo e nada do que já respirava
   aperta. E quem precisar de outra coisa declara a própria margem, que
   vence esta por vir depois na folha.
*/
.conteudo > * + *,
.pub-miolo > * + * {
    margin-top: 1rem;
}

/* A exceção que confirma a regra: título de seção não se descola do que
   ele apresenta. Aqui o espaçamento é o `margin-bottom` do próprio
   título — a distância maior fica ACIMA dele, separando do assunto
   anterior. Sem esta linha o piso de 1rem afastaria os dois e o título
   passaria a flutuar entre duas seções, pertencendo a nenhuma. */
.conteudo > .form-secao + *,
.conteudo > .busca-grupo + * {
    margin-top: 0;
}

.topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.4rem;
}

.topo h1 {
    margin: 0;
}

.topo-sub {
    display: block;
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--grafite-2);
    margin-top: 0.15rem;
}

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--grafite-2);
    font-size: 0.875rem;
    margin: 0 0 0.9rem;
}

.voltar:hover {
    color: var(--grafite);
    text-decoration: none;
}

.voltar-seta {
    width: 1em;
    height: 1em;
}

/* ═══ Estrutura: trilho ══════════════════════════════════════════════════ */

.rail {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.1rem 0.8rem 1.2rem;
    background: var(--papel-1);
    border-right: 1px solid var(--linha);
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--grafite);
    padding: 0.25rem 0.55rem 0.9rem;
}

.marca:hover {
    text-decoration: none;
}

.marca-selo {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    background: var(--marca);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.rail-grupo {
    margin: 1.1rem 0 0.25rem;
    padding: 0 0.55rem;
    font-size: 0.6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--grafite-3);
}

.rail-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: var(--raio);
    color: var(--grafite-2);
    font-weight: 500;
    font-size: 0.875rem;
    border: 0;
    background: none;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.rail-item:hover {
    background: var(--papel-2);
    color: var(--grafite);
    text-decoration: none;
}

.rail-item[aria-current="page"] {
    background: var(--marca-suave);
    color: var(--marca-vivo);
    font-weight: 600;
}

.rail-rodape {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rail-usuario {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.rail-usuario strong {
    display: block;
    font-weight: 600;
}

.rail-papel {
    color: var(--grafite-3);
    font-size: 0.75rem;
}

.rail-sair {
    color: var(--grafite-3);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--papel-3);
    color: var(--grafite-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ═══ Estrutura: barra do celular ════════════════════════════════════════ */

.tabbar {
    display: none;
}

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

    .rail {
        display: none;
    }

    .conteudo {
        padding-bottom: 6.5rem;
    }

    .tabbar {
        position: fixed;
        inset: auto 0 0;
        z-index: 30;
        display: grid;
        background: var(--papel-1);
        border-top: 1px solid var(--linha);
        padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    }

    .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.3rem 0.2rem;
        font-size: 0.6875rem;
        font-weight: 550;
        color: var(--grafite-2);
        border-radius: var(--raio);
    }

    .tab:hover {
        text-decoration: none;
    }

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

    .tab svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .tab-destaque span:first-child {
        display: grid;
        place-items: center;
        width: 2.7rem;
        height: 2.7rem;
        margin-top: -1.35rem;
        border-radius: 50%;
        background: var(--marca);
        color: #fff;
        box-shadow: var(--sombra-alta);
    }

    .tab-destaque svg {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* ═══ Entrada (auth) ═════════════════════════════════════════════════════ */

.auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100dvh;
}

/* A vitrine é a via da empresa do talão: fica no papel-2, um tom abaixo,
   e a folha de trabalho (o formulário) fica na frente, branca. */
.auth-vitrine {
    display: flex;
    flex-direction: column;
    padding: 2.2rem clamp(1.6rem, 4vw, 3.6rem);
    background: var(--papel-2);
    border-right: 1px solid var(--linha);
}

.auth-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--grafite);
    width: fit-content;
}

.auth-marca:hover {
    text-decoration: none;
}

.auth-vitrine-corpo {
    margin: auto 0;
    max-width: 30rem;
}

.auth-frase {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 0.9rem;
}

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

.auth-apoio {
    color: var(--grafite-2);
    font-size: 1.02rem;
    margin: 0 0 1.8rem;
}

.auth-pontos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.auth-pontos li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--grafite-2);
    font-size: 0.9375rem;
}

.auth-pontos svg {
    color: var(--verde);
    margin-top: 0.18em;
}

.auth-nota {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--grafite-3);
}

.auth-nota a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-palco {
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

/* A caixa é uma folha de talão: sombra de papel e a serrilha no alto. */
.auth-caixa {
    width: min(100%, 25rem);
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 1.8rem 1.7rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.auth-caixa::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10px;
    background-image: radial-gradient(circle at 5px 5px, var(--papel-0) 2.6px, transparent 3.1px),
        linear-gradient(to bottom, transparent 4px, var(--linha) 4px, var(--linha) 5px, transparent 6px);
    background-size: 14px 10px, 100% 10px;
    background-repeat: repeat-x, no-repeat;
}

.auth-marca-movel {
    display: none;
}

.auth-titulo {
    font-size: 1.35rem;
    margin: 0.4rem 0 0.35rem;
}

.auth-sub {
    color: var(--grafite-2);
    font-size: 0.9375rem;
    margin: 0 0 1.3rem;
}

.auth-linha-rotulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.auth-linha-rotulo a {
    font-size: 0.8125rem;
}

.auth-lembrar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--grafite-2);
    margin: 0 0 1.2rem;
}

.auth-lembrar input {
    accent-color: var(--marca);
    width: 1.05rem;
    height: 1.05rem;
}

.auth-rodape {
    margin: 1.2rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linha);
    font-size: 0.9063rem;
    color: var(--grafite-2);
}

.auth-legal {
    margin: 1.1rem 0 0;
    font-size: 0.78rem;
    color: var(--grafite-3);
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.auth-legal a {
    color: var(--grafite-3);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-legal a:hover {
    color: var(--grafite-2);
}

.auth-email {
    color: var(--grafite);
    font-weight: 600;
}

.auth-acao-alternativa {
    margin-top: 0.6rem;
}

.auth-dica-central {
    text-align: center;
    margin-top: 0.7rem;
}

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

    /* Quem está com o polegar na tela quer entrar, não ler argumento. */
    .auth-vitrine {
        display: none;
    }

    .auth-marca-movel {
        display: inline-flex;
        margin-bottom: 0.9rem;
    }

    .auth-palco {
        align-items: start;
        padding-top: 2.2rem;
    }
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    border-radius: var(--raio);
    border: 1px solid transparent;
    font: 600 0.875rem/1.3 var(--fonte);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-principal {
    background: var(--marca);
    color: #fff;
}

.btn-principal:hover {
    background: var(--marca-vivo);
}

.btn-secundario {
    background: var(--papel-1);
    border-color: var(--linha-forte);
    color: var(--grafite);
}

.btn-secundario:hover {
    background: var(--papel-2);
}

.btn-perigo {
    background: var(--papel-1);
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.btn-perigo:hover {
    background: var(--vermelho-suave);
}

.btn-bloco {
    width: 100%;
}

/* Espera visível sem `disabled` — botão desabilitado descarta name/value
   e trava reenvio legítimo; o aria-busy marca a espera e o CSS segura o
   segundo clique. */
.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
}

/* ═══ Campos ═════════════════════════════════════════════════════════════ */

.campo {
    margin: 0 0 1.05rem;
}

.campo label {
    display: block;
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--grafite-2);
    margin: 0 0 0.3rem;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--papel-1);
    color: var(--grafite);
    font: 400 0.9375rem/1.4 var(--fonte);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

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

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

.campo-erro {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--vermelho);
}

.campo-dica {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--grafite-3);
}

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

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--raio);
    border: 1px solid;
    font-size: 0.875rem;
    /* ⚠ `margin: 0 0 1.1rem` zerava o topo e, por vir depois na folha,
       vencia o piso de ritmo: aviso logo abaixo de um cartão encostava
       nele. Declarar só o lado de baixo deixa o topo com o continente. */
    margin-bottom: 1.1rem;
}

.aviso svg {
    margin-top: 0.12em;
}

.aviso-ok {
    background: var(--verde-suave);
    border-color: color-mix(in srgb, var(--verde) 30%, transparent);
    color: var(--verde);
}

.aviso-erro {
    background: var(--vermelho-suave);
    border-color: color-mix(in srgb, var(--vermelho) 30%, transparent);
    color: var(--vermelho);
}

.aviso-info {
    background: var(--papel-2);
    border-color: var(--linha-forte);
    color: var(--grafite-2);
}

/* ═══ Cartões ════════════════════════════════════════════════════════════ */

.cartao {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 1.15rem 1.25rem;
}

.cartao + .cartao {
    margin-top: 1rem;
}

.cartao-titulo {
    font-size: 0.9375rem;
    font-weight: 650;
    margin: 0 0 0.7rem;
}

/* ═══ Badges ═════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--papel-2);
    color: var(--grafite-2);
}

.badge-ok {
    background: var(--verde-suave);
    color: var(--verde);
}

.badge-atencao {
    background: var(--ambar-suave);
    color: var(--ambar);
}

.badge-erro {
    background: var(--vermelho-suave);
    color: var(--vermelho);
}

.badge-marca {
    background: var(--marca-suave);
    color: var(--marca-vivo);
}

/* ═══ Estado vazio ═══════════════════════════════════════════════════════
   Toda lista tem um: a serrilha em cima faz o quadro parecer a primeira
   folha do talão ainda por preencher, e o texto diz o próximo passo. */

.vazio {
    text-align: center;
    padding: 2.6rem 1.5rem;
    background: var(--papel-1);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-g);
}

.vazio-icone {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--marca-suave);
    color: var(--marca-vivo);
    margin: 0 0 0.8rem;
}

.vazio-icone svg {
    width: 1.4rem;
    height: 1.4rem;
}

.vazio h2 {
    font-size: 1.05rem;
    margin: 0 0 0.3rem;
}

.vazio p {
    color: var(--grafite-2);
    max-width: 26rem;
    margin: 0 auto 1.1rem;
}

/* ═══ Previa da planilha (importacao) ═══════════════════════
   As primeiras linhas do arquivo que a pessoa enviou, para ela reconhecer
   a propria lista antes de confirmar. */

/* A rolagem e DESTE quadro, nunca da pagina: planilha de doze colunas nao
   pode empurrar o corpo do documento para o lado. */
.previa-rolagem {
    overflow-x: auto;
    margin: 0.9rem 0;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.previa-tabela {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.previa-tabela th,
.previa-tabela td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--linha);
    text-align: left;
}

.previa-tabela th {
    background: var(--papel-2);
    font-weight: 650;
    position: sticky;
    top: 0;
}

.previa-tabela tr:last-child td {
    border-bottom: 0;
}

/* Dois caminhos no estado vazio (cadastrar um ou trazer todos) ficam lado a
   lado, e nao empilhados com margem propria: o respiro e do CONTINENTE. */
.vazio-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.vazio-apoio {
    margin: 0.9rem 0 0;
}

/* Rotulo curto que so aparece onde o longo nao cabe — o par de `.so-larga`. */
@media (min-width: 561px) {
    .so-estreita {
        display: none;
    }
}

/* ═══ Grade de resumo (painel) ═══════════════════════════════════════════ */

.resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.4rem;
}

.resumo-item {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 0.95rem 1.05rem;
}

.resumo-rotulo {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grafite-2);
    margin: 0 0 0.2rem;
}

.resumo-valor {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* ═══ Pacotes de exportacao (LGPD) ══════════════════════════
   A lista de pedidos de portabilidade na tela de privacidade. */

.pacotes {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.pacote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel-2);
    font-size: 0.875rem;
}

.pacote-quando {
    font-variant-numeric: tabular-nums;
}

/* Estado que nao e acao nao pode parecer botao: so texto apagado. */
.pacote-estado {
    color: var(--grafite-3);
    font-size: 0.8125rem;
}

/* ═══ Página de erro ═════════════════════════════════════════════════════
   O vestuário abaixo (`.capa*`) nasceu na capa provisória e ficou sem uso
   quando a landing virou `.lp-*`. Agora ele veste as telas de erro, que
   pedem exatamente a mesma coisa: um cartão centrado, com a marca, e
   NENHUMA dependência do sistema — o 500 costuma acontecer justamente
   porque o que o layout consulta é o que caiu. */

.erro-codigo {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--marca-vivo);
    margin: 0 0 0.4rem;
}

/* ═══ Capa provisória ════════════════════════════════════════════════════
   A landing de verdade nasce na fase de lançamento; até lá a raiz é um
   cartão de visita honesto: marca, frase e as duas portas. */

.capa {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.capa-caixa {
    text-align: center;
    max-width: 30rem;
}

.capa-selo {
    display: inline-grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 16px;
    background: var(--marca);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 1rem;
}

.capa-frase {
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

.capa-frase span {
    color: var(--marca);
}

.capa-apoio {
    color: var(--grafite-2);
    margin: 0 0 1.6rem;
}

.capa-acoes {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    flex-wrap: wrap;
}

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

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

/* ═══ Busca de lista ═════════════════════════════════════════════════════ */

.busca {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
}

.busca-campo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    background: var(--papel-1);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    color: var(--grafite-3);
}

.busca-campo input {
    flex: 1;
    border: 0;
    background: none;
    padding: 0.55rem 0;
    font: 400 0.9375rem/1.4 var(--fonte);
    color: var(--grafite);
}

.busca-campo input:focus-visible {
    outline: none;
}

.busca-campo:focus-within {
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-suave);
}

/* ═══ Lista de registros ═════════════════════════════════════════════════
   A lista é um talão: linhas empilhadas na mesma folha, cada uma leva a um
   registro. Grade, não tabela — no celular o conteúdo reflui sem markup
   duplicado. */

.lista {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.linha {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.05rem;
    color: var(--grafite);
    border-top: 1px solid var(--linha);
    transition: background var(--transicao);
}

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

.linha:hover {
    background: var(--papel-2);
    text-decoration: none;
}

.linha-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

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

.linha-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--grafite-2);
}

.linha-seta {
    color: var(--grafite-3);
    flex: 0 0 auto;
}

/* ═══ Ficha (lista de definição) ═════════════════════════════════════════ */

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.9rem 1.4rem;
    margin: 0;
}

.ficha-item dt {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grafite-3);
    margin: 0 0 0.1rem;
}

.ficha-item dd {
    margin: 0;
    font-size: 0.9375rem;
}

.ficha-larga {
    grid-column: 1 / -1;
}

/* ═══ Formulário: apoio ══════════════════════════════════════════════════ */

.campo-rotulo {
    display: block;
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--grafite-2);
    margin: 0 0 0.3rem;
}

.opcoes-linha {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.opcao {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    cursor: pointer;
}

.opcao input {
    accent-color: var(--marca);
    width: 1.05rem;
    height: 1.05rem;
}

.form-secao {
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grafite-3);
    margin: 1.6rem 0 0.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linha);
}

.form-par {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 0.8rem;
}

@media (min-width: 560px) {
    .form-par {
        grid-template-columns: 2fr 1fr;
    }
}

.form-par-longo {
    min-width: 0;
}

.campo-curto {
    max-width: 11rem;
}

.form-acoes {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linha);
}

/* ═══ Paginação ══════════════════════════════════════════════════════════ */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

.paginacao-info {
    font-size: 0.8125rem;
    color: var(--grafite-2);
}

.paginacao-links {
    display: flex;
    gap: 0.35rem;
}

.paginacao-links a,
.paginacao-links span {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    background: var(--papel-1);
    color: var(--grafite-2);
    font-size: 0.8438rem;
    font-weight: 550;
}

.paginacao-links a:hover {
    background: var(--papel-2);
    text-decoration: none;
    color: var(--grafite);
}

.paginacao-links .paginacao-atual {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.paginacao-links .paginacao-inerte {
    opacity: 0.45;
}

/* ═══ Texto de apoio ═════════════════════════════════════════════════════ */

.discreto {
    color: var(--grafite-2);
    font-size: 0.875rem;
    margin: 0 0 0.6rem;
}

/* Observação respeita a quebra de linha de quem digitou. */
.pre-linha {
    white-space: pre-line;
    margin: 0;
}

/* Rótulo que só cabe em tela larga (o ícone fica sozinho no celular). */
@media (max-width: 560px) {
    .so-larga {
        display: none;
    }
}

/* ═══ Chips de filtro ════════════════════════════════════════════════════ */

.chips {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.8rem;
    border-radius: 99px;
    border: 1px solid var(--linha);
    background: var(--papel-1);
    color: var(--grafite-2);
    font-size: 0.8125rem;
    font-weight: 550;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.chip:hover {
    background: var(--papel-2);
    text-decoration: none;
}

.chip-ativo {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.chip-ativo:hover {
    background: var(--marca-vivo);
}

/* O liga/desliga de inativos fica visivelmente à parte dos filtros de tipo. */
.chip-borda {
    margin-left: auto;
    border-style: dashed;
}

/* ═══ Valor na linha da lista ════════════════════════════════════════════ */

.linha-valor {
    flex: 0 0 auto;
    font-weight: 650;
    font-size: 0.9375rem;
}

/* ═══ Ações de um item (duplicar/desativar/remover) ══════════════════════ */

.acoes-item {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 0 0.7rem;
}

/* ═══ Página da OS ═══════════════════════════════════════════════════════ */

.os-cabecalho .ficha {
    margin-bottom: 0.4rem;
}

.os-total {
    font-weight: 700;
    font-size: 1.05rem;
}

.os-mudar-status {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--linha);
}

.os-mudar-status select,
.os-mudar-status input {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--papel-1);
    color: var(--grafite);
    font: 400 0.875rem/1.4 var(--fonte);
}

.os-mudar-status input {
    flex: 1;
    min-width: 10rem;
}

.os-subtitulo {
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grafite-3);
    margin: 0.9rem 0 0.35rem;
}

.os-subtitulo:first-of-type {
    margin-top: 0;
}

/* ═══ Itens da OS ════════════════════════════════════════════════════════ */

.os-itens {
    margin: 0 0 1rem;
}

.os-item {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--linha);
}

.os-item-nome {
    flex: 1;
    min-width: 0;
}

.os-item-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--grafite-2);
}

.os-item-soma {
    border-bottom: 0;
    padding: 0.35rem 0 0;
    color: var(--grafite-2);
    font-size: 0.875rem;
}

.os-item-soma .os-item-nome {
    text-align: right;
}

.os-item-total {
    border-bottom: 0;
    border-top: 2px solid var(--grafite);
    margin-top: 0.4rem;
    padding-top: 0.55rem;
    font-weight: 700;
}

.os-item-total .os-item-nome {
    text-align: right;
}

.btn-remover {
    border: 0;
    background: none;
    color: var(--grafite-3);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
}

.btn-remover:hover {
    color: var(--vermelho);
    background: var(--vermelho-suave);
}

.btn-texto {
    border: 0;
    background: none;
    color: var(--marca);
    font: 550 0.8125rem/1.3 var(--fonte);
    cursor: pointer;
    padding: 0;
}

.btn-texto:hover {
    text-decoration: underline;
}

/* O lançador: catálogo OU avulso, quantidade, preço, um botão. */
.os-lancar {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr auto;
    gap: 0.7rem;
    align-items: end;
    padding-top: 0.9rem;
    border-top: 1px solid var(--linha);
}

.os-lancar .campo {
    margin: 0;
}

.os-lancar .btn {
    margin-bottom: 1px;
}

@media (max-width: 900px) {
    .os-lancar {
        grid-template-columns: 1fr 1fr;
    }

    .os-lancar .btn {
        grid-column: 1 / -1;
    }
}

/* ═══ Arquivos da OS ═════════════════════════════════════════════════════ */

.os-arquivos {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
}

.os-arquivo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--linha);
    font-size: 0.9063rem;
}

.os-arquivo-meta {
    margin-left: auto;
}

.os-enviar {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.7rem;
    align-items: end;
    padding-top: 0.9rem;
    border-top: 1px solid var(--linha);
}

.os-enviar .campo {
    margin: 0;
}

@media (max-width: 900px) {
    .os-enviar {
        grid-template-columns: 1fr;
    }
}

/* ═══ Timeline ═══════════════════════════════════════════════════════════
   A linha do tempo da OS — e, na fatia do Rastreio, a mesma anatomia vira
   a página que o cliente acompanha. */

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

.tempo::before {
    content: "";
    position: absolute;
    left: 0.32rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--linha);
}

.tempo-item {
    position: relative;
    display: flex;
    gap: 0.9rem;
    padding: 0.35rem 0 0.35rem 1.5rem;
}

.tempo-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--papel-1);
    border: 2px solid var(--marca);
}

.tempo-quando {
    flex: 0 0 auto;
    color: var(--grafite-3);
    font-size: 0.8125rem;
    padding-top: 0.1rem;
}

.tempo-oque {
    font-size: 0.9063rem;
}

.tempo-quem {
    display: block;
    font-size: 0.78rem;
    color: var(--grafite-3);
}

/* Recusa em linha: motivo + botao, no rodape do cartao de decisao. */

.os-recusa {
    display: flex;
    gap: 0.7rem;
    align-items: end;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--linha);
}

.os-recusa .campo {
    flex: 1;
    margin: 0;
}

@media (max-width: 560px) {
    .os-recusa {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══ Páginas públicas (Rastreio e orçamento) ════════════════════════════
   O que o cliente FINAL vê pelo link, no celular, sem conta. A identidade
   é a da empresa que atende; o Caprichado assina no rodapé. */

.pub-corpo {
    background: var(--papel-0);
}

.pub {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.pub-topo {
    padding: 1.1rem 0.2rem 0.9rem;
}

.pub-empresa {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.pub-miolo {
    flex: 1;
}

.pub-contato {
    color: var(--grafite-2);
    margin: 0 0 0.5rem;
}

.pub-rodape {
    padding: 1.4rem 0.2rem 0.6rem;
    font-size: 0.78rem;
    color: var(--grafite-3);
}

.pub-rodape a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── O quadro de "onde está agora" ── */

.pub-agora-rotulo {
    font-size: 0.875rem;
    color: var(--grafite-2);
    margin: 0 0 0.4rem;
}

.pub-agora-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 0 0.5rem;
}

.pub-agora-status .badge {
    font-size: 0.9063rem;
    padding: 0.3rem 0.9rem;
}

.pub-acao-doc {
    margin: 0.9rem 0 0;
}

/* ── Documento ── */

.pub-doc-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0 0 1rem;
}

.pub-doc-empresa {
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grafite-3);
    margin: 0 0 0.2rem;
}

.pub-doc-titulo {
    font-size: 1.25rem;
    margin: 0 0 0.2rem;
}

.pub-termos {
    font-size: 0.8438rem;
    color: var(--grafite-2);
}

.pub-doc-fim {
    margin-top: 1.4rem;
}

.pub-assinatura {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linha);
    text-align: center;
}

.pub-assinatura img {
    max-width: min(100%, 20rem);
    height: auto;
}

.pub-assinatura-linha {
    border-top: 1px solid var(--grafite);
    display: inline-block;
    padding-top: 0.35rem;
    font-size: 0.8438rem;
    color: var(--grafite-2);
    margin: 0;
}

.pub-acoes-doc {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
}

/* ── Decisão do orçamento ── */

.pub-decisao form + details,
.pub-decisao form + form {
    margin-top: 0.8rem;
}

.pub-recusa {
    margin-top: 0.9rem;
}

.pub-recusa summary {
    cursor: pointer;
    color: var(--grafite-2);
    font-size: 0.875rem;
}

.pub-recusa form {
    margin-top: 0.8rem;
}

/* ── Fotos ── */

.pub-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.8rem;
}

.pub-foto {
    margin: 0;
}

.pub-foto img {
    width: 100%;
    height: 9.5rem;
    object-fit: cover;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    display: block;
}

.pub-foto figcaption {
    font-size: 0.75rem;
    color: var(--grafite-3);
    margin-top: 0.25rem;
}

/* ── Quadro de assinatura ── */

.pub-quadro {
    margin: 0 0 0.9rem;
}

.pub-quadro canvas {
    width: 100%;
    height: auto;
    background: var(--papel-1);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    touch-action: none;
    display: block;
    margin: 0 0 0.4rem;
}

/* ═══ Impressão ══════════════════════════════════════════════════════════
   O documento imprime como papel timbrado: sai o chrome, fica a folha. */

@media print {
    .pub-topo,
    .pub-rodape,
    .pub-acoes-doc,
    .aviso {
        display: none !important;
    }

    .pub-corpo {
        background: #fff;
    }

    .pub {
        max-width: none;
        padding: 0;
    }

    .pub-imprimivel {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}

/* ═══ Compartilhar (telas internas) ══════════════════════════════════════ */

.compartilhar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.compartilhar-link {
    flex: 1;
    min-width: 14rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--papel-2);
    color: var(--grafite-2);
    font: 400 0.8125rem/1.4 var(--fonte);
}

/* O quadro de status leva o fio da marca no alto — e o documento, mais
   respiro de papel timbrado. */

.pub-agora {
    border-top: 3px solid var(--marca);
}

.pub-documento {
    padding: 1.5rem 1.4rem;
}

/* Pagamento estornado fica na lista, riscado: caixa e historia. */

.pagamento-estornado {
    opacity: 0.55;
}

.pagamento-estornado .num {
    text-decoration: line-through;
}

.pagamento-excesso {
    font-size: 0.8125rem;
    color: var(--grafite-2);
}

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

a.resumo-item {
    color: inherit;
    transition: background var(--transicao);
}

a.resumo-item:hover {
    background: var(--papel-2);
    text-decoration: none;
}

.resumo-alerta {
    border-color: color-mix(in srgb, var(--vermelho) 45%, transparent);
}

.resumo-alerta .resumo-valor {
    color: var(--vermelho);
}

.resumo-detalhe {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--grafite-2);
    margin-left: 0.3rem;
}

.painel-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 0 1rem;
}

@media (max-width: 900px) {
    .painel-colunas {
        grid-template-columns: 1fr;
    }
}

.painel-colunas .cartao + .cartao {
    margin-top: 0;
}

/* O formulário de período convive na fileira de chips. */
.chip-datas {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.chip-datas input[type="date"] {
    padding: 0.22rem 0.45rem;
    border: 1px solid var(--linha);
    border-radius: 99px;
    background: var(--papel-1);
    color: var(--grafite-2);
    font: 400 0.8125rem/1.3 var(--fonte);
}

.chip-datas .chip {
    cursor: pointer;
}

/* ═══ Primeiros passos ═══════════════════════════════════════
   O roteiro da primeira semana, no topo do painel. Some sozinho quando nao
   tem mais o que ensinar, entao pode ocupar espaco sem pedir licenca: quem
   ja sabe usar o produto nunca ve isto. */

/* O cartao precisa cortar o que passa da borda: a serrilha e puxada para
   fora do respiro por margem negativa, e sem isto ela vazaria por cima dos
   cantos arredondados — dois biquinhos retos no alto de uma folha redonda. */
.passos {
    overflow: hidden;
}

/* A serrilha vai de borda a borda: a margem negativa desfaz o respiro do
   cartao, senao ela nasceria flutuando no meio do papel em vez de rasgar a
   folha inteira. Os valores acompanham o padding do `.cartao`. */
.passos-serrilha {
    margin: -1.15rem -1.25rem 0.95rem;
}

.passos-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.passos-apoio {
    margin: 0;
}

.passos-contagem {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--grafite-2);
    white-space: nowrap;
}

.passos-contagem strong {
    font-size: 1.25rem;
    color: var(--marca);
}

.passos-lista {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.passo {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel-2);
}

.passo-icone {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--raio);
    background: var(--marca-suave);
    color: var(--marca);
}

.passo-icone svg {
    width: 1.1rem;
    height: 1.1rem;
}

.passo-texto h3 {
    margin: 0 0 0.15rem;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.passo-texto p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--grafite-2);
}

.passo-selo {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--verde);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.passo-selo svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Feito nao e riscado: o passo continua sendo um lugar para onde voltar. */
.passo-feito {
    opacity: 0.62;
}

.passos-dispensa {
    margin-top: 0.9rem;
    text-align: right;
}

/* Botao que se comporta como link: dispensar o roteiro muda estado no
   servidor, entao e um POST de verdade, e nao um `<a>` disfarcado. */
.link-discreto {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    color: var(--grafite-2);
    text-decoration: underline;
    cursor: pointer;
}

.link-discreto:hover {
    color: var(--grafite);
}

/* No celular a coluna do botao nao cabe ao lado do texto: o passo vira
   duas linhas, com o botao ocupando a largura toda embaixo. */
@media (max-width: 560px) {
    .passo {
        grid-template-columns: 2.25rem 1fr;
    }

    .passo .btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* ═══ Gráfico SVG ════════════════════════════════════════════════════════ */

.grafico {
    width: 100%;
    height: auto;
    display: block;
}

.grafico-barra {
    fill: var(--marca);
}

.grafico-barra:hover {
    fill: var(--marca-vivo);
}

.grafico-chao {
    stroke: var(--linha);
    stroke-width: 1;
}

.grafico-rotulo {
    fill: var(--grafite-3);
    font-size: 11px;
    font-family: var(--fonte);
}

/* ═══ Barras horizontais ═════════════════════════════════════════════════ */

.hbarras {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hbarra {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr 2.2rem;
    align-items: center;
    gap: 0.7rem;
    color: inherit;
    font-size: 0.875rem;
}

.hbarra:hover {
    text-decoration: none;
}

a.hbarra:hover .hbarra-nome {
    color: var(--marca);
}

.hbarra-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hbarra-trilho {
    background: var(--papel-2);
    border-radius: 99px;
    height: 0.65rem;
    overflow: hidden;
}

.hbarra-cheio {
    display: block;
    height: 100%;
    background: var(--marca);
    border-radius: 99px;
    min-width: 3px;
}

.hbarra-n {
    text-align: right;
    color: var(--grafite-2);
    font-weight: 600;
}

/* Lista dentro de cartão dispensa a própria moldura. */
.lista-plana {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

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

.agenda-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.agenda-navega {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.agenda-data {
    font-size: 0.9063rem;
    margin: 1.2rem 0 0.5rem;
    color: var(--grafite-2);
}

.agenda-data-hoje {
    color: var(--marca-vivo);
}

.agenda-hora {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 650;
    font-size: 0.9063rem;
    line-height: 1.3;
}

.agenda-hora-fim {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--grafite-3);
}

/* ── O calendário do mês: grade de 7, semana começando na segunda ── */

.calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
}

.calendario-cabeca {
    background: var(--papel-2);
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grafite-3);
    text-align: center;
}

.calendario-dia {
    background: var(--papel-1);
    min-height: 5.2rem;
    padding: 0.35rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: inherit;
    font-size: 0.72rem;
    transition: background var(--transicao);
}

.calendario-dia:hover {
    background: var(--papel-2);
    text-decoration: none;
}

.calendario-fora {
    background: var(--papel-0);
    color: var(--grafite-3);
}

.calendario-hoje .calendario-numero {
    background: var(--marca);
    color: #fff;
}

.calendario-numero {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-weight: 650;
    font-size: 0.78rem;
}

.calendario-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--grafite-2);
    border-left: 2px solid var(--marca);
    padding-left: 0.3rem;
}

.calendario-mais {
    color: var(--grafite-3);
    font-weight: 600;
}

@media (max-width: 700px) {
    /* Célula de calendário em telefone vira selo: número + pontos. */
    .calendario-dia {
        min-height: 3.4rem;
        padding: 0.25rem;
    }

    .calendario-item {
        display: none;
    }

    .calendario-mais::before {
        content: "";
    }
}

/* ═══ Busca no trilho ════════════════════════════════════════════════════ */

.rail-busca {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0.2rem 0.6rem;
    padding: 0.4rem 0.6rem;
    background: var(--papel-2);
    border-radius: var(--raio);
    color: var(--grafite-3);
}

.rail-busca input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: 400 0.8438rem/1.3 var(--fonte);
    color: var(--grafite);
}

.rail-busca input:focus-visible {
    outline: none;
}

.rail-busca:focus-within {
    background: var(--papel-1);
    box-shadow: 0 0 0 2px var(--marca-suave);
}

/* ═══ Página de busca ════════════════════════════════════════════════════ */

.busca-grupo {
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grafite-3);
    margin: 1.4rem 0 0.5rem;
}

.busca-mais {
    margin: 0.4rem 0 0;
    font-size: 0.8438rem;
}

/* ═══ Personalizar painel (§30) ══════════════════════════════════════════ */

.personalizar {
    margin: 0 0 1rem;
}

.personalizar summary {
    cursor: pointer;
    font-size: 0.8438rem;
    color: var(--grafite-2);
    width: fit-content;
}

.personalizar-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.7rem;
    padding: 0.8rem 1rem;
    background: var(--papel-1);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-g);
}

/* ═══ Planos ═════════════════════════════════════════════════════════════ */

.planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    /* Mesmo motivo do `.aviso`: o topo é do continente. Era daqui que vinha
       a grade de planos encostada no cartão de consumo na tela de
       cobrança. */
    margin-bottom: 1.2rem;
}

.plano {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 1.3rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plano-atual {
    border-color: var(--marca);
    box-shadow: 0 0 0 1px var(--marca), var(--sombra);
}

.plano-nome {
    font-size: 1.05rem;
    margin: 0;
}

.plano-preco {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.plano-mes {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--grafite-2);
}

.plano-para {
    color: var(--grafite-2);
    font-size: 0.875rem;
    margin: 0 0 0.4rem;
}

.plano-destaques {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.plano-destaques li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--grafite-2);
}

.plano-destaques svg {
    color: var(--verde);
    margin-top: 0.18em;
    flex: 0 0 auto;
}

/*
   O cartão do plano que já é seu não ganha botão: ganha confirmação.
   ⚠ Antes ele usava `.badge`, que é um selo pequeno de lista. Dentro do
   cartão — uma coluna flex — o selo esticava na largura toda e virava uma
   pílula quase vazia com o texto perdido na esquerda: parecia botão
   desligado, e um botão que não responde é pior do que nenhum.
   Aqui a caixa é a MESMA do botão dos outros dois cartões, para que os
   três terminem na mesma linha, mas o traço é o do aviso de sucesso — sem
   preenchimento forte, com o mesmo tique verde que marca item incluído.
   Estado, não ação.
*/
.plano-selo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--verde) 30%, transparent);
    border-radius: var(--raio);
    background: var(--verde-suave);
    color: var(--verde);
    font: 600 0.875rem/1.3 var(--fonte);
}

/* ═══ Adicionais e cota (tela de cobrança) ═══════════════════════════════
   O upsell mora ao lado dos planos porque é a mesma decisão: "de que
   tamanho eu preciso?". Cada adicional é uma linha com um campo de
   quantidade — e não um botão "comprar" — para que devolver o que sobrou
   seja tão fácil quanto comprar. Upsell que só sabe crescer é armadilha. */

.adicionais {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0.9rem 0 0;
}

.adicional {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.2rem;
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 0.9rem 1rem;
}

.adicional-texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 12rem;
    flex: 1 1 16rem;
}

.adicional-preco {
    font-weight: 700;
    color: var(--marca-vivo);
    white-space: nowrap;
}

.adicional-atual {
    font-size: 0.8125rem;
    color: var(--grafite-3);
}

.adicional-forma {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.adicional-qtd {
    width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Quanto de espaço já foi usado ──
   A barra é informação, não enfeite: quem está perto do teto precisa ver
   isso ANTES de a próxima foto ser recusada no meio de uma OS. */

.cota {
    margin: 1rem 0 0;
}

.cota-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.cota-rotulo {
    font-size: 0.8125rem;
    color: var(--grafite-2);
    font-variant-numeric: tabular-nums;
}

.cota-trilho {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--papel-3);
    overflow: hidden;
}

.cota-nivel {
    height: 100%;
    background: var(--marca);
    border-radius: 999px;
    transition: width var(--transicao);
}

.cota-nivel-atencao {
    background: var(--ambar);
}

.cota-nivel-cheio {
    background: var(--vermelho);
}

.cota-aviso {
    font-size: 0.8125rem;
    color: var(--vermelho);
    margin: 0.4rem 0 0;
}

/* ═══ Landing (capa de venda) ════════════════════════════════════════════
   A capa é a primeira dobra do produto: mesma paleta, mesma serrilha de
   talão, e o movimento vem da ROLAGEM (animation-timeline: view()) — zero
   JS. Onde o navegador não suporta, tudo aparece estático: melhoria, nunca
   requisito.

   ⚠ Toda seção mede a largura pelo `.lp-largura`, inclusive as de fundo
   cheio. A versão anterior deixava a seção cheia com 68rem de CONTEÚDO e a
   normal com 68rem CONTANDO o respiro lateral — 1,25rem de diferença de
   cada lado, o bastante para os títulos não baterem uns com os outros na
   rolagem. Se aparecer largura escrita fora daqui, é regressão disso. */

.lp {
    background: var(--papel-0);
    /* ⚠ O clarão do herói sangra 50vw para cada lado de propósito. O
       sangramento da direita vira rolagem horizontal — no celular a página
       aparecia cortada na lateral. `clip` corta sem criar contêiner de
       rolagem; `hidden` criaria, e o topo grudado (`sticky`) pararia de
       grudar. */
    overflow-x: clip;
}

.lp-largura {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ── Topo grudado ── */

.lp-topo {
    position: sticky;
    top: 0;
    z-index: 20;
    /* O fundo é quase opaco de propósito: translúcido demais deixa o texto
       da página passar por baixo do menu e nenhum dos dois se lê. */
    background: rgba(244, 242, 237, 0.88);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(140%) blur(10px);
    transition: border-color var(--transicao);
}

@supports (animation-timeline: scroll()) {
    /* A linha só aparece quando a página saiu do topo — moldura antes da
       rolagem é enfeite que rouba altura da primeira dobra. */
    .lp-topo {
        animation: lp-topo-linha steps(1) both;
        animation-timeline: scroll();
        animation-range: 0 4rem;
    }

    @keyframes lp-topo-linha {
        from { border-bottom-color: transparent; }
        to { border-bottom-color: var(--linha); }
    }
}

.lp-topo-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 68rem;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-weight: 550;
    font-size: 0.9063rem;
}

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.lp-nav-links a,
.lp-nav-entrar {
    color: var(--grafite-2);
    text-decoration: none;
}

.lp-nav-links a:hover,
.lp-nav-entrar:hover {
    color: var(--marca);
}

/* ── Herói ── */

.lp-heroi {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 2.5rem;
    align-items: center;
    max-width: 68rem;
    margin: 0 auto;
    padding: 3.4rem 1.25rem 4.2rem;
}

/* O clarão da marca atrás do herói. Fica num elemento próprio (e não no
   `::before` da seção) porque precisa vazar a largura da coluna sem
   arrastar o `overflow` do conteúdo junto.

   ⚠ Nada de `z-index: -1` aqui: `.lp-heroi` é `relative` sem z-index, logo
   não abre contexto de empilhamento, e o negativo jogaria o clarão para
   TRÁS do fundo do body — some sem erro nenhum. Quem sobe é o conteúdo. */
.lp-heroi-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 20% 26%, rgba(14, 116, 144, 0.2), transparent 70%),
        radial-gradient(38% 42% at 80% 10%, rgba(34, 113, 63, 0.12), transparent 72%);
    /* A máscara é o que faz o clarão morrer antes da borda. Sem ela,
       qualquer limite — o da seção ou o do sangramento — vira uma aresta
       reta de cor no meio da página, que é pior do que não ter clarão. */
    -webkit-mask-image: radial-gradient(72% 78% at 50% 38%, #000 30%, transparent 100%);
    mask-image: radial-gradient(72% 78% at 50% 38%, #000 30%, transparent 100%);
}

/* A quadrícula de papel milimetrado, apagando para as bordas. */
.lp-heroi-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--linha) 1px, transparent 1px),
        linear-gradient(90deg, var(--linha) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent 75%);
    mask-image: radial-gradient(60% 50% at 50% 30%, #000, transparent 75%);
}

.lp-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--papel-1);
    border: 1px solid var(--marca-suave);
    color: var(--marca-vivo);
    border-radius: 999px;
    padding: 0.32rem 0.8rem 0.32rem 0.55rem;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 1.1rem;
    box-shadow: var(--sombra);
}

.lp-selo svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--verde);
}

.lp-titulo {
    font-size: clamp(2rem, 3.9vw, 2.9rem);
    font-weight: 750;
    letter-spacing: -0.032em;
    line-height: 1.06;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.lp-titulo span {
    color: var(--marca);
}

.lp-titulo-menor {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
}

.lp-sub {
    font-size: 1.0938rem;
    line-height: 1.62;
    color: var(--grafite-2);
    max-width: 34rem;
    margin: 0 0 1.7rem;
    text-wrap: pretty;
}

.lp-ctas {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.lp-ctas-centro {
    justify-content: center;
}

.btn-grande {
    padding: 0.82rem 1.6rem;
    font-size: 1rem;
}

.lp-cta-nota {
    font-size: 0.8438rem;
    color: var(--grafite-3);
    max-width: 13rem;
}

/* A régua de confiança: três objeções derrubadas em uma linha. */
.lp-confia {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.3rem;
    margin: 1.5rem 0 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--grafite-2);
}

.lp-confia li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.lp-confia svg {
    width: 1rem;
    height: 1rem;
    color: var(--verde);
}

/* ── O palco: o celular do CLIENTE, que é o que ninguém mais tem ── */

.lp-palco {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 1.5rem 0;
}

.lp-fone {
    width: 17.5rem;
    max-width: 100%;
    background: #1c1a17;
    border-radius: 2.4rem;
    padding: 0.65rem;
    box-shadow: var(--sombra-alta), 0 30px 60px rgba(41, 36, 31, 0.16);
    transform: rotate(-1.4deg);
    position: relative;
}

/* O entalhe do alto-falante — dois traços bastam para o olho reconhecer
   um telefone; desenhar câmera e botões só acrescenta ruído. */
.lp-fone::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3.2rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 2;
}

.lp-fone-tela {
    background: var(--papel-1);
    border-radius: 1.9rem;
    padding: 2rem 1.25rem 1.1rem;
    position: relative;
    overflow: hidden;
}

/* A serrilha do talão também aqui: é a assinatura visual do produto. */
.lp-fone-tela::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10px;
    background-image:
        radial-gradient(circle at 5px 5px, var(--papel-0) 2.6px, transparent 3.1px),
        linear-gradient(to bottom, transparent 4px, var(--linha) 4px, var(--linha) 5px, transparent 6px);
    background-size: 14px 10px, 100% 10px;
    background-repeat: repeat-x, no-repeat;
}

.lp-mock-empresa {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grafite-3);
    margin: 0.3rem 0 0.15rem;
}

.lp-mock-os {
    font-weight: 650;
    font-size: 0.9375rem;
    margin: 0 0 0.45rem;
}

.lp-mock-status {
    margin: 0 0 0.9rem;
}

.lp-mock-tempo {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    position: relative;
}

.lp-mock-tempo::before {
    content: "";
    position: absolute;
    left: 0.34rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 2px;
    background: var(--linha);
}

.lp-mock-passo {
    position: relative;
    padding: 0.28rem 0 0.28rem 1.4rem;
    font-size: 0.8125rem;
    color: var(--grafite-2);
    opacity: 0;
    animation: lp-acende 12s infinite;
}

.lp-mock-ponto {
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--papel-1);
    border: 2px solid var(--marca);
}

/* A timeline acende passo a passo e recomeça — a página respira sozinha. */
.lp-mock-passo:nth-child(1) { animation-delay: 0.4s; }
.lp-mock-passo:nth-child(2) { animation-delay: 1.6s; }
.lp-mock-passo:nth-child(3) { animation-delay: 2.8s; }
.lp-mock-passo:nth-child(4) { animation-delay: 4s; }
.lp-mock-passo:nth-child(5) { animation-delay: 5.2s; }

@keyframes lp-acende {
    0% { opacity: 0; transform: translateY(4px); }
    6%, 88% { opacity: 1; transform: translateY(0); }
    96%, 100% { opacity: 0; }
}

.lp-mock-rodape {
    font-size: 0.7188rem;
    color: var(--grafite-3);
    text-align: right;
    margin: 0;
}

/* Os avisos que saltam do aparelho: o que o dono do serviço vê acontecer
   do outro lado. Boiam devagar para a cena não ficar parada. */
.lp-flutua {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: 999px;
    padding: 0.45rem 0.9rem 0.45rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--sombra-alta);
    margin: 0;
    white-space: nowrap;
    animation: lp-boia 7s ease-in-out infinite;
}

.lp-flutua-topo {
    top: 2.2rem;
    left: -1.5rem;
}

.lp-flutua-pe {
    bottom: 0.4rem;
    right: -1.4rem;
    animation-delay: 1.8s;
}

.lp-flutua-icone {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--marca-suave);
    color: var(--marca-vivo);
    flex: 0 0 auto;
}

.lp-flutua-icone svg {
    width: 0.9rem;
    height: 0.9rem;
}

@keyframes lp-boia {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* ── Régua de público ── */

.lp-setores {
    background: var(--papel-1);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    padding: 0.9rem 0;
}

.lp-setores-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.lp-setores-rotulo {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grafite-3);
    margin-right: 0.3rem;
}

/* ── Estrutura das seções ── */

.lp-secao {
    max-width: 68rem;
    margin: 0 auto;
    padding: 4.2rem 1.25rem;
}

.lp-secao-cheia {
    background: var(--papel-1);
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.lp-cabeca {
    max-width: 42rem;
    margin: 0 0 2rem;
}

.lp-etiqueta {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--marca);
    margin: 0 0 0.5rem;
}

.lp-h2 {
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    letter-spacing: -0.025em;
    line-height: 1.18;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}

.lp-h2-sub {
    color: var(--grafite-2);
    font-size: 1.0313rem;
    line-height: 1.6;
    margin: 0;
    /* ⚠ `balance` aqui: sem ele a frase dos planos quebrava deixando uma
       palavra sozinha na segunda linha — foi o que o dono viu em "equipe". */
    text-wrap: balance;
}

/* ── O antes e o depois ── */

.lp-versus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.2rem;
}

.lp-versus-lado {
    border-radius: var(--raio-g);
    padding: 1.4rem 1.4rem 1.5rem;
    border: 1px solid var(--linha);
}

.lp-versus-lado h3 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}

.lp-versus-hoje {
    background: var(--papel-2);
}

.lp-versus-hoje h3 {
    color: var(--grafite-3);
}

.lp-versus-nos {
    background: var(--papel-1);
    border-color: var(--marca);
    box-shadow: var(--sombra);
}

.lp-versus-nos h3 {
    color: var(--marca-vivo);
}

.lp-versus-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.lp-versus-lista li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--grafite-2);
}

.lp-versus-lista li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.lp-versus-hoje .lp-versus-lista li::before {
    content: "✕";
    color: var(--vermelho);
    opacity: 0.65;
}

.lp-versus-nos .lp-versus-lista li::before {
    content: "✓";
    color: var(--verde);
}

/* ── Passos ── */

.lp-passos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
}

.lp-passo {
    position: relative;
}

/* O fio que liga um passo ao outro só existe quando eles estão lado a
   lado; empilhados, apontaria para o lado errado. */
@media (min-width: 60rem) {
    .lp-passo:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.1rem;
        left: 2.8rem;
        right: -1.6rem;
        height: 2px;
        background: repeating-linear-gradient(to right, var(--linha-forte) 0 6px, transparent 6px 12px);
    }
}

.lp-passo h3,
.lp-dif h3,
.lp-recurso h3 {
    font-size: 1.0313rem;
    margin: 0.7rem 0 0.4rem;
}

.lp-passo p,
.lp-dif p,
.lp-recurso p {
    color: var(--grafite-2);
    font-size: 0.9375rem;
    line-height: 1.58;
    margin: 0;
}

.lp-passo-n {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-weight: 750;
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 5px var(--papel-1);
}

/* ── Destaque do Rastreio ── */

.lp-destaque {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3rem;
    align-items: center;
}

.lp-destaque-texto .lp-cabeca {
    margin-bottom: 1.6rem;
}

.lp-destaque-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.lp-destaque-lista li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.lp-destaque-lista h3 {
    font-size: 0.9688rem;
    margin: 0 0 0.2rem;
}

.lp-destaque-lista p {
    margin: 0;
    color: var(--grafite-2);
    font-size: 0.9063rem;
    line-height: 1.55;
}

/* A folha de entrega: o documento que sai no fim, com a serrilha e a
   assinatura se desenhando. */
.lp-folha {
    position: relative;
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-alta);
    padding: 1.6rem 1.5rem 1.2rem;
    max-width: 23rem;
    margin: 0 auto;
    overflow: hidden;
    transform: rotate(1.1deg);
}

.lp-folha::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10px;
    background-image:
        radial-gradient(circle at 5px 5px, var(--papel-0) 2.6px, transparent 3.1px),
        linear-gradient(to bottom, transparent 4px, var(--linha) 4px, var(--linha) 5px, transparent 6px);
    background-size: 14px 10px, 100% 10px;
    background-repeat: repeat-x, no-repeat;
}

.lp-folha-marca {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grafite-3);
    margin: 0.4rem 0 0.1rem;
}

.lp-folha-titulo {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.lp-folha-itens {
    margin: 0 0 1.2rem;
    font-size: 0.875rem;
}

.lp-folha-itens > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--linha);
}

.lp-folha-itens dt {
    color: var(--grafite-2);
}

.lp-folha-itens dd {
    margin: 0;
    font-weight: 600;
}

/* Especificidade em vez de `!important`: a linha do total é um `div` como
   as outras, e ganhar por seletor mais específico deixa a regra geral
   ainda editável sem escalada de importância. */
.lp-folha-itens > .lp-folha-total {
    border-bottom: 0;
    font-weight: 700;
    padding-top: 0.6rem;
}

.lp-folha-itens > .lp-folha-total dt {
    color: var(--grafite);
    font-weight: 700;
}

.lp-folha-rotulo {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grafite-3);
    margin: 0;
}

.lp-assina {
    width: 100%;
    height: 3.4rem;
    display: block;
}

.lp-assina path {
    fill: none;
    stroke: var(--grafite);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: lp-risca 9s ease-in-out infinite;
}

@keyframes lp-risca {
    0% { stroke-dashoffset: 420; }
    35%, 88% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 420; }
}

.lp-folha-pe {
    font-size: 0.8125rem;
    color: var(--grafite-2);
    border-top: 1px solid var(--linha);
    padding-top: 0.5rem;
    margin: 0.2rem 0 0;
}

/* ── Recursos ── */

.lp-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.lp-recurso {
    background: var(--papel-0);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 1.25rem 1.3rem 1.35rem;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.lp-recurso:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
    border-color: var(--linha-forte);
}

.lp-recurso-icone {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--marca-suave);
    color: var(--marca-vivo);
    flex: 0 0 auto;
}

.lp-recurso-icone svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* ── Diferenciais ── */

.lp-difs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.lp-dif {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 1.35rem 1.35rem 1.45rem;
    /* O fio da marca no alto — o mesmo gesto do quadro de status da OS. */
    border-top: 3px solid var(--marca);
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.lp-dif:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
}

.lp-dif-icone {
    display: inline-grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
    background: var(--marca-suave);
    color: var(--marca-vivo);
}

.lp-dif-icone svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* ── Planos na capa ── */

.plano-destaque {
    border-color: var(--marca);
    box-shadow: 0 0 0 1px var(--marca), var(--sombra-alta);
    position: relative;
}

.plano-fita {
    position: absolute;
    top: -0.8rem;
    right: 1rem;
    background: var(--marca);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

.plano-regua {
    margin: 0 0 0.8rem;
    font-size: 0.875rem;
    color: var(--grafite-2);
    border-top: 1px dashed var(--linha);
    border-bottom: 1px dashed var(--linha);
    padding: 0.55rem 0;
}

.lp-extras {
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-g);
    padding: 1.3rem 1.4rem;
    background: var(--papel-1);
    margin-top: 0.4rem;
}

.lp-extras-titulo {
    font-weight: 650;
    margin: 0 0 0.9rem;
}

.lp-extras-lista {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.8rem 1.6rem;
}

.lp-extras-lista li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.8rem;
    align-items: baseline;
    border-left: 3px solid var(--marca-suave);
    padding-left: 0.8rem;
}

.lp-extras-nome {
    font-weight: 600;
    font-size: 0.9375rem;
}

.lp-extras-preco {
    font-weight: 700;
    color: var(--marca-vivo);
    white-space: nowrap;
}

.lp-extras-nota {
    grid-column: 1 / -1;
    font-size: 0.8438rem;
    color: var(--grafite-2);
}

.lp-extras-pe,
.lp-planos-pe {
    font-size: 0.8438rem;
    color: var(--grafite-3);
    margin: 0;
    max-width: 44rem;
}

.lp-planos-pe {
    margin-top: 1.4rem;
}

/* ── FAQ ── */

.lp-faq {
    max-width: 46rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lp-faq-item {
    background: var(--papel-0);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 0.9rem 1.1rem;
    transition: border-color var(--transicao);
}

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

.lp-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9688rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

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

/* O sinal de abrir é desenhado no CSS: o marcador nativo muda de forma a
   cada navegador, e aqui ele fica na cor da marca, do mesmo tamanho. */
.lp-faq-item summary::after {
    content: "+";
    color: var(--marca);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
    transition: transform var(--transicao);
}

.lp-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.lp-faq-item p {
    margin: 0.7rem 0 0.2rem;
    color: var(--grafite-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 42rem;
}

/* ── Fechamento ── */

.lp-final {
    max-width: 68rem;
    margin: 0 auto;
    padding: 4rem 1.25rem 4.5rem;
}

.lp-final-caixa {
    background: linear-gradient(140deg, var(--marca-vivo), var(--marca) 55%, #12889f);
    color: #fff;
    border-radius: 1.4rem;
    padding: 3.2rem 2rem 3.4rem;
    text-align: center;
    box-shadow: var(--sombra-alta);
}

.lp-final-caixa .lp-titulo {
    margin-bottom: 0.7rem;
}

/* Sobre a mancha da marca, o destaque do título precisa ser CLARO — o
   próprio azul-petróleo sumiria no fundo. */
.lp-final-caixa .lp-titulo span {
    color: #a5f3fc;
}

.lp-final-sub {
    color: rgba(255, 255, 255, 0.86);
    max-width: 34rem;
    margin: 0 auto 1.6rem;
    font-size: 1.0313rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.lp-final-caixa .btn-principal {
    background: var(--papel-1);
    color: var(--marca-vivo);
}

.lp-final-caixa .btn-principal:hover {
    background: #fff;
}

.lp-final-caixa .lp-cta-nota {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Rodapé ── */

.lp-rodape {
    background: var(--papel-1);
    border-top: 1px solid var(--linha);
    padding: 2.8rem 0 1.6rem;
    font-size: 0.875rem;
}

.lp-rodape-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--linha);
}

.lp-rodape-sobre p {
    color: var(--grafite-2);
    margin: 0.8rem 0 0;
    max-width: 26rem;
    line-height: 1.6;
}

.lp-rodape-sobre .lp-rodape-selo {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--grafite-3);
    font-size: 0.8125rem;
    max-width: 22rem;
}

.lp-rodape-selo svg {
    width: 1rem;
    height: 1rem;
    color: var(--marca);
    flex: 0 0 auto;
    margin-top: 0.15em;
}

.lp-rodape h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grafite-3);
    margin: 0.3rem 0 0.8rem;
}

.lp-rodape ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lp-rodape a {
    color: var(--grafite-2);
    text-decoration: none;
}

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

.lp-rodape-fim {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1.5rem;
    padding-top: 1.2rem;
    font-size: 0.8125rem;
    color: var(--grafite-3);
}

.lp-rodape-fim a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-rodape-cnpj {
    font-variant-numeric: tabular-nums;
}

/* ── Revelação pela rolagem: entra suave conforme aparece ── */

@supports (animation-timeline: view()) {
    .lp-rev {
        animation: lp-revela linear both;
        animation-timeline: view();
        /* ⚠ faixa ENTRY, nunca cover: cover amarra a animação à travessia
           inteira e o elemento só "chega" ao sair da tela. */
        animation-range: entry 0% entry 65%;
    }

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

/* Quem pediu menos movimento no sistema operacional recebe a página
   inteira parada — inclusive a timeline e a assinatura, que são laços
   infinitos e por isso os piores para quem tem sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
    .lp-mock-passo,
    .lp-flutua,
    .lp-assina path,
    .lp-rev,
    .lp-topo {
        animation: none !important;
    }

    .lp-mock-passo {
        opacity: 1;
    }

    .lp-assina path {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 60rem) {
    .lp-heroi,
    .lp-destaque {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .lp-heroi {
        padding-top: 2rem;
    }

    .lp-rodape-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .lp-nav-links {
        display: none;
    }

    .lp-fone {
        transform: none;
    }

    .lp-folha {
        transform: none;
    }

    /* Os avisos flutuantes sobrepõem o aparelho em tela estreita: viram
       linha, embaixo, onde não cobrem o que ilustram. */
    .lp-flutua {
        position: static;
        margin: 0.6rem auto 0;
        display: flex;
        white-space: normal;
    }

    .lp-rodape-grade {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .lp-secao {
        padding: 3rem 1.25rem;
    }
}

/* Colunas do herói e do destaque precisam poder encolher no grid — e o
   conteúdo do herói fica ACIMA do clarão do fundo (ver o aviso lá em
   cima: o clarão é um irmão anterior, absoluto, e sem isto ele pintaria
   por cima do texto). */

.lp-heroi-texto,
.lp-destaque-texto {
    min-width: 0;
}

.lp-heroi-texto,
.lp-heroi .lp-palco {
    position: relative;
    z-index: 1;
}

/* ═══ Documento público (Termos, Privacidade) ════════════════════════════ */

.doc {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.doc h1 {
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
}

.doc h2 {
    font-size: 1.05rem;
    margin: 1.6rem 0 0.4rem;
}

.doc p,
.doc li {
    color: var(--grafite-2);
    font-size: 0.9375rem;
}

.doc ul {
    padding-left: 1.2rem;
    margin: 0 0 1rem;
}

/* A abertura de uma pagina de conteudo: um paragrafo maior que diz do que
   a pagina trata antes de qualquer subtitulo. */
.doc-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--grafite);
    /* ⚠ O topo tambem e do lead, e nao so o pe: o `h1` do `.doc` fecha com
       0.3rem, medida de SUBTITULO. Herdando so isso, um paragrafo de
       1.05rem grudava no titulo — medido no navegador, nao no olho. */
    margin: 0.9rem 0 1.4rem;
}

.doc-data {
    font-size: 0.8125rem;
    color: var(--grafite-3);
}