/* =====================================================================
   COSTA MOBI WASH — folha de estilo do site
   =====================================================================

   Organização (procure pelo cabeçalho em maiúsculas):

     1. VARIÁVEIS      — paleta oficial da marca e escalas
     2. BASE           — reset curto e tipografia
     3. COMPONENTES    — botões, cartões, selos, campos
     4. CABEÇALHO
     5. LANDING        — a camada de conversão da primeira visita
     6. SITE           — hero, benefícios, serviços, resultados, etc.
     7. AGENDAMENTO    — o formulário em etapas
     8. RODAPÉ E WHATSAPP
     9. RESPONSIVO
    10. MOVIMENTO      — animações e o respeito a quem pediu menos delas

   A paleta vem do manual da marca (_marca/Manual/GUIA-DA-IDENTIDADE.md) e
   não deve ser alterada aqui: azul-marinho, azul oceano, ciano, aqua e
   branco. O verde entra SÓ em confirmação — é o único momento em que uma
   cor de fora da marca se justifica, porque "deu certo" precisa ser lido
   sem ninguém precisar ler.
   ===================================================================== */


/* =====================================================================
   1. VARIÁVEIS
   ===================================================================== */

:root {
  /* Marca */
  --navy:        #061B3B;
  --navy-800:    #0A2A57;
  --navy-700:    #103A72;
  --blue:        #087DD0;

  /* AZUL PARA TEXTO. O --blue de cima e a cor de MARCA: ele pinta preenchimento,
     borda, icone e fundo, onde o minimo exigido e 3:1 e ele passa folgado.
     Como TEXTO sobre branco ele da 4,33, e o minimo e 4,5. Falha por um triz, e
     falhava em todo link do site (a regra do `a`), no rotulo de secao e nos
     botoes de texto. Este tom e o mesmo matiz, escuro o suficiente para passar:
     5,28 sobre branco e 4,69 sobre o cinza claro dos blocos.
     NAO troque o de cima por este: la o tom vivo e proposital. */
  --blue-tx:     #0A6FB8;
  --cyan:        #08BCEB;
  --aqua:        #66E4F5;

  /* Neutros */
  --white:       #FFFFFF;
  --gray-50:     #F7F9FC;
  --gray-100:    #EDF2F8;
  --gray-200:    #DFE7F0;
  --gray-300:    #C6D2E0;
  /* ERA #7C8CA1, e dava 3,43 sobre branco contra o minimo de 4,5. Nao era
     enfeite: e a cor de --tx-mute, que pinta o "A partir de" de cada preco, o
     tempo de cada servico e as legendas, ou seja, o texto que EXPLICA. Sao 32
     lugares na home. Este tom passa nos tres fundos do site: 5,40 no branco,
     5,12 no gray-50 e 4,80 no gray-100. */
  --gray-500:    #5E6B80;
  --gray-700:    #47566A;
  --graphite:    #26313F;

  /* Ação positiva — confirmação, disponível, sucesso */
  --green:       #12A150;
  --green-soft:  #E7F7EE;
  --red:         #D64545;
  --red-soft:    #FDECEC;
  --amber:       #C77700;

  /* Texto */
  --tx:          var(--navy);
  --tx-soft:     var(--gray-700);
  --tx-mute:     var(--gray-500);

  /* Superfícies */
  --bg:          var(--white);
  --bg-alt:      var(--gray-50);
  --linha:       var(--gray-200);

  /* Sombras — curtas e suaves. Sombra pesada envelhece o layout. */
  --sh-sm:  0 1px 2px rgba(6, 27, 59, .06), 0 1px 3px rgba(6, 27, 59, .04);
  --sh-md:  0 4px 12px rgba(6, 27, 59, .07), 0 2px 4px rgba(6, 27, 59, .04);
  --sh-lg:  0 18px 40px rgba(6, 27, 59, .12), 0 4px 12px rgba(6, 27, 59, .06);
  --sh-xl:  0 32px 64px rgba(6, 27, 59, .18);

  /* Raios */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Ritmo vertical. Uma escala só, usada em tudo: é o que faz seções
     diferentes parecerem parte do mesmo site. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --largura: 1200px;
  --largura-texto: 68ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}


/* =====================================================================
   2. BASE
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden PRECISA vencer.
   A folha do navegador dá [hidden] { display: none }, mas qualquer regra
   nossa com display (e este arquivo está cheio delas: .btn é inline-flex,
   .resumo-linha é flex) tem especificidade maior e ganha. O resultado é
   silencioso e traiçoeiro: el.hidden = true no JavaScript não esconde
   nada, o botão continua clicável e o fluxo trava sem ninguém entender.
   Foi exatamente o que aconteceu com o botão de orçamento da van e com a
   linha de deslocamento do resumo. Uma regra só, aqui em cima, e o
   problema fica impossível de acontecer de novo em qualquer componente. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;

  /* SALTO INSTANTÂNEO, e não rolagem animada. Era `smooth`, e num site de uma
     página só isso não funciona: TODO link do menu é um salto longo. A seção
     de agendamento fica a 13 mil pixels do topo no celular e a quase 10 mil
     numa janela estreita. A animação atravessava treze telas de conteúdo, e
     como tudo abaixo da dobra nasce com opacidade zero até o observador de
     rolagem alcançar, o que passava era branco: parecia site travado
     carregando, justamente no clique de "Agendar agora".

     Rolagem suave é boa em página curta, onde o movimento mostra que você
     desceu dois blocos. Aqui ela só atrasa quem já disse aonde quer ir. */
  scroll-behavior: auto;

  /* O cabeçalho é fixo: sem isto, clicar em "Serviços" para a seção com o
     título escondido atrás da barra. */
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Enquanto a landing está aberta, o site atrás não rola. Sem isto, o dedo
   arrasta a página de baixo no celular e a landing "escorrega".

   O estado PADRÃO é "landing aberta": o script no <head> tira a trava
   marcando .sem-landing antes do primeiro pixel. Fazer ao contrário, travar
   só depois que o JS rodar, mostraria o site por um instante e depois a
   landing por cima, que é exatamente o efeito que este desenho existe para
   evitar.

   ================== ARMADILHA, LEIA ANTES DE CRIAR PÁGINA ==================
   Padrão travado significa que TODA página que usa este CSS nasce SEM ROLAGEM.
   A home solta a trava no script do <head>. Qualquer outra página tem que
   declarar a classe na mão:

       <html lang="pt-BR" class="sem-landing">

   Sem isso a pessoa vê a primeira tela e mais nada, e no celular parece que o
   site travou. Aconteceu de verdade em três páginas ao mesmo tempo:
   acompanhar.html, avaliar.html e 404.html. A de avaliar era a pior: o cliente
   recebia o link para dar as estrelas e não conseguia rolar até o botão de
   enviar, então a avaliação simplesmente não acontecia e ninguém ficava
   sabendo por quê.
   =========================================================================== */
html:not(.sem-landing), html:not(.sem-landing) body { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-tx); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy-700); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }

/* Foco visível em tudo que recebe teclado. Um site de serviço é usado por
   gente de todo tipo, e quem navega por Tab não pode ficar perdido. */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Para leitor de tela: some da tela, continua no fluxo de acessibilidade. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Primeiro elemento focável da página — pular direto para o conteúdo. */
.pular {
  position: absolute; left: var(--s4); top: -100px;
  z-index: 200; padding: var(--s3) var(--s5);
  background: var(--navy); color: var(--white);
  border-radius: var(--r-sm); transition: top .2s var(--ease);
}
.pular:focus { top: var(--s4); color: var(--white); }

