/* Evita barras horizontais na landing em telas pequenas. */
body.landing-page {
    overflow-x: clip;
}

/* Define espaçamento padrão entre seções da landing para ritmo visual. */
.landing-page section {
    padding-block: clamp(84px, 12vw, 134px);
}

/* Hero principal com fundo gradiente suave e máscara circular. */
.landing-hero {
    position: relative;
    overflow: clip;
    padding-top: clamp(86px, 12vw, 148px);
    padding-bottom: clamp(86px, 13vw, 164px);
    background:
        radial-gradient(circle at 50% 34%, rgba(47, 191, 122, 0.16), rgba(47, 191, 122, 0) 45%),
        linear-gradient(180deg, #f7fbf9 0%, #f4f7f6 100%);
}

/* Posiciona camada de partículas decorativas flutuantes do hero. */
.landing-hero__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Estilo base das partículas decorativas com blur e transparência. */
.landing-hero__dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(47, 191, 122, 0.35);
    box-shadow: 0 0 22px rgba(47, 191, 122, 0.28);
    animation: floatingOrb 8s ease-in-out infinite;
}

/* Varia tamanho/posição da partícula 1 para criar composição orgânica. */
.landing-hero__dot--1 {
    width: 12px;
    height: 12px;
    left: 18%;
    top: 74%;
    animation-delay: -0.8s;
}

/* Varia tamanho/posição da partícula 2 para equilibrar a cena. */
.landing-hero__dot--2 {
    width: 16px;
    height: 16px;
    right: 24%;
    top: 24%;
    animation-delay: -2.4s;
}

/* Varia tamanho/posição da partícula 3 para reforçar profundidade. */
.landing-hero__dot--3 {
    width: 10px;
    height: 10px;
    right: 34%;
    bottom: 24%;
    animation-delay: -3.7s;
}

/* Move partículas de forma vertical para efeito de microanimação contínua. */
@keyframes floatingOrb {
    0%,
    100% {
        transform: translateY(0px) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-12px) scale(1.08);
        opacity: 0.95;
    }
}

/* Centraliza conteúdo do hero mantendo largura confortável para leitura. */
.landing-hero__content {
    text-align: center;
    max-width: 980px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

/* Espaçamento inferior do badge no hero. */
.landing-hero__badge {
    margin-bottom: 28px;
}

/* Título principal do hero com quebra controlada e peso alto. */
.landing-hero__title {
    font-size: clamp(2.7rem, 6.6vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 900;
    max-width: 14.5ch;
    margin-inline: auto;
}

/* Parágrafo de apoio no hero com largura e contraste equilibrados. */
.landing-hero__text {
    margin-top: 28px;
    max-width: 62ch;
    margin-inline: auto;
    color: var(--brand-ink-500);
    font-size: clamp(1.05rem, 1.7vw, 1.38rem);
}

/* Agrupa botões do hero com alinhamento central. */
.landing-hero__actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ajusta largura mínima dos botões do hero para ritmo visual. */
.landing-hero__actions .ui-button {
    min-width: 220px;
}

/* Bloco de call-to-scroll no final do hero. */
.landing-hero__scroll {
    margin-top: 72px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--brand-ink-500);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Ícone de seta com animação para incentivar navegação vertical. */
.landing-hero__scroll .ui-icon {
    animation: bounceDown 1.8s ease-in-out infinite;
}

/* Cria animação vertical suave no indicador "saiba mais". */
@keyframes bounceDown {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* Seção de números com cards compactos em grade responsiva. */
.landing-metrics {
    background: var(--brand-surface);
}

/* Define grade dos indicadores de impacto em 4 colunas no desktop. */
.landing-metrics__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Estilo de cada item métrico inspirado no layout de referência. */
.metric-card {
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--brand-border);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

/* Ícone do card métrico em bloco suave. */
.metric-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--brand-green-100);
    color: var(--brand-green-700);
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
}

/* Valor grande do indicador numérico com forte hierarquia. */
.metric-card__value {
    font-size: clamp(1.9rem, 2.7vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Cor diferenciada para sufixos (+ e %) em destaque de resultado. */
.metric-card__suffix {
    color: var(--brand-green-500);
}

/* Texto descritivo do indicador abaixo do número. */
.metric-card__label {
    margin-top: 8px;
    color: var(--brand-ink-500);
    font-size: 1rem;
    font-weight: 600;
}

/* Seção de funcionalidades com cards 2x2 no desktop. */
.landing-features__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Ajusta título dos cards de funcionalidade para tamanho menor que padrão. */
.landing-features__grid .ui-card__title {
    font-size: 2rem;
}

/* Define layout de duas colunas para blocos alternados com mídia e texto. */
.landing-split__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
}

/* Inverte ordem visual de uma das linhas para alternância narrativa. */
.landing-split__row--reverse .landing-split__media {
    order: -1;
}

/* Cartão de mídia placeholder com profundidade e brilho verde suave. */
.landing-split__media {
    border-radius: 24px;
    min-height: clamp(280px, 34vw, 390px);
    border: 1px solid color-mix(in srgb, var(--brand-green-500) 24%, var(--brand-border));
    overflow: clip;
    position: relative;
    box-shadow: 0 16px 32px rgba(20, 119, 78, 0.18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(215, 243, 230, 0.9)),
        radial-gradient(circle at 20% 20%, rgba(47, 191, 122, 0.5), transparent 42%);
}

/* Placeholder visual que simula imagem até chegada dos assets oficiais. */
.landing-split__media::before {
    content: "Imagem Placeholder";
    position: absolute;
    inset: auto 18px 18px auto;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(15, 26, 31, 0.55);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 26, 31, 0.14);
    background: rgba(255, 255, 255, 0.8);
}

/* Overlay para dar sensação de profundidade cinematográfica ao bloco de mídia. */
.landing-split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(12deg, rgba(8, 32, 24, 0.35), rgba(8, 32, 24, 0.02) 45%);
}

