/*
 * TEMA: claro ou escuro sai direto da configuracao do aparelho de quem visita
 * (`prefers-color-scheme`), sem botao e sem JavaScript. Pedido da Rafaela em 26/09/2026.
 *
 * Site publico do hotleadpilot.com. CSS na mao (sem Tailwind) de proposito: esta pagina e' servida
 * direto pelo nginx em `/`, sem passar pelo Nuxt, pra nao depender do app estar de pe'.
 *
 * COR: um azul so' (`--acao`), o tom do cartao de contato. Nada de degrade em botao, icone,
 * faixa ou texto: em 26/09 a Rafaela apontou que o degrade "cortado" na borda da faixa ficava
 * ruim e pediu tudo no mesmo azul. `--acao2` e `--acao3` continuam existindo so' pra nao quebrar
 * quem ainda os referencia; hoje valem o mesmo que `--acao`.
 *
 * ATENCAO, quem for mexer: aqui o §1b do docs/estilo.md (minimalismo, sem degrade) NAO vale.
 * A Rafaela pediu o contrario em 25/09/2026, com estas palavras: "coloca vida nesse site imgens
 * cards degrade transicao meu deus que sem graca". O §1b continua valendo dentro do APP, que e'
 * ferramenta de trabalho; esta pagina e' vitrine e precisa chamar atencao.
 */

:root {
    --bg: #f6f7fb;
    --card: #ffffff;
    --label: #14152a;
    --sub: #62637a;
    --sep: #e4e5ef;
    --acao: #3d55c9;
    --acao2: #3d55c9;
    --acao3: #3d55c9;
    --acao-cheio: #3d55c9;
    --verde: #25d366;
    --sombra: 0 1px 2px rgb(20 21 42 / 0.05), 0 18px 40px -18px rgb(20 21 42 / 0.28);
    --sombra-forte: 0 30px 70px -28px rgb(20 21 42 / 0.45);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #070813;
        --card: #12142a;
        --label: #f4f5ff;
        --sub: #9b9db8;
        --sep: #262a4d;
        --acao: #7189e8;
        --acao2: #7189e8;
        --acao3: #7189e8;
        /* superficie preenchida NAO clareia: branco por cima precisa continuar legivel */
        --acao-cheio: #3d55c9;
        --sombra: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 40px -18px rgb(0 0 0 / 0.7);
        --sombra-forte: 0 30px 70px -28px rgb(0 0 0 / 0.8);
        color-scheme: dark;
    }

    .luz--a { background: radial-gradient(62% 52% at 88% 12%, color-mix(in srgb, var(--acao) 26%, transparent), transparent 70%); }
    .luz--b { background: radial-gradient(55% 48% at 8% 74%, color-mix(in srgb, var(--acao) 20%, transparent), transparent 70%); }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--label);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

.limite { width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: 20px; }
.secao { padding-block: 88px; position: relative; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; }
h1 { font-size: clamp(36px, 6.4vw, 62px); }
h2 { font-size: clamp(28px, 4.4vw, 42px); }
h3 { font-size: 20px; letter-spacing: -0.02em; }
p { margin: 16px 0 0; color: var(--sub); }
.texto-grande { font-size: 19px; }

/* texto pintado com o degrade da marca */
.brilho {
    color: var(--acao);
}

.olho {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--acao);
}

/* ---------- brilho de fundo ----------
   Antes era um circulo desfocado posicionado pra fora da secao. Como a secao tem
   `overflow: hidden`, o desfoque era cortado numa linha reta e aparecia um retangulo com borda
   dura (a Rafaela apontou isso em 26/09). Agora o brilho ocupa a secao inteira e ja' nasce
   desvanecendo ate' o transparente: nao existe borda pra cortar. */
