/* =================================================================
   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;
  }
}

/* === MOBILE ≤768px === */
@media (max-width: 768px) {
  /* Header Setup */
  .header {
    padding: 0.75rem 0;
    padding-top: calc(0.75rem + var(--safe-top));
    z-index: 1000 !important;
  }

  .logo img {
    height: 52px !important;
    max-width: 140px;
    object-fit: contain;
  }

  /* Hamburger */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 8px;
    z-index: 1001 !important;
  }

    /* ══════════════════════════════════════════════════
     UNIFIED MOBILE MENU (iOS + ANDROID)
     Fixes blur-blocking (iOS) and edge-clipping (Android)
     ══════════════════════════════════════════════════ */
  /* Layering / Stacking Context Fixes */
  .header {
    z-index: 99999 !important; /* Acima do overlay e do whatsapp */
  }

  .nav-links {
    position: fixed !important;
    top: 0 !important;
    /* Use right positioning instead of transform for iOS compatibility */
    right: -100% !important;
    left: auto !important;
    width: 300px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    background: #120028 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: calc(70px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)) 20px !important;
    gap: 0 !important;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 100000 !important; /* Menu é o mais alto possível */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: right !important;
  }

  .nav-links.active {
    right: 0 !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.6) !important;
  }

  .nav-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    /* CRITICAL FIX: overlay ABAIXO do nav-links (100000) E do header (99999).
       Valor 9999 garante que o overlay escurece o conteúdo mas nunca bloqueia o menu. */
    z-index: 9999 !important;
  }

  /* Menu Items - Android Padding Fix */
  .nav-links > a,
  .nav-links > .dropdown > span {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 16px !important; /* Ensure words don't touch the edge */
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    word-break: break-word !important; /* Prevents overflow */
    -webkit-tap-highlight-color: transparent !important;
  }

  .nav-links a.active {
    color: var(--accent) !important;
  }

  /* Dropdown logic */
  .nav-links .dropdown {
    width: 100% !important;
  }

  .nav-links .dropdown-content {
    display: none !important;
    background: rgba(255,255,255,0.03) !important;
    padding: 0 !important;
    border-left: 3px solid var(--accent) !important;
    margin-left: 8px !important;
  }

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

  .nav-links .dropdown-content a {
    min-height: 48px !important;
    padding-left: 20px !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    opacity: 0.9;
  }

  /* CTA Button inside menu */
  .nav-links a.nav-cta {
    margin: 20px 0 !important;
    border: 1.5px solid var(--accent) !important;
    border-radius: 50px !important;
    padding: 12px 20px !important;
    justify-content: center !important;
    color: var(--accent) !important;
    background: transparent !important;
  }

  /* Overlay — CRITICAL FIX v45 */
  .nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    /* z-index ABAIXO do nav-links (100000) e header (99999).
       O overlay escurece o site mas NUNCA intercepta toques no menu. */
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    /* pointer-events auto apenas para fechar menu ao clicar FORA.
       Como z-index < nav-links, toques no menu chegam ao menu normalmente. */
    pointer-events: auto !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;
  }
}

/* =================================================================
   FIM DO ARQUIVO — Limpeza de correções redundantes efetuada.
   ================================================================= */