/* =========================================================
   SONICOVA — ELEMENTOS EXTRA DEL INDEX
   Archivo: componentes/index_extra.css

   VENDEDORES:
   - Sin cinta, sin contenedor oscuro.
   - Solo carteles vacíos estilo SE BUSCA.
   - Movimiento horizontal continuo en bucle.
   - Diez carteles visibles de forma repetida si el HTML
     incluye diez originales y diez copias idénticas.

   MANUAL:
   - Tarjeta compacta estilo periódico.
   - Papel envejecido, tinta roja y negra.
   - Portada roja en móvil y azul en escritorio.

   Este archivo complementa index_mobile.css.
========================================================= */

:root {
    --extra-papel: #f4ead5;
    --extra-papel-claro: #fff9ed;
    --extra-tinta: #211c17;
    --extra-rojo: #c62828;
    --extra-borde: #8d7555;
    --extra-amarillo: #f4d35e;
}

.mejores-vendedores-section,
.manual-section,
.vendedores-cinta,
.vendedores-track,
.vendedor-item,
.manual-libro {
    box-sizing: border-box;
}

/* =========================================================
   SECCIÓN DE VENDEDORES
========================================================= */

.mejores-vendedores-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 8px auto 12px;
    padding: 0 35px;
    box-sizing: border-box;
}

.mejores-vendedores-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 25px;
}

.mejores-vendedores-titulo span {
    display: inline-block;
    padding: 10px 24px;
    color: var(--extra-tinta);
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 4px,
            rgba(75, 52, 27, .035) 4px 5px
        ),
        var(--extra-papel);
    border: 1px solid #b7a487;
    border-radius: 2px;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, .16);
    font-family: 'Special Elite', Georgia, serif;
    font-size: 17px;
    letter-spacing: 1px;
    text-align: center;
    transform: rotate(-1deg);
}

/* =========================================================
   CONTENEDOR TRANSPARENTE
   No se dibuja ninguna cinta ni fondo.
========================================================= */

.vendedores-cinta {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 175px;
    overflow: hidden;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Anulamos los adornos del antiguo contenedor. */

.vendedores-cinta::before,
.vendedores-cinta::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   PISTA ANIMADA
========================================================= */

.vendedores-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 23px;

    width: max-content;
    min-width: max-content;
    height: 100%;
    padding: 15px 8px;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    animation: sonicovaCarteles 36s linear infinite;
    will-change: transform;
}

/* Pausa al pasar el cursor, sin detener el diseño en móvil. */

@media (hover: hover) {
    .vendedores-cinta:hover .vendedores-track {
        animation-play-state: paused;
    }
}

/*
 IMPORTANTE PARA EL BUCLE:
 El HTML debe colocar diez carteles originales y después
 diez copias idénticas, consecutivas y en el mismo orden.
 El espacio entre grupos debe coincidir con el de las tarjetas.
*/

