/* ======================================== */
/* ===        CSS/MINGATOUR.CSS         === */
/* ======================================== */

/* --- ELIMINAR Padding superior del body --- */
/* Ya no necesitamos empujar todo el body hacia abajo */
/*
body.page-mingatour {
    padding-top: calc(70px + 1.5rem);
}
*/
.page-header-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../imagenes/cabecera-mingatour.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
}

.page-header-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.page-header-image .header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Título principal de la cabecera */
.page-header-image .page-title {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    font-size: 3.5rem;
    margin-bottom: 0;
}
/*
.page-header-image.header-mingatour {
    background-image: url('../imagenes/cabecera-mingatour.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 60vh;
    padding: 6rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.page-header-image.header-mingatour::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.130);
    z-index: 1;
}

.header-mingatour .header-content {
    position: relative;
    z-index: 2;
}*/

.header-mingatour .page-title {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.header-mingatour .page-subtitle { /* (sin cambios) */
    font-size: 1.3rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilos Franja Roja (heredados de estilos.css) --- */


/* --- Estilos Secciones Contenido MingaTour --- */

/* AÑADIR padding-top a la PRIMERA sección DESPUÉS de la cabecera */
/* Usa el ID o una clase específica de esa primera sección */
#mingatour-intro { /* O la clase/ID de tu primera sección de contenido */
     /* AJUSTA 70px a la altura REAL de tu navbar */
     /* AJUSTA 1.5rem al espacio extra deseado */
    /* padding-top: calc(70px + 1.5rem); */ /* Aplicar aquí el espacio */
     /* El padding-bottom ya viene de .section-mingatour */
     /* Importante: Esto asume que la franja roja NO necesita este padding */
}
/* SI la franja roja .red-banner es la primera sección VISIBLE debajo
   del navbar y quieres que el contenido EMPIECE después de ella,
   entonces aplica el padding a la sección que sigue a la franja roja */
#mingatour-intro { /* ID de la sección de Introducción */
     padding-top: 3rem; /* O el espacio que desees DESPUÉS de la franja roja */
}


.section-mingatour {
    padding: 4rem 0; /* Espaciado vertical estándar */
}
/* Ajuste para la primera sección si no tiene padding-top específico */
/* header + .section-mingatour { */
    /* padding-top: calc(70px + 4rem); */ /* Navbar + Padding normal */
/* } */


.section-mingatour.bg-light {
     background-color: #f8f9fa !important;
}

.section-title-mingatour { /* (sin cambios) */
    color: var(--minga-dark);
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
}
@media (max-width: 767.98px) {
    .section-title-mingatour { font-size: 1.8rem; margin-bottom: 2rem; }
}


.highlight-text { /* (sin cambios) */
    color: var(--minga);
    font-weight: 600;
}

.feature-icon-mingatour { /* (sin cambios) */
    font-size: 2.8rem;
    color: var(--minga);
    margin-bottom: 1.25rem;
}
#mingatour-expect .col-md-6 .small { /* (sin cambios) */
    line-height: 1.6;
}


/* --- Estilos Itinerario (sin cambios) --- */
.itinerary-day { /* ... */ }
.itinerary-day:hover { /* ... */ }
.itinerary-day h5 { /* ... */ }
.itinerary-day p.small { /* ... */ }

/* --- Estilos Testimonio (sin cambios) --- */
#mingatour-testimonial .fa-quote-left { /* ... */ }
#mingatour-testimonial blockquote { /* ... */ }
#mingatour-testimonial .blockquote-footer { /* ... */ }

/* --- Estilos Botón CTA Final (sin cambios) --- */
/* #mingatour-cta { ... } */ /* (Si usas la clase bg-minga-cta de estilos.css) */
.btn-mingatour-cta { /* ... */ }
.btn-mingatour-cta:hover { /* ... */ }
.btn-mingatour-cta i { /* ... */ }
.btn-mingatour-cta:hover i { /* ... */ }


