/* ==========================================================================
   landing.css — as telas escuras do apex: landing publica, /entrar, /cadastro
   e o console interno (/admin/login).

   Folha INDEPENDENTE: o _LayoutLanding nao carrega Bootstrap nem naregua.css.
   A landing e escura e o resto do produto e claro, entao misturar as duas
   folhas so criaria briga de especificidade e peso morto no download.

   Design "Na Régua elétrica" (redesign de 14/08/2026, handoff Claude Design):
   fundo quase-preto e quente + acento lima como cor viva + cobre/argila como
   acento secundario. Sai o azul-marinho + ambar da versao anterior. Tipografia
   segue Inter/Inter Tight self-hosted (nao trocou pra Archivo/JetBrains Mono
   do brief original — decisao de manter fonte ja auto-hospedada por LGPD,
   ver docs/handoff.md). Todo hex vive na secao 1; componente nenhum tem cor
   solta.

   Secoes: 1 tokens · 2 base · 3 utilitarios · 6 abertura (logo animada) ·
           4 nav · 5 hero · 7 valores · 8 passos · 9 tema (carrossel) ·
           10 painel (bento) · 12 planos · 13 faq · 14 cta final ·
           15 rodape · 16 entrar · 17 movimento reduzido · 18 cadastro ·
           19 console · 20 texto vivo (brilho/contorno)
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
    /* Superficies: hierarquia por ELEVACAO (cada nivel ~+4% de luminancia),
       nao por borda. A borda so confirma o degrau. Base quente quase-preta —
       nao mais azul-violeta. */
    --lp-surface-1: #12110F;   /* fundo da pagina — o mais profundo */
    --lp-surface-2: #17160F;   /* secoes alternadas / faixas */
    --lp-surface-3: #1B1A18;   /* cards */
    --lp-surface-4: #232220;   /* card elevado, hover, mockups */

    /* Texto off-white levemente QUENTE: reduz o glare do branco puro sobre
       fundo escuro e conversa com o acento.

       Contraste medido sobre --lp-surface-4, a superficie ELEVADA — e nao
       sobre o fundo. O fundo e o caso FACIL: medir por ele foi o erro que
       deixou o muted reprovando em 4 textos da landing na calibragem
       anterior. Um token de texto vale pela pior superficie em que pode
       cair, porque --lp-surface-4 e hover, card elevado e mockup: sempre a
       um estado de distancia.
         primario 12,7:1 · secundario 6,1:1 · muted 4,86:1 — tudo >= AA. */
    --lp-text: #F4F1EC;
    --lp-text-2: #A8A29A;
    --lp-text-3: #8A857C;

    /* Acento primario: lima eletrico (energia, "vivo"). Acento secundario:
       cobre/argila quente (navalha, textura de barbearia) — usado em
       detalhe/traço, nunca como cor de CTA. Regra 60-30-10 — o lima nao
       passa de ~10% da tela: CTA, preco em destaque, plano Pro. */
    --lp-accent: #C8FF3D;
    --lp-accent-hi: #D7FF6B;      /* lima mais claro: hover, brilho */
    --lp-accent-deep: #8FBF1E;    /* lima mais fundo: sombra do proprio acento */
    --lp-accent-veu: rgba(200, 255, 61, .18);
    --lp-accent-fraco: rgba(200, 255, 61, .08);
    --lp-accent-borda: rgba(200, 255, 61, .32);

    --lp-accent-secundario: #B07A52;       /* cobre/argila — acento quente secundario */
    --lp-accent-secundario-veu: rgba(176, 122, 82, .22);

    /* Texto sobre o lima. Nunca branco: o lima e claro demais. */
    --lp-sobre-accent: #14140F;

    /* Tambem medidos sobre --lp-surface-4, pela mesma razao do texto: os dois
       aparecem como TEXTO dentro de KPI, que e card.
         pos 5,4:1 · neg 4,7:1 sobre a superficie elevada. */
    --lp-pos: #4FBF85;   /* faturamento subiu */
    --lp-neg: #EE7377;   /* falta / no-show */

    --lp-linha: rgba(244, 241, 236, .09);
    --lp-linha-forte: rgba(244, 241, 236, .17);

    /* Tipografia. Inter Tight nos titulos (mais estreita, aguenta corpo
       grande sem ocupar a linha toda), Inter no texto. */
    --lp-fonte-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
    --lp-fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Terceira fonte, so pra rotulo/numero/legenda tecnica (o protótipo usa
       JetBrains Mono nesses pontos). Pilha monoespaçada do SISTEMA — sem
       baixar fonte nova, sem tocar na decisão de ficar só com Inter pro
       corpo do texto (docs/handoff.md, LGPD). */
    --lp-fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

    /* Espaco e forma. */
    --lp-raio-sm: 8px;
    --lp-raio: 10px;
    --lp-raio-card: 14px;
    --lp-raio-lg: 18px;
    --lp-raio-pill: 999px;
    --lp-largura: 1180px;
    --lp-largura-texto: 820px;

    /* Sombra: escuridao ambiente + fio de luz na borda. */
    --lp-sombra-card: 0 18px 40px rgba(0, 0, 0, .45);
    --lp-sombra-alta: 0 30px 70px rgba(0, 0, 0, .5);
    --lp-sombra-accent: 0 10px 26px rgba(200, 255, 61, .18);

    /* Movimento. Mesma disciplina do resto do produto: uma curva so, e
       animacao que reforca — nunca que explica (ver docs/handoff.md §3). */
    --lp-mov-1: .22s;
    --lp-mov-2: .26s;
    --lp-mov-3: .42s;
    --lp-ease: cubic-bezier(.22, .68, .16, 1);
    --lp-passo-cascata: 70ms;

    /* Cor da barbearia no preview de personalizacao. Trocada por JS quando o
       visitante escolhe um tema; tudo no card sai daqui. */
    --lp-marca: var(--lp-accent);
}

/* --- 2. Base ------------------------------------------------------------ */

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

body {
    margin: 0;
    background: var(--lp-surface-1);
    color: var(--lp-text);
    font-family: var(--lp-fonte-texto);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--lp-fonte-display);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.08;
}

p { margin: 0; }

a {
    color: var(--lp-accent);
    text-decoration: none;
    transition: color var(--lp-mov-1) var(--lp-ease);
}

a:hover { color: var(--lp-accent-hi); }

img, svg { display: block; max-width: 100%; }

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

::selection { background: rgba(200, 255, 61, .24); color: var(--lp-sobre-accent); }

/* Pula direto para o conteudo — primeiro alvo de tabulacao da pagina. */
.lp-pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    border-radius: var(--lp-raio);
    background: var(--lp-accent);
    color: var(--lp-sobre-accent);
    font-weight: 600;
}

.lp-pular:focus {
    left: 12px;
    top: 12px;
    color: var(--lp-sobre-accent);
}

/* --- 3. Utilitarios ----------------------------------------------------- */

.lp-container {
    max-width: var(--lp-largura);
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 40px);
}

.lp-secao { padding-block: clamp(56px, 7vw, 92px); }
.lp-secao--faixa { background: var(--lp-surface-2); border-block: 1px solid var(--lp-linha); }
.lp-secao--alta { background: var(--lp-surface-2); border-top: 1px solid var(--lp-linha); }

/* Cobre, nao lima: no protótipo o lima é reservado pra CTA/destaque, e o
   rótulo pequeno acima dos títulos (A DOR, PLANOS...) usa o acento
   secundário — eu tinha misturado os dois na primeira passada. */
.lp-sobrelinha {
    display: block;
    font-family: var(--lp-fonte-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--lp-accent-secundario);
}

.lp-titulo { font-size: clamp(1.75rem, 3.4vw, 2.75rem); max-width: 22ch; margin-top: .75rem; }
.lp-titulo--menor { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }

.lp-texto {
    margin-top: .875rem;
    font-size: 1.03rem;
    line-height: 1.6;
    color: var(--lp-text-2);
    max-width: 52ch;
}

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

.lp-grade--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

