/* Ajustes generales para pantallas pequeñas */
@media (max-width: 992px) {
  /* Encabezado */
  header .navbar-brand {
    font-size: 1rem;
  }

  header .nav-link {
    font-size: 0.9rem;
    padding: 8px;
  }

  /* Hero */
  .hero {
    height: 50vh;
    text-align: center;
    padding: 20px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  /* Servicios */
  .card h5 {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  /* Banner principal */
  .hero {
    background-position: top;
    height: auto;
    padding: 40px 20px;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  /* Sección presentación */
  section h2 {
    font-size: 1.4rem;
  }

  section p {
    font-size: 0.9rem;
  }

  /* Servicios: de 3 columnas a 2 */
  .card {
    margin-bottom: 20px;
  }

  .row.g-4 .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Footer */
  footer .col-md-4 {
    margin-bottom: 20px;
    text-align: center;
  }
}

@media (max-width: 576px) {
  /* Servicios: de 2 columnas a 1 */
  .row.g-4 .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Formulario */
  form .form-control {
    font-size: 0.9rem;
  }

  form button {
    width: 100%;
  }

  /* Footer */
  footer {
    text-align: center;
  }

  footer h5 {
    font-size: 1rem;
  }
}
/* =====================================================
   RESPONSIVE - CARRUSEL DE MÉDICOS
===================================================== */


/* ==========================================
   PANTALLAS MEDIANAS
   Hasta 992px
========================================== */

@media (max-width: 992px) {

  .doctor-carousel {
    height: 560px;
  }

  .doctor-card {
    width: 280px;
    height: 450px;
  }

  .doctor-img {
    height: 250px;
  }

  /* Tarjeta izquierda */

  .doctor-card.doctor-left {
    transform:
      translate(calc(-50% - 250px), -50%)
      scale(0.78);

    opacity: 0.75;
  }

  /* Tarjeta derecha */

  .doctor-card.doctor-right {
    transform:
      translate(calc(-50% + 250px), -50%)
      scale(0.78);

    opacity: 0.75;
  }

}


/* ==========================================
   TABLETS Y PANTALLAS PEQUEÑAS
   Hasta 768px
========================================== */

@media (max-width: 768px) {

  .doctor-carousel {
    height: 540px;
  }

  .doctor-card {
    width: 280px;
    height: 440px;
  }

  .doctor-img {
    height: 240px;
  }

  /*
    Las tarjetas laterales se acercan
    al centro para aprovechar el espacio.
  */

  .doctor-card.doctor-left {
    transform:
      translate(calc(-50% - 190px), -50%)
      scale(0.70);

    opacity: 0.55;
  }

  .doctor-card.doctor-right {
    transform:
      translate(calc(-50% + 190px), -50%)
      scale(0.70);

    opacity: 0.55;
  }

  /* Flecha izquierda */

  .doctor-prev {
    left: 5px;
  }

  /* Flecha derecha */

  .doctor-next {
    right: 5px;
  }

}


/* ==========================================
   MÓVILES
   Hasta 576px
========================================== */

@media (max-width: 576px) {

  .doctor-carousel {
    height: 520px;
  }

  .doctor-card {
    width: 270px;
    height: 430px;
  }

  .doctor-img {
    height: 230px;
  }

  .doctor-info {
    padding: 18px;
  }

  /*
    En móviles ya no hay suficiente espacio
    para mostrar 3 tarjetas correctamente.
    Se muestra únicamente la central.
  */

  .doctor-card.doctor-left,
  .doctor-card.doctor-right {
    opacity: 0;
    pointer-events: none;
  }

  /* Flechas */

  .doctor-arrow {
    width: 42px;
    height: 42px;

    font-size: 1.2rem;
  }

  .doctor-prev {
    left: 5px;
  }

  .doctor-next {
    right: 5px;
  }

}


/* ==========================================
   MÓVILES PEQUEÑOS
   Hasta 400px
========================================== */

@media (max-width: 400px) {

  .doctor-card {
    width: 250px;
    height: 420px;
  }

  .doctor-img {
    height: 220px;
  }

  .doctor-info {
    padding: 15px;
  }

  .doctor-info h4 {
    font-size: 1.1rem;
  }

  .doctor-info p {
    font-size: 0.9rem;
  }

}