/* ===================================================== */
/* ======================== RESET ====================== */
/* ===================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { font-family: 'Montserrat', sans-serif; background:#000; color:#fff; }
a { text-decoration: none; color: inherit; }

/* ===================================================== */
/* ===================== CONTAINER ===================== */
/* ===================================================== */

.container{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(16px, 4vw, 60px);
}

/* ===================================================== */
/* ======================= HEADER ====================== */
/* ===================================================== */

header{
  position:absolute;
  top:0; left:0;
  width:100%;
  z-index:10;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:35px 0;
}

/* Logo agora é <a class="logo"> */
.logo{
  display:inline-block;
  font-size:22px;
  letter-spacing:4px;
  font-weight:300;
  line-height:1.2;
  white-space:nowrap;
}
.logo:hover{ opacity:.85; }

/* ======================= MENU (FIX) ======================== */
/* Fix principal: nav vira flex:1 e o UL usa margin-left:auto para
   manter o menu sempre alinhado à direita e estável no desktop. */

nav{
  flex: 1;
  display:flex;
  justify-content:flex-end;
}

nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:30px;

  /* estabilidade do alinhamento */
  margin-left:auto;
  flex-wrap:wrap;
}

nav ul li a{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  font-weight:400;
  opacity:.85;
  white-space:nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
nav ul li a:hover{
  opacity:1;
  transform: translateY(-2px);
}

/* ===================================================== */
/* ======================== HERO ======================= */
/* ===================================================== */

/* Ajuste para descer CTA/botões (como você pediu) */
.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-end;        /* desce conteúdo */
  position:relative;
  padding-top:120px;           /* espaço do header */
  padding-bottom:120px;        /* respiro inferior */
}

/* conteúdo acima do overlay */
.hero .container{
  position:relative;
  z-index:2;
}

.hero-content{ max-width:600px; }

/* ajuste fino (home) para cair no “quadrado vermelho” */
.home-content{ transform: translateY(-40px); }

.home-cta{
  max-width:520px;
  opacity:.9;
}

/* ===================================================== */
/* ===================== TIPOGRAFIA ==================== */
/* ===================================================== */

h1{
  font-size:48px;
  letter-spacing:4px;
  margin-bottom:20px;
}
p{
  line-height:1.8;
  font-weight:300;
  margin-bottom:20px;
}

/* ===================================================== */
/* =================== BOTÕES DO HERO ================== */
/* ===================================================== */

.hero-buttons{
  display:flex;
  gap:14px;
  margin-top:15px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:12px 20px;
  font-size:11px;
  letter-spacing:1.5px;
  border-radius:999px;
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
  white-space:nowrap;
}

.btn-primary{
  background:#fff;
  color:#000;
}
.btn-primary:hover{
  transform:translateY(-2px);
  opacity:.95;
}

.btn-outline{
  border:1px solid rgba(255,255,255,.6);
  background:transparent;
}
.btn-outline:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-2px);
}

/* ===================================================== */
/* ======================= BACKGROUNDS ================= */
/* ===================================================== */

.home-bg,
.sobre-bg,
.premios-bg,
.contato-bg{
  background-position:center right;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
}

.home-bg{ background-image:url('../img/hero-ballet.jpg'); }
.sobre-bg{ background-image:url('../img/sobre-ballet.jpg'); }
.premios-bg{ background-image:url('../img/premios-trofeu.jpg'); }
.contato-bg{
  background-image:url('../img/contato-ballet.jpg');
  background-position:center;
}

/* ======================= OVERLAY ===================== */

.home-bg::after,
.sobre-bg::after,
.premios-bg::after,
.contato-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.home-bg::after{
  background:linear-gradient(to right, rgba(0,0,0,.92), rgba(0,0,0,.25));
}
.sobre-bg::after{
  background:linear-gradient(to right, rgba(0,0,0,.95), rgba(0,0,0,.25));
}
.premios-bg::after{
  background:linear-gradient(to right, rgba(110,68,68,.80), rgba(110,68,68,.30));
}
.contato-bg::after{
  background:linear-gradient(to right, rgba(0,0,0,.85), rgba(0,0,0,.30));
}

/* ===================================================== */
/* ===================== SOBRE ========================= */
/* ===================================================== */

