/* ============================================================
   categorias.css - Estilos Específicos de Páginas de Categoría
   Mobile-First con media queries
   ============================================================
   
   Uso: Páginas de listado de productos por categoría
   Ejemplo: /es/muletas.php
   
   NOTA: Los estilos de "becarios" (/es/practicas-universitarias.php)
   han sido movidos a legacy.css temporalmente
   ============================================================ */

/* ===== 1. TÍTULOS Y TEXTOS ESPECÍFICOS DE CATEGORÍAS ===== */

/* Título precios categoría (tarjetas de producto en categorías) */
h2.preciosCat {
    font-family: var(--font-family-primary);
    font-weight: normal;
    margin: var(--spacing-xs);
    color: var(--color-text-muted);
    font-size: 12pt;
    text-align: center;
}

/* Párrafo descripción de categoría (usado en insertaFilaCat) */
p.categoria {
    margin: 0 var(--spacing-xl) 0 var(--spacing-xl);
    font-size: 12pt;
    text-align: center;
    line-height: 1.5;
}

/* ===== 2. IMÁGENES DE CATEGORÍAS (usadas por insertaFilaCat) ===== */

/* Imagen categoría 320x320 */
img.categorias_320x320 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-bg);
    height: 320px;
    width: 320px;
}

img.categorias_320x320:hover {
    filter: opacity(0.5);
}

/* Imagen categoría 450x250 */
img.categorias_450x250 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-bg);
    height: 450px;
    width: 250px;
}

img.categorias_450x250:hover {
    filter: opacity(0.5);
}

/* Imagen categoría 320x320 (responsive) */
img.categorias_320x320 {
    height: auto;
    width: 100%;
}

/* ===== 3. CONTENEDORES Y LAYOUT (usados en insertaFilaCat) ===== */

/* Accesorios categoría (solo categorías; no usado en About Us) */
.accesoriosCat {
    display: inline-block;
    margin-top: 10%;
    width: 100%;
}

/* Columna categoría */
#columna_cat_div {
    width: 99%;
    height: auto;
    padding-bottom: var(--spacing-lg);
}

/* Fila categoría */
#fila_cat_div {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* ===== 4. MEDIA QUERIES - DESKTOP ===== */

@media screen and (min-width: 841px) {
    /* Imágenes categorías - mejor uso del espacio en desktop */
    img.categorias_320x320 {
        max-width: 320px;
    }
    
    img.categorias_280x280 {
        max-width: 280px;
    }
    
    img.categorias_450x250 {
        max-width: 450px;
    }
}