/* ============================================
   EZ AROUND - REFINAMENTOS MOBILE/TABLET
   Visualização leve, fluida e profissional
   HEADER E FOOTER PRESERVADOS
   ============================================ */

/* ============================================
   MOBILE FIRST - AJUSTES ULTRA REFINADOS
   ============================================ */

@media (max-width: 767px) {
  /* ============================================
     HERO SECTION - ESPAÇAMENTO OTIMIZADO
     ============================================ */
  section:first-of-type,
  #hero,
  .hero {
    padding-top: 7rem !important;
    padding-bottom: 4rem !important;
    min-height: auto !important;
  }
  
  /* Badge com mais espaçamento do menu */
  section:first-of-type .badge,
  section:first-of-type [class*="badge"],
  #hero .badge,
  .hero .badge,
  section:first-of-type > div > div > span:first-of-type,
  #hero > div > div > span:first-of-type {
    margin-top: 2rem !important;
    display: inline-block !important;
  }
  
  /* Títulos hero mais compactos */
  section:first-of-type h1,
  #hero h1,
  .hero h1 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.875rem !important;
  }
  
  /* Parágrafo hero - limitado a 3 linhas */
  section:first-of-type p,
  #hero p,
  .hero p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Botões hero - layout vertical elegante */
  section:first-of-type .flex,
  #hero .flex,
  .hero .flex {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }
  
  section:first-of-type .flex > *,
  #hero .flex > *,
  .hero .flex > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ============================================
     VIEW COVERAGE AREAS BUTTON - REFINADO
     ============================================ */
  .coverage-areas-btn {
    margin-top: 1rem !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 0.5rem !important;
    background: rgba(108, 72, 217, 0.15) !important;
    border: 1px solid rgba(108, 72, 217, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    align-self: center !important;
  }
  
  .coverage-areas-btn svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
  }
  
  .coverage-areas-btn a {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #BEA8FF !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
  }
  
  .coverage-areas-btn a svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
  
  /* ============================================
     SEÇÕES GERAIS - PADDING OTIMIZADO
     ============================================ */
  section {
    padding: 2.5rem 1rem !important;
  }
  
  section.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  section.py-24 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  /* ============================================
     TIPOGRAFIA - ESCALA REFINADA
     ============================================ */
  h2 {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.75rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }
  
  p.text-lg,
  .text-lg {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  /* ============================================
     GRIDS - LAYOUT FLUIDO
     ============================================ */
  .grid {
    gap: 0.875rem !important;
  }
  
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: 1fr !important;
  }
  
  /* Grid de ícones/indústrias - 2 colunas */
  #industries .grid,
  [id="industries"] .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  /* ============================================
     CARDS - ELEGÂNCIA COMPACTA
     ============================================ */
  .card,
  [class*="card"],
  [class*="Card"] {
    padding: 1.25rem !important;
    border-radius: 0.75rem !important;
  }
  
  /* Cards de features */
  #features .grid > div,
  [id="features"] .grid > div {
    padding: 1.25rem !important;
  }
  
  #features .grid > div svg,
  [id="features"] .grid > div svg {
    width: 2rem !important;
    height: 2rem !important;
  }
  
  /* ============================================
     TESTIMONIALS - CARROSSEL OTIMIZADO
     ============================================ */
  .testimonial-carousel,
  [class*="testimonial"] blockquote {
    padding: 1.25rem !important;
  }
  
  .testimonial-quote {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  /* ============================================
     CTA SECTION - ESPAÇAMENTO AJUSTADO
     ============================================ */
  #cta,
  [id="cta"] {
    padding: 3rem 1rem !important;
  }
  
  #cta h2,
  [id="cta"] h2 {
    font-size: 1.5rem !important;
  }
  
  #cta .flex,
  [id="cta"] .flex {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  /* ============================================
     BOTÕES - TOUCH TARGETS OTIMIZADOS
     ============================================ */
  button,
  .btn,
  [class*="btn"],
  a[role="button"] {
    padding: 0.625rem 1.25rem !important;
    min-height: 2.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.5rem !important;
  }
  
  /* Botões primários mais destacados */
  button.bg-\[\#6C48D9\],
  .btn-primary {
    padding: 0.75rem 1.5rem !important;
  }
  
  /* ============================================
     MARQUEE/SCROLL - VELOCIDADE AJUSTADA
     ============================================ */
  .animate-marquee {
    animation-duration: 25s !important;
  }
  
  .animate-marquee span {
    font-size: 1.125rem !important;
  }
  
  /* ============================================
     IMAGENS - RESPONSIVIDADE (exceto header/footer)
     ============================================ */
  section img,
  .card img,
  [class*="card"] img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* ============================================
     CONTAINER - PADDING CONSISTENTE
     ============================================ */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* ============================================
     VEHICLES SECTION - ÍCONES MENORES
     ============================================ */
  .vehicles-grid svg,
  [class*="vehicle"] svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  
  /* ============================================
     REVEAL ANIMATIONS - MAIS RÁPIDAS
     ============================================ */
  .reveal {
    transition-duration: 500ms !important;
  }
}

/* ============================================
   TABLET - AJUSTES REFINADOS (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* ============================================
     HERO SECTION - BALANCEAMENTO
     ============================================ */
  section:first-of-type,
  #hero,
  .hero {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
    min-height: auto !important;
  }
  
  section:first-of-type h1,
  #hero h1,
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  section:first-of-type p,
  #hero p,
  .hero p {
    font-size: 1rem !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* ============================================
     VIEW COVERAGE AREAS - TABLET
     ============================================ */
  .coverage-areas-btn {
    margin-top: 1.5rem !important;
    padding: 0.625rem 1.125rem !important;
  }
  
  .coverage-areas-btn a {
    font-size: 0.875rem !important;
  }
  
  /* ============================================
     SEÇÕES - PADDING EQUILIBRADO
     ============================================ */
  section {
    padding: 3rem 1.5rem !important;
  }
  
  section.py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  
  /* ============================================
     GRIDS - 2 COLUNAS OTIMIZADAS
     ============================================ */
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .grid-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Grid de features */
  #features .grid,
  [id="features"] .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  /* Grid de indústrias */
  #industries .grid,
  [id="industries"] .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }
  
  /* ============================================
     CARDS - PADDING EQUILIBRADO
     ============================================ */
  .card,
  [class*="card"] {
    padding: 1.5rem !important;
  }
  
  /* ============================================
     TIPOGRAFIA - ESCALA TABLET
     ============================================ */
  h2 {
    font-size: 1.75rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  /* ============================================
     CTA SECTION
     ============================================ */
  #cta h2,
  [id="cta"] h2 {
    font-size: 2rem !important;
  }
  
  /* ============================================
     BOTÕES - TAMANHO TABLET
     ============================================ */
  button,
  .btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================
   SMALL MOBILE - AJUSTES FINAIS (< 375px)
   ============================================ */

@media (max-width: 374px) {
  section:first-of-type h1,
  #hero h1,
  .hero h1 {
    font-size: 1.375rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  /* Texto hero ainda mais compacto */
  section:first-of-type p,
  #hero p,
  .hero p {
    max-width: 280px !important;
  }
  
  .coverage-areas-btn {
    padding: 0.375rem 0.75rem !important;
  }
  
  .coverage-areas-btn a {
    font-size: 0.75rem !important;
  }
  
  section {
    padding: 2rem 0.875rem !important;
  }
}

/* ============================================
   ANIMAÇÕES SUAVES - PERFORMANCE
   ============================================ */

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

/* ============================================
   SCROLL SUAVE - TODOS OS DISPOSITIVOS
   ============================================ */

html {
  scroll-behavior: smooth !important;
}

/* ============================================
   FOCO VISÍVEL - ACESSIBILIDADE
   ============================================ */

button:focus-visible,
a:focus-visible {
  outline: 2px solid #6C48D9 !important;
  outline-offset: 2px !important;
}