/* =============================================================
   STYLE.CSS — Boilerplate de Escola
   Compartilhado por todas as páginas do site.
   Customizado para a Escola Jacarezinho.
   ============================================================= */

/* ─── FONTE BASE ─────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── LINKS SEM SUBLINHADO PADRÃO ──────────────────────────────
   Use a classe .no-underline nas tags <a> quando necessário.
   Tailwind já cobre isso com a classe, mas aqui garantimos globalmente. */
a { text-decoration: none; }

/* ─── NAV — LINK ATIVO (sublinhado verde embaixo) ──────────────
   Adicione aria-current="page" no <a> da página atual. */
.nav-link {
  position: relative;
}
.nav-link[aria-current]::after {
  content: '';
  position: absolute;
  bottom: -2px;          /* ajuste fino para colar na borda inferior do nav */
  left: 1rem;
  right: 1rem;
  height: 3px;
  border-radius: 9px;
  /* EDITE: cor principal da marca */
  background: #157f7f;
}

/* ─── DRAWER MOBILE ─────────────────────────────────────────────
   O drawer inicia oculto e desliza da direita.
   JavaScript alterna a classe .open no elemento #drawer. */
#drawer {
  display: none;
}
#drawer.open {
  display: block;
}
.drawer-panel {
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
#drawer.open .drawer-panel {
  transform: translateX(0);
}

/* ─── BOTÃO CTA — PULSO ─────────────────────────────────────────
   Aplique a classe .cta-pulse no botão de matrícula/CTA principal. */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 98, 26, 0.45); }
  50%       { box-shadow: 0 0 0 10px rgba(212, 98, 26, 0); }
}
.cta-pulse {
  /* EDITE: cor da sombra do pulso (deve ser a cor do botão) */
  animation: pulse 2.5s ease-in-out infinite;
}

/* ─── CARD FLIP ─────────────────────────────────────────────────
   Estrutura esperada:
   <div class="flip h-52">
     <div class="flip-inner">
       <div class="flip-front">...</div>
       <div class="flip-back">...</div>
     </div>
   </div>
   Em desktop: hover vira o card. Em mobile: click via JS (opcional). */
.flip {
  perspective: 800px;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  border-radius: 1rem;
}
.flip:hover .flip-inner,
.flip.flipped .flip-inner {
  transform: rotateY(180deg);
}
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 1rem;
  overflow: hidden;
}
.flip-back {
  transform: rotateY(180deg);
}


/* ─── ANIMAÇÃO FLOAT (landing page / hero) ──────────────────────
   Aplique em cards flutuantes no hero. */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.float {
  animation: float 4s ease-in-out infinite;
}

/* ─── BADGE / ETIQUETA DE SEÇÃO ────────────────────────────────
   Uso: <span class="section-badge badge-green">Texto</span>
         <span class="section-badge badge-orange">Texto</span>
         <span class="section-badge badge-white">Texto</span>  */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
}
.badge-green  { background: #ddf5f3; color: #0e5c5c; }
.badge-orange { background: #fde9d2; color: #c85a0f; }
.badge-white  { background: rgba(255,255,255,.15); color: #fff; }
.badge-orange-solid { background: #f0831e; color: #fff; }
.badge-lime   { background: #eef7d6; color: #5c7817; }

/* ─── HOVER CARD — ZOOM DE IMAGEM ──────────────────────────────
   Use .img-zoom-wrap + .img-zoom na imagem. */
.img-zoom-wrap { overflow: hidden; }
.img-zoom { transition: transform .5s ease; }
.img-zoom-wrap:hover .img-zoom { transform: scale(1.06); }

/* ─── DEPOIMENTOS — CARROSSEL ──────────────────────────────────
   O JS move #dep-track via transform: translateX */
#dep-track { transition: transform .5s ease; }

/* ─── IFRAME FORMULÁRIO ─────────────────────────────────────────
   Todos os formulários são iframes.
   A altura padrão é definida inline mas pode ser sobrescrita aqui. */
.form-iframe {
  width: 100%;
  border: none;
  border-radius: 1rem;
  min-height: 600px;
}

/* ─── UTILITIES EXTRAS ──────────────────────────────────────────*/
/* Remove scroll horizontal acidental.
   IMPORTANTE: "overflow-x" aplicado no <body> quebra o menu fixo
   (position: sticky do <nav>), pois transforma o body num container
   de scroll próprio e o navegador perde a referência do viewport.
   Por isso o overflow-x fica só no <html>. */
html { overflow-x: hidden; }

/* Scroll suave para âncoras */
html { scroll-behavior: smooth; }