/* ============================================================
   VISOR DE CAPTURAS
   ============================================================

   Se carga la ultima, despues de web.css, web-extra.css y
   producto-extra.css, para poder neutralizar los estilos que el
   navegador le pone por defecto a un <button>.

   Todas las clases del visor llevan el prefijo `vsr-`. La galeria
   ya tiene sus propias `.galeria__*` y no quiero que una hoja pise
   a la otra el dia que se toque cualquiera de las dos.
   ============================================================ */

/* ------------------------------------------------------------------
   La miniatura pasa a ser un boton
   ------------------------------------------------------------------

   Un <div> con un click encima solo funciona con raton. Un <button>
   se enfoca con el tabulador, se activa con Enter y un lector de
   pantalla lo anuncia como lo que es. A cambio hay que quitarle el
   borde, el fondo y la tipografia que trae de fabrica.

   El selector lleva `button` delante para ganar en especificidad a
   las reglas de .galeria__imagen que ya existen, sin tener que
   tocarlas ni ponerles !important.
*/
button.galeria__imagen {
    -webkit-appearance: none;
    appearance: none;

    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    color: inherit;
    text-align: inherit;

    cursor: zoom-in;
}

button.galeria__imagen:focus-visible {
    outline: 3px solid #4f46e5;
    outline-offset: 3px;
}

/* Aviso de que las imágenes se amplían */
.galeria__ayuda {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: #64748b;
}

/* La lupa: aparece al pasar por encima, para que se vea que amplía */
.galeria__lupa {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 2;

    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;

    border-radius: 50%;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 1rem;
    line-height: 1;

    opacity: 0;
    transform: scale(.85);
    transition: opacity .15s ease, transform .15s ease;

    pointer-events: none;
}

button.galeria__imagen:hover .galeria__lupa,
button.galeria__imagen:focus-visible .galeria__lupa {
    opacity: 1;
    transform: scale(1);
}

/**
 * En pantalla tactil no hay «pasar por encima».
 *
 * Sin esto, en un movil la lupa no se veria nunca y nada indicaria
 * que la imagen se puede ampliar.
 */
@media (hover: none) {
    .galeria__lupa { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------
   El visor
   ------------------------------------------------------------------ */

.vsr {
    position: fixed;
    inset: 0;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(.75rem, 3vw, 2.5rem);

    background: rgba(9, 13, 24, .94);
    /* El desenfoque es un extra: si el navegador no lo soporta, no pasa nada */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    animation: vsr-entra .16s ease-out;
}

.vsr[hidden] { display: none; }

@keyframes vsr-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Con el visor abierto, la pagina de detras no se desplaza */
html.vsr-abierto { overflow: hidden; }

/* ---------- Marco ---------- */

.vsr__marco {
    display: flex;
    flex-direction: column;
    gap: .9rem;

    margin: 0;
    max-width: min(1600px, 100%);
    max-height: 100%;
}

.vsr__lienzo {
    position: relative;

    /**
     * min-height: 0 es lo que hace que funcione.
     *
     * Sin el, un hijo flexible no baja de su tamano natural y las
     * capturas verticales de movil (780x1688) se salen de la pantalla
     * por abajo en lugar de encogerse.
     */
    min-height: 0;
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.vsr__imagen {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
    background: #fff;
}

.vsr--cargando .vsr__imagen { opacity: .35; }

.vsr__marca {
    position: absolute;
    left: .75rem;
    top: .75rem;

    padding: .3rem .6rem;
    border-radius: 999px;

    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: .72rem;
    letter-spacing: .02em;
}

.vsr__marca[hidden] { display: none; }

/* ---------- Pie ---------- */

.vsr__pie {
    flex: 0 0 auto;
    text-align: center;
    color: #e2e8f0;
    max-width: 62ch;
    margin: 0 auto;
}

.vsr__titulo {
    display: block;
    font-size: 1.05rem;
    color: #fff;
}

.vsr__texto {
    display: block;
    margin-top: .25rem;
    font-size: .88rem;
    line-height: 1.5;
    color: #b6c2d4;
}

.vsr__contador {
    display: block;
    margin-top: .5rem;
    font-size: .78rem;
    color: #7f8da0;
    font-variant-numeric: tabular-nums;
}

.vsr__titulo[hidden],
.vsr__texto[hidden] { display: none; }

/* ---------- Botones ---------- */

.vsr__cerrar,
.vsr__flecha {
    position: absolute;
    z-index: 2;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;

    cursor: pointer;
    transition: background .14s ease;
}

.vsr__cerrar:hover,
.vsr__flecha:hover { background: rgba(255, 255, 255, .22); }

.vsr__cerrar:focus-visible,
.vsr__flecha:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.vsr__cerrar {
    top: clamp(.5rem, 2vw, 1.25rem);
    right: clamp(.5rem, 2vw, 1.25rem);

    /**
     * 44 px.
     *
     * Es la medida minima que recomiendan las guias de accesibilidad
     * para algo que se pulsa con el dedo. Mas pequeno se falla.
     */
    width: 44px;
    height: 44px;

    font-size: 1.75rem;
    line-height: 1;
    padding-bottom: .18em;   /* la × no está centrada por si sola */
}

.vsr__flecha {
    top: 50%;
    transform: translateY(-50%);

    width: 48px;
    height: 48px;
    font-size: 2rem;
    line-height: 1;
}

.vsr__flecha--antes   { left: clamp(.25rem, 1.5vw, 1.25rem); }
.vsr__flecha--despues { right: clamp(.25rem, 1.5vw, 1.25rem); }

.vsr__flecha[hidden] { display: none; }

/* ---------- Movil ---------- */

@media (max-width: 640px) {
    /**
     * En movil las flechas bajan al pie.
     *
     * A los lados taparian la captura, que es justo lo que se ha
     * venido a ver. Ademas ahi se llega con el pulgar. El gesto de
     * deslizar sigue funcionando igual.
     */
    .vsr { padding: .6rem .6rem 4.5rem; }

    .vsr__flecha {
        top: auto;
        bottom: .9rem;
        transform: none;
        width: 52px;
        height: 52px;
        background: rgba(255, 255, 255, .16);
    }

    .vsr__flecha--antes   { left: 22%; }
    .vsr__flecha--despues { right: 22%; }

    .vsr__texto { display: none; }   /* el titulo basta; no hay sitio */
}

/* Quien pide menos animacion, no la tiene */
@media (prefers-reduced-motion: reduce) {
    .vsr { animation: none; }
    .galeria__lupa { transition: none; }
}