@import '_content/MarketCatalogo.Auth.Ui/MarketCatalogo.Auth.Ui.lntufrcsig.bundle.scp.css';

/* _content/MarketCatalogo.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* Shell de sitio público. Paleta y tipografías: ver wwwroot/app.css y docs/DISENO.md. */

.mk-page[b-7uz2zsar87] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Header --------------------------------------------------------------
   Positivo (negro sobre blanco). El wordmark respeta la reducción mínima de
   183 px del manual: si no entra, pasa a una fila propia — NO se reduce.      */

.mk-header[b-7uz2zsar87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 1.5rem 2rem;
    /* Alto fijo (no el que dé la tipografía): así --mk-header-alto es un número real y no una
       estimación, y todo lo que se pega justo debajo del header (sticky) lo puede usar sin que
       quede un hueco. min-height, no height: en mobile la nav baja a su propia fila y el header
       necesita poder crecer más alto que esto. */
    min-height: var(--mk-header-alto);
    border-bottom: 1px solid var(--mk-tinta-20);
    background: var(--mk-fondo);
    position: sticky;
    top: 0;
    z-index: 10;
    /* Los paneles del mega-menú (NavMenu) son position:absolute y, aunque estén ocultos, siguen
       siendo display:block: el del género más a la derecha se extendía más allá del viewport y
       generaba scroll horizontal en ciertos anchos (~641–800px). `clip` (no `hidden`) corta ese
       desborde horizontal SIN volverse contenedor de scroll ni forzar overflow-y: el desplegable
       sigue cayendo por debajo del header (overflow-y queda visible). */
    overflow-x: clip;
}

.mk-header-logo[b-7uz2zsar87] {
    font-size: 1.5rem;
    color: var(--mk-tinta-100);
}

/* Desktop: grilla 1fr | auto | 1fr → el logo queda a la izquierda y la nav en la columna del medio,
   centrada respecto de TODA la pantalla (no del espacio a la derecha del logo). La 3ª columna vacía
   equilibra el ancho del logo. En celular manda el layout flex de abajo (@media max-width: 640px). */
@media (min-width: 641px) {
    .mk-header[b-7uz2zsar87] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .mk-header-logo[b-7uz2zsar87] { justify-self: start; }
    /* Desktop: el acceso del staff va en la 3ª columna, a la derecha. */
    .mk-header-auth[b-7uz2zsar87] { justify-self: end; }
}

/* --- Acceso del staff (login / interno) --------------------------------- */
.mk-header-auth[b-7uz2zsar87] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Usuario logueado: ícono de persona + el mail con el que entró (reemplaza el pill "Interno"). */
.mk-auth-usuario[b-7uz2zsar87] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
    color: var(--mk-tinta-100);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.mk-auth-usuario-icono[b-7uz2zsar87] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mk-auth-usuario-mail[b-7uz2zsar87] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-auth-usuario:hover .mk-auth-usuario-mail[b-7uz2zsar87] {
    text-decoration: underline;
}

/* Salir: sólo el ícono, al lado del usuario. */
.mk-auth-salir[b-7uz2zsar87] {
    display: inline-flex;
    align-items: center;
    color: var(--mk-tinta-70);
    text-decoration: none;
    transition: color 0.16s ease;
}

.mk-auth-salir svg[b-7uz2zsar87] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mk-auth-salir:hover[b-7uz2zsar87] {
    color: var(--mk-tinta-100);
}

/* Mobile: fijo arriba a la derecha (el logo ocupa toda la fila y va centrado), con el texto visible. */
@media (max-width: 640px) {
    .mk-header-auth[b-7uz2zsar87] {
        position: absolute;
        right: 1.1rem;
        top: 1.15rem;
        z-index: 11;
        gap: 0.75rem;
    }
    /* En mobile, el mail ocuparía toda la fila: queda sólo el ícono de persona + el de salir. */
    .mk-auth-usuario-mail[b-7uz2zsar87] {
        display: none;
    }
}

.mk-main[b-7uz2zsar87] {
    flex: 1;
}

/* --- Footer, en blanco --------------------------------------------------- */

