/* ============================================================================
   Landing pages M50 — estilos dos blocos (M50.Sistemas.Site)
   Lei de cor: SOMENTE tokens do design system (--m50ui-* com fallback --m50-*).
   Nenhum hex de texto/fundo fora de var(). Responde a [data-theme] via bridge.
   ========================================================================== */

.site-landing {
    font-family: var(--m50ui-font, system-ui, sans-serif);
    background: var(--m50ui-bg, var(--m50-surface-secondary));
    color: var(--m50ui-on-bg, var(--m50-text-primary));
    line-height: var(--m50-line-height-normal, 1.5);
    -webkit-font-smoothing: antialiased;
}

.site-landing *, .site-landing *::before, .site-landing *::after { box-sizing: border-box; }

.site-container {
    width: 100%;
    max-width: var(--m50-container-xl, 1280px);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

.site-container--estreito { max-width: var(--m50-container-md, 768px); }

/* ─── Botões (âncoras estilizadas — landing não usa interatividade) ───────── */

.site-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m50ui-sp-sm, 8px);
    padding: 10px 20px;
    border-radius: var(--m50ui-r-md, 8px);
    font-weight: var(--m50-font-weight-semibold, 600);
    font-size: var(--m50ui-fs-md, 15px);
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--m50-duration-fast, 150ms) var(--m50-ease-out, ease-out),
                box-shadow var(--m50-duration-fast, 150ms) var(--m50-ease-out, ease-out),
                background-color var(--m50-duration-fast, 150ms) var(--m50-ease-out, ease-out);
    cursor: pointer;
}

.site-botao--grande { padding: 14px 28px; font-size: var(--m50ui-fs-lg, 17px); }

/* Dois seletores de classe vencem as regras genéricas de link dos temas
   ([data-theme] a). O fundo e o texto continuam vindo integralmente do Kit da Marca. */
.site-botao.site-botao--primario {
    background: var(--m50ui-primary, var(--m50-primary));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    box-shadow: var(--m50ui-shadow-sm, var(--m50-shadow-sm));
}

.site-botao.site-botao--primario:hover {
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    transform: translateY(-1px);
    box-shadow: var(--m50-shadow-hover, var(--m50ui-shadow-md));
}

.site-botao.site-botao--secundario {
    background: transparent;
    color: var(--m50ui-accent-text, var(--m50-info));
    border-color: var(--m50ui-border, var(--m50-border));
}

.site-botao.site-botao--secundario:hover {
    color: var(--m50ui-accent-text, var(--m50-info));
    transform: translateY(-1px);
    border-color: var(--m50ui-accent-text, var(--m50-info));
}

.site-botao:focus-visible,
.site-idiomas__item:focus-visible,
.site-navbar__link:focus-visible {
    outline: 2px solid var(--m50ui-focus-ring, var(--m50-border-focus));
    outline-offset: 2px;
}

/* ─── Navbar ──────────────────────────────────────────────────────────────── */

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--m50ui-bg, var(--m50-surface-secondary)) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--m50ui-border, var(--m50-border));
}

.site-navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--m50ui-sp-lg, 16px);
    min-height: 64px;
    flex-wrap: wrap;
    padding-block: var(--m50ui-sp-sm, 8px);
}

.site-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--m50ui-sp-sm, 8px);
    text-decoration: none;
    color: var(--m50ui-on-bg, var(--m50-text-primary));
    font-weight: var(--m50-font-weight-bold, 700);
    font-size: var(--m50ui-fs-lg, 17px);
    margin-right: auto;
}

.site-navbar__logo { height: 40px; width: auto; display: block; }

.site-navbar__links { display: flex; gap: var(--m50ui-sp-lg, 16px); flex-wrap: wrap; }

.site-navbar__link {
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
    text-decoration: none;
    font-size: var(--m50ui-fs-md, 15px);
    padding: 6px 2px;
}

