/* --- Estructura del Header --- */
       /* --- Header Base --- */
       .main-header-modern {
           position: fixed;
           /* Se mantiene arriba siempre */
           top: 0;
           left: 0;
           width: 100%;
           z-index: 1000;
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           padding: 20px 0;
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
           /* Efecto cristal moderno */
           border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       }

       /* --- Estado cuando el usuario hace Scroll --- */
       .main-header-modern.scrolled {
           padding: 10px 0;
           /* Se hace más delgado */
           background: #ffffff;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       }

       .nav-container {
           max-width: 1300px;
           margin: 0 auto;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 30px;
       }

       /* --- Logo Animado --- */
       .logo-img {
           height: 55px;
           transition: height 0.3s ease;
       }

       .scrolled .logo-img {
           height: 45px;
           /* El logo se achica un poco al bajar */
       }

       /* --- Menú Estilo "Underline" --- */
       .nav-links {
           display: flex;
           list-style: none;
           gap: 35px;
           margin: 0;
       }

       .nav-links a {
           text-decoration: none;
           color: #333;
           font-weight: 700;
           font-size: 0.9rem;
           text-transform: uppercase;
           position: relative;
           padding: 5px 0;
       }

       .nav-links a::after {
           content: '';
           position: absolute;
           width: 0;
           height: 2px;
           bottom: 0;
           left: 0;
           background-color: #1e3c72;
           /* Tu azul principal */
           transition: width 0.3s ease;
       }

       .nav-links a:hover::after,
       .nav-links a.active::after {
           width: 100%;
       }

       /* --- Botón con Efecto Inversión --- */
       .btn-panel-modern {
           background: #1e3c72;
           color: #fff;
           padding: 12px 28px;
           border-radius: 50px;
           font-weight: 700;
           text-decoration: none;
           display: flex;
           align-items: center;
           gap: 8px;
           border: 2px solid #1e3c72;
           transition: all 0.3s ease;
       }

       .btn-panel-modern:hover {
           background: transparent;
           color: #1e3c72;
       }
       /* --- Estructura de nombre negocio --- */

       .listing-deails__center-title {
           display: inline-block;
           /* Crítico para este efecto */
           text-align: center;
           width: auto;
           /* Permite que el elemento tenga el ancho de la palabra */
           margin: 30px auto 10px auto;
           /* Centrado manual */
           position: relative;
           /* Necesario para el pseudo-elemento */

           font-family: 'Poppins', sans-serif;
           font-size: clamp(22px, 5vw, 32px);
           font-weight: 800;
           color: #1a202c;
           text-transform: uppercase;
           letter-spacing: 1.5px;
           line-height: 1.2;
           cursor: pointer;
           transition: color 0.4s ease;
           /* Suaviza el cambio de color */
       }

       /* EL "PRO" HOVER: Pseudo-elemento ::after */
       .listing-deails__center-title::after {
           content: '';
           position: absolute;
           width: 60px;
           /* Ancho base del separador */
           height: 5px;
           /* Altura del separador */
           background: linear-gradient(90deg, #28a745, #34ce57);
           border-radius: 50px;
           bottom: -15px;
           /* Separación debajo del texto */
           left: 50%;
           transform: translateX(-50%);
           /* Lo centra perfectamente */

           /* TRANSICIÓN: Aquí está la magia */
           transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
           box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
           opacity: 1;
       }

       /* ESTADOS HOVER */
       .listing-deails__center-title:hover {
           color: #28a745;
           /* Cambia el color del texto a verde */
       }

       /* Al hacer hover, el subrayado crece a todo el ancho del nombre */
       .listing-deails__center-title:hover::after {
           width: 100%;
           /* Crece de 60px al 100% del ancho del texto */
           box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
           border-radius: 2px;
           /* Se vuelve un poco más cuadrado al crecer */
       }

       /* 2. SEPARADOR DE DISEÑO (SUBRAYADO CENTRADO) */
       .title-separator {
           width: 60px;
           height: 5px;
           background: linear-gradient(90deg, #28a745, #34ce57);
           /* Degradado verde deportivo */
           margin: 0 auto 40px auto;
           border-radius: 50px;
           box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
       }

       /* 3. AJUSTES DE CONTENEDOR PARA MÓVIL */
       @media (max-width: 768px) {
           .listing-deails__center-title {
               margin-top: 20px;
               margin-bottom: 8px;
               padding: 0 15px;
               /* Evita que el texto toque los bordes en celulares */
           }

           .title-separator {
               width: 40px;
               margin-bottom: 30px;
           }
       }




       /* --- Header Base --- */
       .main-header-modern {
           position: fixed;
           /* Se mantiene arriba siempre */
           top: 0;
           left: 0;
           width: 100%;
           z-index: 1000;
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           padding: 20px 0;
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
           /* Efecto cristal moderno */
           border-bottom: 1px solid rgba(0, 0, 0, 0.05);
       }

       /* --- Estado cuando el usuario hace Scroll --- */
       .main-header-modern.scrolled {
           padding: 10px 0;
           /* Se hace más delgado */
           background: #ffffff;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       }

       .nav-container {
           max-width: 1300px;
           margin: 0 auto;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 30px;
       }

       /* --- Logo Animado --- */
       .logo-img {
           height: 55px;
           transition: height 0.3s ease;
       }

       .scrolled .logo-img {
           height: 45px;
           /* El logo se achica un poco al bajar */
       }

       /* --- Menú Estilo "Underline" --- */
       .nav-links {
           display: flex;
           list-style: none;
           gap: 35px;
           margin: 0;
       }

       .nav-links a {
           text-decoration: none;
           color: #333;
           font-weight: 700;
           font-size: 0.9rem;
           text-transform: uppercase;
           position: relative;
           padding: 5px 0;
       }

       .nav-links a::after {
           content: "";
           position: absolute;
           width: 0;
           height: 2px;
           bottom: 0;
           left: 0;
           background-color: #1e3c72;
           /* Tu azul principal */
           transition: width 0.3s ease;
       }

       .nav-links a:hover::after,
       .nav-links a.active::after {
           width: 100%;
       }

       /* --- Botón con Efecto Inversión --- */
       .btn-panel-modern {
           background: #1e3c72;
           color: #fff;
           padding: 12px 28px;
           border-radius: 50px;
           font-weight: 700;
           text-decoration: none;
           display: flex;
           align-items: center;
           gap: 8px;
           border: 2px solid #1e3c72;
           transition: all 0.3s ease;
       }

       .btn-panel-modern:hover {
           background: transparent;
           color: #1e3c72;
       }

       /* IMPORTANTE: Espacio para que el contenido no empiece debajo del header */
       body {
           padding-top: 100px;
       }

       .explore-canchas-modern {
           padding: 20px 0;
           background-color: #f4f7fa;
           /* Fondo grisáceo muy suave para contraste */
       }

       /* --- Títulos --- */
       .section-title__tagline_modern {
           display: block;
           color: #1e3c72;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 2px;
           font-size: 0.85rem;
           margin-bottom: 10px;
       }

       .section-title__title_modern {
           font-size: 2.5rem;
           font-weight: 800;
           color: #111;
           margin-bottom: 50px;
       }

       /* --- La Tarjeta (Card) --- */
       .explore-card {
           background: #ffffff;
           border-radius: 16px;
           overflow: hidden;
           transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
           border: 1px solid rgba(0, 0, 0, 0.05);
           margin-bottom: 30px;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
       }

       .explore-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 15px 35px rgba(30, 60, 114, 0.15);
       }

       /* --- Footer y Botón Invertido --- */

       /* La Burbuja Individual */
       .service-bubble {
           background-color: #f5f7fa;
           /* Fondo gris suave */
           padding: 12px 20px;
           /* Espacio interno para dar forma cuadrada-suave */
           border-radius: 15px;
           /* Redondeado de las esquinas (Soft UI) */
           display: flex;
           align-items: center;
           gap: 10px;
           /* Espacio entre el check y el texto */
           transition: all 0.3s ease;
           border: 1px solid transparent;
       }

       /* El Icono de Check (Azul) */
       .service-bubble i {
           color: #1e3c72;
           /* Tu azul principal */
           font-size: 1.1rem;
       }

       /* El Texto del Servicio */
       .service-bubble span {
           color: #333;
           font-weight: 700;
           /* Texto en negrita para que resalte */
           font-size: 0.9rem;
       }

       /* Efecto al pasar el mouse */
       .service-bubble:hover {
           background-color: #ffffff;
           border-color: #1e3c72;
           /* Borde azul fino al resaltar */
           transform: translateY(-3px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       }



       /* ya estaba establecido para reserva */
       @media (min-width: 992px) {
           .col-4 h6 {
               font-size: 14px !important;
           }

           .hora-btn {
               font-size: 14px !important;
           }
       }

       .btn-reservar {
           width: 100%;
           margin-top: 20px;
           padding: 12px;
           background: #007bff;
           color: #fff;
           border-radius: 10px;
           font-weight: bold;
           border: none;
       }

       .cancha-card {
           background: #fff;
           border-radius: 20px;
           padding: 20px;
           max-width: 350px;
           margin: auto;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
           height: auto !important;
           max-height: none !important;
           /* Elimina cualquier restricción de altura */
           display: flex;
           flex-direction: column;
       }

       .horario-header {
           text-align: center;
           margin-bottom: 10px;
       }

       .horario-header span {
           font-size: 20px;
       }

       .horario-header p {
           font-size: 12px;
           margin: 0;
           font-weight: 600;
       }

       .hora-btn {
           width: 100% !important;
           padding: 0px 0 !important;
           border-radius: 6px;
           margin-bottom: 5px;
           font-size: 10px !important;
           font-weight: 700 !important;
           border: none;
           white-space: nowrap;
           text-align: center !important;
           display: block !important;
           position: relative !important;
            z-index: 999 !important;
            pointer-events: auto !important; /* Fuerza a que el botón reciba clics */
            cursor: pointer !important;
       }

       /* Estado para horas que ya pasaron (Gris) */
       .hora-btn.btn-pasado,
       .hora-btn:disabled {
           background: #e9ecef !important;
           color: #adb5bd !important;
           border: 1px solid #dee2e6 !important;
           opacity: 0.6 !important;
           pointer-events: none !important;
           transform: none !important;
           /* Evita el scale(1.05) del hover */
           box-shadow: none !important;
       }

       /* disponible */
       .btn-verde {
           background: #28a745;
           color: #fff;
       }

       .btn-verde:hover {
           background: #218838;
           transform: scale(1.05);
       }

       /* ocupada */
       .btn-rojo {
           background: #dc3545;
           color: #fff;
           opacity: 0.6;
       }

       /* pendiente */
       .btn-naranja {
           background: #fd7e14;
           color: #fff;
       }

       .col-4 h6 {
           font-size: 9px !important;
           /* Reducción agresiva para móvil */
           text-align: center;
           text-transform: uppercase;
           color: #6c757d;
           border-bottom: 2px solid #e9ecef;
           padding-bottom: 5px;
           margin-bottom: 10px;
           white-space: nowrap;
       }

       .cancha-slider {
            width: 100%;
            max-width: 600px; /* O el ancho máximo que prefieras para una sola cancha */
            margin: 0 auto;   /* Centra todo el slider en la página */
            overflow: hidden;
        }

       .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100% !important;
            flex-shrink: 0;
            pointer-events: auto;
        }


       .cancha-img {
           width: 100%;
           height: 200px;
           border-radius: 16px;
           overflow: hidden;
           margin-bottom: 15px;
       }

       .cancha-img img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .cancha-img img:hover {
           transform: scale(1.05);
       }

       .cancha-card h5 {
           text-align: center;
           font-size: 20px;
           font-weight: 700;
           margin-bottom: 15px;
       }

       .horarios .row {
           display: grid !important;
           /* Creamos 3 columnas exactas que ocupan todo el ancho */
           grid-template-columns: repeat(3, 1fr) !important;
           gap: 4px !important;
           margin: 0 !important;
           padding: 10px 0 !important;
           width: 100% !important;
           /* Esto bloquea cualquier intento de salto de línea */
           grid-auto-flow: column !important;
       }

       .horarios .row::-webkit-scrollbar {
           display: none;
       }

       .horarios .col-4 {
           /* Eliminamos las reglas de Bootstrap que causan el salto */
           flex: none !important;
           width: 100% !important;
           max-width: 100% !important;
           min-width: 0 !important;
           /* Permite que la columna se encoja lo necesario */
           padding: 0 2px !important;
       }

       .listing-details__features-box {
           background: #f4f6f9;
           padding: 15px;
           border-radius: 20px;
           height: auto !important;
           overflow: visible !important;
       }

       .hora-btn.activo {
           background: #007bff !important;
           color: #fff;
           transform: scale(1.08);
       }

       /* Contenedor Principal (Fondo oscuro) */
       .modal-custom {
           display: none;
           position: fixed;
           z-index: 2000;
           /* Asegúrate que esté por encima de todo */
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(4px);
           overflow-y: auto;
           /* Permite que el fondo también haga scroll si es necesario */
           padding: 20px 0;
           /* Espacio para que no pegue a los bordes */
       }

       /* Ajuste para la caja blanca */
       .modal-content {
           background: #ffffff;
           margin: 20px auto;
           /* Centrado con margen */
           padding: 0;
           border-radius: 20px;
           width: 90%;
           max-width: 450px;

           /* ESTO ES LO VITAL */
           max-height: calc(100vh - 40px);
           /* Altura máxima = pantalla menos 40px */
           display: flex;
           flex-direction: column;
           /* Organiza header y body en columna */
           overflow: hidden;
           /* Evita que el contenido se salga de los bordes redondeados */
       }

       @keyframes slideUp {
           from {
               transform: translateY(50px);
               opacity: 0;
           }

           to {
               transform: translateY(0);
               opacity: 1;
           }
       }

       /* Botón Cerrar */
       .close-modal {
           position: absolute;
           right: 20px;
           top: 15px;
           font-size: 28px;
           color: #fff;
           cursor: pointer;
           z-index: 10;
       }

       /* Cabecera Deportiva */
       .modal-header-restyle {
           background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
           color: white;
           padding: 30px 20px;
           text-align: center;
       }

       .modal-header-restyle h4 {
           margin: 0;
           font-size: 1.5rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 1px;
       }

       /* Contador de Tiempo */
       .timer-badge {
           background: rgba(255, 255, 255, 0.2);
           display: inline-block;
           padding: 5px 15px;
           border-radius: 50px;
           font-size: 0.9rem;
           margin-bottom: 10px;
           border: 1px solid rgba(255, 255, 255, 0.3);
       }

       #contador {
           color: #ffeb3b;
           font-weight: bold;
       }

       /* Cuerpo del Modal */

       .modal-body-restyle {
           padding: 20px;
           overflow-y: auto;
           /* SI EL CONTENIDO ES LARGO, SOLO ESTO HACE SCROLL */
           flex: 1;
           /* Ocupa el espacio restante */
       }

       /* Grid de Información */
       .info-reserva-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 15px;
           margin-bottom: 20px;
       }

       .info-item {
           display: flex;
           flex-direction: column;
       }

       .info-item label {
           font-size: 0.75rem;
           color: #888;
           text-transform: uppercase;
           margin-bottom: 2px;
       }

       .info-item span {
           font-weight: 600;
           color: #333;
       }

       /* Sección de Pago (Recibo) */
       .detalle-pago-restyle {
           background: #f8f9fa;
           border-radius: 12px;
           padding: 15px;
           border: 1px dashed #ced4da;
           margin-bottom: 20px;
       }

       .price-row {
           display: flex;
           justify-content: space-between;
           margin-bottom: 8px;
           font-size: 0.95rem;
       }

       .price-row.highlight {
           border-top: 1px solid #dee2e6;
           padding-top: 10px;
           margin-top: 5px;
           color: #28a745;
           font-weight: 800;
           font-size: 1.1rem;
       }

       .total-original {
           text-decoration: line-through;
           color: #6c757d;
       }

       .footer-nota {
           font-size: 0.75rem;
           color: #6c757d;
           margin-top: 10px;
           line-height: 1.2;
       }

       /* Inputs Personalizados */
       .input-group-custom {
           position: relative;
           margin-bottom: 12px;
       }

       .input-group-custom i {
           position: absolute;
           left: 15px;
           top: 50%;
           transform: translateY(-50%);
           color: #adb5bd;
       }

       .input-group-custom input {
           width: 100%;
           padding: 12px 15px 12px 40px;
           border: 1px solid #dee2e6;
           border-radius: 10px;
           font-size: 0.95rem;
           transition: all 0.3s;
       }

       .input-group-custom input:focus {
           outline: none;
           border-color: #2a5298;
           box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1);
       }

       /* Botón de Pago Moderno */
       .btn-pagar-modern {
           width: 100%;
           background: #28a745;
           color: white;
           border: none;
           padding: 15px;
           border-radius: 12px;
           font-size: 1.1rem;
           font-weight: 700;
           cursor: pointer;
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 10px;
           transition: all 0.3s;
           margin-top: 10px;
       }

       .btn-pagar-modern:hover {
           background: #218838;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
       }

       /* Responsive Móvil */
       @media (max-width: 480px) {
           .modal-content {
               width: 95%;
               margin: 10% auto;
           }

           .modal-header-restyle {
               padding: 20px 15px;
           }

           .btn-pasado {
               background-color: #d1d1d1 !important;
               color: #7a7a7a !important;
               border: 1px solid #bcbcbc !important;
               cursor: not-allowed !important;
               pointer-events: none;
               /* Evita que el click se dispare */
           }
       }

       /* --- Títulos --- */
       .section-title__tagline_modern {
           display: block;
           color: #1e3c72;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 2px;
           font-size: 0.85rem;
           margin-bottom: 10px;
       }

       .section-title__title_modern {
           font-size: 2.5rem;
           font-weight: 800;
           color: #111;
           margin-bottom: 50px;
       }

       /* --- La Tarjeta (Card) --- */
       .explore-card {
           background: #ffffff;
           border-radius: 16px;
           overflow: hidden;
           transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
           border: 1px solid rgba(0, 0, 0, 0.05);
           margin-bottom: 30px;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
       }

       .explore-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 15px 35px rgba(30, 60, 114, 0.15);
       }

       /* --- Imagen y Logo --- */
       .explore-card__img {
           height: 180px;
           background: #fdfdfd;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 30px;
           border-bottom: 1px solid #f0f0f0;
       }

       .explore-card__img img {
           max-height: 100%;
           max-width: 100%;
           object-fit: contain;
           transition: transform 0.4s;
       }

       .explore-card:hover .explore-card__img img {
           transform: scale(1.1);
       }

       /* --- Contenido --- */
       .explore-card__content {
           padding: 25px;
       }

       .explore-card__title {
           margin: 0;
           font-size: 1.4rem;
           font-weight: 800;
       }

       .explore-card__title a {
           color: #111;
           text-decoration: none;
           transition: color 0.3s;
       }

       .explore-card__title a:hover {
           color: #1e3c72;
       }

       .explore-car__location {
           font-size: 0.85rem;
           color: #666;
           margin: 10px 0 20px;
       }

       .explore-car__location i {
           color: #1e3c72;
           margin-right: 5px;
       }

       /* --- Etiquetas de Servicios --- */
       .explore-card__services {
           display: flex;
           flex-wrap: wrap;
           gap: 8px;
           margin-bottom: 25px;
           min-height: 60px;
           /* Mantiene la simetría */
       }

       .service-tag {
           background: #f0f4f8;
           color: #1e3c72;
           font-size: 0.7rem;
           font-weight: 700;
           padding: 5px 12px;
           border-radius: 50px;
           display: inline-flex;
           align-items: center;
           gap: 5px;
           border: 1px solid transparent;
           transition: 0.3s;
       }

       .service-tag:hover {
           background: #1e3c72;
           color: #fff;
       }

       /* --- Footer y Botón Invertido --- */
       /* --- Estilo del Botón de Reserva --- */
       .thm-btn-impact-restyle-sm {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 12px;

           /* Gradiente elegante usando el azul de tu marca */
           background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
           color: #ffffff;

           padding: 14px 20px;
           border-radius: 12px;
           /* Redondeado suave a juego con las burbujas */
           font-weight: 700;
           font-size: 0.95rem;
           text-transform: uppercase;
           letter-spacing: 0.5px;
           text-decoration: none;

           border: none;
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           cursor: pointer;
           box-shadow: 0 4px 15px rgba(30, 60, 114, 0.2);
       }

       /* --- Efecto Hover (Inversión y Elevación) --- */
       .thm-btn-impact-restyle-sm:hover {
           background: #ffffff;
           color: #1e3c72;
           transform: translateY(-3px);
           /* Se eleva un poco */
           box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
           outline: 2px solid #1e3c72;
           /* Borde sutil al invertir */
       }

       /* --- Animación de la Flecha --- */
       .thm-btn-impact-restyle-sm i {
           font-size: 0.85rem;
           transition: transform 0.3s ease;
       }

       .thm-btn-impact-restyle-sm:hover i {
           transform: translateX(5px);
           /* La flecha se mueve a la derecha al pasar el mouse */
       }

       /* --- Ajuste del Footer de la Tarjeta --- */
       .explore-card__footer {
           margin-top: auto;
           /* Empuja el botón siempre al fondo */
           padding-top: 15px;
           border-top: 1px solid #f0f0f0;
       }

       /* Contenedor de las burbujas */
       .explore-card__services {
           display: flex;
           flex-wrap: wrap;
           gap: 12px;
           /* Espacio entre cada burbuja */
           margin: 15px 0 25px;
           /* Margen superior e inferior */
       }

       /* La Burbuja Individual */
       .service-bubble {
           background-color: #f5f7fa;
           /* Fondo gris suave */
           padding: 12px 20px;
           /* Espacio interno para dar forma cuadrada-suave */
           border-radius: 15px;
           /* Redondeado de las esquinas (Soft UI) */
           display: flex;
           align-items: center;
           gap: 10px;
           /* Espacio entre el check y el texto */
           transition: all 0.3s ease;
           border: 1px solid transparent;
       }

       /* El Icono de Check (Azul) */
       .service-bubble i {
           color: #1e3c72;
           /* Tu azul principal */
           font-size: 1.1rem;
       }

       /* El Texto del Servicio */
       .service-bubble span {
           color: #333;
           font-weight: 700;
           /* Texto en negrita para que resalte */
           font-size: 0.9rem;
       }

       /* Efecto al pasar el mouse */
       .service-bubble:hover {
           background-color: #ffffff;
           border-color: #1e3c72;
           /* Borde azul fino al resaltar */
           transform: translateY(-3px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       }


       /* Contenedor Principal politicas */
       .listing-details__store-policies-container {
           margin-top: 50px;
           padding: 30px;
           background: #ffffff;
           border-radius: 25px;
           border: 1px solid #f0f0f0;
       }

       .listing-details__store-policies-title {
           font-size: 24px;
           font-weight: 800;
           color: #1a202c;
           margin: 30px;
           display: flex;
           align-items: center;
           gap: 15px;
           text-transform: uppercase;
       }

       .listing-details__store-policies-title i {
           color: #28a745;
           /* Verde Tu Cancha */
       }

       /* Estilo de las Tarjetas de Política */
       .policy-card {
           display: flex;
           align-items: flex-start;
           gap: 15px;
           padding: 20px;
           background: #f8fafc;
           border-radius: 15px;
           height: 100%;
           transition: all 0.3s ease;
           border: 1px solid transparent;
       }

       .policy-card:hover {
           background: #fff;
           border-color: #28a745;
           transform: translateY(-5px);
           box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
       }

       .policy-icon {
           font-size: 24px;
           color: #28a745;
           background: rgba(40, 167, 69, 0.1);
           width: 50px;
           height: 50px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 12px;
           flex-shrink: 0;
       }

       .policy-content h5 {
           font-size: 16px;
           font-weight: 700;
           color: #1a202c;
           margin-bottom: 5px;
       }

       .policy-content p {
           font-size: 13px;
           color: #64748b;
           line-height: 1.5;
           margin: 0;
       }

       /* Ajuste para Móviles */
       @media (max-width: 768px) {
           .listing-details__store-policies-container {
               padding: 20px 15px;
           }

           .policy-card {
               padding: 15px;
           }

           .listing-details__store-policies-title {
               font-size: 18px;
           }
       }



       /* Contenedor principal de ubicación */
       .listing-details__location-container {
           margin-top: 40px;
           background: #ffffff;
           border-radius: 25px;
           overflow: hidden;
           /* Importante para que el mapa respete el redondeado */
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
           border: 1px solid #f0f0f0;
       }

       /* Cabecera: Título y Dirección mapa */
       .location-header {
           padding: 25px 30px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           background: #fff;
       }

       .location-title h2 {
           font-size: 24px;
           font-weight: 800;
           color: #1a202c;
           margin: 0;
           text-transform: uppercase;
       }

       .location-title i {
           color: #28a745;
           margin-right: 10px;
       }

       .location-address p {
           font-size: 15px;
           color: #64748b;
           font-weight: 600;
           margin: 0;
       }

       /* El Mapa: Responsivo y con filtro sutil */
       .map-wrapper {
           width: 100%;
           line-height: 0;
           /* Elimina espacio extra debajo del iframe */
           filter: grayscale(0.2);
           /* Toque moderno: mapa levemente menos saturado */
           transition: 0.3s;
       }

       .map-wrapper:hover {
           filter: grayscale(0);
       }

       .map-wrapper iframe {
           width: 100%;
           height: 350px;
           /* Altura ideal */
       }

       /* Botón inferior: Cómo llegar */
       .location-footer {
           padding: 15px 30px;
           background: #f8fafc;
           text-align: right;
       }

       .btn-como-llegar {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           background: #28a745;
           color: #fff !important;
           padding: 10px 20px;
           border-radius: 12px;
           font-weight: 700;
           text-decoration: none;
           font-size: 14px;
           transition: 0.3s;
       }

       .btn-como-llegar:hover {
           background: #218838;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
       }

       /* Ajustes para Móvil */
       @media (max-width: 768px) {
           .location-header {
               flex-direction: column;
               text-align: center;
               gap: 10px;
               padding: 20px;
           }

           .location-title h2 {
               font-size: 20px;
           }

           .location-address p {
               font-size: 13px;
           }

           .map-wrapper iframe {
               height: 250px;
               /* Mapa más pequeño en móvil */
           }

           .location-footer {
               text-align: center;
           }
       }


       /* Pie de página de políticas */
       .policies-footer {
           margin-top: 25px;
           padding-top: 20px;
           border-top: 1px solid #edf2f7;
           text-align: center;
       }

       .policies-footer p {
           font-size: 14px;
           color: #64748b;
           margin-bottom: 10px;
           font-weight: 500;
       }

       .btn-ver-politicas {
           display: inline-flex;
           align-items: center;
           gap: 10px;
           color: #28a745;
           /* Verde Tu Cancha */
           font-weight: 700;
           font-size: 14px;
           text-decoration: none;
           padding: 8px 20px;
           border: 2px solid #28a745;
           border-radius: 12px;
           transition: all 0.3s ease;
       }

       .btn-ver-politicas i {
           font-size: 12px;
       }

       .btn-ver-politicas:hover {
           background: #28a745;
           color: #ffffff !important;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
       }

       .modal-body::-webkit-scrollbar {
           width: 8px;
       }

       .modal-body::-webkit-scrollbar-track {
           background: #f7fafc;
       }

       .modal-body::-webkit-scrollbar-thumb {
           background: #cbd5e0;
           border-radius: 10px;
       }

       .modal-body::-webkit-scrollbar-thumb:hover {
           background: #a0aec0;
       }

       /* Mejoras de texto dentro del modal */
       .politicas-content {
           font-size: 15px;
           white-space: pre-wrap;
           /* Mantiene el formato de texto original */
       }

       .politicas-content strong {
           color: #2d3748;
           display: block;
           margin-top: 15px;
       }

       /* Ajuste móvil */
       @media (max-width: 768px) {
           .btn-ver-politicas {
               width: 100%;
               justify-content: center;
           }
       }





       /* ya estaba establecido para reserva */

       .btn-reservar {
           width: 100%;
           margin-top: 20px;
           padding: 12px;
           background: #007bff;
           color: #fff;
           border-radius: 10px;
           font-weight: bold;
           border: none;
       }

       .horario-header span {
           font-size: 20px;
       }
       

       /* disponible */
       .btn-verde {
           background: #28a745;
           color: #fff;
       }

       .btn-verde:hover {
           background: #218838;
           transform: scale(1.05);
       }

       /* ocupada */
       .btn-rojo {
           background: #dc3545;
           color: #fff;
           opacity: 0.6;
       }

       /* pendiente */
       .btn-naranja {
           background: #fd7e14;
           color: #fff;
       }

       .col-4 h6 {
           text-align: center;
           font-weight: bold;
           margin-bottom: 8px;
       }

       .cancha-img {
           width: 100%;
           height: 200px;
           border-radius: 16px;
           overflow: hidden;
           margin-bottom: 15px;
       }

       .cancha-img img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .cancha-img img:hover {
           transform: scale(1.05);
       }

       .cancha-card h5 {
           text-align: center;
           font-size: 20px;
           font-weight: 700;
           margin-bottom: 15px;
       }

       .listing-details__features-box {
           background: #f4f6f9;
           padding: 20px;
           border-radius: 20px;
       }

       .hora-btn.activo {
           background: #007bff !important;
           color: #fff;
           transform: scale(1.08);
       }


       /* Contenedor Principal (Fondo oscuro) */
       .modal-custom {
           display: none;
           position: fixed;
           z-index: 2000;
           /* Asegúrate que esté por encima de todo */
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(4px);
           overflow-y: auto;
           /* Permite que el fondo también haga scroll si es necesario */
           padding: 20px 0;
           /* Espacio para que no pegue a los bordes */
       }

       /* Ajuste para la caja blanca */
       .modal-content {
           background: #ffffff;
           margin: 20px auto;
           /* Centrado con margen */
           padding: 0;
           border-radius: 20px;
           width: 90%;
           max-width: 450px;

           /* ESTO ES LO VITAL */
           max-height: calc(100vh - 40px);
           /* Altura máxima = pantalla menos 40px */
           display: flex;
           flex-direction: column;
           /* Organiza header y body en columna */
           overflow: hidden;
           /* Evita que el contenido se salga de los bordes redondeados */
       }

       @keyframes slideUp {
           from {
               transform: translateY(50px);
               opacity: 0;
           }

           to {
               transform: translateY(0);
               opacity: 1;
           }
       }

       /* Botón Cerrar */
       .close-modal {
           position: absolute;
           right: 20px;
           top: 15px;
           font-size: 28px;
           color: #fff;
           cursor: pointer;
           z-index: 10;
       }

       /* Cabecera Deportiva */
       .modal-header-restyle {
           background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
           color: white;
           padding: 30px 20px;
           text-align: center;
       }

       .modal-header-restyle h4 {
           margin: 0;
           font-size: 1.5rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 1px;
       }

       /* Contador de Tiempo */
       .timer-badge {
           background: rgba(255, 255, 255, 0.2);
           display: inline-block;
           padding: 5px 15px;
           border-radius: 50px;
           font-size: 0.9rem;
           margin-bottom: 10px;
           border: 1px solid rgba(255, 255, 255, 0.3);
       }

       #contador {
           color: #ffeb3b;
           font-weight: bold;
       }

       /* Cuerpo del Modal */

       .modal-body-restyle {
           padding: 20px;
           overflow-y: auto;
           /* SI EL CONTENIDO ES LARGO, SOLO ESTO HACE SCROLL */
           flex: 1;
           /* Ocupa el espacio restante */
       }

       /* Grid de Información */
       .info-reserva-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 15px;
           margin-bottom: 20px;
       }

       .info-item {
           display: flex;
           flex-direction: column;
       }

       .info-item label {
           font-size: 0.75rem;
           color: #888;
           text-transform: uppercase;
           margin-bottom: 2px;
       }

       .info-item span {
           font-weight: 600;
           color: #333;
       }

       /* Sección de Pago (Recibo) */
       .detalle-pago-restyle {
           background: #f8f9fa;
           border-radius: 12px;
           padding: 15px;
           border: 1px dashed #ced4da;
           margin-bottom: 20px;
       }

       .price-row {
           display: flex;
           justify-content: space-between;
           margin-bottom: 8px;
           font-size: 0.95rem;
       }

       .price-row.highlight {
           border-top: 1px solid #dee2e6;
           padding-top: 10px;
           margin-top: 5px;
           color: #28a745;
           font-weight: 800;
           font-size: 1.1rem;
       }

       .total-original {
           text-decoration: line-through;
           color: #6c757d;
       }

       .footer-nota {
           font-size: 0.75rem;
           color: #6c757d;
           margin-top: 10px;
           line-height: 1.2;
       }

       /* Inputs Personalizados */
       .input-group-custom {
           position: relative;
           margin-bottom: 12px;
       }

       .input-group-custom i {
           position: absolute;
           left: 15px;
           top: 50%;
           transform: translateY(-50%);
           color: #adb5bd;
       }

       .input-group-custom input {
           width: 100%;
           padding: 12px 15px 12px 40px;
           border: 1px solid #dee2e6;
           border-radius: 10px;
           font-size: 0.95rem;
           transition: all 0.3s;
       }

       .input-group-custom input:focus {
           outline: none;
           border-color: #2a5298;
           box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.1);
       }

       /* Botón de Pago Moderno */
       .btn-pagar-modern {
           width: 100%;
           background: #28a745;
           color: white;
           border: none;
           padding: 15px;
           border-radius: 12px;
           font-size: 1.1rem;
           font-weight: 700;
           cursor: pointer;
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 10px;
           transition: all 0.3s;
           margin-top: 10px;
       }

       .btn-pagar-modern:hover {
           background: #218838;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
       }

       /* Responsive Móvil */
       @media (max-width: 480px) {
           .modal-content {
               width: 95%;
               margin: 10% auto;
           }

           .modal-header-restyle {
               padding: 20px 15px;
           }
       }

       .btn-pasado {
           background-color: #d1d1d1 !important;
           color: #7a7a7a !important;
           border: 1px solid #bcbcbc !important;
           cursor: not-allowed !important;
           pointer-events: none;
           /* Evita que el click se dispare */
       }