.mk-footer[b-7uz2zsar87] {
    background: var(--mk-fondo);
    color: var(--mk-tinta-100);
    border-top: 1px solid var(--mk-tinta-20);
    margin-top: 6rem;
    padding: 4rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Fila superior: marca + redes a la izquierda, columnas de links a la derecha. */
.mk-footer-top[b-7uz2zsar87] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;   /* Tienda/Marca alineadas al tope, en la misma línea que MARKET. */
    justify-content: space-between;
    gap: 3rem 4rem;
}

.mk-footer-marca[b-7uz2zsar87] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 22rem;
}

.mk-footer-marca .mk-logo[b-7uz2zsar87] {
    font-size: 1.5rem;
    line-height: 1;   /* que el tope de MARKET coincida con los rótulos de las columnas */
    color: var(--mk-tinta-100);
    text-decoration: none;
}

.mk-footer-marca .mk-logo-tagline[b-7uz2zsar87] { font-size: .7rem; opacity: .7; }

/* Redes sociales: círculos con borde fino; al hover se rellenan (acento). */
.mk-footer-social[b-7uz2zsar87] { list-style: none; display: flex; gap: .75rem; margin: .5rem 0 0; padding: 0; }

.mk-footer-social a[b-7uz2zsar87] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--mk-tinta-20);
    border-radius: 999px;
    color: var(--mk-tinta-100);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.mk-footer-social a:hover[b-7uz2zsar87] {
    border-color: var(--mk-acento);
    background: var(--mk-acento);
    color: var(--mk-acento-tinta);
}

.mk-footer-social svg[b-7uz2zsar87] { width: 1.15rem; height: 1.15rem; display: block; }

/* Columnas de links. */
.mk-footer-cols[b-7uz2zsar87] { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; }

.mk-footer-col h2[b-7uz2zsar87] { margin: 0 0 1.1rem; color: var(--mk-tinta-100); }

.mk-footer-col ul[b-7uz2zsar87] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.mk-footer-col a[b-7uz2zsar87] { text-decoration: none; color: var(--mk-tinta-70); font-size: .9rem; }
.mk-footer-col a:hover[b-7uz2zsar87] { color: var(--mk-tinta-100); }

/* Local con pin de mapa: el ícono va tenue y se aviva junto al texto en hover. */
.mk-footer-local[b-7uz2zsar87] { display: inline-flex; align-items: center; gap: .4rem; }
.mk-footer-pin[b-7uz2zsar87] { width: .9rem; height: .9rem; flex: 0 0 auto; color: var(--mk-tinta-40); }
.mk-footer-local:hover .mk-footer-pin[b-7uz2zsar87] { color: var(--mk-tinta-100); }

/* Barra inferior: copyright + procedencia. */
.mk-footer-base[b-7uz2zsar87] {
    border-top: 1px solid var(--mk-tinta-20);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.mk-footer-legal[b-7uz2zsar87] { margin: 0; color: var(--mk-tinta-40); }

/* "Acceso proveedores": la puerta al interno, deliberadamente discreta (es el pie, no un CTA).
   Al 70% de tinta, que es el mínimo legible de marca — el 40% del copyright no pasa contraste como link. */
.mk-footer-acceso[b-7uz2zsar87] {
    color: var(--mk-tinta-70);
    text-decoration: none;
    border-bottom: 1px solid var(--mk-tinta-20);
    padding-bottom: .15rem;
    transition: color .15s ease, border-color .15s ease;
}

.mk-footer-acceso:hover[b-7uz2zsar87] {
    color: var(--mk-tinta-100);
    border-color: var(--mk-tinta-100);
}
/* Commit publicado: para nosotros, no para el visitante. AL DÍA = el mismo tono que el resto del pie.
   ATRASADA = apagado a gris, con el detalle en el tooltip. Sin verde ni rojo: la marca es monocromática. */
.mk-version[b-7uz2zsar87] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-left: .15rem; }
.mk-version--vieja[b-7uz2zsar87] { opacity: .45; text-decoration: underline dotted; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .mk-header[b-7uz2zsar87], .mk-footer[b-7uz2zsar87] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Con solo el logo en la fila de arriba (ya no hay toggle), queda CENTRADO sobre la nav, que baja
       a una fila propia a lo ancho (ver NavMenu.razor.css: flex-basis 100% + order). */
    .mk-header[b-7uz2zsar87] {
        justify-content: center;
    }

    /* El logo ocupa toda la fila y centra su TEXTO: sin esto, su min-width de 183px (mínimo de marca)
       deja "MARKET" alineado a la izquierda dentro de la caja y parece corrido del centro. */
    .mk-header-logo[b-7uz2zsar87] {
        flex-basis: 100%;
        text-align: center;
    }

    /* Footer centrado en mobile: marca, redes y columnas al centro (en desktop siguen a los lados). */
    .mk-footer-top[b-7uz2zsar87] { justify-content: center; }
    .mk-footer-marca[b-7uz2zsar87] { max-width: none; align-items: center; text-align: center; }
    .mk-footer-social[b-7uz2zsar87] { justify-content: center; }
    .mk-footer-cols[b-7uz2zsar87] { justify-content: center; text-align: center; width: 100%; }
    .mk-footer-base[b-7uz2zsar87] { justify-content: center; text-align: center; }
}