.site-navbar__link:hover { color: var(--m50ui-accent-text, var(--m50-info)); }

.site-navbar__acoes { display: flex; align-items: center; gap: var(--m50ui-sp-md, 12px); }

.site-idiomas { display: flex; align-items: center; gap: 2px; }

.site-idiomas__item {
    padding: 4px 8px;
    border-radius: var(--m50ui-r-sm, 4px);
    font-size: var(--m50ui-fs-xs, 12px);
    font-weight: var(--m50-font-weight-semibold, 600);
    letter-spacing: var(--m50-letter-spacing-wide, 0.02em);
    text-decoration: none;
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
}

.site-idiomas__item:hover { color: var(--m50ui-accent-text, var(--m50-info)); }

.site-idiomas__item--ativo {
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    background: var(--m50ui-primary, var(--m50-primary));
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.site-hero { padding-block: clamp(56px, 10vw, 120px) clamp(40px, 7vw, 88px); }

.site-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
}

.site-hero__selo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--m50-radius-full, 9999px);
    border: 1px solid var(--m50ui-border, var(--m50-border));
    color: var(--m50ui-accent-text, var(--m50-info));
    font-size: var(--m50ui-fs-sm, 13px);
    font-weight: var(--m50-font-weight-semibold, 600);
    margin-bottom: var(--m50ui-sp-lg, 16px);
}

.site-hero__titulo {
    margin: 0 0 var(--m50ui-sp-lg, 16px);
    font-size: clamp(34px, 5vw, var(--m50-font-5xl, 48px));
    font-weight: var(--m50-font-weight-extrabold, 800);
    line-height: var(--m50-line-height-tight, 1.2);
    letter-spacing: var(--m50-letter-spacing-tight, -0.02em);
}

.site-hero__subtitulo {
    margin: 0 0 var(--m50ui-sp-xl, 24px);
    max-width: 60ch;
    font-size: var(--m50ui-fs-lg, 17px);
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
    line-height: var(--m50-line-height-relaxed, 1.6);
}

.site-hero__ctas { display: flex; gap: var(--m50ui-sp-md, 12px); flex-wrap: wrap; }

.site-hero__arte img {
    width: 100%;
    max-width: 380px;
    height: auto;
    display: block;
    margin-inline: auto;
    border-radius: var(--m50-radius-2xl, 24px);
}

/* ─── Seções genéricas ────────────────────────────────────────────────────── */

.site-secao { padding-block: clamp(48px, 8vw, 96px); }

.site-secao__cabecalho { text-align: center; margin-bottom: clamp(28px, 5vw, 56px); }

.site-secao__titulo {
    margin: 0 0 var(--m50ui-sp-sm, 8px);
    font-size: clamp(26px, 3.5vw, var(--m50-font-4xl, 36px));
    font-weight: var(--m50-font-weight-bold, 700);
    line-height: var(--m50-line-height-tight, 1.2);
}

.site-secao__subtitulo {
    margin: 0 auto;
    max-width: 65ch;
    color: var(--m50ui-on-bg-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-lg, 17px);
}

/* ─── Recursos ────────────────────────────────────────────────────────────── */

.site-recursos__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--m50ui-sp-lg, 16px);
}

.site-recurso {
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
    padding: var(--m50ui-sp-xl, 24px);
    transition: transform var(--m50-duration-fast, 150ms) var(--m50-ease-out, ease-out),
                box-shadow var(--m50-duration-fast, 150ms) var(--m50-ease-out, ease-out);
}

.site-recurso:hover { transform: translateY(-2px); box-shadow: var(--m50-shadow-hover, var(--m50ui-shadow-md)); }

.site-recurso__icone {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--m50ui-r-md, 8px);
    background: color-mix(in srgb, var(--m50ui-primary, var(--m50-primary)) 14%, transparent);
    color: var(--m50ui-accent-text, var(--m50-info));
    margin-bottom: var(--m50ui-sp-md, 12px);
}

