/* Importación de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/* Variables de CSS */
:root {
    --primary-color: #002D4B;
    --secondary-color: #f4f4f4;
    --text-color: #333;
    --accent-color: #719bb1;
    --font-primary: 'Lato', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
}

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales */
body {
    font-family: var(--font-primary);
    background-color: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Contenedor */
.container {
    width: 100%; /* Asegúrate de que ocupe todo el ancho */
    margin: 0 auto; /* Esto centrará el contenedor si tiene un ancho fijo */
    overflow: hidden;
}

/* Cabecera */
header {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 0;
    position: fixed; /* Mantener la barra de navegación en la parte superior */
    top: 0; /* Alinear al tope de la página */
    width: 100%; /* Ocupar todo el ancho */
    z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
}

.logo {
    display: flex;
    align-items: center; /* Alinea verticalmente en el centro */
}

.logo img {
    width: 200px;
    margin-right: 15px;
    margin-left: 0px;
    height: auto;
}

.logo h1{
    margin: 0;
    margin-right:5%;
    font-size:110%;
}

.logo h2{
    margin: 0; 
    font-weight:lighter;
    margin-left: 65px;
    font-size:16px;
}

/* Estilos para la barra de navegación */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinea izquierda y derecha */
    width: 100%;
    padding: 0 20px; /* Espaciado opcional */
}


.links_barra_nav {
    display: flex;
    flex-direction: row;
    font-size: 15px;
    gap: 20px;
    margin-left:150px;
}


.menu-container{
    display: none; /* Ocultar ícono de menú por defecto */
}

.menu-icon {
    display: none; /* Ocultar ícono de menú por defecto */
}

nav ul {
    list-style: none;
    display: flex; /* Menú horizontal por defecto */
    justify-content: center; /* Centrar enlaces */
    align-items: center; /* Centrar verticalmente */
}

nav ul li {
    margin: 0 0px;
    margin-left:10%;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
     white-space: nowrap;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--accent-color);
}

.nav-links2 {
    display: none; /* Oculta los enlaces de la barra de navegación por defecto */
}

/* Hero Section */
.hero {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: white;
    margin-top: 80px;
    /* Quitar esta línea ↓ */
    /* background-image: url('images/hero1.webp'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Quitar esta también ↓ */
    /* transition: background-image 2.5s ease-in-out; */
}

.pricing-section2{
    background-color: #c8d0e736 !important;
    margin-top:100px;
}

.billing-toggler2{
    margin-top:-70px;
}

.pricing-table2{
    margin-bottom:50px;
}


@media (min-height: 1200px) {
    .hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: white;
    margin-top: 80px;
    /* Quitar esta línea ↓ */
    /* background-image: url('images/hero1.webp'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Quitar esta también ↓ */
    /* transition: background-image 2.5s ease-in-out; */
}
}


.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Capa oscura */
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-family: var(--font-secondary);
    font-size: 4rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
}
.hero p {
    font-size: 1.5rem;
    margin-bottom: 4rem;
    text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
}

.hero .btn {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color:white;
    border: 2px solid white; 
    color: rgb(0, 0, 0);
    padding: 1.2rem 6rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.7rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:1%;
}

.hero .btn2 {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color:transparent;
    border: 2px solid white; 
    color: white;
    padding: 1.2rem 3rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.7rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:1%;
    margin-left:-5%;
}

.hero .btn:hover {
    background-color: var(--accent-color); /* Mantenemos el mismo color al hacer hover */
    color: #fff; /* Aseguramos que el color de la fuente sea blanco al hacer hover */
}

/* Efecto de crecimiento y sesgado */
.hero .btn::after {
    content: "";
    background: #002D4B; /* Puedes ajustar el color de fondo del efecto */
    position: absolute;
    z-index: -1;
    padding: 1rem 1.8rem; /* Mantiene el mismo tamaño de padding */
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(45deg) scale(0, 1);
    transition: all 0.3s ease; /* Duración del efecto */
}

.hero .btn:hover::after {
    transition: all 0.3s ease-out; /* Asegura una transición suave */
    transform: skewX(45deg) scale(1, 1); /* Efecto de crecimiento y sesgado */
}

.hero .btn2:hover {
    background-color: var(--accent-color); /* Mantenemos el mismo color al hacer hover */
    color: #fff; /* Aseguramos que el color de la fuente sea blanco al hacer hover */
}

/* Efecto de crecimiento y sesgado */
.hero .btn2::after {
    content: "";
    background: #002D4B; /* Puedes ajustar el color de fondo del efecto */
    position: absolute;
    z-index: -1;
    padding: 1rem 1.8rem; /* Mantiene el mismo tamaño de padding */
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(45deg) scale(0, 1);
    transition: all 0.3s ease; /* Duración del efecto */
}

.hero .btn2:hover::after {
    transition: all 0.3s ease-out; /* Asegura una transición suave */
    transform: skewX(45deg) scale(1, 1); /* Efecto de crecimiento y sesgado */
}

.button-container {
    font-size:80%;
    display: flex;             /* Usamos flexbox */
    justify-content: center;   /* Centra el contenido horizontalmente */
    align-items: center;       /* Centra el contenido verticalmente si es necesario */
    margin-top: 20px;          /* Añadir espacio entre otros elementos y el botón */
}

/* Estilos del botón */
.btnn {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 1rem 1.8rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 120%;
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    border: none;
    position: relative;
    overflow: hidden; /* Para ocultar el efecto de transformación */
}

.btnn:hover {
    background-color: var(--accent-color); /* Mantenemos el mismo color al hacer hover */
    color: #fff; /* Aseguramos que el color de la fuente sea blanco al hacer hover */
}

/* Efecto de crecimiento y sesgado */
.btnn::after {
    content: "";
    background: rgb(0, 45, 75); /* Puedes ajustar el color de fondo del efecto */
    position: absolute;
    z-index: -1;
    padding: 1rem 1.8rem; /* Mantiene el mismo tamaño de padding */
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(45deg) scale(0, 1);
    transition: all 0.3s ease; /* Duración del efecto */
}

.btnn:hover::after {
    transition: all 0.3s ease-out; /* Asegura una transición suave */
    transform: skewX(45deg) scale(1, 1); /* Efecto de crecimiento y sesgado */
}

.btnnn {
    display: inline-block;
    background-color: rgba(135, 172, 154, 0.836);
    color: white;
    padding: 1rem 1.8rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 120%;
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    border: none;
    position: relative;
    overflow: hidden; /* Para ocultar el efecto de transformación */
}

.btnnn:hover {
    background-color: rgba(135, 172, 154, 0.836); /* Mantenemos el mismo color al hacer hover */
    color: #fff; /* Aseguramos que el color de la fuente sea blanco al hacer hover */
}

/* Efecto de crecimiento y sesgado */
.btnnn::after {
    content: "";
    background:  rgba(25, 39, 32, 0.836); /* Puedes ajustar el color de fondo del efecto */
    position: absolute;
    z-index: -1;
    padding: 1rem 1.8rem; /* Mantiene el mismo tamaño de padding */
    display: block;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(45deg) scale(0, 1);
    transition: all 0.3s ease; /* Duración del efecto */
}

.btnnn:hover::after {
    transition: all 0.3s ease-out; /* Asegura una transición suave */
    transform: skewX(45deg) scale(1, 1); /* Efecto de crecimiento y sesgado */
}

.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 1rem 1.8rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.5rem;
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    border: none;
}

.btn:hover {
    background-color: var(--primary-color);
}
/* Servicios Destacados */
.featured-services {
    padding: 3rem 0;
    background: rgb(221, 232, 236);
}

.featured-services h2 {
    text-shadow: 1px 1px 15px rgba(35, 34, 67, 0.269); /* Sombra del texto */
    font-size: 2rem; 
    text-align: center;
    margin-bottom: 2rem;
    font-family: var(--font-secondary);
    color: var(--primary-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

@keyframes floatt {
    0% {
        transform: translateY(5%); /* Movimiento inicial más pequeño */
    }
    50% {
        transform: translateY(0%); /* La imagen sube ligeramente */
    }
    100% {
        transform: translateY(5%); /* Regresa a su posición inicial */
    }
}

/* Aplica la animación a los iconos */
.floating-icon {
    animation: floatt 2s ease-in-out infinite; /* La animación durará 2 segundos y se repetirá infinitamente */
}

.service-item {
    position: relative;
    background-color: var(--secondary-color);
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Evitar que el contenido sobresalga al agrandar */
}

/* Agrandar la caja en ancho y alto al hacer hover */
.service-item:hover {
    transform: scale(1.1); /* Agranda la caja un 10% */
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Efecto de oscurecer el fondo */
.service-item::before {
    content: ''; /* Necesario para el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    transition: all 0.3s ease;
    opacity: 0; /* Inicialmente no visible */
}

.service-item:hover::before {
    opacity: 1; /* Muestra el fondo oscuro al hacer hover */
}

.service-item img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    width: 160px; 
    height: 160px;
}

.service-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.service-item p {
    font-size: 1.1rem;
}

mark {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

/*Chequeos*/
/* Estilos para la sección de nuestros chequeos */
.our-checkups {
    margin-bottom:-5%;
    padding: 5% 0;
    background: rgb(221, 232, 236);
    text-align: center;
}

.our-checkups .section-title {
    font-size: 160%;
    margin-bottom: 4%;
    color: #002D4B;
    font-weight: bold;
}

.checkups-carousel {
    display: flex;
    justify-content: space-between; /* Asegura que los elementos tengan el mismo espacio entre ellos */
    gap: 2%;
    padding: 0 5%; /* Añade relleno en los lados izquierdo y derecho */
    margin: 0 auto; /* Centra el carrusel */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
}

/* Estilo de los items del chequeo */
.checkup-item {
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Ajusta al 30% del ancho del contenedor */
    margin: 2% 0; /* Margen arriba y abajo */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición añadida */
}

/* Efecto de hover sobre el contenedor */
.checkup-item:hover {
    transform: scale(1.05); /* Agranda el contenedor al hacer hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Añadir sombra al hacer hover */
}

/* Estilo para el gradiente que aparece al pasar el ratón */
.checkup-item::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to top, rgba(9, 70, 128, 0.6), rgba(0, 45, 75, 0) 100%); 
    z-index: 1; /* Asegura que el gradiente esté encima de la imagen */
    opacity: 0; /* Al principio no es visible */
    transition: opacity 0.3s ease; /* Transición suave */
    border-radius: 4%; 
}

/* Aplica el gradiente al pasar el ratón */
.checkup-item:hover::before {
    opacity: 1; /* Muestra el gradiente al pasar el ratón */
}

/* Estilo de la imagen */
.checkup-item .image-box a img {
    width: 100%;
    height: 20vw; /* Ajusta la altura en proporción al ancho de la pantalla */
    object-fit: cover;
    transition: transform 0.3s ease; /* Transición para el hover de la imagen */
}

/* Efecto de hover sobre la imagen */
.checkup-item:hover .image-box a img {
    transform: scale(1.1); /* Agranda la imagen */
}

/* Estilo del contenido */
.checkup-item .content-box {
    padding: 5%; /* Padding en proporción al tamaño del contenedor */
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima del gradiente */
}

.checkup-item .title {
    font-size: 1.5rem;
    color: #2b5775;
    margin-bottom: 10px;
}

.checkup-item .cat {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}

.checkup-item .icon {
    font-size: 1.2rem;
    color: #002D4B;
    text-decoration: none;
}

.checkup-item .icon:hover {
    color: #1a73e8;
}


/* Estilo del carrusel (si usas owl-carousel) */
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
    background-color: #002D4B;
    color: white;
    border-radius: 50%;
    font-size: 20px;
}

.cat a {
    color: #555; /* O el color que quieras */
    text-decoration: none; /* Para que no tenga subrayado */
}

.cat a:hover {
    color: #002D4B; /* Cambia el color al hacer hover */
}

/* Estilos generales para la sección Conócenos */
.conocenos-section {
    padding: 3rem 0;
    background: gris;
}

.contenttt {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas: una para las imágenes y otra para la información */
    gap: 1%; /* Espacio entre las columnas */
    align-items: center; /* Centra los elementos verticalmente */
}

.image-column2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos imágenes en fila */
    gap: 10px;
}

.rectangular-img {
    width: 100%; /* Asegura que las imágenes ocupen el 100% del ancho disponible en su contenedor */
    height: 40rem; /* Altura fija */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    overflow: hidden; /* Oculta cualquier contenido fuera del contenedor */
}

.rectangular-img::before {
    content: ''; /* Pseudo-elemento vacío */
    position: absolute;
    top: -100%; /* Inicia fuera de la imagen */
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(
        to bottom,
        rgba(138, 150, 204, 0),
        #02395eaf,
        rgba(138, 150, 204, 0)
    ); /* Crea el efecto de línea */
    transform: scale(1.1); /* Escala para cubrir completamente la imagen */
    z-index: 1; /* Pone la línea encima de la imagen */
    opacity: 0; /* Oculta inicialmente */
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}

.rectangular-img:hover::before {
    animation: scan 2s ease infinite; /* Activa la animación en hover */
    opacity: 1; /* Muestra el pseudo-elemento */
}

/* Animación para la línea de barrido */
@keyframes scan {
    0% {
        top: -100%; /* Inicia fuera de la imagen */
    }
    50% {
        top: 0%; /* Pasa por el centro de la imagen */
    }
    100% {
        top: 100%; /* Sale por el otro extremo */
    }
}


.second-image {
    margin-top: 30%; /* Da un pequeño espacio entre las dos imágenes */
}

.info-column {
    padding-left: 5%;
    font-size: 100%;
    color: #555;
}

.section-title h2 {
    font-size: 250%;
    font-weight: bold;
    color: #002D4B;
}

.section-title .sub-title {
    font-size: 160%;
    color: #002D4B;
    margin-bottom: 10%;
}

.info-box {
    margin-bottom: 5%;
    margin-right:5%;
}

.info-box p{
    color:#000000;
   font-size:120%;
}

ul.list-style {
    list-style: none;
    padding-left: 0;
}

ul.list-style li {
    display: flex;
    align-items: center;
    font-size: 120%;
    margin-bottom: 3%;
    color: #000000;
}

ul.list-style li i {
    color: #346d38;
    margin-right: 10%;
}

.name-tics-container {
    display: flex;
    align-items: center; /* Alinea la imagen pequeña y los tics */
    justify-content: flex-start; /* Hace que los elementos se alineen a la izquierda */
}

.vertical-divider {
    height: auto; /* La barra será tan alta como el contenido */
    width: 2px; /* Aumentamos el grosor de la línea divisoria */
    background-color: #ccc;
    margin: 0 10px; /* Reducimos el espacio entre la imagen y los tics */
    flex-grow: 2; /* Aumentamos el espacio disponible para los tics */
}

.name-column {
    text-align: center;
    margin-right: 15%; /* Espacio para alejar la imagen de los tics */
}

.profile-img-small {
    width: 150px; /* Tamaño del círculo */
    height: 150px;
    border-radius: 50%; /* Convierte el contenedor en un círculo */
    overflow: hidden; /* Oculta cualquier contenido fuera del borde */
    border: 3px solid #002D4B; /* Bordes opcionales */
    margin-right: 10%;
    position: relative; /* Necesario para que la imagen sobresalga correctamente */
}

.profile-img-small img {
    width: 100%; /* Imagen ocupa todo el ancho del contenedor */
    height: 130%; /* Imagen ocupa toda la altura del contenedor */
    object-fit: cover; /* Evita que la imagen se deforme */
    transition: transform 0.3s ease, z-index 0.3s ease; /* Transición suave */
    z-index: 1; /* Asegura que la imagen esté delante del círculo */
}

.profile-img-small:hover img {
    transform: scale(1.3); /* Agranda la imagen en el hover */
    z-index: 2; /* Sobresale del contenedor */
}


.name {
    margin-top:5%;
    font-size: 110%;
    font-weight: bold;
    color: #333;
}

.divider {
    margin-top: 5%;
    border: 0;
    border-top: 1px solid #002d4bab;
    width: 95%;
    margin-bottom: 3%;
}


.experience {
    display: flex;
    align-items: center;
    font-size: 150%; /* Tamaño de la fuente para el texto */
    margin-left:10%;
    color: #333; /* Color de texto */
}

.counter-wrapper {
    font-size: 500%; /* Tamaño del contador */
    font-weight: bold;
    margin-right: 5px; /* Espacio entre el contador y el texto */
    color: #002D4B; /* Color verde para el contador */
}

.counter {
    display: inline-block;
    font-size: 100%; /* Aseguramos que el contador se vea grande */
    font-weight: bold;
    color: #002D4B; /* Verde */
}

.image-column2 {
    display: flex;
    gap: 5%; /* Espacio entre las imágenes */
    justify-content: space-between;
    margin-bottom: 5%;
}

.rectangular-img {
    margin-left: 5%;
    flex: 1; /* Las imágenes ocupan el mismo espacio */
    height: 40rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    max-height: 100%; /* Limita la altura máxima a 100% de su contenedor */
    object-fit: cover; /* Recorta y ajusta la imagen para que se ajuste al contenedor */
    border-radius: 8px;
}

.second-image {
    margin-top: 25%; /* Da un pequeño espacio entre las dos imágenes */
}

.image-rect {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Hace que la altura se ajuste al contenedor */
    object-fit: cover; /* Mantiene la proporción y recorta la imagen */
}