.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.secao { padding-block: clamp(56px, 9vw, 112px); }
.secao--alt { background: var(--bg-alt); }
.secao--escura {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color: var(--white);
}
.secao--escura h2, .secao--escura h3 { color: var(--white); }
.secao--escura p { color: rgba(255, 255, 255, .82); }

.cabecalho-secao {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 64px);
  text-align: center;
}
.cabecalho-secao p {
  font-size: 1.08rem;
  color: var(--tx-soft);
  margin-bottom: 0;
}
.secao--escura .cabecalho-secao p { color: rgba(255, 255, 255, .78); }

/* Etiqueta acima do título da seção. */
.olho {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--gray-100);
  color: var(--blue-tx);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.secao--escura .olho { background: rgba(255, 255, 255, .12); color: var(--aqua); }


/* =====================================================================
   3. COMPONENTES
   ===================================================================== */

/* ---- Botões --------------------------------------------------------
   Altura mínima de 48px em todos: é o tamanho que um polegar acerta sem
   pensar. A maior parte dos agendamentos vem do celular. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s6);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* O BOTAO PRINCIPAL: o gradiente ia longe demais no claro.
   Ele terminava em --cyan (#08BCEB), e texto BRANCO sobre esse ciano da
   2,23:1. O minimo para texto pequeno e 4,5. Ou seja, o elemento mais
   importante da pagina, o "Agendar agora", tinha o pior contraste do site:
   a metade direita do rotulo lavava no fundo, e no sol de rua sumia.

   O CONSERTO MANTEM O BOTAO, so traz o gradiente para a faixa em que branco
   se le. Continua sendo um gradiente azul da Costa, com profundidade visivel
   entre as duas pontas, e o brilho que ele tinha vira brilho de SOMBRA e nao
   de texto apagado. Medido nas duas pontas:

     #0C5C99  ->  branco 6,98
     #0A72C0  ->  branco 5,02

   O ciano nao morreu: ele continua nos fundos, nos selos e nos detalhes, que
   e onde tom vivo nao precisa carregar texto pequeno em cima. */
.btn--principal {
  background: linear-gradient(135deg, #0C5C99 0%, #0A72C0 100%);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(10, 92, 153, .34);
}
.btn--principal:hover {
  color: var(--white);
  /* O hover clareia de leve, e a ponta clara continua dentro do seguro:
     #0A72C0 da 5,02 com branco. Clarear ate o ciano traria o problema de volta
     justamente quando o dedo esta em cima do botao. */
  background: linear-gradient(135deg, #0A6FB8 0%, #0A72C0 100%);
  box-shadow: 0 14px 32px rgba(10, 92, 153, .44);
  transform: translateY(-2px);
}

.btn--escuro { background: var(--navy); color: var(--white); box-shadow: var(--sh-md); }
.btn--escuro:hover { background: var(--navy-800); color: var(--white); transform: translateY(-2px); }

.btn--contorno {
  background: transparent;
  border-color: var(--gray-300);
  color: var(--navy);
}
.btn--contorno:hover { border-color: var(--blue); color: var(--blue-tx); background: var(--white); }

/* Sobre fundo escuro (hero e landing). */
.btn--claro {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .38);
  color: var(--white);
  backdrop-filter: blur(8px);
}
.btn--claro:hover { background: rgba(255, 255, 255, .2); border-color: var(--white); color: var(--white); }

.btn--zap { background: #25D366; color: #06331A; box-shadow: 0 8px 24px rgba(37, 211, 102, .3); }
.btn--zap:hover { background: #1FBE5B; color: #06331A; transform: translateY(-2px); }

.btn--bloco { width: 100%; }
/* 44px e nao 42. O botao base tem 52, e este e a versao compacta usada no topo
   e dentro de cartao. Dois pixels parecem nada, mas 44 e o piso de alvo de
   toque que o resto do projeto respeita, e este e o botao "Agendar agora" do
   cabecalho, ou seja, o que mais gente aperta com o polegar. */
.btn--pequeno { min-height: 44px; padding-inline: var(--s5); font-size: .92rem; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

.botoes { display: flex; flex-wrap: wrap; gap: var(--s3); }
.botoes--centro { justify-content: center; }

/* ---- Cartão -------------------------------------------------------- */
.cartao {
  background: var(--white);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease);
}
.cartao--alcavel:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}

/* ---- Selo ---------------------------------------------------------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700;
  background: var(--gray-100); color: var(--tx-soft);
}
.selo--verde { background: var(--green-soft); color: var(--green); }
.selo--ciano { background: rgba(8, 188, 235, .12); color: #056C89; }

/* ---- Ícone em círculo ---------------------------------------------- */
.icone {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(8, 125, 208, .12), rgba(8, 188, 235, .16));
  color: var(--blue);
  margin-bottom: var(--s4);
  flex-shrink: 0;
}
.icone svg { width: 28px; height: 28px; }
.secao--escura .icone { background: rgba(255, 255, 255, .1); color: var(--aqua); }

/* ---- Foto ----------------------------------------------------------
   O bloco tem um gradiente da marca ATRÁS da imagem. Enquanto a foto real
   não estiver na pasta (ou se ela falhar), o espaço continua sendo um
   bloco desenhado, não um ícone de imagem quebrada. Ver assets/img/LEIA-ME. */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(102, 228, 245, .35), transparent 55%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 55%, var(--blue) 100%);
  aspect-ratio: 4 / 3;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px);
  pointer-events: none;
}

/* ---- Campos de formulário ------------------------------------------ */
.campo { margin-bottom: var(--s5); }
.campo > label,
.campo-legenda {
  display: block;
  margin-bottom: var(--s2);
  font-weight: 700;
  font-size: .93rem;
  color: var(--navy);
}
.campo-dica { font-size: .84rem; color: var(--tx-mute); margin: 4px 0 0; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: 16px;         /* 16px evita o zoom automático do iOS ao focar */
  color: var(--tx);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

input:hover, select:hover, textarea:hover { border-color: var(--gray-300); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(8, 125, 208, .14);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, .12);
}
::placeholder { color: var(--gray-500); opacity: 1; }

.campo-erro {
  display: none;
  margin: 6px 0 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--red);
}
.campo-erro.aparece { display: block; }

.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.tripla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }

/* O honeypot. Escondido de gente, visível para robô — que preenche tudo o
   que encontra no HTML. Ver cmw_honeypot_pegou() no back-end.
   `display:none` seria pior: os robôs mais novos já ignoram campo oculto. */
.armadilha {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Avisos -------------------------------------------------------- */
.aviso {
  display: flex; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r);
  font-size: .95rem;
  margin-bottom: var(--s5);
}
.aviso--erro { background: var(--red-soft); color: #8E2020; }
.aviso--ok   { background: var(--green-soft); color: #0A6B36; }
.aviso[hidden] { display: none; }


/* =====================================================================
   4. CABEÇALHO
   ===================================================================== */

.topo {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.topo.rolou { border-bottom-color: var(--linha); box-shadow: var(--sh-sm); }

.topo-int {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 100px;
}
.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img { height: 68px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.nav a {
  position: relative;
  font-weight: 600; font-size: .97rem;
  color: var(--tx-soft);
  padding-block: var(--s2);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--navy); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.topo-acoes { display: flex; align-items: center; gap: var(--s3); }

.menu-btn {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-sm);
  cursor: pointer; color: var(--navy);
}
.menu-btn svg { width: 26px; height: 26px; }


/* =====================================================================
   5. LANDING

   Fica POR CIMA do site inteiro, em position:fixed. Não é outra página:
   assim não existe redirecionamento (nem o piscar branco entre duas
   páginas), a URL continua sendo a raiz — que é a que o Google indexa — e
   o visitante que já viu a landing recebe o site direto, sem nenhuma volta
   pelo servidor. Quem decide é o script no <head>, antes do primeiro
   pixel: ver assets/js/site.js e o bloco inline em index.html.
   ===================================================================== */

.lp {
  position: fixed; inset: 0; z-index: 150;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy);
  color: var(--white);
}
/* Sem a landing (visitante dos últimos 15 dias) ela nem é desenhada. */
html.sem-landing .lp { display: none; }

.lp__topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) clamp(20px, 4vw, 48px);
}
.lp__topo img { height: 74px; }

