/* ============================================
   Fulltest — overrides sobre o tema Vektor
   ============================================ */

/* ---------- Animações de entrada sutis (aplicadas via JS) ---------- */
.fx{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--fx-delay, 0ms);
  will-change:opacity, transform;
}
.fx-in{opacity:1;transform:translateY(0)}
html.fx-off .fx{opacity:1 !important;transform:none !important;transition:none !important}
@media (prefers-reduced-motion: reduce){
  .fx{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---------- Paleta oficial Fulltest (sobrescreve o tema) ---------- */
:root{
  --primary-color:   #AD1C22 !important;  /* Vermelho Fulltest */
  --secondary-color: #AD1C22 !important;  /* Vermelho escuro (hover) */
  --secendary-color: #AAB5B8 !important;  /* Cinza claro (nota: 'secendary' é typo do tema) */
  --title-color:     #0D0D0D !important;  /* Preto quase puro */
  --dark-color:      #00101F !important;  /* Azul-marinho quase preto */
}

/* ---------- Hero: menor, conteúdo no topo ---------- */
.hero-area-wrapper .hero-slider{
  min-height:auto;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Hero com vídeo de fundo (autoplay, mudo, loop) */
.hero-area-wrapper .hero-with-video{
  position:relative;
  overflow:hidden;
  background:#0d0d0d;         /* fallback enquanto o vídeo não carrega */
  min-height:calc(100vh - 155px); /* preenche a 1ª dobra (descontando header) */
  display:flex;
  align-items:center;
}
.hero-area-wrapper .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;           /* preenche a área toda cortando quando necessário */
  z-index:0;
  pointer-events:none;
}
.hero-area-wrapper .hero-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.9) 30%,
      rgba(0,0,0,.65) 60%,
      rgba(0,0,0,.35) 100%),
    rgba(0,0,0,.2);
}
.hero-area-wrapper .hero-with-video > .container{
  position:relative;
  z-index:2;
}
/* Texto e botões da hero em branco (o fundo agora é escuro pelo overlay) */
.hero-area-wrapper .hero-with-video .hero-single .sub-title,
.hero-area-wrapper .hero-with-video .hero-single .title,
.hero-area-wrapper .hero-with-video .hero-single .text{
  color:#fff !important;
}
.hero-area-wrapper .hero-with-video .hero-single .sub-title{
  color:#fff !important;
  opacity:.85;
}
/* O :before do tema (degradê rosa) conflita com o vídeo — neutralizamos */
.hero-area-wrapper .hero-with-video::before,
.hero-area-wrapper .hero-with-video.hero-slider::before{
  display:none !important;
  background:none !important;
}
/* O tema tem .hero-single { padding: 155px 0 200px 0 } — reduzimos aqui */
.hero-area-wrapper .hero-single{
  padding:80px 0 120px 0 !important;
  margin-top:0;
}
.hero-area-wrapper .hero-single .text{
  margin-bottom:26px !important;
}
.hero-area-wrapper .hero-single .sub-title{
  margin-bottom:14px;
}
.hero-area-wrapper .hero-single .title{
  margin-bottom:18px;
  font-size:48px;
  line-height:1.1;
}
.hero-area-wrapper .hero-single .text{
  margin-bottom:26px;
}
.hero-area-wrapper .hero-single .hreo-btn{
  margin-top:0;
}

@media (max-width:991px){
  .hero-area-wrapper .hero-with-video{min-height:calc(100vh - 80px)}
  .hero-area-wrapper .hero-single{padding:60px 0 40px 0 !important}
  .hero-area-wrapper .hero-single .title{font-size:36px}
}
@media (max-width:576px){
  .hero-area-wrapper .hero-with-video{min-height:calc(100svh - 70px)}
  .hero-area-wrapper .hero-single{padding:44px 0 32px 0 !important}
  .hero-area-wrapper .hero-single .title{font-size:28px}
}

/* Barra vertical "Fale Conosco" — o bloco é rotacionado 90°, valores
   negativos empurram visualmente para a esquerda. Alinhado com o hambúrguer. */
.hero-area-wrapper .socials-links{
  left:-122px !important;
  bottom:52% !important;
}
/* Textos, ícones e traço em branco (agora sobre vídeo com overlay escuro) */
.hero-area-wrapper .socials-links ul li,
.hero-area-wrapper .socials-links ul .ulta,
.hero-area-wrapper .socials-links ul li a{
  color:#fff !important;
}
.hero-area-wrapper .socials-links ul li.dash{
  background:#fff !important;
}
@media (max-width:1400px){
  .hero-area-wrapper .socials-links{left:-127px !important}
}
@media (max-width:991px){
  .hero-area-wrapper .socials-links{left:-135px !important}
}

/* ---------- Botão "Solicitar orçamento" — mantém texto branco no hover ---------- */
.vektor_btn .get-btn:hover{
  color:#fff !important;
  background:var(--secondary-color) !important;
}

/* ---------- Logo menor + menu centralizado ---------- */
.header_menu .brands_logo .barnds img,
.brands_logo .barnds img{
  max-width:140px !important;
  min-width:0 !important;
  height:auto !important;
}
.header-two-main-wrapper{
  align-items:center;
}
/* Redistribui as colunas para o menu ficar centralizado no header inteiro */
.header-two-main-wrapper .logo_center{flex:0 0 auto !important;max-width:none !important;width:auto !important}
.header-two-main-wrapper .menu_center{
  flex:1 1 auto !important;
  max-width:none !important;
  width:auto !important;
  display:flex !important;
  justify-content:center !important;
}

