/* Estilos generales del contenedor */ 
.empresa-container { 
    width: 600px; 
    margin-left: 0; 
    margin-right: auto; 
    text-align: left; 
    font-family: Arial, sans-serif; 
    position: relative; 
    height: 100px; 
} 

/* Estilos de la caja superior */ 
.top-box-empresa { 
    border: 3px solid black; 
    padding: 12px; 
    background-color: white; 
    width: fit-content; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

/* Estilos del texto en la caja superior */ 
.top-texto-empresa { 
  font-size: 22px; 
  color: black; 
  margin: 0; 
  letter-spacing: 7px; 
  font-family: ; 
  color: ; 
  font-weight: bold; /* Agregado para negrita */ 
} 

/* Estilos de la caja inferior */ 
.bottom-box-empresa { 
    background-color: black; /* Fondo negro */ 
    width: fit-content; 
    margin: 0; 
    padding: 1px 40px; 
    position: absolute; 
    left: 50px; 
    top: 50%; 
    transform: translateY(-5%); 
    z-index: 2; 
} 

/* Estilos del texto inferior */ 
.bottom-texto-empresa { 
    font-size: 38pt; 
    color: #a5c715; 
    margin: 0; 
    font-weight: bold; 
    letter-spacing: 0px; 
    font-family: ; 
    color: ; 
    background-color: black; /* Fondo negro */ 
    display: inline-block; /* Para que el fondo se ajuste al texto */ 
    padding: 0px; /* Relleno para el fondo */ 
}

/* --- Media Query para Disminuir el Texto Inferior en Móviles --- */
@media (max-width: 768px) { /* Se aplica cuando el ancho de la pantalla es 768px o menos */

    .bottom-texto-empresa {
        font-size: 24pt; /* Ajusta este valor. 24pt es un buen punto de partida. */
        /* Puedes probar con 20pt, 18pt, o incluso con unidades 'vw' (ej. 5vw) para que escale con la pantalla */
        /* white-space: normal; */ /* Opcional: Esto permite que el texto salte de línea si es demasiado largo */
        /* Si quieres que el contenedor se ajuste un poco más a la pantalla en lugar de tener width: fit-content */
        /* .bottom-box-transformacion {
            padding: 1px 15px;
        } */
    }

    /* Opcional: Ajustar el contenedor general si el texto sigue saliéndose por los lados */
    .empresa-container {
        width: 100%; /* Permite que el contenedor principal ocupe todo el ancho */
        box-sizing: border-box; /* Incluye padding en el ancho total */
        padding:  10px; /* Un poco de margen en los bordes para el texto */
    }

    /* Opcional: Ajustar un poco la posición si el texto es muy largo y necesitas moverlo */
    /* .bottom-box-transformacion {
        left: 10px; // Mueve un poco más a la izquierda si el texto es muy grande y se sale
        transform: translateY(-5%) scale(0.9); // Escala ligeramente para que quepa, si es necesario
    } */
}

/* Media Query para pantallas aún más pequeñas, si el texto sigue siendo un problema */
@media (max-width: 480px) {
    .bottom-texto-empresa {
        font-size: 24pt; /* Un tamaño más pequeño para móviles muy pequeños */
    }
}

.top-texto-empresa {
        font-size: 14pt; /* Ajusta este valor. 24pt es un buen punto de partida. */
        /* Puedes probar con 20pt, 18pt, o incluso con unidades 'vw' (ej. 5vw) para que escale con la pantalla */
        /* white-space: normal; */ /* Opcional: Esto permite que el texto salte de línea si es demasiado largo */
        /* Si quieres que el contenedor se ajuste un poco más a la pantalla en lugar de tener width: fit-content */
        /* .bottom-box-transformacion {
            padding: 1px 15px;
        } */
    }

  .bottom-box-empresa {
        /* ... otras propiedades ... */
        top: 50px; /* <--- VALOR CLAVE: Aumenta este número para bajar la caja inferior */
        /* ... otras propiedades ... */
    }
}