/* --- Responsive Cabecera y General (sin cambios en la lógica) --- */
@media (max-width: 767.98px) {
    /* Ya no necesitamos padding-top del body aquí */
    .page-header-image.header-mingatour { min-height: 55vh; padding: 5rem 1rem; }
    .header-mingatour .page-title { font-size: 2.2rem; }
    .header-mingatour .page-subtitle { font-size: 1.1rem; }
    .section-mingatour { padding: 3rem 0; }
    #mingatour-expect .col-md-6 { width: 80%; margin-left: auto; margin-right: auto; }
    p.lead { font-size: 1.1rem; }
    p, .small { font-size: 0.95rem; }
    /* Aplicar padding a la primera sección si es necesario en móvil */
    #mingatour-intro { /* O la sección después de la franja roja */
        padding-top: 2rem; /* Ajusta según necesidad en móvil */
    }
}


/* --- Estilos Sección Galería --- */
#mingatour-gallery { background-color: #ffffff; }
.gallery-row { /* ... */ }
.gallery-item a { display: block; overflow: hidden; border-radius: 0.375rem; position: relative; cursor: pointer; border: 1px solid transparent; transition: border-color 0.2s ease; }
.gallery-item a:hover { border-color: var(--minga); }
.gallery-thumbnail { display: block; width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease, filter 0.3s ease; }
.gallery-item a:hover .gallery-thumbnail { transform: scale(1.05); filter: brightness(0.85); }
/* Icono lupa opcional */
.gallery-item a::after { content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); font-size: 2.5rem; color: rgba(255, 255, 255, 0.8); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.gallery-item a:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --- Estilos Modal Galería Manual --- */
#galleryManualModal .modal-dialog { /* Ajusta tamaño si es necesario */ }
#galleryManualModal .modal-content { background-color: rgba(15, 15, 15, 0.97); border: none; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.5); }
#galleryManualModal .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 0.75rem 1.25rem; }
#galleryManualModal .modal-title { color: #e9ecef; font-size: 1rem; font-weight: 400; }
#galleryManualModal .modal-body { padding: 0.5rem; display: flex; justify-content: center; align-items: center; min-height: 50vh; /* Para que los botones no se peguen a la img si es baja */ }
#galleryManualModal .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* Imagen grande */
.modal-manual-gallery-img {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 0.25rem;
    transition: opacity 0.3s ease; /* Transición suave al cambiar imagen */
}

/* Botones de navegación */
.gallery-nav-btn {
    z-index: 10; /* Sobre la imagen */
    background-color: rgba(40, 40, 40, 0.5); /* Fondo semi-transparente */
    border: none;
    padding: 0.75rem 1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.gallery-nav-btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
}
.gallery-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: rgba(40, 40, 40, 0.3);
}
.gallery-nav-btn i {
    vertical-align: middle;
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .gallery-thumbnail { height: 150px; }
    #galleryManualModal .modal-dialog { margin: 0.5rem; }
    .modal-manual-gallery-img { max-height: 85vh; }
    .gallery-nav-btn { padding: 0.5rem 0.75rem; }
    .gallery-nav-btn i { font-size: 0.9rem; }
}
/* --- Estilos para Navbar con Scroll o en Páginas Internas --- */
.main-navbar.navbar-scrolled {
    background-color: var(--minga); /* Fondo sólido */
    padding-top: 0.5rem;          /* Ajuste de padding */
    padding-bottom: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Sombra */
    /* Transición suave si quieres que aparezca gradualmente (si se añade con JS) */
    transition: background-color 0.4s ease, padding-top 0.4s ease, padding-bottom 0.4s ease, box-shadow 0.4s ease;
}

/* Estilos específicos para logos/links cuando tiene scroll */
.main-navbar.navbar-scrolled #logo-color { display: inline-block; }
.main-navbar.navbar-scrolled #logo-blanco { display: none; }

.main-navbar.navbar-scrolled .navbar-nav .nav-link:hover,
.main-navbar.navbar-scrolled .navbar-nav .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo hover sutil */
    color: var(--minga-white);
}
.main-navbar.navbar-scrolled .navbar-nav .nav-item .nav-link.active {
     background-color: rgba(255, 255, 255, 0.15); /* Fondo activo sutil */
     color: var(--minga-white);
}

