/*
 * Retratado — folha única, organizada em FONTE → TOKEN → BASE → ESTRUTURA →
 * COMPONENTE → VITRINE → TELAS MAIORES. Classe nova entra na seção do
 * componente dela; a folha é sistema, não pilha.
 *
 * Três decisões valem para o arquivo inteiro:
 *
 * 1. ⚠⚠ **A COR FICA NAS FOTOS.** A interface é grafite e branco, com um
 *    acento frio usado só onde a pessoa precisa agir. Num produto cujo
 *    conteúdo é a imagem de outra pessoa, interface colorida disputa
 *    atenção com o trabalho do cliente — é por isso que galeria de arte
 *    pinta a parede de branco e museu pinta de preto.
 *
 * 2. Os tokens têm nome SEMÂNTICO (`--marca`, `--tinta`), nunca o nome da
 *    cor. A primeira versão deste arquivo usava `--ambar`, e o dia em que a
 *    cor mudou o nome passou a mentir. Regra do cluster desde 2026-08-21.
 *
 * 3. ⚠ MOBILE FIRST. As duas pontas deste produto vivem no celular: o
 *    fotógrafo opera de pé no ponto turístico e o cliente abre a galeria
 *    pela câmera. O estilo base é o do celular; telas maiores entram por
 *    `min-width`, no fim do arquivo.
 */

/* ── FONTE ──────────────────────────────────────────────────────────── */

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

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

/* ── TOKEN ──────────────────────────────────────────────────────────── */

:root {
    /* Papel — superfícies, da página para cima. A página é a mesa de
       edição; o cartão é a prova apoiada sobre ela. No claro quem separa
       as camadas é a SOMBRA, não a aresta de luz. */
    --papel-0: #f4f4f5;
    --papel-1: #ffffff;
    --papel-2: #ebebee;
    --papel-3: #e0e0e4;
    --linha: #e2e2e6;
    --linha-forte: #c8c8cf;

    /* Tinta — texto, do principal ao apagado. `tinta-2` passa de 7:1 sobre
       `papel-1`; texto pequeno nunca usa menos que ele. `tinta-3` é para
       número grande e decoração. */
    --tinta: #18181b;
    --tinta-2: #52525b;
    --tinta-3: #8b8b95;

    /* Marca — o grafite frio de agir. Uma cor só, dosada: botão principal,
       estado ativo, foco. Acento que aparece em todo canto deixa de
       apontar para onde olhar. */
    --marca: #27272e;
    --marca-vivo: #101014;
    --marca-suave: #eaeaee;

    /* Elo — o único azul do produto, e só onde há LINK ou FOCO. Ele existe
       porque texto clicável precisa se distinguir de texto comum sem
       depender de sublinhado em toda parte. */
    --elo: #2563eb;
    --elo-veu: rgba(37, 99, 235, 0.14);

    /* Estados. Verde e vermelho aparecem SÓ com significado — publicado,
       expirado, erro — e nunca como enfeite. */
    --bom: #15803d;
    --bom-veu: #e8f3ec;
    --atencao: #b45309;
    --atencao-veu: #fbf0e2;
    --ruim: #b91c1c;
    --ruim-veu: #fbeaea;

    /* Moldura de luz: a borda do cartão de sessão acende conforme o
       trabalho avança, e o fotógrafo lê o dia pela cor antes do texto. */
    --tom-espera: #a1a1aa;
    --tom-quase: #b45309;
    --tom-no-ar: #15803d;
    --tom-apagado: #b91c1c;
    --tom-guardado: #71717a;

    /* A galeria do cliente é escura SEMPRE, em qualquer tema do aparelho:
       fundo neutro escuro faz a foto virar o objeto iluminado da tela. */
    --palco: #0b0b0d;
    --palco-2: #16161a;
    --palco-texto: #f4f4f5;
    --palco-apagado: rgba(244, 244, 245, 0.62);
    --palco-linha: rgba(244, 244, 245, 0.12);

    --raio: 12px;
    --raio-pequeno: 8px;
    --raio-grande: 20px;

    /* Escala de espaço: tudo no layout sai daqui, para o ritmo da página
       não depender de número escolhido na hora. */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;
    --e7: 48px;
    --e8: 64px;

    --sombra-baixa: 0 1px 2px rgba(24, 24, 27, 0.06), 0 2px 8px rgba(24, 24, 27, 0.04);
    --sombra-alta: 0 4px 12px rgba(24, 24, 27, 0.08), 0 12px 32px rgba(24, 24, 27, 0.08);

    --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --largura-max: 1180px;
    --largura-texto: 660px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --papel-0: #0e0e10;
        --papel-1: #17171a;
        --papel-2: #1e1e22;
        --papel-3: #26262b;
        --linha: #2a2a30;
        --linha-forte: #3d3d45;

        --tinta: #f4f4f5;
        --tinta-2: #b2b2ba;
        --tinta-3: #85858e;

        --marca: #e4e4e8;
        --marca-vivo: #ffffff;
        --marca-suave: #26262b;

        --elo: #7ea6ff;
        --elo-veu: rgba(126, 166, 255, 0.16);

        --bom: #4ade80;
        --bom-veu: #14251a;
        --atencao: #fbbf24;
        --atencao-veu: #2a1f0e;
        --ruim: #f87171;
        --ruim-veu: #2a1414;

        --tom-espera: #52525b;
        --tom-quase: #d97706;
        --tom-no-ar: #22c55e;
        --tom-apagado: #ef4444;
        --tom-guardado: #52525b;

        --sombra-baixa: 0 1px 2px rgba(0, 0, 0, 0.5);
        --sombra-alta: 0 8px 28px rgba(0, 0, 0, 0.6);
    }
}