/* --- Error UI de Blazor, en la paleta de marca --------------------------- */

#blazor-error-ui[b-7uz2zsar87] {
    color-scheme: light only;
    background: var(--mk-negro);
    color: var(--mk-blanco);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--mk-font-texto);
}

#blazor-error-ui a[b-7uz2zsar87] {
    color: var(--mk-blanco);
    margin-left: .75rem;
}

#blazor-error-ui .dismiss[b-7uz2zsar87] {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}
/* _content/MarketCatalogo.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* Nav del header. Rótulos en caps con tracking, como la señalética del manual.
   El estado activo se marca con peso y un subrayado, no con color (la paleta
   no tiene un color de acento — ver docs/DISENO.md). */

.mk-nav[b-qvglakc4lr] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    /* La nav crece para ocupar el hueco entre el logo (izq) y el toggle de tema (der) y centra
       sus links ahí adentro, así queda balanceada en el header sin importar cuántos géneros haya. */
    flex: 1;
    justify-content: center;
}

/* Estilo base del link de nav, compartido por los <NavLink> y por los <button>
   disparadores del mega-menú (para que género y sección se vean igual). */
.mk-nav[b-qvglakc4lr]  .mk-nav-link,
.mk-nav .mk-nav-link[b-qvglakc4lr] {
    font-family: var(--mk-font-texto);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: var(--mk-tracking-rotulo);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mk-tinta-70);
    /* line-height fijo: el <button> del género y el <a> de Nosotros/Noticias tienen line-height por
       defecto distinto; sin esto sus cajas quedan de distinto alto y los rótulos en desnivel. */
    line-height: 1;
    padding-bottom: .25rem;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}

.mk-nav[b-qvglakc4lr]  .mk-nav-link:hover,
.mk-nav .mk-nav-link:hover[b-qvglakc4lr] {
    color: var(--mk-tinta-100);
}

.mk-nav[b-qvglakc4lr]  .mk-nav-link.active {
    color: var(--mk-tinta-100);
    font-weight: 600;
    border-bottom-color: var(--mk-tinta-100);
}

/* Buscador del header en modo interno (reemplaza Nosotros/Noticias): pill con input + lupa. */
.mk-nav-buscar[b-qvglakc4lr] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mk-tinta-40);
    border-radius: 999px;
    overflow: hidden;
}

.mk-nav-buscar:focus-within[b-qvglakc4lr] {
    border-color: var(--mk-tinta-100);
}

.mk-nav-buscar input[b-qvglakc4lr] {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mk-tinta-100);
    font: inherit;
    font-size: .8rem;
    padding: .4rem .3rem .4rem .95rem;
    width: 12rem;
    min-width: 0;
}

.mk-nav-buscar input[b-qvglakc4lr]::placeholder {
    color: var(--mk-tinta-40);
}

.mk-nav-buscar button[b-qvglakc4lr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--mk-tinta-70);
    cursor: pointer;
    padding: .35rem .7rem .35rem .35rem;
}

.mk-nav-buscar button:hover[b-qvglakc4lr] {
    color: var(--mk-tinta-100);
}

.mk-nav-buscar button svg[b-qvglakc4lr] {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* --- Mega-menú de géneros -------------------------------------------------
   Dropdown CSS puro: se abre con :hover (desktop) y con :focus-within (celular:
   al tocar el <button> toma foco y el panel aparece). Sin una línea de JS. */

.mk-mega[b-qvglakc4lr] {
    position: relative;
    /* Flex para que el <button> ocupe la caja sin el hueco de descendente que deja la línea de texto:
       así el género se alinea al mismo nivel que los <a> planos (Nosotros/Noticias). */
    display: inline-flex;
    align-items: center;
}

/* El disparador es un <button>: hay que resetearle los estilos nativos para que
   se vea idéntico a un link de nav. */
.mk-mega-sum[b-qvglakc4lr] {
    background: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-bottom: 1px solid transparent;   /* mismo alto que un .mk-nav-link */
}

/* Flechita propia dibujada en CSS (paleta, sin icono externo). Gira al abrir. */
.mk-mega-sum[b-qvglakc4lr]::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
    opacity: .6;
    margin-top: -.15rem;
}

