/* =========================================================
   LP /lp-adquira — estilos específicos
   =========================================================
   Complementa main.css + bruno.css. Só o que a landing usa:
   faixas de destaque, lista de módulos do app e o formulário
   estruturado em 2 etapas.

   Tokens herdados de main.css:
     --pp-theme  #cc0000   --pp-header #1A192E
     --pp-bg     #FAFAFA   --pp-text   #6D6B7B
   Gradiente padrão dos botões: 270deg, #e50000 -> #cc0000
========================================================= */

/* ---------------------------------------------------------
   1. Âncoras e utilidades da página
--------------------------------------------------------- */
/* Sem header fixo, a âncora não precisa mais compensar a barra.
   O bruno.css define 100px global; aqui volta para um respiro pequeno. */
.lp-page section[id] {
  scroll-margin-top: 24px;
}

/* Mantem a ultima palavra colada na seta: sem isso, em telas estreitas o
   botao quebra deixando o icone sozinho na segunda linha. */
.lp-nowrap {
  white-space: nowrap;
}

/* Marca centralizada no topo do hero, no lugar da navbar removida. */
.lp-hero-logo {
  text-align: center;
  margin-bottom: 46px;
}
.lp-hero-logo img {
  width: 232px;
  height: auto;
}
@media (max-width: 991px) {
  .lp-hero-logo {
    margin-bottom: 34px;
  }
  .lp-hero-logo img {
    width: 190px;
  }
}

/* O template empurrava o hero para baixo para caber o header absoluto.
   Sem header, ele volta a encostar no topo com um respiro discreto. */
@media (min-width: 1200px) {
  .lp-page .pp-hero-1 {
    margin-top: 28px;
    padding-top: 64px;
  }
}

