/* ==========================================================================
   RBytes Noivas — mobile.css
   --------------------------------------------------------------------------
   Arquivo ÚNICO com todos os ajustes responsivos / mobile do sistema.
   Sempre carregado DEPOIS de site.css, landing.css ou auth.css nos layouts,
   para que as regras daqui prevaleçam sem precisar de !important à toa.

   O comportamento (gestos da gaveta, dica de rolagem das tabelas, rótulos
   dos cards de tabela, menus do topo) fica em /js/mobile.js — este arquivo
   cuida só da aparência.

   Breakpoints (alinhados ao Bootstrap 5.3):
     <= 1199.98px → notebook pequeno (régua de menus mais compacta)
     <= 991.98px  → tablet retrato e abaixo (a régua de menus vira gaveta)
     <= 767.98px  → celular paisagem e abaixo
     <= 575.98px  → celular retrato
     (pointer: coarse) → qualquer dispositivo de toque
   ========================================================================== */

:root {
  --mobile-tap: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Evita o iOS aumentar a fonte sozinho ao girar o aparelho */
html { -webkit-text-size-adjust: 100%; }

/* Elementos criados por mobile.js: invisíveis fora do contexto mobile */
.table-scroll-hint { display: none; }


/* ==========================================================================
   1. TOQUE — alvos maiores e feedback adequado
   ========================================================================== */
@media (pointer: coarse) and (max-width: 1199.98px) {
  a, button, .btn, [role="button"], label, summary {
    -webkit-tap-highlight-color: rgba(149, 37, 82, .15);
    touch-action: manipulation;
  }

  .btn, .nav-link, .dropdown-item, .page-link { min-height: 40px; }
  .btn-sm { min-height: 38px; }
  .btn-xs { min-height: 30px; }

  .btn-close {
    padding: .7rem;
    background-size: .8em;
    opacity: .7;
  }

  .form-check-input { width: 1.15em; height: 1.15em; margin-top: .18em; }
  .form-check-label { padding-left: .15rem; }

  .table td .btn-sm { min-width: 38px; }
}


/* ==========================================================================
   2. FORMULÁRIOS — impede o zoom automático do iOS (< 16px dispara o zoom)
   ========================================================================== */
@media (max-width: 991.98px) {
  .form-control,
  .form-select,
  .input-group-text,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px;
  }

  .form-control-sm,
  .form-select-sm {
    font-size: 16px;
    padding: .4rem .6rem;
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] { min-height: 40px; }

  .form-label { font-size: .8rem; margin-bottom: .25rem; }
  textarea.form-control { min-height: 88px; }
}


/* ==========================================================================
   3. CABEÇALHO — régua compacta no notebook, gaveta no tablet/celular
   ========================================================================== */
/* Notebook pequeno: os sete grupos precisam caber em 992–1200px */
@media (max-width: 1199.98px) {
  .app-nav-link { padding: 0 .6rem; font-size: .8rem; gap: .4rem; }
  .app-nav-link::before { left: .6rem; right: .6rem; }
  .app-action .lh-sm .fw-semibold { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 991.98px) {
  html, body { overflow-x: clip; max-width: 100%; }
  img, svg, video, canvas { max-width: 100%; }

  :root { --rb-menu-h: 0px; }

  /* A régua some; o botão da gaveta aparece */
  .app-nav { display: none; }
  .app-menu-toggle { display: inline-flex; }

  .app-bar {
    padding-left: .6rem;
    padding-right: .6rem;
    padding-top: var(--safe-top);
    gap: .5rem;
  }
  .app-brand img { height: 30px; }
  .app-bar-actions { gap: .3rem; }

  /* Só os ícones: nome do usuário e da empresa ficam nos menus */
  .app-action { min-width: 40px; padding: 0 .55rem; }
  .app-action > .lh-sm { display: none !important; }
  .app-action.dropdown-toggle::after { display: none; }

  /* Menus do topo com itens confortáveis para o toque */
  .app-bar .dropdown-item { padding-top: .6rem; padding-bottom: .6rem; }
  .app-bar .dropdown-menu { max-height: 78dvh; overflow-y: auto; }

  /* A gaveta respeita as áreas seguras do aparelho */
  .app-drawer {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
  }
  .app-drawer .offcanvas-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  #page-content-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    /* Sem isto o wrapper cresce até o min-content da maior tabela e o conteúdo
       vaza para fora da tela em vez de rolar dentro do card. */
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .app-bar { min-height: 54px; }
  .app-brand img { height: 26px; }
  .app-action { min-height: 38px; min-width: 38px; padding: 0 .45rem; }
  .app-action > i { font-size: 1.05rem; }

  /* Central de notificações ocupa a largura da tela.
     A barra cresce com o conteúdo, então a folga leva a altura real em conta. */
  #centralNotificacoesWrapper .dropdown-menu {
    position: fixed !important;
    top: calc(var(--rb-barra-h) + var(--safe-top) + 6px) !important;
    left: .5rem !important;
    right: .5rem !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }
  #listaNotificacoesContainer { max-height: 46dvh !important; }
  #notificacoesFiltros { flex-wrap: nowrap; scrollbar-width: none; }
  #notificacoesFiltros::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-drawer { transition: none !important; }
}


