/* ============================================================
   Garagem Boa Estrada — site público (tenant de demonstração)
   Identidade: "Ficha & Placa · Showroom Noturno" (dark premium).
   Tokens colados de docs/identidade.md. Escalas do DESIGN.md
   (espaço base-8, tipografia em --t-*, raio família única, 2 sombras).
   Âmbar = EXCLUSIVO do CTA. Verde --zap = SÓ WhatsApp.
   ============================================================ */

:root{
  /* --- Paleta: Showroom Noturno (dark · 60-30-10) --- */
  --fundo:#14171A;        /* dominante ~60% (carvão) */
  --superficie:#1D2226;   /* cards, header (grafite) */
  --superficie-2:#232A2F; /* elevado */
  --ardosia:#2E3A3F;      /* suporte ~30% (painéis, hero) */
  --borda:#2A3136;        /* hairline / divisória */
  --ambar:#E0A24E;        /* ACENTO ~10% — EXCLUSIVO do CTA */
  --ambar-esc:#C8863A;    /* hover do CTA */
  --texto:#EDEFF1;        /* primário (~15:1 sobre --fundo) */
  --texto-sec:#9AA3AA;    /* secundário (~6:1 sobre --fundo) */
  --zap:#27B85C;          /* funcional — SÓ botões de WhatsApp */
  --zap-esc:#1E9E4C;

  /* --- Tipografia (razão 1.25 sobre corpo 16) --- */
  --f-disp:'Archivo',system-ui,sans-serif;
  --f-txt:'Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
  --t-xs:12.8px; --t-s:16px; --t-m:20px; --t-l:25px;
  --t-xl:31.25px; --t-2xl:39px; --t-3xl:48.8px;

  /* --- Raio (família única) e sombra (2 níveis) --- */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:999px;
  --sombra-rep:0 4px 14px rgba(0,0,0,.30);
  --sombra-elev:0 12px 30px rgba(0,0,0,.45);

  --max:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-txt);
  background:var(--fundo);
  color:var(--texto);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:96px 0}

h1,h2,h3{font-family:var(--f-disp);line-height:1.12;letter-spacing:-.015em;font-weight:800}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-l)}
p{max-width:65ch}

.eyebrow{
  font-family:var(--f-mono);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ambar);display:inline-block;max-width:100%;margin-bottom:12px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:var(--r-s)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-txt);font-weight:700;font-size:var(--t-s);
  text-decoration:none;padding:14px 24px;border-radius:var(--r-pill);
  border:0;cursor:pointer;min-height:48px;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-cta{background:var(--ambar);color:var(--fundo)}       /* ação primária — âmbar */
.btn-cta:hover{background:var(--ambar-esc)}
.btn-zap{background:var(--zap);color:#06210F}              /* WhatsApp — verde */
.btn-zap:hover{background:var(--zap-esc)}
.btn-ghost{background:transparent;color:var(--texto);border:1px solid var(--borda)}
.btn-ghost:hover{background:var(--superficie-2);border-color:var(--ardosia)}
.btn-zap-ghost{background:transparent;color:var(--texto);border:1px solid var(--zap)}
.btn-zap-ghost:hover{background:rgba(39,184,92,.12)}
.btn svg{width:20px;height:20px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(20,23,26,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--texto)}
.logo-placa{
  font-family:var(--f-mono);font-weight:700;font-size:var(--t-xs);
  background:var(--superficie-2);border:1px solid var(--borda);
  color:var(--ambar);padding:4px 9px;border-radius:var(--r-s);letter-spacing:.12em;
}
.logo b{font-family:var(--f-disp);font-weight:800;font-size:var(--t-m)}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:var(--t-s);font-weight:600;color:var(--texto-sec)}
.nav-links a:hover{color:var(--texto)}
.nav-links a.nav-cta{
  background:var(--zap);color:#06210F;padding:10px 18px;border-radius:var(--r-pill);
  min-height:44px;display:inline-flex;align-items:center;
}
.nav-links a.nav-cta:hover{background:var(--zap-esc);color:#06210F}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px;min-height:44px;min-width:44px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--texto);margin:5px 0;transition:.2s}

/* ---------- hero (Showroom Noturno) ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ardosia) 0%,var(--fundo) 100%);
  padding:104px 0 112px;
}
/* glow radial — o "holofote" do showroom */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 68% 42%,rgba(224,162,78,.16),transparent 70%);
}
/* hairline suave (assinatura suavizada — no lugar do tracejado pesado) */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--borda) 12%,var(--borda) 88%,transparent);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
/* min-width:0 impede a coluna de estourar para caber texto longo (eyebrow) numa linha */
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--ambar)}
.hero-sub{font-size:var(--t-m);color:var(--texto-sec);max-width:52ch;margin-bottom:32px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ficha da casa — placa/ficha como detalhe refinado (hairlines) */
.hero-ficha{
  justify-self:end;max-width:380px;width:100%;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-l);box-shadow:var(--sombra-elev);padding:24px;
}
.hero-ficha .tag{
  font-family:var(--f-mono);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.2em;color:var(--ambar);margin-bottom:14px;
}
.ficha-linha{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--borda);font-size:var(--t-s);color:var(--texto-sec);
}
.ficha-linha:last-child{border-bottom:0}
.ficha-linha b{font-family:var(--f-mono);font-weight:700;font-size:var(--t-xs);color:var(--texto);letter-spacing:.04em}