/* ---------- Mega menu ---------- */
/* O mega-menu é movido para o <body> via JS (ver script no fim do index.html).
   Assim ele fica isolado de qualquer wrapper do header e ocupa 100vw. */
/* Esconde o mega-menu enquanto o JS ainda não moveu para o body — evita
   o "flash de cards" no carregamento */
.mega-menu-item .mega-menu{
  display:none;
}
body > .mega-menu{
  display:block;
  position:fixed;
  left:0;
  right:0;
  width:100vw;
  background:#fff;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  border-top:3px solid #AD1C22;
  padding:32px 40px 44px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s .25s;
  z-index:9999;
  text-align:left;
  /* top é definido dinamicamente via JS conforme a altura do header */
}
body > .mega-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s;
}
/* Esconde o dropdown padrão do tema no <li> do mega menu */
.main-menu ul li.mega-menu-item > ul{display:none !important}

.mega-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:36px;
}
.mega-menu-produtos .mega-inner{
  grid-template-columns:1fr 1fr 260px;
  align-items:stretch;
}
.mega-menu-servicos .mega-inner{
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:1400px;
}

/* Colunas de texto (Produtos) */
.mega-col h5{
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#AD1C22;
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:2px solid #f0f0f0;
}
.mega-col-text ul{list-style:none;padding:0;margin:0}
.mega-col-text ul li{margin:0;padding:0}
.mega-col-text ul li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 0;
  font-size:16px;
  font-weight:500;
  color:#0D0D0D;
  text-decoration:none;
  transition:color .2s, gap .2s, padding .2s;
}
.mega-col-text ul li a i{
  font-size:11px;
  color:#AD1C22;
  transition:transform .2s;
}
.mega-col-text ul li a:hover{
  color:#AD1C22;
  gap:14px;
  padding-left:4px;
}
.mega-col-text ul li a:hover i{transform:translateX(2px)}

/* Coluna slider (Destaques) — ocupa altura total da coluna */
.mega-col-slider{
  position:relative;
  display:flex;
  flex-direction:column;
}
.mini-slider{
  position:relative;
  width:100%;
  flex:1;
  min-height:180px;
  background:#f8f9fb;
  border:1px solid #eef0f4;
  border-radius:10px;
  overflow:hidden;
}
.mini-card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-decoration:none;
  color:inherit;
  opacity:0;
  transition:opacity .5s ease;
}
.mini-card.is-active{opacity:1}
.mini-img{
  width:130px;
  height:130px;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  margin-bottom:10px;
}
.mini-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s;
}
.mini-card:hover .mini-img img{transform:scale(1.06)}
.mini-name{
  font-size:15px;
  font-weight:700;
  color:#0D0D0D;
  text-align:center;
  line-height:1.3;
}
.mini-card:hover .mini-name{color:#AD1C22}
.mini-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:12px;
}
.mini-dots button{
  width:6px;height:6px;
  border-radius:50%;
  background:#d1d5db;
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .2s, width .2s;
}
.mini-dots button.is-active{
  background:#AD1C22;
  width:18px;
  border-radius:3px;
}

/* Rodapé do mega menu de produtos */
.mega-footer{
  max-width:1200px;
  margin:22px auto 0;
  padding-top:18px;
  border-top:1px solid #eef0f4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.mega-footer span{
  font-size:14px;
  color:#6b7280;
}
.mega-footer-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#AD1C22;
  text-decoration:none;
  transition:gap .2s;
}
.mega-footer-link:hover{gap:12px;color:#AD1C22}

/* Cards de serviço (com imagem) */
.service-card{
  display:block;
  background:#fff;
  border:1px solid #eef0f4;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:#AD1C22;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.service-img{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#f8f9fb;
}
.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s;
}
.service-card:hover .service-img img{transform:scale(1.05)}
.service-card h5{
  font-size:16px;
  font-weight:700;
  color:#0D0D0D;
  margin:18px 20px 8px;
}
.service-card p{
  font-size:13px;
  line-height:1.55;
  color:#6b7280;
  margin:0 20px 20px;
}