.lp__fechar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  color: var(--white); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lp__fechar:hover { background: rgba(255, 255, 255, .18); border-color: var(--white); }

/* ---- Hero da landing ---- */
.lp__hero {
  position: relative;
  min-height: 100svh;              /* svh: no celular, desconta a barra do navegador */
  display: grid; align-items: center;
  padding: 120px 0 clamp(48px, 8vw, 96px);
  overflow: hidden;
}
.lp__fundo {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 70% at 78% 18%, rgba(8, 188, 235, .38), transparent 60%),
    radial-gradient(70% 60% at 12% 88%, rgba(8, 125, 208, .34), transparent 62%),
    linear-gradient(160deg, #04142C 0%, var(--navy) 45%, #0B2E5E 100%);
}
.lp__fundo img, .lp__fundo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .34;
  mix-blend-mode: luminosity;
}
/* Véu escuro por cima da mídia: garante contraste do texto sobre QUALQUER
   foto, inclusive uma clara que a Costa venha a trocar depois. Sem ele, o
   dia em que a foto mudar o título fica ilegível e ninguém liga uma coisa
   à outra. */
.lp__veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(4, 16, 38, .55) 0%, rgba(4, 16, 38, .35) 45%, rgba(4, 16, 38, .8) 100%);
}
.lp__hero .wrap { position: relative; z-index: 2; }

.lp__conteudo { max-width: 860px; }
.lp__selo {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 18px; margin-bottom: var(--s5);
  border: 1px solid rgba(102, 228, 245, .42);
  border-radius: var(--r-pill);
  background: rgba(8, 188, 235, .14);
  color: var(--aqua);
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
}
.lp__selo b { color: var(--white); }

.lp h1 {
  color: var(--white);
  font-size: clamp(2.3rem, 6.2vw, 4.4rem);
  letter-spacing: -.03em;
  margin-bottom: var(--s5);
  text-wrap: balance;
}
.lp h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--aqua), var(--cyan) 60%, var(--white));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lp__sub {
  max-width: 640px;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(255, 255, 255, .84);
  margin-bottom: var(--s7);
}

.lp__provas {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.lp__prova strong {
  display: block;
  font-size: 1.9rem; line-height: 1.1;
  color: var(--white);
}
.lp__prova span { font-size: .88rem; color: rgba(255, 255, 255, .66); }

/* ---- Faixa de benefícios ---- */
.lp__faixa { background: rgba(255, 255, 255, .04); border-block: 1px solid rgba(255, 255, 255, .1); }
.lp__beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s5);
  padding-block: var(--s7);
}
.lp__beneficio { display: flex; gap: var(--s3); align-items: flex-start; }
.lp__beneficio svg { width: 24px; height: 24px; color: var(--aqua); flex-shrink: 0; margin-top: 3px; }
.lp__beneficio b { display: block; color: var(--white); font-size: .98rem; }
.lp__beneficio span { font-size: .88rem; color: rgba(255, 255, 255, .66); }

/* ---- Serviços na landing ---- */
.lp__servicos { padding-block: clamp(56px, 8vw, 96px); }
.grade-lp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--s4);
}
.lp-servico {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  font-weight: 600; font-size: .96rem;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lp-servico:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(102, 228, 245, .5);
  transform: translateY(-3px);
}
.lp-servico svg { width: 22px; height: 22px; color: var(--aqua); flex-shrink: 0; }
.lp-servico small { display: block; font-weight: 500; color: var(--aqua); font-size: .8rem; }

/* ---- CTA final da landing ---- */
.lp__cta {
  text-align: center;
  padding-block: clamp(64px, 9vw, 120px);
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(8, 188, 235, .22), transparent 70%);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.lp__cta h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: var(--s4); }
.lp__cta p { max-width: 560px; margin: 0 auto var(--s7); font-size: 1.08rem; }


/* =====================================================================
   6. SITE
   ===================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    radial-gradient(60% 80% at 88% 0%, rgba(8, 188, 235, .12), transparent 60%),
    linear-gradient(180deg, var(--gray-50), var(--white) 70%);
  overflow: hidden;
}
.hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { text-wrap: balance; margin-bottom: var(--s5); }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--tx-soft);
  max-width: 56ch;
  margin-bottom: var(--s6);
}
.hero-itens {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--linha);
}
.hero-item { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--tx-soft); font-weight: 600; }
.hero-item svg { width: 20px; height: 20px; color: var(--green); }

.hero-midia { position: relative; }
.hero-midia .foto { aspect-ratio: 5 / 6; box-shadow: var(--sh-xl); }
/* Cartão flutuante sobre a foto — prova social sem ocupar seção própria. */
.hero-flutua {
  position: absolute; left: -20px; bottom: 32px;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  max-width: 280px;
}
.hero-flutua .icone { width: 44px; height: 44px; margin: 0; border-radius: 14px; }
.hero-flutua .icone svg { width: 22px; height: 22px; }
.hero-flutua b { display: block; font-size: .95rem; }
.hero-flutua span { font-size: .82rem; color: var(--tx-mute); }

/* ---- Benefícios ---- */
.grade-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s5);
}
.beneficio { padding: var(--s6); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--linha); }
.beneficio h3 { font-size: 1.12rem; margin-bottom: var(--s2); }
.beneficio p { font-size: .95rem; color: var(--tx-soft); margin: 0; }

/* ---- Serviços ---- */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center;
  margin-bottom: var(--s7);
}
.filtro {
  padding: 10px 22px;
  border: 2px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--white);
  font: inherit; font-size: .93rem; font-weight: 600;
  color: var(--tx-soft);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.filtro:hover { border-color: var(--gray-300); color: var(--navy); }
.filtro[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}

.grade-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--s5);
}
.servico { display: flex; flex-direction: column; }
.servico h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.servico p { font-size: .94rem; color: var(--tx-soft); flex-grow: 1; margin-bottom: var(--s5); }

/* ---- Descrição do serviço ----
   O dono escreve no painel com parágrafo e lista, e é assim que tem que
   aparecer. Antes tudo caía num <p> só e a lista de benefícios virava uma
   frase corrida. */
.servico-texto { flex-grow: 1; margin-bottom: var(--s3); }
.servico-texto p { margin-bottom: var(--s3); flex-grow: 0; }
.servico-texto p:last-child { margin-bottom: 0; }

.servico-itens {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: .92rem;
  color: var(--tx-soft);
}
.servico-itens li { position: relative; padding-left: 22px; }
.servico-itens li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}

/* Corte da descrição longa. Serviço com nove benefícios deixava o cartão dele
   cinco vezes mais alto que o do vizinho, e a vitrine virava uma coluna de
   texto em vez de uma comparação de preço. O texto continua inteiro no HTML:
   o que muda é só a altura visível, então busca do navegador e leitor de tela
   continuam alcançando tudo. */
.servico-texto--dobrado {
  position: relative;
  max-height: 9.5em;
  overflow: hidden;
}
.servico-texto--dobrado::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 3.2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg) 88%);
  pointer-events: none;
}
/* Alvo de toque de 44px, e não os 23px que a altura do texto dava sozinha.
   O recuo negativo devolve o alinhamento à esquerda: o botão cresce para dentro
   da área de toque sem empurrar o texto do cartão. */