.lp-duas {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* Entrada ao rolar. O estado inicial e posto pelo landing.js, e nao aqui:
   se o script nao rodar, nada fica presos em opacity 0. */
[data-reveal] {
    transition: opacity var(--lp-mov-3) var(--lp-ease),
                transform var(--lp-mov-3) var(--lp-ease);
}

/* --- 6. Abertura (logo animada) ------------------------------------------ */

/* Secao parada em 100dvh, com ou sem JS — a logo desenha uma vez e a pagina
   segue pro nav/hero logo abaixo, sem rolagem vazia. Com JS e sem pedido de
   movimento reduzido, landing.js (abertura()) tira a secao da pagina depois
   que a saida (regra .lp-abertura-logo--sai, abaixo) termina. */
.lp-abertura {
    position: relative;
    background: var(--lp-surface-1);
}

.lp-abertura-palco {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Estado parado e o de saida — so os dois, uma transition entre eles. Nao
   acompanha scroll (por isso da pra usar transition, sem ela brigar com um
   valor escrito a cada frame). */
.lp-abertura-logo {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
    transition: transform .55s var(--lp-ease), opacity .5s var(--lp-ease), filter .5s var(--lp-ease);
}

.lp-abertura-logo--sai {
    transform: scale(2.2);
    opacity: 0;
    filter: blur(16px);
}

.lp-abertura-logo-interno {
    font-family: var(--lp-fonte-texto);
    font-size: clamp(40px, 9vw, 64px);
    display: grid;
    grid-template-columns: auto 0fr;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: lp-abertura-gap .9s var(--lp-ease) 3.3s both;
}

.lp-abertura-marca { display: block; overflow: visible; width: 3.44em; height: 3.44em; }

.lp-abertura-lousa-fundo,
.lp-abertura-lousa-traco { opacity: 0; animation: lp-abertura-fade .8s ease-out 2.4s both; }
.lp-abertura-lousa-traco {
    stroke-dasharray: 336;
    stroke-dashoffset: 336;
    animation: lp-abertura-fade .1s linear 2.4s both, lp-abertura-lousa .8s cubic-bezier(.65, 0, .35, 1) 2.4s both;
}

.lp-abertura-barra { stroke-dasharray: 49; stroke-dashoffset: 49; animation: lp-abertura-traco .42s cubic-bezier(.65, 0, .35, 1) .2s both; }

.lp-abertura-dente { stroke-dasharray: 49; stroke-dashoffset: 49; animation: lp-abertura-traco .24s cubic-bezier(.33, 1, .68, 1) both; }
.lp-abertura-dente--1 { animation-delay: .65s; }
.lp-abertura-dente--2 { animation-delay: .87s; }
.lp-abertura-dente--3 { animation-delay: 1.09s; }
.lp-abertura-dente--4 { animation-delay: 1.31s; }

.lp-abertura-navalha {
    stroke-dasharray: 96;
    stroke-dashoffset: 96;
    animation: lp-abertura-traco .6s cubic-bezier(.34, 1.4, .64, 1) 1.6s both, lp-abertura-brilho 1s ease-out 1.7s both;
}

.lp-abertura-palavra { overflow: hidden; min-width: 0; }
.lp-abertura-palavra-in {
    white-space: nowrap;
    font-size: 1.81em;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.1;
    clip-path: inset(-40% 100% -40% 0);
    animation: lp-abertura-varre .9s cubic-bezier(.65, 0, .35, 1) 3.3s both;
}
.lp-abertura-na { color: var(--lp-text-3); }
.lp-abertura-rg { color: var(--lp-text); }

.lp-abertura-regua { display: block; width: 100%; height: .28em; margin-top: .1em; }

/* Em 390px o clamp minimo (40px) ainda deixa a palavra mais larga que a
   tela — ela nasce cortada, antes mesmo da escala de saida (ver abertura()
   em landing.js) entrar em cena. Medido: 7.2vw cabe com folga ate ~360px de
   largura. */
@media (max-width: 480px) {
    .lp-abertura-logo-interno { font-size: clamp(14px, 7.2vw, 40px); }
}

.lp-abertura-regua line {
    stroke: var(--lp-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: lp-abertura-traco .8s cubic-bezier(.65, 0, .35, 1) 3.9s both;
}
.lp-abertura-marca-regua { stroke-dasharray: 12; stroke-dashoffset: 12; }
.lp-abertura-marca-regua--1 { animation-delay: 4.05s; }
.lp-abertura-marca-regua--2 { animation-delay: 4.15s; }
.lp-abertura-marca-regua--3 { animation-delay: 4.25s; }
.lp-abertura-marca-regua--4 { animation-delay: 4.35s; }
.lp-abertura-marca-regua--5 { animation-delay: 4.45s; }
.lp-abertura-marca-regua--6 { animation-delay: 4.55s; }

@keyframes lp-abertura-traco { to { stroke-dashoffset: 0; } }
@keyframes lp-abertura-lousa { to { stroke-dashoffset: 0; } }
@keyframes lp-abertura-fade { to { opacity: 1; } }
@keyframes lp-abertura-varre { to { clip-path: inset(-40% 0 -40% 0); } }
@keyframes lp-abertura-gap { to { grid-template-columns: auto 1fr; gap: .62em; } }
@keyframes lp-abertura-brilho {
    0% { filter: drop-shadow(0 0 10px var(--lp-accent)); }
    100% { filter: drop-shadow(0 0 0 transparent); }
}

/* --- 4. Nav ------------------------------------------------------------- */

/* Régua de progresso do scroll: fica colada na borda de baixo da nav,
   landing.js so escreve a largura (0–100%). Risca de régua atrás pra ficar
   legível mesmo em 0%. */
.lp-progresso {
    position: sticky;
    top: 0;
    z-index: 51;
    height: 3px;
    background: repeating-linear-gradient(to right, var(--lp-linha-forte) 0 1px, transparent 1px 12px);
}

.lp-progresso-barra {
    height: 100%;
    width: 0%;
    background: var(--lp-accent);
    box-shadow: 0 0 10px rgba(200, 255, 61, .5);
    transition: width var(--lp-mov-1) linear;
}

.lp-nav {
    position: sticky;
    top: 3px;
    z-index: 50;
    background: rgba(18, 17, 15, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lp-linha);
}

/* Grupo de links com pilula deslizante atrás do item em foco/hover — a
   pilula é decoração pura (aria-hidden), os <a> continuam navegáveis sem
   landing.js e sem ela. */
.lp-nav-grupo { position: relative; display: flex; align-items: center; gap: .125rem; }

/* top:0 + translate(x,y) em vez de top:50%+margin: no desktop os links sao
   uma fileira (translateX cobre), no painel mobile (abaixo) eles empilham em
   coluna (precisa de translateY tambem) — a MESMA regra atende os dois
   layouts, landing.js so manda offsetLeft/offsetTop/offsetWidth/offsetHeight
   do link de cada vez. */
/* Pilula solida (mesmo gradiente do botao primario), nao mais um contorno
   fraco — pede texto escuro por cima: ver .lp-nav-link--ativo, que
   landing.js liga/desliga junto com a posicao da pilula. */
.lp-nav-pilula {
    position: absolute;
    top: 0;
    left: 0;
    height: 34px;
    width: 0;
    border-radius: var(--lp-raio-pill);
    background: linear-gradient(180deg, var(--lp-accent-hi), var(--lp-accent));
    opacity: 0;
    transition: transform var(--lp-mov-2) var(--lp-ease), width var(--lp-mov-2) var(--lp-ease), height var(--lp-mov-2) var(--lp-ease), opacity var(--lp-mov-1) var(--lp-ease);
    pointer-events: none;
}

.lp-nav-grupo:hover .lp-nav-pilula,
.lp-nav-pilula[data-visivel] { opacity: 1; }

.lp-nav-interno {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-block: .875rem;
}

.lp-nav-marca {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 44px;
    margin-right: auto;
    color: var(--lp-text);
}

.lp-nav-marca:hover { color: var(--lp-text); }

/* --- logo ---------------------------------------------------------------
   Simbolo a esquerda; a direita, a palavra com a regua fina alinhada pelo fim
   — o traco graduado "mede" a palavra. */

.lp-logo { display: inline-flex; align-items: center; gap: .625rem; }
.lp-logo-texto { display: flex; flex-direction: column; gap: 3px; line-height: 1; }

.lp-logo-palavra {
    font-family: var(--lp-fonte-display);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.lp-logo-na { color: var(--lp-text-3); }
.lp-logo-regua { margin-left: 5px; letter-spacing: -.045em; }
.lp-logo-tracos { align-self: flex-end; }

.lp-nav-link {
    position: relative;
    z-index: 1;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--lp-text-2);
}

.lp-nav-link:hover { color: var(--lp-text); }

/* Fica escuro por cima da pilula solida — sem contraste suficiente com o
   texto claro padrao. landing.js liga esta classe no mesmo link que a
   pilula esta cobrindo, nunca nos dois ao mesmo tempo. */
.lp-nav-link--ativo,
.lp-nav-link--ativo:hover { color: var(--lp-sobre-accent); font-weight: 600; }

/* --- hamburguer do menu mobile ------------------------------------------- */

/* So existe visualmente abaixo de 560px (media query adiante). Sem ele o
   grupo de links inteiro sumia da nav e "Entrar" ficava sem nenhum jeito de
   ser alcançado no celular. */
.lp-nav-hamburguer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--lp-raio-sm);
    background: transparent;
    border: 1px solid transparent;
}

.lp-nav-hamburguer:hover { border-color: var(--lp-linha-forte); }

.lp-nav-hamburguer span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--lp-text);
    transition: transform var(--lp-mov-1) var(--lp-ease), opacity var(--lp-mov-1) var(--lp-ease);
}

/* Vira X quando o painel abre — mesmo sinal de "fechar" em qualquer app. */
.lp-nav[data-nav-aberto] .lp-nav-hamburguer span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-nav[data-nav-aberto] .lp-nav-hamburguer span:nth-child(2) { opacity: 0; }
.lp-nav[data-nav-aberto] .lp-nav-hamburguer span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Abaixo de 560px o grupo de links vira um painel que desce do hamburguer,
   em vez de sumir — mesma pilula, agora empilhada em coluna (o CSS dela
   cobre os dois layouts, ver comentário acima). Escondido por opacity +
   visibility (não display:none): position:absolute já tira o grupo da
   fileira da nav, então dá pra manter no fluxo de layout e ainda ganhar uma
   transição suave, em vez de aparecer/sumir seco. */
@media (max-width: 560px) {
    .lp-nav-interno { gap: .625rem; }

    .lp-nav-hamburguer { display: flex; }

    .lp-nav-grupo {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem;
        background: rgba(18, 17, 15, .97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--lp-linha);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--lp-mov-1) var(--lp-ease), transform var(--lp-mov-1) var(--lp-ease), visibility 0s linear var(--lp-mov-1);
    }

    .lp-nav[data-nav-aberto] .lp-nav-grupo {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--lp-mov-1) var(--lp-ease), transform var(--lp-mov-1) var(--lp-ease);
    }

    .lp-nav-link {
        padding: .875rem 1rem;
        font-size: 1rem;
    }
}

/* Com o hamburguer somando espaço à fileira (acima), sobrava logo + CTA +
   hamburguer — e mesmo só com o hamburguer, "Criar minha barbearia" já
   disputava espaço com a régua fina do logo num iPhone de 390px. Só o
   símbolo continua identificando a marca. */
@media (max-width: 420px) {
    .lp-nav-marca .lp-logo-texto { display: none; }
}

/* --- botoes ------------------------------------------------------------- */

/* Sem isto, `display: inline-flex` vence o `[hidden]` do navegador e o botao
   oculto reaparece — foi o "Voltar" branco no fallback sem JS. */
.lp-btn[hidden] { display: none; }
.lp-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--lp-raio);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--lp-mov-2) var(--lp-ease),
                box-shadow var(--lp-mov-2) var(--lp-ease),
                border-color var(--lp-mov-2) var(--lp-ease),
                background var(--lp-mov-2) var(--lp-ease);
}

.lp-btn--primario {
    background: linear-gradient(180deg, var(--lp-accent-hi), var(--lp-accent));
    color: var(--lp-sobre-accent);
    box-shadow: var(--lp-sombra-accent);
}

.lp-btn--primario:hover {
    color: var(--lp-sobre-accent);
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(200, 255, 61, .28);
}

.lp-btn--primario:active { transform: translateY(0); }

.lp-btn--fantasma {
    /* Sem isto, um <button> com esta classe (o "Voltar" do stepper, o único
       lugar em que "fantasma" está num <button> e não num <a>) herda o
       cinza claro padrão do navegador — texto claro em cima de fundo claro,
       quase ilegível. <a> nunca teve fundo próprio, por isso o bug só
       apareceu aqui. */
    background: none;
    border-color: var(--lp-linha-forte);
    color: var(--lp-text);
}

.lp-btn--fantasma:hover {
    color: var(--lp-text);
    border-color: var(--lp-accent);
    background: var(--lp-accent-fraco);
}

.lp-btn--pequeno { min-height: 40px; padding: .625rem 1rem; font-size: .875rem; }
.lp-btn--largo { width: 100%; }

/* Botao neutro claro — usado no "Proximo passo" do stepper do painel, pra
   nao competir com o lima do CTA principal da pagina. */
.lp-btn--claro { background: var(--lp-text); color: var(--lp-sobre-accent); }
.lp-btn--claro:hover { color: var(--lp-sobre-accent); background: var(--lp-accent); transform: translateY(-1px); }

/* Brilho varrendo em loop — como no protótipo. São só ~4 botões na página
   inteira (CTA do hero, da nav, do plano em destaque e do fechamento), então
   o custo de rodar sem parar é pequeno: troca de posição de fundo é só
   paint, nunca layout. */