/* ---------- estoque ---------- */
.estoque{background:var(--fundo)}
.sec-cabeca{margin-bottom:32px}
.sec-contagem{display:block;margin-top:8px;font-family:var(--f-mono);font-weight:700;font-size:var(--t-xs);letter-spacing:.08em;color:var(--texto-sec)}
.filtros{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.filtros label{position:relative;display:inline-flex}
.filtros select{
  font-family:var(--f-txt);font-size:var(--t-s);font-weight:600;color:var(--texto);
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-s);
  padding:12px 40px 12px 14px;cursor:pointer;min-height:48px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3AA' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
.filtros select:hover{border-color:var(--ardosia)}

.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* card */
.card{
  display:flex;flex-direction:column;text-align:left;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-m);overflow:hidden;cursor:pointer;padding:0;
  font-family:var(--f-txt);color:var(--texto);min-width:0;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-elev);border-color:var(--ardosia)}
.card-foto{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(75% 90% at 50% 30%,#20272C,var(--superficie-2));
  display:flex;align-items:center;justify-content:center;
}
.card-foto img{width:100%;height:100%;object-fit:cover}
/* scrim de coesão: assenta fotos (estúdio branco OU celular do pátio) no tema escuro */
.card-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(20,23,26,.5),transparent 42%,transparent 86%,rgba(20,23,26,.22));
}
.selo,.foto-count{z-index:2}
/* affordance no hover/foco (desktop): "ver detalhes" */
.card-ver{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;
  font-family:var(--f-txt);font-weight:700;font-size:var(--t-xs);
  background:rgba(20,23,26,.82);border:1px solid var(--borda);color:var(--texto);
  padding:6px 12px;border-radius:var(--r-pill);opacity:0;transition:opacity .16s ease;backdrop-filter:blur(4px);
}
.card:hover .card-ver,.card:focus-visible .card-ver{opacity:1}
.foto-vazia{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.foto-vazia svg{width:56%;height:auto;opacity:.55}
.foto-vazia span{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--texto-sec)}

.selo{
  position:absolute;top:12px;left:12px;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  padding:5px 10px;border-radius:var(--r-s);
}
.selo-vendido{background:var(--fundo);color:var(--texto);border:1px solid var(--borda)}
.selo-destaque{background:var(--ambar);color:var(--fundo)}

/* selo de contagem de fotos (canto oposto ao selo de status) */
.foto-count{
  position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.04em;
  background:rgba(20,23,26,.72);border:1px solid var(--borda);border-radius:var(--r-pill);
  padding:4px 9px;color:var(--texto);backdrop-filter:blur(4px);
}
.foto-count svg{width:13px;height:13px}