.mk-mega:hover .mk-mega-sum[b-qvglakc4lr],
.mk-mega:focus-within .mk-mega-sum[b-qvglakc4lr] {
    color: var(--mk-tinta-100);
    font-weight: 600;
}

.mk-mega:hover .mk-mega-sum[b-qvglakc4lr]::after,
.mk-mega:focus-within .mk-mega-sum[b-qvglakc4lr]::after {
    transform: rotate(-135deg);
    margin-top: .1rem;
}

.mk-mega-lista[b-qvglakc4lr] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-mega-item[b-qvglakc4lr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .55rem .25rem;
    text-decoration: none;
    color: var(--mk-tinta-100);
    font-family: var(--mk-font-texto);
    font-size: .9rem;
    white-space: nowrap;
}

.mk-mega-item:hover[b-qvglakc4lr] { color: var(--mk-tinta-100); }
.mk-mega-item:hover > span:first-child[b-qvglakc4lr] { text-decoration: underline; }
.mk-mega-cant[b-qvglakc4lr] { color: var(--mk-tinta-40); font-size: .8rem; }

/* --- Desktop: el panel cae como dropdown flotante, visible al hover -------- */
@media (min-width: 641px) {
    /* En desktop los géneros cubren el catálogo entero: el link plano "Catálogo" es redundante. */
    .mk-nav[b-qvglakc4lr]  .mk-nav-catalogo {
        display: none;
    }

    .mk-mega-panel[b-qvglakc4lr] {
        position: absolute;
        top: calc(100% + 1.4rem);   /* debajo del summary, pasando el padding inferior del header */
        left: 0;
        min-width: 240px;
        background: var(--mk-fondo);
        border: 1px solid var(--mk-tinta-20);
        padding: .75rem 1rem;
        z-index: 20;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .12);

        /* Oculto por defecto; se revela al hover/focus. Se anima opacidad, no display,
           para que la transición se vea. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-.4rem);
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
    }

    /* Puente invisible sobre el hueco entre el botón y el panel: sin esto, al cruzar
       el espacio con el mouse se pierde el :hover y el panel se cierra. */
    .mk-mega-panel[b-qvglakc4lr]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1.4rem;
        height: 1.4rem;
    }

    .mk-mega:hover .mk-mega-panel[b-qvglakc4lr],
    .mk-mega:focus-within .mk-mega-panel[b-qvglakc4lr] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* El último género queda pegado al borde derecho de la nav: su panel se ancla a la DERECHA del
       botón (abre hacia la izquierda) para no pasarse del viewport. El header ya recorta cualquier
       desborde (overflow-x: clip), pero anclarlo acá hace que el panel se vea ENTERO al abrirlo, en
       vez de quedar cortado. */
    .mk-mega:last-of-type .mk-mega-panel[b-qvglakc4lr] {
        left: auto;
        right: 0;
    }
}

/* --- Mobile: los géneros del header desaparecen ---------------------------
   En celular la navegación por sección (género → tipos) vive en el drawer de
   filtros del catálogo, no acá. El header queda con el logo y los links planos. */