.lp-btn--brilho { position: relative; overflow: hidden; isolation: isolate; }

.lp-btn--brilho::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(244, 241, 236, .4) 50%, transparent 80%);
    background-size: 250% 100%;
    background-position: 200% 0;
    animation: lp-varrer-botao 3.6s linear infinite;
    pointer-events: none;
}

@keyframes lp-varrer-botao {
    0% { background-position: 200% 0; }
    100% { background-position: -50% 0; }
}

/* --- 5. Hero ------------------------------------------------------------ */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(48px, 7vw, 96px) clamp(56px, 6vw, 88px);
}

/* Halo ambar atras do conteudo — a unica peca decorativa da pagina. */
.lp-hero-halo {
    position: absolute;
    top: -260px;
    right: -120px;
    width: 760px;
    height: 620px;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--lp-accent-veu), transparent 70%);
    animation: lp-halo 14s ease-in-out infinite;
}

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

.lp-selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .7rem;
    border: 1px solid var(--lp-accent-borda);
    border-radius: var(--lp-raio-pill);
    /* Era rgba(230,165,63,...) — sobra do ambar de antes da troca de paleta. */
    background: var(--lp-accent-fraco);
    font-family: var(--lp-fonte-mono);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-accent);
}

.lp-hero h1 {
    margin-top: 1.25rem;
    font-size: clamp(2.375rem, 5.4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    max-width: 20ch;
}

/* Titulo "split text": cada palavra sobe e some pra dentro, uma vez, no
   load — puro CSS via atraso por :nth-child, sem JS. Ate 8 palavras
   cobertas; a 9a em diante (headline nao tem) cairia sem atraso extra. */
.lp-hero-palavra {
    display: inline-block;
    opacity: 0;
    animation: lp-subir 600ms cubic-bezier(.2, .7, .3, 1) both;
}

.lp-hero-palavra:nth-child(1) { animation-delay: 40ms; }
.lp-hero-palavra:nth-child(2) { animation-delay: 120ms; }
.lp-hero-palavra:nth-child(3) { animation-delay: 200ms; }
.lp-hero-palavra:nth-child(4) { animation-delay: 280ms; }
.lp-hero-palavra:nth-child(5) { animation-delay: 360ms; }
.lp-hero-palavra:nth-child(6) { animation-delay: 440ms; }
.lp-hero-palavra:nth-child(7) { animation-delay: 520ms; }
.lp-hero-palavra:nth-child(8) { animation-delay: 600ms; }

/* "na régua" no protótipo: o próprio texto é lima, e o traço embaixo é
   cobre sólido — eu tinha deixado o texto branco (herdando do h1) e o
   traço em degradê lima→cobre, os dois errados. */
.lp-risco { position: relative; color: var(--lp-accent); }

/* Abaixo da linha de base, nao em cima dela: em "régua" o traco passaria pelo
   meio do descendente do "g" e leria como tachado. */
.lp-risco::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.06em;
    height: 5px;
    border-radius: 2px;
    background: var(--lp-accent-secundario);
    transform-origin: left;
    transform: scaleX(0);
    animation: lp-varrer 900ms var(--lp-ease) 780ms both;
}

/* Palavra que gira sob o subtitulo (landing.js troca o textContent). Largura
   minima evita o parágrafo "pular" quando a palavra troca de tamanho. */
.lp-hero-rotativa {
    display: inline-block;
    /* "Personalização." é a mais longa das quatro palavras — o min-width
       evita o parágrafo pular de largura a cada troca. */
    min-width: 13ch;
    color: var(--lp-text);
    font-weight: 600;
    transition: opacity .28s ease, filter .28s ease;
}

.lp-hero-sub {
    margin-top: 1.375rem;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--lp-text-2);
    max-width: 46ch;
}

.lp-hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.875rem;
}

.lp-nota { margin-top: 1.125rem; font-family: var(--lp-fonte-mono); font-size: .78rem; letter-spacing: .02em; color: var(--lp-text-3); }

/* --- mockup de celular (hero e preview de tema) ------------------------- */

.lp-palco {
    position: relative;
    display: flex;
    justify-content: center;
    padding-block: .5rem 1.5rem;
    perspective: 1100px;
    touch-action: pan-y;
}

/* O celular segue o ponteiro com uma leve inclinacao 3D (landing.js). Sem JS
   fica parado, plano — nao ha estado inicial que dependa do script. */
[data-tilt-fone] {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .15s ease-out;
}

.lp-fone {
    width: 300px;
    padding: 9px;
    border-radius: 34px;
    background: linear-gradient(160deg, #3A3F50, var(--lp-surface-2));
    box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(236, 232, 226, .08);
}

.lp-fone-tela {
    border-radius: 27px;
    overflow: hidden;
    background: var(--lp-surface-2);
}

.lp-fone-barra {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-surface-3);
}

.lp-fone-barra span {
    width: 56px;
    height: 5px;
    border-radius: var(--lp-raio-pill);
    background: rgba(236, 232, 226, .2);
}

/* Capa listrada: a mesma textura de poste de barbeiro, na cor da barbearia. */
.lp-capa {
    position: relative;
    height: 76px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--lp-marca) 55%, var(--lp-surface-1)), var(--lp-surface-1));
    transition: background var(--lp-mov-3) var(--lp-ease);
}

.lp-capa::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0, 0, 0, .14) 10px 20px);
}

/* Variante fotografica, so no mockup do Hero: no lugar do degrade+listras,
   uma foto real de capa — a mesma ideia que o cliente ja cadastra no
   proprio produto hoje (fachada, upload de capa). As listras existiam so
   pra dar textura ao placeholder; sobre foto de verdade elas so
   atrapalhavam, daí o `content: none` no pseudo-elemento.

   NAO mexe no `.lp-capa` puro: o carrossel de temas usa a MESMA classe e
   PRECISA do degrade — ele reflete `color-mix(... var(--lp-marca) ...)` e é
   o que demonstra a cor do tema mudando ao vivo (§9); uma foto fixa não
   recolore. */
.lp-capa--foto {
    background-image: url("/img/landing/hero-capa.jpg");
    background-size: cover;
    background-position: center;
}

.lp-capa--foto::after { content: none; }

.lp-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--lp-raio-card);
    background: var(--lp-surface-4);
    border: 2px solid var(--lp-marca);
    color: var(--lp-marca);
    font-family: var(--lp-fonte-display);
    font-weight: 700;
    font-size: 1.05rem;
    transition: border-color var(--lp-mov-3) var(--lp-ease), color var(--lp-mov-3) var(--lp-ease);
}

.lp-fone-corpo { padding: 1.75rem 1rem 1.125rem; }

.lp-fone-avatar { position: absolute; left: 16px; bottom: -20px; }

.lp-fone-nome {
    font-family: var(--lp-fonte-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.lp-fone-meta { margin-top: 3px; font-family: var(--lp-fonte-mono); font-size: .66rem; color: var(--lp-text-3); }

.lp-servicos { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }

.lp-servico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    padding: .7rem .75rem;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-3);
    transition: background var(--lp-mov-3) var(--lp-ease), border-color var(--lp-mov-3) var(--lp-ease);
}

/* O combo em destaque puxa a cor da barbearia — e o que muda ao vivo. */
.lp-servico--destaque {
    background: color-mix(in srgb, var(--lp-marca) 12%, var(--lp-surface-3));
    border-color: color-mix(in srgb, var(--lp-marca) 45%, transparent);
}

.lp-servico-nome { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; font-weight: 500; }

/* Texto-2, e nao o terciario: o .lp-servico--destaque acima nao e uma das
   quatro superficies da escala — e color-mix da cor da barbearia com o card,
   o que resulta MAIS CLARO que --lp-surface-4. O muted reprovava ali (4,45)
   mesmo depois de recalibrado, porque nenhum token de texto e calibrado
   contra uma superficie que a marca do cliente ajuda a definir. Subir o muted
   para cobrir este caso clarearia a landing inteira por causa de um mockup. */
.lp-servico-dur { font-family: var(--lp-fonte-mono); font-size: .6rem; color: var(--lp-text-2); font-weight: 400; }

.lp-servico-preco {
    font-size: .8rem;
    font-weight: 600;
    color: var(--lp-marca);
    transition: color var(--lp-mov-3) var(--lp-ease);
}

.lp-fone-cta {
    margin-top: 1rem;
    padding: .8rem;
    border-radius: var(--lp-raio);
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--lp-sobre-accent);
    background: var(--lp-marca);
    transition: background var(--lp-mov-3) var(--lp-ease);
}

/* Os serviços do mockup do hero entram em sequência no load — é a promessa
   do produto encenada (o cliente marcando sozinho, um horário de cada vez).
   Escopado a `.lp-fone-corpo` de propósito: o carrossel de temas reusa
   `.lp-servico` dentro de `.lp-cartao-tema`, e ali a entrada é controlada
   pelo JS do carrossel, não por isto. */
.lp-fone-corpo .lp-servico,
.lp-fone-corpo .lp-fone-cta {
    opacity: 0;
    animation: lp-entrar-fatia .5s ease forwards;
}

.lp-fone-corpo .lp-servico:nth-child(1) { animation-delay: .95s; }
.lp-fone-corpo .lp-servico:nth-child(2) { animation-delay: 1.25s; }
.lp-fone-corpo .lp-servico:nth-child(3) { animation-delay: 1.55s; }
.lp-fone-corpo .lp-fone-cta { animation-delay: 1.85s; }

@keyframes lp-entrar-fatia {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cartao de caixa flutuando sobre o celular. */
.lp-flutuante {
    position: relative;
    width: 190px;
    margin-top: 1.125rem;
    margin-left: calc(-1 * min(52px, max(0px, (100vw - 420px) / 2)));
    padding: .875rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio-card);
    background: rgba(33, 37, 51, .92);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
    animation: lp-boiar 6s ease-in-out infinite;
}

.lp-flutuante-rotulo {
    font-family: var(--lp-fonte-mono);
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lp-text-3);
}

.lp-flutuante-valor {
    margin-top: .375rem;
    font-family: var(--lp-fonte-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.03em;
}

.lp-alta {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .25rem;
    font-size: .72rem;
    color: var(--lp-pos);
}

/* --- 7. Valores ("a dor") ------------------------------------------------ */

.lp-valores { margin-top: 2.375rem; }

.lp-valor {
    padding: 1.375rem;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-card);
    background: var(--lp-surface-3);
    transition: transform var(--lp-mov-2) var(--lp-ease),
                border-color var(--lp-mov-2) var(--lp-ease),
                box-shadow var(--lp-mov-2) var(--lp-ease);
}

.lp-valor:hover {
    transform: translateY(-4px);
    border-color: rgba(176, 122, 82, .5);
    box-shadow: var(--lp-sombra-card);
}

