/* Al final del archivo styles.css */

/* Ajustes específicos para la página Quiénes Somos en móvil */
@media screen and (max-width: 768px) {
    .about-hero {
        flex-direction: column-reverse; /* Invertimos el orden en móvil */
        text-align: center;
    }
    
    .about-hero .hero-content {
        margin-bottom: 40px;
    }
    
    .about-hero .hero-image {
        margin-bottom: 30px;
    }
}


/* Corrección para el preloader en páginas secundarias */
body:not(.home) .preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    transform: none !important;
}

body:not(.home) .loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}




/* Layout invertido para alternar imagen y texto */
.reverse-layout {
    flex-direction: row-reverse;
}

/* Ajustes para el layout invertido */
.reverse-layout .hero-content {
    padding-right: 0;
    padding-left: 40px;
}

/* Ajustar la rotación de la imagen para que sea simétrica */
.reverse-layout .hero-image-container {
    transform: rotate(2deg); /* Rotación opuesta */
}

.reverse-layout .hero-image-container:hover {
    transform: rotate(0deg) scale(1.02);
}

/* Ajustes responsive para el layout invertido */
@media (max-width: 992px) {
    .reverse-layout {
        flex-direction: column; /* En móvil siempre es columna */
    }
    
    .reverse-layout .hero-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Ajustar la rotación de la imagen cuando está a la izquierda */
.hero-visual[style*="order: 1"] .hero-image-container {
  transform: rotate(2deg); /* Rotación opuesta */
}

.hero-visual[style*="order: 1"] .hero-image-container:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Ajustes responsive */
@media (max-width: 992px) {
  .hero-content[style*="order: 2"] {
    padding-left: 0 !important;
    text-align: center;
  }
  
  .hero-visual, .hero-content {
    order: unset !important; /* Eliminar el orden en móvil */
  }
}