@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --c-dark:#31393C;     /* cor principal */
  --c-accent:#CE5B8D;   /* secundária */
}



/* Layout base */
body{
  font-family: 'Poppins', sans-serif;
  margin:0;
  color:var(--c-dark);
}
img{max-width:100%;height:auto;display:block}

/* Header branco */
.site-header{
  padding: 14px 20px;   /* padding maior */
  background:#fff;
  border-bottom:1px solid #e9edf0;
  position:sticky; top:0; z-index:20;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
}
.brand img{height:44px}

/* Navegação desktop */
/* NAV padrão */
.main-nav ul{
  list-style:none; display:flex; align-items:center; gap:18px;
  margin:0; padding:0;
}
.main-nav a{
  color:var(--c-dark); font-weight:600; text-decoration:none; opacity:.9;
  transition:color .2s ease, opacity .2s ease;
}
.main-nav a:hover{ color:var(--c-accent); opacity:1; }


/* divisor vertical antes do CTA (desktop) */
.nav-divider{
  width:1px; height:22px; background:#e6e9ec; margin:0 4px;
}

/* CTA WhatsApp destacado em rosa */
.cta{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; white-space:nowrap; text-decoration:none;
}
.cta--wa{
  background:var(--c-accent); color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 6px 18px rgba(206,91,141,.25);
  transition:transform .2s ease, filter .2s ease;
}

#WPP{
    color: #fff;
}
.cta--wa:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cta--wa .wa{display:inline-block}

/* RESPONSIVO (mesmo esquema do seu header) */
@media (max-width:860px){
  .main-nav{
    position:absolute; left:0; right:0; top:64px; background:#fff;
    border-bottom:1px solid #e9edf0; display:none;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; align-items:stretch; gap:0}
  .main-nav li{border-top:1px solid #eef1f3}
  .main-nav a{display:block; padding:14px 16px}
  .nav-divider{display:none}
  .cta--wa{ margin:10px 16px }
}

/* opcional: link ativo suave */
.main-nav a.is-active{ color:var(--c-accent); }


/* Botão hambúrguer */
.nav-toggle{
  display:none; 
  position:relative;
  width:42px; height:42px;   /* ajustei a altura p/ combinar com novo padding */
  border:0; background:transparent; cursor:pointer;
}
.nav-toggle .line{
  position:absolute; left:8px; right:8px; height:2px; background:var(--c-dark);
  transition:transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.nav-toggle .line:nth-child(1){ top:12px; }
.nav-toggle .line:nth-child(2){ top:20px; }
.nav-toggle .line:nth-child(3){ top:28px; }

/* Estado ABERTO -> vira X */
.nav-toggle.open .line:nth-child(1){ transform:rotate(45deg); top:20px; }
.nav-toggle.open .line:nth-child(2){ opacity:0; }
.nav-toggle.open .line:nth-child(3){ transform:rotate(-45deg); top:20px; }

/* Responsivo */
@media (max-width:860px){
  .nav-toggle{display:block}
  .main-nav{
    position:absolute; left:0; right:0; top:64px; background:#fff;
    border-bottom:1px solid #e9edf0;
    display:none;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column}
  .main-nav li{border-top:1px solid #eef1f3}
  .main-nav a{display:block; padding:14px 16px}
}


























/* Hero */
/* Hero */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url('img/hero/h1_hero.jpg') center/cover no-repeat;
  color: #fff;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(49, 57, 60, 0.5); /* leve filtro escuro */
  backdrop-filter: blur(2px);         /* leve desfoque */
}
.hero-content {
  position: relative;
  max-width: 800px;
  padding: 20px;
  z-index: 1;
}
.hero-content h1 {
  font-size: 2.8rem;
  margin-bottom: 16px;
  color: var(--c-dark);
}
.hero-content h1 span {
  color: var(--c-accent); /* destaca Nova Odessa */
}
.hero-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 28px;
  color: #fff;
}
.hero-content .btn {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background .3s ease;
}
.hero-content .btn:hover {
  background: #b44773;
}

/* Responsivo */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 2rem; }
  .hero-content p { font-size: 1rem; }
}


























/* ===== Galeria estilo Instagram ===== */
.galeria {
  padding: 70px 20px;
  background: #fff;
}

.galeria .section-title {
  text-align: center;
  margin-bottom: 28px;
  color: var(--c-dark);
}

.galeria-grid {
  display: grid;
  gap: 6px; /* espaçamento pequeno como no Instagram */
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 colunas */
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1 / 1.25; /* um pouco mais alto que o quadrado */
  background: #eee;
}

.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.gal-item:hover img {
  transform: scale(1.05);
}

