/* ==========================================================================
   Paulinho Imports
   Landing page estatica. CSS puro, mobile first.
   Paleta extraida do logo e das variaveis globais do Elementor do site antigo.
   ========================================================================== */

/* Fontes self-hospedadas, subset latim com acentuacao do portugues */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/archivo-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2');}

:root{
  --preto:#0A0A0A;
  --grafite:#16181A;
  --grafite-claro:#24272B;
  --amarelo:#F9C400;
  --amarelo-claro:#FCE400;
  --dourado:#D8A800;
  --branco:#FFFFFF;
  --cinza-claro:#F4F4F5;
  --texto-escuro:#2E3236;
  --texto-apoio:#6B7075;
  --texto-sobre-escuro:#B9BEC4;

  --titulo:'Archivo','Archivo Black',system-ui,-apple-system,'Segoe UI',sans-serif;
  --corpo:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --largura:1240px;
  --raio:14px;
  --altura-barra-mobile:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:88px;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--corpo);
  font-size:clamp(17px,0.52vw + 15.3px,19px);
  line-height:1.7;
  color:var(--texto-escuro);
  background:var(--branco);
  padding-bottom:var(--altura-barra-mobile);
}
img,picture{max-width:100%;}
img{display:block;height:auto;}
a{color:inherit;}
h1,h2,h3{font-family:var(--titulo);font-weight:800;line-height:1.06;letter-spacing:-0.028em;margin:0 0 .5em;text-wrap:balance;}
h1{font-size:clamp(2.05rem,6.6vw,4.2rem);line-height:1.03;}
h2{font-size:clamp(1.75rem,4.6vw,3rem);}
h3{font-size:1.22rem;font-weight:700;line-height:1.25;letter-spacing:-0.012em;}
p{margin:0 0 1.1em;}

.container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 20px;}

:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:4px;}

.pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amarelo);color:#000;padding:12px 20px;font-weight:600;
}
.pular:focus{left:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* --------------------------------------------------------------- Botoes */
.botao{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 26px;
  font-family:var(--corpo);font-weight:600;font-size:1rem;
  text-decoration:none;border-radius:var(--raio);border:2px solid transparent;
  transition:transform .15s ease,background-color .15s ease,color .15s ease;
}
.botao--pequeno{min-height:44px;padding:10px 18px;font-size:.95rem;}
.botao--amarelo{background:var(--amarelo);color:#000;}
.botao--amarelo:hover{background:var(--amarelo-claro);transform:translateY(-2px);}
.botao--preto{background:var(--preto);color:var(--branco);}
.botao--preto:hover{background:var(--grafite-claro);transform:translateY(-2px);}

.sobretitulo{
  font-family:var(--corpo);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--amarelo);margin:0 0 1em;
}
.sobretitulo--escuro{color:var(--dourado);}

/* -------------------------------------------------------------- Cabecalho */
.cabecalho{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--grafite-claro);
}
.cabecalho__interno{display:flex;align-items:center;gap:20px;min-height:72px;}
.cabecalho__logo{flex:0 0 auto;display:block;}
.cabecalho__logo img{width:128px;height:auto;}
.cabecalho__nav{display:none;}
.cabecalho__acoes{margin-left:auto;display:flex;align-items:center;gap:16px;}
.cabecalho__tel{display:none;align-items:center;min-height:44px;padding:0 4px;color:var(--branco);font-weight:600;text-decoration:none;font-size:.95rem;}
.cabecalho__tel:hover{color:var(--amarelo);}

@media (min-width:900px){
  .cabecalho__logo img{width:180px;}
  .cabecalho__nav{display:flex;gap:26px;margin-left:26px;}
  .cabecalho__nav a{
    display:inline-flex;align-items:center;min-height:44px;
    color:var(--texto-sobre-escuro);text-decoration:none;font-size:.95rem;font-weight:500;
    border-bottom:2px solid transparent;
  }
  .cabecalho__nav a:hover{color:var(--branco);border-bottom-color:var(--amarelo);}
  .cabecalho__tel{display:inline-flex;}
}

/* ------------------------------------------------------------------ Heroi */
.heroi{position:relative;background:var(--preto);color:var(--branco);isolation:isolate;overflow:hidden;}
.heroi__fundo{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;}