/* FAQ */
.faq {
    padding: 5% 0;
    background: 
        linear-gradient(to bottom, 
            rgba(240, 240, 240, 1) 0%, 
            rgba(240, 240, 240, 0.626) 30%),  
        linear-gradient(to top, 
            rgba(224, 224, 224, 1) 0%, 
            rgba(224, 224, 224, 0) 30%),  
        radial-gradient(circle, #07426d, #337a8e);
    width: 90%;  
    margin: 0 auto;
    background-image: url(../images/fondo_servicios.jpg)
}

.faq .section-title {
    text-align: center;
    background-color: #002D4B;
    color: #ffffff;
    font-size: 170%;
    margin-bottom: 10%;
    width: 90%;
    margin-left: 28%;
    margin-right: 20%;
}

.faq-content {
    margin-left:5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-questions {
    width: 70%;
    padding-right: 2%;
}

.faq-question {
    font-size: 130%;
    font-weight: 600;
    color: #002D4B;
    cursor: pointer;
    background-color: #d4d2d2;
    padding: 2% 3%;
    margin-bottom: -8%;
    border-radius: 3%;
    transition: font-size 0.3s ease;
}

/* Efecto hover para aumentar el tamaño de la letra */
.faq-question:hover {
    font-size: 140%;
    color: #005f7f;
}

.faq-answer {
    font-size: 100%;
    margin-top: 10%;
    color: #333;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 3%;
    height: 0; /* Inicialmente, la altura es 0 */
    opacity: 0; /* Inicialmente, está oculta */
    overflow: hidden; /* Evita que el contenido sobresalga */
    transition: height 0.5s ease, opacity 0.5s ease; /* Transiciones suaves */
}

/* Mostrar la respuesta cuando el item tiene la clase 'active' */
.faq-item.active .faq-answer {
    height: auto; /* La altura será automática cuando se expanda */
    opacity: 1; /* Hacemos visible la respuesta */
}

/* Animaciones de AOS */
.faq-item[data-aos] {
    opacity: 0;
}

.faq-item[data-aos].aos-animate {
    opacity: 1;
}

/* Animación de la interrogación girando de derecha a izquierda */
.faq-animation {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.question-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 127px;
    margin-right: 15%;
    border: 5px solid #002D4B;
    border-radius: 50%;
    position: relative;
    animation: rotate-left 3s infinite linear;
}

.question-symbol {
    font-size: 800%;
    color: #002D4B;
    position: absolute;
    font-weight: bold;
}

/* Animación de rotación de la interrogación */
@keyframes rotate-left {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* Mas info */
.more-info-content {
    background-color: #002D4B;
    display: flex;
    justify-content: space-between; /* Separar el texto y el botón */
    align-items: center;
    padding: 4% 3%; /* Añade más padding superior e inferior */
} 

.more-info-text {
    width: 70%; /* El texto ocupa el 70% */
    text-align: left;
}


/* El contenedor del botón */
.more-info-button {
    width: 30%; /* El botón ocupa el 30% */
    text-align: right; /* Alinear el botón a la derecha */
}

/* Aseguramos que la animación funcione correctamente en el botón */
.more-info-button a {
    position: relative;
    display: inline-block;
    padding: 5% 8%;
    font-size: 100%;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(to left top, #164699 50%, #174fae 50%);
    border: none;
    outline: none;
    transition: all 0.5s;
    overflow: hidden;  /* Borde redondeado */
}

.more-info-button a span {
    position: absolute;
    display: block;
    background: #ffffff;
    transition: all 1s ease;  /* Hacemos la transición más suave y gradual */
}

/* Bordes que se animarán */

/* Borde superior */
.more-info-button a span:nth-child(1) {
    height: 3px;
    width: 200px;
    top: 0;
    left: -200px;
    border-top-right-radius: 30px;  /* Ajustamos el radio del borde */
    border-bottom-right-radius: 30px;
    animation: span1 2s ease-out infinite;
    animation-delay: 0.5s;
}

@keyframes span1 {
    0% { left: -200px; }
    100% { left: 100%; }
}

/* Borde derecho */
.more-info-button a span:nth-child(2) {
    height: 70px;
    width: 3px;
    top: -70px;
    right: 0;
    border-bottom-left-radius: 30px;  /* Ajustamos el radio del borde */
    border-bottom-right-radius: 30px;
    animation: span2 2s ease-out infinite;
    animation-delay: 1s;
}

@keyframes span2 {
    0% { top: -70px; }
    100% { top: 70px; }
}

/* Borde inferior */
.more-info-button a span:nth-child(3) {
    height: 3px;
    width: 200px;
    right: -200px;
    bottom: 0;
    border-top-left-radius: 30px;  /* Ajustamos el radio del borde */
    border-bottom-left-radius: 30px;
    animation: span3 2s ease-out infinite;
    animation-delay: 1.5s;
}

@keyframes span3 {
    0% { right: -200px; }
    100% { right: 100%; }
}

/* Borde izquierdo */
.more-info-button a span:nth-child(4) {
    height: 70px;
    width: 3px;
    bottom: -70px;
    left: 0;
    border-top-left-radius: 30px;  /* Ajustamos el radio del borde */
    border-top-right-radius: 30px;
    animation: span4 2s ease-out infinite;
    animation-delay: 2s;
}

@keyframes span4 {
    0% { bottom: -70px; }
    100% { bottom: 70px; }
}

/* Efecto al hacer hover sobre el botón */
.more-info-button a:hover {
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}

.more-info-button a:hover span {
    animation-play-state: paused;
}



.testimonials {
    padding: 3rem 0;
    background-color: var(--secondary-color);
    overflow: hidden;
}

.testimonials h2 {
    text-align: center;
    margin-bottom: 4rem;
    font-family: var(--font-secondary);
    color: var(--primary-color);
}

.carousel-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

.testimonial-slider {
    
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.testimonial-item {
    flex: 0 0 100%;
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.testimonial-item:hover {
    transform: translateY(-5px);
}

.testimonial-item p {
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial-item span {
    display: block;
    text-align: right;
    font-weight: bold;
    color: var(--accent-color);
}



/* Efecto de máquina de escribir */
.typewriter {
    font-family: 'Courier', monospace; /* Fuente tipo máquina de escribir */
    color: #333; /* Color del texto */
    border-right: 2px solid black; /* Simula el cursor de la máquina de escribir */

    white-space: nowrap; /* No permite que el texto se divida en líneas */
    overflow: hidden; /* Esconde el texto al principio */
    animation: typing 10s steps(50) 1s infinite, blink 0.75s step-end infinite; /* Animación de escribir y borrar en bucle */
}

/* Animación de la escritura y borrado */
@keyframes typing {
    0% {
        width: 0; /* Empieza con el texto invisible */
    }
    50% {
        width: 100%; /* El texto se escribe completamente */
    }
    75% {
        width: 100%; /* El texto permanece visible por un tiempo */
    }
    100% {
        width: 0; /* El texto se borra */
    }
}

/* Efecto de parpadeo del cursor */
@keyframes blink {
    50% {
        border-color: transparent; /* El cursor parpadea (se oculta) */
    }
}

/*Suscripcione*/
/* Centrado de las tarjetas de Stripe */
/* Estilo para la sección con fondo de imagen */
.service-cards .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 1100px;
    padding: 15%;
    background-image: url(../images/fondo_registro.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* Necesario para colocar el gradiente */
    overflow: hidden; /* Para asegurarse de que el gradiente no se desborde */
}

/* Gradiente de desvanecimiento entre el fondo de la imagen y el fondo gris */
.service-cards .container::after {
    content: ''; /* Creamos el pseudo-elemento */
    position: absolute;
    bottom: 0; /* Lo colocamos al final de la sección */
    left: 0;
    width: 100%;
    height: 10%; /* Ajusta la altura según lo que necesites */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Gradiente de arriba (transparente) a abajo (blanco) */
}
.section-title2 {
    font-size: 280%;
    font-weight: bold;
    color: #002D4B;
    margin-bottom: 8%;
    text-align: center;
    text-transform: uppercase;
}



.card-container {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
    margin-bottom:5%;
}

.card {
    display: inline-block;
    text-align: center;
    background-color: rgb(36, 45, 114); /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier contenido que salga del borde */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.card:hover {
    transform: scale(1.05); /* Efecto de zoom */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
    cursor: pointer; /* Muestra el cursor pointer en hover */
}
/* Descripción debajo de las tarjetas */
.service-description {
    margin: 0 auto 3%;  /* Esto centra el bloque horizontalmente */
    font-size: 110%;
    color: #444;
    max-width: 60%;
    text-align: center; /* Centra el texto dentro del bloque */
    display: block;
}

.service-descriptionn{
     margin: 0 auto 3%;  /* Esto centra el bloque horizontalmente */
    font-size: 100%;
    color: #444;
    max-width: 80%;
    margin-top:-80px;
    text-align: center; /* Centra el texto dentro del bloque */
    display: block;
}


/* Botón consultar otros servicios */
.consult-button .btn {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.consult-button .btn:hover {
    background-color: #005bb5;
}

/*Flecha despegable*/
/* Estilo de la sección de artículos */
.articles-section {
    text-align: center;
    margin-top: 50px;
}

/* Flecha hacia abajo */
.arrow-container {
    font-size: 3rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.arrow-container:hover {
    transform: scale(1.1); /* Efecto al pasar el ratón */
}
/* Artículos ocultos inicialmente */
.articles {
    display: flex; /* Usamos flex para organizar los artículos en una fila */
    flex-wrap: wrap; /* Permite que los artículos se muevan a la siguiente línea si no caben */
    max-height: 0; /* Comienza con una altura de 0 cuando está oculto */
    overflow: hidden; /* Oculta cualquier contenido fuera del contenedor */
    margin-top: 5%;
    text-align: left;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center; /* Centra los artículos en el contenedor */
    transition: max-height 0.5s ease-out; /* Transición suave de apertura y cierre */
}

/* Cuando los artículos se muestran, ajustamos el max-height para que se desplieguen */
.articles.show {
    max-height: 5000px; /* Ajustamos a un valor grande para permitir el despliegue completo */
}

.consult-info p {
    font-size: 110%; /* Tamaño de fuente pequeño */
    color: #333; /* Color del texto, puedes ajustarlo a tu preferencia */
    text-align: center; /* Centrado horizontal */
    margin-bottom: 10px; /* Espaciado entre el texto y la flecha */
}


/* Estilo de los artículos */
.articles article {
    position: relative;
    width: 25%; /* Ajusta el tamaño de los artículos en la fila */
    margin-bottom: 10%; /* Espacio entre los artículos */
    margin-right: 2%; /* Espacio entre los artículos (si hay más de uno en una fila) */
    margin-left:2%;
    transition: all .3s ease;
    overflow: hidden; /* Asegura que nada se salga del artículo */
}

/* Estilo de la primera imagen */
.articles article img:first-child {
    box-shadow: 0 60px 60px -60px rgba(0, 30, 255, 0.5);
    border-radius: 2%;
    object-fit: cover;
    width: 100%;
}

/* Estilo de la segunda imagen (ocultarla por defecto) */
.articles article img:last-child {
    position: absolute;
    width: 70%;
    bottom: 14%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(10%); /* Inicia con el efecto flotante */
    opacity: 1;  /* Siempre visible */
    visibility: visible; /* Siempre interactuable */
    animation: float 2s ease-in-out infinite; /* Animación continua de flotación */
    z-index: 2; /* Asegura que esté por encima del gradiente */
}
/* Contenedor de texto que se coloca sobre la primera imagen */
.articles article .overlay-text {
    position: absolute;
    top: 5%; /* Coloca el texto en el centro vertical de la imagen */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el texto para que esté perfectamente centrado */
    color: white; /* Color blanco por defecto */
    font-family: 'Open Sans', sans-serif; /* Fuente bonita */
    font-size: 220%; /* Tamaño de fuente mayor para hacerlo más visible */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Alineación centrada */
    padding: 20px 40px; /* Espaciado alrededor del texto, más grueso en el eje horizontal */
    z-index: 2; /* Asegura que el texto esté encima de la imagen */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    width:200%;
    /* Degradado de fondo: negro a transparente */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.719), rgba(0, 0, 0, 0)); /* Fondo que se desvanece hacia abajo */
    
    border-radius: 10px; /* Bordes redondeados para un acabado más suave */
}



/* Animación para hacer que la imagen flote hacia arriba y hacia abajo */
@keyframes float {
    0% {
        transform: translateY(20%);
    }
    50% {
        transform: translateY(-5%); /* Se mueve un poco hacia arriba */
    }
    100% {
        transform: translateY(20%); /* Regresa a la posición original */
    }
}

    /* Estilo para los textos debajo de los artículos */
    .description {
        width:50%;
        text-align: center;
        margin-top: 7%;
        margin-left:10%;
        margin-bottom: 3%; /* Espacio entre el texto y el siguiente artículo */
    }

    .description p {
        font-size: 200%;
        color: #333;
    }


/* Efecto hover en el artículo */
.articles article:hover {
    transform: perspective(300px)
        rotateX(10deg)
        translateX(-5%)
        translateZ(0);
}

/* Estilo del gradiente (se muestra al pasar el ratón) */
.articles article::before {
    content: '';
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0) 95%);
    opacity: 1; /* Siempre visible */
    z-index: 1; /* Debajo de la imagen flotante */
}

/* Mostrar gradiente y segunda imagen al pasar el ratón */
.articles article:hover::before {
    opacity: 1;
}

/* Mostrar la segunda imagen solo cuando se hace hover */
.articles article:hover img:last-child {
    opacity: 1; /* Hace visible la segunda imagen */
    visibility: visible; /* Permite que la imagen sea visible e interactuable */
    transform: translateY(10%); /* Efecto de movimiento suave */
    animation: float 2s ease-in-out infinite; 
}

/* Animación de agitar la flecha */
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px); /* Mueve la flecha a la izquierda */
    }
    50% {
        transform: translateX(5px); /* Mueve la flecha a la derecha */
    }
    75% {
        transform: translateX(-5px); /* Mueve la flecha nuevamente a la izquierda */
    }
    100% {
        transform: translateX(0); /* Regresa a la posición original */
    }
}

/* Flecha en su estado inicial */
.arrow-container {
    transition: transform 0.3s ease; /* Asegura una transición suave entre animaciones */
}

/* Agitar la flecha */
.arrow-container.shake {
    animation: shake 0.6s ease-in-out; /* Duración de la animación */
    animation-iteration-count: 1; /* La animación solo se reproduce una vez */
    animation-fill-mode: forwards; /* Asegura que la animación termine en su posición final */
}

/* Animación de rotación cuando se expande el contenido */
.arrow-container.rotated {
    color: #002D4B;
    transform: rotate(180deg); /* Rota la flecha cuando se muestra el contenido */
}




/* Sobre Mí */
.about-me {
    background:  rgb(221, 232, 236);
    padding: 3rem 0;
}

.about-me h2 {
    text-shadow: 1px 1px 25px rgba(140, 130, 195, 0.7); /* Sombra del texto */
    margin-bottom:6rem;
    font-size: 40px;
    text-align: center;
    font-family: var(--font-secondary);
    color: var(--primary-color);
}

.profile {
    margin-bottom:3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}


.profile-img {
    position: absolute;
    left: 30px;
    top: 365px;
    width: 450px;
    height: 635px;
    border-radius: 10px;
    object-fit: cover;
}

.profile-details {
    margin-left: 500px;
    margin-right: 120px;
    height: 300px; /* Altura fija */
    flex: 1; /* Permitir que el contenedor se expanda */
    font-size: 1.8rem; /* Aumentar el tamaño de la fuente */
    text-align: left; /* Alinear texto a la izquierda */
    display: flex; /* Usar flexbox para centrar contenido */
    flex-direction: column; /* Alinear elementos en columna */
    justify-content: center; /* Centrar verticalmente el contenido */
    align-items: flex-start; /* Alinear a la izquierda */
    padding: 0 20px; /* Padding para asegurar espacio a los lados */
}

.profile-details p {
    margin: 0.5rem 0; /* Espaciado entre párrafos */
    max-width: 100%; /* Asegurar que ocupen todo el ancho del contenedor */
    width: 100%; /* Asegurar que todos los párrafos tengan el mismo ancho */
    box-sizing: border-box; /* Incluir padding y border en el ancho total */
}


.profile-background {
    position: absolute;
    top: 10px; /* Desplazamiento */
    left: 10px; /* Desplazamiento */
    width: 200px;
    height: 200px;
    background-color: #4a90e2; /* Color del fondo */
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para efecto de volumen */
    z-index: 0; /* Está detrás de la imagen */
}


/* Información de Contacto */
.contact-info {
    min-height: 60rem;
    max-height: 1000rem;
    text-align: center;
    padding: 2rem 0;
    background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
}

.contact-info h2 {
    margin-left: 20%;
    margin-right: 20%;
    text-shadow: 1px 1px 25px rgba(140, 130, 195, 0.463); /* Sombra del texto */
    margin-top: 2%;
    margin-bottom: 3%;
    font-size: 180%;
    font-weight: bold;
    font-family: var(--font-secondary);
    color: var(--primary-color);
}

.contact-info p {
    margin-left: 10%;
    margin-right: 10%;
    font-size: 125%;
    margin-bottom: 4%;
}

.contact-item {
    display: flex; /* Utiliza flexbox para alinear icono y texto */
    align-items: center; /* Alinea verticalmente el icono y el texto */
    margin-bottom: 10px; /* Espaciado entre cada elemento de contacto */
    text-align: center; /* Centra el texto en cada elemento */
}

.contact-info ul {
    list-style: none;
    max-width: 60%;
    margin: auto;
    margin-bottom: 6%;
}

.contact-info .btn {
    max-width: 30%;
}

.contact-info ul li {
    background-color: var(--secondary-color);
    padding: 5%;
    margin-bottom: 2rem;
    border-radius: 5px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* Necesario para el fondo del escáner */
    overflow: hidden; /* Asegura que el escáner no se salga del contenedor */
    transition: transform 0.3s ease-in-out; /* Transición para el aumento de escala */
}

/* Efecto de escáner solo al hacer hover */
.contact-info ul li:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Comienza fuera del elemento */
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(18, 109, 245, 0.363), transparent);
    animation: scanner 2.5s infinite; /* Animación del escáner */
    z-index: 1; /* Asegura que el escáner esté sobre el fondo */
    opacity: 1; /* Hace que el escáner sea visible al hacer hover */
}

/* Animación del escáner (el fondo del escáner que se mueve de izquierda a derecha) */
@keyframes scanner {
    0% {
        left: -100%; /* Empieza fuera del elemento */
    }
    50% {
        left: 100%; /* Pasa completamente a través del elemento */
    }
    100% {
        left: -100%; /* Regresa a la posición inicial */
    }
}

/* Efecto de aumento de escala al hacer hover */
.contact-info ul li:hover {
    transform: scale(1.1); /* Aumenta el tamaño del elemento al 110% */
}

/* Asegura que el escáner no cubra el texto y los iconos */
.contact-info ul li:hover::before {
    opacity: 0.5; /* Reduce la opacidad del escáner al hacer hover para no tapar el contenido */
}

.contact-info ul li a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-info ul li a:hover {
    text-decoration: underline;
}

.form-group {
    margin-bottom: 0.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group2{
    display: flex; 
    align-items: center; 
    gap: 1px;
}

.form-group2 label{
    margin-left:-40%;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font-primary);
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}


.contact-form .btn:hover {
    background-color: var(--primary-color);
}

/* Estilo para el botón flotante de WhatsApp */
.whatsapp-img {
    position: fixed; /* Para que se mantenga en un lugar fijo */
    bottom: 1%; /* Ajusta la distancia desde el fondo de la pantalla */
    left: -1%; /* Ajusta la distancia desde el borde izquierdo */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    transition: all 0.5s ease-in-out;  /* Animación suave al hacer hover */
}

.whatsapp-img:hover {
    bottom: 0%; /* Ajusta la distancia desde el fondo de la pantalla */
    left: -1%; /* Ajusta la distancia desde el borde izquierdo */
    width:250px;
    height:auto;
}


/* Pie de Página */
footer {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 0;
    text-align: center;
}

footer .social-links {
    display: flex; /* Activar flexbox */
    flex-direction: column; /* Alinear elementos verticalmente */
    align-items: center; /* Centrarlos horizontalmente */
    margin-top: 1rem;
    font-size: 1rem;
    gap: 0.5rem; /* Espaciado vertical entre los elementos */
}

.span-contact {
    margin-left: 0; /* Reiniciar cualquier margen lateral */
    font-size: 1.5rem;
}

footer .social-links a {
    color: var(--accent-color);
    margin: 0 10px;
    display: inline-block;
    font-size: 1.5rem;
    text-decoration: none; /* Eliminar subrayado */
}

.fa-grande{
    font-size: 10rem; /* Tamaño del icono en pantallas grandes */
}

.confirmacion{
    margin-top:8%;
      display: block;           /* Asegura que cada elemento se muestre como bloque */
    margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
    text-align: center; 
    background: linear-gradient(to bottom, white, rgba(24, 255, 93, 0.082));
    min-height:900px;
}

.confirmacion .btn{
    background-color:rgb(6, 80, 165);
}

.confirmacion .btn:hover {
    background-color: rgb(10, 43, 71);
}
.confirmacion .botones-pago {
    display: flex;
    flex-wrap: wrap;       /* Permite que pasen a la línea siguiente si no caben */
    gap: 15px;
    margin-top: 20px;
    justify-content: center; /* Centra los botones horizontalmente */
}

.confirmacion .botones-pago .card {
    flex: 0 1 auto;        /* Permite que cada tarjeta se ajuste a su contenido */
    min-width: 200px;      /* Ajusta este valor según el tamaño real del botón */
}

.error{
    margin-top:8%;
    display: block;           /* Asegura que cada elemento se muestre como bloque */
    margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
    text-align: center; 
    background: linear-gradient(to bottom, white, rgba(223, 50, 50, 0.502));
}

.error .btn{
    background-color:rgb(114, 0, 0);
}

.error .btn:hover {
    background-color: rgb(212, 58, 58);
}


.detalles-chequeos {
     margin-top: 5%;
     padding: 1em;
     background: rgb(221, 232, 236);
     text-align: center;
 }

 .detalles-chequeos .chequeo-item{
    margin-left:5%;
    margin-right: 5%;
 }

 .detalles-chequeos .chequeo-item .chequeo-img{
    margin-left:2%;
    margin-right: 2%;
 }
    
.detalles-chequeos h2 {
     margin-top:2%;
     margin-bottom:3%;
     font-size: 250%;
     color: #002D4B;
}
    
.detalles-chequeos .detalles-lista {
     list-style: none;
     padding: 0;
     text-align: left;
     max-width: 800px;
     margin-left:22%;
 }
    
 .detalles-chequeos .detalles-lista li {
      margin: 1em 0;
      font-size: 1.4em;
 }
    
 .detalles-chequeos .btn {
     background-color: rgba(104, 168, 223, 0.502);
     border: none;
     color: white;
     padding: 1em 2em;
     font-size: 1em;
     cursor: pointer;
}
    
.detalles-chequeos .btn:hover {
     background-color: #002D4B;
}

.terminos{
    margin-top:8%;
    display: block;           /* Asegura que cada elemento se muestre como bloque */
    margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
    text-align: center; 
    background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
}

.terminos .btn{
    background-color: rgba(104, 168, 223, 0.502);
}

.terminos .btn:hover {
    background-color: #002D4B;
}

.terminos h2{
    color:#002D4B;
    top:10%;
    margin-bottom: 4%;
}

.terminos p{
    text-align: justify;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:1%;
}


.idioma {
    position: fixed; /* O absolute, dependiendo de tu necesidad */
    top: 22%; /* Distancia desde la parte superior */
    right: -18%; /* Distancia desde la parte derecha */
    display: flex; /* Para alinear las banderas y el checkbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centrado horizontal */
    z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
}

.idioma-img{
   
   display:none;
}

.idioma img{
    width: 5%;
    height: 5%;
    margin:auto 10px;
}



.check {
    position: relative;
    width: 50px;
    top:-5px;
}

.check:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 25px;
    background: #333;
    border-radius: 25px;
}

.check:after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 25px;
    transition: 0.25s;
    border: 2px solid #333;
    box-sizing: border-box;
}

.check:checked:after {
    left: 25px;
    border: 2px solid #00a1ff;
}

.check:checked:before {
    background: #00a1ff;
}


.registro{
    padding: 5% 0;
    margin-top: 3%; /* Asegúrate de que haya suficiente espacio arriba */
    background: rgb(221, 232, 236);
    min-height:1000px;
}

.registro h2, .registro .btn {
    display: block;           /* Asegura que cada elemento se muestre como bloque */
    margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
    text-align: center;       /* Para centrar el texto del título */
    margin-top:5%;
}

.registro .form-group{
    margin-left:10%;
    margin-right:10%;
}

.services-slider{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



/* Servicios Detallados */
.services-detaill {
    opacity: 0; /* El texto empieza invisible */
    animation: aparecer 2s ease forwards; /* Duración de 2 segundos */
    margin-top: 0%;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo el contenido */
    text-align: center; /* Alinea el texto al centro */
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: -10%;
}



.container_slide_services {
    position: relative; /* Cambiado de absolute a relative */
    margin-top: 10%; /* Agregado espacio arriba para que no se superponga */
    width: 95%;
    height: 600px; /* Ajustará su altura automáticamente al contenido */
    background: #f5f5f5; /* Fondo para diferenciar */
    box-shadow: 0 4px 7px #dbdbdd;
    overflow: hidden; /* Asegúrate de que no haya desbordamiento visual */
    padding: 2rem 0; /* Espaciado interno */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    border-radius: 20px;
}

.container_slide_services .slide {
    display: flex;
    gap: 2%; /* Espaciado entre los elementos */
    justify-content: center;
    align-items: center;
}
.container_slide_services .slide .item{
    width:13%;
    height:20%;
    position:absolute;
    top:75%;
    transform: translate(0, -50%);
    border-radius: 20px;
    box-shadow: 0 30px 50px #505050;
    background-position: 50% 50%;
    background-size: cover;
    display:inline-block;
    transition:0.5s;
}




.slide .item:nth-child(1),
.slide .item:nth-child(2){
    top:0;
    left:0;
    transform: translate(0,0);
    border-radius: 0;
    width:100%;
    height:100%;
}

.slide .item:nth-child(3){
    left:65%;
}

.slide .item:nth-child(4){
    left:80%;
}

.slide .item:nth-child(5){
    left:95%;
}
.slide .item:nth-child(n +6){
    left:calc(50% + 400px);
    opacity:0;
}

.item .content{
    position:absolute;
    top:25%;
    left:8%;
    width:90%;
    text-align:left;
    color: #eee;
    transform: translate(0, -50%);
    font-family:system-ui;
    display:none;
    
}
.slide .item:nth-child(2) .content{
    display:block;
}



.content .name{
    font-size:320%;
    text-transform:uppercase;
    font-weight: bold;
    opacity:0;
    color:white;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .des{
    font-size:120%;
    margin-bottom:15%;
    opacity:0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content button{
 padding: 8% 13%;
 border:none;
 cursor: pointer;
 opacity:0;
 animation: animate 1s ease-in-out 0.6s 1 forwards;
}

@keyframes animate {
    from{
        opacity:0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }
    to{
        opacity:1;
        transform: translate(0);
        filter: blur(0);
    }
}

.buttonn{
    width:100%;
    text-align:center;
    position:absolute;
    bottom:20px;
}

.buttonn button{
    background: #719bb1;
    color:#fff;
    width: 5%;
    height:35px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    margin: 0 5px;
    border:1px solid #0000005e;
    transition:0.3s;
}

.buttonn button:hover{
    background: #002D4B;
    color:#fff;
}


/* Servicios y otras secciones */
.services-detail,
.about-me,
.testimonials,
.contact-info {
    padding: 5% 0;
    margin-top: 7%; /* Asegúrate de que haya suficiente espacio arriba */
}

.about-me{
    margin-top:4%;

    min-height:1000px;
}

/* Servicios Detallados */
.services-detail {
    opacity: 0; /* El texto empieza invisible */
    animation: aparecer 2s ease forwards; /* Duración de 3 segundos */
    margin-top: 5%; 
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Cambiamos para centrar todo el contenido */
    text-align: center;  /* Alineamos el texto al centro */
    margin-left:0%;
    margin-right:0%;
}

@keyframes aparecer {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.services-wrapper{
    background-color: #e9ecea;
}


.services-detail h2 {
    margin-bottom: 1.5rem;
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    line-height: 1; /* Mejorar la legibilidad */
    text-align: center;
    font-size: 40px;
    margin-bottom: 30px;
    margin-left:30px;
}

.estilo1 {
    font-size: 20px;
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
}


.estilo2{
    
    line-height: 1; /* Mejorar la legibilidad */
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
    margin-bottom: 50px;
    margin-top: 50px;
    font-size: 16px;
}

.services-detail .btn {
    margin-top:50px;
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 1rem 1.8rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 2rem;
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    border: none;
}

.services-detail .service-detail-item {
    display: flex;
    align-items: flex-start; /* Alinear todos los elementos al inicio (izquierda) */
    margin-bottom: 1.5rem;
    text-align: left; /* Alinear el texto de cada item a la izquierda */
    
}

.services-detail .service-detail-item img {
    width: 80px;
    height: auto;
    margin-right: 1rem; /* Mantener el espacio entre la imagen y el texto */
}

.services-detail .service-detail-item h3 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: left; /* Alinear el título a la izquierda */
}

.services-detail .service-detail-item p {
    font-size: 1rem;
    text-align: justify; /* Justificar el texto de los items */
}

.registro .form-group .checkbox{
    margin-left: -40%;
    margin-right:-60%;
    position: block; /* O 'absolute' dependiendo de tu necesidad */
    top: 100%; /* Ajusta este valor según lo necesites */
}

.registro .form-group .label-checkbox{
   font-size:90%;
}
.registro-moderno {
    padding: 40px 0;
    background: rgb(221, 232, 236);
    min-height: auto; /* Ajusta la altura según el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
}

.registro-moderno .container {
    background: #fff;
    padding: 40px;
    margin-top:5%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 700px; /* Ancho máximo del formulario */
}

.registro-moderno h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 2.2rem;
}

.registro-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.registro-form .form-row .form-group {
    flex: 1; /* Distribuye el espacio equitativamente entre los elementos en la fila */
    margin: 0; /* Elimina el margen individual de los grupos en la fila */
}

.registro-form .form-group {
    margin-bottom: 20px;
}

.registro-form label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
    font-size: 0.95rem;
}

.registro-form input[type="text"],
.registro-form input[type="email"],
.registro-form input[type="tel"],
.registro-form input[type="date"],
.registro-form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho */
}

