/*
 * Site público (landing, preços, FAQ, integrações, migração, suporte, termos, privacidade).
 * Moldura comum de layout/layout_publico.html: cabeçalho (.lp-nav), rodapé (.lp-footer) e o que
 * vale para todas as páginas. O CSS de cada página continua no block page_css dela.
 * Sem style="" nos templates: a CSP (style-src sem unsafe-inline) bloqueia.
 */

/* === PÁGINA === */
html { scroll-padding-top: 96px; } /* âncora (/#features) não fica escondida atrás do cabeçalho fixo */
body.lp-body {
  padding: 0 !important;
  height: auto; /* o Tabler fixa 100%: com flex, o cabeçalho encolhia e o logo vazava */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.lp-body > .lp-nav,
.lp-body > .lp-footer { flex-shrink: 0; }
.lp-main { flex: 1 0 auto; } /* página curta: o rodapé fica embaixo, não no meio da tela */
/* Abaixo de 992px o Tabler cai para 8px de margem lateral, menos que o gutter das .row.g-4 (12px):
   sobravam 4px de rolagem horizontal em toda página no celular. 16px resolve e respira melhor. */
body.lp-body { --tblr-page-padding: var(--tblr-spacer-3); }

.lp-skip:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 1100;
  background: #fff; color: #1a3a5c; padding: .5rem 1rem; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

/* Tabler: .badge.bg-* não troca a cor do texto (sai da mesma cor do fundo = selo "vazio"). */
.lp-main .badge.bg-primary,
.lp-main .badge.bg-secondary,
.lp-main .badge.bg-success,
.lp-main .badge.bg-info,
.lp-main .badge.bg-danger,
.lp-main .badge.bg-dark { color: #fff; }

/* Celular: o "papel" das páginas internas (.card > .card-body.p-5) comia 48px de cada lado. */
@media (max-width: 575.98px) {
  .lp-main .card > .card-body.p-5 { padding: 1.5rem 1.25rem !important; }
}

/* === CABEÇALHO === */
.lp-nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0.75rem 0;
  transition: box-shadow 0.3s;
}
.lp-nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.lp-nav .brand-text { font-size: 1.375rem; font-weight: 800; color: #1a3a5c; letter-spacing: -0.5px; }
.lp-nav .nav-link { color: #4a5568 !important; font-weight: 500; font-size: 0.9rem; padding: 0.4rem 0.875rem !important; transition: color 0.2s; }
.lp-nav .nav-link:hover,
.lp-nav .nav-link.active { color: #206bc4 !important; }
.lp-nav .nav-link.active { font-weight: 600; }
.lp-nav .icon-menu { font-size: 1.25rem; color: #4a5568; }
.lp-nav .icon-lang { color: #4a5568; font-size: 1.125rem; }
.lp-nav .navbar-toggler { padding: .375rem .5rem; }
.lp-nav .navbar-toggler:focus { box-shadow: none; }
.lp-nav .navbar-toggler:focus-visible { box-shadow: 0 0 0 3px rgba(32,107,196,.25); }
.lp-nav-login { color: #1a3a5c; font-weight: 600; border-color: #d5dde6; }
.lp-nav-login:hover { color: #206bc4; border-color: #206bc4; background: #fff; }
.lp-nav .btn { font-weight: 600; }

@media (max-width: 991.98px) {
  .lp-nav .navbar-collapse { margin-top: .625rem; border-top: 1px solid rgba(0,0,0,.06); }
  .lp-nav .navbar-nav { padding: .375rem 0; }
  .lp-nav .nav-link { font-size: 1rem; padding: .625rem .25rem !important; }
  .lp-nav-actions { border-top: 1px solid rgba(0,0,0,.06); padding: .75rem 0 .25rem; }
  .lp-nav-actions .lp-nav-login { flex: 1; }
  /* Dentro do navbar o Bootstrap posiciona o dropdown "static": no celular ele abria em linha e
     empurrava o botão Entrar. Aqui ele flutua por cima, alinhado à esquerda do ícone. */
  .lp-nav-actions .dropdown { position: relative; }
  .lp-nav-actions .dropdown-menu {
    position: absolute !important; top: 100%; left: 0 !important; right: auto !important;
    min-width: 14rem; padding: .25rem 0; z-index: 1001;
    background: #fff !important; border: 1px solid rgba(0,0,0,.1) !important; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  }
  .lp-nav-actions .dropdown-header,
  .lp-nav-actions .dropdown-item { padding-left: 1rem !important; padding-right: 1rem !important; }
  .lp-nav-actions .dropdown-menu-arrow:before { left: .75rem; right: auto; }
}
@media (max-width: 359.98px) {
  .lp-nav .brand-text { display: none; } /* celular muito estreito: fica só o logo */
}

/* === RODAPÉ === */
.lp-footer { background: #0f1f2e; color: rgba(255,255,255,.6); padding: 4rem 0 2rem; }
.lp-footer .fb { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: .75rem; }
.lp-footer .fdesc { font-size: .875rem; line-height: 1.65; margin-bottom: 1.5rem; }
.lp-footer h2 { color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.4; margin-bottom: 1rem; letter-spacing: .4px; text-transform: none; }
.lp-footer ul { list-style: none; padding: 0; margin: 0; }
.lp-footer ul li { margin-bottom: .5625rem; }
.lp-footer ul li a { color: rgba(255,255,255,.57); text-decoration: none; font-size: .875rem; transition: color .2s; }
.lp-footer ul li a:hover { color: #fff; }
.lp-footer .fcontato a { display: inline-flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.lp-footer .fcontato .ti { font-size: 1.05rem; flex-shrink: 0; }
.lp-footer .fcontato .ti-brand-whatsapp { color: #25d366; }
.lp-footer hr { border-color: rgba(255,255,255,.1); margin: 2rem 0 1.5rem; }
.lp-footer .fbot { font-size: .8125rem; }
/* Contraste AA (4,5:1) sobre o #0f1f2e: branco a 40% dava 3,8:1 e o hash a 35% de opacidade, 2:1. */
.lp-footer .footer-op { font-size: .8rem; color: rgba(255,255,255,.5); margin-bottom: .25rem; }
.lp-footer .footer-op-last { font-size: .8rem; color: rgba(255,255,255,.5); margin-bottom: 0; }
.lp-footer .footer-link-op { color: rgba(255,255,255,.6); text-decoration: none; }
.lp-footer .footer-link-op:hover { color: rgba(255,255,255,.8); }
.lp-footer .lp-footer-hash { opacity: .8; font-size: .75rem; }
@media (max-width: 767.98px) {
  .lp-footer { padding: 3rem 0 1.75rem; }
}