@media (max-width: 768px) {
    /* 1. Ajusta la sección principal del hero para eliminar espacios verticales */
    .hero {
        padding-top: 20px;    /* Reduce el espacio de arriba (ajusta a 0px si quieres que pegue al header) */
        padding-bottom: 20px; /* Reduce el espacio de abajo */
        min-height: auto;     /* Evita que ocupe una altura forzada de pantalla completa si sobra espacio */
    }

    /* 2. Compacta el contenedor interno y la distribución si es necesario */
    .hero-content {
        margin: 0;
        padding: 0;
        gap: 15px; /* Reduce la separación entre los textos y la imagen */
    }

    /* 3. Asegura que la imagen del hero no genere espacios fantasma */
    .hero-logo img {
        
	position:relative;
        top: 90px; /* Resetea el desplazamiento si habías usado position: relative antes */
        max-height: 250px; /* Limita la altura de la imagen en celulares para que no sea gigante */
        object-fit: contain;
    }

	.separador{
		height: 65px;
	}

    /*#nombre{
        width: 100%;
        padding: 20px;
    }*/
}