/* ---------------------------------------------------------
   1.1 Botões — um padrão único para a LP
   ---------------------------------------------------------
   O template anima o hover com um círculo de 300x300px
   (.pp-theme-btn::after, cor #1A192E) que escala de 0.1 a 1.5.
   Num botão de ~250px ele atravessa na diagonal e, no meio do
   caminho, deixa metade do botão escura com o texto ilegível.
   Aqui esse círculo sai de cena e o hover vira escurecer + subir,
   que é previsível e não depende de onde a animação parou.
--------------------------------------------------------- */
.lp-page .pp-theme-btn {
  background: linear-gradient(270deg, #e50000 0%, #cc0000 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-page .pp-theme-btn::before,
.lp-page .pp-theme-btn::after {
  content: none;
}
.lp-page .pp-theme-btn:hover {
  color: #fff;
  filter: brightness(0.92);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(229, 0, 0, 0.28);
}
.lp-page .pp-theme-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.lp-page .pp-theme-btn:focus-visible {
  outline: 3px solid rgba(229, 0, 0, 0.45);
  outline-offset: 3px;
}

/* Variante ghost: o botão do hero é `background: transparent` + borda branca
   (main.css, .pp-hero-1 ... .pp-hero-button .pp-theme-btn). O template
   preenchia com o círculo branco do ::after e por isso mandava
   `color: var(--pp-header)` no hover. Sem o círculo, esse `color` sozinho
   deixaria texto escuro sobre fundo escuro — então o preenchimento branco
   entra direto aqui. Precisa dos 6 níveis para vencer o seletor do template. */
.lp-page .pp-hero-1 .pp-hero-content .pp-hero-button .pp-theme-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.lp-page .pp-hero-1 .pp-hero-content .pp-hero-button .pp-theme-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--pp-header);
  filter: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.lp-page .pp-hero-1 .pp-hero-content .pp-hero-button .pp-theme-btn:hover i {
  color: var(--pp-header);
}
.lp-page .pp-hero-1 .pp-hero-content .pp-hero-button .pp-theme-btn:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

/* Variante invertida: botão branco sobre a faixa vermelha */
.lp-page .lp-cta-final .pp-theme-btn {
  background: #fff;
  color: var(--pp-theme);
}
.lp-page .lp-cta-final .pp-theme-btn:hover {
  background: #fff;
  color: var(--pp-theme);
  filter: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.lp-page .lp-cta-final .pp-theme-btn:focus-visible {
  outline-color: rgba(255, 255, 255, 0.8);
}

/* Faixa vermelha de reforço ("Sem limite de terminais...") */
.lp-faixa {
  background: linear-gradient(270deg, #e50000 0%, #cc0000 100%);
  padding: 46px 0;
  text-align: center;
}
.lp-faixa h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.3;
  margin: 0;
  text-transform: none;
}
@media (max-width: 767px) {
  .lp-faixa {
    padding: 34px 0;
  }
  .lp-faixa h2 {
    font-size: 24px;
  }
}

/* Bloco de CTA final antes do formulário.
   A seção escura acima tem cantos arredondados; sem esta folga a faixa
   vermelha encosta na curva e os dois blocos parecem colados. */
.lp-cta-final {
  background: linear-gradient(270deg, #e50000 0%, #cc0000 100%);
  padding: 80px 0;
  margin-top: 50px;
  text-align: center;
}
@media (min-width: 992px) {
  .lp-cta-final {
    margin-top: 85px;
  }
}
.lp-cta-final h2 {
  color: #fff;
  margin-bottom: 14px;
  text-transform: none;
}
.lp-cta-final p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 30px;
}
.lp-cta-final .pp-theme-btn {
  font-weight: 700;
}

/* Selos de garantia (sem carência / sem multa / sem limite).
   Sem pílula, sem borda e sem fundo: com isso viravam três botões falsos
   competindo com o CTA de verdade. Aqui é só o ícone marcado + o texto. */
.lp-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 26px;
}
.lp-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  color: var(--pp-header);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
/* disco discreto só para ancorar o ícone — o texto fica fora dele,
   então não lê como botão */
.lp-selo i {
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(229, 0, 0, 0.1);
  color: var(--pp-theme);
  font-size: 11px;
}

/* Sobre fundo escuro */
.section-bg-2 .lp-selo,
.lp-form-section .lp-selo {
  color: #fff;
}
.section-bg-2 .lp-selo i,
.lp-form-section .lp-selo i {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Uma linha só a partir de 1400px, que é onde a coluna de texto comporta os
   três rótulos mais longos ("Sem limite de terminais / Sem multas contratuais
   / Sem carência" = 560px numa coluna de 596px). Entre 992 e 1399 a coluna
   fica menor que isso, então continua podendo quebrar — forçar nowrap ali
   causaria transbordo horizontal. */
@media (min-width: 1400px) {
  .lp-selos {
    flex-wrap: nowrap;
  }
}
@media (max-width: 420px) {
  .lp-selo {
    white-space: normal;
  }
}

/* Imagem solta da LP (diagrama, notebook) sem moldura */
.lp-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
}

/* Respiro entre a coluna da imagem e a do texto nas seções de duas colunas.
   O template vem com g-4 (24px), que cola os dois blocos no desktop.
   Mexer no gutter do .row resolve para os dois sentidos (imagem à esquerda
   em "o-sistema"/"app" e à direita em "por-que"). */
@media (min-width: 992px) {
  .lp-page .pp-about-wrapper > .row,
  .lp-page .pp-key-feature-wrapper > .row,
  .lp-page .pp-cta-wrapper > .row {
    --bs-gutter-x: 5rem;
  }
}
@media (min-width: 1200px) {
  .lp-page .pp-about-wrapper > .row,
  .lp-page .pp-key-feature-wrapper > .row,
  .lp-page .pp-cta-wrapper > .row {
    --bs-gutter-x: 6.5rem;
  }
}

/* Seção escura com texto claro */
.lp-dark h2,
.lp-dark h3,
.lp-dark h4 {
  color: #fff;
}
.lp-dark p,
.lp-dark li {
  color: rgba(255, 255, 255, 0.78);
}

/* Sobre fundo escuro o subtítulo vai em branco — o vermelho do tema fica
   com contraste baixo no #1A192E. O traço decorativo continua vermelho. */
.lp-dark .pp-section-title span.pp-sub-title,
.lp-form-intro .pp-section-title span.pp-sub-title {
  color: #fff;
}

/* ---------------------------------------------------------
   2. Módulos do app — grade de cartões
   Cada item tem o mesmo tamanho, então a linha nunca desalinha
   por causa da descrição da pré-venda (que ocupa a largura toda).
--------------------------------------------------------- */
.lp-modulos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.lp-modulo {
  display: flex;
  align-items: center;
  gap: 12px;
  /* o template centraliza o texto da seção no mobile; aqui o cartão
     precisa continuar alinhado à esquerda para a lista ficar legível */
  text-align: left;
  padding: 13px 15px;
  border: 1px solid #ececf1;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.35;
  color: var(--pp-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.lp-modulo:hover {
  border-color: rgba(229, 0, 0, 0.35);
  box-shadow: 0 6px 18px rgba(229, 0, 0, 0.08);
  transform: translateY(-2px);
}

.lp-modulo i {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(229, 0, 0, 0.08);
  color: var(--pp-theme);
  font-size: 14px;
}

.lp-modulo-txt {
  min-width: 0;
}
.lp-modulo-txt b {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  color: var(--pp-header);
}
.lp-modulo-txt small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pp-text);
}

/* Pré-venda: ocupa a linha inteira e ganha destaque de cor */
.lp-modulo--destaque {
  grid-column: 1 / -1;
  border-color: rgba(229, 0, 0, 0.28);
  background: linear-gradient(90deg, rgba(229, 0, 0, 0.06) 0%, rgba(229, 0, 0, 0) 70%);
}
.lp-modulo--destaque i {
  background: linear-gradient(270deg, #e50000 0%, #cc0000 100%);
  color: #fff;
}

/* Variante para quando a grade estiver sobre fundo escuro */
.lp-dark .lp-modulo,
.section-bg-2 .lp-modulo {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
.lp-dark .lp-modulo-txt b,
.section-bg-2 .lp-modulo-txt b {
  color: #fff;
}
.lp-dark .lp-modulo-txt small,
.section-bg-2 .lp-modulo-txt small {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 575px) {
  .lp-modulos {
    grid-template-columns: 1fr;
  }
  .lp-modulo {
    padding: 12px 14px;
    font-size: 14.5px;
  }
}

/* ---------------------------------------------------------
   3. Formulário estruturado em 2 etapas
--------------------------------------------------------- */
.lp-form-section {
  background-color: var(--pp-header);
  padding: 110px 0;
  /* O footer do template tem um ::before opaco com `top: -50%` que invade
     ~350px da seção anterior (main.css, .pp-footer-section::before). Como o
     footer é z-index:9, ele cobria a parte de baixo do formulário. Na home
     isso não aparece porque lá a última seção termina em padding vazio.
     Subir esta seção acima do footer resolve sem tocar no CSS do template. */
  position: relative;
  z-index: 10;
}
@media (max-width: 991px) {
  .lp-form-section {
    padding: 80px 0;
  }
}

/* Variante de uma coluna só.
   O formulário saiu da página e virou modal (assets/js/lp-adquira.js), então
   esta seção ficou só com a copy e o CTA — sem a coluna da direita, o texto
   alinhado à esquerda deixava metade da largura vazia. */
.lp-form-section--solo .lp-form-intro {
  text-align: center;
}
.lp-form-section--solo .lp-form-cta {
  margin-top: 34px;
}
.lp-form-section--solo .lp-selos {
  justify-content: center;
  margin-top: 30px;
}
.lp-form-section--solo .lp-form-foot {
  margin-top: 26px;
}

.lp-form-intro .pp-section-title {
  margin-bottom: 10px;
}
/* o subtítulo desta seção é longo; no celular ele quebra em 2 linhas e
   fica melhor um pouco menor e sem tanto respiro embaixo */
@media (max-width: 575px) {
  .lp-form-intro .pp-sub-title {
    font-size: 16px;
    margin-bottom: 14px;
    line-height: 1.35;
  }
}
.lp-form-intro h2 {
  color: #fff;
  margin-bottom: 22px;
  text-transform: none;
}
.lp-form-intro p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.7;
}
.lp-form-intro strong {
  color: #fff;
}

/* Cartão branco do formulário */
.lp-form-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 34px 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  border-top: 5px solid var(--pp-theme);
}
@media (max-width: 575px) {
  .lp-form-card {
    padding: 28px 20px 24px;
    border-radius: 18px;
  }
}

.lp-form-head {
  margin-bottom: 22px;
}
.lp-form-head h3 {
  font-size: 24px;
  color: var(--pp-header);
  margin-bottom: 6px;
}
.lp-form-head p {
  font-size: 14px;
  color: var(--pp-text);
  margin: 0;
}

/* Barra de progresso das etapas */
.lp-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.lp-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  font-family: "DM Sans", sans-serif;
  color: #9aa3af;
  transition: color 0.25s ease;
}
.lp-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e9eaee;
  color: #9aa3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
.lp-step.is-active {
  color: var(--pp-header);
}
.lp-step.is-active .lp-step-num {
  background: linear-gradient(270deg, #e50000 0%, #cc0000 100%);
  color: #fff;
}
.lp-step.is-done .lp-step-num {
  background: #12855b;
  color: #fff;
}
.lp-steps-bar {
  height: 4px;
  background: #e9eaee;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 26px;
}
.lp-steps-bar span {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: 4px;
  background: linear-gradient(270deg, #e50000 0%, #cc0000 100%);
  transition: width 0.3s ease;
}

/* Painéis das etapas */
.lp-form-step {
  display: none;
}
.lp-form-step.is-current {
  display: block;
}

.lp-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.lp-fieldset legend {
  font-size: 12px;
  font-weight: 800;
  font-family: "DM Sans", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pp-theme);
  margin-bottom: 14px;
  float: none;
  width: auto;
}

/* Campos */
.lp-field {
  margin-bottom: 16px;
}
.lp-field label,
.lp-radio-group > span.lp-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  font-family: "DM Sans", sans-serif;
  color: var(--pp-header);
  margin-bottom: 6px;
}
.lp-field label .lp-req,
.lp-label .lp-req {
  color: #e11d2a;
}
.lp-field .lp-hint {
  display: block;
  font-size: 12px;
  color: #9aa3af;
  margin-top: 5px;
  font-weight: 400;
}

.lp-control {
  position: relative;
  display: flex;
  align-items: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lp-control:focus-within {
  border-color: #e50000;
  background: #fff;
}
.lp-control input,
.lp-control select,
.lp-control textarea {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  padding: 14px 16px;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
  color: #1b2a4a;
  outline: none;
  border-radius: 12px;
}
.lp-control textarea {
  min-height: 92px;
  resize: vertical;
}
.lp-control select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 40px;
}
.lp-control.lp-control--select::after {
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  right: 16px;
  font-size: 12px;
  color: #9aa3af;
  pointer-events: none;
}
.lp-control select:disabled {
  cursor: not-allowed;
  color: #9aa3af;
}
.lp-control input::placeholder,
.lp-control textarea::placeholder {
  color: #9aa3af;
}
.lp-phone-prefix {
  padding-left: 16px;
  color: var(--pp-header);
  font-weight: 700;
  font-size: 15px;
  font-family: "DM Sans", sans-serif;
}
.lp-phone-prefix + input {
  padding-left: 8px;
}

.lp-field.is-invalid .lp-control {
  border-color: #e11d2a;
  background: #fff5f5;
}
.lp-field-error {
  display: none;
  font-size: 12px;
  color: #e11d2a;
  margin-top: 5px;
}
.lp-field.is-invalid .lp-field-error {
  display: block;
}

/* Duas colunas (Estado + Cidade) */
.lp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 575px) {
  .lp-row {
    grid-template-columns: 1fr;
  }
}

