/* ==========================================================================
   Sistema de diseño — Quito Bohemio (páginas públicas)

   Se carga DESPUÉS de estilo.css, de las hojas propias de cada página y de
   los <style> de cada página (ver includes/cabecera-diseno.php): así lo que
   está acá gana por orden de cascada y las reglas viejas siguen siendo la
   base. Un solo lugar para lo que debe verse igual en todo el sitio.

   Reglas fijas:
     · Tipografía: Fraunces para títulos, Inter para todo lo demás.
       Nada por debajo de 12 px.
     · Dos anchos de contenido: --ancho-lectura (720) y --ancho-galeria (1080).
     · Tres botones (principal verde, secundario de borde, texto) en dos
       tamaños, siempre de al menos 40 px de alto (44 en celular).
     · VERDE = acción; dorado = identifica; lo que va sobre verde lleva texto
       casi negro (blanco sobre #22c55e da 2.28:1; el oscuro da 7.5:1).
     · Las fotos de contenido SIEMPRE se ven completas, sea cual sea su
       formato: filas justificadas en galerías y recuadro con fondo
       desenfocado en miniaturas (assets/js/marcos-foto.js). Nunca recorte.
   ========================================================================== */

:root {
    --fuente-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fuente-editorial: 'Fraunces', Georgia, serif;
    --accion-texto: #06210f;          /* texto sobre verde: 7.5:1 */
    --borde-control: #3a3a3a;         /* bordes de botones y campos */
    --ancho-lectura: 720px;
    --ancho-galeria: 1080px;
    --alto-control: 48px;
    --alto-boton: 44px;
    --alto-pildora: 40px;
    --radio-campo: 10px;
    --radio-foto: 8px;
    --sep-foto: 6px;
}

/* ---------- Tipografía base ---------- */
body { font-family: var(--fuente-ui); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }

/* Título de página (H1): Fraunces 600, 32/40 (28/36 en celular). */
main h1:not(.sr-solo):not(.fa-nombre):not(.titulo-secreto),
.contenedor-principal h1, .contenedor-detalle h1, .info-evento h1, .intro-hazte-un-hit h1, .contenedor-juego h1 {
    font-family: var(--fuente-editorial);
    font-weight: 600;
    font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0 0 12px;
}
h1.titulo-editorial-galeria { font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2rem); }
.pagina-404 h1 { font-family: var(--fuente-editorial); font-size: 4.5rem; font-weight: 700; line-height: 1; color: var(--acento-hazte-un-hit); }
.titulo-secreto { font-family: var(--fuente-editorial); font-weight: 600; }

/* Título de sección (H2): Fraunces 600, 22–24/1.3. */
.seccion-destacados > h2, .capa-t h2, .portada h2.titulo-desde-visita, .nd-seccion-titulo, .nd-noche-titulo,
.lista-hazte-un-hit h2, .seccion-galeria-evento h2, .contenedor-detalle h2, .contenedor-principal > h2 {
    font-family: var(--fuente-editorial);
    font-weight: 600;
    font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: 0;
}
/* Subsección (H3) de tarjetas destacadas: Inter 600, 18/26. */
.hoy-hero-info h3, .banner-p h3, .portada .info-mencion-especial h3, .noticia-destacada-info h3 {
    font-family: var(--fuente-ui); font-weight: 700; letter-spacing: -0.01em;
}

