/* =========================================================
   SONICOVA — PERFIL PÚBLICO DEL VENDEDOR · MÓVIL
   Archivo: componentes/vendedor_publico_mobile.css
   Inspiración: manual.php
   Estética: papel crema, periódico, cinta amarilla y rojo.
   Solo diseño: no modifica PHP, SQL ni funciones de compra.
========================================================= */

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

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

@media (max-width: 768px) {

    :root {
        --vp-papel: #f4ead5;
        --vp-papel-claro: #fff9ed;
        --vp-rojo: #c62828;
        --vp-negro: #171512;
        --vp-amarillo: #f4d35e;
        --vp-borde: #c9b99d;
    }

    html {
        width: 100%;
        min-height: 100%;
        overflow-x: clip;
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        overflow-x: clip;
        color: var(--vp-negro);
        background:
            radial-gradient(
                ellipse at 20% 20%,
                rgba(130, 90, 40, .08),
                transparent 50%
            ),
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 5px,
                rgba(70, 50, 20, .025) 6px
            ),
            var(--vp-papel);
        font-family: 'Montserrat', sans-serif;
    }

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

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

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    /* =====================================================
       FONDO PRINCIPAL
    ===================================================== */

    .contenido {
        position: relative;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: clip;
        background-color: var(--vp-papel);
        background-image:
            radial-gradient(
                circle at 80% 35%,
                rgba(198, 40, 40, .035),
                transparent 35%
            );
        background-size: auto;
        background-position: center top;
        background-repeat: repeat;
        background-attachment: scroll;
    }

    /* =====================================================
       BOTÓN VOLVER Y MENÚ
    ===================================================== */

    .btn-atras,
    .btn-menu {
        position: fixed;
        top: 12px;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        padding: 0;
        border: 2px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-papel-claro);
        color: var(--vp-negro);
        box-shadow: 3px 3px 0 var(--vp-rojo);
        font-size: 23px;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .2s ease;
    }

    .btn-atras {
        left: 12px;
        transform: rotate(-3deg);
    }

    .btn-menu {
        right: 12px;
        transform: rotate(3deg);
    }

    .btn-atras:active,
    .btn-menu:active {
        transform: scale(.95);
    }

    /* =====================================================
       BANNER DEL VENDEDOR
    ===================================================== */

    .banner {
        position: relative;
        z-index: 0;
        width: 100%;
        height: 190px;
        min-height: 150px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-bottom: 5px solid var(--vp-rojo);
        box-shadow: 0 5px 0 rgba(23, 21, 18, .12);
    }

    .banner::after {
        content: "SONICOVA · PERFIL DEL VENDEDOR";
        position: absolute;
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        padding: 6px 9px;
        background: var(--vp-papel-claro);
        border: 1px solid var(--vp-negro);
        box-shadow: 3px 3px 0 var(--vp-rojo);
        color: var(--vp-negro);
        font-family: 'Special Elite', monospace;
        font-size: 9px;
        letter-spacing: .7px;
        overflow-wrap: anywhere;
        transform: rotate(-2deg);
    }

    .barra-secundaria {
        position: absolute;
        top: 190px;
        left: 0;
        width: 100%;
        height: 400px;
        z-index: 0;
        pointer-events: none;
        background:
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 5px,
                rgba(70, 50, 20, .025) 6px
            ),
            rgba(255, 249, 237, .32);
        border-top: 1px solid rgba(120, 90, 50, .15);
        border-bottom: 1px solid rgba(120, 90, 50, .15);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* =====================================================
       PERFIL DEL VENDEDOR
    ===================================================== */

    .perfil {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        gap: 22px;
        margin: 0;
        padding: 0 15px 20px;
    }

    .perfil-centro {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-width: 0;
        margin-top: -48px;
        padding: 0;
    }

    .foto-perfil {
        position: relative;
        flex-shrink: 0;
        width: 116px;
        height: 116px;
        border-radius: 50%;
        overflow: hidden;
        background: var(--vp-papel-claro);
        box-shadow:
            0 0 0 5px var(--vp-papel-claro),
            0 0 0 8px var(--vp-negro),
            5px 8px 0 rgba(198, 40, 40, .55);
    }

    .foto-perfil img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Se conservan los marcos personalizados */

    .marco-clasico {
        border: 5px solid white;
    }

    .marco-madera {
        border: 8px solid #6b3e1e;
    }

    .marco-oro {
        border: 7px solid #d4af37;
    }

    .marco-cassette {
        border: 7px solid #222;
        box-shadow: inset 0 0 0 4px #555;
    }

    .marco-neon {
        border: 6px solid #00cccc;
        box-shadow: 0 0 14px rgba(0, 200, 200, .6);
    }

    .marco-vinilo {
        border: 8px solid #111;
        box-shadow: inset 0 0 0 4px #444;
    }

    /* =====================================================
       NOMBRE, RANGO E INSIGNIA
    ===================================================== */

    .nombre-vendedor {
        position: relative;
        width: fit-content;
        max-width: 100%;
        margin-top: 23px;
        padding: 13px 16px;
        border: 1px solid var(--vp-borde);
        border-radius: 0;
        background: var(--vp-papel-claro);
        box-shadow: 4px 5px 0 rgba(0, 0, 0, .13);
        color: var(--vp-negro);
        font-family: 'Bowlby One SC', sans-serif;
        font-size: clamp(20px, 6vw, 29px);
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: normal;
        transform: rotate(-1deg);
    }

    .nombre-vendedor::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 30%;
        width: 68px;
        height: 16px;
        background: rgba(244, 211, 94, .82);
        transform: rotate(-3deg);
        pointer-events: none;
    }

    .rango {
        margin-top: 19px;
        color: var(--vp-rojo);
        font-family: 'Special Elite', monospace;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .insignia {
        max-width: 100%;
        margin-top: 9px;
        padding: 8px 13px;
        border: 2px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-amarillo);
        box-shadow: 3px 3px 0 rgba(0, 0, 0, .14);
        color: var(--vp-negro);
        font-family: 'Special Elite', monospace;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        overflow-wrap: anywhere;
        transform: rotate(1deg);
    }

    .descripcion {
        width: 100%;
        max-width: 540px;
        margin-top: 19px;
        padding: 13px 14px;
        border-left: 4px solid var(--vp-rojo);
        background: rgba(255, 249, 237, .88);
        box-shadow: 3px 4px 0 rgba(0, 0, 0, .09);
        color: #51483b;
        font-family: 'Special Elite', monospace;
        font-size: 12px;
        line-height: 1.8;
        text-align: left;
        overflow-wrap: anywhere;
    }

    /* =====================================================
       PANEL DE INFORMACIÓN
       Se conserva el botón ☰ para abrir/cerrar el panel.
    ===================================================== */

    .panel-info {
        position: fixed;
        top: 67px;
        right: 10px;
        z-index: 99999;
        width: min(285px, calc(100vw - 20px));
        height: auto;
        max-height: calc(100dvh - 82px);
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-papel);
        box-shadow:
            5px 6px 0 var(--vp-rojo),
            0 15px 35px rgba(0, 0, 0, .25);
        opacity: 1;
        visibility: visible;
        transition:
            width .25s ease,
            opacity .25s ease,
            padding .25s ease,
            visibility .25s ease;
        -webkit-overflow-scrolling: touch;
    }

    .panel-info.oculto {
        width: 0;
        max-width: 0;
        height: 0;
        max-height: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .panel-card {
        position: relative;
        width: 100%;
        padding: 17px 13px;
        border: 1px solid var(--vp-borde);
        border-radius: 0;
        background: var(--vp-papel-claro);
        box-shadow: 2px 3px 0 rgba(0, 0, 0, .09);
        color: var(--vp-negro);
    }

    .panel-card h3 {
        margin: 0 0 16px;
        padding-bottom: 10px;
        border-bottom: 4px solid var(--vp-rojo);
        font-family: 'Bowlby One SC', sans-serif;
        font-size: 19px;
        text-align: left;
    }

    .panel-card p {
        margin: 12px 0 0;
        font-size: 12px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .panel-card strong {
        color: var(--vp-rojo);
    }

    /* =====================================================
       CATÁLOGO Y TARJETAS DE PRODUCTOS
    ===================================================== */

    .catalogo-vendedor {
        position: relative;
        z-index: 1;
        width: 100%;
        min-width: 0;
        padding: 15px 0 40px;
    }

    .grid-sonido {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        justify-items: stretch;
        gap: 25px 12px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 25px 13px 40px;
    }

    .card-periodico {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 8px;
        border: 1px solid #c3b49a;
        border-radius: 0;
        background: var(--vp-papel-claro);
        color: var(--vp-negro);
        box-shadow: 3px 4px 0 rgba(0, 0, 0, .16);
        cursor: pointer;
        transform: rotate(-1.5deg);
        transition: transform .2s ease, box-shadow .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .card-periodico:nth-child(even) {
        transform: rotate(1.6deg);
    }

    .card-periodico:nth-child(3n) {
        transform: rotate(-.5deg);
    }

    .card-periodico::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: -8px;
        left: 30%;
        width: 53px;
        height: 16px;
        border-radius: 0;
        background: rgba(244, 211, 94, .86);
        transform: rotate(-3deg);
        pointer-events: none;
    }

    .card-periodico:nth-child(even)::before {
        left: 52%;
        transform: rotate(4deg);
    }

    .card-periodico:active {
        transform: scale(.98) rotate(0);
        box-shadow: 1px 2px 0 rgba(0, 0, 0, .16);
    }

    .img-portada {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0;
        background: #e6dbc5;
        border: 1px solid rgba(23, 21, 18, .15);
    }

    .info-disco {
        min-width: 0;
        margin-top: 11px;
        font-family: 'Special Elite', monospace;
    }

    .nombre-audio {
        display: -webkit-box;
        margin: 0 0 7px;
        overflow: hidden;
        overflow-wrap: anywhere;
        color: var(--vp-negro);
        font-family: 'Bowlby One SC', sans-serif;
        font-size: 14px;
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .descripcion-audio {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: #51483b;
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        line-height: 1.55;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .tag {
        display: inline-block;
        max-width: 100%;
        margin-top: 9px;
        padding: 5px 7px;
        border: 1px solid #c7b58d;
        border-radius: 0;
        background: #e9d9b8;
        color: #332619;
        font-family: 'Special Elite', monospace;
        font-size: 10px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .cat-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        width: fit-content;
        max-width: 100%;
        margin-top: 7px;
        padding: 4px 6px;
        border: 1px solid #d1ad48;
        border-radius: 0;
        background: var(--vp-amarillo);
        color: #2b1b0f;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, .1);
        font-size: 9px;
        line-height: 1.4;
        overflow-wrap: anywhere;
        transform: rotate(-1deg);
    }

    .cat-badge::before {
        display: none;
    }

    .footer-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 7px;
        margin-top: 11px;
        padding-top: 8px;
        border-top: 1px solid #c9b99d;
        color: #51483b;
        font-family: 'Special Elite', monospace;
        font-size: 10px;
        line-height: 1.5;
    }

    .fecha-audio {
        width: 100%;
        color: #786b58;
        font-family: 'Special Elite', monospace;
        font-size: 10px;
        overflow-wrap: anywhere;
    }

    /* =====================================================
       BOTONES DE COMPRA Y RESEÑAS
    ===================================================== */

    .modal-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 9px;
        width: 100%;
        margin-top: 16px;
    }

    .buy-btn,
    .rating-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 0;
        max-width: 100%;
        min-height: 42px;
        height: auto;
        margin-top: 0;
        padding: 10px 12px;
        border: 2px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-amarillo);
        color: var(--vp-negro);
        box-shadow: 3px 3px 0 rgba(0, 0, 0, .18);
        font-family: 'Special Elite', monospace;
        font-size: 11px;
        font-weight: bold;
        line-height: 1.3;
        text-align: center;
        cursor: pointer;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .buy-btn {
        background: var(--vp-rojo);
        color: white;
    }

    .buy-btn:active,
    .rating-open:active {
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0 rgba(0, 0, 0, .18);
    }

    .rating-selector {
        position: relative;
        max-width: 100%;
        margin-top: 13px;
    }

    .rating-selector .rating-open {
        width: 100%;
    }

    .rating-menu {
        position: absolute;
        z-index: 1000;
        right: 0;
        bottom: calc(100% + 8px);
        left: 0;
        top: auto;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--vp-amarillo);
        border-radius: 0;
        background: #171512;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
    }

    .rating-menu label {
        padding: 12px 10px;
        border-radius: 0;
        font-size: 15px;
        line-height: 1.4;
    }

    .review-box {
        position: relative;
        min-width: 0;
    }

    .form-demanda {
        width: 100%;
        margin-top: 10px;
    }

    .btn-demandar {
        width: 100%;
        min-height: 42px;
        padding: 10px;
        border: 2px solid #7e2020;
        border-radius: 0;
        background: var(--vp-rojo);
        color: white;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, .15);
        font-family: 'Special Elite', monospace;
        font-size: 11px;
        font-weight: bold;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    /* =====================================================
       MODAL DE PRODUCTO
    ===================================================== */

    .modal-disco {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 10px;
        overflow-y: auto;
        background: rgba(23, 21, 18, .94);
        -webkit-overflow-scrolling: touch;
    }

    .modal-box {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 560px;
        height: auto;
        max-height: calc(100dvh - 20px);
        margin: auto;
        padding: 17px 13px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #b99b65;
        border-radius: 0;
        background:
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 5px,
                rgba(255, 255, 255, .025) 6px
            ),
            #171512;
        box-shadow: 5px 5px 0 var(--vp-rojo);
        -webkit-overflow-scrolling: touch;
    }

    .modal-left,
    .modal-right {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    .modal-left {
        align-items: center;
    }

    .modal-left img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 280px;
        object-fit: contain;
        border-radius: 0;
        background: #0b0b0b;
    }

    #modalImg {
        width: 100%;
        max-height: 280px;
        object-fit: contain;
    }

    .modal-right {
        color: white;
        overflow-wrap: anywhere;
    }

    .modal-right h2 {
        margin: 0 0 8px;
        color: var(--vp-amarillo);
        font-family: 'Bowlby One SC', sans-serif;
        font-size: clamp(23px, 7vw, 31px);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .modal-desc {
        margin-bottom: 10px;
        color: #e1d8c9;
        font-size: 12px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

    .extra-box {
        padding: 10px;
        border: 1px solid rgba(244, 211, 94, .2);
        border-radius: 0;
        background: rgba(255, 255, 255, .05);
        color: #eee;
        font-size: 11px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

    .disco-modal {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        flex-shrink: 0;
    }

    .cerrar {
        position: sticky;
        top: 0;
        align-self: flex-end;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 39px;
        height: 39px;
        flex-shrink: 0;
        margin-bottom: -48px;
        border: 2px solid white;
        border-radius: 0;
        background: var(--vp-rojo);
        color: white;
        font-size: 23px;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
    }

    /* =====================================================
       MODAL DE CONFIRMACIÓN DE COMPRA
    ===================================================== */

    .confirm-box {
        position: fixed;
        inset: 0;
        z-index: 99999999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 15px;
        background: rgba(0, 0, 0, .8);
    }

    .confirm-card {
        width: 100%;
        max-width: 360px;
        max-height: calc(100dvh - 30px);
        padding: 23px 17px;
        overflow-y: auto;
        border: 2px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-papel-claro);
        color: var(--vp-negro);
        box-shadow: 5px 5px 0 var(--vp-rojo);
        text-align: center;
    }

    .confirm-card button {
        max-width: 100%;
        margin: 6px;
        padding: 11px 14px;
        border: 2px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-amarillo);
        color: var(--vp-negro);
        font-size: 12px;
        overflow-wrap: anywhere;
    }

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

    .modal-denuncia {
        position: fixed;
        inset: 0;
        z-index: 999999999;
        align-items: center;
        justify-content: center;
        padding: 12px;
        background: rgba(0, 0, 0, .82);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .modal-denuncia-box {
        width: 100%;
        max-width: 520px;
        max-height: calc(100dvh - 24px);
        padding: 23px 15px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 2px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-papel-claro);
        color: var(--vp-negro);
        box-shadow: 5px 5px 0 var(--vp-rojo);
        -webkit-overflow-scrolling: touch;
    }

    .modal-denuncia-box h2 {
        padding-right: 22px;
        color: var(--vp-rojo);
        font-family: 'Bowlby One SC', sans-serif;
        font-size: 21px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .denuncia-subtitulo {
        color: #655947;
        font-size: 11px;
        line-height: 1.7;
    }

    .denuncia-icono {
        border: 1px solid #d7c4a4;
        border-radius: 0;
        background: #f2e4cc;
    }

    .motivo-option {
        gap: 9px;
        padding: 11px 34px 11px 9px;
        border: 1px solid #d9cbb4;
        border-radius: 0;
        background: #f6eedf;
    }

    .motivo-icono {
        border-radius: 0;
        background: #eadcc4;
    }

    .motivo-texto {
        min-width: 0;
    }

    .motivo-texto strong {
        color: var(--vp-negro);
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .motivo-texto small {
        color: #655947;
        font-size: 10px;
        line-height: 1.5;
    }

    .motivo-check {
        border-radius: 0;
    }

    .motivo-option:has(input:checked) {
        border-color: var(--vp-rojo);
        background: #f8e5d9;
        box-shadow: inset 3px 0 0 var(--vp-rojo);
    }

    .motivo-option:has(input:checked) .motivo-texto strong {
        color: var(--vp-rojo);
    }

    .motivo-option:has(input:checked) .motivo-check {
        background: var(--vp-amarillo);
        border-color: var(--vp-negro);
    }

    .detalle-denuncia label {
        color: var(--vp-negro);
        font-size: 12px;
    }

    #demandaReason {
        width: 100%;
        min-height: 100px;
        padding: 12px;
        border: 1px solid #c9b99d;
        border-radius: 0;
        background: #fffdf8;
        color: var(--vp-negro);
        font-size: 13px;
        line-height: 1.6;
    }

    #demandaReason:focus {
        border-color: var(--vp-rojo);
        box-shadow: 0 0 0 2px rgba(198, 40, 40, .12);
    }

    .contador-denuncia {
        color: #766751;
    }

    .cerrar-denuncia {
        border: 1px solid var(--vp-negro);
        border-radius: 0;
        background: var(--vp-rojo);
        color: white;
    }

    .botones-denuncia {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .botones-denuncia button {
        width: 100%;
        min-height: 42px;
        padding: 11px;
        border: 2px solid var(--vp-negro) !important;
        border-radius: 0;
        font-family: 'Special Elite', monospace;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .btn-cancelar-denuncia {
        background: #e9d9b8;
        color: var(--vp-negro);
    }

    .btn-enviar-denuncia {
        background: var(--vp-rojo);
        color: white;
    }

    /* =====================================================
       TABLETS PEQUEÑAS Y CELULARES ESTRECHOS
    ===================================================== */

    @media (max-width: 390px) {

        .banner {
            height: 165px;
        }

        .barra-secundaria {
            top: 165px;
        }

        .perfil {
            padding-right: 11px;
            padding-left: 11px;
        }

        .foto-perfil {
            width: 104px;
            height: 104px;
        }

        .nombre-vendedor {
            padding: 12px;
            font-size: clamp(19px, 6vw, 24px);
        }

        .grid-sonido {
            gap: 22px 9px;
            padding-right: 10px;
            padding-left: 10px;
        }

        .card-periodico {
            padding: 6px;
        }

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

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

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

        .modal-box {
            padding: 13px 9px;
        }

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

    /* =====================================================
       ACCESIBILIDAD: MENOS ANIMACIÓN
    ===================================================== */

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            transition-duration: .01ms !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
        }
    }

}