.textos_p {
 font-family: 'Helvetica Light', 'Helvetica', Arial, sans-serif;
 font-weight: 300;
 font-size: 15px;
 color: #817e7e;
 text-align: justify;

}

.con_t{
   max-width: 1200px; /* Ajusta el valor según tus necesidades */
   margin: 0 auto;   /* Centra el contenedor horizontalmente */
   padding: 80px;    /* Espaciado interno */
   text-align: center; /* Centra el texto dentro del contenedor */
}

.bar-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 30px; /* Espacio entre filas */
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo disponible */
}

.bar {
    height: 1mm; /* Grosor de las barras */
    position: relative;
}

.bar-short {
    width: 30%; /* Ajuste a porcentaje para que sea más responsive */
    min-width: 3cm; /* Ancho mínimo para no volverse demasiado pequeño */
    background: linear-gradient(to right, #c9da80, #c9da80) no-repeat, /* Primer degradado */
                linear-gradient(to right, #c9da80, #2cb0bc) no-repeat, /* Segundo degradado */
                linear-gradient(to right, #c9da80, #c9da80) no-repeat; /* Tercer degradado */
    background-size: 33.33% 100%, 33.33% 100%, 33.33% 100%; /* Cada degradado ocupa un tercio del ancho */
    background-position: left, center, right; /* Posiciones de los degradados */
}

.bar-extended {
    flex-grow: 1;
    background: linear-gradient(to right, #c9da80, #7ac17b) no-repeat, /* Primer degradado */
                linear-gradient(to right, #2cb0bc, #2cb0bc) no-repeat, /* Segundo degradado */
                linear-gradient(to right, #7ac17b, #c9da80) no-repeat; /* Tercer degradado */
    background-size: 33.33% 100%, 33.33% 100%, 33.33% 100%; /* Cada degradado ocupa un tercio del ancho */
    background-position: left, center, right; /* Posiciones de los degradados */
}

.text_t {
    position: absolute;
    background: white;
    z-index: 1;
    white-space: nowrap;
    top: 50%;
    transform: translateY(-50%);
}

.text-center {
    left: 45%;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: bold;
    color: #223c6f;
    text-align: center;
}

.text-before-end {
    right: 0;
    margin-right: 10px;
    transform: translateX(-3cm) translateY(-50%);
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 50px; /* Tamaño de fuente responsive */
    font-weight: bold;
    color: #223c6f;
}

.text-moved {
    left: calc(3cm + 2vw); /* Ajusta la posición del texto con un valor relativo al ancho de la ventana */
    transform: translateY(-50%);
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 50px; /* Tamaño de fuente responsive */
    font-weight: bold;
    color: #223c6f;
}

/* Media queries para ajustes adicionales en pantallas más pequeñas */
@media (max-width: 768px) {
    .text-center {
        font-size:6vw; /* Tamaño de fuente más grande para pantallas más pequeñas */
    }
    
    .text-before-end,
    .text-moved {
        font-size: 6vw; /* Tamaño de fuente más grande para pantallas más pequeñas */
    }
    
    .bar-short,
    .bar-extended {
        width: 100%; /* Barras ocupan todo el ancho disponible en pantallas pequeñas */
        min-width: auto; /* Elimina el ancho mínimo en pantallas pequeñas */
    }
    
    .text-before-end {
        transform: translateX(-1cm) translateY(-50%); /* Ajusta la posición en pantallas más pequeñas */
    }
    
    .text-moved {
        left: calc(1cm + 2vw); /* Ajusta la posición en pantallas más pequeñas */
    }
}

/* Estilos para el contenedor de la imagen */
.image-co {
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center;     /* Centra la imagen verticalmente */
    height: 100vh;           /* Ocupa el 100% de la altura de la ventana */
    margin: 0;
    padding-bottom: 20px;
                   /* Elimina márgenes predeterminados del body */
}

.imga {
    max-width: 100%; /* La imagen no excederá el ancho del contenedor */
    max-height: 100%; /* La imagen no excederá la altura del contenedor */
    height: auto;     /* Mantiene la relación de aspecto de la imagen */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 600px) {
    .image-co {
        height: auto; /* Permite que el contenedor se ajuste a la altura de la imagen en pantallas muy pequeñas */
        padding-bottom: 10px; /* Ajusta el padding si es necesario */
    }

    .imga {
        max-width: 90%; /* Reduce el ancho máximo en pantallas pequeñas */
        max-height: 90%; /* Reduce la altura máxima en pantallas pequeñas */
    }
}

/* Media Query para pantallas grandes */
@media (min-width: 1200px) {
    .image-co {
        height: 100vh; /* Mantiene la altura completa de la ventana */
        padding-bottom: 40px; /* Ajusta el padding si es necesario */
    }

    .imga {
        max-width: 80%; /* Puedes ajustar el ancho máximo para pantallas grandes */
        max-height: 80%; /* Puedes ajustar la altura máxima para pantallas grandes */
    }
}