/*
 * Guia de Identidade Visual AzzePro v1.0 — tipografia, cores e radius.
 * Carregar DEPOIS do CSS do template vendorizado (Bootstrap + tema), pra
 * essas regras vencerem por ordem de cascata sem precisar de !important.
 *
 * Cores reservadas por uso (não trocar o papel de uma pela outra):
 *   --azze-navy  -> institucional (texto, headings, footer, ícones informativos)
 *   --azze-green -> CTA/ação (botões primários, links de ação, checkmarks de preço)
 */

:root {
    --azze-navy: #061B3A;
    --azze-green: #00C968;

    /* CTA/ação usa o verde da marca — troca --bs-primary global, que já é
       usado pelos botões primários (.btn-primary) do template. */
    --bs-primary: var(--azze-green);
    --bs-primary-rgb: 0, 201, 104;
    --bs-link-color: var(--azze-green);
    --bs-link-color-rgb: 0, 201, 104;
    /* a:hover já lia var(--bs-link-hover-color) corretamente (diferente do
       .btn-primary — ver bloco de botão mais abaixo), só faltava sobrescrever
       o valor em si, que ainda apontava pro azul padrão do Bootstrap
       (#0a58ca). Mesmo tom do hover do botão (~15% mais escuro que a base),
       pra manter os dois estados de interação consistentes. */
    --bs-link-hover-color: #00ab58;

    /* Tipografia: Inter em todo o documento (substitui a Lato do template
       original). Ver assets/vendor/landing/css/fonts.css pro self-host. */
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
}

body {
    color: var(--azze-navy);
}

/* ---------- Escala tipográfica (mobile-first: base = mobile, min-width = desktop) ---------- */

h1, .h1 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    color: var(--azze-navy);
}

h2, .h2 {
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: var(--azze-navy);
}

h3, .h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--azze-navy);
}

h4, .h4 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--azze-navy);
}

.lead {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
}

body, p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

small, .small {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

@media (min-width: 768px) {
    h1, .h1 {
        font-size: 56px;
        line-height: 64px;
    }

    h2, .h2 {
        font-size: 40px;
        line-height: 48px;
    }

    .lead {
        font-size: 18px;
        line-height: 30px;
    }
}

/* ---------- Botão de ação (CTA) ---------- */

/* Causa raiz do botão saindo azul: o Bootstrap compilado neste vendor NÃO
   lê a cor de --bs-primary em tempo real dentro de .btn-primary — a folha
   de estilo já vem com o hex antigo (#0d6efd) gravado direto nas variáveis
   locais do próprio componente (--bs-btn-bg, --bs-btn-border-color etc.,
   ver styles.css). Ou seja, --bs-primary (que já apontava pro verde) nunca
   chegava a ser lido por esse botão. Corrige na origem, sobrescrevendo as
   mesmas variáveis locais do componente (mesmo padrão do Bootstrap: bg/
   border com a cor base, hover/active um pouco mais escuros) — cobre todo
   .btn-primary da página, não só os 3 CTAs vistos no print.
   Tons de hover/active calculados escurecendo a base (~15%/~20%), no
   mesmo espírito do que o Bootstrap gera para as outras cores do tema. */
.btn-primary {
    --bs-btn-bg: var(--azze-green);
    --bs-btn-border-color: var(--azze-green);
    --bs-btn-hover-bg: #00ab58;
    --bs-btn-hover-border-color: #00a153;
    --bs-btn-active-bg: #00a153;
    --bs-btn-active-border-color: #009650;
    --bs-btn-focus-shadow-rgb: 0, 201, 104;
    --bs-btn-disabled-bg: var(--azze-green);
    --bs-btn-disabled-border-color: var(--azze-green);
}

/* ---------- Radius ---------- */

/* Border-radius de botão saiu daqui -- agora centralizado em base.css
   (--bs-border-radius* no :root), que já é carregado em toda página do
   projeto, não só nas que carregam este arquivo. Ver base.css. */

.card {
    border-radius: 16px;
    overflow: hidden;
}

.form-control,
.form-select {
    border-radius: 8px;
}

/* ---------- Navegação (institucional = navy) ---------- */

.navbar-brand,
.nav-link {
    color: var(--azze-navy);
}

/* Container da navbar vira âncora de posicionamento pro link "Entrar" do
   mobile (position: absolute) -- só nesta navbar, não mexe no .container
   genérico do Bootstrap usado no resto do site. */
#navbarPrincipal .container {
    position: relative;
}

