/* ===== RESPONSIVE.CSS - TODOS OS AJUSTES MOBILE/TABLET ===== */
/* 
   INSTRUÇÕES DE USO:
   1. Adicione este arquivo DEPOIS do style.css no HTML
   2. Aqui ficam APENAS as media queries
   3. Organize por tamanho: tablet → mobile → mobile pequeno
*/

/* ===================================================== */
/* ===== TABLET (769px - 1024px) ===== */
/* ===================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Ajuste do fundo */
  .mesh-gradient {
    filter: blur(120px);
  }
}

@media (max-width: 1024px) {
  /* Grid de serviços */
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
  }

  .service-card {
    min-height: 300px;
    padding: 35px 25px;
  }

  /* Avaliações */
  .review-card {
    min-width: calc((100% - 30px) / 2);
  }

  .reviews-track {
    gap: 20px;
  }

  /* Vídeos */
  .videos-carousel {
    padding: 20px 40px;
  }

  .video-story {
    flex: 0 0 180px;
    height: 320px;
  }

  /* Contador online */
  .online-counter {
    font-size: 11px;
    padding: 6px 10px;
  }

  /* Botão voltar ao topo */
  .back-to-top-v1 {
    left: 25px;
    bottom: 25px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  /* Seção de confiança */
  .trust-section {
    padding: 60px 20px;
  }

  .trust-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  /* Checklist hero */
  .hero-checklist {
    margin: 35px auto 0;
    padding: 22px;
  }
}

/* ===================================================== */
/* ===== MOBILE GERAL (até 768px) ===== */
/* ===================================================== */