/* ==========================================================================
   4. CONTEÚDO — cabeçalho de página, alertas e barras de filtro
   ========================================================================== */
@media (max-width: 991.98px) {
  main.container-fluid { padding: 1rem 1rem 1.5rem !important; }
}

@media (max-width: 767.98px) {
  main.container-fluid {
    padding: .65rem .65rem !important;
    /* espaço para o botão flutuante do WhatsApp não cobrir o último bloco */
    padding-bottom: calc(72px + var(--safe-bottom)) !important;
  }

  .page-header { margin-bottom: 1rem !important; }
  .page-title { font-size: 1.45rem; }
  .page-header p { font-size: .78rem; }

  /* Ações do cabeçalho ocupam a linha inteira e dividem o espaço */
  .page-header > .btn,
  .page-header > .d-flex { width: 100%; }
  .page-header > .d-flex > .btn { flex: 1 1 0; }

  /* Barra de filtros: campo de busca em linha cheia, exportações lado a lado */
  main form.d-flex .form-control,
  main form.d-flex .form-select,
  main form.d-flex .input-group {
    max-width: none !important;
    flex: 1 1 100%;
  }
  main form.d-flex > .ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }
  main form.d-flex > .ms-auto > .btn { flex: 1 1 0; }

  .alert { padding: .75rem .9rem; font-size: .875rem; }
  .alert .btn-close { padding: .6rem; }

  /* Cards "sticky" viram estáticos — no celular só roubam altura útil */
  main .sticky-top { position: static !important; top: auto !important; }

  /* Abas roláveis na horizontal em vez de quebrar em várias linhas */
  .nav-tabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link,
  .nav-pills .nav-link { white-space: nowrap; }

  .btn-group:not(.btn-group-sm) { flex-wrap: wrap; }

  .card-body { padding: .9rem; }
  .card-header { padding: .7rem .9rem; }

  /* Os cards de upgrade/planos do dashboard empilham os botões */
  .upgrade-banner .d-flex.gap-2 { width: 100%; }
  .upgrade-banner .d-flex.gap-2 > .btn { flex: 1 1 0; }
}


/* ==========================================================================
   5. TABELAS — rolagem horizontal legível + modo "cards" opcional
   ========================================================================== */