/* ── BASE ───────────────────────────────────────────────────────────── */

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

body {
    margin: 0;
    background: var(--papel-0);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    line-height: 1.18;
    margin: 0;
    font-weight: 640;
    letter-spacing: -0.021em;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

h3 {
    font-size: 1rem;
}

p {
    margin: 0;
}

a {
    color: var(--elo);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

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

:focus-visible {
    outline: 2px solid var(--elo);
    outline-offset: 2px;
    border-radius: var(--raio-pequeno);
}

/* Atalho para quem navega por teclado: some da vista, aparece no foco. */
.pular {
    position: absolute;
    left: -9999px;
    top: var(--e3);
    background: var(--papel-1);
    padding: var(--e3) var(--e4);
    border-radius: var(--raio-pequeno);
    z-index: 100;
}

.pular:focus {
    left: var(--e4);
}

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

/* ── ESTRUTURA ──────────────────────────────────────────────────────── */

.pagina {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.faixa {
    width: 100%;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 var(--e4);
}

.faixa--estreita {
    max-width: 520px;
}

.topo {
    background: var(--papel-1);
    border-bottom: 1px solid var(--linha);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topo__interno {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 56px;
}

/* No celular o menu ROLA na horizontal em vez de quebrar em duas linhas:
   a barra fica com altura previsível e o polegar arrasta. */
.topo__menu {
    display: flex;
    align-items: center;
    gap: var(--e4);
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

.topo__link {
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 0.94rem;
    padding: var(--e2) 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.topo__link:hover {
    color: var(--tinta);
}

.topo__link--ativo {
    color: var(--tinta);
    border-bottom-color: var(--marca);
}

.corpo {
    flex: 1;
    padding: var(--e5) 0 var(--e7);
}

.rodape {
    border-top: 1px solid var(--linha);
    padding: var(--e5) 0;
    color: var(--tinta-3);
    font-size: 0.85rem;
}

/* O espaço entre irmãos é do CONTINENTE, não de cada peça. */
.empilhado {
    display: flex;
    flex-direction: column;
    gap: var(--e5);
}

.empilhado--curto {
    gap: var(--e3);
}

.linha {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
}

.linha--fim {
    justify-content: flex-end;
}

.linha--entre {
    justify-content: space-between;
}

.cabecalho-tela {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e4);
    margin-bottom: var(--e5);
}

.cabecalho-tela > .botao,
.cabecalho-tela .linha > .botao,
.cabecalho-tela .linha > form > .botao {
    width: 100%;
}

.cabecalho-tela__texto {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.subtitulo {
    color: var(--tinta-2);
    font-size: 0.95rem;
}

.lista {
    padding-left: 1.1rem;
    margin: 0;
}

.documento {
    text-align: left;
}

.documento h2 {
    margin-top: var(--e4);
}

.campo--cresce {
    flex: 1 1 240px;
}

.campo--fixo {
    flex: 0 1 200px;
}

/* ── COMPONENTE: marca ──────────────────────────────────────────────── */

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-weight: 660;
    font-size: 1.05rem;
    letter-spacing: -0.025em;
    color: var(--tinta);
    text-decoration: none;
}

.marca--centro {
    justify-content: center;
}

/*
 * O símbolo: um retângulo de proporção fotográfica com um ponto de luz no
 * canto — o enquadramento e o instante do disparo. Desenhado em CSS, sem
 * arquivo e sem requisição.
 */
.marca__signo {
    width: 26px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: relative;
    flex: none;
}

.marca__signo::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* ── COMPONENTE: cartão e moldura de luz ────────────────────────────── */

.cartao {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-baixa);
    padding: var(--e4);
}

/*
 * A MOLDURA DE LUZ — o elemento que só existe neste produto. A borda
 * superior do cartão acende conforme o trabalho avança, e o fotógrafo lê o
 * andamento do dia pela cor antes de ler qualquer texto. O degradê some
 * para a direita porque luz não termina em linha reta.
 */
.moldura {
    position: relative;
    isolation: isolate;
}

.moldura::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--raio) var(--raio) 0 0;
    background: linear-gradient(90deg, var(--moldura-tom, var(--tom-espera)) 0%, var(--moldura-tom, var(--tom-espera)) 35%, transparent 100%);
}

.moldura--espera {
    --moldura-tom: var(--tom-espera);
}

.moldura--quase {
    --moldura-tom: var(--tom-quase);
}

.moldura--no-ar {
    --moldura-tom: var(--tom-no-ar);
}

.moldura--apagado {
    --moldura-tom: var(--tom-apagado);
}

.moldura--guardado {
    --moldura-tom: var(--tom-guardado);
}

/* ── COMPONENTE: botão ──────────────────────────────────────────────── */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: 11px 18px;
    min-height: 44px;
    border-radius: var(--raio-pequeno);
    border: 1px solid transparent;
    background: var(--marca);
    color: var(--papel-1);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

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

.botao[disabled],
.botao[aria-busy="true"] {
    opacity: 0.65;
    cursor: progress;
}

.botao--secundario {
    background: transparent;
    border-color: var(--linha-forte);
    color: var(--tinta);
}

.botao--secundario:hover {
    background: var(--marca-suave);
    border-color: var(--marca);
}

.botao--discreto {
    background: transparent;
    color: var(--tinta-2);
    padding-left: var(--e3);
    padding-right: var(--e3);
}

.botao--discreto:hover {
    background: var(--papel-2);
    color: var(--tinta);
}

.botao--perigo {
    background: transparent;
    border-color: var(--linha-forte);
    color: var(--ruim);
}

.botao--perigo:hover {
    background: var(--ruim-veu);
    border-color: var(--ruim);
}

.botao--grande {
    padding: 14px 24px;
    min-height: 52px;
    font-size: 1rem;
}

.botao--largo {
    width: 100%;
}

/* ── COMPONENTE: formulário ─────────────────────────────────────────── */

.forma {
    max-width: var(--largura-texto);
    display: flex;
    flex-direction: column;
    gap: var(--e5);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

.campo__rotulo {
    font-weight: 600;
    font-size: 0.92rem;
}

.campo__dica {
    color: var(--tinta-3);
    font-size: 0.85rem;
}

.campo__erro {
    color: var(--ruim);
    font-size: 0.85rem;
}

.entrada,
.selecao,
.area {
    width: 100%;
    padding: 11px 13px;
    min-height: 44px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    background: var(--papel-1);
    color: var(--tinta);
    font: inherit;
    font-size: 0.98rem;
}

.area {
    min-height: 96px;
    resize: vertical;
    /* Sem isto a quebra de linha que a pessoa digitou some na exibição. */
    white-space: pre-wrap;
}

.entrada:focus,
.selecao:focus,
.area:focus {
    border-color: var(--elo);
    outline: none;
    box-shadow: 0 0 0 3px var(--elo-veu);
}

.entrada[aria-invalid="true"] {
    border-color: var(--ruim);
}

.grade-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
}

/* ── COMPONENTE: aviso ──────────────────────────────────────────────── */

.aviso {
    padding: var(--e3) var(--e4);
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--linha-forte);
    background: var(--papel-1);
    font-size: 0.93rem;
}

.aviso--bom {
    background: var(--bom-veu);
    border-color: var(--bom);
    color: var(--bom);
}

.aviso--ruim {
    background: var(--ruim-veu);
    border-color: var(--ruim);
    color: var(--ruim);
}

.recado {
    margin-bottom: var(--e5);
}

/* ── COMPONENTE: etiqueta ───────────────────────────────────────────── */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--papel-2);
    color: var(--tinta-2);
    border: 1px solid var(--linha);
}

