.courses-image {
     position: relative;
 }

 .courses-image img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* Overlay (solo afecta al bloque de desktop, que en móvil está oculto) */
 .figure-caption {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     padding: clamp(12px, 3vw, 40px);
     pointer-events: none;
 }

 .figure-caption--left {
     justify-content: flex-start;
 }

 .figure-caption--right {
     justify-content: flex-end;
 }

 .figure-caption .cap-box {
     pointer-events: auto;
     width: min(520px, 46%);
 }

 .figure-caption--left .cap-box {
     margin-left: clamp(8px, 3vw, 48px);
 }

 .figure-caption--right .cap-box {
     margin-right: clamp(8px, 3vw, 48px);
 }

 .caption-title {
     color: #1F1E5A;
     line-height: 1.2;
     font-size: clamp(22px, 2.2vw + 10px, 36px);
     margin: 0 0 8px;
 }

 .caption-text {
     color: #333;
     margin: 0;
     font-size: clamp(14px, 1vw + 10px, 18px);
     text-align: justify;
 }

 /* Estilos del bloque móvil */
 .courses-image-mobile {
     width: 100%;
 }

 .mobile-hero {
     display: block;
     width: 100%;
     height: auto;
 }

 /* Opcional: separa la sección del bloque superior en móviles */
 @media (max-width: 991.98px) {
     .courses-details-section {
         padding-top: 24px !important;
     }
 }

 .clinic-schedule {
     --primary: #1F1E5A;
     --chip: #EEF4FF;
     --accent1: #ff4d4d;
     --accent2: #ff7a59;
 }

 .clinic-schedule .clinic-hours {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 /* Tarjeta */
 .clinic-schedule .hour {
     position: relative;
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     border-radius: 14px;
     background: linear-gradient(180deg, #fff, #fafbff);
     border: 1px solid #e9edf7;
     box-shadow: 0 8px 18px rgba(31, 30, 90, .06);
     transition: transform .2s ease, box-shadow .2s ease;
 }

 .clinic-schedule .hour:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 28px rgba(31, 30, 90, .12);
 }

 /* barrita decorativa */
 .clinic-schedule .hour::before {
     content: "";
     position: absolute;
     left: 0;
     top: 10px;
     bottom: 10px;
     width: 4px;
     border-radius: 999px;
     background: linear-gradient(180deg, var(--accent1), var(--accent2));
     opacity: .8;
 }

 /* iconito */
 .clinic-schedule .ico {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #fff5f5;
     color: #ff6a5a;
     box-shadow: inset 0 0 0 1px #ffd1d1;
 }

 /* texto */
 .clinic-schedule .day {
     margin: 0;
     font-weight: 800;
     color: #0f172a;
     line-height: 1.2;
 }

 .clinic-schedule .spec {
     display: inline-flex;
     align-items: center;
     margin-top: 2px;
     padding: 4px 10px;
     font-size: 12px;
     font-weight: 700;
     color: var(--primary);
     background: var(--chip);
     border-radius: 999px;
 }

 /* horarios a la derecha */
 .clinic-schedule .times {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     justify-self: end;
 }

 .clinic-schedule .time-pill {
     display: inline-flex;
     align-items: center;
     padding: 6px 10px;
     border-radius: 999px;
     background: #f1f5ff;
     color: #1e266d;
     font-weight: 700;
     font-size: 12px;
 }

 /* responsive */
 @media (max-width:575.98px) {
     .clinic-schedule .hour {
         grid-template-columns: auto 1fr
     }

     .clinic-schedule .times {
         justify-self: start;
         margin-top: 6px
     }
 }

 @media (max-width: 991.98px) {
     section.breadcrumb-wrapper.style-2 .page-heading {
         padding: 20px 0 110px !important;
     }
 }

 .appointment-form select.category {
     -webkit-appearance: auto !important;
     -moz-appearance: auto !important;
     appearance: auto !important;
     background-image: none !important;
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
     position: static !important;

     height: 48px;
     border: 1px solid #DFE3E8;
     border-radius: 10px;
     padding: 10px 12px;
     font-size: 16px;
     color: #1F2A37;
     box-shadow: none;
 }

 .appointment-form select.category:focus {
     border-color: #8AA8FF;
     box-shadow: 0 0 0 4px rgba(58, 108, 217, .12);
     outline: none;
 }


 .appointment-form select.category+.nice-select {
     display: none !important;
 }


 .appointment-form select.category option {
     background: #fff;
     color: #1F2A37;
     font-weight: normal;
 }

 .category {
     width: 100%;
     padding: 10px 12px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 16px;
     color: #555;
     background-color: #fff;
 }

 .category option {
     background-color: #fff;
     color: #333;
     font-weight: normal;
 }

 .list-item li {
     font-weight: normal !important;
 }

 /* ✅ Evita que el contenido (Área de Tópico hacia abajo) se monte sobre el hero en móvil */
 @media (max-width: 768px) {

     /* Asegura que el contenido quede debajo del rectángulo azul */
     .courses-details-wrapper {
         margin-top: 0 !important;
     }

     /* Por si tu tema usa desplazamiento en vez de margin */
     .courses-details-wrapper,
     .courses-details-section {
         top: auto !important;
         transform: none !important;
     }

     /* Dale un respiro arriba y fuerza fondo blanco para que no "se vea" el azul detrás */
     .courses-details-section {
         padding-top: 24px !important;
         background: #fff;
         position: relative;
         z-index: 2;
     }

     /* (Opcional pero recomendado) ese margin-left fijo rompe mobile */
     .breadcrumb-items {
         margin-left: 20% !important;
         justify-content: center;
         flex-wrap: wrap;
     }

     section.breadcrumb-wrapper.style-2 .page-heading {
         padding: 40px 0 40px !important;
     }

     .clinic-schedule .clinic-hours {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     /* tarjeta */
     .clinic-schedule .clinic-hours .hour {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 12px 14px 12px 18px;
         border-radius: 16px;
         position: relative;
         overflow: hidden;
     }

     /* barrita vertical izquierda */
     .clinic-schedule .clinic-hours .hour::before {
         content: "";
         position: absolute;
         left: 0;
         top: 10px;
         bottom: 10px;
         width: 4px;
         border-radius: 4px;
         background: #ff6b6b;
         /* ajusta si tu tema usa otro color */
     }

     /* circulito del check */
     .clinic-schedule .clinic-hours .hour .ico {
         flex: 0 0 auto;
         width: 38px;
         height: 38px;
         border-radius: 999px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     /* bloque "Lunes" + "Psicología" (es el 2do div del li) */
     .clinic-schedule .clinic-hours .hour>div:nth-child(2) {
         display: flex;
         flex-direction: column;
         gap: 6px;
         min-width: 0;
     }

     .clinic-schedule .clinic-hours .hour .day {
         margin: 0;
         line-height: 1.1;
     }

     .clinic-schedule .clinic-hours .hour .spec {
         display: inline-flex;
         align-self: flex-start;
         padding: 6px 10px;
         border-radius: 999px;
         white-space: nowrap;
     }

     /* bloque de horas a la derecha */
     .clinic-schedule .clinic-hours .hour .times {
         margin-left: auto;
         display: flex;
         gap: 10px;
         justify-content: flex-end;
         align-items: center;
         flex-wrap: wrap;
         /* si no entra, baja manteniendo alineación */
     }

     .clinic-schedule .clinic-hours .hour .time-pill {
         white-space: nowrap;
     }

     .appointment-form .theme-btn {
         display: block !important;
         margin: 16px auto 0 !important;
         /* auto = centrado */
         width: 100% !important;
         max-width: 360px;
         /* mantiene el tamaño que querías */
         text-align: center;
     }

     .mobile-center-title{
    text-align: center !important;
  }
 }