/* Define tokens globais de cor, tipografia, espaço e sombra do brand kit. */
:root {
    /* Cor de fundo principal da aplicação (cinza muito claro). */
    --brand-surface: #f4f7f6;
    /* Cor de superfície elevada para cards e blocos. */
    --brand-surface-elevated: #ffffff;
    /* Cor principal escura para títulos e textos de alta ênfase. */
    --brand-ink-900: #0f1a1f;
    /* Cor de texto secundário para parágrafos e meta informações. */
    --brand-ink-500: #6d7f83;
    /* Cor principal da marca para CTAs e destaque verde escuro. */
    --brand-green-700: #18955a;
    /* Cor secundária da marca para highlights e overlays suaves. */
    --brand-green-500: #2fbf7a;
    /* Cor clara de apoio para badges e ícones em fundo suave. */
    --brand-green-100: #dff4eb;
    /* Cor de borda padrão para elementos neutros. */
    --brand-border: #dde5e3;
    /* Cor de sombra verde translúcida para efeito de brilho leve. */
    --brand-glow: rgba(47, 191, 122, 0.2);
    /* Família tipográfica principal para toda interface. */
    --font-family-base: "Trebuchet MS", "Gill Sans", "Noto Sans", sans-serif;
    /* Tamanho base de fonte para leitura geral. */
    --font-size-base: 16px;
    /* Altura de linha padrão para boa legibilidade. */
    --line-height-base: 1.55;
    /* Largura máxima de conteúdo central para desktop amplo. */
    --container-max: 1160px;
    /* Espaçamento horizontal padrão interno do container. */
    --container-pad: 24px;
    /* Borda arredondada pequena para inputs e badges. */
    --radius-sm: 10px;
    /* Borda arredondada média para botões e blocos. */
    --radius-md: 14px;
    /* Borda arredondada grande para cards e painéis. */
    --radius-lg: 20px;
    /* Sombra curta para componentes levemente elevados. */
    --shadow-sm: 0 8px 18px rgba(10, 26, 24, 0.06);
    /* Sombra média para elementos de maior destaque. */
    --shadow-md: 0 14px 32px rgba(10, 26, 24, 0.09);
    /* Duração curta de transição para microinterações rápidas. */
    --motion-fast: 180ms;
    /* Duração média para animações de entrada e hover suaves. */
    --motion-base: 280ms;
    /* Curva de aceleração suave usada na maioria das transições. */
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Aplica box-sizing herdável para previsibilidade de layout. */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Garante que pseudo-elementos também respeitem box model global. */
*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Remove margens padrão do body e define aparência base do app. */
body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--brand-ink-900);
    background: var(--brand-surface);
    text-rendering: optimizeLegibility;
}

/* Melhora contraste visual quando usuário navega via teclado. */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-green-500) 55%, white);
    outline-offset: 2px;
}

/* Remove decoração padrão dos links sem quebrar herança de cor. */
a {
    color: inherit;
    text-decoration: none;
}

/* Define comportamento previsível para imagens responsivas. */
img {
    max-width: 100%;
    display: block;
}

/* Remove margens padrão dos títulos para espaçamento controlado por classes. */
h1,
h2,
h3,
h4,
p {
    margin: 0;
}

/* Classe de container central usada por toda página. */
.ui-container {
    width: min(var(--container-max), 100% - (var(--container-pad) * 2));
    margin-inline: auto;
}

/* Classe utilitária para textos com destaque verde da marca. */
.brand-highlight {
    color: var(--brand-green-500);
}

/* Componente de logo reutilizável com alinhamento horizontal. */
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-ink-900);
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* Ajusta escala visual da logo em contexto pequeno (ex.: footer). */
.brand-logo--sm {
    font-size: 1.1rem;
}

/* Ajusta escala visual da logo para contexto padrão (navbar). */
.brand-logo--md {
    font-size: 1.45rem;
}

/* Ajusta escala visual da logo para contexto hero ou destaque. */
.brand-logo--lg {
    font-size: 1.75rem;
}

/* Estiliza o marcador visual da logo placeholder. */
.brand-logo__mark {
    inline-size: 1.05em;
    block-size: 1.05em;
    display: inline-grid;
    place-items: center;
    color: var(--brand-green-700);
}

