/* ===================================================================
   ÍMPETO INVESTIMENTOS — LANDING PAGE
   Arquivo: landing.css
   Objetivo: Estilos exclusivos da Landing Page (index.html).
   Depende de: variables.css, reset.css, base.css (já carregados
   antes deste arquivo).

   Direção visual: consultoria patrimonial de altíssimo padrão —
   Apple / Stripe / Linear / BTG Private como referência de
   qualidade (nunca de cópia). Fundo branco, verde institucional
   aplicado com extrema economia, tipografia como elemento de
   hierarquia, sombras quase imperceptíveis, superfícies sólidas
   e compactas, nada decorativo.

   Este arquivo usa EXCLUSIVAMENTE os Design Tokens definidos em
   variables.css. Nenhuma cor, fonte, espaçamento, raio, sombra ou
   transição é declarado fora do sistema de variáveis.

   -------------------------------------------------------------
   ÍNDICE DESTE ARQUIVO
   -------------------------------------------------------------
   1. Base da página
   2. Hero
   3. Prova social
   4. Benefícios
   5. CTA final
   6. Footer
   =================================================================== */


/* ===================================================================
   1. BASE DA PÁGINA
   =================================================================== */

body {
    background-color: var(--color-white);
}


/* ===================================================================
   2. HERO
   A headline é a tese da página: uma pergunta direta que convida
   à reflexão, seguida de um único caminho de ação. Tudo aqui existe
   para que essa pergunta e esse botão respirem.
   =================================================================== */

.hero {
    width: 100%;
    background-color: var(--color-white);
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
}

.hero__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    max-width: 92rem;
    margin-inline: auto;
}

/* ---- Badge — selo discreto, verde institucional muito suave ---- */
.hero__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);

    border-radius: var(--radius-md);
    border: 1px solid rgba(15, 92, 63, 0.16);
    background: var(--color-hover-light);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* ---- Símbolo da marca — logo completa, no lugar do badge ---- */
.hero__brand {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: var(--space-5);
}

.hero__brand-icon {
    width: 100px;
    height: auto;
    display: block;
}

/* ---- Headline — maior peso visual da página ---- */
.hero__headline {
    font-size: 4.2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);

    max-width: 84rem;
    margin-inline: auto;
    margin-bottom: var(--space-4);

    text-wrap: balance;
}

/* ---- Subheadline — tom secundário, apoio à decisão ---- */
.hero__subheadline {
    max-width: 60rem;
    font-size: calc(var(--font-size-md) * 0.9);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);

    margin-bottom: var(--space-5);
}

/* ---- Botão primário da Hero ----
   Extensão local de .btn--primary (definido em base.css), exclusiva
   deste contexto: maior, com respiro interno generoso e uma
   elevação sutil no hover. Cor de fundo e texto são redeclaradas
   explicitamente em todos os estados para evitar qualquer
   sobreposição que deixe o rótulo do botão ilegível durante o
   hover/active. Altura e fonte levemente ampliadas e sombra quase
   imperceptível em repouso, para transmitir mais valor sem parecer
   chamativo. ---- */
.hero .btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: calc(var(--space-4) * 1.12) var(--space-7);
    border-radius: var(--radius-md);

    font-size: calc(var(--font-size-md) * 1.06);
    font-weight: var(--font-weight-semibold);

    max-width: 34rem;
    width: 100%;

    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: 1px solid var(--color-primary);

    box-shadow: var(--shadow-sm);

    margin-bottom: var(--space-3);

    transition:
        background-color var(--transition-default),
        border-color var(--transition-default),
        box-shadow var(--transition-default),
        transform var(--transition-default);
}

.hero .btn--primary:hover:not(:disabled) {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
    color: var(--color-text-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.hero .btn--primary:active:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.hero .btn--primary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ---- Microcopy — reforço discreto, sem competir com o CTA ---- */
.hero__microcopy {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--color-gray-500);

    margin-bottom: var(--space-6);
}

/* ---- Imagem — moldura discreta, integrada ao corpo da Hero em vez
   de flutuar como um bloco separado. O overflow: hidden já existente
   funciona como máscara para o efeito de zoom sutil no hover,
   aplicado apenas à imagem interna (o quadro/borda do container
   permanece parado). ---- */
.hero__image {
    width: 100%;
    max-width: 82rem;
    margin: 0 auto;

    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.hero__image img {
    width: 100%;
    display: block;

    transition: transform var(--transition-default);
}

.hero__image:hover img {
    transform: scale(1.05);
}


/* ===================================================================
   3. PROVA SOCIAL
   Uma única frase de posicionamento, tratada como citação
   institucional — não como parágrafo comum.
   =================================================================== */

.social-proof {
    width: 100%;
    background-color: var(--color-white);
    padding-block: var(--space-6);
}

.social-proof__container {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.social-proof__text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: calc(var(--line-height-relaxed) * 1.15);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);

    text-wrap: balance;
}


/* ===================================================================
   4. BENEFÍCIOS
   Prioridade do projeto. Quatro componentes premium — não cards de
   template. Sem sombra em repouso, apenas borda quase invisível;
   no hover, uma elevação mínima, sombra quase imperceptível e
   borda em verde institucional — peso e solidez, não flutuação.
   =================================================================== */

.benefits {
    width: 100%;
    background-color: var(--color-white);
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
}

.benefits__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    text-align: center;

    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

/* ---- Grid — 4 colunas no desktop ---- */
.benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

/* ---- Card individual — altura uniforme via flex, imagem grande
   praticamente edge-to-edge com margem pequena, acabamento clean
   sem sombra pesada. Borda em repouso extremamente discreta, respiro
   interno levemente ampliado e transição refinada para um
   acabamento mais premium. ---- */
.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;

    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4) var(--space-6) var(--space-4);

    box-shadow: none;

    transition:
        box-shadow var(--transition-default),
        transform var(--transition-default),
        border-color var(--transition-default);
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(15, 92, 63, 0.18);
}