/* Rotacao das tres fotos em CSS puro, sem JavaScript. Ciclo de 21s, sete
   segundos por foto, com sobreposicao suave. Cada slide tambem faz um
   movimento lento de aproximacao, no espirito Ken Burns, que da vida sem
   chamar atencao para si. */
.heroi__slide{
  position:absolute;inset:0;display:block;
  opacity:0;
  animation:heroiCiclo 21s cubic-bezier(.4,0,.2,1) infinite;
}
.heroi__slide:nth-child(1){animation-delay:0s;opacity:1;}
.heroi__slide:nth-child(2){animation-delay:7s;}
.heroi__slide:nth-child(3){animation-delay:14s;}

.heroi__slide img{
  width:100%;height:100%;object-fit:cover;object-position:60% 52%;
  transform:scale(1.04);
  animation:heroiAproxima 21s ease-out infinite;
}
.heroi__slide:nth-child(1) img{animation-delay:0s;}
.heroi__slide:nth-child(2) img{animation-delay:7s;}
.heroi__slide:nth-child(3) img{animation-delay:14s;}

@keyframes heroiCiclo{
  0%     {opacity:0;}
  4%     {opacity:1;}
  30%    {opacity:1;}
  36%    {opacity:0;}
  100%   {opacity:0;}
}

@keyframes heroiAproxima{
  0%   {transform:scale(1.04);}
  36%  {transform:scale(1.10);}
  100% {transform:scale(1.10);}
}

/* Quem pede menos movimento ve so a primeira foto, parada. */
@media (prefers-reduced-motion:reduce){
  .heroi__slide{animation:none;opacity:0;}
  .heroi__slide:nth-child(1){opacity:1;}
  .heroi__slide img{animation:none;transform:none;}
}
.heroi::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,
    rgba(10,10,10,.93) 0%,
    rgba(10,10,10,.84) 30%,
    rgba(10,10,10,.46) 56%,
    rgba(10,10,10,.30) 74%,
    rgba(10,10,10,.52) 100%);
}
.heroi__conteudo{padding:44px 20px 52px;}
.heroi h1{max-width:16ch;margin-bottom:.45em;}
.heroi__sub{
  max-width:52ch;font-size:1.02rem;color:var(--texto-sobre-escuro);
  margin-bottom:1.9em;
}

@media (max-width:899px){
  /* sem o seletor de marca o heroi encolheu, entao garante altura para a foto respirar */
  .heroi__conteudo{min-height:74vh;display:flex;flex-direction:column;justify-content:center;}
  .heroi::after{background:linear-gradient(180deg,rgba(10,10,10,.74) 0%,rgba(10,10,10,.52) 40%,rgba(10,10,10,.72) 74%,rgba(10,10,10,.88) 100%);}
  .heroi__fundo img{object-position:57% 58%;}
}

@media (min-width:900px){
  .heroi__conteudo{padding:104px 20px 108px;min-height:min(calc(100vh - 72px),820px);display:flex;flex-direction:column;justify-content:center;}
  .heroi__sub{font-size:1.16rem;}
}

/* ------------------------------------------------- Acoes do heroi e seletor */
.heroi__acoes{display:flex;flex-wrap:wrap;gap:12px;}
.botao--contorno{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.34);}
.botao--contorno:hover{border-color:var(--amarelo);color:var(--amarelo);transform:translateY(-2px);}

