/* Locações e Mão de Obra — direção em DIRECAO.md
   Régua de ritmo e profundidade medida no apple.com; personalidade da
   sinalização de garagem (placa, faixa do pilar, seta ↳ e chevrons do folheto). */

/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 56px; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1.0625rem; line-height: 1.47; letter-spacing: -0.012em;
  color: var(--tinta);
  background: var(--fundo-a);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 820; letter-spacing: -0.022em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: var(--raio-p); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--branco); padding: 10px 16px; border-radius: var(--raio-p);
}
.pular:focus { top: 16px; }

/* ============ fundo: degradê + pontilhado ============ */
.fundo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% -10%, rgb(127 182 234 / 0.22), transparent 70%),
    linear-gradient(180deg, var(--fundo-a) 0%, var(--fundo-b) 55%, var(--fundo-c) 100%);
}
.fundo__pontos { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============ componentes ============ */
.icone { width: 1.1em; height: 1.1em; flex: none; }

/* placa: rótulo no formato da sinalização de garagem, com a faixa do pilar */
.placa {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 0.78rem/1 var(--fonte-titulo); font-stretch: 75%;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--grafite);
}
.placa::before { content: ""; width: 18px; height: 8px; border-radius: 2px; background: var(--laranja); }
.placa--clara { color: var(--texto-inverso-suave); }

.botao {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.85em 1.25em;
  font: 600 1rem/1 var(--fonte-texto); letter-spacing: -0.01em;
  color: var(--tinta);
  background: linear-gradient(180deg, var(--laranja-claro), var(--laranja)) var(--laranja);
  border-radius: var(--raio-p);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 8px 18px -10px rgb(196 86 11 / 0.65);
  transition: transform 0.3s var(--curva-padrao), box-shadow 0.3s var(--curva-padrao);
}
/* os chevrons do folheto andam no hover */
.botao::after {
  content: "›››"; font-weight: 600; letter-spacing: -0.12em; opacity: 0.55;
  margin-left: 0.1em; transition: transform 0.35s var(--curva), opacity 0.35s;
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 14px 26px -12px rgb(196 86 11 / 0.75); }
.botao:hover::after { transform: translateX(4px); opacity: 1; }
.botao--barra { padding: 0.55em 0.9em; font-size: 0.82rem; }
.botao--barra::after { display: none; }
.botao--grande { padding: 1em 1.5em; font-size: 1.06rem; }

