/**
 * Ruta de navegación + botón «Volver» (celular / tablet ≤991).
 * Referencia exacta: ficha de Producto.
 * PC ≥992: sin cambios (este archivo solo declara max-width: 991px).
 *
 * Clases canónicas (reutilizables):
 *   .lds-ruta            contenedor
 *   .lds-ruta__fila      fila de migas (h2 / trail)
 *   .lds-ruta__sep       separador
 *   .lds-ruta__actual    elemento actual
 *   .lds-ruta__volver    botón superior «Volver»
 *
 * Alias: markup histórico (.div-breadcrumbs, h2.ruta2, .btn-step-back, etc.).
 * No aplica a «Volver al menú» final ni a .consultar-back / confirmaciones.
 */

@media (max-width: 991px) {
    :root {
        --lds-ruta-fs: 17px; /* 769–991 */
        --lds-ruta-gap: 0.55rem;
        --lds-ruta-line: 2px solid rgba(150, 150, 150, 0.22);
    }
}

@media (max-width: 768px) {
    :root {
        --lds-ruta-fs: 15px; /* 577–768 */
    }
}

@media (max-width: 576px) {
    :root {
        --lds-ruta-fs: 14px; /* 481–576 */
    }
}

@media (max-width: 480px) {
    :root {
        --lds-ruta-fs: 13px; /* 377–480 */
    }
}

@media (max-width: 376px) {
    :root {
        --lds-ruta-fs: 12px; /* ≤376 */
    }
}