.etiqueta__ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--etiqueta-tom, var(--tom-espera));
    flex: none;
}

.etiqueta--espera {
    --etiqueta-tom: var(--tom-espera);
}

.etiqueta--quase {
    --etiqueta-tom: var(--tom-quase);
}

.etiqueta--no-ar {
    --etiqueta-tom: var(--tom-no-ar);
}

.etiqueta--apagado {
    --etiqueta-tom: var(--tom-apagado);
}

.etiqueta--guardado {
    --etiqueta-tom: var(--tom-guardado);
}

/* ── COMPONENTE: código da sessão ───────────────────────────────────── */

/*
 * O código é ditado, digitado e lido em papel. Fonte de largura fixa e
 * espaçamento generoso: em fonte proporcional, quem lê confunde caractere e
 * digita errado — e culpa o fotógrafo.
 */
.codigo {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.14em;
    font-weight: 640;
    font-variant-ligatures: none;
}

.codigo--grande {
    font-size: 2rem;
}

/* ── COMPONENTE: lista de sessões ───────────────────────────────────── */

.sessoes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}

.sessao-cartao {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    text-decoration: none;
    color: inherit;
}

.sessao-cartao:hover {
    box-shadow: var(--sombra-alta);
}

.sessao-cartao__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
}

.sessao-cartao__titulo {
    font-weight: 640;
    font-size: 1.02rem;
}

