.main_19092025_0822 {
    font-family: sans-serif;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    width: 50vw;
    margin: 50px auto;
}

.slide_19092025_0822 {
	box-sizing: border-box;
	
    height: 60vh;
    position: relative;
    border-radius: 10px;
    padding: 20px;
    background-size: cover;
    background-position: 50%;
    flex: 0.5;
    cursor: pointer;
    /*transition: 0.5s linear flex;*/ transition: 0.5s linear height, 0.5s linear flex;
    -webkit-transition: 0.5s linear flex;
    -moz-transition: 0.5s linear flex;
    -ms-transition: 0.5s linear flex;
    -o-transition: 0.5s linear flex;
}

@keyframes heading {
    from {
        bottom: 150px;
        opacity: 0;
    }

    to {
        bottom: 20px;
        opacity: 1;
    }
}

.slide_19092025_0822 p {
	width: 92%;
    position: absolute;
    bottom: 20px;
    /*left: 0px;*/
    opacity: 0;
    color: #fff;
	
	font-size: 36px;
	font-weight: 700;
	line-height: 145%;
}

.slide_19092025_0822 p span {
    font-size: 16px;
    font-weight: 400;
    opacity: 1.0;
    margin-top: 10px;
    display: block;
	
	line-height: 145%;
}

.slide_19092025_0822 p span a:link, .slide_19092025_0822 p span a:visited{
	display: table;
	padding: 6px 64px;
	
	font-weight: 500;
	
	background-color: #fff;
	color:#000;
	
	text-decoration:none;
	transition: all 0.3s ease-out;
}
.slide_19092025_0822 p span a:hover, .slide_19092025_0822 p span a:active{
	background-color: #000;
	color:#fff;
	
	text-decoration:none;
	transition: all 0.3s ease-out;
}

.slide_19092025_0822.active {
    flex: 5;
}

.slide_19092025_0822.active p {	
    /*opacity: 1;*/
    animation-name: heading;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0265, 1.55);
    animation-duration: 1.5s;
    animation-iteration-count: 1;
	
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}



@media only screen and (max-width: 1201px) {
    
    /* 1. CONTAINER: Ajuste para Layout Vertical */
    .main_19092025_0822 {
        /* Centraliza o container na tela */
        width: 95%; 
        margin: 20px auto; 
        padding: 0 10px; 
        
        /* MUDA A ORIENTAÇÃO PARA COLUNA */
        flex-direction: column; 
        gap: 15px; 
        /* Reset de alinhamento desnecessário, pois o item ocupa 100% */
        justify-content: flex-start; 
    }

    /* 2. SLIDE PADRÃO (INATIVO): Colapsa para 50px */
    .slide_19092025_0822 {
        width: 100%; 
        
        /* NOVO: Altura de colapso */
        height: 50px; 
        
        flex: 0 0 auto;
        
        /* Transição suave agora em HEIGHT e não mais em FLEX */
        transition: 0.5s ease-in-out height, 0.5s linear flex; 
        
        /* Oculta o conteúdo interno (texto, etc.) nos slides inativos */
        overflow: hidden; 
        padding-top: 5px; 
        padding-bottom: 5px; 
    }

    /* 3. SLIDE ATIVO: Expande verticalmente */
    .slide_19092025_0822.active {
        /* Altura expandida */
        height: 60vh; 
        flex: 1 1 auto; 
        
        /* Permite que o texto animado seja visível */
        overflow: visible; 
        padding: 20px; 
    }
    
    /* 4. TEXTO: MANTÉM A ANIMAÇÃO E SINCRONIZA O DELAY */
    .slide_19092025_0822 p {
		width: 82%;
        /* O texto deve estar oculto no estado padrão, mas não ter a animação desativada */
        opacity: 0; 

        /* Estas linhas foram removidas/ajustadas para permitir que a animação @heading funcione: */
        /* animation: none !important; */
        /* bottom: 20px; */
    }
    
     /* 5. TEXTO NO SLIDE ATIVO: Executa a animação */
    .slide_19092025_0822.active p {
        /* MANTÉM as propriedades de animação do desktop */
        animation-name: heading;
        animation-timing-function: cubic-bezier(0.68, -0.55, 0265, 1.55);
        animation-duration: 1.5s;
        animation-iteration-count: 1;
        
        /* ESSENCIAL: O atraso (0.5s) sincroniza o início da animação 
           com o fim da transição de altura do slide. */
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
}