/* Estilos botón donar cuando tiene scroll (si eran diferentes) */
.main-navbar.navbar-scrolled .btn-navbar-donate {
    /* ... (estilos específicos si los había, si no, hereda los base) ... */
}
 .main-navbar.navbar-scrolled .btn-navbar-donate:hover,
 .main-navbar.navbar-scrolled .btn-navbar-donate:focus {
    /* ... (estilos hover específicos si los había) ... */
}
/* --- NUEVO: Estilos Sección Parallax --- */
.parallax-section {
    /* 1. Imagen de fondo */
    background-image: url('../imagenes/fondo-parallax.jpg');

    /* 2. Efecto Parallax */
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    /* 3. Altura similar a la cabecera (o la que desees) */
    min-height: 0vh; /* Ajusta este valor */
    padding: 3rem 0; /* Padding interno vertical generoso */

    /* 4. Posicionamiento relativo para el overlay y contenido */
    position: relative;
    display: flex; /* Para centrar contenido verticalmente */
    align-items: center;
    justify-content: center;
    color: white; /* Color de texto base */
}

/* 5. Overlay de color transparente */
.parallax-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Color Minga con transparencia - Ajusta el último valor (0.6) para más/menos opacidad */
    background-color: rgba(var(--minga-red-rgb), 0.6); /* Asume --minga-red-rgb existe en estilos.css */
    /* Alternativa si no tienes variable RGB: */
    /* background-color: rgba(251, 23, 0, 0.6); */ /* Rojo FB1700 con 60% opacidad */
    z-index: 1; /* Asegura que esté debajo del contenido */
}

/* 6. Contenido sobre el overlay */
.parallax-section .parallax-content {
    position: relative;
    z-index: 2; /* Sobre el overlay */
}

.parallax-section .parallax-title {
    font-weight: 400;
    font-size: 2.0rem; /* Tamaño del título */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* Sombra para legibilidad */
}

.parallax-section .parallax-text {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Opcional: Estilo para botón dentro del parallax */
.parallax-section .btn-outline-light {
    border-width: 2px;
    padding: 0.75rem 2rem;
    font-weight: 600;
}
.parallax-section .btn-outline-light:hover {
    background-color: white;
    color: var(--minga-dark); /* O el color oscuro que prefieras */
}


/* --- Responsive para Parallax --- */
@media (max-width: 991.98px) {
    .parallax-section {
        min-height: 60vh;
        padding: 6rem 0;
        background-attachment: scroll; /* Desactivar parallax en pantallas medianas/pequeñas */
                                        /* porque puede causar problemas de rendimiento/visualización */
    }
    .parallax-section .parallax-title {
        font-size: 2.1rem;
    }
    .parallax-section .parallax-text {
        font-size: 1.05rem;
    }
}

@media (max-width: 767.98px) {
     .parallax-section {
        min-height: 55vh;
        padding: 5rem 1rem; /* Más padding lateral */
    }
     .parallax-section .parallax-title {
        font-size: 1.8rem;
    }
    .parallax-section .parallax-text {
        font-size: 1rem;
    }
}
/* --- NUEVO: Estilos Sección Paquetes Turísticos --- */
#mingatour-packages {
    /* background-color: #f8f9fa !important; Ya se aplica con bg-light en HTML */
}

.package-card {
    border: none; /* Sin borde Bootstrap */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Asegurar comportamiento flex */
    flex-direction: column; /* Apilar verticalmente */
    background-color: #ffffff; /* Fondo blanco tarjeta */
}

.package-card:hover {
    transform: translateY(-8px); /* Elevar al pasar ratón */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1) !important; /* Sombra más pronunciada */
}

.package-card-img {
    height: 220px; /* Altura fija para imagen del paquete */
    object-fit: cover; /* Cubrir espacio */
    width: 100%;
    /* border-top-left-radius: var(--bs-card-inner-border-radius); */ /* Heredar redondeo */
    /* border-top-right-radius: var(--bs-card-inner-border-radius); */
}

.package-card .card-body {
    padding: 1.25rem; /* Padding interno cuerpo tarjeta */
}

