/* ==========================================================================
   PULIDO ESTÉTICO (auditoría de noviembre 2026)
   Se carga al final de todas las páginas públicas desde includes/cabecera-diseno.php,
   después de sistema-diseno.css, así que estas reglas ganan por orden de cascada.
   No cambia textos ni datos: solo orden visual, tamaños y consistencia.
   Índice:
     0. Escala común (tamaños de letra, radios y paleta base)
     1. Títulos de sección
     2. Botones «Ver todo» y pie de página
     3. Portada en celular
     4. Navegación (migas y botón volver)
     5. Lectura (noticias, Hazte un Hit, tienda)
     6. Ficha de evento (botones en celular, dos columnas en escritorio)
     7. Escritorio: contenedor ancho y rejillas de la portada
     8. Quito Secreto: la puerta
     9. Zector Cinema
    10. Cabina de Quito Secreto y Ticketera
    11. Carrusel «Nuevo en Hazte un Hit»
   ========================================================================== */

/* ---------- 0. Escala común ----------
   Punto de partida para ir reemplazando los valores sueltos del resto del CSS.
   Todo lo nuevo debe usar estas variables en lugar de cifras propias. */
:root {
    /* 7 tamaños de letra */
    --qb-t-xs: 0.75rem;     /* 12px: rótulos y metadatos */
    --qb-t-sm: 0.8125rem;   /* 13px: texto de apoyo */
    --qb-t-base: 0.9375rem; /* 15px: texto normal y botones */
    --qb-t-md: 1.0625rem;   /* 17px: lectura larga */
    --qb-t-lg: 1.25rem;     /* 20px: títulos de sección */
    --qb-t-xl: 1.6rem;      /* 26px: títulos de página en celular */
    --qb-t-2xl: 2.1rem;     /* 34px: títulos de página en escritorio */
    /* 4 radios */
    --qb-r-sm: 6px; --qb-r-md: 10px; --qb-r-lg: 14px; --qb-r-full: 999px;
    /* Paleta base (los museos y la cabina conservan su color de acento propio) */
    --qb-verde: #22c55e;       /* acción en el sitio público */
    --qb-verde-neon: #3ddc84;  /* SOLO hologramas: Ticketera, pase e invitación de app */
    --qb-laton: #c9a24b;       /* Quito Secreto, Curaduría y museos */
    --qb-texto: #f2f2f2; --qb-texto-suave: #a8a8a8;
    --qb-superficie: #1c1c1c; --qb-superficie-2: #121212;
    --qb-borde: #2e2e2e; --qb-borde-control: #3a3a3a;
    /* Anchos */
    --qb-ancho-amplio: 1120px;
}

/* ---------- 1. Títulos de sección: un solo estilo (serif editorial con icono) ---------- */
.encabezado-mencion-especial h2,
.rotulo-seccion-editorial {
    font-family: var(--fuente-editorial); font-weight: 600; letter-spacing: 0; text-transform: none;
    font-size: var(--qb-t-lg); color: var(--qb-texto);
}
.portada .seccion-mencion-especial .encabezado-mencion-especial h2 { font-size: var(--qb-t-lg); }

/* ---------- 2. Botones «Ver todo»: mismo color, misma flecha ---------- */
.btn.btn-ver-todos-eventos, .btn.btn-ver-todas-noticias, .btn.btn-ver-toda-merch,
.btn.btn-ver-todas-convocatorias, .btn.btn-ver-todos-canciones, .btn.btn-ver-todos-presaves {
    background: transparent; color: var(--qb-texto); border: 1px solid var(--qb-borde-control); font-weight: 600;
}
.btn.btn-ver-todos-eventos::after, .btn.btn-ver-todas-noticias::after, .btn.btn-ver-toda-merch::after,
.btn.btn-ver-todas-convocatorias::after, .btn.btn-ver-todos-canciones::after, .btn.btn-ver-todos-presaves::after {
    content: '→'; margin-left: 8px; color: var(--qb-verde); transition: transform 0.15s ease;
}
@media (hover: hover) {
    .btn.btn-ver-todos-eventos:hover, .btn.btn-ver-todas-noticias:hover, .btn.btn-ver-toda-merch:hover,
    .btn.btn-ver-todas-convocatorias:hover, .btn.btn-ver-todos-canciones:hover, .btn.btn-ver-todos-presaves:hover { border-color: var(--qb-verde); }
    .btn[class*="btn-ver-tod"]:hover::after { transform: translateX(3px); }
}

