/* =========================================================
   MODELO — empresa de limpeza (EUA)
   Claro, confiável, sem depender de foto do cliente.
   ========================================================= */

:root{
  color-scheme: light;

  --tinta:#16302E;          /* texto principal */
  --tinta-2:#4A6663;        /* texto de apoio */
  --apagado:#7C918E;

  --fundo:#FFFFFF;
  --fundo-2:#F6F2EA;        /* areia quente — evita o branco clínico */
  --fundo-3:#E8F1EF;

  /* A paleta é trocada por site: previa.py injeta um :root depois deste.
     Estes valores são o padrão, e o que aparece se nada for injetado. */
  --marca:#0E5C5B;          /* identidade: a cor que a pessoa lembra */
  --marca-clara:#14807C;
  --marca-escura:#0A4342;

  --acao:#E09443;           /* ação: só o botão que converte usa */
  --acao-clara:#F0B35B;
  --tinta-acao:#231204;   /* texto em cima do botão de ação */

  --linha:rgba(22,48,46,.12);
  --vermelho:#B4442E;

  --titulo:"Fraunces",Georgia,serif;
  --texto:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r:16px;
  --sombra:0 14px 40px rgba(20,40,38,.10);
  --sombra-alta:0 22px 60px rgba(20,40,38,.16);
}

*{box-sizing:border-box}

/* display:grid nas regras abaixo vence o hidden do navegador.
   Sem isto, formulário e confirmação apareceriam juntos. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:84px}

/* clip em vez de hidden: preserva o position:sticky do cabeçalho */
html,body{overflow-x:clip}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote,pre{margin:0}

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

.pular{position:absolute;left:-9999px}
.pular:focus{left:8px;top:8px;z-index:99;background:var(--marca);color:#fff;padding:10px 16px;border-radius:8px}

.env{width:100%;max-width:1120px;margin-inline:auto;padding-inline:20px}
.env-estreito{max-width:760px}

.so-mobile{display:inline}
.so-desktop{display:none}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top,0px);
}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding-block:9px}
.marca{
  display:flex;align-items:center;gap:9px;
  font-family:var(--titulo);
  font-size:clamp(15px,4.1vw,19px);font-weight:600;letter-spacing:-.01em;
  line-height:1.15;
  color:var(--marca);
  min-width:0;
}
/* nomes de empresa são longos: no máximo 2 linhas, o resto vira reticências */
.marca-nome{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.marca-icone{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:9px;
  background:var(--marca);color:#fff;
}

.menu{display:none;gap:26px;font-size:14.5px;font-weight:500;color:var(--tinta-2)}
.menu a{position:relative;padding-block:4px;transition:color .2s}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--marca);transform:scaleX(0);transform-origin:left;
  transition:transform .25s;
}
.menu a:hover{color:var(--marca)}
.menu a:hover::after{transform:scaleX(1)}

/* ---------- botões ---------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:999px;
  font-family:var(--texto);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;cursor:pointer;border:0;
  transition:transform .2s,box-shadow .2s,background-color .2s;
}
.bt-principal{
  background:var(--acao);color:var(--tinta-acao);
  box-shadow:0 10px 26px rgba(20,40,38,.22);
  box-shadow:0 10px 26px color-mix(in srgb, var(--acao) 38%, transparent);
}
.bt-principal:hover{transform:translateY(-2px);background:var(--acao-clara)}
.bt-secundario{
  background:transparent;color:var(--marca);
  border:1.5px solid var(--linha);
  border-color:color-mix(in srgb, var(--marca) 30%, transparent);
}
.bt-secundario:hover{background:var(--fundo-3);border-color:var(--marca)}
.bt-ligar{
  padding:10px 16px;font-size:14px;flex:none;
  background:var(--marca);color:#fff;
}
.bt-ligar:hover{background:var(--marca-clara)}
.bt-largo{width:100%;padding-block:15px;font-size:16px}

.ligacao{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--texto);font-size:14px;font-weight:500;
  color:var(--apagado);text-decoration:underline;text-underline-offset:3px;
}
.ligacao:hover{color:var(--marca)}

/* ---------- capa ---------- */
.capa{
  background:linear-gradient(170deg,var(--fundo-2) 0%,var(--fundo) 62%);
  padding-block:36px 52px;
}
.capa-grade{display:grid;gap:30px;align-items:start}

