/*==================================================
MENU PRINCIPAL
==================================================*/

.menu-principal{

    background:#fff572;

    min-height:75px;

}

.navbar-brand{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo{

    width:auto;

    height:48px;

    margin-right:10px;

}

.nombre-logo{

    font-size:26px;

    font-weight:700;

    color:#222;

    white-space:nowrap;

}

.navbar-nav .nav-link{

    color:#222 !important;

    font-weight:600;

    padding:10px 15px !important;

    border-radius:8px;

    transition:.25s;

}

.navbar-nav .nav-link:hover{

    background:#fae46b;

}

.navbar-nav .active{

    background:#fae46b;

    font-weight:bold;

}

.form-control{

    border-radius:30px;

}

.btn-success{

    border-radius:30px;

}

body{

    padding-top:90px;

}


/* =====================================================
   HERO PRINCIPAL
   ===================================================== */

.hero {

    position: relative;

    padding: 90px 0 80px;

    background: #fff;

    overflow: hidden;

}



/* =====================================================
   ETIQUETA DEL HERO
   ===================================================== */

.hero-etiqueta {
    display: inline-block;

    color: #d4a900;

    font-size: 1.10rem;

    font-weight: 700;

    text-decoration: underline;
    text-decoration-color: #FFD400;
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;

    letter-spacing: .3px;
}


/* =====================================================
   TÍTULO
   ===================================================== */

.hero-titulo {

    max-width: 760px;

    font-size: clamp(
        2.2rem,
        4vw,
        3.7rem
    );

    line-height: 1.12;

    letter-spacing: -1px;

    color: #252525;

}


/* =====================================================
   DESCRIPCIÓN
   ===================================================== */

.hero-descripcion {

    max-width: 680px;

    color: #666;

    font-size: 1.15rem;

    line-height: 1.7;

}


/* =====================================================
   BOTÓN
   ===================================================== */

.hero-boton {

    border: 0;

    font-weight: 700;

    border-radius: 8px;

    box-shadow:
        0 5px 15px rgba(
            0,
            0,
            0,
            .12
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.hero-boton:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(
            0,
            0,
            0,
            .16
        );

}


/* =====================================================
   HERO ESTADÍSTICAS 
   ===================================================== */

.hero-estadisticas {
    max-width: 680px;
    text-align: center;
}

.hero-estadistica {
    padding: 0 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-estadistica-icono {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 8px;

    color: #252525;
    background: #FFD400;

    border-radius: 8px;
}

.hero-estadistica strong {
    display: block;

    font-size: 1.5rem;
    font-weight: 800;

    color: #252525;

    text-align: center;
}

.hero-estadistica span {
    display: block;

    margin-top: 2px;

    color: #777;

    font-size: .82rem;
    line-height: 1.35;

    text-align: center;
}

/* =====================================================
   IMAGEN HERO
   ===================================================== */

.hero-imagen {

    position: relative;

    display: inline-block;

    max-width: 500px;

}


.hero-imagen-principal {

    display: block;

    width: 100%;

    border-radius: 18px;

    box-shadow:
        0 20px 45px rgba(
            0,
            0,
            0,
            .16
        );

}


/* =====================================================
   LOGO ACCESS
   ===================================================== */

.hero-access-logo {

    position: absolute;

    right: -20px;

    bottom: -25px;

    width: 105px;

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

    background: #fff;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(
            0,
            0,
            0,
            .18
        );

}


.hero-access-logo img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {

    .hero {

        padding: 65px 0 60px;

    }


    .hero-titulo {

        font-size: 2.5rem;

    }


    .hero-imagen {

        max-width: 450px;

    }

}


@media (max-width: 575.98px) {

    .hero {

        padding: 45px 0 50px;

    }


    .hero-titulo {

        font-size: 2.05rem;

        letter-spacing: -.5px;

    }


    .hero-descripcion {

        font-size: 1rem;

        line-height: 1.6;

    }


    .hero-estadisticas {

        margin-top: 35px !important;

    }


    .hero-estadistica-icono {

        width: 32px;

        height: 32px;

        font-size: .85rem;

    }


    .hero-estadistica strong {

        font-size: 1.2rem;

    }


    .hero-estadistica span {

        font-size: .72rem;

    }


    .hero-imagen {

        max-width: 100%;

    }


    .hero-access-logo {

        width: 75px;

        height: 75px;

        right: -5px;

        bottom: -15px;

        padding: 10px;

        border-radius: 12px;

    }

}


/*==================================================
ESTADISTICAS DEL HERO
==================================================*/

.hero-estadisticas{
    margin-top:40px;
}

.hero-estadistica{
    text-align:center;
}

.hero-estadistica strong{
    display:block;
    color:#FFC107;
    font-size:32px;
    font-weight:800;
    line-height:1.1;
}

.hero-estadistica span{
    display:block;
    margin-top:6px;
    color:#222;
    font-size:15px;
    font-weight:600;
}
 
/*==================================================
PRODUCTOS DESTACADOS
==================================================*/

.productos-destacados{

    background:#f8f9fa;

}

.productos-destacados h2{

    color:#222;

    font-size:2rem;

}

.productos-destacados .badge{

    font-weight:600;

}


/* TARJETA */

.producto{

    border:0;

    border-radius:16px;

    overflow:hidden;

    background:#fff;

    transition:transform .25s ease,
               box-shadow .25s ease;

}

.producto:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.12)!important;

}


