/* =================================================================
   AICLAX — Mobile UX Pro Max CSS v1.0
   Skill: mobile-uiux-promax
   Princípios: Thumb Zone · Safe Area · Touch Targets 48dp · 60fps
   REGRA: Apenas media queries mobile-first. Desktop = intocado.
   ================================================================= */

/* ─── 0. CSS CUSTOM PROPERTIES MOBILE ──────────────────────────── */
:root {
  /* Safe area (iPhone notch / home indicator) */
  --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);

  /* Touch target mínimo iOS 44pt / Android 48dp */
  --touch-target: 48px;

  /* Padding horizontal mobile */
  --mobile-px: 1.125rem;

  /* Tipografia fluída — clamp(min, preferred, max) */
  --fluid-h1:   clamp(1.65rem, 6.5vw, 2.2rem);
  --fluid-h2:   clamp(1.35rem, 5vw,   1.85rem);
  --fluid-h3:   clamp(1.1rem,  4vw,   1.35rem);
  --fluid-body: clamp(0.925rem, 3.5vw, 1rem);
  --fluid-sm:   clamp(0.8rem,   3vw,   0.875rem);
}


/* =================================================================
   1. HEADER / NAVEGAÇÃO — MOBILE PREMIUM
   ================================================================= */

/* === TABLET ≤1024px === */
@media (max-width: 1024px) {
  .header {
    padding: 0.875rem 0;
  }

  .nav-links {
    gap: var(--sp-4);
  }
}

