/* ===== NAVBAR DESKTOP (>= 992px) ===== */
@media screen and (min-width: 992px) {
  .navbar-new { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 5% !important; background-color: #fff !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; }
  .navbar-new::before, .navbar-new::after { display: none !important; }
  .brand-2 { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; }
  .nav-menu { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; background: transparent !important; }
  .div-block-82 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 35px !important; margin: 0 !important; }
  .nav-link-2-3 { padding: 8px 0 !important; margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #333 !important; text-decoration: none !important; position: relative !important; transition: color 0.3s ease !important; }
  .nav-link-2-3:hover { color: #d11c1c !important; }
  .nav-link-2-3::after { content: '' !important; position: absolute !important; width: 0% !important; height: 2px !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; background-color: #d11c1c !important; transition: width 0.3s ease !important; }
  .nav-link-2-3:hover::after { width: 100% !important; }
  .mobile-only-cta { display: none !important; }
   .header-cta-btn { 
    background-color: #d11c1c !important; 
    color: #fff !important; 
    padding: 12px 28px !important; 
    border-radius: 50px !important; 
    font-weight: 700 !important; 
    font-size: 14px !important; 
    text-decoration: none !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important; 
    transition: all 0.3s ease !important; 
    box-shadow: 0 4px 12px rgba(209, 28, 28, 0.25) !important; 
    flex: 0 0 auto !important; 
  }
  .header-cta-btn:hover { 
    background-color: #b01515 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 6px 16px rgba(209, 28, 28, 0.35) !important; 
  }
}

/* ===== CLASSES GERAIS DE BOTÃO ===== */
.btn-red-pill {
  background-color: #d11c1c !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
}
.btn-red-pill:hover {
  background-color: #b01515 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(209, 28, 28, 0.3) !important;
}

/* ===== TABLET (<= 991px) ===== */
@media screen and (max-width: 991px) {
  .header-cta-btn { display: none !important; }
}

/* ===== WHATSAPP MODERN WIDGET ===== */
.wpp-widget { position: fixed; bottom: 24px; right: 24px; z-index: 99999; font-family: 'Inter Tight', 'Poppins', sans-serif; }

/* Chat Dialog */
.wpp-chat {
  position: absolute; bottom: 80px; right: 0;
  width: 340px; max-width: calc(100vw - 48px);
  background: #fff; border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.wpp-chat.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.wpp-chat-header {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 50%, #25d366 100%);
  padding: 20px 20px 24px; position: relative;
}
.wpp-chat-header-top { display: flex; align-items: center; gap: 12px; }
.wpp-chat-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); flex-shrink: 0;
}
.wpp-chat-avatar img { width: 28px; height: 28px; }
.wpp-chat-info h4 { margin: 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.wpp-chat-info p { margin: 2px 0 0; color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 400; }
.wpp-chat-close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.wpp-chat-close:hover { background: rgba(255,255,255,0.35); transform: scale(1.1); }

.wpp-chat-body {
  padding: 20px; background: #e5ddd5;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ccc4b8' fill-opacity='0.25'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.wpp-chat-bubble {
  background: #fff; border-radius: 0 12px 12px 12px;
  padding: 12px 16px; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  animation: wppFadeIn 0.5s 0.2s both;
}
.wpp-chat-bubble::before {
  content: ''; position: absolute; top: 0; left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #fff; border-left: 8px solid transparent;
}
.wpp-chat-bubble p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #303030; }
.wpp-chat-bubble .wpp-time {
  display: block; text-align: right; font-size: 11px;
  color: #999; margin-top: 6px;
}
.wpp-typing {
  display: flex; gap: 4px; align-items: center;
  margin-top: 12px; animation: wppFadeIn 0.5s 0.6s both;
}
.wpp-typing-dot {
  width: 7px; height: 7px; background: #90a4ae;
  border-radius: 50%; animation: wppBounce 1.4s infinite;
}
.wpp-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.wpp-typing-dot:nth-child(3) { animation-delay: 0.3s; }

.wpp-chat-footer { padding: 14px 20px; background: #f0f0f0; }
.wpp-chat-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 20px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff; font-size: 14px; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.wpp-chat-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}
.wpp-chat-cta svg { width: 18px; height: 18px; fill: #fff; }

/* Floating Button */
.wpp-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; z-index: 2;
}
.wpp-btn:hover {
  transform: scale(1.12) rotate(-5deg);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6);
}
.wpp-btn svg { width: 32px; height: 32px; fill: #fff; transition: transform 0.3s; }
.wpp-btn:hover svg { transform: scale(1.08); }
.wpp-btn .wpp-close-icon { display: none; }
.wpp-btn.active .wpp-wa-icon { display: none; }
.wpp-btn.active .wpp-close-icon { display: block; }

/* Pulse ring */
.wpp-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 64px; height: 64px;
  border-radius: 50%; background: rgba(37, 211, 102, 0.3);
  transform: translate(-50%, -50%);
  animation: wppPulse 2s ease-out infinite;
  pointer-events: none; z-index: 1;
}
.wpp-btn.active ~ .wpp-pulse { display: none; }

/* Notification badge */
.wpp-badge {
  position: absolute; top: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #ff3b3b; color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 59, 59, 0.4);
  animation: wppBadgePop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.wpp-btn.active .wpp-badge { display: none; }

/* Label tooltip */
.wpp-label {
  position: absolute; right: 76px; top: 50%; transform: translateY(-50%);
  background: #333; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0; visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wpp-label::after {
  content: ''; position: absolute; top: 50%; right: -6px;
  transform: translateY(-50%);
  border-left: 6px solid #333; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.wpp-btn-wrap:hover .wpp-label { opacity: 1; visibility: visible; }
.wpp-btn.active ~ .wpp-label { display: none; }

.wpp-btn-wrap { position: relative; }

@keyframes wppPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
@keyframes wppBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}
@keyframes wppFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wppBadgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@media screen and (max-width: 767px) {
  /* Botão menor e posição segura */
  .wpp-widget {
    bottom: 16px;
    right: 16px;
  }
  .wpp-btn {
    width: 52px;
    height: 52px;
  }
  .wpp-btn svg {
    width: 26px;
    height: 26px;
  }
  .wpp-pulse {
    width: 52px;
    height: 52px;
  }
  /* Ocultar label tooltip no mobile */
  .wpp-label {
    display: none !important;
  }
  /* Janela de chat SEMPRE oculta no mobile — botão abre WA direto */
  .wpp-chat,
  .wa-chat-window {
    display: none !important;
  }
  /* Cursor do botão indica ação direta */
  .wa-trigger,
  .wpp-btn {
    cursor: pointer;
  }
}

@media screen and (max-width: 479px) {
  .wpp-widget { bottom: 14px; right: 14px; }
  .wpp-btn { width: 50px; height: 50px; }
  .wpp-btn svg { width: 24px; height: 24px; }
  .wpp-pulse { width: 50px; height: 50px; }
  .wpp-label { display: none !important; }
  .wpp-chat {
    width: calc(100vw - 28px);
    right: 0;
    max-height: 65vh;
  }
}


/* ============================================================
   MOBILE RESPONSIVIDADE — max-width: 767px
   ============================================================ */
@media screen and (max-width: 767px) {

  /* ── GERAL ── */
  body {
    overflow-x: hidden;
  }

  /* ── NAVBAR ── */
  .navbar-new {
    padding: 12px 20px !important;
    justify-content: space-between !important;
  }
  .header-cta-btn {
    display: none !important;
  }
  .brand-2 {
    gap: 8px !important;
  }
  .brand-2 img.image-3-2 {
    height: 42px !important;
  }
  .brand-2 > span {
    font-size: 18px !important;
  }

  /* Menu mobile aberto (Webflow collapse) */
  .nav-menu.w--nav-menu-open {
    background: #fff !important;
    padding: 20px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  }
  .div-block-82 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .nav-link-2-3 {
    font-size: 16px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100% !important;
  }
  /* Mostrar CTA "Aula Experimental" no menu mobile */
  .mobile-only-cta {
    display: block !important;
    background: #d11c1c !important;
    color: #fff !important;
    text-align: center !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    margin-top: 8px !important;
  }

  /* ── HERO ── */
  .section-13.jjadulto {
    min-height: 100svh !important;
    padding: 100px 20px 60px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .section-13.jjadulto::before,
  .section-13.jjadulto::after {
    width: 0 !important;
  }
  .div-block-36 {
    text-align: center !important;
  }
  .heading-11.jjadulto {
    font-size: 36px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  .paragraph-13 {
    font-size: 15px !important;
    text-align: center !important;
    margin: 0 auto 30px !important;
    max-width: 320px !important;
  }
  .div-block-12640.jjad {
    display: flex !important;
    justify-content: center !important;
  }
  .btn-red-pill {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 14px 24px !important;
  }
  .heading-10._2.v2,
  .heading-10 {
    font-size: 13px !important;
    text-align: center !important;
  }
  .scroll-indicator {
    display: none !important;
  }

  /* ── MODALIDADES ── */
  .section-16 {
    padding: 60px 20px !important;
  }
  .modalidades-container {
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 40px !important;
    padding: 0 !important;
  }
  .modalidade-card {
    width: 100% !important;
  }

  /* ── CAROUSEL ESCOLA ── */
  .custom-carousel {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .carousel-slide img {
    height: 260px !important;
    object-fit: cover !important;
  }
  .carousel-btn-prev { left: 5px !important; }
  .carousel-btn-next { right: 5px !important; }
  .carousel-btn {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
    font-size: 24px !important;
  }

  /* ── VALUE CARDS (Nossos Valores) ── */
  .section-40.jja {
    padding: 60px 20px !important;
  }
  .flex-block-4 {
    padding: 20px 0 !important;
    gap: 16px !important;
  }
  .value-card {
    flex: 0 0 85vw !important;
    height: 380px !important;
    max-width: 85vw !important;
  }

  /* ── LOCALIZAÇÃO E ESTRUTURA ── */
  .sobre-nos {
    padding: 60px 0 !important;
  }
  .div-block-91 {
    flex-direction: column !important;
    gap: 32px !important;
    text-align: center !important;
    padding: 0 20px !important;
    align-items: center !important;
  }
  .div-block-91 > div:first-child {
    max-width: 100% !important;
    width: 100% !important;
  }
  .div-block-91 > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
  }
  .heading-13--2 {
    font-size: 28px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }
  /* Parágrafo da descrição */
  .div-block-91 .paragraph {
    font-size: 15px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  /* Bloco de endereço: centralizado no mobile */
  .div-block-97 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 0 10px !important;
  }
  .image-9 {
    width: 20px !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    display: block !important;
  }
  .div-block-97 .paragraph {
    font-size: 15px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    color: #555 !important;
    line-height: 1.5 !important;
  }
  /* Botão "Conheça nossa escola" centralizado */
  .div-block-91 > div:first-child > div[style] {
    display: flex !important;
    justify-content: center !important;
  }
  /* Carousel ocupa 100% */
  .custom-carousel {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* ── EVENTOS ── */
  .section-eventos {
    padding: 60px 0 !important;
  }
  .section-eventos h2 {
    font-size: 28px !important;
    text-align: center !important;
    padding: 0 20px !important;
  }
  .events-carousel-wrap {
    padding: 0 12px !important;
  }
  .events-carousel-wrap .carousel-btn-prev { left: -4px !important; }
  .events-carousel-wrap .carousel-btn-next { right: -4px !important; }
  .event-card {
    flex: 0 0 88vw !important;
  }

  /* ── HORÁRIOS ── */
  .section-horarios {
    padding: 60px 20px !important;
  }
  .horarios-flex {
    flex-direction: column !important;
    gap: 30px !important;
    text-align: center !important;
  }
  .horarios-text h2 {
    font-size: 28px !important;
  }
  .horarios-text p {
    margin: 0 auto !important;
  }

  /* ── FORMULÁRIO / CADASTRO ── */
  .section-cadastro {
    padding: 60px 20px !important;
  }
  .cadastro-flex {
    flex-direction: column !important;
    gap: 30px !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .cadastro-text h2 {
    font-size: 26px !important;
    text-align: center !important;
  }
  .cadastro-text p {
    text-align: center !important;
  }
  .cadastro-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 28px 20px !important;
  }

  /* ── RODAPÉ ── */
  .footer-white {
    padding: 50px 0 30px !important;
  }
  .footer-grid-white {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 0 24px !important;
    text-align: center !important;
  }
  .footer-col-item {
    align-items: center !important;
    text-align: center !important;
  }
  .footer-logo-wrap {
    justify-content: center !important;
  }
  .social-links {
    align-items: center !important;
  }
}

/* ── EXTRA PEQUENO (≤ 360px) ── */
@media screen and (max-width: 360px) {
  .heading-11.jjadulto {
    font-size: 28px !important;
  }
  .brand-2 > span {
    font-size: 15px !important;
  }
  .brand-2 img.image-3-2 {
    height: 36px !important;
  }
  .value-card {
    flex: 0 0 92vw !important;
    max-width: 92vw !important;
  }
  .event-card {
    flex: 0 0 93vw !important;
  }
}

/* ===== BLOG CAROUSEL ===== */
.blog-carousel-wrap {
  position: relative;
  width: 100%;
}

.blog-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  transition: all 0.3s ease;
}

.blog-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.07);
  border: 1px solid #eee;
  transition: transform 0.3s, box-shadow 0.3s;
}

.blog-carousel-wrap .carousel-btn {
  display: none !important;
}

@media screen and (max-width: 1024px) {
  .blog-track {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    gap: 20px !important;
    padding: 10px 5px 30px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory !important;
  }
  .blog-track::-webkit-scrollbar {
    display: none !important;
  }
  .blog-card {
    flex: 0 0 85vw !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
  }
  .blog-carousel-wrap .carousel-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #d11c1c !important;
    font-size: 30px !important;
    z-index: 10 !important;
    cursor: pointer !important;
  }
  .blog-carousel-wrap .carousel-btn-prev { left: -15px !important; }
  .blog-carousel-wrap .carousel-btn-next { right: -15px !important; }
}

@media screen and (max-width: 479px) {
  .blog-card {
    flex: 0 0 88vw !important;
  }
  .blog-carousel-wrap .carousel-btn {
    display: none !important; /* Hide arrows on very small screens, use touch swipe */
  }
}