/* Classes específicas de public/lia-pagina-de-vendas.html, sobre o LIA
   Design System (lia-ds.css). Cada uma substitui um style="" que
   docs/lia-pagina-de-vendas.html usava inline — a CSP não permite atributos
   style. Não é gerado por scripts/prepare-lia-sales-page.mjs — edite
   normalmente; o script só troca os style="" do HTML por estas classes. */

.lia-u-self-start { align-self: flex-start; }
.lia-u-items-start { align-items: flex-start; }
.lia-u-m0 { margin: 0; }
.lia-u-mt-2 { margin: 2px 0 0; }
.lia-u-mt-6 { margin-top: 6px; }
.lia-u-mt-14 { margin: 14px 0 0; }
.lia-u-gap-8 { gap: 8px; }
.lia-u-fw-700 { font-weight: 700; }

.lia-btn--chip { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }

.lia-text--amber { color: var(--lia-amber); }
.lia-text--amber-800 { color: var(--lia-amber-800); }
.lia-text--butter { color: var(--lia-butter); }
.lia-text--ink-soft { color: var(--lia-ink-soft); }
.lia-text--white { color: #fff; }

.pg-mock__title { font-family: var(--lia-font-display); font-weight: 600; font-size: 15px; }
.pg-mock__row--wrap { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.pg-section--divided { border-block: 2px solid var(--lia-line); }
.pg-section--flush-top { padding-top: 0; }
.pg-bonus-card--pt { padding-top: 52px; }
.pg-footer__tagline { margin: 0; max-width: 34ch; }
.pg-faq-lead { display: flex; align-items: center; gap: 8px; margin: 0; }

.lia-brand__mark--footer {
  background: var(--lia-mascot) 50% 30% / 300% auto no-repeat, var(--lia-sky);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--lia-butter);
}

.lia iconify-icon svg { width: 100%; height: 100%; display: block; }

/* Menu "Acessar" (comprador já ativo, não é CTA de compra): botão + lista de
   2 links, no menu principal e no hero. Não há componente de dropdown/popover
   leve no lia-ds.css (só .lia-select nativo e o .lia-modal, pesado demais
   para 2 itens), então é um componente novo aqui.
   A visibilidade do menu é controlada só por [data-open="true"] (não por
   `hidden`, e nunca por um `display` incondicional na própria classe — isso
   já causou um bug real: um `display: grid` sem essa condição vencia a regra
   nativa do navegador para `[hidden]`, porque CSS de autor sempre tem
   prioridade sobre o CSS nativo do navegador, mesmo com especificidade
   igual, deixando o menu sempre visível e o clique sem efeito). */
.pg-access-menu { position: relative; display: inline-flex; }
.pg-access-menu__menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--lia-z-nav, 30);
  min-width: 220px; background: #fff; border-radius: var(--lia-radius-lg);
  box-shadow: var(--lia-shadow-lg); padding: 8px; gap: 2px;
}
.pg-access-menu[data-open="true"] .pg-access-menu__menu { display: grid; }
.pg-access-menu__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--lia-radius-md);
  color: var(--lia-ink); text-decoration: none; font-weight: 700; font-size: 14.5px; white-space: nowrap;
}
.pg-access-menu__item:hover { background: var(--lia-sky-100); }

/* O gatilho do menu, dentro de .lia-navbar__links, herda o visual dos demais
   links do menu (Como funciona, Recursos...) — é um <button>, então zera os
   estilos nativos de botão antes de aplicar o restante da classe. */
button.lia-navbar__link.pg-access-menu__trigger {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.pg-access-menu__trigger iconify-icon { font-size: 16px; }

/* Versão "simples" usada no hero: texto sublinhado no hover, sem moldura de
   botão, para não competir com o CTA principal. */
.pg-access-menu__trigger--plain {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--lia-ink-soft); font-weight: 700; font-size: 15px; padding: 4px 0;
}
.pg-access-menu__trigger--plain:hover { color: var(--lia-ink); text-decoration: underline; }