/**
 * Página Envasados. Los primitivos compartidos (.media-placeholder,
 * .showroom-*) viven en home.css y nosotros.css;
 * .eyebrow/.checklist/.section/.section-head/.linea-faq-* viven en
 * layout.css. El layout de
 * hero/cta/catálogo (.linea-*) vive en micrositio.css — ver inc/enqueue.php,
 * todas se cargan también acá. Este archivo solo tiene lo específico de
 * esta página: color y la grilla de categorías.
 */

/* Barra de accesos rápidos: color propio de Envasados. */
.envasados-cta {
    background: var(--color-envasados);
}

.envasados-hero h1 strong {
    color: var(--color-envasados);
}

/* Franja de marcas: solo los cinco logos de la línea, sin encabezado —mismo
   criterio que .chiller-marcas. */

.ax-carrusel--marcas {
    box-shadow: none !important;
}

.envasados-marcas {
    background: var(--color-white);
}

/* Principales categorías de envasado: misma tarjeta .ax-producto que
   "Nuevos productos" (carrusel.css), en grilla fija sin carrusel. --ax-ratio
   es la variable que esa tarjeta espera del carrusel para el marco de la
   imagen; acá se la damos a mano porque no hay .ax-carrusel envolviendo. */
.envasados-categorias-grid {
    --ax-ratio: 5/6;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 767px) {
    .envasados-categorias-grid {
        gap: 1rem;
    }
}

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

@media (min-width: 640px) {
    .envasados-categorias-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .envasados-categorias-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Botones y detalles en el color de Envasados en vez del rojo de siempre,
   mismo criterio que chiller.css. Cubre tanto las tarjetas de categoría como
   las de "Nuevos productos": las dos comparten la tarjeta .ax-producto. */
.envasados-showroom .showroom-cta {
    background: var(--color-envasados);
}

.envasados-showroom .showroom-cta:hover {
    background: var(--color-envasados-dark);
}

.envasados-showroom .eyebrow,
.envasados-showroom .checklist--outline svg {
    color: var(--color-envasados);
}

.envasados-categorias .ax-producto__cta,
.productos .ax-producto__cta {
    background: var(--color-envasados);
}

.envasados-categorias .ax-producto:hover .ax-producto__cta,
.envasados-categorias .ax-producto__cta:focus-visible,
.productos .ax-producto:hover .ax-producto__cta,
.productos .ax-producto__cta:focus-visible {
    background: var(--color-envasados-dark);
}

/* Secciones */
.envasados-categorias, .productos {
    background-color: var(--color-white);
}