/* === MOBILE ≤768px === */
@media (max-width: 768px) {

  /* Header sticky — safe area top */
  .header {
    padding: 0.75rem 0;
    padding-top: calc(0.75rem + var(--safe-top));
  }

  /* Logo — tamanho otimizado para thumb zone */
  .logo img {
    height: 52px !important;
    max-width: 140px;
    object-fit: contain;
  }

  /* ── HAMBURGER BUTTON ─────────────────────────────── */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    /* Aumenta área de toque sem mudar visual */
    min-width: var(--touch-target);
    padding: 8px;
    border-radius: var(--radius-sm);
    /* Feedback visual no touch */
    -webkit-tap-highlight-color: rgba(94,8,138,0.1);
    transition: background 0.2s ease;
  }

  .mobile-menu-btn:active {
    background: rgba(94,8,138,0.08);
  }

  /* ══════════════════════════════════════════════════
     DRAWER MOBILE — Cross-platform (Android + iOS)
     Corrige: posição colada à esquerda, fontes grandes,
     espaçamento excessivo, menu travado/translúcido.
     ══════════════════════════════════════════════════ */

  /* Container do drawer — POSICIONAMENTO FIXO CORRETO */
  .nav-links {
    /* Posição: canto direito, full height */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;                /* FIXO em 0 — posição controlada APENAS por transform */
    left: auto !important;              /* garante que NÃO cola à esquerda */
    bottom: 0 !important;
    /* Dimensões */
    width: min(300px, 84vw) !important;
    height: 100% !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    /* Visual premium */
    background: linear-gradient(170deg, #1a0030 0%, #3d0560 50%, #5e088a 100%) !important;
    box-shadow: none !important;
    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* Espaçamento interno */
    padding: 0 !important;
    padding-top: calc(3.5rem + var(--safe-top, 0px)) !important;
    padding-bottom: calc(1.5rem + var(--safe-bottom, 0px)) !important;
    gap: 0 !important;
    /* Scroll seguro — sem -webkit-overflow-scrolling: cria stacking context no iOS */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    /* Box model */
    box-sizing: border-box !important;
    /* Z-index: acima do overlay (9000) e do header (1000) */
    z-index: 9500 !important;
    /* Animação suave via transform puro — iOS usa compositing automático */
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Sem backdrop-filter nem filter — cria stacking context que bloqueia eventos iOS */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Opacidade sólida */
    opacity: 1 !important;
    visibility: visible !important;
    /* will-change: hint para GPU — SEM translateZ() que causa embaçamento no iOS */
    will-change: transform !important;
    /* NÃO adicionar -webkit-transform separado: iOS Safari moderno usa `transform`,
       duplicar cria conflito de compositing que embaça o drawer */
  }

  /* Estado aberto */
  .nav-links.active {
    right: 0 !important;
    transform: translateX(0) !important;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.65) !important;
  }

  /* ─── Items principais ─────────────────────────── */
  .nav-links > a,
  .nav-links > .dropdown > span {
    /* Reset seletivo */
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Box model */
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    /* Touch target 48dp — SEM line-height igual a min-height */
    min-height: 48px !important;
    /* Tipografia — font-size fixo para não herdar zoom de acessibilidade Android */
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 15px !important;         /* px fixo: imune ao zoom de texto Android */
    font-weight: 600 !important;
    line-height: 1.3 !important;        /* não usar igual ao min-height */
    letter-spacing: 0.01em !important;
    color: rgba(255, 255, 255, 0.92) !important;
    /* Padding: cria touch target sem aumentar visualmente */
    padding: 0 var(--mobile-px, 1.125rem) !important;
    /* Separador sutil */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* Interação */
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.06) !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    outline: none !important;
    /* Sem pseudo-elementos decorativos herdados */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Estado active/hover no Android */
  .nav-links > a:active,
  .nav-links > .dropdown > span:active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }

  /* Link ativo (página atual) */
  .nav-links > a.active {
    color: #FF8C00 !important;
    font-weight: 700 !important;
  }

  /* Ocultar underline animado do desktop */
  .nav-links a::after,
  .nav-links .dropdown > span::after {
    display: none !important;
    content: none !important;
  }

  /* ─── Dropdown wrapper ─────────────────────────── */
  .nav-links .dropdown {
    display: block !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─── Dropdown content ─────────────────────────── */
  .nav-links .dropdown-content {
    /* Oculto por padrão */
    display: none !important;
    /* Layout estático: sem posição absoluta */
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Visual */
    background: rgba(0, 0, 0, 0.20) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    /* Reset de estados do desktop */
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    /* Sem efeitos que causam stacking context */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-links .dropdown-content.show {
    display: block !important;
  }

  /* Sub-itens do dropdown */
  .nav-links .dropdown-content > a {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    /* Largura: recuada com linha lateral */
    width: calc(100% - 1rem) !important;
    margin-left: 1rem !important;
    min-height: 44px !important;
    /* Indentação + linha vertical laranja */
    padding: 0 1.25rem 0 0.75rem !important;
    /* Tipografia — px fixo */
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13px !important;         /* px fixo: imune ao zoom Android */
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    /* Linha vertical laranja à esquerda */
    border-left: 2px solid rgba(255, 140, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: none !important;
    border-right: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    background: transparent !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05) !important;
    touch-action: manipulation !important;
    outline: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .nav-links .dropdown-content > a:active {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
    border-left-color: #FF8C00 !important;
  }

  /* ─── Botão CTA "Consultoria de 1 hora" ─────────── */
  .nav-links a.nav-cta {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    /* Margens */
    margin: 1.25rem 1.125rem 0 !important;
    width: calc(100% - 2.25rem) !important;
    /* Padding vertical — não linha-height */
    padding: 0.75rem 1rem !important;
    min-height: 44px !important;
    /* Tipografia fixa */
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 14px !important;         /* px fixo */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
    /* Visual */
    color: #FF8C00 !important;
    border: 1.5px solid #FF8C00 !important;
    border-radius: 50px !important;
    background: rgba(255, 140, 0, 0.06) !important;
    /* Interação */
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    outline: none !important;
  }

  .nav-links a.nav-cta:active {
    background: rgba(255, 140, 0, 0.18) !important;
  }

  /* ─── Overlay tap-to-close ─────────────────────── */
  .nav-overlay {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    /* CRÍTICO: z-index ABAIXO do drawer mas ACIMA de tudo */
    z-index: 9000 !important;
    /* Sem backdrop-filter: evita stacking context no Android Chrome */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* === MOBILE SMALL ≤480px === */
@media (max-width: 480px) {
  .logo img {
    height: 44px !important;
  }
}


/* =================================================================
   2. HERO SECTION — MOBILE CINEMATOGRÁFICO
   ================================================================= */

@media (max-width: 768px) {

  .hero {
    min-height: 100dvh;
    padding-top: calc(var(--safe-top) + 56px);
    /* Aumentado para empurrar conteudo ~2cm para cima do fundo */
    padding-bottom: calc(var(--safe-bottom) + 6rem);
    align-items: flex-end;
  }

  .hero-content {
    padding: 0 var(--mobile-px);
    text-align: center !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-content h1,
  .hero-question-h1 {
    font-size: var(--fluid-h1);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Subtítulo centralizado com quebra */
  .hero-subtitle-sec {
    text-align: center;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100%;
    flex-wrap: wrap !important; /* Permite wrapping se necessário */
  }
  .hero-subtitle-sec span {
    display: block;
    line-height: 1.3;
  }

  .hero-content p,
  .hero-sub {
    font-size: var(--fluid-body);
    line-height: 1.65;
    color: rgba(255,255,255,0.85);
    max-width: 100%;
    text-align: center !important;
  }

  /* CTA — empilhado, full-width, thumb-reachable */
  .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centralizado */
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    width: 100%;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-target);
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-full);
    /* Remove hover effects em touch */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Badge/eyebrow — centralizado */
  .hero-content .eyebrow,
  .hero-content .hero-badge-pill {
    display: inline-flex;
  }

  /* Overlay gradient — mais escuro no bottom para legibilidade */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(18, 0, 40, 0.3) 0%,
      rgba(18, 0, 40, 0.55) 40%,
      rgba(18, 0, 40, 0.92) 100%
    );
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: var(--fluid-h1);
  }

  .hero-content p {
    font-size: 0.95rem;
  }
}


/* =================================================================
   3. SEÇÕES — SPACING E TIPOGRAFIA FLUÍDA
   ================================================================= */

@media (max-width: 768px) {

  /* Seções — menos whitespace em mobile */
  .section {
    padding: 3.5rem 0;
  }

  /* Section header — alinhado à esquerda em mobile */
  .section-header {
    text-align: left;
    margin-bottom: 2rem;
  }

  .section-header h2 {
    font-size: var(--fluid-h2);
    line-height: 1.2;
  }

  .section-header p {
    font-size: var(--fluid-body);
    line-height: 1.6;
  }

  /* Eyebrow tags */
  .eyebrow, .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
  }

  /* Headings globais */
  h1 { font-size: var(--fluid-h1); }
  h2 { font-size: var(--fluid-h2); }
  h3 { font-size: var(--fluid-h3); }
  
  /* Badge de alto contraste em seções escuras */
  .section-dark .badge {
    background: var(--accent) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255,140,0,0.3);
    padding: 0.4rem 1.2rem !important;
    font-weight: 800 !important;
  }

  /* Parágrafos */
  p {
    font-size: var(--fluid-body);
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 2.75rem 0;
  }

  .section-header {
    margin-bottom: 1.5rem;
  }
}