@media (max-width:1399px){
  .mega-menu-produtos .mega-inner{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1199px){
  .mega-menu-produtos .mega-inner{grid-template-columns:repeat(4,1fr)}
  .mega-menu-servicos .mega-inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .main-menu .mega-menu{display:none}
}

/* ============================================
   Marquee horizontal — produtos
   ============================================ */
.marquee-section{
  background:#AD1C22;
  padding:12px 0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 40s linear infinite;
}
.marquee-section:hover .marquee-track{
  animation-play-state:paused;
}
.marquee-content{
  display:flex;
  align-items:center;
  gap:36px;
  padding-right:36px;
  white-space:nowrap;
}
.marquee-content span{
  font-family:"Plus Jakarta Sans","Manrope",sans-serif;
  font-size:20px;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.marquee-content span.dot{
  font-size:12px;
  color:#0D0D0D;
  font-weight:400;
  opacity:.6;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================
   MVV — reduz a fonte do texto dos cards
   ============================================ */
.proecess-section-area .process-card .text{
  font-size:14px;
  line-height:1.65;
}
.proecess-section-area .process-card h5{
  font-size:20px;
}
.proecess-section-area .process-card .process-img{
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:10px;
}
.proecess-section-area .process-card .process-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Link "Sobre a Fulltest" abaixo da descrição */
.mvv-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:#AD1C22;
  text-decoration:none;
  letter-spacing:.02em;
  transition:gap .2s ease, color .2s ease;
}
.mvv-link i{
  font-size:12px;
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.mvv-link:hover{
  color:#AD1C22;
  gap:12px;
}
.mvv-link:hover i{
  transform:rotate(45deg) translateY(-3px);
}

/* ============================================
   Serviços — overlay escuro + card alinhado
   ============================================ */
.future-area-wrapper{
  background:#f8fafc !important;
}
.future-area-wrapper .future-card-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
}
.future-area-wrapper .future-card{
  position:relative;
  overflow:hidden;
  min-height:220px;          /* imagem um pouco menor */
  background-size:cover !important;
  background-position:center !important;
}
.future-area-wrapper .future-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.8) 100%);
  z-index:1;
}
.future-area-wrapper .future-card h5{
  position:relative;
  z-index:2;
  color:#fff;
}
/* Div branca com mais respiro embaixo */
.future-area-wrapper .future-icon-area{
  position:relative;
  z-index:3;                     /* fica acima do overlay da imagem */
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  margin-top:auto;
  gap:12px;
  padding:0 24px 32px !important;
}

/* Ícone e botão com MESMA altura, sobrepostos à borda imagem/div branca */
:root{
  --service-btn-h:56px;   /* altura compartilhada */
  --service-lift:-28px;   /* metade da altura → fica na borda */
}
.future-area-wrapper .future-icon{
  position:relative;
  z-index:4;
  margin-top:var(--service-lift) !important;
  width:var(--service-btn-h);
  height:var(--service-btn-h);
  padding:0 !important;
  background:#00101F !important;
  border:1px solid #00101F !important;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.future-area-wrapper .future-icon i{
  font-size:22px;
  color:#fff;
}
.future-area-wrapper .future-btn{
  position:relative;
  z-index:4;
  margin-top:var(--service-lift) !important;
  display:flex;
  align-items:center;
}
.future-area-wrapper .future-btn .button-one{
  height:var(--service-btn-h);
  display:inline-flex;
  align-items:center;
  padding:0 22px;
  border-radius:6px;
}

/* ============================================
   Títulos de seção — sempre alinhados à esquerda
   e cor consistente (título escuro em fundo claro)
   ============================================ */
.project-page-area .process-title-area,
.future-area-wrapper .process-title-area,
.proecess-section-area .process-title-area{
  text-align:left;
  margin-bottom:40px;
}
.project-page-area .process-title-area .sub-title,
.future-area-wrapper .process-title-area .sub-title,
.proecess-section-area .process-title-area .sub-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}
.project-page-area .process-title-area .title,
.future-area-wrapper .process-title-area .title{
  color:#0D0D0D;
}
/* MVV tem fundo escuro do tema — título fica branco */
.proecess-section-area .process-title-area .title{
  color:#fff;
}

/* ============================================
   Produtos — cards com título mais compacto
   ============================================ */
.project-page-area{
  background:#f5f6f8;
}
.project-card-details h4,
.project-card-details .project-title{
  font-size:20px !important;
  line-height:1.2 !important;
}
.project-card-details{
  padding:22px 24px !important;
  width:88% !important;
}
/* Mostra o nome do produto sempre (não só no hover), mantendo a estética */
.project-page-area .project-card-details::before{
  width:100% !important;
}
.project-card-details .project-title a{
  top:0 !important;
}
/* Subtitulo (ex.: "Ensaios de Solo") também sempre visível, cinza claro,
   virando vermelho no hover */
.project-page-area .project-card-details .project-sub-title span{
  top:0 !important;
  color:#AAB5B8 !important;
  transition:color .3s ease-in-out !important;
}
.project-page-area .project-card-item:hover .project-card-details .project-sub-title span{
  color:#AD1C22 !important;
}

/* ============================================
   CTA — faixa mais magra, título + descrição + botão
   ============================================ */
.appointment-area-wrapper{
  padding-top:65px !important;
  padding-bottom:65px !important;
  position:relative;
}
.appointment-area-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:0;
}
.appointment-area-wrapper > .container{
  position:relative;
  z-index:1;
}
.cta-simple .appointment-title{
  margin:0 0 16px !important;
  font-size:38px;
  line-height:1.2;
  font-weight:700;
}
.cta-simple .cta-desc{
  color:rgba(255,255,255,.9);
  font-size:18px;
  line-height:1.6;
  max-width:none;
  white-space:nowrap;
  margin:0 auto 28px;
}
@media (max-width:900px){
  .cta-simple .cta-desc{
    white-space:normal;
    max-width:640px;
  }
}
.cta-simple .cta-btn-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:0 !important;
}
.cta-simple .cta-btn-wrap .btn-wa,
.cta-simple .cta-btn-wrap .btn-wa-big,
.cta-simple .cta-btn-wrap .button-one{margin:0}

