.vlt-custom--8131 {
	bottom: -250px;
	left: -200px;
	max-width: 550px;
}

.vlt-custom--1451 {
	top: -25px;
	left: -30px;
	width: 256px;
	height: 208px;
}

@media only screen and (max-width: 575px) {
	.vlt-custom--1451 {
		top: -100px;
		left: -100px;
	}
}

.vlt-custom--1512 {
    position: fixed; /* Fija el círculo en la ventana */
    bottom: 0vw; /* Ya ajustado, mantén esta parte como está */
    left: 5%; /* Centra el círculo horizontalmente */
    width: 50vw; /* Tamaño del círculo en pantallas grandes */
    height: 50vw; /* Tamaño proporcional */
    background-size: cover; /* Asegura que la imagen cubra el círculo */
    transform: translateX(-50%); /* Centrado exacto */
    display: block; /* Asegura que el círculo se vea */
}

@media (max-width: 1200px) {
    .vlt-custom--1512 {
        display: block !important; /* Asegura que el círculo no esté oculto en pantallas más pequeñas */
    }
}

@media (max-width: 767px) {
    .vlt-custom--1512 {
        width: 120vw; /* Ajusta el tamaño para pantallas más pequeñas */
        height: 120vw; /* Tamaño proporcional */
        bottom: 40vw; /* Ajusta la posición si es necesario */
		left: -25vw;
        transform: translateX(-50%); /* Mantiene el círculo centrado */
    }
}


.vlt-custom--4124 {
	top: 0;
	right: 0;
	bottom: 0;
	width: 40vw;
	height: 100%;
	background-position: top left;
	background-size: cover;
}

@media only screen and (max-width: 991px) {
	.vlt-custom--4124 {
		right: 0;
		width: 50vw;
	}
}

@media only screen and (max-width: 767px) {
	.vlt-custom--4124 {
		right: -50vw;
		width: 100vw;
	}
}

.vlt-custom--1259 {
	top: -20px;
	right: -5px;
	width: 256px;
	height: 208px;
}

.vlt-custom--2355 {
	bottom: -250px;
	left: 0;
	width: 389px;
	height: 550px;
}

/* Contenedor principal de la barra deslizante */
.echofy-text-section {
    position: fixed; /* Fija la barra en la parte inferior */
    bottom: 0; /* Alinea al fondo */
    width: 100%; /* Ancho completo */
    background-color: rgb(63, 32, 113); /* Fondo verde */
    padding-top: 0px; /* Espacio en la parte superior */
    padding-bottom: 0px; /* Espacio en la parte inferior */
    padding-left: 0px;
    padding-right: 0px;
    z-index: 1; /* Asegura que esté por encima de otros elementos */
    height: 60px; /* Altura de la barra (ajustada para hacerla más delgada) */
    display: flex; /* Alineación flexible */
    align-items: center; /* Centra los elementos verticalmente */
    justify-content: center; /* Centra los elementos horizontalmente */
}

/* Contenedor del contenido deslizante */
.echofy-text-section .inner-container {
    max-width: 1812px;
    margin: 0 auto;
}

/* Contenedor deslizante */
.echofy-text-section .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
}

/* Bloque de elementos deslizantes */
.echofy-text-section .marquee-block {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-shrink: 0;
    animation: scroll 50s linear infinite;
    min-width: 100%; /* Asegura el ancho completo */
}

/* Estilo de cada caja */
.echofy-text-section .content-box {
    padding: 0 48px;
    display: flex;
    align-items: center;
}

/* Alineación y espaciado de palabras e imagen */
.echofy-text-section .content-box h6.title {
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    display: flex; /* Alinea el texto y las imágenes en línea */
    align-items: center; /* Centra la imagen verticalmente */
    justify-content: space-between; /* Añade espacio uniforme entre los elementos */
    gap: 30px; /* Espaciado entre palabras e imagen */
}

/* Clase para las palabras */
.echofy-text-section .content-box h6.title .word {
    display: inline-block;
}

/* Contenedor de la imagen */
.echofy-text-section .content-box h6.title .image {
    display: flex;
    align-items: center; /* Centra la imagen dentro de su contenedor */
}

