/* === CSS AJUSTADO COM MENU FUNCIONAL NO DESKTOP E MOBILE === */

:root{
  --cor-amarelo: #ffcc00;
  --cor-preto: #000;
  --cor-vermelho: #cc0000;
  --bg-light: #f9f9f9;
  --fonte-principal: 'Poppins', sans-serif;
  --container-width: 1200px;
  --radius: 12px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.08);
  --header-height: 72px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--fonte-principal);
  color:var(--cor-preto);
  line-height:1.5;
  background:#fff;
}

.container{
  width:calc(100% - 30px);
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 15px;
}

/* HEADER */
.site-header{
  background:var(--cor-preto);
  color:var(--cor-amarelo);
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  position:relative;
}
.logo{
  color:var(--cor-amarelo);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.6px;
  font-size:1.1rem;
}

/* NAV PADRÃO */
.site-nav{
  display:flex;
  opacity:0;
  pointer-events:none;
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  height:calc(100vh - var(--header-height));
  background:var(--cor-preto);
  padding:20px;
  transform:translateY(-100%);
  transition:transform .3s ease, opacity .3s ease;
}
.site-nav.active{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.site-nav ul{
  list-style:none;
  display:flex;
  gap:18px;
  align-items:center;
  flex-direction:column;
}

.site-nav a{
  color:var(--cor-amarelo);
  font-weight:600;
  padding:12px 6px;
  text-decoration:none;
  transition:.2s;
}
.site-nav a:hover{
  opacity:.9;
  transform:translateY(-2px);
}

.cta-phone a{
  color:var(--cor-amarelo);
  font-weight:700;
  border:2px solid rgba(255,204,0,0.08);
  padding:6px 10px;
  border-radius:8px;
}

/* MENU MOBILE */
.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after{
  width:22px;
  height:2px;
  background:var(--cor-amarelo);
  display:block;
  border-radius:2px;
  position:relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}

/* HERO */
.hero{
  background-image:linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('img/banner.png');
  background-size:cover;
  background-position:center;
  padding:140px 0 80px;
  margin-top:72px;
  color:#fff;
  text-align:center;
  opacity:0;
  transform:translateY(20px);
  transition:.6s;
}
.hero.visible{opacity:1;transform:translateY(0);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.btn-primary{
  background:var(--cor-vermelho);
  color:#fff;
  box-shadow:var(--shadow-sm);
  text-decoration: none;
}

/* GRID & CARDS */
.grid{display:grid; gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  background:#fff;
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  opacity:0;
  transform:translateY(18px);
  transition:.6s;
}
.card.visible{opacity:1;transform:translateY(0);}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,0.08);
}

/* ==========================
   DEPOIMENTOS
========================== */
.depoimentos {
  padding: 70px 0;
  background: #ffcc00;
  text-align: center;
}

.slider {
  margin: 40px auto 0;     /* centraliza na página */
  max-width: 90%;          /* mantém responsivo */
  display: flex;
  gap: 75px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  justify-content: center; /* centraliza o conteúdo */
}
.slide {
  background: #fff;
  min-width: 300px;
  padding: 25px;
  border-radius: 10px;
  scroll-snap-align: center;
}

/* ==========================
   FORMULÁRIO REFORMULADO
   Layout amplo, espaçado e moderno
========================== */

#contato {
  padding: 90px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.novo-form {
  width: 100%;
  max-width: 800px; /* mais largo */
  margin: 0 auto;
  background: #ffffff;
  padding: 45px; /* mais espaço interno */
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  border: 2px solid rgba(255,204,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 28px; /* maior espaço entre campos */
}

/* GRUPOS DE CAMPOS */
.novo-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* LABELS MAIS FORTES */
.novo-form label {
  font-weight: 700;
  font-size: 1.05rem;
  color: #222;
}

/* CAMPOS MAIS LARGOS E ALTOS */
.novo-form input,
.novo-form textarea {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.1rem;
  border-radius: 12px;
  border: 2px solid #dcdcdc;
  background: #f4f4f4;
  transition: all .25s ease;
}

/* INTERAÇÃO DO FOCO */
.novo-form input:focus,
.novo-form textarea:focus {
  border-color: var(--cor-amarelo);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,204,0,0.25);
  outline: none;
}

/* TEXTAREA MAIOR */
.novo-form textarea {
  min-height: 170px;
  resize: vertical;
}

/* BOTÃO PROFISSIONAL */
.form-btn {
  width: 100%;
  padding: 18px;
  font-size: 1.3rem;
  font-weight: 800;
  background: var(--cor-vermelho);
  color: #fff;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: 0.25s ease;
}

.form-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

/* ==========================
   FOOTER PROFISSIONAL
========================== */
.site-footer {
  background:#000;
  color:#fff;
  padding:45px 0;
  margin-top:60px;
  border-top:4px solid var(--cor-amarelo);
}

.footer-inner {
  max-width:1200px;
  width:90%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
}

.site-footer a {
  color:var(--cor-amarelo);
  font-weight:600;
  text-decoration:none;
}

.socials {
  list-style:none;
  display:flex;
  gap:15px;
}

/* ==========================
   RESPONSIVIDADE
========================== */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:700px){
  .site-nav ul{flex-direction:column}
  .menu-toggle{display:block}
  .cta-phone{display:none}
  .grid-4{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center}
}

/* DESKTOP FIX */
@media (min-width:701px){
  .site-nav{
    position:static;
    opacity:1;
    pointer-events:auto;
    transform:none;
    background:transparent;
    height:auto;
    padding:0;
  }
  .site-nav ul{flex-direction:row}
  .menu-toggle{display:none}
}
/* ==========================
   WHATSAPP FLUTUANTE
========================== */

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 70px;
  height: 70px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: 0.3s ease;
  animation: whatsappPulse 2s infinite ease-in-out;
}

.whatsapp-float img {
  width: 60%;
  height: 60%;
}

.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}

/* Animação de pulsação */
@keyframes whatsappPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.13); }
  100% { transform: scale(1); }
}
/* ==========================
   FOOTER PROFISSIONAL + ÍCONES
========================== */
.site-footer {
  background:#000;
  color:#fff;
  padding:45px 0;
  margin-top:60px;
  border-top:4px solid var(--cor-amarelo);
}

.footer-inner {
  max-width:1200px;
  width:90%;
  margin:0 auto;
  display:flex;
  justify-content:space-between; /* Mantém infos à esquerda e ícones à direita */
  align-items:center; /* CENTRALIZA verticalmente */
  gap:25px;
  flex-wrap:wrap;
}
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
  transition: 0.25s ease;
  text-decoration: none;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
/* ==========================
   ANIMAÇÃO DOS BOTÕES HERO
========================== */

.hero-ctas a {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.hero-ctas a.visible-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Hover elegante */
.hero-ctas .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}