/* ============================================================
   DEFESA EXPRESS - RESPONSIVE SYSTEM CONSOLIDADO
   ============================================================ */

/* --- Origem: responsive-global.css --- */
:root {
  --dx-mobile-padding: clamp(14px, 4vw, 24px);
  --dx-touch-target: 48px;
  --touch-target: 48px;
  --mobile-padding: clamp(12px, 4vw, 20px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

input,
select,
textarea {
  max-width: 100%;
}

button,
.btn,
.icon-btn,
.nav-link,
.nav-item,
.dropdown-item,
.qa-card,
.editor-launch-card,
.card,
.service-card {
  -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.icon-btn,
a[role="button"],
[role="button"] {
  min-height: var(--dx-touch-target);
  min-width: var(--dx-touch-target);
  padding: 12px 16px;
}

input,
select,
textarea {
  font-size: 16px;
}

i,
svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-icon i,
.stat-icon svg,
.card-icon i,
.card-icon svg,
.icon-box i,
.icon-box svg,
.kpi-icon i,
.kpi-icon svg,
.activity-icon i,
.activity-icon svg {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.icon-btn i,
.icon-btn svg {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
}

.btn i,
.btn svg {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
}

[style*="grid-template-columns"] > *,
[class*="grid"] > *,
[class*="row"] > *,
[class*="col"] > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .container,
  .wrap,
  .wrapper,
  .main,
  main,
  section {
    max-width: 100%;
  }

  .services-grid,
  .cards-grid,
  .pricing-grid,
  .features-grid,
  .stats-grid,
  .quick-actions,
  .editor-launch-grid,
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .two-col,
  .layout-2,
  .content-grid,
  .checkout-grid,
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }

  h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }

  h3 {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
    line-height: 1.25 !important;
  }

  h4, h5, h6 {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
  }

  p,
  li {
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
    min-height: var(--dx-touch-target);
    padding: 12px 14px !important;
  }

  /* Exceção: inputs com ícone à esquerda — preserva padding-left para o ícone não sobrepor o texto */
  .input-wrap input,
  .input-wrap select,
  .field-input-wrap input,
  .field-input-wrap select,
  .input-wrap input[type="email"],
  .input-wrap input[type="password"],
  .input-wrap input[type="text"],
  .input-wrap input[type="tel"] {
    padding-left: 44px !important;
  }

  .hero-search input {
    padding-left: 48px !important;
  }

  .playlist-search input {
    padding-left: 32px !important;
  }

  button,
  .btn,
  .icon-btn,
  .nav-item,
  .nav-link,
  .chip,
  .tab,
  .filter-pill,
  .bn-item,
  .pick,
  [role="button"] {
    min-height: var(--dx-touch-target);
    min-width: var(--dx-touch-target);
    padding: 12px 16px !important;
  }

  .container,
  .wrap,
  .wrapper,
  .main,
  main {
    width: 100%;
    padding-left: var(--dx-mobile-padding) !important;
    padding-right: var(--dx-mobile-padding) !important;
  }

  section {
    max-width: 100%;
  }

  .services-grid,
  .cards-grid,
  .pricing-grid,
  .features-grid,
  .stats-grid,
  .quick-actions,
  .editor-launch-grid,
  .grid-4,
  .grid-3,
  .grid-2,
  .form-row,
  .form-row-3,
  .row-2,
  .row-3,
  .service-grid {
    grid-template-columns: 1fr !important;
  }

  .desktop-only,
  .hide-mobile {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger {
    white-space: normal;
  }

  .actions,
  .form-actions,
  .wizard-actions,
  .modal-footer,
  .button-row,
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .actions .btn,
  .form-actions .btn,
  .wizard-actions .btn,
  .modal-footer .btn,
  .button-row .btn,
  .cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  .card,
  .service-card,
  .qa-card,
  .editor-launch-card,
  .price-card,
  .stat-card,
  .glass-card {
    border-radius: 18px !important;
  }

  .table-wrap,
  .defense-list-wrap,
  .tabs,
  .filters,
  .chips,
  .stepper,
  .nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .table-wrap::-webkit-scrollbar,
  .defense-list-wrap::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .filters::-webkit-scrollbar,
  .chips::-webkit-scrollbar,
  .stepper::-webkit-scrollbar,
  .nav-scroll::-webkit-scrollbar {
    display: none;
  }

  table {
    min-width: 640px;
  }

  .modal,
  .dialog,
  .drawer,
  .modal-content {
    width: min(100%, 100vw - 20px) !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Premium Mobile Spacing & Padding */
  .section {
    padding: 40px var(--dx-mobile-padding) !important;
  }

  .section-head {
    margin-bottom: 24px !important;
  }

  .section-title {
    margin-bottom: 12px !important;
  }

  .section-sub {
    font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
  }

  /* Card Padding Optimization */
  .card,
  .service-card,
  .qa-card,
  .editor-launch-card,
  .price-card,
  .stat-card,
  .glass-card {
    padding: 16px 18px !important;
  }

  /* Flex/Grid Empilhamento */
  .split,
  .hero-ctas,
  .feature-list,
  .affiliate-features,
  .final-cta-btns {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .split > * {
    width: 100% !important;
  }

  /* Hero Section Mobile */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .stat-card {
    padding: 12px 14px !important;
  }

  .stat-num {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
  }

  .stat-label {
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
  }

  /* Marquee Mobile */
  .marquee {
    padding: 12px 0 !important;
  }

  .trust-item {
    gap: 6px !important;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem) !important;
  }

  /* Dropdown Mobile */
  .dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    border-radius: 6px 20px 0 0 !important;
    padding: 16px !important;
  }

  .dropdown-item {
    padding: 14px 16px !important;
    min-height: 44px !important;
  }

  /* FAQ Mobile */
  .faq-q {
    padding: 16px 18px !important;
    font-size: clamp(0.95rem, 2.5vw, 1rem) !important;
  }

  .faq-item.open .faq-a,
  .faq-a-inner {
    padding: 0 18px 16px !important;
    font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
  }

  /* Pricing Grid Mobile */
  .pricing-grid {
    gap: 16px !important;
  }

  .price-tag {
    font-size: clamp(1.8rem, 5vw, 2.4rem) !important;
  }

  .price-features li {
    padding: 8px 0 !important;
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
  }

  /* Badge Mobile */
  .badge {
    padding: 4px 8px !important;
    font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
  }

  /* Stepper/Progress Mobile */
  .steps::before {
    display: none !important;
  }

  .step {
    padding: 20px 16px !important;
  }

  .step-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .step-num {
    font-size: clamp(1.8rem, 5vw, 2.4rem) !important;
  }

  /* Affiliate Card Mobile */
  .affiliate-card {
    padding: 32px 20px !important;
  }

  .affiliate-stats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .affiliate-stat {
    padding: 16px !important;
  }

  .affiliate-stat .num {
    font-size: clamp(1.6rem, 4vw, 2rem) !important;
  }

  /* Final CTA Mobile */
  .final-cta {
    padding: 40px 20px !important;
  }

  .final-cta h2 {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
  }

  .final-cta p {
    font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
  }
}

@media (max-width: 480px) {
  :root {
    --dx-mobile-padding: 12px;
  }

  .container,
  .wrap,
  .wrapper,
  .main,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger {
    width: 100%;
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat-card {
    padding: 14px !important;
  }

  .modal,
  .dialog,
  .modal-content {
    width: 100% !important;
    border-radius: 6px 20px 0 0 !important;
  }
}


/* --- Origem: mobile-refactoring.css --- */
/* ============================================================
   MOBILE-FIRST REFACTORING - FASE 2
   Sidebar Responsiva + Modais Blindados
   ============================================================ */

/* ============================================================
   SIDEBAR RESPONSIVA (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Sidebar oculta por padrão */
  .sidebar,
  aside[class*="sidebar"],
  nav[class*="sidebar"] {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-w, 280px) !important;
    transform: translateX(-100%) !important;
    z-index: 999 !important;
    transition: transform 0.3s ease !important;
  }
  
  /* Sidebar aberta */
  .sidebar.open,
  aside[class*="sidebar"].open,
  nav[class*="sidebar"].open {
    transform: translateX(0) !important;
  }
  
  /* Overlay escuro atrás da sidebar */
  .sidebar.open::before,
  aside[class*="sidebar"].open::before,
  nav[class*="sidebar"].open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
  
  /* Botão hambúrguer visível */
  .btn-toggle,
  .menu-toggle,
  button[class*="toggle"] {
    display: flex !important;
  }
  
  /* Main sem margin-left */
  .main,
  main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   MODAIS BLINDADOS (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Overlay do modal */
  .modal-overlay,
  .modal-backdrop,
  .modal-back,
  [class*="modal-overlay"],
  [class*="modal-backdrop"] {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Modal em si (exclui modal-backdrop que tem display:none por padrão) */
  .modal,
  .modal-content {
    width: 95% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Modal header */
  .modal-head,
  .modal-header,
  [class*="modal-head"],
  [class*="modal-header"] {
    flex-shrink: 0 !important;
    padding: 16px !important;
  }
  
  /* Modal body com scroll */
  .modal-body,
  [class*="modal-body"] {
    overflow-y: auto !important;
    flex: 1 !important;
    max-height: calc(90vh - 120px) !important;
    padding: 16px !important;
  }
  
  /* Modal footer */
  .modal-foot,
  .modal-footer,
  [class*="modal-foot"],
  [class*="modal-footer"] {
    flex-shrink: 0 !important;
    padding: 16px !important;
  }
  
  /* Botões em modais ocupam 100% */
  .modal .btn,
  .modal-body .btn,
  .modal-footer .btn,
  [class*="modal"] .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
   TOUCH TARGETS MÍNIMOS (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  button,
  .btn,
  .icon-btn,
  a[role="button"],
  [role="button"],
  .nav-item,
  .sb-link {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  input,
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   GRIDS RESPONSIVOS (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .kpi-grid,
  .doc-grid,
  .price-grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   OVERFLOW E SCROLL (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  .table-wrap,
  [class*="table"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .tabs,
  .filters,
  [class*="tabs"],
  [class*="filters"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   FASE 3: BLINDAGEM DE TABELAS (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Tabelas com scroll horizontal */
  table,
  .table,
  .table-container,
  .table-wrap,
  [class*="table"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
  }
  
  /* Thead e tbody em bloco */
  table thead,
  table tbody,
  table tr {
    display: block !important;
    width: 100% !important;
  }
  
  /* Linhas da tabela */
  table tr {
    margin-bottom: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Células da tabela */
  table td,
  table th {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border: none !important;
    text-align: left !important;
  }
  
  /* Data attributes para labels */
  table td::before,
  table th::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--text-dim, #A1A1AA) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Header da tabela escondido */
  table thead {
    display: none !important;
  }
  
  /* Wrapper de tabela com scroll */
  .table-wrapper,
  .table-scroll,
  [class*="table-wrapper"],
  [class*="table-scroll"] {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
}

/* ============================================================
   FASE 3: EMPILHAMENTO DE GRIDS E CARDS (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Grids genéricos */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto,
  .dashboard-cards,
  .stats-container,
  .kpi-grid,
  .doc-grid,
  .price-grid,
  .card-grid,
  .service-grid,
  [class*="grid"],
  [class*="cards"],
  [class*="container-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Cards individuais */
  .card,
  .card-item,
  .stat-card,
  .kpi-card,
  .doc-card,
  .price-card,
  [class*="card"] {
    padding: 16px !important;
    margin-bottom: 8px !important;
  }
  
  /* Flex containers que precisam empilhar */
  .flex-row,
  .flex-wrap,
  [class*="flex-row"],
  [class*="flex-wrap"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  /* ★ FIX 3.B — SELETOR FLEX RESTRINGIDO: antes [style*="display:flex"] capturava
     TODO elemento com flex inline, quebrando .brand, .summary, .method, etc.
     Agora apenas containers semânticos que devem empilhar no mobile. */
  .split,
  .hero-grid,
  .form-actions,
  .final-cta-btns,
  .affiliate-features {
    flex-direction: column !important;
  }
}

/* ============================================================
   FASE 3: AJUSTE DE PADDINGS INTERNOS (< 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Containers principais */
  .container,
  .content,
  .main-content,
  .page-content,
  [class*="container"],
  [class*="content"] {
    padding: 16px !important;
  }
  
  /* Seções */
  section,
  .section,
  [class*="section"] {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Cards e boxes */
  .box,
  .panel,
  .widget,
  [class*="box"],
  [class*="panel"],
  [class*="widget"] {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Textos longos */
  p,
  span,
  a,
  .text,
  [class*="text"] {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Links longos */
  a,
  .link,
  [class*="link"] {
    word-break: break-all !important;
  }
  
  /* Headers */
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ============================================================
   FASE 3: RESPONSIVIDADE EXTRA PEQUENA (< 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Containers ainda mais compactos */
  .container,
  .content,
  .main-content,
  [class*="container"],
  [class*="content"] {
    padding: 12px !important;
  }
  
  /* Seções compactas */
  section,
  .section,
  [class*="section"] {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  
  /* Cards muito compactos */
  .card,
  .card-item,
  .box,
  .panel,
  [class*="card"],
  [class*="box"],
  [class*="panel"] {
    padding: 12px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
  }
  
  /* Grids em telas muito pequenas */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="grid"] {
    gap: 8px !important;
  }
  
  /* Tabelas ainda mais compactas */
  table td,
  table th {
    padding: 6px 0 !important;
    font-size: 13px !important;
  }
  
  table tr {
    margin-bottom: 12px !important;
    padding: 8px !important;
  }
}

/* ============================================================
   FASE 3: INDICADOR DE SCROLL HORIZONTAL
   ============================================================ */
@media (max-width: 768px) {
  /* Container com scroll */
  .table-wrap,
  .table-container,
  [class*="table-wrap"],
  [class*="table-container"] {
    position: relative !important;
  }
  
  /* Pseudo-elemento para indicar scroll */
  .table-wrap::after,
  .table-container::after,
  [class*="table-wrap"]::after,
  [class*="table-container"]::after {
    content: '← Deslize para ver mais →' !important;
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: var(--text-mute, #71717A) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
  }
}

/* ============================================================
   OTIMIZAÇÃO DE BOTÕES (Landing Pages - Todos os breakpoints)
   ============================================================ */
/* Botões com melhor alinhamento e aparência */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

/* Botões grandes (btn-lg) */
.btn-lg {
  padding: 16px 24px !important;
  font-size: 15px !important;
  min-height: 56px !important;
  border-radius: 12px !important;
}

/* Botões outline (secundários) */
.btn-outline {
  border: 2px solid var(--border-strong, rgba(212,175,55,0.25)) !important;
  background: transparent !important;
  color: var(--gold, #D4AF37) !important;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.btn-outline:hover {
  border-color: var(--gold, #D4AF37) !important;
  background: rgba(212,175,55,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Botões gold (primários) */
.btn-gold {
  background: linear-gradient(135deg, var(--gold, #D4AF37), var(--gold-dark, #B8860B)) !important;
  color: #09090B !important;
  box-shadow: 0 4px 20px rgba(212,175,55,0.3) !important;
  border: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
}

.btn-gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(212,175,55,0.4) !important;
}

/* Ícones dentro de botões */
.btn i,
.btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Botões em cards de plano */
.plano-card .btn {
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  min-height: 52px !important;
}

/* Botões em seção de garantia */
.guarantee .btn {
  margin-top: 24px !important;
  padding: 16px 32px !important;
  font-size: 16px !important;
  min-height: 56px !important;
}

/* ============================================================
   OTIMIZAÇÃO DE HEADER (Landing Pages - < 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Header compacto */
  .header {
    padding: 8px 0 !important;
  }
  
  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  
  /* Logo menor */
  .logo {
    font-size: 14px !important;
    gap: 6px !important;
  }
  
  .logo-mark {
    width: 28px !important;
    height: 28px !important;
  }
  
  .logo-mark i {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Botão no header reduzido */
  .header-inner .btn {
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }
  
  .header-inner .btn i {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Flex container do header */
  .header-inner > div {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  
  /* Menu mobile button */
  .mobile-menu-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
  }
  
  .mobile-menu-btn i {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Botões otimizados para tablet */
  .btn-lg {
    padding: 14px 20px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  
  .plano-card .btn {
    padding: 12px 18px !important;
    font-size: 13px !important;
    min-height: 48px !important;
  }
  
  .guarantee .btn {
    padding: 14px 24px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 480px) {
  /* Header ainda mais compacto */
  .header {
    padding: 6px 0 !important;
  }
  
  .logo {
    font-size: 12px !important;
  }
  
  .logo-mark {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* Botão escondido no header (vai pro menu mobile) */
  .header-inner .btn {
    display: none !important;
  }
  
  /* Apenas menu button visível */
  .mobile-menu-btn {
    display: flex !important;
  }
  
  /* Botões muito compactos em mobile */
  .btn-lg {
    padding: 12px 16px !important;
    font-size: 13px !important;
    min-height: 44px !important;
    gap: 6px !important;
  }
  
  .btn i,
  .btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .plano-card .btn {
    padding: 11px 16px !important;
    font-size: 12px !important;
    min-height: 44px !important;
  }
  
  .guarantee .btn {
    padding: 12px 20px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }
}

/* ============================================================
   SAFE AREA INSET (iOS)
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    body {
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .main,
    main {
      padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}


/* --- Origem: index-mobile.css --- */
/* Correção específica para a Index não quebrar no celular */
@media (max-width: 768px) {

    /* Força todos os elementos a respeitarem a largura da tela */
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }

    /* Impede que imagens ou containers estiquem a tela */
    .container,
    section,
    .hero,
    .content {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Ajusta o tamanho das fontes gigantes que estão deformando o layout */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    /* Garante que os cards da index empilhem em vez de ficarem lado a lado */
    .grid,
    .services-grid,
    .cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
}