/* ============================================================
   Botón "Ver galería" y contenedor de enlaces ocultos
   Replica el estilo del submit del formulario (.taiba input[type="submit"])
   y se posiciona fijo en la esquina superior derecha de la pantalla.
   ============================================================ */

/* ----------------------------------------------------------
   Botón principal: posición fija, esquina superior derecha
   z-index 1000 queda por encima del formulario pero bajo
   el overlay de magnific-popup (z-index 1042+)
   ---------------------------------------------------------- */
.gallery-button {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;

    /* Aspecto semitransparente, mismo look que el submit del formulario .taiba */
    background-color: #ffffff33;
    border: 1px solid #ffffff66;
    border-radius: 6px;
    color: #fff;
    font-family: 'Gilda Display', serif;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: capitalize;
    padding: 10px 16px;

    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover (solo desktop): mismo efecto que el botón Send del formulario.
   Se redeclara el shorthand 'border' porque preload-styles.css fuerza
   border:0px solid transparent en button:hover y elimina el width. */
@media (hover: hover) and (pointer: fine) {
    .gallery-button:hover {
        background-color: #ffffff55;
        color: white;
        border: 1px solid #ffffff66;
        border-bottom-color: #ececec;
    }
}

/* Estado focus-visible: outline accesible para navegación por teclado */
.gallery-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Estado active: feedback táctil */
.gallery-button:active {
    background-color: #ffffff44;
}

/* ----------------------------------------------------------
   Contenedor de enlaces para magnific-popup
   Ocultación accesible: no se usa display:none para que
   magnific-popup pueda recorrer los enlaces del DOM.
   ---------------------------------------------------------- */
.gallery-hidden-links {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    opacity: 0;
}

/* ============================================================
   Tablet: entre 992px y 1024px
   Se reduce el desplazamiento desde los bordes y el tamaño
   de fuente para evitar colisiones con el formulario y el logo
   ============================================================ */
@media (max-width: 1024px) and (min-width: 993px) {
    .gallery-button {
        top: 16px;
        right: 16px;
        font-size: 14px;
    }
}

/* ============================================================
   Tablet y móvil: menor de 992px (breakpoint principal del proyecto)
   ============================================================ */
@media (max-width: 992px) {
    .gallery-button {
        top: 16px;
        right: 16px;
        font-size: 14px;
    }
}

/* ============================================================
   Móvil pequeño: menor de 600px
   Ajuste fino para evitar colisión con .taiba-logo y formulario
   ============================================================ */
@media (max-width: 600px) {
    .gallery-button {
        top: 12px;
        right: 12px;
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* ============================================================
   Desktop grande: mayor de 1920px
   El botón mantiene posición fija; sin cambios adicionales
   necesarios a esta resolución con los valores base.
   ============================================================ */
@media (min-width: 1920px) {
    .gallery-button {
        top: 32px;
        right: 32px;
    }
}