/* ===== 11-vitrine-e-publico.css — vitrine do visitante, login, registro, documento público, marca =====
   Fatia do antigo app.css (09/08/2026). O NÚMERO NO NOME É A POSIÇÃO NA CASCATA: é a ordem
   dos <link> no index.html, e trocá-la muda quem vence. Regra e política em 01-base.css. */

/* ===================== Vitrine (home do visitante anônimo — BoasVindas.razor) =====================
   Mora no app.css como todo o resto (o projeto não usa CSS isolado por componente). É a única tela
   que uma pessoa de fora vê antes de decidir se o produto serve pra ela: por isso o hero sangra até
   as bordas, cancelando o padding do .app-main, e emenda no cabeçalho da marca sem costura visível. */
.bv-hero {
    margin: -1.1rem -1rem 1.25rem;
    padding: 2.25rem 1.25rem 1.75rem;
    background: linear-gradient(165deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
}

/* Era a palavra "CAMARADA" em caixa alta espaçada, com opacity .8 — uma sobrancelha. Virou o
   logotipo inteiro: esta é a única tela do app em que a marca se APRESENTA (quem chega aqui pode
   nunca ter ouvido o nome), e as duas coisas que a sobrancelha não fazia são justamente as que
   importam aqui — mostrar o desenho e ser opaca. Logotipo desbotado lê como marca d'água. */
.bv-marca {
    margin: 0 0 .7rem;
}

/* Corpo de apresentação, maior que o do cabeçalho — e a única superfície grande o bastante para a
   inicial bicolor do <Logo Bicolor="true" />. */
.bv-marca .logo-placa {
    width: 2.4rem;
    height: 2.4rem;
}

.bv-marca .logo-palavra { font-size: 1.5rem; }

/* Selo da fase de validação, no herói — pílula translúcida da mesma família do .header-entrar.
   Fica ACIMA do <h1> porque emoldura tudo o que vem depois: a promessa da seção "Ainda não lançamos"
   só se lê direito por quem já sabe que o produto ainda não foi lançado. */
.bv-selo {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1rem;
    padding: .3rem .7rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

/* O corpo ACOMPANHA A LARGURA porque a restrição aqui não é estética, é de quebra: as duas frases do
   <h1> têm 25 caracteres cada, e a promessa só se lê como promessa se cada uma couber numa linha só —
   "Combine. Execute. / Receba." desmancha o paralelo dos três verbos, que é a frase inteira.

   O espaço disponível é a largura da tela menos os 2×1.25rem de padding do .bv-hero, então o que
   precisa caber cresce com o aparelho e um valor fixo não resolve: o que cabe num 390 fica pequeno
   demais num 430, e o que enche o 430 quebra no 360. Daí o clamp — a conta do meio é a largura do
   texto (~13,7em para 25 caracteres neste peso) devolvida em vw, com folga.

   O teto de 1.9rem é o tamanho anterior, alcançado por volta de 465px: acima disso já cabia, e não há
   por que crescer mais. O piso de 1.25rem é o ponto em que encolher deixa de ajudar — abaixo dele,
   num aparelho muito estreito, é melhor deixar quebrar do que ter um título ilegível. Por isso NÃO há
   `white-space: nowrap`: se um dia não couber, a saída é quebrar, nunca vazar para fora da tela. */
.bv-titulo {
    margin: 0 0 .75rem;
    font-size: clamp(1.25rem, calc(7vw - 3px), 1.9rem);
    line-height: 1.15;
    font-weight: 700;
}

.bv-sub {
    margin: 0 0 1.5rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.bv-sub strong { color: #fff; }

.bv-ctas { display: flex; flex-direction: column; align-items: center; gap: .9rem; }

/* CTA invertido: sobre o fundo da marca, o .btn-primary-lg (fundo = marca) sumiria. */
.bv-cta {
    background: #fff;
    color: var(--brand-dark);
    font-weight: 700;
    gap: .5rem;
}

.bv-cta:active:not(:disabled) { background: var(--brand-tint); }
.bv-cta .icon { width: 1.2rem; height: 1.2rem; }

.bv-cta-secundaria {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Alvo de toque de 44px sem virar botão: o padding é o alvo, o texto continua sendo um link. */
    padding: .6rem .25rem;
}

/* "Ver uma demonstração" é <button> de verdade (dispara uma chamada, não navega), mas precisa ler
   como os outros links secundários do herói. Sem este reset o navegador entrega fundo cinza, borda e
   a fonte dele — o botão destoaria de tudo em volta justamente no primeiro contato com o produto. */
button.bv-cta-secundaria {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

button.bv-cta-secundaria:disabled { opacity: .7; cursor: default; text-decoration: none; }
button.bv-cta-secundaria .icon { width: 1.05rem; height: 1.05rem; }

/* Crítica dentro do herói: o vermelho de .error nasceu para fundo claro e some sobre o fundo da
   marca. Aqui o contraste vem do fundo, não da cor do texto. */
.bv-hero .error {
    margin: .9rem 0 0;
    padding: .55rem .8rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font-size: .9rem;
}

.bv-secao { margin-bottom: 1.75rem; }

.bv-secao-titulo {
    margin: 0 0 .9rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

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

.bv-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .8rem;
}

.bv-item > .icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    color: var(--brand);
}

.bv-item strong { display: block; font-size: 1rem; margin-bottom: .15rem; }
.bv-item span { display: block; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }

/* A seção da fase de validação é a proposta, não mais uma lista de recursos — ganha moldura tintada
   para não se confundir com "O dia inteiro em um app só", logo acima, que usa os mesmos .bv-item. Os
   cards de dentro continuam em --card, então o tint aparece só nas beiradas: é o suficiente para
   agrupar sem virar um segundo herói competindo com o de cima. */
.bv-fase {
    padding: 1.15rem 1rem 1.25rem;
    background: var(--brand-tint);
    border: 1px solid var(--line);
    border-radius: .9rem;
}

.bv-fase-lead { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.bv-fase-lista .bv-item:last-child { margin-bottom: 0; }
.bv-fase-cta { margin-top: 1.15rem; }
.bv-fase-cta .icon { width: 1.15rem; height: 1.15rem; }

/* Segunda porta do CTA da fase ("Já tenho um convite"), mesma função do .bv-cta-secundaria do herói —
   mas sobre o tint claro, e não sobre o fundo da marca. Reusar aquele traria o color:#fff junto e o
   link sumiria dentro da moldura. Padding é alvo de toque, como lá. */
.bv-fase-cta-alt {
    display: block;
    margin-top: .7rem;
    padding: .5rem .25rem;
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Passo a passo do convite (sheet "Como entrar no teste"). Sem moldura de card, ao contrário dos
   .bv-item da vitrine: aqui já se está dentro do painel branco do sheet, e caixa dentro de caixa só
   estreitaria o texto. <ol> de verdade, não <ul> com número escrito à mão — a ordem é a informação,
   e o contador do CSS evita que o leitor de tela anuncie "um, 1". */
.bv-passos {
    list-style: none;
    counter-reset: passo;
    margin: 0 0 1.2rem;
    padding: 0;
}

.bv-passos-lead { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }

.bv-passo {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .95rem;
}

.bv-passo:last-child { margin-bottom: 0; }

.bv-passo::before {
    counter-increment: passo;
    content: counter(passo);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: .05rem;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}

.bv-passo strong { display: block; font-size: 1rem; margin-bottom: .15rem; }
.bv-passo span { display: block; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }

.bv-instalar p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }

.bv-rodape {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    text-align: center;
}

.bv-rodape p { margin: 0 0 .6rem; font-size: .85rem; color: var(--muted); }

.bv-rodape a {
    display: inline-block;
    padding: .6rem .25rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--brand);
}

/* "Entrar" no cabeçalho, para o visitante — pílula clara sobre o fundo da marca, mesmo alvo de
   toque dos ícones vizinhos. */
.header-entrar {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 .85rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.header-entrar:active { background: rgba(255, 255, 255, .22); }

/* Saídas do login: criar conta (principal) e a vitrine (secundária), empilhadas. */
.login-vitrine { margin: 1.1rem 0 0; text-align: center; display: flex; flex-direction: column; }
.login-vitrine a { display: block; padding: .5rem; font-size: .9rem; color: var(--brand); font-weight: 600; }
.login-vitrine-secundario { font-weight: 500 !important; color: var(--muted) !important; }

/* "Esqueci minha senha" (entrega 04): abre um sheet, então é <button> e não âncora — daí não herdar
   nada do .login-vitrine acima. Mesmo alvo de toque e mesmo peso visual dos links de lá, para a
   coluna sob o formulário continuar lendo como uma lista de saídas. */
.login-esqueci {
    display: block;
    width: 100%;
    margin: .75rem 0 0;
    padding: .5rem;
    background: none;
    border: none;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand);
    text-align: center;
    cursor: pointer;
}

/* O @media (max-width: 380px) que baixava o .bv-titulo para 1.65rem saiu daqui: o clamp já cobre
   todas as larguras de forma contínua, e a regra do media query venceria por especificidade de
   cascata justamente abaixo dos 380px — que é onde a fonte mais precisa encolher. */

/* ============================================================
   Cadastro, política pública e marca própria (S15)
   ============================================================ */

/* Cidade + UF na mesma linha: são um dado só na cabeça de quem preenche, e no celular cada campo
   isolado é mais uma rolagem no formulário mais frágil do produto. */
.field-linha { display: flex; gap: .75rem; align-items: flex-start; }
.field-linha > .field { flex: 1; min-width: 0; }
.field-linha > .field-uf { flex: 0 0 5.5rem; }

.opcional { font-weight: 400; color: var(--muted); }

/* Aceite: o alvo de toque é o rótulo inteiro (dedo grande, tela ao sol — mesma premissa do resto
   do app), não só o quadradinho de 16px. */
.field-aceite { margin-top: 1.25rem; }

.aceite {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .9rem;
    font-weight: 400 !important;
    line-height: 1.4;
    cursor: pointer;
}

.aceite input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
}

.aceite a { color: var(--brand); font-weight: 600; }

/* Documento público (política de privacidade) — coluna de leitura, sem TabBar e sem cartão: é
   texto corrido lido antes de existir conta, inclusive fora do app. */
.doc-publico {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.5rem 1.15rem 3rem;
    line-height: 1.6;
}

.doc-publico h1 { font-size: 1.6rem; margin: 0 0 .35rem; }
.doc-publico h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.doc-publico p { margin: 0 0 .75rem; }
.doc-publico ul { margin: 0 0 .75rem; padding-left: 1.15rem; }
.doc-publico li { margin-bottom: .45rem; }
.doc-publico a { color: var(--brand); font-weight: 600; }
.doc-rodape { margin-top: 2.5rem; }

/* Marca própria (Parâmetros → Minha marca). */
.marca-preview {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface, #fff);
    margin-bottom: .75rem;
}

/* Fundo xadrez claro: logo PNG com transparência sobre branco parece "sem imagem" — e o prestador
   precisa ver o que o cliente final vai ver. */
.marca-logo {
    flex: 0 0 auto;
    max-height: 4.5rem;
    max-width: 9.5rem;
    object-fit: contain;
    background-image:
        linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
        linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

/* Telefone em leitura na seção "Meus dados" — parece campo, mas não é editável aqui (é o login). */
.perfil-telefone { margin: 0; padding: .35rem 0; font-weight: 600; }

.marca-vazia { color: var(--muted); font-size: .9rem; }
/* flex:1 nos dois botões (mesmo idioma do .sheet-actions): sem isso cada botão fica do tamanho do
   próprio texto, e "Salvar nome"/"Remover logo" sobram estreitos e desalinhados da largura cheia do
   campo/input acima e do "Trocar a logo" abaixo. */
.marca-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.marca-acoes .btn-secondary { flex: 1; }

/* Cabeçalho da página pública com a marca do prestador: logo à esquerda, identificação à direita,
   sempre abaixo do <h1> (que ocupa a linha inteira — ver o comentário no .razor). */
.publico-marca {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.publico-marca-texto { min-width: 0; } /* deixa o texto quebrar em vez de estourar o flex */
.publico-marca-texto p { margin: 0; }
.publico-prestador { font-weight: 600; line-height: 1.25; }

/* Teto proporcional (maior que antes, a pedido — a marca do prestador é o que dá confiança pro
   cliente final antes de aprovar): o prestador sobe o arquivo que tem no celular, e um símbolo
   largo não pode empurrar a identificação para fora da tela a 390px. */
.publico-logo {
    flex: 0 0 auto;
    max-height: 4.5rem;
    max-width: 7.5rem;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

/* Assinatura do produto no rodapé do link público (grátis). Fora do cartão e discreta: é o motor de
   distribuição, não um selo de demonstração — não pode competir com "Aprovar orçamento". */
.publico-selo {
    max-width: 40rem;
    margin: 1.25rem auto 2rem;
    text-align: center;
    font-size: .8rem;
    color: var(--muted);
}

.publico-selo a { color: var(--brand); font-weight: 600; }