/* Texto longo dos blocos alternados com legibilidade adequada. */
.landing-split__text {
    color: var(--brand-ink-500);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    margin-top: 16px;
    max-width: 50ch;
}

/* Lista de benefícios com bullets verdes na seção split. */
.landing-split__list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

/* Linha de item da lista com alinhamento do bullet e texto. */
.landing-split__list li {
    position: relative;
    color: var(--brand-ink-500);
    padding-left: 20px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Bullet circular verde customizado para lista de diferenciais. */
.landing-split__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-green-500);
    box-shadow: 0 0 0 5px rgba(47, 191, 122, 0.15);
}

/* Seção final de CTA com fundo radial e centralização total. */
.landing-cta {
    text-align: center;
    background:
        radial-gradient(circle at 50% 22%, rgba(47, 191, 122, 0.22), transparent 48%),
        linear-gradient(180deg, #f5faf7 0%, #edf5f2 100%);
    border-top: 1px solid var(--brand-border);
}

/* Limita largura do texto do CTA para leitura confortável. */
.landing-cta .section-header {
    max-width: 880px;
}

/* Aumenta largura mínima do botão de ação final. */
.landing-cta__button {
    min-width: 300px;
}

/* Define animação de entrada específica para hero no carregamento inicial. */
.landing-page .landing-hero__content {
    animation: heroRise 740ms var(--ease-standard) both;
}

/* Cria transição inicial de opacidade e deslocamento vertical no hero. */
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustes para notebooks e tablets grandes até 1200px. */
@media (max-width: 1200px) {
    /* Reduz grid de métricas para 2 colunas mantendo equilíbrio visual. */
    .landing-metrics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ajustes para tablets até 992px. */
@media (max-width: 992px) {
    /* Compacta espaçamentos verticais das seções sem perder respiro. */
    .landing-page section {
        padding-block: clamp(68px, 10vw, 102px);
    }

    /* Reorganiza cards de funcionalidades em coluna única no tablet. */
    .landing-features__grid {
        grid-template-columns: 1fr;
    }

    /* Colapsa layout split para uma coluna em telas médias. */
    .landing-split__row {
        grid-template-columns: 1fr;
    }

    /* Remove inversão quando layout já está em coluna única. */
    .landing-split__row--reverse .landing-split__media {
        order: 0;
    }

    .landing-hero {
        padding-top: clamp(76px, 10vw, 112px);
        padding-bottom: clamp(72px, 11vw, 118px);
    }
}

/* Ajustes para mobile até 768px. */
@media (max-width: 768px) {
    .landing-page section {
        padding-block: clamp(54px, 9vw, 82px);
    }

    /* Reduz dimensão mínima dos botões no hero para caber na largura. */
    .landing-hero__actions .ui-button {
        min-width: 100%;
    }

    .landing-hero__badge {
        margin-bottom: 18px;
    }

    .landing-hero__title {
        max-width: 100%;
        letter-spacing: -0.02em;
    }

    /* Converte métricas para coluna única para melhor leitura em mobile. */
    .landing-metrics__grid {
        grid-template-columns: 1fr;
    }

    /* Ajusta largura mínima do botão final para ocupar layout móvel. */
    .landing-cta__button {
        min-width: 100%;
    }

    /* Reduz tamanho da descrição de apoio no hero em telas pequenas. */
    .landing-hero__text {
        font-size: 1.02rem;
        margin-top: 20px;
    }

    .landing-hero__scroll {
        margin-top: 48px;
    }
}

/* Ajustes para telas muito pequenas até 480px. */
@media (max-width: 480px) {
    /* Diminui topo do hero para reduzir necessidade de scroll inicial. */
    .landing-hero {
        padding-top: 78px;
    }

    /* Menor espaçamento entre botões para layout compacto. */
    .landing-hero__actions {
        margin-top: 28px;
    }

    /* Reduz fonte do valor métrico para evitar quebra indesejada. */
    .metric-card__value {
        font-size: 2rem;
    }
}

/* Remove movimentos decorativos quando usuário prefere menos animação. */
@media (prefers-reduced-motion: reduce) {
    /* Desliga animação de flutuação das partículas do hero. */
    .landing-hero__dot,
    .landing-hero__scroll .ui-icon,
    .landing-page .landing-hero__content {
        animation: none !important;
    }
}