.link {
  color: var(--azul); text-decoration: none; font-weight: 500;
}
.link::after { content: " ↳"; display: inline-block; transition: transform 0.3s var(--curva); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link:hover::after { transform: translate(2px, 2px); }
.link--claro { color: var(--ceu); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.acoes--centro { justify-content: center; }

/* ============ barra ============ */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: 48px;
  background: rgb(250 250 252 / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 rgb(14 26 43 / 0.12);
}
.barra__miolo {
  height: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.marca__simbolo { width: 34px; height: 28px; }
.marca__nome { font: 700 0.86rem/1 var(--fonte-titulo); font-stretch: 92%; letter-spacing: 0.005em; word-spacing: 0.12em; color: var(--tinta); }
.barra__nav { display: none; gap: 30px; font-size: 0.8rem; }
.barra__nav a { text-decoration: none; color: var(--tinta); opacity: 0.78; transition: opacity 0.2s; }
.barra__nav a:hover { opacity: 1; }

/* ============ 1. herói ============ */
.heroi {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 120px var(--margem) 30svh;
  overflow: hidden; text-align: center;
}
.heroi__miolo { position: relative; z-index: 1; display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: center; }
.heroi__titulo {
  font-size: clamp(3.3rem, 11vw, 9rem);
  font-weight: 860; font-stretch: 108%;
  line-height: 0.96; letter-spacing: -0.035em;
  color: var(--tinta);
}
/* brilho que corre pelas letras depois do rodo */
.heroi__titulo .linha {
  display: block;
  /* o texto recortado pelo fundo perde o que passa da caixa: folga para acento e descendente */
  padding: 0.12em 0.04em 0.14em; margin: -0.12em -0.04em -0.14em;
  background:
    linear-gradient(100deg, transparent 44%, var(--azul-vivo) 50%, transparent 56%) 130% 0 / 300% 100% no-repeat,
    linear-gradient(var(--tinta), var(--tinta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.heroi__titulo em {
  font-style: normal; color: var(--laranja-texto);
  background:
    linear-gradient(100deg, transparent 44%, rgb(255 238 210 / 0.95) 50%, transparent 56%) 130% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, var(--laranja) 10%, var(--laranja-texto) 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.heroi.limpo .heroi__titulo .linha, .heroi.limpo .heroi__titulo em { animation: brilho 1.8s 0.05s var(--curva) both; }
@keyframes brilho { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }

.heroi__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.45rem); font-weight: 400; line-height: 1.35; letter-spacing: 0;
  color: var(--grafite); max-width: 30ch;
}

/* chão em perspectiva: as vagas recém-lavadas sob o título */
.heroi__chao {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  perspective: 700px; perspective-origin: 50% 0%;
  pointer-events: none;
}
@supports (mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent)) {
  .heroi__chao {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%, #000 45%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 30%, #000 45%, transparent 100%);
  }
}
.chao {
  position: absolute; left: -40%; right: -40%; top: 0; height: 220%;
  transform: rotateX(72deg); transform-origin: 50% 0%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(214 228 244 / 0.45));
}
.chao__vaga { position: absolute; top: 8%; bottom: 0; width: 5px; background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.9) 25%); border-radius: 3px; }
.chao__vaga:nth-child(1) { left: 41%; } .chao__vaga:nth-child(2) { left: 47%; }
.chao__vaga:nth-child(3) { left: 53%; } .chao__vaga:nth-child(4) { left: 59%; }
.chao__faixa {
  position: absolute; left: 0; right: 0; top: 5%; height: 7px;
  background: repeating-linear-gradient(90deg, var(--amarelo-faixa) 0 60px, transparent 60px 110px);
  opacity: 0.8;
}
.chao__luz { position: absolute; left: 30%; right: 30%; top: 10%; height: 50%; background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / 0.9), transparent 70%); filter: blur(10px); }

/* camada de sujeira e o rodo */
.heroi__sujeira { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.heroi__rodo {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none;
  width: 40px; transform: translateX(-200px); will-change: transform; display: none;
}
.js .heroi__rodo { display: block; }
.rodo__lamina { position: absolute; inset: 0; width: 40px; max-width: none; height: 100%; filter: drop-shadow(10px 0 18px rgb(14 26 43 / 0.25)); }
.rodo__cabo { position: absolute; max-width: none; left: 30px; top: 50%; width: 420px; height: 120px; transform: translateY(-50%) rotate(-7deg); transform-origin: 0 50%; filter: drop-shadow(0 12px 14px rgb(14 26 43 / 0.25)); }
.heroi__rodo.saiu, .heroi__sujeira.saiu { display: none; }

/* ============ 2. serviços ============ */
.servicos { padding: clamp(96px, 12vw, 160px) var(--margem) clamp(72px, 9vw, 128px); }
.manifesto {
  max-width: 20ch; margin: 0 auto clamp(64px, 9vw, 120px); text-align: center;
  font: 800 clamp(1.9rem, 4.6vw, 3.6rem)/1.08 var(--fonte-titulo); font-stretch: 104%; letter-spacing: -0.025em;
  color: var(--tinta);
}
.bento { max-width: 1080px; margin: 0 auto; display: grid; gap: 16px; }
.ladrilho {
  position: relative; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 30%, rgb(255 255 255 / 0.95), rgb(242 245 248 / 0.78));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-radius: var(--raio-g);
  box-shadow: var(--fio), var(--sombra-baixa);
  text-align: center;
}
.ladrilho__cena {
  width: 100%; aspect-ratio: 4 / 3; height: auto;
}
.ladrilho__texto { display: grid; gap: 12px; justify-items: center; padding: 8px 28px 36px; }
.ladrilho__titulo { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.04; font-stretch: 104%; }
.ladrilho__sub { color: var(--grafite); max-width: 34ch; }
.servicos__nota { margin: 36px auto 0; text-align: center; color: var(--grafite); }