/* IMAGEN */

.producto-imagen{

    width:100%;

    height:210px;

    object-fit:cover;

    background:#eeeeee;

}


/* CUANDO NO HAY IMAGEN */

.producto-imagen-placeholder{

    width:100%;

    height:210px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eeeeee;

    color:#999;

    font-size:16px;

    font-weight:600;

}


/* CONTENIDO */

.producto .card-body{

    padding:25px;

}

.producto .card-title{

    font-size:20px;

    font-weight:700;

    color:#222;

    margin-bottom:12px;

}

.producto .card-text{

    font-size:14px;

    line-height:1.6;

}


/* PRECIO */

.precio-producto{

    font-size:22px;

    font-weight:800;

    color:#FFC107;

}


/* BOTON */

.producto .btn{

    border-radius:25px;

    font-weight:600;

    padding:10px 20px;

}


/* BOTON VER TODOS */

.productos-destacados > .container > .text-center:last-child .btn{

    border-radius:30px;

    padding:12px 30px;

}


/* =====================================================
   SECCIÓN VENTAJAS
   ===================================================== */

.ventajas {

    background: #f3f4f6;

    color: #252525;

}


/* =====================================================
   ENCABEZADO
   ===================================================== */

.ventajas-titulo {

    font-size: 2.2rem;

    color: #252525;

}


.ventajas-subtitulo {

    max-width: 650px;

    margin-left: auto;

    margin-right: auto;

}


/* =====================================================
   TARJETAS DE VENTAJAS
   ===================================================== */