/* Pie de la portada: una acción principal, dos secundarias a la par y «Compartir» discreto */
.sitio-footer.cierre-portada { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-items: center; }
.cierre-portada > * { grid-column: 1 / -1; }
.cierre-portada > [data-abrir-instalar] { order: 1; width: 100%; max-width: 340px; }
.cierre-portada > .btn-conocenos { order: 2; grid-column: 1; width: 100%; max-width: none; justify-self: stretch; }
.cierre-portada > .btn.btn-difunde-arte { order: 2; grid-column: 2; width: 100%; max-width: none; justify-self: stretch; }
.cierre-portada > .btn-conocenos, .cierre-portada > .btn.btn-difunde-arte {
    font-size: var(--qb-t-sm); padding-left: 10px; padding-right: 10px; line-height: 1.25;
    background: transparent; color: var(--qb-texto); border: 1px solid var(--qb-borde-control);
}
.cierre-portada > .redes-sociales { order: 3; }
.cierre-portada > .btn.btn-compartir { order: 4; width: auto; min-height: 36px; border-color: transparent; background: transparent; color: var(--qb-texto-suave); font-size: var(--qb-t-sm); font-weight: 500; }
.cierre-portada > .url-institucional { order: 5; }
.cierre-portada > .creditos-footer { order: 6; }
.cierre-portada > .enlaces-legales, .cierre-portada > nav, .cierre-portada > p:last-of-type { order: 7; }

/* ---------- 3. Portada en celular ---------- */
/* «Desde tu última visita»: el «hace 3 semanas» baja a su propia línea en vez de partirse al lado del título */
@media (max-width: 560px) {
    .portada h2.titulo-desde-visita { flex-wrap: wrap; row-gap: 0; }
    .titulo-desde-visita .desde-visita-hace { flex-basis: 100%; padding-left: 28px; font-family: var(--fuente-ui); }
}
/* Carruseles: la primera tarjeta ya no queda pegada al borde izquierdo */
.portada .lista-proximos-eventos, .portada .lista-horizontal, .portada .carrusel-portada,
.tienda-filtros, .desbordada { scroll-padding-inline: 16px; }

/* ---------- 4. Navegación ---------- */
/* Migas en una sola línea: el último tramo se corta con «…» en vez de ocupar tres renglones */
.migas ol { flex-wrap: nowrap; }
.migas li { white-space: nowrap; flex: none; }
.migas li[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* ---------- 5. Lectura ---------- */
/* Noticias: interlineado 1.65 (antes 1.8, demasiado abierto en celular) */
.nt-pagina .nt-texto, .nt-cuerpo p, .nt-cuerpo li { line-height: 1.65; }
.nt-pagina .nt-lead { line-height: 1.4; }
/* Presentación de Hazte un Hit: 4 líneas (antes 8); el texto completo sigue en «¿Qué es Hazte un Hit?» */
.hm-hero .intro-descripcion-hazte-un-hit { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; max-width: 38ch; margin-left: auto; margin-right: auto; }
/* Tienda: el nombre del producto puede ocupar 3 líneas antes de cortarse */
.pi-nombre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: normal; }

/* ---------- 6. Ficha de evento ---------- */
/* Celular: comprar va primero y a todo el ancho; lo demás en una fila de botones parejos */
.detalle-evento .botones-accion { gap: 8px; }
.detalle-evento .botones-accion > .btn-primario { order: 1; flex: 1 1 100%; min-height: 50px; font-size: var(--qb-t-md); }
.detalle-evento .botones-accion > .btn-comprar-entradas { order: 0; }
.detalle-evento .botones-accion > .alerta-error { order: 0; flex: 1 1 100%; }
.detalle-evento .botones-accion > .btn-secundario { order: 2; flex: 1 1 0; min-width: max-content; padding-left: 12px; padding-right: 12px; font-size: var(--qb-t-sm); gap: 6px; }
.detalle-evento .botones-accion > .btn-secundario svg { flex: none; }
/* Si hay venta de entradas, «Comprar» es la única acción verde; «Asistencia por chat» pasa a la fila de secundarios.
   (Sin venta de entradas, «Asistencia por chat» sigue siendo el botón verde principal.) */
.detalle-evento .botones-accion:has(.btn-comprar-entradas) > .btn-primario:not(.btn-comprar-entradas) {
    order: 2; flex: 1 1 0; min-width: max-content; min-height: var(--alto-boton, 44px); padding-left: 12px; padding-right: 12px; font-size: var(--qb-t-sm);
    background: transparent; color: var(--qb-texto); border: 1px solid var(--qb-borde-control);
}

/* Escritorio: afiche a la izquierda (fijo al bajar) y datos con la compra a la derecha */
@media (min-width: 980px) {
    .contenedor-detalle.detalle-evento {
        max-width: var(--qb-ancho-amplio);
        display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 40px; align-items: start;
    }
    .detalle-evento > * { grid-column: 1 / -1; min-width: 0; }
    .detalle-evento > .flyer-wrap { grid-column: 1; position: sticky; top: 92px; margin-bottom: 0; }
    .detalle-evento > .info-evento { grid-column: 2; }
    .detalle-evento > .info-evento h1 { margin-top: 0; font-size: var(--qb-t-2xl); }
    .detalle-evento .botones-accion > .btn-comprar-entradas { flex: 1 1 100%; }
}