/* ============ 3. jato ============ */
.jato { position: relative; height: 380svh; }
.jato__palco { position: sticky; top: 0; height: 100svh; padding: 56px 12px 12px; display: grid; }
.jato__moldura {
  position: relative; overflow: hidden; border-radius: var(--raio-g);
  background: radial-gradient(120% 90% at 50% 100%, var(--cena-meio), var(--cena-tinta));
  box-shadow: var(--fio), 0 30px 60px -30px rgb(14 26 43 / 0.55);
  isolation: isolate;
}
.jato__piso, .jato__spray { position: absolute; inset: 0; width: 100%; height: 100%; }
.jato__spray { z-index: 1; }
.jato__topo {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  padding: clamp(24px, 4vw, 48px) 20px 64px; text-align: center;
  background: linear-gradient(to bottom, rgb(6 16 31 / 0.75), transparent);
  display: grid; gap: 14px; justify-items: center;
}
.jato__titulo { font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1.04; color: var(--branco); max-width: 18ch; }
.jato__base {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 72px 20px clamp(24px, 4vw, 40px); text-align: center;
  background: linear-gradient(to top, rgb(6 16 31 / 0.7), transparent);
  display: grid; justify-items: center; gap: 4px;
}
.jato__contador { display: flex; align-items: baseline; color: var(--branco); }
.jato__contador strong { font: 860 clamp(3rem, 7vw, 5.5rem)/0.9 var(--fonte-titulo); font-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.jato__contador span { font: 700 clamp(1.4rem, 3vw, 2.2rem)/1 var(--fonte-titulo); color: var(--laranja-claro); margin-left: 4px; }
.jato__etapas { list-style: none; margin: 0; padding: 0; display: grid; }
.jato__etapas li {
  grid-area: 1 / 1; font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--texto-inverso);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}
.jato__etapas li.ativa { opacity: 1; transform: none; }
.jato__dica {
  position: absolute; z-index: 2; right: 20px; bottom: 20px;
  font: 700 0.7rem/1 var(--fonte-titulo); font-stretch: 75%; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--texto-inverso-suave); transition: opacity 0.5s;
}
.jato.andando .jato__dica { opacity: 0; }
@media (max-width: 733px) { .jato__dica { display: none; } }

/* ============ 4. como funciona ============ */
.como { padding: clamp(96px, 12vw, 160px) var(--margem) clamp(72px, 9vw, 128px); }
.cabeca { max-width: 1080px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; display: grid; gap: 18px; justify-items: center; }
.cabeca__titulo { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.02; font-stretch: 104%; }
.passos { list-style: none; padding: 0; margin: 0 auto; max-width: 1080px; display: grid; gap: 40px; }
.passo { display: grid; gap: 10px; justify-items: center; text-align: center; }
.passo__num {
  font: 860 3.4rem/1 var(--fonte-titulo); font-stretch: 75%; letter-spacing: -0.01em;
  color: var(--grafite-claro); opacity: 0.55;
}
.passo h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.1; }
.passo p { color: var(--grafite); max-width: 30ch; }

.garantias { list-style: none; margin: clamp(64px, 8vw, 104px) auto 0; padding: 0; max-width: 1080px; display: grid; gap: 16px; }
.ladrilho--compacto { padding: 32px 28px; display: grid; gap: 8px; justify-items: center; }
.garantias__icone { width: 34px; height: 34px; margin-bottom: 8px; fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.garantias strong { font: 800 1.3rem/1.1 var(--fonte-titulo); font-stretch: 104%; letter-spacing: -0.015em; }
.garantias span { color: var(--grafite); font-size: 0.95rem; }

/* ============ 5. contato ============ */
.contato { padding: 0 var(--margem) clamp(72px, 9vw, 128px); }
.contato__cartao {
  max-width: 1080px; margin: 0 auto; position: relative; overflow: hidden;
  border-radius: var(--raio-g); color: var(--branco); text-align: center;
  padding: clamp(56px, 9vw, 120px) 24px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgb(46 154 214 / 0.35), transparent 70%),
    linear-gradient(180deg, var(--marinho-2), var(--tinta)) var(--tinta);
  display: grid; gap: 20px; justify-items: center;
  box-shadow: var(--fio), var(--sombra-baixa);
}
.contato__titulo { font-size: clamp(2.8rem, 8vw, 6.2rem); font-weight: 860; font-stretch: 110%; letter-spacing: -0.035em; line-height: 0.95; }
.contato__fone {
  font: 860 clamp(1.9rem, 5vw, 3.4rem)/1 var(--fonte-titulo); font-stretch: 100%;
  text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; color: var(--ceu);
}
.contato__fone:hover { color: var(--branco); }
.contato__regiao { color: var(--texto-inverso-suave); font-size: 0.95rem; margin-top: 8px; }

