/* ============================================================
   saas_salaobarbearia — landing pública do apex

   Mobile-first: as regras base valem para celular, e os
   @media (min-width: ...) acrescentam colunas conforme a tela
   cresce.

   Esta folha é AUTOSSUFICIENTE: a landing não carrega o
   bootstrap.min.css (usaria uma fração dele e são ~230KB na
   página mais visitada do sistema). O que ela reaproveita do
   projeto é o Bootstrap Icons e o mecanismo de tema — o mesmo
   atributo data-bs-theme que o tema_inicial.php e o tema.js já
   manipulam nas demais telas.

   Por isso a paleta é declarada aqui, nas duas variantes. Os
   valores acompanham os das outras telas públicas (o fundo
   #f4f6f9 no claro e #0d0f12 no escuro são os mesmos do
   views/layouts/tenant_publico.php), para que a landing e a
   tela de agendamento não pareçam dois produtos diferentes.

   ÚNICA cor fixa: o texto do botão primário é branco em
   qualquer tema. O fundo dele é a cor da marca nos dois casos,
   então o texto não deve acompanhar a troca claro/escuro.
   ============================================================ */

:root {
    --cor-fundo:       #f4f6f9;
    --cor-card:        #ffffff;
    --cor-borda:       #dee2e6;
    --cor-texto:       #212529;
    --cor-texto-suave: #6c757d;
    --sombra-card:     0 1px 3px rgba(0, 0, 0, .06);
}

/* O atributo é escrito pelo tema_inicial.php (no <head>, antes
   do CSS pintar) e alterado pelo tema.js no clique do botão.
   As três variáveis de marca (--cor-primaria e derivadas) vêm
   do <style> do layout, com o valor do banco já validado. */
[data-bs-theme="dark"] {
    --cor-fundo:       #0d0f12;
    --cor-card:        #1b1f24;
    --cor-borda:       #2b3035;
    --cor-texto:       #e9ecef;
    --cor-texto-suave: #adb5bd;
    --sombra-card:     0 1px 3px rgba(0, 0, 0, .40);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
}

/* Suaviza a troca de tema, senão a mudança de fundo "estala".
   Mesmo comportamento do app.css nas telas internas. */
html, body {
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

h1, h2, h3, p { margin: 0; }

/* --- Cabeçalho ---------------------------------------------- */

.cabecalho-landing {
    background: var(--cor-card);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cabecalho-landing-conteudo {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 16px;
}

.logo-landing {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.nome-landing {
    font-weight: 600;
    font-size: 1.05rem;
}

/* Toggle de tema. Segue o desenho do .btn-tema do app.css, mas
   com as variáveis desta folha — a landing não carrega o
   app.css nem o Bootstrap, então --bs-border-color não existe
   aqui. O margin-left:auto empurra o botão para a direita. */
.btn-tema-landing {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    border-radius: .375rem;
    padding: .25rem .55rem;
    line-height: 1;
    cursor: pointer;
    /* 36px: alvo de toque aceitável para um controle secundário */
    min-height: 36px;
    min-width: 36px;
}

.btn-tema-landing:hover {
    border-color: var(--cor-primaria);
}

.btn-tema-landing:focus-visible {
    outline: 3px solid rgba(var(--cor-primaria-rgb), 0.45);
    outline-offset: 2px;
}

/* --- Conteúdo ----------------------------------------------- */

.conteudo-landing {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Bloco 1: hero ------------------------------------------ */

.hero-landing {
    text-align: center;
    padding: 48px 0 40px;
}

.hero-titulo {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 14px;
}

.hero-subtitulo {
    color: var(--cor-texto-suave);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 28px;
}

.hero-selo {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

/* --- Botão -------------------------------------------------- */

.btn-landing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* min-height 48px: alvo de toque confortável no celular */
    min-height: 48px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-landing-primario {
    background: var(--cor-primaria);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--cor-primaria-rgb), 0.28);
}

.btn-landing-primario:hover  { background: var(--cor-primaria-hover); }
.btn-landing-primario:active { transform: translateY(1px); }

.btn-landing:focus-visible {
    outline: 3px solid rgba(var(--cor-primaria-rgb), 0.45);
    outline-offset: 2px;
}

/* --- Seções ------------------------------------------------- */

.secao-landing { padding: 32px 0 48px; }

.secao-titulo {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 28px;
}

/* --- Bloco 2: funcionalidades ------------------------------- */

.grade-funcionalidades {
    display: grid;
    grid-template-columns: 1fr;   /* celular: uma coluna */
    gap: 16px;
}

.cartao-funcionalidade {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 22px;
    box-shadow: var(--sombra-card);
}

.icone-funcionalidade {
    font-size: 1.6rem;
    color: var(--cor-primaria);
    display: block;
    margin-bottom: 10px;
}

.titulo-funcionalidade {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.descricao-funcionalidade {
    color: var(--cor-texto-suave);
    font-size: 0.95rem;
}

/* --- Bloco 3: preço ----------------------------------------- */

.cartao-preco {
    background: var(--cor-card);
    border: 2px solid var(--cor-primaria);
    border-radius: 14px;
    padding: 32px 24px;
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--sombra-card);
}

.preco-plano {
    display: inline-block;
    background: rgba(var(--cor-primaria-rgb), 0.12);
    color: var(--cor-primaria);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.preco-valor {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 18px 0 6px;
}

.preco-periodo {
    font-size: 1rem;
    font-weight: 400;
    color: var(--cor-texto-suave);
}

.preco-itens {
    list-style: none;
    padding: 0;
    margin: 22px 0 26px;
    text-align: left;
}

.preco-itens li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--cor-borda);
}

.preco-itens li:last-child { border-bottom: none; }
.preco-itens .bi-check-lg  { color: var(--cor-primaria); flex-shrink: 0; }

/* --- Rodapé ------------------------------------------------- */

.rodape-landing {
    border-top: 1px solid var(--cor-borda);
    background: var(--cor-card);
    margin-top: 24px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

/* --- Telas maiores ------------------------------------------ */

@media (min-width: 600px) {
    .grade-funcionalidades { grid-template-columns: repeat(2, 1fr); }

    /* O rodapé tem um único elemento (nome · ano), então fica centrado
       em qualquer largura — sem space-between, que o jogaria à esquerda. */
    .rodape-landing {
        max-width: 1080px;
        margin: 24px auto 0;
    }
}

@media (min-width: 900px) {
    /* Respiro contido de propósito. Com 72px/56px o hero ocupava a
       primeira tela inteira num monitor de altura comum, e o visitante
       não via nenhuma pista de que havia funcionalidades e preço
       abaixo — muita gente sai sem rolar. Com 40px o topo do bloco
       seguinte já aparece e convida a continuar. */
    .hero-landing          { padding: 40px 0 40px; }
    .hero-titulo           { font-size: 2.4rem; }
    .grade-funcionalidades { grid-template-columns: repeat(3, 1fr); }
    .secao-titulo          { font-size: 1.6rem; }
}

/* Título do hero — era style= inline (item 4, 2026-09-08) */
.titulo-hero { font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1.1; }