.servico-mais {
  align-self: flex-start;
  margin: 0 0 var(--s3) -8px;
  padding: 11px 8px;
  border: 0; background: none;
  font: inherit; font-size: .88rem; font-weight: 700;
  color: var(--blue-tx);
  cursor: pointer;
}
.servico-mais:hover { text-decoration: underline; }
.servico-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--linha);
}
.servico-preco { font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.servico-preco small { display: block; font-size: .74rem; font-weight: 600; color: var(--tx-mute); text-transform: uppercase; letter-spacing: .06em; }
.servico-tempo { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--tx-mute); }
.servico-tempo svg { width: 16px; height: 16px; }

/* ---- Como funciona ---- */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s6); counter-reset: passo; }
.passo { position: relative; padding-top: var(--s6); }
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute; top: 0; left: 0;
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(8, 125, 208, .28);
}
.secao--escura .passo::before { -webkit-text-stroke-color: rgba(102, 228, 245, .4); }
.passo h3 { margin-bottom: var(--s2); }
.passo p { font-size: .95rem; margin: 0; }

/* ---- Antes e depois ----
   O controle é um <input type="range"> de verdade, por cima da imagem: dá
   arrastar com o dedo, com o mouse E com as setas do teclado, sem uma linha
   de código de arrastar-e-soltar. */
.grade-resultados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--s6);
}
.antes-depois { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); background: var(--navy); }
.ad-palco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; touch-action: pan-y; }
.ad-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A imagem "depois" é recortada pela variável --pos, que o range controla. */
.ad-depois { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ad-linha {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px;
  background: var(--white);
  box-shadow: 0 0 14px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.ad-alca {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--sh-md);
}
.ad-alca svg { width: 22px; height: 22px; }
.ad-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ad-etiqueta {
  position: absolute; bottom: var(--s4);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(6, 27, 59, .78);
  color: var(--white);
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ad-etiqueta--antes { left: var(--s4); }
.ad-etiqueta--depois { right: var(--s4); }
.antes-depois figcaption { padding: var(--s4) var(--s5); background: var(--white); }
.antes-depois figcaption b { display: block; color: var(--navy); }
.antes-depois figcaption span { font-size: .88rem; color: var(--tx-mute); }

/* ---- Depoimentos ---- */
.grade-depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--s5);
}
.depoimento {
  display: flex; flex-direction: column;
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
}
.estrelas { display: flex; gap: 3px; margin-bottom: var(--s4); color: #FFC94D; }
.estrelas svg { width: 19px; height: 19px; }
.estrelas .vazia { color: rgba(255, 255, 255, .25); }
.depoimento blockquote { margin: 0 0 var(--s5); font-size: 1rem; line-height: 1.68; color: rgba(255, 255, 255, .9); flex-grow: 1; }
.depoimento-pessoa { display: flex; align-items: center; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .12); }
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: var(--white); font-weight: 800; font-size: 1rem;
  flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.depoimento-pessoa b { display: block; color: var(--white); font-size: .96rem; }
.depoimento-pessoa span { font-size: .84rem; color: rgba(255, 255, 255, .6); }

/* ---- FAQ ---- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--white);
  margin-bottom: var(--s3);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq details[open] { border-color: var(--gray-300); box-shadow: var(--sh-sm); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s6);
  font-weight: 700; font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .28s var(--ease);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq-resposta { padding: 0 var(--s6) var(--s5); color: var(--tx-soft); font-size: .97rem; }

/* ---- CTA final ---- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.cta-final p { max-width: 560px; margin: 0 auto var(--s7); font-size: 1.06rem; }


/* =====================================================================
   7. AGENDAMENTO
   ===================================================================== */

.agendar-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.form-caixa {
  background: var(--white);
  border: 1px solid var(--linha);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--sh-lg);
}

/* ---- Trilha de etapas ---- */
.etapas {
  display: flex; align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s7);
}
.etapa { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; }
.etapa-bola {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-500);
  font-weight: 800; font-size: .9rem;
  transition: all .3s var(--ease);
}
/* `nowrap` com `ellipsis` cortava o proprio rotulo: medido em 1280px,
   "Data e hora" pedia 73px e recebia 62, entao aparecia como "Data e ho...".
   Cortar o nome da etapa e pior que deixar o passo um pouco mais largo, porque
   e justamente o nome que diz em que passo a pessoa esta. `min-width: 0` no
   flex continua evitando estouro; o que sai e so o corte. */
.etapa-nome { font-size: .86rem; font-weight: 600; color: var(--tx-mute); min-width: 0; }
.etapa-traco { flex: 1; height: 2px; background: var(--gray-200); border-radius: 2px; min-width: 12px; }
.etapa[data-estado="ativa"] .etapa-bola { background: var(--navy); color: var(--white); }
.etapa[data-estado="ativa"] .etapa-nome { color: var(--navy); }
.etapa[data-estado="feita"] .etapa-bola { background: var(--green); color: var(--white); }
.etapa[data-estado="feita"] .etapa-nome { color: var(--tx-soft); }

.passo-form[hidden] { display: none; }
.passo-form h3 { margin-bottom: var(--s2); }
.passo-form > p { color: var(--tx-soft); font-size: .96rem; margin-bottom: var(--s6); }

/* O `flex-wrap: wrap` não é enfeite: sem ele o "Confirmar agendamento" saía da
   tela no celular. O .btn é `white-space: nowrap`, então ele não encolhe abaixo
   do próprio texto (281px), e ao lado do "Voltar" a linha pedia 406px dentro de
   um cartão de 293px numa tela de 375. Como o body tem overflow-x: hidden, o
   excesso não virava barra de rolagem: o botão simplesmente era cortado, e era
   justamente o botão que fecha o agendamento. Com o wrap, quando os dois não
   cabem lado a lado cada um fica com a sua linha inteira. */
.form-navegar {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--linha);
}
.form-navegar .btn { flex: 1; }

/* ---- Escolha de serviços ---- */
/* `minmax(0, 1fr)` e não a coluna implícita.
 *
 * Grid sem coluna declarada usa `auto`, que é minmax(min-content, max-content):
 * a trilha cresce até caber o item mais largo, e o item mais largo aqui é uma
 * opção de serviço com o preço em `white-space: nowrap`. No celular a coluna
 * dava 409px dentro de um cartão de 293px, e como o body tem overflow-x hidden,
 * o preço simplesmente sumia da tela cortado. Com minmax(0, ...) a trilha
 * obedece ao pai e quem se ajusta é o conteúdo. */
.escolha-servicos {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s3); margin-bottom: var(--s5);
}
.opcao {
  display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border: 2px solid var(--gray-200);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.opcao:hover { border-color: var(--gray-300); background: var(--gray-50); }
.opcao input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--blue); background: rgba(8, 125, 208, .05); }
/* `flex: 1 1 140px` com o pai em flex-wrap: em tela estreita o preço desce
   para a linha de baixo em vez de espremer o nome do serviço até ele virar
   duas letras e reticências. O nome é o que a pessoa está lendo para escolher. */
.opcao-txt { flex: 1 1 140px; min-width: 0; }
.opcao-txt b { display: block; font-size: 1rem; }
.opcao-txt span { display: block; font-size: .86rem; color: var(--tx-mute); }
/* `margin-left: auto` mantém o preço encostado à direita nas duas situações:
   ao lado do nome quando cabe, e sozinho na linha de baixo quando não cabe. */
.opcao-preco { margin-left: auto; font-weight: 800; color: var(--navy); white-space: nowrap; font-size: .96rem; }