/* =================================================================
   4. GRID & CARDS — LAYOUT MOBILE PREMIUM
   ================================================================= */

@media (max-width: 768px) {

  /* Grids — single column */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Cards de solução — scroll horizontal (swipeable) */
  .solucoes-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* Card base */
  .card {
    padding: var(--sp-5);
    border-radius: var(--radius-md);
  }

  .sol-card {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  /* Card icon menor em mobile */
  .sol-card-icon,
  .card-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  /* Card title */
  .sol-card-title,
  .card-title {
    font-size: 1.05rem;
  }

  /* Card description */
  .sol-card-desc,
  .card-text {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Botão do card — touch target mínimo */
  .sol-card-btn-orange,
  .card .btn {
    min-height: var(--touch-target);
    width: 100%;
    justify-content: center;
    margin-top: auto;
  }

  /* Remove tilt 3D em touch (performance + UX) */
  .sol-card {
    transform: none !important;
    transform-style: flat !important;
  }
}

/* === Cards em tablet — 2 colunas ≤ 900px === */
@media (max-width: 900px) and (min-width: 769px) {
  .solucoes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card {
    padding: var(--sp-4);
  }

  .sol-card {
    padding: 1rem;
  }
}


/* =================================================================
   5. BOTÕES — TOUCH-FRIENDLY EVERYWHERE
   ================================================================= */

@media (max-width: 768px) {

  /* Touch target mínimo em TODOS os botões */
  .btn,
  [role="button"],
  button:not(.mobile-menu-btn) {
    min-height: var(--touch-target);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Feedback de touch */
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .btn:active {
    transform: scale(0.96) !important;
    opacity: 0.88;
  }

  /* Remove hover effects que não funcionam em touch */
  .btn:hover {
    transform: none;
  }

  /* Botões de CTA — full-width */
  .hero-cta-neon,
  .footer-consult-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: var(--touch-target);
  }

  /* nav-cta: gerenciado no bloco DRAWER acima */
}

@media (max-width: 480px) {
  /* Botões em telas muito pequenas */
  .btn {
    font-size: 0.9rem;
    padding: 0.8rem 1.25rem;
  }
}


/* =================================================================
   6. FORMULÁRIOS — MOBILE UX PREMIUM
   ================================================================= */

@media (max-width: 768px) {

  /* Inputs — touch target + font-size ≥16px evita zoom no iOS */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* CRÍTICO: evita zoom automático iOS */
    min-height: var(--touch-target);
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    /* Keyboard avoidance — scroll suave */
    scroll-margin-top: 100px;
  }

  textarea.form-control {
    min-height: 120px;
  }

  /* Contact grid — single column */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* Form group spacing */
  .form-group {
    margin-bottom: var(--sp-4);
  }

  /* Labels acima dos inputs, nunca ao lado */
  .form-group label {
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
    display: block;
  }

  /* Submit button — full width, thumb zone */
  form .btn[type="submit"],
  form .btn-primary,
  form .btn-accent {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-target);
    margin-top: var(--sp-2);
  }
}


