/* ====== MAX FORCE v6 · CSS EXCLUSIVO DA PÁGINA "PARA SEU NEGÓCIO" ======
   Só o que não existe na casca compartilhada (assets/site.css):
   hero curto com foto, a trilha dos três passos, os cartões de consultor
   que abrem o modal e o fecho sobre a foto do showroom.
   Zero cor solta: tudo derivado dos tokens do v6.
   Obs.: hero curto, migalha e cartão branco repetem o que as páginas de
   piso e equipamentos têm no CSS delas, porque cada página carrega só o
   próprio arquivo.
====================================================================== */

:root {
  /* derivados da paleta v6 · nenhum hex novo entra aqui */
  --trilha: color-mix(in srgb, var(--ink) 16%, transparent);
  --card-dark: color-mix(in srgb, var(--white) 7%, var(--dark));
}

/* ---- hero curto de página interna, com foto no lugar do vídeo ---- */
.hero.hero-page { height: auto; min-height: 0; padding: clamp(150px, 22vh, 210px) 0 clamp(56px, 9vh, 92px); }
.hero.hero-page .hero-content { padding-bottom: 0; }
.hero.hero-page h1 { max-width: 16ch; }
.ph-bg { position: absolute; inset: 0; }
.ph-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.crumb { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-bottom: 18px; }
.crumb a { border-bottom: 1px solid rgba(255, 255, 255, .38); padding-bottom: 2px; }
.crumb a:hover { color: var(--white); border-color: var(--white); }
.crumb span { margin: 0 8px; opacity: .55; }

/* ---- trilha dos três passos ---- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(34px, 5vh, 56px); position: relative; }
.passo { background: var(--white); border-radius: 10px; padding: 30px 26px 32px; transition: .3s; position: relative; }
.passo:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(13, 13, 13, .14); }
.passo .n { display: block; font-family: 'Anton', system-ui, sans-serif; font-size: 30px; line-height: 1; color: var(--red); margin-bottom: 16px; }
/* o traço que liga um passo ao outro (some no mobile, onde a coluna é única) */
.passo::after { content: ''; position: absolute; top: 46px; right: -14px; width: 14px; height: 1px; background: var(--trilha); }
.passo:last-child::after { display: none; }
.passo h3 { font-size: 17px; font-weight: 560; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.passo p { font-size: 15px; color: var(--muted); }

/* ---- foto de cliente dentro do bloco escuro ---- */
.fig-dark { margin: 0; background: var(--card-dark); border: 1px solid var(--line-w); border-radius: 12px; overflow: hidden; }
.fig-dark img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fig-dark figcaption { padding: 14px 18px 16px; font-size: 12px; font-weight: 540; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-w); }

/* ---- consultores: cartão que abre o painel de escolha (sem número na página) ---- */
.consul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(30px, 4vh, 48px); }
.cs { display: flex; flex-direction: column; background: var(--white); border-radius: 10px; padding: 26px 24px 24px; transition: .3s; }
.cs:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(13, 13, 13, .14); }
.cs .wa { width: 22px; height: 22px; fill: var(--red); margin-bottom: 16px; }
.cs h3 { font-size: 16.5px; font-weight: 560; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.cs .fn { font-size: 13.5px; color: var(--muted); }
.cs .go { margin-top: 18px; font-size: 12px; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.cs:hover .go { color: var(--red-hot); }

/* ---- fecho sobre a foto do showroom ---- */
.final-in { max-width: 640px; }
.micro { margin-top: 18px; font-size: 12px; font-weight: 540; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }

/* ---- MOBILE ---- */
@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; }
  .passo::after { display: none; }
  .consul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero.hero-page { padding-top: clamp(110px, 18vh, 150px); }
  .consul { grid-template-columns: 1fr; }
}