.site-recurso__icone svg { width: 26px; height: 26px; }

.site-recurso__titulo {
    margin: 0 0 var(--m50ui-sp-sm, 8px);
    font-size: var(--m50ui-fs-lg, 17px);
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-on-surface, var(--m50-text-primary));
}

.site-recurso__descricao {
    margin: 0;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-md, 15px);
    line-height: var(--m50-line-height-relaxed, 1.6);
}

/* ─── Números ─────────────────────────────────────────────────────────────── */

.site-numeros__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--m50ui-sp-lg, 16px);
    text-align: center;
}

.site-numero {
    padding: var(--m50ui-sp-xl, 24px) var(--m50ui-sp-md, 12px);
    border-radius: var(--m50ui-r-lg, 12px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
}

.site-numero__valor {
    display: block;
    font-size: var(--m50-font-5xl, 48px);
    font-weight: var(--m50-font-weight-extrabold, 800);
    line-height: 1.1;
    color: var(--m50ui-accent-text, var(--m50-info));
}

.site-numero__rotulo {
    display: block;
    margin-top: var(--m50ui-sp-sm, 8px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-md, 15px);
}

/* ─── Depoimentos ─────────────────────────────────────────────────────────── */

.site-depoimentos__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--m50ui-sp-lg, 16px);
}

.site-depoimento {
    margin: 0;
    padding: var(--m50ui-sp-xl, 24px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
}

.site-depoimento__texto {
    margin: 0 0 var(--m50ui-sp-md, 12px);
    font-style: italic;
    color: var(--m50ui-on-surface, var(--m50-text-primary));
    line-height: var(--m50-line-height-relaxed, 1.6);
}

.site-depoimento__autor { color: var(--m50ui-on-surface-muted, var(--m50-text-secondary)); font-size: var(--m50ui-fs-sm, 13px); }

.site-depoimento__cargo::before { content: " · "; }

/* ─── Perguntas (FAQ nativo <details>) ────────────────────────────────────── */

.site-perguntas__lista { display: grid; gap: var(--m50ui-sp-md, 12px); }

.site-pergunta {
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
    overflow: hidden;
}

.site-pergunta__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m50ui-sp-md, 12px);
    padding: var(--m50ui-sp-lg, 16px) var(--m50ui-sp-xl, 24px);
    cursor: pointer;
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-on-surface, var(--m50-text-primary));
    list-style: none;
}

.site-pergunta__pergunta::-webkit-details-marker { display: none; }

.site-pergunta__seta {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--m50ui-accent-text, var(--m50-info));
    border-bottom: 2px solid var(--m50ui-accent-text, var(--m50-info));
    transform: rotate(45deg);
    transition: transform var(--m50-duration-fast, 150ms) var(--m50-ease-out, ease-out);
}

.site-pergunta[open] .site-pergunta__seta { transform: rotate(225deg); }

.site-pergunta__resposta {
    margin: 0;
    padding: 0 var(--m50ui-sp-xl, 24px) var(--m50ui-sp-lg, 16px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    line-height: var(--m50-line-height-relaxed, 1.6);
}

/* ─── Chamada final ───────────────────────────────────────────────────────── */

.site-chamada__painel {
    text-align: center;
    padding: clamp(32px, 6vw, 64px);
    border-radius: var(--m50-radius-2xl, 24px);
    background: var(--m50-gradient-primary, var(--m50ui-primary));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    box-shadow: var(--m50ui-shadow-lg, var(--m50-shadow-lg));
}

.site-chamada__titulo {
    margin: 0 0 var(--m50ui-sp-sm, 8px);
    font-size: clamp(26px, 3.5vw, var(--m50-font-4xl, 36px));
    font-weight: var(--m50-font-weight-extrabold, 800);
}

.site-chamada__subtitulo {
    margin: 0 auto var(--m50ui-sp-xl, 24px);
    max-width: 60ch;
    opacity: 0.9;
}

.site-chamada__painel .site-botao--primario {
    background: var(--m50ui-on-primary, var(--m50-text-inverse));
    color: var(--m50ui-accent-text, var(--m50-primary-700));
}

/* ─── Formulário ──────────────────────────────────────────────────────────── */

.site-formulario__form { margin: 0; }

.site-formulario__campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m50ui-sp-lg, 16px);
    border: 0;
    padding: 0;
    margin: 0;
}

