/* ============================= */
/* 🏠 HOME – HERO                */
/* ============================= */

/*.hero {
    min-height: auto:
    display: flex;
    align-items: center;
}

.hero-titulo {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-sm);
    /*color: var(--color-primary);*/
    /*color: radial-gradient(circle, #182B49, #000000);*/
/*}

.hero-texto-gradiente {
  /*background: linear-gradient(to left, #14203F, #07AED5);*/
  /*background: linear-gradient(to left, #14203F, #0F779F);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitulo {
    font-size: 2.25rem;
    /*color: var(--color-text-muted);*/
    /*margin-bottom: var(--space-lg);
}

/* ============================= */
/* 📋 Lista de Destaques         */
/* ============================= */

/*.hero-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-lista li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.hero-lista .icone {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-radius: var(--radius-md);
    background-color: var(--color-surface);*/
    /*color: var(--color-primary);
}

/*.hero-lista svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.hero-lista .texto {
    color: var(--color-text);
    line-height: 1.8;
    font-size: 1.05rem;
}
*/

/* ============================= */
/* 🖼️ Imagem Hero               */
/* ============================= */

.hero {
  overflow: hidden;
}

.hero-section {
    padding: 60px 0;
    overflow: hidden;
}

/* Texto entra da esquerda */
.hero-text {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 2.8s ease, transform 2.8s ease;
}

/* Imagem entra da direita + vai ficando transparente */
.hero-image img {
  max-width: 80%;
  /*filter: saturate(0.6);*/
  filter: blur(0.2px) saturate(0.5);
  opacity: 0.15; /* marca d’água final */
  transform: translateX(60px);
  transition: opacity 3s ease 0.3s, transform 3s ease 0.25s;
}

/* Quando ativar a animação */
.hero-text.is-visible {
  opacity: 0.08;
  transform: translateX(0);
}

.hero-image.is-visible img {
  opacity: 0.08; /* bem suave — ajuste se quiser */
  transform: translateX(0);
}

.hero-imagem {
    max-width: 420px;
    /* Usando a variável RGB para aplicar transparência à sua cor primária */
    filter: drop-shadow(0 10px 30px rgba(68, 44, 46, 0.3));
}

/* Container da lista */
.hero-lista {
    list-style: none;
    padding: 0;
    margin-top: 1rem; /* Espaço após o título */
    margin-left: 40px;
}

/* Item da lista */
.hero-lista li {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    /*color: #5e3d40;*/
    color: var(--bs-primary);
    gap: 5px;                       /* Recuo entre o ícone e o texto */
}

/* Remove a margem do último item para não sobrar espaço no fundo do container */
.hero-lista li:last-child {
    margin-bottom: 0;
}

/* Estilo do Ícone SVG */
.hero-lista .icone {
    margin-right: 5px !important; /* Força um espaço pequeno à direita */
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Usando a cor primária para o ícone */
    color: var(--bs-emphasis-color);
    stroke: var(--color-primary);

    list-style: none;
    padding: 0;
}

.hero-lista .icone svg {
    /*width: 100%;
    height: 100%;
    /* Garante que o traço do SVG use a cor da variável */
    /*stroke: currentColor;
    stroke-width: 2;
    fill: none;*/
    width: 24px;
    height: 24px;
    margin-right: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Estilo do Texto */
.hero-lista .texto {
    font-size: 1.1rem;
    line-height: 1.5;
    /* Usando a variável de ênfase para garantir legibilidade */
    color: var(--bs-secondary-bg);
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8); /* Cria uma "aura" clara atrás das letras */
    list-style: none;
    padding: 0;
    margin-top: none;
    /* Adicionamos uma margem esquerda na lista toda para empurrá-la */
    margin-left: 0 !important;   /* Garante que o texto não tenha recuo próprio */
    padding-left: 0 !important;
}

/* Estilo para o subtítulo que aparece no seu HTML */
.hero-subtitulo {
    color: var(--bs-primary);
    text-align:center;
    /*color: var(--color-primary-dark);*/
    font-weight: 700;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8); /* Cria uma "aura" clara atrás das letras */
}

/* ============================= */
/* 📦 Seções da Home             */
/* ============================= */

.section-titulo {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--color-text);
}

.section-subtitulo {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}


/* ============================= */
/* 🎬 Animações suaves           */
/* ============================= */

.animar-esquerda {
    /*animation: fadeLeft 3s ease forwards;*/
    animation: entrarEsquerda 1.5s ease-out forwards;
}

.animar-direita {
    /*animation: fadeRight 3s ease forwards;*/
    animation: entrarDireitaTransformar 1.5s ease-out forwards;
}

/* Keyframe Texto: Começa fora da tela à esquerda e vai para o lugar original */
@keyframes entrarEsquerda {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframe Imagem: Começa na direita e termina suave/transparente no centro */
@keyframes entrarDireitaTransformar {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        /* Opacidade baixa (0.1 ou 0.2) cria o efeito de marca d'água */
        opacity: 0.15;
        transform: translateX(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Container principal */
.hero-container {
    position: relative;
    /*min-height: 500px; /* Ajuste conforme necessário */
    padding: 40px 0; /* 40px no topo e na base */
    overflow: hidden;
}

/* Estilo da Imagem (Marca d'água no final) */
.hero-imagem-wrapper {
    position: absolute;
    z-index: 1; /* Fica atrás */
    max-width: 350px;
}

.img-hero {
    width: 100%;
    height: auto;
}

/* Estilo do Texto */
.hero-texto-wrapper {
    position: relative;
    z-index: 2; /* Fica na frente */
    max-width: 700px;
    diplay: flex;
    flex-direction: columns;
    align-items: flex-start; align-items: flex-start; /* Mantém os itens da lista alinhados à esquerda entre si */
    text-align: left;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8); /* Cria uma "aura" clara atrás das letras */
}

/* ANIMAÇÃO DA IMAGEM: Direita -> Centro + Perda de Opacidade */
.animar-direita-marca {
    animation: encontroImagem 2s ease-in-out forwards;
}

@keyframes encontroImagem {
    0% {
        transform: translateX(150%); /* Começa bem longe na direita */
        opacity: 1;                 /* Tonalidade original */
        filter: grayscale(0%);
    }
    100% {
        transform: translateX(0);    /* Chega no centro */
        opacity: 0.1;               /* Vira marca d'água */
        filter: grayscale(100%);     /* Opcional: deixa P&B para parecer mais marca d'água */
    }
}

/* ANIMAÇÃO DO TEXTO: Esquerda -> Centro */
.animar-esquerda-centro {
    animation: encontroTexto 2s ease-in-out forwards;
}

@keyframes encontroTexto {
    0% {
        transform: translateX(-150%); /* Começa bem longe na esquerda */
        opacity: 0;
    }
    100% {
        transform: translateX(0);    /* Para no centro */
        opacity: 1;
    }
}

/* ============================= */
/* 📱 Responsividade             */
/* ============================= */

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: var(--space-xl);
        text-align: center; /* Centraliza o texto e a imagem no mobile */
    }

    /* Ajuste da imagem para não cortar e centralizar */
    .hero img, .hero-imagem {
        max-width: 80%;      /* Garante que a imagem nunca ultrapasse a tela */
        height: auto;        /* Mantém a proporção original */
        display: block;      /* Necessário para aplicar margens automáticas */
        margin-left: auto;   /* Centralização horizontal */
        margin-right: auto;  /* Centralização horizontal */
        margin-top: var(--space-lg);
    }
}