.registro-form input[type="text"]:focus,
.registro-form input[type="email"]:focus,
.registro-form input[type="tel"]:focus,
.registro-form input[type="date"]:focus,
.registro-form input[type="password"]:focus {
    outline: none;
    border-color: #719bb1; /* Color de foco similar al de ConciergeMD */
    box-shadow: 0 0 5px rgba(113, 155, 177, 0.5);
}

.registro-form .checkbox-wrapper {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.registro-form .checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
}

.registro-form .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.registro-form .checkbox-label .terms-text a {
    color: #007bff; /* Un azul para los enlaces */
    text-decoration: none;
}

.registro-form .checkbox-label .terms-text a:hover {
    text-decoration: underline;
}

.registro-form .btn {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #07496386; 
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.registro-form .btn:hover {
    background-color: rgba(5, 55, 75, 0.726); 
}

.custom-asterisco {
    color: #dc3545; /* Rojo para indicar campos obligatorios */
    margin-right: 5px;
}

/* Estilos del Modal */
.modal {
    display: none; /* Ocultar por defecto */
    position: fixed; /* Fijo para llenar toda la pantalla */
    z-index: 1; /* Asegúrate de que esté por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    background-color: rgba(0, 0, 0, 0.4); /* Fondo difuminado */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.modal-content {
    display: block; 
    text-align: center;
    background-color: #fefefe; /* Fondo blanco para el contenido */
    padding: 40px; /* Espaciado interior */
    margin-top:0%;
    border-radius: 8px; /* Bordes redondeados */
    width: 80%; /* Ancho de l modal */
    max-width: 90%; /* Máximo 90% del ancho de la pantalla */
    height: auto; /* Alto automático */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    position: relative; /* Relativo para posicionar elementos dentro */
}

.modal-content label{
    font-size:90%;
}

/* Botón de cierre dentro de la ventana modal */
.close-modal {
    background-color: var(--accent-color);; /* Color de fondo del botón */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Espaciado */
    cursor: pointer; /* Cursor de puntero */
    border-radius: 4px; /* Bordes redondeados */
    position: absolute; /* Posicionarlo en la esquina */
    top: 10px; /* Margen desde la parte superior */
    right: 10px; /* Margen desde la derecha */
    font-size: 14px; /* Tamaño de fuente */
}

.close-modal:hover {
    background-color: var(--primary-color); /* Color de fondo al pasar el ratón */
}

.fa-footer{
    font-size: 3rem; /* Tamaño del icono en pantallas grandes */
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Desplazamiento hacia abajo */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Regresar a la posición original */
    }
}

.custom-asterisco {
    font-size:60%; /* Ajusta este valor para un tamaño más pequeño */
    color: red; /* Cambia el color si lo deseas */
    vertical-align:middle; /* Para alinear mejor con el texto */
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.pulse-effect {
    animation: pulse 2s infinite; /* Duración: 1s, se repite infinitamente */
}

.hero,
.featured-services,
.testimonials,
.about-me,
.contact-info,
.contact-form {
    opacity: 0; /* Inicialmente invisible */
    animation: none; /* Sin animación por defecto */
}

.animate {
    animation: fadeInUp 1.5s ease forwards; /* Añadir animación al entrar */
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* para móviles */
  }
  
  .hero-left {
    margin-left:5%;
    flex: 1;
    text-align: left;
  }
  
  .hero-buttons {
    margin-left:-15%;
    margin-top: 20px;
    display: flex;
    gap: 0px; /* Espacio entre los botones */
    flex-wrap: wrap; /* Opcional: permite que se ajusten si no hay espacio */
  }
  
  
  .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hero-right img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  

.hero-background-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
  }
  
  .hero-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
  }
  
  .hero-background.active {
    opacity: 1;
    z-index: 1;
  }


/* Estilos del Modal */
.modal-form {
    display: none; /* Ocultar por defecto */
    position: fixed; /* Fijo para llenar toda la pantalla */
    z-index: 1; /* Asegúrate de que esté por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    background-color: rgba(0, 0, 0, 0.4); /* Fondo difuminado */
    backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px); 
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.modal-form .modal-content {
    background-color: #fefefe; /* Fondo blanco para el contenido */
    padding: 40px; /* Espaciado interior */
    border-radius: 8px; /* Bordes redondeados */
    width: 600px; /* Ancho del modal */
    max-width: 90%; /* Máximo 90% del ancho de la pantalla */
    max-height:150%;
    height: auto; /* Alto automático */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    position: relative; /* Relativo para posicionar elementos dentro */
}

.modal-content h2{
    margin-top:0%;
    font-size:120%;
    margin-bottom:-4%;
}


/* Botón de cierre dentro de la ventana modal */
.close-modal {
    background-color: var(--accent-color);; /* Color de fondo del botón */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Espaciado */
    cursor: pointer; /* Cursor de puntero */
    border-radius: 4px; /* Bordes redondeados */
    position: absolute; /* Posicionarlo en la esquina */
    top: 10px; /* Margen desde la parte superior */
    right: 10px; /* Margen desde la derecha */
    font-size: 14px; /* Tamaño de fuente */
}

.close-modal:hover {
    background-color: var(--primary-color); /* Color de fondo al pasar el ratón */
}

.modal-content textarea, input {
    background-color: #f0f0f0; /* Color de fondo gris claro */
    border: 1px solid #ccc; /* Borde gris claro */
    padding: 8px; /* Espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
    width: 100%; /* Ancho completo */
    resize: vertical; /* Permitir redimensionar verticalmente */
}

.modal-content input{
    padding: 1.5%;
}

/* Opcional: cambiar el color de fondo al enfocar */
.modal-content textarea, input:focus {
    background-color: #e0e0e0; /* Color de fondo más oscuro al enfocar */
    border-color: #888; /* Color de borde más oscuro al enfocar */
}

.modal-content .btn {
    display: block; /* El botón es un bloque para usar margin */
    margin: 0 auto; /* Centrar horizontalmente */
    padding:1.5%;
    width:40%;
    font-size:130%;
    margin-bottom:-7%;
    /* Agrega más estilos según sea necesario */
    text-align: center; /* Asegúrate de que el texto dentro del botón esté centrado */
}

/* Flecha para subir */
/* Estilo del botón "Subir arriba" */
.back-to-top {
    position: fixed;
    bottom: 12%;
    right: -0.5%;
    width: 4%;
    height: 4%;
    background-color: #002d4bc2;
    color: white;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #005680;
}

.comparativa-section{
    width: 90%;  /* Puedes ajustar a 1000px, 960px, etc. según tu diseño */
    margin: 60px auto;
    padding: 0 20px;
}

.table-comparativa table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    margin-top: 2rem;
    table-layout: fixed;
}

.table-comparativa th,
.table-comparativa td {
    padding: 14px;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 1.1rem;
    color:#576c81;
}

.table-comparativa th:first-child,
.table-comparativa td:first-child {
    text-align: left;
    width: 50%;
}

.concierge-col,
.table-comparativa th.concierge-col {
    background-color: rgba(4, 56, 109, 0.1);
    font-weight: bold;
    width: 20%;
}

/* Tradicional col to match Concierge width */
.table-comparativa th:last-child,
.table-comparativa td:last-child {
    width: 20%;
}

.table-comparativa th.concierge-col:first-child {
    border-top-left-radius: 12px;
}

.table-comparativa th.concierge-col {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.table-comparativa tbody tr:last-child td.concierge-col {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.icon-large {
    font-size: 1.6rem;
}

.text-green {
    color: rgb(51, 138, 109);
}

.text-red {
    color: rgb(255, 108, 108);
}

/* Cambiar color solo de las cabeceras */
.table-comparativa thead th {
    color: #002d5a; /* Azul oscuro, cambia si quieres otro tono */
    font-size: 1.4rem;
}

.table-comparativa thead th {
    padding-bottom: 3%; /* más espacio vertical */
}

.table-comparativa tbody td {
    padding-top: 16px;
    border-top: 1px solid #002d4b5e;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: #002D4B;
}

.checkbox {
    margin: 0;
    transform: scale(1.1);
}

.custom-asterisco {
    color: red;
    margin-left: 4px;
}

.service-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.9s ease, opacity 1.2s ease;
  opacity: 0;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #444;
}

.service-details.visible {
  max-height: 200px; /* Ajusta según contenido */
  opacity: 1;
}

.pricing-section {
    background-color: #e9eeeb;
    padding: 80px 20px 60px 20px;
    font-family: 'Segoe UI', sans-serif;
  }
  
  .pricing-table {
     margin-top: 10px; 
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    overflow: visible !important;
  }
  
  
  .pricing-card {
    background: #798a9c1e;
    border: 2px solid #002D4B; /* Borde azul oscuro */
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 30px 25px;
    width: 400px;
    text-align: center;
    transition: transform 0.3s;
  }
  
  .pricing-card:hover {
    transform: translateY(-8px);
  }
  
  .pricing-card h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #002D4B;
  }

 .pricing-card ul li {
  font-size: 1.15rem !important;/* O usa 14px, 13px, etc. */
}
  .price-box {
    margin-bottom: 10px;
  }
  
  .price-month, .price-year, .price-once {
    font-size: 35px;
    font-weight: bold;
    color:#2e7463;
    margin: 5px 0;
  }
  
  .price-month span, .price-year span {
    font-size: 14px;
    color: #555;
  }
  
  .divider {
    border: none;
    height: 2px;
    background: #1d2c28;
    margin: 20px 0;
  }
  
  .pricing-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-top: 10px;
  }
  
  .pricing-card ul li {
    padding: 10px 0;
    border-bottom: 1px solid #d6d6d6;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .check-icon {
    color: #0d5a47;
  }
  
  .price-or {
    font-weight: 500;
    color: #444;
    margin-top:-5%;
    margin-bottom:-5%;
  }

/* Asegúrate de que los enlaces tienen una transición suave */
.nav-links a, .nav-links2 a {
    position: relative;
    padding: 10px 10px;
    text-decoration: none;
    color: #ffffff; /* Cambia el color del texto si lo necesitas */
    transition: color 0.9s ease; /* Transición suave solo para el color */
}

/* Agrega el efecto de hover con recuadro */
.nav-links a:hover, .nav-links2 a:hover {
    color: #4e618b; /* Cambia el color del texto si lo deseas */
}

/* Creación del recuadro semi-transparente */
.nav-links a:hover::before, .nav-links2 a:hover::before {
    content: "";
    position: absolute;
    top: -5px;  /* Ajusta la posición superior para hacerlo más grande */
    left: -30px; /* Ajusta la posición izquierda para hacerlo más grande */
    right: -30px; /* Ajusta la posición derecha para hacerlo más grande */
    bottom: -5px; /* Ajusta la posición inferior para hacerlo más grande */
    background: rgba(29, 105, 192, 0.336); /* Fondo semi-transparente */
    border-radius: 5px; /* Bordes redondeados (opcional) */
    z-index: -1; /* Coloca el recuadro detrás del texto */

    /* Transición suave en tamaño y posición */
    transition: all 0.9s ease-in-out; /* Transición más suave en tamaño y posición */
}

.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    
}

.testimonial-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-item {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(29, 105, 192, 0);
    color: rgb(0, 0, 0);
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    z-index: 2;
    border-radius: 50%;
}

.carousel-btn.prev { left: -10px; }
.carousel-btn.next { right: -10px; }

.stars {
    color: #073870; /* Azul */
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.testimoniall-wrapper {
    position: relative;
    width: fit-content;
    margin-left:20%;
  }

  .reseñas-label {
    position: absolute;
    top: -20px;
    left: 30%;
    background-color: #629ead;
    color: rgb(255, 255, 255);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
  }
  

.testimoniall-card {
    background-color: #ffffff;
    padding: 1.2rem 1.5rem; /* ← Menos padding */
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    max-width: 380px;
    max-height:170px;
    text-align: left;
    margin-left:40%;
  }
  
  .testimoniall-card .stars {
    color: #f5a623;
    font-size: 1rem;         /* ← Ligeramente más pequeño */
    margin-bottom: 0.3rem;
  }
  
  .testimoniall-card .quote {
    font-style: italic;
    font-size: 0.8rem;      /* ← Más compacto */
    line-height: 1.4;
    color: #333333;
    margin: 0.3rem 0;
  }
  
  .testimoniall-card .author {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    color: #2aabb4;
  }
  
  footer {
    background-color:#002D4B;; /* Un tono oscuro similar al ejemplo */
    color: #fff;
    padding: 40px 20px;
    font-size: 0.9rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Diseño responsivo en columnas */
    gap: 30px;
}

.footer-section h3 {
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 2px solid #34495e;
    padding-bottom: 5px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #fff;
}

.location-input {
    display: flex;
    margin-bottom: 15px;
}

.location-input input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
    color: #333;
}

.location-input .select-wrapper {
    position: relative;
    background-color: #34495e;
    border-radius: 0 5px 5px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.location-input select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    color: #fff;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    flex-grow: 1;
}

.location-input svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    fill: #fff;
    pointer-events: none;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #34495e;
    text-align: center; /* ← esto centra el texto */
    display: block;     /* ← elimina el comportamiento de flexbox que separa */
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #fff;
}

.social-icons a {
    color: #fff;
    font-size: 1.2rem;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #ddd;
}

/* Estilos para los iconos de Font Awesome (asegúrate de tener la librería incluida) */
.fa-brands {
    font-size: 1.2rem;
}

.footer-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
}

.footer-logo {
    max-height: 50px;
    width: auto;
}

.footer-title {
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
}

.footer-divider {
    border: 0;
    height: 1.5px;
    background: #34495e;
    margin: 20px auto;
    width: 90%;
}

.search-container {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-icon {
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
}

.search-form {
    display: none;
    position: absolute;
    right: 0;
    top: 30px;
    background: white;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.search-form input {
    border: none;
    padding: 5px;
    font-size: 0.9rem;
    outline: none;
}

.search-container {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto;
  }
  
  #search-icon {
    font-size: 1.3rem;
    color: white;
    cursor: pointer;
    margin-left: 20px;
  }
  
  #search-input {
    width: 0;
    opacity: 0;
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 20px;
    margin-left: 10px;
    transition: width 0.4s ease, opacity 0.3s ease;
    background-color: white;
    color: #333;
  }
  
  #search-input.active {
    width: 220px;
    opacity: 1;
  }
  
  .seccion-testimonios-clientes {
    padding: 60px 0;
    background: rgb(221, 232, 236);
    text-align: center;
}

.seccion-testimonios-clientes .contenedor-testimonios {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cabecera-testimonios {
    margin-bottom: 40px;
}

.cabecera-testimonios h2 {
    color: #333;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.cabecera-testimonios .valoracion-general {
    color: #555;
    font-size: 1rem;
    margin-bottom: 15px;
}

.cabecera-testimonios {
    text-align: center;
    margin-bottom: 40px;
}

.cabecera-testimonios h2 {
    color: #333;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.valoracion-y-boton {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-top: 15px;
}

.valoracion-general {
    color: #555;
    font-size: 1rem;
}

.logo-empresa-testimonio {
    height: 20px;  /* Ajusta según el tamaño deseado */
    width: auto;
    margin-left:20%;
    vertical-align: middle;
  }
  

.cabecera-testimonios .estrellas-valoracion {
    color: #ffc107; /* Color amarillo para las estrellas */
    font-size: 1.2rem;
    margin-right: 5px;
}


.cabecera-testimonios .boton-dejar-opinion {
    background-color: #222; /* Color del botón como en la imagen */
    color: white;
    border: none;
    border-radius: 40px; /* Bordes ligeramente redondeados */
    padding: 12px 24px;
    font-size: 0.9rem; /* Tamaño de fuente ligeramente más pequeño */
    cursor: pointer;
    margin-bottom:15px;
    transition: background-color 0.3s ease;
}

.cabecera-testimonios .boton-dejar-opinion:hover {
    background-color: #555;
}

.deslizador-testimonios {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Permite el desplazamiento horizontal si hay muchos testimonios */
    padding-bottom: 20px; /* Espacio para la navegación si es necesario */
}

.tarjeta-testimonio {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-width: 300px; /* Ancho mínimo de cada tarjeta */
    text-align: left;
}

.tarjeta-testimonio .info-usuario-testimonio {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.tarjeta-testimonio .info-usuario-testimonio h3 {
    color: #333;
    font-size: 1.1rem;
    margin-right: 10px;
    margin-bottom: 0;
}

.tarjeta-testimonio .info-usuario-testimonio .tiempo-testimonio {
    color: #777;
    font-size: 0.9rem;
    margin-right: 10px;
}

.tarjeta-testimonio .info-usuario-testimonio .plataforma-testimonio i {
    color: #555;
    font-size: 1.2rem;
}

.tarjeta-testimonio .estrellas-testimonio {
    color: #ffc107;
    font-size: 1rem;
    margin-bottom: 10px;
}

.tarjeta-testimonio .texto-testimonio {
    color: #555;
    line-height: 1.6;
}

.tarjeta-testimonio .texto-testimonio a {
    color: #007bff;
    text-decoration: none;
}

.tarjeta-testimonio .texto-testimonio a:hover {
    text-decoration: underline;
}

.deslizador-testimonios .navegacion-deslizador {
    display: none; /* Ocultar la navegación por defecto si el desplazamiento es suficiente */
    justify-content: center;
    margin-top: 20px;
}

.deslizador-testimonios .navegacion-deslizador button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #777;
    cursor: pointer;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.deslizador-testimonios .navegacion-deslizador button:hover {
    color: #333;
}

/* Estilos para los iconos de redes sociales (asegúrate de tener la librería incluida) */
.fa-brands {
    font-size: 1rem;
}

.seccion-llamada-salud {
    background-color: #0749639f; /* Un verde azulado similar */
    color: white;
    padding: 50px 20px;
    text-align: center;
}

.contenedor-llamada-salud {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas más pequeñas */
}

.imagen-llamada {
    border-radius: 50%;
    overflow: hidden;
    max-width: 200px; /* Ajusta el tamaño según necesites */
    max-height: 200px;
}

.imagen-llamada img {
    width: 100%;
    height: auto;
    display: block;
}

.contenido-llamada {
    text-align: left; /* Alinea el texto a la izquierda en el lado derecho */
    max-width: 500px;
    
}

.contenido-llamada h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    line-height: 1.3;
}

.contenido-llamada p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align:justify;
}

.boton-llamada-gratis {
    background-color: white;
    color: #008080; /* Texto del color del fondo */
    border: none;
    border-radius: 8px;
    padding: 15px 30px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Por si lo usas como enlace */
    display: inline-block; /* Para que el padding funcione correctamente */
}

.boton-llamada-gratis:hover {
    background-color: #e0f2f2; /* Un tono más claro al hacer hover */
}

.registro-moderno .encabezado-registro {
   margin:0px 5%;
}

.registro-moderno .encabezado-registro h2 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.registro-moderno .encabezado-registro p {
    color: #777;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px; /* Espacio debajo del texto "No estás listo..." */
}

.registro-moderno .encabezado-registro .datos-reservados-encabezado {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #777;
}

.registro-moderno .encabezado-registro .tick-reservados {
    color: #28a745; /* Color verde para el tick */
    margin-right: 5px;
    font-size: 1rem;
    margin-left:25%;
}

.registro-moderno .encabezado-registro .logo-reservados {
    height: 1.2rem; /* Ajusta la altura del logo */
    margin-left: 5px;
}

/* Estilos para el formulario modal de opinión */
.modal-opinion {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-contenido {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    position: relative;
}

.cerrar-modal {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #333; /* Color del aspa */
}

.modal-contenido h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.modal-contenido label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-size: 0.9rem;
}

.modal-contenido input[type="text"] {
    width: calc(100% - 12px); /* Ajuste para el padding */
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}

.modal-contenido textarea {
    width: calc(100% - 12px); /* Ajuste para el padding */
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    min-height: 80px; /* Altura mínima para el área de texto */
}

.modal-contenido .estrellas-formulario {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row-reverse; /* Para que la estrella 5 esté a la izquierda */
    justify-content: flex-end; /* Alinea las estrellas a la derecha */
}

.modal-contenido .estrellas-formulario input[type="radio"] {
    display: none;
}

.modal-contenido .estrellas-formulario label {
    font-size: 24px;
    color: gray;
    cursor: pointer;
    margin-left: 5px; /* Espacio entre las estrellas */
}

.modal-contenido .estrellas-formulario input[type="radio"]:checked ~ label {
    color: gold;
}

.modal-contenido .enviar-opinion {
    background-color: #555; /* Color del botón "Enviar Opinión" */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Ancho completo del botón */
    box-sizing: border-box;
}

.modal-contenido .enviar-opinion:hover {
    background-color: #333;
}

/* Estilos para la sección "Tu Viaje Hacia el Bienestar" */
.tu-viaje-section {
    padding: 80px 20px;
    background: rgb(198, 209, 212);
}

.tu-viaje-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.tu-viaje-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
}

.tu-viaje-info {
    flex: 1 1 45%;
    padding-right: 20px;
}

.tu-viaje-info h2 {
    color: #002D4B;
    font-size: 2.5rem;
    margin-bottom: 30px;
    line-height: 1.2;
}