.package-title {
    color: var(--minga-dark);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.package-title span {
    color: #fb1700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.package-duration {
    font-size: 0.8rem;
    color: #6c757d !important; /* Asegurar color muted */
}
.package-duration i {
     opacity: 0.7;
}


.package-description {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem; /* Espacio antes de los highlights */
}

.package-highlights .badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.3em 0.6em;
    border: 1px solid transparent; /* Para consistencia */
}
/* Ajusta colores de badges si los de Bootstrap no te gustan */
/* Ejemplo:
.package-highlights .bg-success-subtle { border-color: var(--bs-success-border-subtle); }
*/


.package-card .card-footer {
    /* Estilos footer tarjeta si es necesario */
}
/*
.package-cta-btn {
    font-weight: 500;
    text-transform: none; 
    font-size: 0.85rem;
     padding: 0.4rem 1.2rem;
}
.package-cta-btn i {
     font-size: 0.9em;
     transition: transform 0.2s ease-out;
}
.package-cta-btn:hover i {
     transform: translateX(3px);
}*/

/* Responsive para Paquetes */
@media (max-width: 767.98px) {
    .package-card-img {
        height: 180px; /* Imagen más baja en móvil */
    }
     .package-title {
        font-size: 1.1rem;
    }
     .package-description {
        font-size: 0.85rem;
    }
}
.package-cta-btn {
    /* Colores base */
    background-color: var(--minga-yellow);
    border-color: var(--minga-yellow);
    color: var(--minga-yellow-text); /* Texto oscuro para contraste */

    /* Estilos de botón */
    font-weight: 600; /* Un poco más grueso */
    text-transform: uppercase; /* MAYÚSCULAS */
    letter-spacing: 0.5px; /* Espaciado ligero */
    font-size: 0.8rem; /* Tamaño ajustado */
    padding: 0.5rem 1.4rem; /* Padding botón */
    border-radius: 50px; /* Bordes redondeados */
    border-width: 1px; /* Borde más fino si se quiere */
    transition: all 0.3s ease;
    display: inline-flex; /* Para alinear icono y texto */
    align-items: center;
    text-decoration: none; /* Asegurar sin subrayado */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil */
}

.package-cta-btn:hover,
.package-cta-btn:focus {
    background-color: var(--minga-yellow-dark); /* Amarillo oscuro */
    border-color: var(--minga-yellow-dark);
    color: var(--minga-yellow-text); /* Mantener texto oscuro */
    transform: translateY(-2px); /* Ligera elevación */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Sombra más pronunciada */
    text-decoration: none;
}

.package-cta-btn i {
    font-size: 0.9em;
    transition: transform 0.2s ease-out;
    margin-left: 0.4rem; /* Espacio antes del icono */
}

.package-cta-btn:hover i {
     transform: translateX(3px);
}
/* --- NUEVO: Estilos Itinerario Resumido dentro de la Tarjeta --- */
.package-itinerary {
    border-top: 1px solid #eee; /* Línea separadora sutil */
    padding-top: 1rem;        /* Espacio sobre el título del itinerario */
    margin-bottom: 1rem;      /* Espacio debajo de la lista del itinerario */
}

.itinerary-title {
    color: var(--minga-gray); /* Color gris para el título */
    font-size: 0.75rem;      /* Tamaño pequeño */
}

.itinerary-list {
    padding-left: 0; /* Quitar padding por defecto de la lista */
    margin-bottom: 0; /* Quitar margen inferior de la lista */
}

.itinerary-list li {
    font-size: 0.8rem;
    color: #444;
    margin-bottom: 0.3rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    /* Quitar o ajustar estas propiedades si quieres que el texto salte de línea en móvil */
    /* overflow: hidden;       */
    /* text-overflow: ellipsis;*/
    /* white-space: nowrap;    */
}

