/* A landing pública na raiz (templates/site/landing.html).
   Reproduz docs/marca/manual-da-marca/landing/index.html sem cor escrita à mão:
   tudo vem dos tokens de variables.css, então Marinho/Grafite e claro/escuro
   seguem a configuração do escritório. Prefixo .site (test_css_prefixo). */

html { box-sizing: border-box; }
body.site-landing { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
.site-landing *, .site-landing *::before, .site-landing *::after { box-sizing: inherit; }
.site-landing h1, .site-landing h2, .site-landing h3 { font-family: var(--font-title); font-weight: 600; margin: 0; color: var(--color-text); text-wrap: balance; letter-spacing: -.02em; }
.site-landing p { margin: 0; color: var(--color-text-secondary); text-wrap: pretty; }
.site-landing a { color: var(--color-primary); text-decoration: none; }
.site-landing a:hover { color: var(--color-primary-dark); }
.site-landing :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.site-landing .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; flex-shrink: 0; }
.site-ico-14 { font-size: 14px !important; }
.site-ico-16 { font-size: 16px !important; }
.site-ico-20 { font-size: 20px !important; }
.site-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* botões */
.site-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); }
.site-btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.site-landing a.site-btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.site-landing a.site-btn-accent:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.site-landing a.site-btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.site-landing a.site-btn-outline:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.site-landing a.site-btn-ghost-inv { background: transparent; border-color: var(--color-sidebar-border); color: var(--color-sidebar-active); }
.site-landing a.site-btn-ghost-inv:hover { background: var(--color-sidebar-active-bg); color: var(--color-sidebar-active); }
.site-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.site-rotulo { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); }

/* blocos na cor da marca: a cor "cheia" do menu lateral, nos dois modos */
.site-marca { background: var(--color-sidebar-bg); color: var(--color-sidebar-active); }
.site-landing .site-marca h1, .site-landing .site-marca h2, .site-landing .site-marca h3 { color: var(--color-sidebar-active); }
.site-landing .site-marca p { color: var(--color-sidebar-text); }
.site-marca .wordmark-4uto { color: var(--color-sidebar-active); }
.site-marca .site-destaque { color: var(--color-accent); }

/* nav */
.site-nav { height: 64px; display: flex; align-items: center; gap: 24px; }
.site-nav-links { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; }
.site-landing .site-nav-links a { color: var(--color-sidebar-active); }
.site-landing .site-nav-links a.site-nav-sec { color: var(--color-sidebar-text); }
.site-landing .site-nav-links a.site-btn-accent { color: var(--color-on-accent); }
/* o menu responde ao mouse: risco limão que cresce da esquerda e o "Entrar" clareia */
.site-nav-links a:not(.site-btn) { position: relative; padding: 6px 0; transition: color var(--transition-fast); }
.site-nav-links a:not(.site-btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-fast);
}
.site-nav-links a:not(.site-btn):hover::after,
.site-nav-links a:not(.site-btn):focus-visible::after { transform: scaleX(1); }
.site-landing .site-nav-links a.site-nav-sec:hover { color: var(--color-sidebar-active); }
.site-nav .wordmark { transition: opacity var(--transition-fast); }
.site-nav .wordmark:hover { opacity: .8; }
.site-btn { transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.site-btn:hover { transform: translateY(-1px); }
.site-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .site-nav-links a:not(.site-btn)::after { transition: none; }
  .site-btn:hover { transform: none; }
}
@media (max-width: 720px) { .site-landing .site-nav-links a:not(.site-btn):not(.site-nav-sec) { display: none; } }

