/* ===============================================
   MOBILE UX IMPROVEMENT — mottu.top
   Apenas @media (max-width: 767px)
   Não altera desktop, cores, tamanhos de cards,
   posição nem estrutura de componentes.
   =============================================== */

/* ===========================================================
   1. TIPOGRAFIA — legibilidade mínima no mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Sticky footer labels: 10px → 11px (mantém compacto, melhora leitura) */
  #sticky-mobile-footer span[class*="text-[10px]"],
  #sticky-mobile-footer .text-\[10px\] {
    font-size: 11px !important;
    line-height: 1.2;
  }

  /* Timer labels (DIAS/HRS/MIN/SEG): eram 10px, subir para 11px */
  #timer .text-\[10px\] {
    font-size: 11px !important;
  }

  /* Disclaimers em text-xs em seções importantes: garantir 12px mínimo */
  .notice-important ul,
  .notice-important li,
  [class*="aviso"] .text-xs,
  .bg-yellow-900\/20 .text-xs {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
  }

  /* Urgency text no coupon: melhorar legibilidade */
  #home .text-xs.text-gray-400,
  #coupon-container ~ .text-xs {
    font-size: 0.8125rem;
  }

  /* Aggregate rating text: melhorar legibilidade */
  #testimonials .text-sm.text-gray-500 {
    font-size: 0.8125rem;
  }

  /* H1 nas páginas internas — padronizar tamanho mobile */
  main h1.text-4xl,
  main h1[class*="text-4xl"] {
    font-size: 1.75rem !important; /* 28px, confortável sem alterar desktop */
    line-height: 1.25;
  }

  /* H2 de seção — um pouco menor no mobile para respirar */
  section h2.text-3xl,
  section h2[class*="text-3xl"] {
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
    margin-bottom: 1.5rem;
  }

  /* Subtítulos intro nas páginas internas */
  main section .text-xl.text-gray-400,
  main section .text-xl.text-gray-300,
  main .text-xl.text-gray-400 {
    font-size: 1rem; /* 16px */
    line-height: 1.6;
  }

  /* Prose content (termos, privacidade): melhorar leitura */
  .prose p,
  .prose li {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.7;
    word-break: break-word;
  }

  .prose h2 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }

  .prose h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
}

/* ===========================================================
   2. ESPAÇAMENTO — padronizar vertical rhythm no mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Padronizar padding horizontal de containers para 16px */
  .container.px-6,
  [class*="max-w-"].px-6,
  .container-narrow,
  .container-wide {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Seções: padding vertical padronizado = py-6 (24px) */
  section.py-8,
  section[class*="py-8"],
  section.py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Main flex (403/404): reduzir padding */
  main.flex-grow {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Padronizar margin bottom dos icon badges das páginas internas */
  main .inline-block.p-3.rounded-full.bg-gray-800 {
    margin-bottom: 1rem;
  }

  /* Padronizar margin-bottom de H1 em todas as páginas */
  main h1 {
    margin-bottom: 0.75rem !important;
  }

  /* Padronizar margin-bottom do intro text */
  main h1 + p,
  main h1 + .text-gray-400,
  main h1 + .text-gray-300 {
    margin-bottom: 1.25rem;
  }

  /* Separador entre seções H2 e grid/content */
  section h2.mb-12 {
    margin-bottom: 1.5rem !important;
  }

  /* Section header padronizado */
  .section-header {
    margin-bottom: 1.5rem;
  }

  /* Grid gaps padronizados no mobile */
  .grid.gap-8 {
    gap: 1rem !important;
  }
  .grid.gap-6 {
    gap: 0.875rem !important;
  }

  /* Space-y padronizado para listas verticais */
  .space-y-12 {
    row-gap: 1.5rem;
  }

  /* Aviso importante: reduzir margem top */
  .bg-yellow-900\/20.mt-8 {
    margin-top: 1.25rem;
  }

  /* Footer: reduzir padding top */
  footer.pt-12 {
    padding-top: 2rem !important;
  }

  /* Coupon widget: margem vertical */
  section[aria-label] .max-w-xl.mx-auto.bg-gray-800 {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===========================================================
   3. TIMER — prevenir overflow em telas < 360px
   =========================================================== */
@media (max-width: 400px) {

  #timer {
    font-size: 1.75rem !important;
    gap: 0.25rem !important;
  }

  #timer > div {
    width: 3.25rem !important;
    min-width: 0;
  }

  #timer span.text-accent {
    font-size: 1.5rem;
  }

  /* Cupom code: tracking menor em telas estreitas */
  #coupon-code {
    font-size: 1.5rem !important;
    letter-spacing: 0.05em !important;
  }
}

