/*
 * Camada de apoio da Limpo.
 * Só entra aqui o que o Elementor não controla por painel: detalhes
 * decorativos, micro-interações e os componentes próprios do plugin.
 * Cores, tipografia, espaçamento e layout continuam editáveis no Elementor.
 */

:root{
  --limpo-amarelo:#EDEF71;
  --limpo-rosa:#FFBCE2;
  --limpo-sol:#EBFFF6;
  --limpo-preto:#0A0A0A;
  --limpo-verde:#007B33;
  --limpo-musgo:#193133;

  /* A identidade da Limpo é clara por definição: menta, amarelo e bordas
     pretas. O Chrome do Android escurece sozinho as páginas que não se
     declaram, e o algoritmo dele não distingue cor de marca de cor
     qualquer — inverte o menta, embaça o amarelo e clareia as bordas.
     `only light` é o opt-out desse escurecimento automático; sem a palavra
     `only` algumas versões ainda aplicam o filtro. Também garante que
     campos de formulário e barras de rolagem saiam claros. */
  color-scheme: only light;
}

/* ---------- Acessibilidade ---------- */
:focus-visible{outline:3px solid var(--limpo-preto); outline-offset:3px;}
.limpo-skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--limpo-amarelo); color:var(--limpo-preto);
  padding:12px 20px; border-radius:0 0 12px 0; font-weight:700;
}
.limpo-skip-link:focus{left:0;}

@media (prefers-reduced-motion: reduce){
  .limpo-wa-float{animation:none !important;}
  .limpo-btn .elementor-button:hover{transform:none;}
}

/* ---------- Selo / eyebrow ---------- */
.limpo-eyebrow .elementor-heading-title{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--limpo-preto);
  padding:8px 16px; border-radius:999px;
  border:1.5px solid var(--limpo-musgo);
  text-transform:uppercase; letter-spacing:.02em;
}
.limpo-eyebrow .elementor-heading-title svg{width:14px; height:14px; flex-shrink:0;}
.limpo-eyebrow--escuro .elementor-heading-title{
  background:transparent; color:var(--limpo-amarelo); border-color:var(--limpo-amarelo);
}

/* ---------- Destaque amarelo do H1 ---------- */
.limpo-destaque{
  background:var(--limpo-amarelo); padding:2px 10px; border-radius:10px;
  display:inline-block; transform:rotate(-1deg);
}

