/* ============================================================
   Carruseles de telefono
   ------------------------------------------------------------
   Las mismas tarjetas del escritorio, pero en el telefono se
   recorren de lado en vez de apilarse en una columna larguisima.
   Es scroll de toda la vida con puntos de parada: se siente como
   una app y no necesita ninguna libreria.

   Se usa en la portada (testimonios, planes, anti-fraude) y en el
   blog (destacados). El script que dibuja los puntos vive en
   static/js/gc_carrusel.js.

   OJO con la cascada: las hojas de seccion se cargan despues de
   los <style> de cada pagina, asi que la clase va DOBLADA
   (.gc-carrusel.gc-carrusel) para pesar mas que el "display: grid"
   de la rejilla original.
   ============================================================ */

.gc-carrusel-puntos { display: none; }

@media (max-width: 900px) {
    .gc-carrusel.gc-carrusel {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 14px;
        /* Se sale del margen del contenedor para que la siguiente
           tarjeta asome: asi se ve que hay mas de una. */
        /* 16px: es el margen mas angosto que usan los contenedores. Con 20
           sobresalia 4px en las paginas que tienen 16 y aparecia scroll
           horizontal. */
        margin-inline: -16px;
        padding: 4px 16px 10px;
    }
    .gc-carrusel::-webkit-scrollbar { display: none; }

    .gc-carrusel > * {
        flex: 0 0 84%;
        min-width: 0;
        scroll-snap-align: center;
    }

    .gc-carrusel-puntos {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }
    .gc-carrusel-puntos button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(26, 77, 92, .22);
        cursor: pointer;
        transition: background .25s, width .25s;
    }
    .gc-carrusel-puntos button[aria-current="true"] {
        background: #F26B3A;
        width: 22px;
        border-radius: 4px;
    }
    .gc-carrusel-puntos button:focus-visible {
        outline: 2px solid #F26B3A;
        outline-offset: 3px;
    }

    /* Fila de filtros que se recorre de lado, sin puntos: son
       etiquetas, no tarjetas. Apiladas ocupaban cuatro renglones. */
    .gc-fila-corrida.gc-fila-corrida {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -16px;
        padding-inline: 16px;
    }
    .gc-fila-corrida::-webkit-scrollbar { display: none; }
    .gc-fila-corrida > * { flex: 0 0 auto; }
}