.card-corpo{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:var(--t-m);font-weight:800;margin-bottom:2px}
.card .versao{font-size:var(--t-xs);color:var(--texto-sec);margin-bottom:12px}
.specs{
  display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--texto-sec);
  border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  padding:9px 0;margin-bottom:14px;
}
.specs span+span::before{content:"·";margin-right:8px;color:var(--ardosia)}
.card-corpo .plaquinha{margin-top:auto}

/* plaquinha de preço — mono âmbar sobre superfície escura */
.plaquinha{
  align-self:flex-start;
  font-family:var(--f-mono);font-weight:700;font-size:var(--t-s);
  color:var(--ambar);background:var(--superficie-2);border:1px solid var(--borda);
  padding:8px 14px;border-radius:var(--r-s);
}
.vendido .plaquinha{color:var(--texto-sec);text-decoration:line-through;text-decoration-thickness:2px}
.vendido .card-foto{filter:saturate(.6)}
.vendido .foto-vazia svg{opacity:.3}

/* estados (skeleton / vazio / erro) */
.estado{
  grid-column:1/-1;text-align:center;padding:64px 24px;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);
}
.estado h3{margin-bottom:8px}
.estado p{color:var(--texto-sec);margin:0 auto 20px;max-width:44ch}
.estado-acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.skeleton{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);overflow:hidden}
.skeleton .s-foto{aspect-ratio:4/3;background:linear-gradient(100deg,var(--superficie-2) 40%,#2b333a 50%,var(--superficie-2) 60%);background-size:200% 100%;animation:brilho 1.2s infinite}
.skeleton .s-l{height:14px;margin:16px;border-radius:var(--r-s);background:var(--superficie-2)}
.skeleton .s-l.curta{width:55%;margin-top:0}
@keyframes brilho{to{background-position:-200% 0}}

/* ---------- sobre ---------- */
.sobre{background:var(--superficie);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.sobre-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sobre p{color:var(--texto-sec);margin-bottom:14px}
.diferenciais{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dif-item{background:var(--fundo);border:1px solid var(--borda);border-radius:var(--r-m);padding:18px}
.dif-item b{font-family:var(--f-mono);font-weight:700;font-size:var(--t-xs);letter-spacing:.1em;color:var(--ambar);display:block;margin-bottom:6px}
.dif-item span{font-size:var(--t-s);color:var(--texto-sec)}

/* ---------- contato ---------- */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.c-item{display:flex;gap:14px;margin-bottom:20px}
.c-item .ic{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-m);background:var(--superficie-2);border:1px solid var(--borda);display:flex;align-items:center;justify-content:center;font-size:20px}
.c-item b{display:block;font-size:var(--t-s);margin-bottom:2px}
.c-item span,.c-item a{font-size:var(--t-s);color:var(--texto-sec);text-decoration:none}
.c-item a:hover{color:var(--ambar)}
.mapa{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--borda);aspect-ratio:4/3;background:var(--superficie-2)}
.mapa iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.95)}

/* ---------- footer + zap flutuante ---------- */
footer{background:var(--superficie);border-top:1px solid var(--borda);color:var(--texto-sec);padding:32px 0;font-size:var(--t-xs)}
.footer-flex{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.funil{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.04em}
.funil a{color:var(--ambar);text-decoration:none}
.funil a:hover{text-decoration:underline}
/* acesso discreto do dono ao painel (a partir da pública) */
.dono-link{color:var(--texto-sec);text-decoration:none;border-bottom:1px dotted var(--borda);white-space:nowrap}
.dono-link:hover{color:var(--ambar);border-bottom-color:var(--ambar)}

.zap-flutuante{
  position:fixed;right:24px;bottom:24px;z-index:60;width:56px;height:56px;
  border-radius:50%;background:var(--zap);box-shadow:var(--sombra-elev);
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease;
}
.zap-flutuante:hover{transform:scale(1.08)}
.zap-flutuante svg{width:30px;height:30px;fill:#06210F}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px}
.modal.aberto{display:flex}
.modal-fundo{position:absolute;inset:0;background:rgba(6,8,10,.72);backdrop-filter:blur(2px)}
.modal-caixa{
  position:relative;background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-l);max-width:720px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sombra-elev);
}
/* galeria do modal: imagem grande + miniaturas + setas */
.modal-foto{position:relative}
.g-main{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(70% 90% at 50% 30%,#20272C,var(--superficie-2))}
.g-main img{width:100%;height:100%;object-fit:cover}
.g-main::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(20,23,26,.4),transparent 34%)}
.g-main .foto-vazia svg{width:40%}
.g-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;z-index:2;
  border:1px solid var(--borda);background:rgba(20,23,26,.7);backdrop-filter:blur(4px);color:var(--texto);
  font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.g-nav:hover{background:var(--fundo)}