.pasos-bienestar {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.pasos-bienestar li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.numero-paso {
    background-color: #468dad;
    color: white;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0; /* Evita que se reduzca en layouts flex */
}

.info-paso h3 {
    color: #333;
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.info-paso p {
    color: #666;
    line-height: 1.6;
}

.sign-up-button {
    background-color: white;
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 8px; 
    padding: 15px 30px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.8s ease;
}

.sign-up-button:hover {
    background-color: #468dad;
    
}

.tu-viaje-ejemplo {
    flex: 1 1 40%;
    background-color: #e9ecef;
    padding: 30px;
    border-radius: 10px;
}

.tu-viaje-ejemplo h3 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.tu-viaje-ejemplo .ejemplo-detalle {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #555;
    text-align: justify;
}

.tu-viaje-ejemplo .ejemplo-detalle i {
    color: #468dad;
    margin-right: 10px;
    font-size: 1.1rem;
}

.tu-viaje-ejemplo .ejemplo-detalle span {
    font-weight: bold;
}

.tu-viaje-ejemplo .imagen-eric {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.tu-viaje-ejemplo .imagen-eric img {
    width: 100%;
    height: auto;
    display: block;
}

.precision-longevity-section {
    background: rgb(198, 209, 212);
    padding: 60px 0;
}

.precision-longevity-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.precision-longevity-section .text-content {
    padding: 0px;
}

.precision-longevity-section h2 {
    color: #004b59;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
}

.precision-longevity-section p {
    font-size: 17px;
    text-align: justify;
    color: #2e2e2e;
    line-height: 1.6;
}

.precision-longevity-section .venn-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.precision-longevity-section .venn-diagram svg {
    width: 100%;
    max-width: 550px;
    height: auto;
}

.precision-longevity-section .venn-diagram circle {
    fill: #fff;
    stroke: #47707d;
    stroke-width: 2;
}

.precision-longevity-section .venn-diagram text {
    fill: #004b59;
}

.precision-longevity-section .venn-description {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.precision-longevity-section .venn-item {
    text-align: left;
}

.precision-longevity-section .venn-item h4 {
    color: #004b59;
    font-size: 0.9em;
    margin-left:30%;
    margin-bottom: 0.3em;
}

.precision-longevity-section .venn-item p {
    color: #2e2e2e;
    font-size: 0.9em;
    margin-left:30%;
}

.precision-longevity-section .venn-diagram img {
    width: 100%;
    max-width: 550px;
    height: auto;
    display: block;
    margin-left:30%;
}

.billing-toggler {
    text-align: center;
    margin-bottom: 2rem;
  }

  .billing-toggler label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 500;
    font-size: 1.4rem;
    margin-left:6%;
  }

  .billing-toggler input[type="checkbox"] {
    appearance: none;
    width: 60px;
    height: 32px;
    background: #ccc;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
  }

  .billing-toggler input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
  }

  .billing-toggler input[type="checkbox"]:checked {
    background: #5b8a7e;
  }

  .billing-toggler input[type="checkbox"]:checked::before {
    transform: translateX(27px);
  }

  .billing-toggler .save {
    background: #def5ee;
    color: #1a7f5a;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-left: 0.3rem;
  }

  .price {
    font-size: 1.8rem;
    font-weight: bold;
  }

  .price span {
    font-weight: normal;
    font-size: 1rem;
    margin-left: 0.3rem;
  }

  .hidden {
    display: none !important;
  }  

  .services-flex {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 40px;
    flex-wrap: wrap; /* Para que se adapten en móviles */
  }
  
  .services-detail {
    flex: 1;
    max-width: 50%;
  }
  
  .services-detaill {
    flex: 1;
    max-width: 50%;
  }

  .map-section {
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top:-10%;
    margin-left:8%;
}

.map-content {
    flex: 1;
    max-width: 600px;
    text-align: left;
    padding: 15px;
}

.map-content h2 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.map-content p {
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

.map-image {
    flex: 1;
    max-width: 450px;
    height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.detalles-chequeos {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 60px;
  }
  
  .chequeo-item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .chequeo-item.invertido {
    flex-direction: row-reverse;
  }
  
  .chequeo-img img {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .chequeo-texto {
    flex: 1;
    min-width: 250px;
  }
  
  .chequeo-texto h3 {
    color: #002D4B;
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .chequeo-texto p {
    text-align: justify;
    font-size: 1rem;
    line-height: 1.6;
  }

  .imagen-extra-nueva{
    max-width: 450px; border-radius: 8px;
  }


  .language-selector {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    margin-left: 77%;
  }
  
  .language-selector img {
    width: 40px;
    height: 30px;
    transition: transform 0.3s ease;
  }
  
  .language-selector img:hover {
    transform: scale(1.1);
  }
  
  .language-dropdown {
    position: absolute;
    top: 110%;
    right: 20%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    gap: 10px;
  }
  
  .language-dropdown img {
    width: 28px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .language-dropdown img:hover {
    transform: scale(1.1);
  }
  
  .language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .language-selector {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-left: 77%;
    z-index: 200;
  }
  
  .language-arrow {
    color: white;
    font-size: 16px;
    transition: transform 0.3s ease;
    cursor: pointer;
  }
  
  .tooltip-toggle {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
  }
  
  .tooltip-trigger {
    font-weight: bold;
    color: red; 
    padding: 0 2px;
  }
  
  .tooltip-text {
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
    font-size: 0.9rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  
  /* Viñeta (triángulo) */
  .tooltip-text::after {
    content: '';
    position: absolute;
    font-size:700%;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }
  
  /* Mostrar tooltip con hover o .active */
  .tooltip-toggle:hover .tooltip-text,
  .tooltip-toggle.active .tooltip-text {
    opacity: 1;
    visibility: visible;
  }
  
  .extra-content {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.carousel-item{
    min-width: 250px;
    max-width: 300px; 
    height: 400px; 
    max-height: 540px;
    flex: 1 0 auto; 
    position: relative; 
    border-radius: 3px; 
    overflow: hidden; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.1); 
    background-size: cover; 
    background-position: center;
}

.carousel-item.expanded .extra-content {
  display: block;
}

.carousel-item-new{
    position: absolute; 
    top: 10px; 
    left: 77%; 
    background-color: #6293bb; 
    color: white; 
    font-size: 12px;  
    padding: 4px 10px; 
    border-radius: 4px; 
    z-index: 2;
}

.carousel-item-title{
    margin: 0 0 260px; 
    font-size: 24px; 
    font-weight: bold;
}

.linea-horizontal {
    display:none;
    width: 100%;
    height: 2px;
    background-color: #012f74; /* Puedes cambiar el color */
    margin-bottom: 20px; /* Espacio entre la línea y el título */
}

/* Estilos para las tarjetas de precios de chequeos */
.seccion-precios-chequeos {
    padding: 50px 0;
    background: rgba(226, 234, 236, 0.767);
}

.contenedor-tarjetas-precios {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre tarjetas */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap; /* Para que se apilen en móviles */
}

.tarjeta-precio {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    width: 350px; /* Ancho de la tarjeta */
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tarjeta-precio:hover {
    transform: translateY(-5px); /* Efecto al pasar el ratón */
}

.tarjeta-header {
    color: #fff;
    padding: 30px;
    text-align: center;
}

/* Colores diferenciadores */
.tarjeta-header.hombre {
    background-color: #6eafdb; /* Un azul grisáceo para hombre */
}

.tarjeta-header.mujer {
    background-color: #c984b4; /* Un morado suave para mujer */
}

.tarjeta-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
}

.tarjeta-header p {
    margin: 10px 0 0;
    font-size: 2rem;
    font-weight: 700;
}

.tarjeta-body {
    padding: 30px;
    flex-grow: 1; /* Para que el botón siempre esté abajo */
}

.tarjeta-body .precio {
    text-align: center;
    margin-bottom: 25px;
}

.tarjeta-body .monto {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
}

.tarjeta-body .iva {
    font-size: 0.9rem;
    color: #777;
    display: block;
}

.tarjeta-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tarjeta-body ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: #555;
    position: relative;
    padding-left: 25px;
}

/* Icono de check verde */
.tarjeta-body ul li::before {
    content: "\f00c"; /* Código de FontAwesome para check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:#0d5a47;
    position: absolute;
    left: 0;
}

.tarjeta-footer {
    padding: 20px 30px 30px;
    text-align: center;
}

.btn-mas-info {
    display: inline-block;
    background-color: transparent;
    border: 2px solid;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    color:#002D4B;
}

/* Colores de botón según tarjeta */
.hombre .btn-mas-info {
    color: #34495e;
    border-color: #34495e;
}
.hombre .btn-mas-info:hover {
    background-color: #34495e;
    color: #fff;
}

.mujer .btn-mas-info {
    color: #c984b4;
    border-color: #c984b4;
}
.mujer .btn-mas-info:hover {
    background-color: #c984b4;
    color: #fff;
}

.nota-precio-exclusivo {
    text-align: center;
    margin-top: 30px; /* Espacio respecto a las tarjetas */
    padding: 0 20px;
}

.nota-precio-exclusivo p {
    font-size: 0.9rem; /* Tamaño de letra más pequeño */
    color: #666; /* Color gris suave */
    font-style: italic; /* Opcional: cursiva para diferenciarlo */
    max-width: 800px;
    margin: 0 auto; /* Centrar el bloque de texto */
}

.nota-precio-exclusivo .resaltado {
    font-weight: bold;
    color: #002D4B; /* Usando el color azul oscuro que tienes en los botones */
}

/*Para ordenador */

@media (max-width: 1600px) {

    .logo {
        display: flex;
        align-items: center; /* Alinea verticalmente en el centro */
    }

    .hero h1 {
        font-family: var(--font-secondary);
        font-size: 4rem;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    }
    .hero p {
        font-size: 1.3rem;
        margin-bottom: 5rem;
        text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    }

    .links_barra_nav {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        gap: 10px;
        margin-left:20px;
    }

    .logo img {
        width: 5;
        margin-right: 10px;
        margin-left: -5px;
        height: auto;
    }
    
.logo h1{
    margin: 0;
    margin-right:5%;
    font-size:90%;
}

.logo h2{
    margin: 0; 
    font-weight:lighter;
    margin-left: 65px;
    font-size:14px;
}

.registro-moderno {
    padding: 40px 0;
    background: rgb(221, 232, 236);
    min-height: auto; /* Ajusta la altura según el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
}

.registro-moderno .container {
    background: #fff;
    padding: 40px;
    margin-top:5%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 580px; /* Ancho máximo del formulario */
}

.registro-1oderno .encabezado-registro {
    margin:0px 20px;
 }
 
 .registro-moderno .encabezado-registro h2 {
     color: #333;
     font-size: 1.6rem;
     margin-bottom: 15px;
 }
 
 .registro-moderno .encabezado-registro p {
     color: #777;
     font-size: 0.8rem;
     line-height: 1.5;
     margin-bottom: 15px; /* Espacio debajo del texto "No estás listo..." */
 }
 .registro-moderno .encabezado-registro .tick-reservados {
    color: #28a745; /* Color verde para el tick */
    margin-right: 5px;
    font-size: 1rem;
    margin-left:15%;
}

    nav ul {
        list-style: none;
        display: flex; /* Menú horizontal por defecto */
        justify-content: center; /* Centrar enlaces */
        align-items: center; /* Centrar verticalmente */
    }
   
    
    nav ul li a {
        color: white;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
    }
    
    nav ul li a:hover,
    nav ul li a.active {
        color: var(--accent-color);
    }
    
    .nav-links2 {
        display: none; /* Oculta los enlaces de la barra de navegación por defecto */
    }

    .nav-links a:hover::before, .nav-links2 a:hover::before {
        content: "";
        position: absolute;
        top: -5px;  /* Ajusta la posición superior para hacerlo más grande */
        left: -25px; /* Ajusta la posición izquierda para hacerlo más grande */
        right: -25px; /* Ajusta la posición derecha para hacerlo más grande */
        bottom: -5px; /* Ajusta la posición inferior para hacerlo más grande */
        background: rgba(29, 105, 192, 0.336); /* Fondo semi-transparente */
        border-radius: 5px; /* Bordes redondeados (opcional) */
        z-index: -1; /* Coloca el recuadro detrás del texto */
    
        /* Transición suave en tamaño y posición */
        transition: all 0.9s ease-in-out; /* Transición más suave en tamaño y posición */
    }
    
    
    #search-input {
        width: 0;
        opacity: 0;
        padding: 8px 12px;
        font-size: 12px;
        border: none;
        border-radius: 20px;
        margin-left: 10px;
        transition: width 0.4s ease, opacity 0.3s ease;
        background-color: white;
        color: #333;
      }
      
      #search-input.active {
        width: 150px;
        opacity: 1;
      }

    .registro .form-group {
        margin-left:25%;
        margin-right:25%;
    }

  
    
  
    footer .social-links {
        display: flex; /* Utiliza flexbox para alinear los elementos */
        flex-direction: column; /* Apila los elementos en columna */
        align-items: center; /* Centra todos los elementos dentro del contenedor */
    }
    
    footer .social-links a {
        color: var(--accent-color);
        font-size: 140%;
        margin:0; /* Espacio entre el texto y el enlace */
    }
    
    footer .social-links i {
        margin:0; /* Espacio entre el icono y el texto */
    }
    
    footer .social-links span {
        font-size: 140%;
    
    }

    /* Testimonios */


    
    .about-me h2 {
        text-shadow: 1px 1px 25px rgba(140, 130, 195, 0.7); /* Sombra del texto */
        margin-bottom: 70px;
        font-size: 40px;
        text-align: center;
        font-family: var(--font-secondary);
        color: var(--primary-color);
    }
    
    .profile-img {
        position: absolute;
        left: 15px;
        top: 19%;
        width: 300px;
        height: 520px;
        border-radius: 10px;
        object-fit: cover;
    }
    
    .profile-details {
        margin-left: 300px;
        margin-right: 25px;
        margin-top: 20px;
        height: 320px; /* Altura fija */
        flex: 1; /* Permitir que el contenedor se expanda */
        font-size: 1.3rem; /* Aumentar el tamaño de la fuente */
        text-align: justify; /* Alinear texto a la izquierda */
        display: flex; /* Usar flexbox para centrar contenido */
        flex-direction: column; /* Alinear elementos en columna */
        justify-content: center; /* Centrar verticalmente el contenido */
        align-items: flex-start; /* Alinear a la izquierda */
        padding: 0 20px; /* Padding para asegurar espacio a los lados */
    }

      /* Servicios Detallados */
    .services-detail {
        opacity: 0; /* El texto empieza invisible */
        animation: aparecer 2s ease forwards; /* Duración de 3 segundos */
        margin-top: 60px; 
        padding: 2em 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* Cambiamos para centrar todo el contenido */
        text-align: center;  /* Alineamos el texto al centro */
        margin-right:0%;
        margin-left:0%;
    }

.services-detail h2 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: center;
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.estilo1 {
    font-size:18px;
    margin-left:10px;
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
}


.estilo2{
    
    line-height: 0.8; /* Mejorar la legibilidad */
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
    margin-bottom: 40px;
    margin-top:30px;
    font-size: 16px;
}

.services-detail .service-detail-item {
    display: flex;
    align-items: flex-start; /* Alinear todos los elementos al inicio (izquierda) */
    margin-bottom: 1.5rem;
    text-align: left; /* Alinear el texto de cada item a la izquierda */
    
}

.services-detail .service-detail-item img {
    width: 80px;
    height: auto;
    margin-right: 1rem; /* Mantener el espacio entre la imagen y el texto */
}

.services-detail .service-detail-item h3 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: left; /* Alinear el título a la izquierda */
}

.services-detail .service-detail-item p {
    font-size: 0.6rem;
    text-align: justify; /* Justificar el texto de los items */
}
    
    .fa-grande{
        font-size: 8rem; /* Tamaño del icono en pantallas grandes */
    }

    .registro .form-group .label-checkbox{
        margin-left: 20%;
        position: block; /* O 'absolute' dependiendo de tu necesidad */
        top: 100%; /* Ajusta este valor según lo necesites */
    }
    .idioma {
        display: flex;
        align-items: center;
        top:93%;
        right: 3%;
    }

    .idioma-img{
       
        position: fixed; /* O absolute, dependiendo de tu necesidad */
        top:92.5%; /* Distancia desde la parte superior */
        right: 1%; /* Distancia desde la parte derecha */
        display: flex; /* Para alinear las banderas y el checkbox */
        align-items: center; /* Centra verticalmente */
        justify-content: center; /* Centrado horizontal */
        z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
        width: 3%;
    }
    
    .idioma span {
        margin: 0 1px; /* Espacio entre el texto y el switch */
    }
    
    /* Estilo del switch */
    .switch {
        position: relative;
        display: inline-block;
        width: 80%; /* Ancho del switch */
        height: 34px; /* Altura del switch */
        margin: 0 1px; /* Espacio alrededor del switch */
    }
    
    /* Ocultar el input checkbox */
    .check {
        opacity: 0; /* Ocultar el checkbox original */
        width: 0;
        height: 0;
    }
    
    /* Estilos del slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc; /* Color del switch cuando está apagado */
        transition: .4s; /* Transición suave */
        border-radius: 34px; /* Bordes redondeados */
    }
    
    /* El círculo del switch */
    .slider:before {
        position: absolute;
        content: "";
        height: 75%; /* Altura del círculo */
        width: 45%; /* Ancho del círculo */
        left: 4%; /* Posición inicial */
        bottom: 4px; /* Posición inicial */
        background-color: white; /* Color del círculo */
        transition: .4s; /* Transición suave */
        border-radius: 50%; /* Hacer que sea circular */
    }
    
    /* Estilo cuando el checkbox está marcado */
    .check:checked + .slider {
        background-color: #a7dfff; /* Color del switch cuando está encendido */
    }
    
    .check:checked + .slider:before {
        transform: translateX(26px); /* Mover el círculo hacia la derecha */
    }
    .terminos{
        margin-top:8%;
        display: block;           /* Asegura que cada elemento se muestre como bloque */
        margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
        text-align: center; 
        background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
    }
    
    .terminos .btn{
        background-color: rgba(104, 168, 223, 0.502);
    }
    
    .terminos .btn:hover {
        background-color: #002D4B;
    }
    
    .terminos h2{
        color:#002D4B;
        top:10%;
        margin-bottom: 4%;
    }
    
    .terminos p{
        text-align: justify;
        margin-left:10%;
        margin-right:10%;
        margin-bottom:1%;
    }

    .whatsapp-img {
        position: fixed; /* Para que se mantenga en un lugar fijo */
        bottom: 1%; /* Ajusta la distancia desde el fondo de la pantalla */
        left: -3%; /* Ajusta la distancia desde el borde izquierdo */
        cursor: pointer; /* Cambia el cursor al pasar por encima */
        z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
        transition: transform 0.2s; /* Animación suave al hacer hover */
    }

    .whatsapp-img:hover {
        bottom: 0%; /* Ajusta la distancia desde el fondo de la pantalla */
        left: -3%; /* Ajusta la distancia desde el borde izquierdo */
        width: 19%;
        height:auto;
    }


    .container_slide_services {
        position: relative; /* Cambiado de absolute a relative */
        margin-top: 15%; /* Agregado espacio arriba para que no se superponga */
        width: 100%;
        height: 500px; /* Ajustará su altura automáticamente al contenido */
        background: #f5f5f5; /* Fondo para diferenciar */
        box-shadow: 0 4px 7px #dbdbdd;
        overflow: hidden; /* Asegúrate de que no haya desbordamiento visual */
        padding: 2rem 0; /* Espaciado interno */
        display: flex;
        justify-content: center; /* Centra el contenido horizontalmente */
        align-items: center; /* Centra el contenido verticalmente */
        border-radius: 20px;
        margin-bottom:5%;
    }
    
    .container_slide_services .slide {
        display: flex;
        gap: 2%; /* Espaciado entre los elementos */
        justify-content: center;
        align-items: center;
    }
    .container_slide_services .slide .item{
        width:16%;
        height:20%;
        position:absolute;
        top:78%;
        transform: translate(0, -50%);
        border-radius: 20px;
        box-shadow: 0 30px 50px #505050;
        background-position: 50% 50%;
        background-size: cover;
        display:inline-block;
        transition:0.5s;
    }
    
    
    .slide .item:nth-child(1),
    .slide .item:nth-child(2){
        top:0;
        left:0;
        transform: translate(0,0);
        border-radius: 0;
        width:100%;
        height:100%;
    }
    
    .slide .item:nth-child(3){
        left:50%;
    }
    
    .slide .item:nth-child(4){
        left:70%;
    }
    
    .slide .item:nth-child(5){
        left:90%;
    }
    .slide .item:nth-child(n +6){
        left:calc(50%);
        opacity:0;
    }
    
    .item .content{
        position:absolute;
        top:25%;
        left:8%;
        width:90%;
        text-align:left;
        color: #ffffff;
        transform: translate(0, -50%);
        font-family:system-ui;
        display:none;
        
    }
    .slide .item:nth-child(2) .content{
        display:block;
    }
    
    .content .name{
        font-size:300%;
        text-transform:uppercase;
        font-weight: bold;
        opacity:0;
        animation: animate 1s ease-in-out 1 forwards;
    }
    
    .content .des{
        margin-top: 1%;
        margin-bottom:15%;
        opacity:0;
        color: #ffffff;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
    }
    
    @keyframes animate {
        from{
            opacity:0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
        to{
            opacity:1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    .buttonn{
        right:35%;
        width:100%;
        text-align:center;
        position:absolute;
        bottom:20px;
    }
    
    .buttonn button{
        background: #719bb1;
        color:#fff;
        width: 5%;
        height:35px;
        border-radius:8px;
        border:none;
        cursor:pointer;
        margin: 0 5px;
        border:1px solid #0000005e;
        transition:0.3s;
    }
    
    .buttonn button:hover{
        background: #002D4B;
        color:#fff;
    
    }
    
    /* Estilos generales para la sección Conócenos */
.conocenos-section {
    padding: 3rem 0;
    background: gris;
}

.contenttt {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas: una para las imágenes y otra para la información */
    gap: 1%; /* Espacio entre las columnas */
    align-items: center; /* Centra los elementos verticalmente */
}

.image-column2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos imágenes en fila */
    gap: 10px;
}

.rectangular-img {
    width: 100%; /* Asegura que las imágenes ocupen el 100% del ancho disponible en su contenedor */
    height: 40rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.second-image {
    margin-top: 30%; /* Da un pequeño espacio entre las dos imágenes */
}

.info-column {
    padding-left: 5%;
    font-size: 100%;
    color: #555;
}

.section-title h2 {
    font-size: 250%;
    font-weight: bold;
    color: #002D4B;
}

.section-title .sub-title {
    font-size: 160%;
    color: #002D4B;
    margin-bottom: 10%;
}

.section-title-nuevo h2 {
    font-size: 250%;
    font-weight: bold;
    color: #002D4B;
}

.section-title-nuevo .sub-title-nuevo {
    font-size: 160%;
    color: #002D4B;
    margin-bottom: 10%;
}

.info-box {
    margin-bottom: 5%;
}

.info-box p{
    color:#000000;
   font-size:120%;
}

ul.list-style {
    list-style: none;
    padding-left: 0;
}

ul.list-style li {
    display: flex;
    align-items: center;
    font-size: 120%;
    margin-bottom: 3%;
    color: #000000;
}

ul.list-style li i {
    color: #346d38;
    margin-right: 10%;
}

.name-tics-container {
    display: flex;
    align-items: center; /* Alinea la imagen pequeña y los tics */
    justify-content: flex-start; /* Hace que los elementos se alineen a la izquierda */
}

.vertical-divider {
    height: auto; /* La barra será tan alta como el contenido */
    width: 2px; /* Aumentamos el grosor de la línea divisoria */
    background-color: #ccc;
    margin: 0 10px; /* Reducimos el espacio entre la imagen y los tics */
    flex-grow: 2; /* Aumentamos el espacio disponible para los tics */
}

.name-column {
    text-align: center;
    margin-right: 15%; /* Espacio para alejar la imagen de los tics */
}

.profile-img-small {
    width: 150px; /* Ajusta el tamaño del círculo aquí (en píxeles o porcentaje) */
    height: 150px; /* Mantén la misma altura que el ancho para que sea un círculo */
    border-radius: 50%; /* Convierte el contenedor en un círculo */
    overflow: hidden; /* Asegura que la imagen no se desborde */
    border: 3px solid #002D4B; /* Bordes opcionales alrededor del círculo */
    margin-right: 10%; /* Espacio entre la imagen y los tics */
}

.profile-img-small img {
    width: 100%; /* La imagen llena todo el espacio disponible del contenedor */
    height: 130%; /* La imagen ocupa toda la altura del contenedor */
    object-fit: cover; /* Asegura que la imagen se recorte adecuadamente sin deformarse */
}

.name {
    margin-top:5%;
    font-size: 110%;
    font-weight: bold;
    color: #333;
}

.divider {
    margin-top: 5%;
    border: 0;
    border-top: 1px solid #002d4bab;
    width: 95%;
    margin-bottom: 3%;
}


.experience {
    display: flex;
    align-items: center;
    font-size: 150%; /* Tamaño de la fuente para el texto */
    margin-left:10%;
    color: #333; /* Color de texto */
}

.counter-wrapper {
    font-size: 500%; /* Tamaño del contador */
    font-weight: bold;
    margin-right: 5px; /* Espacio entre el contador y el texto */
    color: #002D4B; /* Color verde para el contador */
}

.counter {
    display: inline-block;
    font-size: 100%; /* Aseguramos que el contador se vea grande */
    font-weight: bold;
    color: #002D4B; /* Verde */
}

.image-column2 {
    display: flex;
    gap: 5%; /* Espacio entre las imágenes */
    justify-content: space-between;
    margin-bottom: 5%;
}

.rectangular-img {
    margin-left: 5%;
    flex: 1; /* Las imágenes ocupan el mismo espacio */
    height: 50rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    max-height: 100%; /* Limita la altura máxima a 100% de su contenedor */
    object-fit: cover; /* Recorta y ajusta la imagen para que se ajuste al contenedor */
    border-radius: 8px;
}

.second-image {
    margin-top: 25%; /* Da un pequeño espacio entre las dos imágenes */
}

.image-rect {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Hace que la altura se ajuste al contenedor */
    object-fit: cover; /* Mantiene la proporción y recorta la imagen */
}

.service-cards .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
   
    padding: 20%;
}

/* Contenedor de texto que se coloca sobre la primera imagen */
.articles article .overlay-text {
    position: absolute;
    top: 8%; /* Coloca el texto en el centro vertical de la imagen */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el texto para que esté perfectamente centrado */
    color: white; /* Color blanco por defecto */
    font-family: 'Open Sans', sans-serif; /* Fuente bonita */
    font-size: 180%; /* Tamaño de fuente mayor para hacerlo más visible */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Alineación centrada */
    padding: 20px 40px; /* Espaciado alrededor del texto, más grueso en el eje horizontal */
    z-index: 2; /* Asegura que el texto esté encima de la imagen */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    width:200%;
    /* Degradado de fondo: negro a transparente */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.719), rgba(0, 0, 0, 0)); /* Fondo que se desvanece hacia abajo */
    
    border-radius: 10px; /* Bordes redondeados para un acabado más suave */
}

/* Gradiente de desvanecimiento entre el fondo de la imagen y el fondo gris */
.service-cards .container::after {
    content: ''; /* Creamos el pseudo-elemento */
    position: absolute;
    bottom: 0; /* Lo colocamos al final de la sección */
    left: 0;
    width: 100%;
    height: 6%; /* Ajusta la altura según lo que necesites */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Gradiente de arriba (transparente) a abajo (blanco) */
}

 /* Estilo para los textos debajo de los artículos */
 .description {
    width:60%;
    text-align: center;
    margin-top: 5%;
    margin-left:10%;
    margin-bottom: 3%; /* Espacio entre el texto y el siguiente artículo */
}

.description p {
    font-size: 160%;
    color: #333;
}

.hero .btn {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color:white;
    border: 2px solid white;  
    color: rgb(0, 0, 0);
    padding: 1.2rem 4rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.4rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:2%;
    margin-right:-5%;
}

.hero .btn2 {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color:transparent;
    border: 2px solid white;  
    color: rgb(255, 255, 255);
    padding: 1.2rem 2rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.3rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:2%;
}


/* Cambiar color solo de las cabeceras */
.table-comparativa thead th {
    color: #002d5a; /* Azul oscuro, cambia si quieres otro tono */
    font-size: 1.5rem;
}
  
  .language-selector img {
    width: 36px;
    height: 26px;
    transition: transform 0.3s ease;
  }
  
  .language-selector img:hover {
    transform: scale(1.1);
  }
  
  .language-dropdown {
    position: absolute;
    top: 110%;
    right: 20%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    gap: 10px;
  }
  
  .language-dropdown img {
    width: 28px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .language-selector {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-left: 77%;
    z-index: 200;
  }


}
   
@media (max-width: 1300px) {
.nav-links2 .links_barra_nav{
    margin-left:250px;
    margin-right: 100px;
    display: flex;
    flex-direction: row;
    font-size:20px;
    height: 40px;
}


.links_barra_nav {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    gap: 10px;
    margin-left:30px;
}

.logo img {
    width: 150px;
    margin-right: 10px;
    margin-left: -5px;
    height: auto;
}

.logo h1{
margin: 0;
margin-right:0%;
font-size:80%;
}

.logo h2{
margin: 0; 
font-weight:lighter;
margin-left: 65px;
font-size:12px;
}

nav ul {
    list-style: none;
    display: flex; /* Menú horizontal por defecto */
    justify-content: center; /* Centrar enlaces */
    align-items: center; /* Centrar verticalmente */
}


nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--accent-color);
}

.nav-links2 {
    display: none; /* Oculta los enlaces de la barra de navegación por defecto */
}

#search-input {
    width: 0;
    opacity: 0;
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 20px;
    margin-left: 10px;
    transition: width 0.4s ease, opacity 0.3s ease;
    background-color: white;
    color: #333;
  }
  
  #search-input.active {
    width: 145px;
    opacity: 1;
  }

  .nav-links a:hover::before, .nav-links2 a:hover::before {
    content: "";
    position: absolute;
    top: -5px;  /* Ajusta la posición superior para hacerlo más grande */
    left: -20px; /* Ajusta la posición izquierda para hacerlo más grande */
    right: -20px; /* Ajusta la posición derecha para hacerlo más grande */
    bottom: -5px; /* Ajusta la posición inferior para hacerlo más grande */
    background: rgba(29, 105, 192, 0.336); /* Fondo semi-transparente */
    border-radius: 5px; /* Bordes redondeados (opcional) */
    z-index: -1; /* Coloca el recuadro detrás del texto */

    /* Transición suave en tamaño y posición */
    transition: all 0.9s ease-in-out; /* Transición más suave en tamaño y posición */
}
#search-icon {
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    margin-left: 20px;
  }

  .imagen-extra-nueva{
    max-width: 350px; border-radius: 8px;
  }
  
  .language-selector img {
    width: 33px;
    height: 23px;
    transition: transform 0.3s ease;
  }
  
  .language-selector img:hover {
    transform: scale(1.1);
  }
  
  .language-dropdown {
    position: absolute;
    top: 110%;
    right: 20%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    gap: 10px;
  }
  
  .language-dropdown img {
    width: 28px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
 
  
  .language-selector {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-left: 76%;
    z-index: 200;
  }
 
  .hero-buttons {
    margin-left:-12%;
    margin-top: 20px;
    display: flex;
    gap: 80px; /* Espacio entre los botones */
    flex-wrap: wrap; /* Opcional: permite que se ajusten si no hay espacio */
  }

    .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:3%;
  }
   
  .hero-left {
    margin-left:5%;
    margin-right:-5%;
    flex: 1;
    text-align: left;
    min-width:700px;
  }
  .pricing-section2{
    background-color: #c8d0e736 !important;
    margin-top:60px;
}

} 