.ventaja {

    padding: 30px 22px;

    background: #fafafa;

    border: 1px solid #e4e5e7;

    border-radius: 14px;

    box-shadow:
        0 4px 15px rgba(
            0,
            0,
            0,
            .04
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.ventaja:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(
            0,
            0,
            0,
            .08
        );

}


/* =====================================================
   ICONOS
   ===================================================== */

.ventaja-icono {

    width: 58px;

    height: 58px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFD400;

    color: #252525;

    border-radius: 12px;

    font-size: 1.35rem;

}


.ventaja h3 {

    margin-bottom: 12px;

    font-size: 1.15rem;

    font-weight: 700;

}


.ventaja p {

    margin-bottom: 0;

    color: #666;

    font-size: .92rem;

    line-height: 1.65;

}


/* =====================================================
   DESARROLLO A MEDIDA
   ===================================================== */

.proyecto-personalizado {

    padding: 35px 40px;

    background: #fff;

    border: 1px solid #e1e2e4;

    border-left: 5px solid #FFD400;

    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(
            0,
            0,
            0,
            .05
        );

}


.proyecto-icono {

    width: 75px;

    height: 75px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFD400;

    color: #252525;

    border-radius: 16px;

    font-size: 2rem;

}


.proyecto-personalizado h2 {

    color: #252525;

    font-size: 1.65rem;

}


/* =====================================================
   SEPARADOR TESTIMONIOS
   ===================================================== */

.testimonios-separador {

    height: 1px;

    background: #dfe1e4;

    margin: 70px 0 55px;

}


/* =====================================================
   TESTIMONIOS
   ===================================================== */

.testimonios-subtitulo {

    max-width: 600px;

}


/* TARJETA */

.testimonio-card {

    position: relative;

    padding: 28px;

    background: #fff;

    border: 1px solid #e1e2e4;

    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(
            0,
            0,
            0,
            .05
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.testimonio-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(
            0,
            0,
            0,
            .09
        );

}


/* =====================================================
   CABECERA TESTIMONIO
   ===================================================== */

.testimonio-cabecera {

    display: flex;

    align-items: center;

    gap: 14px;

}


.testimonio-avatar {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFD400;

    color: #252525;

    border-radius: 50%;

    font-size: .9rem;

    font-weight: 800;

}


.testimonio-nombre {

    color: #252525;

    font-size: 1rem;

    font-weight: 700;

}


.testimonio-pais {

    margin-top: 3px;

    color: #777;

    font-size: .82rem;

}


/* =====================================================
   ESTRELLAS
   ===================================================== */

.testimonio-estrellas {

    margin-top: 20px;

    color: #e0b600;

    font-size: 1rem;

    letter-spacing: 2px;

}


/* =====================================================
   TEXTO
   ===================================================== */

.testimonio-texto {

    margin: 16px 0 0;

    color: #555;

    font-size: .96rem;

    line-height: 1.7;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {

    .proyecto-personalizado {

        padding: 30px;

    }

}


@media (max-width: 575.98px) {

    .ventajas {

        padding-top: 45px !important;

        padding-bottom: 45px !important;

    }


    .ventajas-titulo {

        font-size: 1.8rem;

    }


    .ventaja {

        padding: 25px 20px;

    }


    .proyecto-personalizado {

        padding: 25px 20px;

        text-align: center;

    }


    .proyecto-personalizado h2 {

        font-size: 1.4rem;

    }


    .testimonios-separador {

        margin: 50px 0 40px;

    }


    .testimonio-card {

        padding: 22px;

    }

}


/*==================================================
BARRA LATERAL DE CATEGORÍAS
==================================================*/

.sidebar-categorias{
    position:sticky;
    top:90px;
    z-index:10;
}

.sidebar-categorias .card{
    border:0;
    border-radius:12px;
    overflow:hidden;
}

.sidebar-categorias .card-header{
    font-weight:700;
    padding:14px 18px;
}

.sidebar-categorias .list-group-item{
    border-left:0;
    border-right:0;
    padding:12px 18px;
}

.sidebar-categorias .list-group-item.active{
    background:#FFC107;
    border-color:#FFC107;
    color:#222;
    font-weight:700;
}

@media (max-width:991px){

    .sidebar-categorias{
        position:static;
        margin-bottom:25px;
    }

}

/*==================================================
Colores de referencia 
==================================================*/
.referencia-producto{

    font-size:16px;

    color:#666;

}

.referencia-producto span{

    font-weight:600;

}

.referencia-producto strong{

    color:#fd0d0d !important;

    font-size:22px;

    font-weight:600;

    margin-left:5px;

}


/*==================================================*
* FOOTER A ANCHO COMPLETO
*==================================================*/

footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}


/*==================================================*
* IMAGEN PRINCIPAL DEL HERO
*==================================================*/

.hero-imagen{
    max-width:520px;
    margin:0 auto;
    padding:12px;
    background:#fff;
    border-radius:20px;
    border:1px solid #e5e5e5;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.hero-imagen img{
    width:100%;
    height:360px;
    object-fit:contain;
    display:block;
    border-radius:12px;
}


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

@media (max-width:991px){

    .hero-imagen{
        max-width:600px;
    }

    .hero-imagen img{
        height:380px;
    }

}


/*==================================================*
* CELULAR
*==================================================*/

@media (max-width:576px){

    .hero-imagen{
        padding:8px;
        border-radius:15px;
    }

    .hero-imagen img{
        height:240px;
    }

}


/* ==================================================
   FOOTER APLICATIVOSOFFICE
   ================================================== */

footer.footer-principal {
    background-color: #212529 !important;
    color: #ffffff !important;
    margin-top: 60px;
    padding: 45px 0 0;
    width: 100%;
}


/* TITULO */

footer.footer-principal .footer-titulo {
    color: #ffffff !important;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
}


/* SUBTITULOS */

footer.footer-principal .footer-subtitulo {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 15px;
}


/* TEXTO */

footer.footer-principal .footer-texto {
    color: #adb5bd !important;
    font-size: 14px;
    line-height: 1.6;
}


/* REDES */

footer.footer-principal .footer-redes {
    display: flex;
    justify-content: center;
    gap: 10px;
}


footer.footer-principal .footer-red {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background-color: #343a40 !important;
    color: #ffffff !important;

    text-decoration: none;

    transition: all .2s ease;
}


footer.footer-principal .footer-red:hover {
    background-color: #ffc107 !important;
    color: #212529 !important;
    transform: translateY(-3px);
}


/* CONTACTO */

footer.footer-principal .footer-enlace {
    color: #adb5bd !important;
    text-decoration: none;
    font-size: 14px;
    line-height: 2;
}


footer.footer-principal .footer-enlace:hover {
    color: #ffc107 !important;
}


/* COPYRIGHT */

footer.footer-principal .footer-copy {
    margin-top: 35px;
    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,.10);

    text-align: center;

    color: #adb5bd !important;

    font-size: 13px;
}


/* MOVIL */

@media (max-width: 767px) {

    footer.footer-principal {
        padding-top: 35px;
    }

    footer.footer-principal .footer-copy {
        font-size: 12px;
    }

}


/* ==================================================
   HERO
   ================================================== */

.hero-imagen{
    position:relative;
}


/* ==================================================
   LOGO ACCESS
   ================================================== */

.hero-access-logo{

    position:absolute;

    bottom:-15px;
    right:-15px;

    width:90px;
    height:90px;

    background:#fff;

    border-radius:18px;

    padding:10px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    border:1px solid #e5e5e5;

}


.hero-access-logo img{

    width:100%;
    height:100%;

    object-fit:contain;

}


/* ==================================================
   ICONO PROYECTOS PERSONALIZADOS
   ================================================== */

.proyecto-icono{
    width:90px;
    height:90px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:20px;

    background:#fff3cd;

    color:#212529;

    font-size:42px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);
}