/* ---- Horários ---- */
.datas { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s3); margin-bottom: var(--s5); scrollbar-width: thin; }
.data-btn {
  flex-shrink: 0;
  min-width: 82px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--gray-200);
  border-radius: var(--r);
  background: var(--white);
  font: inherit; text-align: center; cursor: pointer;
  transition: all .2s var(--ease);
}
.data-btn small { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-mute); font-weight: 700; }
.data-btn b { display: block; font-size: 1.3rem; line-height: 1.2; color: var(--navy); }
.data-btn span { display: block; font-size: .74rem; color: var(--tx-mute); }
.data-btn:hover { border-color: var(--blue); }
.data-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.data-btn[aria-pressed="true"] small,
.data-btn[aria-pressed="true"] b,
.data-btn[aria-pressed="true"] span { color: var(--white); }

.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 92px), 1fr)); gap: var(--s2); }
.hora-btn {
  padding: var(--s3);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-sm);
  background: var(--white);
  font: inherit; font-weight: 700; font-size: .96rem;
  color: var(--navy);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.hora-btn:hover { border-color: var(--blue); color: var(--blue-tx); }
.hora-btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--white); }

.vazio {
  padding: var(--s6);
  text-align: center;
  border: 2px dashed var(--gray-200);
  border-radius: var(--r);
  color: var(--tx-mute);
  font-size: .95rem;
}

/* ---- Fotos ------------------------------------------------------------

   Para higienização de estofado a foto NÃO é enfeite: é ela que diz à
   equipe o tamanho da peça, o tipo de tecido e o tipo de mancha. Sem isso
   o orçamento sai no chute e a van chega sem o produto certo.

   Por isso este bloco tem dois estados bem diferentes. Quando o serviço
   escolhido exige foto, ele sobe de "opcional discreto" para caixa
   destacada, com o botão de câmera do tamanho de um alvo de polegar.
   ---------------------------------------------------------------------- */
.fotos-bloco {
  padding: var(--s5);
  border-radius: var(--r);
  border: 2px dashed var(--gray-300);
  background: var(--gray-50);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
/* O site.js (atualizarBlocoFotos) escreve exatamente quatro combinações aqui:
   data-exige "0" ou "1" e data-ok "0" ou "1". As duas com data-exige="0" ficam
   sem regra de propósito — foto opcional é convite discreto, e destacar o bloco
   de quem não precisa mandar nada só rouba a atenção de quem precisa.

   Estado "precisa de foto": borda cheia e fundo da marca. A diferença
   visual é grande de propósito, senão a pessoa rola direto por cima. */
.fotos-bloco[data-exige="1"] {
  border-style: solid;
  border-color: var(--blue);
  background: rgba(8, 125, 208, .05);
}
.fotos-bloco[data-exige="1"][data-ok="1"] {
  border-color: var(--green);
  background: var(--green-soft);
}

.fotos-titulo { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.fotos-titulo b { font-size: 1rem; color: var(--navy); }
.fotos-texto { font-size: .9rem; color: var(--tx-soft); margin-bottom: var(--s4); }
.fotos-texto b { color: var(--navy); }

/* Os dois botões de envio. No celular o primeiro abre a câmera direto e o
   segundo a galeria, porque quem já tirou a foto ontem não quer tirar
   outra. No computador os dois abrem o seletor de arquivo, e aí o segundo
   é redundante mas inofensivo. */
/* minmax(0, 1fr) e não 1fr puro: o `1fr` sozinho deixa o conteúdo com
   min-width auto empurrar a trilha além do pai, que é a causa que já jogou o
   formulário para fora da tela no celular uma vez. Aqui hoje cabe, e é
   justamente por isso que vale corrigir agora. */
.fotos-botoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.foto-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 92px;
  padding: var(--s4);
  border: 2px solid var(--gray-200);
  border-radius: var(--r);
  background: var(--white);
  font: inherit; font-size: .92rem; font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.foto-btn:hover { border-color: var(--blue); box-shadow: var(--sh-md); }
.foto-btn:active { transform: translateY(1px); }
.foto-btn svg { width: 28px; height: 28px; color: var(--blue); }
.foto-btn small { font-weight: 500; font-size: .78rem; color: var(--tx-mute); }
.fotos-bloco.arrastando { border-color: var(--blue); background: rgba(8, 125, 208, .08); }

/* Saída pelo WhatsApp. Sempre vai existir gente que não consegue anexar
   foto no navegador, e perder o agendamento por causa disso seria burrice. */
.fotos-zap {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s3);
  font-size: .86rem; font-weight: 600;
}
.fotos-zap svg { width: 16px; height: 16px; }

.fotos-lista { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.foto-mini {
  position: relative;
  width: 88px; height: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--gray-100);
}
.foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.foto-mini button {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(6, 27, 59, .82); color: var(--white);
  cursor: pointer; font-size: 16px; line-height: 1;
}
/* A miniatura tem três estados no site.js, e os três estão desenhados aqui:
   "enviando" (é o que ela nasce), "pronto" e "erro".

   Enquanto sobe: a miniatura já aparece, esmaecida, com a barra em cima.
   Mostrar a foto na hora (mesmo antes de terminar o envio) é o que faz o
   formulário parecer rápido no 4G da rua. */
.foto-mini[data-estado="enviando"] img { opacity: .45; filter: grayscale(.4); }
.foto-mini[data-estado="erro"] { border-color: var(--red); }
.foto-mini[data-estado="erro"]::after {
  content: "falhou";
  position: absolute; inset: auto 0 0 0;
  padding: 3px;
  background: var(--red); color: var(--white);
  font-size: .68rem; font-weight: 700; text-align: center;
}
.foto-barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, .5);
}
.foto-barra span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .25s var(--ease);
}
.foto-mini[data-estado="pronto"] .foto-barra { display: none; }

/* ---- Item com o valor a combinar -------------------------------------

   Farol riscado, opaco e amarelado são três serviços e três valores, e o
   dono só sabe qual é olhando a foto. Antes o site recusava o pedido
   INTEIRO por causa desse item: quem marcou farol mais lavagem perdia os
   dois e ia embora sem deixar a foto, que é justamente do que ele precisa
   para dar o preço.

   Agora o item entra a combinar, e este aviso é a parte que evita a
   reclamação depois. Ele aparece na hora em que a pessoa marca o serviço,
   dentro da etapa 1, e não na confirmação: cobrança que só surge no fim é
   a que vira discussão no dia do serviço.

   Âmbar, e não vermelho: nada aqui está errado nem impedido. É a mesma
   cor do bloco de voltagem, que também avisa sem bloquear.
   ---------------------------------------------------------------------- */
.combinar-aviso {
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  border: 2px solid var(--amber);
  border-radius: var(--r);
  background: #FFF6E6;
  color: #7A4E00;
}
.combinar-aviso b { display: block; margin-bottom: 4px; font-size: .98rem; color: var(--navy); }
.combinar-aviso p { margin: 0; font-size: .9rem; line-height: 1.55; }
/* O atalho de conversa é botão inteiro (52px de altura, ver .btn) e não link
   solto: no celular ele é alvo de polegar, e a etapa 1 é onde a pessoa está
   decidindo. Em tela estreita ele ocupa a linha toda em vez de encolher, porque
   o .btn é nowrap e apertar a largura empurraria o texto para fora da caixa. */
.combinar-aviso .btn { margin-top: var(--s4); max-width: 100%; }

@media (max-width: 560px) {
  .combinar-aviso .btn { display: flex; width: 100%; padding-inline: var(--s4); }
}

/* O motivo da foto, dentro do bloco de fotos. Fundo branco para se separar
   do azul que o bloco ganha quando a foto passa a ser obrigatória. */
