/* Loomis Auto Service · Ocala, FL
 *
 * A cor desta peca e a TEMPERATURA DA LUZ, e nao um acento. Azul frio no amanhecer,
 * tungstenio na baia, ouro no fecho, sobre grafite e creme. Nenhum acento saturado
 * nomeado, que e o que a separa das seis pecas anteriores e em especial da Halo, que e a
 * outra peca automotiva e queimou tema claro com ciano agua.
 *
 * O elemento grafico recorrente e a HORA, em mono. Ela e a espinha: rolar nao e percorrer
 * secoes, e atravessar um dia de trabalho.
 */

:root {
  --oleo: #0C0E10;
  --grafite: #14171A;
  --grafite-2: #1B1F23;
  --linha: rgba(239, 235, 228, 0.12);

  --creme: #EFEBE4;
  --dim: rgba(239, 235, 228, 0.74);
  --frio: #8CA2B2;
  --tungstenio: #E9B87C;
  /* O tungstenio sobre fundo claro nao passa em contraste, entao existe a versao
     escurecida. Acento vivo e para grafismo e fundo, nunca para texto pequeno.
     Escurecido duas vezes em 04/08/2026, e o segundo passo so aconteceu porque a
     medicao por pixel existe. Sobre creme CHAPADO o #8A5F22 passava com 5,2, mas no ato
     5 o creme e um VEU sobre o video: a luminancia real do fundo ali e 0,55 e nao 0,83,
     e mesmo o #7A5119 dava 4,19 contra um piso de 4,5. Calculado para pousar em 5,2 no
     pior ponto, e sobre o creme chapado das secoes planas ele fica em 7,7. */
  --tungstenio-tinta: #64400F;

  --claro: #F1EBE0;
  --tinta: #17191C;
  --tinta-dim: rgba(23, 25, 28, 0.76);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --raio: 10px;
  --mola: cubic-bezier(0.22, 0.8, 0.28, 1);
  --sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grafite);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--creme); color: var(--tinta);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap { width: min(1120px, calc(100% - var(--s7))); margin-inline: auto; }

/* ------------------------------------------------------------------ cabecalho */

header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) max(var(--s5), calc((100% - 1120px) / 2));
  background: linear-gradient(180deg, rgba(12, 14, 16, 0.92), rgba(12, 14, 16, 0));
  backdrop-filter: blur(2px);
}

.marca {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--creme); text-decoration: none;
  font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.marca em { font-style: normal; font-weight: 400; color: var(--dim); }

header nav { display: flex; gap: var(--s5); margin-left: auto; }

/* A cor do link de navegacao e escopada em `.lnk`, e nao em `header nav a`.
   Regra de link escrita para a navegacao repinta qualquer botao que more dentro dela, e
   foi assim que o botao de ligar da Halo herdou o cinza dos links e caiu para 2.27:1. */
.lnk {
  color: var(--dim); text-decoration: none; font-size: 15px;
}
.lnk:hover, .lnk:focus-visible { color: var(--creme); }

.btn-tel {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--tungstenio); text-decoration: none;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  border: 1px solid rgba(233, 184, 124, 0.34);
  padding: var(--s2) var(--s4); border-radius: 999px;
  white-space: nowrap;
}
.btn-tel:hover, .btn-tel:focus-visible {
  background: rgba(233, 184, 124, 0.12); border-color: var(--tungstenio);
}

/* ------------------------------------------------------------------ o cinema */

[data-cinema] { position: relative; background: var(--oleo); }

[data-palco] {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  margin-bottom: -100vh; margin-bottom: -100svh;
  overflow: hidden;
}
[data-palco] #tela, [data-palco] .cartaz {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
#tela, .cartaz { transition: opacity 0.5s ease; }
#tela { opacity: 0; }
[data-cinema][data-modo="canvas"] #tela { opacity: 1; }
[data-cinema][data-modo="canvas"] .cartaz { opacity: 0; }

/* O veu do palco. Ele escurece topo e base, que e onde moram o cabecalho e o texto, e
   deixa o meio limpo, que e onde a baia esta vazia de proposito. */
[data-palco]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(12, 14, 16, 0.86) 0%,
    rgba(12, 14, 16, 0.16) 30%,
    rgba(12, 14, 16, 0.14) 58%,
    rgba(12, 14, 16, 0.74) 100%);
}