.lp-valor h3 { margin-top: 1rem; font-size: 1.06rem; }
.lp-valor p { margin-top: .5rem; font-size: .91rem; line-height: 1.6; color: var(--lp-text-2); }
.lp-valor .lp-ico { color: var(--lp-accent); }

/* --- 8. Passos ---------------------------------------------------------- */

.lp-passos-palco { position: relative; margin-top: 2.75rem; }

/* Regua graduada ligando os tres passos — some quando eles empilham. */
.lp-regua {
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    height: 12px;
    opacity: .65;
}

/* 230px, nao 272px: o minimo antigo era calibrado pra 3 passos (Bloco
   anterior) e sobrava so 3 por linha nos 1180px do container — o 4o sempre
   quebrava pra segunda linha. Com 4 passos cabendo, o auto-fit ainda colapsa
   sozinho pra menos colunas em tela estreita — a régua (abaixo) so faz
   sentido de qualquer forma com os passos lado a lado, e some no responsivo. */
.lp-passos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(1.25rem, 3vw, 2.75rem);
}

.lp-passo-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--lp-accent);
    border-radius: 12px;
    background: var(--lp-surface-1);
    color: var(--lp-accent);
    font-family: var(--lp-fonte-mono);
    font-size: 1.06rem;
    font-weight: 500;
}

.lp-passo h3 { margin-top: 1.125rem; font-size: 1.19rem; }
.lp-passo p { margin-top: .5rem; font-size: .94rem; line-height: 1.6; color: var(--lp-text-2); max-width: 34ch; }
.lp-passo b { font-weight: 400; color: var(--lp-text); }

/* --- 9. Preview de tema ------------------------------------------------- */

.lp-tema-duas { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); }

.lp-temas { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; }

.lp-tema {
    display: flex;
    align-items: center;
    gap: .56rem;
    min-height: 44px;
    padding: .625rem .875rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio-pill);
    background: transparent;
    color: var(--lp-text);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--lp-mov-1) var(--lp-ease),
                background var(--lp-mov-1) var(--lp-ease),
                transform var(--lp-mov-1) var(--lp-ease);
}

.lp-tema:hover { border-color: var(--lp-accent); }
.lp-tema:active { transform: scale(.97); }

.lp-tema[aria-pressed="true"] {
    border-color: var(--lp-marca);
    background: color-mix(in srgb, var(--lp-marca) 12%, transparent);
}

.lp-tema-bola { width: 14px; height: 14px; border-radius: 50%; }

.lp-tema-legenda { margin-top: 1rem; font-size: .85rem; color: var(--lp-text-3); }
.lp-tema-legenda b { color: var(--lp-text); font-weight: 500; }
.lp-tema-legenda code { font-family: var(--lp-fonte-mono); font-variant-numeric: tabular-nums; }

/* Card grande do preview: o mesmo cardapio do celular, em escala maior. */
.lp-cartao-tema {
    padding: clamp(1.125rem, 2vw, 1.625rem);
    border: 1px solid var(--lp-linha);
    border-radius: 20px;
    background: var(--lp-surface-1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.lp-cartao-capa { height: 92px; border-radius: 12px; }
.lp-cartao-topo { display: flex; align-items: center; gap: .75rem; margin-top: -22px; padding-inline: 4px; position: relative; }

.lp-cartao-avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 1.19rem;
}

.lp-cartao-nome { font-family: var(--lp-fonte-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }
.lp-cartao-meta { margin-top: 2px; font-family: var(--lp-fonte-mono); font-size: .69rem; color: var(--lp-text-3); }
.lp-cartao-lista { gap: .56rem; margin-top: 1.25rem; }
.lp-cartao-lista .lp-servico { padding: .8rem .875rem; border-radius: 11px; }
.lp-cartao-lista .lp-servico-nome { font-size: .875rem; }
.lp-cartao-lista .lp-servico-preco { font-size: .875rem; }
.lp-cartao-cta { margin-top: 1.125rem; padding: .875rem; font-size: .875rem; }

/* Palco do carrossel: o item ativo fica centralizado e em foco, os outros
   tres empilham atras em profundidade (landing.js escreve transform/opacity/
   z-index por item — sao valores calculados em runtime, nao ha como expressar
   "a 2 posicoes do ativo" em CSS estatico). Arrastavel no touch e no mouse. */
.lp-carrossel {
    position: relative;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}

.lp-carrossel:active { cursor: grabbing; }

.lp-carrossel-trilho {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

[data-carrossel-item] {
    position: absolute;
    width: 300px;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .6s ease, filter .6s ease;
    transform-style: preserve-3d;
}

/* --- 10. Preview do painel (bento) ---------------------------------------
   Grade estatica com as tres telas de uma vez — referencia de design trazida
   pelo dono (Bloco 51), no lugar do stepper de abas anterior. Duas colunas
   em cima (Servicos, Aparencia), uma carta larga embaixo com o Dashboard: e
   a tela mais carregada (grafico + 4 KPI + agenda do dia), e o peso visual
   maior condiz com isso.

   Cada `.lp-bento-card` tem DOIS efeitos de hover, os dois so em CSS exceto
   a posicao do holofote (que landing.js escreve em --lp-x/--lp-y a cada
   pointermove, so com mouse fino — ve a funcao spotlight()): o holofote
   (::before, radial-gradient seguindo o ponteiro) e o leve zoom da propria
   captura de tela. Sem JS ou em touch, o card so sobe 4px no :hover/:active
   — a imagem e o texto continuam legiveis, so falta o brilho. */

.lp-bento {
    margin-top: 2.25rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.lp-bento-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(1.375rem, 2.4vw, 1.75rem) clamp(1.375rem, 2.4vw, 1.75rem) 0;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-lg);
    background: var(--lp-surface-2);
    box-shadow: var(--lp-sombra-card);
    transition: transform var(--lp-mov-2) var(--lp-ease),
                border-color var(--lp-mov-2) var(--lp-ease),
                box-shadow var(--lp-mov-2) var(--lp-ease);
}

.lp-bento-card:hover {
    transform: translateY(-4px);
    border-color: var(--lp-accent-borda);
    box-shadow: var(--lp-sombra-alta);
}

/* O holofote. --lp-x/--lp-y nascem em "50% 0%" (centro-topo) pra ter um
   valor sensato antes do primeiro pointermove; landing.js so os escreve
   depois que o ponteiro entra no card. */
.lp-bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(360px circle at var(--lp-x, 50%) var(--lp-y, 0%), var(--lp-accent-fraco), transparent 72%);
    opacity: 0;
    transition: opacity var(--lp-mov-2) var(--lp-ease);
    pointer-events: none;
}

.lp-bento-card:hover::before { opacity: 1; }

/* Mesma estrutura empilhada dos cards pequenos (texto em cima, imagem
   embaixo) — so ocupa a largura toda, pra caber a captura mais larga sem
   espremer. Uma versao anterior pos texto e imagem lado a lado; ficava
   parecido com a referencia do dono a distancia, mas o titulo ia pro
   RODAPE do card, empurrado pelo `align-items: end` — o oposto do que as
   outras duas fotos fazem, e do que a propria referencia mostra. */
.lp-bento-card--grande { grid-column: 1 / -1; }

/* A textura pontilhada so no card grande — o mesmo tratamento do card de
   maior destaque na referencia trazida pelo dono. Mascarada num circulo no
   canto: pontilhado cobrindo o card inteiro competia com o texto. */
.lp-bento-card--grande::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(var(--lp-linha-forte) 1px, transparent 1px);
    background-size: 15px 15px;
    -webkit-mask-image: radial-gradient(420px circle at 92% 4%, black, transparent 70%);
    mask-image: radial-gradient(420px circle at 92% 4%, black, transparent 70%);
    pointer-events: none;
}

.lp-bento-texto { position: relative; z-index: 1; }
.lp-bento-texto h3 { font-size: 1.19rem; }
.lp-bento-texto p { margin-top: .5rem; font-size: .91rem; line-height: 1.6; color: var(--lp-text-2); max-width: 40ch; }

/* A captura de tela esmaece na base do proprio card em vez de cortar seca —
   a mascara e o que da o efeito "foto encaixada na referencia", ao inves do
   retangulo inteiro com borda embaixo que o stepper anterior usava. */
.lp-bento-tela {
    position: relative;
    z-index: 1;
    margin-top: 1.375rem;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
}

.lp-bento-tela img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--lp-linha);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    transition: transform var(--lp-mov-3) var(--lp-ease);
}

.lp-bento-card:hover .lp-bento-tela img { transform: scale(1.02) translateY(-4px); }

@media (max-width: 640px) {
    .lp-bento { grid-template-columns: 1fr; }
    .lp-bento-card--grande { grid-column: auto; }
}

/* --- 12. Planos --------------------------------------------------------- */

.lp-secao--planos { position: relative; overflow: hidden; border-top: 1px solid var(--lp-linha); background: var(--lp-surface-2); }

/* "PLANOS" em contorno gigante atras da secao — elemento de fundo, baixa
   opacidade, nao compete com o conteudo (por isso fica atras via z-index
   implicito de position:absolute + a secao seguinte ter position:relative). */
.lp-planos-marca {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--lp-fonte-display);
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 800;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px var(--lp-linha-forte);
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

.lp-secao--planos > .lp-container { position: relative; }

.lp-planos-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.lp-ciclo-caixa { display: flex; align-items: center; gap: .75rem; }

.lp-ciclo {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-pill);
    background: var(--lp-surface-3);
}

.lp-ciclo-op {
    min-height: 44px;
    padding: .5rem 1.125rem;
    border: 0;
    border-radius: var(--lp-raio-pill);
    background: transparent;
    color: var(--lp-text-3);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--lp-mov-1) var(--lp-ease), color var(--lp-mov-1) var(--lp-ease);
}

.lp-ciclo-op[aria-pressed="true"] { background: var(--lp-surface-4); color: var(--lp-text); }

.lp-desconto {
    padding: .375rem .625rem;
    border: 1px solid var(--lp-accent-borda);
    border-radius: var(--lp-raio-pill);
    background: var(--lp-accent-fraco);
    font-family: var(--lp-fonte-mono);
    font-size: .68rem;
    font-weight: 500;
    color: var(--lp-accent);
}

.lp-planos { align-items: start; margin-top: 2.375rem; }

.lp-plano {
    display: flex;
    flex-direction: column;
    padding: 1.625rem;
    border: 1px solid var(--lp-linha);
    border-radius: 16px;
    background: var(--lp-surface-3);
    transition: transform var(--lp-mov-2) var(--lp-ease), border-color var(--lp-mov-2) var(--lp-ease);
}

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

/* O Pro ganha moldura em gradiente: a borda e o proprio fundo do artigo. */
.lp-plano--destaque {
    position: relative;
    padding: 2px;
    border: 0;
    border-radius: var(--lp-raio-lg);
    background: linear-gradient(160deg, var(--lp-accent-hi), var(--lp-accent-deep) 60%, rgba(200, 255, 61, .15));
    box-shadow: 0 0 60px rgba(200, 255, 61, .14), 0 30px 60px rgba(0, 0, 0, .5);
}

