@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;900&display=swap");

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Contenedor principal para el fondo difuminado */
.main-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url('../Imagenes/romi2.jpeg'); /* Reemplaza con la ruta de tu imagen de fondo */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente */
    justify-content: flex-start; /* Alinea el contenido al inicio verticalmente */
    padding: 20px; /* Espacio alrededor del contenido */
}

.main-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Blanco difuminado (ajusta el 0.8 para más o menos difuminado) */
    backdrop-filter: blur(5px); /* Efecto de desenfoque, ajusta el valor */
    z-index: 1;
}

/* Header */
.header {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    position: relative;
    z-index: 2;
}

.header .logo img {
    max-width: 120px; /* Ajusta el tamaño del logo */
    height: auto;
    border-radius: 50%; /* Si quieres que el logo sea circular */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contenido principal de botones */
.content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column; /* Disposición vertical por defecto */
    gap: 20px; /* Espacio entre los botones */
    width: 90%; /* Ancho de los botones en móvil */
    max-width: 400px; /* Ancho máximo en móvil */
    padding: 20px 0;
}

/* Estilos generales para los botones */
.main-button {
    display: flex;
    flex-direction: column; /* Imagen arriba, texto abajo */
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */
    border-radius: 15px;
    padding: 15px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    overflow: hidden; /* Para asegurar que las imágenes redondas se recorten */
    position: relative;
}

.main-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: #580354; /* Color del texto al pasar el mouse */
}

.main-button .button-image {
    width: 100%;
    max-height: 180px; /* Altura máxima de la imagen dentro del botón */
    object-fit: cover;
    border-radius: 10px; /* Bordes ligeramente redondeados para las imágenes */
    margin-bottom: 10px;
}

.main-button.profile-button .button-image {
    width: 150px; /* Tamaño específico para la imagen de la odontóloga */
    height: 150px;
    border-radius: 50%; /* Hacer la imagen de la odontóloga circular */
    object-fit: cover;
    border: 3px solid #b105b7; /* Borde alrededor de la foto de la odontóloga */
}

.main-button .button-text h3 {
    font-size: 1.4em;
    margin-bottom: 5px;
    color: #580354; /* Color para los títulos de los botones */
    font-weight: 700;
}

/* Iconos de redes sociales y ubicación */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icons a {
    color: #b105b7; /* Color de los iconos */
    font-size: 1.8em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: #8a048e; /* Color al pasar el mouse */
    transform: scale(1.1);
}

/* Footer */
.footer {
    width: 100%;
    background-color: rgba(212, 212, 212, 0.8); /* Fondo del footer semi-transparente */
    padding: 20px 10px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: 40px;
}

.footer .card-title {
    font-size: 1.2em;
    color: #530253;
    font-weight: 700;
}

.footer .card-text {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
}

.footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-social li a {
    color: #530253;
    font-size: 1.8em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social li a:hover {
    color: #b105b7;
    transform: scale(1.1);
}

/* Media query para pantallas de más de 720px */
@media (min-width: 720px) {
    .content-wrapper {
        flex-direction: row; /* Disposición horizontal */
        flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
        justify-content: center; /* Centra los botones horizontalmente */
        max-width: 1200px; /* Ancho máximo para el contenedor de botones en escritorio */
    }

    .main-button {
        flex-basis: calc(33.33% - 40px); /* 3 botones por fila, considerando el gap */
        max-width: 350px; /* Ancho máximo para cada botón */
        height: 300px; /* Altura fija para los botones en escritorio */
        flex-direction: column; /* Mantener imagen arriba y texto abajo */
    }

    .main-button.profile-button {
        flex-basis: calc(66.66% - 40px); /* Este botón podría ocupar más espacio si lo deseas */
        max-width: 720px;
        flex-direction: row; /* Para poner la imagen a un lado y el texto al otro */
        align-items: center;
        padding: 20px;
    }

    .main-button.profile-button .button-image {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .main-button.profile-button .button-text {
        text-align: left;
    }

    .main-button .button-image {
        max-height: 150px; /* Ajusta la altura de las imágenes en los botones en escritorio */
    }
}

/* Estilos eliminados o simplificados del CSS original para un enfoque minimalista */
/* Se eliminaron estilos específicos de carrusel, secciones divididas, etc. */
/* Se mantuvieron solo los estilos esenciales y los redefinidos para el nuevo diseño. */

.negrita { font-weight: 700; }
.negritaV { color: purple; }
.italica { font-style: italic; }

/* Otros estilos generales que podrían ser útiles del CSS original */
p {
    line-height: 1.8;
}

a {
    text-decoration: none;
    color: #3a0237;
}

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

/* --- NUEVOS ESTILOS PARA LA SECCIÓN DE LA ODONTÓLOGA ROMINA SOLIS WAHNISH --- */
.odontologa-profile {
    display: flex;
    flex-direction: column; /* Por defecto vertical en móvil */
    align-items: center;
    gap: 15px; /* Espacio entre la imagen y los detalles */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco semitransparente */
    border-radius: 20px; /* Bordes más redondeados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    width: 100%; /* Ancho similar a los botones en móvil */
    max-width: 450px; /* Un poco más grande que los botones */
    margin-bottom: 30px; /* Espacio debajo de la sección de Romi */
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none; /* Asegura que no tenga subrayado si por alguna razón hereda de <a> */
    color: inherit; /* Asegura que el color del texto sea el predeterminado */
}

.odontologa-profile:hover {
    transform: translateY(-8px); /* Efecto de "levantar" más notorio */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3); /* Sombra más grande al pasar el mouse */
}

.odontologa-image {
    width: 160px; /* Tamaño de la imagen de Romi en móvil */
    height: 160px;
    border-radius: 50%; /* Hacer la imagen circular */
    object-fit: cover; /* Asegura que la imagen se ajuste y se recorte */
    border: 5px solid #b105b7; /* Borde más pronunciado y del color principal */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.odontologa-image:hover {
    transform: scale(1.08); /* Ligeramente más grande al pasar el mouse */
    border-color: #580354; /* Cambia el color del borde al pasar el mouse */
}

.profile-details {
    text-align: center; /* Centrar el texto y los íconos dentro de este div */
}

.profile-details h3 {
    font-family: 'Tenor Sans', sans-serif; /* **FUENTE MODERNA** */
    font-weight: 700; /* **MÁS GRUESA (Tenor Sans no llega a 900, 700 es un buen balance)** */
    font-size: 1.9em; /* Un poco más grande que los botones */
    color: #580354; /* Color oscuro para el nombre */
    margin-top: 5px; /* Ajuste el margen superior */
    margin-bottom: 20px; /* Espacio debajo del nombre y antes de los íconos */
    letter-spacing: 0.5px; /* Un poco de espaciado entre letras para un look moderno */
}

.social-icons-centered {
    display: flex;
    justify-content: center; /* **CENTRA LOS ÍCONOS HORIZONTALMENTE** */
    gap: 25px; /* Espacio entre los íconos, un poco más grande */
}

.social-icons-centered a {
    color: #b105b7; /* Color de los íconos */
    font-size: 2.5em; /* **ÍCONOS UN POCO MÁS GRANDES** */
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none; /* Eliminar subrayado si aparece */
}

.social-icons-centered a:hover {
    color: #8a048e; /* Color al pasar el mouse */
    transform: scale(1.2); /* Efecto reactivo en los íconos más pronunciado */
}

/* --- ESTILOS PARA EL NUEVO BOTÓN DE WHATSAPP --- */
.whatsapp-button .button-image {
    width: 70px; /* Ajusta el tamaño de la imagen de WhatsApp */
    height: 70px;
    /* No es necesario border-radius: 50% si la imagen ya es redonda o cuadrada */
}

.whatsapp-button .button-text h3 {
    color: #25D366; /* Color verde de WhatsApp */
    font-size: 1.2em; /* Puedes ajustar el tamaño si lo deseas */
}

.whatsapp-button:hover {
    background-color: #e6ffe6; /* Un verde muy claro al pasar el mouse */
    border: 1px solid #25D366; /* Borde verde al pasar el mouse */
}


/* --- ADAPTACIONES PARA DESKTOP (media query) --- */
@media (min-width: 720px) {
    .content-wrapper {
        flex-direction: row; /* Los elementos se ponen en fila */
        flex-wrap: wrap; /* Permite que los elementos se envuelvan en nuevas filas */
        justify-content: center; /* Centra los elementos horizontalmente */
        max-width: 1200px; /* Ancho máximo para el contenedor */
        align-items: flex-start; /* Alinea los elementos al inicio de la fila */
        padding: 30px 0; /* Más padding en desktop */
    }

    .odontologa-profile {
        flex-direction: row; /* En desktop, la imagen y el texto en fila */
        justify-content: flex-start; /* Alinea el contenido al inicio de la sección */
        align-items: center;
        flex-basis: calc(60% - 40px); /* Ocupa un poco más de espacio en desktop */
        max-width: 700px; /* Ancho máximo para la sección de Romi en desktop */
        padding: 40px; /* Más padding en desktop */
        margin-bottom: 20px; /* Espacio uniforme con los otros botones */
    }

    .odontologa-image {
        width: 200px; /* La imagen de Romi más grande en desktop */
        height: 200px;
        margin-right: 40px; /* Espacio a la derecha de la imagen */
    }

    .profile-details {
        text-align: left; /* Alinea el texto a la izquierda en desktop */
        flex-grow: 1; /* Permite que los detalles ocupen el espacio restante */
    }

    .profile-details h3 {
        font-size: 2.5em; /* Nombre de Romi más grande en desktop */
        margin-bottom: 15px; /* Ajuste el margen */
    }

    .social-icons-centered {
        justify-content: flex-start; /* Alinea los íconos a la izquierda en desktop */
        gap: 30px; /* Más espacio entre íconos en desktop */
    }

    .social-icons-centered a {
        font-size: 2.8em; /* Íconos aún más grandes en desktop */
    }

    /* AJUSTE PARA LOS OTROS BOTONES EN DESKTOP */
    .main-button {
        flex-basis: calc(33.33% - 40px); /* Para que haya 3 botones por fila (excluyendo la sección de Romi) */
        max-width: 380px; /* Ajuste el ancho máximo de los botones */
        height: 280px; /* Ajusta la altura si es necesario para mantener la consistencia */
        margin-bottom: 20px; /* Espacio inferior entre botones */
    }

    /* Ajuste específico para el iframe dentro del botón de mapa si decides usarlo (NO RECOMENDADO) */
    /* .map-button .ifra {
        width: 100%;
        height: 150px;
    } */
}
/* --- Estilos del Modal de Videos (Nuevo) --- */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se mantiene en su lugar al hacer scroll */
    z-index: 1000; /* Se superpone a todo lo demás */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: auto; /* Habilita el scroll si el contenido es demasiado grande */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    display: flex; /* Usamos flexbox para centrar el contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    opacity: 0; /* Inicialmente transparente para la animación */
    visibility: hidden; /* Inicialmente oculto para no interactuar */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Mantenido para compatibilidad, aunque flexbox ya lo centra */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    max-width: 90%; /* Ancho máximo del contenido del modal */
    width: 700px; /* Ancho preferido en desktop */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacio entre el título y los videos */
    transform: translateY(20px); /* Para la animación de entrada */
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-content h2 {
    font-family: 'Tenor Sans', sans-serif; /* Usamos la misma fuente moderna */
    color: #580354;
    text-align: center;
    margin-bottom: 10px;
    font-size: 2em;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #580354;
    text-decoration: none;
}

.video-container {
    position: relative;
    width: 100%;
    /* Relación de aspecto 16:9 (altura es 56.25% del ancho) */
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden; /* Esconde cualquier cosa fuera del padding-bottom */
    background-color: #000; /* Fondo negro mientras carga el video */
    border-radius: 8px; /* Bordes redondeados para los videos */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Media Queries para ajustar el modal en pantallas más pequeñas */
@media (max-width: 768px) {
    .modal-content {
        padding: 20px;
        width: 95%; /* Más ancho en móviles */
        max-height: 90vh; /* Limita la altura en pantallas pequeñas */
        overflow-y: auto; /* Permite scroll si el contenido es muy largo */
    }

    .modal-content h2 {
        font-size: 1.6em;
    }

    .close-button {
        font-size: 30px;
        top: 10px;
        right: 15px;
    }
}