/*En esta seccion modificas los colores o agregas colores*/
:root {
    --color1: rgb(0,22,55);
    --color2: rgb(0,32,71);
    --color3: rgb(0,42,100);
    --color4: rgb(0,52,121);
    --color5: rgb(0,75,172);
    --color6: rgb(0,95,184);
    --color7: rgb(0,110,251);
}
/* Estilo para los títulos (h2) */
h2 {
    font-family: 'Lato', sans-serif; /* Aplica la fuente Lato */
    font-size: 40px; /* Tamaño de letra */
    text-align: center; /* Centra el texto */
    margin-bottom: 20px; /* Espaciado inferior opcional */
    color: white;
}

/* Estilo para los subtítulos (p) */
p {
    font-family: 'Lato', sans-serif; /* Aplica la fuente Lato */
    font-size: 20px; /* Tamaño de letra */
    text-align: center; /* Centra el texto */
    margin-bottom: 20px; /* Espaciado inferior opcional */
    color: white;

}
/* Fondo degradado para toda la página */
body {

    margin: 0; /* Elimina márgenes predeterminados */
    padding: 0; /* Elimina relleno predeterminado */
    font-family: 'Lato', sans-serif; /* Asegúrate de usar la fuente Lato */
}
/*configuracion del selection nosotros*/
.nosotros {
    background: url(../Image/F2.jpg);
    background-position:buttom;
    position:relative;
    width: 100%;
    height: 90vh;
    overflow-y: hidden; 
    display: flex;
    flex-direction: column;
    justify-content:center;

}

/*Caracteristicas de la burbuja*/
.burbuja {
    display: inline-block;
    padding: 0px 2vw; /* Espaciado adaptable */
    font-size: min(2vw, 16px); /* Escala con la pantalla, máximo 16px */
    line-height: min(5vh, 50px); /* Escala con la altura de la pantalla, máximo 50px */
    border-radius: 50px;
    white-space: nowrap;
    color: #fbfafa;
    text-align: center;
    margin: 0 min(1vw, 10px); /* Espaciado adaptable */
    font-family: 'Lato', sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Aplicar colores a las burbujas tambien puedes agregar otro color si esta en la seccion root */
.burbuja-color1 { background-color: var(--color1); }
.burbuja-color2 { background-color: var(--color2); }
.burbuja-color3 { background-color: var(--color3); }
.burbuja-color4 { background-color: var(--color4); }
.burbuja-color5 { background-color: var(--color5); }
.burbuja-color6 { background-color: var(--color6); }
.burbuja-color7 { background-color: var(--color7); }

/* Contenedores de burbujas */
.contenedor1-burbujas, .contenedor2-burbujas, .contenedor3-burbujas, .contenedor4-burbujas, .contenedor5-burbujas {
    background-color: transparent; 
    padding-block: min(2.5vh, 30px); /* Se adapta a la pantalla */
    overflow: hidden;
    user-select: none;
    display: flex;
    gap: min(4vw, 20px); /* Espaciado adaptable */
    width: 100%;
}

/* Eliminar lista de estilos predeterminados */
.contenedor1-burbujas ul,
.contenedor2-burbujas ul,
.contenedor3-burbujas ul,
.contenedor4-burbujas ul,
.contenedor5-burbujas ul {
    list-style: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: min(3vw, 20px); /* Reduce el espaciado en pantallas pequeñas */
    margin: 0;
    padding: 0;
    width: max-content;
}

/* Animaciones de desplazamiento derecha a izquierda*/
@keyframes scrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% / 2)); }
}

/*animacin de desplazamiento izquierda a derecha*/
@keyframes scroll-reverse {
    from { transform: translateX(calc(-50% - 4vw)); }
    to { transform: translateX(0); }
}

/* Animaciones de desplazamiento derecha a izquierda*/
@keyframes scrollLeft3 {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% / 2)); }
}

/*animacin de desplazamiento izquierda a derecha*/
@keyframes scroll4-reverse {
    from { transform: translateX(calc(-50% - 4vw)); }
    to { transform: translateX(0); }
}

/* Animaciones de desplazamiento derecha a izquierda*/
@keyframes scrollLeft5 {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% / 2)); }
}

