/* =============================================================================
   RM 2026-10-22 - Galeria flotante "Nuestro trabajo" (solo index.html)
   ============================================================================= */
.rm-galeria {
    position: relative;
    padding: 56px 0 40px;
    overflow: hidden;
}

.rm-galeria-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 6px;
    padding: 0 16px;
}

.rm-galeria-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #E30613;
    margin-bottom: 8px;
}

.rm-galeria-title {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--hero-text, #fff);
}

.rm-galeria-sub {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: var(--text-secondary, rgba(255, 255, 255, .7));
}

/* Cinta desplazable: se mueve sola y tambien se arrastra / desliza */
.rm-galeria-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rm-galeria-viewport::-webkit-scrollbar { display: none; }
.rm-galeria-viewport.is-dragging { cursor: grabbing; }

.rm-galeria-track {
    display: flex;
    gap: 22px;
    width: max-content;
    padding: 36px 28px;   /* espacio para que la foto crezca al pasar el mouse */
}

.rm-galeria-item {
    position: relative;
    flex: 0 0 auto;
    height: 420px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
    cursor: zoom-in;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, opacity .35s, filter .35s;
    outline-offset: 4px;
}

.rm-galeria-item img {
    display: block;
    height: 100%;
    width: auto;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Hover: la foto crece y se destaca, las demas se atenuan */
@media (hover: hover) {
    .rm-galeria-track:hover .rm-galeria-item { opacity: .55; filter: saturate(.7); }
    .rm-galeria-track .rm-galeria-item:hover,
    .rm-galeria-track .rm-galeria-item:focus-visible {
        opacity: 1;
        filter: none;
        transform: scale(1.06);
        z-index: 2;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 2px #E30613;
    }
}
.rm-galeria-item:focus-visible { outline: 2px solid #E30613; }

.rm-galeria-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 14px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: left;
    background: linear-gradient(transparent, rgba(0, 0, 0, .8));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
}
.rm-galeria-item:hover .rm-galeria-cap,
.rm-galeria-item:focus-visible .rm-galeria-cap { opacity: 1; transform: none; }

.rm-galeria-zoom {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity .3s;
}
.rm-galeria-item:hover .rm-galeria-zoom { opacity: 1; }

.rm-hint-mob { display: none; }
@media (hover: none) { .rm-hint-desk { display: none; } .rm-hint-mob { display: inline; } }

.rm-galeria-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, .55));
    margin: 0;
}

@media (max-width: 768px) {
    .rm-galeria { padding: 40px 0 28px; }
    .rm-galeria-item { height: 240px; border-radius: 12px; }
    .rm-galeria-track { gap: 12px; padding: 18px 16px; }
    .rm-galeria-cap { opacity: 1; transform: none; font-size: 12px; padding: 22px 10px 8px; }
}

/* ---------- Visor ampliado ---------- */
.rm-visor {
    width: 100vw; height: 100dvh;
    max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: rgba(5, 5, 5, .94);
    color: #fff;
    overflow: hidden;
}
.rm-visor::backdrop { background: rgba(0, 0, 0, .85); }
.rm-visor[open] { display: flex; align-items: center; justify-content: center; }

.rm-visor-fig {
    margin: 0;
    max-width: min(92vw, 1400px);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.rm-visor-img {
    max-width: 100%;
    max-height: calc(100dvh - 130px);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
    transition: opacity .25s;
    user-select: none;
}
.rm-visor-img.is-loading { opacity: .25; }
.rm-visor-cap { font-size: 15px; text-align: center; }
.rm-visor-count { color: rgba(255, 255, 255, .6); margin-left: 8px; font-size: 13px; }

.rm-visor-btn {
    position: absolute;
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.rm-visor-btn:hover, .rm-visor-btn:focus-visible { background: #E30613; transform: scale(1.06); outline: none; }
.rm-visor-prev { left: 18px; top: 50%; translate: 0 -50%; }
.rm-visor-next { right: 18px; top: 50%; translate: 0 -50%; }
.rm-visor-close { right: 18px; top: 18px; width: 46px; height: 46px; }

@media (max-width: 768px) {
    .rm-visor-btn { width: 44px; height: 44px; font-size: 17px; background: rgba(0, 0, 0, .55); }
    .rm-visor-prev { left: 8px; }
    .rm-visor-next { right: 8px; }
    .rm-visor-close { right: 10px; top: 10px; }
    .rm-visor-img { max-height: calc(100dvh - 110px); border-radius: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-galeria-item, .rm-galeria-cap, .rm-visor-img { transition: none; }
}