.luz {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.luz--a { background: radial-gradient(62% 52% at 88% 12%, color-mix(in srgb, var(--acao) 20%, transparent), transparent 70%); }
.luz--b { background: radial-gradient(55% 48% at 8% 74%, color-mix(in srgb, var(--acao) 15%, transparent), transparent 70%); }
.luz--c { display: none; }

/* ---------- cabecalho ---------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--sep);
}

.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 13px; }
.topo__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; }
.topo__marca img { border-radius: 9px; }
.topo__menu { display: none; gap: 28px; }
.topo__menu a { color: var(--sub); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; }
.topo__menu a:hover { color: var(--label); }
.topo__acoes { display: flex; align-items: center; gap: 8px; }
@media (min-width: 900px) { .topo__menu { display: flex; } }

/* ---------- botoes ---------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 26px;
    border-radius: 15px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s, opacity 0.2s;
}

.botao:hover { transform: translateY(-2px); }
.botao--acao {
    background: var(--acao-cheio);
    color: #fff;
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--acao-cheio) 80%, transparent);
}
.botao--acao:hover { box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--acao-cheio) 90%, transparent); }
.botao--zap { background: var(--verde); color: #fff; box-shadow: 0 10px 26px -10px rgb(37 211 102 / 0.7); }
.botao--vazio { background: var(--card); color: var(--label); border-color: var(--sep); box-shadow: var(--sombra); }
.botao--pequeno { padding: 10px 18px; font-size: 15px; border-radius: 12px; }

/* ---------- cartoes ---------- */
.cartao {
    position: relative;
    background: var(--card);
    border: 1px solid var(--sep);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--sombra);
    transition: transform 0.3s cubic-bezier(.2,.8,.3,1), box-shadow 0.3s, border-color 0.3s;
    overflow: hidden;
}

.cartao--sobe:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); border-color: color-mix(in srgb, var(--acao) 45%, var(--sep)); }

/* fio de luz que corre no topo do cartao quando o mouse chega */
.cartao--sobe::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--acao);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(.2,.8,.3,1);
}

.cartao--sobe:hover::before { transform: scaleX(1); }

.grade { display: grid; gap: 18px; }
@media (min-width: 700px) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } }

.ladrilho {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 18px;
    background: var(--acao-cheio);
}

/* um tom so' pros seis cartoes: seis degrades diferentes viravam carnaval */
.ladrilho--rosa,
.ladrilho--verde { background: var(--acao-cheio); }
.cartao h3 { margin-bottom: 8px; }
.cartao p { margin-top: 0; font-size: 16px; }

.preco { margin-top: 20px; font-size: 15px; font-weight: 700; }
.preco span { color: var(--sub); font-weight: 400; }

.cartao__arte { width: 110px; margin: -6px 0 14px auto; }

/* ---------- hero ---------- */
.hero { padding-block: 72px 64px; position: relative; overflow: hidden; }
.hero__grade { display: grid; gap: 48px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 980px) { .hero__grade { grid-template-columns: 1.05fr 0.95fr; } }

.selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--acao) 35%, var(--sep));
    background: color-mix(in srgb, var(--acao) 10%, var(--card));
    font-size: 14px;
    font-weight: 600;
    color: var(--acao);
    margin-bottom: 24px;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
/* `margin-inline: auto` num item de grid faz a caixa encolher ate' o conteudo. Com o celular
   usando `width: 100%`, a conta virava circular e ele saia com 98px. Largura definida resolve. */
.hero__arte { position: relative; width: 300px; max-width: 100%; margin-inline: auto; }
.hero__arte img { width: 100%; filter: drop-shadow(0 30px 50px rgb(20 21 42 / 0.3)); animation: flutua 6s ease-in-out infinite; }

@keyframes flutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

/* cartoes que flutuam por cima da arte */
.balao {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-radius: 17px;
    background: var(--card);
    border: 1px solid var(--sep);
    box-shadow: var(--sombra-forte);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    animation: flutua 6s ease-in-out infinite;
}

.balao--a { top: 13%; left: -30%; animation-delay: 0.6s; }
.balao--b { bottom: 16%; right: -32%; animation-delay: 1.2s; }
/* no celular nao ha' espaco dos lados: os baloes encostam nas bordas da arte */
@media (max-width: 720px) {
    .balao { padding: 10px 13px; font-size: 13px; }
    .balao--a { left: -8%; top: 8%; }
    .balao--b { right: -8%; bottom: 10%; }
}

.balao small { display: block; font-weight: 400; color: var(--sub); font-size: 12.5px; }
.balao .ponto { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--acao-cheio); }

/* ---------- lista de passos ---------- */
.passos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; counter-reset: passo; }
.passos li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; color: var(--sub); }
.passos strong { color: var(--label); font-weight: 700; }
.passos li::before {
    counter-increment: passo;
    content: counter(passo);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--acao-cheio);
}

/* ---------- faixa de preco ---------- */
.faixa {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 48px 40px;
    color: #fff;
    background: var(--acao-cheio);
    box-shadow: var(--sombra-forte);
}