@media (max-width: 359px) {
  #timer {
    font-size: 1.5rem !important;
    gap: 0.125rem !important;
  }

  #timer > div {
    width: 2.75rem !important;
  }

  #coupon-code {
    font-size: 1.25rem !important;
    letter-spacing: 0 !important;
  }
}

/* ===========================================================
   4. CUPOM CODE — prevenir overflow e melhorar legibilidade
   =========================================================== */
@media (max-width: 767px) {

  /* Código de cupom universal: manter em uma linha no mobile */
  #coupon-code,
  [id*="coupon-code"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
  }

  .font-mono.tracking-wider.break-all,
  .font-mono.tracking-widest {
    overflow-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* coupon_widget: ajuste do inline-flex para wrap */
  section[aria-label] .inline-flex.items-center.gap-2 {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* coupon_widget: código em full width no mobile */
  section[aria-label] .font-mono.text-2xl {
    font-size: 1.375rem;
    letter-spacing: 0.08em;
    width: 100%;
    text-align: center;
    display: block;
  }

  /* coupon_widget: botão copiar em full width no mobile */
  section[aria-label] .inline-flex.items-center.gap-2 > button {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Timer container: padding reduzido */
  #timer-container {
    margin-top: 1.5rem !important;
  }

  #timer-container h3 {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }
}

/* ===========================================================
   5. TAP TARGETS — mínimo 44px para botões e links interativos
   =========================================================== */
@media (max-width: 767px) {

  /* Links "Saiba mais" e "Ver detalhes" nos cards de plano */
  a.text-sm.text-gray-400,
  a[class*="text-accent"][class*="font-semibold"],
  a.link-accent,
  .card a.text-sm,
  .pricing-card a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* FAQ details summary: area de toque confortável */
  details summary {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  details summary.p-5,
  details summary[class*="p-5"] {
    padding: 0.875rem 1rem !important;
  }

  /* FAQ answer padding */
  details > div.p-5 {
    padding: 0.875rem 1rem !important;
  }

  /* CTA buttons: area de toque mínima */
  .btn,
  .btn-primary,
  [class*="btn-primary"],
  button[class*="btn-"],
  a[class*="btn-"] {
    min-height: 44px;
  }

  /* Links do footer: area de toque */
  footer a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Sidebar menu items: garantir tap target confortável */
  #sidebar-menu a[role="menuitem"] {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Links inline em prose: espaçamento para toque */
  .prose a {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

/* ===========================================================
   6. STICKY FOOTER — melhorias de usabilidade
   =========================================================== */
@media (max-width: 767px) {

  /* Garantir que o body tem espaço para o sticky footer */
  body {
    padding-bottom: 72px !important;
  }

  /* Sticky footer: visual mais refinado */
  #sticky-mobile-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-tap-highlight-color: transparent;
  }

  /* Itens do sticky footer: área de toque adequada */
  #sticky-mobile-footer button,
  #sticky-mobile-footer a {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Toast de cópia: posicionar acima do sticky footer */
  #sticky-toast,
  #copy-toast {
    bottom: 80px !important;
  }
}

/* ===========================================================
   7. HEADER — usabilidade do header sticky no mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Header nav: compactar padding no mobile */
  header nav.py-4 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  header nav.px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Logo: tamanho adequado para mobile */
  header a.text-2xl {
    font-size: 1.25rem;
  }

  /* Menu button: área de toque confortável */
  #menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar menu: full screen no mobile */
  #sidebar-menu {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Menu overlay: garantir cobertura */
  #menu-overlay {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ===========================================================
   8. CARDS & GRIDS — consistência visual no mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Cards de benefício: padding interno confortável */
  #benefits .bg-gray-900.p-6 {
    padding: 1.25rem !important;
  }

  /* Cards de depoimento: padding confortável */
  #testimonials .bg-gray-900.p-6 {
    padding: 1.25rem !important;
  }

  /* Steps cards: padding adequado */
  #steps .bg-gray-800.p-6 {
    padding: 1rem 1.25rem !important;
  }

  /* Steps: ajustar a bolha no mobile */
  #steps .w-16.h-16 {
    width: 3rem;
    height: 3rem;
    font-size: 1.125rem;
  }

  /* Steps: conteúdo ao lado da bolha */
  #steps .pl-20 {
    padding-left: 4rem !important;
  }

  /* Steps: linha vertical mobile */
  #steps .left-8 {
    left: 1.5rem;
  }

  /* Steps: espaço entre steps no mobile */
  #steps .space-y-12 > * + * {
    margin-top: 1.25rem !important;
  }

  /* Pricing cards: padding padronizado */
  .pricing-card {
    padding: 1.25rem !important;
  }

  /* Pricing card featured tag: ajustar posição */
  .pricing-card.featured::before {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
  }

  /* Tabelas responsivas: scroll horizontal suave */
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .table thead th,
  .table tbody td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Grids de 3 colunas nos comparativos: forçar 1 coluna no mobile */
  .grid.md\:grid-cols-3.gap-8 {
    grid-template-columns: 1fr !important;
  }

  /* Cards de plano com hero de 2 colunas: stack no mobile */
  .grid.md\:grid-cols-2.gap-12 {
    gap: 1.5rem !important;
  }
}