@media (max-width: 991.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .table-responsive::-webkit-scrollbar { height: 6px; }
  .table-responsive::-webkit-scrollbar-track { background: #f3eef1; }
  .table-responsive::-webkit-scrollbar-thumb { background: #d6cbd2; border-radius: 3px; }

  /* Dica injetada por mobile.js quando a tabela não cabe na tela */
  .table-scroll-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .75rem;
    font-size: .72rem;
    font-weight: 600;
    color: #726671;
    background: #faf6f8;
    border-top: 1px solid #e9e1e6;
  }
  .table-scroll-hint i { font-size: .85rem; color: var(--primary); }
}

@media (max-width: 767.98px) {
  .table { font-size: .8125rem; }
  .table th,
  .table td { padding: .45rem .5rem; }
  .table th { white-space: nowrap; }
  .table td .d-flex { flex-wrap: nowrap; }

  .table-pagination,
  .grid-pagination {
    justify-content: center !important;
    padding: .7rem .5rem !important;
  }
  .table-pagination > div,
  .grid-pagination > div {
    width: 100%;
    justify-content: center !important;
  }
  .table-pagination .btn,
  .grid-pagination .btn { min-width: 44px; }
}

/* --------------------------------------------------------------------------
   Modo "cards": opcional, por tabela, via data-mobile-cards="true".
   O mobile.js copia o texto do <th> para data-label de cada <td>.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .table-responsive:has(> [data-mobile-cards="true"]) { overflow-x: visible; }

  table[data-mobile-cards="true"] { font-size: .8rem; }
  table[data-mobile-cards="true"] > thead { display: none; }
  table[data-mobile-cards="true"] > tbody,
  table[data-mobile-cards="true"] > tbody > tr,
  table[data-mobile-cards="true"] > tbody > tr > td { display: block; width: auto; }

  table[data-mobile-cards="true"] > tbody > tr {
    border: 1px solid #e9e1e6;
    border-radius: 12px;
    padding: .4rem .7rem;
    margin-bottom: .6rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 10, 24, .04), 0 4px 12px -6px rgba(42, 10, 24, .1);
  }

  table[data-mobile-cards="true"] > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
    border: 0;
    border-bottom: 1px dashed #f1ebee;
    text-align: right;
    white-space: normal;
  }
  table[data-mobile-cards="true"] > tbody > tr > td:last-child { border-bottom: 0; }

  table[data-mobile-cards="true"] > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #8f8690;
    text-align: left;
  }
  table[data-mobile-cards="true"] > tbody > tr > td:not([data-label])::before { content: none; }

  table[data-mobile-cards="true"] > tbody > tr > td[data-mobile-actions] {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: .55rem;
  }
  table[data-mobile-cards="true"] > tbody > tr > td[data-mobile-select] {
    justify-content: flex-start;
    border-bottom: 0;
    padding-bottom: 0;
  }
  table[data-mobile-cards="true"] > tbody > tr > td[colspan] {
    justify-content: center;
    text-align: center;
  }
  table[data-mobile-cards="true"] > tbody > tr:has(> td[colspan]) { border-style: dashed; }
}


/* ==========================================================================
   6. CARDS / KPIs / GRIDS
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Os cartões de indicador do sistema usam sempre col-sm-6/col-md-6 + col-xl-3.
     Em telas estreitas ficam 2 por linha em vez de 4 empilhados. */
  .row > .col-sm-6.col-xl-3,
  .row > .col-md-6.col-xl-3 { flex: 0 0 auto; width: 50%; }

  .row > .col-sm-6.col-xl-3 .card-body,
  .row > .col-md-6.col-xl-3 .card-body { padding: .7rem !important; }
  .row > .col-sm-6.col-xl-3 .fs-4,
  .row > .col-md-6.col-xl-3 .fs-4 { font-size: 1.05rem !important; }
  .row > .col-sm-6.col-xl-3 .small,
  .row > .col-md-6.col-xl-3 .small { font-size: .68rem; }
  .row > .col-sm-6.col-xl-3 .rounded-circle,
  .row > .col-md-6.col-xl-3 .rounded-circle { display: none !important; }
}

@media (max-width: 767.98px) {
  .kpi-card { padding: 14px; gap: 12px; border-radius: 12px; }
  .kpi-icon { width: 42px; height: 42px; font-size: 1.15rem; border-radius: 11px; }
  .kpi-value { font-size: 1.3rem; }
  .kpi-label { font-size: .66rem; letter-spacing: .05em; margin-top: 4px; }
  .kpi-card:hover { transform: none; }

  .quick-btn { padding: 13px 8px; font-size: .7rem; border-radius: 12px; gap: 6px; }
  .quick-btn i { font-size: 1.3rem; }
  .quick-btn:hover { transform: none; }
  .quick-btn:active { transform: scale(.97); }

  .roupa-foto-container { height: 150px; }
  .roupa-card { border-radius: 12px; }
  .roupa-card:hover { transform: none; }

  .card-body.d-flex.flex-wrap.gap-4 { gap: 1rem !important; }
  .card-body .vr { display: none !important; }
}

/* Em celular estreito os indicadores ficam 2 por linha: com ícone e número
   lado a lado o valor sobra da caixa, então o cartão passa a empilhar. */
@media (max-width: 479.98px) {
  .kpi-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
  }
  .kpi-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
  .kpi-value { font-size: 1.2rem; }
}


/* ==========================================================================
   7. MODAIS — viram folha inferior (bottom sheet) no celular
   ========================================================================== */
@media (max-width: 575.98px) {
  .modal-dialog:not([class*="modal-fullscreen"]) {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-items: flex-end;
  }

  .modal.fade .modal-dialog:not([class*="modal-fullscreen"]) { transform: translateY(100%); }
  .modal.show .modal-dialog:not([class*="modal-fullscreen"]) { transform: none; }

  .modal-dialog:not([class*="modal-fullscreen"]) .modal-content {
    border: 0;
    border-radius: 16px 16px 0 0;
    max-height: 92dvh;
    padding-bottom: var(--safe-bottom);
  }

  /* "Puxador" visual no topo da folha */
  .modal-dialog:not([class*="modal-fullscreen"]) .modal-content::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
    mix-blend-mode: difference;
    z-index: 2;
  }

  .modal-header { padding: 1.2rem 1rem .75rem; }
  .modal-title { font-size: 1rem; }
  .modal-body { padding: .9rem 1rem; overflow-y: auto; }
  .modal-footer { padding: .75rem 1rem; gap: .5rem; }
  .modal-footer > .btn { flex: 1 1 auto; margin: 0; }

  /* SweetAlert2 */
  .swal2-popup { width: 92vw !important; padding: 1.1rem !important; }
  .swal2-title { font-size: 1.1rem !important; }
  .swal2-html-container { font-size: .9rem !important; }
  .swal2-actions { width: 100%; }
  .swal2-actions .swal2-styled { flex: 1 1 auto; }
}


