/* ========================================
   RESET E VARIÁVEIS GLOBAIS
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --primary-color:#2563eb;
  --primary-dark:#1e40af;
  --secondary-color:#f59e0b;
  --text-dark:#1f2937;
  --text-light:#6b7280;
  --bg-light:#f9fafb;
  --bg-white:#ffffff;
  --border-color:#e5e7eb;
  --shadow:0 10px 25px rgba(0,0,0,.1);
  --shadow-sm:0 4px 6px rgba(0,0,0,.07);
  --transition:all .3s ease;
}

html{ scroll-behavior:smooth; max-width:100vw; overflow-x:hidden; }

body{
  font-family:'Roboto',sans-serif;
  color:var(--text-dark);
  background-color:var(--bg-white);
  line-height:1.6;
  padding-top:70px;
  max-width:100vw; overflow-x:hidden;
}

/* ========================================
   CONTAINER E LAYOUT
   ======================================== */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; width:100%; }
section{ padding:60px 20px; width:100%; max-width:100vw; overflow-x:hidden; }

.section-title{
  font-family:'Poppins',sans-serif;
  font-size:40px; font-weight:700; text-align:center;
  margin-bottom:42px; color:var(--text-dark);
}

/* ========================================
   HEADER E NAVEGAÇÃO
   ======================================== */
.header{
  background-color:var(--bg-white);
  box-shadow:var(--shadow-sm);
  position:fixed; top:0; left:0; right:0; z-index:1000; width:100%;
}

.header-content{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; height:60px; flex-wrap:wrap;
}

.logo h1{
  font-family:'Poppins',sans-serif; font-size:20px; font-weight:700;
  color:var(--primary-color); white-space:nowrap;
}

.nav{ display:flex; gap:20px; align-items:center; }

.nav-link{
  text-decoration:none; color:var(--text-dark); font-weight:500;
  transition:var(--transition); position:relative; font-size:14px; white-space:nowrap;
}
.nav-link:hover{ color:var(--primary-color); }
.nav-link::after{
  content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px;
  background-color:var(--primary-color); transition:var(--transition);
}
.nav-link:hover::after{ width:100%; }

/* ========================================
   BOTÕES
   ======================================== */