/* ============ rodapé e flutuante ============ */
.rodape { padding: 0 var(--margem) 48px; }
.rodape__miolo {
  max-width: 1080px; margin: 0 auto; padding-top: 22px;
  border-top: 0.5px solid var(--linha-forte);
  display: grid; gap: 8px; font-size: 0.75rem; color: var(--grafite);
}
.rodape__marca { display: flex; align-items: center; gap: 8px; font: 700 0.8rem/1 var(--fonte-titulo); font-stretch: 88%; color: var(--tinta); }
.rodape a { color: var(--grafite); }
.flutuante {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tinta); background: linear-gradient(180deg, var(--laranja-claro), var(--laranja)) var(--laranja);
  box-shadow: 0 14px 30px -10px rgb(196 86 11 / 0.7);
  transform: translateY(120px); transition: transform 0.5s var(--curva);
}
.flutuante svg { width: 28px; height: 28px; }
.flutuante.visivel { transform: none; }

/* surgir ao entrar (fallback e navegadores sem scroll-driven) */
.js .surgir { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.9s var(--curva), transform 0.9s var(--curva); }
.js .surgir.visto { opacity: 1; transform: none; }
.bento .surgir:nth-child(3), .passos .surgir:nth-child(2), .garantias .surgir:nth-child(2) { transition-delay: 0.08s; }
.passos .surgir:nth-child(3), .garantias .surgir:nth-child(3) { transition-delay: 0.16s; }

/* ============ movimento ligado à rolagem ============ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* o herói recua quando a página sobe, como na Apple */
    .heroi__miolo { animation: recuar linear both; animation-timeline: view(); animation-range: exit 0% exit 70%; }
    @keyframes recuar { to { opacity: 0; transform: scale(0.9) translateY(-40px); } }
    .chao { animation: deitar linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes deitar { to { transform: rotateX(80deg); } }

    /* manifesto: cada palavra acende na sua vez */
    .manifesto { view-timeline-name: --manifesto; }
    .manifesto span {
      color: var(--grafite-claro); opacity: 0.35;
      animation: acender linear both; animation-timeline: --manifesto;
      animation-range: cover calc(18% + var(--p) * 34%) cover calc(24% + var(--p) * 34%);
    }
    @keyframes acender { to { color: var(--tinta); opacity: 1; } }
  }
}

/* ============ responsivo ============ */
@media (min-width: 734px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .ladrilho--largo { grid-column: 1 / -1; }
  .ladrilho--largo .ladrilho__cena { aspect-ratio: 16 / 8; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .garantias { grid-template-columns: repeat(3, 1fr); }
  .rodape__miolo { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
  .jato__palco { padding: 60px 16px 16px; }
}
@media (min-width: 1000px) {
  .barra__nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heroi__sujeira, .heroi__rodo { display: none !important; }
  .js .surgir { opacity: 1; transform: none; transition: none; }
  .heroi.limpo .heroi__titulo .linha, .heroi.limpo .heroi__titulo em { animation: none; }
  .botao, .botao::after, .link::after, .flutuante, .jato__etapas li { transition: none; }
}

@media (max-width: 600px) {
  .heroi__titulo { font-size: clamp(2.5rem, 11.4vw, 3.4rem); font-stretch: 96%; }
}