/* ==========================================================================
   8. RODAPÉ E BOTÃO FLUTUANTE
   ========================================================================== */
@media (max-width: 767.98px) {
  .app-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 12px calc(14px + var(--safe-bottom));
    font-size: .72rem;
    line-height: 1.7;
  }
  .app-footer a { display: inline-block; padding: 2px 0; }

  .whatsapp-float {
    width: 48px;
    height: 48px;
    right: calc(12px + var(--safe-right));
    bottom: calc(12px + var(--safe-bottom));
    box-shadow: 0 4px 14px rgba(37, 211, 102, .5);
  }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-float:hover { transform: none; }
  .whatsapp-float:active { transform: scale(.94); }
}


/* ==========================================================================
   9. PDV — barra superior de uma linha só, com atalhos roláveis
   ========================================================================== */
@media (max-width: 991.98px) {
  .pdv-navbar {
    height: 58px;
    padding: 0 .6rem;
    gap: .45rem;
  }
  .pdv-brand img { height: 24px; }
  .pdv-brand .pdv-badge { display: none; }

  .pdv-nav-link {
    min-width: 58px;
    margin: 5px 0;
    padding: 0 .35rem;
  }
  .pdv-nav-link .pdv-nav-ico { font-size: 1.05rem; }
  .pdv-nav-link .pdv-nav-txt { font-size: .61rem; }
  .pdv-nav-sep { display: none; }

  .pdv-avatar { width: 32px; height: 32px; font-size: .72rem; }
  .pdv-sair { width: 32px; height: 32px; }

  .pdv-main { padding: 1rem .75rem calc(72px + var(--safe-bottom)); }
}

@media (max-width: 575.98px) {
  /* No celular a logo dá lugar ao selo PDV: o trilho de atalhos ganha ~90px. */
  .pdv-brand img { display: none; }
  .pdv-brand .pdv-badge { display: inline-block; }

  .pdv-tipo-toggle { width: 100%; }
  .pdv-tipo-toggle a { flex: 1 1 0; justify-content: center; padding: .55rem .5rem; font-size: .8rem; }
}


/* ==========================================================================
   10. LOGIN / CADASTRO (auth.css)
   ========================================================================== */
@media (max-width: 767.98px) {
  .auth-wrapper { padding: 24px 14px calc(24px + var(--safe-bottom)); }
  .auth-card { padding: 28px 20px; border-radius: 20px; }
  .auth-card::before { left: 22%; right: 22%; }
  .auth-brand-logo { width: min(250px, 84%); }
  .auth-brand { margin-bottom: 22px; }
  .auth-title { font-size: 1.55rem; }
  .auth-sub { margin-bottom: 20px; font-size: .88rem; }

  .auth-navbar .navbar-collapse {
    background: rgba(63, 15, 36, .97);
    margin: 0 -12px;
    padding: .5rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .auth-nav-link { display: block; padding: .6rem .5rem !important; }
  .auth-navbar .navbar-nav { align-items: stretch !important; gap: .1rem !important; }
  .auth-navbar .navbar-nav .btn { width: 100%; margin-top: .35rem; }

  .auth-footer {
    flex-direction: column;
    text-align: center;
    gap: 4px;
    padding: 14px 12px calc(14px + var(--safe-bottom));
  }
  .auth-whatsapp {
    width: 48px;
    height: 48px;
    right: calc(14px + var(--safe-right));
    bottom: calc(14px + var(--safe-bottom));
  }
}


/* ==========================================================================
   11. CHAT INTERNO — lista de conversas encolhe e a thread ganha a tela
   ========================================================================== */
@media (max-width: 767.98px) {
  #containerConversas {
    max-height: 34dvh;
    overscroll-behavior: contain;
  }
  #cardThreadChat { min-height: 62dvh; }
  #avatarGrupoAtivo { width: 34px !important; height: 34px !important; font-size: .9rem !important; }
}


/* ==========================================================================
   12. SITE PÚBLICO / LANDING (landing.css)
   ========================================================================== */