/* hero */
.site-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: end; padding-top: clamp(48px, 7vw, 96px); }
.site-hero-txt { display: flex; flex-direction: column; gap: 24px; padding-bottom: clamp(48px, 7vw, 96px); }
.site-landing .site-hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.03em; }
.site-quatro { position: relative; display: inline-block; line-height: .9; }
.site-quatro::after { content: ""; position: absolute; left: 8%; top: 62%; width: 52%; height: .07em; background: var(--color-accent); }
.site-landing .site-hero-sub { font-size: 18px; max-width: 480px; }
.site-landing .site-nota { font-size: 13px; }
.site-selo { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 6px; background: var(--color-sidebar-active-bg); color: var(--color-accent); font-family: var(--font-mono); font-size: 12px; }
.site-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-peek { background: var(--color-bg); border-radius: 12px 12px 0 0; border: 1px solid var(--color-sidebar-border); border-bottom: 0; overflow: hidden; box-shadow: 0 -8px 40px rgba(0, 0, 0, .35); min-height: 300px; color: var(--color-text); }
.site-peek-top { height: 44px; background: var(--color-card); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 16px; gap: 10px; }
.site-peek-top b { font-family: var(--font-title); font-weight: 600; font-size: 14px; }
.site-peek-list { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.site-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; }
.site-linha b { display: block; font-weight: 500; color: var(--color-text); }
.site-linha small { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
.site-data { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
.site-status { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.site-landing .site-status .material-symbols-outlined { font-size: 14px; }
.site-ok { background: var(--color-success-surface); color: var(--color-success-text); }
.site-at { background: var(--color-warning-surface); color: var(--color-warning-text); }
.site-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--color-primary-surface); color: var(--color-primary); font-size: 12px; font-weight: 500; }

/* prova social */
.site-prova { background: var(--color-card); border-bottom: 1px solid var(--color-border); padding: 24px 0; }
.site-prova .site-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.site-prova span { font-size: 13px; color: var(--color-text-secondary); }
.site-landing .site-logos { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.site-landing .site-logos span { font-family: var(--font-title); font-weight: 600; font-size: 16px; color: var(--color-text-secondary); }

/* seções */
.site-secao { padding: clamp(48px, 6vw, 80px) 0; display: flex; flex-direction: column; gap: 40px; }
.site-secao-cab { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.site-landing .site-secao h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.site-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.site-benef { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.site-benef-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--color-primary-surface); display: grid; place-items: center; color: var(--color-primary); }
.site-landing .site-benef h3 { font-size: 18px; }
.site-landing .site-benef p { font-size: 15px; }
.site-numeros { padding: clamp(40px, 5vw, 64px) 0; }
.site-numeros .site-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.site-numeros b { display: block; font-family: var(--font-title); font-weight: 600; font-size: 44px; line-height: 1; }
.site-numeros span { font-size: 14px; color: var(--color-sidebar-text); }

/* planos */
.site-plano { padding: 28px; display: flex; flex-direction: column; gap: 20px; position: relative; }
.site-landing .site-plano h3 { font-size: 18px; }
.site-landing .site-plano .site-plano-sub { font-size: 13px; }
.site-preco { display: flex; align-items: baseline; gap: 4px; }
.site-preco b { font-family: var(--font-mono); font-weight: 400; font-size: 36px; color: var(--color-text); }
.site-preco span { font-size: 14px; color: var(--color-text-secondary); }
.site-plano ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-plano li { display: flex; gap: 8px; align-items: center; }
.site-landing .site-plano li .material-symbols-outlined { font-size: 18px; color: var(--color-success-text); }
.site-plano .site-btn { margin-top: auto; height: 44px; }
.site-plano.site-marca { border: 0; }
.site-plano.site-marca .site-preco b { color: var(--color-sidebar-active); }
.site-landing .site-plano.site-marca .site-preco span, .site-landing .site-plano.site-marca .site-plano-sub { color: var(--color-sidebar-text); }
.site-plano.site-marca ul { color: var(--color-sidebar-active); }
.site-landing .site-plano.site-marca li .material-symbols-outlined { color: var(--color-accent); }
.site-tag { position: absolute; top: -12px; left: 28px; height: 24px; padding: 0 10px; border-radius: 6px; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-mono); font-size: 11px; display: flex; align-items: center; }

/* chamada final, sobre o acento */
.site-cta { background: var(--color-accent); padding: clamp(48px, 6vw, 80px) 0; }
.site-cta .site-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-cta-txt { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.site-landing .site-cta h2 { color: var(--color-on-accent); font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.site-landing .site-cta p { color: var(--color-on-accent); font-size: 15px; }
.site-landing .site-cta a.site-btn { background: var(--color-sidebar-bg); color: var(--color-sidebar-active); }
.site-landing .site-cta a.site-btn:hover { background: var(--color-sidebar-active-bg); color: var(--color-sidebar-active); }

/* rodapé */
.site-rodape { padding: 28px 0; }
.site-rodape .site-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-rodape nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; }
.site-landing .site-rodape nav a { color: var(--color-sidebar-text); }
.site-landing .site-rodape nav a:hover { color: var(--color-sidebar-active); }
.site-wordmark-rodape .wordmark-4uto { font-size: 22px; }
.site-rodape-assinatura { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-rodape small { font-family: var(--font-mono); font-size: 12px; color: var(--color-sidebar-text); }

@media (prefers-reduced-motion: reduce) { .site-landing * { transition: none !important; } }