/**
 * ╔══════════════════════════════════════════════════════════╗
 * ║  KLUE DIGITAL — mobile-optimized.css                     ║
 * ║  Otimizações críticas para mobile                        ║
 * ║  Versão: 2.0.1 Mobile-First                             ║
 * ╚══════════════════════════════════════════════════════════╝
 */

/* ────────────────────────────────────────
   TOUCH TARGETS — 48x48px mínimo
   ──────────────────────────────────────── */

a, button, [role="button"] {
  min-height: 48px;
  min-width: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ────────────────────────────────────────
   INPUT OPTIMIZATION — Evitar zoom iOS
   ──────────────────────────────────────── */

input,
textarea,
select {
  font-size: 16px !important;
  padding: 16px !important;
  border-radius: 8px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
}

/* Remover zoom em inputs com autofocus */
input:autofocus {
  font-size: 16px;
}

/* ────────────────────────────────────────
   VIEWPORT HEIGHT FIX
   ──────────────────────────────────────── */

html {
  /* Usar Dynamic Viewport Height em vez de 100vh */
  scroll-behavior: auto;
}

@supports (height: 100dvh) {
  html {
    height: 100dvh;
  }
}

.hero {
  min-height: 100dvh;
}

/* ────────────────────────────────────────
   OVERFLOW FIX — Sem scroll horizontal
   ──────────────────────────────────────── */

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

* {
  max-width: 100%;
}

.mobile-menu {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ────────────────────────────────────────
   MOBILE-SPECIFIC SPACING
   ──────────────────────────────────────── */

@media (max-width: 640px) {
  /* Aumentar espaço entre elementos clicáveis */
  .btn + .btn {
    margin-left: 12px;
  }

  /* Buttons full-width no mobile */
  .btn-primary,
  .btn-secondary,
  .btn-submit {
    width: 100%;
    min-height: 48px;
    padding: 16px 24px !important;
    font-size: 16px !important;
  }

  /* Input maior */
  input,
  textarea {
    min-height: 48px;
    padding: 16px !important;
  }

  textarea {
    min-height: 160px !important;
  }

  /* Line height maior */
  body {
    line-height: 1.8;
  }

  /* Espaço maior entre seções */
  section {
    padding: clamp(3rem, 8vw, 6rem) var(--sp-6) !important;
  }

  /* Links com espaço */
  a {
    display: inline-block;
    min-padding: 8px;
  }

  /* Form group maior */
  .form-group {
    margin-bottom: 24px !important;
  }

  label {
    font-size: 16px;
    margin-bottom: 12px !important;
  }

  /* Card padding maior */
  .card {
    padding: 24px !important;
  }

  .card-img {
    height: 120px !important;
  }
}

/* ────────────────────────────────────────
   SMOOTH SCROLL APENAS DESKTOP
   ──────────────────────────────────────── */

@media (max-width: 640px) {
  html {
    scroll-behavior: auto !important;
  }
}

@media (min-width: 641px) {
  html {
    scroll-behavior: smooth;
  }
}

/* ────────────────────────────────────────
   PARALLAX DISABLE NO MOBILE
   ──────────────────────────────────────── */

@media (max-width: 768px) {
  .parallax-hero {
    transform: none !important;
  }

  .parallax-item {
    transform: none !important;
  }

  /* Desabilitar orb animation em mobile */
  .hero-orb {
    animation: none !important;
    opacity: 0.3;
  }
}

/* ────────────────────────────────────────
   KEYBOARD HEIGHT FIX
   ──────────────────────────────────────── */

input:focus,
textarea:focus {
  /* Evitar que keyboard cubra elemento */
  scroll-margin-top: 120px;
}

/* ────────────────────────────────────────
   SAFE AREA INSETS (Notch support)
   ──────────────────────────────────────── */

@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .fixed-footer,
  .sticky-button {
    bottom: env(safe-area-inset-bottom);
  }
}

/* ────────────────────────────────────────
   STICKY CTA (WhatsApp Button)
   ──────────────────────────────────────── */

@media (max-width: 640px) {
  .whatsapp-sticky,
  .cta-sticky {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 40;
    width: calc(100% - 32px);
    min-height: 48px;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 8px;
  }

  /* Adicionar padding no body para não cobrir conteúdo */
  body {
    padding-bottom: calc(48px + 32px);
  }
}

/* ────────────────────────────────────────
   FORM VALIDATION VISUAL
   ──────────────────────────────────────── */

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #f87171 !important;
  background: rgba(248, 113, 113, 0.05) !important;
  animation: none !important; /* Sem shake no mobile */
}

/* ────────────────────────────────────────
   HAMBURGER OPTIMIZATION
   ──────────────────────────────────────── */

.hamburger {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 8px !important;
}

.hamburger-line {
  width: 24px;
  height: 2px;
}

/* ────────────────────────────────────────
   MENU MOBILE IMPROVEMENTS
   ──────────────────────────────────────── */

.mobile-menu {
  top: 60px;
  max-height: calc(100vh - 60px);
}

.mob-link {
  min-height: 48px;
  padding: 16px 0;
  display: flex;
  align-items: center;
}

/* Close button no menu */
.mobile-menu::before {
  content: "✕";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
  color: var(--clr-white);
  z-index: 10;
}

/* ────────────────────────────────────────
   LAZY LOADING IMAGES
   ──────────────────────────────────────── */

img {
  loading: lazy;
  decoding: async;
}

/* Loading placeholder */
img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    rgba(145, 43, 255, 0.1),
    rgba(145, 43, 255, 0.05)
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* ────────────────────────────────────────
   TOUCH FEEDBACK
   ──────────────────────────────────────── */

@media (hover: none) {
  /* Touch devices */

  a:active,
  button:active,
  [role="button"]:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  .btn:active {
    background: rgba(145, 43, 255, 0.9);
  }

  /* Remover custom cursor em touch */
  .cursor,
  .cursor-dot {
    display: none !important;
  }
}

/* ────────────────────────────────────────
   LANDSCAPE MODE OPTIMIZATION
   ──────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 24px;
  }

  header {
    height: 44px;
  }

  .hero-eyebrow,
  .hero-cta-row {
    display: none;
  }

  .hero-title {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .hero-sub {
    display: none;
  }

  section {
    padding: 20px 16px !important;
  }
}

/* ────────────────────────────────────────
   RESPONSIVE TYPOGRAPHY
   ──────────────────────────────────────── */

@media (max-width: 640px) {
  h1 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  h2 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  h3 {
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  p {
    font-size: clamp(14px, 3vw, 16px) !important;
  }
}

/* ────────────────────────────────────────
   CRITICAL CSS INLINE (Acima da fold)
   ──────────────────────────────────────── */

/* Estes estilos são críticos para LCP */
header,
.hero,
.btn,
input {
  /* Prioridade max */
}

/* ────────────────────────────────────────
   PREFERS REDUCED MOTION
   ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .parallax-hero {
    transform: none !important;
  }
}

/* ────────────────────────────────────────
   PRINT STYLES
   ──────────────────────────────────────── */

@media print {
  .whatsapp-sticky,
  .cta-sticky,
  .hamburger,
  .mobile-menu,
  header,
  footer {
    display: none;
  }

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

/* ────────────────────────────────────────
   ACCESSIBILITY IMPROVEMENTS
   ──────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
  :root {
    --clr-border: var(--clr-white);
  }

  .btn {
    border: 2px solid currentColor;
  }

  input,
  textarea {
    border-width: 2px !important;
  }
}