/* ===========================================================
   9. FORMULÁRIOS — inputs mobile-friendly
   =========================================================== */
@media (max-width: 767px) {

  /* Inputs/textareas: tamanho adequado para toque */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px !important; /* Previne zoom no iOS */
    min-height: 44px;
    padding: 0.625rem 0.875rem;
  }

  /* Search inputs no FAQ e bases */
  input[type="search"],
  input[placeholder*="Buscar"],
  input[placeholder*="buscar"],
  input[placeholder*="Pesquisar"],
  input[placeholder*="pesquisar"] {
    border-radius: 0.5rem;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Forms stack vertical no mobile */
  form .flex.flex-row,
  form .sm\:flex-row {
    flex-direction: column !important;
  }

  form .flex.flex-row > *,
  form .sm\:flex-row > * {
    width: 100% !important;
  }
}

/* ===========================================================
  10. COUPON CARD PRINCIPAL — ajustes mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Card principal do cupom: arredondar e ajustar */
  #home .max-w-md {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.75rem;
  }

  /* Botões copiar/compartilhar: stack vertical em mobile estreito */
  #home .max-w-md .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
  }

  /* Label "Seu Cupom Exclusivo": adequar */
  #coupon-container .text-xs.uppercase {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  /* Botão abrir app: tamanho adequado */
  #home a[data-copy-coupon] {
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
  }
}

/* ===========================================================
  11. IMAGENS — prevenir overflow e melhorar carregamento
   =========================================================== */
@media (max-width: 767px) {

  /* Todas as imagens respeitam o container */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Imagens de hero dos planos: não ultrapassar viewport */
  .grid.md\:grid-cols-2 img,
  main section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }
}

/* ===========================================================
  12. HERO SECTION — padronização do hero principal
   =========================================================== */
@media (max-width: 767px) {

  /* Hero background: otimizar para mobile */
  #home .absolute.inset-0 img {
    object-position: center top;
  }

  /* CTA principal no hero: full width */
  #home .btn-primary,
  #home button[id="copy-btn"] {
    width: 100%;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
  }

  /* Share button: manter como ícone pequeno */
  #home button[id="share-btn"] {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    max-width: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    flex-shrink: 0;
    border-radius: 9999px;
  }
}

/* ===========================================================
  13. FAQ — ajustes específicos mobile
   =========================================================== */