@keyframes sonicovaCarteles {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   CARTELES VACÍOS — SE BUSCA / VIEJO OESTE
========================================================= */

.vendedor-item {
    position: relative;
    isolation: isolate;

    display: flex;
    flex: 0 0 225px;
    align-items: center;
    gap: 12px;

    width: 225px;
    min-height: 132px;
    padding: 29px 11px 10px;

    overflow: hidden;
    color: #34251a;
    text-decoration: none;

    background:
        radial-gradient(
            ellipse at 15% 20%,
            rgba(128, 85, 38, .09),
            transparent 55%
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 4px,
            rgba(75, 52, 27, .04) 4px 5px
        ),
        linear-gradient(
            145deg,
            #fff8e8,
            #e9d8b5
        );

    border: 2px solid #6e5233;
    border-radius: 1px;

    box-shadow:
        3px 4px 0 rgba(0, 0, 0, .20),
        0 7px 12px rgba(0, 0, 0, .12);

    transform: rotate(-1.5deg);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

/* Cabecera impresa en tinta roja. */

.vendedor-item::before {
    content: "SE BUSCA";

    position: absolute;
    top: 5px;
    left: 4px;
    right: 4px;

    color: #9e2922;
    font-family: 'Bowlby One SC', Impact, sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(110, 30, 20, .10);
}

/* Sin cinta adhesiva sobre los carteles. */

.vendedor-item::after {
    content: none !important;
    display: none !important;
}

.vendedor-item:nth-child(even) {
    transform: rotate(1.7deg) translateY(5px);
}

.vendedor-item:nth-child(3n) {
    transform: rotate(-2.3deg) translateY(-3px);
}

.vendedor-item:hover {
    z-index: 4;
    transform: translateY(-5px) rotate(0deg) scale(1.025);

    box-shadow:
        4px 7px 0 rgba(0, 0, 0, .17),
        0 12px 18px rgba(0, 0, 0, .19);
}

/* =========================================================
   MARCO VACÍO PARA FOTO
========================================================= */

/*
 Si el HTML contiene una imagen, conserva su fotografía.
 Si la imagen está vacía, no muestra el icono roto.
 Si necesitas carteles totalmente vacíos, elimina la etiqueta
 img del HTML o deja su atributo src vacío.
*/

.vendedor-item img {
    position: relative;
    z-index: 1;

    display: block;
    flex: 0 0 66px;
    width: 66px;
    height: 72px;
    margin: 0;

    object-fit: cover;
    box-sizing: border-box;

    background:
        repeating-linear-gradient(
            135deg,
            #e7d4ad 0 5px,
            #f8edda 5px 10px
        );

    border: 2px solid #8b6c43;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .12);
}

.vendedor-item img[src=""],
.vendedor-item img:not([src]) {
    display: none !important;
}

/* =========================================================
   TEXTO DEL VENDEDOR
========================================================= */

.vendedor-info {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;

    margin-top: 0;
}

.vendedor-info strong {
    color: #34251a;
    font-family: 'Special Elite', Georgia, serif;
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.vendedor-info span {
    color: #6a5138;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* =========================================================
   CARTEL SIN FOTO: MARCO VACÍO DECORATIVO
========================================================= */

/*
 Si el vendedor todavía no tiene foto, el cartel sigue
 teniendo su espacio visual gracias al fondo del propio papel.
 No se inventan nombres, fotos ni información de vendedores.
*/


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .mejores-vendedores-section {
        margin-top: 50px;
        padding: 0 18px;
    }

    .mejores-vendedores-titulo span {
        padding: 9px 18px;
        font-size: 15px;
    }

    .vendedores-cinta {
        height: 155px;
    }

    .vendedores-track {
        gap: 17px;
        padding: 13px 7px;
        animation-duration: 30s;
    }

    .vendedor-item {
        flex-basis: 205px;
        width: 205px;
        min-height: 116px;
        padding: 26px 9px 9px;
        gap: 9px;
    }

    .vendedor-item::before {
        font-size: 15px;
    }

    .vendedor-item img {
        flex-basis: 57px;
        width: 57px;
        height: 62px;
    }

    .vendedor-info strong {
        font-size: 12px;
    }

    .vendedor-info span {
        font-size: 9px;
    }
}

/* =========================================================
   MÓVIL — PAPEL ENVEJECIDO Y TINTA ROJA
========================================================= */

@media (max-width: 600px) {
    .mejores-vendedores-section {
        margin-top: 38px;
        margin-bottom: 20px;
        padding: 0 12px;
    }

    .mejores-vendedores-titulo {
        margin-bottom: 19px;
    }

    .mejores-vendedores-titulo span {
        padding: 9px 15px;

        color: #211c17;
        background: #f4ead5;
        border-color: #b9a587;
        border-radius: 1px;

        font-size: 13px;
        letter-spacing: .7px;

        box-shadow: 3px 4px 0 rgba(0, 0, 0, .14);
    }

    /* Sin banda oscura: solo carteles sobre el fondo de la página. */

    .vendedores-cinta {
        height: 135px;
        overflow: hidden;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .vendedores-track {
        gap: 13px;
        padding: 12px 5px;
        animation-duration: 25s;
    }

    .vendedor-item {
        flex-basis: 184px;
        width: 184px;
        min-height: 105px;
        gap: 8px;
        padding: 25px 8px 8px;

        background:
            radial-gradient(
                ellipse at 15% 15%,
                rgba(128, 85, 38, .08),
                transparent 60%
            ),
            repeating-linear-gradient(
                0deg,
                transparent 0 4px,
                rgba(75, 52, 27, .035) 4px 5px
            ),
            linear-gradient(145deg, #fff9ed, #e9d8b5);

        border: 2px solid #6e5233;
        border-radius: 1px;

        box-shadow:
            2px 3px 0 rgba(0, 0, 0, .16),
            0 5px 9px rgba(0, 0, 0, .10);
    }

    .vendedor-item::before {
        top: 5px;
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .vendedor-item:nth-child(even) {
        transform: rotate(1.5deg) translateY(3px);
    }

    .vendedor-item:nth-child(3n) {
        transform: rotate(-2deg) translateY(-2px);
    }

    .vendedor-item img {
        flex-basis: 48px;
        width: 48px;
        height: 53px;
    }

    .vendedor-info {
        gap: 4px;
    }

    .vendedor-info strong {
        font-size: 11px;
        line-height: 1.2;
    }

    .vendedor-info span {
        font-size: 9px;
        line-height: 1.3;
    }

    /* MANUAL: MÁS CORTO, COMO UN RECORTE DE PERIÓDICO. */

    .manual-section {
        padding: 18px 12px 38px;
    }

    .manual-libro {
        width: fit-content;
        max-width: 100%;
        gap: 12px;
        padding: 11px 12px;

        background:
            radial-gradient(
                ellipse at 10% 15%,
                rgba(120, 78, 35, .07),
                transparent 60%
            ),
            repeating-linear-gradient(
                0deg,
                transparent 0 4px,
                rgba(75, 52, 27, .035) 4px 5px
            ),
            #f4ead5;

        border: 1px solid #b9a587;
        border-radius: 1px;

        box-shadow:
            3px 4px 0 rgba(0, 0, 0, .15),
            0 7px 12px rgba(0, 0, 0, .10);
    }

    .manual-libro::before {
        top: -5px;
        left: 61%;
        width: 38px;
        height: 11px;
        background: rgba(198, 40, 40, .48);
        transform: rotate(-4deg);
    }

    .manual-book {
        flex-basis: 53px;
        width: 53px;
        height: 70px;
    }

    /* Portada roja estilo cartel editorial. */

    .manual-cover {
        background: linear-gradient(145deg, #d83232, #97191d);
        border-left: 4px solid #681116;
        border-radius: 1px 4px 4px 1px;
        box-shadow: 2px 3px 6px rgba(0, 0, 0, .18);
    }

    .manual-pages {
        top: 3px;
        right: -4px;
        width: 48px;
        height: 64px;
        background: #fff9ed;
    }

    .manual-book-icon {
        font-size: 18px;
    }

    .manual-book-title {
        font-size: 8px;
    }

    .manual-book-subtitle {
        font-size: 4px;
    }

    .manual-texto {
        gap: 4px;
        max-width: 220px;
    }

    .manual-texto strong {
        color: #211c17;
        font-size: 14px;
        line-height: 1.2;
    }

    .manual-texto span {
        color: #65513a;
        font-size: 9px;
        line-height: 1.4;
    }
}

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

@media (max-width: 380px) {
    .mejores-vendedores-section {
        padding-right: 8px;
        padding-left: 8px;
    }

    .vendedores-cinta {
        height: 125px;
    }

    .vendedores-track {
        gap: 10px;
        padding-right: 4px;
        padding-left: 4px;
        animation-duration: 23s;
    }

    .vendedor-item {
        flex-basis: 170px;
        width: 170px;
        min-height: 98px;
        gap: 7px;
        padding: 24px 7px 7px;
    }

    .vendedor-item::before {
        font-size: 13px;
    }

    .vendedor-item img {
        flex-basis: 43px;
        width: 43px;
        height: 48px;
    }

    .vendedor-info strong {
        font-size: 10px;
    }

    .vendedor-info span {
        font-size: 8px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .vendedores-track {
        animation: none !important;
        will-change: auto;
    }

    .vendedor-item,
    .manual-libro,
    .manual-cover {
        transition: none !important;
    }

    .vendedor-item:hover,
    .manual-libro:hover {
        transform: none;
    }
}

/* =========================================================
   SONICOVA — FORZAR VISIBILIDAD DE LOS CARTELES VACÍOS
   Pegar AL FINAL de componentes/index_extra.css
========================================================= */

.vendedores-cinta {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 205px !important;
    overflow: hidden !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.vendedores-track {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;

    width: max-content !important;
    min-width: max-content !important;
    height: 100% !important;

    background: transparent !important;
    animation: sonicovaCarteles 36s linear infinite !important;
}

.vendedores-track .vendedor-item {
    display: flex !important;
    position: relative !important;
    flex: 0 0 210px !important;

    width: 210px !important;
    min-width: 210px !important;
    height: 155px !important;
    min-height: 155px !important;

    padding: 35px 10px 10px !important;
    overflow: hidden !important;

    background-color: #f4ead5 !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0 5px,
            rgba(80, 55, 30, .06) 5px 6px
        ),
        linear-gradient(135deg, #fff9ed, #e8d5b1) !important;

    border: 3px solid #6e5233 !important;
    border-radius: 2px !important;

    box-shadow:
        4px 5px 0 rgba(40, 28, 16, .25),
        inset 0 0 0 3px #fff9ed,
        inset 0 0 0 4px #9a7950 !important;

    color: #211c17 !important;
    text-decoration: none !important;
}

/* Encabezado visible en todos los carteles. */
.vendedores-track .vendedor-item::before {
    content: "SE BUSCA" !important;
    display: block !important;

    position: absolute !important;
    top: 7px !important;
    left: 5px !important;
    right: 5px !important;

    color: #b52222 !important;
    font-family: "Bowlby One SC", Impact, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
}

/* Zona vacía para la futura foto o contenido del vendedor. */
.vendedores-track .vendedor-item:not(:has(img[src]:not([src=""])))::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    top: 37px !important;
    bottom: 10px !important;
    left: 12px !important;
    right: 12px !important;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 9px,
            rgba(110, 82, 51, .09) 9px 10px
        ),
        rgba(255, 249, 237, .45) !important;

    border: 1px dashed #a58a65 !important;
    pointer-events: none !important;
}

/* Si el HTML ya contiene datos, se mantienen dentro del cartel. */
.vendedores-track .vendedor-item img {
    z-index: 1 !important;
    width: 58px !important;
    height: 70px !important;
    flex: 0 0 58px !important;
    object-fit: cover !important;
}

.vendedores-track .vendedor-item .vendedor-info {
    z-index: 2 !important;
    min-width: 0 !important;
}

/* Móvil */
@media (max-width: 600px) {
    .vendedores-cinta {
        height: 175px !important;
        min-height: 175px !important;
    }

    .vendedores-track {
        gap: 14px !important;
        animation-duration: 28s !important;
    }

    .vendedores-track .vendedor-item {
        flex-basis: 175px !important;
        width: 175px !important;
        min-width: 175px !important;
        height: 130px !important;
        min-height: 130px !important;
        padding: 31px 8px 8px !important;
    }

    .vendedores-track .vendedor-item::before {
        top: 6px !important;
        font-size: 16px !important;
        letter-spacing: 1.5px !important;
    }

    .vendedores-track .vendedor-item:not(:has(img[src]:not([src=""])))::after {
        top: 32px !important;
        bottom: 8px !important;
        left: 9px !important;
        right: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vendedores-track {
        animation: none !important;
    }
}

/* SONICOVA — CARTELES VERTICALES, ALTOS Y SEPARADOS */

.vendedores-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 22px !important;
    width: max-content !important;
    animation: sonicovaCartelesIndividuales 85s linear infinite !important;
}

.vendedores-grupo {
    display: contents !important;
}

.vendedores-track .vendedor-item {
    display: block !important;
    position: relative !important;

    /* Mantener el ancho original */
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;

    /* Aumentar la altura */
    height: 210px !important;
    min-height: 210px !important;

    margin: 0 !important;
    padding: 40px 10px 10px !important;
}

/* Encabezado SE BUSCA */
.vendedores-track .vendedor-item::before {
    top: 8px !important;
    left: 5px !important;
    right: 5px !important;
    font-size: 18px !important;
}

/* Inclinación irregular de los carteles */
.vendedores-track .vendedor-item:nth-child(even),
.vendedores-track .vendedor-item:nth-child(3n) {
    transform: rotate(-1deg) !important;
}

/* Desplazamiento continuo y más lento */
@keyframes sonicovaCartelesIndividuales {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* MÓVIL */
@media (max-width: 600px) {
    .vendedores-track {
        gap: 14px !important;
        animation-duration: 100s !important;
    }

    .vendedores-track .vendedor-item {
        flex-basis: 155px !important;
        width: 155px !important;
        min-width: 155px !important;

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

        padding: 35px 8px 8px !important;
    }

    .vendedores-track .vendedor-item::before {
        font-size: 15px !important;
    }
}



    /* =========================================
       TÍTULO SONICOVA — RECORTE DE PERIÓDICO
    ========================================= */

    body .main-layout > h1.bienvenidos-sonicova {
        position: relative;
        isolation: isolate;

        display: block;
        width: fit-content;
        max-width: calc(100% - 70px);

        margin: 78px auto 65px;
        padding: 28px 42px 23px;

        color: #211c17;

        font-family: 'Bowlby One SC', Impact, sans-serif;
        font-size: clamp(34px, 4vw, 58px);
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: 1px;

        text-align: center;
        text-transform: uppercase;
        overflow-wrap: anywhere;

        text-shadow:
            2px 2px 0 rgba(169, 33, 38, .20);

        filter:
            drop-shadow(5px 7px 0 rgba(0, 0, 0, .18))
            drop-shadow(0 9px 12px rgba(0, 0, 0, .20));

        transform: rotate(-1deg);
    }

    /* Papel envejecido detrás del título */
    body .main-layout > h1.bienvenidos-sonicova::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;

        background:
            radial-gradient(
                ellipse at 12% 18%,
                rgba(135, 104, 61, .12),
                transparent 35%
            ),
            radial-gradient(
                ellipse at 87% 80%,
                rgba(135, 104, 61, .12),
                transparent 38%
            ),
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 7px,
                rgba(76, 61, 43, .035) 8px
            ),
            linear-gradient(
                135deg,
                #fffdf6,
                #eee2ca
            );

        border: 1px solid #cfc0a5;
        outline: 1px dashed rgba(119, 37, 34, .6);
        outline-offset: -7px;

        box-shadow:
            0 0 0 4px #d8cbb5,
            5px 7px 0 #29251f;
        clip-path: polygon(
            1% 3%,
            97% 0,
            100% 8%,
            98% 91%,
            93% 100%,
            6% 97%,
            0 90%,
            2% 12%
        );

        transform: rotate(1.5deg);
    }

    /* Cinta adhesiva sobre el título */
    body .main-layout > h1.bienvenidos-sonicova::after {
        content: "";
        position: absolute;
        z-index: 2;

        top: -12px;
        left: 50%;

        width: 100px;
        height: 25px;

        background: rgba(244, 211, 94, .76);
        border: 1px solid rgba(190, 177, 152, .65);
        box-shadow: 1px 3px 4px rgba(0, 0, 0, .15);

        pointer-events: none;
        transform: translateX(-50%) rotate(-4deg);
    }

/* =========================================
   BARRA LATERAL — SOLO SE OCULTA ELLA
   El contenido NO se mueve
========================================= */

body.sonicova-sidebar-oculta .left-buttons {
    transform: translateX(-110%);
    visibility: hidden;
    pointer-events: none;
}


/* Escritorios medianos: botón junto a la barra */
@media (min-width: 901px) and (max-width: 1200px) {
    #botonCajaMusical {
        left: 208px;
    }

    body.sonicova-sidebar-oculta #botonCajaMusical {
        left: 16px;
    }
}

/* En teléfonos manda index_mobile.css */
@media (max-width: 900px) {
    #botonCajaMusical {
        display: none !important;
    }

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

/* =========================================================
   SONICOVA — CENTRADO REAL EN ESCRITORIO
   La barra lateral no reduce el ancho de centrado.
========================================================= */

@media (min-width: 901px) {

    .main-layout {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-layout > h1.bienvenidos-sonicova {
        left: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .main-layout .mejores-vendedores-section {
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .main-layout .manual-section {
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .main-layout .manual-libro {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   SONICOVA — RETRATO Y FICHA DENTRO DEL CARTEL
   Solo escritorio. Conserva el diseño exterior existente.
========================================================= */

@media (min-width: 901px) {

    /* FOTO CENTRADA, GRANDE Y BIEN ENCUADRADA */
    .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;

        /* Conserva el marco antiguo del retrato */
        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;
    }

    /* TEXTO COLOCADO COMO PARTE DEL CARTEL */
    .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: 0 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    /* Nombre del vendedor: misma tinta y tipografía del cartel */
    .vendedores-track .vendedor-item .vendedor-info strong {
        display: block !important;
        width: 100% !important;

        margin: 0 0 6px !important;
        padding: 0 !important;

        color: #34251a !important;
        font-family: 'Special Elite', Georgia, serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    /* Datos existentes del perfil */
    .vendedores-track .vendedor-item .vendedor-info span {
        display: block !important;
        width: 100% !important;

        margin: 0 0 4px !important;
        padding: 0 !important;

        color: #6a5138 !important;
        font-family: Montserrat, Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;

        text-align: center !important;
        overflow-wrap: anywhere !important;
    }
/* AGUJERO DE BALA CERCA DEL RETRATO */
.vendedores-track .vendedor-item:has(img[src]:not([src=""]))::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;

    /* Pegado a la esquina superior derecha de la foto */
    top: 48px !important;
    right: 38px !important;

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

    /* Centro oscuro, papel roto y bordes chamuscados */
    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;

    /* Pequeñas grietas irregulares alrededor del impacto */
    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;
}
}


/* =========================================================
   SONICOVA — FICHA DE EXPEDIENTE DEL VENDEDOR
   Solo mejora el diseño del nombre y la descripción.
   No modifica el cartel, la foto ni el agujero de bala.
========================================================= */

@media (min-width: 901px) {

    /* Área de información: ficha antigua centrada */
    .vendedores-track .vendedor-item .vendedor-info {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 3px 0 !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: sello principal de la ficha */
    .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;
    }

    /* Descripción y datos: anotaciones de expediente */
    .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;
    }

    /* Pequeña marca roja al lado de cada anotación */
    .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;
    }
}