/* =====================================================
   TESTIMONIOS
   ===================================================== */

.testimonios {
    background: #f7f7f7;
}


/* Etiqueta */

.testimonios-etiqueta {

    display: inline-block;

    margin-bottom: 10px;

    color: #d4a900;

    font-size: .9rem;

    font-weight: 700;

    text-decoration: underline;

    text-decoration-color: #FFD400;

    text-decoration-thickness: 3px;

    text-underline-offset: 6px;

}


/* Título */

.testimonios-titulo {

    margin-bottom: 12px;

    color: #252525;

    font-size: 2.2rem;

    font-weight: 700;

}


/* Descripción */

.testimonios-subtitulo {

    max-width: 600px;

    font-size: 1rem;

}


/* =====================================================
   TARJETA
   ===================================================== */

.testimonio-card {

    position: relative;

    padding: 28px;

    background: #fff;

    border: 1px solid #e9e9e9;

    border-radius: 14px;

    box-shadow:
        0 5px 20px rgba(
            0,
            0,
            0,
            .05
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.testimonio-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(
            0,
            0,
            0,
            .10
        );

}


/* =====================================================
   CABECERA
   ===================================================== */

.testimonio-cabecera {

    display: flex;

    align-items: center;

    gap: 14px;

}


/* Avatar */

.testimonio-avatar {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFD400;

    color: #252525;

    border-radius: 50%;

    font-size: .9rem;

    font-weight: 800;

}


/* Nombre */

.testimonio-nombre {

    color: #252525;

    font-size: 1rem;

    font-weight: 700;

}


/* País */

.testimonio-pais {

    margin-top: 3px;

    color: #777;

    font-size: .82rem;

}


/* =====================================================
   ESTRELLAS
   ===================================================== */

.testimonio-estrellas {

    margin-top: 20px;

    color: #FFD400;

    font-size: 1.05rem;

    letter-spacing: 2px;

}


/* =====================================================
   COMENTARIO
   ===================================================== */

.testimonio-texto {

    margin: 16px 0 0;

    color: #555;

    font-size: .98rem;

    line-height: 1.7;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 575.98px) {

    .testimonios {

        padding-top: 45px !important;

        padding-bottom: 45px !important;

    }


    .testimonios-titulo {

        font-size: 1.8rem;

    }


    .testimonio-card {

        padding: 22px;

    }

}


/* =====================================================
   BENEFICIOS DE COMPRA
   ===================================================== */

.beneficios-compra {

    background: #f3f4f6;

    padding: 25px 0 10px;

}


.beneficios-compra-box {

    background: #252525;

    border-radius: 16px;

    padding: 22px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.10);

}