/* ---------- Seção About (home) — sem bg, padding refinado, imagens novas ---------- */
.about-us-clean{
  background:#fff !important;
  padding:90px 0 100px;
}
.about-us-clean .about-card-box{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:40px;
}
.about-us-clean .about-card-box > .col-xl-7{
  flex:1 1 55% !important;
  max-width:55% !important;
}
.about-us-clean .about-card-box > .col-xl-5{
  flex:0 0 45% !important;
  max-width:45% !important;
}
.about-us-clean .about-content{padding-right:20px}
.about-us-clean .about0thumb{
  position:relative;
  width:100%;
  height:auto;
}
.about-us-clean .about-img{
  border-radius:12px;
  overflow:hidden;
  width:100%;
  max-width:600px;
  aspect-ratio:1/1;
  margin-left:auto;
}
.about-us-clean .about-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:12px;
}
.about-us-clean .experience-img{
  position:absolute;
  right:auto;
  left:-40px;
  bottom:-20px;
  width:180px;
  height:auto;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  border:6px solid #fff;
  background:#fff;
  line-height:0;
  z-index:2;
}
.about-us-clean .experience-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}
@media (max-width:767px){
  .about-us-clean{padding:60px 0 70px}
  .about-us-clean .about-card-box{
    flex-wrap:wrap !important;
    gap:32px;
  }
  .about-us-clean .about-card-box > .col-xl-7,
  .about-us-clean .about-card-box > .col-xl-5{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
  .about-us-clean .about-content{padding-right:0}
  .about-us-clean .about-img{margin:0 auto}
  .about-us-clean .experience-img{width:140px;left:0;right:auto;bottom:-16px}
}
@media (max-width:991px){
  .about-us-clean{padding:60px 0 70px}
  .about-us-clean .about-content{padding-right:0;margin-bottom:32px}
}

/* ---------- Botão flutuante WhatsApp (com pulse sutil) ---------- */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:60px;height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(37,211,102,.45);
  z-index:9999;
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-float::before,
.wa-float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  opacity:.45;
  z-index:-1;
  animation:waPulse 2.4s ease-out infinite;
}
.wa-float::after{animation-delay:1.2s}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.45}
  100%{transform:scale(1.7);opacity:0}
}
.wa-float:hover{
  transform:scale(1.08);
  box-shadow:0 12px 28px rgba(37,211,102,.55);
  color:#fff !important;
}
.wa-float i{position:relative;z-index:1}
@media (max-width:576px){
  .wa-float{right:16px;bottom:16px;width:54px;height:54px;font-size:26px}
}

/* ---------- Barra de rolagem personalizada (identidade Fulltest) ---------- */
*::-webkit-scrollbar{width:7px}
*::-webkit-scrollbar-track{background-color:#1a1a1a}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#AD1C22,#690b0e);
  border-radius:12px;
  border:2px solid #1a1a1a;
}

/* ---------- Off-canvas menu (barra hambúrguer) — identidade Fulltest ---------- */
nav.side-slide{
  background:linear-gradient(180deg,#00101F 0%,#0D0D0D 100%) !important;
  color:#fff !important;
  width:400px !important;
  max-width:90vw !important;
  overflow:hidden !important;
  position:fixed !important;
}
.side-slide .offcanvas-wrap{overflow:hidden !important}
nav.side-slide::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#AD1C22 0%,#AD1C22 100%);
  z-index:3;
}
.side-slide .offcanvas-wrap{
  background:transparent !important;
  color:#fff !important;
  padding:32px 22px !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  position:relative;
  z-index:2;
}
.side-slide .close-icon{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
  z-index:10;
  width:auto;height:auto;
  padding:0;
}
.side-slide .close-icon span,
.side-slide .close-icon .side-box-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  font-size:13px;
  transition:background .2s, transform .2s, border-color .2s;
}
.side-slide .off-canvas-logo{margin-top:24px !important}
.side-slide .close-icon span:hover{
  background:#AD1C22;
  border-color:#AD1C22;
  transform:rotate(90deg);
}
.side-slide .off-canvas-logo{
  margin:12px 0 26px !important;
  position:relative;
  z-index:1;
}
.side-slide .off-canvas-logo img{
  max-width:150px;
  height:auto;
}
.side-slide .off-canvas-content{
  position:relative;
  z-index:1;
  padding:0 !important;
}
.side-slide .off-canvas-desc{
  color:rgba(255,255,255,.72) !important;
  font-size:14px !important;
  line-height:1.7 !important;
  margin:0 0 28px !important;
  padding:0 !important;
  background:transparent !important;
}
.side-slide .off-canvas-contact-info{
  margin-bottom:24px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
}
.side-slide .info-title{
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  margin:0 0 18px !important;
  display:flex;
  align-items:center;
  gap:10px;
}
.side-slide .info-title::before{
  content:"";
  width:24px;height:2px;
  background:#AD1C22;
  display:inline-block;
}
.side-slide .info-list{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.side-slide .info-list li{
  display:flex !important;
  gap:12px;
  align-items:center !important;
  color:rgba(255,255,255,.85) !important;
  font-size:13px !important;
  line-height:1.55 !important;
  padding:0 !important;
  background:none !important;
}
.side-slide .info-list li i{
  width:32px;height:32px;
  background:rgba(166,28,40,.15);
  color:#AD1C22;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  flex-shrink:0;
  margin:0 !important;
}
.side-slide .info-list li a,
.side-slide .info-list li span{
  color:rgba(255,255,255,.85) !important;
  text-decoration:none;
  transition:color .2s;
  font-size:13px;
}
.side-slide .info-list li a:hover{color:#AD1C22 !important}
/* WhatsApp na lista: mesmo estilo do e-mail (fundo vermelho, ícone branco) */
.side-slide .info-list li .fa-whatsapp{
  background:#AD1C22 !important;
  color:#fff !important;
}
.side-slide .off-canvas-social-links{
  display:flex !important;
  gap:10px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
}
.side-slide .off-canvas-social-links a{
  width:42px;height:42px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  text-decoration:none;
  font-size:15px;
}
.side-slide .off-canvas-social-links a:hover{
  background:#AD1C22;
  border-color:#AD1C22;
  transform:translateY(-2px);
}

/* ---------- Link Política de Privacidade no copyright ---------- */
.footer-copyright .link-politica{
  color:#AD1C22;
  text-decoration:none;
  font-weight:600;
  transition:color .2s;
}
.footer-copyright .link-politica:hover{color:#fff;text-decoration:underline}

/* ---------- Faixa CTA v2 — bg mais alto + overlay reforçado ---------- */
.appointment-area-wrapper.cta-faixa-v2{
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center 70% !important;
  position:relative;
  isolation:isolate;
}
.appointment-area-wrapper.cta-faixa-v2::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.92) 100%);
  z-index:-1;
}