.sessao-cartao__meta {
    color: var(--tinta-2);
    font-size: 0.88rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1) var(--e3);
}

.sessao-cartao__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    border-top: 1px solid var(--linha);
    padding-top: var(--e3);
    font-size: 0.88rem;
    color: var(--tinta-2);
}

.sessao-cartao__passo {
    color: var(--tinta);
    font-weight: 600;
}

/* ── COMPONENTE: estado vazio ───────────────────────────────────────── */

.vazio {
    text-align: center;
    padding: var(--e7) var(--e4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e3);
}

.vazio__signo {
    width: 64px;
    height: 48px;
    border: 3px solid var(--linha-forte);
    border-radius: 8px;
    position: relative;
    margin-bottom: var(--e2);
}

.vazio__signo::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--linha-forte);
}

.vazio__titulo {
    font-size: 1.15rem;
    font-weight: 640;
}

.vazio__texto {
    color: var(--tinta-2);
    max-width: 420px;
}

/* ── COMPONENTE: modo entrega ───────────────────────────────────────── */

/*
 * A tela que o fotógrafo vira para o cliente. Ela tem UMA função: ser lida
 * por uma câmera a meio metro, no sol. Por isso o QR ocupa o máximo
 * possível, o contraste é FIXO (não segue o tema do aparelho — QR invertido
 * não lê) e não há mais nada na tela.
 */
.entrega {
    min-height: 100vh;
    background: #ffffff;
    color: #18181b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e5);
    padding: var(--e5);
    text-align: center;
}

.entrega__chamada {
    font-size: 1.5rem;
    font-weight: 660;
    letter-spacing: -0.025em;
}

.entrega__qr {
    width: min(78vw, 380px);
    padding: var(--e4);
    background: #fff;
    border-radius: var(--raio-grande);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/*
 * ⚠⚠ O SVG do QR nasce com largura FIXA (o gerador escreve width="380" na
 * tag), e sem esta regra ele ignora o container: num celular de 390px a
 * página ganhava rolagem horizontal e o código saía CORTADO na direita.
 * QR cortado não é lido por câmera nenhuma — a tela mais importante do
 * produto quebrava exatamente onde ela é usada.
 */
.entrega__qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.entrega__codigo {
    font-size: 2.2rem;
}

.entrega__instrucao {
    color: #52525b;
    font-size: 1.05rem;
    max-width: 320px;
}

.entrega__sair {
    position: fixed;
    top: var(--e4);
    right: var(--e4);
    color: #8b8b95;
    text-decoration: none;
    font-size: 0.9rem;
    padding: var(--e2) var(--e3);
}

/* ── COMPONENTE: galeria pública ────────────────────────────────────── */

/* Sempre escura, em qualquer tema do aparelho: aqui a foto é o objeto
   iluminado e todo o resto sai da frente. */
.galeria {
    min-height: 100vh;
    background: var(--palco);
    color: var(--palco-texto);
}

.galeria__topo {
    padding: var(--e5) var(--e5) var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    align-items: center;
    text-align: center;
    border-bottom: 1px solid var(--palco-linha);
}

.galeria__autor {
    font-size: 1.35rem;
    font-weight: 660;
    letter-spacing: -0.025em;
}

.galeria__meta {
    color: var(--palco-apagado);
    font-size: 0.92rem;
}

.galeria__mensagem {
    max-width: 520px;
    color: rgba(244, 244, 245, 0.8);
    white-space: pre-wrap;
    margin-top: var(--e2);
}

.galeria__barra {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(11, 11, 13, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--palco-linha);
    padding: var(--e3) var(--e5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    flex-wrap: wrap;
}

.galeria__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--e2);
    padding: var(--e2);
}

.galeria__grade--interna {
    padding: 0;
}

.foto {
    position: relative;
    display: block;
    border: 0;
    padding: 0;
    background: var(--palco-2);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 1;
}

.foto--estatica {
    cursor: default;
}

.foto__imagem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.foto:hover .foto__imagem {
    transform: scale(1.04);
}