/* Estilos para la imagen */
.echofy-text-section .content-box h6.title img {
    height: 30px; /* Ajusta el tamaño de la imagen */
    width: auto;
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* Contenedor principal */
.scroll-progress {
    position: fixed;
    bottom: 20px; /* Separación desde el fondo */
    right: 20px; /* Separación desde la derecha */
    width: 60px; /* Tamaño del círculo */
    height: 60px; /* Tamaño del círculo */
    background-color: #fff; /* Fondo blanco */
    border-radius: 50%; /* Hace el contenedor circular */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Asegura que esté encima de otros elementos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para resaltar */
    overflow: hidden; /* Permite animar el progreso */
}

/* Contenedor principal del círculo (solo con contorno) */
.scroll-progress {
    position: fixed;
    bottom: 50px; /* Ajusta este valor para moverlo más arriba desde el fondo (reduce el valor) */
    right: 20px; /* Ajusta este valor si también quieres moverlo más a la izquierda o derecha */
    width: 60px; /* Tamaño del círculo */
    height: 60px; /* Tamaño del círculo */
    background-color: transparent; /* Sin relleno, solo contorno */
    border: 3px solid #fff; /* Contorno blanco */
    border-radius: 50%; /* Hace el contenedor circular */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    overflow: hidden; /* Limita la flecha dentro del círculo */
    transform: scale(1); /* Permite futuras animaciones si es necesario */
    transition: transform 0.3s ease; /* Transición suave */
}

/* Flecha dentro del círculo apuntando hacia abajo */
.scroll-progress .arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Triángulo de la flecha */
    border-right: 10px solid transparent;
    border-top: 16px solid #ffffff; /* Color morado para la flecha */
    
    /* Alineación de la flecha en la parte superior del círculo */
    position: relative;
    top: 4px; /* Ajusta la flecha para alinearla verticalmente */
    
    /* Animación de movimiento de arriba a abajo */
    animation: moveUpDown 1.5s ease-in-out infinite; /* Velocidad y repetición infinita */
}

/* Animación de movimiento hacia arriba y abajo */
@keyframes moveUpDown {
    0% {
        transform: translateY(0); /* Empieza en su posición original */
    }
    50% {
        transform: translateY(-5px); /* Mueve hacia arriba */
    }
    100% {
        transform: translateY(0); /* Vuelve a la posición original */
    }
}

/* Título y párrafo */
.has-white-color {
    color: #fff;
    text-align: left;
    margin-bottom: 0px;
    line-height: 0.9; /* Ajusta este valor según necesites */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* Sombra suave */
}

.vlt-services__text {
    color: #646464;
    font-size: 1.2rem;
}
.vlt-services2__text {
    color: #ffffff;
    font-size: 1.2rem;
}

/* Menú horizontal */
.product-menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Permite que los botones se acomoden en varias líneas si es necesario */
}

.product-tab {
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px; /* Asegura que los botones no se hagan demasiado pequeños */
    text-align: center;
    margin: 5px; /* Añade espacio entre los botones */
}

/* Efecto hover */
.product-tab:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Ajustes para dispositivos móviles */
@media (max-width: 767px) {
    .product-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual tamaño */
        gap: 5px; /* Espaciado entre los botones */
    }

    .product-tab {
        font-size: 14px; /* Reduce el tamaño de la fuente en móviles */
        padding: 10px; /* Ajusta el padding para mayor confort en móviles */
    }
}


/* Contenido de las fichas */
.product-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.product-item {
    display: none;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 8px;
    color: #333;
    width: 100%;
    max-width: 800px;
    text-align: left;
}

.product-item.active {
    display: block;
}

.product-image {
    width: 400;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}