/* ---- Imagem — ocupa praticamente toda a largura interna do card,
   com margem pequena (herdada do padding do card) e altura grande
   e fixa, para manter todos os cards perfeitamente alinhados. ---- */
.benefit-card__image {
    width: 100%;
    height: 250px;
    display: block;

    object-fit: cover;
    border-radius: var(--radius-md);

    margin-bottom: var(--space-3);
}

.benefit-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);

    margin-bottom: var(--space-4);
}

.benefit-card__text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);

    flex: 1;
}


/* ===================================================================
   PREPARAÇÃO PARA RESPONSIVIDADE — BENEFÍCIOS
   Nenhuma media query é escrita aqui; a fundação abaixo é o que
   torna responsive.css simples e previsível para esta seção.

   - Desktop (>1024px): .benefits__grid em 4 colunas.
   - Tablet (~768–1024px): responsive.css deve reduzir
     grid-template-columns para repeat(2, 1fr), mantendo --space-4
     como gap.
   - Mobile (<576px): responsive.css deve reduzir
     grid-template-columns para 1fr, preservando o padding interno
     do .benefit-card — nunca reduzir o respiro do card, apenas o
     número de colunas do grid pai.
   =================================================================== */


/* ===================================================================
   5. CTA FINAL
   Integrado visualmente aos benefícios, com respiro superior mais
   generoso para separar claramente das seções anteriores antes de
   apresentar o convite final à ação.
   =================================================================== */

.final-cta {
    width: 100%;
    background-color: var(--color-white);
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.final-cta__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    max-width: 56rem;
    margin-inline: auto;
}

.final-cta__title {
    font-size: calc(var(--font-size-xl) * 0.9);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);

    margin-bottom: var(--space-5);
}

/* ---- Botão do CTA final — exatamente o mesmo acabamento aplicado
   ao botão da Hero, mantendo cor e largura. ---- */
.final-cta .btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: calc(var(--space-4) * 1.12) var(--space-7);
    border-radius: var(--radius-md);

    font-size: calc(var(--font-size-md) * 1.06);
    font-weight: var(--font-weight-semibold);

    max-width: 34rem;
    width: 100%;

    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: 1px solid var(--color-primary);

    box-shadow: var(--shadow-sm);

    transition:
        background-color var(--transition-default),
        border-color var(--transition-default),
        box-shadow var(--transition-default),
        transform var(--transition-default);
}

.final-cta .btn--primary:hover:not(:disabled) {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
    color: var(--color-text-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.final-cta .btn--primary:active:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-light);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.final-cta .btn--primary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}


/* ===================================================================
   6. FOOTER
   Compacto, discreto, sem hierarquia competindo com o resto da
   página — apenas informação institucional mínima, com acabamento
   premium: linha superior quase invisível, respiro interno maior
   e tipografia em cinza elegante, sem parecer apagado.
   =================================================================== */

.site-footer {
    width: 100%;
    background-color: var(--color-white);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-block: var(--space-5);
}

.site-footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);

    max-width: 56rem;
    margin-inline: auto;
}

.site-footer__text {
    font-size: calc(var(--font-size-xs) * 0.92);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
    color: var(--color-gray-500);
}

.site-footer__disclaimer {
    font-size: calc(var(--font-size-xs) * 0.86);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--color-gray-400);
}

.site-footer__tagline {
    font-size: calc(var(--font-size-xs) * 0.86);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--color-gray-400);
}


/* ===================================================================
   PREPARAÇÃO PARA RESPONSIVIDADE — HERO E DEMAIS SEÇÕES
   Este arquivo usa unidades relativas (rem) e larguras máximas em
   vez de larguras fixas, permitindo que o conteúdo se adapte
   naturalmente antes mesmo das media queries de responsive.css.

   - Telas muito largas (>1440px): .hero__container e os demais
     containers já limitam a leitura pelas suas max-width — nenhum
     texto estica para linhas enormes, independente do monitor.
   - Notebooks (~1280–1440px): faixa "de conforto" do design —
     nenhum ajuste adicional deveria ser necessário.
   - Tablets (~768–1024px): a estrutura em coluna única e
     centralizada já funciona nessa faixa; responsive.css deve
     apenas reduzir --font-size-3xl/--font-size-xl pontualmente e
     ajustar o padding-block das seções, sem alterar o layout.
   - Celulares (<576px): mesma lógica de coluna única; os botões
     primários já ocupam 100% da largura disponível (width: 100%)
     dentro do max-width definido; os espaçamentos verticais devem
     reduzir um nível na escala (ex.: --space-7 vira --space-6),
     sem nunca zerar o respiro.

   Nenhuma media query é escrita neste arquivo — toda regra acima é
   apenas a fundação que torna responsive.css simples e previsível.
   =================================================================== */