/* Garante proporção consistente do ícone de marca. */
.brand-logo__icon {
    inline-size: 100%;
    block-size: 100%;
}

/* Define peso visual do nome textual da marca. */
.brand-logo__text {
    font-weight: 800;
}

/* Estilo de etiqueta opcional para destacar placeholder de logo. */
.brand-logo__placeholder {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brand-ink-500);
    text-transform: uppercase;
}

/* Base tipográfica de ícones inline gerados como SVG. */
.ui-icon {
    inline-size: 1em;
    block-size: 1em;
}

/* Estilo padrão de botão do UI kit. */
.ui-button {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    padding: 14px 24px;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

/* Variante principal para ações primárias da interface. */
.ui-button--primary {
    background: var(--brand-green-700);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(24, 149, 90, 0.24);
}

/* Estado hover da variante principal com leve elevação. */
.ui-button--primary:hover {
    background: color-mix(in srgb, var(--brand-green-700) 88%, black);
    transform: translateY(-2px);
    box-shadow: 0 15px 28px rgba(24, 149, 90, 0.3);
}

/* Variante secundária para ações de suporte com fundo claro. */
.ui-button--secondary {
    background: #ffffff;
    color: var(--brand-ink-900);
    border-color: var(--brand-border);
}

/* Estado hover da variante secundária com sombreamento sutil. */
.ui-button--secondary:hover {
    border-color: color-mix(in srgb, var(--brand-green-500) 40%, var(--brand-border));
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Variante fantasma para ações discretas sem preenchimento. */
.ui-button--ghost {
    background: transparent;
    color: var(--brand-ink-900);
    border-color: var(--brand-border);
}

/* Estado hover da variante ghost com leve fundo translúcido. */
.ui-button--ghost:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Variante compacta para acoes que exibem apenas icone. */
.ui-button--icon-only {
    inline-size: 46px;
    block-size: 46px;
    flex: 0 0 46px;
    padding: 0;
    gap: 0;
}

/* Padroniza proporção visual do ícone dentro de botões. */
.ui-button__icon {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    display: inline-grid;
    place-items: center;
}

/* Amplia levemente o icone em botoes compactos para equilibrar a area vazia. */
.ui-button--icon-only .ui-button__icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
}

/* Componente badge para labels curtos em destaque. */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-green-700) 18%, transparent);
    background: color-mix(in srgb, var(--brand-green-100) 70%, white);
    color: color-mix(in srgb, var(--brand-green-700) 82%, var(--brand-ink-900));
    font-size: 0.9rem;
    font-weight: 700;
}

/* Ajusta escala do ícone dentro do badge para não competir com texto. */
.ui-badge__icon {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    display: inline-grid;
    place-items: center;
}

/* Componente card padrão reutilizável em grids de recursos. */
.ui-card {
    background: var(--brand-surface-elevated);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard);
}

/* Hover do card com elevação suave e brilho verde discreto. */
.ui-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-glow);
    border-color: color-mix(in srgb, var(--brand-green-500) 22%, var(--brand-border));
}

/* Estilo do contêiner de ícone no topo dos cards. */
.ui-card__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 14px;
    margin-bottom: 18px;
    color: var(--brand-green-700);
    background: var(--brand-green-100);
}

/* Define peso e tamanho do título de cada card. */
.ui-card__title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 10px;
}

/* Define aparência da descrição de apoio do card. */
.ui-card__description {
    color: var(--brand-ink-500);
    max-width: 58ch;
}

/* Cabeçalho de seção reutilizável com espaçamento padronizado. */
.section-header {
    margin-inline: auto;
    margin-bottom: 42px;
    max-width: 760px;
}

/* Permite alinhamento à esquerda para blocos alternados. */
.section-header--left {
    text-align: left;
    margin-inline: 0;
}

/* Permite alinhamento central para seções principais. */
.section-header--center {
    text-align: center;
}

/* Define estilo da eyebrow em caixa alta. */
.section-header__eyebrow {
    color: var(--brand-green-700);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 14px;
}