/* Para pantallas más pequeñas (IPADS, TABLETS) */
@media (max-width: 1200px) {
    
     .pricing-section2{
    background-color: #c8d0e736 !important;
    margin-top:10px;
}

.billing-toggler2{
    margin-top:-120px;
}

.section-title33{
    margin-top:-120px !important;
     margin-bottom: 50px !important;
}

.service-descriptionn{
     margin: 0 auto 3%;  /* Esto centra el bloque horizontalmente */
    font-size: 100%;
    color: #444;
    max-width: 80%;
    margin-top:-30px;
    
    margin-bottom:60px;
    text-align: center; /* Centra el texto dentro del bloque */
    display: block;
}

    .logo {
        display: flex;
        align-items: center; /* Alinea verticalmente en el centro */
    }
    

    .hero{
        margin-top:3%;
        min-height:800px;
        background-size: cover;
        background-position: center;
    }

    .hero h1 {
        font-family: var(--font-secondary);
        font-size: 3.5rem;
        margin-top:20%;
        margin-left:0%;
        margin-right:0%;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    }
    .hero p {
        font-size: 1.3rem;
        margin-bottom: 3rem;
        text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    }

    .registro-moderno {
        padding: 40px 0;
        background: rgb(221, 232, 236);
        min-height: auto; /* Ajusta la altura según el contenido */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }
    
    .registro-moderno .container {
        background: #fff;
        padding: 40px;
        margin-top:5%;
        margin-right:5%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 550px; /* Ancho máximo del formulario */
    }
    
    .registro-1oderno .encabezado-registro {
        margin:0px 20px;
     }
     
     .registro-moderno .encabezado-registro h2 {
         color: #333;
         font-size: 1.6rem;
         margin-bottom: 15px;
     }
     
     .registro-moderno .encabezado-registro p {
         color: #777;
         font-size: 0.7rem;
         line-height: 1.5;
         margin-bottom: 15px; /* Espacio debajo del texto "No estás listo..." */
     }
     .registro-moderno .encabezado-registro .tick-reservados {
        color: #28a745; /* Color verde para el tick */
        margin-right: 5px;
        font-size: 0.5rem;
        margin-left:60px;
    }

    .registro-moderno .encabezado-registro .datos-reservados-encabezado {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        color: #777;
    }
    
.links_barra_nav {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    gap: 0px;
    margin-left:-20px;
}

.logo img {
    width: 90px;
    margin-right: 5px;
    margin-left: -25px;
    height: auto;
}

.logo h1{
margin: 0;
margin-right:0%;
font-size:60%;
}

.logo h2{
margin: 0; 
font-weight:lighter;
margin-left: 20px;
font-size:8px;
}

nav ul {
    list-style: none;
    display: flex; /* Menú horizontal por defecto */
    justify-content: center; /* Centrar enlaces */
    align-items: center; /* Centrar verticalmente */
}


nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--accent-color);
}

.nav-links2 {
    display: none; /* Oculta los enlaces de la barra de navegación por defecto */
}

#search-input {
    width: 0;
    opacity: 0;
    padding: 8px 12px;
    font-size: 9px;
    border: none;
    border-radius: 20px;
    margin-left: 0px;
    transition: width 0.4s ease, opacity 0.3s ease;
    background-color: white;
    color: #333;
  }
  
  #search-input.active {
    width: 120px;
    opacity: 1;
  }

  .nav-links a:hover::before, .nav-links2 a:hover::before {
    content: "";
    position: absolute;
    top: -1px;  /* Ajusta la posición superior para hacerlo más grande */
    left: -4px; /* Ajusta la posición izquierda para hacerlo más grande */
    right: -4px; /* Ajusta la posición derecha para hacerlo más grande */
    bottom: -1px; /* Ajusta la posición inferior para hacerlo más grande */
    background: rgba(29, 105, 192, 0.336); /* Fondo semi-transparente */
    border-radius: 5px; /* Bordes redondeados (opcional) */
    z-index: -1; /* Coloca el recuadro detrás del texto */

    /* Transición suave en tamaño y posición */
    transition: all 0.9s ease-in-out; /* Transición más suave en tamaño y posición */
}
#search-icon {
    font-size: 1rem;
    color: white;
    cursor: pointer;
    margin-left: 20px;
  }

 

    .registro .form-group {
        margin-left:25%;
        margin-right:25%;
    }

   
    .testimoniall-wrapper {
        position: relative;
        width: fit-content;
        margin-left:20%;
      }
    
      .reseñas-label {
        position: absolute;
        top: -20px;
        left: 30%;
        background-color: #629ead;
        color: rgb(255, 255, 255);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 10;
      }
      
    
    .testimoniall-card {
        background-color: #ffffff;
        padding: 1.2rem 1.5rem; /* ← Menos padding */
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
        max-width: 350px;
        max-height:140px;
        text-align: left;
        margin-left:40%;
      }
      
      .testimoniall-card .stars {
        color: #f5a623;
        font-size: 1rem;         /* ← Ligeramente más pequeño */
        margin-bottom: 0.3rem;
      }
      
      .testimoniall-card .quote {
        font-style: italic;
        font-size: 0.7rem;      /* ← Más compacto */
        line-height: 1.4;
        color: #333333;
        margin: 0.3rem 0;
      }
      
      .testimoniall-card .author {
        margin-top: 0.3rem;
        font-size: 0.8rem;
        color: #2aabb4;
      }
  
    footer .social-links {
        display: flex; /* Utiliza flexbox para alinear los elementos */
        flex-direction: column; /* Apila los elementos en columna */
        align-items: center; /* Centra todos los elementos dentro del contenedor */
    }
    
    footer .social-links a {
        color: var(--accent-color);
        font-size: 140%;
        margin:0; /* Espacio entre el texto y el enlace */
    }
    
    footer .social-links i {
        margin:0; /* Espacio entre el icono y el texto */
    }
    
    footer .social-links span {
        font-size: 140%;
    
    }

    /* Testimonios */
    .testimonial-slider {
        display: flex;
        transition: transform 0.5s ease;
    }
    
    .testimonial-item {
        min-width: 60%; /* Reducir el tamaño del item */
        box-sizing: border-box;
        padding: 15px; /* Reducir el padding */
        text-align: center;
        font-size: 0.9rem; /* Reducir el tamaño de la fuente */
    }
    
  
    
    /* Si necesitas ajustar el tamaño de las estrellas también */
    .stars {
        font-size: 1.2rem; /* Reducir el tamaño de las estrellas */
    }
    

    .about-me h2 {
        text-shadow: 1px 1px 25px rgba(140, 130, 195, 0.7); /* Sombra del texto */
        margin-bottom: 70px;
        font-size: 40px;
        text-align: center;
        font-family: var(--font-secondary);
        color: var(--primary-color);
    }
    
    .profile-img {
        position: absolute;
        left: 15px;
        top: 19%;
        width: 300px;
        height: 520px;
        border-radius: 10px;
        object-fit: cover;
    }
    
    .profile-details {
        margin-left: 300px;
        margin-right: 25px;
        margin-top: 20px;
        height: 320px; /* Altura fija */
        flex: 1; /* Permitir que el contenedor se expanda */
        font-size: 1.3rem; /* Aumentar el tamaño de la fuente */
        text-align: justify; /* Alinear texto a la izquierda */
        display: flex; /* Usar flexbox para centrar contenido */
        flex-direction: column; /* Alinear elementos en columna */
        justify-content: center; /* Centrar verticalmente el contenido */
        align-items: flex-start; /* Alinear a la izquierda */
        padding: 0 20px; /* Padding para asegurar espacio a los lados */
    }

      /* Servicios Detallados */
    .services-detail {
        opacity: 0; /* El texto empieza invisible */
        animation: aparecer 2s ease forwards; /* Duración de 3 segundos */
        margin-top: 30px; 
        padding: 2em 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* Cambiamos para centrar todo el contenido */
        text-align: center;  /* Alineamos el texto al centro */
        margin-right:-5%;
    }

.services-detail h2 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    line-height: 1; /* Mejorar la legibilidad */
    text-align: center;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.estilo1 {
    font-size:16px;
    margin-left:10px;
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
}


.estilo2{
    
    line-height: 1.5; /* Mejorar la legibilidad */
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
    margin-top:20px;
    margin-bottom: 20px;
    font-size: 14px;
}

.services-detail .service-detail-item {
    display: flex;
    align-items: flex-start; /* Alinear todos los elementos al inicio (izquierda) */
    margin-bottom: 1.5rem;
    text-align: left; /* Alinear el texto de cada item a la izquierda */
    
}

.services-detail .service-detail-item img {
    width: 80px;
    height: auto;
    margin-right: 1rem; /* Mantener el espacio entre la imagen y el texto */
}

.services-detail .service-detail-item h3 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: left; /* Alinear el título a la izquierda */
}