.lp-plano--destaque:hover { transform: translateY(-3px); }

.lp-plano-interno {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.875rem 1.625rem 1.625rem;
    border-radius: 16px;
    background: var(--lp-surface-4);
}

.lp-plano-selo {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: .375rem .875rem;
    border-radius: var(--lp-raio-pill);
    background: linear-gradient(180deg, var(--lp-accent-hi), var(--lp-accent));
    color: var(--lp-sobre-accent);
    font-family: var(--lp-fonte-mono);
    font-size: .63rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-plano h3 { font-size: 1.19rem; }
.lp-plano-sub { margin-top: .375rem; font-size: .85rem; color: var(--lp-text-3); }

.lp-preco { display: flex; align-items: baseline; gap: .25rem; margin-top: 1.25rem; }
.lp-preco-moeda { font-size: 1.19rem; color: var(--lp-text-2); }

.lp-preco-valor {
    font-family: var(--lp-fonte-display);
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.lp-plano--destaque .lp-preco-valor { font-size: 3.125rem; color: var(--lp-accent-hi); }
.lp-preco-ciclo { font-size: .875rem; color: var(--lp-text-3); }
.lp-preco-nota { margin-top: .25rem; font-family: var(--lp-fonte-mono); font-size: .72rem; color: var(--lp-text-3); }

/* Divisor + rotulo do "Tudo do X, mais:" — so aparece nos planos 2 e 3
   (_Planos.cshtml so escreve o <p> quando ha plano anterior). */
.lp-plano-linha {
    height: 1px;
    margin: 1.5rem 0 0;
    background: repeating-linear-gradient(to right, var(--lp-linha-forte) 0 1px, transparent 1px 8px);
}

.lp-plano-cumulativo {
    margin-top: 1.125rem;
    font-family: var(--lp-fonte-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--lp-text-3);
}

.lp-plano-itens { display: flex; flex-direction: column; gap: .69rem; margin-top: 1.125rem; flex: 1; }

.lp-plano-item {
    display: flex;
    gap: .625rem;
    font-size: .91rem;
    color: var(--lp-text-2);
}

.lp-plano--destaque .lp-plano-item { color: var(--lp-text); }
.lp-plano-item svg { flex: 0 0 16px; margin-top: 3px; color: var(--lp-accent); }
.lp-plano--destaque .lp-plano-item svg { color: var(--lp-accent-hi); }
.lp-plano .lp-btn { margin-top: 1.625rem; }

.lp-garantia {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    color: var(--lp-text-3);
}

.lp-garantia svg { color: var(--lp-accent); flex: none; }

/* --- 13. FAQ ------------------------------------------------------------ */

.lp-faq { max-width: var(--lp-largura-texto); }
.lp-faq-lista { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.75rem; }

.lp-faq-item {
    padding: 1rem 1.125rem;
    border: 1px solid var(--lp-linha);
    border-radius: 12px;
    background: var(--lp-surface-3);
}

/* <summary> nativo: abre sem JS e ja e focavel/acionavel por teclado. O
   marcador padrao sai porque a seta e nossa. */
.lp-faq-pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .875rem;
    min-height: 44px;
    list-style: none;
    font-family: var(--lp-fonte-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.02em;
    cursor: pointer;
}

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

.lp-faq-seta {
    flex: 0 0 16px;
    color: var(--lp-accent);
    transition: transform var(--lp-mov-2) var(--lp-ease);
}

.lp-faq-item[open] .lp-faq-seta { transform: rotate(180deg); }

.lp-faq-resposta {
    margin-top: .75rem;
    font-size: .94rem;
    line-height: 1.65;
    color: var(--lp-text-2);
}

/* --- 14. CTA final ------------------------------------------------------ */

.lp-final {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--lp-linha);
    /* Os tons fixos eram sobra da paleta navy anterior — o fundo escuro
       agora é quase-preto quente (§1), não azul-violeta. */
    background:
        radial-gradient(900px 420px at 78% -10%, rgba(176, 122, 82, .22), transparent 62%),
        linear-gradient(160deg, var(--lp-surface-2), var(--lp-surface-1) 60%, #0B0A08);
}

.lp-final-marca {
    position: absolute;
    right: -60px;
    bottom: -110px;
    width: 440px;
    height: 440px;
    opacity: .05;
    color: var(--lp-accent-hi);
}

.lp-final-conteudo {
    position: relative;
    max-width: var(--lp-largura-texto);
    margin: 0 auto;
    padding-block: clamp(64px, 8vw, 110px);
    text-align: center;
}

.lp-final h2 { font-size: clamp(1.875rem, 4.2vw, 3.375rem); line-height: 1.05; letter-spacing: -.04em; }
.lp-final p { margin: 1.125rem auto 0; font-size: 1.06rem; line-height: 1.6; color: var(--lp-text-2); max-width: 44ch; }
.lp-final-acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

/* --- 15. Rodape --------------------------------------------------------- */

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

.lp-rodape-interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-block: 1.75rem;
}

.lp-rodape-marca {
    display: flex;
    align-items: center;
    gap: .56rem;
    margin-right: auto;
    font-family: var(--lp-fonte-display);
    font-size: .91rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* inline-flex + min-height: alvo de toque de 44px sem virar bloco. */
.lp-rodape a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .85rem;
    color: var(--lp-text-3);
}
.lp-rodape a:hover { color: var(--lp-accent); }
.lp-rodape-copy { font-family: var(--lp-fonte-mono); font-size: .72rem; color: var(--lp-text-3); }

/* --- 20. Texto vivo (brilho / contorno / hover) --------------------------
   Usado com moderacao: no maximo 2 ocorrencias de brilho por pagina (o selo
   do hero e o nome do plano Profissional) e 1 de contorno (o "PLANOS" de
   fundo, §12). O gradiente varre entre dois tons do MESMO acento — nunca
   entre texto e fundo — pra nao derrubar contraste no meio da animacao. */

/* Contraste alto de propósito (texto quase-branco varrido por um flash de
   lima) — a primeira versão varria entre --lp-accent e --lp-accent-hi, dois
   tons quase iguais, e o brilho ficava imperceptível. */
.lp-brilho-texto {
    background-image: linear-gradient(100deg, var(--lp-text) 25%, var(--lp-accent-hi) 50%, var(--lp-text) 75%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lp-brilhar 5s linear infinite;
    width: fit-content;
}

/* Cards com varredura de luz diagonal no hover — usado em .lp-valor (dor) e
   .lp-plano/.lp-plano-interno (planos). Sem JS de mouse-tracking: só
   transiciona a posição do gradiente quando o :hover liga/desliga, o que
   também tira o efeito do toque sozinho (touch não tem :hover sustentado).

   É um ::after por cima, não background-image do próprio elemento — o card
   do plano em destaque já usa "background" pra fazer a borda em degradê
   (§12), então escrever direto no background dele apagaria essa borda. Um
   pseudo-elemento nunca conflita com o que já está lá embaixo. */
.lp-brilho-hover { position: relative; overflow: hidden; isolation: isolate; }

.lp-brilho-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg, transparent 40%, rgba(244, 241, 236, .09) 50%, transparent 60%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 200% 0;
    transition: background-position .8s ease;
    pointer-events: none;
}

.lp-brilho-hover:hover::after { background-position: -100% 0; }

@keyframes lp-brilhar {
    0% { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

/* --- 16. Entrar --------------------------------------------------------- */

/* Flex, e nao grid com place-items: center — naquele arranjo a coluna ganha
   largura de conteudo e o `100%` do cartao passa a medir contra ela, entao o
   cartao estourava a tela em vez de encolher. */
.lp-entrar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72vh;
    padding-block: clamp(48px, 8vw, 96px);
}

.lp-entrar-cartao {
    width: 100%;
    max-width: 440px;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-lg);
    background: var(--lp-surface-3);
    box-shadow: var(--lp-sombra-alta);
}

.lp-entrar-cartao h1 { font-size: 1.625rem; }
.lp-entrar-cartao > p { margin-top: .625rem; font-size: .94rem; color: var(--lp-text-2); }

.lp-campo { margin-top: 1.5rem; }

.lp-campo label {
    display: block;
    margin-bottom: .375rem;
    font-size: .81rem;
    font-weight: 500;
    color: var(--lp-text-2);
}

/* O subdominio digitado + o sufixo fixo do dominio, num controle so. */
.lp-endereco {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-1);
    overflow: hidden;
    transition: border-color var(--lp-mov-1) var(--lp-ease);
}

.lp-endereco:focus-within { border-color: var(--lp-accent); }

.lp-endereco input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 .875rem;
    border: 0;
    background: none;
    color: var(--lp-text);
    font: inherit;
    font-size: 1rem;
}

.lp-endereco input:focus { outline: none; }
.lp-endereco input::placeholder { color: var(--lp-text-3); }

/* Nunca encolhe nem quebra: e o dominio, e dominio pela metade confunde mais
   do que ajuda. Quem cede espaco e o campo, que tem min-width 0. */
.lp-endereco-sufixo {
    display: flex;
    flex: none;
    align-items: center;
    padding-right: .875rem;
    font-size: .94rem;
    color: var(--lp-text-3);
    white-space: nowrap;
}

/* Tela estreita: o par campo+dominio precisa caber em ~300px uteis. */
@media (max-width: 420px) {
    .lp-endereco input { padding-inline: .625rem; font-size: .94rem; }
    .lp-endereco-sufixo { padding-right: .625rem; font-size: .85rem; }
}

/* `display: flex` na classe vence o `[hidden]` da folha do navegador, entao o
   elemento oculto reaparecia como uma barra vermelha vazia. */
.lp-erro[hidden] { display: none; }

.lp-erro {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem .875rem;
    border: 1px solid rgba(226, 88, 92, .35);
    border-radius: var(--lp-raio);
    background: rgba(226, 88, 92, .08);
    font-size: .88rem;
    color: #F3A5A7;
}

.lp-entrar-ajuda { margin-top: 1.25rem; font-size: .85rem; color: var(--lp-text-3); }

/* Bloqueio por tentativas — tom diferente do erro comum de propósito: não é "senha errada agora",
   é "espere um pouco". O cobre/argila (acento secundário, já reservado a detalhe/traço, nunca
   CTA) é o tom quente que sobra pra isso — o apex não tem cor de marca de tenant nenhuma pra
   pegar emprestado, ao contrário do `.pl-aviso--bloqueio` do painel por-tenant. */
.lp-erro--bloqueio {
    border-color: color-mix(in srgb, var(--lp-accent-secundario) 45%, transparent);
    background: var(--lp-accent-secundario-veu);
    color: var(--lp-accent-secundario);
}

/* Campo de texto simples — e-mail, e a base do campo de senha logo abaixo.
   MESMA receita visual do `.lp-endereco` (borda, raio, superficie, foco), só
   que sem o sufixo fixo do domínio: aqui não há nada de fixo pra colar do
   lado. */