/* Link "Entrar" (login do lojista) -- deliberadamente mais discreto que o
   CTA principal ("Criar minha loja grátis"): texto simples, sem fundo, pra
   não competir com o botão de conversão. */
.nav-link-entrar {
    color: var(--azze-navy);
    font-weight: 600;
    text-decoration: none;
}

.nav-link-entrar:hover,
.nav-link-entrar:focus {
    color: var(--azze-green);
    text-decoration: underline;
}

/* Versão mobile: a navbar aqui não tem hamburger/offcanvas (ver comentário
   no index.php -- só a logo aparece, centralizada, abaixo de lg), então o
   link entra solto no canto direito da barra via position: absolute, sem
   tirar a centralização da logo. min-height 44px = área de toque mínima
   (Diretrizes de UI/UX mobile-first), mesmo com o texto sendo pequeno. */
.nav-entrar-mobile {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    color: var(--azze-navy);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.nav-entrar-mobile:hover,
.nav-entrar-mobile:focus {
    color: var(--azze-green);
}

/* Navbar fixa (.fixed-top, no HTML) — compensa o espaço que ela passa a
   ocupar por cima do hero, senão o topo do H1 nasce escondido atrás dela.
   Altura real calculada, não chutada:
     - Logo: 32px (.navbar-brand img) + padding próprio do .navbar-brand
       (--bs-navbar-brand-padding-y: 0.3125rem = 5px em cima e embaixo) = 42px.
     - Desktop (>=lg): o item mais alto do menu é o .nav-link — padding
       (--bs-nav-link-padding-y: 0.5rem = 8px em cima/embaixo, via
       .navbar-nav) + line-height do texto (16px de fonte * 1.625 = 26px,
       herdado de "body, p") = 8+8+26 = 42px. Mesmo patamar da logo — por
       isso um único valor de compensação serve pros dois casos, sem
       precisar de media query aqui.
     - + padding vertical do próprio .navbar (--bs-navbar-padding-y:
       0.5rem = 8px em cima/embaixo) = 42 + 16 = 58px no total.
   Arredondado pra 60px (margem de segurança de ~2px, prefiro folga a
   corte). z-index da navbar vem do próprio ".fixed-top" do Bootstrap
   (1030) — mesma faixa do ".botao-topo", mas sem conflito real: navbar
   ocupa a faixa inteira do topo, botao-topo fica só no canto inferior
   direito, nunca se sobrepõem fisicamente na tela. */
header.masthead {
    margin-top: 60px;
}

/* ---------- Rodapé (redesign: fundo navy, colunas) ---------- */

/* Antes o rodapé era bg-light com texto navy — as duas regras antigas
   ("footer, footer a { color: navy }" e "footer .text-muted") foram
   removidas daqui de cima porque agora fariam texto navy sobre fundo navy
   (invisível). O bloco abaixo substitui as duas por completo. */

/* Traço de acento verde no topo do rodapé inteiro — só aqui, não se repete
   na divisória interna do copyright (essa usa um tom navy mais claro, ver
   .footer-bottom mais abaixo). */
footer.footer {
    background-color: var(--azze-navy);
    color: rgba(255, 255, 255, 0.75);
    border-top: 3px solid var(--azze-green);
}

/* Marca (coluna 1): logo-azzepro.png NÃO é usada aqui — a parte navy do
   arquivo (#061B3A) é literalmente a mesma cor do fundo deste rodapé
   (--azze-navy), ou seja, contraste ~1:1, invisível. Mesmo cuidado já
   tomado no /qgazze (lá o fundo era só parecido, #1F2937 — aqui é a cor
   idêntica, ainda mais grave). Em vez de forçar a imagem, fica como texto
   branco, igual foi resolvido lá. */
.footer-brand {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 22px;
}

.footer-col-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a,
.footer-instagram-link {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover,
.footer-instagram-link:hover {
    color: var(--azze-green);
}

/* Linha do copyright: separada do bloco de colunas por uma borda navy mais
   clara (não repete o verde de acento do topo). */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
}

/* ---------- Botão de voltar ao topo ---------- */

/* Radius do guia é 10px (pensado pra botões retangulares) — pra um botão
   circular isso não se aplica da mesma forma, então 50% é a adaptação
   direta do mesmo princípio (raio total, virando círculo). */
.botao-topo {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: var(--azze-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(6, 27, 58, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
    z-index: 1030;
    cursor: pointer;
}

.botao-topo.botao-topo--visivel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.botao-topo:hover {
    background-color: #00ab58;
    color: #fff;
}

/* ---------- Seção de números reais ---------- */

/* Fundo navy sólido (sem foto) — segmenta visualmente da seção de recursos
   (bg-light, cinza) logo antes e da seção "Como funciona" (fundo branco)
   logo depois, sem introduzir nenhuma cor fora da paleta. */
.stats-numeros {
    background-color: var(--azze-navy);
}

/* Antes usava a escala Small (14/22px, herdada da classe .small no HTML —
   removida de lá, já não fazia sentido o nome "small" num texto deste
   tamanho). Escala H3 (24/32px, peso 600) escolhida em vez de H2: os
   números dos contadores logo abaixo já usam a escala H2 (30/38 -> 40/48) —
   se este título também fosse H2, ficaria do mesmo tamanho que os números
   e competiria com eles pela atenção. H3 dá destaque real (quase o dobro
   do tamanho anterior) mantendo a hierarquia: título < números. */
.stats-titulo {
    color: rgba(255, 255, 255, 0.75);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

/* Mesma escala de H2 do Guia (30/38 mobile, 40/48 desktop) — reaproveitada
   aqui em vez de um valor novo, já que o efeito visual pedido ("números
   grandes") é exatamente o que a escala H2/H3 já cobre. */
.stats-numero {
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: #fff;
}

@media (min-width: 768px) {
    .stats-numero {
        font-size: 40px;
        line-height: 48px;
    }
}

.stats-legenda {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 22px;
}

.botao-topo svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

/* ---------- Hero (masthead) ---------- */

/* O overlay original do template era uma cor chapada (opacity: 0.5 sobre
   #1c375e) — não garante contraste em qualquer trecho da foto (a tela clara
   do celular atravessava o texto). Troca por um gradiente: mais escuro do
   lado esquerdo (onde o texto ficou, depois do alinhamento mudar de
   centralizado pra à esquerda) e mais claro do lado direito (deixa a foto
   respirar onde não tem texto por cima). Opacidade de cada stop já é
   controlada dentro do próprio rgba(), por isso opacity: 1 aqui (a
   opacidade global de 0.5 do template some, senão dividiria pela metade o
   contraste que acabamos de calibrar por stop).

   IMPORTANTE (achado da auditoria mobile): o texto do hero fica dentro de
   ".col-xl-7" — essa classe só limita a largura da coluna a partir de
   1200px. Abaixo disso (ou seja, em TODO o mobile/tablet), a coluna ocupa
   100% da largura do container, então o texto (título, lead, frase "sem
   limites") se estende por quase toda a largura, inclusive a faixa mais
   clara do gradiente original (opacidade caindo a 0.35 perto da borda
   direita) — bem onde a tela clara do celular fica ancorada
   ("background-position: right center"). Base (mobile-first, sem media
   query) usa um overlay mais forte e uniforme; o gradiente mais dramático
   só entra a partir de 1200px, quando ".col-xl-7" de fato confina o texto
   à esquerda e sobra photo "livre" de verdade do lado direito. */
header.masthead::before {
    background: linear-gradient(to right,
        rgba(6, 27, 58, 0.85) 0%,
        rgba(6, 27, 58, 0.78) 100%);
    opacity: 1;
}

@media (min-width: 1200px) {
    header.masthead::before {
        background: linear-gradient(to right,
            rgba(6, 27, 58, 0.88) 0%,
            rgba(6, 27, 58, 0.72) 45%,
            rgba(6, 27, 58, 0.35) 100%);
    }
}

/* Bug real encontrado: a regra genérica "h1, .h1 { color: var(--azze-navy) }"
   (escala tipográfica, mais acima neste arquivo) atinge o h1 diretamente —
   isso vence a herança do "text-white" que vem do <div> pai, porque herança
   só vale quando não existe regra própria pro elemento, e aqui existe. Na
   prática, o título do hero estava saindo navy em vez de branco (quase
   ilegível em cima do overlay, que também é navy). "header.masthead h1" tem
   mais especificidade que "h1, .h1" (elemento+elemento vs elemento simples),
   então essa regra ganha sem precisar de !important. O .lead não tinha esse
   problema (não tem color próprio na escala tipográfica, então já herdava
   branco do <div> pai normalmente). */
header.masthead h1 {
    color: #fff;
}

/* Reforço de legibilidade: text-shadow sutil, complementar ao gradiente
   acima (o gradiente é quem garante o contraste; o text-shadow só ajuda
   a destacar a borda das letras em qualquer ponto específico da foto). */
header.masthead h1,
header.masthead .lead,
header.masthead .hero-destaque {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Linha de reforço "sem limites" sob os CTAs do hero — tom mais suave que
   o .lead (branco a 75% de opacidade), pra não competir visualmente com
   H1/lead/botões, só reforça sem virar um segundo elemento de destaque. */
.hero-destaque {
    color: rgba(255, 255, 255, 0.75);
}

/* Foto customizada (aprovada) no lugar do banco de imagens genérico do
   template. O sujeito principal (mão + celular) fica perto da borda
   direita da foto original — "right center" garante que a borda direita
   da imagem sempre fique colada na borda direita do container, então o
   corte do background-size:cover (quando a proporção da tela não bate com
   a da foto) tira só da esquerda (parede vazia), nunca do celular. Sem
   isso (posição padrão "center center"), em telas estreitas o celular
   ficava quase todo fora da área visível. */
header.masthead {
    background-image: url('../../images/fundo-home.png');
    background-position: right center;
}

/* ---------- CTA final ---------- */

/* Troca de fundo-home.png (reaproveitada do hero) pra foto própria da seção
   (pronto-para-vender.png). Composição diferente: o celular fica mais
   centralizado horizontalmente, mas com o peso visual mais pro centro-baixo
   do quadro (topo=caixa/planta, menos importante; celular+mão ocupam de
   ~27% a ~84% da altura, com o centro de massa por volta de 55-60%) — "right
   center" (calibrado pra fundo-home.png, onde o celular ficava colado na
   borda direita) não serve aqui, essa foto não tem esse mesmo desequilíbrio
   horizontal. "center 65%" desloca a janela visível pra baixo o suficiente
   pra sobrar mais corte em cima (caixa/planta) do que embaixo (celular/mão),
   conferido calculando o corte nos dois regimes de largura de tela desta
   seção (larga/curta no desktop = corte só vertical; estreita/quase
   quadrada no mobile, por causa do padding fixo = corte também horizontal,
   mas aí o celular já fica dentro da área visível mesmo com x centralizado,
   por não estar perto de nenhuma borda como na foto do hero). */
.call-to-action {
    background-image: url('../../images/pronto-para-vender.png');
    background-position: center 65%;
}

/* Overlay real desta seção: nunca tinha sido corrigido antes — o ::before
   continuava com a cor genérica do template (#1c375e a 50% de opacidade),
   nem era o navy da marca. Troca pra gradiente radial centralizado (mais
   escuro nas bordas, um pouco mais claro no centro, onde fica o título +
   botão), com opacidade embutida por stop — por isso opacity: 1, mesmo
   princípio do hero, pra não dobrar a atenuação por cima do que já foi
   calibrado no gradiente. */
.call-to-action::before {
    background: radial-gradient(circle at center,
        rgba(6, 27, 58, 0.55) 0%,
        rgba(6, 27, 58, 0.78) 100%);
    opacity: 1;
}

/* Mesmo bug já corrigido no h1 do hero: "h2, .h2 { color: var(--azze-navy) }"
   (escala tipográfica) atinge o h2 diretamente e vence a herança do
   "text-white" que vem da <section class="call-to-action text-white">.
   "Pronto pra vender..." estava saindo navy sobre o fundo escuro, quase
   ilegível. Mais específico que "h2, .h2", ganha sem precisar de !important. */
.call-to-action h2 {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* O template não define background-position pra .showcase-img (só
   min-height + background-size:cover) — o padrão do CSS é "0% 0%" (topo-
   esquerda), não centralizado. Com fotos de banco de imagem (paisagem)
   isso passava despercebido; com as fotos verticais atuais (retrato,
   pessoa segurando celular) o corte batia só embaixo/direita e cortava
   parte da tela do celular nas larguras mais largas. "center" evita isso,
   já que o conteúdo relevante (mão + celular) fica centralizado em cada
   uma das 3 fotos. */
.showcase .showcase-img {
    background-position: center;
}

/* ---------- Seção de preço (fundo com foto) ---------- */

/* Antes era fundo branco liso. plano-completo.png foi composta pra ser
   equilibrada (produtos espalhados por toda a largura, sem um ponto focal
   concentrado num canto) — conferi visualmente antes de decidir, "center
   center" cobre bem. position:relative aqui + position-relative no
   .container (ver index.php) reproduz exatamente o mesmo mecanismo de
   empilhamento já usado no hero e no CTA final (::before absoluto por
   baixo, conteúdo em fluxo normal por cima). */
#preco {
    position: relative;
    background-image: url('../../images/plano-completo.png');
    background-size: cover;
    background-position: center center;
}

/* Overlay uniforme (chapado, não gradiente) -- a versão anterior era um
   radial mais claro bem no centro (0.5) e mais escuro nas bordas (0.72),
   exatamente onde o título/subtítulo ficam centralizados: contraste ruim
   documentado (print do usuário) bem onde o texto está, não nas bordas.
   Opacidade única, alta o bastante pra garantir leitura em qualquer parte
   da foto, não só onde por acaso já estava escuro. */
#preco::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(6, 27, 58, 0.68);
}

/* Título/subtítulo passam a ficar sobre a foto — eram navy/cinza sobre
   fundo branco, agora precisam do mesmo tratamento já usado nos outros
   títulos sobre imagem (branco + text-shadow). Só h2 e o novo
   .preco-subtitulo (que substitui .text-muted, cinza demais pra ler sobre
   foto mesmo com overlay) — não o h3 "Mensal/Trimestral/Anual" de dentro
   dos cards, que continua sobre fundo branco normal. */
#preco h2,
#preco .preco-subtitulo {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

#preco .preco-subtitulo {
    color: rgba(255, 255, 255, 0.9);
}

/* Checklist "Todos os planos incluem" -- mesmo cuidado de contraste do
   h2/subtítulo acima: antes usava .text-muted (cinza) pro título e a cor
   padrão do body (escura) pros itens, praticamente ilegível sobre a foto
   escurecida. Peso maior só no título (leve destaque), itens com peso
   normal -- só a cor muda em relação ao texto padrão. */
#preco .preco-checklist-titulo {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

#preco .preco-checklist-item {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Sombra mais pronunciada que o .shadow-sm padrão do Bootstrap (que já vem
   com !important — por isso preciso repetir aqui), pra o card "flutuar"
   visualmente sobre a foto escurecida. Fundo do card continua 100% opaco
   (--bs-card-bg: #fff, do próprio Bootstrap, não sobrescrito em nenhum
   lugar), então a foto não vaza através dele. */
#preco .card {
    box-shadow: 0 1.5rem 3rem rgba(6, 27, 58, 0.5) !important;
}

/* ---------- Logo (navbar) ---------- */

/* Altura fixa pra ocupar o mesmo espaço vertical que o texto "AzzePro" ocupava
   antes (font-size padrão do .navbar-brand do Bootstrap, ~1.25rem/20px) --
   width: auto preserva a proporção nativa do arquivo (800x117). */
.navbar-brand img {
    height: 32px;
    width: auto;
}

/* ---------- Ícones Lucide (SVG inline, stroke="currentColor") ---------- */

.icone-lucide {
    width: 1em;
    height: 1em;
    stroke: currentColor;
}

/* Ícones informativos (recursos) = navy institucional, não é CTA. */
.features-icons-icon .icone-lucide {
    width: 3rem;
    height: 3rem;
    color: var(--azze-navy);
}

/* Checkmarks da seção de preço = verde de ação (reforça o caminho de conversão). */
.icone-check-preco {
    color: var(--azze-green);
}

/* Checkmarks do checklist "Todos os planos incluem" (seção de Preço) --
   badge circular (fundo verde bem claro + ícone verde forte), mais legível
   que o traço solto de .icone-check-preco usado no resto da LP (ex: seção
   "100% do valor", que continua com o estilo antigo -- escopo deste ajuste
   é só o checklist de planos). Classe própria (não reaproveita
   .icone-check-preco) pra não afetar aquele outro lugar sem querer. */
.icone-check-plano {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.3rem;
    box-sizing: border-box;
    background-color: #E6F9EF;
    color: var(--azze-green);
    border-radius: 50%;
}

/* ---------- Reposicionamento LP: fluxo "Receba pedidos organizados" ---------- */

/* Mobile-first: coluna empilhada, seta apontando pra baixo (rotate 90deg) --
   linha horizontal só a partir do lg (992px), reaproveitando o mesmo círculo
   .features-icons-icon já usado nos cards de Recursos, pra manter a mesma
   linguagem visual sem CSS novo pro ícone em si. */
.fluxo-pedido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.fluxo-pedido-item {
    text-align: center;
    max-width: 220px;
}

.fluxo-pedido-seta {
    color: var(--azze-green);
    transform: rotate(90deg);
}

.fluxo-pedido-seta .icone-lucide {
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 992px) {
    .fluxo-pedido {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .fluxo-pedido-seta {
        transform: none;
        margin-top: 1.6rem;
        flex-shrink: 0;
    }
}

/* ---------- Reposicionamento LP: "100% do valor da venda" + diferenciais ---------- */

.destaque-sem-taxas {
    background-color: rgba(0, 201, 104, 0.06);
}

.destaque-kicker {
    color: var(--azze-green);
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* Lista das pills -- fileira única sempre (nowrap), nunca quebra linha.
   overflow-x:auto é uma rede de segurança silenciosa: se o conteúdo couber
   (caso normal a partir de ~768px, com o tamanho reduzido abaixo + a coluna
   mais larga que o resto da seção, col-lg-10 em vez de col-lg-8 no index.php),
   não aparece scroll nenhum; se não couber (mobile pequeno), rola
   horizontalmente em vez de quebrar -- nunca as duas coisas ao mesmo tempo. */
.diferenciais-lista {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.25rem 0.5rem;
}

.diferencial-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-block;
    padding: 0.35rem 0.65rem;
    background-color: #fff;
    border: 1px solid rgba(0, 201, 104, 0.35);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--azze-navy);
}

@media (min-width: 768px) {
    .diferencial-pill {
        padding: 0.45rem 0.85rem;
        font-size: 13px;
    }
}

@media (min-width: 992px) {
    .diferencial-pill {
        padding: 0.5rem 1rem;
        font-size: 14px;
    }
}

/* ---------- Reposicionamento LP: bloco "Dor -> Solução" (comparativo em cards) ---------- */

.secao-dor-solucao {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
}

@media (min-width: 992px) {
    .secao-dor-solucao {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.card-dor-solucao {
    background-color: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(6, 27, 58, 0.06);
}

.card-dor-solucao-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--azze-navy);
    margin-bottom: 1.5rem;
}

.card-dor-solucao-lista li {
    font-size: 16px;
    font-weight: 400;
    color: var(--azze-navy);
}

.card-dor-solucao-lista li:not(:last-child) {
    margin-bottom: 1rem;
}

.card-dor-solucao-lista .icone-lucide {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 0.25rem;
    box-sizing: content-box;
}

/* Vermelho padrão do Bootstrap (--bs-danger, #dc3545), já usado em todo o
   projeto pra ação destrutiva/negativa -- reaproveitado aqui, não é cor nova. */
.card-dor .card-dor-solucao-lista .icone-lucide {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.card-solucao .card-dor-solucao-lista .icone-lucide {
    background-color: rgba(0, 201, 104, 0.12);
    color: var(--azze-green);
}

/* ---------- Reposicionamento LP: card de plano em destaque ("Mais popular") ---------- */

.card-plano-destaque {
    border: 2px solid var(--azze-green) !important;
}

.badge-mais-popular {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--azze-green);
    color: #fff;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ---------- Telas de autenticação (/cadastro, /login — lojista) ---------- */

/* Compartilhado entre /cadastro e /login (o `<head>` de cada arquivo repete
   os mesmos <link>, mas as regras em si moram só aqui — mesmo princípio já
   usado pelo resto deste arquivo, que também serve várias páginas). Fundo
   levemente tingido de navy (não branco/cinza genérico), pra dar alguma
   identidade mesmo numa tela sem foto/seção nenhuma. */
.auth-body {
    min-height: 100vh;
    background: linear-gradient(180deg, #F7F9FC 0%, #EAEFF6 100%);
}

.auth-topo {
    padding: 1.5rem 1rem 0.5rem;
}

.auth-logo img {
    height: 32px;
    width: auto;
}

/* Mesmo tratamento visual de .nav-link-entrar (navy, hover verde, sem fundo)
   — não reaproveitada diretamente porque aqui o papel é "voltar", não
   "entrar", mas a intenção visual (link secundário discreto) é a mesma. */
.auth-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.25rem;
    color: var(--azze-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.auth-voltar:hover,
.auth-voltar:focus {
    color: var(--azze-green);
}

.auth-voltar .icone-lucide {
    width: 1rem;
    height: 1rem;
}

.auth-wrapper {
    padding: 1rem 1rem 3rem;
}

.auth-card {
    width: 100%;
}

.auth-card .card-body {
    padding: 1.75rem 1.25rem;
}

/* A partir do breakpoint md (768px) do Bootstrap 5: card centralizado com
   largura máxima, não mais ocupando a tela inteira. Largura própria por
   página (login é um form curto, cadastro tem mais campos) via um segundo
   seletor no próprio <body>, sem precisar de classe extra por elemento. */
@media (min-width: 768px) {
    .auth-wrapper {
        padding-top: 2rem;
    }

    .auth-card {
        margin-inline: auto;
    }

    .auth-card .card-body {
        padding: 2.5rem;
    }

    body.auth-body--estreito .auth-card {
        max-width: 440px;
    }

    body.auth-body--largo .auth-card {
        max-width: 560px;
    }
}

/* Variante personalizada do cabeçalho (cliente/login.php, cliente/cadastro.php)
   -- quando a loja de origem é conhecida (ver Core\SessaoCliente/ Project
   status), o avatar+nome da loja substitui a logo genérica da AzzePro, mesmo
   espírito visual (link centralizado, mesma altura ~32-48px), só que redondo
   em vez do retângulo da logo. */
.auth-logo-loja {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.auth-logo-loja-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Fallback sem imagem de avatar -- cor de fundo vem de Core\Avatar::corFundo()
   (classe bg-* do Bootstrap, determinística por loja), não fixa aqui, pra
   ficar consistente com o mesmo círculo já usado na barra de topo do painel
   (public/painel/_avatar.php). */
.auth-logo-loja-avatar--iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.auth-logo-loja-nome {
    color: var(--azze-navy);
    font-weight: 600;
    font-size: 15px;
}

/* ===========================================================================
   PÁGINAS INSTITUCIONAIS (sobre / contato / termos / privacidade)

   Carregadas via _layout_institucional_topo.php + _rodape.php. Ficam aqui, e
   não num CSS novo, porque são páginas do mesmo conjunto visual da landing
   (mesma navbar fixa, mesmo rodapé, mesma tipografia) -- um arquivo à parte
   só pra elas seria mais um <link> por página sem ganho nenhum.

   O padding-top compensa a navbar .fixed-top, mesma lógica já usada pela
   header.masthead da landing.
   =========================================================================== */
.institucional-wrapper {
    padding-top: 96px;
    padding-bottom: 4rem;
}

.institucional-titulo {
    color: var(--azze-navy, #061B3A);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.institucional-atualizacao {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 2rem;
}

/* Documento longo: a hierarquia precisa aguentar leitura corrida, então
   espaçamento generoso entre seções e linha confortável no corpo. */
.institucional-conteudo h2 {
    color: var(--azze-navy, #061B3A);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.institucional-conteudo h3 {
    color: var(--azze-navy, #061B3A);
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.institucional-conteudo p,
.institucional-conteudo li {
    line-height: 1.7;
}

.institucional-conteudo ul,
.institucional-conteudo ol {
    margin-bottom: 1rem;
}

.institucional-conteudo li {
    margin-bottom: 0.35rem;
}

/* Bloco de destaque pra afirmação que o leitor NÃO pode passar batido
   (ex: "a AzzePro não processa pagamentos"). */
.institucional-destaque {
    border-left: 4px solid var(--azze-green, #00C968);
    background-color: #F7F9FC;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.institucional-destaque p:last-child {
    margin-bottom: 0;
}

/* Marca visível de "isto ainda passa por advogado". É deliberadamente
   chamativo: some junto com a revisão jurídica, e enquanto estiver na tela
   ninguém lê o documento achando que é definitivo. */
.institucional-revisar {
    border-left: 4px solid #fd7e14;
    background-color: #FFF8F0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.institucional-revisar p:last-child {
    margin-bottom: 0;
}

.institucional-contato-bloco {
    border: 1px solid rgba(6, 27, 58, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Aviso de dados e cookies (_aviso_dados.php)

   Barra inferior discreta, NUNCA um modal que bloqueia o conteúdo: o aviso é
   informativo (só há cookie estritamente necessário), então cobrir a página
   ou o CTA seria custo de conversão sem contrapartida nenhuma de conformidade.
   Empilha no mobile e respeita a safe-area do iOS. */
.aviso-dados {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background-color: #061B3A;
    color: #FFFFFF;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.aviso-dados[hidden] {
    display: none;
}

.aviso-dados-texto {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.aviso-dados-texto a {
    color: #FFFFFF;
    text-decoration: underline;
}

.aviso-dados-botao {
    align-self: stretch;
    min-height: 44px;
    padding: 8px 24px;
    border: 0;
    border-radius: 10px;
    background-color: var(--azze-green, #00C968);
    color: #FFFFFF;
    font-weight: 600;
    cursor: pointer;
}

@media (min-width: 768px) {
    .aviso-dados {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .aviso-dados-botao {
        align-self: auto;
        flex: 0 0 auto;
    }
}

/* Honeypot anti-spam (formulário de contato).

   Escondido por CSS, NUNCA com type="hidden" nem display:none no atributo:
   robô ignora campo hidden, mas preenche um <input type="text"> que ele
   encontra no HTML. Fora da tela e sem altura, então humano nunca vê nem
   tabula até ele (o campo também tem tabindex="-1"). */
.campo-oculto {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}