.selo{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:8px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--linha);
  font-size:13.5px;font-weight:600;color:var(--tinta-2);
  box-shadow:0 3px 12px rgba(20,40,38,.07);
}
.selo-estrelas{color:var(--acao);letter-spacing:1px}

.capa h1{
  margin-top:20px;
  font-family:var(--titulo);
  font-size:clamp(33px,7.2vw,54px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.capa h1 em{font-style:italic;color:var(--marca)}

.capa-sub{
  margin-top:16px;max-width:52ch;
  font-size:17px;line-height:1.65;color:var(--tinta-2);
}

.garantias{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin-top:24px;
  font-size:14px;color:var(--tinta-2);
}
.garantias li{display:flex;align-items:center;gap:7px}
.garantias li::before{
  content:"\2713";                 /* tique de texto: renderiza igual em tudo */
  flex:none;
  display:grid;place-items:center;
  width:19px;height:19px;border-radius:50%;
  background:var(--marca);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}

.capa-ou{
  margin-top:22px;
  font-size:14.5px;color:var(--tinta-2);
}
.capa-ou a{color:var(--marca);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- formulário (sempre aberto) ---------- */
.ficha{
  padding:26px 22px;
  background:#fff;
  border:1px solid var(--linha);
  border-radius:22px;
  box-shadow:var(--sombra-alta);
  scroll-margin-top:90px;
}
.ficha-titulo{
  font-family:var(--titulo);
  font-size:24px;font-weight:600;letter-spacing:-.015em;
  color:var(--marca);
}
.ficha-sub{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--tinta-2)}

.form{display:grid;gap:15px;margin-top:20px}
.campo{display:grid;gap:6px;min-width:0}
.campo-dupla{display:grid;gap:15px}

.campo label{font-size:13px;font-weight:600;color:var(--tinta)}
.campo input,
.campo select{
  width:100%;
  padding:12px 13px;
  border:1.5px solid var(--linha);
  border-radius:11px;
  background:var(--fundo);
  font-family:var(--texto);font-size:16px;  /* 16px evita o zoom automático no iPhone */
  color:var(--tinta);
  transition:border-color .2s,box-shadow .2s;
}
.campo input::placeholder{color:#AFBFBD}
.campo input:focus,
.campo select:focus{
  outline:none;
  border-color:var(--marca);
  box-shadow:0 0 0 3px rgba(20,40,38,.10);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}
.campo input[aria-invalid="true"]{border-color:var(--vermelho)}
.erro{font-size:12.5px;font-weight:500;color:var(--vermelho)}

.ficha-nota{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--apagado);text-align:center}

.ficha-ok{display:grid;justify-items:center;gap:11px;text-align:center;padding-block:8px}
.ficha-ok-marca{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--fundo-3);color:var(--marca);
}
.ficha-ok h3{font-family:var(--titulo);font-size:21px;font-weight:600;color:var(--marca)}
.ficha-ok p{font-size:14.5px;line-height:1.6;color:var(--tinta-2);max-width:40ch}
.ficha-ok-rotulo{font-size:13px;color:var(--apagado)}
.ficha-ok-rotulo a{color:var(--marca);font-weight:600}
.ficha-resumo{
  width:100%;
  margin-top:2px;padding:14px;
  background:var(--fundo-2);border-radius:12px;
  font-family:var(--texto);font-size:13.5px;line-height:1.65;
  color:var(--tinta);text-align:left;
  white-space:pre-wrap;word-break:break-word;
}
.ficha-ok-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}