/* Define estilo do título de seção principal. */
.section-header__title {
    font-size: clamp(2.15rem, 4vw, 3.7rem);
    line-height: 1.08;
    font-weight: 800;
    color: var(--brand-ink-900);
}

/* Define estilo do subtítulo de seção com tom secundário. */
.section-header__subtitle {
    margin-top: 16px;
    font-size: clamp(1.03rem, 1.7vw, 1.34rem);
    color: var(--brand-ink-500);
}

/* Estilo base da barra de navegação fixa no topo. */
.site-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--brand-border);
    background: color-mix(in srgb, #ffffff 87%, var(--brand-surface));
    backdrop-filter: blur(10px);
}

/* Organiza os elementos internos da navbar em linha. */
.site-navbar__inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

/* Define espaçamento e alinhamento do menu principal desktop. */
.site-navbar__menu {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 34px);
}

/* Estilo dos links do menu principal com destaque em hover. */
.site-navbar__link {
    color: var(--brand-ink-500);
    font-weight: 700;
    transition: color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

/* Realça link do menu ao passar mouse para feedback imediato. */
.site-navbar__link:hover {
    color: var(--brand-ink-900);
    transform: translateY(-1px);
}

/* Esconde o toggle mobile em telas grandes. */
.site-navbar__toggle {
    display: none;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 10px;
    border: 1px solid var(--brand-border);
    background: #ffffff;
    color: var(--brand-ink-900);
    cursor: pointer;
}

/* Permite reduzir largura do botão da navbar sem quebrar componentes. */
.site-navbar__portal {
    padding-inline: 18px;
}

/* Rodapé padrão com separação visual do conteúdo principal. */
.site-footer {
    border-top: 1px solid var(--brand-border);
    background: color-mix(in srgb, #ffffff 92%, var(--brand-surface));
}

/* Organiza conteúdo do rodapé em duas colunas simples. */
.site-footer__inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Estilo de texto legal e institucional no rodapé. */
.site-footer__copy {
    color: var(--brand-ink-500);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Estado inicial para elementos com animação de reveal on scroll. */
.js-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 650ms var(--ease-standard), transform 650ms var(--ease-standard);
}

/* Estado final visível quando o elemento entra em viewport. */
.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Classe auxiliar para pulso contínuo suave em CTAs estratégicos. */
.is-pulse {
    animation: pulseShadow 2.6s ease-in-out infinite;
}

/* Animação de pulso que alterna sombra para chamar atenção sem exagero. */
@keyframes pulseShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(24, 149, 90, 0.35);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(24, 149, 90, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(24, 149, 90, 0);
    }
}

/* Componentes globais de feedback (toast e diálogo). */
/* Camada global usada para toaster e diálogo compartilhados. */
.ui-feedback-root {
    position: relative;
    z-index: 300;
}

/* Stack fixa para toasts exibidos no canto superior direito. */
.ui-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    width: min(92vw, 380px);
    display: grid;
    gap: 10px;
    z-index: 320;
    pointer-events: none;
}

/* Cartão base do toast com três colunas: ícone, texto e fechar. */
.ui-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-border);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    animation: toastEnter var(--motion-base) var(--ease-standard);
}

/* Variante do layout quando o toast não possui ícone. */
.ui-toast--iconless {
    grid-template-columns: 1fr auto;
}

/* Garante tamanho e alinhamento consistente para o ícone do toast. */
.ui-toast__icon {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    display: grid;
    place-items: center;
    margin-top: 2px;
}

/* Agrupa título e descrição do toast em coluna. */
.ui-toast__body {
    display: grid;
    gap: 3px;
}

/* Título do toast com ênfase visual. */
.ui-toast__title {
    font-weight: 800;
    line-height: 1.2;
}

/* Mensagem secundária do toast. */
.ui-toast__message {
    color: var(--brand-ink-500);
    font-size: 0.95rem;
    line-height: 1.35;
}

