body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #0C3425; 
    color: white;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Evita el scroll horizontal */
}

.safe-zone {
    position: relative; /* Cambiado a relative para que no se superponga */
    width: 100%; /* Asegura que ocupe todo el ancho */
    padding: 20px; /* Espacio alrededor del contenido */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente (opcional) */
    z-index: 10; /* Asegurarse de que esté por encima de otros elementos */
}

.company-name {
    font-size: 3em; /* Tamaño de fuente por defecto */
    font-weight: bold; 
    color: white; 
    padding: 10px; 
    border-radius: 8px; 
    max-width: 90%; /* Limitar el ancho máximo */
    overflow: hidden; /* Evitar que el texto se desborde */
    white-space: nowrap; /* Evitar que el texto se divida en varias líneas */
    text-overflow: ellipsis; /* Agregar puntos suspensivos si el texto es demasiado largo */
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Limitar el ancho máximo */
    padding: 20px; /* Espaciado alrededor del contenido */
    margin-top: 20px; /* Espacio entre la zona segura y el contenido */
}

h1 {
    font-size: 4em; 
    margin: 0;
    text-align: center; /* Centrar el texto */
}

#dots {
    font-size: 0.4em; /* Ajusta este valor según sea necesario */
}

p {
    font-size: 1.5em; 
    margin: 10px 0;
    text-align: center; /* Centrar el texto */
}

.image-left{
    width: 30%; /* Ajustar el tamaño de las imágenes */
    max-width: 250px; /* Tamaño máximo */
}

.image-right {
    width: 40%; /* Ajustar el tamaño de las imágenes */
    max-width: 400px; /* Tamaño máximo */
}

.social {
    margin-top: 20px;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button {
    background-color: white; 
    color: #669B66; 
    padding: 15px 30px; /* Aumentar el padding para botones más grandes */
    margin: 5px 0;
    text-decoration: none; 
    border-radius: 5px; 
    transition: background-color 0.3s, color 0.3s; 
    font-size: 1.2em; /* Tamaño de fuente de los botones */
}

.button:hover {
    background-color: #669B66; 
    color: white; 
}

/* Animación para los puntos */
#dots {
    display: inline-block;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 20% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
}

.integrantes-container {
    border: 2px solid #ccc; /* Borde del recuadro */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    margin: 20px auto; /* Margen superior e inferior, centrado horizontalmente */
    max-width: 400px; /* Ancho máximo del recuadro */
    text-align: center; /* Centrar el texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
}

.integrantes-title {
    font-size: 24px; /* Tamaño de la fuente del título */
    margin-bottom: 10px; /* Espaciado inferior */
}

.integrantes-list {
    list-style-type: none; /* Quitar viñetas de la lista */
    padding: 0; /* Quitar padding */
}

.integrantes-list li {
    font-size: 18px; /* Tamaño de la fuente de los nombres */
    margin: 5px 0; /* Espaciado entre los nombres */
}

@media (max-width: 768px) {
    .company-name {
        font-size: 2.5em
    }

    h1 {
        font-size: 3em; /* Tamaño de fuente más pequeño para h1 */
    }

    .image-left, .image-right {
        width: 40%; /* Ajustar el tamaño de las imágenes en pantallas pequeñas */
    }

    .integrantes-container {
        padding: 15px; /* Ajustar el padding en pantallas pequeñas */
    }

    .integrantes-title {
        font-size: 20px; /* Tamaño de la fuente del título en pantallas pequeñas */
    }

    .integrantes-list li {
        font-size: 16px; /* Tamaño de la fuente de los nombres en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .company-name {
        font-size: 2em; /* Tamaño de fuente aún más pequeño en pantallas muy pequeñas */
    }

    h1 {
        font-size: 2em; /* Tamaño de fuente más pequeño para h1 en pantallas muy pequeñas */
    }

    .image-left, .image-right {
        width: 80%; /* Ajustar el tamaño de las imágenes en pantallas muy pequeñas */
    }

    .button {
        padding: 10px 20px; /* Ajustar el padding en pantallas pequeñas */
        font-size: 1em; /* Ajustar el tamaño de fuente de los botones */
    }

    .integrantes-container {
        padding: 10px; /* Ajustar el padding en pantallas muy pequeñas */
        max-width: 90%; /* Asegurar que el recuadro no exceda el ancho de la pantalla */
    }

    .integrantes-title {
        font-size: 18px; /* Tamaño de la fuente del título en pantallas muy pequeñas */
    }

    .integrantes-list li {
        font-size: 14px; /* Tamaño de la fuente de los nombres en pantallas muy pequeñas */
    }
}