.foto__coracao {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(11, 11, 13, 0.55);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.foto__coracao[aria-pressed="true"] {
    background: var(--ruim);
}

.foto__excluir {
    position: absolute;
    right: 6px;
    top: 6px;
}

.galeria__rodape {
    padding: var(--e6) var(--e5) var(--e8);
    text-align: center;
    color: var(--palco-apagado);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    align-items: center;
}

.galeria__contato {
    display: flex;
    gap: var(--e4);
    flex-wrap: wrap;
    justify-content: center;
}

.galeria__contato a {
    color: var(--palco-texto);
    text-decoration: none;
    border-bottom: 1px solid var(--palco-linha);
}

/* Tela cheia, sem biblioteca: um <dialog> nativo. */
.lupa {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
}

.lupa::backdrop {
    background: rgba(6, 6, 7, 0.95);
}

.lupa__quadro {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e4);
}

.lupa__imagem {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--raio-pequeno);
}

.lupa__fechar,
.lupa__passo {
    position: fixed;
    background: rgba(244, 244, 245, 0.12);
    color: var(--palco-texto);
    border: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lupa__fechar {
    top: var(--e4);
    right: var(--e4);
}

.lupa__passo--antes {
    left: var(--e4);
    top: 50%;
    transform: translateY(-50%);
}

.lupa__passo--depois {
    right: var(--e4);
    top: 50%;
    transform: translateY(-50%);
}

.lupa__acoes {
    position: fixed;
    bottom: var(--e5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--e3);
}

/* ── COMPONENTE: painel de números ──────────────────────────────────── */

.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--e3);
}

.numero {
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.numero__valor {
    font-size: 1.65rem;
    font-weight: 660;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.numero__rotulo {
    color: var(--tinta-2);
    font-size: 0.86rem;
}

/* ── COMPONENTE: barra de armazenamento ─────────────────────────────── */

.cota {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

.cota__trilho {
    height: 8px;
    border-radius: 999px;
    background: var(--papel-3);
    overflow: hidden;
}

.cota__cheio {
    height: 100%;
    background: var(--marca);
    border-radius: 999px;
}

.cota__cheio--apertado {
    background: var(--atencao);
}

/* ── VITRINE (a capa) ───────────────────────────────────────────────── */

/*
 * A página comercial. Ela vive no mesmo arquivo do produto porque divide os
 * tokens — cor que muda no produto muda na vitrine junto, sem ninguém
 * lembrar de dois lugares.
 *
 * A assinatura visual daqui é o ENQUADRAMENTO: cantos de moldura, grade de
 * contatos, o retângulo 3:2. Nada de gradiente colorido — a cor entra pelas
 * fotos de exemplo, que são o produto.
 */

.lp {
    background: var(--papel-1);
}

.lp-largura {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--e4);
}

.lp-secao {
    padding: var(--e7) 0;
}

.lp-secao--tinta {
    background: var(--papel-0);
    border-block: 1px solid var(--linha);
}

.lp-secao--palco {
    background: var(--palco);
    color: var(--palco-texto);
}

.lp-cabeca {
    max-width: 640px;
    margin: 0 auto var(--e6);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.lp-etiqueta {
    font-size: 0.78rem;
    font-weight: 640;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.lp-h {
    font-size: 1.55rem;
    font-weight: 640;
    letter-spacing: -0.028em;
    line-height: 1.15;
}

.lp-sub {
    color: var(--tinta-2);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* ── Vitrine: topo ──────────────────────────────────────────────────── */

.lp-topo {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linha);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .lp-topo {
        background: rgba(23, 23, 26, 0.88);
    }
}

.lp-topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 60px;
}

.lp-topo-menu {
    display: none;
    gap: var(--e5);
}

.lp-topo-menu a {
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 0.94rem;
}

.lp-topo-menu a:hover {
    color: var(--tinta);
}

/* ── Vitrine: primeira dobra ────────────────────────────────────────── */

.lp-heroi {
    padding: var(--e6) 0 var(--e7);
    display: flex;
    flex-direction: column;
    gap: var(--e6);
}

.lp-heroi-texto {
    display: flex;
    flex-direction: column;
    gap: var(--e4);
    align-items: flex-start;
}

.lp-selo {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--papel-2);
    border: 1px solid var(--linha);
    font-size: 0.82rem;
    font-weight: 580;
    color: var(--tinta-2);
}

.lp-titulo {
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 660;
    margin: 0;
}

/* A segunda linha do título é a promessa; ela recebe o peso, não a cor. */
.lp-titulo span {
    color: var(--tinta-3);
}

.lp-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    width: 100%;
}

.lp-ctas .botao {
    width: 100%;
}

.lp-confia {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
    color: var(--tinta-3);
    font-size: 0.86rem;
}

.lp-confia li {
    display: flex;
    align-items: center;
    gap: var(--e1);
}

/*
 * O PALCO: o produto desenhado em marcação, não fotografado.
 *
 * Captura de tela envelhece a cada deploy e pesa centenas de KB; desenho em
 * CSS acompanha a paleta sozinho e continua nítido em qualquer densidade.
 * Aqui ele mostra as duas pontas ao mesmo tempo — o cartão com o QR que o
 * fotógrafo entrega, e o celular do cliente com as fotos já na tela. É a
 * cena inteira do produto num quadro só.
 */
.lp-palco {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--e4);
    padding: var(--e5) 0;
}

