body {
    background-color: #f0f0f0;
  }

h1,h2,h3.h4,h5,h5,p,a{
    font-family: "Poppins", sans-serif;
    
  }
  
#map {
      height: 500px;   /* Altura del mapa */
      width: 100%;     /* Ocupa todo el ancho */
      border-radius: 15px; /* Bordes redondeados opcional */
    }  

/* Clase de animación del rebote */
.bounce {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-30px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}



.leaflet-popup-content {
      margin: 0; /* quitar margen extra de leaflet */
    }
.custom-card img {
      border-radius: 8px 8px 0 0; /* esquinas redondeadas solo arriba */
    }

 /* uniformar tamaño de las imágenes en los popups */
    .popup-img {
      width: 100%;         /* siempre ocupa todo el ancho del card */
      height: 210px;       /* 👈 altura fija para todas las imágenes */
      object-fit: cover;   /* recorta la imagen sin deformarla */
      border-radius: 8px 8px 0 0;}    

.nav-link {
  transition: all 0.3s ease;
}
.nav-link:hover {
  color: #ffc107 !important; /* amarillo elegante */
  transform: translateY(-2px);
}

.list-group-item:hover {
    background-color: #e6f4ea;
    color: #155724;
    transition: 0.3s;
  }
  .list-group-item i {
    font-size: 1.2rem;
  }

  .especialidad-card {
    cursor: pointer;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.3s;
  }

  .especialidad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.25);
  }

  .especialidad-card.aparecer {
    transform: translateY(0);
    opacity: 1;
  }

  .icono-animado {
    display: inline-block;
    animation: bounce 2s infinite;
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .badge-animada {
    display: inline-block;
    animation: pulse 1.5s infinite;
  }

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

  .text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  }

 

  .hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  }

  /*NOSOTROS*/
  .hover-shadow:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.3) !important;
}

/* Botón WhatsApp degradado */
.btn-gradient {
  background: linear-gradient(45deg, #28a745, #218838);
  border: none;
  color: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-gradient:hover {
  transform: scale(1.08);
  box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.4);
}

/* Iconos scroll */
.icono-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}
.icono-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Flotación continua para iconos */
.float-icon {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Tooltips */
.tooltip-icon {
  position: relative;
  cursor: pointer;
}
.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #155724;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.tooltip-icon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

/* Badges */
.badge {
  font-size: 0.9rem;
}

/* Imágenes */
.card img {
  border-radius: 15px;
  box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.2);
}
.blockquote-footer cite {
  font-weight: 500;
  color: #155724;
}

/*contacto*/
.animate-badge { animation: bounceBadge 2s infinite; }
@keyframes bounceBadge {0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* Botones gradiente hover */
.btn-gradient {
  background: linear-gradient(135deg, #00d084, #00cec9);
  color: #fff; border: none; transition: transform 0.3s, box-shadow 0.3s;
}
.btn-gradient:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.25);
}

/* Tarjetas hover */
.card-hover { transition: transform 0.3s, box-shadow 0.3s; }
.card-hover:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 0 2rem rgba(0,0,0,0.25); }

/* Iconos flotantes */
.icono-flotante { animation: float 3s ease-in-out infinite; }
@keyframes float {0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* Redes sociales glow */
.redes-glow:hover { box-shadow: 0 0 1rem #00d1b2, 0 0 2rem #00d1b2; }

/* Staggered */
.scroll-stagger { overflow: hidden; }
.stagger-item { opacity: 0; transform: translateY(40px); transition: all 0.6s ease-out; }
.stagger-item.show { opacity: 1; transform: translateY(0); }

/* Responsive mejorado */
@media (max-width: 992px){
  .card-hover { margin-bottom: 15px; }
}

 /* Estilo por defecto (modo claro) */
  .footer-link {
    color: #0d6efd; /* Azul Bootstrap */
    text-decoration: none;
  }
  .footer-link:hover {
    text-decoration: underline;
  }

  /* Modo oscuro */
  @media (prefers-color-scheme: dark) {
    footer {
      background-color: #212529 !important; /* bg-dark */
      color: #f8f9fa !important;           /* text-light */
      border-top: 1px solid #495057 !important;
    }
    .footer-link {
      color: #66b2ff; /* Azul más claro para contraste */
    }
    .footer-link:hover {
      color: #99ccff;
    }
  }

  /* Efecto hover en el card */
  .profesional-card {
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
  }

  .profesional-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 128, 0, 0.2);
    border-color: #25d366;
  }

  /* Efecto solo en el nombre */
  .profesional-card h6:hover {
    color: #25d366;
    transition: color 0.3s ease;
  }

  @keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-7px); }
}

.bounce {
  animation: bounce 0.6s;
}

.sidebar {
  max-height: 100vh;
  overflow-y: auto;
}