/* ==========================================================================
   Cuadro de El Edificio de las Miradas en la portada y encabezado de su página:
   el tercer museo online, en azul oscuro con el círculo de piedras de fondo.
   PC: mosaico (una foto grande y cuatro pequeñas). Celular: «Recién subidas» y «Las más vistas».
   ========================================================================== */
:root { --mp-borde: #22375c; --mp-acento: #8fb4e8; --mp-tenue: #b7c6de; }

.mp-portada { position: relative; margin-top: 26px; border-radius: 14px; overflow: hidden; padding: 22px 0 20px; border: 1px solid var(--mp-borde); background: linear-gradient(160deg, #0b1630 0%, #070f20 60%, #050a15 100%); }
.mp-fondo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background: url("../img/fondo-edificio-miradas.jpg") 50% 45% / cover no-repeat; isolation: isolate; }
.mp-fondo::before { content: ""; position: absolute; inset: 0; background: #6f95e0; mix-blend-mode: multiply; }
.mp-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a1429 0%, rgba(10, 20, 41, 0.6) 28%, rgba(10, 20, 41, 0) 70%), linear-gradient(0deg, rgba(5, 10, 21, 0.78), rgba(5, 10, 21, 0) 45%); }
.mp-cab, .mp-escritorio, .mp-movil, .mp-pie { position: relative; z-index: 1; }
.mp-cab { padding: 0 20px; display: flex; gap: 16px; align-items: center; min-height: 130px; }
.mp-emblema { width: 46px; height: 46px; color: #e3ecfa; flex: none; }
.mp-emblema .mp-iris { stroke: var(--mp-acento); }
.mp-kicker { display: inline-flex; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mp-acento); }
.mp-cab h3 { margin: 2px 0 4px; font-family: var(--fuente-editorial); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.mp-cab p { margin: 0; color: #d3def0; font-size: 0.92rem; line-height: 1.4; }

/* ---- PC: mosaico ---- */
.mp-mosaico { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; padding: 18px 20px 0; }
.mp-tile { display: flex; flex-direction: column; min-width: 0; cursor: zoom-in; color: inherit; }
.mp-tile.mp-grande { grid-row: 1 / 3; }
.mp-ph { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #3a5585; background: #0a1426; height: 96px; }
.mp-tile.mp-grande .mp-ph { flex: 1; height: auto; min-height: 272px; }
.mp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-suave, ease); }
.mp-etiqueta { position: absolute; top: 8px; left: 8px; z-index: 1; background: rgba(10, 20, 38, 0.88); border: 1px solid var(--mp-acento); color: var(--mp-acento); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
.mp-tile b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 0.875rem; line-height: 1.25; }
.mp-tile small { display: block; color: var(--mp-tenue); font-size: 0.78rem; margin-top: 2px; overflow-wrap: anywhere; }
.mp-tile:focus-visible { outline: 2px solid var(--mp-acento); outline-offset: 3px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .mp-tile:hover .mp-ph { border-color: var(--mp-acento); } .mp-tile:hover .mp-ph img { transform: scale(1.05); } }

/* ---- Celular: lo de siempre, dentro de la caja ---- */
.mp-movil { padding: 0 20px; }
.mp-movil .subseccion-miradas h3 { color: var(--mp-tenue); border-bottom-color: #2c4572; }
.mp-movil .carrusel-miradas .carrusel-item span { color: var(--mp-tenue); }

.mp-pie { padding: 16px 20px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mp-n { color: var(--mp-tenue); font-size: 0.875rem; }

@media (min-width: 700px) { .mp-movil { display: none; } }
@media (max-width: 699px) {
    .mp-escritorio { display: none; }
    .mp-cab h3 { font-size: 1.5rem; }
    .mp-cab { min-height: 0; }
    .mp-fondo { width: 100%; bottom: auto; height: 230px; background-position: 50% 45%; }
    .mp-fondo::after { background: linear-gradient(180deg, rgba(10, 20, 41, 0.15), #070f20 95%); }
}

/* ---- Encabezado de museo en galeria-recuerdos.php ---- */
.mp-cabecera-pagina { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--mp-borde); background: linear-gradient(160deg, #0b1630 0%, #070f20 70%); padding: 20px 0; margin-bottom: 18px; }
.mp-cabecera-pagina .mp-cab { min-height: 0; }
.mp-cabecera-pagina h1 { margin: 2px 0 4px; font-family: var(--fuente-editorial); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.mp-cabecera-pagina .mp-fondo { width: 55%; }
@media (max-width: 699px) { .mp-cabecera-pagina h1 { font-size: 1.5rem; } .mp-cabecera-pagina .mp-fondo { width: 100%; height: 100%; } }