.beneficio-compra {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

}


.beneficio-compra-icono {

    width: 48px;

    height: 48px;

    min-width: 48px;

    border-radius: 50%;

    background: #FFD400;

    color: #252525;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.15rem;

}


.beneficio-compra strong {

    display: block;

    color: #fff;

    font-size: .98rem;

    margin-bottom: 3px;

}


.beneficio-compra span {

    display: block;

    color: #cfcfcf;

    font-size: .78rem;

    line-height: 1.4;

}


/* =====================================================
   SEPARADORES
   ===================================================== */

.beneficio-compra + .beneficio-compra {

    border-left: 1px solid #444;

    padding-left: 25px;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {

    .beneficios-compra-box {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

    }


    .beneficio-compra + .beneficio-compra {

        border-left: 0;

        border-top: 1px solid #444;

        padding-left: 0;

        padding-top: 18px;

    }

}


@media (max-width: 575.98px) {

    .beneficios-compra {

        padding: 15px 0 5px;

    }


    .beneficios-compra-box {

        padding: 20px;

        border-radius: 14px;

    }


    .beneficio-compra-icono {

        width: 44px;

        height: 44px;

        min-width: 44px;

    }


    .beneficio-compra strong {

        font-size: .92rem;

    }


    .beneficio-compra span {

        font-size: .75rem;

    }

}

/* =====================================================
   Fin BENEFICIOS DE COMPRA
   ===================================================== */

   /* =====================================================
   TITULO PRINCIPAL HERO
   ===================================================== */

.hero-titulo {

    font-size: 2.45rem;

    line-height: 1.18;

}


/* =====================================================
   IMAGEN PRINCIPAL HERO
   ===================================================== */

.hero-imagen {

    position: relative;

    max-width: 560px;

    margin: 0 auto;

}


.hero-imagen > img {

    width: 100%;

    max-width: 560px;

    height: auto;

    display: block;

    margin: 0 auto;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {

    .hero-titulo {

        font-size: 2.15rem;

    }

}


@media (max-width: 575.98px) {

    .hero-titulo {

        font-size: 1.75rem;

        line-height: 1.2;

    }


    .hero-imagen {

        max-width: 450px;

    }

}


/* =====================================================
   APLICACIONES MÁS VENDIDAS
   ===================================================== */

.mas-vendidos {

    background: #f3f4f6;

}


.mas-vendidos-titulo {

    font-size: 2rem;

}


.mas-vendidos-lista {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    max-width: 1000px;

    margin: 0 auto;

}


.mas-vendido-item {

    background: #fff;

    border: 1px solid #e5e5e5;

    border-radius: 12px;

    min-height: 62px;

    display: flex;

    align-items: center;

    padding: 10px 18px;

    gap: 14px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.mas-vendido-item:hover {

    transform: translateY(-2px);

    border-color: #FFD400;

    box-shadow:
        0 7px 20px rgba(0,0,0,.08);

}



/* =====================================================
   ICONOS
   ===================================================== */

.mas-vendido-icono {

    width: 32px;

    min-width: 32px;

    text-align: center;

    color: #c7c7c7;

}


.mas-vendido-top .mas-vendido-icono {

    color: #e1b800;

}


.mas-vendido-item:first-child {

    box-shadow:
        0 8px 24px rgba(255,212,0,.18);

}


.mas-vendido-item:first-child
.mas-vendido-icono {

    color: #d5a900;

    font-size: 1.15rem;

}



/* =====================================================
   NOMBRE DEL PRODUCTO
   ===================================================== */

.mas-vendido-nombre {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex: 1;

    min-width: 0;

    font-size: .98rem;

    font-weight: 600;

    color: #292929;

    line-height: 1.3;

    text-decoration: none;

    transition:
        color .2s ease;

}


.mas-vendido-nombre:hover {

    color: #b08b00;

    text-decoration: none;

}


/* =====================================================
   FLECHA
   ===================================================== */

.mas-vendido-flecha {

    font-size: .75rem;

    margin-left: 10px;

    color: #c7c7c7;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        color .2s ease;

}


.mas-vendido-nombre:hover .mas-vendido-flecha {

    opacity: 1;

    transform: translateX(0);

    color: #d2aa00;

}


/* =====================================================
   PRIMEROS 3
   ===================================================== */

.mas-vendido-top .mas-vendido-nombre {

    color: #252525;

}


.mas-vendido-top .mas-vendido-nombre:hover {

    color: #a98200;

}



/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 767.98px) {

    .mas-vendidos-lista {

        grid-template-columns: 1fr;

    }


    .mas-vendidos-titulo {

        font-size: 1.65rem;

    }


    .mas-vendido-item {

        min-height: 58px;

    }

}

/* =====================================================
   CLIENTES INTERNACIONALES
   ===================================================== */

.paises-clientes {

    background: #f3f4f6;

}


/* =====================================================
   CUADRO PRINCIPAL
   ===================================================== */

.paises-clientes-box {

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 20px;

    padding: 40px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.06);

}


/* =====================================================
   RESUMEN
   ===================================================== */

.paises-clientes-resumen {

    text-align: center;

    padding: 10px;

}


.paises-clientes-numero {

    font-size: 4.5rem;

    line-height: 1;

    font-weight: 800;

    color: #252525;

    position: relative;

    display: inline-block;

}


.paises-clientes-numero::after {

    content: "";

    position: absolute;

    left: 5px;

    right: 5px;

    bottom: -5px;

    height: 7px;

    background: #FFD400;

    border-radius: 10px;

    z-index: 0;

}


.paises-clientes-label {

    margin-top: 15px;

    font-size: .95rem;

    font-weight: 700;

    color: #666;

    text-transform: uppercase;

    letter-spacing: .8px;

}


/* =====================================================
   ETIQUETA
   ===================================================== */

.paises-clientes-etiqueta {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #555;

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;

    margin-bottom: 12px;

}


.paises-clientes-etiqueta i {

    color: #d5ad00;

}


/* =====================================================
   TITULO
   ===================================================== */

.paises-clientes-titulo {

    font-size: 1.8rem;

    font-weight: 700;

    color: #252525;

    line-height: 1.25;

    margin-bottom: 12px;

}


.paises-clientes-texto {

    color: #666;

    line-height: 1.7;

    max-width: 750px;

}


/* =====================================================
   SEPARADOR
   ===================================================== */

.paises-clientes-separador {

    height: 1px;

    background: #e9e9e9;

    margin: 30px 0;

}


/* =====================================================
   LISTA paises
   ===================================================== */

.paises-clientes-lista {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

}


/* =====================================================
   PAIS
   ===================================================== */

.pais-cliente {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    background: #f8f9fa;

    border: 1px solid #eeeeee;

    border-radius: 9px;

    color: #3a3a3a;

    font-size: .88rem;

    font-weight: 600;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.pais-cliente:hover {

    background: #fffdf0;

    border-color: #FFD400;

    transform: translateY(-2px);

}


.pais-cliente-icono {

    width: 20px;

    height: 20px;

    min-width: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFD400;

    color: #222;

    border-radius: 50%;

    font-size: .65rem;

}


/* =====================================================
   MENSAJE FINAL
   ===================================================== */

.paises-clientes-final {

    margin-top: 28px;

    padding: 15px 20px;

    background: #fffdf0;

    border-left: 4px solid #FFD400;

    border-radius: 8px;

    color: #444;

    text-align: center;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {

    .paises-clientes-lista {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

}


@media (max-width: 767.98px) {

    .paises-clientes-box {

        padding: 28px 20px;

        border-radius: 16px;

    }


    .paises-clientes-numero {

        font-size: 3.8rem;

    }


    .paises-clientes-titulo {

        font-size: 1.5rem;

    }


    .paises-clientes-lista {

        grid-template-columns: 1fr 1fr;

    }


    .pais-cliente {

        font-size: .82rem;

    }

}


@media (max-width: 480px) {

    .paises-clientes-lista {

        grid-template-columns: 1fr;

    }

}



/* =====================================================
   COMUNIDAD DIGITAL
   ===================================================== */

.comunidad-redes {

    background: #f3f4f6;

}


/* =====================================================
   ENCABEZADO
   ===================================================== */

.comunidad-redes-etiqueta {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #666;

    font-size: .78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    margin-bottom: 10px;

}


.comunidad-punto {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #FFD400;

    box-shadow:
        0 0 0 4px rgba(255,212,0,.15);

}


.comunidad-redes-titulo-principal {

    font-size: 2.1rem;

    font-weight: 700;

    color: #252525;

    margin-bottom: 10px;

}


.comunidad-redes-subtitulo {

    max-width: 700px;

    margin: 0 auto;

    color: #6b6b6b;

    line-height: 1.65;

}


/* =====================================================
   TARJETAS
   ===================================================== */

.red-social-card {

    height: 100%;

    background: #fff;

    border: 1px solid #e7e7e7;

    border-radius: 16px;

    padding: 24px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(0,0,0,.045);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;

}


.red-social-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.09);

}


/* =====================================================
   LINEA SUPERIOR
   ===================================================== */

.red-social-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

}


/* =====================================================
   COLORES REDES
   ===================================================== */

.youtube-card::before {
    background: #ff0000;
}


.facebook-card::before {
    background: #1877f2;
}


.instagram-card::before {

    background:
        linear-gradient(
            90deg,
            #f58529,
            #dd2a7b,
            #8134af
        );

}


.tiktok-card::before {
    background: #111;
}


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

.red-social-icono {

    width: 58px;

    height: 58px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    margin-bottom: 18px;

}


.youtube-card .red-social-icono {

    color: #ff0000;

    background: #fff1f1;

}


.facebook-card .red-social-icono {

    color: #1877f2;

    background: #eef5ff;

}


.instagram-card .red-social-icono {

    color: #c13584;

    background: #fff0f7;

}


.tiktok-card .red-social-icono {

    color: #111;

    background: #f1f1f1;

}


/* =====================================================
   CABECERA
   ===================================================== */

.red-social-cabecera {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 5px;

}


.red-social-nombre {

    font-size: .75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;

    color: #777;

}


.red-social-status {

    font-size: .68rem;

    font-weight: 700;

    color: #777;

    border: 1px solid #ddd;

    border-radius: 20px;

    padding: 3px 8px;

}


/* =====================================================
   NOMBRE
   ===================================================== */

.red-social-contenido h3 {

    font-size: 1.12rem;

    font-weight: 700;

    color: #252525;

    margin-bottom: 10px;

    word-break: break-word;

}


/* =====================================================
   DESCRIPCION
   ===================================================== */

.red-social-contenido p {

    color: #6b6b6b;

    font-size: .87rem;

    line-height: 1.55;

    min-height: 68px;

    margin-bottom: 15px;

}


/* =====================================================
   ENLACE
   ===================================================== */

.red-social-enlace {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #333;

    font-size: .86rem;

    font-weight: 700;

    text-decoration: none;

    transition: gap .2s ease;

}


.red-social-enlace:hover {

    color: #000;

    gap: 12px;

}


.youtube-card .red-social-enlace:hover {
    color: #ff0000;
}


.facebook-card .red-social-enlace:hover {
    color: #1877f2;
}


.instagram-card .red-social-enlace:hover {
    color: #c13584;
}


.tiktok-card .red-social-enlace:hover {
    color: #111;
}


/* =====================================================
   MENSAJE FINAL
   ===================================================== */

.comunidad-redes-final {

    max-width: 650px;

    margin: 35px auto 0;

    padding: 18px 22px;

    background: #fff;

    border: 1px solid #e7e7e7;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.035);

}


.comunidad-final-icono {

    width: 42px;

    height: 42px;

    min-width: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff9d9;

    color: #c7a600;

}


.comunidad-redes-final strong {

    display: block;

    color: #333;

    font-size: .92rem;

}


.comunidad-redes-final span {

    display: block;

    color: #777;

    font-size: .8rem;

    margin-top: 2px;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1199.98px) {

    .red-social-card {

        padding: 22px;

    }

}


@media (max-width: 767.98px) {

    .comunidad-redes-titulo-principal {

        font-size: 1.7rem;

    }


    .red-social-contenido p {

        min-height: auto;

    }


    .comunidad-redes-final {

        text-align: left;

    }

}


@media (max-width: 480px) {

    .red-social-card {

        padding: 20px;

    }


    .red-social-icono {

        width: 52px;

        height: 52px;

        font-size: 1.6rem;

    }


    .comunidad-redes-final {

        align-items: flex-start;

        padding: 15px;

    }

}

/* =========================================================
   BOTÓN LISTA COMPACTA
   ========================================================= */

.btn-lista-compacta {
    font-weight: 600;
    border-radius: 8px;
    padding: 9px 12px;
    transition: all 0.2s ease;
}

.btn-lista-compacta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   BUSCADOR DE PRODUCTOS
   ========================================================= */

.buscador-productos .form-control {
    height: 42px;
}

.buscador-productos .btn {
    height: 42px;
}


/* =========================================================
   CATEGORÍAS CON SCROLL
   ========================================================= */

.categorias-scroll {

    /*
       Altura máxima de la lista.

       Si hay pocas categorías se muestran todas.
       Si hay muchas, aparece scroll vertical.
    */

    max-height: 500px;

    overflow-y: auto;

    overflow-x: hidden;
}


/* =========================================================
   BARRA DE SCROLL
   ========================================================= */

.categorias-scroll::-webkit-scrollbar {
    width: 6px;
}

.categorias-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.categorias-scroll::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 10px;
}