/* Botao de fechamento manual do toast. */
.ui-toast__close {
    border: 0;
    background: transparent;
    color: var(--brand-ink-500);
    inline-size: 26px;
    block-size: 26px;
    border-radius: 8px;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* Destaca o botão de fechar no hover/foco para acessibilidade. */
.ui-toast__close:hover,
.ui-toast__close:focus-visible {
    background: rgba(15, 26, 31, 0.06);
}

/* Tons por tipo de notificação com borda lateral curta. */
.ui-toast--success {
    border-left: 4px solid var(--brand-green-700);
}

.ui-toast--info {
    border-left: 4px solid #2a8bd6;
}

.ui-toast--warning {
    border-left: 4px solid #d8891c;
}

.ui-toast--error {
    border-left: 4px solid #d74c4c;
}

/* Estado visual quando o toast esta pausado no hover. */
.ui-toast.is-paused {
    opacity: 0.95;
}

/* Classe aplicada no JS para animação de saída do toast. */
.ui-toast.is-leaving {
    animation: toastLeave 240ms ease forwards;
}

/* Backdrop global para modal de confirmação. */
.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 26, 31, 0.46);
}

/* Mantém o comportamento padrão do atributo hidden. */
.ui-dialog-backdrop[hidden] {
    display: none;
}

/* Caixa principal do modal de confirmação. */
.ui-dialog {
    width: min(100%, 520px);
    border-radius: 18px;
    border: 1px solid var(--brand-border);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    padding: 22px;
    position: relative;
    display: grid;
    gap: 14px;
}

/* Botão de fechar no canto superior direito do diálogo. */
.ui-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    color: var(--brand-ink-500);
    inline-size: 30px;
    block-size: 30px;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}

/* Feedback de hover/foco no botão de fechar do diálogo. */
.ui-dialog__close:hover,
.ui-dialog__close:focus-visible {
    background: rgba(15, 26, 31, 0.06);
}

/* Título principal do diálogo de confirmação. */
.ui-dialog__title {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    padding-right: 34px;
}

/* Texto explicativo do diálogo. */
.ui-dialog__message {
    color: var(--brand-ink-500);
}

/* Área de ações do diálogo alinhada à direita. */
.ui-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* Anima entrada curta do toast. */
@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Anima saida curta do toast. */
@keyframes toastLeave {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (max-width: 992px) {
    /* Reduz largura útil lateral para aproveitar melhor telas menores. */
    :root {
        --container-pad: 20px;
    }

    /* Exibe botão de toggle do menu em telas menores. */
    .site-navbar__toggle {
        display: inline-grid;
        place-items: center;
    }

    /* Posiciona menu mobile como painel suspenso abaixo da navbar. */
    .site-navbar__menu {
        position: absolute;
        inset-inline: var(--container-pad);
        top: 84px;
        background: #ffffff;
        border: 1px solid var(--brand-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: 14px;
        display: grid;
        gap: 2px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
    }

    /* Mostra menu mobile quando o atributo data-open for verdadeiro. */
    .site-navbar__menu[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Ajusta largura de botão CTA para ocupar a coluna disponível no mobile. */
    .site-navbar__cta .ui-button {
        padding-inline: 16px;
    }
}

/* Ajusta elementos para telas pequenas até 768px. */
@media (max-width: 768px) {
    /* Reduz padding lateral para priorizar conteúdo útil em mobile. */
    :root {
        --container-pad: 16px;
    }

    /* Permite quebra de linha no rodapé mantendo leitura limpa. */
    .site-footer__inner {
        min-height: 104px;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding-block: 18px;
    }

    /* Reduz tamanho de fonte do texto legal para telas compactas. */
    .site-footer__copy {
        font-size: 0.9rem;
    }

    /* Em mobile, ancora toasts com margem horizontal simetrica. */
    .ui-toast-stack {
        left: 16px;
        right: 16px;
        width: auto;
    }

    /* Em telas pequenas, empilha botões do diálogo verticalmente. */
    .ui-dialog__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ui-dialog__actions .ui-button {
        width: 100%;
    }
}

/* Respeita preferências de acessibilidade reduzindo animações. */
@media (prefers-reduced-motion: reduce) {
    /* Desativa scroll suave para evitar desconforto vestibular. */
    html {
        scroll-behavior: auto;
    }

    /* Remove transições e animações globais quando usuário solicitar. */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Garante que elementos reveal já apareçam sem deslocamento. */
    .js-reveal {
        opacity: 1;
        transform: none;
    }
}