.faixa__grade { display: grid; gap: 26px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 860px) { .faixa__grade { grid-template-columns: 1.3fr auto; } }
.faixa p { color: rgb(255 255 255 / 0.82); }
.faixa .olho { color: rgb(255 255 255 / 0.8); }
.valor { font-size: clamp(40px, 7vw, 60px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.valor small { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / 0.78); margin-top: 10px; }
.faixa .botao--vazio { background: #fff; color: #14152a; border-color: transparent; }

/* ---------- rodape ---------- */
.rodape { border-top: 1px solid var(--sep); padding-block: 40px; font-size: 14px; color: var(--sub); }
.rodape__linha { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }

/* ---------- transicao de entrada ---------- */
.revela { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(.2,.8,.3,1); }
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before { animation: none !important; transition: none !important; }
    .revela { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* ---------- janela de navegador desenhada em CSS ----------
   Substitui a arte 3D do acervo (que era de curso online e fugia do assunto). Desenhada e nao
   fotografada de proposito: nao inventa print de cliente e nao pesa no carregamento. */
.janela {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--sep);
    background: var(--card);
    box-shadow: var(--sombra-forte);
    animation: flutua 7s ease-in-out infinite;
}

.janela__barra { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: color-mix(in srgb, var(--label) 5%, var(--card)); border-bottom: 1px solid var(--sep); }
.janela__bola { width: 10px; height: 10px; border-radius: 50%; }
.janela__endereco { flex: 1; margin-left: 8px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--label) 7%, transparent); }
.janela__tela { padding: 20px; display: grid; gap: 13px; }

.barra-falsa { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--label) 9%, transparent); }
.barra-falsa--titulo { height: 22px; width: 62%; background: var(--acao-cheio); }
.barra-falsa--curta { width: 40%; }
.barra-falsa--media { width: 78%; }

.blocos-falsos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 6px; }
.bloco-falso { height: 58px; border-radius: 12px; background: color-mix(in srgb, var(--label) 7%, transparent); }
.bloco-falso:first-child { background: color-mix(in srgb, var(--acao) 28%, transparent); }

.botao-falso { height: 34px; width: 130px; border-radius: 10px; background: var(--acao-cheio); margin-top: 4px; }

/* ---------- topo no celular ----------
   Sem isso o nome quebra em duas linhas e o botao de orcamento come a barra inteira. O botao
   some porque o CTA de WhatsApp aparece logo abaixo, no hero. */
.topo__marca { white-space: nowrap; }

@media (max-width: 560px) {
    .topo__marca { font-size: 15px; }
    .topo__acoes .botao { display: none; }
}

/* ---------- celular desenhado em CSS ----------
   Substituiu a foto 3D do acervo (mao com tatuagem, tela azul chapada e um retangulo branco
   aparecendo atras). Desenhado: fica limpo, combina com a janela de navegador da secao
   "Como funciona" e mostra uma tela de verdade em vez de um bloco de cor. */
.telefone {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 18;
    border-radius: 42px;
    padding: 11px;
    background: #1d1f36; /* moldura do aparelho: tom chapado, sem degrade */
    box-shadow: var(--sombra-forte), inset 0 0 0 1px rgb(255 255 255 / 0.12);
    animation: flutua 7s ease-in-out infinite;
}

.telefone__ilha {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 22px;
    border-radius: 999px;
    background: #14152a;
    z-index: 2;
}

.telefone__tela {
    height: 100%;
    border-radius: 32px;
    background: var(--card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.telefone__capa {
    height: 38%;
    background: var(--acao-cheio);
    padding: 44px 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 9px;
}

.telefone__capa .barra-falsa { background: rgb(255 255 255 / 0.85); }
.telefone__capa .barra-falsa--titulo { background: #fff; width: 72%; height: 15px; }
.telefone__capa .barra-falsa--curta { width: 46%; height: 8px; background: rgb(255 255 255 / 0.55); }

.telefone__corpo { flex: 1; padding: 16px 18px; display: grid; gap: 11px; align-content: start; }
.telefone__linha { display: flex; align-items: center; gap: 10px; }
.telefone__bolha { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; background: color-mix(in srgb, var(--acao) 22%, transparent); }
.telefone__linha .barra-falsa { flex: 1; height: 9px; }
.telefone__botao { margin-top: 4px; height: 32px; border-radius: 11px; background: var(--acao-cheio); }

/* ---------- acoes do bloco de contato ----------
   O contato e' o fim da pagina e agora usa a mesma faixa em degrade do preco. Antes era um cartao
   claro, enorme e quase vazio, que sumia no fundo escuro e ainda punha o telefone DENTRO do botao
   no lugar de uma acao. */
.contato__acoes { display: grid; gap: 12px; justify-items: center; }
.contato__numero { font-size: 15px; color: rgb(255 255 255 / 0.75); text-decoration: none; }
.contato__numero:hover { color: #fff; }