/* =================================================================
   7. FAQ ACCORDION — TOUCH PREMIUM
   ================================================================= */

@media (max-width: 768px) {

  .faq-container {
    padding: 0;
  }

  .faq-item {
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
  }

  /* Área de toque da pergunta — 48dp mínimo */
  .faq-question {
    min-height: 56px;
    padding: 1rem var(--mobile-px) !important;
    font-size: 0.9rem;
    gap: var(--sp-3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Ícone de toggle */
  .faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  /* Resposta */
  .faq-answer {
    padding-left: var(--mobile-px);
    padding-right: var(--mobile-px);
  }

  .faq-answer p {
    font-size: 0.9rem;
    line-height: 1.65;
  }
}


/* =================================================================
   8. WHATSAPP FLOAT — THUMB ZONE PREMIUM
   ================================================================= */

@media (max-width: 768px) {

  .whatsapp-float {
    /* Posicionamento thumb-friendly — bottom left também é opção */
    bottom: calc(1.25rem + var(--safe-bottom));
    right: calc(1rem + var(--safe-right));
    width: 54px;
    height: 54px;
    /* Sombra mais suave em mobile */
    box-shadow: 0 4px 16px rgba(37,211,102,0.35);
    /* Touch feedback */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  /* Remove tooltip em mobile (não funciona sem hover) */
  .whatsapp-float::before {
    display: none !important;
  }

  /* Scale tap feedback */
  .whatsapp-float:active {
    transform: scale(0.92) !important;
  }
}

@media (max-width: 380px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: calc(1rem + var(--safe-bottom));
    right: calc(0.875rem + var(--safe-right));
  }
}


/* =================================================================
   9. FOOTER — MOBILE CLEAN
   ================================================================= */

@media (max-width: 768px) {

  .footer {
    padding: 3rem 0 0;
    padding-bottom: calc(1.5rem + var(--safe-bottom));
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Colunas do footer — collapse accordion opcional */
  .footer h4 {
    font-size: 0.75rem;
    margin-bottom: var(--sp-3);
    letter-spacing: 0.12em;
  }

  .footer-links li {
    margin-bottom: var(--sp-3);
  }

  /* Links — touch target */
  .footer-links a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    -webkit-tap-highlight-color: transparent;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
    font-size: 0.78rem;
    padding-bottom: var(--safe-bottom);
  }

  /* CTA do footer */
  .footer-consult-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
  }

  /* Borda do topo do footer-grid */
  .footer-top-grid {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
}


/* =================================================================
   10. COOKIE BANNER — BOTTOM SAFE AREA
   ================================================================= */

@media (max-width: 768px) {

  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 1.25rem var(--mobile-px);
    padding-bottom: calc(1.25rem + var(--safe-bottom));
    gap: var(--sp-3);
  }

  .cookie-text {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .cookie-btn {
    width: 100%;
    min-height: var(--touch-target);
    justify-content: center;
    font-size: 0.9rem;
  }
}


/* =================================================================
   11. PÁGINA INTERNA — HERO MENOR (sub-pages)
   ================================================================= */

@media (max-width: 768px) {

  /* Hero interno (ex: sobre, contato, serviços) */
  .page-hero,
  .inner-hero,
  .hero-sm {
    min-height: 52dvh;
    padding: calc(6rem + var(--safe-top)) var(--mobile-px) 3rem;
  }

  .page-hero h1,
  .inner-hero h1,
  .hero-sm h1 {
    font-size: var(--fluid-h2);
    line-height: 1.2;
  }

  .page-hero p,
  .inner-hero p {
    font-size: var(--fluid-body);
  }
}


/* =================================================================
   12. BLOG / ARTIGOS — MOBILE READING
   ================================================================= */

@media (max-width: 768px) {

  /* Grid de blog posts — single column */
  .blog-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-5);
  }

  /* Card de blog */
  .blog-card {
    border-radius: var(--radius-md);
  }

  .blog-card img,
  .blog-card-img {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
  }

  .blog-card-body {
    padding: 1.125rem;
  }

  .blog-card-title {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .blog-card-excerpt {
    font-size: 0.875rem;
    line-height: 1.6;
    /* Limita preview do texto */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Read more link — touch target */
  .blog-card .btn,
  .blog-card a.read-more {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Artigo full — largura de leitura confortável */
  .article-body,
  .post-content {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0 var(--mobile-px);
  }
}


/* =================================================================
   13. SEÇÕES DE SERVIÇO — MOBILE
   ================================================================= */

@media (max-width: 768px) {

  /* Layout grid 2-col → single col */
  .service-detail-grid,
  .about-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6);
  }

  /* Imagem de serviço */
  .service-img,
  .about-img img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  /* Lista de features */
  .feature-list,
  .check-list {
    gap: var(--sp-3);
  }

  .feature-item,
  .check-item {
    gap: 0.75rem;
    font-size: 0.9rem;
  }

  /* Pricing cards */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }

  .pricing-card {
    padding: 1.5rem !important;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .testimonial-card {
    padding: 1.25rem;
  }
}


/* =================================================================
   14. CONTATO — MOBILE MAP & FORM
   ================================================================= */

@media (max-width: 768px) {

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .contact-info-item {
    gap: var(--sp-3);
  }

  .contact-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(94,8,138,0.08);
    border-radius: 50%;
  }
}


