/* parallax.css */

/* Estilos de la plantilla de dos columnas */
.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.color-section {
    width: 50%;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Sección de la derecha que contendrá el parallax */
.text-section {
    width: 50%;
    background-color: #FFFFFF; /* Color blanco para el área del parallax */
    overflow-y: scroll; /* Permite el scroll para el efecto */
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* ! Asegúrate de que no haya padding aquí que reduzca el espacio de la imagen ! */
    padding: 0; /* Aseguramos que no haya padding extra */
}


/* Oculta la barra de scroll en navegadores WebKit */
.text-section::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Para navegadores Firefox */
.text-section {
    scrollbar-width: none;
}

/* --- ESTILOS DEL PARALLAX --- */

/* Base para todas las secciones con imagen de fondo */
.section-background {
    background-attachment: fixed;
    background-position: center; /* Centra la imagen */
    background-size: cover; /* ¡Asegura que la imagen cubra todo el espacio! */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    height: 100vh; /* Cada sección ocupa el alto completo de la pantalla */
    width: 100%; /* Cada sección ocupa el ancho completo de su padre (text-section) */
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    /* ! Asegúrate de que no haya padding aquí ! */
    padding: 0; 
    margin: 0;
    font-family: 'Karla', sans-serif; /* Aplica la fuente aquí */
}

/* Imágenes específicas para cada sección */
.parallax {
    background-image: url("../00.imgBrand/mj+logo-orange-white.png");
    background-size: 50%;   /* Ajusta la imagen completa sin recortar */
    background-position: right;  /* Centra la imagen */
}
.parallax1 {
    background-image: url("../00.imgBrand/RealmenteUrbano-spanish.jpg");
    background-size: 50%;   /* Ajusta la imagen completa sin recortar */
    background-position: right;  /* Centra la imagen */
}
.parallax2 {
    background-image: url("https://images.unsplash.com/photo-1562095241-8c6714fd4178?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzOTA5OTg&ixlib=rb-1.2.1&q=80");
}
.parallax3 {
    background-image: url("https://images.unsplash.com/photo-1543722530-d2c3201371e7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzOTExOTg&ixlib=rb-1.2.1&q=80");
}

/* Estilo para los bloques de texto */
.text-bloc {
    background-color: #FFFFFF; /* Fondo blanco para el texto */
    padding: 75px;
}

.text-bloc p {
    margin: 0;
    font-size: 22px;
    font-family: 'Karla', sans-serif; /* Aplica la fuente aquí */
}