/* Fuente y colores generales */
body {
  font-family: Arial, sans-serif;
  color: #003366; /* Azul oscuro para texto */
  background-color: #f0f8ff; /* Celeste pálido */
  margin: 0;
  padding: 0;
}
/* Encabezado */
header {
  background-color: #e6f2f9; /* Celeste claro */
}
header .navbar-brand {
  color: #003366;
  font-weight: bold;
}
header .nav-link {
  color: #003366;
}
header .nav-link:hover {
  color: #0099cc;
}
/* =====================================================
HERO / CARRUSEL PRINCIPAL
===================================================== */
#heroCarousel {
position: relative;
}
#heroCarousel .carousel-item {
height: 600px;
transition: transform 0.8s ease-in-out;
}
#heroCarousel .carousel-item img {
width: 100%;
height: 600px;
object-fit: cover;
object-position: center;
}
/* Capa oscura sobre las imágenes */
#heroCarousel .carousel-item::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
/* Contenido del Hero */
#heroCarousel .carousel-caption {
position: absolute;
z-index: 2;
top: 50%;
left: 10%;
right: 10%;
bottom: auto;
transform: translateY(-50%);
text-align: center;
}
/* Título del Hero */
#heroCarousel h1 {
color: #ffffff;
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
}
/* Nombre de la clínica */
#heroCarousel .carousel-caption p.text-uppercase {
color: #DFF6FF;
font-weight: 600;
text-shadow:
0 2px 5px rgba(228, 230, 255, 0.7);
}
/* Texto del Hero */
#heroCarousel .carousel-caption p.lead {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 25px;
}
/* Descripción */
#heroCarousel .carousel-caption p.lead {
color: #F1F5F9;
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 25px;
text-shadow:
0 2px 5px rgba(0, 0, 0, 0.75);
}
/* =====================================================
BOTONES
===================================================== */
.btn-primary {
background-color: #0099cc;
border: none;
}
.btn-primary:hover {
background-color: #0077aa;
}
.btn-outline-light:hover {
background-color: #ffffff;
color: #003366;
}
/* =====================================================
TARJETAS DE SERVICIOS
===================================================== */
.service-card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
height: 100%;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Efecto Hover */
.service-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 12px 25px rgba(0, 0, 0, 0.18);
}
/* Imagen de las tarjetas */
.service-card img {
width: 100%;
height: 250px;
object-fit: cover;
transition:
transform 0.4s ease;
}
/* Zoom de imagen */
.service-card:hover img {
transform: scale(1.05);
}
/* Título de las tarjetas */
.service-card h5 {
color: #003366;
font-weight: bold;
text-align: center;
}
/* Contenido de las tarjetas */
.service-card .card-body {
display: flex;
flex-direction: column;
padding: 20px;
}
/* Sección de presentación */
section h2 {
  color: #003366;
  font-weight: bold;
}
section p {
  color: #333333;
}
/* Tarjetas de servicios */
.card {
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  height: 100%;
}
.card img {
  width: 100%;
  height: 250px;      /* Misma altura para todas */
  object-fit: cover;  /* Recorta sin deformar */
}
.card h5 {
  color: #003366;
  font-weight: bold;
  text-align: center;
}
.card-body {
  display: flex;
  flex-direction: column;
}
/* ==================== TARJETAS DE SERVICIOS ==================== */
.card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
height: 100%;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Efecto al pasar el mouse */
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
}
/* Imágenes de las tarjetas */
.card img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.4s ease;
}
/* Zoom suave de la imagen */
.card:hover img {
transform: scale(1.05);
}
/* Títulos */
.card h5 {
color: #003366;
font-weight: bold;
text-align: center;
}
/* Contenido */
.card-body {
display: flex;
flex-direction: column;
padding: 20px;
}
/* Testimonios */
.carousel-item h5 {
  color: #003366;
  font-weight: bold;
}
.carousel-item p {
  font-style: italic;
  color: #333333;
}
/* Formulario */
form .form-control {
  border-radius: 5px;
  border: 1px solid #0099cc;
}
form button {
  background-color: #0099cc;
  border: none;
}
form button:hover {
  background-color: #0077aa;
}
/* Footer */
footer {
  background-color: #003366;
  color: #ffffff;
}
footer h5 {
  font-weight: bold;
}
footer a {
  color: #ffffff;
  text-decoration: none;
}
footer a:hover {
  color: #0099cc;
}
/* =====================================================
   CARRUSEL DE MÉDICOS
===================================================== */
.doctor-carousel {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
/* =====================================================
   TARJETAS DE MÉDICOS
===================================================== */
.doctor-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 500px;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%) scale(0.78);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease,
    box-shadow 0.5s ease;
}
/* =====================================================
   TARJETA CENTRAL
===================================================== */
.doctor-card.doctor-center {
  z-index: 3;
  transform:
    translate(-50%, -50%)
    scale(1);
  opacity: 1;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.25);
}
/* =====================================================
   HOVER SOLO DE LA TARJETA CENTRAL
===================================================== */
.doctor-card.doctor-center:hover {
  transform:
    translate(-50%, -50%)
    scale(1.05);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.30);
}
/* =====================================================
   TARJETA IZQUIERDA
===================================================== */
.doctor-card.doctor-left {
  z-index: 2;
  transform:
    translate(calc(-50% - 330px), -50%)
    scale(0.78);
  opacity: 0.75;
}
/* =====================================================
   TARJETA DERECHA
===================================================== */
.doctor-card.doctor-right {
  z-index: 2;
  transform:
    translate(calc(-50% + 330px), -50%)
    scale(0.78);
  opacity: 0.75;
}
/* =====================================================
   IMPORTANTE:
   LAS TARJETAS LATERALES NO TIENEN HOVER
===================================================== */
/* =====================================================
   IMAGEN DEL MÉDICO
===================================================== */
.doctor-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
/* =====================================================
   INFORMACIÓN
===================================================== */
.doctor-info {
  padding: 25px;
  text-align: center;
}
.doctor-info h4 {
  color: #003366;
  font-weight: bold;
  margin-bottom: 8px;
}
.doctor-info .specialty {
  color: #0099cc;
  font-weight: 600;
  margin-bottom: 15px;
}
.doctor-info p {
  color: #666666;
}
/* =====================================================
   FLECHAS
===================================================== */
.doctor-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #0099cc;
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
/* Flecha izquierda */
.doctor-prev {
  left: 30px;
}
/* Flecha derecha */
.doctor-next {
  right: 30px;
}
/* Hover de las flechas */
.doctor-arrow:hover {
  background-color: #0077aa;
  transform:
    translateY(-50%)
    scale(1.1);
}
/* =====================================================
   INDICADORES DEL CARRUSEL DE MÉDICOS
===================================================== */
.doctor-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
/* Cada círculo */
.doctor-indicator {
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background-color: #eeeeee;
  border: 2px solid #000000;
  opacity: 1;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
/* Círculo activo */
.doctor-indicator.active {
  background-color: #0099cc;
  transform: scale(1.15);
}
/* Hover */
.doctor-indicator:hover {
  background-color: #bdefff;
  transform: scale(1.1);
}
/* =====================================================
   CARRUSELES DE MÉDICOS
===================================================== */
.doctor-carousel {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
}
/* =====================================================
   TARJETAS DE MÉDICOS
===================================================== */
.doctor-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 500px;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
/* =====================================================
   TARJETA CENTRAL
===================================================== */
.doctor-card.doctor-center {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform:
    translate(-50%, -50%);
}
/* =====================================================
   TARJETA IZQUIERDA
===================================================== */
.doctor-card.doctor-left {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform:
    translate(calc(-50% - 360px), -50%);
}
/* =====================================================
   TARJETA DERECHA
===================================================== */
.doctor-card.doctor-right {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform:
    translate(calc(-50% + 360px), -50%);
}
/* =====================================================
   TARJETAS OCULTAS
===================================================== */
.doctor-card.doctor-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform:
    translate(-50%, -50%);
}
/* =====================================================
   IMAGEN DEL MÉDICO
===================================================== */
.doctor-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
/* =====================================================
   INFORMACIÓN DEL MÉDICO
===================================================== */
.doctor-info {
  padding: 25px;
  text-align: center;
}
.doctor-info h4 {
  color: #003366;
  font-weight: bold;
  margin-bottom: 8px;
}
/* Especialidad */
.doctor-info .doctor-specialty {
  color: #0099cc;
  font-weight: 600;
  margin-bottom: 15px;
}
/* Descripción */
.doctor-info p {
  color: #666666;
  margin-bottom: 10px;
}
/* =====================================================
   REPUTACIÓN
===================================================== */
.doctor-rating {
  color: #0099cc;
  font-size: 1.1rem;
  margin-top: 10px;
}
/* =====================================================
   FLECHAS
===================================================== */
.doctor-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #0099cc;
  color: #ffffff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
/* Flecha izquierda */
.doctor-prev {
  left: 30px;
}
/* Flecha derecha */
.doctor-next {
  right: 30px;
}
/* Hover de flechas */
.doctor-arrow:hover {
  background-color: #0077aa;
  transform:
    translateY(-50%)
    scale(1.1);
}
/* =====================================================
   INDICADORES
===================================================== */
.doctor-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
/* Cada círculo */
.doctor-indicator {
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background-color: #eeeeee;
  border: 2px solid #000000;
  opacity: 1;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
/* Círculo seleccionado */
.doctor-indicator.active {
  background-color: #bdefff;
  border-color: #000000;
  transform: scale(1.15);
}
/* Hover del indicador */
.doctor-indicator:hover {
  background-color: #d9f7ff;
  transform: scale(1.1);
}