/* Etiquetas y rótulos: nunca menos de 12 px. */
.etiqueta-noticia-destacada, .nd-pildora, .nd-meta, .fa-tipo, .tarjeta-conv .cuenta, .tarjeta-noticia-c .fecha-noticia-c,
.item-vitrina-recuerdo span small, .pill-p, .badge-estado, .fecha-noticia-destacada, .fecha-noticia, .creditos-footer,
.enlaces-legales-footer, .url-institucional, .nota-tracking, .tarjeta-cancion .c small, .tarjeta-novedad .c small,
.carrusel-miradas .carrusel-item span, .item-recuerdo-publico span, .portada .tarjeta-proximo .c span,
.pi-marca, .chip-merch, .pf-cuenta, .fa-titulo-k, .insignia-edad-mini, .item-agrupacion-perfil small, .item-fotografo small {
    font-size: max(0.75rem, 12px);
}
.item-vitrina-recuerdo span { font-size: 0.8125rem; }
.producto .pi-marca, .producto .pi-tallas, .fa-video-pie > span { font-size: max(0.75rem, 12px); }
.nd-flecha { width: 44px; height: 44px; }

/* ---------- Anchos ---------- */
.contenedor-principal, .contenedor-detalle { max-width: var(--ancho-lectura); }
.contenedor-galeria-fotografia { max-width: var(--ancho-galeria); }
.contenedor-secreto { max-width: var(--ancho-lectura); }

/* ---------- Botones ---------- */
.btn, .btn-agendar-cita, .btn-verde-borde, .btn-compartir-agrupacion, .btn-soporte, .btn-link-texto-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--alto-boton);
    padding: 0 22px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
}
/* estilo.css los deja en inline-block (más específico que .btn): se vuelve a centrar el texto. */
.btn.btn-difunde-arte, .btn.btn-compartir-verde, .sitio-footer #btn-compartir { display: inline-flex; }
/* Principal: verde con texto oscuro. */
.btn-primario, .btn.btn-difunde-arte, .btn.btn-compartir-verde, .btn.btn-compra-modal, .btn-quito-secreto.btn-primario {
    background: var(--accion);
    border-color: var(--accion);
    color: var(--accion-texto);
}
/* Secundario: contorno neutro; el borde verde solo aparece al pasar el cursor. */
.btn-secundario, .btn-agendar-cita, .btn-verde-borde, .btn.btn-ver-todos-presaves, .btn.btn-ver-todos-canciones,
.btn.btn-ver-toda-merch, .btn.btn-ver-todas-convocatorias, .btn.btn-ver-galeria-miradas {
    background: transparent;
    border: 1px solid var(--borde-control);
    color: var(--texto);
}
@media (hover: hover) and (pointer: fine) {
    .btn-secundario:hover, .btn-agendar-cita:hover, .btn-verde-borde:hover { border-color: var(--accion); background: rgba(34, 197, 94, 0.08); }
    .btn-primario:hover, .btn.btn-difunde-arte:hover, .btn.btn-compartir-verde:hover { filter: brightness(1.06); }
}
/* Tamaño chico (botones dentro de tarjetas). */
.btn.btn-merch, .btn.btn-conocenos, .tarjeta-conv .btn, .btn.btn-compra-tarjeta {
    min-height: var(--alto-pildora);
    padding: 0 18px;
    font-size: 0.875rem;
}
/* Ícono dentro de un botón: mismo tamaño en todos. */
.btn .icono-linea, .btn-agendar-cita .icono-linea, .btn-verde-borde .icono-linea { width: 1.15em; height: 1.15em; flex: none; }
.btn:focus-visible, .pildora-rango:focus-visible, .portada-chip:focus-visible, .pestana-p:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accion);
    outline-offset: 2px;
}

/* ---------- Filtros y pestañas (un solo estilo de píldora) ---------- */
.pildora-rango, .filtros-estado a, .portada-chip, .pestana-p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--alto-pildora);
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--borde-control);
    background: transparent;
    color: #d8d8d8;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}