/* ---------- Cards "Nossos Produtos" (home) — faixa clicável ---------- */
.project-page-area .project-card-item{position:relative}
.project-page-area .project-card-item .project-title a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
}

/* ---------- Botão WhatsApp (global, disponível em todas as páginas) ---------- */
.btn-wa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  color:#fff;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none;
  border-radius:6px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
  border:none;
  cursor:pointer;
}
.btn-wa i{font-size:16px}
.btn-wa:hover{
  transform:translateY(-2px);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,211,102,.4);
}
.btn-wa-big{padding:18px 34px;font-size:15px}
@media (max-width:768px){
  .appointment-area-wrapper{padding-top:45px !important;padding-bottom:45px !important}
  .cta-simple .appointment-title{font-size:26px}
  .cta-simple .cta-desc{font-size:15px}
}

/* ============================================
   Footer — menu topo centralizado, logo menor,
   textos com boa leitura no fundo escuro
   ============================================ */
.footer-bg-img .footer-menu-wrap{
  display:flex;
  justify-content:center;
}
.footer-bg-img .footer-menu-wrap ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 24px;
  padding:0;
  margin:0;
  list-style:none;
}

/* Logo do footer menor */
.footer-bg-img .footer-widget.widget1 .footer-logo img{
  max-width:150px;
  height:auto;
}

/* Textos claros no fundo escuro do footer */
.footer-bg-img .footer-widget .text,
.footer-bg-img .footer-widget.widget4 .text,
.footer-bg-img .footer-widget.widget4 .text a{
  color:#c8ced6 !important;
}
.footer-bg-img .footer-widget.widget4 .text{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:1.6;
  margin-bottom:12px;
}
.footer-bg-img .footer-widget.widget4 .text i{
  color:#AD1C22;
  margin-top:5px;
  flex-shrink:0;
}
.footer-bg-img .footer-widget.widget4 .text a{
  transition:color .2s;
}
.footer-bg-img .footer-widget.widget4 .text a:hover{
  color:#AD1C22 !important;
}

@media (max-width:768px){
  .marquee-section{padding:10px 0}
  .marquee-content span{font-size:15px}
  .marquee-content{gap:24px;padding-right:24px}
}

/* ============================================================
   MOBILE REFINEMENTS  (afeta apenas <=991px / <=767px)
   ============================================================ */

/* 5) Títulos de seção menores no mobile */
@media (max-width:991px){
  .process-title-area .title,
  .about-content .title,
  .pagina-title,
  .home-two-about-area .about-content .title,
  h2.title,
  h2.appointment-title,
  .servico-lead,
  .servico-lead-sm,
  .h2-plain,
  .produto-title,
  .info-lead,
  .sobre-conteudo h2{
    font-size:24px !important;
    line-height:1.2 !important;
  }
  .hero-area-wrapper .hero-single .title{
    font-size:28px !important;
  }
  h6.sub-title{ font-size:12px !important; letter-spacing:.05em; }
  .process-title-area{ margin-bottom:20px; }
}

