/* =========================================================
   mobile-fix.css  —  Ajustes SÓ para celular (max-width: 767px)
   Adicionado manualmente (não faz parte do build do Lovable).
   Para reverter: apague este arquivo e a linha <link ...mobile-fix.css>
   do index.html.
   ========================================================= */

@media (max-width: 767px) {

  /* 1) Espaçamento vertical das seções mais enxuto no celular */
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .pt-14 { padding-top: 2rem !important; }
  .pb-32 { padding-bottom: 2.75rem !important; }
  .mb-12 { margin-bottom: 1.75rem !important; }

  /* 2) HERO (primeira dobra):
     - mostra a imagem (mosaico) que no desktop fica ao lado
     - coloca a imagem NO TOPO da página
     - hero mais compacto
     - badge encurtado para "AO VIVO | 15 DE AGOSTO"
     Obs: só 1 elemento .hidden.md:block na página (essa imagem). */
  .hidden.md\:block { display: block !important; }
  section.pt-14 { padding-top: 1rem !important; }
  section.pt-14 h1 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-bottom: 0.6rem !important;
  }
  section.pt-14 .max-w-6xl { gap: 0.9rem !important; }
  section.pt-14 .hidden.md\:block {
    order: -1;                 /* imagem no topo, acima de tudo */
    max-width: 280px;
    margin: 0 auto 1rem;
  }
  section.pt-14 .hidden.md\:block img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
  }
  /* badge: troca o texto só no mobile (span, não pega o botão <a>) */
  section.pt-14 span.tracking-\[0\.12em\] { font-size: 0 !important; }
  section.pt-14 span.tracking-\[0\.12em\]::after {
    content: "AO VIVO | 15 DE AGOSTO";
    font-size: 0.875rem;
  }

  /* 3) Seção "Um evento prático e direto ao ponto":
     4 quadros em 2x2 e mais compactos (lg:grid-cols-4 é único). */
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .lg\:grid-cols-4 .p-7 { padding: 1.1rem 0.85rem !important; }
  .lg\:grid-cols-4 .w-14.h-14 {
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin-bottom: 0.6rem !important;
  }

  /* 4) Seção "O que acontece quando você entende...":
     os 6 depoimentos viram um CARROSSEL horizontal deslizável
     (lg:grid-cols-3 é único nessa seção). */
  .lg\:grid-cols-3 {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem !important;
    padding-bottom: 0.6rem;
    scrollbar-width: none;
  }
  .lg\:grid-cols-3::-webkit-scrollbar { display: none; }
  .lg\:grid-cols-3 > * {
    flex: 0 0 80% !important;
    scroll-snap-align: center !important;
    min-width: 0;
  }
  .lg\:grid-cols-3 img {
    width: 100% !important;
    max-height: 440px !important;
    object-fit: contain !important;
  }

  /* 5) Seção "Conheça a especialista...":
     mostra a foto da instrutora no celular (estava hidden lg:block). */
  .hidden.lg\:block { display: block !important; }
  .hidden.lg\:block.relative { max-width: 270px; margin: 0 auto; }
  .hidden.lg\:block.relative img { width: 100%; height: auto; }
  /* reduz o vão (gap-16 = 64px) entre o texto e a foto no mobile */
  .lg\:grid-cols-\[1fr_400px\] { gap: 1.25rem !important; }

  /* 5b) Cronograma: linhas mais horizontais/compactas no mobile.
     .bg-card.gap-5 = exatamente os 7 itens do cronograma. */
  .bg-card.gap-5 { gap: 0.7rem !important; padding: 0.7rem 0.85rem !important; }
  .bg-card.gap-5 .rounded-full { min-width: auto !important; padding: 0.35rem 0.65rem !important; }
  .bg-card.gap-5 .rounded-full span { font-size: 0.85rem !important; }
  .bg-card.gap-5 h3 { font-size: 1rem !important; line-height: 1.2 !important; }
  .bg-card.gap-5 p { font-size: 0.8rem !important; margin-top: 0.15rem !important; line-height: 1.3 !important; }

  /* 6) Carrossel automático e contínuo (esteira infinita).
     O script no index.html envolve os itens num .mf-track e duplica
     o conjunto; aqui a esteira desliza sozinha, em loop sem emenda.
     Se o script não rodar, continua valendo o carrossel manual acima. */
  .lg\:grid-cols-3.mf-on {
    display: block !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
  }
  .lg\:grid-cols-3.mf-on .mf-track {
    display: flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    animation: mf-scroll 40s linear infinite;
  }
  .lg\:grid-cols-3.mf-on .mf-track:hover { animation-play-state: paused; }
  .lg\:grid-cols-3.mf-on .mf-track > * {
    flex: 0 0 76vw !important;
    max-width: 300px !important;
    margin-right: 0.75rem !important;
    opacity: 1 !important;      /* vence o fade-up dos cards/clones */
    transform: none !important;
  }
  .lg\:grid-cols-3.mf-on .mf-track img {
    width: 100% !important;
    max-height: 440px !important;
    object-fit: contain !important;
  }
  @keyframes mf-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* respeita quem prefere menos movimento */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .lg\:grid-cols-3.mf-on .mf-track { animation: none; }
}