.services-detail .service-detail-item p {
    font-size: 1rem;
    text-align: justify; /* Justificar el texto de los items */
}
    
    .fa-grande{
        font-size: 8rem; /* Tamaño del icono en pantallas grandes */
    }

    .registro .form-group .label-checkbox{
        margin-left: 20%;
        position: block; /* O 'absolute' dependiendo de tu necesidad */
        top: 100%; /* Ajusta este valor según lo necesites */
    }
   
    .idioma {
        display: flex;
        align-items: center;
        top:19%;
        right: 0%;
    }

    .idioma-img{
       
        position: fixed; /* O absolute, dependiendo de tu necesidad */
        top:19%; /* Distancia desde la parte superior */
        right: 1%; /* Distancia desde la parte derecha */
        display: flex; /* Para alinear las banderas y el checkbox */
        align-items: center; /* Centra verticalmente */
        justify-content: center; /* Centrado horizontal */
        z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
        width: 3%;
    }
    
    .idioma span {
        margin: 0 12px; /* Espacio entre el texto y el switch */
    }
    
    /* Estilo del switch */
    .switch {
        position: relative;
        display: inline-block;
        width: 5.5rem; /* Ancho del switch */
        height: 35px; /* Altura del switch */
        margin: 0; /* Espacio alrededor del switch */
    }
    
    /* Ocultar el input checkbox */
    .check {
        opacity: 0; /* Ocultar el checkbox original */
        width: 0;
        height: 0;
    }
    
    /* Estilos del slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc; /* Color del switch cuando está apagado */
        transition: .4s; /* Transición suave */
        border-radius: 34px; /* Bordes redondeados */
    }
    
    /* El círculo del switch */
    .slider:before {
        position: absolute;
        content: "";
        height: 80%; /* Altura del círculo */
        width: 45%; /* Ancho del círculo */
        left: 10%; /* Posición inicial */
        bottom: 4px; /* Posición inicial */
        background-color: white; /* Color del círculo */
        transition: .4s; /* Transición suave */
        border-radius: 50%; /* Hacer que sea circular */
    }
    
    /* Estilo cuando el checkbox está marcado */
    .check:checked + .slider {
        background-color: #a7dfff; /* Color del switch cuando está encendido */
    }
    
    .check:checked + .slider:before {
        transform: translateX(26px); /* Mover el círculo hacia la derecha */
    }
    .terminos{
        margin-top:8%;
        display: block;           /* Asegura que cada elemento se muestre como bloque */
        margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
        text-align: center; 
        background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
    }
    
    .terminos .btn{
        background-color: rgba(104, 168, 223, 0.502);
    }
    
    .terminos .btn:hover {
        background-color: #002D4B;
    }
    
    .terminos h2{
        color:#002D4B;
        top:10%;
        margin-bottom: 4%;
    }
    
    .terminos p{
        text-align: justify;
        margin-left:10%;
        margin-right:10%;
        margin-bottom:1%;
    }

    .whatsapp-img {
        position: fixed; /* Para que se mantenga en un lugar fijo */
        bottom: 1%; /* Ajusta la distancia desde el fondo de la pantalla */
        left: -5%; /* Ajusta la distancia desde el borde izquierdo */
        width:20%;
        height:auto;
        cursor: pointer; /* Cambia el cursor al pasar por encima */
        z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
        transition: transform 0.2s; /* Animación suave al hacer hover */
    }
    .whatsapp-img:hover {
        bottom: 0%; /* Ajusta la distancia desde el fondo de la pantalla */
        left: -7%; /* Ajusta la distancia desde el borde izquierdo */
        width: 25%;
        height:auto;
    }

    .container_slide_services {
        position: relative; /* Cambiado de absolute a relative */
        margin-top: 10%; /* Agregado espacio arriba para que no se superponga */
        margin-left:10%;
        width: 95%;
        height: 400px; /* Ajustará su altura automáticamente al contenido */
        background: #f5f5f5; /* Fondo para diferenciar */
        box-shadow: 0 4px 7px #dbdbdd;
        overflow: hidden; /* Asegúrate de que no haya desbordamiento visual */
        padding: 2rem 0; /* Espaciado interno */
        display: flex;
        justify-content: center; /* Centra el contenido horizontalmente */
        align-items: center; /* Centra el contenido verticalmente */
        border-radius: 20px;
    }
    
    .container_slide_services .slide {
        display: flex;
        gap: 2%; /* Espaciado entre los elementos */
        justify-content: center;
        align-items: center;
    }
    .container_slide_services .slide .item{
        width:16%;
        height:20%;
        position:absolute;
        top:78%;
        transform: translate(0, -50%);
        border-radius: 20px;
        box-shadow: 0 30px 50px #505050;
        background-position: 50% 50%;
        background-size: cover;
        display:inline-block;
        transition:0.5s;
    }
    
    
    .slide .item:nth-child(1),
    .slide .item:nth-child(2){
        top:0;
        left:0;
        transform: translate(0,0);
        border-radius: 0;
        width:100%;
        height:100%;
    }
    
    .slide .item:nth-child(3){
        left:50%;
    }
    
    .slide .item:nth-child(4){
        left:70%;
    }
    
    .slide .item:nth-child(5){
        left:90%;
    }
    .slide .item:nth-child(n +6){
        left:calc(50%);
        opacity:0;
    }
    
    .item .content{
        position:absolute;
        top:20%;
        left:8%;
        width:90%;
        text-align:left;
        color: #ffffff;
        transform: translate(0, -50%);
        font-family:system-ui;
        display:none;
        
    }
    .slide .item:nth-child(2) .content{
        display:block;
    }
    
    .content .name{
        font-size:250%;
        margin-top:15%;
        text-transform:uppercase;
        font-weight: bold;
        opacity:0;
        animation: animate 1s ease-in-out 1 forwards;
    }
    
    .content .des{
        font-size:100%;
        margin-top: 1%;
        margin-bottom:15%;
        opacity:0;
        color: #ffffff;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
    }
    
    @keyframes animate {
        from{
            opacity:0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
        to{
            opacity:1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    .buttonn{
        right:35%;
        width:100%;
        text-align:center;
        position:absolute;
        bottom:20px;
    }
    
    .buttonn button{
        background: #719bb1;
        color:#fff;
        width: 5%;
        height:35px;
        border-radius:8px;
        border:none;
        cursor:pointer;
        margin: 0 5px;
        border:1px solid #0000005e;
        transition:0.3s;
    }
    
    .buttonn button:hover{
        background: #002D4B;
        color:#fff;
    }

    /* Estilos generales para la sección Conócenos */
.conocenos-section {
    padding: 3rem 0;
    background: gris;
}

.contenttt {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas: una para las imágenes y otra para la información */
    gap: 1%; /* Espacio entre las columnas */
    align-items: center; /* Centra los elementos verticalmente */
}

.image-column2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos imágenes en fila */
    gap: 10px;
}

.rectangular-img {
    width: 100%; /* Asegura que las imágenes ocupen el 100% del ancho disponible en su contenedor */
    height: 40rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.second-image {
    margin-top: 30%; /* Da un pequeño espacio entre las dos imágenes */
}

.info-column {
    padding-left: 5%;
    font-size: 100%;
    color: #555;
}

.section-title h2 {
    font-size: 220%;
    font-weight: bold;
    color: #002D4B;
}

.section-title .sub-title {
    font-size: 140%;
    color: #002D4B;
    margin-bottom: 10%;
}

.section-title-nuevo h2 {
    font-size: 220%;
    font-weight: bold;
    color: #002D4B;
}

.section-title-nuevo .sub-title-nuevo {
    font-size: 140%;
    color: #002D4B;
    margin-bottom: 10%;
}

.info-box p{
    color:#000000;
   font-size:110%;
}

ul.list-style {
    list-style: none;
    padding-left: 5%;
}

ul.list-style li {
    display: flex;
    align-items: center;
    font-size: 110%;
    margin-bottom: 3%;
    color: #000000;
}

.name-column {
    text-align: center;
    margin-right: 5%; /* Espacio para alejar la imagen de los tics */
}

.profile-img-small {
    width: 120px; /* Ajusta el tamaño del círculo aquí (en píxeles o porcentaje) */
    height: 120px; /* Mantén la misma altura que el ancho para que sea un círculo */
    border-radius: 50%; /* Convierte el contenedor en un círculo */
    overflow: hidden; /* Asegura que la imagen no se desborde */
    border: 3px solid #002D4B; /* Bordes opcionales alrededor del círculo */
    margin-right: 0%; /* Espacio entre la imagen y los tics */
}

.name {
    margin-top:5%;
    font-size: 100%;
    font-weight: bold;
    color: #333;
}

.experience {
    display: flex;
    align-items: center;
    font-size: 100%; /* Tamaño de la fuente para el texto */
    margin-left:10%;
    color: #333; /* Color de texto */
}

.counter-wrapper {
    font-size: 400%; /* Tamaño del contador */
    font-weight: bold;
    margin-right: 5px; /* Espacio entre el contador y el texto */
    color: #002D4B; /* Color verde para el contador */
}

.counter {
    display: inline-block;
    font-size: 100%; /* Aseguramos que el contador se vea grande */
    font-weight: bold;
    color: #002D4B; /* Verde */
}

.rectangular-img {
    margin-left: 5%;
    flex: 1; /* Las imágenes ocupan el mismo espacio */
    height: 50rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    max-height: 100%; /* Limita la altura máxima a 100% de su contenedor */
    object-fit: cover; /* Recorta y ajusta la imagen para que se ajuste al contenedor */
    border-radius: 8px;
}

.service-cards .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top:5%;
    padding: 10%;
}

.card-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom:10%;
}

.card {
    display: inline-block;
    text-align: center;
    background-color: rgb(36, 45, 114); /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier contenido que salga del borde */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.card:hover {
    transform: scale(1.05); /* Efecto de zoom */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
    cursor: pointer; /* Muestra el cursor pointer en hover */
}

/* Descripción debajo de las tarjetas */
.service-description {
    margin-bottom: 5%;
    font-size: 100%;
    color: #444;
    max-width: 100%;
}

/* Botón consultar otros servicios */
.consult-button .btn {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.consult-button .btn:hover {
    background-color: #005bb5;
}


.section-title2 {
    font-size: 250%;
    font-weight: bold;
    color: #002D4B;
    margin-bottom: 15%;
    margin-top:5%;
    text-align: center;
    text-transform: uppercase;
}

/* Contenedor de texto que se coloca sobre la primera imagen */
.articles article .overlay-text {
    position: absolute;
    top: 8%; /* Coloca el texto en el centro vertical de la imagen */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el texto para que esté perfectamente centrado */
    color: white; /* Color blanco por defecto */
    font-family: 'Open Sans', sans-serif; /* Fuente bonita */
    font-size: 120%; /* Tamaño de fuente mayor para hacerlo más visible */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Alineación centrada */
    padding: 20px 40px; /* Espaciado alrededor del texto, más grueso en el eje horizontal */
    z-index: 2; /* Asegura que el texto esté encima de la imagen */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    width:200%;
    /* Degradado de fondo: negro a transparente */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.719), rgba(0, 0, 0, 0)); /* Fondo que se desvanece hacia abajo */
    
    border-radius: 10px; /* Bordes redondeados para un acabado más suave */
}

.service-cards .container::after {
    content: ''; /* Creamos el pseudo-elemento */
    position: absolute;
    bottom: 0; /* Lo colocamos al final de la sección */
    left: 0;
    width: 100%;
    height: 3%; /* Ajusta la altura según lo que necesites */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Gradiente de arriba (transparente) a abajo (blanco) */
}

 /* Estilo para los textos debajo de los artículos */
 .description {
    width:60%;
    text-align: center;
    margin-top: 5%;
    margin-left:10%;
    margin-bottom: 3%; /* Espacio entre el texto y el siguiente artículo */
}

.description p {
    font-size: 110%;
    color: #333;
}

.hero .btn {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color:white;
    border: 2px solid white; 
    color: rgb(0, 0, 0);
    padding: 1.2rem 5rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.3rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:2.5%;
    margin-right: -5%;
}

.precision-longevity-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 20px;
    max-width: 950px;
    margin: 0 auto;
}

.precision-longevity-section h2 {
    color: #004b59;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px;
}

.precision-longevity-section p {
    font-size: 13px;
    text-align: justify;
    color: #2e2e2e;
    line-height: 1.6;
}


.precision-longevity-section .venn-item h4 {
    color: #004b59;
    font-size: 0.8em;
    margin-left:15%;
    margin-bottom: 0.3em;
}

.precision-longevity-section .venn-item p {
    color: #2e2e2e;
    font-size: 0.7em;
    margin-left:15%;
}

.precision-longevity-section .venn-diagram img {
    width: 100%;
    min-width: 400px;
    height: auto;
    display: block;
    margin-left:15%;
}

.hero .btn2 {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color:transparent;
    border: 2px solid white; 
    color: white;
    padding: 1.2rem 2rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.3rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:2.5%;
}


.more-info-button {
    width: 30%; /* El botón ocupa el 30% */
    text-align: right; /* Alinear el botón a la derecha */
    font-size:90%;
}

.table-comparativa table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    margin-top: 2rem;
    table-layout: fixed;
}

.table-comparativa th,
.table-comparativa td {
    padding: 14px;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 1rem;
    color:#576c81;
}

/* Cambiar color solo de las cabeceras */
.table-comparativa thead th {
    color: #002d5a; /* Azul oscuro, cambia si quieres otro tono */
    font-size: 1.2rem;
}
   
.language-selector img {
    width: 32px;
    height: 22px;
    transition: transform 0.3s ease;
  }
  
  .language-selector img:hover {
    transform: scale(1.1);
  }
  
  .language-dropdown {
    position: absolute;
    top: 110%;
    right: 20%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    gap: 10px;
  }
  
  .language-dropdown img {
    width: 28px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
 
  
  .language-selector {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-left: 75%;
    z-index: 200;
  }

    .hero-buttons {
    margin-left:-5%;
    margin-top: 20px;
    display: flex;
    gap: 60px; /* Espacio entre los botones */
    flex-wrap: wrap; /* Opcional: permite que se ajusten si no hay espacio */
  }

    .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:3%;
  }
   
  .hero-left {
    margin-left:5%;
    margin-right:-5%;
    flex: 1;
    text-align: left;
    min-width:600px;
  }
  
  .hero-content {
    margin-top:-10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* para móviles */
  }
  .contenedor-tarjetas-precios {
        gap: 30px; /* Reducimos el espacio entre tarjetas */
        padding: 0 15px;
    }

    .tarjeta-precio {
        width: 300px; /* ANCHO MUCHO MÁS DELGADO (Antes 350px) */
    }

    /* Reducimos rellenos y fuentes para compactar */
    .tarjeta-header {
        padding: 20px 15px;
    }

    .tarjeta-header h3 {
        font-size: 1rem;
    }

    .tarjeta-header p {
        font-size: 1.6rem;
        margin: 5px 0 0;
    }

    .tarjeta-body {
        padding: 20px 15px;
    }

    .tarjeta-body .precio {
        margin-bottom: 15px;
    }

    .tarjeta-body .monto {
        font-size: 2rem;
    }

    .tarjeta-body ul{
        margin-left:5%;
    }

    .tarjeta-body ul li {
        font-size: 0.9rem;
        padding: 8px 0 8px 30px;
    }

    .tarjeta-footer {
        padding: 15px 15px 25px;
    }

    .btn-mas-info {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}
    
@media (max-width: 1100px) {      
.nav-links2 .links_barra_nav{
    margin-left:50px;
    margin-right: 10%;
    display: flex;
    flex-direction: row;
    font-size:20px;
    height: 40px;
}


.testimoniall-wrapper {
    position: relative;
    width: fit-content;
    margin-left:0%;
  }

  .reseñas-label {
    position: absolute;
    top: -15px;
    left: 30%;
    background-color: #629ead;
    color: rgb(255, 255, 255);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
  }
  

.testimoniall-card {
    background-color: #ffffff;
    padding: 1.2rem 1.5rem; /* ← Menos padding */
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
    max-width: 350px;
    max-height:140px;
    text-align: left;
    margin-left:40%;
  }
  
  .testimoniall-card .stars {
    color: #f5a623;
    font-size: 1rem;         /* ← Ligeramente más pequeño */
    margin-bottom: 0.3rem;
  }
  
  .testimoniall-card .quote {
    font-style: italic;
    font-size: 0.6rem;      /* ← Más compacto */
    line-height: 1.4;
    color: #333333;
    margin: 0.3rem 0;
  }
  
  .testimoniall-card .author {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: #2aabb4;
  }

  .footer-title {
    font-size: 1.3rem;
    color: #fff;
    margin: 0;
}

    .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:3%;
  }
   
  .hero-left {
    margin-left:5%;
    margin-right:-5%;
    flex: 1;
    text-align: left;
    min-width:550px;
  }

}

@media (max-width: 1000px) {      
    .nav-links2 .links_barra_nav{
        margin-left:40px;
        margin-right: 20%;
        display: flex;
        flex-direction: row;
        font-size:20px;
        height: 40px;
    }
    .hero .btn {
        display: block;           /* Asegura que los botones sean elementos en bloque */
        background-color:white;
        border: 2px solid white; 
        color: rgb(0, 0, 0);
        padding: 1.2rem 4rem;     /* Aumenta el padding para un tamaño más llamativo */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.1rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
        transition: background-color 0.3s ease;
        text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        position: relative;
        overflow: hidden;
        width: fit-content;       /* El botón se ajusta al tamaño del texto */
        margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
        margin-bottom:2.5%;
        margin-right:-5%;
    }

    .hero .btn2 {
        display: block;           /* Asegura que los botones sean elementos en bloque */
        background-color:transparent;
        border: 2px solid white; 
        color: white;
        padding: 1.2rem 2rem;     /* Aumenta el padding para un tamaño más llamativo */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.1rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
        transition: background-color 0.3s ease;
        text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        position: relative;
        overflow: hidden;
        width: fit-content;       /* El botón se ajusta al tamaño del texto */
        margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
        margin-bottom:2.5%;
    }


    
    .precision-longevity-section .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 20px;
        max-width: 850px;
        margin: 0 auto;
    }
    
.precision-longevity-section h2 {
    color: #004b59;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.precision-longevity-section p {
    font-size: 13px;
    text-align: justify;
    color: #2e2e2e;
    line-height: 1.6;
}


.precision-longevity-section .venn-item h4 {
    color: #004b59;
    font-size: 0.8em;
    margin-left:30%;
    margin-bottom: 0.3em;
}

.precision-longevity-section .venn-item p {
    color: #2e2e2e;
    font-size: 0.7em;
    margin-left:30%;
}

.precision-longevity-section .venn-diagram img {
    width: 100%;
    min-width: 350px;
    height: auto;
    display: block;
    margin-left:30%;
}

.imagen-extra-nueva{
    max-width: 300px; border-radius: 8px;
  }
    
  .language-selector img {
    width: 30px;
    height: 20px;
    transition: transform 0.3s ease;
  }
  
  .language-selector img:hover {
    transform: scale(1.1);
  }
  
  .language-dropdown {
    position: absolute;
    top: 110%;
    right: 20%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    gap: 10px;
  }
  
  .language-dropdown img {
    width: 28px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
 
  
  .language-selector {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-left: 70%;
    z-index: 200;
  }

       .pricing-section2{
    background-color: #c8d0e736 !important;
    margin-top:10px;
}

.billing-toggler2{
    margin-top:-100px;
}

.section-title33{
    margin-top:-80px !important;
     margin-bottom: 50px !important;
}
 
    }

@media (max-width: 900px) {      
    .nav-links2 .links_barra_nav{
        margin-left:-30px;
        margin-right: 20%;
        display: flex;
        flex-direction: row;
        font-size:20px;
        height: 40px;
    }
    .hero .btn {
        display: block;           /* Asegura que los botones sean elementos en bloque */
        background-color:white;
        border: 2px solid white; 
        color: rgb(0, 0, 0);
        padding: 1.2rem 3.5rem;     /* Aumenta el padding para un tamaño más llamativo */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
        transition: background-color 0.3s ease;
        text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        position: relative;
        overflow: hidden;
        width: fit-content;       /* El botón se ajusta al tamaño del texto */
        margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
        margin-bottom:2.5%;
        margin-right:-5%;
    }
    .hero .btn2 {
        display: block;           /* Asegura que los botones sean elementos en bloque */
        background-color:transparent;
        border: 2px solid white; 
        color: white;
        padding: 1.2rem 1.5rem;     /* Aumenta el padding para un tamaño más llamativo */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
        transition: background-color 0.3s ease;
        text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        position: relative;
        overflow: hidden;
        width: fit-content;       /* El botón se ajusta al tamaño del texto */
        margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
        margin-bottom:2.5%;
    }

    .hero-left h1{
        font-size: 200%;
    }

    .hero-left p{
        font-size: 100%;
    }
    
  
    .precision-longevity-section .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        gap: 20px;
        max-width: 750px;
        margin: 0 auto;
    }
    
    .precision-longevity-section h2 {
        color: #004b59;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .precision-longevity-section p {
        font-size: 12px;
        text-align: justify;
        color: #2e2e2e;
        line-height: 1.6;
    }
    
    
    .precision-longevity-section .venn-item h4 {
        color: #004b59;
        font-size: 0.8em;
        margin-left:20%;
        margin-bottom: 0.3em;
    }
    
    .precision-longevity-section .venn-item p {
        color: #2e2e2e;
        font-size: 0.7em;
        margin-left:20%;
    }
    
    .precision-longevity-section .venn-diagram img {
        width: 100%;
        min-width: 300px;
        height: auto;
        display: block;
        margin-left:20%;
    }
    
    .testimoniall-wrapper {
        position: relative;
        width: fit-content;
        margin-left:-5%;
      }
    
      .reseñas-label {
        position: absolute;
        top: -15px;
        left: 30%;
        background-color: #629ead;
        color: rgb(255, 255, 255);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.6rem;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 10;
      }
      
    
    .testimoniall-card {
        background-color: #ffffff;
        padding: 1.2rem 1.5rem; /* ← Menos padding */
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
        max-width: 350px;
        max-height:140px;
        text-align: left;
        margin-left:40%;
      }
      
      .testimoniall-card .stars {
        color: #f5a623;
        font-size: 1rem;         /* ← Ligeramente más pequeño */
        margin-bottom: 0.3rem;
      }
      
      .testimoniall-card .quote {
        font-style: italic;
        font-size: 0.7rem;      /* ← Más compacto */
        line-height: 1.4;
        color: #333333;
        margin: 0.3rem 0;
      }
      
      .testimoniall-card .author {
        margin-top: 0.3rem;
        font-size: 0.8rem;
        color: #2aabb4;
      }

      .registro-moderno {
        padding: 40px 0;
        background: rgb(221, 232, 236);
        min-height: auto; /* Ajusta la altura según el contenido */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }
    
    .registro-moderno .container {
        background: #fff;
        padding: 40px;
        margin-top:5%;
        margin-right:2%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 550px; /* Ancho máximo del formulario */
    }
    
    .registro-1oderno .encabezado-registro {
        margin:0px 20px;
     }
     
     .registro-moderno .encabezado-registro h2 {
         color: #333;
         font-size: 1.5rem;
         margin-bottom: 15px;
     }
     
     .registro-moderno .encabezado-registro p {
         color: #777;
         font-size: 0.7rem;
         line-height: 1.5;
         margin-bottom: 15px; /* Espacio debajo del texto "No estás listo..." */
     }
     .registro-moderno .encabezado-registro .tick-reservados {
        color: #28a745; /* Color verde para el tick */
        margin-right: 5px;
        font-size: 0.8rem;
        margin-left:0px;
    }

    .registro-moderno .encabezado-registro .datos-reservados-encabezado {
        display: flex;
        align-items: center;
        font-size: 0.7rem;
        color: #777;
    }

    .service-descriptionn{
     margin: 0 auto 3%;  /* Esto centra el bloque horizontalmente */
    font-size: 80%;
    color: #444;
    max-width: 80%;
    margin-top:-40px;
    margin-bottom:40px;
    text-align: center; /* Centra el texto dentro del bloque */
    display: block;
}

    .language-selector {
        display:none;
       }
     

    .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:3%;
  }
   
  .hero-left {
    margin-left:5%;
    margin-right:-7%;
    flex: 1;
    text-align: left;
    min-width:450px;
  }
  
  .hero-content {
    margin-top:-10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* para móviles */
  }

    }

/*Para MOVILES */
@media (max-width: 800px) {
    header {
        background-color: var(--primary-color);
        color: white;
        padding: 7%;
        height:14%;
        position: fixed; /* Mantener la barra de navegación en la parte superior */
        top: 0; /* Alinear al tope de la página */
        width: 100%; /* Ocupar todo el ancho */
        z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
    }
    .registro-moderno {
        flex-direction: column !important;
      }
    
      .encabezado-registro {
        order: -1;
        text-align: center;
        margin-bottom: 10px;
      }
    nav ul{
        margin: 0 0; /* Reduce el espaciado entre enlaces */
    }

    nav ul li a {
        font-size: 70%; /* Disminuye el tamaño de la fuente */
    }

    .hero {
        margin-top: 16%; /* Espacio para que no se superponga la barra de navegación */
        min-height:740px;
    }

    .hero h1 {
        font-family: var(--font-secondary);
        font-size:330%;
        margin-top:30%;
        margin-bottom: 7%;
        margin-left:0%;
        margin-right:0%;
        text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        line-height:130%;
    }

    .hero .h1-movil{
        font-size: 65%;
    }
    .hero p {
        font-size: 110%;
        margin-bottom:10%;
        margin-left:5%;
        margin-right: 5%;
        text-shadow: 2px 2px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    }
    
    .imagen-extra-nueva{
       display:none;
      }
    .registro-moderno {
        padding: 40px 0;
        background: rgb(221, 232, 236);
        min-height: auto; /* Ajusta la altura según el contenido */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
        margin-left:-6%;
    }
    
    .registro-moderno .container {
        background: #fff;
        padding: 40px;
        margin-top:10%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 700px; /* Ancho máximo del formulario */
    }

    
.registro-moderno h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 1.7rem;
}

.registro-1oderno .encabezado-registro {
    margin:0px 0px;
 }
 
 .registro-moderno .encabezado-registro h2 {
     color: #333;
     font-size: 1.4rem;
     margin-bottom: 15px;
     margin-left:30px;
 }
 
 .registro-moderno .encabezado-registro p {
     color: #777;
     font-size: 0.8rem;
     line-height: 1.5;
     margin-left:20px;
     margin-right:-10px;
     margin-bottom: 15px; /* Espacio debajo del texto "No estás listo..." */
 }
 .registro-moderno .encabezado-registro .tick-reservados {
    color: #28a745; /* Color verde para el tick */
    margin-right: 5px;
    font-size: 0.8rem;
    margin-left:80px;
}

.registro-moderno .encabezado-registro .datos-reservados-encabezado {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #777;
}

.registro-form .checkbox-label .terms-text  {
    font-size: 0.8rem;
}

.registro-form input[type="text"],
.registro-form input[type="email"],
.registro-form input[type="tel"],
.registro-form input[type="date"],
.registro-form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.7rem;
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho */
}