.lp-cartao-qr {
    width: 150px;
    flex: none;
    background: var(--papel-1);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: var(--e4) var(--e3);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    transform: rotate(-4deg);
}

.lp-cartao-chamada {
    font-size: 0.72rem;
    font-weight: 640;
    letter-spacing: -0.01em;
}

/* ⚠ O QR do palco é um SVG desenhado, e não uma grade de gradientes.
   A primeira versão usava `conic-gradient` e o resultado lia como RUÍDO,
   não como código: faltavam as três âncoras dos cantos, que é justamente
   o que o olho reconhece à distância. Não é um código válido nem quer
   ser — é a silhueta. */
.lp-qr {
    width: 100%;
    display: block;
}

.lp-cartao-codigo {
    font-size: 0.82rem;
}

.lp-fone {
    width: 190px;
    flex: none;
    border-radius: 26px;
    border: 8px solid var(--tinta);
    background: var(--palco);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}

.lp-fone-topo {
    padding: var(--e3) var(--e3) var(--e2);
    text-align: center;
    color: var(--palco-texto);
    border-bottom: 1px solid var(--palco-linha);
}

.lp-fone-autor {
    font-size: 0.74rem;
    font-weight: 640;
}

.lp-fone-meta {
    font-size: 0.62rem;
    color: var(--palco-apagado);
}

/* A grade de fotos: retângulos com um gradiente neutro cada, em tons
   diferentes. Nenhuma imagem — e nenhuma foto de banco de imagens fingindo
   ser cliente do produto. */
.lp-fone-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
}