/* Aplicar nowrap solo en pantallas medianas y mayores donde hay 2 columnas */
@media (min-width: 768px) { /* Breakpoint 'md' de Bootstrap */
    .itinerary-list li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


.itinerary-list li i {
    font-size: 0.75em;
    margin-right: 0.4em;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ======================================== */
/* ===        CSS/MINGATOUR.CSS         === */
/* ===        (Sección Modal Consulta)    === */
/* ======================================== */

/* --- Estilos Modal Consulta --- */

/* Contenedor general del modal */
#consultaModal .modal-dialog {
    /* modal-lg y modal-dialog-centered ya están en HTML */
}

#consultaModal .modal-content {
    border: none; /* Sin borde por defecto */
    border-radius: 0.5rem; /* Bordes más redondeados */
}

#consultaModal .modal-header {
    /* Estilos del encabezado (bg-primary y text-white ya están en HTML) */
    border-bottom: none; /* Sin borde inferior */
    padding: 1rem 1.5rem; /* Ajustar padding */
}
#consultaModal .modal-header .modal-title {
    font-size: 1.2rem;
    font-weight: 500;
}
#consultaModal .modal-header .btn-close-white {
    filter: none; /* Quitar filtro si lo hubiera */
    opacity: 0.9;
}
#consultaModal .modal-header .btn-close-white:hover {
    opacity: 1;
}


#consultaModal .modal-body {
    padding: 1.5rem 2rem; /* Más padding en el cuerpo */
}

/* Estilo para mostrar el paquete seleccionado */
#consultaModal #packageDisplay {
    background-color: var(--bs-info-bg-subtle); /* Fondo azul claro */
    border-color: var(--bs-info-border-subtle);
    color: var(--bs-info-text-emphasis);
    font-weight: 500;
}

/* --- Estilos Floating Labels (Ajustes) --- */
#consultaModal .form-floating {
    /* No necesita mucho estilo extra, Bootstrap lo maneja */
}

/* Ajustar altura del textarea flotante */
#consultaModal .form-floating > textarea.form-control {
    min-height: 100px; /* Altura mínima deseada */
    height: 120px; /* Altura inicial (puede cambiar) */
}

/* Color del label flotante cuando el input tiene foco */
#consultaModal .form-floating > .form-control:focus ~ label {
    color: rgba(var(--bs-primary-rgb), 0.8); /* Un poco más tenue que el color primario */
}

/* --- Estilos Campo Fecha (Flatpickr + Floating Label) --- */
/* Input de fecha */
#consultaModal .form-floating > input#fecha_viaje.form-control {
    /* Forzar fondo blanco si Flatpickr lo cambia a readonly */
    background-color: var(--bs-body-bg) !important;
    cursor: pointer; /* Indicar que es clickeable */
}
/* Placeholder (si se muestra brevemente) */
#consultaModal input#fecha_viaje::placeholder {
    color: transparent; /* Ocultar placeholder nativo si interfiere con label */
}
/* Ajuste del label flotante cuando Flatpickr está activo */
#consultaModal .form-floating > input#fecha_viaje.flatpickr-input.input.active ~ label {
  /* Forzar estilo flotante si Bootstrap no lo hace automáticamente con Flatpickr */
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}


/* --- Estilos Validación Bootstrap con Floating Labels --- */
/* Borde rojo para inputs inválidos que NO son placeholder */
#consultaModal .form-floating > .form-control:not(:placeholder-shown):invalid {
    border-color: var(--bs-form-invalid-border-color);
}
/* Borde verde para inputs válidos que NO son placeholder */
#consultaModal .form-floating > .form-control:not(:placeholder-shown):valid {
    border-color: var(--bs-form-valid-border-color);
}
/* Mostrar mensaje de error cuando el input es inválido (incluso si el form no tiene was-validated AÚN) */
/* Opcional: quitar si prefieres que solo se muestre después de submit fallido */
/* #consultaModal .form-floating > .form-control:invalid ~ .invalid-feedback {
    display: block;
} */

/* Asegurar visibilidad del feedback cuando se añade 'was-validated' */
#consultaModal .was-validated .form-floating > .form-control:invalid ~ .invalid-feedback {
    display: block;
}

/* Colorear label flotante en estado inválido/válido */
#consultaModal .form-floating > .form-control.is-invalid ~ label {
     color: var(--bs-form-invalid-color);
}
#consultaModal .form-floating > .form-control.is-valid ~ label {
     color: var(--bs-form-valid-color);
}

/* Ocultar icono de validación Bootstrap en el input de fecha */
/* (Ya que no teníamos icono de calendario, esto es menos crítico, pero lo dejamos por si acaso) */
#consultaModal .form-floating > input#fecha_viaje.form-control.is-invalid,
#consultaModal .form-floating > input#fecha_viaje.form-control.is-valid {
    background-image: none !important; /* Quitar check/x de Bootstrap */
}


/* --- Estilos Footer del Modal --- */
#consultaModal .modal-footer {
    background-color: #f8f9fa; /* Fondo gris claro */
    border-top: 1px solid #dee2e6; /* Borde superior sutil */
    padding: 0.75rem 1.5rem; /* Ajustar padding */
}

/* Estilo para spinner en botón */
#consultaModal .modal-footer .btn .spinner-border-sm {
    vertical-align: -0.125em; /* Alinear spinner con texto */
    margin-right: 0.5rem; /* Espacio si hay texto al lado */
}

/* Ajustes Responsive para el Modal (Opcional) */
@media (max-width: 575.98px) {
    #consultaModal .modal-body {
        padding: 1.5rem 1rem; /* Menos padding horizontal en móvil */
    }
    #consultaModal .modal-footer {
        padding: 0.75rem 1rem;
        /* Apilar botones si es necesario */
        /* display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; */
    }
     /* #consultaModal .modal-footer .btn { width: 100%; } */
}
/* Mostrar feedback cuando el campo tiene la clase is-invalid */
#consultaModalV2 .form-control.is-invalid ~ .invalid-feedback,
#consultaModalV2 .form-select.is-invalid ~ .invalid-feedback,
#consultaModalV2 .form-check-input.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Colorear label flotante cuando el input es inválido */
#consultaModalV2 .form-floating > .form-control.is-invalid ~ label {
     color: var(--bs-form-invalid-color);
}

/* Colorear label flotante cuando el input es válido (opcional) */
#consultaModalV2 .form-floating > .form-control.is-valid ~ label {
     color: var(--bs-form-valid-color);
}

/* Borde rojo/verde en el input */
#consultaModalV2 .form-control.is-invalid,
#consultaModalV2 .form-select.is-invalid {
     border-color: var(--bs-form-invalid-border-color);
}
#consultaModalV2 .form-control.is-valid,
#consultaModalV2 .form-select.is-valid {
     border-color: var(--bs-form-valid-color);
}
/* Quitar icono de validación Bootstrap por defecto */
#consultaModalV2 .form-control.is-invalid,
#consultaModalV2 .form-control.is-valid {
    background-image: none !important;
}



/* --- NUEVO: Estilos Sección Términos y Condiciones (en Página) --- */
#mingatour-terms {
    /* padding ya viene de .section-mingatour */
    /* background-color: #f8f9fa; /* bg-light ya está en HTML */
}

.terms-section-alert {
    border: 1px solid #d3d3d3; /* Borde más definido que el default */
    background-color: #ffffff; /* Fondo blanco para destacar sobre bg-light */
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05); /* Sombra sutil */
    padding: 2rem 2.5rem; /* Padding interno generoso */
    border-radius: 0.5rem; /* Bordes redondeados */
}

.terms-section-alert .alert-heading {
    color: var(--minga-dark); /* Usar color oscuro principal */
    font-size: 1.5rem; /* Título más grande */
}
.terms-section-alert .alert-heading i {
    color: var(--minga); /* Icono en color Minga */
    opacity: 0.9;
}

.terms-section-alert .terms-text {
    font-size: 1rem; /* Tamaño de texto normal */
    line-height: 1.7;
    color: #555;
    max-width: 900px; /* Limitar ancho del texto para legibilidad */
    margin-left: auto;
    margin-right: auto;
}

.terms-download-btn-section {
    font-weight: 500;
    padding: 0.5rem 1.5rem; /* Botón un poco más grande */
    color: #f8f9fa; /* Color texto botón */
    border-color: #adb5bd; /* Borde gris */
    transition: all 0.2s ease;
    background-color: #b01c24;
}
.terms-download-btn-section:hover {
    background-color: #fb1700; /* Usar variable si existe */
    border-color: var(--minga-gray);
    color: white;
}
.terms-download-btn-section i {
    vertical-align: text-bottom;
}

/* Responsive para sección T&C */
@media (max-width: 767.98px) {
    .terms-section-alert {
        padding: 1.5rem;
    }
     .terms-section-alert .alert-heading {
        font-size: 1.25rem;
    }
    .terms-section-alert .terms-text {
        font-size: 0.95rem;
    }
}





/* --- NUEVO/MODIFICADO: Estilos Sección Dos Columnas con Texto Común --- */
#mingatour-two-columns-common-text {
    /* background-color: #f8f9fa; */ /* Fondo opcional */
}

/* Contenedor de cada imagen y su título corto opcional */
.two-column-image-wrapper {
     /* Opcional: añadir padding si quieres un fondo */
     /* padding: 1rem; */
     /* background-color: #ffffff; */
     /* border-radius: 0.5rem; */
     /* box-shadow: ... */
     height: 100%; /* Para alinear si tienen fondos */
}

.two-column-image {
    max-height: 120px; /* Altura máxima para las imágenes/iconos */
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: block; /* Asegurar que el margen auto funcione */
}

.two-column-image-title {
    color: var(--minga-dark);
    font-size: 1rem; /* Tamaño título debajo de imagen */
    margin-top: 0.75rem !important; /* Asegurar espacio después de imagen */
}

/* Estilo para el párrafo de descripción común */
.two-column-common-text {
    margin-top: 1.5rem; /* Espacio entre imágenes y texto */
}

.two-column-common-text p.lead {
    font-size: 1.1rem; /* Ajustar tamaño del texto principal */
    line-height: 1.7;
    /* max-width: 750px; */ /* Limitar ancho si es muy largo */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Responsive para la nueva sección */
@media (max-width: 767.98px) {
    #mingatour-two-columns-common-text .col-md-5:not(:last-child) .two-column-image-wrapper {
         margin-bottom: 1.5rem; /* Espacio entre imágenes cuando se apilan */
    }
     .two-column-image {
        max-height: 100px; /* Imagen un poco más pequeña */
    }
    .two-column-common-text p.lead {
         font-size: 1rem;
    }
}




/* --- NUEVO: Estilos Sección Testimonios (Masonry Grid) --- */
#mingatour-testimonials-masonry {
    /* background-color: #f8f9fa !important; Ya en HTML */
}

/* Estilo para cada tarjeta individual en el grid Masonry */
.testimonial-card-masonry {
    border: 1px solid #eee; /* Borde ligero */
    margin-bottom: 1.5rem; /* Espacio vertical gestionado por Masonry/Gutter, pero podemos añadir */
    transition: box-shadow 0.3s ease;
    background-color: #ffffff; /* Asegurar fondo blanco */
    /* IMPORTANTE: No fijar altura (height: 100%) para que Masonry funcione */
}
.testimonial-card-masonry:hover {
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important; /* Sombra en hover */
}

.testimonial-card-masonry .card-body {
    padding: 1.75rem 1.5rem; /* Padding interno */
}

/* Imagen circular (sin cambios) */
.testimonial-img {
    width: 150px; /* Más pequeño para Masonry */
    height: 150px;
    object-fit: cover;
    border: 3px solid #f8f9fa; /* Borde claro */
}

/* Placeholder icono usuario (sin cambios) */
.testimonial-placeholder-icon { width: 80px; height: 80px; margin-bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.testimonial-placeholder-icon i { opacity: 0.5; }

/* Icono comillas */
.testimonial-card-masonry .fa-quote-left {
    color: #adb5bd; /* Gris más suave */
    opacity: 0.8;
    font-size: 1.5rem; /* Un poco más pequeño */
}

/* Cita */
.testimonial-quote {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #495057; /* Texto cita */
}

/* Autor */
.testimonial-author {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--minga-dark);
}
.testimonial-author cite {
    font-style: normal;
    display: block;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.1rem;
}