/* ---------- faixa corrida ---------- */
.faixa{
  overflow:hidden;
  padding-block:13px;
  background:var(--marca);color:rgba(255,255,255,.92);
  border-block:1px solid rgba(255,255,255,.1);
}
.faixa-trilho{
  display:flex;align-items:center;gap:26px;
  width:max-content;
  font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;
  animation:correr 34s linear infinite;
}
.faixa-ponto{color:var(--acao-clara)}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- seções ---------- */
.secao{padding-block:58px}
.secao-clara{background:var(--fundo-2)}
.secao-escura{background:var(--marca);color:#fff}

.rotulo{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--marca-clara);
}
.rotulo-claro{color:var(--acao-clara)}

.secao h2{
  margin-top:12px;
  font-family:var(--titulo);
  font-size:clamp(27px,5.4vw,40px);
  font-weight:600;line-height:1.14;letter-spacing:-.015em;
  text-wrap:balance;
}
.titulo-claro{color:#fff}
.secao-sub{margin-top:14px;max-width:56ch;font-size:16.5px;line-height:1.7;color:var(--tinta-2)}

/* ---------- cartões de serviço ---------- */
.cartoes{display:grid;gap:14px;margin-top:32px}
.cartao{
  position:relative;
  padding:26px 22px;
  background:var(--fundo);
  border:1px solid var(--linha);
  border-radius:var(--r);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:color-mix(in srgb, var(--marca) 26%, transparent)}
.cartao-num{
  display:block;margin-bottom:10px;
  font-family:var(--titulo);font-size:14px;font-weight:600;
  color:var(--acao);letter-spacing:.06em;
}
.cartao h3{
  font-family:var(--titulo);
  font-size:21px;font-weight:600;letter-spacing:-.01em;
  color:var(--marca);
}
.cartao p{margin-top:9px;font-size:15px;line-height:1.65;color:var(--tinta-2)}

/* ---------- listas do "o que vem junto" ---------- */
.listas{display:grid;gap:18px;margin-top:32px}
.lista{
  padding:24px 22px;
  background:var(--fundo);
  border-radius:var(--r);
  border:1px solid var(--linha);
}
.lista h3{
  padding-bottom:12px;margin-bottom:13px;
  border-bottom:1px solid var(--linha);
  font-family:var(--titulo);font-size:18px;font-weight:600;
  color:var(--marca);
}
.tiques{display:grid;gap:9px;font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.tiques li{display:flex;align-items:flex-start;gap:9px}
.tiques li::before{
  content:"\2713";flex:none;margin-top:1px;
  display:grid;place-items:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--fundo-3);color:var(--marca);
  font-size:10px;font-weight:700;line-height:1;
}
.listas-extra{
  margin-top:22px;max-width:60ch;
  font-size:15.5px;line-height:1.7;color:var(--tinta-2);
}

/* ---------- passos ---------- */
.passos{display:grid;gap:22px;margin-top:34px}
.passos li{display:flex;align-items:flex-start;gap:16px}
.passo-num{
  display:grid;place-items:center;flex:none;
  width:42px;height:42px;border-radius:50%;
  background:var(--fundo-3);color:var(--marca);
  font-family:var(--titulo);font-size:19px;font-weight:600;
}
.passo-corpo h3{
  font-family:var(--titulo);font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:var(--tinta);
}
.passo-corpo p{margin-top:6px;font-size:15px;line-height:1.65;color:var(--tinta-2);max-width:52ch}

/* ---------- confiança ---------- */
.confianca{display:grid;gap:26px;margin-top:34px}
.confianca li{display:flex;flex-direction:column;gap:7px}
.confianca-numero{
  font-family:var(--titulo);
  font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.1;
  color:var(--acao-clara);
}
.confianca-texto{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.86);max-width:36ch}