/* ---------- 7. Escritorio: la portada deja de ser una columna de celular ---------- */
@media (min-width: 1100px) {
    .contenedor-principal.portada { max-width: var(--qb-ancho-amplio); }
    /* El buscador y el aviso de convocatoria no se estiran: quedan centrados a ancho de lectura */
    .portada > .buscador-wrap, .portada > .conv-aviso { max-width: var(--ancho-lectura); margin-left: auto; margin-right: auto; }
    /* Rejilla de 6 columnas dentro de «Ahora»: lo que antes iba uno debajo de otro ahora va a la par.
       Todo ocupa el ancho completo salvo: calendario + próximos eventos (mitad y mitad), los tres museos
       (un tercio cada uno) y Diario Bohemio junto a Merch y Curaduría. Si falta una sección, las demás se reacomodan solas. */
    .portada #ahora { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
    .portada #ahora > * { grid-column: 1 / -1; min-width: 0; }
    .portada #ahora > .calendario-wrap { grid-column: span 6; max-width: none; margin-left: 0; margin-right: 0; }
    .portada #ahora > #proximos-eventos { grid-column: span 6; }
    /* museos: se reparten la fila segun cuantos haya (1, 2 o 3) */
    .portada #ahora > .hp-portada, .portada #ahora > .zc-portada, .portada #ahora > .mp-portada { grid-column: span 12; align-self: stretch; }
    .portada #ahora:has(.zc-portada):not(:has(.mp-portada)) > .hp-portada,
    .portada #ahora:has(.zc-portada):not(:has(.mp-portada)) > .zc-portada,
    .portada #ahora:has(.mp-portada):not(:has(.zc-portada)) > .hp-portada,
    .portada #ahora:has(.mp-portada):not(:has(.zc-portada)) > .mp-portada { grid-column: span 6; }
    .portada #ahora:has(.zc-portada):has(.mp-portada) > .hp-portada,
    .portada #ahora:has(.zc-portada):has(.mp-portada) > .zc-portada,
    .portada #ahora:has(.zc-portada):has(.mp-portada) > .mp-portada { grid-column: span 4; }
    .portada #ahora > #seccion-diario { grid-column: span 6; grid-row: span 2; }
    .portada #ahora > #seccion-merch, .portada #ahora > #seccion-curaduria { grid-column: span 6; }
    .portada .grid-calendario .celda-dia { aspect-ratio: 1 / 0.8; }
    /* La noticia destacada no crece más que una pantalla */
    .portada .noticia-destacada .noticia-destacada-media { max-height: 400px; }
    /* Listas verticales en dos columnas */
    .portada .lista-agrupaciones-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .portada .lista-agrupaciones-top > * { margin: 0; }
    /* Tarjetas de carrusel un poco más grandes */
    .portada .lista-proximos-eventos .tarjeta-proximo { flex-basis: 200px; }
    /* Pie centrado a ancho de lectura */
    .sitio-footer.cierre-portada { max-width: var(--ancho-lectura); margin-left: auto; margin-right: auto; }
}

/* ---------- 8. Quito Secreto: la puerta ---------- */
/* El fondo decorativo se salía 24px a cada lado y hacía que la página se moviera de costado en celular */
.contenedor-secreto::before { left: 0; right: 0; }

/* ---------- 9. Zector Cinema ---------- */
/* Ambiente propio del museo (el mismo vino de su tarjeta en la portada) */
.zc-museo .zc-hero { position: relative; isolation: isolate; }
.zc-museo .zc-hero::before {
    content: ''; position: absolute; inset: -24px -16px 0; z-index: -1; pointer-events: none;
    background: radial-gradient(90% 70% at 50% 0%, rgba(120, 28, 44, 0.42), rgba(60, 14, 24, 0.18) 55%, transparent 80%);
}
/* Compartir: cuatro botones redondos en una sola fila (antes cuatro botones anchos en dos filas) */
.zc-share { flex-wrap: nowrap; justify-content: center; }
.zc-share .zc-sb { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; font-size: 0; gap: 0; justify-content: center; }
.zc-share .zc-sb svg { width: 20px; height: 20px; }

/* ---------- 10. Cabina de Quito Secreto y Ticketera ---------- */
/* En la cabina la invitación a instalar la app va compacta (rótulo, celdas y botón), sin el holograma grande:
   así no hay dos pases de pantalla completa antes del contenido propio. En la puerta sigue completa.
   Para volver al holograma grande en la cabina, borra esta regla. */
.cab .ia.ia-cabina .ia-escena { display: none; }
.cab .ia.ia-cabina { margin: 12px 0; }

/* ---------- 11. Carrusel «Nuevo en Hazte un Hit» ----------
   Cada tarjeta mide lo que ocupa su contenido (antes todas se estiraban al alto de la más larga y quedaba un hueco vacío abajo). */
.portada .lista-horizontal:has(> .tarjeta-lanzamiento) { align-items: flex-start; }