/* Tablet */
@media (min-width: 640px) {
  .galeria-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .galeria-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
















/* ===== Seção combinada: Sobre + Oferecemos ===== */
.sobre-oferecemos{
  background:#f4f5f7;          /* cinza suave para quebrar a página */
  padding:90px 20px;
}

.sobre-oferecemos .intro{
  max-width:900px;
  margin:0 auto 36px;          /* centraliza e dá respiro antes dos cards */
  text-align:center;
}
.sobre-oferecemos .eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:13px;
  color:#99BA61;               /* secundária 1 */
  margin-bottom:10px;
}
.sobre-oferecemos h2{
  font-size:clamp(26px,4.2vw,36px);
  line-height:1.15;
  color:var(--c-dark);
  margin:0 0 12px;
}
.sobre-oferecemos h2 span{ color:var(--c-accent); }  /* rosa destaque */
.sobre-oferecemos .lead{
  font-size:1.06rem;
  color:#4b5256;
  margin-bottom:18px;
}

/* Lista com checks */
.sobre-oferecemos .checks{
  list-style:none; padding:0; margin:12px auto 22px;
  display:grid; gap:10px; max-width:720px;
}
.sobre-oferecemos .checks li{
  display:flex; align-items:flex-start; gap:10px;
  color:#2d3437; justify-content:center;
}
.sobre-oferecemos .checks svg{ color:var(--c-accent); flex:0 0 18px; margin-top:2px }

/* CTA */
.sobre-oferecemos .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.sobre-oferecemos .btn{
  display:inline-block; background:var(--c-accent); color:#fff;
  padding:12px 20px; border-radius:10px; font-weight:700; text-decoration:none;
  transition:background .25s ease;
}
.sobre-oferecemos .btn:hover{ background:#b44773; }
.sobre-oferecemos .note{ color:#6b7276; font-size:.95rem }

/* Cards de serviços */
.oferecemos-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.servico{
  background:#fff; border-radius:12px; padding:24px 20px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  text-align:center; transition:transform .3s ease;
}
.servico:hover{ transform:translateY(-6px) }
.servico i{
  font-size:2.2rem; color:var(--c-accent); margin-bottom:12px;
}
.servico h3{
  font-size:1.2rem; margin:8px 0 8px; color:var(--c-dark);
}
.servico p{
  font-size:.95rem; color:#555; line-height:1.5;
}

/* Responsivo extra */
@media (max-width:640px){
  .sobre-oferecemos .checks{ text-align:left; padding:0 10px }
}
















/* ===== SOBRE NÓS ===== */
.sobre-nos {
  background:#31393C;       /* fundo escuro */
  color:#fff;
  padding:90px 20px;
}

/* Eyebrow (título pequeno acima) */
.sobre-nos .eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:13px;
  color:#99BA61;            /* verde secundário */
  margin:0 auto 8px;
  max-width:900px;
  text-align:center;
}

/* Título */
.sobre-nos h2{
  font-size:clamp(26px,4.2vw,36px);
  line-height:1.15;
  color:#fff;
  margin:0 auto 12px;
  max-width:900px;
  text-align:center;
}
.sobre-nos h2 span{ color:var(--c-accent); }  /* rosa */

/* Lead (parágrafo de destaque) */
.sobre-nos .lead{
  font-size:1.06rem;
  color:#e0e0e0;
  margin:0 auto 28px;
  max-width:900px;
  text-align:center;
}

/* Grid de colunas */
.sobre-nos .cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}
.sobre-nos .col h3{
  font-size:1.2rem;
  color:#fff;
  margin:6px 0 10px;
}
.sobre-nos .col p{
  color:#e0e0e0;
  margin-bottom:12px;
}

/* Lista com checks */
.sobre-nos .checks{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:8px;
}
.sobre-nos .checks li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#eaeaea;
}
.sobre-nos .checks svg{
  color:var(--c-accent);
  flex:0 0 18px;
  margin-top:2px;
}

/* Passos numerados */
.sobre-nos .steps{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:10px;
}
.sobre-nos .steps li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#eaeaea;
}
.sobre-nos .steps span{
  width:26px;
  height:26px;
  border-radius:8px;
  background:var(--c-accent);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.95rem;
}

