* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow-y: auto; /* Permitir desplazamiento vertical */
}
.contenedor-todo {
    width: 100%;
    background-image: url('images/fondoweb.png'); /* Cambia la ruta a tu imagen */
    background-size: cover; /* Ajusta la imagen para que cubra todo el contenedor */
    background-position: center; /* Centra la imagen en el contenedor */
    background-attachment: fixed; /* Mantiene la imagen fija en su lugar */
    display: flex;
    flex-direction: column;
}
.contenedor-logo {
    position: relative;
    padding: 20px;
    height: 650px;
    background-image: url('images/Cuida\ tu.png');
    background-size: cover;
    background-position: center;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
}
.contenedor-logo .logo-nombre {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50px; /* Ajusta la distancia desde la parte superior */
    left: 20px;
    z-index: 1;
}
.contenedor-logo img {
    width: 200px; /* Ajusta el logo al 50% del tamaño original */
    height: auto; /* Mantiene la proporción original */
}
.nombre-clinica {
    font-size: 24px;
    font-weight: bold;
    font-family: 'Arial', sans-serif; /* Cambia la fuente aquí */
    margin-top: 30px;
}
.contenedor-carrusel {
    background-color: rgba(0, 0, 0, 0); 
    padding: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    height: 300px; 
    margin: 10px; 
    border-radius: 8px; 
    overflow: hidden; 
}
.carrusel-imagenes {
    display: flex; 
    transition: transform 0.5s ease; 
    padding: 10px; 
}
.carrusel-imagenes img {
    width: 300px; /* Ancho de las imágenes */
    height: 250px; /* Altura aumentada para las imágenes */
    object-fit: cover; 
    margin: 0 10px; 
}
.contenedor-nuevo-azul {
    background-color: rgba(173, 216, 230, 0); /* Color del nuevo contenedor azul */
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Para que el contenido se acomode bien */
    text-align: center; /* Alinear texto al centro */
    flex: 1; /* Permitir que crezca */
}
.contenedor-verde {
    background-size: cover;
    background-position: center;
    padding: 20px;  
    display: flex; 
    flex-direction: row; /* Cambiado para que los contenedores internos estén uno al lado del otro */
}
.contenedor-verde p {
    font-size: 20px; /* Tamaño del texto */
    color: #000000; /* Color blanco para mayor contraste */
    margin-right: 400px;
    line-height: 1.6; /* Espaciado entre líneas */
    text-align: justify; /* Alinear el texto para una mejor presentación */
    font-weight: 400; /* Peso del texto */
    margin: 10px 0; /* Espaciado superior e inferior */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra de texto para profundidad */
    padding: 10px; /* Espaciado interno para el texto */
    border-radius: 8px; /* Bordes redondeados para el texto */
    background-color: rgba(0, 0, 0, 0); /* Fondo ligeramente oscuro para destacar el texto */
}
.contenedor-interno {
    background-color: rgba(144, 238, 144, 0); /* Color de los contenedores internos */
    padding: 10px; 
    margin: 10px; 
    border-radius: 8px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex: 1; /* Permitir que los contenedores internos crezcan */
}
iframe {
    width: 100%; /* Asegura que el iframe use todo el ancho disponible */
    height: 300px; /* Ajusta la altura según sea necesario */
    border: none; /* Elimina los bordes del iframe */
}
.contenedor-interno img {
    max-width: 0%; /* Asegura que la imagen se ajuste al contenedor interno */
    height: 500px; /* Aumenta la altura de la imagen */
    width: auto; /* Permitir que el ancho sea automático */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
}
.footer {
    background-image: url('images/footer.png'); /* Fondo oscuro */
    color: #f0f0f0;
    padding: 40px 0;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: left;
}
.footer .section {
    flex: 1 1 200px; /* Asegura que las secciones se adapten al tamaño de pantalla */
    max-width: 250px;
}
.footer h3 {
    font-size: 20px;
    color: #ffd700; /* Color dorado */
    margin-bottom: 15px;
}
.footer p, .footer a {
    color: #f0f0f0;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
    text-decoration: none;
    transition: color 0.3s;
}
.footer a:hover {
    color: #ffd700; /* Cambia de color al pasar el cursor */
}
.footer .social-icons {
    display: flex;
    gap: 15px;
}
.footer .social-icons img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.footer .social-icons img:hover {
    transform: scale(1.1);
}
.footer .info {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    max-width: 500px; /* Limitar el ancho */
    color: #ffffff;
}
.footer .info p {
    margin: 5px 0;
    font-size: 16px;
}
.footer .botones {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.footer .botones a img {
    width: 48px; /* Ajuste de tamaño para una mejor proporción */
    height: 48px;
    transition: transform 0.2s; /* Animación suave al pasar el cursor */
    box-shadow: none; /* Sin sombra para mantener el estilo limpio */
    border-radius: 0px; /* Borde sutilmente redondeado para un toque moderno */
    margin-left: 15px;
}
.footer .botones a img:hover {
    transform: scale(1.1); /* Ligero aumento de tamaño al pasar el cursor */
}
.footer .info strong {
    font-size: 18px; /* Resalta el título de 'Horario de Atención' */
    color: #ffd700; /* Color dorado para destacar */
}
.footer .botones {
    display: flex;
    gap: 15px; /* Ajustar el espacio entre los botones */
    justify-content: center;
    align-items: center;
    padding: 10px 0; /* Añadir algo de espacio arriba y abajo */
}
.footer button {
    background-color: white; 
    color: darkred; 
    border: none; 
    padding: 10px 15px; 
    cursor: pointer; 
    border-radius: 5px; 
    font-weight: bold;
    display: flex; 
    align-items: center; /* Centrar verticalmente el contenido */
}
.footer button i {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
}
.contenedor-nuevo {
    background-color: rgba(0, 0, 0, 0.733); /* Color del nuevo contenedor */
    padding: 20px; 
    margin: 20px; 
    border-radius: 8px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; /* Para que el iframe se acomode bien */
}
.contenedor-verde p {
    font-size: 18px; /* Ajusta este valor según tus necesidades */
    margin-right: 100px;
}
.contenedor-nuevo-debajo-mapa {
    background-image: url('images/contenedor-verde.png'); /* Fondo del cuadro */
    background-color: #000000c4;
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    padding: 20px;
    margin: 0px;
    text-align: center; /* Centrar texto */
}
.especialistas {
    display: flex;
    justify-content: center; /* Centrar los elementos horizontalmente */
    gap: 80px; /* Espacio entre los especialistas */
    flex-wrap: wrap; /* Permitir que los elementos se ajusten si no caben en una sola línea */
    padding: 20px;
}
.especialista {
    background-color: rgba(255, 255, 255, 0.555);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darles un efecto elevado */
    text-align: center;
    width: 200px; /* Ajusta el tamaño del cuadrado */
}
.especialista img {
    width: 100%; /* Hacer que la imagen llene el cuadrado */
    height: 200px; /* Ajusta la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
    border-radius: 8px; /* Bordes redondeados */
}
.especialista p {
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
    color: darkslategray;
}
.carrusel-fotos {
    width: 100%; 
    height: 450px; /* Ajusta la altura según sea necesario */
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Mantiene los bordes redondeados */
    transition: 0.5s;
}
.contenedor-especialistas {
    background-color: #F0F0F0;  /* Fondo gris claro */
    padding: 20px;  /* Espaciado alrededor del contenido */
    border-radius: 10px;  /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
    margin: 20px auto;  /* Espaciado superior e inferior */
    width: 90%;  /* Ancho del contenedor */
    max-width: 1200px;  /* Ancho máximo */
}
.titulo-especialistas {
    font-size: 3em;  /* Tamaño más grande para el título */
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;  /* Espacio debajo del título */
    color: #333;  /* Color del texto */
    padding: 20px;  /* Espaciado dentro del cuadro */
    background-color: #ffffff75;  /* Fondo blanco para el cuadro */
    border: 1px solid #ccc;  /* Borde del cuadro */
    display: inline-block;  /* Que el cuadro se ajuste al contenido */
    border-radius: 10px;  /* Bordes redondeados */
}
.texto-carrusel {
    margin: 10px;
    width: 50%;
    margin-top: 50px;
    font-family: 'Roboto', sans-serif; /* Ajusta la fuente para que coincida */
    font-size: 20px; /* Puedes ajustar el tamaño según sea necesario */
    color: #000000; /* Asegúrate de que el color también sea consistente */
    line-height: 1.5; /* Espaciado entre líneas para mejor legibilidad */
}
.contenedor-nuevo-rojo {
    background-color: rgba(0, 0, 0, 0);
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 300px;
}
.rotador-imagenes-3d {
    display: flex;
    position: relative;
    perspective: 1000px;
    height: 50%; /* Aumenta la altura */
    margin-right: 160px; /* Reduce el margen derecho para centrar un poco más */
    transform: scale(1.6); /* Aumenta la escala */
    width: 20px;
}
.slide {
    position: absolute;
    background-color: #f0f0f0;
    opacity: 0.5;
    filter: blur(3px);
    transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
    text-align: center;
    border-radius: 10px;
    border: 1.5px solid #00000096;
    height: 143px;
}
.slide img {
    width: 100px;
    border-radius: 10px;
}
.rotador-imagenes-3d .slide.center {
    transform: scale(1.2) translateX(0) translateZ(100px);
    opacity: 1;
    filter: blur(0);
    z-index: 2;
}
.rotador-imagenes-3d .slide.left {
    transform: translateX(-150px) scale(0.8) translateZ(-50px);
    z-index: 1;
}
.rotador-imagenes-3d .slide.right {
    transform: translateX(150px) scale(0.8) translateZ(-50px);
    z-index: 1;
}
.whatsapp {
    display: inline-block; /* Asegura que se alinee en línea */
    width: 64px; /* Tamaño del contenedor */
    height: 64px; /* Tamaño del contenedor */
    margin: 0 15px; /* Espaciado específico para WhatsApp */
}

.whatsapp img {
    width: 100%; /* Ajusta la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: transform 0.3s ease; /* Efecto de hover */
}

.whatsapp img:hover {
    transform: scale(1.2); /* Agranda ligeramente al pasar el mouse */
}

.instagram {
    display: inline-block; /* Asegura que se alinee en línea */
    width: 64px; /* Tamaño del contenedor */
    height: 64px; /* Tamaño del contenedor */
    margin: 0 15px; /* Espaciado específico para Instagram */
}

.instagram img {
    width: 100%; /* Ajusta la imagen al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: transform 0.3s ease; /* Efecto de hover */
}

.instagram img:hover {
    transform: scale(1.2); /* Agranda ligeramente al pasar el mouse */
}
.gmail {
    display: inline-block; /* Asegura que se alinee en línea */
    width: 100px; /* Ajusta el ancho específico para Gmail */
    height: 64px; /* Mantiene la altura coherente con los otros íconos */
    margin: 0 20px; /* Espaciado específico para Gmail */
}
.gmail img {
    width: 150%; /* Ajusta la imagen al ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: transform 0.3s ease; /* Efecto de hover */
}
.gmail img:hover {
    transform: scale(1.2); /* Agranda ligeramente al pasar el mouse */
}
.iconoscontacto {
    padding-top: 100px;
    margin-left: 100px;
}

/* Media query para pantallas de 768px o menos */
@media (max-width: 768px) {
    .contenedor-todo {
        flex-direction: column; /* Mantén el diseño vertical */
    }

    .texto-carrusel {
        margin-left: 20px;
    }

    .contenedor-logo {
        height: auto; /* Ajusta automáticamente según el contenido */
        padding: 10px; /* Reduce el espacio alrededor del logo */
        display: flex; /* Asegura que los elementos del contenedor se ajusten correctamente */
        align-items: flex-start; /* Alinea los elementos al inicio vertical */
        justify-content: flex-start; /* Alinea los elementos al inicio horizontal */
    }

    .logo-nombre {
        top: 10px;
        left: 0px;
        font-size: 140px;
        margin-top: 5px;
    }

    .contenedor-logo img {
        width: 50px; /* Ajusta el tamaño del logo */
        height: auto; /* Mantiene la proporción original */
        margin: 0; /* Elimina márgenes adicionales */
    }
    .nombre-clinica {
        font-size: 18px; /* Reduce el tamaño del texto */
        margin-top: 10px; /* Menos margen superior */
    }

    .contenedor-carrusel {
        height: 200px; /* Reduce la altura */
        margin: 0px; /* Reduce los márgenes */
        margin-top: 30px;
        margin-right: 16px;
    }

    .carrusel-imagenes img {
        width: 100%; /* Las imágenes ocupan todo el ancho disponible */
        height: auto; /* Mantén la proporción */
    }

    .contenedor-nuevo-azul {
        padding: 10px; /* Reduce el padding */
    }

    .contenedor-verde {
        flex-direction: column; /* Cambia el diseño a vertical */
        padding: 10px;
    }

    .contenedor-verde p {
        margin-right: -125px; /* Elimina el margen derecho */
        font-size: 16px; /* Reduce el tamaño del texto */
    }

    .iframe {
        height: 200px; /* Reduce la altura */
    }

    .footer {
        flex-direction: column; /* Apila las secciones */
        gap: 20px; /* Reduce el espacio entre secciones */
    }

    .footer .section {
        max-width: 100%; /* Asegura que cada sección ocupe todo el ancho */
    }

    .footer .botones a img {
        width: 40px; /* Reduce el tamaño de los íconos */
        height: 40px;
    }

    .rotador-imagenes-3d {
        transform: scale(1); /* Ajusta la escala */
        margin-right: 0; /* Centra el rotador */
    }

    .slide {
        height: auto; /* Ajusta automáticamente la altura */
    }

    .especialistas {
        gap: 20px; /* Reduce el espacio entre especialistas */
    }

    .especialista {
        width: 100%; /* Ocupa todo el ancho disponible */
        margin: 0 auto; /* Centra los elementos */
        padding: 50px;
    }
    .titulo-especialistas {
        font-size: 1.5em; /* Reduce el tamaño del título */
    }

    .contenedor-nuevo-rojo{
        margin-right: 110px;
        height: 230px;
    }
    .iconoscontacto {
        padding: 10px;
        margin-left: 19px;
    }
}