/* ---------- Botões ---------- */
.limpo-btn .elementor-button{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.limpo-btn .elementor-button:hover{transform:translateY(-2px);}
.limpo-btn .elementor-button:active{transform:translateY(2px);}
.limpo-btn .elementor-button-icon svg{width:1em; height:1em; fill:currentColor;}

/* ---------- Hero ----------
 * As manchas coloridas do fundo são contêineres de verdade (editáveis no
 * Elementor). Aqui só garantimos que elas não capturem cliques.
 */
.limpo-blob{pointer-events:none; filter:blur(2px);}
.limpo-blob--nitido{filter:none;}

/* ---------- Comparador antes/depois ----------
 * A posição mora em uma variável só (--limpo-ba-pos): a barra e o corte da
 * foto leem o mesmo valor e mudam no mesmo quadro, sem uma atrasar a outra.
 */
.limpo-ba-quadro{
  --limpo-ba-pos:50%;
  position:relative; width:100%; aspect-ratio:4/3.1; border-radius:20px;
  overflow:hidden; cursor:ew-resize; background:var(--limpo-sol);
  user-select:none; touch-action:pan-y;
}
/* Dois níveis pelo mesmo motivo da alça: o Elementor aplica `.elementor img
   {height:auto}`, que empata com uma classe sozinha e vence por vir depois.
   Sem isto a foto assume a altura natural e o corte foge do centro. */
.limpo-ba .limpo-ba-quadro img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.limpo-ba-depois{
  position:absolute; inset:0; overflow:hidden; will-change:clip-path;
  clip-path:inset(0 0 0 var(--limpo-ba-pos)); transition:none;
}
.limpo-ba-etiqueta{
  position:absolute; top:14px; font-size:15px; font-weight:500;
  padding:6px 14px; border-radius:999px; letter-spacing:.01em; z-index:2;
}
.limpo-ba-etiqueta.antes{left:14px; background:var(--limpo-musgo); color:#fff;}
.limpo-ba-etiqueta.depois{right:14px; background:var(--limpo-amarelo); color:var(--limpo-preto);}
/* Seletor com dois níveis de propósito: o reset do tema estiliza `button` por
   [type="button"], que empata com uma classe sozinha e venceria por vir depois. */
.limpo-ba-quadro .limpo-ba-alca{
  position:absolute; top:0; bottom:0; left:var(--limpo-ba-pos);
  width:4px; min-width:0; height:auto;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
  transform:translateX(-50%); transition:none;
  z-index:3; margin:0; padding:0; border:0; border-radius:0;
  cursor:ew-resize; appearance:none; -webkit-appearance:none;
}
.limpo-ba-quadro .limpo-ba-alca::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--limpo-amarelo);
  border:3px solid var(--limpo-preto);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round'><path d='M8 7l-5 5 5 5M16 7l5 5-5 5'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:22px;
}
.limpo-ba-legenda{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; font-size:13px; font-weight:600; color:var(--limpo-musgo);
}
.limpo-ba-legenda svg{width:15px; height:15px;}
/* O quadro tira a altura de `aspect-ratio`, e o algoritmo flex do Elementor não
   conta isso ao dimensionar o item: no celular o widget recebia 201px para
   264px de conteúdo, e a legenda sobrava para fora do hero — que usa
   overflow:hidden por causa do círculo decorativo, então ela saía cortada ao
   meio. Reservar a altura no próprio item corrige a cadeia inteira (o card e a
   seção crescem junto). Os dois números são medidos, não arbitrários:
     84px = padding do hero (24+24) + padding do card (16+16) + borda (2+2)
     38px = margem da legenda (14) + altura da legenda (24)
   Se algum desses espaçamentos mudar, este cálculo acompanha. */
@media (max-width:767px){
  .elementor-widget-limpo-antes-depois{
    min-height:calc((100vw - 84px) * 3.1 / 4 + 38px);
  }
}

/* ---------- Passo a passo ---------- */
.limpo-passo{position:relative;}
.limpo-passo-numero .elementor-heading-title{
  width:40px; height:40px; border-radius:50%;
  background:var(--limpo-amarelo); color:var(--limpo-preto);
  border:2.5px solid var(--limpo-preto);
  display:flex; align-items:center; justify-content:center;
}
/* O traço sai da borda do círculo de um passo e para na borda do próximo:
   18px de recuo do passo + 40px do círculo + 8px de respiro. */
.limpo-passo:not(:last-child)::after{
  content:''; position:absolute; top:20px; left:66px;
  width:calc(100% - 56px); height:2.5px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--limpo-amarelo) 0 8px, transparent 8px 16px);
}
@media (max-width:1024px){
  .limpo-passo:not(:last-child)::after{display:none;}
}

/* ---------- Diferenciais ---------- */
.limpo-rotulo .elementor-heading-title{display:flex; align-items:center; gap:8px;}
.limpo-rotulo .elementor-heading-title::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--limpo-verde); flex-shrink:0;
}

/* ---------- Regiões ---------- */
.limpo-chips p{display:flex; flex-wrap:wrap; gap:10px; margin:0;}
.limpo-chip{
  background:var(--limpo-sol); border:1.5px solid var(--limpo-verde); color:var(--limpo-musgo);
  font-weight:700; font-size:13.5px; padding:8px 16px; border-radius:999px; line-height:1.4;
}

/* ---------- Cards ---------- */
.limpo-card-servico{transition:transform .2s ease, border-color .2s ease;}
.limpo-card-servico:hover{transform:translateY(-4px);}