/* Botão CTA */
.sobre-nos .cta-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}
.sobre-nos .btn{
  display:inline-block;
  background:var(--c-accent);
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:background .25s ease;
}
.sobre-nos .btn:hover{ background:#b44773; }
.sobre-nos .note{
  color:#c9c9c9;
  font-size:.95rem;
}

/* Estatísticas */
.sobre-nos .stats{
  margin:34px auto 0;
  max-width:900px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  text-align:center;
}
.sobre-nos .stat{
  background:#3f474a;
  border-radius:12px;
  padding:18px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.sobre-nos .stat strong{
  display:block;
  font-size:1.6rem;
  color:var(--c-accent);
  line-height:1;
}
.sobre-nos .stat span{
  color:#e0e0e0;
  font-size:.95rem;
}

/* Responsivo */
@media (max-width:860px){
  .sobre-nos .cols{ grid-template-columns:1fr }
  .sobre-nos .stats{ grid-template-columns:1fr 1fr }
}
@media (max-width:520px){
  .sobre-nos .stats{ grid-template-columns:1fr }
}


























/* Porque escolher */
.porque {
  padding:80px 20px;
  background:#fff;
  text-align:center;
}
.porque h2 {
  font-size:2rem;
  margin-bottom:40px;
  color:var(--c-dark);
}
.porque h2 span {
  color:var(--c-accent);
}
.porque-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}
.porque .item {
  padding:20px;
  border-radius:12px;
  background:#f9fafa;
  box-shadow:0 4px 14px rgba(0,0,0,0.05);
  transition:transform .3s ease;
}
.porque .item:hover {
  transform:translateY(-6px);
}
.porque i {
  font-size:2.4rem;
  color:var(--c-accent);
  margin-bottom:12px;
}
.porque h3 {
  font-size:1.2rem;
  margin-bottom:10px;
  color:var(--c-dark);
}
.porque p {
  font-size:0.95rem;
  line-height:1.5;
  color:var(--c-dark);
}

/* Botão base */
.porque .btn {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background .3s ease;
}
.porque .btn:hover {
  background: #b44773;
}

#wpp-porque{
  color: #fff;
}























/* Planos */
.planos {
  padding: 80px 20px;
  background: #f9fafa;
  text-align: center;
}
.planos h2 {
  font-size: 2rem;
  margin-bottom: 50px;
  color: var(--c-dark);
}
.planos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}
.plano {
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform .3s ease;
}
.plano:hover {
  transform: translateY(-6px);
}
.plano h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: var(--c-dark);
}
.preco {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 20px;
}
.preco span {
  font-size: 1rem;
  color: #666;
}
.plano ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.plano ul li {
  margin: 8px 0;
  color: #555;
}
.plano .btn {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.plano .btn:hover {
  background: #b44773;
}
.destaque {
  border: 2px solid var(--c-accent);
  transform: scale(1.05);
}






























/* Depoimentos */
.depoimentos {
  padding: 80px 20px;
  background: #f9fafa;
  text-align: center;
}
.depoimentos .section-title {
  font-size: 2rem;
  margin-bottom: 50px;
  color: var(--c-dark);
}
.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.depoimento {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform .3s ease;
}
.depoimento:hover {
  transform: translateY(-6px);
}
.depoimento .texto {
  font-style: italic;
  color: #555;
  margin-bottom: 16px;
}
.depoimento h4 {
  color: var(--c-accent);
  font-weight: 600;
}














.site-footer{
  background: var(--c-dark);
  color:#dfe4e7;
  margin-top:40px;
  position: relative;
  overflow: hidden;
}
.site-footer::before{
  /* leve faixa decorativa no topo do footer */
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg, var(--c-accent), #99BA61);
  opacity:.9;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr 1fr;
  gap:32px;
  padding:32px 0;
}
.footer-logo img{height:44px}

.ft-col h4{
  color:#fff; margin:10px 0 14px; font-size:18px;
}
.ft-list, .ft-links{
  list-style:none; margin:0; padding:0;
}
.ft-list li{
  display:flex; gap:10px; align-items:flex-start;
  margin:10px 0; color:#cdd3d7;
}
.ft-ic{display:inline-flex; width:22px; height:22px; color:#cdd3d7; margin-top:2px}

.ft-links li{margin:8px 0}
.ft-links a{
  color:#cdd3d7; text-decoration:none; transition:color .2s ease;
}
.ft-links a:hover{ color:#fff; }

.ft-social{
  display:flex; gap:10px; margin-bottom:12px;
}
.ft-social a{
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
  color:#fff; transition:transform .25s ease, background .25s ease;
}
.ft-social a:hover{ transform: translateY(-4px); background: rgba(255,255,255,.14); }
.ft-social a.wa{ background: var(--c-accent); }
.ft-social a.wa:hover{ filter: brightness(1.05); }

.ft-cta{
  display:inline-block;
  margin-top:6px;
  background: var(--c-accent);
  color:#fff; padding:10px 14px; border-radius:10px;
  font-weight:700; text-decoration:none;
  transition: filter .25s ease;
}
.ft-cta:hover{ filter: brightness(1.05); }

.copy{
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center; font-size:14px; padding:12px 16px;
}

/* Responsivo */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 640px){
  .footer-grid{
    grid-template-columns:1fr;
  }
  .ft-col{ text-align:center; }
  .ft-list li{ justify-content:center; }
  .ft-social{ justify-content:center; }
}