/* --- ESTILOS PARA A SEÇÃO NOSSA HISTÓRIA --- */

    /* Variáveis de fonte e cor */
    :root {
        --_font-family---poppins: 'Poppins', sans-serif;
        --_font-family---inter: 'Inter', sans-serif;
        --dark: #0c0407;
        --body: #4c4c4c;
    }
 /* Estilos da página (Exemplo) */
        body { font-family: sans-serif; }
        h1 {/* text-align: center; */}
    /* Estilos para Títulos */
    .aboutt-sub-title {
        font-family: var(--_font-family---poppins);
        color: #0c0407;
        font-size: 25px;
        line-height: var(--_line-height---lh-110);
        letter-spacing: var(--_letter-spacing---ls-3);
        font-weight: 600;
    }

    .about-title-wrap {
        margin-bottom: 40px;
    }

    .about-title {
        color: #0c040766;
        font-size: 48px;
        line-height: 110%;
        letter-spacing: -0.03em;
        font-weight: 600;
        margin: 0;
    }

    .about-title-black {
        color: var(--dark);
    }

    /* Layout principal */
    .history-layout {
        display: flex;
        align-items: center;
        gap: 60px;
    }

    /* Coluna da Esquerda (Textos) */
    .history-content {
        flex: 1.2;
        min-width: 300px;
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        
    }

    /* Coluna da Direita (Imagens) - DESKTOP */
    .history-gallery {
        flex: 1;
        min-width: 300px;
        aspect-ratio: 4 / 3.5;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 15px;
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        transition-delay: 200ms;
        padding-top: 40px;
    }

    /* Ativa a animação de entrada da seção */
    .history-layout.is-visible .history-content,
    .history-layout.is-visible .history-gallery {
        opacity: 1;
        transform: translateX(0);
    }

    .history-subtitle {
        font-family: var(--_font-family---poppins);
        font-size: 1.5rem;
        color: var(--dark);
        font-weight: 500;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .history-text {
        font-family: var(--_font-family---inter);
        color: var(--body);
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 1em;
    }

    /* Estilo base das imagens */
    .history-image-wrapper {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border: 4px solid white;
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        width: 100%;
        height: 100%;
    }

    .history-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Posições das imagens na grade (Desktop) */
    .history-image-wrapper.img-1 {
        grid-column: 1 / 5;
        grid-row: 1 / 5;
        z-index: 1;
    }

    .history-image-wrapper.img-2 {
        grid-column: 3 / 6;
        grid-row: 4 / 6;
        z-index: 3;
    }

    .history-image-wrapper.img-3 {
        grid-column: 1 / 3;
        grid-row: 4 / 6;
        z-index: 2;
    }

    /* Efeito Hover (Desktop) */
    .history-gallery:hover .img-1 {
        transform: translate(-10px, -10px) rotate(-1deg);
    }

    .history-gallery:hover .img-2 {
        transform: translate(10px, 10px) rotate(2deg);
    }

    .history-gallery:hover .img-3 {
        transform: translate(-10px, 10px) rotate(1deg);
    }


    /* --- RESPONSIVIDADE --- */

    @media (max-width: 991px) {
        .about-title {
            font-size: 40px;
        }

        .history-layout {
            flex-direction: column;
            gap: 40px;
        }

        /* Galeria se torna uma coluna no mobile */
        .history-gallery {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 500px;
            gap: 20px;
            aspect-ratio: auto;
        }

        .history-image-wrapper {
            height: 280px;
        }

        /* --- NOVO: EFEITO DE ENTRADA PARA IMAGENS NO MOBILE --- */

        /* 1. Define o estado inicial das imagens (antes da animação) */
        .history-image-wrapper {
            opacity: 0;
            transform: translateY(30px);
            /* Uma transição mais completa para a entrada */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        /* 2. Define o estado final (visível) quando a seção aparece */
        .history-layout.is-visible .history-image-wrapper {
            opacity: 1;
            transform: translateY(0);
        }

        /* 3. Adiciona um atraso para cada imagem, criando o efeito cascata */
        .history-layout.is-visible .history-image-wrapper:nth-of-type(1) {
            transition-delay: 200ms;
            /* Atraso para a primeira imagem */
        }

        .history-layout.is-visible .history-image-wrapper:nth-of-type(2) {
            transition-delay: 350ms;
            /* Atraso para a segunda */
        }

        .history-layout.is-visible .history-image-wrapper:nth-of-type(3) {
            transition-delay: 500ms;
            /* Atraso para a terceira */
        }
    }

    @media (max-width: 767px) {
        .about-title {
            font-size: 30px;
        }
    }
    
    .sectionn-text {
     font-size: 18px;   
        
    }
        


 .banner-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent, rgb(255 255 255 / 30%));
        }

  .titulo-esquerda {
    text-align: left !important;
  }
        .subtitulo-destaque {
    font-family: 'Poppins', sans-serif; /* Usa a mesma família de fontes do seu site */
    font-size: 28px;                      /* Tamanho grande para impacto */
                                      /* Peso da fonte em negrito (bold) */
    color: #111111;                       /* Cor do texto (preto suave) */
    line-height: 1.1;                     /* Deixa as linhas bem próximas, como na imagem */
    margin: 28px -19px;                       /* Espaçamento acima e abaixo do subtítulo */
    padding: 14px;                           /* Remove qualquer preenchimento padrão */
    text-transform: none;                 /* Garante que o texto não fique todo em maiúsculas */
}

@media (max-width: 767px) {
  .subtitulo-destaque {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    color: #111111;
    line-height: 1.1;
    
    /* Ajustes específicos para mobile */
    margin-top: 0px;
    margin-bottom: 7px;
    margin-right: -40px;
    margin-left: -33px;
    padding: 0px;
    text-transform: none;
    hyphens: auto;
  }
}

.subtituloo-destaque {
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    color: #111111;
    line-height: 1.1;
    margin: 38px 0; /* Margem ajustada para não mover horizontalmente */
    padding: 0;
    text-transform: none;
    
    hyphens: auto;      /* Ajuda na quebra de palavras para um melhor visual justificado */
}
        .blog-section {
  padding-top: 0px;
  padding-bottom: 40px;
}
       .blog-section {
  padding-top: 0px;
  padding-bottom: 0px;
}

@media (max-width: 767px) {
    .subtitulo-destaque {
        font-family: 'Poppins', sans-serif;
        font-size: 19px;
        color: #111111;
        line-height: 1.1;
        margin-top: -1px;
        margin-bottom: 7px;
        margin-right: -46px;
        margin-left: 0px;
        padding: 0px;
        text-transform: none;
        hyphens: auto;
    }
}
/* Estilo para Parágrafos / Texto Principal (Ajustado) */
.texto-corpo {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    line-height: 1.7;
    text-align: left; /* Garante o alinhamento à esquerda, como na imagem. */
}

/* Ajuste para telas menores (celulares) */
@media (max-width: 767px) {
    .texto-corpo {
        font-size: 16px;
    }
}
    .section-spacing {
            padding: 25px 0;
        }
.about-title-blacck {
    color: #9e9b9c;
    font-weight: 800;
}
.about-titlle {
    font-size: 35px;
    line-height: 121%;
    font-family: 'Inter', sans-serif;
}
.iintro-text  {
    /* font-size: 1rem; */
    color: var(--light-text);
    line-height: 1.5;
    margin-bottom: 2rem;
}
.sectiion-spacing {
    padding: 27px 0;
}