.ato {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex;
  align-items: center;
  /* `safe center` centraliza quando cabe e alinha no topo quando NAO cabe. Com center
     puro, ato mais alto que a tela transborda para os dois lados e o que some primeiro e
     o TOPO: rotulo e manchete entram por baixo do cabecalho fixo, e o visitante nem sabe
     que existe o que ficou escondido. */
  align-items: safe center;
  padding: calc(var(--s9) + var(--s6)) 0 var(--s9);
}

.ato > .wrap { transition: opacity 0.75s var(--mola), transform 0.75s var(--mola); }
.ato:not([data-dentro]) > .wrap { opacity: 0; transform: translateY(24px); }
.ato[data-dentro] > .wrap { opacity: 1; transform: none; }
[data-entra] { transition: opacity 0.7s var(--mola), transform 0.7s var(--mola); }
[data-entra]:not([data-dentro]) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .ato:not([data-dentro]) > .wrap,
  [data-entra]:not([data-dentro]) { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ tipo */

/* A HORA e o elemento recorrente da peca inteira. Mono, porque digito de largura fixa e o
   que faz 7:10 e 4:30 se alinharem verticalmente entre secoes. */
.hora {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; color: var(--tungstenio);
  margin: 0 0 var(--s2);
}
.rotulo {
  font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--frio); font-weight: 600; margin: 0 0 var(--s5);
}

h1, h2, h3 { margin: 0 0 var(--s4); text-wrap: balance; }
h1 {
  font-weight: 600; font-size: clamp(40px, 7.2vw, 78px);
  line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch;
}
h2 {
  font-weight: 600; font-size: clamp(27px, 3.9vw, 44px);
  line-height: 1.12; letter-spacing: -0.018em; max-width: 20ch;
}
h3 { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }

p { margin: 0 0 var(--s4); }
.sub { font-size: clamp(17px, 1.5vw, 19px); color: var(--dim); max-width: 56ch; }
.nota { font-size: 14.5px; color: var(--dim); max-width: 60ch; }

/* ------------------------------------------------------------------ botoes */

.ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.btn {
  display: inline-block; text-decoration: none;
  background: var(--creme); color: var(--tinta);
  font-weight: 600; font-size: 16px;
  padding: var(--s3) var(--s6); border-radius: var(--raio);
  border: 1px solid transparent;
  transition: transform 0.18s var(--mola), background 0.18s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); background: #fff; }
.btn.vazado {
  background: transparent; color: var(--creme);
  border-color: rgba(239, 235, 228, 0.28);
}
.btn.vazado:hover, .btn.vazado:focus-visible {
  background: rgba(239, 235, 228, 0.08); border-color: rgba(239, 235, 228, 0.5);
}

/* ------------------------------------------------------------------ ato 2 */

