/* =========================================================================
   NVL CATEGORY — estilos de la maestra de categoría
   (templates/category.php). Depende de nvl-components.css (y esta, a su
   vez, de nvl-base.css). Estructura visual portada de la landing validada
   en producción, renombrada al estándar .nvl-. Mobile-first.
   ========================================================================= */

/* --- Hero ----------------------------------------------------------------- */

.nvl-hero {
    background: var(--nvl-color-secondary);
    color: var(--nvl-color-surface);
    padding: var(--nvl-space-2xl) 0;
}

.nvl-hero__inner {
    display: grid;
    gap: var(--nvl-space-xl);
    align-items: center;
    text-align: center;
}

.nvl-hero__subtitle {
    color: var(--nvl-color-accent);
    font-size: var(--nvl-text-sm);
    font-weight: var(--nvl-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--nvl-space-2xs);
}

.nvl-hero__title {
    font-size: var(--nvl-text-2xl); /* H1 vista comercial (auditoría ui-ux §1.5): 2xl → 3xl → 4xl */
    /* 600 y no 900 (owner, 2026-09-22): es el peso medido en el H1 de la ficha
       de referencia. El titular gana elegancia y la ficha entera deja de
       leerse pesada. CONSECUENCIA ASUMIDA: el H1 pasa a pesar lo mismo que los
       H2 de sección, así que a partir de aquí la jerarquía la sostienen el
       tamaño y el color, no el peso. Decisión de alcance: TODO el nivel, no
       solo la ficha. */
    font-weight: var(--nvl-weight-bold);
    line-height: var(--nvl-leading-snug);
    margin-bottom: var(--nvl-space-lg);
}

.nvl-hero__cta {
    padding: var(--nvl-space-sm) var(--nvl-space-2xl);
    border-radius: var(--nvl-radius-pill);
    font-size: var(--nvl-text-md);
}

.nvl-hero__media {
    display: flex;
    justify-content: center;
}

.nvl-hero__image {
    max-width: 26rem;
    width: 100%;
    border-radius: var(--nvl-radius-lg);
    /* Tokenizado en nvl-base.css (auditoría ui-ux §8.5): cierra el literal que
       ui-ux había devuelto a frontend sin sustituto de token. */
    filter: var(--nvl-shadow-hero-media);
}

@media (min-width: 768px) {
    .nvl-hero {
        padding: var(--nvl-space-4xl) 0;
    }

    .nvl-hero__inner {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .nvl-hero__title {
        font-size: var(--nvl-text-3xl);
    }
}

@media (min-width: 1280px) {
    .nvl-hero__title {
        font-size: var(--nvl-text-4xl);
    }
}

/* --- Layout: contenido + resumen del carrito ------------------------------ */

/* Alcance del layout de dos columnas (auditoría ui-ux §8.1): EXACTAMENTE dos
   hijos — catálogo (__content) y resumen (__aside). Recomendaciones y FAQ ya
   no viven aquí dentro: salen a ancho completo en templates/category.php,
   como el resto de bloques compartidos. Es la corrección de fondo de la
   saturación que reportó el owner: un aside de 320-360px ya no acompaña un
   acordeón de preguntas con el que no tiene relación. */
/* El layout de dos columnas de esta vista desapareció junto con el resumen
   incrustado: el carrito vive ahora solo en el panel lateral
   (components/cart-drawer.php), así que el catálogo cuelga directamente del
   contenedor y ocupa el ancho completo. Con un solo hijo no había reparto que
   declarar, y los envoltorios .nvl-category-layout / __content / __aside se
   retiraron con él (regla de oro 9). */