/* =========================================================
   SONICOVA — RESPONSIVE MÓVIL DEL INDEX
   Archivo: componentes/index_mobile.css
   Estilo urbano: periódico, papel, collage y rojo.
   Fondo general oscurecido + folder y hoja de expediente.
   Sin buscador ni selector de tipos.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Montserrat:wght@400;500;600;700;800;900&family=Special+Elite&display=swap');

/* =========================================================
   BASE GENERAL
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-text-size-adjust: 100%;
}

img,
video,
iframe {
    max-width: 100%;
}

html,
body,
input,
textarea,
select,
button {
    font-family: 'Montserrat', Arial, sans-serif;
}

body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    background-attachment: scroll;
}

.titulo-global,
.nombre-audio,
.modal-right h2,
.modal-denuncia-box h2 {
    font-family: 'Bowlby One SC', Impact, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    -webkit-text-stroke: 0.2px currentColor;
}

button,
a,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

img {
    height: auto;
}

/* El título generado por CSS solo existe en móviles. */

.sidebar-logo::after {
    display: none;
    content: none;
}

/* =========================================================
   TABLETS Y TELÉFONOS
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        background-attachment: scroll;
    }

    /* ESTRUCTURA PRINCIPAL */

    .app-layout {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .sidebar {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .main-layout {
        display: block;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0;
    }

    /* =====================================================
       NAVEGACIÓN MÓVIL
    ===================================================== */

    .left-buttons {
        position: relative !important;
        inset: auto !important;
        z-index: 1000;

        display: flex !important;
        flex-flow: row wrap !important;
        align-items: center;
        justify-content: center;
        gap: 7px;

        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 12px 10px 10px !important;

        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .left-buttons::-webkit-scrollbar {
        display: none;
    }

    .left-buttons::before {
        display: none !important;
        content: none !important;
    }

    .left-buttons > br {
        display: none !important;
    }

    /* =====================================================
       LOGO + TÍTULO
    ===================================================== */

    .left-buttons .sidebar-logo {
        display: flex !important;
        flex: 0 0 100% !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 11px;

        width: 100% !important;
        max-width: 100%;
        min-width: 0;

        margin: 0 0 7px !important;
        padding: 0 !important;
        order: 0;
    }

    .left-buttons .sidebar-logo img {
        display: block;
        flex: 0 0 auto;
        width: 76px;
        max-width: 76px;
        height: auto;
        margin: 0;
        object-fit: contain;
    }

    .left-buttons .sidebar-logo::after {
        content: "SONICOVA";
        display: block !important;
        flex: 0 1 auto;

        min-width: 0;
        max-width: calc(100% - 90px);

        color: #fff;
        font-family: 'Bowlby One SC', Impact, sans-serif !important;
        font-size: clamp(25px, 6.5vw, 40px);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: 0.5px;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;

        -webkit-text-stroke: 1px #e5242a;
        paint-order: stroke fill;

        text-shadow:
            2px 2px 0 #e5242a,
            -1px -1px 0 #e5242a,
            3px 3px 0 #171717,
            4px 5px 0 rgba(0, 0, 0, 0.35);
    }

    body .main-layout > h1.bienvenidos-sonicova,
    body .main-layout .bienvenidos-sonicova {
        display: none !important;
    }

    /* =====================================================
       BOTONES DE NAVEGACIÓN
    ===================================================== */

    .left-buttons > .btn-dissolve {
        display: inline-flex !important;
        position: relative;

        flex: 0 1 auto !important;
        align-items: center;
        justify-content: center;

        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 8px);

        min-height: 35px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 7px 11px !important;

        font-family: 'Montserrat', Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.15;
        text-align: center;
        white-space: normal !important;
        overflow-wrap: anywhere;

        border-radius: 7px;
        -webkit-tap-highlight-color: transparent;
    }

    .left-buttons > .btn-dissolve::before {
        top: -4px;
        width: 30px;
        height: 7px;
    }

    .left-buttons > .btn-dissolve::after {
        bottom: -3px;
        height: 3px;
    }

    .left-buttons > .btn-dissolve:hover {
        transform: none;
    }

    .left-buttons > .btn-dissolve:active {
        transform: scale(0.98);
    }

    /* El usuario conserva su enlace. */

    .btn-usuario-movil {
        display: inline-flex !important;
        gap: 7px;
    }

    .texto-usuario {
        display: inline !important;
    }

    .icono-usuario-movil {
        display: none !important;
    }

    /* =====================================================
       TÍTULOS SECUNDARIOS
    ===================================================== */

    .titulo-global {
        width: calc(100% - 20px);
        max-width: 100%;
        margin: 28px auto 25px;
        padding: 0 4px;

        font-family: 'Bowlby One SC', Impact, sans-serif !important;
        font-size: clamp(27px, 6.5vw, 38px);
        font-weight: 400;
        line-height: 1.08;
        letter-spacing: 0.2px;
        text-align: center;
        overflow-wrap: anywhere;

        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.13);
    }

    /* =====================================================
       TARJETAS: ESTILO PERIÓDICO
    ===================================================== */

    .grid-sonido {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-content: stretch;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        gap: 14px 9px;
        margin: 0;
        padding: 6px 9px 35px;
    }

    .card-periodico,
    .card-periodico:nth-child(2),
    .card-periodico:nth-child(3),
    .card-periodico:nth-child(6n+1),
    .card-periodico:nth-child(6n+2),
    .card-periodico:nth-child(6n+3),
    .card-periodico:nth-child(6n+4),
    .card-periodico:nth-child(6n+5),
    .card-periodico:nth-child(6n),
    .card-periodico:nth-child(3n),
    .card-periodico:nth-child(4n),
    .card-periodico:nth-child(5n) {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 0 !important;
        padding: 7px;
        transform: none !important;
        border-radius: 9px;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .card-periodico:hover {
        transform: none !important;
    }

    .card-periodico::before {
        top: -5px;
        width: 40px;
        height: 9px;
    }

    .img-portada {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 7px;
    }

    .info-disco {
        min-width: 0;
        margin-top: 7px;
        overflow-wrap: anywhere;
    }

    .nombre-audio {
        max-width: 100%;
        margin-top: 5px;
        font-size: clamp(16px, 4vw, 20px);
        line-height: 1.12;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .descripcion-audio {
        max-width: 100%;
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .tag {
        display: inline-block;
        max-width: 100%;
        padding: 4px 6px;
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 10px;
        font-weight: 700;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cat-badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .footer-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 5px;

        min-width: 0;
        margin-top: 10px;

        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 10px;
    }

    /* =====================================================
       BOTONES DE LAS TARJETAS
    ===================================================== */

    .form-demanda {
        min-width: 0;
        width: 100%;
        margin-top: 7px;
    }

    .btn-demandar {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        max-width: 100%;
        min-height: 32px;

        padding: 7px 9px;

        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;

        border-radius: 6px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .favorite-btn {
        max-width: 100%;
        min-height: 34px;
        padding: 7px 9px;
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 11px;
        font-weight: 800;
    }

    .modal-buttons {
        display: flex;
        flex-flow: row nowrap !important;
        justify-content: center;
        align-items: stretch;
        gap: 7px;

        width: 100%;
        min-width: 0;
        margin-top: 12px;
    }

    .modal-buttons .buy-btn,
    .modal-buttons .rating-open,
    .buy-btn,
    .rating-open {
        display: inline-flex;
        flex: 1 1 0 !important;
        align-items: center;
        justify-content: center;

        width: auto !important;
        max-width: 100%;
        min-width: 0;
        min-height: 36px !important;
        height: auto;

        margin: 0;
        padding: 7px 5px !important;

        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 10px !important;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;

        border-radius: 7px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* =====================================================
       MENÚ DE RESEÑAS
    ===================================================== */

    .rating-selector {
        max-width: 100%;
        margin-top: 10px;
    }

    .rating-menu {
        top: auto;
        bottom: calc(100% + 8px);
        max-width: calc(100vw - 24px);
        max-height: 55vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .rating-menu label {
        padding: 9px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    /* =====================================================
       MODAL DE DETALLES
    ===================================================== */

    .modal-disco {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 9px;

        overflow-x: hidden;
        overflow-y: auto;
        align-items: flex-start;

        -webkit-overflow-scrolling: touch;
    }

    .modal-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 13px;

        width: 100%;
        max-width: 600px;
        min-width: 0;
        min-height: 0;
        height: auto;
        max-height: none;

        margin: auto;
        padding: 46px 12px 15px;

        border-radius: 15px;
        overflow: visible;
    }

    .modal-left,
    .modal-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .modal-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    .modal-left img,
    #modalImg {
        display: block;
        width: 100%;
        max-width: 280px;
        height: auto;
        max-height: 250px;
        aspect-ratio: 1 / 1;
        object-fit: cover;

        margin-left: auto;
        margin-right: auto;

        border-radius: 10px;
    }

    .disco-modal {
        width: 75px;
        height: 75px;
        max-width: 30vw;
        max-height: 30vw;
        right: 0;
        bottom: 5px;
    }

    .modal-right {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .modal-right h2 {
        max-width: 100%;
        font-size: clamp(23px, 6vw, 33px);
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .modal-desc {
        max-width: 100%;
        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 12px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .extra-box {
        max-width: 100%;
        padding: 8px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .cerrar {
        top: 7px;
        right: 7px;
        width: 36px;
        height: 36px;
        z-index: 5;
    }

    /* =====================================================
       CONFIRMACIONES
    ===================================================== */

    .confirm-box {
        padding: 12px;
    }

    .confirm-card {
        width: calc(100% - 24px);
        max-width: 380px;
        min-width: 0;
        padding: 19px 13px;
        overflow-wrap: anywhere;
    }

    .confirm-card button {
        min-height: 35px;
        max-width: 100%;
        padding: 7px 10px;
        font-size: 11px;
        font-weight: 800;
    }

    /* =====================================================
       MODAL DE DENUNCIA
    ===================================================== */

    .modal-denuncia {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 9px;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }

    .modal-denuncia-box {
        width: 100%;
        max-width: 520px;
        min-width: 0;
        max-height: calc(100vh - 18px);

        margin: auto;
        padding: 42px 12px 14px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-denuncia-box h2 {
        font-size: 23px;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .motivo-option {
        min-width: 0;
        gap: 8px;
    }

    .motivo-texto {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .botones-denuncia {
        display: flex;
        flex-flow: row nowrap !important;
        justify-content: stretch;
        gap: 7px;
        width: 100%;
    }

    .botones-denuncia button {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: 100%;
        min-width: 0;
        min-height: 35px;

        padding: 7px 5px;

        font-family: 'Montserrat', Arial, sans-serif;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .left-buttons a,
    .left-buttons button {
        visibility: visible;
    }
}

/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .left-buttons {
        gap: 6px;
        padding: 10px 8px 11px !important;
    }

    .left-buttons .btn-dissolve {
        min-height: 33px !important;
        padding: 7px 9px !important;
        font-size: 10px !important;
    }

    .left-buttons .sidebar-logo img {
        width: 68px;
        max-width: 68px;
    }

    .left-buttons .sidebar-logo::after {
        font-size: clamp(24px, 6.5vw, 32px);
        letter-spacing: 0;
    }

    .titulo-global {
        margin: 24px auto 21px;
        font-size: clamp(25px, 7vw, 32px);
    }

    .grid-sonido {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 7px;
        padding: 5px 7px 28px;
    }

    .card-periodico,
    .card-periodico:nth-child(2),
    .card-periodico:nth-child(3),
    .card-periodico:nth-child(6n+1),
    .card-periodico:nth-child(6n+2),
    .card-periodico:nth-child(6n+3),
    .card-periodico:nth-child(6n+4),
    .card-periodico:nth-child(6n+5),
    .card-periodico:nth-child(6n),
    .card-periodico:nth-child(3n),
    .card-periodico:nth-child(4n),
    .card-periodico:nth-child(5n) {
        padding: 6px;
    }

    .nombre-audio {
        font-size: 16px;
    }

    .descripcion-audio {
        font-size: 10px;
        line-height: 1.4;
    }

    .footer-card {
        gap: 4px;
        font-size: 9px;
    }

    .modal-box {
        padding: 44px 10px 13px;
    }

    .modal-left img,
    #modalImg {
        max-height: 215px;
    }

    .disco-modal {
        width: 68px;
        height: 68px;
    }

    .modal-buttons {
        flex-wrap: nowrap !important;
        gap: 5px;
    }

    .modal-buttons .buy-btn,
    .modal-buttons .rating-open,
    .buy-btn,
    .rating-open {
        flex: 1 1 0 !important;
        min-height: 34px !important;
        padding: 6px 3px !important;
        font-size: 9px !important;
    }

    .botones-denuncia {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px;
    }

    .botones-denuncia button {
        flex: 1 1 0 !important;
        padding: 6px 3px;
        font-size: 9px;
    }

    .modal-denuncia-box {
        padding: 42px 10px 13px;
        border-radius: 18px;
    }

    .modal-denuncia-box h2 {
        font-size: 21px;
    }

    .motivo-option {
        padding: 11px 38px 11px 10px;
    }

    .motivo-texto small {
        display: none;
    }
}

/* =========================================================
   TELÉFONOS MUY ESTRECHOS
========================================================= */

@media (max-width: 350px) {

    .left-buttons {
        gap: 5px;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .left-buttons .btn-dissolve {
        padding: 6px 8px !important;
        font-size: 9px !important;
    }

    .left-buttons .sidebar-logo img {
        width: 58px;
        max-width: 58px;
    }

    .left-buttons .sidebar-logo {
        gap: 8px;
    }

    .left-buttons .sidebar-logo::after {
        font-size: 23px;
        letter-spacing: 0;
    }

    .titulo-global {
        font-size: 24px;
    }

    .grid-sonido {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding-right: 13px;
        padding-left: 13px;
    }

    .card-periodico,
    .card-periodico:nth-child(2),
    .card-periodico:nth-child(3),
    .card-periodico:nth-child(6n+1),
    .card-periodico:nth-child(6n+2),
    .card-periodico:nth-child(6n+3),
    .card-periodico:nth-child(6n+4),
    .card-periodico:nth-child(6n+5),
    .card-periodico:nth-child(6n),
    .card-periodico:nth-child(3n),
    .card-periodico:nth-child(4n),
    .card-periodico:nth-child(5n) {
        padding: 8px;
    }

    .nombre-audio {
        font-size: 19px;
    }

    .descripcion-audio {
        font-size: 11px;
    }

    .modal-box {
        padding-right: 8px;
        padding-left: 8px;
    }

    .modal-denuncia-box {
        padding-right: 9px;
        padding-left: 9px;
    }
}

/* =========================================================
   BOTÓN DE USUARIO — ICONO NEGRO Y MANCHA ROJA
========================================================= */

.icono-usuario-movil {
    display: none !important;
}

.texto-usuario {
    display: inline !important;
}

@media (max-width: 600px) {

    .left-buttons .btn-usuario-movil {
        position: relative !important;
        isolation: isolate;
        order: 999 !important;

        margin-left: auto !important;

        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;

        padding: 4px !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        color: #000 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        text-decoration: none;
        overflow: visible !important;
        z-index: 1;
    }

    .left-buttons .btn-usuario-movil::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 17px 3px 0 2px;

        display: block !important;
        background: #e5242a;
        border: none !important;

        border-radius: 44% 56% 62% 38% / 37% 42% 58% 63%;
        transform: rotate(-13deg) scale(1.08);

        box-shadow:
            -3px 2px 0 -1px #e5242a,
            3px -3px 0 -2px #e5242a,
            1px 4px 0 -2px #c91920;
    }

    .left-buttons .btn-usuario-movil::after {
        content: "";
        position: absolute;
        z-index: -1;

        display: block;
        width: 5px;
        height: 5px;
        top: 3px;
        right: 3px;
        bottom: auto;

        background: #e5242a;
        border: none !important;
        border-radius: 50%;

        box-shadow:
            -29px 30px 0 -1px #e5242a,
            33px 17px 0 -2px #c91920;
    }

    .left-buttons .btn-usuario-movil .texto-usuario {
        display: none !important;
    }

    .left-buttons .btn-usuario-movil .icono-usuario-movil {
        position: relative;
        z-index: 2;

        display: block !important;
        width: 31px;
        height: 31px;
        flex: 0 0 31px;

        color: #000 !important;
        overflow: visible;
    }
}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .btn-dissolve,
    .card-periodico,
    .buy-btn,
    .rating-open,
    .favorite-btn,
    .disco-modal {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   FONDO ORIGINAL DEL PORTAFOLIO — SOLO MÓVIL
========================================================= */

@media (max-width: 900px) {
    html,
    body {
        background-color: #29251f !important;
        background-image: url("../fondo para movil de web.png") !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}


/* =========================================================
   SONICOVA — FOLDER + HOJA BLANCA + BOTONES ESTAMPADOS
========================================================= */

@media (max-width: 600px) {

    /* FOLDER OSCURO: SE CONSERVA */

    .left-buttons {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;

        background:
            linear-gradient(
                155deg,
                #302d29 0%,
                #1b1a18 48%,
                #10100f 100%
            ) !important;

        border: 1px solid rgba(255, 246, 225, 0.12) !important;
        border-radius: 2px 7px 3px 1px !important;

        box-shadow:
            -3px 4px 0 #090909,
            3px 7px 0 #292622,
            7px 12px 0 rgba(0, 0, 0, 0.45),
            10px 18px 24px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

        padding: 28px 11px 15px !important;
        gap: 9px !important;

        transform: rotate(-0.25deg);
    }

    .left-buttons::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        z-index: 0 !important;

        top: 7px !important;
        left: 7px !important;
        right: 7px !important;
        bottom: 7px !important;

        border: 1px solid rgba(255, 248, 232, 0.14) !important;

        border-radius:
            1px 5px 2px 4px /
            3px 1px 5px 2px !important;

        transform: rotate(.35deg);
        pointer-events: none !important;
    }

    /* ESQUINA DOBLADA DE LA CARPETA */

    .left-buttons::after {
        content: "" !important;

        position: absolute !important;
        z-index: 1 !important;

        top: -1px !important;
        right: -1px !important;

        width: 48px !important;
        height: 42px !important;

        background:
            linear-gradient(
                225deg,
                #d9cdb5 0%,
                #eee3cd 46%,
                #8c806d 48%,
                #34312d 51%,
                #171717 70%
            ) !important;

        clip-path: polygon(
            15% 0,
            100% 0,
            100% 100%,
            72% 82%,
            54% 55%,
            29% 36%
        );

        filter: drop-shadow(-2px 3px 1px rgba(0,0,0,.48));
        pointer-events: none !important;
    }

    /* HOJA BLANCA DETRÁS DEL LOGO Y DEL TEXTO */

    .left-buttons .sidebar-logo {
        position: relative !important;
        isolation: isolate !important;

        display: flex !important;
        flex: 0 0 94% !important;
        align-items: center !important;
        justify-content: center !important;

        width: 94% !important;
        margin: 0 auto 13px !important;
        padding: 14px 10px 17px !important;

        background: #fff !important;

        border: 1px solid #d8d4cc !important;
        border-radius: 1px 3px 2px 5px / 2px 1px 4px 2px !important;

        box-shadow:
            0 0 0 2px rgba(39, 34, 27, 0.78),
            3px 4px 0 #e2ded6,
            5px 7px 0 #161513,
            7px 10px 0 rgba(0, 0, 0, 0.34),
            inset 1px 1px 0 rgba(255, 255, 255, 0.95) !important;

        outline: 1px solid rgba(75, 59, 39, 0.35) !important;
        outline-offset: -5px !important;

        transform: rotate(-1.3deg) !important;
        z-index: 3 !important;
    }

    /* CAPA DE PAPEL DE RESPALDO */

    .left-buttons .sidebar-logo::before {
        content: "" !important;

        position: absolute !important;
        z-index: -1 !important;

        top: 5px !important;
        left: -5px !important;

        width: 100% !important;
        height: 100% !important;

        background: #e9e6df !important;
        border: 1px solid #c9c4ba !important;

        transform: rotate(3deg);

        box-shadow:
            2px 3px 0 rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    /* SONICOVA: TÍTULO ESTAMPADO EN LA HOJA BLANCA */

    .left-buttons .sidebar-logo::after {
        position: relative !important;
        z-index: 4 !important;

        color: #29241e !important;

        -webkit-text-stroke: 0.8px #a92126 !important;
        paint-order: stroke fill !important;

        text-shadow:
            1px 1px 0 #fff,
            2px 2px 0 #b52a2d,
            3px 3px 0 rgba(75, 28, 24, 0.35) !important;

        letter-spacing: 0.6px !important;
        transform: rotate(.4deg) !important;
        filter: contrast(1.08);
    }

    /* CINTA BLANCA SOBRE LOS BOTONES */

    .left-buttons > .btn-dissolve::before {
        content: "" !important;

        position: absolute !important;
        z-index: 5 !important;

        top: -8px !important;
        left: 50% !important;

        width: 43px !important;
        height: 12px !important;

        background:
            linear-gradient(
                90deg,
                #fffefa,
                #f4eee2 55%,
                #fffdf7
            ) !important;

        border: 1px solid #d2c8b7 !important;
        border-radius: 1px 2px 1px 3px / 2px 1px 3px 1px !important;

        box-shadow:
            1px 2px 2px rgba(0,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.95) !important;

        transform:
            translateX(-50%)
            rotate(-6deg)
            skewX(-5deg) !important;

        pointer-events: none !important;
    }

    /* BOTONES DE PAPEL CON ESQUINAS DE SELLO */

    .left-buttons > .btn-dissolve {
        position: relative !important;
        z-index: 3 !important;

        background:
            linear-gradient(
                145deg,
                #fffdf6 0%,
                #f5eedf 100%
            ) !important;

        color: #211f1b !important;
        border: 1px solid #d6cbb7 !important;

        /* Marco interior discontinuo como un sello impreso */
        outline: 1px dashed rgba(119, 37, 34, 0.72) !important;
        outline-offset: -4px !important;

        border-radius: 3px 6px 2px 5px !important;

        box-shadow:
            2px 4px 0 rgba(0,0,0,.34),
            0 6px 10px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.95) !important;

        text-shadow: none !important;
    }

    /* SELLOS DESTACADOS DE INICIO Y TIENDA */

    .left-buttons > .btn-dissolve:nth-of-type(1),
    .left-buttons > .btn-dissolve:nth-of-type(2) {
        background:
            linear-gradient(
                145deg,
                #fffdf5 0%,
                #f4ecdc 100%
            ) !important;

        border: 2px solid #fff !important;

        outline: 1px dashed rgba(153, 36, 38, .9) !important;
        outline-offset: -5px !important;

        box-shadow:
            2px 4px 0 rgba(0,0,0,.35),
            0 7px 11px rgba(0,0,0,.20),
            inset 0 1px 0 rgba(255,255,255,.95) !important;

        color: #171717 !important;
        letter-spacing: .4px !important;

        transform:
            rotate(-1.1deg)
            skewX(-1deg) !important;
    }

    .left-buttons > .btn-dissolve:nth-of-type(2) {
        transform:
            rotate(1.2deg)
            skewX(.8deg) !important;
    }

    .left-buttons > .btn-dissolve:nth-of-type(1)::after,
    .left-buttons > .btn-dissolve:nth-of-type(2)::after {
        content: "" !important;

        position: absolute !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 4px !important;

        height: 1px !important;
        background: rgba(70,65,58,.22) !important;

        transform: rotate(-1deg);
        pointer-events: none !important;
    }

    .left-buttons > .btn-dissolve:nth-of-type(n+3) {
        background:
            linear-gradient(
                145deg,
                #fffdf6 0%,
                #f5eedf 100%
            ) !important;

        border: 1px solid #d6cbb7 !important;
        outline: 1px dashed rgba(119, 37, 34, 0.65) !important;
        outline-offset: -4px !important;
    }

    /* EL USUARIO CONSERVA SU ICONO Y SU ENLACE */

    .left-buttons .btn-usuario-movil {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .left-buttons .btn-usuario-movil .icono-usuario-movil,
    .left-buttons .btn-usuario-movil .icono-usuario-movil svg {
        color: #e5242a !important;
        fill: #e5242a !important;
        stroke: #e5242a !important;
    }
}

/* =========================================================
   OSCURECIMIENTO GLOBAL DEL FONDO MÓVIL
========================================================= */

@media (max-width: 600px) {

    html,
    body {
        background-color: #29251f !important;
        background-attachment: scroll !important;
    }

    body {
        background-image:
            linear-gradient(
                rgba(20, 18, 16, 0.43),
                rgba(20, 18, 16, 0.43)
            ),
            url("../fondo para movil de web.png") !important;

        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }
}

/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 350px) {

    .left-buttons .sidebar-logo {
        width: 92% !important;
        flex-basis: 92% !important;
        outline-offset: -4px !important;
    }

    .left-buttons .sidebar-logo::after {
        font-size: 23px !important;
    }

    .left-buttons > .btn-dissolve:nth-of-type(1),
    .left-buttons > .btn-dissolve:nth-of-type(2) {
        outline-offset: -4px !important;
    }
}

/* =========================================================
   SONICOVA — LIBROS MÓVIL
   LIBRO PEQUEÑO + TEXTO AL LADO
========================================================= */

@media (max-width: 900px) {

    .manual-section.manual-libros-juntos {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 22px auto 30px !important;
        padding: 0 10px !important;

        gap: 22px !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       LIBRO + TEXTO
    ========================================= */

    .manual-libros-juntos .manual-libro {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 300px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: 14px !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       LIBRO PEQUEÑO
    ========================================= */

    .manual-libros-juntos .manual-book {

        position: relative !important;

        flex: 0 0 82px !important;

        width: 82px !important;
        height: 112px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #eee5d2 !important;

        border: 2px solid #201a16 !important;

        border-radius: 1px 3px 3px 1px !important;

        box-shadow:
            3px 4px 0 #17120f,
            6px 8px 10px rgba(0,0,0,.28) !important;

        transform:
            perspective(450px)
            rotateY(-8deg)
            rotateZ(-1deg) !important;

        transform-origin: center left !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    .manual-libros-juntos
    .manual-libro:nth-child(2)
    .manual-book {

        transform:
            perspective(450px)
            rotateY(-8deg)
            rotateZ(1deg) !important;
    }


    /* =========================================
       LOMO
    ========================================= */

    .manual-libros-juntos .manual-book::before {

        content: "" !important;

        position: absolute !important;

        left: -7px !important;
        top: -2px !important;

        width: 8px !important;
        height: calc(100% + 4px) !important;

        background: #941d20 !important;

        border: 2px solid #201a16 !important;
        border-right: 0 !important;

        border-radius: 4px 0 0 4px !important;

        box-shadow:
            inset -2px 0 rgba(255,255,255,.12) !important;

        z-index: 4 !important;
    }


    .manual-libros-juntos
    .manual-libro.libro-politicas
    .manual-book::before {

        background: #c4a333 !important;
    }


    /* =========================================
       PORTADA
    ========================================= */

    .manual-libros-juntos .manual-cover {

        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100% !important;

        padding: 7px 4px !important;

        gap: 5px !important;

        background: #c62828 !important;

        color: #fff !important;

        border: 2px solid rgba(0,0,0,.30) !important;

        box-shadow:
            inset 5px 0 0 rgba(0,0,0,.14),
            inset -2px 0 0 rgba(255,255,255,.10) !important;

        text-align: center !important;

        box-sizing: border-box !important;

        z-index: 3 !important;
    }


    /* =========================================
       LIBRO AMARILLO
    ========================================= */

    .manual-libros-juntos
    .manual-libro.libro-politicas
    .manual-cover {

        background: #f4d35e !important;

        color: #241b0b !important;
    }


    /* =========================================
       BORDE INTERIOR
    ========================================= */

    .manual-libros-juntos .manual-cover::after {

        content: "" !important;

        position: absolute !important;

        inset: 4px !important;

        border: 1px solid rgba(255,255,255,.30) !important;

        pointer-events: none !important;
    }


    /* =========================================
       ICONO
    ========================================= */

    .manual-libros-juntos .manual-book-icon {

        font-size: 18px !important;

        line-height: 1 !important;

        margin: 0 !important;

        color: inherit !important;
    }


    /* =========================================
       LETRAS DE LA PORTADA
       MÁS GRANDES Y LEGIBLES
    ========================================= */

    .manual-libros-juntos .manual-book-title {

        display: block !important;

        width: 100% !important;
        max-width: 76px !important;

        margin: 0 !important;

        font-family:
            'Bowlby One SC',
            Impact,
            sans-serif !important;

        font-size: 10px !important;

        font-weight: 400 !important;

        line-height: 1.15 !important;

        letter-spacing: 0 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: normal !important;

        word-break: normal !important;

        text-shadow:
            1px 1px 0 rgba(0,0,0,.18) !important;
    }


    /* =========================================
       SONICOVA EN PORTADA
    ========================================= */

    .manual-libros-juntos .manual-book-subtitle {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        font-family:
            'Special Elite',
            cursive !important;

        font-size: 7px !important;

        font-weight: 400 !important;

        line-height: 1 !important;

        letter-spacing: 1px !important;

        text-align: center !important;

        white-space: nowrap !important;
    }


    /* =========================================
       PÁGINAS
    ========================================= */

    .manual-libros-juntos .manual-pages {

        position: absolute !important;

        top: 4px !important;
        right: -7px !important;

        width: 8px !important;
        height: calc(100% - 8px) !important;

        background:
            repeating-linear-gradient(
                to bottom,
                #fffdf4 0,
                #fffdf4 3px,
                #d8d0c0 4px,
                #fffdf4 5px
            ) !important;

        border: 1px solid #b9ad98 !important;

        box-shadow:
            2px 2px 0 rgba(0,0,0,.16) !important;

        z-index: 1 !important;
    }


    /* =========================================
       TEXTO AL LADO
    ========================================= */

    .manual-libros-juntos .manual-texto {

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        flex: 1 1 auto !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 4px !important;

        text-align: left !important;
    }



.manual-libros-juntos .manual-texto strong {
    display: block !important;
    width: 100% !important;

    font-family: 'Bowlby One SC', Impact, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;

    color: #171512 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}


.manual-libros-juntos .manual-texto span {
    display: block !important;
    width: 100% !important;
    max-width: 170px !important;

    font-family: 'Special Elite', Georgia, serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    color: #383025 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .manual-section.manual-libros-juntos {

        margin-top: 20px !important;
        margin-bottom: 27px !important;

        gap: 20px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .manual-libros-juntos .manual-libro {

        max-width: 285px !important;

        gap: 12px !important;
    }


    /* LIBRO AÚN MÁS PEQUEÑO */

    .manual-libros-juntos .manual-book {

        flex-basis: 72px !important;

        width: 72px !important;
        height: 98px !important;
    }


    .manual-libros-juntos .manual-book-icon {
        font-size: 16px !important;
    }


    .manual-libros-juntos .manual-book-title {

        font-size: 9px !important;

        max-width: 67px !important;

        line-height: 1.12 !important;
    }


    .manual-libros-juntos .manual-book-subtitle {

        font-size: 6px !important;

        letter-spacing: .8px !important;
    }


    .manual-libros-juntos .manual-texto {

        gap: 3px !important;
    }


    .manual-libros-juntos .manual-texto strong {

        font-size: 11px !important;
    }


    .manual-libros-juntos .manual-texto span {

        max-width: 165px !important;

        font-size: 8.5px !important;

        line-height: 1.3 !important;
    }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================= */

@media (max-width: 350px) {

    .manual-section.manual-libros-juntos {

        gap: 18px !important;
    }


    .manual-libros-juntos .manual-libro {

        max-width: 270px !important;

        gap: 11px !important;
    }


    .manual-libros-juntos .manual-book {

        flex-basis: 66px !important;

        width: 66px !important;
        height: 90px !important;
    }


    .manual-libros-juntos .manual-book-icon {
        font-size: 14px !important;
    }


    .manual-libros-juntos .manual-book-title {

        font-size: 8px !important;

        max-width: 61px !important;
    }


    .manual-libros-juntos .manual-book-subtitle {

        font-size: 5.5px !important;

        letter-spacing: .6px !important;
    }


    .manual-libros-juntos .manual-texto strong {

        font-size: 10px !important;
    }


    .manual-libros-juntos .manual-texto span {

        max-width: 155px !important;

        font-size: 8px !important;
    }
}

/* =========================================================
   SONICOVA — RETRATO Y FICHA DENTRO DEL CARTEL
   Escritorio y móviles. Conserva el diseño exterior.
========================================================= */

/* ===================== ESCRITORIO ===================== */

@media (min-width: 901px) {

    .vendedores-track .vendedor-item img {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;

        width: 84px !important;
        height: 88px !important;
        max-width: 100% !important;
        margin: 2px auto 8px !important;

        flex: none !important;
        object-fit: cover !important;
        object-position: center !important;

        box-sizing: border-box !important;
        border: 2px solid #8b6c43 !important;
        border-radius: 0 !important;
        box-shadow: 2px 3px 0 rgba(0, 0, 0, .16) !important;
    }

    .vendedores-track .vendedor-item .vendedor-info {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 3px 0 !important;

        box-sizing: border-box !important;
        text-align: center !important;
        border-top: 1px solid rgba(142, 42, 32, .65) !important;

        background:
            repeating-linear-gradient(
                0deg,
                transparent 0 4px,
                rgba(75, 52, 27, .035) 4px 5px
            ) !important;

        overflow-wrap: anywhere !important;
    }

    .vendedores-track .vendedor-item .vendedor-info strong {
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 0 4px !important;

        color: #302016 !important;
        font-family: 'Special Elite', Georgia, serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .35px !important;
        text-align: center !important;
        text-transform: uppercase !important;

        border-bottom: 1px dashed rgba(110, 82, 51, .65) !important;
        text-shadow: .4px .4px 0 rgba(70, 43, 24, .18) !important;
        overflow-wrap: anywhere !important;
    }

    .vendedores-track .vendedor-item .vendedor-info span {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 0 5px !important;
        padding: 0 0 0 9px !important;

        color: #60452e !important;
        font-family: 'Special Elite', Georgia, serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        letter-spacing: .1px !important;
        text-align: left !important;

        overflow-wrap: anywhere !important;
    }

    .vendedores-track .vendedor-item .vendedor-info span::before {
        content: "›" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        color: #a52b24 !important;
        font-family: Georgia, serif !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
    }

    /* Agujero de bala de escritorio */
    .vendedores-track .vendedor-item:has(img[src]:not([src=""]))::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 5 !important;

        top: 48px !important;
        right: 38px !important;

        width: 13px !important;
        height: 13px !important;
        border: none !important;
        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse at 50% 48%,
                #100d0a 0 24%,
                #21170f 28% 39%,
                #4a3020 43% 51%,
                #806044 55% 61%,
                #c0a078 66% 72%,
                transparent 77%
            ) !important;

        clip-path: polygon(
            48% 0%, 60% 13%, 79% 7%, 81% 25%,
            100% 38%, 85% 53%, 94% 73%, 72% 76%,
            61% 100%, 46% 83%, 27% 92%, 25% 72%,
            3% 62%, 17% 45%, 0% 28%, 24% 25%,
            29% 8%
        ) !important;

        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .75)) !important;
        pointer-events: none !important;
    }
}


/* ======================= MÓVILES ======================= */

@media (max-width: 900px) {

    /* Mantiene el contenido dentro del cartel */
    .vendedores-track .vendedor-item {
        position: relative !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 195px !important;
        padding: 10px 8px !important;
    }

    /* Foto más abajo para no tapar "SE BUSCA" */
    .vendedores-track .vendedor-item img {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;

        width: 60px !important;
        height: 62px !important;
        max-width: 100% !important;
        margin: 24px auto 7px !important;

        flex: none !important;
        object-fit: cover !important;
        object-position: center !important;

        box-sizing: border-box !important;
        border: 2px solid #8b6c43 !important;
        border-radius: 0 !important;
        box-shadow: 2px 3px 0 rgba(0, 0, 0, .16) !important;
    }

    /* Ficha dentro del cartel */
    .vendedores-track .vendedor-item .vendedor-info {
        display: block !important;
        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 2px 0 !important;

        box-sizing: border-box !important;
        text-align: center !important;
        border-top: 1px solid rgba(142, 42, 32, .65) !important;

        background:
            repeating-linear-gradient(
                0deg,
                transparent 0 4px,
                rgba(75, 52, 27, .035) 4px 5px
            ) !important;

        overflow-wrap: anywhere !important;
    }

    /* Nombre del vendedor */
    .vendedores-track .vendedor-item .vendedor-info strong {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 5px !important;
        padding: 0 0 4px !important;

        box-sizing: border-box !important;
        color: #302016 !important;
        font-family: 'Special Elite', Georgia, serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .2px !important;
        text-align: center !important;
        text-transform: uppercase !important;

        border-bottom: 1px dashed rgba(110, 82, 51, .65) !important;
        text-shadow: .4px .4px 0 rgba(70, 43, 24, .18) !important;
        overflow-wrap: anywhere !important;
    }

    /* Descripción y datos */
    .vendedores-track .vendedor-item .vendedor-info span {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px !important;
        padding: 0 0 0 8px !important;

        box-sizing: border-box !important;
        color: #60452e !important;
        font-family: 'Special Elite', Georgia, serif !important;
        font-size: 9px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
        text-align: left !important;

        overflow-wrap: anywhere !important;
    }

    /* Marca roja de expediente */
    .vendedores-track .vendedor-item .vendedor-info span::before {
        content: "›" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        color: #a52b24 !important;
        font-family: Georgia, serif !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
    }

    /* Agujero de bala adaptado a la foto móvil */
    .vendedores-track .vendedor-item:has(img[src]:not([src=""]))::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 5 !important;

        top: 65px !important;
        right: 22px !important;

        width: 11px !important;
        height: 11px !important;
        border: none !important;
        border-radius: 50% !important;

        background:
            radial-gradient(
                ellipse at 50% 48%,
                #100d0a 0 24%,
                #21170f 28% 39%,
                #4a3020 43% 51%,
                #806044 55% 61%,
                #c0a078 66% 72%,
                transparent 77%
            ) !important;

        clip-path: polygon(
            48% 0%, 60% 13%, 79% 7%, 81% 25%,
            100% 38%, 85% 53%, 94% 73%, 72% 76%,
            61% 100%, 46% 83%, 27% 92%, 25% 72%,
            3% 62%, 17% 45%, 0% 28%, 24% 25%,
            29% 8%
        ) !important;

        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .75)) !important;
        pointer-events: none !important;
    }
}