/* ═════════ Landing e site institucional ═════════
 * Composição: .site-topo → hero Showroom (.entrar.showroom-secao, sempre noite) → seções com tema → .site-cta → .site-rodape.
 * Depende de tokens, base, componentes, pecas e movimento. Exemplo: modelo-landing.html.
 */

/* ── topo do site: transparente sobre o hero, vira vidro depois que rola ── */
.site-topo {
  position: fixed;
  z-index: var(--z-topo);
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 0 clamp(16px, 4vw, 56px);
  color: #eef3ff;
  transition: background var(--t-3), color var(--t-3), box-shadow var(--t-3), transform var(--t-4) var(--mola-firme), height var(--t-4) var(--mola-firme);
}
.site-topo-marca { display: flex; color: inherit; }
.site-topo-marca svg { width: 158px; height: auto; }
.site-topo-links { display: flex; gap: 2px; margin-left: auto; }
.site-topo-links a { position: relative; padding: 8px 12px; border-radius: 10px; color: inherit; opacity: 0.82; text-decoration: none; font-size: var(--fs-14); font-weight: 500; transition: opacity var(--t-2), background var(--t-2); }
.site-topo-links a:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.site-topo-links a[aria-current='page']::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--nucleo); box-shadow: 0 0 6px var(--brilho); }
.site-topo-acoes { display: flex; gap: 8px; align-items: center; }
.site-topo .ui-botao--fantasma { color: inherit; }
.site-topo-menu { display: none; }
/* sobre o hero o topo é noite: botão claro */
.site-topo:not([data-rolou]) .ui-botao--primario,
.site-topo:not([data-rolou]) .ui-botao--luz { background: #eef3ff; color: #050b18; }
.site-topo[data-rolou] {
  height: 60px;
  color: var(--tx);
  background: var(--vd-bg);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 -1px 0 var(--ln);
}
.site-topo[data-rolou] .site-topo-marca svg { color: var(--pri); }
.site-topo[data-recolhido] { transform: translateY(-100%); }
:root[data-transparencia='reduzida'] .site-topo[data-rolou] { background: var(--vd-solido); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 860px) {
  .site-topo-links,
  .site-topo-acoes .ocultar-celular { display: none; }
  .site-topo-acoes { margin-left: auto; }
  .site-topo-menu { display: inline-grid; color: inherit; }
  .site-topo-marca svg { width: 132px; }
}

/* menu do celular: folha em tela cheia, links grandes em cascata */
.site-menu { position: fixed; inset: 0; z-index: var(--z-dialogo); display: flex; flex-direction: column; padding: 14px 16px max(20px, env(safe-area-inset-bottom)); background: var(--bg); animation: ui-esmaece var(--t-3) var(--saida) both; }
.site-menu-cabeca { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.site-menu-cabeca svg { width: 132px; color: var(--pri); }
.site-menu nav { display: grid; margin-top: 28px; }
.site-menu nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--ln); color: var(--tx); text-decoration: none; font-family: var(--f-display); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; animation: ui-sobe var(--t-4) var(--mola-firme) both; animation-delay: calc(var(--i, 0) * var(--cascata) + 60ms); }
.site-menu nav a::after { content: '→'; font-family: var(--f-ui); font-size: 20px; color: var(--tx-3); }
.site-menu-pe { margin-top: auto; display: grid; gap: 8px; }

/* ── seções ── */
.site-secao { padding: clamp(64px, 9vw, 128px) clamp(16px, 4vw, 56px); }
.site-secao--recuada { background: color-mix(in srgb, var(--sup) 50%, var(--bg)); box-shadow: inset 0 1px 0 var(--ln), inset 0 -1px 0 var(--ln); }
.site-miolo { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 48px); }
.site-cabeca { display: grid; gap: 14px; max-width: 720px; }
.site-cabeca--centro { justify-items: center; text-align: center; margin: 0 auto; }
.site-cabeca h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; }
.site-cabeca p { color: var(--tx-2); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.site-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .site-duas { grid-template-columns: 1fr; } }

/* números da empresa em linha, separados por fios */
.site-numeros { display: grid; grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr)); }
.site-numeros > div { display: grid; gap: 6px; padding: 8px 24px; box-shadow: inset 1px 0 0 var(--ln); }
.site-numeros > div:first-child { box-shadow: none; padding-left: 0; }
.site-numeros b { font-family: var(--f-display); font-weight: 300; font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.site-numeros span { color: var(--tx-3); font-size: var(--fs-14); }
@media (max-width: 760px) {
  .site-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .site-numeros > div { padding: 8px 0 8px 16px; }
  .site-numeros > div:nth-child(odd) { box-shadow: none; padding-left: 0; }
}

/* quadro de produto: moldura de tela (print do painel) com a vitrine atrás */
.site-quadro { position: relative; border-radius: 22px; padding: 10px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--ln), var(--sombra-2); }
.site-quadro img { display: block; width: 100%; border-radius: 14px; }
.site-quadro::before { content: ''; position: absolute; inset: 18% -6% -8% 12%; z-index: -1; border-radius: 40px; background: var(--vitrine-bg); filter: blur(40px); opacity: 0.35; }

/* ── chamada final: a vitrine azul fecha a página (hero e CTA nunca aparecem juntos) ── */
.site-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px);
  border-radius: 28px;
  color: #eef3ff;
  background: var(--vitrine-bg);
}
.site-cta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(141, 178, 255, 0.55) 20%, #fff 62%, rgba(141, 178, 255, 0.5) 86%, transparent); box-shadow: 0 0 12px rgba(141, 178, 255, 0.8); }
.site-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(185, 196, 218, 0.16) 1.1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask: radial-gradient(60% 90% at 90% 20%, #000, transparent 70%); mask: radial-gradient(60% 90% at 90% 20%, #000, transparent 70%); }
.site-cta h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -0.028em; max-width: 18ch; text-wrap: balance; }
.site-cta p { color: #b9c4da; max-width: 52ch; font-size: var(--fs-16); }
.site-cta .ui-botao--primario,
.site-cta .ui-botao--luz { background: #eef3ff; color: #050b18; }
.site-cta .ui-botao--contorno { color: #eef3ff; box-shadow: inset 0 0 0 1px rgba(238, 243, 255, 0.28); }
.site-cta :focus-visible { outline-color: #8db2ff; }

/* ── rodapé ── */
.site-rodape { padding: 56px clamp(16px, 4vw, 56px) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ln); color: var(--tx-2); font-size: var(--fs-14); }
.site-rodape-grade { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-rodape-marca svg { width: 170px; color: var(--pri); }
.site-rodape-marca p { margin-top: 14px; max-width: 34ch; color: var(--tx-3); }
.site-rodape h4 { margin-bottom: 12px; }
.site-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-rodape a { color: var(--tx-2); text-decoration: none; }
.site-rodape a:hover { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; }
.site-rodape-base { max-width: 1180px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--ln); display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; color: var(--tx-3); font-size: var(--fs-13); }
@media (max-width: 860px) { .site-rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-rodape-marca { grid-column: 1 / -1; } }

/* o hero começa embaixo do topo fixo */
.site-topo ~ .showroom-secao .entrar-conteudo { padding-top: 84px; }
.site-pular { position: fixed; left: 12px; top: -60px; z-index: var(--z-toast); padding: 10px 14px; border-radius: 10px; background: var(--pri); color: var(--pri-tx); text-decoration: none; font-weight: 600; }
.site-pular:focus-visible { top: 12px; }