/* =================================================================
   15. SCROLL & INTERAÇÃO MOBILE
   ================================================================= */

@media (max-width: 768px) {

  /* Scroll suave no iOS */
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Previne bounce scroll lateral */
  body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  /* Links e botões — remove delay de 300ms no iOS antigo */
  a, button, [role="button"] {
    touch-action: manipulation;
  }

  /* Remove highlight azul do webkit */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Selections mais visíveis */
  ::selection {
    background: rgba(94,8,138,0.2);
    color: inherit;
  }

  /* Stats section — 2 colunas em mobile (mais legível) */
  .stats-grid,
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-4);
  }

  .stat-card {
    padding: var(--sp-4);
  }

  .stat-value {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .stat-label {
    font-size: 0.78rem;
  }
}


/* =================================================================
   16. SOBRE / SOBRE A EMPRESA — MOBILE LAYOUT
   ================================================================= */

@media (max-width: 768px) {

  /* Timeline de valores ou etapas */
  .timeline-grid,
  .steps-grid,
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }

  /* Certificados / logos parceiros — scroll horizontal */
  .partners-grid,
  .logos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
  }

  .partners-grid img,
  .logos-grid img {
    max-height: 40px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0.3);
    opacity: 0.8;
  }

  /* Sobre texto */
  .about-text p,
  .sobre-body p {
    font-size: var(--fluid-body);
    line-height: 1.75;
  }
}


/* =================================================================
   17. RESPONSIVIDADE ESPECÍFICA — PÁGINAS DE SERVIÇO
   ================================================================= */

