/* ============================================= */
/* --- ESTILOS DE LA SECCIÓN ABOUT (STICKY SCROLL) --- */
/* ============================================= */

:root {
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }


/* El contenedor principal. 
   Su altura es de 300vh (100vh por cada uno de los 3 paneles).
   Esto es lo que crea el "espacio" de scroll para los pasos del mouse. 
*/
.about-container {
    position: relative;
    width: 100%;
    height: 300vh; 
    background-color: var(--white);
    z-index: 5;
}

/* El envoltorio Sticky. 
   Se pega al top de la pantalla (top: 0) y mide exactamente la altura de la pantalla (100vh).
*/
.about-sticky-wrapper {
    position: sticky;
    top: 0;
	
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Evita que los paneles sobresalgan */
	
	background-image: url('../media/images/backgrounds/background_about.png'); /* Reemplaza con tu ruta */
    background-size: 100% 100%; /* Hace que la imagen abarque de extremo a extremo sin deformarse */
    /*background-position: center;*/ /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita como mosaico */
    
    /* Opcional: Un overlay oscuro para que el texto e imágenes resalten más */
    /* background-blend-mode: overlay; */
    /* background-color: rgba(0, 0, 0, 0.5); */
}

/* Paneles: Apilados uno encima del otro.
   NOTA: Ya no hay "transition: all..." porque JS controla los frames en tiempo real.
*/
.about-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    opacity: 0; /* JS se encargará de esto */
    transform: scale(1.1); /* JS se encargará de esto */
    visibility: hidden;
    
    /* Aceleración por hardware para animaciones fluidas a 60fps */
    will-change: opacity, transform; 
    z-index: 1;
}

.panel-content {
    display: flex;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    align-items: center;
    padding: 110px 20px 20px 20px;
}

/* Panel izquierdo: Texto */
.panel-text {
    flex: 1;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
}

.text-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Panel derecho: Imagen principal */
.panel-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
}

.main-image {
    max-width: 100%;
    max-height: 80vh; 
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

.panel-actions-row {
    display: flex;
    justify-content: flex-end; /* Mantiene la alineación a la derecha como tu texto */
    align-items: center;
    gap: 15px; /* Espacio de separación entre ambas imágenes */
    margin-top: 15px; /* Separación respecto a la imagen about_texto2a.png */
    width: 95%; /* Mismo ancho que tu imagen principal para que encuadre perfecto */
    margin-left: auto; /* Empuja el contenedor completamente a la derecha */
}

.panel-actions-row .text-image {
    width: 48%; /* Divide el espacio para que estén exactamente 50/50 una alado de la otra */
    margin-bottom: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .panel-content {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 100px;
    }
    .panel-text, .panel-image { flex: none; width: 100%; height: 50%; }
    .text-image { max-width: 80%; max-height: 100%; }
    .main-image { max-width: 100%; max-height: 90%; }
	
	.panel-actions-row {
        flex-direction: column; /* Apila las imágenes una debajo de la otra */
        gap: 20px; /* Mayor espacio vertical para que respiren en celular */
        width: 100%;
		padding-bottom:30px;
    }
    
    .panel-actions-row .text-image {
        width: 50%; /* En celular ocupan casi todo el ancho para ser legibles */
    }
}