@media (max-width: 768px) {
  /* ===== GERENCIAMENTO DE LOGOS ===== */
  .logo-corner {
    display: none !important;
  }

  .nav-logo {
    display: flex !important;
    max-width: 30px;
    height: 30px;
  }

  .logo-icon {
    height: 30px;
    width: auto;
    max-height: 30px;
    max-width: 30px;
  }

  /* ===== HERO MOBILE ===== */
  .hero {
    padding: 80px 20px 40px;
    min-height: auto;
  }

  .hero h1 {
    font-size: 50px;
    padding-top: 10px;
    margin-bottom: 20px;
    animation-duration: 12s;
    background-size: 150% 150%;
  }

  .hero h1::after {
    display: none;
  }

  .hero-subtitle {
    font-size: 18px;
    margin-bottom: 30px;
  }

  /* ===== NAVEGAÇÃO MOBILE ===== */
  .nav-container {
    top: 15px;
    padding: 10px 15px;
    gap: 8px;
    font-size: 10px;
    width: 90%;
    left: 5%;
    transform: none;
    max-height: 60px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px var(--white-02);
  }

  .nav-container a:not(.nav-logo) {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* ===== BACKGROUND OTIMIZADO ===== */
  .mesh-gradient {
    filter: blur(40px);
    opacity: 0.1;
  }

  /* ===== BOTÕES MOBILE ===== */
  .button-group {
    flex-direction: column;
    gap: 15px;
  }

  .future-btn {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 15px 30px;
    font-size: 16px;
  }

  /* ===== SEÇÕES ===== */
  .section-title {
    font-size: 36px;
    margin-bottom: 40px;
  }

  .section-subtitle {
    font-size: 18px;
    margin-top: -20px;
    margin-bottom: 40px;
  }

  .section-subtitle span {
    font-size: 14px;
  }

  .services,
  .stats,
  .pricing {
    padding: 60px 20px;
  }

  /* ===== GRID DE SERVIÇOS ===== */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-card {
    min-height: 280px;
    padding: 30px 25px;
    backdrop-filter: blur(5px);
  }

  .platform-icon {
    width: 160px;
    height: 160px;
  }

  /* ===== FAQ MOBILE ===== */
  .faq-section {
    padding: 80px 20px 60px;
  }

  .faq-question {
    padding: 20px 25px;
    font-size: 15px;
  }

  .faq-answer p {
    padding: 0 25px 20px;
    font-size: 14px;
  }

  /* ===== AVALIAÇÕES MOBILE ===== */
  .reviews-section {
    padding: 60px 10px;
  }

  .review-card {
    min-width: calc(100vw - 30px);
    max-width: calc(100vw - 30px);
    backdrop-filter: blur(5px);
  }

  .reviews-track {
    gap: 10px;
    padding: 0 5px;
  }

  .carousel-btn {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  /* ===== VÍDEOS MOBILE ===== */
  .client-videos-section {
    padding: 60px 20px;
  }

  .video-story {
    flex: 0 0 160px;
    height: 280px;
  }

  .videos-track {
    gap: 15px;
  }

  /* ===== FOOTER MOBILE ===== */
  .footer {
    padding: 60px 20px 30px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  /* ===== PÁGINAS INSTITUCIONAIS MOBILE ===== */
  .contact-section,
  .privacy-policy-section,
  .cookies-policy-section,
  .terms-section,
  .responsibility-terms-section {
    padding: 100px 20px 60px;
  }

  .privacy-content,
  .cookies-content,
  .terms-content,
  .responsibility-content {
    padding: 30px 25px;
  }

  /* ===== CONTATO MOBILE ===== */
  .contact-methods-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-item,
  .contact-whatsapp-card {
    padding: 25px 20px;
    gap: 12px;
  }

  /* ===== OTIMIZAÇÕES DE PERFORMANCE ===== */
  * {
    transition-duration: 0.3s; /* Animações mais rápidas no mobile */
  }
}

/* ===================================================== */
/* ===== MOBILE PEQUENO (até 480px) ===== */
/* ===================================================== */

@media (max-width: 480px) {
  /* ===== HERO MOBILE PEQUENO ===== */
  .hero h1 {
    font-size: 44px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  /* ===== NAVEGAÇÃO MOBILE PEQUENO ===== */
  .nav-container {
    top: 10px;
    backdrop-filter: blur(5px);
  }

  .nav-container a:not(.nav-logo) {
    font-size: 10px;
  }

  /* ===== SERVIÇOS MOBILE PEQUENO ===== */
  .service-card {
    padding: 25px 20px;
    backdrop-filter: blur(3px);
  }

  .platform-icon {
    width: 150px;
    height: 150px;
  }

  /* ===== FUNDO SUPER OTIMIZADO ===== */
  .mesh-gradient {
    filter: blur(20px);
    opacity: 0.07;
  }

  /* ===== FAQ MOBILE PEQUENO ===== */
  .faq-question {
    padding: 18px 20px;
    font-size: 14px;
  }

  .faq-answer p {
    padding: 0 20px 18px;
    font-size: 13px;
  }

  /* ===== AVALIAÇÕES MOBILE PEQUENO ===== */
  .reviews-section {
    padding: 40px 5px;
  }

  .review-card {
    min-width: calc(100vw - 15px);
    max-width: calc(100vw - 15px);
    padding: 20px 15px;
    backdrop-filter: blur(3px);
  }

  .review-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* ===== VÍDEOS MOBILE PEQUENO ===== */
  .video-story {
    flex: 0 0 140px;
    height: 250px;
  }

  .videos-track {
    gap: 12px;
  }

  /* ===== CONTADOR ONLINE MOBILE PEQUENO ===== */
  .online-counter {
    font-size: 9px;
    padding: 3px 6px;
  }

  .online-counter::before {
    content: "🟢";
    font-size: 8px;
  }

  .online-dot {
    display: none;
  }

  /* ===== NOTIFICAÇÕES MOBILE PEQUENO ===== */
  .notification-content {
    padding: 8px 12px;
  }

  .notification-text {
    font-size: 11px;
  }

  /* ===== BOTÃO VOLTAR AO TOPO MOBILE PEQUENO ===== */
  .back-to-top-v1 {
    left: 15px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* ===== CHECKLIST MOBILE PEQUENO ===== */
  .hero-checklist {
    margin: 25px auto 0;
    padding: 18px;
    max-width: calc(100% - 20px);
  }

  .checklist-item {
    font-size: 11px;
  }

  /* ===== PÁGINAS INSTITUCIONAIS MOBILE PEQUENO ===== */
  .privacy-content,
  .cookies-content,
  .terms-content,
  .responsibility-content {
    padding: 25px 20px;
    border-radius: 15px;
  }

  /* ===== CONTATO MOBILE PEQUENO ===== */
  .contact-section {
    padding: 90px 10px 50px;
  }

  .contact-item,
  .contact-whatsapp-card {
    padding: 20px 15px;
    border-radius: 15px;
    gap: 10px;
  }
}

/* ===================================================== */
/* ===== FOOTER RESPONSIVO ===== */
/* ===================================================== */

@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-logo-section {
    max-width: 100%;
  }

  .footer-logo {
    margin: 0 auto 20px;
  }

  .payment-methods {
    margin: 0 auto 30px;
  }
}

/* ===================================================== */
/* ===== CENTRALIZAÇÃO INTELIGENTE PARA TELAS GRANDES ===== */
/* ===================================================== */

@media (min-width: 1600px) {
  .videos-track {
    justify-content: center;
  }

  .videos-controls {
    opacity: 0.3;
    pointer-events: none;
  }
}

/* ===================================================== */
/* ===== AJUSTES ESPECÍFICOS PARA DESKTOP (min-width) ===== */
/* ===================================================== */

@media (min-width: 769px) {
  .nav-logo {
    display: none !important;
  }

  .logo-corner {
    display: block;
  }
}

/* ===== ÍCONES SOCIAIS - CENTRALIZADO EM TODOS OS MOBILES ===== */

/* Para QUALQUER tela menor que desktop */
@media (max-width: 992px) {
  .footer-logo-section {
    text-align: center !important;
  }

  .social-icons {
    justify-content: center !important;
    width: 100%;
    margin: 20px auto;
    flex-wrap: wrap; /* Quebra linha se necessário */
  }
}

/* Ajustes finos para telas muito pequenas */
@media (max-width: 360px) {
  .social-icons {
    gap: 10px; /* Menos espaço em telas minúsculas */
  }

  .social-icon-img {
    width: 30px; /* Ícones menores */
    height: 30px;
  }
}

/* ===== AJUSTE PARA TÍTULOS DAS PÁGINAS INSTITUCIONAIS ===== */

/* Para telas pequenas (até 480px) */
@media (max-width: 480px) {
  .page-title {
    font-size: 38px !important; /* Força tamanho menor */
    word-wrap: break-word; /* Quebra palavras grandes */
    overflow-wrap: break-word; /* Garante quebra */
    hyphens: auto; /* Adiciona hífen se necessário */
  }
}

/* Para telas MUITO pequenas (até 360px) */
@media (max-width: 360px) {
  .page-title {
    font-size: 28px !important;
  }
}