/* FloMar — la galeria de fotos del producto (marca/galeria.js).
   Hoja aparte de marca.css porque la tienda minorista usa SOLO esto de la carpeta compartida: no tiene
   sentido copiarle la marca entera (fuentes incluidas) para un visor de fotos. */

.fm-gal {
    background: #0b1725;
    border: none;
    color: #fff;
    height: 100dvh;
    margin: 0;
    max-height: 100dvh;
    max-width: 100vw;
    padding: 0;
    width: 100vw;
}

.fm-gal::backdrop { background: rgba(6, 12, 20, .92); }

/* Entrada suave. `@starting-style` + `allow-discrete` es lo que permite animar algo que pasa de
   display:none a la capa superior; sin eso el dialogo aparece de golpe. */
@media (prefers-reduced-motion: no-preference) {
    .fm-gal {
        opacity: 1;
        transition: opacity .18s ease, overlay .18s allow-discrete, display .18s allow-discrete;
    }
    .fm-gal:not([open]) { opacity: 0; }
    @starting-style { .fm-gal[open] { opacity: 0; } }
}

.fm-gal-top {
    align-items: center;
    display: flex;
    gap: 10px;
    left: 0;
    padding: 12px 14px;
    position: absolute;
    right: 0;
    top: 0;
    /* Un degradado y no una barra: la foto sigue viendose entera debajo. */
    background: linear-gradient(180deg, rgba(6, 12, 20, .8), rgba(6, 12, 20, 0));
    z-index: 2;
}

.fm-gal-top b { font-family: var(--fm-serif, Fraunces), Georgia, serif; font-size: 1.05rem; }
.fm-gal-cuenta { color: rgba(255, 255, 255, .7); font-size: .82rem; margin-left: auto; }

.fm-gal-x {
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    height: 40px;      /* 40px: se toca con el pulgar */
    width: 40px;
}

/* ── El carril ────────────────────────────────────────────────────────────────────────────────────
   Scroll-snap nativo: el dedo arrastra con la inercia del sistema y las flechas son un scrollBy. Un
   carrusel a mano con transform se siente ajeno y pelea con el gesto de "volver atras" del celular. */
.fm-gal-riel {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Que el arrastre horizontal no dispare el "atras" del navegador ni el recargar-tirando. */
    overscroll-behavior: contain;
}
.fm-gal-riel::-webkit-scrollbar { display: none; }

.fm-gal-slide {
    align-items: center;
    display: flex;
    flex: 0 0 100%;
    height: 100%;
    justify-content: center;
    margin: 0;
    scroll-snap-align: center;
}

/* Los gestos sobre la foto son NUESTROS (zoom continuo, pellizco, inercia — ver galeria.js):
   touch-action none para que el navegador no se los quede. El paseo entre fotos también lo hace el
   JS, así que el carril nativo queda para las flechas, los puntitos y el teclado. */
.fm-gal-slide { perspective: 1000px; touch-action: none; }

/* El marco es el que se INCLINA con el mouse (3D); la foto adentro es la que se agranda y arrastra.
   En el mismo elemento las dos transformaciones se pisarían. */
/* ⚠️ El marco ocupa TODO el slide, explícito. Es una caja flex que si se ajustara al contenido
   colapsa a 0×0 con las láminas SVG, que no traen tamaño propio (sólo viewBox) — la galería abría
   NEGRA, sin foto, en PC y celular. */
.fm-gal-marco {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    transition: transform .25s ease;
    transform-style: preserve-3d;
    width: 100%;
    will-change: transform;
}

.fm-gal-slide img,
.fm-gal-slide video {
    cursor: zoom-in;
    max-height: 82vh;
    max-width: 92vw;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
    /* La imagen no se arrastra como archivo: el gesto lo maneja galeria.js. */
    user-select: none;
    -webkit-user-drag: none;
}

/* La transición del transform va por CLASE y no fija: durante el arrastre y la rueda el JS la saca
   para que la foto siga al dedo SIN retardo, y la pone en los movimientos "de un golpe" (doble
   toque, volver a 1, soltar) para que sean suaves. */
.fm-gal-slide img.fm-anim,
.fm-gal-slide video.fm-anim { transition: transform .38s cubic-bezier(.2,.8,.2,1); }

.fm-gal.ampliada .fm-gal-slide img,
.fm-gal.ampliada .fm-gal-slide video { cursor: grab; }
.fm-gal.ampliada .fm-gal-slide img:active,
.fm-gal.ampliada .fm-gal-slide video:active { cursor: grabbing; }

/* El video ocupa el marco como la foto; el fondo negro es el suyo propio mientras carga. */
.fm-gal-slide video { background: #000; border-radius: 6px; }

/* Entrada de la foto: aparece asentándose, como una lámina que se apoya. Con menos-movimiento, nada.
   ⚠️ SIN opacidad en los fotogramas: una animación que arranca en opacidad 0 y no llega a terminar
   (pestaña sin cuadros) deja la foto invisible para siempre — ya pasó con la vidriera (heroInR).
   Congelada a mitad de ESTA, lo peor que se ve es la foto un poco más chica. */
@media (prefers-reduced-motion: no-preference) {
    .fm-gal[open] .fm-gal-marco { animation: fmGalEntra .45s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes fmGalEntra {
        from { transform: scale(.93) translateY(14px); }
        to   { transform: none; }
    }
}

/* ── Flechas ──────────────────────────────────────────────────────────────────────────────────── */
.fm-gal-nav {
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    height: 48px;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    z-index: 2;
}
.fm-gal-nav.ant { left: 10px; }
.fm-gal-nav.sig { right: 10px; }

/* En pantallas chicas las flechas estorban la foto: el gesto es arrastrar, y quedan los puntitos. */
@media (max-width: 640px) { .fm-gal-nav { display: none; } }

/* ── Pie: puntitos y ayuda ────────────────────────────────────────────────────────────────────── */
.fm-gal-pie {
    background: linear-gradient(0deg, rgba(6, 12, 20, .8), rgba(6, 12, 20, 0));
    bottom: 0;
    left: 0;
    padding: 14px 14px 18px;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 2;
}

.fm-gal-puntos { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }

.fm-gal-punto {
    background: rgba(255, 255, 255, .35);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    height: 8px;
    padding: 0;
    transition: width .15s ease, background .15s ease;
    width: 8px;
}
.fm-gal-punto.on { background: var(--fm-dorado, #c39a4d); width: 22px; }

.fm-gal-ayuda { color: rgba(255, 255, 255, .6); font-size: .74rem; }

/* La galeria se abre sobre el catalogo: mientras dura, el fondo no se desplaza. */
body.fm-sin-scroll { overflow: hidden; }