@media (max-width:767px){
  /* 1) Hero mais compacta no mobile — faixa fina com respiro */
  .hero-area-wrapper .hero-single{
    padding:50px 0 60px 0 !important;
    margin-top:0 !important;
  }
  .hero-area-wrapper .hero-with-video{
    min-height:auto !important;
    display:block !important;
  }
  .marquee-section{ padding:6px 0 !important; }
  .hero-area-wrapper .hero-single .text{
    margin-bottom:18px !important;
    font-size:14px;
    line-height:1.5;
  }
  .hero-area-wrapper .hero-single .hreo-btn{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .hero-area-wrapper .hero-single .hreo-btn a{
    font-size:13px;
    padding:10px 18px;
  }

  /* 2) About "Fabricação de Máquinas": imagem antes, conteúdo depois */
  .about-us-clean .about-card-box{
    display:flex !important;
    flex-direction:column;
  }
  .about-us-clean .about-card-box .about0thumb{ order:1 !important; margin-bottom:24px; }
  .about-us-clean .about-card-box > div:not(.about0thumb){ order:2 !important; }
  .about-us-clean .experience-img{ display:none; }
  .about-us-clean .about-img img{
    width:100%;
    height:auto;
    border-radius:10px;
  }

  /* 3) Nossos Produtos — 2 por linha, cards menores com boa visualização */
  .project-page-area .container{ padding-left:20px; padding-right:20px; }
  .project-page-area .row.gy-4{ margin-left:-6px; margin-right:-6px; row-gap:12px !important; }
  .project-page-area .row.gy-4 > [class*="col-"]{
    flex:0 0 50% !important;
    max-width:50% !important;
    padding-left:6px;
    padding-right:6px;
  }
  .project-page-area .project-card-img img{
    height:auto !important;
    aspect-ratio:3/4;
    width:100%;
    object-fit:cover;
  }
  .project-page-area .project-card-details{
    padding:10px 12px !important;
    bottom:8px !important;
    left:8px;
    width:calc(100% - 16px) !important;
  }
  .project-card-details h4,
  .project-card-details .project-title{
    font-size:13px !important;
    line-height:1.2 !important;
  }
  .project-card-details .project-sub-title span{ font-size:11px; }
  .project-card-details .box-1,
  .project-card-details .box-2{ display:none; }

  /* 4) Nossos Serviços — card com título + link "Saiba mais ââ€"–" abaixo */
  .future-area-wrapper .future-card-wrap{
    position:relative;
    display:block;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
  }
  .future-area-wrapper .future-card-wrap .future-card{
    min-height:180px;
    padding:0 !important;
    background-size:cover !important;
    background-position:center !important;
    position:relative;
    border-radius:0 !important;
  }
  .future-area-wrapper .future-card-wrap .future-card::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.80) 100%);
    z-index:1;
  }
  .future-area-wrapper .future-card-wrap .future-card h5{
    position:absolute !important;
    left:16px !important;
    right:16px !important;
    bottom:56px !important;
    top:auto !important;
    z-index:4 !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:700 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.15 !important;
    display:block !important;
    text-shadow:0 1px 3px rgba(0,0,0,.35);
  }
  /* Link "Saiba mais ââ€"–" abaixo do título — substituindo o botão */
  .future-area-wrapper .future-icon-area{
    position:absolute !important;
    left:16px !important; right:16px !important;
    bottom:14px !important;
    top:auto !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    z-index:3;
  }
  .future-area-wrapper .future-icon-area .future-icon{ display:none !important; }
  .future-area-wrapper .future-icon-area .future-btn{
    position:static !important;
    margin:0 !important;
  }
  .future-area-wrapper .future-icon-area .future-btn .button-one{
    font-size:13px !important;
    font-weight:600 !important;
    padding:0 !important;
    background:transparent !important;
    color:#fff !important;
    border:0 !important;
    border-radius:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    line-height:1 !important;
    text-decoration:none !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
  }
  /* Mata o ::before vermelho do botao padrao */
  .future-area-wrapper .future-icon-area .future-btn .button-one::before,
  .future-area-wrapper .future-icon-area .future-btn .button-one::after{
    display:none !important;
    content:none !important;
    background:transparent !important;
  }
  /* Reset do ícone (que no tema é pill 35x35) — vira setinha inline */
  .future-area-wrapper .future-icon-area .future-btn .button-one i{
    width:auto !important;
    height:auto !important;
    line-height:1 !important;
    background:transparent !important;
    color:#fff !important;
    border-radius:0 !important;
    font-size:12px !important;
    padding:0 !important;
    margin:0 !important;
    transform:rotate(-45deg);
    transition:transform .25s ease;
  }
  .future-area-wrapper .future-icon-area .future-btn .button-one:hover i{
    transform:rotate(-45deg) translate(2px,-2px);
  }

  /* 6) CTA banner — só WhatsApp no mobile, tudo centralizado */
  .cta-btn-wrap .button-one{ display:none !important; }
  .cta-btn-wrap{ justify-content:center !important; }
  .appointment-area-wrapper{
    padding-top:40px !important;
    padding-bottom:40px !important;
    text-align:center;
  }
  .cta-desc{ font-size:14px; text-align:center !important; }
  .appointment-area-wrapper .appointment-title{ text-align:center !important; }

  /* Serviços internos — esconder 2º botão e alinhar à esquerda */
  .servico-actions{ justify-content:flex-start !important; }
  .servico-actions .button-one{ display:none !important; }

  /* Produtos internos — manter apenas "Solicitar orçamento" (vermelho) à esquerda */
  .produto-info .info-actions{ justify-content:flex-start !important; }
  .produto-info .info-actions .btn-wa{ display:none !important; }

  /* 7) Menu horizontal em cima do rodapé — só desktop */
  .footer-bg-img .footer-menu-area{ display:none !important; }

  /* 8) Footer mais ajustado no mobile */
  .footer-widget-area.section-padding{
    padding:36px 0 12px 0 !important;
  }
  .footer-bg-img .footer-widget{ margin-bottom:24px; }
  .footer-bg-img .footer-widget .title{
    font-size:17px !important;
    margin-bottom:10px !important;
  }
  .footer-bg-img .footer-widget ul li{ margin-bottom:6px; }
  .footer-bg-img .footer-widget ul li a,
  .footer-bg-img .footer-widget .text{ font-size:13px; }
  .footer-logo img{ max-width:140px; height:auto; }
  .copyuright-area{ padding:14px 0 !important; }
  .copyuright-area p{ font-size:12px; }
}

