/* * Archivo: custom-bio.css * Este CSS está diseñado para anular estilos conflictivos de la plantilla * y establecer el layout de imagen/texto en la sección "About". * DEBE CARGARSE AL FINAL DE TODOS LOS DEMÁS ARCHIVOS CSS. */ /* Asegúrate de que esta meta etiqueta esté en tu del HTML */ /* */ /* --- RESET GLOBAL PARA EVITAR SCROLL HORIZONTAL INNECESARIO --- */ html, body { overflow-x: hidden !important; /* Evita el scroll horizontal en toda la página */ width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* --- RESET DE CONTENEDORES PADRES (Mínimo necesario con HTML simplificado) --- */ section#about-us { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; display: block !important; box-sizing: border-box !important; overflow: hidden !important; /* Esencial para que estos contenedores no desborden */ } /* Si tienes un div.clear entre secciones que cause problemas */ .clear { clear: both !important; height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; } /* --- ESTILOS PARA PANTALLAS GRANDES (> 1024px) --- */ /* NO SE MODIFICA NADA EN ESTA SECCIÓN, YA QUE FUNCIONA BIEN EN 2560px y 1440px */ @media only screen and (min-width: 1025px) { #biocontenedor { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; padding: 60px 20px 80px 20px !important; box-sizing: border-box !important; height: auto !important; } #img-about { flex: 0 0 50% !important; max-width: 50% !important; padding-right: 30px !important; text-align: center !important; box-sizing: border-box !important; margin: 0 !important; min-width: 0 !important; } #img-about img { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; object-fit: contain !important; object-position: center !important; } #sub-about { flex: 0 0 50% !important; max-width: 50% !important; padding-left: 30px !important; text-align: left !important; box-sizing: border-box !important; margin: 0 !important; min-width: 0 !important; } #sub-about p { margin: 0 !important; padding: 0 !important; text-align: left !important; /* Asegura alineación a la izquierda */ } } /* --- MEDIA QUERY: Para PANTALLAS DE TABLET (1024px) --- */ @media only screen and (min-width: 769px) and (max-width: 1024px) { #biocontenedor { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; max-width: 98% !important; width: 100% !important; margin: 0 auto !important; padding: 100px 15px 80px 15px !important; box-sizing: border-box !important; } #img-about { flex: 0 0 50% !important; max-width: 50% !important; padding-right: 15px !important; text-align: center !important; box-sizing: border-box !important; margin: 0 !important; min-width: 0 !important; } #img-about img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center !important; } #sub-about { flex: 0 0 50% !important; max-width: 50% !important; padding-left: 15px !important; text-align: left !important; box-sizing: border-box !important; margin: 0 !important; min-width: 0 !important; } #sub-about p { margin: 0 !important; padding: 0 !important; text-align: left !important; /* Asegura alineación a la izquierda */ } } /* --- MEDIA QUERY: Para MÓVILES (HASTA 768px) --- */ @media only screen and (max-width: 768px) { #biocontenedor { flex-direction: column !important; align-items: center !important; /* Mantiene la imagen y el texto centrados como bloques */ padding-top: 80px !important; padding-bottom: 100px !important; padding-left: 15px !important; padding-right: 15px !important; max-width: 100% !important; width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } #img-about { order: 1 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 0 25px 0 !important; text-align: center !important; min-width: 0 !important; } #img-about img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center !important; } #sub-about { order: 2 !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; /* CAMBIO CLAVE: Alinea el texto a la izquierda en 768px y abajo */ text-align: left !important; /* <-- Ajuste aquí */ min-width: 0 !important; } #sub-about p { margin: 0 !important; padding: 0 !important; text-align: left !important; /* <-- Ajuste aquí */ } } /* --- AJUSTES FINOS PARA MÓVILES MUY PEQUEÑOS (HASTA 425px y 320px) --- */ @media only screen and (max-width: 425px) { #biocontenedor { padding-top: 100px !important; padding-bottom: 80px !important; padding-left: 15px !important; padding-right: 15px !important; } #img-about { margin-bottom: 20px !important; } #img-about img { object-position: center !important; } #sub-about p { text-align: left !important; /* <-- Ajuste aquí */ } } @media only screen and (max-width: 320px) { #biocontenedor { padding-top: 80px !important; padding-bottom: 60px !important; padding-left: 10px !important; padding-right: 10px !important; } #sub-about p { text-align: left !important; /* <-- Ajuste aquí */ } }