.registro-form label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
    font-size: 0.7rem;
}

    .hero .btn {
        display: block;           /* Asegura que los botones sean elementos en bloque */
        background-color:white;
        border: 2px solid white; 
        color: rgb(0, 0, 0);
        padding: 1rem 3rem;   /* Aumenta el padding para un tamaño más llamativo */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
        transition: background-color 0.3s ease;
        text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        position: relative;
        overflow: hidden;
        width: fit-content;       /* El botón se ajusta al tamaño del texto */
        margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
        margin-bottom:7%;
        margin-left:5%;
    }

    .hero .btn2 {
        display: block;           /* Asegura que los botones sean elementos en bloque */
        background-color:transparent;
        border: 2px solid white; 
        color: white;
        padding: 1rem 1.1rem;   /* Aumenta el padding para un tamaño más llamativo */
        text-decoration: none;
        border-radius: 5px;
        font-size: 1rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
        transition: background-color 0.3s ease;
        text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
        position: relative;
        overflow: hidden;
        width: fit-content;       /* El botón se ajusta al tamaño del texto */
        margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
        margin-bottom:7%;
        margin-left:-15%;
    }
    .footer-title {
        font-size: 0.8rem;
        color: #fff;
        margin: 0;
    }
      .hero-left h1{
        margin-right:0%;
        font-size: 255%;
    }

       .hero-left h1 small{
        font-size: 45% !important;
    }

    .hero-left p{
        font-size: 90%;
        margin-bottom:25%;
    }
    

    .testimoniall-wrapper {
        position: relative;
        width: fit-content;
        margin-right:5%;
      }
    
      .reseñas-label {
        position: absolute;
        top: -10px;
        left: 30%;
        background-color: #629ead;
        color: rgb(255, 255, 255);
        padding: 0px 5px;
        border-radius: 8px;
        font-size: 0.6rem;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        z-index: 10;
      }
      
    
    .testimoniall-card {
        background-color: #ffffff;
        padding: 0.5rem 0.4rem; /* ← Menos padding */
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
        max-width: 500px;
        max-height:200px;
        text-align: left;
        margin-left:40%;
      }
      
      .testimoniall-card .stars {
        color: #f5a623;
        font-size: 0.7rem;         /* ← Ligeramente más pequeño */
        margin-bottom: 0.3rem;
      }
      
      .testimoniall-card .quote {
        font-style: italic;
        font-size: 0.6rem;      /* ← Más compacto */
        line-height: 1.4;
        color: #333333;
        margin: 0.3rem 0;
      }
      
      .testimoniall-card .author {
        margin-top: 0.3rem;
        font-size: 0.6rem;
        color: #2aabb4;
      }
    
    .menu-container{
        display: block; /* Muestra el ícono de menú en pantallas pequeñas */      
        position:absolute;
    }

    .menu-icon {
        display: block; /* Muestra el ícono de menú en pantallas pequeñas */
        position:absolute;  
        font-size: 350%; /* Ajusta el tamaño del ícono */
        margin-top:-25%;
        right:10%;
        color: #ffffff; /* Color inicial del icono */
        transition: color 0.3s ease; /* Transición suave para el efecto hover */
    }

    .menu-icon:hover {
        color: #75a8df; /* Color al pasar el ratón */
        cursor: pointer; /* Cambia el cursor para indicar que es interactivo */
    }

    .precision-longevity-section .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        padding: 0 20px;
        margin-bottom:-12%;
      }
    
      .precision-longevity-section .text-content {
        max-width: 600px;
      }
    
      .precision-longevity-section .venn-diagram img {
        max-width: 100%;
        margin-left:0%;
        height: auto;
        margin-bottom:-5%;
      }
    
      .precision-longevity-section .venn-description {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0;
      }
    
      .precision-longevity-section .venn-item {
        text-align: center;
        margin: 0;
        max-width: 300px;
      }
    
      .precision-longevity-section .venn-item h4,
      .precision-longevity-section .venn-item p {
        margin-left: 0;
      }

      .precision-longevity-section h2 {
        color: #004b59;
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .precision-longevity-section p {
        font-size: 10px;
        text-align: center;
        color: #2e2e2e;
        line-height: 1.6;
        margin-left:10%;
        margin-right:10%;
    }
    
    .precision-longevity-section h4 {
        color: #004b59;
        font-size: 2.5em;
        margin-bottom: 0.3em;
    }
    
    .precision-longevity-section .venn-item h4{
        font-size:1.3rem;
    }
    .precision-longevity-section .venn-item p {
        margin-left:10%;
        font-size:0.8rem;
    }
  
    .precision-longevity-section .venn-diagram img {
        width: 75%;
        min-width: 200px;
        height: auto;
        display: block;
    }

    .menu-image{
        width: 60%;
        margin-top:15%;
        margin-left: -5%;
    }

    .modal-opinion {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: -13%;
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-top:180px;
        background-color: rgba(0,0,0,0.5);
    }



.modal-contenido {
    background-color: white;
    margin: 20% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    position: relative;
}


    .nav-links, .nav-links2 {
        display: none; /* Ocultar por defecto */
        padding: 0; /* Asegúrate de que no hay padding */
        margin: 0; /* Asegúrate de que no hay margin */
    }

    .nav-links2.active {
        display: flex;
        flex-direction: column; /* Añade esta línea para apilar verticalmente */
        position: absolute;
        top: 100%; /* Esto mantiene el menú justo debajo del nav */
        left: 0;
        background-color: var(--primary-color);
        width: 100%;
        z-index: 999; /* Asegúrate de que esté por encima de todo */
    }

    .nav-links2 .links_barra_nav{
        margin-left:20%;
        font-size:90%;
        padding: 2%; /* Sin padding adicional */
    }

    .nav-links2 .links_barra_nav li {
        margin: 0 10px; /* Ajusta el margen lateral entre cada enlace */
    }
   
    .fa-footer{
        font-size: 110%; /* Tamaño del icono en pantallas grandes */
    }

   .search-container{
    display:none;
   }
   
   .confirmacion h2{
    margin-top:10%;
    } 

   .cabecera-testimonios .boton-dejar-opinion {
    background-color: #222; /* Color del botón como en la imagen */
    color: white;
    border: none;
    border-radius: 40px; /* Bordes ligeramente redondeados */
    padding: 10px 20px;
    font-size: 0.8rem; /* Tamaño de fuente ligeramente más pequeño */
    cursor: pointer;
    margin-bottom:15px;
    transition: background-color 0.3s ease;
}


    .contact-item {
        display:flex;
        /* Utiliza flexbox para alinear icono y texto */
        align-items: center; /* Alinea verticalmente el icono y el texto */
        flex-direction: row;
        margin-bottom: 10px; /* Espaciado entre cada elemento de contacto */
    }
    
    footer .social-links {
        display: flex; /* Utiliza flexbox para alinear los elementos */
        flex-direction: column; /* Apila los elementos en columna */
        align-items: center; /* Centra todos los elementos dentro del contenedor */
    }
    
    footer .social-links a {
        color: var(--accent-color);
        font-size: 100%;
        margin:0 /* Espacio entre el texto y el enlace */
    }
    
    footer .social-links i {
        margin:0; /* Espacio entre el icono y el texto */
    }
    
    footer .social-links span {
        font-size: 100%;
    }
    
    .testimonials h2 {
        font-size:130%;
        margin-bottom: 4rem;
        font-family: var(--font-secondary);
        color: var(--primary-color);
    }

    .about-me{
        margin-top:4%;
    
        min-height:0px;
    }
/* Sobre Mí */
.about-me {
    margin-top:17%;
    background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
    padding: 15% 0;
}


    .about-me h2 {
        margin-top:3%;
        text-shadow: 1px 1px 25px rgba(140, 130, 195, 0.463); /* Sombra del texto */
        margin-bottom: 3%;
        font-size: 200%;
        text-align: center;
        font-family: var(--font-secondary);
        color: var(--primary-color);
    }

    .about-me .profile {
        margin-bottom:20%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        
    }

    
.seccion-llamada-salud {
    background-color: #0749639f; /* Un verde azulado similar */
    color: white;
    padding: 40px 0px;
    text-align: center;
}

.contenedor-llamada-salud {
    max-width: 100%;
    margin: 0 auto;
    margin-left:0%;
    margin-right:0%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas más pequeñas */
}

.imagen-llamada {
    border-radius: 50%;
    overflow: hidden;
    max-width: 190px; /* Ajusta el tamaño según necesites */
    max-height: 190px;
}

.imagen-llamada img {
    width: 90%;
    height: auto;
    display: block;
    margin-left:5%;
}

.contenido-llamada {
    text-align: left; /* Alinea el texto a la izquierda en el lado derecho */
    max-width: 250px;
    text-align:justify;
}

.contenido-llamada h2 {
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.3;
    margin-left:-10%;
    margin-right:-10%;
}

.contenido-llamada p {
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 30px;
    margin-left:-10%;
    margin-right:-10%;
}

.boton-llamada-gratis {
    background-color: white;
    color: #008080; /* Texto del color del fondo */
    border: none;
    border-radius: 8px;
    padding: 15px 30px;
    font-size: 0.8rem;
    margin-left:15%;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none; /* Por si lo usas como enlace */
    display: inline-block; /* Para que el padding funcione correctamente */
}

.boton-llamada-gratis:hover {
    background-color: #e0f2f2; /* Un tono más claro al hacer hover */
}
    
    
    .profile-img {
        position: absolute;
        left: 0%;
        top: 40%;
        width: 57%;
        height: 60%;
        border-radius: 10px;
        object-fit: cover;
    }
    
    .profile-details {
        margin-left: 53%;
        margin-right: 0%;
        margin-top: 12%;
        font-size: 75%; /* Aumentar el tamaño de la fuente */
        text-align: justify;  /* Alinear texto a la izquierda */
        display: flex; /* Usar flexbox para centrar contenido */
        flex-direction: column; /* Alinear elementos en columna */
        justify-content: center; /* Centrar verticalmente el contenido */
        align-items: flex-start; /* Alinear a la izquierda */
        padding: 0 20px; /* Padding para asegurar espacio a los lados */
    }

    .profile-details p {
        margin: 5% 0; /* Espaciado entre párrafos */
        max-width: 100%; /* Asegurar que ocupen todo el ancho del contenedor */
        width: 100%; /* Asegurar que todos los párrafos tengan el mismo ancho */
        box-sizing: border-box; /* Incluir padding y border en el ancho total */
    }

    /* Servicios Detallados */
    .services-detail {
        opacity: 0; /* El texto empieza invisible */
        animation: aparecer 2s ease forwards; /* Duración de 3 segundos */
        margin-top:18%; 
        padding: 2em 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* Cambiamos para centrar todo el contenido */
        text-align: center;  /* Alineamos el texto al centro */
        max-width: 1000px; /* Establecer un ancho máximo para todo el contenido */
        margin-right:-5%;
        margin-left:0%;
    }

.services-detail h2 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: center;
    font-size: 140%;
    margin-top: 20px;
    margin-bottom: 30px;
    max-width:100%;
}

.estilo1 {
    font-size:80%;
    margin-left:0%;
    margin-right:0%;
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
}


.estilo2{
    
    line-height: 1.5; /* Mejorar la legibilidad */
    margin: 0 auto; /* Centramos el bloque, pero el texto se alinea a la izquierda */
    text-align: justify; /* Justificar el texto para que termine alineado al borde */
    margin-bottom: 8%;
    margin-top:20px;
    font-size: 80%;
}

.services-detail .service-detail-item {
    display: flex;
    align-items: flex-start; /* Alinear todos los elementos al inicio (izquierda) */
    margin-bottom: 1.5rem;
    text-align: left; /* Alinear el texto de cada item a la izquierda */
    
}

.services-detail .btn {
   
    font-size: 130%;
 
}

.services-detail .service-detail-item img {
    width: 80px;
    height: auto;
    margin-right: 1rem; /* Mantener el espacio entre la imagen y el texto */
}

.services-detail .service-detail-item h3 {
    font-family: var(--font-secondary);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: left; /* Alinear el título a la izquierda */
}

.services-detail .service-detail-item p {
    font-size: 1rem;
    text-align: justify; /* Justificar el texto de los items */
}

.featured-services {
    padding: 3rem 0;
    background: rgb(221, 232, 236);
}

.featured-services h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-family: var(--font-secondary);
    color: var(--primary-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
}

.service-item {
    background-color: var(--secondary-color);
    padding: 1rem;
    border-radius: 10px;
    margin:1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fa-grande{
    font-size: 6rem; /* Tamaño del icono en pantallas grandes */
}
/* Estilos del Modal */
.modal-form {
    display: none; /* Ocultar por defecto */
    position: fixed; /* Fijo para llenar toda la pantalla */
    z-index: 1; /* Asegúrate de que esté por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 120%; /* Alto completo */
    background-color: rgba(0, 0, 0, 0.4); /* Fondo difuminado */
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px);
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}  

.modal-content{
    margin-top:-15%;
}

.modal-content .btn{

    margin-left:28%;
}

.modal-content h3{
    margin-top: 4%;
    font-size:100%;
}

.modal-content ul{
    font-size:95%;
}

.contact-info{
    margin-top:24%;
}

.contact-info h2 {

    margin-left:4%;
    margin-right:4%;
    text-shadow: 1px 1px 25px rgba(140, 130, 195, 0.463); /* Sombra del texto */
    margin-top:7%;
    margin-bottom: 3%; 
    font-size: 160%;
    font-weight: bold;
    font-family: var(--font-secondary);
    color: var(--primary-color);
}

.contact-info p{
    margin-left:10%;
    margin-right:13%;
   font-size: 100%;
   margin-bottom: 10%;
}

.contact-info ul {
    list-style: none;
    max-width: 90%;
    margin: auto;
    margin-bottom: 6%;
}

.contact-info .btn{
    margin-top:7%;
    max-width:60%;
}

.contact-info ul li {
    background-color: var(--secondary-color);
    padding: 5%;
    margin-bottom: 9%;
    border-radius: 5px;
    font-size:120%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-info ul li a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-info ul li a:hover {
    text-decoration: underline;
}

.registro{
    padding: 5% 0;
    margin-top: 25%; /* Asegúrate de que haya suficiente espacio arriba */
    background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
    min-height:1000px;
}

.registro h2{
    margin-top: 15%; 
}

.registro .form-group{
    margin-left:10%;
    margin-right:10%;
}
   
.detalles-chequeos h2 {
    margin-top:22%;
    margin-bottom:3%;
    font-size: 250%;
    color: #002D4B;
}
   
.detalles-chequeos .detalles-lista {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 800px;
    margin-left:8%;
}
   
.detalles-chequeos .detalles-lista li {
     margin: 5% 0;
     font-size: 110%;
}
   
.idioma {
    display: flex;
    align-items: center;
    top:93%;
    right:-7%;
}

.idioma-img{
   
    position: fixed; /* O absolute, dependiendo de tu necesidad */
    top:93%; /* Distancia desde la parte superior */
    right: 1.5%; /* Distancia desde la parte derecha */
    display: flex; /* Para alinear las banderas y el checkbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centrado horizontal */
    z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
    width: 8%;
}

.idioma span {
    margin: 0 10%; /* Espacio entre el texto y el switch */
}

/* Estilo del switch */
.switch {
    position: relative;
    display: inline-block;
    width: 4.8rem; /* Ancho del switch */
    height: 30px; /* Altura del switch */
    margin: 0 15px; /* Espacio alrededor del switch */
}

/* Ocultar el input checkbox */
.check {
    opacity: 0; /* Ocultar el checkbox original */
    width: 0;
    height: 0;
}

/* Estilos del slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Color del switch cuando está apagado */
    transition: .4s; /* Transición suave */
    border-radius: 34px; /* Bordes redondeados */
}

/* El círculo del switch */
.slider:before {
    position: absolute;
    content: "";
    height: 80%; /* Altura del círculo */
    width: 40%; /* Ancho del círculo */
    left: 10%; /* Posición inicial */
    bottom: 4px; /* Posición inicial */
    background-color: white; /* Color del círculo */
    transition: .4s; /* Transición suave */
    border-radius: 50%; /* Hacer que sea circular */
}

/* Estilo cuando el checkbox está marcado */
.check:checked + .slider {
    background-color: #a7dfff; /* Color del switch cuando está encendido */
}

.check:checked + .slider:before {
    transform: translateX(26px); /* Mover el círculo hacia la derecha */
}

.terminos{
    margin-top:8%;
    display: block;           /* Asegura que cada elemento se muestre como bloque */
    margin: 0 auto;           /* Esto centrará el elemento horizontalmente */
    text-align: center; 
    background: linear-gradient(to bottom, white, rgba(104, 168, 223, 0.502));
}

.terminos .btn{
    background-color: rgba(104, 168, 223, 0.502);
}

.terminos .btn:hover {
    background-color: #002D4B;
}

.terminos h2{
    color:#002D4B;
    margin-top:-5%;
    margin-bottom: 4%;
}

.terminos p{
    text-align: justify;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:1%;
}

.whatsapp-img {
    position: fixed; /* Para que se mantenga en un lugar fijo */
    bottom: 1%; /* Ajusta la distancia desde el fondo de la pantalla */
    left: -8%; /* Ajusta la distancia desde el borde izquierdo */
    width:35%;
    height:auto;
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    transition: transform 0.2s; /* Animación suave al hacer hover */
}
.whatsapp-img:hover {
    bottom: 0%; /* Ajusta la distancia desde el fondo de la pantalla */
    left: -10%; /* Ajusta la distancia desde el borde izquierdo */
    width: 40%;
    height:auto;
}
.checkup-item {
    width:100%; /* Ocupa el 45% del contenedor en pantallas medianas */
}

.our-checkups .btnn {
   
    font-size: 50%;
   
}



.container_slide_services {
    position: relative; /* Cambiado de absolute a relative */
    margin-top: -20%; /* Agregado espacio arriba para que no se superponga */
    width: 110%;
    height: 350px; /* Ajustará su altura automáticamente al contenido */
    background: #f5f5f5; /* Fondo para diferenciar */
    box-shadow: 0 4px 7px #dbdbdd;
    overflow: hidden; /* Asegúrate de que no haya desbordamiento visual */
    padding: 2rem 0; /* Espaciado interno */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    border-radius: 20px;
    margin-left:0%;
    margin-right:0%;
}

.container_slide_services .slide {
    display: flex;
    gap: 2%; /* Espaciado entre los elementos */
    justify-content: center;
    align-items: center;
}
.container_slide_services .slide .item{
    width:17%;
    height:20%;
    position:absolute;
    top:78%;
    transform: translate(0, -50%);
    border-radius: 8px;
    box-shadow: 0 30px 50px #505050;
    background-position: 50% 50%;
    background-size: cover;
    display:inline-block;
    transition:0.5s;
}


.slide .item:nth-child(1),
.slide .item:nth-child(2){
    top:0;
    left:0;
    transform: translate(0,0);
    border-radius: 0;
    width:100%;
    height:100%;
}

.slide .item:nth-child(3){
    left:50%;
}

.slide .item:nth-child(4){
    left:70%;
}

.slide .item:nth-child(5){
    left:90%;
}
.slide .item:nth-child(n +6){
    left:calc(50%);
    opacity:0;
}

.item .content{
    position:absolute;
    top:25%;
    left:8%;
    width:90%;
    text-align:left;
    color: #ffffff;
    transform: translate(0, -50%);
    font-family:system-ui;
    display:none;
    
}
.slide .item:nth-child(2) .content{
    display:block;
}

.content .name{
    font-size:250%;
    text-transform:uppercase;
    font-weight: bold;
    opacity:0;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .des{
    font-size:80%;
    margin-top: 0%;
    margin-bottom:15%;
    opacity:0;
    color: #ffffff;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.services-flex {
    flex-direction: column;
  }

  .services-detail,
  .services-detaill {
    width: 100%;      
    max-width: 100%;  
  }

@keyframes animate {
    from{
        opacity:0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }
    to{
        opacity:1;
        transform: translate(0);
        filter: blur(0);
    }
}

.cabecera-testimonios h2 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.buttonn{
    right:10%;
    width:150%;
    text-align:center;
    position:absolute;
    bottom:20px;
}

.buttonn button{
    background: #719bb1;
    color:#fff;
    width: 5%;
    height:35px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    margin: 0 5px;
    border:1px solid #0000005e;
    transition:0.3s;
}

.buttonn button:hover{
    background: #002D4B;
    color:#fff;
}


/*FAQ*/
.faq {
    padding: 5% 0;
    background: 
        linear-gradient(to bottom, 
            rgba(240, 240, 240, 1) 0%, 
            rgba(240, 240, 240, 0.626) 30%),  /* Gradiente suave en la parte superior */
        linear-gradient(to top, 
            rgba(224, 224, 224, 1) 0%, 
            rgba(224, 224, 224, 0) 30%),  /* Gradiente suave en la parte inferior */
        radial-gradient(circle, #07426d, #337a8e);
        width: 90%;  /* Establecer un ancho menor para .faq */
        margin: 0 auto;
        background-image: url(../images/fondo_servicios.jpg)
}

.faq .section-title {
    text-align: center;  /* Centrado del título */
    background-color: #002D4B;
    color: #ffffff;
    font-size: 130%;
    margin-bottom: 10%;
    width: 90%; /* Ancho del título, puede ajustarse según lo que desees */
    margin-left: 28%; /* Centrado del título con el 60% de ancho */
    margin-right: 20%; /* Centrado del título con el 60% de ancho */
}

.faq-question {
    font-size: 110%;
    font-weight: 600;
    color: #002D4B;
    cursor: pointer;
    background-color: #d4d2d2; /* Fondo gris */
    padding: 2% 3%; /* Reducción del padding vertical */
    margin-bottom: -15%; /* Menor espacio entre preguntas */
    border-radius: 3%;
    transition: font-size 0.3s ease; /* Transición suave para el aumento del tamaño */
}

/* Efecto hover para aumentar el tamaño de la letra */
.faq-question:hover {
    font-size: 120%; /* Aumenta el tamaño de la fuente */
    color: #005f7f; /* Cambia el color al pasar el ratón (opcional) */
}

.faq-answer {
    font-size: 100%;
    margin-top: 20%;
    color: #333;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 5%;
    height: 0; /* Inicialmente, la altura es 0 */
    opacity: 0; /* Inicialmente, está oculta */
    overflow: hidden; /* Evita que el contenido sobresalga */
    transition: height 0.5s ease, opacity 0.5s ease; /* Transiciones suaves */
}

.question-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 70px;
    margin-right:15%;
    border: 5px solid #002D4B;
    border-radius: 50%;
    position: relative;
    animation: rotate-left 3s infinite linear; /* Cambié la animación a "rotate-left" */
}

.question-symbol {
    font-size: 400%;
    color: #002D4B;
    position: absolute;
    font-weight: bold;
}

/* Mas info */
.more-info-content {
    background-color: #002D4B;
    display: flex;
    justify-content: space-between; /* Separar el texto y el botón */
    align-items: center;
    padding: 4% 3%; /* Añade más padding superior e inferior */
}

.more-info-text {
    width: 60%; /* El texto ocupa el 70% */
    text-align: left;
}

/* Aseguramos que la animación funcione correctamente en el botón */
.more-info-button a {
    position: relative;
    display: inline-block;
    padding: 5% 8%;
    font-size: 80%;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(to left top, #164699 50%, #174fae 50%);
    border: none;
    outline: none;
    transition: all 0.5s;
    overflow: hidden;  /* Borde redondeado */
}


/* Borde superior */
.more-info-button a span:nth-child(1) {
    height: 3px;
    width: 200px;
    top: 0;
    left: -200px;
    border-top-right-radius: 30px;  /* Ajustamos el radio del borde */
    border-bottom-right-radius: 30px;
    animation: span1 2s ease-out infinite;
    animation-delay: 0.5s;
}

.back-to-top {
    position: fixed;
    bottom: 12%;
    right: -1%;
    width: 12%;
    height: 6%;
}

/* Estilos generales para la sección Conócenos */
.conocenos-section {
    padding: 3rem 0;
    background: gris;
}

.contenttt {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas: una para las imágenes y otra para la información */
    gap: 1%; /* Espacio entre las columnas */
    align-items: center; /* Centra los elementos verticalmente */
}

.image-column2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos imágenes en fila */
    gap: 10px;
}

.rectangular-img {
    width: 100%; /* Asegura que las imágenes ocupen el 100% del ancho disponible en su contenedor */
    height: 40rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.second-image {
    margin-top: 30%; /* Da un pequeño espacio entre las dos imágenes */
}

.info-column {
    padding-left: 5%;
    margin-right:4%;
    font-size: 80%;
    color: #555;
}

.section-title h2 {
    font-size: 280%;
    font-weight: bold;
    color: #002D4B;
}

.section-title .sub-title {
    font-size: 180%;
    color: #002D4B;
    margin-bottom: 10%;
}

.section-title-nuevo h2 {
    font-size: 180%;
    font-weight: bold;
    color: #002D4B;
}

.section-title-nuevo .sub-title-nuevo {
    font-size: 90%;
    color: #002D4B;
    margin-bottom: 10%;
}


.info-box {
    margin-bottom: 5%;
}

.info-box p{
    color:#000000;
    text-align: justify;
   font-size:100%;
}

ul.list-style {
    list-style: none;
    padding-left: 0;
}

ul.list-style li {
    display: flex;
    align-items: center;
    font-size: 100%;
    margin-bottom: 3%;
    color: #000000;
}

ul.list-style li i {
    color: #346d38;
    margin-right: 10%;
}

.name-tics-container {
    display: flex;
    align-items: center; /* Alinea la imagen pequeña y los tics */
    justify-content: flex-start; /* Hace que los elementos se alineen a la izquierda */
}

.vertical-divider {
    height: auto; /* La barra será tan alta como el contenido */
    width: 2px; /* Aumentamos el grosor de la línea divisoria */
    background-color: #ccc;
    margin: 0 10px; /* Reducimos el espacio entre la imagen y los tics */
    flex-grow: 2; /* Aumentamos el espacio disponible para los tics */
}

.name-column {
    text-align: center;
    margin-right: 5%; /* Espacio para alejar la imagen de los tics */
}

.profile-img-small {
    width: 65px; /* Ajusta el tamaño del círculo aquí (en píxeles o porcentaje) */
    height: 65px; /* Mantén la misma altura que el ancho para que sea un círculo */
    border-radius: 50%; /* Convierte el contenedor en un círculo */
    overflow: hidden; /* Asegura que la imagen no se desborde */
    border: 3px solid #002D4B; /* Bordes opcionales alrededor del círculo */
    margin-right: 10%; /* Espacio entre la imagen y los tics */
}

.profile-img-small img {
    width: 100%; /* La imagen llena todo el espacio disponible del contenedor */
    height: 130%; /* La imagen ocupa toda la altura del contenedor */
    object-fit: cover; /* Asegura que la imagen se recorte adecuadamente sin deformarse */
}

.name {
    margin-top:5%;
    font-size: 90%;
    font-weight: bold;
    color: #333;
}

.divider {
    margin-top: 5%;
    border: 0;
    border-top: 1px solid #002d4bab;
    width: 95%;
    margin-bottom: 3%;
}


.experience {
    display: flex;
    align-items: center;
    font-size: 75%; /* Tamaño de la fuente para el texto */
    margin-left:10%;
    color: #333; /* Color de texto */
}

.counter-wrapper {
    font-size: 300%; /* Tamaño del contador */
    font-weight: bold;
    margin-right: 5px; /* Espacio entre el contador y el texto */
    color: #002D4B; /* Color verde para el contador */
}

.counter {
    display: inline-block;
    font-size: 100%; /* Aseguramos que el contador se vea grande */
    font-weight: bold;
    color: #002D4B; /* Verde */
}

.image-column2 {
    display: flex;
    gap: 5%; /* Espacio entre las imágenes */
    justify-content: space-between;
    margin-bottom: 5%;
}

.rectangular-img {
    margin-left: 5%;
    flex: 1; /* Las imágenes ocupan el mismo espacio */
    height: 40rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    max-height: 100%; /* Limita la altura máxima a 100% de su contenedor */
    object-fit: cover; /* Recorta y ajusta la imagen para que se ajuste al contenedor */
    border-radius: 8px;
}

.second-image {
    margin-top: 50%; /* Da un pequeño espacio entre las dos imágenes */
    display:none;
}

.image-rect {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Hace que la altura se ajuste al contenedor */
    object-fit: cover; /* Mantiene la proporción y recorta la imagen */
}

.service-cards .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top:20%;
    padding: 10%;
}

.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom:10%;
}