.pildora-rango.activo, .filtros-estado a.activo, .portada-chip.activo, .pestana-p.activa {
    background: var(--accion);
    border-color: var(--accion);
    color: var(--accion-texto);
    font-weight: 600;
}
/* El ícono verde de una píldora activa (que ya es verde) pasa al color del texto. */
.pildora-rango.activo .icono-verde, .filtros-estado a.activo .icono-verde, .pestana-p.activa .icono-verde { color: var(--accion-texto); }
@media (hover: hover) and (pointer: fine) {
    .pildora-rango:not(.activo):hover, .filtros-estado a:not(.activo):hover,
    .portada-chip:not(.activo):hover, .pestana-p:not(.activa):hover { border-color: var(--accion); color: var(--texto); background: rgba(34, 197, 94, 0.08); }
}
.portada-chip { background: var(--fondo-tarjeta); }
/* Selectores de filtro (género, país, mes): misma altura y forma que las píldoras. */
#filtro-genero, #filtro-pais { min-height: var(--alto-pildora); font-size: 0.875rem; }

/* ---------- Formularios ---------- */
.form-evento label, .login-form label {
    margin-top: 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #e6e6e6;
}
.form-evento input[type="text"], .form-evento input[type="url"], .form-evento input[type="date"], .form-evento input[type="time"],
.form-evento input[type="number"], .form-evento input[type="email"], .form-evento input[type="tel"], .form-evento input[type="password"],
.form-evento textarea, .form-evento select, .login-form input, #buscador-eventos,
.form-ir-anio input[type="number"], .form-rango-fechas input[type="date"] {
    min-height: var(--alto-control);
    padding: 0 14px;
    border: 1px solid var(--borde-control);
    border-radius: var(--radio-campo);
    background-color: var(--fondo-tarjeta);
    color: var(--texto);
    font-family: var(--fuente-ui);
    font-size: 1rem;
    line-height: 1.4;
}
.form-evento textarea { padding: 13px 14px; min-height: 160px; font-family: var(--fuente-ui); }
.form-evento input::placeholder, .form-evento textarea::placeholder, #buscador-eventos::placeholder { color: #8a8a8a; }
.form-evento input:focus, .form-evento textarea:focus, .form-evento select:focus, .login-form input:focus, #buscador-eventos:focus {
    outline: none;
    border-color: var(--accion);
    background-color: var(--fondo-tarjeta);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}
.form-evento input:user-invalid, .form-evento textarea:user-invalid, .form-evento select:user-invalid { border-color: var(--peligro); }
/* Lista desplegable propia (en lugar de la del navegador) en los formularios. */
.form-evento select, .form-ir-anio select, .form-selector-mes select, .form-rango-fechas select, .form-umbral select {
    appearance: none;
    -webkit-appearance: none;
    min-height: var(--alto-control);
    padding: 0 40px 0 14px;
    border: 1px solid var(--borde-control);
    border-radius: var(--radio-campo);
    background-color: var(--fondo-tarjeta);
    color: var(--texto);
    font-family: var(--fuente-ui);
    font-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
}
/* Casilla propia: verde cuando está marcada. */
.form-evento input[type="checkbox"], .login-form input[type="checkbox"], .fila-consentimiento input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1.5px solid #5a5a5a;
    border-radius: 6px;
    background: transparent center / 15px no-repeat;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.form-evento input[type="checkbox"]:checked, .login-form input[type="checkbox"]:checked, .fila-consentimiento input[type="checkbox"]:checked {
    background-color: var(--accion);
    border-color: var(--accion);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306210f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.form-evento input[type="checkbox"]:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; }
