:root {
  --mob-space-1: 0.5rem;
  --mob-space-2: 0.75rem;
  --mob-space-3: 1rem;
  --mob-space-4: 1.25rem;
  --mob-space-5: 1.5rem;
  --mob-space-6: 2rem;
}

html {
  font-size: 100%;
}

body {
  overflow-x: hidden;
  text-wrap: pretty;
}

/* Melhora de renderizacao em blocos longos */
section {
  content-visibility: auto;
  contain-intrinsic-size: 760px;
}

/* Midia responsiva geral */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Tipografia fluida para telas pequenas/grandes */
h1 {
  font-size: clamp(1.45rem, 4.8vw, 2.6rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.2rem, 3.8vw, 2rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.02rem, 3.2vw, 1.4rem);
  line-height: 1.25;
}

p,
span,
li {
  font-size: clamp(0.92rem, 2.6vw, 1rem);
  line-height: 1.45;
}

/* Alvos de toque confortaveis */
button,
a,
[role="button"],
input,
select,
textarea {
  min-height: 44px;
}

/* Layout responsivo base */
.mx-auto.w-full.max-w-7xl,
.w-full.max-w-7xl.mx-auto,
.max-w-7xl.mx-auto {
  width: min(100%, 1200px);
}

/* Barra de navegacao rapida mobile (injetada via JS) */
.mobile-quick-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mobile-quick-nav__toggle {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.mobile-quick-nav__panel {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: min(82vw, 290px);
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  display: none;
}

.mobile-quick-nav.is-open .mobile-quick-nav__panel {
  display: block;
}

.mobile-quick-nav__panel a {
  display: block;
  color: #e5e7eb;
  text-decoration: none;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.mobile-quick-nav__panel a:last-child {
  border-bottom: 0;
}

.mobile-quick-nav__panel a:hover {
  background: #1e293b;
}

@media (max-width: 1024px) {
  .hidden.lg\:flex {
    display: none !important;
  }

  .lg\:hidden {
    display: flex !important;
  }

  .grid-cols-1.md\:grid-cols-2,
  .grid-cols-1.md\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: var(--mob-space-3) !important;
  }
}

@media (max-width: 768px) {
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .w-full.max-w-7xl.mx-auto.px-4.sm\:px-6 {
    padding-left: var(--mob-space-3) !important;
    padding-right: var(--mob-space-3) !important;
  }

  section {
    padding-top: var(--mob-space-5) !important;
    padding-bottom: var(--mob-space-5) !important;
  }

  .rounded-2xl {
    border-radius: 16px !important;
  }

  .rounded-3xl {
    border-radius: 18px !important;
  }

  /* Hero organizado no mobile */
  section.bg-primary .flex.flex-col.lg\:flex-row {
    gap: var(--mob-space-4) !important;
  }

  section.bg-primary .lg\:w-1\/2 {
    width: 100% !important;
  }

  section.bg-primary .lg\:w-1\/2 h1,
  section.bg-primary .lg\:w-1\/2 h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 96% !important;
  }

  /* Cards de oferta e CTA */
  .max-w-lg.mx-auto {
    max-width: 100% !important;
  }

  a[data-checkout],
  a.animate-shaker {
    width: 100% !important;
    padding: 12px 10px !important;
    font-size: 0.98rem !important;
    line-height: 1.25 !important;
  }

  .text-5xl,
  .text-6xl {
    font-size: clamp(1.8rem, 8vw, 2.3rem) !important;
    line-height: 1.1 !important;
  }

  /* Reduz custo de animacao no mobile */
  .animate-pulse,
  .animate-bounce,
  .animate-shaker {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .w-full.max-w-7xl.mx-auto.px-4.sm\:px-6 {
    padding-left: var(--mob-space-2) !important;
    padding-right: var(--mob-space-2) !important;
  }

  section {
    padding-top: var(--mob-space-4) !important;
    padding-bottom: var(--mob-space-4) !important;
  }

  .mobile-quick-nav {
    right: 10px;
    bottom: 14px;
  }

  .mobile-quick-nav__toggle {
    width: 48px;
    height: 48px;
  }
}

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

.save-data *,
.save-data *::before,
.save-data *::after {
  animation: none !important;
  transition: none !important;
}