/* Motor 1 — negócio local.
   Ordem de camadas: arte SEMPRE por último, senão o token do cliente perde
   para o padrão do motor (bug real, corrigido em 09/09/2026). */
@layer base, componentes, arte;

/* Fonte de marca. Antes o site rodava na fonte do sistema, o que dava aparência
   diferente em cada aparelho e deixava tudo com cara de template. Manrope é
   variável, então UM arquivo de 24KB cobre os dois pesos. Hospedada aqui, sem CDN. */
@font-face {
  font-family: "Manrope";
  src: url("fontes/manrope-latin.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

/* ─────────────────────────── BASE ─────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }
  html, body { max-width: 100%; }

  body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: var(--fs-corpo);
    line-height: 1.55;
    color: var(--cor-texto);
    background: var(--cor-fundo);
  }

  img, video { max-width: 100%; display: block; }
  button { font: inherit; -webkit-appearance: none; appearance: none; }

  h1, h2, h3 {
    font-family: var(--fonte-titulo, "Manrope"), var(--fonte-corpo);
    line-height: 1.15; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.02em;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
  p  { margin: 0 0 1em; }

  .pular-conteudo {
    position: absolute; left: -9999px; top: 0;
    background: #fff; padding: .75em 1em; z-index: 100;
  }
  .pular-conteudo:focus { left: 0; }
}

/* ──────────────────────── COMPONENTES ─────────────────────── */
@layer componentes {

  /* Barra de contato: telefone e WhatsApp sempre à vista. Em serviço local metade
     do tráfego chega decidido e só quer o número. Lead por telefone é o que mais
     fecha, então o `tel:` existe mesmo com o WhatsApp ao lado. Ver docs/04. */
  .cabecalho {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap-sm);
    padding: .5rem var(--esp-lateral);
    background: var(--cor-marca-escura); color: #fff;
    font-size: .9rem;
  }
  .cabecalho__marca {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
    color: #fff; text-decoration: none; font-weight: 800;
    font-family: var(--fonte-titulo, "Manrope"), var(--fonte-corpo);
    letter-spacing: -.01em;
  }
  .cabecalho__marca img {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; padding: 3px;
  }
  /* Site de uma página: o menu leva a seções, não a outras páginas.
     Some no celular, onde a ação vale mais que o índice. */
  .cabecalho__nav { display: none; gap: var(--gap-md); }
  .cabecalho__nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600;
    border-bottom: 2px solid transparent;
  }
  .cabecalho__nav a:hover, .cabecalho__nav a:focus {
    color: #fff; border-bottom-color: var(--cor-marca-clara);
  }
  @media (min-width: 900px) { .cabecalho__nav { display: flex; } }

  /* compensa o cabeçalho fixo quando a âncora rola até a seção */
  [id^="titulo-"] { scroll-margin-top: 5rem; }
  .barra-contato__acoes { display: flex; gap: .4rem; }
  .barra-contato__link {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 44px; padding: .45rem .7rem;
    border-radius: var(--raio-botao);
    color: #fff; text-decoration: none; font-weight: 700;
    border: 1px solid rgba(255,255,255,.35);
  }
  .barra-contato__link--wa { background: var(--cor-cta); color: #06331A; border-color: transparent; }
  .barra-contato__link:hover, .barra-contato__link:focus { filter: brightness(1.08); }
  /* Abaixo de 480px some o nome e fica só a ação, senão a barra estoura. */
  @media (max-width: 479px) {
    .cabecalho__marca span { display: none; }
    .cabecalho { padding-inline: .75rem; }
    .barra-contato__link span { font-size: .85rem; }
  }

  /* Prova colada no CTA, no instante da decisão. */
  .cta-prova {
    display: block; margin-top: .6rem;
    font-size: .85rem; color: var(--cor-texto-suave);
  }
  .cta-prova--claro { color: rgba(255,255,255,.78); }

  /* Botões */
  .botao {
    display: inline-block; text-decoration: none; font-weight: 700;
    padding: .95em 1.5em; border-radius: var(--raio-botao);
    min-height: 48px; line-height: 1.2; text-align: center;
  }
  .botao--cta { background: var(--cor-cta); color: #06331A; }
  .botao, .barra-contato__link, .rodape__wa, .carrossel__seta, .faq__item summary {
    transition: filter .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
  }
  .botao--cta:hover, .botao--cta:focus { filter: brightness(.94); transform: translateY(-1px); }
  .botao--grande { font-size: 1.05rem; padding: 1.05em 1.8em; }

  /* Herói — cor chapada, sem gradiente. Gradiente grande é o tell nº1 de site de IA. */
  .hero {
    background: var(--cor-marca-escura);
    color: #fff;
    position: relative; isolation: isolate;
    padding: calc(var(--esp-secao-y) * 1.15) var(--esp-lateral) calc(var(--esp-secao-y) * 1.15);
    text-align: center;
  }
  /* Foto do resultado no herói, com véu escuro por cima. Cor chapada é plano B,
     não primeira escolha: ver docs/03 item 3. O véu é o que garante contraste. */
  .hero--foto::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgb(11 59 92 / .82), rgb(11 59 92 / .93)),
      var(--hero-foto) center 70% / cover no-repeat;
  }
  .hero__conteudo { max-width: 34rem; margin: 0 auto; }

  /* Prova dentro do herói, fechando a promessa antes de rolar. docs/03 item 5. */
  .hero__prova {
    list-style: none; margin: var(--gap-lg) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .5rem var(--gap-md);
    font-size: .9rem; color: rgba(255,255,255,.9);
  }
  .hero__prova-item { display: inline-flex; align-items: center; gap: .35rem; }
  .hero__prova-item span {
    width: 1.05rem; height: 1.05rem; flex: none;
    background: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .hero__prova-item--tempo {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 15-4-4 1.41-1.41L11 13.17l4.59-4.58L17 10l-6 6z'/%3E%3C/svg%3E");
  }
  .hero__prova-item--area {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  }
  .hero__prova-item--google { color: var(--cor-estrela); font-weight: 700; }
  .hero__prova-item--google span {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  }
  .hero__logo {
    margin: 0 auto var(--gap-md);
    border-radius: 50%; background: #fff; padding: .5rem;
  }
  .hero h1 { text-wrap: balance; }
  /* Uma expressão em cor por headline. O olho acha o assunto em menos de 1s. */
  .hero h1 .destaque { color: var(--cor-marca-clara); }
  .hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.82);
    max-width: 30rem; margin-inline: auto;
  }
  .hero .botao { margin-top: var(--gap-md); }

  /* Prova imediata */
  .prova {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; gap: var(--gap-sm);
    justify-content: center;
    margin-top: calc(var(--esp-secao-y) * -.55);
    padding: var(--gap-lg) var(--esp-lateral);
    background: var(--cor-fundo-alt);
    border-radius: var(--raio-folha) var(--raio-folha) 0 0;
    border-bottom: 1px solid var(--cor-borda);
  }
  .prova__item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: .1rem;
    flex: 1 1 9rem; text-align: center;
    background: #fff; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-cartao); padding: var(--gap-md) .75rem;
  }
  .prova__item strong { font-size: 1.45rem; color: var(--cor-marca-escura); }
  .prova__item span:last-child { font-size: .85rem; color: var(--cor-texto-suave); margin-top: auto; }
  .prova__item a { color: var(--cor-marca-escura); font-weight: 700; }
  .prova__google strong { font-size: 1.75rem; }
  .prova__google span:last-child { color: var(--cor-marca-escura); font-weight: 700; font-size: .95rem; }
  /* Ícone por cartão. Máscara em vez de <img> para herdar a cor da marca e não
     custar requisição. O cartão do Google já tem as estrelas. */
  .prova__icone {
    width: 1.5rem; height: 1.5rem; display: block;
    background: var(--cor-marca-clara);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .prova__item--tempo {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 15-4-4 1.41-1.41L11 13.17l4.59-4.58L17 10l-6 6z'/%3E%3C/svg%3E");
  }
  .prova__item--area {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  }

  .prova__estrelas { color: var(--cor-estrela); font-size: 1.15rem; letter-spacing: .08em; }

  /* Seções — título à ESQUERDA com filete. Tudo centralizado é tell de IA. */
  .secao { padding: var(--esp-secao-y) var(--esp-lateral); max-width: var(--largura-max); margin: 0 auto; }
  /* Sub-headline de seção: centralizada, filete centralizado junto.
     Decisão da Bruna em 10/09/2026. Contraria o item 1 de docs/03, que pede
     título à esquerda; o documento precisa ser atualizado ou a regra revista. */
  .secao > h2 {
    position: relative;
    text-align: center; text-wrap: balance;
    margin-bottom: var(--gap-lg); padding-top: var(--gap-md);
  }
  .secao > h2::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 3rem; height: 3px; background: var(--cor-marca-clara);
  }
  /* Fundo sangra até a borda, conteúdo fica numa coluna centralizada.
     A coluna é do GRID, não margem automática dos filhos: qualquer componente
     que declare `margin` shorthand (lista-diferencial, passos, clientes-atendidos)
     zerava o `margin-inline: auto` e caía na borda esquerda.
     Bug real, visto no Safari em 09/09/2026. */
  /* Alternância por POSIÇÃO, não por classe escrita à mão. Reordenar seção
     quebrava a alternância e deixava duas do mesmo fundo coladas, que é
     exatamente o que faz a página parecer um bloco contínuo (docs/03 item 1).
     Aconteceu três vezes numa reordenação só, em 10/09/2026. */
  main > .secao:nth-of-type(even) {
    background: var(--cor-fundo-alt);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, calc(var(--largura-max) - var(--esp-lateral) * 2));
    justify-content: center;
  }
  /* Arquétipo escuro (autoridade, oficina, sabor) usa `fundo-alt` escuro, e aí o
     texto direto da seção precisa inverter. Cartão fica de fora de propósito: ele
     tem superfície branca própria e o texto dele já está correto. */
  main > .secao:nth-of-type(even) { color: var(--cor-texto-alt, var(--cor-texto)); }
  main > .secao:nth-of-type(even) > h2,
  main > .secao:nth-of-type(even) > p,
  main > .secao:nth-of-type(even) > ul,
  main > .secao:nth-of-type(even) > ol { color: inherit; }
  main > .secao:nth-of-type(even) > .passos p,
  main > .secao:nth-of-type(even) > .lista-diferencial li,
  main > .secao:nth-of-type(even) > .atendimento__nota {
    color: var(--cor-texto-suave-alt, var(--cor-texto-suave));
  }
  /* Superfície branca declara a própria cor de texto, em qualquer contexto.
     Sem isso o `color` da seção escura herda para dentro do cartão branco e dá
     branco sobre branco: 1,00:1. O checador visual pegou no FAQ. */
  .cartao-servico, .faq__item, .depoimento, .publico, .prova__item {
    color: var(--cor-texto);
  }

  /* Seção de leitura: bloco estreito, CENTRALIZADO na página, texto alinhado à
     esquerda dentro dele. Sem isso o conteúdo de 40rem encostava na esquerda de
     uma coluna de 60rem e deixava um buraco à direita. */
  .secao--texto { max-width: var(--largura-texto, 46rem); }
  main > .secao:nth-of-type(even).secao--texto {
    /* o fundo continua sangrando de borda a borda; só a coluna estreita */
    max-width: none;
    grid-template-columns: minmax(0, calc(var(--largura-texto, 46rem) - var(--esp-lateral) * 2));
  }

  /* segue o eixo da sub-headline, que passou a ser centralizada */
  .secao__cta { text-align: center; margin-top: var(--gap-lg); }

  /* Serviços — texto à esquerda, sem sombra. Sombra igual em tudo achata a hierarquia. */
  .grade-servicos { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); }
  .cartao-servico {
    background: #fff; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-cartao); padding: var(--gap-lg);
    text-align: left;
  }
  /* Ícone por serviço. Específico, não decorativo: diz de que peça se trata. */
  .cartao-servico__icone {
    width: 1.75rem; height: 1.75rem; display: block; margin-bottom: .6rem;
    background: var(--cor-marca-clara);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .cartao-servico--destaque .cartao-servico__icone { background: #fff; }
  .cartao-servico--sofa { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 9V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v2a2 2 0 0 0-2 2v6h2v2h2v-2h10v2h2v-2h2v-6a2 2 0 0 0-2-2zM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.17c-.6.35-1 .99-1 1.83v2H7v-2c0-.84-.4-1.48-1-1.83V7z'/%3E%3C/svg%3E"); }
  .cartao-servico--cadeira { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6h1a2 2 0 0 1 2 2v3h-2v-3H6v3H4v-3a2 2 0 0 1 2-2h1zm2-6v6h6V6H9zM6 18h2v3H6v-3zm10 0h2v3h-2v-3z'/%3E%3C/svg%3E"); }
  .cartao-servico--colchao { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h16a2 2 0 0 1 2 2v3H2v-3a2 2 0 0 1 2-2zm-2 6h20v4h-2v-2H4v2H2v-4zm4-8V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1h-2V6H8v0H6z'/%3E%3C/svg%3E"); }
  .cartao-servico--tapete { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h18v10H3V7zm2 2v6h14V9H5zM2 5h20v1H2V5zm0 13h20v1H2v-1zM7 10h2v4H7v-4zm4 0h2v4h-2v-4zm4 0h2v4h-2v-4z'/%3E%3C/svg%3E"); }
  .cartao-servico--gota { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s6.5 7 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 9 12 2 12 2zm0 3.4c-1.7 2-4.5 5.8-4.5 8.1a4.5 4.5 0 0 0 9 0c0-2.3-2.8-6.1-4.5-8.1z'/%3E%3C/svg%3E"); }
  .cartao-servico--predio { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V7l8-4v18H3zm10 0V9l8 3v9h-8zM6 10h2v2H6v-2zm0 4h2v2H6v-2zm10 0h2v2h-2v-2z'/%3E%3C/svg%3E"); }
  .cartao-servico h3 { color: var(--cor-marca-escura); }
  .cartao-servico p { margin-bottom: 0; color: var(--cor-texto-suave); }
  .cartao-servico__preco { font-weight: 700; color: var(--cor-marca-escura); margin: .5rem 0 0; }
  /* Um destaque por seção, não todos iguais */
  .cartao-servico--destaque {
    background: var(--cor-marca-escura); border-color: var(--cor-marca-escura); color: #fff;
    display: flex; flex-direction: column; justify-content: center;
  }
  .cartao-servico--destaque h3 { color: #fff; }
  .cartao-servico--destaque p { color: rgba(255,255,255,.8); }

  /* Diferenciais */
  .lista-diferencial {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--gap-md);
  }
  .lista-diferencial li { display: flex; align-items: flex-start; gap: .65rem; text-align: left; }
  .lista-diferencial li::before {
    content: "✓"; flex: none; color: var(--cor-cta-escura); font-weight: 800;
  }

  /* Prova corporativa — é o ativo mais forte do site, então é seção, não nota de
     rodapé dentro de outro bloco. */
  /* Âncora escura: UM bloco escuro no meio de um site claro chama atenção;
     metade do site escuro não chama nada. Serviço de limpeza vende limpeza, então
     o claro é a base e o escuro entra só onde está o ativo mais forte. docs/03. */
  /* Precisa do mesmo peso do seletor de alternância (main > .secao:nth-of-type),
     senão o fundo alternado vence e o texto claro fica sobre fundo claro.
     Bug real de 10/09/2026. */
  main > .secao.secao--ancora {
    background: var(--cor-marca-escura);
    color: #fff;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, calc(var(--largura-texto, 46rem) - var(--esp-lateral) * 2));
    justify-content: center;
  }
  main > .secao.secao--ancora > h2 { color: #fff; }
  main > .secao.secao--ancora > h2::before { background: var(--cor-marca-clara); }

  .marcas__lista {
    margin: 0; text-align: center;
    font-size: 1.15rem; line-height: 1.75; color: rgba(255,255,255,.88);
    text-wrap: balance;
  }
  /* Distinção por peso, não por cor: a marca-clara sobre a marca-escura dá 4,27:1
     e não passa nos 4,5:1 exigidos. Branco em negrito dá 12:1 e destaca igual. */
  .marcas__lista strong { color: #fff; }

  /* Carrossel */
  .carrossel { position: relative; margin-inline: calc(var(--esp-lateral) * -1); }
  .carrossel__trilho {
    display: flex; gap: var(--gap-md);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .25rem var(--esp-lateral) var(--gap-md);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* `safe` centraliza quando cabe e volta pro início quando estoura.
       Sem ele, carrossel de 2 ou 3 slides encosta na esquerda e deixa
       metade da coluna vazia no desktop. */
    justify-content: safe center;
  }
  .carrossel__trilho::-webkit-scrollbar { display: none; }
  .carrossel__slide { flex: 0 0 78%; scroll-snap-align: center; }
  .carrossel__slide img, .carrossel__slide video {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: var(--raio-cartao); border: 1px solid var(--cor-borda);
    box-shadow: 0 10px 26px rgb(16 32 45 / .12);
  }
  .carrossel--video .carrossel__slide video { aspect-ratio: 9 / 16; }
  .carrossel__seta {
    display: flex; position: absolute; top: 44%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--cor-borda); background: #fff;
    color: var(--cor-marca-escura); font-size: 1.5rem; line-height: 1;
    align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 14px rgb(16 32 45 / .15);
  }
  .carrossel__seta--prev { left: .5rem; }
  .carrossel__seta--next { right: .5rem; }
  .carrossel__dots { display: flex; justify-content: center; gap: 0; margin-top: -.5rem; }
  /* bolinha continua de 7px na tela, mas a área de toque tem 44px:
     o padding conta como alvo e o background-clip mantém o visual pequeno. */
  .carrossel__dot {
    width: 7px; height: 7px; box-sizing: content-box;
    padding: 19px 9px; border: none; border-radius: 50%;
    background: var(--cor-borda); background-clip: content-box;
    cursor: pointer;
  }
  .carrossel__dot[aria-current="true"] {
    width: 20px; border-radius: 4px;
    background: var(--cor-marca-clara); background-clip: content-box;
  }

  /* Quem a gente atende: o parágrafo solto virava um bloco de texto perdido num
     mar de branco. Três cartões dão corpo e respondem "serve pro meu caso?". */
  .publicos { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); }
  .publico {
    background: #fff; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-cartao); padding: var(--gap-lg);
    text-align: left;
  }
  .publico h3 { color: var(--cor-marca-escura); margin: .6rem 0 .3em; }
  .publico p { margin: 0; color: var(--cor-texto-suave); }
  .publico__icone {
    width: 1.75rem; height: 1.75rem; display: block;
    background: var(--cor-marca-clara);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .publico--casa {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3L12 3z'/%3E%3C/svg%3E");
  }
  .publico--empresa {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V7l8-4v18H3zm10 0V9l8 3v9h-8zM6 10h2v2H6v-2zm0 4h2v2H6v-2zm10 0h2v2h-2v-2z'/%3E%3C/svg%3E");
  }
  .publico--condominio {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21V8l6-3v16H2zm7 0V3l7 3v15H9zm8 0V10l5 2v9h-5zM4 11h2v2H4v-2zm7-4h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E");
  }
  /* Cidades como itens destacados, não escondidas dentro de um parágrafo.
     É o que a pessoa procura ("higienização de sofá em São Caetano") e o que
     o Google lê como cobertura local. */
  .cidades {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .5rem; margin: var(--gap-lg) 0 0;
  }
  .cidades__rotulo {
    width: 100%; text-align: center; margin-bottom: .25rem;
    font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--cor-texto-suave);
  }
  .cidades__item {
    display: inline-block; padding: .45rem .95rem;
    border: 1px solid var(--cor-borda); border-radius: 999px;
    background: #fff; color: var(--cor-marca-escura); font-weight: 700;
    font-size: .95rem;
  }

  .atendimento__nota {
    margin: var(--gap-lg) 0 0; text-align: center;
    color: var(--cor-texto-suave);
  }

  /* Depoimentos */
  /* Flex com wrap e centro em vez de grid de colunas fixas: a última linha
     incompleta fica CENTRALIZADA em vez de deixar órfão encostado à esquerda.
     Serve para qualquer quantidade de depoimento. */
  .grade-depoimentos {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--gap-md);
  }
  .depoimento { flex: 1 1 17rem; max-width: 23rem; }
  .depoimento {
    background: #fff; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-cartao); padding: var(--gap-lg); margin: 0; text-align: left;
  }
  .depoimento__estrelas { color: var(--cor-estrela); letter-spacing: .06em; }
  .depoimento cite {
    display: block; margin-top: var(--gap-sm); font-style: normal;
    font-weight: 700; color: var(--cor-marca-escura);
  }

  /* Como funciona */
  .passos {
    list-style: none; counter-reset: passo; margin: 0; padding: 0;
    display: grid; gap: var(--gap-lg); text-align: left;
  }
  .passos li { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-md); align-items: start; }
  /* Número grande transforma lista em sequência e ancora a leitura. */
  .passos__numero {
    display: block; counter-increment: passo;
    font-family: var(--fonte-titulo, "Manrope"), var(--fonte-corpo);
    font-size: 2.4rem; font-weight: 800; line-height: 1;
    color: var(--cor-marca-clara); letter-spacing: -.03em;
    min-width: 2.6rem;
  }
  .passos__numero::before { content: "0" counter(passo); }
  .passos h3 { margin-bottom: .2em; }
  .passos p { margin: 0; color: var(--cor-texto-suave); }

  /* FAQ */
  .faq { display: grid; gap: var(--gap-sm); }
  .faq__item {
    background: #fff; border: 1px solid var(--cor-borda);
    border-radius: var(--raio-botao); padding: var(--gap-sm) var(--gap-lg);
  }
  .faq__item summary {
    font-weight: 700; cursor: pointer; min-height: 48px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; list-style: none;
  }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary::after {
    content: "+"; flex: none; font-weight: 400; font-size: 1.4rem;
    color: var(--cor-marca-clara);
  }
  .faq__item[open] summary::after { content: "–"; }
  .faq__item p { margin: .5rem 0 .75rem; color: var(--cor-texto-suave); }

  /* CTA final */
  .cta-final {
    text-align: center; padding: var(--esp-secao-y) var(--esp-lateral);
    background: var(--cor-marca-escura); color: #fff;
  }
  .cta-final h2 { margin-bottom: var(--gap-md); border: 0; display: block; text-align: center; max-width: none; }

  /* Rodapé — folga no fim pro botão flutuante não cobrir conteúdo */
  .rodape {
    text-align: center; padding: var(--gap-lg) var(--esp-lateral) 7rem;
    color: var(--cor-texto-suave); font-size: .9rem;
  }
  .rodape a { color: var(--cor-marca-escura); }
  .rodape__logo {
    width: 56px; height: 56px; border-radius: 50%;
    background: #fff; padding: 4px; margin: 0 auto var(--gap-md);
    border: 1px solid var(--cor-borda);
  }
  .rodape__nome { font-weight: 700; color: var(--cor-texto); margin-bottom: .25rem; }
  .rodape__pino {
    display: inline-block; width: 1rem; height: 1rem;
    vertical-align: -2px; margin-right: .3rem;
    background: var(--cor-marca-clara);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  }
  .rodape__redes { display: flex; justify-content: center; gap: .6rem; margin: var(--gap-md) 0 0; }
  .rodape__rede {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--cor-borda); background: #fff;
  }
  .rodape__rede span {
    width: 1.25rem; height: 1.25rem; background: var(--cor-marca-escura);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .rodape__rede--instagram {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zM17.8 6a1.2 1.2 0 1 1-1.2 1.2A1.2 1.2 0 0 1 17.8 6z'/%3E%3C/svg%3E");
  }
  .rodape__rede--facebook {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
  }
  .rodape__area { margin-bottom: var(--gap-md); }
  .rodape__wa {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 48px; padding: .6rem 1.15rem;
    border: 1px solid var(--cor-borda); border-radius: var(--raio-botao);
    background: #fff; color: var(--cor-marca-escura);
    font-weight: 700; text-decoration: none;
  }
  .rodape__wa:hover, .rodape__wa:focus { border-color: var(--cor-marca-clara); }
  /* Base legal declarada, em tom discreto: precisa existir, não precisa competir. */
  .rodape__lgpd {
    max-width: 26rem; margin: var(--gap-lg) auto 0;
    font-size: .72rem; line-height: 1.5; opacity: .62;
  }

  /* WhatsApp flutuante */
  .whatsapp-flutuante {
    position: fixed; right: 1rem; bottom: 1rem;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--cor-cta); color: #06331A;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgb(0 0 0 / .25); z-index: 50;
  }

  @media (min-width: 768px) {
    /* Os tokens `-desktop` do arte.json existiam e nunca eram lidos: o site subia
       com espaçamento de celular em tela grande. Corrigido em 09/09/2026. */
    .secao, .cta-final { padding-block: var(--esp-secao-y-desktop, var(--esp-secao-y)); }
    .secao, .cta-final, .hero, .prova, .rodape {
      padding-inline: var(--esp-lateral-desktop, var(--esp-lateral));
    }
    .hero { padding-block: calc(var(--esp-secao-y-desktop, var(--esp-secao-y)) * 1.15)
                           calc(var(--esp-secao-y-desktop, var(--esp-secao-y)) * 1.15); }
    .hero h1 { font-size: var(--fs-h1-desktop, var(--fs-h1)); }
    .secao > h2 { margin-bottom: var(--gap-xl, var(--gap-lg)); }

    .hero__conteudo { max-width: 46rem; }
    .grade-servicos { grid-template-columns: repeat(3, 1fr); }
    /* 5 cards em 3 colunas deixam a 2ª linha pela metade. O destaque estica e
       fecha a grade. Vale para qualquer contagem que sobre 2 na última linha. */
    .grade-servicos > :last-child:nth-child(3n + 2) { grid-column: span 2; }
    .publicos { grid-template-columns: repeat(3, 1fr); }
    .whatsapp-flutuante { display: none; }
    .rodape { padding-bottom: var(--gap-lg); }
    .carrossel { margin-inline: 0; }
    .carrossel__trilho { padding: .25rem .25rem var(--gap-md); }
    .carrossel__slide { flex-basis: 30%; }
    .carrossel--video .carrossel__slide { flex-basis: 22%; }
    .carrossel__seta { width: 46px; height: 46px; }
  }

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

/* A camada `arte` é gerada pelo build a partir do arte.json e entra AQUI, por último. */

/* Camada `arte` — GERADA pelo build a partir do arte.json. Não editar à mão.
   Vem por último de propósito: o token do cliente tem que vencer o do motor. */
@layer arte {
  :root {
    --cor-marca-escura: #0B3B5C;
    --cor-marca-clara: #1CA9C9;
    --cor-cta: #25D366;
    --cor-cta-escura: #128C4A;
    --cor-estrela: #E8930C;
    --cor-texto: #16202A;
    --cor-texto-suave: #4B5A66;
    --cor-fundo: #FFFFFF;
    --cor-fundo-alt: #DDE8EE;
    --cor-borda: #C3D5DF;
    --cor-texto-alt: #16202A;
    --cor-texto-suave-alt: #4B5A66;
    --fonte-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-corpo: 1.0625rem;
    --fs-h1: clamp(1.9rem, 7.5vw, 2.5rem);
    --fs-h2: clamp(1.5rem, 4.5vw, 2rem);
    --fs-h3: 1.15rem;
    --esp-secao-y: 4rem;
    --esp-lateral: 1.25rem;
    --gap-sm: .75rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --largura-max: 60rem;
    --largura-texto: 46rem;
    --raio-botao: .5rem;
    --raio-cartao: .9rem;
    --raio-folha: 1.5rem;
    color-scheme: light;
  }

  @media (min-width: 768px) {
    :root {
      --fs-h1: 3rem;
      --esp-secao-y: 6rem;
      --esp-lateral: 2rem;
    }
  }
}