.lp-input {
    width: 100%;
    height: 48px;
    padding: 0 .875rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-1);
    color: var(--lp-text);
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--lp-mov-1) var(--lp-ease);
}

.lp-input:focus { outline: none; border-color: var(--lp-accent); }
.lp-input::placeholder { color: var(--lp-text-3); }

/* Senha + olho de mostrar/ocultar — MESMO par que `Painel/Login.cshtml` já
   usa (`.pl-senha`/`.pl-olho`, `painel-login.css`), portado pro vocabulário
   `--lp-*` do apex: os dois lados da mesma pergunta ("qual é a senha?") não
   podem ter dois desenhos diferentes de olho, ou a pessoa reaprenderia o
   ícone na segunda tela. Nasce oculto — sem JS o campo funciona igual, só
   sem o alternar (`entrar.js`, mesma doutrina de `painel-login.js`). */
.lp-senha { position: relative; }
.lp-senha .lp-input { padding-right: 48px; }

.lp-olho[hidden], .lp-olho svg[hidden] { display: none; }

.lp-olho {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--lp-raio-sm);
    background: none;
    color: var(--lp-text-3);
    cursor: pointer;
    transition: color var(--lp-mov-1) var(--lp-ease), background var(--lp-mov-1) var(--lp-ease);
}

.lp-olho:hover { color: var(--lp-text); background: rgba(244, 241, 236, .06); }

/* Escolha de barbearia (Tela 2) — só nasce quando a MESMA senha bate em mais
   de uma conta. Cada linha é um <form method="get"> inteiro (o cartão
   inteiro é o alvo de toque), sem JS: um clique manda pro handoff daquele
   tenant. Mesmo cartão (`.lp-entrar-cartao`) — é a MESMA tela /entrar, só
   trocando o conteúdo de dentro por uma lista em vez do formulário. */
.lp-escolha-lista { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.5rem; }

.lp-escolha-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    padding: .75rem .875rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-1);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--lp-mov-1) var(--lp-ease), background var(--lp-mov-1) var(--lp-ease);
}

.lp-escolha-item:hover { border-color: var(--lp-accent); background: var(--lp-surface-2); }

/* Sem logo hoje (a lista chega só com nome + endereço de entrada) — iniciais
   num círculo, MESMO fallback que `.pl-avatar` já usa quando `TemLogo` é
   falso. Círculo, não o quadrado 16px do `.pl-avatar`: aqui não há foto
   nenhuma pra encaixar, só a letra, e um círculo lê melhor como "identidade
   anônima ainda não confirmada" do que o cantinho quadrado da marca. */
.lp-escolha-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lp-surface-4);
    color: var(--lp-text-2);
    font-family: var(--lp-fonte-display);
    font-size: .94rem;
    font-weight: 700;
}

/* Estado "enviando" do botão primário — mesmo par ícone-girando + rótulo que trocado que
   `Painel/Login.cshtml` já usa (`.pl-girando`/`.pl-entrar-conteudo`), portado pro `--lp-*`: a
   pessoa que já viu isso uma vez (no painel) reconhece o mesmo sinal aqui. `entrar.js` troca o
   texto e revela o ícone; sem JS o botão continua um `<button type="submit">` comum. */
.lp-btn[aria-busy="true"] { opacity: .85; cursor: default; pointer-events: none; }
.lp-btn-conteudo { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; }
.lp-girando[hidden] { display: none; }
.lp-girando { animation: lp-girar 700ms linear infinite; }

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

.lp-escolha-nome { font-weight: 600; color: var(--lp-text); }
.lp-escolha-meta {
    margin-top: 1px;
    font-family: var(--lp-fonte-mono);
    font-size: .78rem;
    color: var(--lp-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 18. Cadastro (wizard) ----------------------------------------------
   Tela cheia dividida: formulario a esquerda, previa ao vivo a direita sobre
   fundo listrado. Sem nav e sem rodape — e um fluxo focado, e link de
   navegacao aqui so da saida para quem estava quase convertendo.

   Tres pecas carregam a personalidade: a REGUA graduada como barra de
   progresso (o nome do produto virando interface), o CHIP do plano visivel
   nas duas etapas, e a previa que nasce em ESQUELETO e se materializa campo
   a campo.
   ----------------------------------------------------------------------- */

.cad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    min-height: 100vh;
}

.cad-form-lado {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(20px, 3vw, 40px) clamp(20px, 3.4vw, 52px) 0;
}

/* --- topo: marca, chip do plano, som --- */

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

.cad-marca { display: flex; align-items: center; gap: .69rem; min-height: 44px; color: var(--lp-text); }
.cad-marca:hover { color: var(--lp-text); }

.cad-marca-texto {
    font-family: var(--lp-fonte-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.cad-marca-na { color: var(--lp-text-3); }
.cad-marca-regua { margin-left: 5px; letter-spacing: -.05em; }

.cad-topo-acoes { display: flex; align-items: center; gap: .625rem; }

/* Chip do plano. <details> nativo: abre sem JS e por teclado. */
.cad-chip-plano { position: relative; }

.cad-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .44rem .75rem;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-pill);
    background: var(--lp-surface-2);
    color: var(--lp-text);
    font-size: .78rem;
    list-style: none;
    cursor: pointer;
    transition: border-color var(--lp-mov-1), color var(--lp-mov-1);
}

.cad-chip::-webkit-details-marker { display: none; }
.cad-chip:hover { border-color: var(--lp-linha-forte); }

.cad-chip-ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-accent);
}

.cad-chip-trocar { color: var(--lp-accent); }

.cad-chip-lista {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: 248px;
    padding: 6px;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-card);
    background: var(--lp-surface-2);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.cad-chip-op {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    min-height: 44px;
    padding: .625rem .69rem;
    border-radius: var(--lp-raio);
    font-size: .81rem;
    cursor: pointer;
    transition: background var(--lp-mov-1);
}

/* Input real fora de vista mas focavel: teclado e leitor de tela intactos. */
.cad-chip-op input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.cad-chip-op:hover { background: var(--lp-surface-3); }
.cad-chip-op:has(input:checked) { background: var(--lp-surface-4); }
.cad-chip-op:has(input:focus-visible) { outline: 2px solid var(--lp-accent); outline-offset: -2px; }
.cad-chip-op-preco { color: var(--lp-text-3); font-size: .75rem; }
.cad-chip-op:has(input:checked) .cad-chip-op-preco { color: var(--lp-accent); }

.cad-som {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-2);
    color: var(--lp-accent);
    cursor: pointer;
    transition: color var(--lp-mov-1), border-color var(--lp-mov-1);
}

.cad-som[hidden] { display: none; }
.cad-som:hover { border-color: var(--lp-linha-forte); }
.cad-som[aria-pressed="false"] { color: var(--lp-text-3); }

/* --- a regua --- */

.cad-regua { margin-top: clamp(20px, 3vh, 34px); }
.cad-regua[hidden] { display: none; }

.cad-regua-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .875rem;
}

.cad-regua-passo {
    font-size: .75rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lp-text-3);
}

.cad-regua-pct {
    font-family: var(--lp-fonte-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.cad-regua-pct span + span { color: var(--lp-text-3); }

.cad-regua-trilho { position: relative; margin-top: .5rem; padding-inline: 10px; }
.cad-regua-trilho svg { display: block; width: 100%; height: 34px; }

/* A tinta avanca por scaleX — so transform, sem relayout a cada tecla. */
.cad-regua-tinta {
    transform: scaleX(var(--cad-pct, 0));
    transform-origin: 0 0;
    transition: transform .5s cubic-bezier(.2, 1.12, .32, 1);
}

.cad-regua-marcos {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 34px;
    pointer-events: none;
}

.cad-marco {
    position: absolute;
    top: 2px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--lp-linha-forte);
    border-radius: 50%;
    background: var(--lp-surface-2);
    transform: translateX(-50%);
    transition: background var(--lp-mov-3), border-color var(--lp-mov-3);
}

/* O "certo" e o ponto da etapa atual dividem a MESMA celula do grid, senao um
   empurra o outro e o ponto cai fora do circulo. */
.cad-marco > * { grid-area: 1 / 1; }
.cad-marco svg { opacity: 0; transition: opacity var(--lp-mov-1); }

/* Etapa atual: ponto ambar. Concluida: preenchida com o "certo". */
.cad-marco--atual { border-color: var(--lp-accent); }

.cad-marco--atual::after {
    content: "";
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-accent);
}

.cad-marco--feito {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
}

.cad-marco--feito svg { opacity: 1; }

/* --- formulario --- */

.cad-form { flex: 1; min-height: 0; padding-block: clamp(18px, 3vh, 30px) 1.125rem; }

.nr-com-js .cad-passo:not([data-passo="1"]) { display: none; }

.cad-titulo { font-size: clamp(1.5rem, 3.1vw, 2.125rem); line-height: 1.08; }
.cad-sub { margin-top: .5rem; font-size: .95rem; line-height: 1.55; color: var(--lp-text-2); max-width: 42ch; }

.cad-campo { margin-top: 1.25rem; max-width: 34rem; }

.cad-campo label {
    display: block;
    margin-bottom: .375rem;
    font-size: .81rem;
    font-weight: 500;
    color: var(--lp-text-2);
}

.cad-opcional { color: var(--lp-text-3); font-weight: 400; }

.cad-input {
    width: 100%;
    min-height: 48px;
    padding: 0 .875rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-2);
    color: var(--lp-text);
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--lp-mov-1) var(--lp-ease);
}

.cad-input::placeholder { color: var(--lp-text-3); }
.cad-input:hover { border-color: color-mix(in srgb, var(--lp-text) 30%, transparent); }
.cad-input:focus-visible { border-color: var(--lp-accent); outline-offset: 0; }

.cad-endereco {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-2);
    overflow: hidden;
    transition: border-color var(--lp-mov-1) var(--lp-ease);
}

.cad-endereco:focus-within { border-color: var(--lp-accent); }
.cad-endereco .cad-input { border: 0; background: none; min-width: 0; flex: 1; }
.cad-endereco .cad-input:focus-visible { outline: none; }

/* Nunca encolhe: dominio pela metade confunde mais do que ajuda. */
.cad-endereco-sufixo {
    display: flex;
    flex: none;
    align-items: center;
    padding-right: .875rem;
    font-size: .94rem;
    color: var(--lp-text-3);
    white-space: nowrap;
}

.cad-dica { margin-top: .375rem; font-size: .8rem; color: var(--lp-text-3); }
.cad-dica--ok { color: var(--lp-pos); }
.cad-dica--erro { color: var(--lp-neg); }

.cad-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 34rem; }
.cad-dupla .cad-campo { max-width: none; }

.cad-aviso {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--lp-text-3);
}

.cad-aviso svg { flex: none; margin-top: 2px; color: var(--lp-accent); }

/* --- rodape de acoes --- */

