/* ============================================================
   Puntos del carrusel de "Proximos articulos".
   Los reescribe como el selector de tipo de lectura: un carril
   gris azulado con una pastilla blanca que se desliza detras de
   la opcion activa.

   Se carga despues de glider.css para poder reescribir sus
   reglas sin !important; por eso los selectores repiten la misma
   forma que los suyos (.glider-dot.active y compañia).
   ============================================================ */

:root {
    --gd-ink: #373849;
    --gd-ink-soft: #5f6577;
    --gd-track: #dbe3ef;
    /* Curva de salida, para acompañar el desplazamiento del carrusel:
       Glider aplica una fraccion de la distancia que queda en cada
       fotograma, asi que arranca rapido y frena al final. */
    --gd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.glider-dots-area .glider-dots {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: auto;
    padding: 6px;
    background: var(--gd-track);
    border-radius: 999px;
}

/* El area centra el carril, que ya no ocupa todo el ancho. */
.glider-dots-area {
    display: flex;
    justify-content: center;
}

/* La pastilla que se desliza. La crea glider-dots.js, porque Glider
   no dibuja nada parecido. */
.glider-dots-thumb {
    position: absolute;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #cfd9e8;
    border-radius: 999px;
    /* Solo se anima el desplazamiento: glider-dots.js iguala el ancho
       de todos los puntos para que la pastilla no tenga que deformarse
       por el camino.

       0.22s para ir al mismo tiempo que la diapositiva. Glider calcula
       su duracion como duration x distancia en pixeles; con duration
       0.25 (ver la vista Home) una diapositiva de pantalla completa
       queda en ese entorno. Si cambias una, cambia la otra. */
    transition: transform 0.22s var(--gd-ease);
    pointer-events: none;
}

.glider-dots-area .glider-dot {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    padding: 0.5rem 1.15rem;
    font-family: 'satoshimedium';
    font-size: 0.92rem;
    line-height: 1.2;
    color: var(--gd-ink-soft);
    text-align: center;
    background-color: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    white-space: nowrap;
    transition: color 0.22s var(--gd-ease);
}

    /* Glider pinta el punto activo con fondo propio: aqui el fondo lo
       pone la pastilla, asi que solo cambia el color del texto. */
    .glider-dots-area .glider-dot:hover,
    .glider-dots-area .glider-dot:focus {
        color: var(--gd-ink);
        background-color: transparent;
        border: 0;
    }

    .glider-dots-area .glider-dot.active {
        color: var(--gd-ink);
        background-color: transparent;
        border: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .glider-dots-thumb {
        transition-duration: 0.01ms;
    }
}