/* NUEVO: Importar fuente profesional 'Inter' */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

/*
 * Hoja de estilos personalizada para Maternitas
 */

/* NUEVO: Asegurar que html y body ocupen toda la altura */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}


body {
    /*
     * Cargar la imagen de fondo.
     * Usamos '../' para "subir" un nivel desde la carpeta 'css' 
     * y luego "bajar" a la carpeta 'imagen'.
     *
     * Actualizado a .JPG en mayúsculas según tu solicitud.
     */
    background-image: url('../imagen/maternitas.jpg');

    /* MODIFICADO: Se elimina 'background-size: cover;' para permitir la repetición */
    /* background-size: cover; */

    /* MODIFICADO: Permite que la imagen se repita */
    background-repeat: repeat;

    /* Fija la imagen para que no se mueva al hacer scroll */
    background-attachment: fixed;

    /* Centra la imagen */
    background-position: center center;

    /* NUEVO: Asegurar que el fondo cubra al menos toda la altura de la ventana */
    min-height: 100vh;

    /* MODIFICADO: Un 'overlay' más limpio y profesional */
    background-color: rgba(240, 245, 255, 0.8);
    /* Tinte azulado muy claro */
    background-blend-mode: overlay;

    /* NUEVO: Aplicar la fuente profesional a toda la página */
    font-family: 'Inter', sans-serif;
}

/* NUEVO: Contenedor principal para el efecto "frosted glass" */
.content-wrapper {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 15px;
    /* Bordes más redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Efecto "frosted glass" (opcional, pero se ve muy bien) */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/* Estilo para que los botones de especialidad tengan un efecto al pasar el mouse */
.btn-lg {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Sombra gris claro persistente para los botones */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: 700;
    /* Texto de botón más fuerte */
}

.btn-lg:hover {
    transform: translateY(-5px);
    /* Sombra un poco más pronunciada en hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* NUEVO: Botón personalizado Maternitas (Celeste claro con gris) */
.btn-maternitas {
    background-color: #99ccff;
    /* Color solicitado por el usuario */
    color: #000000;
    /* Texto negro para mejor contraste con este azul */
    border: 1px solid #7eb9ff;
    /* Borde un poco más oscuro */
}

.btn-maternitas:hover {
    background-color: #80bfff;
    /* Un poco más oscuro al pasar el mouse */
    color: #000000;
    border-color: #66b2ff;
}

/* NUEVO: Botón 'Volver' personalizado */
.btn-volver {
    background-color: #99ccff;
    color: #000000;
    /* Letra negra */
    border: 1px solid #7eb9ff;
}

.btn-volver:hover {
    background-color: #80bfff;
    color: #000000;
    /* Letra negra */
    border-color: #66b2ff;
}

/* Estilo para las tarjetas de doctor */
.card {
    /* MODIFICADO: Se cambia 'border: none;' por un borde rojo */
    border: 2px solid #dc3545;
    /* Borde rojo (color 'danger' de Bootstrap) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Sombra gris claro para la tarjeta */
    transition: transform 0.2s ease;
}

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

/* NUEVA REGLA: Sombra gris claro para las imágenes de doctores (circulares) */
.card img.rounded-circle {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}