@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;600;700;800;900&display=swap";

*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:Inter,system-ui,sans-serif;background:#050505;color:#f4f4f4;overflow-x:hidden;line-height:1.6}

::-moz-selection{background:#c41e3a66;color:#fff}
::selection{background:#c41e3a66;color:#fff}

.font-display{font-family:Bebas Neue,Impact,sans-serif;letter-spacing:.025em;line-height:.9}
.font-heading{font-family:Montserrat,sans-serif;letter-spacing:-.025em}

.nav-main{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(180deg,rgba(5,5,5,.92),rgba(5,5,5,.35),transparent);transition:all .4s ease}
.nav-main.scrolled{background:rgba(5,5,5,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.45)}
.nav-top-bar{background:rgba(5,5,5,.92);border-bottom:1px solid rgba(255,255,255,.07);padding:8px 40px}
.nav-bottom{padding:16px 40px;display:flex;align-items:center;justify-content:space-between}

.btn-primary,.btn-solid{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;font-family:Montserrat,sans-serif;font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:all .35s ease;border:2px solid #c41e3a}

.btn-primary{background:rgba(0,0,0,.22);color:#fff}
.btn-primary:hover{background:#c41e3a;color:#fff;box-shadow:0 0 28px rgba(196,30,58,.35);transform:translateY(-1px)}

.btn-solid{background:#c41e3a;color:#fff;box-shadow:0 10px 28px rgba(196,30,58,.24)}
.btn-solid:hover{background:#e0304a;border-color:#e0304a;box-shadow:0 0 34px rgba(224,48,74,.38);transform:translateY(-1px)}

.img-cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.img-contain{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;background:#050505}

/* Melhora fotos horizontais tipo turma.jpg */
img[src*="turma"],img[src*="equipe"],img[src*="wado"]{
  width:100%;
  height:auto!important;
  max-height:520px;
  object-fit:contain!important;
  object-position:center center!important;
  display:block;
  border-radius:18px;
  box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(135deg,#090909,#111);
}

/* Dá acabamento premium ao container da imagem */
img[src*="turma"]{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
}

.overlay-dark{background:rgba(5,5,5,.78)}
.overlay-gradient{background:linear-gradient(180deg,rgba(5,5,5,.25),rgba(5,5,5,.12) 38%,rgba(5,5,5,.9))}
.overlay-side{background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.52) 58%,transparent 100%)}

.section{position:relative;padding:110px 40px;background:
radial-gradient(circle at 85% 15%,rgba(196,30,58,.09),transparent 28%),
radial-gradient(circle at 10% 80%,rgba(196,30,58,.07),transparent 24%),
#050505}
.section-dark{background:#050505}
.section-alt{background:linear-gradient(180deg,#0b0b0b,#070707)}

.section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
}

.red-line{width:62px;height:2px;background:linear-gradient(90deg,#c41e3a,#ff3655)}
.red-line-center{width:62px;height:2px;background:linear-gradient(90deg,#c41e3a,#ff3655);margin:0 auto}

@keyframes fadeUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.animate-fade-up{animation:fadeUp .8s ease forwards;opacity:0}
.animate-fade-in{animation:fadeIn .8s ease forwards;opacity:0}
.delay-1{animation-delay:.15s}
.delay-2{animation-delay:.3s}
.delay-3{animation-delay:.45s}

@keyframes wa-pulse{0%,to{box-shadow:0 4px 20px #25d36666}50%{box-shadow:0 4px 30px #25d36699}}

/* ============================================
   CORRECOES MOBILE - PERFEICIONAMENTO VISUAL
   ============================================ */

/* ===== 1. TITULOS - TAMANHOS CORRETOS NO MOBILE ===== */
@media (max-width: 768px) {
  /* Fontes .font-display reduzidas proporcionalmente */
  .font-display {
    line-height: 0.95 !important;
  }
  
  /* Previne palavras coladas em todos os headings */
  .font-display,
  [class*="font-display"] {
    word-break: keep-all !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
  }
  
  /* Hero H1 - de ~8rem para proporcional */
  h1.font-display {
    font-size: clamp(3rem, 12vw, 4.5rem) !important;
  }
  
  /* Subtitulo dourado do hero */
  p.font-display,
  .font-display + .font-display {
    font-size: clamp(1.4rem, 4.5vw, 2rem) !important;
  }
  
  /* H2 das secoes - "ESCOLA WADO", "OSVALDO WADO" etc */
  h2.font-display {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
  }
  
  /* H3 - "PROFESSORA SILVANA", "VENHA NOS CONHECER" */
  h3.font-display {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
  }
  
  /* Secao Infantil */
  #aulas h2.font-display,
  #aulas .font-display {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
  }
  
  /* Secao Competicao */
  .mod-grid h2.font-display {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
  
  /* Secao Muay Thai */
  #muaythai h2.font-display {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
  }
  
  /* CTA Final */
  #contato h2.font-display:first-of-type {
    font-size: clamp(2.8rem, 10vw, 5rem) !important;
  }
  
  /* ===== 2. ESTATISTICAS - CENTRALIZADAS ===== */
  #escola div[style*="flex-wrap"] {
    justify-content: center !important;
    gap: 24px !important;
    text-align: center !important;
  }
  
  #escola span.font-display {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }
  
  /* ===== 3. IMAGEM DO MESTRE - TAMANHO CONTROLADO ===== */
  .mestre-grid img,
  img[src*="mestre-wado"] {
    height: auto !important;
    max-height: 50vh !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  
  /* ===== 4. CONTRASTE - OVERLAY MAIS ESCURO ===== */
  /* Aulas infantil - lado esquerdo texto */
  #aulas > div > div:nth-child(2) {
    background: linear-gradient(
      180deg,
      rgba(5,5,5,0.95) 0%,
      rgba(5,5,5,0.88) 50%,
      rgba(5,5,5,0.82) 100%
    ) !important;
  }
  
  /* Muay Thai - lado direito texto */
  #muaythai > div > div:nth-child(2) {
    background: linear-gradient(
      180deg,
      rgba(5,5,5,0.95) 0%,
      rgba(5,5,5,0.88) 60%,
      rgba(5,5,5,0.75) 100%
    ) !important;
  }
  
  /* ===== 5. GALERIA - COM ESPACAMENTO ===== */
  .gallery-grid {
    gap: 12px !important;
    padding: 4px !important;
  }
  
  .gallery-grid > div {
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  
  /* ===== 6. HEADER MAIS COMPACTO ===== */
  .nav-top-bar {
    padding: 4px 16px !important;
    font-size: 10px !important;
  }
  
  .nav-bottom {
    padding: 10px 16px !important;
  }
  
  /* ===== 7. WHATSAPP BOTAO MENOR ===== */
  a[href*="wa.me"]:not(.nav-top-bar a) {
    width: 48px !important;
    height: 48px !important;
    bottom: 14px !important;
    right: 14px !important;
  }
  
  /* ===== 8. MUAY THAI - TEXTO ALINHADO A ESQUERDA ===== */
  .muay-text {
    text-align: left !important;
    max-width: 100% !important;
  }
  
  .muay-text > div:first-child {
    justify-content: flex-start !important;
  }
  
  .muay-text > div:last-of-type {
    justify-content: flex-start !important;
  }
  
  /* ===== 9. PADDING GERAL REDUZIDO ===== */
  .section {
    padding: 70px 20px !important;
  }
  
  /* ===== 10. COMPETICAO NUMEROS ===== */
  .mod-grid span.font-display {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }
}

/* ===== TELAS PEQUENAS (480px) ===== */
@media (max-width: 480px) {
  h1.font-display {
    font-size: clamp(2.6rem, 14vw, 3.2rem) !important;
  }
  
  h2.font-display {
    font-size: clamp(1.8rem, 10vw, 2.2rem) !important;
  }
  
  h3.font-display {
    font-size: clamp(1.5rem, 8vw, 1.8rem) !important;
  }
  
  .font-display + .font-display {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
  }
  
  #escola span.font-display {
    font-size: clamp(1.6rem, 8vw, 2rem) !important;
  }
  
  .mod-grid span.font-display {
    font-size: 2rem !important;
  }
  
  .gallery-grid {
    gap: 8px !important;
  }
  
  .section {
    padding: 60px 16px !important;
  }
  
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .loc-text {
    padding: 40px 16px !important;
  }
  
  .nav-top-bar {
    padding: 3px 12px !important;
  }
  
  .nav-bottom {
    padding: 8px 12px !important;
  }
}

/* ===== TELAS EXTRA PEQUENAS (375px - iPhone SE) ===== */
@media (max-width: 375px) {
  h1.font-display {
    font-size: 2.4rem !important;
  }
  
  h2.font-display {
    font-size: 1.6rem !important;
  }
  
  h3.font-display {
    font-size: 1.3rem !important;
  }
  
  .btn-primary,
  .btn-solid {
    padding: 12px 20px !important;
    font-size: 9px !important;
  }
}