/* reset básico */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:transparent;color:rgb(255, 255, 255)}

/* header */
header{
  background:#a07855ff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  gap:10px;
  box-shadow:0 2px 2px #ffffff;
}
.logo{width:160px;height:auto}

/* nav */
nav{display:flex;align-items:center;gap:12px}
nav a{margin:0 10px;text-decoration:none;color:#fff;font-weight:500;font-size:15px}



/* hero */
.hero{
  background:url('imagem/naca.jpeg') center/cover no-repeat;
  min-height:60vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;position:relative;color:#fff;padding:40px 20px;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero-content{position:relative;z-index:1}
.hero h1{font-size:4rem;margin-bottom:15px;line-height:1}
.hero p{font-size:1.1rem;margin-bottom:25px}

/* botões */
.btn{background:#a07855ff;color:#fff;border:none;padding:12px 26px;border-radius:5px;cursor:pointer}
.btn:hover{opacity:.95}

/* seções */
section{padding:60px 10%;text-align:center}



/* cor específica para o título */
.sobre h2 {
  color: #ffffff; /* rosa elegante, mude conforme seu tema */
  font-size: 2rem;
  margin-bottom: 15px;
}

/* cor específica para o parágrafo */
.sobre p {
  color: #ffffff; /* cinza escuro fácil de ler */
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}


/* cards */
.servicos{background:transparent}
.servicos-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}
.card{background:#a07855ff;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,.1);width:280px;padding:20px;text-align:center;transition:transform .25s}
.card:hover{transform:translateY(-5px)}
.card img{width:100%;border-radius:15px;margin-bottom:15px}

/* footer */
footer{background:#a07855ff;color:#fff;text-align:center;padding:20px;font-size:.9rem}
footer a{color:#fff;text-decoration:underline}

/* RESPONSIVE - combina e elimina duplicatas */
@media (max-width:1024px){
  .logo{width:140px}
  .hero h1{font-size:3.2rem}
  .btn{padding:10px 18px;font-size:.95rem}
  .card{width:100%;max-width:320px}
  section{padding:40px 6%}
}

@media (max-width:768px){
  /* mantem menu ao lado, reduz espaçamentos e fontes */
  header{padding:10px 15px;justify-content:space-between}
  .logo{width:120px}
  nav a{font-size:14px;margin:0 6px}
  .hero{min-height:50vh;padding:30px 15px}
  .hero h1{font-size:2.4rem}
  .hero p{font-size:1rem}
  .card{max-width:260px}
}

@media (max-width:480px){
  header{padding:8px 10px}
  .logo{width:100px}
  nav a{font-size:13px;margin:0 4px}
  .hero h1{font-size:1.8rem}
  .hero{padding:20px 10px}
  section{padding:30px 5%}
}


.menu-icon {
  display: none; /* ícone escondido no desktop */
  font-size: 28px;
  color: white;
  cursor: pointer;
  padding: 6px;
}

/* menu padrão desktop */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 1001;
}


/* links */
.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 6px 8px;
  font-weight: 500;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
  .menu-icon {
    display: block;
    z-index: 1002;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 15px;
    flex-direction: column;
    background-color: #c1a672;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 1001;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu a {
    margin: 8px 0;
    font-size: 16px;
  }
}

/* ======== SEÇÃO CURSOS ======== */
.cursos-section {
  padding: 20px 10px;
  background:transparent; /* fundo transparente */
}

.cursos-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
}

.cursos-section p {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
  word-wrap: break-word;
}



/* Grade de cursos */

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* ======== SEÇÃO FEEDBACKS ======== */
.feedbacks {
  margin-top: 0px;
}

.feedbacks h3 {
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 15px;
}

/* ===== SEÇÃO AGENDAMENTO ===== */
#agendamento {
  text-align: center;
  padding: 80px 20px;
  background:transparent; /* fundo transparente*/
  color: #ffffff; /* cor padrão do texto */
}

/* título da seção */
#agendamento h2 {
  color: #ffffff; /* rosa sofisticado — altere se quiser */
  font-size: 2rem;
  margin-bottom: 15px;
}

/* texto da seção */
#agendamento p {
  color: #ffffff; /* cinza escuro para leitura confortável */
  font-size: 1.1rem;
  margin-bottom: 25px;
}

/* botão de agendamento */
#agendamento .btn {
  background-color: #a07855ff; /* cor do botão */
  color: #fff; /* cor do texto do botão */
  font-size: 1.1rem;
  font-weight: bold;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* efeito ao passar o mouse */
#agendamento .btn:hover {
  background-color: #ffffff; /* tom mais escuro no hover */
  transform: scale(1.05);
}

/* responsividade */
@media (max-width: 768px) {
  #agendamento h2 {
    font-size: 1.6rem;
  }
  #agendamento p {
    font-size: 1rem;
  }
  #agendamento .btn {
    width: 80%;
    padding: 14px;
  }
}


/* === Estilos para o bloco de curso simples (imagem + botão WhatsApp) === */
.course-single .course-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.course-single .course-intro {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 1rem;
}

/* Card central com imagem */
.course-card {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  margin: 0 auto;
}

/* Imagem responsiva que preenche o card */
.course-image {
  display: block;
  width: 100%;
  height: auto;               /* mantém a proporção natural */
  object-fit: cover;          /* cobre toda a largura, cortando se necessário */
  object-position: center;
  max-height: none;           /* REMOVA o limite de altura */
}


  
/* Botão WhatsApp */
.btn-whatsapp {
  display: inline-block;
  margin: 18px auto 0;
  padding: 12px 22px;
  border-radius: 8px;
  background-color: #a07855ff;  /* cor padrão do WhatsApp */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transition: transform .14s ease, box-shadow .14s ease;
}

/* Efeito hover / focus */
.btn-whatsapp:hover,
.btn-whatsapp:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  outline: none;
}

/* Acessibilidade: foco visível */
.btn-whatsapp:focus {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.18);
}

/* Mobile tweaks */


/* Sr-only (se ainda não existir na sua base) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


.feedback-images {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 900px;
  margin: 0 auto;
}

.feedback-images img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.cinematic-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(25px);
  filter: blur(10px);
  transition: all 0.6s cubic-bezier(.22,.61,.36,1);
}

#ribbon-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


body > *:not(canvas) {
  position: relative;
  z-index: 2;
}

body {
  position: relative;
  z-index: 1;
}

header,
section,
footer,
.hero,
.hero *,
.servicos,
.sobre,
.cursos-section,
.course-single,
.feedbacks,
.curso-full {
  position: relative;
  z-index: 5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #c1a672;
  z-index: 0;
}

header {
  position: relative;
  z-index: 1000;
}

section,
.hero,
.card,
.course-card,
.feedback-images img {
  position: relative;
  z-index: 1;
}

/* === FORÇA O MENU MOBILE A FUNCIONAR === */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .nav-menu.active {
    display: flex;
  }
}