/* Marketing Médico, Sites, Tráfego Pago, etc. */
@media (max-width: 768px) {

  /* Tabela de preços / módulos */
  .modulo-preco,
  .package-card {
    padding: 1.25rem !important;
    margin-bottom: var(--sp-4);
  }

  /* Listas de inclusão */
  .includes-list li,
  .package-includes li {
    font-size: 0.875rem;
    padding: 0.5rem 0;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  /* CTA de contratação */
  .cta-contratar,
  .btn-contratar {
    width: 100%;
    min-height: var(--touch-target);
    justify-content: center;
    text-align: center;
    font-size: 1rem;
  }

  /* Separadores */
  .separator-dashed {
    margin: 0.75rem 0;
  }
}


/* =================================================================
   18. SCROLL PROGRESS + PAGE LOADER — MOBILE
   ================================================================= */

@media (max-width: 768px) {

  /* Progress bar altura aumentada para mobile */
  #scroll-progress {
    height: 2px;
  }

  /* Page loader — centralizado */
  #page-loader {
    background: var(--white);
  }

  .loader-ring {
    width: 36px;
    height: 36px;
  }
}


/* =================================================================
   19. IMAGENS — MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 768px) {

  /* Todas as imagens responsivas por padrão */
  img {
    max-width: 100%;
    height: auto;
  }

  /* İmagens hero — object-fit correto */
  .hero img,
  .hero-img {
    object-fit: cover;
    object-position: center top;
  }

  /* Avatars e photos de autores */
  .author-img,
  .avatar {
    width: 40px !important;
    height: 40px !important;
  }
}


/* =================================================================
   20. ACESSIBILIDADE MOBILE — WCAG 2.1
   ================================================================= */

@media (max-width: 768px) {

  /* Focus visible — importante para usuários de switch/teclado externo */
  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Contraste de links */
  a:not(.btn):not(.nav-links a) {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  /* Skip link para screen readers */
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--mobile-px);
    z-index: 99999;
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s ease;
  }

  .skip-link:focus {
    top: calc(0.5rem + var(--safe-top));
  }
}


/* =================================================================
   21. DARK MODE SUPPORT (respeita preferência Sistema)
   ================================================================= */

@media (prefers-color-scheme: dark) and (max-width: 768px) {
  /* Apenas para elementos que não têm dark mode explícito */
  .cookie-banner {
    background: rgba(10, 2, 26, 0.98);
  }

  /* Cards em background escuro ficam com mais contraste */
  .card {
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
  }
}


/* =================================================================
   22. LANDSCAPE MOBILE — TRATAMENTO ESPECÍFICO
   ================================================================= */

@media (max-width: 768px) and (orientation: landscape) {

  /* Hero mais baixo em landscape */
  .hero {
    min-height: 100svh;
    align-items: center;
  }

  .hero-content {
    padding-top: 1rem;
  }

  /* Header compacto */
  .header {
    padding: 0.5rem 0;
  }

  .logo img {
    height: 38px !important;
  }

  /* Nav drawer — landscape: ligeiramente menor */
  .nav-links {
    width: min(280px, 80vw) !important;
    padding-top: calc(3rem + var(--safe-top, 0px)) !important;
  }
}


/* =================================================================
   23. IPHONE SE / DISPOSITIVOS PEQUENOS ≤375px
   ================================================================= */

