/* Só o que é deste site (#1373 CorreaCar12): "Tudo escuro até o farol passar".
   Grafite em tudo, um vermelho de sinal, inclinação de -12° do letreiro, malha de pontos e carro em traço. */
@font-face{font-family:"Archivo";src:url("../fonts/Archivo-VF-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var-latin.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* Tipo: Archivo larga em caixa alta (a mais próxima do letreiro); rótulos em mono. */
h1,h2,.sobre-2__frase,.topo__marca{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
h3{font-stretch:112%;font-weight:700}
h1{font-size:clamp(2.1rem,.9rem + 5.4vw,7rem);line-height:1}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.75rem)}
.sobretitulo,.ficha__n{font:500 var(--t-sm)/1.3 var(--font-rotulo);letter-spacing:.12em;text-transform:uppercase}
.sobretitulo::before{content:"";display:inline-block;width:.5em;height:1em;margin-right:.7em;vertical-align:-.12em;background:var(--cor-acento);transform:skewX(-12deg)}
.topo__marca b{color:var(--cor-acento);font-weight:inherit}
.botao{border-radius:2px}
.moldura{border-radius:2px}

/* Página toda escura: as seções "escuras" do kit ficam no grafite 2, não invertem para claro. */
.secao--escura{background:var(--cor-fundo-alt);color:var(--cor-texto)}
.secao--escura .texto-suave{color:var(--cor-texto-suave)}
.contato-1__rodape{border-top-color:var(--cor-linha)}

/* Hero: a foto fica na penumbra e o farol passa uma vez, inclinado a -12°. */
.hero-2{color:var(--cor-texto)}
.hero-2::before{background:linear-gradient(to top,var(--cor-fundo) 4%,color-mix(in srgb,var(--cor-fundo) 62%,transparent) 46%,color-mix(in srgb,var(--cor-fundo) 18%,transparent))}
.hero-2 h1{max-width:13em}
.hero-2__texto{padding-block:var(--e-6)}
.hero-2__texto .sobretitulo{color:var(--cor-texto)}
.hero-2__lide{max-width:28ch}
.hero-2::after{content:"";position:absolute;z-index:1;top:-10%;bottom:-10%;left:0;width:34%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cor-texto) 22%,transparent) 45%,color-mix(in srgb,var(--cor-texto) 34%,transparent) 55%,transparent);
  transform:translateX(-120%) skewX(-12deg);animation:farol 2.2s var(--curva) .35s 1 both}
@keyframes farol{0%{opacity:0;transform:translateX(-120%) skewX(-12deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(330%) skewX(-12deg)}}

/* Serviços: três palavras grandes, sem número (o número fica só na revisão e nos passos). */
.servicos-1__lista li{grid-template-columns:1fr;gap:var(--e-2)}
.servicos-1__lista li > *{grid-column:1 !important}
.servicos-1__lista h3{font-size:clamp(1.6rem,.9rem + 2.4vw,3.5rem);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:1}
.servicos-1__lista li:last-child{border-bottom:1px solid var(--cor-linha)}

/* A revisão: malha de pontos, fichas com o carro em traço e o ponto do item aceso em vermelho. */
.revisao{background:radial-gradient(circle,var(--cor-linha) 1px,transparent 1.5px) 0 0/24px 24px var(--cor-fundo-alt)}
.revisao .galeria-1__cabeca{margin-bottom:var(--e-4)}
.ficha{display:grid;align-content:start;gap:var(--e-2);padding:var(--e-4) var(--e-3);background:var(--cor-fundo);border:1px solid var(--cor-linha);border-top:3px solid var(--cor-acento)}
.ficha__carro{width:100%;fill:none;stroke:var(--cor-texto-suave);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;margin-bottom:var(--e-2)}
.ficha__ponto{stroke:var(--cor-acento);stroke-width:3}
.ficha__ponto circle{fill:var(--cor-fundo)}
.ficha__ponto text{fill:var(--cor-acento);stroke:none;font:500 17px var(--font-rotulo);text-anchor:middle}
.ficha__n{color:var(--cor-acento)}

/* Momento tipográfico: a frase da bio, com um fio vermelho inclinado antes dela. */
.sobre-2__frase{max-width:16em;font-size:clamp(2rem,1rem + 4.4vw,5.25rem);line-height:1.02;padding-top:var(--e-4);border-top:1px solid var(--cor-linha);position:relative}
.sobre-2__frase::before{content:"";position:absolute;top:-2px;left:0;width:6rem;height:3px;background:var(--cor-acento)}

/* Passos: numeral em mono, na cor de sinal. */
.passos-1__n{font-family:var(--font-rotulo);font-weight:500}
.passos-1__lista li{padding-top:var(--e-3);border-top:1px solid var(--cor-linha)}

/* Fechamento: faixa em caixa alta; foto na proporção real (1088 x 920), sem ampliar. */
.chamada-2__faixa{font-stretch:125%;font-weight:800;text-transform:uppercase}
.chamada-2__faixa li[aria-hidden]{color:var(--cor-acento)}
.chamada-2__foto{aspect-ratio:1088/920;max-width:34rem}

/* Hero no celular: o enquadramento desce para o carro, que é o assunto da foto. */
@media (max-width:767px){.hero-2__foto img{object-position:62% 50%}}

/* A revisão ocupa a tela inteira enquanto fica fixa (a partir de 900 px), sem faixa de outra seção embaixo. */
@media (min-width:900px){.revisao{min-height:100svh;display:grid;align-content:center}.revisao > *{min-width:0}}