.g-prev{left:12px}
.g-next{right:12px}
.g-contador{position:absolute;right:12px;bottom:12px;z-index:2;font-family:var(--f-mono);font-weight:700;font-size:12px;
  background:rgba(20,23,26,.72);border:1px solid var(--borda);border-radius:var(--r-pill);padding:4px 10px;color:var(--texto)}
.g-contador b{color:var(--ambar)}
.g-thumbs{display:flex;gap:8px;padding:12px;overflow-x:auto}
.g-thumbs::-webkit-scrollbar{height:0}
.g-th{flex:0 0 auto;width:64px;aspect-ratio:4/3;border-radius:var(--r-s);overflow:hidden;padding:0;cursor:pointer;
  border:2px solid transparent;background:var(--superficie-2);transition:border-color .15s ease}
.g-th img{width:100%;height:100%;object-fit:cover}
.g-th.ativo{border-color:var(--ambar)}
.modal-corpo{padding:28px}
.modal-corpo h3{font-size:var(--t-xl)}
.modal-corpo .versao{color:var(--texto-sec);margin-bottom:18px;font-size:var(--t-s)}
.modal-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.spec-box{border:1px solid var(--borda);border-radius:var(--r-s);padding:12px;text-align:center;background:var(--fundo)}
.spec-box small{display:block;font-size:11px;letter-spacing:.1em;color:var(--texto-sec);text-transform:uppercase;margin-bottom:4px}
.spec-box b{font-family:var(--f-mono);font-weight:700;font-size:var(--t-s)}
.modal-desc{font-size:var(--t-s);color:var(--texto);margin-bottom:16px}
.opcionais{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.opcionais span{font-size:var(--t-xs);background:var(--fundo);border:1px solid var(--borda);border-radius:var(--r-pill);padding:5px 12px;color:var(--texto-sec)}
.modal-rodape{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.modal-rodape .plaquinha{font-size:var(--t-m)}
.modal-fechar{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--borda);background:var(--superficie);color:var(--texto);
  font-size:var(--t-m);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.modal-fechar:hover{background:var(--superficie-2)}

/* ---------- movimento (piso do CLAUDE.md) ---------- */
/* Progressivo: o estado escondido só vale QUANDO há JS (html.js). Sem JS
   — ou se o script falhar — o conteúdo aparece normalmente (nunca some). */
.reveal{transition:opacity .5s ease,transform .5s ease}
.js .reveal{opacity:0;transform:translateY(18px)}
.reveal.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .skeleton .s-foto{animation:none}
  .btn:hover,.card:hover,.zap-flutuante:hover{transform:none}
}

/* ---------- responsivo ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-ficha{justify-self:stretch;max-width:none}
  .grade{grid-template-columns:1fr 1fr}
  .sobre-grid,.contato-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  section{padding:64px 0}
  .eyebrow{letter-spacing:.16em}         /* evita estouro horizontal do eyebrow */
  .hero{padding:72px 0 80px}
  .grade{grid-template-columns:1fr}
  .modal-specs{grid-template-columns:1fr 1fr}
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:var(--superficie);border-bottom:1px solid var(--borda);
    flex-direction:column;gap:0;padding:12px 24px;align-items:stretch;
  }
  .nav-links.aberto{display:flex}
  .nav-links li{padding:12px 0;border-bottom:1px solid var(--borda)}
  .nav-links li:last-child{border-bottom:0}
  .nav-links a.nav-cta{justify-content:center}
  .menu-btn{display:block}
  .footer-flex{flex-direction:column;align-items:flex-start}
}