.lp-quadro {
    aspect-ratio: 1;
    border-radius: 2px;
    background: linear-gradient(140deg, #3f3f46, #18181b);
}

.lp-quadro:nth-child(2) { background: linear-gradient(140deg, #52525b, #27272a); }
.lp-quadro:nth-child(3) { background: linear-gradient(140deg, #71717a, #3f3f46); }
.lp-quadro:nth-child(5) { background: linear-gradient(140deg, #6b7280, #374151); }
.lp-quadro:nth-child(7) { background: linear-gradient(140deg, #4b5563, #1f2937); }
.lp-quadro:nth-child(8) { background: linear-gradient(140deg, #57534e, #292524); }

.lp-fone-pe {
    padding: var(--e2) var(--e3) var(--e3);
    text-align: center;
    font-size: 0.6rem;
    color: var(--palco-apagado);
}

/* ── Vitrine: régua de público ──────────────────────────────────────── */

.lp-publico {
    border-block: 1px solid var(--linha);
    background: var(--papel-0);
    padding: var(--e4) 0;
}

.lp-publico-linha {
    display: flex;
    align-items: center;
    gap: var(--e2) var(--e3);
    flex-wrap: wrap;
    justify-content: center;
}

.lp-publico-rotulo {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-3);
    font-weight: 620;
}

.lp-chip {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--papel-1);
    border: 1px solid var(--linha);
    font-size: 0.84rem;
    color: var(--tinta-2);
}

/* ── Vitrine: o problema ────────────────────────────────────────────── */

.lp-antes-depois {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
}

.lp-coluna {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: var(--e5);
    background: var(--papel-1);
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.lp-coluna--hoje {
    background: var(--papel-0);
}

.lp-coluna-titulo {
    font-weight: 640;
    font-size: 1.02rem;
}

.lp-coluna ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    color: var(--tinta-2);
    font-size: 0.95rem;
}

.lp-coluna li {
    display: flex;
    gap: var(--e2);
    align-items: flex-start;
}

.lp-marca-item {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 3px;
}

.lp-marca-item--ruim {
    background: var(--ruim-veu);
    color: var(--ruim);
}

.lp-marca-item--bom {
    background: var(--bom-veu);
    color: var(--bom);
}

/* ── Vitrine: como funciona ─────────────────────────────────────────── */

.lp-passos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
    counter-reset: passo;
}

.lp-passo {
    display: flex;
    gap: var(--e4);
    align-items: flex-start;
}

.lp-passo-num {
    counter-increment: passo;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--linha-forte);
    display: grid;
    place-items: center;
    font-weight: 660;
    font-size: 0.92rem;
    color: var(--tinta-2);
}

.lp-passo-num::before {
    content: counter(passo);
}

.lp-passo-texto {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.lp-passo-titulo {
    font-weight: 640;
}

.lp-passo-sub {
    color: var(--tinta-2);
    font-size: 0.93rem;
}

/* ── Vitrine: recursos ──────────────────────────────────────────────── */

.lp-recursos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
}

.lp-recurso {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: var(--e5);
    background: var(--papel-1);
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

/*
 * O canto de moldura: a assinatura gráfica desta página — duas arestas de
 * um enquadramento abraçando o canto do cartão.
 *
 * ⚠ Na primeira versão ele era um elemento no FLUXO, e um quadradinho de
 * 18px sozinho acima do título não lê como moldura: lê como caixa de
 * seleção vazia. Posicionado no canto, com o cartão inteiro dentro dele,
 * o gesto fica claro.
 */
.lp-recurso {
    position: relative;
}

.lp-recurso::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 34px;
    height: 34px;
    border-top: 2px solid var(--tinta-3);
    border-left: 2px solid var(--tinta-3);
    border-radius: var(--raio) 0 0 0;
}

.lp-recurso-titulo {
    font-weight: 640;
    font-size: 1rem;
}

.lp-recurso-texto {
    color: var(--tinta-2);
    font-size: 0.93rem;
}

/* ── Vitrine: o que NÃO faz ─────────────────────────────────────────── */

.lp-nao {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}

.lp-nao-item {
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
    padding: var(--e4);
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.lp-nao-titulo {
    font-weight: 640;
    font-size: 0.96rem;
}

.lp-nao-texto {
    color: var(--tinta-2);
    font-size: 0.9rem;
}

/* ── Vitrine: planos ────────────────────────────────────────────────── */

.lp-planos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
    align-items: start;
}

.lp-plano {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel-1);
    padding: var(--e5);
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.lp-plano--destaque {
    border-color: var(--marca);
    box-shadow: var(--sombra-alta);
}

.lp-plano-nome {
    font-weight: 660;
    font-size: 1.05rem;
}

.lp-plano-preco {
    font-size: 1.9rem;
    font-weight: 680;
    letter-spacing: -0.03em;
    line-height: 1;
}

.lp-plano-mes {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--tinta-3);
}

.lp-plano-para {
    color: var(--tinta-2);
    font-size: 0.92rem;
}

.lp-plano-itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    font-size: 0.92rem;
    color: var(--tinta-2);
}

.lp-plano-itens li {
    display: flex;
    gap: var(--e2);
    align-items: flex-start;
}

.lp-plano-fita {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--marca);
    color: var(--papel-1);
    font-size: 0.75rem;
    font-weight: 640;
}

/* ── Vitrine: perguntas ─────────────────────────────────────────────── */

.lp-faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

.lp-faq-item {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--papel-1);
    padding: var(--e4);
}

.lp-faq-item summary {
    cursor: pointer;
    font-weight: 620;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--e3);
    align-items: center;
}

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

.lp-faq-item summary::after {
    content: "+";
    color: var(--tinta-3);
    font-size: 1.2rem;
    flex: none;
}

.lp-faq-item[open] summary::after {
    content: "−";
}

.lp-faq-resposta {
    margin-top: var(--e3);
    color: var(--tinta-2);
    font-size: 0.95rem;
}

/* ── Vitrine: fechamento ────────────────────────────────────────────── */

.lp-final {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--e4);
    align-items: center;
}

.lp-final .lp-h {
    color: var(--palco-texto);
}

.lp-final-sub {
    color: var(--palco-apagado);
    max-width: 520px;
}

.lp-final .botao {
    background: var(--palco-texto);
    color: var(--palco);
}

.lp-final .botao:hover {
    background: #ffffff;
}

/* ── Vitrine: rodapé ────────────────────────────────────────────────── */

.lp-rodape {
    border-top: 1px solid var(--linha);
    padding: var(--e6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--e4);
    color: var(--tinta-3);
    font-size: 0.88rem;
}

.lp-rodape-linha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3) var(--e5);
    align-items: center;
}

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

.lp-rodape a:hover {
    color: var(--tinta);
}

/* ── TELAS DE ENTRADA ───────────────────────────────────────────────── */

/*
 * Duas colunas no desktop: a vitrine de um lado, a tarefa do outro. É a
 * primeira tela que alguém vê depois de clicar em "criar conta", e ela
 * precisa parecer o PRODUTO — não um formulário genérico com o nome
 * trocado. No celular a vitrine some inteira: quem está com o polegar na
 * tela quer entrar.
 */
.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.auth-vitrine {
    display: none;
    background: var(--palco);
    color: var(--palco-texto);
    padding: var(--e7) var(--e6);
    flex-direction: column;
    justify-content: space-between;
    gap: var(--e6);
}