.tres {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tres li { border-top: 1px solid var(--linha); padding-top: var(--s4); }
.tres p { color: var(--dim); font-size: 15.5px; margin: 0; }
.tres .num {
  font-family: var(--mono); font-size: 25px; font-weight: 500;
  color: var(--creme); margin: 0 0 var(--s2); letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ ato 3 */

.servicos {
  list-style: none; margin: var(--s6) 0 var(--s5); padding: 0;
  display: grid; gap: var(--s2) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.servicos li {
  color: var(--creme); font-size: 16px;
  padding: var(--s2) 0 var(--s2) var(--s5);
  border-bottom: 1px solid var(--linha);
  position: relative; min-width: 0;
}
.servicos li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 9px; height: 1px; background: var(--tungstenio);
}

/* ------------------------------------------------------------------ ato 4 · a assinatura */

.wrap-msg {
  display: grid; gap: var(--s8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: center;
}
.msg-texto { min-width: 0; }

.fone {
  margin: 0; min-width: 0;
  border: 1px solid var(--linha); border-radius: 22px;
  background: var(--grafite-2);
  padding: var(--s3);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.fone-tela {
  background: var(--oleo); border-radius: 14px; padding: var(--s4);
}
.fone-de {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--frio); margin: 0 0 var(--s3); text-transform: uppercase;
}
.fone-foto {
  border-radius: 8px; overflow: hidden; margin-bottom: var(--s3);
  border: 1px solid var(--linha); line-height: 0;
}
.fone-foto svg { width: 100%; height: auto; display: block; }
.fone-msg { color: var(--creme); font-size: 15px; margin: 0 0 var(--s4); }
.fone-preco {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin: 0 0 var(--s4);
  border-top: 1px solid var(--linha); padding-top: var(--s3);
}
.fone-preco span { color: var(--dim); font-size: 13.5px; }
.fone-preco strong {
  font-family: var(--mono); font-size: 23px; font-weight: 500; color: var(--creme);
}
.fone-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
/* Sao <span> e nao <button>: a mensagem e uma ILUSTRACAO do que o cliente recebe, e botao
   de verdade que nao faz nada e promessa quebrada para quem usa teclado ou leitor. */
.fone-btn {
  text-align: center; font-size: 14px; font-weight: 600;
  padding: var(--s3) var(--s2); border-radius: 8px;
  border: 1px solid var(--linha); color: var(--dim);
}
.fone-btn.primario {
  background: var(--tungstenio); color: #241703; border-color: transparent;
}

/* ------------------------------------------------------------------ ato 5, o claro */

/* O veu proprio do ultimo ato. O video entrega 154 de luminancia media contra um piso de
   170, entao a inversao para texto escuro NAO pode depender de o quadro ter estourado.
   Radial e nao linear: com linear e inset 0 a borda de cima corta seco e desenha uma
   linha horizontal reta atravessando o quadro, que num plano continuo le como emenda. */
.ato.claro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(126% 96% at 18% 56%,
    rgba(241, 235, 224, 0.96) 0%,
    rgba(241, 235, 224, 0.88) 38%,
    rgba(241, 235, 224, 0.4) 70%,
    rgba(241, 235, 224, 0) 100%);
}
.ato.claro { color: var(--tinta); }
.ato.claro .hora { color: var(--tungstenio-tinta); }
/* 0.72 e nao 0.6: com 0.6 a mistura sobre o veu dava 4,27 contra o piso de 4,5, medido
   por pixel em 04/08/2026. Rotulo e texto pequeno e em caixa alta, ou seja o pior caso. */
.ato.claro .rotulo { color: rgba(23, 25, 28, 0.72); }
.ato.claro p { color: var(--tinta-dim); }
.ato.claro .btn { background: var(--tinta); color: var(--claro); }
.ato.claro .btn:hover, .ato.claro .btn:focus-visible { background: #000; }
.ato.claro .btn.vazado {
  background: transparent; color: var(--tinta); border-color: rgba(23, 25, 28, 0.24);
}
.ato.claro .btn.vazado:hover, .ato.claro .btn.vazado:focus-visible {
  background: rgba(23, 25, 28, 0.07); border-color: rgba(23, 25, 28, 0.45);
}

/* ------------------------------------------------------------------ secoes planas
 *
 * `position: relative; z-index: 1` NAO e estilo, e o conserto de 02/08/2026: o palco e
 * posicionado e secao estatica pinta antes dele, mesmo com fundo opaco do outro lado.
 * Sem esta linha o video cobre a pagina inteira abaixo do cinema e ENGOLE O CLIQUE.
 */
section.plana, footer { position: relative; z-index: 1; }

.plana { background: var(--claro); color: var(--tinta); padding: var(--s9) 0; }
.plana .rotulo { color: var(--tungstenio-tinta); }
.plana .hora { color: var(--tungstenio-tinta); }
.plana p { color: var(--tinta-dim); }
.plana h2, .plana h3 { color: var(--tinta); }

/* Todo bloco de fundo proprio declara a propria cor de texto, nos DOIS sentidos. E a
   terceira vez que esta familia de erro aparece no portfolio: cartao claro dentro de
   faixa escura herda o claro e some. */
.plana.escura { background: var(--grafite); color: var(--creme); }
.plana.escura .rotulo { color: var(--frio); }
.plana.escura .hora { color: var(--tungstenio); }
.plana.escura p { color: var(--dim); }
.plana.escura h2, .plana.escura h3 { color: var(--creme); }

/* ------------------------------------------------------------------ preco */

.tabela { width: 100%; border-collapse: collapse; margin: var(--s7) 0 var(--s5); }
/* A cor e declarada em toda regra de tabela de proposito: em quirks mode a tabela NAO
   herda `color` dos ancestrais e cai para a cor do body. Esta pagina tem doctype, mas a
   regra e barata e o defeito e invisivel ate alguem remover a primeira linha. */
.tabela th, .tabela td {
  color: var(--tinta);
  text-align: left; padding: var(--s4) 0;
  border-bottom: 1px solid rgba(23, 25, 28, 0.12);
  vertical-align: baseline;
}
.tabela th { font-weight: 600; padding-right: var(--s5); }
.tabela th span {
  display: block; font-weight: 400; font-size: 14px; color: var(--tinta-dim);
}
.tabela td {
  font-family: var(--mono); font-size: 17px; white-space: nowrap; text-align: right;
}

/* ------------------------------------------------------------------ prova */

.provas {
  list-style: none; margin: var(--s7) 0 var(--s5); padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.provas li {
  min-width: 0;
  border-left: 2px solid rgba(233, 184, 124, 0.5);
  padding: var(--s1) 0 var(--s1) var(--s5);
}
.provas p { margin: 0 0 var(--s2); font-size: 15.5px; }
.provas .quem {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--frio); margin: 0;
}

/* ------------------------------------------------------------------ faq */

.faq-lista { margin-top: var(--s7); max-width: 78ch; }
.faq-lista details { border-bottom: 1px solid rgba(23, 25, 28, 0.14); }
.faq-lista summary {
  cursor: pointer; list-style: none;
  padding: var(--s4) var(--s6) var(--s4) 0; position: relative;
  font-weight: 600; font-size: 17px;
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 20px; color: var(--tungstenio-tinta);
}
.faq-lista details[open] summary::after { content: "\2212"; }

/* A resposta declara a propria cor com especificidade suficiente, e nos dois sentidos.
   Na Vesperi `.papel p` (0,1,1) ganhou de `.faq-lista details p` (0,1,2) e a resposta
   ficou off-white sobre off-white, contraste 1, com cara de conteudo faltando no HTML. */
.plana .faq-lista summary { color: var(--tinta); }
.plana .faq-lista details p { color: var(--tinta-dim); padding-bottom: var(--s4); margin: 0; }
.plana.escura .faq-lista summary { color: var(--creme); }
.plana.escura .faq-lista details p { color: var(--dim); }

/* ------------------------------------------------------------------ visita */

.visita {
  display: grid; gap: var(--s8); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.visita > div { min-width: 0; }
.horario { width: 100%; border-collapse: collapse; margin: var(--s4) 0; }
.horario th, .horario td {
  color: var(--creme);
  text-align: left; padding: var(--s2) 0; font-size: 15.5px;
  border-bottom: 1px solid var(--linha);
}
.horario th { font-weight: 400; color: var(--dim); }
.horario td { font-family: var(--mono); text-align: right; white-space: nowrap; }
address {
  font-style: normal; color: var(--creme); font-size: 18px; margin-bottom: var(--s5);
}
.contatos { margin: 0 0 var(--s4); }

/* ------------------------------------------------------------------ rodape */

footer { background: var(--oleo); color: var(--dim); padding: var(--s8) 0; }
footer p { color: var(--dim); font-size: 14.5px; }
footer a { color: var(--creme); }
.marca-pe { font-weight: 700; color: var(--creme); font-size: 18px; }
.marca-pe em { font-style: normal; font-weight: 400; color: var(--dim); }
.ficticio {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--linha);
  font-size: 13px; max-width: 72ch;
}

/* ------------------------------------------------------------------ flutuante */

.flutua {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 30;
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--tungstenio); color: #241703;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease, transform 0.3s var(--mola);
}
/* Botao flutuante de contato por cima da propria secao de contato oferece duas vezes a
   mesma coisa, e no celular ainda tapa o telefone, que e o que ele existe para dar. */
.flutua[data-oculto] { opacity: 0; transform: scale(0.8); pointer-events: none; }

/* ------------------------------------------------------------------ responsivo */

@media (max-width: 900px) {
  .wrap-msg { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .fone { max-width: 380px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - var(--s5) * 2); }
  header { gap: var(--s3); padding: var(--s2) var(--s5); }
  header nav { display: none; }
  .btn-tel span { display: none; }
  .btn-tel { padding: var(--s2); }
  .ato { padding: calc(var(--s9) + var(--s2)) 0 var(--s8); }
  .plana { padding: var(--s8) 0; }
  .ctas .btn { flex: 1 1 auto; text-align: center; }
  .tabela td { font-size: 15.5px; }
}