.categorias-scroll::-webkit-scrollbar-thumb:hover {
    background: #888;
}


/* =========================================================
   ELEMENTOS DE CATEGORÍA
   ========================================================= */

.categorias-scroll .list-group-item {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* =====================================================
   BORDE AZUL DEL BUSCADOR
   ===================================================== */

.buscador-productos .form-control {
    border: 1px solid #0d6efd;
}

.buscador-productos .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
    outline: none;
}

/* =====================================================
   BUSCADOR DE PRODUCTOS
   ===================================================== */

.buscador-productos {
    display: flex;
    align-items: stretch;
}

.buscador-productos .form-control {
    height: 42px;
    border: 1px solid #0d6efd;
    margin: 0;
    box-sizing: border-box;
}

.buscador-productos .btn {
    height: 42px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


/* =====================================================
   AJUSTE PARA MÓVILES
   ===================================================== */

@media (max-width: 767.98px) {

    .buscador-productos {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    .buscador-productos .form-control {
        height: 42px !important;
        min-height: 42px !important;
        padding-top: 8px;
        padding-bottom: 8px;
        margin: 0 !important;
        line-height: 24px;
        box-sizing: border-box;
    }

    .buscador-productos .btn {
        height: 42px !important;
        min-height: 42px !important;
        padding-top: 8px;
        padding-bottom: 8px;
        margin: 0 !important;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: nowrap;
    }

}