/* ==========================================================================
   CONFIGURACIÓN DEL FONDO GENERAL
   ========================================================================== */
body {
    background-image: url('../img/fondoDePagina.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2b2b2b;
}

/* ==========================================================================
   ESTILO DEL LOGO EN LA BARRA DE NAVEGACIÓN
   ========================================================================== */
.logo-nav {
    height: 40px;
    width: auto;
    border-radius: 6px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-nav:hover {
    transform: scale(1.05); 
}

/* ==========================================================================
   SECCIONES Y CONTENEDORES
   ========================================================================== */
section {
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-light {
    background-color: rgba(248, 249, 250, 0.5) !important;
    backdrop-filter: blur(6px);
}

/* ==========================================================================
   TARJETAS (CARDS)
   ========================================================================== */
.card-tratamiento, .card {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important;
}

.card-tratamiento:hover, .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.card-img-top {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

/* ==========================================================================
   PESTAÑAS (NAV PILLS)
   ========================================================================== */
.nav-pills .nav-link {
    color: #4a4a4a;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    padding: 10px 20px;
    transition: all 0.2s;
}

.nav-pills .nav-link.active {
    background-color: #212529 !important;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Botón flotante de Instagram estilo circular */
.btn-instagram-flotante {
    position: fixed;
    bottom: 80px; /* Se ubica un poco más arriba que el de WhatsApp para no taparse */
    right: 20px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto sutil al pasar el mouse */
.btn-instagram-flotante:hover {
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.btn-whatsapp-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-whatsapp-flotante:hover {
    transform: scale(1.1);
    color: white;
    background-color: #20ba5a;
}