.cad-rodape {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1.125rem clamp(20px, 3vw, 32px);
    border-top: 1px solid var(--lp-linha);
}

.cad-voltar {
    min-height: 44px;
    padding: 0 .75rem;
    border: 0;
    border-radius: var(--lp-raio);
    background: none;
    color: var(--lp-text-3);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    transition: color var(--lp-mov-1);
}

.cad-voltar[hidden] { display: none; }
.cad-voltar:hover { color: var(--lp-text); }

/* Diz o que falta em vez de so desabilitar o botao: botao morto nao explica. */
.cad-falta {
    flex: 1;
    text-align: right;
    font-size: .81rem;
    color: var(--lp-text-3);
}

/* --- previa --- */

.cad-previa-lado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 3vw, 40px);
    border-left: 1px solid var(--lp-linha);
    background:
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(236, 232, 226, .022) 22px 24px),
        var(--lp-surface-2);
}

.cad-previa-conteudo { display: flex; flex-direction: column; align-items: center; width: 100%; }

.cad-previa-rotulo {
    font-size: .69rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-text-3);
}

.cad-barra-url {
    display: flex;
    align-items: center;
    gap: .44rem;
    max-width: 100%;
    margin-top: .75rem;
    padding: .5rem .875rem;
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-pill);
    background: var(--lp-surface-1);
    font-size: .81rem;
    color: var(--lp-text-3);
}

.cad-barra-url svg { flex: none; color: var(--lp-text-3); }
.cad-barra-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-barra-url b { font-weight: 500; color: var(--lp-text); }

.cad-fone {
    width: 300px;
    max-width: 100%;
    margin-top: 1.125rem;
    padding: 9px;
    border-radius: 34px;
    background: linear-gradient(160deg, #3A3F50, var(--lp-surface-2));
    box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(236, 232, 226, .08);
}

.cad-fone-tela { border-radius: 27px; overflow: hidden; background: var(--lp-surface-1); }

.cad-fone-entalhe {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-surface-2);
}

.cad-fone-entalhe span { width: 56px; height: 5px; border-radius: var(--lp-raio-pill); background: rgba(236, 232, 226, .2); }

.cad-fone-capa {
    height: 76px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--lp-accent) 42%, var(--lp-surface-1)), var(--lp-surface-1));
}

.cad-fone-corpo { position: relative; padding: 2.125rem 1rem 1.125rem; }

.cad-avatar {
    position: absolute;
    top: -22px;
    left: 16px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 2px solid var(--lp-accent);
    border-radius: var(--lp-raio-card);
    background: var(--lp-surface-4);
    overflow: hidden;
}

.cad-avatar-texto {
    font-family: var(--lp-fonte-display);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--lp-accent);
}

.cad-avatar-texto[hidden] { display: none; }

.cad-bloco + .cad-bloco { margin-top: .5rem; }
.cad-fone-nome { font-family: var(--lp-fonte-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }
.cad-fone-nome[hidden], .cad-fone-meta[hidden] { display: none; }
.cad-fone-meta { font-size: .72rem; color: var(--lp-text-2); }

.cad-fone-secao {
    margin-top: 1.25rem;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-text-3);
}

.cad-fone-secao span { text-transform: none; letter-spacing: 0; }

.cad-fone-lista { display: flex; flex-direction: column; gap: .44rem; margin-top: .56rem; }

.cad-fone-cta {
    margin-top: 1.125rem;
    padding: .75rem;
    border-radius: 12px;
    text-align: center;
    background: var(--lp-accent);
    color: var(--lp-sobre-accent);
    font-family: var(--lp-fonte-display);
    font-size: .85rem;
    font-weight: 600;
}

.cad-fone-rodape { margin-top: .625rem; text-align: center; font-size: .63rem; color: var(--lp-text-3); }

/* --- esqueleto ---
   O bloco cinza com brilho passando e o vocabulario universal de "isto ainda
   vai aparecer". E o que faz a previa se anunciar como previa. */

.cad-esqueleto {
    position: relative;
    display: block;
    border-radius: 5px;
    background: #20242F;
    overflow: hidden;
}

.cad-esqueleto[hidden] { display: none; }

.cad-esqueleto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
    animation: cad-brilho 1.4s ease-in-out infinite;
}

.cad-esqueleto--preenche { position: absolute; inset: 0; border-radius: 0; }

@keyframes cad-brilho {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Bloco que acabou de virar conteudo de verdade. */
@keyframes cad-materializa {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.cad-materializa { animation: cad-materializa var(--lp-mov-3) var(--lp-ease); }

/* --- tela "pronto" --- */

.cad-pronto { display: flex; justify-content: center; padding-block: clamp(40px, 7vw, 80px); }

.cad-pronto-cartao {
    width: 100%;
    max-width: 560px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--lp-linha);
    border-radius: var(--lp-raio-lg);
    background: var(--lp-surface-3);
    box-shadow: var(--lp-sombra-alta);
    text-align: center;
}

.cad-selo-ok {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lp-pos) 16%, transparent);
    color: var(--lp-pos);
}

.cad-pronto-cartao h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.cad-pronto-cartao > p { margin-top: .75rem; font-size: .98rem; line-height: 1.55; color: var(--lp-text-2); }

.cad-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: 1.75rem;
    padding: .625rem .625rem .625rem 1rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio);
    background: var(--lp-surface-1);
}

.cad-link-url { flex: 1; min-width: 0; font-size: .94rem; text-align: left; word-break: break-all; }

.cad-link-btn {
    flex: none;
    min-height: 44px;
    padding: 0 .875rem;
    border: 1px solid var(--lp-linha-forte);
    border-radius: var(--lp-raio-sm);
    background: var(--lp-surface-3);
    color: var(--lp-text);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--lp-mov-1), color var(--lp-mov-1);
}

.cad-link-btn:hover { border-color: var(--lp-accent); color: var(--lp-accent); }

.cad-pronto-acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.cad-pronto-acoes .lp-btn { flex: 1; min-width: 190px; }
.cad-pronto-dica { margin-top: 1.5rem; font-size: .85rem; line-height: 1.5; color: var(--lp-text-3); }

/* --- responsivo --- */

@media (max-width: 980px) {
    /* A previa vai para cima: ver o que se ganha antes de preencher. */
    .cad { grid-template-columns: 1fr; min-height: 0; }
    .cad-previa-lado { order: -1; border-left: 0; border-bottom: 1px solid var(--lp-linha); }
    .cad-fone { width: 240px; }
    .cad-form-lado { padding-inline: clamp(20px, 5vw, 40px); }
}

@media (max-width: 480px) {
    .cad-dupla { grid-template-columns: 1fr; }
    .cad-falta { display: none; }
    .cad-rodape .lp-btn { flex: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
    .cad-esqueleto::after { animation: none; }
    .cad-materializa { animation-name: fl-entra-parado; }
    .cad-regua-tinta { transition-duration: .01ms; }
}

/* --- animacoes ---------------------------------------------------------- */

@keyframes lp-varrer {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes lp-halo {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
    50% { transform: translate3d(-2%, 2%, 0) scale(1.1); opacity: .8; }
}

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

/* Palavra do titulo do hero subindo pra dentro — "split text" (§5). */
@keyframes lp-subir {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- responsivo --------------------------------------------------------- */

@media (max-width: 900px) {
    .lp-duas, .lp-tema-duas { grid-template-columns: 1fr; }
    /* A regua so faz sentido ligando colunas lado a lado. */
    .lp-regua { display: none; }
    .lp-flutuante { margin-left: 0; }
    [data-carrossel-item] { width: 250px; }

    /* O card de tema (.lp-cartao-tema) media em torno de 410-420px de
       conteudo nas medidas do desktop — a altura antiga do palco (380px)
       cortava o CTA "Escolher horário" na base, com `overflow: hidden`
       fechando por cima sem aviso nenhum. Duas metades: encolhe o card
       (capa, avatar, espaçamento da lista e do CTA — os mesmos numeros que
       .lp-fone-corpo/.lp-servico ja usam no mockup do hero, entao nada
       novo) e da ao palco altura de sobra em vez de tentar acertar o
       numero exato — texto de barbearia varia de tamanho por tema, e um
       encaixe justo volta a cortar no primeiro nome mais comprido. */
    .lp-carrossel { height: 420px; }

    .lp-cartao-tema { padding: 1rem; }
    .lp-cartao-capa { height: 70px; }
    .lp-cartao-topo { margin-top: -18px; }
    .lp-cartao-avatar { width: 46px; height: 46px; font-size: 1.05rem; }
    .lp-cartao-lista { gap: .5rem; margin-top: 1rem; }
    .lp-cartao-lista .lp-servico { padding: .7rem .75rem; }
    .lp-cartao-cta { margin-top: 1rem; padding: .8rem; }
}

/* --- 17. Movimento reduzido --------------------------------------------- */

/* Desliga deslocamento e loops; mantem os fades, que nao causam desconforto
   vestibular e continuam dizendo que algo chegou. */
@media (prefers-reduced-motion: reduce) {
    /* A logo da abertura aparece pronta, sem desenhar traço por traço — e
       landing.js nem liga o temporizador de saída (ver abertura()), então
       a seção fica parada em 100dvh e segue reto pro nav/hero abaixo. */
    .lp-abertura-lousa-fundo,
    .lp-abertura-lousa-traco,
    .lp-abertura-barra,
    .lp-abertura-dente,
    .lp-abertura-navalha,
    .lp-abertura-palavra-in,
    .lp-abertura-logo-interno,
    .lp-abertura-regua line {
        animation: none;
    }
    .lp-abertura-lousa-fundo,
    .lp-abertura-lousa-traco,
    .lp-abertura-barra,
    .lp-abertura-dente,
    .lp-abertura-navalha,
    .lp-abertura-regua line { opacity: 1; stroke-dashoffset: 0; }
    .lp-abertura-palavra-in { clip-path: none; }
    .lp-abertura-logo-interno { grid-template-columns: auto 1fr; gap: .62em; }

    .lp-girando { animation: none; }

    .lp-hero-halo,
    .lp-flutuante,
    .lp-risco::after,
    .lp-hero-palavra,
    .lp-brilho-texto,
    .lp-btn--brilho::before {
        animation: none;
    }

    /* Sem a varredura em loop, o botao fica só com o brilho estático do
       gradient-border (já coberto por --lp-sombra-accent) — nada pisca. */
    .lp-btn--brilho::before { opacity: 0; }

    .lp-risco::after { transform: none; }
    .lp-hero-palavra { opacity: 1; }
    /* Sem a varredura, o brilho vira so a cor mais clara do acento — ainda
       le como destaque, so nao pisca. */
    .lp-brilho-texto { background: none; -webkit-text-fill-color: initial; color: var(--lp-accent-hi); }

    /* landing.js tambem checa matchMedia antes de ligar rotativa/tilt/
       carrossel/stepper/progresso — isto e so o cinto e suspensorio pro
       caso de o script falhar no meio. */
    [data-tilt-fone] { transition: none; transform: none !important; }
    .lp-hero-rotativa { transition: none; }
    [data-carrossel-item] { transition: none; }
    .lp-progresso-barra { transition: none; }
    .lp-nav-pilula { transition: opacity var(--lp-mov-1) linear; }
    /* Painel mobile: mantem o fade de entrada, tira o deslize de 6px. */
    .lp-nav-grupo { transform: none; transition: opacity var(--lp-mov-1) linear, visibility 0s linear var(--lp-mov-1); }
    .lp-nav[data-nav-aberto] .lp-nav-grupo { transition: opacity var(--lp-mov-1) linear; }

    [data-reveal] { transition: opacity var(--lp-mov-2) linear; }

    .lp-fone-corpo .lp-servico,
    .lp-fone-corpo .lp-fone-cta {
        animation: none;
        opacity: 1;
    }

    .lp-btn,
    .lp-btn--brilho::before,
    .lp-brilho-hover::after,
    .lp-valor,
    .lp-plano,
    .lp-tema,
    .lp-capa,
    .lp-avatar,
    .lp-servico,
    .lp-servico-preco,
    .lp-fone-cta,
    .lp-faq-seta,
    .lp-bento-card,
    .lp-bento-tela img {
        transition-duration: .01ms;
    }

    .lp-btn--primario:hover,
    .lp-valor:hover,
    .lp-plano:hover,
    .lp-plano--destaque:hover,
    .lp-bento-card:hover,
    .lp-bento-card:hover .lp-bento-tela img,
    .lp-tema:active {
        transform: none;
    }
}

/* --- 19. Console (login do admin da plataforma) -------------------------
   Mesma familia da landing em REGISTRO INVERTIDO. Na landing o ambar ocupa
   ~10% da tela; aqui cai para ~2% — o botao primario e o anel de foco, nada
   mais. O calor que sobra vem da coluna de marca (textura + halo sob a logo),
   nunca de superficie colorida.

   As superficies tambem descem um degrau em relacao a landing: este e o
   ambiente interno, e a diferenca de profundidade e o primeiro sinal de que
   quem entra aqui nao esta mais no site publico.
   ----------------------------------------------------------------------- */

:root {
    --cs-bg: #0C1018;         /* mais profundo que o --lp-surface-1 da landing */
    --cs-surface-1: #151A26;  /* coluna de marca */
    --cs-surface-2: #1B2131;  /* campos */
    --cs-borda: #262D3D;
    --cs-borda-hi: rgba(56, 65, 86, .5);
}

.cs-body { background: var(--cs-bg); }

/* `minmax(0, ...)` e nao `48fr 52fr` puro: uma coluna `fr` tem min-width auto,
   entao ela para de encolher no min-content do conteudo — e os 380px do
   formulario mais o respiro estouravam a tela de 390px. */
.cs {
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    min-height: 100dvh;
}

/* --- coluna de marca --- */

.cs-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
    padding: clamp(28px, 3.4vw, 48px);
    background: var(--cs-surface-1);
    border-right: 1px solid var(--cs-borda);
}

/* Textura e halo sao decoracao pura: fora do fluxo, sem captar ponteiro. */
.cs-textura,
.cs-halo {
    position: absolute;
    pointer-events: none;
}

.cs-textura {
    inset: 0;
    opacity: .04;
    background: repeating-linear-gradient(135deg, transparent 0 14px, var(--lp-text) 14px 16px);
}

.cs-halo {
    top: -180px;
    left: -140px;
    width: 620px;
    height: 520px;
    background: radial-gradient(closest-side, var(--lp-accent-veu), transparent 70%);
}

.cs-marca-topo,
.cs-marca-meio,
.cs-marca-pe { position: relative; }

.cs-marca-topo { display: flex; flex-direction: column; gap: .625rem; }

/* Tracking largo em corpo pequeno: le como software corporativo, nao como
   terminal de servidor — que seria a leitura de uma monoespacada aqui. */
.cs-descritor {
    font-size: .69rem;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--lp-text-2);
}

.cs-marca-meio { max-width: 30ch; }
.cs-marca-meio h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15; }