/* 9) NOVO MENU MOBILE (Fulltest) — injetado via JS */
/* Esconde o menu antigo do tema no mobile */
@media (max-width:991px){
  .vektor-menu-wrapper{ display:none !important; }
  /* Hambúrguer no header — cor da marca + empurra pra direita */
  .header_menu .menu_center{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
  }
  .header_menu .vektor-menu-toggle.menuShow,
  header .vektor-menu-toggle.menuShow{
    color:#AD1C22 !important;
    font-size:26px !important;
    margin-left:auto !important;
    padding:8px 12px !important;
    background:transparent !important;
    border:0 !important;
    line-height:1 !important;
  }
}

/* Backdrop */
#ft-mobile-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
  z-index:9998;
}
html.ft-mm-open #ft-mobile-backdrop{ opacity:1; pointer-events:auto; }

/* Drawer */
#ft-mobile-menu{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(88vw, 360px);
  background:#fff;
  box-shadow:-10px 0 30px rgba(0,0,0,.15);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  z-index:9999;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html.ft-mm-open #ft-mobile-menu{ transform:translateX(0); }
html.ft-mm-open{ overflow:hidden; }

/* Header do drawer */
.ft-mm-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #eef0f3;
  flex-shrink:0;
}
.ft-mm-logo img{
  height:34px;
  width:auto;
  display:block;
}
.ft-mm-close{
  width:38px; height:38px;
  border:0;
  background:#f5f6f8;
  color:#AD1C22;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  cursor:pointer;
  transition:background .2s;
}
.ft-mm-close:hover{ background:#AD1C22; color:#fff; }

/* Corpo (scroll) */
.ft-mm-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:6px 0;
  -webkit-overflow-scrolling:touch;
}
.ft-mm-list{
  list-style:none;
  padding:0; margin:0;
}
.ft-mm-item{
  border-bottom:1px solid #f0f2f5;
}
.ft-mm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}
.ft-mm-link{
  flex:1 1 auto;
  display:block;
  padding:16px 0;
  font-family:"Plus Jakarta Sans","Manrope",sans-serif;
  font-size:16px;
  font-weight:600;
  color:#0D0D0D;
  text-decoration:none;
  transition:color .2s;
}
.ft-mm-link:hover,
.ft-mm-link:focus{ color:#AD1C22; }
.ft-mm-toggle{
  width:30px; height:30px;
  border:0;
  background:transparent;
  color:#AAB5B8;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .25s ease, color .2s;
  font-size:12px;
}
.ft-mm-toggle:hover{ color:#AD1C22; }
.ft-mm-item.is-open > .ft-mm-row .ft-mm-toggle{
  transform:rotate(180deg);
  color:#AD1C22;
}
/* Submenu (acordeão) — simples, sem borda lateral */
.ft-mm-sub{
  list-style:none;
  padding:0 18px 8px 34px;
  margin:0;
  background:#fafbfc;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.ft-mm-item.is-open > .ft-mm-sub{
  max-height:800px;
}
.ft-mm-sub li a{
  display:block;
  padding:9px 10px;
  font-size:13.5px;
  color:#0D0D0D;
  text-decoration:none;
  border-radius:4px;
  transition:background .2s, color .2s;
}
.ft-mm-sub li a:hover,
.ft-mm-sub li a:focus{
  background:#fdecee;
  color:#AD1C22;
}

/* Footer do drawer */
.ft-mm-footer{
  border-top:1px solid #eef0f3;
  padding:14px 18px 18px;
  flex-shrink:0;
  background:#fafbfc;
}
.ft-mm-cta-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:12px 16px;
  background:#25D366;
  color:#fff !important;
  font-weight:700;
  font-size:14px;
  border-radius:10px;
  text-decoration:none;
  margin-bottom:12px;
  transition:filter .2s;
}
.ft-mm-cta-wa:hover{ filter:brightness(0.95); }
.ft-mm-cta-wa i{ font-size:18px; }
.ft-mm-contact{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ft-mm-contact a{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:#0D0D0D;
  text-decoration:none;
}
.ft-mm-contact a i{
  width:14px;
  color:#AD1C22;
}
.ft-mm-contact a:hover{ color:#AD1C22; }

/* Contato — form primeiro, info depois no mobile */
@media (max-width:767px){
  .contato-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:24px;
  }
  .contato-grid .contato-form{ order:1 !important; }
  .contato-grid .contato-info{ order:2 !important; }
  .contato-info h2,
  .contato-form h2{ font-size:22px !important; }
  .contato-info-lista li strong{ font-size:14px; }
  .contato-info-lista li span,
  .contato-info-lista li a{ font-size:13.5px; line-height:1.5; }
}


/* ============================================================
   Submenu "Produtos" — desktop (hover) + mobile (click)
   ============================================================ */

/* Desktop */
.main-menu ul li.has-submenu{ position:relative; }
.main-menu ul li.has-submenu > a{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.main-menu ul li.has-submenu > a .submenu-caret{ font-size:11px; transition:transform .25s ease; }
.main-menu ul li.has-submenu:hover > a .submenu-caret{ transform:rotate(180deg); }

.main-menu ul li.has-submenu .submenu-dropdown{
    position:absolute;
    top:calc(100% + 4px);
    left:50%;
    transform:translateX(-50%) translateY(10px);
    min-width:240px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 10px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    padding:10px 0;
    list-style:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index:9999;
    margin:0;
}
.main-menu ul li.has-submenu:hover .submenu-dropdown,
.main-menu ul li.has-submenu:focus-within .submenu-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
}
.main-menu ul li.has-submenu .submenu-dropdown::before{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:12px;
    height:12px;
    background:#fff;
    box-shadow:-2px -2px 4px rgba(0,0,0,.04);
}
.main-menu ul li.has-submenu .submenu-dropdown li{
    width:100%;
    display:block;
    text-align:left;
    padding:0;
}
.main-menu ul li.has-submenu .submenu-dropdown li a{
    display:block;
    padding:9px 20px;
    color:#0D0D0D;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:background .18s ease, color .18s ease, padding-left .18s ease;
    border-left:3px solid transparent;
}
.main-menu ul li.has-submenu .submenu-dropdown li a:hover{
    background:rgba(166,28,40,.06);
    color:#A61C28;
    padding-left:26px;
    border-left-color:#A61C28;
}
.main-menu ul li.has-submenu .submenu-dropdown li:first-child a{
    font-weight:700;
    color:#A61C28;
    border-bottom:1px solid rgba(0,0,0,.06);
    margin-bottom:4px;
    padding-bottom:11px;
}

/* Mobile */
.vektor-mobile-menu ul li.has-submenu-mobile{ display:block; }
.vektor-mobile-menu ul li.has-submenu-mobile > a.has-submenu-mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
}
.vektor-mobile-menu ul li.has-submenu-mobile > a .fa-chevron-down{
    font-size:12px;
    transition:transform .25s ease;
}
.vektor-mobile-menu ul li.has-submenu-mobile.is-open > a .fa-chevron-down{
    transform:rotate(180deg);
}
.vektor-mobile-menu ul .submenu-mobile{
    list-style:none;
    padding:0;
    margin:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    background:rgba(166,28,40,.04);
}
.vektor-mobile-menu ul li.has-submenu-mobile.is-open .submenu-mobile{
    max-height:600px;
}
.vektor-mobile-menu ul .submenu-mobile li a{
    display:block;
    padding:10px 18px;
    font-size:14px;
    color:#0D0D0D;
    font-weight:500;
    text-decoration:none;
}
.vektor-mobile-menu ul .submenu-mobile li:first-child a{
    font-weight:700;
    color:#A61C28;
}

/* HOME — Nossos Produtos: card do nome desce para fora da imagem
   para não cobrir o produto (imagem fica como está) */
.project-page-area .project-card-item{
    padding-bottom: 50px;
}
.project-page-area .project-card-details{
    bottom: -30px !important;
}

/* HOME — Botão "Ver todos os produtos" descolado do grid */
.project-page-area .ver-todos-produtos-row{
    margin-top: 100px !important;
}

/* ============================================================
   WhatsApp Vendor Picker — popover de escolha Carlos / Rafael
   ============================================================ */
#wa-popover-root{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#wa-popover-root.is-open{ display: flex; }
.wa-popover-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.wa-popover{
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.3);
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 420px;
    animation: wa-pop-in .22s ease-out;
}
@keyframes wa-pop-in{
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wa-popover-close{
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .18s, color .18s;
}
.wa-popover-close:hover{ background: #f3f3f3; color: #0D0D0D; }
.wa-popover-title{
    font-size: 17px;
    font-weight: 700;
    color: #0D0D0D;
    margin: 0 0 6px;
    text-align: center;
}
.wa-popover-sub{
    font-size: 13px;
    color: #666;
    text-align: center;
    margin: 0 0 20px;
}
.wa-popover-opts{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wa-popover-opt{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f6f8fa;
    border: 2px solid transparent;
    text-decoration: none;
    color: #0D0D0D;
    transition: background .2s, border-color .2s, transform .15s;
}
.wa-popover-opt:hover{
    background: #e8f8f0;
    border-color: #25D366;
    transform: translateY(-1px);
}
.wa-popover-opt .wa-icon{
    font-size: 32px;
    color: #25D366;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.wa-popover-opt-info{
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
}
.wa-popover-opt-info strong{
    font-size: 16px;
    font-weight: 700;
    color: #0D0D0D;
}
.wa-popover-opt-info span{
    font-size: 13px;
    color: #666;
}
.wa-popover-opt .wa-arrow{
    color: #25D366;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s, transform .2s;
}
.wa-popover-opt:hover .wa-arrow{
    opacity: 1;
    transform: translateX(0);
}