@media (max-width: 991px) {
    /* ——— Contenedor ——— */
    .lds-ruta,
    .div-breadcrumbs:not(.consulta-confirmacion),
    .revistas-breadcrumbs,
    .eventos-breadcrumbs,
    .designers-breadcrumbs,
    .embalajes-breadcrumbs,
    .estilos-breadcrumbs,
    .page-revistas-list .revistas-breadcrumbs,
    .page-eventos-list .eventos-breadcrumbs,
    .page-designers-list .designers-breadcrumbs,
    .page-embalajes-list .embalajes-breadcrumbs,
    .page-estilos-list .estilos-breadcrumbs,
    .alquileres-page > .div-breadcrumbs,
    .formas-pago-page > .div-breadcrumbs,
    .locals-page > .div-breadcrumbs,
    .restauraciones-page > .div-breadcrumbs,
    .envios-page > .div-breadcrumbs {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        min-width: 0;
        overflow-x: hidden;
        border-bottom: var(--lds-ruta-line);
    }

    /* Ficha producto: la raya la dibuja .product-ficha-nav-sep */
    .product-ficha-page .div-breadcrumbs,
    .product-ficha-page .lds-ruta {
        border-bottom: none;
    }

    /* ——— Fila ——— */
    .lds-ruta__fila,
    .lds-ruta h2.ruta2,
    .lds-ruta .ruta2,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2,
    .revistas-ruta,
    .eventos-ruta,
    .designers-ruta,
    .embalajes-ruta,
    .estilos-ruta,
    .page-revistas-list .revistas-ruta,
    .page-eventos-list .eventos-ruta,
    .page-designers-list .designers-ruta,
    .page-embalajes-list .embalajes-ruta,
    .page-estilos-list .estilos-ruta,
    .alquileres-page h2.ruta2,
    .formas-pago-page h2.ruta2,
    .locals-page h2.ruta2,
    .restauraciones-page h2.ruta2,
    .envios-page h2.ruta2,
    .envios-page .ruta2 {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        /* Misma separación que Producto ≤800: solo gap (sin sumar márgenes del /) */
        gap: var(--lds-ruta-gap);
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: auto;
        font-family: 'BentonSans-Regular', Arial, Helvetica, sans-serif !important;
        font-size: var(--lds-ruta-fs) !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        letter-spacing: normal !important;
        text-transform: capitalize;
        color: #fff;
        border-bottom: none;
    }

    .lds-ruta__fila::-webkit-scrollbar,
    .lds-ruta h2.ruta2::-webkit-scrollbar,
    .lds-ruta .ruta2::-webkit-scrollbar,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2::-webkit-scrollbar,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2::-webkit-scrollbar,
    .revistas-ruta::-webkit-scrollbar,
    .eventos-ruta::-webkit-scrollbar,
    .designers-ruta::-webkit-scrollbar,
    .embalajes-ruta::-webkit-scrollbar,
    .estilos-ruta::-webkit-scrollbar,
    .page-revistas-list .revistas-ruta::-webkit-scrollbar,
    .page-eventos-list .eventos-ruta::-webkit-scrollbar,
    .page-designers-list .designers-ruta::-webkit-scrollbar,
    .page-embalajes-list .embalajes-ruta::-webkit-scrollbar,
    .page-estilos-list .estilos-ruta::-webkit-scrollbar,
    .alquileres-page h2.ruta2::-webkit-scrollbar,
    .formas-pago-page h2.ruta2::-webkit-scrollbar,
    .locals-page h2.ruta2::-webkit-scrollbar,
    .restauraciones-page h2.ruta2::-webkit-scrollbar,
    .envios-page h2.ruta2::-webkit-scrollbar {
        display: none;
    }

    .lds-ruta__fila > a,
    .lds-ruta__fila > .item,
    .lds-ruta__fila > .lds-ruta__sep,
    .lds-ruta__fila > .separator,
    .lds-ruta__fila > .lds-ruta__actual,
    .lds-ruta__fila > .breadcrumb-current,
    .lds-ruta__fila > .lds-ruta__volver,
    .lds-ruta__fila > .btn-step-back,
    .lds-ruta__fila > .btn-back,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > a,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .item,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .separator,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .breadcrumb-current,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .ruta-migas,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .btn-step-back,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .btn-back,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .ruta-migas > *,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 > a,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 > .item,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 > .separator,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 > .btn-step-back,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 > .btn-back,
    .revistas-ruta > a,
    .revistas-ruta > .revistas-ruta__sep,
    .revistas-ruta > .btn-step-back,
    .eventos-ruta > a,
    .eventos-ruta > .eventos-ruta__sep,
    .eventos-ruta > .btn-step-back,
    .designers-ruta > a,
    .designers-ruta > .designers-ruta__sep,
    .designers-ruta > .btn-step-back,
    .designers-ruta > .designers-filter,
    .embalajes-ruta > a,
    .embalajes-ruta > .embalajes-ruta__sep,
    .embalajes-ruta > .btn-step-back,
    .embalajes-ruta > .embalajes-filter,
    .estilos-ruta > a,
    .estilos-ruta > .estilos-ruta__sep,
    .estilos-ruta > .btn-step-back,
    .page-revistas-list .revistas-ruta > *,
    .page-eventos-list .eventos-ruta > *,
    .page-designers-list .designers-ruta > *,
    .page-embalajes-list .embalajes-ruta > *,
    .page-estilos-list .estilos-ruta > *,
    .alquileres-page h2.ruta2 > *,
    .formas-pago-page h2.ruta2 > *,
    .locals-page h2.ruta2 > *,
    .restauraciones-page h2.ruta2 > *,
    .envios-page h2.ruta2 > * {
        flex: 0 0 auto;
        white-space: nowrap;
        max-width: none;
        font-size: inherit;
        font-weight: inherit;
        font-family: inherit;
        line-height: inherit;
    }

    .lds-ruta__fila > a,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > a:not(.btn-step-back):not(.btn-back),
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 > a:not(.btn-step-back):not(.btn-back),
    .revistas-ruta > a:not(.btn-step-back),
    .eventos-ruta > a:not(.btn-step-back),
    .designers-ruta > a:not(.btn-step-back),
    .embalajes-ruta > a:not(.btn-step-back),
    .estilos-ruta > a:not(.btn-step-back),
    .alquileres-page h2.ruta2 > a:not(.btn-step-back),
    .formas-pago-page h2.ruta2 > a:not(.btn-step-back),
    .locals-page h2.ruta2 > a:not(.btn-step-back),
    .restauraciones-page h2.ruta2 > a:not(.btn-step-back),
    .envios-page h2.ruta2 > a:not(.btn-step-back) {
        color: #fff;
        text-decoration: none;
        text-transform: capitalize;
    }

    /* Separadores ≤991: el gap de la fila marca la distancia (márgenes PC 1rem/0.5rem apilan de más) */
    .lds-ruta__sep,
    .div-breadcrumbs:not(.consulta-confirmacion) .separator,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta-migas > .separator,
    .revistas-ruta__sep,
    .eventos-ruta__sep,
    .designers-ruta__sep,
    .embalajes-ruta__sep,
    .estilos-ruta__sep {
        margin: 0;
        color: #fff;
    }

    /* Categorías: migas en la misma fila; mismo gap, sin márgenes extra en / */
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 > .ruta-migas {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--lds-ruta-gap);
    }

    /* ——— Botón Volver (solo ruta / cabecera superior) ——— */
    .lds-ruta__volver,
    .lds-ruta__fila > .lds-ruta__volver,
    .lds-ruta__fila > a.btn-step-back,
    .lds-ruta__fila > a.btn-back,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 a.btn-step-back,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 a.btn-back,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 a.btn-step-back,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 a.btn-back,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 a.mi-datos-volver,
    .revistas-ruta a.btn-step-back,
    .revistas-ruta a.btn-back,
    .eventos-ruta a.btn-step-back,
    .eventos-ruta a.btn-back,
    .designers-ruta a.btn-step-back,
    .designers-ruta a.btn-back,
    .embalajes-ruta a.btn-step-back,
    .embalajes-ruta a.btn-back,
    .estilos-ruta a.btn-step-back,
    .estilos-ruta a.btn-back,
    .page-revistas-list .revistas-ruta a.btn-step-back,
    .page-eventos-list .eventos-ruta a.btn-step-back,
    .page-designers-list .designers-ruta a.btn-step-back,
    .page-embalajes-list .embalajes-ruta a.btn-step-back,
    .page-estilos-list .estilos-ruta a.btn-step-back,
    .alquileres-page .div-breadcrumbs a.btn-step-back,
    .formas-pago-page .div-breadcrumbs a.btn-step-back,
    .locals-page .div-breadcrumbs a.btn-step-back,
    .restauraciones-page .div-breadcrumbs a.btn-step-back,
    .envios-page .div-breadcrumbs a.btn-step-back,
    .envios-page h2.ruta2 a.btn-step-back,
    .wishlist-header a.wishlist-back,
    .wishlist-breadcrumbs a.wishlist-back,
    body.page-wishlist .wishlist-header a.wishlist-back,
    body.page-wishlist .wishlist-breadcrumbs a.wishlist-back,
    html body .box-page-consulta .consulta-header a.wishlist-back,
    html body .box-page-consulta .consulta-breadcrumbs a.wishlist-back {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box;
        width: auto;
        max-width: none;
        min-height: 0 !important;
        height: auto !important;
        margin: 0;
        padding: 0 0.4em !important;
        border: 1px solid #d5d0ca;
        border-radius: 4px;
        background: #545454;
        color: #fff !important;
        font-family: 'BentonSans-Regular', Arial, Helvetica, sans-serif !important;
        font-size: 1em !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        letter-spacing: normal !important;
        text-align: center;
        text-decoration: none !important;
        text-transform: none;
        white-space: nowrap !important;
        cursor: pointer;
        flex: 0 0 auto;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    /* Favoritos / Consulta: sin padre .ruta2 con --lds-ruta-fs */
    .wishlist-header a.wishlist-back,
    .wishlist-breadcrumbs a.wishlist-back,
    body.page-wishlist .wishlist-header a.wishlist-back,
    body.page-wishlist .wishlist-breadcrumbs a.wishlist-back,
    html body .box-page-consulta .consulta-header a.wishlist-back,
    html body .box-page-consulta .consulta-breadcrumbs a.wishlist-back {
        font-size: var(--lds-ruta-fs) !important;
    }

    .lds-ruta__volver:hover,
    .lds-ruta__fila > a.btn-step-back:hover,
    .lds-ruta__fila > a.btn-back:hover,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 a.btn-step-back:hover,
    .div-breadcrumbs:not(.consulta-confirmacion) h2.ruta2 a.btn-back:hover,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 a.btn-step-back:hover,
    .div-breadcrumbs:not(.consulta-confirmacion) .ruta2 a.btn-back:hover,
    .revistas-ruta a.btn-step-back:hover,
    .eventos-ruta a.btn-step-back:hover,
    .designers-ruta a.btn-step-back:hover,
    .embalajes-ruta a.btn-step-back:hover,
    .estilos-ruta a.btn-step-back:hover,
    .page-revistas-list .revistas-ruta a.btn-step-back:hover,
    .page-eventos-list .eventos-ruta a.btn-step-back:hover,
    .page-designers-list .designers-ruta a.btn-step-back:hover,
    .page-embalajes-list .embalajes-ruta a.btn-step-back:hover,
    .page-estilos-list .estilos-ruta a.btn-step-back:hover,
    .alquileres-page .div-breadcrumbs a.btn-step-back:hover,
    .formas-pago-page .div-breadcrumbs a.btn-step-back:hover,
    .locals-page .div-breadcrumbs a.btn-step-back:hover,
    .restauraciones-page .div-breadcrumbs a.btn-step-back:hover,
    .envios-page .div-breadcrumbs a.btn-step-back:hover,
    .wishlist-header a.wishlist-back:hover,
    .wishlist-breadcrumbs a.wishlist-back:hover,
    body.page-wishlist .wishlist-header a.wishlist-back:hover,
    html body .box-page-consulta .consulta-breadcrumbs a.wishlist-back:hover {
        background: #493e3a;
        border-color: #988b85;
        color: #d5d0ca !important;
    }
}