.fila-consentimiento { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: 0.875rem; line-height: 1.5; color: #d8d8d8; font-weight: 400; }
.fila-consentimiento a { color: var(--accion); text-decoration: underline; }
.form-evento .btn-primario { align-self: flex-start; margin-top: 18px; }

/* ---------- Calendario: el día de hoy lleva texto oscuro sobre el verde ---------- */
.celda-hoy, .celda-hoy .numero-dia { color: var(--accion-texto); font-weight: 700; }

/* ---------- Pie de página (el mismo en todas las páginas) ---------- */
.sitio-footer { padding: 36px 16px 44px; font-size: 0.875rem; }
.sitio-footer > p:first-child { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a8a; }
.url-institucional { color: var(--texto-tenue); }
.creditos-footer { color: #8a8a8a; }
.sitio-footer .redes-sociales { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.sitio-footer .redes-sociales a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde-control); color: var(--texto-tenue);
}
.sitio-footer .redes-sociales svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .sitio-footer .redes-sociales a:hover { border-color: var(--accion); color: var(--texto); } }
.volver { display: inline-flex; align-items: center; min-height: 44px; }
.enlaces-legales-footer a, .nav-flecha-anio { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.form-ir-anio button { min-height: 44px; min-width: 44px; }
.fa-enlace-mas { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Página 404 ---------- */
.pagina-404 { text-align: center; }
.botones-404 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ==========================================================================
   FOTOS SIEMPRE COMPLETAS
   ========================================================================== */

/* ---- 1) Galerías: filas justificadas (cada foto con su forma real) ---- */
.rejilla-galeria-completa {
    --alto-fila: 230px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sep-foto);
    grid-template-columns: none;
}
.rejilla-galeria-completa::after { content: ''; flex-grow: 1000000; }   /* la última fila no se estira */
.rejilla-galeria-completa .item-galeria-completa {
    --ar: 0.75;                                                       /* hasta que se conoce la real */
    flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--alto-fila));
    min-width: 0;
    aspect-ratio: var(--ar);
    border-radius: var(--radio-foto);
    cursor: pointer;
}
.rejilla-galeria-completa .item-galeria-completa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El recuadro tiene la misma forma que la foto, así que "cover" no corta nada. */
@media (max-width: 639px) {
    .rejilla-galeria-completa { --alto-fila: 210px; }
    /* Anula el "destacado" que hacía una foto panorámica recortada: ahora todas son completas. */
    .rejilla-con-destacado .item-galeria-completa:first-child { grid-column: auto; aspect-ratio: var(--ar); }
}
@media (min-width: 900px) { .rejilla-galeria-completa { --alto-fila: 250px; } }
/* Con JavaScript, marcos-foto.js reparte las fotos en filas equilibradas y le pone a cada una
   su tamaño y su posición exactos; así la última fila nunca deja una foto suelta y diminuta. */
.rejilla-galeria-completa.galeria-justificada { display: block; position: relative; }
.rejilla-galeria-completa.galeria-justificada::after { content: none; }
.rejilla-galeria-completa.galeria-justificada .item-galeria-completa { position: absolute; flex: none; aspect-ratio: auto; margin: 0; overflow: hidden; }
.rejilla-galeria-completa .item-galeria-completa span {
    padding-top: 22px;
    /* Rótulo de una línea por renglón (título y fotógrafo), con puntos suspensivos:
       así nunca se corta a mitad de una línea dentro de una foto pequeña. */
    display: block;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- 2) Miniaturas: la foto completa sobre su propio fondo desenfocado ---- */
.marco-completo { position: relative; overflow: hidden; background: #0c0c0c; isolation: isolate; }
.marco-completo > .marco-fondo {
    position: absolute !important;
    inset: -24px;
    width: calc(100% + 48px) !important;
    height: calc(100% + 48px) !important;
    max-width: none !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    filter: blur(22px) brightness(0.5) saturate(1.2);
    transform: none !important;
    z-index: -1;
    pointer-events: none;
    border-radius: 0 !important;
}
.marco-completo > img:not(.marco-fondo) {
    position: relative;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: none !important;
    border-radius: 0 !important;
}
.marco-completo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); pointer-events: none; }
.marco-envuelto { display: block; flex: none; }

