/* ====== VARIÁVEIS / UTILITÁRIOS ====== */
:root{
  --lime:#DCFF0A;
  --grey:#373737;
  --white:#fff;
  --sand:#ede8d5;
  --font-sans:'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

.lime{color:var(--lime);}
.grey{color:var(--grey);}
.white{color:var(--white);}
.sand{color:var(--sand);}

.normal-text{font-weight:400;}
.thin-text{font-weight:300;}

.plex-sans{font-family:var(--font-sans);}
.plex-mono{font-family:var(--font-mono);}

/* Texto “timeline” (usado em várias páginas) */
.timeline-text{color:#777;font-size:14px;line-height:1.1;}
.timeline-text-mobile{color:#777;font-size:12px;line-height:1.1;}
.timeline-title-mobile{color:#000;font-size:12px;line-height:1.1;font-weight:700;}

/* Helpers de layout (formulários e grids simples) */
.single-row,.single-row2{width:100%;clear:both;font-size:20px;}
.single-row3{display:flex;gap:20px;margin-bottom:20px;}
.single-column{width:50%;float:left;}
.single-column2{flex:1;}
.full-column{width:100%;float:left;}
.container{display:flex;font-size:16px;}
.coluna1,.coluna2{width:50%;line-height:20px;}

/* ====== FORMULÁRIOS / BOTÕES ====== */
.single-column input,
.full-column input{
  width:97.5%;
  background:var(--white);
  border:1px solid var(--grey);
  border-radius:10px;
  padding:10px;
  color:#C9C9C9;
  font-family:var(--font-sans);
}
.full-column input{margin:20px 0;}

.single-row2 textarea{
  color:#C9C9C9;
  font-size:18px;
  font-weight:300;
  width:97.5%;
  border-radius:10px;
  border:1px solid var(--grey);
  padding:10px;
  height:150px;
  margin-bottom:10px;
}

.btn-submit1{
  width:97.5%;
  background:var(--grey);
  text-align:center;
  height:65px;
  margin-top:20px;
  border-radius:10px;
  border:1px solid var(--grey);
  font-size:20px;color:var(--lime);font-weight:700;font-family:var(--font-sans);
}
.btn-submit2{
  width:97.5%;
  background:var(--lime);
  text-align:center;
  height:55px;border:none;border-radius:10px;
  font:700 20px var(--font-sans);
}

/* Placeholders genéricos */
textarea::placeholder,
input::placeholder{
  color:#c9c9c9 !important;
  font-family:var(--font-sans) !important;
}

/* Tipografia de formulários RD (ids que começam com) */
div[id^="formulario-site-"] input,
div[id^="formulario-site-"] input[type="tel"],
div[id^="formulario-site-"] textarea,
div[id^="formulario-site-"] select,
div[id^="formulario-site-"] select option,
div[id^="formulario-site-"] input::placeholder,
div[id^="formulario-site-"] textarea::placeholder{
  font-family:var(--font-sans) !important;
  font-size:19px !important;
  color:var(--grey) !important;
}

/* ====== MENU – indicador de página ativa ====== */
header .menu-item.current-menu-item > a,
header .menu-item.current-menu-parent > a,
header .menu-item.current-menu-ancestor > a,
header .menu-item.current-page-ancestor > a{
  position:relative;font-weight:600;
}
header .menu-item.current-menu-item > a::after,
header .menu-item.current-menu-parent > a::after,
header .menu-item.current-menu-ancestor > a::after,
header .menu-item.current-page-ancestor > a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#000;
}
/* sticky: aproxima o traço do texto */
.rt-header.fixed .mega-menu > .current-menu-item > a::after,
.rt-header.fixed .mega-menu > .current-page-ancestor > a::after,
.rt-header.fixed .mega-menu > .current-menu-parent > a::after,
.rt-header.fixed .mega-menu > .current-menu-ancestor > a::after{
  bottom:5px !important;
}

/* ====== AJUSTES RD POPUP (marcador verde “linha-a-linha”) ====== */
#rd-text-jpvi5ktx p{line-height:1.5 !important;}
#rd-text-jpvi5ktx strong{
  background:var(--lime) !important;
  padding:0 .10em !important;
  display:inline !important;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ====== CONTENÇÃO GLOBAL MOBILE ====== */
@media (max-width:767px){
  html,body{overflow-x:hidden;}
}

/* ===== Conteúdo: módulos / textos auxiliares ===== */
.text-modules { font-size: 16px; line-height: 1.5; }
.text-modules li { line-height: 1.4; }

/* versão título de módulos */
.title-modules,
.text-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
}

/* variações “timeline” já existem, mas este é o pacote completo */
.timeline-text       { color:#777; font-size:14px; line-height:1.1; }
.timeline-text-mobile{ color:#777; font-size:12px; line-height:1.1; }
.timeline-title-mobile{
  color:#000; font-size:12px; line-height:1.1; font-weight:700;
}

/* Helpers de parágrafo para usar no Elementor quando faltam controles */
.p-small   { font-size: 14px; line-height: 1.6; }
.p-base    { font-size: 16px; line-height: 1.65; }
.p-large   { font-size: 18px; line-height: 1.65; }
.p-tight   { line-height: 1.3; }
.p-comfy   { line-height: 1.8; }

/* Cores de fundo rápidas para destacar palavras/trechos */
.bg-lime   { background: var(--lime); }
.bg-grey   { background: var(--grey);  color:#fff; }
.bg-sand   { background: var(--sand); }

/* Para destacar UMA palavra mantendo quebra correta (igual RD Popup) */
.highlight-inline {
  background: var(--lime);
  padding: 0 .10em;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Overlay genérico usado em carrossel e grid */
.info-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  z-index: 9;
  opacity: 1; /* no grid é sempre visível; no desktop do carrossel pode ser customizavel */
}

.info-overlay .cidade { color: #000; font-weight: 700; display: block; }
.info-overlay .parceria { color: #1c6f65; font-weight: 500; display: block; margin-top: 4px; }

/* Grid de clientes (compartilhado) */
.grid-clientes { position: relative; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.grid-clientes img { display: block; width: 100%; height: auto; transition: filter .3s ease; }

/* Desktop: hover mostra overlay */
@media (min-width: 768px) {
  .grid-clientes img { filter: grayscale(100%); }
  .grid-clientes img:hover { filter: grayscale(0%); }
}

/* Mobile: overlay sempre visível */
@media (max-width: 767px) {
  .info-overlay { top: 85%; }
  .grid-clientes img { filter: grayscale(0%); }
}

/* Carrossel mobile interno do swiper (se for udsado .swiper-slide-inner na home/sobre) */
.swiper-slide-inner .info-overlay {
  bottom: 65%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.8);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* Base para overlays: funciona tanto na Home quanto na Sobre nós */
.info-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.info-overlay .cidade { color:#000; font-weight:700; display:block; }
.info-overlay .parceria { color:#1c6f65; font-weight:500; display:block; margin-top:2px; }

/* Elementos que recebem overlay precisam ter position:relative */
.pic,
.clients-item,
.elementor-image,
.grid-clientes,
.swiper-slide-inner,
figure {
  position: relative;
}

/* Grid de clientes */
.grid-clientes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* ajuste se necessário */
}

/* Imagens do grid não “empurrarem” layout */
.grid-clientes img {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop: overlay no hover */
@media (min-width: 768px) {
  .grid-clientes .info-overlay,
  .clients-item .info-overlay,
  .swiper-slide-inner .info-overlay {
    opacity: 0;
    transition: opacity .25s ease;
  }
  .grid-clientes img:hover + .info-overlay,
  .clients-item:hover .info-overlay,
  .swiper-slide-inner:hover .info-overlay {
    opacity: 1;
  }
}

/* Mobile: overlay sempre visível */
@media (max-width: 767px) {
  .grid-clientes .info-overlay,
  .clients-item .info-overlay,
  .swiper-slide-inner .info-overlay {
    opacity: 1 !important;
  }
  /* Ajuste vertical: */
  .clients-item .info-overlay,
  .swiper-slide-inner .info-overlay {
    bottom: 12%;
  }
}