.card {
    display: inline-block;
    text-align: center;
    background-color: rgb(36, 45, 114); /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier contenido que salga del borde */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.card:hover {
    transform: scale(1.05); /* Efecto de zoom */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
    cursor: pointer; /* Muestra el cursor pointer en hover */
}


/* Descripción debajo de las tarjetas */
.service-description {
    margin-bottom: 5%;
    font-size: 100%;
    color: #444;
    max-width: 100%;
}

/* Botón consultar otros servicios */
.consult-button .btn {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #0066cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.consult-button .btn:hover {
    background-color: #005bb5;
}

.section-title2 {
    font-size: 200%;
    font-weight: bold;
    color: #002D4B;
    margin-bottom: 15%;
    margin-top:30%;
    text-align: center;
    text-transform: uppercase;
}



/* Estilo de los artículos */
.articles article {
    position: relative;
    width: 35%; /* Ajusta el tamaño de los artículos en la fila */
    margin-bottom: 10%; /* Espacio entre los artículos */
    margin-right: -5%; /* Espacio entre los artículos (si hay más de uno en una fila) */
    margin-left:-0%;
    transition: all .3s ease;
    overflow: hidden; /* Asegura que nada se salga del artículo */
}


/* Contenedor de texto que se coloca sobre la primera imagen */
.articles article .overlay-text {
    position: absolute;
    top: 7%; /* Coloca el texto en el centro vertical de la imagen */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajusta el texto para que esté perfectamente centrado */
    color: white; /* Color blanco por defecto */
    font-family: 'Open Sans', sans-serif; /* Fuente bonita */
    font-size: 80%; /* Tamaño de fuente mayor para hacerlo más visible */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para mejorar la legibilidad */
    text-align: center; /* Alineación centrada */
    padding: 20px 40px; /* Espaciado alrededor del texto, más grueso en el eje horizontal */
    z-index: 2; /* Asegura que el texto esté encima de la imagen */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    width:200%;
    /* Degradado de fondo: negro a transparente */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.719), rgba(0, 0, 0, 0)); /* Fondo que se desvanece hacia abajo */
    
    border-radius: 10px; /* Bordes redondeados para un acabado más suave */
}

.service-cards .container::after {
    content: ''; /* Creamos el pseudo-elemento */
    position: absolute;
    bottom: 0; /* Lo colocamos al final de la sección */
    left: 0;
    width: 100%;
    height: 2%; /* Ajusta la altura según lo que necesites */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Gradiente de arriba (transparente) a abajo (blanco) */
}

 /* Estilo para los textos debajo de los artículos */
 .description {
    max-width:350px;
    text-align: justify;
    margin-top: 0%;
    margin-right:0%;
    margin-bottom: 10%; /* Espacio entre el texto y el siguiente artículo */
}

.description p {
    font-size: 80%;
    color: #333;
}



.comparativa-section{
    width: 100%;  /* Puedes ajustar a 1000px, 960px, etc. según tu diseño */
    margin: 0 auto;
    padding: 50px 20px;
}


.table-comparativa table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    margin-top: 1rem;
    table-layout: fixed;
}



.table-comparativa th.concierge-col:first-child {
    border-top-left-radius: 12px;
}

.table-comparativa th.concierge-col {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.table-comparativa tbody tr:last-child td.concierge-col {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}




.table-comparativa th,
.table-comparativa td {
    padding: 5px;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 0.7rem;
    color:#576c81;
}

.icon-large {
    font-size: 1.1rem;
}

/* Cambiar color solo de las cabeceras */
.table-comparativa thead th {
    color: #002d5a; /* Azul oscuro, cambia si quieres otro tono */
    font-size: 0.85rem;
}

.table-comparativa th:first-child,
.table-comparativa td:first-child {
    text-align: left;
    width: 40%;
}

.concierge-col,
.table-comparativa th.concierge-col {
    background-color: rgba(4, 56, 109, 0.1);
    font-weight: bold;
    width: 25%;
}

/* Tradicional col to match Concierge width */
.table-comparativa th:last-child,
.table-comparativa td:last-child {
    width: 25%;
}

.billing-toggler {
    text-align: center;
    margin-bottom: 2rem;
  }

  .billing-toggler label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 500;
    font-size: 1rem;
    margin-left:6%;
  }

  .billing-toggler input[type="checkbox"] {
    appearance: none;
    width: 75px;
    height: 32px;
    background: #ccc;
    border-radius: 15px;
    margin-left:10%;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
  }

  .billing-toggler input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
  }

  .billing-toggler input[type="checkbox"]:checked {
    background: #004e64;
  }

  .billing-toggler input[type="checkbox"]:checked::before {
    transform: translateX(1.75rem);
  }

  .billing-toggler .save {
    background: #def5ee;
    color: #1a7f5a;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-left: 0.3rem;
  }

  .map-section {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top:-20%;
    margin-bottom:-30%;
    margin-left:-3%;
    margin-right:-5%;
}

.map-content {
    flex: 1;
    max-width: 600px;
    text-align: left;
    padding: 0px;
}

.map-content h2 {
    color: #2c3e50;
    font-size: 1rem;
    margin-bottom: 10px;
}

.map-content p {
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

.map-image {
    flex: 1;
    max-width: 450px;
    height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

  .language-selector {
   display:none;
  }


  .tooltip-toggle {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
  }
  
  .tooltip-trigger {
    font-weight: bold;
    color: red; 
    padding: 0 2px;
  }
  
  .tooltip-text {
    position: absolute;
    top: 130%;
    margin-right:90%;
    transform: translateX(-88%);
    background-color: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
    font-size: 0.85rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  
  /* Viñeta (triángulo) */
  .tooltip-text::after {
    content: '';
    position: absolute;
    font-size:700%;
    top: -10px;
    left: 88%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }
  
  /* Mostrar tooltip con hover o .active */
  .tooltip-toggle:hover .tooltip-text,
  .tooltip-toggle.active .tooltip-text {
    opacity: 1;
    visibility: visible;
  }


  .hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:20%;
    margin-top:10%;
  }
   
  .hero-left {
    margin-left:3%;
    margin-right:10%;
    flex: 1;
    text-align: left;
    min-width:100%;
  }
  
  .hero-content {
    margin-top:-20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* para móviles */
  }

       .pricing-section2{
    background-color: #c8d0e736 !important;
    margin-top:10px;
}

.billing-toggler2{
    margin-top:-40px;
}

.section-title33{
    margin-top:0px !important;
     margin-bottom: 50px !important;
}

.carousel-item{
    min-width: 47%;
    max-width: 250px; 
    height: 300px;
    max-height: 420px; 
    flex: 1 0 auto; 
    position: relative; 
    border-radius: 3px; 
    overflow: hidden; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.1); 
    background-size: cover; 
    background-position: center;
}

.carousel-item-title{
    margin: 0 0 175px; 
    font-size: 100%; 
    font-weight: bold;
}

.carousel-item-new{
    position: absolute; 
    top: 5px; 
    left: 78%; 
    background-color: #6293bb; 
    color: white; 
    font-size: 7px;  
    padding: 2px 6px; 
    border-radius: 4px; 
    z-index: 2;
}

.learn-more-btn{
    font-size: 12px !important;
}

.tarjeta-testimonio {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 18px;
    min-width: 220px; /* Ancho mínimo de cada tarjeta */
    text-align: left;
}

.tarjeta-testimonio .info-usuario-testimonio {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}

.tarjeta-testimonio .info-usuario-testimonio h3 {
    color: #333;
    font-size: 1rem;
    margin-right: 10px;
    margin-bottom: 0;
}

.tarjeta-testimonio .info-usuario-testimonio .tiempo-testimonio {
    color: #777;
    font-size: 0.5rem;
    margin-right: 10px;
}

.tarjeta-testimonio .info-usuario-testimonio .plataforma-testimonio i {
    color: #555;
    font-size: 1.2rem;
}

.tarjeta-testimonio .estrellas-testimonio {
    color: #ffc107;
    font-size: 1rem;
    margin-bottom: 5px;
}

.tarjeta-testimonio .texto-testimonio {
    color: #555;
    line-height: 1.2;
    font-size:0.8rem;
    text-align: justify;
}

  .extra-content {
  display: none;
  margin-top: 10px;
  margin-right:10%;
  font-size: 65% !important;
  line-height: 1.3;
}

.linea-horizontal {
     display: block;
    width: 100%;
    height: 1.5px;
    background-color: #002D4B; /* Puedes cambiar el color */
    margin-bottom: 20px; /* Espacio entre la línea y el título */
    margin-left:3%;
}

}



@media(min-width: 4000px){
    .back-to-top {
        position: fixed;
        bottom: 3%;
        right: 0%;
        width: 2%;
        height: 5%;
    }


    /*FAQ*/
.faq {
    padding: 5% 0;
    background: 
        linear-gradient(to bottom, 
            rgba(240, 240, 240, 1) 0%, 
            rgba(240, 240, 240, 0.626) 30%),  /* Gradiente suave en la parte superior */
        linear-gradient(to top, 
            rgba(224, 224, 224, 1) 0%, 
            rgba(224, 224, 224, 0) 30%),  /* Gradiente suave en la parte inferior */
        radial-gradient(circle, #07426d, #337a8e);
        width: 50%;  /* Establecer un ancho menor para .faq */
        margin: 0 auto;
        background-image: url(../images/fondo_servicios.jpg)
}

/* Mas info */
.more-info-content {
    background-color: #002D4B;
    display: flex;
    justify-content: space-between; /* Separar el texto y el botón */
    align-items: center;
    padding: 1% 30%; /* Añade más padding superior e inferior */
}

.services-grid {
    display: flex; /* Cambia a flexbox para centrar los ítems */
    flex-wrap: wrap; /* Permite que los ítems se ajusten en varias filas */
    justify-content: center; /* Centra horizontalmente los ítems */
    gap: 1.5rem; /* Ajusta el espacio entre ítems */
}

.service-item {
    background-color: var(--secondary-color);
    padding: 1rem; /* Reduce el padding interno */
    border-radius: 10px;
    margin: 1rem; /* Reduce el margen entre ítems */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 15%; /* Reduce el tamaño total del ítem */
}

/* Estilos generales para la sección Conócenos */
.conocenos-section {
    padding: 3rem 0;
    background: gris;
}

.contenttt {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas: una para las imágenes y otra para la información */
    gap: 1%; /* Espacio entre las columnas */
    align-items: center; /* Centra los elementos verticalmente */
}

.image-column2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos imágenes en fila */
    gap: 10px;
}

.rectangular-img {
    width: 100%; /* Asegura que las imágenes ocupen el 100% del ancho disponible en su contenedor */
    height: 40rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    object-fit: cover; /* Mantiene la proporción de la imagen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.second-image {
    margin-top: 30%; /* Da un pequeño espacio entre las dos imágenes */
}

.info-column {
    margin-right:40%;
    padding-left: 5%;
    font-size: 140%;
    color: #555;
}

.section-title h2 {
    font-size: 300%;
    font-weight: bold;
    color: #002D4B;
}

.section-title .sub-title {
    font-size: 160%;
    color: #002D4B;
    margin-bottom: 2%;
}

.section-title-nuevo h2 {
    font-size: 300%;
    font-weight: bold;
    color: #002D4B;
}

.section-title-nuevo .sub-title-nuevo {
    font-size: 160%;
    color: #002D4B;
    margin-bottom: 2%;
}

.info-box {
    margin-bottom: 5%;
}

.info-box p{
    color:#000000;
   font-size:120%;
}

ul.list-style {
    list-style: none;
    padding-left: 0;
}

ul.list-style li {
    display: flex;
    align-items: center;
    font-size: 120%;
    margin-bottom: 3%;
    color: #000000;
}

ul.list-style li i {
    color: #28a745;
    margin-right: 10%;
}

.name-tics-container {
    display: flex;
    align-items: center; /* Alinea la imagen pequeña y los tics */
    justify-content: flex-start; /* Hace que los elementos se alineen a la izquierda */
}

.vertical-divider {
    height: auto; /* La barra será tan alta como el contenido */
    width: 2px; /* Aumentamos el grosor de la línea divisoria */
    background-color: #ccc;
    margin: 0 10px; /* Reducimos el espacio entre la imagen y los tics */
    flex-grow: 2; /* Aumentamos el espacio disponible para los tics */
}

.name-column {
    text-align: center;
    margin-right: 15%; /* Espacio para alejar la imagen de los tics */
}

.profile-img-small {
    width: 200px; /* Ajusta el tamaño del círculo aquí (en píxeles o porcentaje) */
    height: 200px; /* Mantén la misma altura que el ancho para que sea un círculo */
    border-radius: 50%; /* Convierte el contenedor en un círculo */
    overflow: hidden; /* Asegura que la imagen no se desborde */
    border: 3px solid #002D4B; /* Bordes opcionales alrededor del círculo */
    margin-right: 10%; /* Espacio entre la imagen y los tics */
}

.profile-img-small img {
    width: 100%; /* La imagen llena todo el espacio disponible del contenedor */
    height: 130%; /* La imagen ocupa toda la altura del contenedor */
    object-fit: cover; /* Asegura que la imagen se recorte adecuadamente sin deformarse */
}

.name {
    margin-top:5%;
    font-size: 110%;
    font-weight: bold;
    color: #333;
}

.divider {
    margin-top: -2%;
    border: 0;
    border-top: 1px solid #002d4bab;
    width: 100%;
    margin-bottom: 3%;
}


.experience {
    display: flex;
    align-items: center;
    font-size: 150%; /* Tamaño de la fuente para el texto */
    margin-left:10%;
    color: #333; /* Color de texto */
}

.counter-wrapper {
    font-size: 500%; /* Tamaño del contador */
    font-weight: bold;
    margin-right: 5px; /* Espacio entre el contador y el texto */
    color: #002D4B; /* Color verde para el contador */
}

.counter {
    display: inline-block;
    font-size: 100%; /* Aseguramos que el contador se vea grande */
    font-weight: bold;
    color: #002D4B; /* Verde */
}

.image-column2 {
    display: flex;
    gap: 0%; /* Espacio entre las imágenes */
    justify-content: space-between;
    margin-bottom: 0%;
}

.rectangular-img {
    margin-left: 30%;
    max-width:20%;
    flex: 1; /* Las imágenes ocupan el mismo espacio */
    height: 70rem; /* Aumentamos la altura a 450px para hacer las imágenes aún más grandes */
    max-height: 100%; /* Limita la altura máxima a 100% de su contenedor */
    object-fit: cover; /* Recorta y ajusta la imagen para que se ajuste al contenedor */
    border-radius: 8px;
}

.second-image {
    margin-top: 25%; /* Da un pequeño espacio entre las dos imágenes */
}

.image-rect {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: 100%; /* Hace que la altura se ajuste al contenedor */
    object-fit: cover; /* Mantiene la proporción y recorta la imagen */
}

.service-cards .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
   
    padding: 7%;
}


/* Artículos ocultos inicialmente */
.articles {
    display: flex; /* Usamos flex para organizar los artículos en una fila */
    flex-wrap: wrap; /* Permite que los artículos se muevan a la siguiente línea si no caben */
    max-height: 0; /* Comienza con una altura de 0 cuando está oculto */
    overflow: hidden; /* Oculta cualquier contenido fuera del contenedor */
    margin-top: 5%;
    text-align: left;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center; /* Centra los artículos en el contenedor */
    transition: max-height 0.5s ease-out; /* Transición suave de apertura y cierre */
}

/* Estilo de los artículos */
.articles article {
    position: relative;
    width: 15%;/* Ajusta el tamaño de los artículos en la fila */
    margin-bottom: 10%; /* Espacio entre los artículos */
    margin-right: 2%; /* Espacio entre los artículos (si hay más de uno en una fila) */
    margin-left:2%;
    transition: all .3s ease;
    overflow: hidden; /* Asegura que nada se salga del artículo */
}

 /* Estilo para los textos debajo de los artículos */
 .description {
    width:60%;
    text-align: center;
    margin-top: 5%;
    margin-left:10%;
    margin-bottom: 3%; /* Espacio entre el texto y el siguiente artículo */
}

.description p {
    font-size: 250%;
    color: #333;
}

.about-me{
    margin-top:2%;

    min-height:1000px;
}

.hero .btn {
    display: block;           /* Asegura que los botones sean elementos en bloque */
    background-color: var(--accent-color);
    color: white;
    padding: 1.2rem 2rem;     /* Aumenta el padding para un tamaño más llamativo */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.6rem;        /* Aumenta el tamaño de la fuente para mejor legibilidad */
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 15px rgba(27, 27, 27, 0.7); /* Sombra del texto */
    border: none;
    position: relative;
    overflow: hidden;
    width: fit-content;       /* El botón se ajusta al tamaño del texto */
    margin: 0 auto;           /* Centra los botones si tienen tamaño dinámico */
    margin-bottom:0.5%;
}

.services-detail {
    opacity: 0; /* El texto empieza invisible */
    animation: aparecer 2s ease forwards; /* Duración de 3 segundos */
    margin-top: 3%; 
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Cambiamos para centrar todo el contenido */
    text-align: center;  /* Alineamos el texto al centro */
    margin-left:30%;
    margin-right:30%;
}
/* Servicios Detallados */
.services-detaill {
    opacity: 0; /* El texto empieza invisible */
    animation: aparecer 2s ease forwards; /* Duración de 3 segundos */
    margin-top: 0%; 
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Cambiamos para centrar todo el contenido */
    text-align: center;  /* Alineamos el texto al centro */
    margin-left:22%;
    margin-right:22%;
    margin-bottom:-3%;
}

.modal-content {
    display: block; 
    text-align: center;
    background-color: #fefefe; /* Fondo blanco para el contenido */
    padding: 40px; /* Espaciado interior */
    margin-top:0%;
    border-radius: 8px; /* Bordes redondeados */
    width: 50%; /* Ancho de l modal */
    max-width: 90%; /* Máximo 90% del ancho de la pantalla */
    height: auto; /* Alto automático */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    position: relative; /* Relativo para posicionar elementos dentro */
}

.content .name{
    font-size:300%;
    text-transform:uppercase;
    font-weight: bold;
    opacity:0;
    animation: animate 1s ease-in-out 1 forwards;
    margin-top:10%;
}

.content .des{
    font-size:160%;
    margin-top: 0%;
    margin-bottom:15%;
    opacity:0;
    color: #ffffff;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}


.comparativa-section{
    width: 60%;  /* Puedes ajustar a 1000px, 960px, etc. según tu diseño */
    margin: 0 auto;
    padding: 0 20px;
}

.table-comparativa th,
.table-comparativa td {
    padding: 14px;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 1.3rem;
    color:#576c81;
}

.icon-large {
    font-size: 1.8rem;
}

/* Cambiar color solo de las cabeceras */
.table-comparativa thead th {
    color: #002d5a; /* Azul oscuro, cambia si quieres otro tono */
    font-size: 1.7rem;
}


}