/* Recuadros propios de cada contexto (el tamaño que ya tenían, con la foto completa). */
.hoy-fila > .marco-envuelto { width: 54px; height: 68px; border-radius: 7px; }
.item-resultado-busqueda > .marco-envuelto { width: 40px; height: 40px; border-radius: 6px; }
.item-proximo-evento > .marco-envuelto, .item-modal-evento-link > .marco-envuelto { width: 48px; height: 48px; border-radius: 6px; }
.tarjeta-mini > .marco-envuelto { width: 120px; height: 120px; }
.portada .tarjeta-proximo > .marco-envuelto { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.tarjeta-noticia.item-convocatoria > .marco-envuelto { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.item-recuerdo-publico > .marco-envuelto { width: 220px; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radio); }
.noticia-destacada > .marco-envuelto { width: 100%; height: auto; aspect-ratio: 4 / 3; }
@media (min-width: 640px) {
    .noticia-destacada > .marco-envuelto { width: 320px; height: auto; aspect-ratio: auto; min-height: 220px; align-self: stretch; }
}
/* Proporción propia de cada tarjeta de noticia: la del afiche (4:5) en vertical. */
.tarjeta-noticia-c .im-noticia { aspect-ratio: 4 / 5; }
.tarjeta-noticia-c { flex-basis: 56%; max-width: 240px; }
.tarjeta-novedad .m { aspect-ratio: 4 / 5; }
.nd-media-vertical { aspect-ratio: 4 / 5; }
.nd-img { object-position: center; }

/* Fotos de integrantes y mini-fichas: el recuadro 4:5 muestra la foto entera. */
.fa-integrante-img img, .ag-mini-foto img { object-position: center !important; }

/* Las fotos grandes de perfil se mantienen en su círculo de identidad (decisión de diseño). */

/* ---------- Estados de carga: el hueco de una foto tiene su color, no queda en blanco ---------- */
.item-galeria-completa, .marco-completo, .nd-media, .tarjeta-proximo, .tarjeta-novedad .m { background-color: #151515; }

/* ---------- Movimiento reducido: se apagan las animaciones de las fotos ---------- */
@media (prefers-reduced-motion: reduce) {
    .item-vitrina-recuerdo img, .item-recuerdo-publico img, .fa-portada img { transition: none !important; transform: none !important; }
}

/* ======================================================================
   Ajustes de la ronda 2 (botones, etiquetas, paginación)
   ====================================================================== */

/* «Ver todo…» de la portada: estilo.css los dejaba en display:block, y con la altura
   mínima el texto se quedaba pegado arriba del botón. En flex quedan centrados en los dos ejes. */
.btn.btn-ver-todos-presaves, .btn.btn-ver-todos-canciones, .btn.btn-ver-toda-merch,
.btn.btn-ver-todas-convocatorias, .btn.btn-ver-galeria-miradas {
    display: flex; width: fit-content; max-width: 100%;
    align-items: center; justify-content: center; text-align: center;
}
/* Cualquier botón con altura mínima centra su contenido, venga de la hoja que venga. */
a.btn, button.btn, span.btn, label.btn { align-items: center; justify-content: center; text-align: center; }

/* Paginación pública: los botones y el texto nunca se parten en dos líneas. */
.paginacion-publica { gap: 12px; }
.paginacion-publica .btn, .paginacion-publica .texto-paginacion-admin { white-space: nowrap; flex: none; }
.paginacion-publica .btn { padding: 0 16px; }

/* «¿Cómo participar?» y «Fotógrafos inscritos»: mismo ancho, uno sobre otro, centrados. */
.acciones-participar-fotografo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.acciones-participar-fotografo .btn { width: min(100%, 300px); }

/* Etiqueta de los banners de la portada: antes era una píldora que, con textos largos
   («El primer museo online de Quito Bohemio»), se partía en 3 líneas y quedaba como una mancha.
   Ahora es un rótulo de texto, sin caja, con el color de cada banner. */
.banner-p .pill-p {
    background: none; border: 0; border-radius: 0; padding: 0;
    letter-spacing: 0.1em; line-height: 1.4; white-space: normal;
}
.banner-p.banner-hit .pill-p { color: var(--acento-hazte-un-hit); }
.banner-p.banner-secreto .pill-p { color: #d9cdf5; }
.banner-p.banner-salud .pill-p { color: #8ff0df; }