.limpo-foto{overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.limpo-foto img{width:100%; height:100%; aspect-ratio:9/16; object-fit:cover; display:block;}
.limpo-foto:hover{transform:translateY(-4px);}

/* ---------- Cabeçalho fixo ---------- */
.limpo-header{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
/* Quando o cabeçalho gruda no topo ele precisa ocupar a largura toda, mesmo
   que a medição inicial do script de sticky tenha pegado outro valor. */
.limpo-header.elementor-sticky--active{width:100% !important; left:0;}

/* ---------- Avaliações ----------
 * A seção inteira desaparece enquanto nenhuma avaliação estiver cadastrada:
 * é melhor não ter a seção do que exibir estrela sem avaliação por trás.
 */
body:not(.elementor-editor-active) .limpo-secao-avaliacoes:not(:has(.limpo-avaliacao)){display:none;}
.limpo-avaliacoes{display:flex; flex-direction:column; gap:14px;}
.limpo-avaliacoes-titulo{
  font-family:'Roketto','Manrope',sans-serif; font-weight:600;
  font-size:38px; line-height:1.08; letter-spacing:0; margin:0 0 12px;
  color:var(--limpo-preto);
}
.limpo-avaliacoes-grade{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:14px;}
.limpo-avaliacao{
  margin:0; padding:26px 24px;
  background:#fff; border:2px solid rgba(10,10,10,.06); border-radius:20px;
  display:flex; flex-direction:column; gap:12px;
}
.limpo-avaliacao-estrelas{display:flex; gap:3px; color:var(--limpo-amarelo);}
.limpo-avaliacao-texto{
  margin:0; font-size:15px; line-height:1.6; font-weight:500; color:var(--limpo-texto,#4A4A4A);
}
.limpo-avaliacao-texto::before{content:'\201C';}
.limpo-avaliacao-texto::after{content:'\201D';}
.limpo-avaliacao-autor{
  display:flex; flex-direction:column; gap:2px; margin-top:auto;
  font-size:14px; color:var(--limpo-musgo);
}
.limpo-avaliacao-autor strong{font-weight:700;}
.limpo-avaliacao-autor span{font-size:13px; opacity:.75;}
.limpo-avaliacoes-link{margin:22px 0 0; display:flex; justify-content:center;}

/* Botão que leva ao perfil da Limpo no Google: cartão branco, borda e sombra
   discretas, no padrão visual do próprio Google. */
.elementor a.limpo-botao-google,
.limpo-botao-google{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#3C4043;
  font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; line-height:1;
  padding:13px 22px; border:1px solid #DADCE0; border-radius:999px;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(60,64,67,.2), 0 1px 3px 1px rgba(60,64,67,.1);
  transition:box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.elementor a.limpo-botao-google:hover,
.limpo-botao-google:hover{
  background:#F8F9FA; color:#202124;
  box-shadow:0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
  transform:translateY(-1px);
}
.limpo-botao-google:active{transform:translateY(0);}
.limpo-botao-google:focus-visible{outline:3px solid #4285F4; outline-offset:2px;}
.limpo-botao-google .limpo-google-g{flex-shrink:0; width:18px; height:18px;}
@media (prefers-reduced-motion: reduce){
  .elementor a.limpo-botao-google:hover,
.limpo-botao-google:hover{transform:none;}
}
.limpo-avaliacoes-vazio{
  padding:22px; border:2px dashed rgba(10,10,10,.25); border-radius:20px;
  background:#fff; color:var(--limpo-musgo); font-size:14px; line-height:1.5;
}
@media (max-width:1024px){ .limpo-avaliacoes-grade{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:767px){
  .limpo-avaliacoes-grade{grid-template-columns:1fr;}
  .limpo-avaliacoes-titulo{font-size:29px;}
}

/* ---------- Logos ----------
 * O widget de imagem do Elementor aplica width:100% na img. Junto com a
 * altura definida no painel, isso deforma a logo. Aqui a largura volta a
 * acompanhar a proporção do arquivo — a altura continua editável.
 */
.elementor-widget-image.limpo-logo img,
.elementor-widget-image.limpo-logo-rodape img{
  width:auto; max-width:100%; object-fit:contain;
}

/* ---------- Rodapé ---------- */
.limpo-logo-rodape img{filter:invert(1) brightness(2);}
.limpo-lista-rodape .elementor-icon-list-item a:hover{color:var(--limpo-amarelo);}
.limpo-lista-rodape .elementor-icon-list-icon svg{width:17px; height:17px;}
.limpo-cnpj p{margin:0;}

/* ---------- Termos e Política de Privacidade ---------- */
.limpo-doc ul{list-style:disc; padding-left:22px; margin:10px 0;}
.limpo-doc ol{list-style:decimal; padding-left:22px; margin:10px 0;}
.limpo-doc li{margin-bottom:8px;}
.limpo-doc p{margin-bottom:12px;}
.limpo-doc p:last-child{margin-bottom:0;}
.limpo-doc a{text-decoration:underline; text-underline-offset:2px;}
.limpo-doc-secao{scroll-margin-top:110px;}

/* ---------- FAQ ---------- */
.limpo-faq .e-n-accordion-item-title-icon{
  width:30px; height:30px; border-radius:50%;
  background:var(--limpo-amarelo); border:2px solid var(--limpo-preto);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.limpo-faq .e-n-accordion-item-title-icon span{display:flex;}

/* ---------- Botão flutuante do WhatsApp ---------- */
.limpo-wa-float{
  position:fixed; bottom:22px; right:22px; z-index:200;
  width:64px; height:64px; border-radius:50%;
  background:var(--limpo-verde); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:limpo-pulse 2.4s ease-in-out infinite;
}
.limpo-wa-float svg{width:30px; height:30px; fill:currentColor;}
.limpo-wa-float:hover{color:#fff;}
.limpo-wa-float.limpo-wa-esquerda{right:auto; left:22px;}
.limpo-wa-float.limpo-wa-sem-pulso{animation:none;}
@keyframes limpo-pulse{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(0,123,51,.5);}
  50%{box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 10px rgba(0,123,51,0);}
}
@media (max-width:640px){
  .limpo-wa-float{width:56px; height:56px; bottom:16px; right:16px;}
}

/* Alvo de toque dos títulos-link dos cards de serviço (limpo-alvo-toque).
   O texto clicável tinha 17px de altura, abaixo do mínimo de 24px da WCAG 2.2.
   Ampliamos só a área sensível ao toque, com um pseudo-elemento transparente,
   para não deslocar nada no layout. */
.elementor-icon-box-title a{ position:relative; }
.elementor-icon-box-title a::after{
  content:''; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%);
  height:32px;
}

/* ---------- Barra de prova social do hero (limpo-clientes) ----------
   O numero e o rotulo usam familias e tamanhos diferentes (Boyrun x
   Manrope). Alinhar pela linha de base deixa os centros visuais fora
   de esquadro, porque as metricas das duas fontes nao batem. Por isso
   tudo aqui e centralizado pelo eixo vertical: continua alinhado mesmo
   se o tamanho da fonte for alterado no editor do Elementor. */
/* Especificidade acima da do Elementor de proposito: no celular ele
   empilha o icone (elementor-mobile-position-block-start, column). Fixar
   flex-direction aqui mantem a barra em linha em qualquer tamanho de tela,
   mesmo se o controle de posicao do widget for alterado no editor. */
.elementor-widget.limpo-clientes.elementor-widget-icon-box .elementor-icon-box-wrapper{
  display:flex; flex-direction:row; align-items:center;
  gap:12px; text-align:left;
  background:#fff; border:1.5px solid var(--limpo-musgo);
  border-radius:14px; padding:12px 18px;
}
.elementor-widget.limpo-clientes .elementor-icon-box-icon{margin:0 !important;}
.limpo-clientes .elementor-icon-box-icon{
  margin:0; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.limpo-clientes .elementor-icon-box-content{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  flex:1 1 auto; min-width:0;
}
/* line-height:1 faz cada caixa abracar o proprio texto, deixando a
   centralizacao previsivel independentemente da fonte. */
.limpo-clientes .elementor-icon-box-title,
.limpo-clientes .elementor-icon-box-description{
  margin:0; line-height:1; display:block;
}
.limpo-clientes .elementor-icon-box-description{color:var(--limpo-musgo);}
@media(max-width:767px){
  .limpo-clientes .elementor-icon-box-wrapper{padding:11px 14px; gap:10px;}
}

/* ---------- Alvos de toque no celular (limpo-toque-mobile) ----------
   No dedo, o minimo confortavel e 44px. Dois grupos de links de WhatsApp
   ficavam abaixo: os titulos dos cards (17px de texto) e os links do
   rodape (22px). Os seletores usam href*="wa.me" para atingir so os
   links de WhatsApp, sem inflar o resto do layout. */
@media (max-width: 767px){

  /* Titulos de card que levam ao WhatsApp: a area sensivel sobe de 32
     para 44px. O pseudo-elemento e transparente, entao nada se move. */
  .elementor-icon-box-title a[href*="wa.me"]::after,
  .elementor-icon-box-title a[href*="api.whatsapp"]::after{
    height:44px;
  }

  /* Links de WhatsApp em lista (rodape): ganham altura por padding.
     Como sao itens de lista empilhados, isso so aumenta o respiro. */
  .elementor-icon-list-item a[href*="wa.me"],
  .elementor-icon-list-item a[href*="api.whatsapp"]{
    padding-top:11px; padding-bottom:11px;
  }

  /* Botoes de verdade: garante o minimo mesmo se o padding for
     reduzido no editor. */
  .elementor-button[href*="wa.me"],
  .elementor-button[href*="api.whatsapp"]{
    min-height:48px;
  }
}

/* ---------- Posicao do botao x alinhamento do texto (limpo-botao-livre) ----
   O widget do botao ocupa a largura disponivel para que o controle
   "Alinhamento" do proprio botao tenha espaco para agir. O botao em si
   permanece com largura automatica: quem define o tamanho e o texto,
   nunca o container. Assim posicao e tamanho ficam independentes. */
.elementor-widget-button .elementor-button{
  width:auto; max-width:100%;
}
/* Em telas pequenas o botao continua obedecendo ao proprio alinhamento,
   e nao ao alinhamento do texto ao redor. */
@media (max-width: 767px){
  .elementor-widget-button .elementor-button{ width:auto; }
}

/* ---------- Perguntas frequentes em blocos (limpo-faq-item) ----------
   Substitui o accordion aninhado do Elementor, em que as perguntas ficavam
   num repetidor e as respostas em containers separados, pareados por índice.
   Reordenar desalinhava os dois. Aqui pergunta e resposta moram no mesmo
   container: mover, duplicar ou criar um novo leva o par junto. */
.limpo-faq-item{
  background:#fff; border:2px solid rgba(10,10,10,.08);
  border-radius:16px; overflow:hidden;
}
.limpo-faq-item + .limpo-faq-item{ margin-top:12px; }
.limpo-faq-item.limpo-faq-aberto{ border-color:var(--limpo-verde); }

.limpo-faq-pergunta{ cursor:pointer; }
.limpo-faq-pergunta .elementor-heading-title{
  display:flex; align-items:center; gap:14px;
  margin:0; padding:18px 22px; user-select:none;
}
.limpo-faq-pergunta .elementor-heading-title::after{
  content:''; margin-left:auto; flex:none;
  width:28px; height:28px; border-radius:50%;
  background:var(--limpo-amarelo) center/13px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  border:2px solid var(--limpo-preto);
  transition:transform .22s ease;
}
.limpo-faq-item.limpo-faq-aberto .limpo-faq-pergunta .elementor-heading-title::after{
  transform:rotate(180deg);
}
.limpo-faq-pergunta .elementor-heading-title:focus-visible{
  outline:2px solid var(--limpo-verde); outline-offset:-4px; border-radius:14px;
}

.limpo-faq-resposta{ display:none; padding:0 22px 20px; }
.limpo-faq-item.limpo-faq-aberto .limpo-faq-resposta{
  display:block; animation:limpo-faq-abre .2s ease;
}
@keyframes limpo-faq-abre{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }