/* ============================================================================
   QueShow — TEMA CLARO / SOBRIO / MODERNO  (rediseño total del front público)
   Autor: rediseño visual. SOLO ESTILO. 100% reversible.
   Se carga DESPUÉS de css_personalizados.css (y de qs_light.css) en:
     - MasterPages/SiteWeb.Master
     - MasterPages/siteWebVp.Master
   Objetivo estético: igual que el login del admin (blanco, texto navy,
   tarjetas redondeadas con sombra suave, morado SOLO como acento).
   Sobrescribe por completo el tema oscuro y el "refresh" morado/lila previos.
   Para revertir: quitar el <link> de qs_theme.css en los dos masters.
   ============================================================================ */

/* ------------------------------------------------------------------ Fuente */
@font-face {
    font-family: 'Gilroy';
    src: url('fonts/Gilroy-ExtraBold.otf') format('opentype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- Paleta */
:root {
    --qs-morado: #6220CD; /* primario / acento */
    --qs-morado-h: #5218b0; /* hover primario */
    --qs-morado-soft: rgba(98, 32, 205, 0.10); /* wash MUY sutil para focus/hover */
    --qs-naranja: #FB792B; /* acento secundario, uso mínimo */
    --qs-marino: #07072B; /* texto principal / barras */
    --qs-text: #1b1834; /* texto cuerpo */
    --qs-muted: #6b7280; /* texto secundario */
    --qs-bg: #F4F3F8; /* fondo de página */
    --qs-surface: #ffffff; /* tarjetas / superficies */
    --qs-border: #ececf0; /* bordes suaves */
    --qs-border-2: #e6e6ee; /* bordes de inputs */
    --qs-shadow: 0 10px 30px rgba(30, 20, 60, .08);
    --qs-shadow-sm: 0 4px 14px rgba(30, 20, 60, .06);
    --qs-shadow-hover: 0 16px 40px rgba(30, 20, 60, .14);
    --qs-radius: 16px;
    --qs-radius-lg: 20px;
}

/* Neutraliza cualquier degradado/variable "glow" heredada */
:root {
    --qs-degradado: none;
    --qs-morado-claro: #F4F3F8; /* mata el lila claro #EDE5FF */
}

/* ============================================================ 1. FONDOS */
/* Cuerpo y wrapper principal: claro, SIN imagen, SIN glow, texto oscuro */
body {
    background-color: var(--qs-bg) !important;
}

.contenido_g {
    background-color: var(--qs-bg) !important;
    background-image: none !important;
    color: var(--qs-text) !important;
}

/* Secciones y "mains" internos: transparentes (nada de manchas navy) */
.contenido_g main,
.contenido_g > section,
.contenido_g section {
    background-color: transparent !important;
    background-image: none !important;
}

/* Utilidades de fondo oscuro dentro del contenido -> transparentes */
.contenido_g .background-negro-kynetick,
.contenido_g .bg-dark,
.contenido_g .bg-purple {
    background-color: transparent !important;
    background-image: none !important;
}

/* Si alguna sección usa estas clases sueltas fuera de tarjetas, aclarar */
.contenido_g .background-negro-kynetick.p-5,
.contenido_g section[style*="rgb(21, 24, 39)"] {
    background-color: transparent !important;
}

/* ====================================================== 2. TIPOGRAFÍA */
.contenido_g h1,
.contenido_g h2,
.contenido_g h3,
.contenido_g h4,
.contenido_g h5,
.contenido_g .card-title,
.qs-cta-inner h2,
.qs-foot-links h5 {
    font-family: 'Gilroy', 'Segoe UI', system-ui, -apple-system, sans-serif;
    letter-spacing: .2px;
}

/* Escala limpia para títulos de contenido */
.contenido_g h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
}

.contenido_g h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 800;
}

.contenido_g h4 {
    font-weight: 800;
}

/* ================================================= 3. COLOR DE TEXTO */
/* Todo el texto de contenido -> oscuro. Se EXCLUYEN botones, badges y las
   máscaras/overlays sobre imágenes (héroe y tarjetas destacadas). */
.contenido_g,
.contenido_g p,
.contenido_g li,
.contenido_g label,
.contenido_g h1,
.contenido_g h2,
.contenido_g h3,
.contenido_g h4,
.contenido_g h5,
.contenido_g h6,
.contenido_g .color-negro-kynetick,
.contenido_g .color-blanco-kynetick,
.contenido_g .text-white,
.contenido_g span:not(.badge):not(.carousel-control-prev-icon):not(.carousel-control-next-icon):not(.material-symbols-rounded),
.contenido_g .card-title,
.contenido_g .card-text {
    color: var(--qs-text) !important;
}

/* Títulos y encabezados un punto más oscuros (navy) */
.contenido_g h1,
.contenido_g h2,
.contenido_g h3,
.contenido_g h4,
.contenido_g h5,
.contenido_g .card-title,
.contenido_g .color-negro-kynetick {
    color: var(--qs-marino) !important;
}

/* Texto secundario / fechas -> gris sobrio (no lila) */
.contenido_g .fw-light,
.contenido_g .fw-lighter,
.contenido_g .text-muted,
.contenido_g .card-text.fw-light {
    color: var(--qs-muted) !important;
}

/* EXCEPCIÓN: overlays de imagen conservan texto blanco (héroe + destacados) */
.contenido_g #div_img_principal,
.contenido_g #div_img_principal *,
.contenido_g .mask,
.contenido_g .mask *,
.contenido_g .Evento_destacado,
.contenido_g .Evento_destacado *,
.contenido_g #div_destacados .card-title,
.contenido_g #div_destacados .card-text,
.contenido_g #carrusel_multi_destacados .card-title,
.contenido_g #carrusel_multi_destacados .card-text {
    color: #ffffff !important;
}

/* ============================================ 4. TARJETAS DE EVENTO */
/* Contenedor de tarjeta (div.rounded-5, .scrolling-card-evento, .card) */
.contenido_g .scrolling-card-evento,
.contenido_g .scrolling-card-evento > .rounded-5,
.contenido_g .card {
    background-color: transparent !important;
}

.contenido_g .scrolling-card-evento > .rounded-5,
.contenido_g .card {
    border-radius: var(--qs-radius) !important;
    overflow: hidden;
    background-color: var(--qs-surface) !important;
    border: 1px solid var(--qs-border) !important;
    box-shadow: var(--qs-shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
}

.contenido_g .scrolling-card-evento > .rounded-5:hover,
.contenido_g .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--qs-shadow-hover);
    border-color: rgba(98, 32, 205, .35) !important;
}

/* Imagen superior de la tarjeta */
.contenido_g .card-img-top,
.contenido_g .rounded_top {
    border-top-left-radius: var(--qs-radius) !important;
    border-top-right-radius: var(--qs-radius) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Cuerpo de tarjeta: BLANCO con texto oscuro (mata lila #6220CD y navy) */
.contenido_g .card-body,
.contenido_g .card-body.background-lila-kynetick,
.contenido_g .card-body.background-negro-kynetick {
    background-color: var(--qs-surface) !important;
    background-image: none !important;
    color: var(--qs-text) !important;
    border-bottom-left-radius: var(--qs-radius) !important;
    border-bottom-right-radius: var(--qs-radius) !important;
}

.contenido_g .card-body .card-title,
.contenido_g .card-body.background-lila-kynetick .card-title,
.contenido_g .card-body.background-negro-kynetick .card-title,
.contenido_g .card-body .color-blanco-kynetick {
    color: var(--qs-marino) !important;
}

.contenido_g .card-body .card-text {
    color: var(--qs-muted) !important;
}

/* Tarjetas destacadas (imagen + overlay): mantener contenedor sin borde blanco
   para que el degradado sobre la imagen luzca; conservar sombra */
.contenido_g #div_destacados .scrolling-card-evento > .rounded-5,
.contenido_g #div_destacados .card,
.contenido_g #carrusel_multi_destacados .scrolling-card-evento > .rounded-5,
.contenido_g #carrusel_multi_destacados .card {
    border: none !important;
}

.contenido_g .mask {
    border-radius: var(--qs-radius) !important;
}

/* ======================================= 5. TÍTULOS DE SECCIÓN (home) */
/* Oculta los SVG grandes de los títulos y usa una barra de acento morada */
.contenido_g h3.fw-bold > svg {
    display: none !important;
}

.contenido_g h3.fw-bold {
    position: relative;
    display: inline-block;
    font-family: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
    font-weight: 800 !important;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem) !important;
    color: var(--qs-marino) !important;
    padding-left: 16px !important;
    line-height: 1.2 !important;
}

.contenido_g h3.fw-bold::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.05em;
    border-radius: 6px;
    background: var(--qs-morado);
}

/* Aire entre secciones */
.contenido_g main {
    padding-top: 1.4rem !important;
    padding-bottom: 1.4rem !important;
}

/* Flechas de carrusel: morado de marca como acento (sobrio) */
.contenido_g .color-lila-kynetick,
.contenido_g .color-lila-kynetick i {
    color: var(--qs-morado) !important;
    transition: color .15s ease, transform .15s ease;
}

.contenido_g .color-lila-kynetick:hover,
.contenido_g .color-lila-kynetick:hover i {
    color: var(--qs-morado-h) !important;
}

/* ============================================ 6. BOTONES Y BADGES */
/* Primario: morado sólido redondeado (idéntico espíritu al login) */
.btn-comprar_boleto,
.btn-ver_mas,
.badge.btn-comprar_boleto,
.badge.btn-ver_mas,
a.btn-comprar_boleto,
a.btn-ver_mas {
    background: var(--qs-morado) !important;
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 16px rgba(98, 32, 205, .22);
    transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
}

.btn-comprar_boleto:hover,
.btn-ver_mas:hover,
.badge.btn-comprar_boleto:hover,
.badge.btn-ver_mas:hover,
a.btn-comprar_boleto:hover,
a.btn-ver_mas:hover {
    background: var(--qs-morado-h) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(98, 32, 205, .28);
    filter: none !important;
}

/* Botones que usan la utilidad de fondo lila como acción (NO tarjetas) */
.btn.background-lila-kynetick,
a.background-lila-kynetick.btn,
.background-lila-kynetick.nombreUsuario_modal {
    background-color: var(--qs-morado) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Botón claro genérico -> limpio (antes navy) */
.contenido_g .btn-light {
    background-color: #ffffff !important;
    color: var(--qs-marino) !important;
    border: 1px solid var(--qs-border) !important;
}

.contenido_g .btn-light:hover {
    background-color: #f6f5fb !important;
    color: var(--qs-marino) !important;
}

/* Botones outline oscuros (tabs "Acerca/Recinto" del evento) */
.contenido_g .btn-outline-dark,
.contenido_g .a_hover {
    color: var(--qs-marino) !important;
    border: 1.5px solid var(--qs-border-2) !important;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    text-transform: capitalize;
}

.contenido_g .btn-outline-dark:hover,
.contenido_g .a_hover:hover,
.contenido_g .a_active {
    color: #ffffff !important;
    background-color: var(--qs-morado) !important;
    border-color: var(--qs-morado) !important;
}

/* Badges de estado (danger, etc.) más sobrios cuando son informativos */
.contenido_g .badge.badge-danger:not(.btn-comprar_boleto):not(.btn-ver_mas) {
    background-color: var(--qs-morado) !important;
    color: #fff !important;
}

/* ======================================= 7. INPUTS / FORMULARIOS */
/* Estilo limpio como el login: claro, redondeado, foco morado suave */
.contenido_g .form-control,
.contenido_g input[type="text"],
.contenido_g input[type="email"],
.contenido_g input[type="password"],
.contenido_g input[type="search"],
.contenido_g textarea,
.contenido_g select {
    border-radius: 12px !important;
    border: 1.5px solid var(--qs-border-2) !important;
    background-color: #fafafc !important;
    color: var(--qs-text) !important;
    box-shadow: none !important;
}

.contenido_g .form-control:focus,
.contenido_g input:focus,
.contenido_g textarea:focus,
.contenido_g select:focus {
    border-color: var(--qs-morado) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px var(--qs-morado-soft) !important;
    outline: none !important;
}

.contenido_g .form-control::placeholder {
    color: #a99fc0 !important;
    opacity: 1;
}

.contenido_g .form-label,
.contenido_g label {
    color: var(--qs-text) !important;
}

/* ============================================= 8. TABS / PESTAÑAS */
/* Home (nav-tabs de categorías) */
.nav-tabs {
    border-bottom: 1px solid var(--qs-border) !important;
}

.contenido_g .nav-tabs .nav-link,
.nav-tabs .nav-link.color-negro-kynetick {
    color: var(--qs-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    font-weight: 700;
}

.contenido_g .nav-tabs .nav-link:hover {
    color: var(--qs-marino) !important;
    border-bottom-color: rgba(98, 32, 205, .35) !important;
    background: transparent !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.contenido_g .nav-tabs .nav-link.active {
    color: var(--qs-morado) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--qs-morado) !important;
}

/* Filtros de categoría en /verEventos (botones .select_categoria) */
.contenido_g .btn-outline-light.select_categoria,
.contenido_g .select_categoria.btn {
    color: var(--qs-marino) !important;
    background-color: #ffffff !important;
    border: 1.5px solid var(--qs-border-2) !important;
    border-radius: 999px !important;
    font-weight: 700;
}

.contenido_g .select_categoria:hover {
    background-color: #f6f5fb !important;
    color: var(--qs-morado) !important;
}

.contenido_g .select_categoria.active-link,
.contenido_g .active-link {
    color: #ffffff !important;
    background-color: var(--qs-morado) !important;
    border-color: var(--qs-morado) !important;
}

/* ============================================= 9. ACORDEÓN (evento) */
.contenido_g .accordion-item {
    border: 1px solid var(--qs-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    background-color: var(--qs-surface) !important;
    margin-bottom: 10px;
}

.contenido_g .accordion-button {
    background-color: #ffffff !important;
    color: var(--qs-marino) !important;
    font-weight: 700;
    box-shadow: none !important;
}

.contenido_g .accordion-button:not(.collapsed) {
    background-color: var(--qs-morado) !important;
    color: #ffffff !important;
}

.contenido_g .body-border-accordion,
.contenido_g .accordion-body {
    background-color: #ffffff !important;
    color: var(--qs-text) !important;
}

/* ============================================= 10. NAVBAR (refinada) */
/* Barra navy sobria, con leve borde inferior (mantiene el logo blanco) */
.menu_nav,
.navbar.bg-purple,
header .navbar {
    background-color: var(--qs-marino) !important;
    box-shadow: 0 2px 14px rgba(7, 7, 43, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Botón de categorías dentro del buscador: morado sólido */
.menu_nav .btn.btn-light[style*="6220CD"],
.menu_nav .form-search .btn-light {
    background-color: var(--qs-morado) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Input del buscador: fondo blanco limpio */
.menu_nav #BuscadorInput {
    background-color: #ffffff !important;
    color: var(--qs-marino) !important;
    border: none !important;
}

.menu_nav #BuscadorInput::placeholder {
    color: #8a8aa0 !important;
}

/* Pastilla de usuario en navbar: morado de acento */
.nombreUsuario_modal.background-lila-kynetick {
    background-color: var(--qs-morado) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

/* ================================ 11. CARRITO / CHECKOUT (rv_v2) */
/* Panel de carrito claro con sombra suave */
#div_carrito,
#div_carrito_pagar {
    background-color: var(--qs-surface) !important;
    color: var(--qs-text) !important;
    border: 1px solid var(--qs-border) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: var(--qs-shadow-sm);
}

#div_carrito .color-blanco-kynetick,
#div_carrito_pagar .color-blanco-kynetick,
#div_carrito h1, #div_carrito h2, #div_carrito h3, #div_carrito h4, #div_carrito h5, #div_carrito h6, #div_carrito p, #div_carrito span,
#div_carrito_pagar h1, #div_carrito_pagar h2, #div_carrito_pagar h3, #div_carrito_pagar h4, #div_carrito_pagar h5, #div_carrito_pagar h6, #div_carrito_pagar p, #div_carrito_pagar span {
    color: var(--qs-text) !important;
}

/* Botones de acción del carrito (validar / finalizar) -> morado sólido */
#btn_validar_boletos,
#btn_validar_boletosB,
#btn_Finalizar_Venta,
#btn_Finalizar_VentaB,
.contenido_g .btn.background-lila-kynetick {
    background-color: var(--qs-morado) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
}

#btn_validar_boletos:hover,
#btn_validar_boletosB:hover,
#btn_Finalizar_Venta:hover,
#btn_Finalizar_VentaB:hover {
    background-color: var(--qs-morado-h) !important;
    color: #ffffff !important;
}

/* Steppers de cantidad: acento morado sobrio */
.contenido_g .tex_rem {
    color: var(--qs-marino) !important;
}

/* ============================ 12. PAGO / CONFIRMACIÓN (payment) */
#div_referenciaPago .border,
.contenido_g .border.border-2 {
    border-color: var(--qs-border) !important;
    border-width: 1px !important;
    border-radius: var(--qs-radius) !important;
    background-color: var(--qs-surface) !important;
    box-shadow: var(--qs-shadow-sm);
}

/* Íconos/acento morado de confirmación conservan color de marca */
.contenido_g .color-lila-kynetick {
    color: var(--qs-morado) !important;
}

/* =============================== 13. MODALES (login / ayuda / msg) */
.modal-content.style-Login {
    background-color: #ffffff !important;
    color: var(--qs-text) !important;
    border: 1px solid var(--qs-border) !important;
    border-radius: var(--qs-radius-lg) !important;
    box-shadow: var(--qs-shadow) !important;
}

.modal-content.style-Login .text-white,
.modal-content.style-Login label,
.modal-content.style-Login h4,
.modal-content.style-Login h5,
.modal-content.style-Login h6,
.modal-content.style-Login .close {
    color: var(--qs-text) !important;
}

/* El logo de los modales es blanco: darle un chip navy para que se vea */
.modal-content.style-Login img[src*="logototalBlanco"] {
    background-color: var(--qs-marino);
    padding: 8px 14px;
    border-radius: 12px;
}

.modal-content.style-Login .terminos {
    color: var(--qs-morado) !important;
}

.modal-content.style-Login .terminos:hover {
    color: var(--qs-morado-h) !important;
}

/* Ícono de mostrar/ocultar contraseña legible */
.modal-content.style-Login .fa-eye,
.modal-content.style-Login .fa-eye-slash {
    color: var(--qs-muted) !important;
}

/* =============================== 14. SCROLLBAR (sobrio, sin degradado) */
::-webkit-scrollbar {
    width: 10px;
    height: 8px;
    background-color: #eceaf3;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    background-color: #eceaf3;
}

::-webkit-scrollbar-thumb {
    background-color: #c9c2dd;
    background-image: none;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--qs-morado);
}

/* =============================== 15. FOOTER (refinado, sobrio) */
/* Se mantiene una banda navy sólida (sin degradados ni glows), acentos morados */
.qs-footer {
    background-color: var(--qs-marino) !important;
    color: #e9e9f2 !important;
}

/* Banda CTA: overlay navy sólido sobre la misma imagen (sin degradado morado→naranja) */
.qs-cta {
    background-image: linear-gradient(rgba(7, 7, 43, .82), rgba(7, 7, 43, .92)), url('/Imagenes/footer_hero.jpg?v=qs9') !important;
    background-size: cover !important;
    background-position: center !important;
}

.qs-cta-inner h2 {
    color: #ffffff !important;
    font-family: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
}

.qs-cta-inner p {
    color: #d9d7ea !important;
}

/* Acento de texto: morado sólido (mata el degradado clip-text) */
.qs-accent {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #b79bff !important; /* morado claro legible SOBRE navy (no es fondo lila) */
    font-weight: 800;
}

/* Botón CTA: morado sólido redondeado */
.qs-cta-btn {
    background: var(--qs-morado) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(98, 32, 205, .30);
}

.qs-cta-btn:hover {
    background: var(--qs-morado-h) !important;
    filter: none !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* Tagline / enlaces del footer en gris claro legible (no lila) */
.qs-foot-tag,
.qs-foot-links a,
.qs-foot-bottom {
    color: #b9b7cc !important;
}

.qs-foot-links h5 {
    color: #ffffff !important;
    font-family: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
}

.qs-foot-links a:hover {
    color: #ffffff !important;
}

/* Íconos sociales: hover morado sólido (sin degradado) */
.qs-foot-social a {
    background: rgba(255, 255, 255, .07) !important;
    color: #e9e9f2 !important;
}

.qs-foot-social a:hover {
    background: var(--qs-morado) !important;
    transform: translateY(-2px);
}

.qs-foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

/* =============================== 16. VARIOS / LIMPIEZA */
/* Sombra fuerte previa (negra) -> sombra suave de marca */
.contenido_g .shadow-5-strong,
.contenido_g .shadow-2-strong,
.contenido_g .shadow-1-strong {
    box-shadow: var(--qs-shadow) !important;
}

/* Separadores del home */
.contenido_g .separdor {
    background: var(--qs-border) !important;
    opacity: 1;
}

/* Newsletter (si se muestra): input y botón coherentes */
#txtenviarPromociones {
    background: #ffffff !important;
    border: 1.5px solid var(--qs-border-2) !important;
    color: var(--qs-text) !important;
}

#enviarPromociones {
    background-color: var(--qs-morado) !important;
}

/* Enlaces "terminos" / hover personalizado en modales y contenido */
.contenido_g .terminos {
    color: var(--qs-morado) !important;
}

.contenido_g .terminos:hover {
    color: var(--qs-morado-h) !important;
}

/* ============================================================================
   17. HOME — REACOMODO A MARKETPLACE (grid, hero, chips)   [scope: .qs-home]
   Solo estructura/layout. Los datos siguen inyectándose por AJAX en los
   MISMOS contenedores (IDs intactos). Reversible: quitar la clase qs-home
   del <section> y este bloque.
   ============================================================================ */

/* ---- 17.1 HERO full-width refinado --------------------------------------- */
.qs-home .qs-hero {
    width: 100%;
    margin: 0 0 6px;
    border-radius: 0 0 var(--qs-radius-lg) var(--qs-radius-lg);
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
    background-color: #e9e7f1; /* placeholder mientras carga el banner */
}

.qs-home .qs-hero .carousel-inner,
.qs-home #item_carrucel_vaner,
.qs-home #item_carrucel_vaner .carousel-item {
    height: 100%;
}

.qs-home #item_carrucel_vaner .Evento_seleccionado {
    max-height: none !important;
}

/* Altura de hero responsiva; la imagen cubre sin deformarse */
.qs-home #item_carrucel_vaner img {
    width: 100% !important;
    height: clamp(200px, 34vw, 430px) !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
}

/* Controles del carrusel del hero, más discretos */
.qs-home .qs-hero .carousel-control-prev,
.qs-home .qs-hero .carousel-control-next {
    width: 8%;
    opacity: .85;
}

/* ---- 17.2 Ocultar flechas laterales (ya es grid) ------------------------- */
.qs-home #carrusel_multi_padres_left,
.qs-home #carrusel_multi_padres_right,
.qs-home #carrusel_multi_ubicacion_left,
.qs-home #carrusel_multi_ubicacion_right,
.qs-home #carrusel_multi_destacados_left,
.qs-home #carrusel_multi_destacados_right {
    display: none !important;
}

/* Neutralizar las columnas col-1 vacías que contenían las flechas:
   dejar que la columna central de contenido ocupe todo el ancho */
.qs-home main > .row > .col-1,
.qs-home section > main > .row > .col-1,
.qs-home .row > .col-1.text-center.d-none.d-sm-block {
    display: none !important;
}

.qs-home main > .row > [class*="col-"]:not(.col-1),
.qs-home .row > .col-12.col-sm-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Contenedor general de secciones con buen aire y ancho de marketplace */
.qs-home main {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
}

/* ---- 17.3 De TIRAS de scroll a REJILLA responsiva ------------------------ */
.qs-home #carrusel_multi_padres,
.qs-home #div_ubicacion,
.qs-home #div_destacados,
.qs-home div[id^="div_concierto_"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
    padding: 6px 2px 10px !important;
    margin: 0 !important;
    scroll-behavior: auto;
}

@media (min-width: 768px) {
    .qs-home #carrusel_multi_padres,
    .qs-home #div_ubicacion,
    .qs-home #div_destacados,
    .qs-home div[id^="div_concierto_"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

@media (min-width: 1200px) {
    .qs-home #carrusel_multi_padres,
    .qs-home #div_ubicacion,
    .qs-home #div_destacados,
    .qs-home div[id^="div_concierto_"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

/* Celdas: cada tarjeta ocupa su track (anula width 25%/33%/70% y márgenes) */
.qs-home .scrolling-card-evento {
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* Anular márgenes/paddings internos que descuadran el grid */
.qs-home .scrolling-card-evento > .m-2 {
    margin: 0 !important;
}

.qs-home div[id^="div_concierto_"] > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- 17.4 Tarjeta-tile uniforme (catálogo) ------------------------------- */
/* Caja visual = envoltorio directo del .card-body en cada variante */
.qs-home #carrusel_multi_padres .scrolling-card-evento > div,
.qs-home #div_ubicacion .scrolling-card-evento > div,
.qs-home div[id^="div_concierto_"] > div > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--qs-surface) !important;
    border: 1px solid var(--qs-border) !important;
    border-radius: var(--qs-radius) !important;
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
    cursor: pointer;
}

.qs-home #carrusel_multi_padres .scrolling-card-evento > div:hover,
.qs-home #div_ubicacion .scrolling-card-evento > div:hover,
.qs-home div[id^="div_concierto_"] > div > div:hover {
    transform: translateY(-4px);
    box-shadow: var(--qs-shadow-hover);
    border-color: rgba(98, 32, 205, .35) !important;
}

/* Imagen superior con proporción uniforme */
.qs-home #carrusel_multi_padres .scrolling-card-evento img,
.qs-home #div_ubicacion .scrolling-card-evento img,
.qs-home div[id^="div_concierto_"] img {
    width: 100% !important;
    height: 170px !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
    border-top-left-radius: var(--qs-radius) !important;
    border-top-right-radius: var(--qs-radius) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Cuerpo de la tarjeta: crece para igualar alturas, texto ordenado */
.qs-home #carrusel_multi_padres .card-body,
.qs-home #div_ubicacion .card-body,
.qs-home div[id^="div_concierto_"] .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 14px !important;
    border-radius: 0 !important;
}

.qs-home .card-body .card-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
}

.qs-home .card-body .card-text {
    font-size: .86rem !important;
    line-height: 1.3 !important;
}

/* La fecha (último card-text) al fondo, como en un tile de marketplace */
.qs-home .card-body .card-text:last-child {
    margin-top: auto !important;
    padding-top: 4px;
    font-weight: 600;
    color: var(--qs-marino) !important;
}

/* ---- 17.5 Tarjetas DESTACADAS (imagen + overlay) como tiles -------------- */
.qs-home #div_destacados .scrolling-card-evento {
    border-radius: var(--qs-radius) !important;
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease;
    cursor: pointer;
}

.qs-home #div_destacados .scrolling-card-evento:hover {
    transform: translateY(-4px);
    box-shadow: var(--qs-shadow-hover);
}

.qs-home #div_destacados .bg-image,
.qs-home #div_destacados .mask {
    border-radius: var(--qs-radius) !important;
    height: 210px !important;
    max-height: none !important;
    overflow: hidden;
}

.qs-home #div_destacados img {
    width: 100% !important;
    height: 210px !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* Overlay legible para el texto blanco de las destacadas */
.qs-home #div_destacados .mask {
    background: linear-gradient(to top, rgba(7, 7, 43, .78) 0%, rgba(7, 7, 43, .10) 55%, rgba(7, 7, 43, 0) 100%) !important;
}

/* ---- 17.6 Encabezados de sección limpios --------------------------------- */
/* (Los SVG gigantes ya se ocultan en la sección 5). Refuerzo de margen. */
.qs-home h3.fw-bold {
    margin: 6px 0 14px !important;
}

.qs-home h3.fw-bold > svg {
    display: none !important;
}

/* Separación entre bloques de sección */
.qs-home > section,
.qs-home > main {
    margin-top: 8px;
    margin-bottom: 8px;
}

/* ---- 17.7 Barra de CATEGORÍAS como CHIPS --------------------------------- */
.qs-home #ex1.nav-tabs {
    border-bottom: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 6px;
}

.qs-home #ex1.nav-tabs .nav-item {
    margin: 0 !important;
}

.qs-home #ex1 .nav-link {
    border: 1.5px solid var(--qs-border-2) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--qs-marino) !important;
    padding: .45rem 1.05rem !important;
    line-height: 1.1 !important;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.qs-home #ex1 .nav-link:hover {
    color: var(--qs-morado) !important;
    border-color: var(--qs-morado) !important;
    background: #ffffff !important;
}

.qs-home #ex1 .nav-link.active,
.qs-home #ex1 .nav-item.show .nav-link {
    background: var(--qs-morado) !important;
    color: #ffffff !important;
    border-color: var(--qs-morado) !important;
}

.qs-home #ex1 .nav-link.active:hover {
    color: #ffffff !important;
}

/* Fila de la sección de categorías: título + chips bien alineados */
.qs-home #ex1 {
    align-items: center;
}