@media (max-width: 991.98px) {
  .hero-visual { display: none; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-grid .hero-cta, .hero-grid .hero-trust { justify-content: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
}

@media (max-width: 767.98px) {
  /* Hero — sem 100svh: o conteúdo manda na altura */
  .hero-section { min-height: auto; padding: 104px 0 88px; }
  .hero-content { padding: 16px 4px; }
  .hero-badge { font-size: .74rem; padding: 6px 14px; }
  .hero-title { margin: 18px 0 14px; }
  .hero-subtitle { font-size: 1rem; }
  .hero-cta { display: grid; gap: .6rem; margin-top: 1.5rem !important; }
  .hero-cta .btn { width: 100%; padding: .85rem 1rem; }
  .hero-trust { flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
  .hero-scroll-indicator { display: none; }

  .stats-section { padding-bottom: 44px; }
  .stats-band { margin-top: -52px; padding: 22px 6px; border-radius: 20px; }
  .stat-label { font-size: .68rem; letter-spacing: .06em; }

  .py-6 { padding-top: 52px !important; padding-bottom: 52px !important; }
  .section-flow-bottom { padding-bottom: 20px !important; }
  .section-flow-top { padding-top: 24px !important; }
  .section-tag { font-size: .66rem; padding: 5px 14px; margin-bottom: 14px; }
  .section-subtitle { font-size: .95rem; }

  .feature-card { padding: 22px 20px; border-radius: 16px; }
  .feature-icon { width: 48px; height: 48px; font-size: 1.3rem; margin-bottom: 14px; border-radius: 14px; }

  .segmento-card { padding: 20px 18px; }

  .plan-card { padding: 26px 20px 22px; border-radius: 20px; }
  .plan-price { font-size: 1.9rem; }
  .plan-featured { transform: none; }

  .testimonial-card { padding: 24px 20px 20px; }
  .testimonial-card::before { font-size: 4rem; right: 16px; }

  .step-item { gap: 16px; padding-bottom: 24px; }
  .step-num { width: 44px; height: 44px; font-size: 1rem; border-radius: 14px; }
  .step-item::before { left: 21px; top: 52px; }

  .dashboard-preview { perspective: none; }
  .dashboard-preview::before { display: none; }
  .preview-card { transform: none !important; animation: none !important; }

  #faqAccordion .accordion-button { padding: 16px 18px; font-size: .95rem; }
  #faqAccordion .accordion-body { padding: 0 18px 18px; font-size: .92rem; }

  .cta-subtitle { font-size: .98rem; }
  .cta-section .btn-white { width: 100%; }

  .landing-nav .navbar-collapse {
    background: rgba(63, 15, 36, .97);
    margin: .5rem -12px 0;
    padding: .5rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-radius: 0 0 16px 16px;
  }
  .landing-nav .nav-link { margin: 0; padding: .6rem .5rem !important; }
  .landing-nav .nav-link::after { display: none; }
  .landing-nav .navbar-nav { align-items: stretch !important; }
  .landing-nav .navbar-nav .btn { width: 100%; margin-top: .4rem; }

  /* Contato */
  .contato-hero { padding: 96px 16px 56px; }
  .contato-card { padding: 28px 20px; margin-top: -36px; }

  .landing-footer { padding: 44px 0 0 !important; text-align: center; }
  .footer-brand { margin-bottom: 12px; }
  .footer-desc { max-width: none; margin: 0 auto; }
  .footer-title { margin-bottom: 12px; }
  .footer-links { align-items: center; gap: 9px; }
  .footer-links a:hover { transform: none; }
  .footer-bottom {
    margin-top: 36px;
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 20px 0 calc(20px + var(--safe-bottom));
  }
}

/* Nos celulares estreitos o rodapé fica em duas colunas de links */
@media (max-width: 575.98px) {
  .landing-footer .row { --bs-gutter-y: 2rem; }
}


/* ==========================================================================
   13. UTILITÁRIOS DE APOIO
   ========================================================================== */
.mobile-only { display: none !important; }

@media (max-width: 767.98px) {
  .mobile-only { display: block !important; }
  .mobile-only.d-flex { display: flex !important; }
  .mobile-hide { display: none !important; }
  /* Esconde só o texto do botão, mantendo o ícone */
  .mobile-icon-only span,
  .mobile-icon-only .btn-label { display: none !important; }
  .mobile-icon-only .me-1,
  .mobile-icon-only .me-2 { margin-right: 0 !important; }
  /* Botão que ocupa a linha inteira no celular */
  .mobile-block { display: block !important; width: 100% !important; }
}