@media (max-width: 375px) {

  :root {
    --mobile-px: 1rem;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .section-header h2 {
    font-size: 1.3rem;
  }

  .btn {
    font-size: 0.875rem;
    padding: 0.75rem 1.125rem;
  }

  .sol-card {
    padding: 0.875rem;
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
    bottom: calc(0.875rem + var(--safe-bottom));
    right: calc(0.875rem + var(--safe-right));
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}


/* =================================================================
   24. TABLET — LAYOUT INTERMEDIÁRIO 768px–1024px
   ================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  .container {
    padding: 0 2rem;
  }

  /* Grids tablet */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .solucoes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  /* Hero tablet — mais espaço */
  .hero-content {
    max-width: 680px;
    text-align: center;
  }

  .hero-cta {
    justify-content: center;
  }

  /* Section header tablet */
  .section-header {
    text-align: center;
  }

  /* Stats — 3 colunas em tablet */
  .stats-grid,
  .numbers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =================================================================
   15. PALESTRAS & TREINAMENTOS — CARDS MOBILE
   ================================================================= */

@media (max-width: 768px) {
  .card-icon-styled {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
    text-align: left;
  }
  .card-title-styled {
    font-size: 0.95rem !important; /* Redução de ~30% */
    font-weight: 800 !important;
    margin-bottom: 0.75rem !important;
    text-align: left;
    color: var(--primary);
    line-height: 1.3 !important;
    width: 100%;
  }
  .card-text-styled {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
    text-align: left;
    margin-bottom: 1rem !important;
    width: 100%;
  }
  .card-category-styled {
    margin-top: auto;
    padding-top: 1rem !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    width: 100%;
  }
  
  .grid-3 .card {
    padding: 1.75rem !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* CTA FINAL — Estética Agressiva Impacto */
  .cta-final-orange {
    padding: var(--sp-10) var(--sp-5) !important; /* Espaço entre as laterais */
  }
  .cta-final-title {
    font-size: 1.85rem !important; /* Redução de 34% (original 2.8rem) */
    line-height: 1.05 !important;  /* Redução drástica de entrelinha solicitado */
    margin-bottom: 1.25rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
  }
  .cta-final-text {
    font-size: 0.95rem !important;
    line-height: 1.25 !important; /* Entrelinha mais densa */
    margin-bottom: 2rem !important;
    opacity: 0.9;
  }
  .cta-final-buttons {
    flex-direction: column;
    gap: 1rem !important;
    align-items: stretch;
  }
  .btn-cta-white, 
  .btn-cta-outline {
    width: 100%;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* =================================================================
   25. PRINT — NÃO IMPRIME NAVEGAÇÃO/ANIMAÇÕES
   ================================================================= */

@media print {
  .header,
  .mobile-menu-btn,
  .nav-overlay,
  .whatsapp-float,
  .cookie-banner,
  #page-loader,
  #scroll-progress,
  #cursor-dot,
  #cursor-ring,
  .hero-scroll-hint {
    display: none !important;
  }

  .hero {
    min-height: auto;
    page-break-after: always;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }
}

/* =================================================================
   ANDROID CROSS-BROWSER FIX — v2.0
   Problemas corrigidos:
   1. Fontes grandes no Samsung/Android Chrome (text-size-adjust bug)
   2. Menu colado à esquerda (right: -100vw conflita com transform)
   3. Espaçamento excessivo entre itens (min-height + padding duplo)
   4. Menu travado/translúcido (stacking context + opacity conflict)
   ================================================================= */

/* ─── FIX 1: Tamanho de fonte — impermeável ao zoom do sistema Android ─── */
@media (max-width: 768px) {
  html {
    /* Bloqueia qualquer ajuste automático de fonte do Android/Samsung */
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    /* Samsung Internet e WebView específico */
    -ms-text-size-adjust: 100% !important;
  }

  /* ─── FIX 2: Drawer — elimina conflito right:-100vw vs transform ─── */
  /* Usa APENAS transform para posicionamento. Remove right como controle. */
  .nav-links {
    /* CRÍTICO: right deve ser 0 fixo — posição é controlada APENAS por transform */
    right: 0 !important;
    left: auto !important;
    /* Hidden state: fora da tela via transform (GPU-accelerated, sem reflow) */
    transform: translateX(100%) !important;
    /* SEM -webkit-transform: duplicar causa conflito de compositing no iOS Safari */
    /* Garante que NUNCA usa right para slide — apenas transform */
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Sólido — sem qualquer transparência */
    opacity: 1 !important;
    background: linear-gradient(170deg, #1a0030 0%, #3d0560 50%, #5e088a 100%) !important;
    /* NÃO usar isolation:isolate — bloqueia pointer-events nos filhos no iOS Safari */
    /* NÃO usar filter — cria stacking context problemático */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Estado aberto — só move transform, nunca toca em right */
  .nav-links.active {
    transform: translateX(0) !important;
    /* SEM -webkit-transform duplicado */
    right: 0 !important;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.65) !important;
  }

  /* ─── FIX 3: Itens do menu — espaçamento compacto e consistente ─── */
  /* Elimina conflito entre min-height, padding, e line-height */
  .nav-links > a,
  .nav-links > .dropdown > span {
    /* Tamanho FIXO em px — imune a zoom do sistema Android */
    font-size: 15px !important;
    line-height: 1 !important;           /* sem espaçamento de linha extra */
    /* Padding vertical explícito que cria o touch target de 48px */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    /* Remove min-height que conflita com padding */
    min-height: 0 !important;
    /* Apenas border-bottom como separador */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Garante display correto */
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Texto */
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background: transparent !important;
    /* Touch */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.06) !important;
    cursor: pointer !important;
  }

  /* Sub-itens dropdown */
  .nav-links .dropdown-content > a {
    font-size: 13px !important;
    line-height: 1 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;
    padding-right: 20px !important;
    min-height: 0 !important;
  }

  /* Botão CTA dentro do menu */
  .nav-links a.nav-cta {
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 12px 20px !important;
    min-height: 0 !important;
    margin: 16px 18px 0 !important;
    width: calc(100% - 36px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ─── FIX 4: Overlay — previne menu travado ─── */
  /* nav-overlay: usando opacity+pointer-events em vez de display:none/block
     Elimina o bug Android onde display:none -> block causa reflow + stacking issue */
  .nav-overlay {
    display: block !important;          /* sempre no DOM — sem reflow */
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 9000 !important;
    opacity: 0 !important;
    pointer-events: none !important;    /* não intercepta cliques quando fechado */
    transition: opacity 0.30s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;    /* intercepta cliques para fechar */
  }
}

/* ─── Samsung Internet / Android WebView: força GPU layer no drawer ───
   ATENÇÃO: @supports (-webkit-overflow-scrolling:touch) dispara TAMBÉM no iOS Safari.
   Por isso usamos JS para detectar Android e aplicar a classe via dataset,
   OU simplesmente não usamos translateZ(0) que causa embaçamento no iOS.
   A animação com translateX() puro já usa GPU no iOS (compositing automático).
   Este bloco foi REMOVIDO intencionalmente para não afetar iOS. ─── */

/* =================================================================
   iOS SAFARI — MENU NAV FIX v3
   Abordagem: regras CSS limpas que garantem que nada bloqueie
   os eventos de toque nos links. O trabalho pesado foi movido
   para o JS (touchstart/touchend direto em cada link).
   ================================================================= */

@media (max-width: 768px) {

  /* Drawer: overflow-y:scroll (não auto) — no iOS "auto" pode criar
     um contexto de scroll que consome o touchend antes do link */
  .nav-links {
    overflow-y: scroll !important;
    /* Remove qualquer coisa que crie stacking context isolado */
    isolation: auto !important;
    filter: none !important;
  }

  /* Todos os links: pointer-events e cursor explícitos */
  .nav-links a,
  .nav-links > .dropdown > span,
  .nav-links .dropdown-content a,
  .nav-links a.nav-cta {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Overlay fechado: visibility:hidden retira do hit-test no iOS */
  .nav-overlay {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .nav-overlay.active {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   iOS SAFARI SPECIFIC FIX — menu não clicável / embaçado
   Problema raiz: will-change:transform + -webkit-transform duplicado
   criam compositing layer fantasma acima do drawer no iOS Safari 16/17
   @supports (-webkit-touch-callout: none) = apenas iOS Safari
   ═══════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  /* Remove will-change no iOS: cria layer separado que embaça e bloqueia taps */
  .nav-links {
    will-change: auto !important;
    /* Sem transform3d: no iOS Safari, qualquer aceleração 3D no drawer
       cria stacking context que intercepta eventos de toque */
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  .nav-links.active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    will-change: auto !important;
  }

  /* Garante que o overlay não intercepta taps quando inativo */
  .nav-overlay {
    /* iOS Safari: isolation:isolate resolve ghost hit-test */
    isolation: isolate;
  }

  /* Todos os links do drawer: touch-action manipulation elimina
     o delay de 300ms do iOS e o ghost click */
  .nav-links a,
  .nav-links .dropdown > span,
  .nav-links .dropdown-content > a {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    /* cursor:pointer no iOS Safari ativa o fallback de clique em elementos não-a */
    cursor: pointer !important;
  }
}