@media (max-width: 767px) {

  /* FAQ accordion: melhorar visual */
  #faq details,
  .max-w-3xl details {
    border-radius: 0.625rem;
  }

  /* FAQ search results: padding adequado */
  #faq-results a,
  [id*="faq-results"] a {
    min-height: 44px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
  }

  /* Botão "Ver todas as perguntas": full width */
  #faq .text-center a.inline-block,
  .max-w-3xl ~ .text-center a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 1rem;
    min-height: 44px;
  }

  /* FAQ categories grid: single column no mobile */
  #faq .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ===========================================================
  14. BLACKFRIDAY — ajustes específicos mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Main como container no blackfriday */
  main.max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Tracking nos cupons blackfriday */
  .font-black.tracking-wider.break-all {
    letter-spacing: 0.05em !important;
    font-size: 1.375rem !important;
  }
}

/* ===========================================================
  15. PROMO POPUP — mobile-friendly
   =========================================================== */
@media (max-width: 767px) {

  /* SweetAlert popup: melhor fit no mobile */
  .swal2-popup {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 1rem !important;
    margin: 0 auto !important;
    border-radius: 0.75rem !important;
    font-size: 0.9375rem !important;
  }

  .swal2-title {
    font-size: 1.125rem !important;
    padding: 0.5rem 0 !important;
  }

  .swal2-html-container {
    font-size: 0.875rem !important;
    padding: 0 0.5rem !important;
  }

  .swal2-image {
    max-height: 180px !important;
    border-radius: 0.5rem !important;
  }

  .swal2-actions {
    gap: 0.5rem !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 0.5rem !important;
  }

  .swal2-actions button {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .swal2-close {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.5rem !important;
  }
}

/* ===========================================================
  16. ERROR PAGES (403, 404) — melhor visual mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Ícone de erro: ajustar tamanho */
  main.flex-grow .text-6xl,
  main.flex-grow .text-7xl,
  main.flex-grow .text-8xl {
    font-size: 3rem !important;
  }

  /* Título de erro */
  main.flex-grow h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Descrição de erro */
  main.flex-grow p.text-gray-400,
  main.flex-grow p.text-lg {
    font-size: 0.9375rem;
  }
}

/* ===========================================================
  17. CONTATO — formulário mobile optimizado
   =========================================================== */
@media (max-width: 767px) {

  /* Grid de contato: stack */
  main .grid.md\:grid-cols-2.gap-8 {
    gap: 1rem !important;
  }

  /* Cards de info no contato */
  main .bg-gray-800.rounded-xl.p-8,
  main [class*="bg-gray-800"][class*="p-8"] {
    padding: 1.25rem !important;
  }
}

/* ===========================================================
  18. SCROLL & INTERAÇÃO — melhor para toque
   =========================================================== */
@media (max-width: 767px) {

  /* Smooth scroll nativo */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* Disable tap highlight para elementos interativos */
  a, button, [role="button"], summary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Prevenir text resize em landscape */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Prevenir overflow horizontal global */
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Imagens e vídeos não ultrapassam viewport */
  img, video, iframe, svg {
    max-width: 100%;
  }
}

/* ===========================================================
  19. BASES PAGE — grid e search mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Grid de bases: single column */
  .max-w-7xl .grid.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Cards de base: compactar */
  .max-w-7xl .bg-gray-800.rounded-xl {
    border-radius: 0.625rem;
  }
}

/* ===========================================================
  20. COUPONS PAGE — grid e cards mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Grid de cupons */
  .max-w-6xl .grid.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Badges em cards de cupom */
  .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
  }
}

/* ===========================================================
  21. FOOTER — ajustes mobile
   =========================================================== */