.cs-marca-meio p {
    margin-top: .875rem;
    max-width: 40ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--lp-text-2);
}

.cs-marca-pe { font-size: .72rem; color: var(--lp-text-3); }

/* --- coluna do formulario --- */

.cs-form-lado {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(28px, 3vw, 48px);
}

/* Chip de ambiente: existe para o operador nao agir no ambiente errado. Fica
   no canto, fora do fluxo do formulario, para nunca empurrar campo. */
.cs-ambiente {
    position: absolute;
    top: clamp(24px, 2.6vw, 40px);
    right: clamp(24px, 2.6vw, 40px);
    padding: 5px 10px;
    border: 1px solid var(--cs-borda);
    border-radius: 5px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lp-text-2);
}

.cs-ambiente--producao { border-color: var(--lp-neg); color: var(--lp-neg); }

.cs-form { width: 380px; max-width: 100%; }

.cs-titulo { font-size: clamp(1.5rem, 2.3vw, 1.75rem); line-height: 1.15; }
.cs-sub { margin-top: .5rem; font-size: .875rem; color: var(--lp-text-2); }

.cs-campos {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    margin-top: 2.5rem;
}

.cs-campo label {
    display: block;
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--lp-text-2);
}

.cs-input {
    width: 100%;
    min-height: 48px;
    padding: 0 .875rem;
    border: 1px solid var(--cs-borda);
    border-radius: 9px;
    background: var(--cs-surface-2);
    color: var(--lp-text);
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--lp-mov-1) var(--lp-ease), box-shadow var(--lp-mov-1) var(--lp-ease);
}

.cs-input::placeholder { color: var(--lp-text-3); }

.cs-input:focus-visible {
    border-color: var(--lp-accent);
    box-shadow: 0 0 0 2px var(--lp-accent-fraco);
    outline-offset: 0;
}

/* O preenchimento automatico do Chrome pinta o campo de branco: a sombra
   interna de 1000px e a unica forma de devolver o fundo escuro. */
.cs-input:-webkit-autofill,
.cs-input:-webkit-autofill:hover,
.cs-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lp-text);
    -webkit-box-shadow: 0 0 0 1000px var(--cs-surface-2) inset;
    caret-color: var(--lp-text);
    transition: background-color 9999s ease-in-out 0s;
}

.cs-senha { position: relative; }
.cs-senha .cs-input { padding-right: 52px; }

/* Nasce oculto: sem JS o botao nao faria nada, e controle morto engana mais
   do que ajuda. O `[hidden]` precisa vencer o `display: grid` da classe — e,
   nos dois icones, o `svg { display: block }` da secao 2, senao o olho aberto
   e o olho cortado aparecem empilhados. */
.cs-olho[hidden], .cs-olho svg[hidden] { display: none; }

.cs-olho {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;   /* alvo de toque minimo; cabe nos 48px do campo */
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--lp-text-2);
    cursor: pointer;
    transition: color var(--lp-mov-1) var(--lp-ease), background var(--lp-mov-1) var(--lp-ease);
}

.cs-olho:hover { color: var(--lp-text); background: rgba(236, 232, 226, .05); }

.cs-caps[hidden] { display: none; }

.cs-caps {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--lp-text-2);
}

.cs-caps svg { flex: none; color: var(--lp-accent); }

.cs-linha {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

/* <details> em vez de popover em JS: o mesmo desenho, com teclado e Escape
   nativos e sem depender de script nenhum. */
.cs-ajuda { position: relative; }

.cs-ajuda summary {
    display: inline-block;
    min-height: 44px;
    padding: .75rem 0;
    font-size: .78rem;
    color: var(--lp-text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.cs-ajuda summary::-webkit-details-marker { display: none; }
.cs-ajuda summary:hover { color: var(--lp-text); }

.cs-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + .375rem);
    z-index: 5;
    width: 252px;
    padding: .875rem;
    border: 1px solid var(--cs-borda-hi);
    border-radius: 10px;
    background: var(--cs-surface-2);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
    font-size: .78rem;
    line-height: 1.55;
    color: var(--lp-text-2);
}

.cs-erro {
    display: flex;
    gap: .5rem;
    padding: .75rem .875rem;
    border: 1px solid rgba(226, 88, 92, .35);
    border-radius: var(--lp-raio);
    background: rgba(226, 88, 92, .08);
    font-size: .82rem;
    color: #F3A5A7;
}

.cs-erro svg { flex: none; margin-top: 2px; }
.cs-erro--bloqueio { border-color: var(--lp-accent-borda); background: var(--lp-accent-fraco); color: var(--lp-accent-hi); }

.cs-entrar {
    min-height: 52px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--lp-accent-hi), var(--lp-accent));
    color: var(--lp-sobre-accent);
    font: inherit;
    font-size: .94rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--lp-mov-1) var(--lp-ease), transform var(--lp-mov-1) var(--lp-ease);
}

.cs-entrar:hover { filter: brightness(1.08); }
.cs-entrar:active { transform: translateY(1px); }

/* Enquanto o POST viaja: o botao continua legivel, so para de convidar. */
.cs-entrar[aria-busy="true"] {
    opacity: .85;
    cursor: default;
    pointer-events: none;
}

.cs-entrar-conteudo { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.cs-girando[hidden] { display: none; }
.cs-girando { animation: cs-girar 700ms linear infinite; }

/* O tremor confirma que a tentativa foi recusada AGORA, e nao que a pagina
   sempre esteve assim — a mensagem sozinha nao distingue os dois casos. */
.cs-form--recusado { animation: cs-tremer 300ms var(--lp-ease); }

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

@keyframes cs-tremer {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
    90% { transform: translateX(2px); }
}

/* --- responsivo --- */

/* Abaixo de 1024px a coluna de marca vira faixa curta no topo: o formulario
   e o unico objetivo da tela, e ele fica com a altura toda. */
@media (max-width: 1023px) {
    .cs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }

    .cs-marca {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        border-right: 0;
        border-bottom: 1px solid var(--cs-borda);
    }

    .cs-marca-topo { flex-direction: row; align-items: center; gap: 1rem; }
    .cs-marca-meio, .cs-marca-pe { display: none; }

    /* O respiro no topo e a faixa do chip: ele continua fora do fluxo, e
       centrar o formulario no espaco restante o mantem longe dali. */
    .cs-form-lado { padding: 3.5rem 1.5rem 1.5rem; }
    .cs-ambiente { top: 1.25rem; right: 1.25rem; }
}

@media (max-width: 639px) {
    .cs-descritor { display: none; }
    .cs-form-lado { padding: 1.25rem; }
}

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

@media (prefers-reduced-motion: reduce) {
    .cs-form--recusado, .cs-girando { animation: none; }
    .cs-input, .cs-olho, .cs-entrar { transition-duration: .01ms; }
    .cs-entrar:active { transform: none; }
}