/* La página reutiliza la estética visual de Espectroscopía. */
@import url("espectroscopia.css");

.categorias--ocho {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.categoria-icono {
    display: grid;
    place-items: center;
    width: 130px;
    height: 115px;
    margin-bottom: 12px;
    color: var(--azul);
    font-size: 53px;
}

.categoria-icono i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: 1px solid #dceaf4;
    border-radius: 50%;
    background: #f5fbff;
}

/* Filtro alternativo mientras JavaScript todavía no cargó. */
#f1:checked ~ .productos-grilla .producto:not([data-grupo~="1"]),
#f2:checked ~ .productos-grilla .producto:not([data-grupo~="2"]),
#f3:checked ~ .productos-grilla .producto:not([data-grupo~="3"]),
#f4:checked ~ .productos-grilla .producto:not([data-grupo~="4"]),
#f5:checked ~ .productos-grilla .producto:not([data-grupo~="5"]),
#f6:checked ~ .productos-grilla .producto:not([data-grupo~="6"]),
#f7:checked ~ .productos-grilla .producto:not([data-grupo~="7"]),
#f8:checked ~ .productos-grilla .producto:not([data-grupo~="8"]) {
    display: none;
}

#f1:checked ~ .productos-grilla .producto[data-grupo~="1"],
#f2:checked ~ .productos-grilla .producto[data-grupo~="2"],
#f3:checked ~ .productos-grilla .producto[data-grupo~="3"],
#f4:checked ~ .productos-grilla .producto[data-grupo~="4"],
#f5:checked ~ .productos-grilla .producto[data-grupo~="5"],
#f6:checked ~ .productos-grilla .producto[data-grupo~="6"],
#f7:checked ~ .productos-grilla .producto[data-grupo~="7"],
#f8:checked ~ .productos-grilla .producto[data-grupo~="8"] {
    display: grid;
}

@media (max-width: 1100px) {
    .categorias--ocho {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .categorias--ocho {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    .categorias--ocho {
        grid-template-columns: 1fr;
    }
}