/* ═══════════════════════════════════════════════════════════════
   WIN — página inicial
   Carregado só no index.html, depois de win-brand.css.
   Só aparência: conteúdo e ordem das seções não mudam.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO: azul profundo como base, como no guia ────────────── */
.hero {
  background: var(--win-azul-profundo) !important;
  padding: 150px 0 120px !important;
  position: relative; overflow: hidden;
}
/* profundidade sutil, sem mancha vermelha */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 520px at 76% 44%, rgba(111, 143, 168, 0.16), transparent 62%),
    radial-gradient(900px 420px at 0% 110%, rgba(7, 21, 34, 0.85), transparent 60%);
}
/* linha de horizonte: a mesma assinatura vermelha curta do guia, em escala */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 143, 168, 0.35), transparent);
}
.hero .blob { display: none !important; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { grid-template-columns: 1.08fr 0.92fr !important; gap: 72px !important; }

.hero h1 {
  color: #fff !important; font-weight: 800 !important;
  font-size: clamp(2.6rem, 4.4vw, 3.9rem) !important; line-height: 1.04 !important;
  letter-spacing: -0.03em !important; margin-bottom: 26px !important;
}
.hero h1 .highlight::after { display: none !important; }
.hero .win-slogan { color: var(--win-off-white); margin-top: 26px; }
.hero-desc { color: rgba(245, 247, 250, 0.76) !important; font-size: 17px !important; line-height: 1.7 !important; max-width: 520px; }

.hero-badge {
  background: rgba(245, 247, 250, 0.04) !important;
  border: 1px solid rgba(111, 143, 168, 0.45) !important;
  color: var(--win-off-white) !important; box-shadow: none !important;
  font-weight: 600 !important; letter-spacing: 0.02em;
}
.hero-badge-dot { background: var(--win-vermelho) !important; box-shadow: 0 0 0 4px rgba(215, 25, 32, 0.18) !important; }

/* botão secundário sobre escuro */
.hero :is(.btn-outline, .btn-secondary) {
  color: var(--win-off-white) !important; border-color: rgba(245, 247, 250, 0.7) !important;
}
.hero :is(.btn-outline, .btn-secondary):hover { background: var(--win-off-white) !important; color: var(--win-azul-profundo) !important; }
.hero-actions { gap: 14px !important; }

.hero-stats {
  border-top: 1px solid rgba(111, 143, 168, 0.25) !important;
  padding-top: 30px !important; margin-top: 44px !important; gap: 0 !important;
}
.hero-stat { padding-right: 32px; margin-right: 32px; border-right: 1px solid rgba(111, 143, 168, 0.22); }
.hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stat h3 { color: #fff !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.hero-stat p { color: rgba(245, 247, 250, 0.6) !important; text-transform: uppercase; font-size: 11px !important; letter-spacing: 0.14em; font-weight: 600 !important; }

/* ── ANIMAÇÃO DO LOGO ─────────────────────────────────────────
   Camadas do mesmo tamanho, empilhadas: cada uma é um recorte do
   logo oficial, então o alinhamento é exato. Sequência:
   brilho → lobo → estrelas (do centro para fora) → WIN → slogan
   → linha vermelha. Depois, só um cintilar leve nas estrelas. */
.hero-visual { display: flex; align-items: center; justify-content: center; }
.win-anim {
  position: relative; width: min(100%, 500px); aspect-ratio: 760 / 506;
  margin: 0 auto;
}
.wa-l {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; user-select: none;
  will-change: transform, opacity;
}
.win-anim-glow {
  position: absolute; left: 50%; top: 36%; width: 74%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(111, 143, 168, 0.30), rgba(111, 143, 168, 0) 66%);
  opacity: 0;
  animation: wa-glow 1.4s 0.1s ease-out forwards, wa-breathe 7s 1.6s ease-in-out infinite;
}
.wa-lobo {
  transform-origin: 50% 62%;
  animation: wa-lobo 1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* cada estrela gira em torno do próprio centro (posição medida no logo) */
.wa-s { animation: wa-star 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both, wa-twinkle 4.8s ease-in-out infinite; }
.wa-s1 { transform-origin: 37.3% 12.8%; animation-delay: 1.34s, 3.6s; }
.wa-s2 { transform-origin: 42.4% 7.6%;  animation-delay: 1.18s, 4.4s; }
.wa-s3 { transform-origin: 49.0% 5.1%;  animation-delay: 1.02s, 3.2s; }
.wa-s4 { transform-origin: 55.8% 7.6%;  animation-delay: 1.18s, 4.0s; }
.wa-s5 { transform-origin: 60.9% 12.7%; animation-delay: 1.34s, 4.8s; }
.wa-win { animation: wa-win 0.95s 1.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.wa-slogan { animation: wa-rise 0.8s 2.2s ease-out both; }
.win-anim-line {
  position: absolute; left: 50%; bottom: -26px; height: 3px; width: 0;
  transform: translateX(-50%); border-radius: 2px; background: var(--win-vermelho);
  animation: wa-line 0.7s 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wa-glow    { to { opacity: 1; } }
@keyframes wa-breathe { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                        50%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes wa-lobo    { from { opacity: 0; transform: translateY(22px) scale(0.94); }
                        to   { opacity: 1; transform: none; } }
@keyframes wa-star    { from { opacity: 0; transform: scale(0) rotate(-72deg); }
                        to   { opacity: 1; transform: none; } }
@keyframes wa-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* revela o "WIN" de baixo para cima; a faixa da palavra vai de 54% a 86% da altura */
@keyframes wa-win     { 0%   { opacity: 1; clip-path: inset(86% 0 0 0); transform: translateY(14px); }
                        78%  { opacity: 1; clip-path: inset(50% 0 0 0); transform: none; }
                        100% { opacity: 1; clip-path: inset(0 0 0 0);  transform: none; } }
@keyframes wa-rise    { from { opacity: 0; transform: translateY(10px); }
                        to   { opacity: 1; transform: none; } }
@keyframes wa-line    { to { width: 72px; } }

/* quem pediu menos movimento vê o logo pronto, sem animação */
@media (prefers-reduced-motion: reduce) {
  .win-anim .wa-l, .win-anim-glow {
    animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .win-anim-glow { transform: translate(-50%, -50%) !important; }
  .win-anim-line { animation: none !important; width: 72px; }
}

/* ── 4 HABILIDADES: cartões iguais, sem tons pastel diferentes ── */
.features { background: #fff !important; }
.feature-card, .feature-card.orange, .feature-card.mango, .feature-card.ocean, .feature-card.blue {
  background: #fff !important; border: var(--border-subtle) !important;
  border-radius: var(--radius) !important; padding: 34px 28px !important;
}
.feature-card::before { content: ''; position: absolute; left: 28px; top: 0; width: 32px; height: 3px; background: var(--win-vermelho); }
.feature-card:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 40px -20px rgba(11, 31, 51, 0.35) !important; border-color: rgba(215, 25, 32, 0.35) !important; }

/* ── ritmo: claras alternam entre branco e off-white ──────────── */
.coord { background: var(--win-off-white) !important; }
.faq { background: #fff !important; }
.teachers { background: var(--win-off-white) !important; }
.testimonials-section { background: #fff !important; }
.ig-feed { background: var(--win-off-white) !important; }
.features, .coord, .faq, .teachers, .testimonials-section, .ig-feed { padding-top: 112px !important; padding-bottom: 112px !important; }

/* ── CHAMADA FINAL: deixa de ser um bloco vermelho inteiro ──────
   O guia reserva o vermelho para pontos de ação. Fundo claro,
   título em azul profundo e o botão como único vermelho. */
.cta-final { background: #fff !important; color: var(--win-azul-profundo) !important; padding: 120px 0 !important; border-top: 1px solid var(--win-cinza-azulado); }
.cta-final::before { display: none !important; }
.cta-final .container::before {
  content: ''; display: block; width: 48px; height: 3px; margin: 0 auto 26px;
  background: var(--win-vermelho); border-radius: 2px;
}
.cta-final h2 { color: var(--win-azul-profundo) !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.cta-final p { color: var(--g500) !important; opacity: 1 !important; }
.cta-final .btn {
  background: var(--win-vermelho) !important; color: #fff !important;
  border: 1px solid var(--win-vermelho) !important; box-shadow: none !important;
}
.cta-final .btn:hover { background: var(--win-vermelho-hover) !important; border-color: var(--win-vermelho-hover) !important; color: #fff !important; }

/* ── responsivo ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { padding: 120px 0 90px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .win-anim { width: min(86%, 400px); }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 2.25rem !important; }
  .hero-stat { padding-right: 18px; margin-right: 18px; }
  .win-anim-line { bottom: -18px; }
  .features, .coord, .faq, .teachers, .testimonials-section, .ig-feed { padding-top: 76px !important; padding-bottom: 76px !important; }
  .cta-final { padding: 84px 0 !important; }
}

/* botões do hero lado a lado */
.hero .btn-lg { padding: 16px 26px !important; font-size: 14px !important; }
.hero-actions { flex-wrap: wrap; }
.hero-badge { margin-bottom: 26px !important; }

/* ── "Ensino que transforma": moldura da foto sem vermelho em área ── */
.coord-photo-frame { background: var(--win-azul-profundo) !important; }
.coord-photo-bg { background: var(--win-cinza-azulado) !important; opacity: 0.7 !important; }
.coord-deco-1 { background: var(--win-azul-aco) !important; box-shadow: none !important; }
.coord-deco-4 { border-color: var(--win-azul-aco) !important; }
.coord-badge-exp {
  background: var(--win-azul-profundo) !important; color: var(--win-off-white) !important;
  box-shadow: 0 14px 30px -12px rgba(7, 21, 34, 0.6) !important;
}
/* chamada principal: vermelho, no padrão dos botões */
.coord-cta {
  background: var(--win-vermelho) !important; color: #fff !important;
  border-radius: var(--radius) !important; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 700 !important; font-size: 14px !important;
  box-shadow: none !important;
}
.coord-cta:hover { background: var(--win-vermelho-hover) !important; transform: none !important; box-shadow: none !important; }

/* números do hero no celular: três colunas, sem divisores */
@media (max-width: 640px) {
  .hero-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px !important; }
  .hero-stat { border-right: none !important; padding-right: 0 !important; margin-right: 0 !important; }
  .hero-stat h3 { font-size: 1.55rem !important; }
  .hero-stat p { font-size: 9.5px !important; letter-spacing: 0.1em; }
}

/* menu da home: transparente sobre o hero escuro; ganha fundo ao rolar */
.nav:not(.scrolled) {
  background: transparent !important; box-shadow: none !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}