.product-item {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.product-item {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.product-item.active {
    transform: translateY(0);
    opacity: 1;
}
.product-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: var(--p1); /* Usa el morado definido en el archivo vlt-main.css */
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.product-btn:hover {
    background-color: #502d89; /* Un tono ligeramente más oscuro al pasar el ratón */
    transform: scale(1.05);
}
.product-tab {
    opacity: 0;
    transform: translateY(20px); /* Empieza más abajo */
    animation: slideIn 0.5s ease-out forwards;
}

.product-tab:nth-child(1) {
    animation-delay: 0.2s; /* Retraso en la animación para cada botón */
}
.product-tab:nth-child(2) {
    animation-delay: 0.4s;
}
.product-tab:nth-child(3) {
    animation-delay: 0.6s;
}
.product-tab:nth-child(4) {
    animation-delay: 0.8s;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0); /* Vuelve a su posición original */
    }
}
.click-message {
    text-align: center;
    font-size: 0.8rem;
    font-weight: medium;
    color: #fff;
    margin-top: 35px;
    padding: 10px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--p1);
    border-radius: 8px;
    display: block; /* Cambiar a block para usar margin auto */
    width: fit-content; /* Hace que el ancho se ajuste al contenido */
    margin-left: auto; /* Centra el elemento en el contenedor */
    margin-right: auto; /* Centra el elemento en el contenedor */
    animation: pulse 1.8s infinite ease-in-out;
}


/* Animación de pulso */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1); /* Aumenta ligeramente el tamaño */
        opacity: 0.8; /* Reduce un poco la opacidad */
    }
}

/* Estilos generales para el botón de WhatsApp */
.whatsapp-contact {
    position: fixed;
    bottom: 60px; /* Ajusta la posición desde la parte inferior */
    right: 20px; /* Ajusta la posición desde la parte derecha */
    background-color: #25D366; /* Color verde característico de WhatsApp */
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 9999; /* Asegura que el botón esté encima de otros elementos */
}

.whatsapp-link {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.whatsapp-icon {
    width: 30px; /* Ajusta el tamaño del ícono */
    height: 30px;
    margin-right: 10px;
}

.whatsapp-contact span {
    font-size: 16px;
    font-weight: bold;
}

.whatsapp-contact:hover {
    background-color: #128C7E; /* Color de hover */
}

/* Estilo específico para móviles */
@media (max-width: 768px) {
    .whatsapp-contact {
        padding: 8px 16px; /* Reducir padding en móviles */
        bottom: 70px; /* Ajustar la distancia desde el fondo */
        right: 10px; /* Ajustar la distancia desde la derecha */
        border-radius: 40px; /* Reducción de border-radius para hacerlo más pequeño */
    }

    .whatsapp-icon {
        width: 24px; /* Reducir tamaño del ícono */
        height: 24px;
        margin-right: 0; /* Eliminar margen entre el ícono y el texto */
    }

    .whatsapp-contact span {
        display: none; /* Ocultar el texto en la versión móvil */
    }
}

/* Estilos para la sección de Sector Médicos */
#sectormedicos {
    background: url('../img/grupomedicos.webp') center center / cover no-repeat;
    height: 100vh; /* Ocupa toda la pantalla */
    width: 100vw; /* Se asegura de que tome todo el ancho */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    position: relative; /* Asegura que se posicione correctamente */
}

.centered-box1 {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.button-group1 {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center; /* Centra horizontalmente los botones */
}

.btn-primary1, .btn-back {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    background-color: #3F2071; /* Color primario */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-primary1:hover, .btn-back:hover {
    background-color: #502d89; /* Un tono más oscuro */
}

/* Asegurar que body y html no afecten el centrado */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
/* Ajuste de tamaño en móviles */
@media (max-width: 768px) {
    .centered-box1 {
        max-width: 90%; /* Reduce el ancho en móviles */
        padding: 20px; /* Reduce el padding */
    }
}
.jotform-iframe-container {
    width: 100%; /* Ajusta el tamaño según lo necesites */
    height: 650px; /* Ajusta la altura para recortar la parte inferior del formulario */
    overflow: hidden; /* Oculta el contenido que sobresale */
    position: relative;
}

.jotform-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
}   

/* Ajuste de tamaño en móviles */
@media (max-width: 768px) {
    .jotform-iframe-container {
        width: 100%; /* Ajusta el tamaño según lo necesites */
        height: 850px; /* Ajusta la altura para recortar la parte inferior del formulario */
        overflow: hidden; /* Oculta el contenido que sobresale */
        position: relative;
    }
}