/* Rádios "Já possui CNPJ?" */
.lp-radio-group {
  margin-bottom: 16px;
}
.lp-radios {
  display: flex;
  gap: 10px;
}
.lp-radio {
  flex: 1;
  position: relative;
}
.lp-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lp-radio span {
  display: block;
  text-align: center;
  padding: 13px 10px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #1b2a4a;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lp-radio input:checked + span {
  border-color: var(--pp-theme);
  background: rgba(229, 0, 0, 0.07);
  color: var(--pp-theme);
  font-weight: 700;
}
.lp-radio input:focus-visible + span {
  outline: 2px solid #e50000;
  outline-offset: 2px;
}
.lp-radio-group.is-invalid .lp-radio span {
  border-color: #e11d2a;
  background: #fff5f5;
}
.lp-radio-group .lp-field-error {
  display: none;
}
.lp-radio-group.is-invalid .lp-field-error {
  display: block;
}

/* Campo condicional do CNPJ */
.lp-conditional {
  display: none;
}
.lp-conditional.is-visible {
  display: block;
}

/* Aceite LGPD */
.lp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pp-text);
  cursor: pointer;
}
.lp-check input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: #e50000;
  flex-shrink: 0;
}
.lp-check a {
  color: var(--pp-theme);
  text-decoration: underline;
}
.lp-check.is-invalid {
  color: #e11d2a;
}

