/* ============================================================
   Ajustes responsive para móvil — Dr. José Miguel Donoso
   Archivo propio (no generado por WordPress/Divi).
   ============================================================ */

/* ------------------------------------------------------------
   HERO / SLIDER (#home-destacado) en teléfonos (<= 767px)

   Problema original en móvil:
   - La imagen del hero es muy panorámica (2970x996, ~3:1). En
     una caja angosta con `background-size:cover` centrado sólo
     se veía el centro VACÍO (blanco) y el doctor, que está a la
     derecha, quedaba recortado.
   - El título del slide estaba oculto (.et-hide-mobile), por lo
     que el hero se veía como un recuadro blanco con un botón.
   - La descripción conservaba padding 100px vertical y
     padding-right:50%, apretando el contenido a la izquierda.

   Solución: hero con altura adecuada, se muestra al doctor
   (posición derecha), degradado inferior para legibilidad y el
   título se revela en blanco, centrado sobre el degradado.
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {

  /* Asegurar ancho completo: el slider a veces quedaba en ~217px
     (columna sin resetear a 100% en móvil), dejando la foto y el
     texto comprimidos a la izquierda. */
  #home-destacado .et_pb_column {
    width: 100% !important;
    float: none !important;
  }
  #home-destacado .et_pb_slider,
  #home-destacado .et_pb_slides,
  #home-destacado .et_pb_slide {
    width: 100% !important;
  }

  /* Altura real del hero para que la foto tenga espacio */
  #home-destacado .et_pb_slider,
  #home-destacado .et_pb_slide {
    min-height: 340px !important;
  }

  /* La foto cubre el área; el slide 0 (doctor) se ancla a la
     derecha para que se vea a la persona y no el espacio blanco */
  #home-destacado .et_pb_slide {
    background-size: cover !important;
  }
  #home-destacado .et_pb_slide_0_tb_body {
    background-position: right center !important;
  }

  /* Degradado inferior: garantiza contraste del texto blanco
     sobre cualquier zona de la imagen */
  #home-destacado .et_pb_slide::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0) 30%,
                rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Revelar el título que Divi oculta en móvil (sólo en el hero) */
  #home-destacado .et_pb_slide_content.et-hide-mobile {
    display: block !important;
  }

  /* Contenido alineado abajo, sin el padding roto */
  #home-destacado .et_pb_slide_description {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    box-sizing: border-box;
    padding: 0 22px 26px !important;
  }

  /* Título legible en blanco */
  #home-destacado .et_pb_slide_content h2,
  #home-destacado .et_pb_slide_content h2 strong {
    color: #ffffff !important;
  }
  #home-destacado .et_pb_slide_content h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    margin: 0 0 14px !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }

  /* Botón "Ver más" centrado */
  #home-destacado .et_pb_button_wrapper {
    text-align: center !important;
  }
}