.site-formulario__campos:disabled { opacity: 0.6; }

.site-campo { display: flex; flex-direction: column; gap: 6px; }

.site-campo--largo, .site-formulario__campos > .site-botao { grid-column: 1 / -1; }

.site-campo__rotulo {
    font-size: var(--m50ui-fs-sm, 13px);
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-on-bg, var(--m50-text-primary));
}

.site-campo__entrada {
    padding: 12px 14px;
    border-radius: var(--m50ui-r-md, 8px);
    border: 1px solid var(--m50ui-border, var(--m50-border));
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    color: var(--m50ui-on-surface, var(--m50-text-primary));
    font: inherit;
    font-size: var(--m50ui-fs-md, 15px);
}

.site-campo__entrada:focus {
    outline: 2px solid var(--m50ui-focus-ring, var(--m50-border-focus));
    outline-offset: 1px;
    border-color: var(--m50ui-focus-ring, var(--m50-border-focus));
}

.site-formulario__sucesso {
    text-align: center;
    padding: clamp(24px, 5vw, 48px);
    border-radius: var(--m50ui-r-lg, 12px);
    border: 1px solid var(--m50-success, var(--m50ui-border));
    background: color-mix(in srgb, var(--m50-success, var(--m50ui-primary)) 10%, transparent);
    color: var(--m50ui-on-bg, var(--m50-text-primary));
}

.site-formulario__sucesso p { margin: var(--m50ui-sp-sm, 8px) 0 0; color: var(--m50ui-on-bg-muted, var(--m50-text-secondary)); }

/* Honeypot: fora da viewport, invisível para humanos, preenchível por robôs. */
.site-campo--np {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Rodapé ──────────────────────────────────────────────────────────────── */

.site-rodape {
    border-top: 1px solid var(--m50ui-border, var(--m50-border));
    padding-block: clamp(28px, 5vw, 48px);
}

.site-rodape__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m50ui-sp-lg, 16px);
    flex-wrap: wrap;
}

.site-rodape__marca { display: flex; align-items: center; gap: var(--m50ui-sp-md, 12px); }

.site-rodape__logo { height: 44px; width: auto; }

.site-rodape__texto { margin: 0; color: var(--m50ui-on-bg-muted, var(--m50-text-secondary)); font-size: var(--m50ui-fs-md, 15px); }

.site-rodape__assinatura { margin: 0; color: var(--m50ui-on-bg-muted, var(--m50-text-tertiary)); font-size: var(--m50ui-fs-sm, 13px); }

/* Crédito das fotos de banco de imagem — discreto, mas presente: é exigência de licença. */
.site-rodape__creditos {
    margin: 0 0 4px;
    color: var(--m50ui-on-bg-muted, var(--m50-text-tertiary));
    font-size: var(--m50ui-fs-xs, 12px);
    line-height: 1.6;
}

.site-rodape__creditos a { color: inherit; text-decoration: underline; }
.site-rodape__creditos a:hover { color: var(--m50ui-accent-text, inherit); }

/* ─── Responsivo e acessibilidade ─────────────────────────────────────────── */

@media (max-width: 860px) {
    .site-hero__inner { grid-template-columns: 1fr; }
    .site-hero__arte { order: -1; }
    .site-hero__arte img { max-width: 300px; }
    .site-navbar__links { display: none; }
    .site-formulario__campos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .site-landing *, .site-landing *::before, .site-landing *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}