/* Asignar animaciones a cada contenedor de burbujas */
.contenedor1-burbujas ul { animation: scrollLeft 30s linear infinite; }
.contenedor2-burbujas ul { animation: scroll-reverse 30s linear infinite; }
.contenedor3-burbujas ul { animation: scrollLeft3 30s linear infinite; }
.contenedor4-burbujas ul { animation: scroll4-reverse 30s linear infinite; }
.contenedor5-burbujas ul { animation: scrollLeft3 30s linear infinite; }

/* Ajustes responsivos avanzados */
@media (max-width: 1024px) {
    .burbuja {
        font-size: min(1.8vw, 14px);
        line-height: min(4.5vh, 40px);
    }
}

@media (max-width: 767px) {
    .nosotros {
    height: 70vh;
}
    h2{
        margin: 0px;
        padding-left: 4px;
        padding-right: 4px;
    }
    p{
        padding-left: 5px;
        padding-right: 5px;
    }
    .burbuja {
        font-size: min(3vw, 12px);
        line-height: min(4vh, 30px);
        padding: 0px 1.5vw;
    }
}


/* Pantallas grandes (PC de escritorio) */
@media (min-width: 1200px) {
    .burbuja {
        font-size: min(1.5vw, 20px);
        line-height: min(6vh, 60px);
    }
}

/* Tablets grandes (entre 768px y 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .burbuja {
        font-size: min(2vw, 16px);
        line-height: min(5vh, 50px);
        padding: 1px 2vw;
    }
}

/* Tablets pequeñas y celulares grandes (entre 480px y 767px) */
@media (max-width: 767px) and (min-width: 480px) {
    .burbuja {
        font-size: min(3vw, 14px);
        line-height: min(4.5vh, 40px);
        padding: 0px 1.5vw;
    }

    h2 {
        font-size: 28px; /* Reduce el tamaño del título */
    }

    p {
        font-size: 18px; /* Reduce el tamaño del subtítulo */
    }
}

/* Celulares pequeños (menos de 480px) */
@media (max-width: 480px) {
    .burbuja {
        font-size: min(4vw, 12px);
        line-height: min(4vh, 30px);
        padding: 0px 1vw;
    }

    h2 {
        font-size: 24px; /* Reduce aún más el tamaño del título */
    }

    p {
        font-size: 16px; /* Reduce el tamaño del subtítulo */
    }
}

/* Media Query combinada para dispositivos con pantalla de máximo 500px de altura y entre 600px y 768px de ancho en landscape */
@media screen and (max-height: 500px) and (min-width: 600px) and (orientation: landscape), 
       screen and (max-width: 568px) and (orientation: landscape), /* iPhone SE en landscape */
       screen and (max-width: 768px) and (min-width: 360px) and (orientation: landscape) { /* Samsung S8+ en landscape */

    section.que-hacemos {
        padding: 0; /* Elimina el padding en dispositivos pequeños */
        overflow-y: auto; /* Permite scroll controlado si es necesario */
        max-height: 100vh;
    }

    .que-hacemos {
        height: auto; /* Ajusta dinámicamente la altura */
        min-height: 100vh; /* Mantén la altura mínima */
        overflow-y: hidden; /* Elimina cualquier scroll vertical */
    }
 /* Ajustes en los contenedores de burbujas para evitar scroll interno */
 .contenedor1-burbujas, .contenedor2-burbujas, .contenedor3-burbujas, .contenedor4-burbujas, .contenedor5-burbujas {
    background-color: transparent;
    padding-block: min(2.5vh, 30px); /* Espaciado adaptable */
    overflow: hidden; /* Evita desplazamiento dentro del contenedor */
    user-select: none;
    display: flex;
    gap: min(4vw, 20px); /* Espaciado adaptable */
    width: 100%;
}

/* Ajustes de espaciado entre los títulos y párrafos */
.que-hacemos h2, .que-hacemos p {
    margin: 0; /* Elimina márgenes extra */
    padding: 0; /* Elimina padding extra */
}

.que-hacemos h2 {
    margin-bottom: 10px; /* Ajusta el espaciado entre el título y el párrafo */
}

.que-hacemos p {
    margin-top: 5px; /* Ajusta el espaciado entre el párrafo y el siguiente elemento */
}

/* Aumenta el tamaño de las burbujas para dispositivos pequeños */
.burbuja {
    font-size: min(4vw, 14px); /* Aumenta el tamaño de la fuente */
    line-height: min(5vh, 45px); /* Aumenta la altura de las burbujas */
    padding: 0px 2vw; /* Mantén el padding mayor */
}
}