/* Ações / botões de navegação */
.lp-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.lp-form-actions .pp-theme-btn {
  flex: 1;
  text-align: center;
  border: none;
  cursor: pointer;
}
.lp-btn-voltar {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: var(--pp-text);
  border-radius: 100px;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}
.lp-btn-voltar:hover {
  border-color: var(--pp-theme);
  color: var(--pp-theme);
}
.lp-form-actions button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.lp-form-msg {
  text-align: center;
  font-size: 14px;
  min-height: 18px;
  margin: 0 0 10px;
}
.lp-form-msg.is-error {
  color: #e11d2a;
}
.lp-form-msg.is-success {
  color: #12855b;
}

.lp-form-foot {
  text-align: center;
  font-size: 12px;
  color: #9aa3af;
  margin: 16px 0 0;
}
.lp-form-foot i {
  color: #12855b;
  margin-right: 5px;
}

/* ---------------------------------------------------------
   Estado "sua farmácia já é Digifarma"
   ---------------------------------------------------------
   Aparece no lugar do formulário quando a checagem de CNPJ
   responde que o CNPJ tem contrato ativo. Não é uma tela de
   erro: é um desvio de rota, então mantém o tom positivo e
   oferece saídas em vez de encerrar o assunto.
--------------------------------------------------------- */
.lp-cliente {
  text-align: center;
  padding: 6px 0 2px;
}
.lp-cliente-selo {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #12855B;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-cliente h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--pp-header);
  margin: 0 0 10px;
}
.lp-cliente > p {
  color: var(--pp-text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.lp-atalhos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.lp-atalhos a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #E7E7E9;
  border-radius: 12px;
  color: var(--pp-header);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.lp-atalhos a:hover {
  border-color: var(--pp-theme);
  background: #FDF6F6;
}
.lp-atalho-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(204, 0, 0, .09);
  color: var(--pp-theme);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-atalho-txt {
  display: block;
  line-height: 1.35;
}
.lp-atalho-txt b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.lp-atalho-txt span {
  display: block;
  font-size: 13px;
  color: var(--pp-text);
  margin-top: 1px;
}
/* margin-left:auto empurra a seta para a direita sem precisar de spacer */
.lp-atalho-seta {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  color: #A9A8B3;
  transition: color .15s ease, transform .15s ease;
}
.lp-atalhos a:hover .lp-atalho-seta {
  color: var(--pp-theme);
  transform: translateX(2px);
}

/* =========================================================
   MODAL DE CONTATO — botões flutuantes
   =========================================================
   O modal usa as classes .df-form-* do bruno.css. O que falta ali é isto:
   o botão do WhatsApp e o "voltar ao topo" são position:fixed e ficavam
   POR CIMA do overlay. O do WhatsApp chegava a ser absurdo — ele é o
   gatilho que abriu o modal e continuava piscando na frente dele.
   A classe entra no <body> em abrirModal() (assets/js/lp-adquira.js). */
body.lpm-modal-aberto .whatsapp-float,
body.lpm-modal-aberto .pp-back-to-top {
  /* !important porque as duas regras normais perdem aqui: o botão do
     WhatsApp roda a animação "blink" (animação ganha de declaração normal na
     cascata, então opacity/visibility eram ignorados) e o "voltar ao topo"
     tem estilo próprio do template. display:none resolve os dois de uma vez. */
  display: none !important;
}