@media (max-width: 767px) {

  /* Footer grid: stack completo */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Footer text: legibilidade */
  footer .text-xs {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* Footer links: espaçamento para toque */
  footer ul li {
    margin-bottom: 0.25rem;
  }

  footer ul a {
    padding: 0.25rem 0;
  }

  /* Footer disclaimer */
  footer .text-gray-500 {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* ===========================================================
  22. SAFE AREAS — notch/dynamic island (iOS)
   =========================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {

    /* Sticky footer: respeitar safe area */
    #sticky-mobile-footer {
      padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
    }

    /* Body: compensar safe area */
    body {
      padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    /* Sidebar: respeitar safe area lateral */
    #sidebar-menu {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ===========================================================
  23. LANDSCAPE MOBILE — ajustes para orientação horizontal
   =========================================================== */
@media (max-width: 767px) and (orientation: landscape) {

  /* Reduzir padding vertical em landscape para maximizar conteúdo */
  section.py-8,
  section[class*="py-8"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Header mais compacto em landscape */
  header nav.py-4 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }

  /* Sticky footer: mais compacto em landscape */
  #sticky-mobile-footer .flex.items-center.justify-around {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

/* ===========================================================
  24. PLAN PAGES — otimizações específicas para páginas de planos
   =========================================================== */
@media (max-width: 767px) {

  /* Hero badges: ajustar tamanho no mobile */
  section span[class*="rounded-full"][class*="inline-block"] {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }

  /* Plan cards: image container height on mobile */
  article .h-56,
  article .md\:h-64 {
    height: 12rem !important;
  }

  /* Plan card badges: manter legíveis */
  article span[class*="rounded-full"][class*="absolute"] {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
  }

  /* MAIS POPULAR banner: ajustar no mobile */
  article > .absolute.top-0.left-0.right-0 {
    font-size: 0.6875rem;
    padding: 0.25rem 0;
  }

  /* Details section: flex icon + heading */
  .flex.items-center.gap-3 > span[class*="w-12"] {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
  }

  .flex.items-center.gap-3 > span[class*="w-12"] i {
    font-size: 1rem;
  }

  .flex.items-center.gap-3 > h2 {
    font-size: 1.375rem;
  }

  /* Details big price text: scale down on mobile */
  .text-4xl.md\:text-5xl {
    font-size: 1.75rem !important;
  }

  /* Comparison cards: ensure icon+title row doesn't break */
  .flex.items-center.gap-3 > span[class*="w-10"] {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
  }

  .flex.items-center.gap-3 > span[class*="w-10"] i {
    font-size: 0.875rem;
  }

  /* Included section: 2-column grid on small mobile */
  .grid.grid-cols-2.md\:grid-cols-3 {
    gap: 0.75rem !important;
  }

  .grid.grid-cols-2.md\:grid-cols-3 > div {
    padding: 1rem !important;
  }

  .grid.grid-cols-2.md\:grid-cols-3 .w-14 {
    width: 2.75rem;
    height: 2.75rem;
  }

  .grid.grid-cols-2.md\:grid-cols-3 .w-14 i {
    font-size: 1.125rem;
  }

  .grid.grid-cols-2.md\:grid-cols-3 h3 {
    font-size: 0.9375rem;
  }

  .grid.grid-cols-2.md\:grid-cols-3 p {
    font-size: 0.8125rem;
  }

  /* "Comparar planos" link: tap target */
  a[href="/planos"][class*="inline-flex"] {
    min-height: 44px;
    padding: 0.5rem 0;
  }

  /* Advantages bullets in detail: better font size */
  .bg-gray-800\/50 ul.space-y-4 li {
    font-size: 0.9375rem;
  }

  /* Final CTA section: icon circle smaller */
  .w-16.h-16.mx-auto {
    width: 3rem;
    height: 3rem;
  }

  .w-16.h-16.mx-auto i {
    font-size: 1.125rem;
  }
}

/* Very small screens: further adjustments for plan cards */
@media (max-width: 380px) {

  /* Included section: single column on very small screens */
  .grid.grid-cols-2.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Plan card prices: scale down further */
  .text-4xl.font-black.accent-text,
  .text-3xl.font-black.accent-text {
    font-size: 1.5rem !important;
  }
}

/* ===========================================================
  25. PRINT (reset) — garantir que mobile CSS não afeta print
   =========================================================== */
@media print {
  #sticky-mobile-footer,
  #sidebar-menu,
  #menu-overlay,
  .swal2-popup {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}