.btn{
  display:inline-block; padding:12px 30px; border:none; border-radius:6px;
  font-size:16px; font-weight:600; cursor:pointer; text-decoration:none;
  transition:var(--transition); text-align:center;
}
.btn-primary{ background-color:var(--primary-color); color:#fff; }
.btn-primary:hover{ background-color:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-large{ padding:14px 34px; font-size:17px; }

/* ========================================
   HERO
   ======================================== */
.hero{
  background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);
  color:#fff; padding:110px 20px; text-align:center; position:relative; overflow:hidden;
  min-height:520px; display:flex; align-items:center; justify-content:center;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content{ position:relative; z-index:2; max-width:800px; width:100%; padding:0 15px; }
.hero-title{ font-family:'Poppins',sans-serif; font-size:44px; font-weight:700; margin-bottom:18px; line-height:1.2; }
.hero-subtitle{ font-size:19px; margin-bottom:34px; opacity:.95; }

/* ========================================
   SOBRE
   ======================================== */
.about{ background-color:var(--bg-light); }
.about-content{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.about-text h3{ font-family:'Poppins',sans-serif; font-size:26px; margin-bottom:16px; color:var(--primary-color); }
.about-text p{ margin-bottom:12px; color:var(--text-light); line-height:1.8; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.stat{ text-align:center; padding:18px; background:#fff; border-radius:8px; box-shadow:var(--shadow-sm); }
.stat h4{ font-family:'Poppins',sans-serif; font-size:30px; color:var(--primary-color); margin-bottom:8px; }
.stat p{ color:var(--text-light); }
.about-values{ display:grid; grid-template-columns:1fr; gap:16px; }
.value-card{ background:#fff; padding:22px; border-radius:8px; box-shadow:var(--shadow-sm); border-left:4px solid var(--primary-color); transition:var(--transition); }
.value-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.value-card h4{ font-family:'Poppins',sans-serif; font-size:18px; margin-bottom:8px; color:var(--primary-color); }
.value-card p{ color:var(--text-light); }

/* ========================================
   SERVIÇOS
   ======================================== */
.services{ background:#fff; }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.service-card{ background:var(--bg-light); padding:26px; border-radius:8px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.service-icon{ font-size:44px; margin-bottom:12px; }
.service-card h3{ font-family:'Poppins',sans-serif; font-size:21px; margin-bottom:12px; color:var(--text-dark); }
.service-card p{ color:var(--text-light); margin-bottom:16px; line-height:1.8; }
.service-list{ list-style:none; }
.service-list li{ padding:7px 0 7px 24px; position:relative; color:var(--text-light); }
.service-list li::before{ content:'✓'; position:absolute; left:0; color:var(--primary-color); font-weight:700; }

/* ========================================
   PORTFÓLIO
   ======================================== */
.portfolio{ background:var(--bg-light); }
.portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.portfolio-item{ position:relative; overflow:hidden; border-radius:8px; height:240px; cursor:pointer; }
.portfolio-item img{ width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.portfolio-item:hover img{ transform:scale(1.08); }
.portfolio-overlay{
  position:absolute; inset:0; background:rgba(37,99,235,.9);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  color:#fff; text-align:center; opacity:0; transition:var(--transition); padding:18px;
}
.portfolio-item:hover .portfolio-overlay{ opacity:1; }
.portfolio-overlay h4{ font-family:'Poppins',sans-serif; font-size:19px; margin-bottom:8px; }
.portfolio-overlay p{ font-size:13.5px; }

/* ========================================
   DEPOIMENTOS
   ======================================== */
.testimonials{ background:#fff; }
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.testimonial-card{ background:var(--bg-light); padding:26px; border-radius:8px; box-shadow:var(--shadow-sm); border-top:4px solid var(--secondary-color); }
.stars{ color:var(--secondary-color); font-size:18px; margin-bottom:12px; }
.testimonial-card p{ color:var(--text-light); margin-bottom:16px; line-height:1.8; font-style:italic; }
.testimonial-card h4{ font-family:'Poppins',sans-serif; color:var(--text-dark); margin-bottom:4px; }
.testimonial-role{ font-size:14px; color:var(--primary-color); font-style:normal; }

/* ========================================
   FAQ
   ======================================== */
.faq{ background:var(--bg-light); }
.faq-content{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
.faq-item{ background:#fff; padding:22px; border-radius:8px; box-shadow:var(--shadow-sm); }
.faq-item h4{ font-family:'Poppins',sans-serif; color:var(--primary-color); margin-bottom:12px; font-size:18px; }
.faq-item p{ color:var(--text-light); line-height:1.8; }

/* ========================================
   CONTATO / ORÇAMENTO
   ======================================== */
.contact{ background:#fff; }
.contact-content{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

.contact-info h3{ font-family:'Poppins',sans-serif; font-size:24px; margin-bottom:24px; color:var(--text-dark); }
.info-item{ margin-bottom:22px; }
.info-item h4{ color:var(--primary-color); margin-bottom:8px; font-size:16px; }
.info-item p{ color:var(--text-light); }
.info-item a{ color:var(--primary-color); text-decoration:none; font-weight:600; transition:var(--transition); }
.info-item a:hover{ text-decoration:underline; }
.social-links{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; background:var(--primary-color); color:#fff; border-radius:50%;
  text-decoration:none; transition:var(--transition); font-size:16px; font-weight:700;
}
.social-link:hover{ background:var(--primary-dark); transform:translateY(-3px); box-shadow:0 4px 12px rgba(37,99,235,.3); }

/* ========================================
   FORMULÁRIO DE CONTATO (compacto)
   ======================================== */
#orcamento{ padding:44px 20px; }                 /* seção mais compacta */
#orcamento .section-title{ margin-bottom:22px; }

.contact-form{
  background:var(--bg-light); padding:22px; border-radius:8px; box-shadow:var(--shadow-sm);
}
.contact-form h3{ margin-bottom:12px; }

.form-message{
  display:none; margin-bottom:10px; padding:10px 12px; border-radius:6px; font-weight:500; font-size:14px;
}
.form-message.success{ display:block; background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.form-message.error{ display:block; background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }

.form-group{ margin-bottom:12px; position:relative; }
.form-group label{ display:block; margin-bottom:6px; color:var(--text-dark); font-weight:600; font-size:14px; }
.form-group input,
.form-group select,
.form-group textarea{
  width:100%; padding:10px 12px; border:2px solid var(--border-color); border-radius:6px;
  font-family:'Roboto',sans-serif; font-size:15px; transition:var(--transition);
}
.form-group textarea{ min-height:110px; resize:vertical; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error{
  border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1);
}

.contact-form .btn{ width:100%; padding:12px 18px; margin-top:6px; }
.contact-form .btn:disabled{ opacity:.6; cursor:not-allowed; }
.form-note{ text-align:center; color:var(--text-light); font-size:14px; margin-top:10px; }

/* ========================================
   FOOTER
   ======================================== */
.footer{ background:var(--text-dark); color:#fff; padding:44px 20px 20px; }
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:36px; margin-bottom:26px; }
.footer-section h4{ font-family:'Poppins',sans-serif; margin-bottom:12px; }
.footer-section p{ color:rgba(255,255,255,.75); line-height:1.8; }
.footer-section ul{ list-style:none; }
.footer-section ul li{ margin-bottom:8px; }
.footer-section a{ color:rgba(255,255,255,.75); text-decoration:none; transition:var(--transition); }
.footer-section a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:18px; text-align:center; color:rgba(255,255,255,.65); }

/* ========================================
   BOTÃO FLUTUANTE WHATSAPP (PNG, sem fundo)
   ======================================== */
.whatsapp-btn{
  position:fixed; right:20px; bottom:20px;
  width:60px; height:60px;
  background:transparent !important;      /* sem círculo/fundo */
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; z-index:9999;
  transition:transform .3s ease, filter .3s ease;
  cursor:pointer;
  box-shadow:none !important; outline:none !important;
  animation:pulse 2s infinite ease-in-out; /* pulso sutil */
}

/* Variação explícita “sem fundo” (reforça reset visual) */
.whatsapp-btn.no-bg{
  background-color:transparent !important;
  background:none !important;
  box-shadow:none !important;
  border:none !important;
}

/* Ícone via PNG (ajuste o caminho se necessário) */
.whatsapp-btn::before{
  content:''; display:block; width:100%; height:100%;
  background-image:url('/imagens/whatsapp.png');   /* confirme o arquivo em /public_html/imagens/ */
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));          /* halo p/ legibilidade */
}

.whatsapp-btn:hover{
  transform:scale(1.1) translateY(-2px);
  filter:brightness(1.08);
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%     { transform:scale(1.05); }
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */
@media (max-width:1024px){
  .container{ padding:0 16px; }
  .hero{ padding:96px 20px; min-height:480px; }
  .hero-title{ font-size:38px; }
  .hero-subtitle{ font-size:18px; }
  .about-content{ grid-template-columns:1fr; gap:30px; }
  .contact-content{ grid-template-columns:1fr; gap:24px; }
}

@media (max-width:768px){
  body{ padding-top:60px; }
  .nav{ display:none; } /* esconde nav desktop no mobile */
  .header-content .btn{ padding:8px 16px; font-size:14px; }
  .logo h1{ font-size:16px; }

  .hero{ padding:80px 20px; min-height:440px; }
  .hero-title{ font-size:32px; }
  .hero-subtitle{ font-size:16px; margin-bottom:28px; }
  .btn-large{ padding:12px 26px; font-size:16px; }

  section{ padding:48px 15px; }
  .section-title{ font-size:32px; margin-bottom:32px; }

  .about-stats{ grid-template-columns:1fr; gap:14px; }
  .services-grid, .portfolio-grid, .testimonials-grid, .faq-content{ grid-template-columns:1fr; gap:20px; }
  .service-card, .testimonial-card, .faq-item{ padding:20px; }
  .contact-form{ padding:20px; }
  .footer-content{ grid-template-columns:1fr; gap:28px; }

  .whatsapp-btn{
    width:50px; height:50px; right:15px; bottom:15px;
  }
  .whatsapp-btn::before{ width:100%; height:100%; }
}

@media (max-width:480px){
  .logo h1{ font-size:14px; }
  .header-content .btn{ padding:6px 12px; font-size:12px; }

  .hero{ padding:60px 15px; min-height:400px; }
  .hero-title{ font-size:26px; margin-bottom:14px; }
  .hero-subtitle{ font-size:14px; margin-bottom:24px; }
  .btn-large{ padding:10px 22px; font-size:14px; }

  section{ padding:40px 15px; }
  .section-title{ font-size:26px; margin-bottom:28px; }

  .portfolio-item{ height:200px; }

  .whatsapp-btn{ width:48px; height:48px; right:12px; bottom:12px; }
}

@media (max-width:360px){
  .logo h1{ font-size:13px; }
  .hero-title{ font-size:22px; }
  .section-title{ font-size:22px; }
}
/* ====== PÁGINAS INSTITUCIONAIS (Privacidade, Termos, Cookies) ====== */
.legal { 
  padding-top: 80px;                /* espaço por causa do header fixo */
  background: var(--bg-light);
}
.legal .container { 
  max-width: 900px; 
}

.legal .section-title {
  font-size: 28px;
  margin-bottom: 18px;
}

.legal .updated {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 22px;
}

.legal .toc {                        /* índice/âncoras opcional */
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 22px 0;
}
.legal .toc h4 {
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--text-dark);
}
.legal .toc ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: grid; 
  gap: 6px;
}
.legal .toc a { 
  color: var(--primary-color); 
  text-decoration: none; 
}
.legal .toc a:hover { 
  text-decoration: underline; 
}

.legal .card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.legal h2, .legal h3, .legal h4 {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  margin: 16px 0 10px;
}
.legal h2 { font-size: 22px; }
.legal h3 { font-size: 18px; }
.legal h4 { font-size: 16px; }

.legal p { 
  color: var(--text-light);
  line-height: 1.8; 
  margin-bottom: 12px; 
}
.legal ul { 
  padding-left: 18px; 
  margin: 8px 0 14px; 
}
.legal li { 
  margin: 6px 0; 
  color: var(--text-light); 
}

.legal a { color: var(--primary-color); }
.legal a:hover { text-decoration: underline; }

/* compensar header fixo ao clicar em âncoras (#) */
[id]::before { 
  content: ""; 
  display: block; 
  height: 70px;    /* altura do header */
  margin-top: -70px; 
  visibility: hidden; 
}

/* mobile */
@media (max-width: 768px) {
  .legal { padding-top: 70px; }
  .legal .container { padding: 0 16px; }
}