.sobre-content{ max-width:650px; }
.sobre-content p{ opacity:.9; }

/* ===================================================== */
/* ===================== PRÊMIOS ======================= */
/* ===================================================== */

.premios-content{ max-width:720px; }

.premio-bloco{
  margin-top:10px;
  padding:18px;
  border-radius:10px;
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}

.premio-bloco h3{
  font-size:13px;
  letter-spacing:1.5px;
  font-weight:600;
  margin:12px 0;
}

.premios-lista{
  list-style:none;
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
}

.premios-lista li{
  font-size:13px;
  line-height:1.6;
}

/* ===================================================== */
/* ===================== CONTATO ======================= */
/* ===================================================== */

.contato-content{ max-width:560px; }
.contato-content h1{ font-size:34px; }

.contato-lista{
  list-style:none;
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
}

.contato-lista li{
  display:flex;
  gap:12px;
  align-items:center;
}

.contato-lista a{
  font-size:14px;
}
.contato-lista a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ===================================================== */
/* ================== WHATSAPP FLOAT =================== */
/* ===================================================== */

.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;

  background:#25D366;
  box-shadow:0 10px 25px rgba(0,0,0,.35);

  opacity:1;
  transform:translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}

/* animação quando JS ativo */
html.js .whatsapp-float{
  opacity:0;
  transform:translateY(20px);
}
html.js .whatsapp-float.show{
  opacity:1;
  transform:translateY(0);
}

.whatsapp-float:hover{ transform:translateY(-3px); }
.whatsapp-float img{ width:28px; height:28px; }

/* ===================================================== */
/* ===================== SEO FOOTER ==================== */
/* ===================================================== */
/* Coloque o <footer class="seo-footer"> apenas no index.html */

.seo-footer{
  position:absolute;
  left:0;
  bottom:10px;
  width:100%;
  text-align:center;
  z-index:3;            /* acima do overlay */
  pointer-events:none;  /* não atrapalha cliques */
}

.seo-footer p{
  font-size:10px;
  letter-spacing:1px;
  opacity:0.01; /* 1% conforme você pediu */
  margin:0;
}

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

@media (max-width: 900px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
    padding:25px 0;
  }

  /* no tablet: menu fica alinhado à esquerda, sem “pular” */
  nav{
    width:100%;
    justify-content:flex-start;
  }
  nav ul{
    margin-left:0;
    justify-content:flex-start;
    gap:16px;
  }
}

/* ✅ MOBILE CENTRALIZADO (logo + menu) */
@media (max-width: 768px){

  /* hero volta pro centro no mobile */
  .hero{
    align-items:center;
    padding:120px 0 60px;
  }
  .home-content{
    transform:none;
    text-align:center;
  }

  .header-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    padding:18px 0;
  }

  nav{
    width:100%;
    justify-content:center;
  }

  nav ul{
    margin-left:0;
    justify-content:center;
    gap:10px 16px;
    max-width:320px;
  }

  nav ul li a{
    font-size:10px;
    letter-spacing:1px;
    padding:6px 4px;
  }

  h1{
    font-size:26px;
    letter-spacing:3px;
    margin-bottom:14px;
  }
  p{ font-size:14px; }

  .hero-buttons{ justify-content:center; }

  /* overlay simplificado no mobile */
  .home-bg::after,
  .sobre-bg::after,
  .premios-bg::after,
  .contato-bg::after{
    background: rgba(0,0,0,.78);
  }

  .premio-bloco{ padding:14px; }

  .contato-content h1{
    font-size:26px;
    letter-spacing:3px;
  }

  .whatsapp-float{
    right:14px;
    bottom:14px;
    width:52px;
    height:52px;
  }
  .whatsapp-float img{ width:26px; height:26px; }

  /* SEO footer: mantém no rodapé e central */
  .seo-footer{
    bottom:8px;
  }
  .seo-footer p{
    font-size:9px;
  }
}

@media (max-width: 480px){
  h1{ font-size:24px; letter-spacing:2.5px; }

  nav ul{
    max-width:280px;
    gap:8px 12px;
  }

  nav ul li a{
    font-size:9.5px;
    letter-spacing:.8px;
  }

  .contato-lista li{ align-items:flex-start; }
}