/* Seletor de marca, agora no fim da pagina como CTA de fechamento */
.agendar{background:var(--grafite);color:var(--texto-sobre-escuro);text-align:center;}
.agendar h2{color:var(--branco);margin-bottom:.4em;}
.agendar__apoio{max-width:56ch;margin:0 auto 2em;color:var(--texto-sobre-escuro);}
.agendar__nota{margin:22px 0 0;font-size:.9rem;color:var(--texto-apoio);}
.seletor__marcas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:860px;margin:0 auto;}
.agendar .marca{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:12px 10px;
  background:var(--grafite);border:1.5px solid var(--grafite-claro);border-radius:11px;
  color:var(--branco);text-decoration:none;
  font-weight:600;font-size:.95rem;line-height:1.25;
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.agendar .marca:hover{background:var(--amarelo);border-color:var(--amarelo);color:#000;transform:translateY(-2px);}
.agendar .marca--outro{grid-column:1 / -1;border-style:dashed;}

@media (min-width:620px){
  .seletor__marcas{grid-template-columns:repeat(4,1fr);}
}

/* --------------------------------------------------- Barra de credibilidade */
.credibilidade{background:var(--amarelo);color:#000;}
.credibilidade__grade{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px 18px;
  padding-top:26px;padding-bottom:26px;
}
.selo{display:flex;flex-direction:column;gap:2px;}
.selo strong{font-family:var(--titulo);font-weight:800;font-size:1.02rem;line-height:1.2;}
.selo span{font-size:.86rem;line-height:1.35;color:rgba(0,0,0,.72);}

@media (min-width:820px){
  .credibilidade__grade{grid-template-columns:repeat(4,1fr);padding-top:30px;padding-bottom:30px;}
  .selo strong{font-size:1.12rem;}
}

/* ----------------------------------------------------------------- Secoes */
.secao{padding:72px 0;}
.secao--clara{background:var(--cinza-claro);color:var(--texto-escuro);}
.secao--escura{background:var(--preto);color:var(--texto-sobre-escuro);}
.secao--escura h2{color:var(--branco);}
.secao__apoio{max-width:58ch;font-size:1.02rem;color:var(--texto-apoio);margin-bottom:2.8em;}
.secao--escura .secao__apoio{color:var(--texto-sobre-escuro);}
.secao__cta{margin:38px 0 0;text-align:center;}

@media (min-width:900px){.secao{padding:104px 0;}}

/* --------------------------------------------------------------- Servicos */
.servicos{display:grid;grid-template-columns:1fr;gap:26px;}
.servico{
  background:var(--branco);border-radius:var(--raio);overflow:hidden;
  border:1px solid #E3E4E6;display:flex;flex-direction:column;
}
.servico img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.servico h3{margin:20px 20px 12px;}
.servico ul{margin:0 20px 22px;padding:0 0 0 18px;color:var(--texto-apoio);font-size:.95rem;}
.servico li{margin-bottom:7px;}

@media (min-width:640px){.servicos{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.servicos{grid-template-columns:repeat(4,1fr);gap:22px;}}

/* ------------------------------------------------------------ Marcas faixa */
.marcas-faixa{background:var(--grafite);color:var(--branco);padding:44px 0;text-align:center;}
.marcas-faixa__lista{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;
}
.marcas-faixa__lista li{
  font-family:var(--titulo);font-weight:800;
  font-size:clamp(1.15rem,3.2vw,1.85rem);
  letter-spacing:-0.01em;color:var(--branco);
}
.marcas-faixa__nota{margin:0;color:var(--texto-sobre-escuro);font-size:.92rem;}

/* ------------------------------------------------------------- Experiencia */
.experiencia__grade{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
.experiencia__foto img{width:100%;border-radius:var(--raio);}
.destaques{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px;}
.destaques li{
  padding:14px 16px;background:var(--grafite);
  border-left:3px solid var(--amarelo);border-radius:0 10px 10px 0;
  font-size:.96rem;
}
.destaques strong{color:var(--branco);}

@media (min-width:900px){
  .experiencia__grade{grid-template-columns:1.05fr .95fr;gap:56px;}
}

/* -------------------------------------------------------------- Quem somos */
.quem__grade{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;}
.quem__foto img{width:100%;border-radius:var(--raio);}
.quem__texto p{color:var(--texto-apoio);}

@media (min-width:900px){
  .quem__grade{grid-template-columns:1.15fr .85fr;gap:56px;}
}

/* ---------------------------------------------------------------- Galeria */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.galeria__item{
  padding:0;margin:0;border:0;background:none;cursor:pointer;
  border-radius:10px;overflow:hidden;display:block;line-height:0;
}
.galeria__item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease,opacity .2s ease;}
.galeria__item:hover img{transform:scale(1.05);opacity:.9;}

@media (min-width:700px){.galeria{grid-template-columns:repeat(3,1fr);gap:14px;}}
@media (min-width:1000px){.galeria{grid-template-columns:repeat(4,1fr);}}

/* ------------------------------------------------------------- Depoimentos */
.nota{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:30px;}
.nota__valor{font-family:var(--titulo);font-weight:800;font-size:2.4rem;line-height:1;}
.nota__estrelas{display:inline-flex;gap:2px;}
.nota__estrelas svg{width:22px;height:22px;fill:var(--amarelo);}
.nota__fonte{color:var(--texto-apoio);font-size:.95rem;}

.depoimentos{columns:1;column-gap:20px;}
.depoimento{
  break-inside:avoid;background:var(--branco);border:1px solid #E3E4E6;
  border-radius:var(--raio);padding:22px;margin:0 0 20px;
}
.depoimento__estrelas{color:var(--amarelo);letter-spacing:2px;margin-bottom:10px;font-size:1.05rem;}
.depoimento p{font-size:.97rem;color:var(--texto-escuro);margin-bottom:14px;}
.depoimento footer{display:flex;flex-direction:column;gap:1px;}
.depoimento cite{font-style:normal;font-weight:600;font-size:.95rem;}
.depoimento footer span{font-size:.82rem;color:var(--texto-apoio);}

@media (min-width:700px){.depoimentos{columns:2;}}
@media (min-width:1000px){.depoimentos{columns:3;}}

/* ------------------------------------------------------------------ Mapa */
.contato__grade{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
.dados{margin:0 0 28px;display:grid;gap:16px;}
.dados dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo);font-weight:600;}
.dados dd{margin:2px 0 0;color:var(--branco);font-size:1rem;}
.contato__recepcao{display:block;margin-top:30px;}
.contato__recepcao img{width:100%;border-radius:var(--raio);}

.mapa{
  border-radius:var(--raio);overflow:hidden;background:var(--grafite);
  border:1px solid var(--grafite-claro);
  align-self:start;
}
/* altura pensada para enquadrar o Novo Mundo e os bairros vizinhos */
.mapa iframe{width:100%;height:clamp(340px,58vw,420px);border:0;display:block;}

@media (min-width:900px){
  .contato__grade{grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  .mapa{position:sticky;top:96px;}
  .mapa iframe{height:560px;}
}

/* ---------------------------------------------------------------- Rodape */
.rodape{background:var(--preto);color:var(--texto-sobre-escuro);padding:56px 0 24px;font-size:.95rem;}
.rodape__grade{display:grid;grid-template-columns:1fr;gap:34px;}
.rodape__logo{width:170px;height:auto;margin-bottom:14px;}
.rodape h2{font-size:1rem;color:var(--branco);margin-bottom:.7em;letter-spacing:.04em;}
.rodape a{color:var(--texto-sobre-escuro);}
.rodape p a{display:inline-flex;align-items:center;min-height:44px;}
.rodape__base a{min-height:44px;}
.rodape a:hover{color:var(--amarelo);}
.rodape .botao--amarelo{color:#000;margin-top:6px;}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
  border-top:1px solid var(--grafite-claro);margin-top:40px;padding-top:20px;
  font-size:.85rem;color:var(--texto-apoio);
}
.rodape__base p{margin:0;}

@media (min-width:800px){.rodape__grade{grid-template-columns:1.3fr 1fr 1fr;gap:44px;}}

/* ---------------------------------------------------------- Barra mobile */
.barra-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;
  align-items:stretch;
  background:rgba(10,10,10,.97);border-top:1px solid var(--grafite-claro);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-mobile a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--altura-barra-mobile);padding:8px 6px;
  color:var(--texto-sobre-escuro);text-decoration:none;
  font-size:.82rem;font-weight:500;line-height:1.2;
}
.barra-mobile__zap{background:var(--amarelo);color:#000 !important;font-weight:700;}

@media (min-width:900px){
  .barra-mobile{display:none;}
  body{padding-bottom:0;}
}

/* ------------------------------------------------------------- Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.94);padding:20px;
}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:min(1100px,94vw);max-height:86vh;width:auto;border-radius:8px;}
.lightbox__fechar,.lightbox__nav{
  position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;
  cursor:pointer;border-radius:50%;
  width:52px;height:52px;font-size:2rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__fechar:hover,.lightbox__nav:hover{background:var(--amarelo);color:#000;}
.lightbox__fechar{top:16px;right:16px;font-size:2.2rem;}
.lightbox__nav--ant{left:12px;}
.lightbox__nav--prox{right:12px;}

@media (min-width:900px){
  .lightbox__nav--ant{left:28px;}
  .lightbox__nav--prox{right:28px;}
}


/* ------------------------------------------------------------------ Icones */
.ico{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle;}
.ico--zap{fill:currentColor;}
.ico--google{width:18px;height:18px;}
.botao .ico{margin-right:9px;}
.barra-mobile__zap .ico{width:18px;height:18px;margin-right:7px;}
.cabecalho .botao .ico{margin-right:7px;}

/* --------------------------------------------- Logotipos das marcas atendidas */
.marcas-faixa__lista{
  list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 22px;align-items:center;
}
/* Os logotipos sao SVG inline, monocromaticos, todos na mesma grade de 24x24.
   Como estao no HTML e nao em <img>, a cor vem do CSS e acompanha o hover. */
.marca-logo{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:11px;min-height:86px;
}
.marca-logo__svg{
  /* caixa de altura fixa para alinhar logos de proporcoes diferentes:
     alguns sao so simbolo, outros trazem o nome desenhado junto */
  width:46px;height:46px;flex:0 0 auto;
  fill:var(--branco);opacity:.85;
  transition:fill .2s ease,opacity .2s ease,transform .2s ease;
}
.marca-logo__nome{
  font-size:.72rem;letter-spacing:.04em;color:var(--texto-apoio);
  text-align:center;line-height:1.2;
  transition:color .2s ease;
}
.marca-logo:hover .marca-logo__svg{fill:var(--amarelo);opacity:1;transform:translateY(-2px);}
.marca-logo:hover .marca-logo__nome{color:var(--texto-sobre-escuro);}

@media (min-width:1000px){
  .marca-logo__svg{width:52px;height:52px;}
}

@media (min-width:620px){.marcas-faixa__lista{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1000px){.marcas-faixa__lista{grid-template-columns:repeat(8,1fr);gap:16px;}}

/* ---------------------------------------------------- Contato, fachada e mapa */
.contato__fachada{display:block;margin-top:30px;}
.contato__fachada img{width:100%;border-radius:var(--raio);}


/* ------------------------------------------------ Ajustes finos de responsividade */
/* Telas muito estreitas: 320 a 359px, ainda comuns em aparelhos antigos */
@media (max-width:359px){
  .container{padding:0 16px;}
  .seletor__marcas{gap:9px;}
  .agendar .marca{font-size:.88rem;padding:12px 6px;}
  .barra-mobile a{font-size:.74rem;}
  .credibilidade__grade{grid-template-columns:1fr;}
}

/* Tablet em retrato: a galeria em tres colunas fica melhor que em duas */
@media (min-width:600px) and (max-width:699px){
  .galeria{grid-template-columns:repeat(3,1fr);}
}

/* Paisagem em celular: o heroi nao deve ocupar a tela toda */
@media (max-width:899px) and (orientation:landscape){
  .heroi__conteudo{padding:32px 20px 40px;}
  .heroi h1{font-size:clamp(1.6rem,4.4vw,2.2rem);}
}

/* Nenhum elemento pode estourar a largura da pagina */
.mapa iframe,.galeria,.servicos,.depoimentos{max-width:100%;}


/* ==========================================================================
   Refinamentos de acabamento
   ========================================================================== */

::selection{background:var(--amarelo);color:#000;}

/* --------------------------------------------- Selo de avaliacao na dobra */
.selo-google{
  /* o heroi e um flex column, entao sem align-self a pilula esticaria
     por toda a largura da coluna */
  display:inline-flex;align-self:flex-start;align-items:center;gap:10px;
  padding:9px 16px 9px 13px;margin:0 0 22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  text-decoration:none;color:var(--branco);
  backdrop-filter:blur(8px);
  transition:border-color .2s ease,background-color .2s ease;
}
.selo-google:hover{background:rgba(255,255,255,.12);border-color:rgba(249,196,0,.5);}
.selo-google__nota{font-family:var(--titulo);font-weight:800;font-size:1.05rem;line-height:1;}
.selo-google__estrelas{color:var(--amarelo);letter-spacing:1px;font-size:.88rem;}
.selo-google__texto{
  font-size:.82rem;color:var(--texto-sobre-escuro);
  padding-left:10px;border-left:1px solid rgba(255,255,255,.16);
}

@media (max-width:420px){
  .selo-google{gap:8px;padding:8px 13px;}
  .selo-google__texto{font-size:.74rem;padding-left:8px;}
}

/* -------------------------------------------------- Cartoes com mais vida */
.servico{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease;}
.servico:hover{transform:translateY(-4px);border-color:#D2D4D7;box-shadow:0 14px 34px rgba(16,18,20,.09);}
.servico picture{overflow:hidden;display:block;}
.servico img{transition:transform .5s cubic-bezier(.16,1,.3,1);}
.servico:hover img{transform:scale(1.04);}
.servico h3{margin:22px 22px 12px;}
.servico ul{margin:0 22px 24px;}

.depoimento{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;}
.depoimento:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,18,20,.08);}

/* --------------------------------------- Divisores finos na barra amarela */
@media (min-width:820px){
  .selo{position:relative;padding-left:26px;}
  .selo::before{
    content:"";position:absolute;left:0;top:2px;bottom:2px;
    width:1px;background:rgba(0,0,0,.16);
  }
  .selo:first-child{padding-left:0;}
  .selo:first-child::before{display:none;}
}

/* ------------------------------------------- Faixa de marcas com respiro */
.marcas-faixa{padding:64px 0;}
.marcas-faixa__lista{margin-bottom:20px;}

/* ------------------------------------------------- Imagens das secoes maiores */
.experiencia__foto img,.quem__foto img,.contato__fachada img{
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}

/* ------------------------------------------------------- Perguntas frequentes */
.faq{max-width:840px;margin:0 auto;}
.faq__item{border-bottom:1px solid #E1E2E4;}
.faq__item:first-child{border-top:1px solid #E1E2E4;}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;cursor:pointer;list-style:none;
  font-family:var(--titulo);font-weight:700;font-size:1.05rem;line-height:1.35;
  color:var(--texto-escuro);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--dourado);border-bottom:2px solid var(--dourado);
  transform:rotate(45deg);transition:transform .25s ease;margin-right:4px;
}
.faq__item[open] summary::after{transform:rotate(-135deg);}
.faq summary:hover{color:#000;}
.faq__resposta{margin:0 4px 22px;color:var(--texto-apoio);font-size:.97rem;max-width:66ch;}


/* ==========================================================================
   Animacao de entrada
   O estado inicial so existe quando o <html> tem a classe .anima, que o script
   do head adiciona apenas se houver JavaScript e o visitante nao tiver pedido
   menos movimento. Sem JavaScript nada fica escondido.
   ========================================================================== */
.anima [data-anima]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.anima [data-anima="bloco"]{transform:translateY(20px);}
.anima [data-anima].visivel{opacity:1;transform:none;}

/* depois de entrar, libera o compositor */
.anima [data-anima].visivel{will-change:auto;}

@media (prefers-reduced-motion:reduce){
  .anima [data-anima]{opacity:1;transform:none;transition:none;}
}


/* ---------------------------------------------------- Botao flutuante do WhatsApp
   Fica so no desktop. No celular a barra inferior fixa ja tem o mesmo CTA, e ter
   os dois na mesma tela seria repetir o botao em cima do proprio botao. */
.zap-flutuante{display:none;}

@media (min-width:900px){
  .zap-flutuante{
    position:fixed;right:26px;bottom:26px;z-index:110;
    display:flex;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:50%;
    background:var(--amarelo);color:#000;
    box-shadow:0 8px 26px rgba(0,0,0,.28);
    transition:transform .22s cubic-bezier(.16,1,.3,1),background-color .2s ease,box-shadow .22s ease;
  }
  .zap-flutuante svg{width:31px;height:31px;fill:currentColor;}
  .zap-flutuante:hover{
    background:var(--amarelo-claro);
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 12px 32px rgba(0,0,0,.34);
  }
  .zap-flutuante:active{transform:translateY(-1px) scale(1.02);}
}