.auth-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--palco-texto);
    text-decoration: none;
    font-weight: 660;
    font-size: 1.1rem;
    letter-spacing: -0.025em;
}

.auth-frase {
    font-size: 1.7rem;
    line-height: 1.16;
    letter-spacing: -0.03em;
    font-weight: 640;
}

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

.auth-apoio {
    color: var(--palco-apagado);
    margin-top: var(--e3);
    max-width: 420px;
}

.auth-pontos {
    list-style: none;
    margin: var(--e5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    color: rgba(244, 244, 245, 0.86);
    font-size: 0.95rem;
}

.auth-pontos li {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
}

.auth-ponto-marca {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--palco-linha);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    margin-top: 2px;
}

.auth-tarefa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--e6) var(--e4);
    background: var(--papel-0);
}

.auth-caixa {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--e5);
}

/* No celular a marca aparece aqui, já que a vitrine está escondida. */
.auth-marca-movel {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--tinta);
    text-decoration: none;
    font-weight: 660;
    align-self: center;
}

.auth-cabeca {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}

.auth-chamada {
    font-size: 1.4rem;
    font-weight: 660;
    letter-spacing: -0.028em;
}

.auth-sub {
    color: var(--tinta-2);
    font-size: 0.95rem;
}

.auth-forma {
    display: flex;
    flex-direction: column;
    gap: var(--e4);
}

.auth-rodape {
    text-align: center;
    color: var(--tinta-2);
    font-size: 0.92rem;
}

.auth-legal {
    text-align: center;
    color: var(--tinta-3);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ── TELAS MAIORES ──────────────────────────────────────────────────── */

/*
 * ⚠ Daqui para baixo, tudo é `min-width`: o que está acima já é o layout do
 * celular, e estas regras só ACRESCENTAM folga quando há espaço. Bloco
 * `max-width` novo neste arquivo é sinal de que alguém voltou a pensar a
 * partir do desktop.
 *
 * ⚠ E este bloco fica no FIM de propósito: `@media` não acrescenta
 * especificidade, então entre regras de mesma força ganha a que vem depois.
 */

@media (min-width: 640px) {
    .faixa,
    .lp-largura {
        padding: 0 var(--e5);
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.05rem; }

    .corpo {
        padding: var(--e6) 0 var(--e8);
    }

    .topo__interno {
        gap: var(--e5);
        min-height: 60px;
    }

    .cabecalho-tela {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .cabecalho-tela > .botao,
    .cabecalho-tela .linha > .botao,
    .cabecalho-tela .linha > form > .botao {
        width: auto;
    }

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

    .sessoes {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--e4);
    }

    .cartao {
        padding: var(--e5);
    }

    .galeria__grade {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--e3);
        padding: var(--e4);
    }

    .lp-secao {
        padding: var(--e8) 0;
    }

    .lp-titulo {
        font-size: 2.6rem;
    }

    .lp-h {
        font-size: 1.9rem;
    }

    .lp-ctas {
        flex-direction: row;
        width: auto;
    }

    .lp-ctas .botao {
        width: auto;
    }

    .lp-antes-depois {
        grid-template-columns: 1fr 1fr;
    }

    .lp-passos {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--e5);
    }

    .lp-recursos {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-nao {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-planos {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-cartao-qr {
        width: 190px;
    }

    .lp-fone {
        width: 240px;
    }
}

@media (min-width: 900px) {
    .lp-topo-menu {
        display: flex;
    }

    .lp-heroi {
        flex-direction: row;
        align-items: center;
        gap: var(--e7);
        padding: var(--e8) 0;
    }

    .lp-heroi-texto {
        flex: 1 1 50%;
    }

    .lp-palco {
        flex: 1 1 50%;
    }

    .lp-titulo {
        font-size: 3rem;
    }

    .lp-recursos {
        grid-template-columns: repeat(3, 1fr);
    }

    .auth {
        grid-template-columns: 1.05fr 1fr;
    }

    .auth-vitrine {
        display: flex;
    }

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

    .auth-tarefa {
        padding: var(--e8) var(--e6);
    }
}

@media (min-width: 1024px) {
    .entrega__qr {
        width: 420px;
    }
}

/* ── SOBRAS NOMEADAS ────────────────────────────────────────────────── */

/* "Manter conectado": caixa e texto na mesma linha, alvo de toque inteiro. */
.auth-lembrar {
    display: flex;
    align-items: center;
    gap: var(--e2);
    color: var(--tinta-2);
    font-size: 0.9rem;
    cursor: pointer;
}

/* Nota abaixo de uma grade, centralizada. Existe como classe porque
   apareceu em dois lugares — e o teto de `style=` só desce. */
.lp-nota {
    text-align: center;
    margin-top: var(--e5);
}