@media (max-width: 640px) {
    /* Los géneros se fueron al drawer del catálogo; quedan sólo los links planos,
       que van en FILA (horizontal), centrados y con un gap más chico. */
    .mk-nav[b-qvglakc4lr] {
        /* Fila propia a lo ancho, DEBAJO del logo y el toggle (order la manda al final del header).
           Con todo el ancho, los links (Catálogo · Nosotros · Noticias) entran en horizontal. */
        flex: 1 1 100%;
        order: 3;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mk-mega[b-qvglakc4lr] { display: none; }
}
/* _content/MarketCatalogo.Web/Components/Pages/Home.razor.rz.scp.css */
.mk-hero[b-cjyly28i6m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 60vh;
    padding: 4rem 2rem;
    text-align: center;
}

.mk-hero-logo[b-cjyly28i6m] {
    /* clamp() para que nunca baje de la reducción mínima del manual (183 px). */
    font-size: clamp(1.75rem, 6vw, 4rem);
}

/* --- Declaración de marca: una línea fuerte + subtítulo, centrado y con aire. --------- */
.mk-declaracion[b-cjyly28i6m] {
    max-width: 44rem;
    margin: 0 auto;
    padding: 5.5rem 2rem 0;
    text-align: center;
}

.mk-declaracion-lead[b-cjyly28i6m] {
    font-family: var(--mk-font-titulo);
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.25;
    margin: 0 0 .75rem;
    color: var(--mk-tinta-100);
}

.mk-declaracion-sub[b-cjyly28i6m] {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
    color: var(--mk-tinta-70);
}

/* --- Géneros: cards con foto, clickeables, que aparecen al scrollear ------ */
.mk-generos-seccion[b-cjyly28i6m] {
    /* Aire respecto de la declaración de arriba. */
    margin: 3rem auto 6rem;
    padding: 0 2rem;
    max-width: 84rem;
}

.mk-generos[b-cjyly28i6m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

@media (max-width: 64rem) {
    .mk-generos[b-cjyly28i6m] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Celular: en vez de apilar, las cards se vuelven un carrusel horizontal deslizable con scroll-snap
   (CSS puro, sin JS). Se arrastra de costado y "engancha" en cada género. El resto (desktop/tablet)
   sigue siendo grilla. Es el patrón de "estante" deslizable, no un autoplay: nada se mueve solo. */
@media (max-width: 48rem) {
    /* El carrusel sangra hasta los bordes; el título se mantiene con su margen. */
    .mk-generos-seccion[b-cjyly28i6m] {
        padding-inline: 0;
    }

    .mk-generos[b-cjyly28i6m] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-template-columns: none;
        gap: .75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Sangra hasta el borde y usa scroll-padding para que la primera/última card no queden pegadas. */
        padding: 0 1.25rem 1.25rem;
        scroll-padding-inline: 1.25rem;
        -webkit-overflow-scrolling: touch;
        /* Barra de scroll discreta (no hace falta que grite: la propia foto invita a arrastrar). */
        scrollbar-width: none;
    }

    .mk-generos[b-cjyly28i6m]::-webkit-scrollbar {
        display: none;
    }

    .mk-genero[b-cjyly28i6m] {
        scroll-snap-align: start;
        min-height: 22rem;
    }
}

.mk-genero[b-cjyly28i6m] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .35rem;
    min-height: 23rem;
    padding: 1.75rem;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    /* Foto de fondo (background-image se setea inline por card). A color; si la card no tiene foto,
       queda el negro de .mk-negativo de fondo. */
    background-size: cover;
    background-position: center top;
}

/* Overlay oscuro sobre la foto: el rótulo blanco tiene que leerse siempre. Se degrada de
   transparente arriba a negro abajo, justo donde está el texto. */
.mk-genero[b-cjyly28i6m]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .75) 100%);
    transition: background .3s ease;
}

.mk-genero > *[b-cjyly28i6m] {
    position: relative;
    z-index: 1;
}

.mk-genero:hover[b-cjyly28i6m]::before,
.mk-genero:focus-visible[b-cjyly28i6m]::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .8) 100%);
}

/* El lift de hover comparte la transición de transform del sistema de reveal (institucional.css).
   Se resetea el transition-delay del stagger para que el hover responda al instante. */
.mk-genero:hover[b-cjyly28i6m],
.mk-genero:focus-visible[b-cjyly28i6m] {
    transform: translateY(-4px);
    transition-delay: 0s;
}

.mk-genero-nombre[b-cjyly28i6m] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1;
}

/* Stagger del reveal: cada card entra un pelín después que la anterior. Sólo aplica
   cuando el JS marcó <html class="js-reveal"> (ver App.razor); sin JS, todo visible. */
.js-reveal .mk-generos .mk-genero:nth-child(2)[b-cjyly28i6m] { transition-delay: .08s; }
.js-reveal .mk-generos .mk-genero:nth-child(3)[b-cjyly28i6m] { transition-delay: .16s; }
.js-reveal .mk-generos .mk-genero:nth-child(4)[b-cjyly28i6m] { transition-delay: .24s; }