.fotos-motivo {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--amber);
  border-radius: var(--r-sm);
  background: var(--white);
  color: #7A4E00;
  font-size: .88rem;
  line-height: 1.5;
}

/* ---- Condições do local ----------------------------------------------

   Só aparece quando o serviço é feito na casa do cliente.

   A equipe não leva água nem gerador. Chegar num endereço sem torneira ou
   sem tomada é perder a manhã inteira: o deslocamento aconteceu, o horário
   da agenda foi gasto e o serviço não saiu. Por isso a pergunta é feita
   ANTES de confirmar, e não depende de alguém lembrar de perguntar por
   telefone.

   A voltagem tem outro peso: 110V não impede o serviço, só obriga a levar
   o transformador. É informação de carregamento da van, não de bloqueio,
   e por isso o visual dela é aviso e não erro.
   ---------------------------------------------------------------------- */
.local-bloco {
  padding: var(--s5);
  border-radius: var(--r);
  border: 2px solid var(--gray-200);
  background: var(--white);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
/* Os estados que o site.js escreve em [data-local-bloco] (ver atualizarLocal):
   "bloqueado", "transformador", "ok" e "perguntando".

   Os nomes vêm em par porque a folha nasceu falando "impedido" e "atencao" e o
   script passou a escrever "bloqueado" e "transformador". Enquanto só um dos
   vocabulários estava aqui, o bloco ficava com a cara neutra JUSTAMENTE na hora
   de avisar que o agendamento está impedido: sem água ou sem energia o serviço
   não acontece, e essa é a última tela em que dá para descobrir isso sem a
   equipe já estar na porta. Os dois nomes pintam igual, então nenhum lado
   consegue quebrar o outro de novo.

   "perguntando" — e o data-estado="" que vem do HTML — não tem regra de
   propósito: enquanto ninguém respondeu nada o bloco é o neutro desenhado
   acima. Fundo vermelho antes da primeira resposta seria acusar quem ainda
   não fez nada de errado. */
.local-bloco[data-estado="impedido"],
.local-bloco[data-estado="bloqueado"]     { border-color: var(--red);   background: var(--red-soft); }
.local-bloco[data-estado="atencao"],
.local-bloco[data-estado="transformador"] { border-color: var(--amber); background: #FFF6E6; }
.local-bloco[data-estado="ok"]            { border-color: var(--green); background: var(--green-soft); }

.local-titulo { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.local-titulo b { font-size: 1rem; color: var(--navy); }
.local-titulo svg { width: 22px; height: 22px; color: var(--blue); }
.local-texto { font-size: .9rem; color: var(--tx-soft); margin-bottom: var(--s5); }

.local-pergunta { margin-bottom: var(--s4); }
.local-pergunta:last-of-type { margin-bottom: 0; }
.local-pergunta > span {
  display: block;
  margin-bottom: var(--s2);
  font-weight: 700; font-size: .93rem; color: var(--navy);
}

/* Botões grandes em vez de select. No celular, um select abre a roleta do
   sistema e some com o contexto; dois botões lado a lado resolvem com um
   toque e deixam a resposta visível o tempo todo. */
.local-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: var(--s2); }
.local-btn {
  min-height: 50px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-sm);
  background: var(--white);
  font: inherit; font-size: .94rem; font-weight: 700;
  color: var(--tx-soft);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.local-btn:hover { border-color: var(--blue); color: var(--blue-tx); }
.local-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.local-btn[aria-pressed="true"][data-valor="nao"] { background: var(--red); border-color: var(--red); }
.local-btn small { display: block; font-weight: 500; font-size: .76rem; opacity: .8; }

/* O recado que aparece conforme a resposta. Fica escondido até existir
   resposta, para o formulário não nascer com um aviso vermelho na cara de
   quem ainda não fez nada de errado. */
.local-recado {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-top: var(--s5);
  padding: var(--s4);
  border-radius: var(--r-sm);
  font-size: .92rem;
  line-height: 1.55;
}
.local-recado[hidden] { display: none; }
.local-recado svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.local-recado b { display: block; margin-bottom: 2px; }
.local-recado--impedido { background: var(--white); color: #8E2020; }
.local-recado--atencao  { background: var(--white); color: #7A4E00; }
.local-recado--ok       { background: var(--white); color: #0A6B36; }

/* O recado se pinta pelo estado do PAI, e não por classe própria: o site.js
   escreve o texto e o data-estado do bloco, e não encosta na classe do recado
   (as três acima ficam para quem montar o aviso na mão). Sem estas regras o
   texto do bloqueio saía sem caixa branca e sem cor, boiando no fundo colorido
   — que é justamente o aviso que ninguém pode deixar de ler. */
.local-bloco[data-estado="impedido"] .local-recado,
.local-bloco[data-estado="bloqueado"] .local-recado     { background: var(--white); color: #8E2020; }
.local-bloco[data-estado="atencao"] .local-recado,
.local-bloco[data-estado="transformador"] .local-recado { background: var(--white); color: #7A4E00; }
.local-bloco[data-estado="ok"] .local-recado            { background: var(--white); color: #0A6B36; }

.local-recado .btn { margin-top: var(--s3); }

/* ---- Resumo lateral ---- */
.resumo {
  position: sticky; top: 100px;
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--sh-lg);
}
.resumo h3 { color: var(--white); font-size: 1.1rem; margin-bottom: var(--s5); }
.resumo-linha {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .93rem;
}
.resumo-linha span { color: rgba(255, 255, 255, .62); flex-shrink: 0; }
.resumo-linha b { text-align: right; color: var(--white); font-weight: 600; }
.resumo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 2px solid rgba(255, 255, 255, .2);
}
.resumo-total span { font-size: .93rem; color: rgba(255, 255, 255, .72); }
.resumo-total b { font-size: 1.7rem; color: var(--aqua); }
/* A linha que confessa o que não está no total.
   Fica DENTRO do resumo escuro, encostada no total, e não lá embaixo junto da
   observação geral: ela fala do número que está logo acima, e separada dele
   viraria mais uma letra miúda que ninguém lê. Fundo clareado em vez de cor
   nova porque o resumo inteiro é azul-marinho e um bloco âmbar aqui gritaria
   como se fosse erro. */
.resumo-combinar {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  font-size: .84rem;
  line-height: 1.5;
}
.resumo-obs { margin-top: var(--s4); font-size: .82rem; color: rgba(255, 255, 255, .55); line-height: 1.5; }

/* ---- Sucesso ---- */
.sucesso { text-align: center; padding-block: var(--s6); }
.sucesso-icone {
  width: 84px; height: 84px; margin: 0 auto var(--s5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-soft); color: var(--green);
}
.sucesso-icone svg { width: 44px; height: 44px; }
.sucesso-codigo {
  display: inline-block;
  margin: var(--s4) 0 var(--s6);
  padding: var(--s3) var(--s6);
  border-radius: var(--r);
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  font-size: 1.4rem; font-weight: 800; letter-spacing: .1em;
  color: var(--navy);
}


/* =====================================================================
   8. RODAPÉ E WHATSAPP
   ===================================================================== */

.rodape {
  background: var(--navy);
  color: rgba(255, 255, 255, .68);
  padding-block: var(--s8) var(--s6);
  font-size: .94rem;
}
.rodape-grade {
  display: grid;
  /* minmax(0, ...) e não 1fr puro: a coluna de contato tem
     "joao@costamobiwash.com.br", que é uma palavra sem espaço de 25
     caracteres. Com 1fr a coluna se recusa a encolher abaixo do conteúdo e
     empurra a grade inteira para fora da tela no tablet. É a regra da casa. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rodape img { height: 80px; margin-bottom: var(--s4); }
.rodape h4 { color: var(--white); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s4); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 0; }

/* O LINK DO RODAPÉ É UMA LINHA INTEIRA, e não um texto de 20px de altura.
   Medido no celular: estes links tinham 20px, quase metade do mínimo de 44px
   que o dedo precisa. E entre eles está o TELEFONE, que é onde o cliente toca
   para ligar: errar esse toque é perder a ligação, não perder um clique.

   `display: block` mais padding vertical faz a linha inteira virar alvo, em
   vez de só as letras. `overflow-wrap` é para o e-mail, que é uma palavra só
   de 25 caracteres e vazaria da coluna. */
.rodape li a,
.rodape-fim a {
  display: block;
  min-height: 44px;
  padding-block: 11px;
  color: rgba(255, 255, 255, .68);
  overflow-wrap: anywhere;
}
.rodape a { color: rgba(255, 255, 255, .68); }
.rodape a:hover { color: var(--aqua); }

/* No computador o padding de 11px espalharia demais a lista, que ali é lida
   de relance e não tocada. O alvo grande vale onde existe dedo. */
@media (min-width: 861px) {
  .rodape li a { min-height: 0; padding-block: 3px; }
  .rodape li { margin-bottom: var(--s2); }
}
.rodape-fim {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; align-items: center;
  padding-top: var(--s5);
  font-size: .85rem;
  color: rgba(255, 255, 255, .48);
}

/* ---- Botão flutuante do WhatsApp ---- */
.zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; align-items: center; gap: var(--s3);
}
.zap[hidden] { display: none; }
.zap-balao {
  position: relative;
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--sh-lg);
  font-size: .86rem;
  max-width: 210px;
  transform-origin: right center;
  animation: entra-balao .45s var(--ease-out) both;
}
.zap-balao b { display: block; color: var(--navy); }
.zap-balao span { color: var(--tx-mute); font-size: .8rem; }
.zap-balao[hidden] { display: none; }
.zap-btn {
  position: relative;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .44);
  transition: transform .25s var(--ease);
  flex-shrink: 0;
}
.zap-btn:hover { transform: scale(1.08); color: var(--white); }
.zap-btn svg { width: 33px; height: 33px; }
/* Pulso lento, uma vez a cada 6 segundos. Chama atenção sem virar
   pisca-pisca — botão que pulsa sem parar o visitante aprende a ignorar. */
.zap-btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25D366;
  animation: pulso 6s var(--ease) infinite;
}
.zap-fechar {
  position: absolute; top: -8px; left: -8px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--graphite); color: var(--white);
  font-size: 14px; line-height: 1; cursor: pointer;
}

/* O FLUTUANTE SAI DA FRENTE ENQUANTO O FORMULÁRIO ESTÁ NA TELA.

   Medido em 375px: o círculo verde ocupa de x=284 a 346, e o botão que fecha o
   agendamento vai de x=41 a 319, porque no celular ele é largura cheia. São
   35px de sobreposição bem na ponta direita do botão, e o círculo tem o maior
   z-index da página, então é ele que ganha o toque. Quem erra o canto abre o
   WhatsApp em aba nova em vez de enviar, no último toque do agendamento, que é
   exatamente onde a venda se perde.

   Mover o botão para o lado não resolveria: o círculo ocupa 76px do rodapé e a
   folga lateral do formulário é de 41px. O que resolve é ele se recolher.

   `visibility` entra na transição pelo mesmo motivo do menu (ver o bloco de
   1084px): sem ela sobra um link invisível no caminho do teclado e do leitor
   de tela. O caminho pelo WhatsApp continua existindo no cabeçalho, dentro do
   bloco de fotos, no rodapé e na tela de sucesso. */
.zap { transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.zap--recolhido {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px);
}


/* =====================================================================
   9. RESPONSIVO
   ===================================================================== */

@media (max-width: 1024px) {
  .hero-grade { grid-template-columns: minmax(0, 1fr); }
  .hero-midia { order: -1; max-width: 560px; }
  .hero-midia .foto { aspect-ratio: 16 / 10; }
  .hero-flutua { left: auto; right: 16px; bottom: -20px; }
  /* minmax(0,...) e nao 1fr puro: 1fr sozinho deixa o item com min-width auto
     empurrar a trilha alem do pai, que foi o que jogou o formulario inteiro
     84px para fora da tela no celular. */
  .agendar-grade { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =====================================================================
   O CABEÇALHO PRECISA DE 1085px, ENTÃO O MENU COMEÇA ANTES DOS 860.

   Medido no navegador, com este CSS: a logo ocupa 218,6px, a navegação 474,7px
   já encolhida, os dois botões 296,1px (o .btn é white-space: nowrap e não
   encolhe), mais dois vãos de 24px e os 48px de recuo do .wrap. Total: 1085px
   de largura útil.

   Abaixo disso, e ACIMA de 860, o cabeçalho não cabia e empurrava a PÁGINA
   INTEIRA: em janela de 1024px sobravam 52px de rolagem horizontal e o botão
   "Agendar agora" terminava fora da tela; em 900px sobravam 176px. E não é
   corte silencioso: não existe overflow-x: hidden no body com o site aberto,
   então virava barra de rolagem de verdade em todas as seções.

   Quem sentia: qualquer notebook de 1024 ou 1366 com a janela pela metade,
   tablet deitado, e o próprio dono conferindo o site no computador.

   Encolher a logo não resolveria: para caber em 1009px ela teria que ir para
   96px de altura, menor do que a marca aceita. O certo é o menu de celular
   entrar antes, e é só isto que este bloco faz. O bloco de 860 continua
   existindo para tudo o que é de fato de celular.

   O `inset: 100px` é a altura REAL do cabeçalho, medida: .topo-int tem
   min-height: 100px em toda largura. O valor antigo era 76px, e com ele a
   folha do menu subia 24px por cima da barra e cobria a logo.
   ===================================================================== */
@media (max-width: 1084px) {
  .menu-btn { display: flex; }

  /* O menu vira uma folha que desce por cima do conteúdo. Fica em
     position: fixed para não empurrar a página e não causar salto de
     layout ao abrir. */
  .nav {
    position: fixed; inset: 100px 0 auto;
    flex-direction: column; align-items: stretch;
    gap: 0;
    margin: 0; padding: var(--s4) var(--s5) var(--s6);
    background: var(--white);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sh-lg);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  }
  .nav.aberto { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: var(--s4) 0; border-bottom: 1px solid var(--gray-100); font-size: 1.05rem; }
  .nav a::after { display: none; }

  /* Some o "Orçamento" e fica só o "Agendar agora". Não deixa a seção órfã:
     o topo da página já tem "Solicitar orçamento" na primeira dobra. */
  .topo-acoes .btn--contorno { display: none; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 92px; }

  .lp__topo { padding: var(--s4) var(--s5); }
  .lp__topo img { height: 56px; }
  .lp__provas { gap: var(--s5); }
  .lp__prova strong { font-size: 1.5rem; }

  .dupla, .tripla { grid-template-columns: minmax(0, 1fr); }

  .etapa-nome { display: none; }
  .etapa { flex: 0 0 auto; }
  .etapa-traco { flex: 1; }

  .rodape-grade { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding-inline: var(--s4); }
  .botoes .btn { width: 100%; }

  /* O CABEÇALHO PRECISA CABER, e por pouco ele não cabia.
   *
   * Com a logo em 52px (167px de largura) mais o botão "Agendar agora" em
   * tamanho cheio (155px) mais o botão do menu (48px) e os espaços, dava 418px
   * numa tela de 375. O menu ficava em 374..422, ou seja, INTEIRO fora da tela,
   * e como o body tem overflow-x hidden ele não era cortado pela metade: ele
   * simplesmente não existia. Ninguém conseguia abrir a navegação pelo celular.
   *
   * A conta agora fecha com folga: 16 + 141 + 8 + 128 + 8 + 48 + 16 = 365. */
  .marca img { height: 44px; }
  .topo-acoes { gap: var(--s2); }
  .topo-acoes .btn--principal { padding: 10px 14px; font-size: .86rem; }
  .zap { right: 14px; bottom: 14px; }
  .zap-balao { display: none; }
  .hero-flutua { position: static; margin-top: var(--s4); max-width: none; }
}

/* Celular estreito DE VERDADE (iPhone SE, Android de entrada, 320 a 360px).
 *
 * O corte é 364 e não 380 de propósito: 375 é a largura do iPhone comum, e lá
 * a conta do cabeçalho fecha em 365, então não há motivo para tirar o atalho
 * de agendar de quem tem espaço. Abaixo disso nem o botão compacto cabe, e aí
 * entre perder o atalho e perder o menu inteiro, perde-se o atalho: ele
 * continua na primeira dobra da página e no botão flutuante do WhatsApp. */
/* ENTRE 365 E 420 O CABEÇALHO NÃO CABIA POR 6px, e 375 é o iPhone comum.

   A conta, medida numa tela de 375 (358 úteis): logo 141 + vão de 24 + ações
   183 (botão 127, vão 8, menu 48) = 348, mais 32 de recuo do .wrap, contra 358
   disponíveis. Faltavam 22px, e a página rolava para o lado.

   Abaixo de 365 isso não aparecia porque o bloco seguinte esconde o botão
   "Agendar agora" por completo. Ou seja, o defeito vivia exatamente na faixa
   dos aparelhos mais comuns, e some no aparelho mais estreito, que é o tipo de
   coisa que passa despercebida em teste rápido.

   Os 26px saem de três lugares pequenos, e NENHUM deles é a logo: ele pediu a
   marca maior de propósito, e encolher justo no celular desfaria isso. Saem do
   vão entre logo e ações (24 para 12), do recuo lateral da página (16 para 12)
   e do preenchimento do botão (14 para 11). O botão continua com 44px de
   altura e o menu também. */
@media (max-width: 420px) {
  .topo .wrap { padding-inline: 12px; }
  .topo-int { gap: 12px; }
  .topo-acoes { gap: 6px; }
  .topo-acoes .btn--principal { padding: 10px 11px; }
}

/* O BOTÃO PRINCIPAL CONTINUA SUMINDO ABAIXO DE 365px, e eu tentei mudar isso.

   Achei que os 26px economizados no bloco acima dariam para mostrar o botão
   também em 360, que é o Android mais comum aqui, e a conta no papel fechava
   em 328 de 343. Publiquei e medi: em 360 e em 344 a página voltou a rolar
   para o lado, com elementos fora da tela.

   O que faltou na conta está uma linha abaixo: neste mesmo bloco a logo CRESCE
   para 46px de altura, e com isso ela passa de 141 para cerca de 147px de
   largura. O ganho de espaço vai embora justamente onde eu queria gastar.

   Fica registrado para o próximo não repetir: só dá para devolver o botão aqui
   se a logo também for reduzida, e reduzir a logo é o contrário do que o dono
   pediu. O menu cobre o caso, e o primeiro item dele leva ao agendamento. */
@media (max-width: 364px) {
  .topo-acoes .btn--principal { display: none; }
  .marca img { height: 46px; }

  /* Abaixo de 364 nem "Confirmar agendamento" cabe em uma linha só: o .btn é
     nowrap e o texto sozinho pede 281px dentro de um cartão de 240. Aqui, e só
     aqui, ele pode quebrar em duas linhas. Encurtar o rótulo seria pior: é o
     botão que fecha o agendamento e ele precisa dizer o que faz. */
  .form-navegar .btn { white-space: normal; }
}


/* =====================================================================
   10. MOVIMENTO
   ===================================================================== */

/* Entrada suave ao rolar. A classe .surge marca o elemento; o JS põe
   .visivel quando ele entra na tela (IntersectionObserver).

   O estado inicial fica dentro de @media (prefers-reduced-motion: no-preference)
   de propósito: se o JS não rodar — ou o observador falhar — o conteúdo
   simplesmente já está visível, em vez de a página inteira ficar em branco
   com tudo em opacity:0. Um efeito de entrada nunca pode ser o motivo de
   alguém não conseguir ler o site. */
@media (prefers-reduced-motion: no-preference) {
  .surge {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }
  .surge.visivel { opacity: 1; transform: none; }
  .surge:nth-child(2) { transition-delay: .07s; }
  .surge:nth-child(3) { transition-delay: .14s; }
  .surge:nth-child(4) { transition-delay: .21s; }
}

@keyframes pulso {
  0%, 70% { transform: scale(1); opacity: 0; }
  75% { transform: scale(1); opacity: .55; }
  92%, 100% { transform: scale(1.75); opacity: 0; }
}
@keyframes entra-balao {
  from { opacity: 0; transform: scale(.9) translateX(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gira { to { transform: rotate(360deg); } }

.carregando {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}

/* Quem pediu menos movimento no sistema recebe menos movimento. Não é
   preferência estética: para parte das pessoas, animação em tela cheia
   causa enjoo de verdade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* O que não deve sair na impressão de um orçamento. */
@media print {
  .topo, .zap, .lp, .form-navegar, .btn { display: none !important; }
  body { font-size: 12pt; }
}

/* =====================================================================
   FAIXA DE MANUTENÇÃO

   Aparece por cima de tudo quando a API responde que o sistema está em
   manutenção. Fica FIXA no topo e empurra o conteúdo com o padding no body:
   uma faixa flutuante taparia o menu, e uma faixa no fluxo normal sairia da
   tela assim que a pessoa rolasse, que é justamente quando ela vai procurar
   o botão de agendar.

   Âmbar e não vermelho: não é erro, é aviso. Vermelho no topo do site faz
   parecer que algo quebrou do lado de quem está visitando.
   ===================================================================== */
.faixa-manutencao {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  background: var(--amber);
  color: var(--white);
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(6, 27, 59, .25);
}

body.com-manutencao { padding-top: 64px; }

@media (max-width: 600px) {
  .faixa-manutencao { font-size: .92rem; padding: 10px 12px; }
  body.com-manutencao { padding-top: 84px; }
}

/* =====================================================================
   A ÁREA SEGURA DO CELULAR

   O index.html usa viewport-fit=cover, que é o que faz o site encostar nas
   bordas do aparelho em vez de ficar com tarja branca em cima e embaixo. O
   preço disso é que a página passa POR BAIXO da ilha do iPhone (onde fica a
   câmera) e da barrinha de gesto de baixo, e quem paga é o cabeçalho grudado
   no topo: parte da logo fica escondida atrás da ilha.

   env(safe-area-inset-*) vale ZERO em aparelho sem recorte e no computador,
   então estas linhas não mudam nada onde não precisam mudar.
   ===================================================================== */

.topo { padding-top: env(safe-area-inset-top); }

/* O botão flutuante fica logo acima da barrinha de gesto, e não colado nela,
   senão o toque no botão vira o gesto de sair do aplicativo. */
.zap { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* O recado do leva e traz, na tela de acompanhamento.
   Ele so aparece quando o servico e feito na base, e existe porque "Onde: Rua
   Tibirica" sozinho faria o cliente achar que precisa levar o carro ate la.
   Fundo de aviso e nao de erro: e informacao boa, nao problema. */
.ac-aviso {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--gray-100);
  border-left: 3px solid var(--blue);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--tx-soft);
}