/* ---------- depoimentos ---------- */
.citacoes{display:grid;gap:14px;margin-top:32px}
.citacao{
  padding:24px 22px;
  background:var(--fundo-2);
  border-radius:var(--r);
}
.citacao-estrelas{color:var(--acao);letter-spacing:2px;font-size:14px}
.citacao blockquote{
  margin-top:11px;
  font-size:16px;line-height:1.68;color:var(--tinta);
}
.citacao figcaption{
  margin-top:13px;
  font-size:13.5px;font-weight:600;color:var(--apagado);
}

/* ---------- obras (galeria) ---------- */
.filtros{
  display:flex;gap:8px;margin-top:26px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;margin-inline:-20px;padding-inline:20px;
}
.filtros::-webkit-scrollbar{display:none}
.filtro{
  flex:none;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--linha);background:var(--fundo);
  font:600 14px/1.2 var(--texto);color:var(--tinta-2);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.filtro:hover{border-color:var(--marca);color:var(--marca)}
.filtro[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:#fff}

.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.galeria-item{
  display:flex;flex-direction:column;
  background:var(--fundo);border-radius:12px;overflow:hidden;
  border:1px solid var(--linha);
}
.galeria-par{grid-column:span 2}
.par{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.foto{position:relative;display:block;overflow:hidden;background:var(--fundo-3)}
.galeria-item img{
  width:100%;aspect-ratio:var(--proporcao,1/1);object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.foto:hover img{transform:scale(1.04)}
.selo-par{
  position:absolute;left:8px;top:8px;
  padding:4px 10px;border-radius:999px;
  background:rgba(10,14,24,.72);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.selo-depois{background:var(--acao);color:var(--tinta-acao)}
.galeria-item figcaption{
  padding:10px 12px 12px;
  font-size:13.5px;font-weight:600;line-height:1.35;color:var(--tinta);
}

.ampliada{
  border:0;padding:0;background:transparent;
  max-width:min(94vw,1100px);max-height:94vh;overflow:visible;
}
.ampliada::backdrop{background:rgba(6,10,20,.88)}
.ampliada img{display:block;max-width:100%;max-height:82vh;width:auto;margin-inline:auto;border-radius:10px}
.ampliada-legenda{margin-top:12px;text-align:center;color:#fff;font-size:15px;font-weight:500}
.ampliada-fechar{
  position:fixed;right:14px;top:calc(14px + env(safe-area-inset-top,0px));
  width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(255,255,255,.16);color:#fff;
  font-size:28px;line-height:1;cursor:pointer;
}
.ampliada-fechar:hover{background:rgba(255,255,255,.28)}

/* ---------- dúvidas ---------- */
.duvidas{margin-top:30px;border-top:1px solid var(--linha)}
.duvida{border-bottom:1px solid var(--linha)}
.duvida-topo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:19px 2px;
  background:none;border:0;cursor:pointer;
  font-family:var(--titulo);font-size:17.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--tinta);text-align:left;
  transition:color .2s;
}
.duvida-topo:hover{color:var(--marca)}
.duvida-sinal{
  position:relative;flex:none;
  width:18px;height:18px;
}
.duvida-sinal::before,
.duvida-sinal::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--marca);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.duvida-sinal::before{width:14px;height:2px}
.duvida-sinal::after{width:2px;height:14px}
.duvida-topo[aria-expanded="true"] .duvida-sinal::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}

/* altura medida pelo JS; visibility em vez do atributo hidden,
   pra conseguir animar. Sem JS, o corpo fica aberto e legível. */
.duvida-corpo{overflow:hidden}
.js .duvida-corpo{
  height:0;visibility:hidden;
  transition:height .34s cubic-bezier(.22,1,.36,1),visibility .34s;
}
.duvida-corpo p{
  padding:0 2px 21px;
  font-size:15.5px;line-height:1.72;color:var(--tinta-2);
  max-width:64ch;
}

.area-texto{
  margin-top:16px;max-width:56ch;
  font-size:16.5px;line-height:1.7;color:var(--tinta-2);
}

.acoes{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.acoes-centro{justify-content:center}

/* ---------- fechamento ---------- */
.fechamento{padding-block:20px 64px}
.fechamento-caixa{
  padding:44px 26px;
  background:linear-gradient(160deg,var(--marca) 0%,var(--marca-escura) 100%);
  border-radius:24px;
  text-align:center;color:#fff;
}
.fechamento-caixa h2{
  font-family:var(--titulo);
  font-size:clamp(27px,5.4vw,38px);
  font-weight:600;line-height:1.14;letter-spacing:-.015em;
}
.fechamento-caixa p{
  margin:14px auto 0;max-width:46ch;
  font-size:16px;line-height:1.65;color:rgba(255,255,255,.85);
}
.fechamento-caixa .bt-secundario{color:#fff;border-color:rgba(255,255,255,.4)}
.fechamento-caixa .bt-secundario:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- rodapé ---------- */
.rodape{
  border-top:1px solid var(--linha);
  padding-block:26px;
  padding-bottom:calc(26px + 76px + env(safe-area-inset-bottom,0px)); /* espaço pro botão flutuante */
}
.rodape-linha{display:flex;flex-direction:column;gap:6px;text-align:center}
.rodape-marca{font-family:var(--titulo);font-size:17px;font-weight:600;color:var(--marca)}
.rodape-info{font-size:13.5px;color:var(--apagado)}

/* ---------- botão flutuante ---------- */
.flutuante{
  position:fixed;z-index:45;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 19px;border-radius:999px;
  background:var(--acao);color:var(--tinta-acao);
  font-size:14.5px;font-weight:700;
  box-shadow:0 12px 30px rgba(20,40,38,.28);
  box-shadow:0 12px 30px color-mix(in srgb, var(--acao) 45%, transparent);
  transition:transform .2s,opacity .25s;
}
.flutuante:hover{transform:translateY(-2px)}
/* some quando o formulário está na tela: levaria pro mesmo lugar */
.flutuante.escondido{opacity:0;pointer-events:none}

/* ---------- faixa de prévia ---------- */
.previa{
  position:relative;z-index:46;
  padding:7px 14px;
  padding-top:calc(7px + env(safe-area-inset-top,0px));
  background:#16302E;color:#F6F2EA;
  font-size:12.5px;text-align:center;letter-spacing:.01em;
}
.previa strong{color:#F0B35B}

/* =========================================================
   TELAS MAIORES
   ========================================================= */
@media (min-width:560px){
  .campo-dupla{grid-template-columns:1fr 1fr}
  .ficha{padding:30px 28px}
}

@media (min-width:700px){
  .so-mobile{display:none}
  .so-desktop{display:inline}
  .cartoes{grid-template-columns:repeat(2,1fr)}
  .listas{grid-template-columns:repeat(2,1fr)}
  .citacoes{grid-template-columns:repeat(3,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr);gap:14px}
  .confianca{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .passos{grid-template-columns:repeat(2,1fr);gap:26px 30px}
  .fechamento-caixa{padding:56px 40px}
  .rodape-linha{flex-direction:row;justify-content:space-between;text-align:left}
  .rodape{padding-bottom:26px}
}

@media (min-width:980px){
  .env{padding-inline:32px}
  .menu{display:flex}
  .capa{padding-block:52px 70px}
  .capa-grade{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .secao{padding-block:82px}
  .cartoes{grid-template-columns:repeat(4,1fr)}
  .listas{grid-template-columns:repeat(4,1fr)}
  .confianca{grid-template-columns:repeat(4,1fr)}
  .galeria{grid-template-columns:repeat(4,1fr)}
  .filtros{margin-inline:0;padding-inline:0;flex-wrap:wrap}
  .flutuante{display:none}   /* no desktop o formulário está sempre à vista */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .js .duvida-corpo{transition:none}
}