@import url('https://fonts.googleapis.com/css2?family=Poetsen+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: 'Titulo';
    src: url(../fuentes/Titulo/WorkSans-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Parrafo';
    src: url(../fuentes/Parrafo/BarlowSemiCondensed-Regular.ttf) format('truetype');
}

:root {
    --title-font: "Poetsen One", sans-serif;
    --normal-font: "Roboto", sans-serif;

    /*################ TIPOGRAFIA DE TEXTO ################*/
    /*################ TIPOGRAFIA DE TEXTO ################*/
    /* Título principal */
    --fs-h1: clamp(1.375rem, 1.6vw + 1rem, 3.75rem);
    /* Subtítulo */
    --fs-h2: clamp(1.25rem, 1.5vw + 0.75rem, 3rem);
    /* Título menor */
    --fs-h3: clamp(1.125rem, 1.4vw + 0.5rem, 2.25rem);
    /* Encabezado pequeño */
    --fs-h4: clamp(1rem, 1.2vw + 0.25rem, 1.75rem);
    /* Texto normal */
    --fs-body: clamp(0.95rem, 1vw + 0.5rem, 1.5rem);
    /* Texto pequeño */
    --fs-small: clamp(0.875rem, 0.8vw + 0.25rem, 1.2rem);
    /* Texto muy pequeño */
    --fs-xs: clamp(0.75rem, 0.6vw + 0.2rem, 1rem);

    /*################ NEGRILLA AL TEXTO ################*/
    /*################ NEGRILLA AL TEXTO ################*/
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /*################## MARGENES ##################*/
    /*################## MARGENES ##################*/
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;
    /*################## z-index ##################*/
    /*################## z-index ##################*/
    --toolkid: 100;
    --index-1: 10;
    --index-2: 30;
    --index-3: 60;
    --index-4: 90;

    /*################ COLORES ################*/
    /*################ COLORES ################*/
    /*######## Color Fondo Principal ########*/
    /*######## Color Fondo Principal ########*/
    --body-color: #ebeff1;
    /*######## Color NavBar ########*/
    /*######## Color NavBar ########*/
    --navbar-color: #000000;
    /*######## Colores Texto ########*/
    /*######## Colores Texto ########*/
    --color-one: #2c2c2c;
    --color-two: #ffffff;
    --color-tree: #89b0d9;
    /*######## Color Botones Consultar Y Ver Mas ########*/
    /*######## Color Botones Consultar Y Ver Mas ########*/
    --btn-tabs: #ff7750;
    --btn-consultar: #009100;
}

/*########################## PÁGINA PRINCIPAL ##########################*/
/*########################## PÁGINA PRINCIPAL ##########################*/
/*########################## PÁGINA PRINCIPAL ##########################*/
/*########################## PÁGINA PRINCIPAL ##########################*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-style: normal;
}

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


body {
    font-family: var(--normal-font);
    background: var(--body-color);
    overflow-x: hidden;
}

main {
    background-color: white;
}

.animate-item {
    opacity: 0;
    visibility: hidden;
}

.animate-item.is-animated {
    opacity: 1;
    visibility: visible;
}

.animate__animated {
    animation-fill-mode: both;
}

/*###################### SECCION DEL NAVBAR ######################*/
/*###################### SECCION DEL NAVBAR ######################*/
/*###################### SECCION DEL NAVBAR ######################*/
/*###################### SECCION DEL NAVBAR ######################*/
.header {
    width: 100%;
    background: var(--navbar-color);
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1800px;
}

/*############# Estilos De Los LINKS #############*/
/*############# Estilos De Los LINKS #############*/
a {
    text-decoration: none;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.ZasWeb-logo img {
    width: 140px;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
}

/*###################### ESTILOS DEL BANNER DE LA EMPRESA ######################*/
/*###################### ESTILOS DEL BANNER DE LA EMPRESA ######################*/
/*###################### ESTILOS DEL BANNER DE LA EMPRESA ######################*/
/*###################### ESTILOS DEL BANNER DE LA EMPRESA ######################*/
.datos-business {
    height: max-content;
    position: relative;
    margin-bottom: -0.3rem;
}

/*######### ANIMACION PORTADA#########*/
/*######### ANIMACION PORTADA#########*/
.portada-business {
    width: 100%;
}

.portada-business-phone {
    width: 100%;
    display: none;
}

/*######## LOGO DE LA EMPRESA ########*/
/*######## LOGO DE LA EMPRESA ########*/
.datos-business .logo-nombre-business {
    display: flex;
    max-width: 680px;
    position: absolute;
    right: 50%;
    bottom: -10px;
    transform: translate(50%, 50%);
    padding: 0rem 0rem;
    border-radius: 20px;
    background-color: var(--color-two);
    box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.35);
}

.logo-nombre-business .home-logo {
    width: 100%;
}

/*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
/*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
/*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
/*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
.section-bienvenida {
    background: linear-gradient(to bottom,
            #00324d 0%,
            #041e34 30%,
            #041e34 50%,
            #041e34 70%,
            #00324d 100%);
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.section-bienvenida .detail-bienvenida {
    width: 60%;
    height: 160px;
}

.section-bienvenida .detail-bienvenida {
    font-size: var(--fs-h3);
    font-family: 'Parrafo';
    text-align: center;
    color: white;
}


/*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
/*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
/*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
/*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
.section-productos-ljm {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 4rem 0rem 1rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}




/*####### ESTILO DE LA BARRA DEL ACORDEON ########*/
/*####### ESTILO DE LA BARRA DEL ACORDEON ########*/
.cont-acordeon {
    background: linear-gradient(to bottom, #00aaff, #001f3f);
    width: 90%;
    margin-bottom: 40px;
    padding: 15px 40px;
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
}

.cont-acordeon .toggle {
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Titulo';
    font-size: var(--fs-body);
    color: #ffffff;
    font-weight: var(--fw-regular);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px 0;
    box-shadow: 0 2px rgba(255, 255, 255, 0.6);
}


/*######## SECCION QUE ENCAPSULA LOS CARDS #########*/
/*######## SECCION QUE ENCAPSULA LOS CARDS #########*/
.cont-acordeon .section-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    column-gap: 40px;
    font-family: 'Titulo';
}


/*########## ESTILO DE LOS CARDS ##########*/
/*########## ESTILO DE LOS CARDS ##########*/
.section-cards .card-ljm {
    background-color: #ffffff;
    position: relative;
    width: 360px;
    border-radius: 5px;
    transition: .5s;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.section-cards .card-ljm .header-card {
    color: #0096D6;
    width: 100%;
    height: 80px;
    padding: 14px 0px 10px 0px;
    border-bottom: solid 1px rgba(6, 74, 76, .18);
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-family: 'Titulo';
    font-size: var(--fs-h3);

    font-size: clamp(16px, 4vw, calc(var(--fs-h3) * 0.8));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-cards .card-ljm .detail-card {
    width: 100%;
    padding: 8px;
}

.section-cards .card-ljm .foter-card {
    width: 100%;
    padding: 20px 10px 20px 20px;
    border-top: solid 1px rgba(6, 74, 76, .18);
    margin-top: 2px;
    font-family: 'Parrafo';
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
}

.section-cards .card-ljm .detail-structure li {
    list-style: none;
    display: flex;
    gap: 10px;
    font-size: var(--fs-body);
}

.section-cards .card-ljm .detail-structure li i {
    padding-top: 3px;
}

.section-cards .card-ljm .ver-mas {
    background-color: #fe6a44;
    width: 80%;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    font-size: var(--fs-body);
    padding: 14px 60px;
    margin-bottom: var(--mb-2);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.section-cards .card-ljm .ver-mas:hover {
    background-color: #5c1c1c;
}




.section-cards .buton-isumos {
    width: 90%;
    display: flex;
    justify-content: center;
}

.section-cards .buton-isumos button {
    background-color: #fe6a44;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    font-size: var(--fs-body);
    padding: 18px 540px;
    margin-bottom: var(--mb-2);
    margin-top: var(--mb-4);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.section-cards .buton-isumos button:hover {
    background-color: #1c5a5c;
}


/*############# ESTILO DEL MODAL #############*/
/*############# ESTILO DEL MODAL #############*/
/*############# ESTILO DEL MODAL #############*/
/*############# ESTILO DEL MODAL #############*/
.section-cards .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    backdrop-filter: blur(8px);
    /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(8px);
    /* Soporte para Safari */
}

.section-cards .modal .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    /* Ajusta al 90% del ancho para mejor respuesta en dispositivos */
    max-width: 1400px;
    max-height: 90vh;
    /* Limita la altura al 90% de la pantalla */
    overflow-y: auto;
    /* Activa el scroll vertical cuando el contenido excede la altura */
    position: relative;
}

.section-cards .modal .modal-content .modal-title {
    text-align: center;
    margin-top: 16px;
    color: #0096D6;
    font-size: var(--fs-h1);
    padding-bottom: var(--mb-2);
}

.section-cards .modal .modal-content .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    background-color: white;
}

/*############### ESTILO DEL SCROLL ###############*/
/*############### ESTILO DEL SCROLL ###############*/
::-webkit-scrollbar {
    width: 8px;
    /* Cambia el valor según el tamaño que desees */
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 8px;
    /* Esquinas redondeadas opcionales */
}

::-webkit-scrollbar-thumb {
    background-color: #888888;
    /* Color de la barra */
    border-radius: 8px;
    /* Opcional: redondeo de esquinas */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Cambia de color al pasar el mouse */
}

/*######## ESTILO DE LA TABLA IMPRESORAS ########*/
/*######## ESTILO DE LA TABLA IMPRESORAS ########*/
.modal .modal-content .cont-table-detail {
    width: 100%;
}

.modal-content .cont-table-detail .thead-modal {
    font-size: var(--fs-body);
    position: relative;
    height: 44px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
}

.cont-table-detail .thead-modal .col-img {
    width: 26%;
}

.cont-table-detail .thead-modal .col-desc {
    width: 100%;
}

.cont-table-detail .tr-detail {
    vertical-align: middle;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
}

/*######## ESTILO IMAGEN PRODUCTO ########*/
/*######## ESTILO IMAGEN PRODUCTO ########*/
.cont-table-detail .tr-detail .img-producto {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cont-table-detail .tr-detail .img-producto .content-img-mod {
    width: 84%;
}

.cont-table-detail .tr-detail .img-producto .mod-img-text {
    width: 100%;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont-table-detail .tr-detail .img-producto p {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    text-align: center;
}

/*######## ESTILO CARACTERISTICAS PRODUCTO ########*/
/*######## ESTILO CARACTERISTICAS PRODUCTO ########*/
.cont-table-detail .tr-detail .detail-charastic .content-text-mod {
    display: flex;
    height: 100%;
    gap: 30px;
    padding-left: var(--mb-3);
    padding-top: var(--mb-3);
    padding-bottom: var(--mb-3);
}

.cont-table-detail .tr-detail .detail-charastic .content-text-mod ul {
    list-style: none;
    font-size: var(--fs-body);
    line-height: 1.5;
    width: 80%;
}

.cont-table-detail .tr-detail .detail-charastic .content-text-mod ul strong {
    color: #135f8f;
}

.cont-table-detail .tr-detail .detail-charastic .content-text-mod div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont-table-detail .tr-detail .detail-charastic .content-text-mod button {
    background-color: var(--btn-consultar);
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: var(--fs-body);
    padding: 8px 10px;
    cursor: pointer;
    box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.35);
}

/*############# ESTILO DEL MODAL ESPECIAL LAPTOP #############*/
/*############# ESTILO DEL MODAL ESPECIAL LAPTOP #############*/
.section-cards .modal-detail-lab {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.section-cards .modal-detail-lab .modal-content {
    background-image: url('../../img/fondo-modal-lap.webp'), url('../../img/fondo-modal-lap-vertical.webp');
    background-size: cover, 0;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    justify-content: center;
}


.section-cards .modal-detail-lab .modal-content .close-btn-lap {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    background-color: white;
}

/*######## ESTILO DENTRO MODAL LAPTOP ########*/
/*######## ESTILO DENTRO MODAL LAPTOP ########*/
.modal-content .content-detail-lap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96%;
    padding-top: var(--mb-3);
    gap: 50px;
}

.modal-content .content-detail-lap .img-lap {
    width: 45%;
}

.modal-content .content-detail-lap .detail-lap {
    width: 55%;
}

.modal-content .content-detail-lap .detail-lap h2 {
    font-size: var(--fs-h1);
    color: red;
    padding-bottom: var(--mb-2);
}

.modal-content .content-detail-lap .detail-lap .character-lap {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    border-bottom: solid 4px rgba(151, 209, 231, 0.8);
    margin-bottom: var(--mb-2);
}

.modal-content .content-detail-lap .detail-lap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-body);
    line-height: 1.4;
    padding-bottom: var(--mb-2);
}

.modal-content .content-detail-lap .detail-lap .content-consult-modal-lap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.modal-content .content-detail-lap .detail-lap .content-consult-modal-lap button {
    background-color: #fe6a44;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: var(--fs-body);
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.35);
    animation: pulse-consult-lap 2.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes pulse-consult-lap {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.16);
    }

    100% {
        transform: scale(1);
    }
}



/*######## SECCION QUE ENCAPSULA LOS CARDS #########*/
/*######## SECCION QUE ENCAPSULA LOS CARDS #########*/

.cont-acordeon .section-cards .sub-title-cat {
    width: 100%;
    text-align: center;
    padding-bottom: var(--mb-1);
    padding-top: var(--mb-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cont-acordeon .section-cards .sub-title-cat h3 {
    width: 40%;
    text-align: center;
    font-size: var(--fs-h3);
    padding-top: var(--mb-2);
    color: white;
    padding-bottom: 6px;
}

.cont-acordeon .section-cards .sub-title-cat .hr-1 {
    border: none;
    height: 2px;
    background: white;
    width: 11%;
    border-radius: 2px;
    margin-bottom: var(--mb-1);
}

.cont-acordeon .section-cards .sub-title-cat .hr-2 {
    border: none;
    height: 2px;
    background: white;
    width: 20%;
    border-radius: 2px;
    margin-bottom: var(--mb-1);
}




/*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
/*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
/*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
/*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
.sect-house-matriz {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sect-house-matriz .title-house-matriz {
    position: relative;
    text-align: center;
    font-size: var(--fs-h1);
    font-family: 'Titulo';
    margin-bottom: var(--mb-5);
}

.sect-house-matriz .detail-house-matriz {
    display: flex;
    width: 70%;
    box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.35);
}

.detail-house-matriz .google-maps {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 20px;
}

.detail-house-matriz .google-maps iframe {
    width: 90%;
    height: 100%;
    margin-top: 20px;
}

.detail-house-matriz .google-maps .btn-maps {
    display: inline-block;
    background-color: #007BFF;
    color: #ffffff;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    font-family: 'Titulo';
    padding: 14px 80px;
    margin-bottom: 20px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: breathing-pulse 2.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes breathing-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.detail-house-matriz .datos-direccion {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-house-matriz .datos-direccion ul {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.detail-house-matriz .datos-direccion ul li {
    width: 100%;
    display: flex;
    padding: 20px;
    font-size: var(--fs-body);
    font-family: 'Parrafo';
    border-bottom: solid 1px rgba(6, 74, 76, .18);
}

.detail-house-matriz .datos-direccion ul li i {
    padding-right: 10px;

}

.detail-house-matriz .datos-direccion ul li button {
    background-color: var(--btn-consultar);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: var(--fs-small);
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.35);
    transition: .5s;
    margin-left: 20px;
}

/*#################### Estilo Horarios De Atencion Y REDES ####################*/
/*#################### Estilo Horarios De Atencion Y REDES ####################*/
/*#################### Estilo Horarios De Atencion Y REDES ####################*/
/*#################### Estilo Horarios De Atencion Y REDES ####################*/
.section-horario-redes {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-horario-redes .content-horario-redes {
    width: 80%;
    display: flex;
}

.content-horario-redes .slide-container_horario {
    width: 100%;
}

.content-horario-redes .slide-container_horario p {
    text-align: center;
    font-size: var(--fs-h3);
    font-family: 'Titulo';
    position: relative;
    margin-bottom: var(--mb-3);
}

.slide-container_horario .slide-content-atencion {
    margin: 0 10px;
    overflow: hidden;
}

.slide-container_horario .slide-content-atencion ul {
    list-style: none;
}

/*############## ESTILO DE LOS CARDS HORARIO ##############*/
/*############## ESTILO DE LOS CARDS HORARIO ##############*/
.slide-content-atencion .detalle-card-atencion {
    background-color: #e7e7e7;
    text-align: center;
    font-family: 'Parrafo';
    padding: 1.125rem .625rem;
    border-radius: .5rem;
}

.slide-content-atencion .detalle-card-atencion .title-atencion {
    width: 100%;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: 0.6;
}

.slide-content-atencion .detalle-card-atencion .detail-atencion span {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    display: block;
    opacity: 0.6;
}

/*########## ESTILO CAMBIA COLOR POR DIA ##########*/
/*########## ESTILO CAMBIA COLOR POR DIA ##########*/
.slide-content-atencion .detalle-card-atencion.current-day {
    background-color: #0270ac !important;
    color: white !important;
    padding: 1.4rem .625rem !important;
}

.slide-content-atencion .detalle-card-atencion.current-day .title-atencion {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold) !important;
    opacity: 0.9;
}

.slide-content-atencion .detalle-card-atencion.current-day .detail-atencion span {
    opacity: 2.9;
    font-size: var(--fs-body);
}


/*########## ESTILO DE LAS REDES ##########*/
/*########## ESTILO DE LAS REDES ##########*/
.content-horario-redes .derecho-redes-sociales {
    width: 38%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content-horario-redes .derecho-redes-sociales p {
    text-align: center;
    font-size: var(--fs-h3);
    font-family: 'Titulo';
}

.derecho-redes-sociales .social-card {
    height: fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px 25px;
    border-radius: 14px;
}

.derecho-redes-sociales .svgContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    backdrop-filter: blur(0px);
    letter-spacing: 0.8px;
    border-radius: 10px;
    transition: all 0.3s;
    z-index: 2;
}

.derecho-redes-sociales .Btn {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    position: relative;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.3s;
}

.derecho-redes-sociales .svgContainer i {
    color: white;
    font-size: 30px;
}

.derecho-redes-sociales .BG {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #181818;
    z-index: 1;
    border-radius: 10px;
    pointer-events: none;
    transition: all 0.3s;
    font-size: 0px;
}

.derecho-redes-sociales .facebook .BG {
    background: #0866ff;

}

.derecho-redes-sociales .tiktok .BG {
    background: #000000;
}

.derecho-redes-sociales .instagram .BG {
    background: linear-gradient(135deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

}

.derecho-redes-sociales .Btn:hover .BG {
    transform: scale(1.3);
}

.derecho-redes-sociales .Btn:hover .svgContainer {
    background-color: rgba(209, 209, 209, 0.466);
    backdrop-filter: blur(4px);
}

/*################# ESTILO SECCION FOOTER Y COPY ################*/
/*################# ESTILO SECCION FOOTER Y COPY ################*/
/*################# ESTILO SECCION FOOTER Y COPY ################*/
/*################# ESTILO SECCION FOOTER Y COPY ################*/
.section-footer {
    width: 100%;
    background-color:
        /*#535252*/
        #0a192f;
}

.section-footer .seccion_detalle_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Parrafo';
}

.seccion_detalle_footer .detalles_footer {
    max-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 40px 0px;
}

.detalles_footer .logo_footer figure {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detalles_footer .logo_footer figure img {
    width: 250px;
}

.detalles_footer .detalle_footer {
    width: 40%;
    padding: 60px 30px 60px 30px;
}

.detalles_footer .detalle_footer h2 {
    color: hsla(0, 0%, 100%, 0.6);
    margin-bottom: 25px;
    font-size: var(--fs-h3);
}

.detalles_footer .detalle_footer p {
    color: hsla(0, 0%, 100%, 0.5);
    margin-bottom: 10px;
    text-align: justify;
    font-size: var(--fs-body);
}

.detalles_footer .redes_footer {
    width: 20%;
    display: none;
}

.detalles_footer .redes_footer h2 {
    color: hsla(0, 0%, 100%, 0.6);
    margin-bottom: 25px;
    font-size: var(--fs-h3);
}

.detalles_footer .redes_footer .iconos_redes a {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: white;
    margin-right: 10px;
    background-color: var(--barra-color);
    text-align: center;
}

.detalles_footer .iconos_redes a:hover {
    color: var(--navbtn-color);
}

.section-footer .seccion_copy {
    background-color: #f68421;
    padding: 15px 10px;
    text-align: center;
    color: white;
}

.section-footer .seccion_copy small {
    font-size: var(--fs-small);
}

/*################## SECCION DEL DISEÑO RESPONSIVO ##################*/
/*################## SECCION DEL DISEÑO RESPONSIVO ##################*/
/*################## SECCION DEL DISEÑO RESPONSIVO ##################*/
/*################## SECCION DEL DISEÑO RESPONSIVO ##################*/
/*################## SECCION DEL DISEÑO RESPONSIVO ##################*/
/*################## SECCION DEL DISEÑO RESPONSIVO ##################*/
@media (max-width: 1919px) {

    /*###################### SECCION DEL NAVBAR ######################*/
    /*###################### SECCION DEL NAVBAR ######################*/
    .nav {
        padding: 0 1rem;
    }

    .ZasWeb-logo img {
        width: 100px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    .section-productos-ljm {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 4rem 0rem 1rem 0rem;
    }

    /*####### ESTILO DE LA BARRA DEL ACORDEON ########*/
    .cont-acordeon {
        width: 94%;
        margin-bottom: 40px;
        padding: 15px 40px;
    }

    /*######## SECCION QUE ENCAPSULA LOS CARDS #########*/
    .cont-acordeon .section-cards {
        column-gap: 20px;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 290px;
    }

    .section-cards .card-ljm .detail-structure li p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .section-cards .card-ljm .ver-mas {
        font-size: var(--fs-body);
        padding: 14px 60px;
        margin-bottom: var(--mb-2);
    }

    .section-cards .buton-isumos button {
        padding: 18px 400px;
        margin-bottom: var(--mb-1);
        margin-top: var(--mb-3);
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .sect-house-matriz .detail-house-matriz {
        width: 84%;
    }

    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    .section-horario-redes {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 1rem 0rem;
        padding-top: 40px;
    }

    .content-horario-redes .slide-container_horario {
        width: 100%;
    }

    /*########## ESTILO DE LAS REDES ##########*/
    .content-horario-redes .derecho-redes-sociales {
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

@media (max-width: 1439px) {

    /*###################### SECCION DEL NAVBAR ######################*/
    .nav {
        padding: 0 1rem;
    }

    .ZasWeb-logo img {
        width: 90px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    .section-bienvenida {
        width: 100%;
        height: 300px;
    }

    .section-bienvenida .detail-bienvenida {
        width: 60%;
        height: 130px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    .section-productos-ljm {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 3.2rem 0rem 1rem 0rem;
    }

    /*####### ESTILO DE LA BARRA DEL ACORDEON ########*/
    .cont-acordeon {
        width: 92%;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 264px;
    }

    .section-cards .buton-isumos button {
        padding: 18px 200px;
        margin-top: var(--mb-2);
        margin-bottom: var(--mb-2);
    }

    /*######## ESTILO CARACTERISTICAS PRODUCTO IMPRESORA ########*/
    .cont-table-detail .tr-detail .detail-charastic .content-text-mod {
        gap: 20px;
        padding-left: var(--mb-3);
        padding-top: var(--mb-2);
        padding-bottom: var(--mb-2);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod ul {
        width: 76%;
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .sect-house-matriz {
        padding: 1rem 0rem;
    }

    .sect-house-matriz .detail-house-matriz {
        width: 92%;
    }

    .detail-house-matriz .google-maps {
        height: 460px;
    }

    .detail-house-matriz .datos-direccion ul li {
        padding: 20px 0px 20px 10px;
    }

    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    .section-horario-redes {
        padding: 2.5rem 0rem;
    }

    .section-horario-redes .content-horario-redes {
        width: 92%;
    }

    .content-horario-redes .slide-container_horario {
        width: 100%;
    }

    .content-horario-redes .derecho-redes-sociales {
        width: 32%;
    }

    .derecho-redes-sociales .social-card {
        gap: 14px;
        padding: 20px 20px;
    }

    /*################# ESTILO SECCION FOOTER Y COPY ################*/
    /*################# ESTILO SECCION FOOTER Y COPY ################*/
    .seccion_detalle_footer .detalles_footer {
        gap: 30px;
        padding: 20px 0px;
    }

    .detalles_footer .logo_footer figure {
        width: 100%;
        height: 100%;
    }

    .detalles_footer .logo_footer figure img {
        width: 180px;
    }


    .detalles_footer .redes_footer h2 {
        margin-bottom: 16px;
    }

    .detalles_footer .redes_footer .iconos_redes a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-right: 8px;
    }
}


@media (max-width: 1023px) {

    /*###################### SECCION DEL NAVBAR ######################*/
    .nav {
        padding: 0 1rem;
    }

    .ZasWeb-logo img {
        width: 80px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    .section-bienvenida {
        width: 100%;
        height: 240px;
    }

    .section-bienvenida .detail-bienvenida {
        width: 70%;
        height: 100px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    .section-productos-ljm {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 2.4rem 0rem 1rem 0rem;
    }

    /*####### ESTILO DE LA BARRA DEL ACORDEON ########*/
    .cont-acordeon {
        width: 98%;
        /*  margin-bottom: 40px; */
        padding: 15px 20px;
    }

    /*######## SECCION QUE ENCAPSULA LOS CARDS #########*/
    .cont-acordeon .section-cards {
        column-gap: 14px;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 216px;
    }

    .section-cards .card-ljm .ver-mas {
        font-size: var(--fs-body);
        padding: 12px 30px;
        margin-bottom: var(--mb-1);
    }

    .section-cards .buton-isumos button {
        padding: 14px 140px;
        margin-top: var(--mb-2);
        margin-bottom: var(--mb-2);
    }

    /*######## ESTILO CARACTERISTICAS PRODUCTO IMPRESORA ########*/
    .cont-table-detail .tr-detail .detail-charastic .content-text-mod {
        gap: 16px;
        padding-left: var(--mb-1);
        padding-top: var(--mb-2);
        padding-bottom: var(--mb-2);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod ul {
        width: 74%;
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .sect-house-matriz {
        padding: 1rem 0rem;
    }

    .sect-house-matriz .detail-house-matriz {
        width: 98%;
    }

    .detail-house-matriz .google-maps {
        height: 420px;
        width: 88%;
    }

    .detail-house-matriz .datos-direccion ul li {
        padding: 14px 0px 16px 0px;
    }

    .detail-house-matriz .datos-direccion ul li button {
        margin-left: 8px;
    }

    .detail-house-matriz .datos-direccion ul li button i {
        padding-right: 4px;
    }

    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    .section-horario-redes .content-horario-redes {
        width: 96%;
    }

    /*########## ESTILO DE LAS REDES ##########*/
    .content-horario-redes .derecho-redes-sociales {
        width: 40%;
    }

    .derecho-redes-sociales .social-card {
        gap: 14px;
        padding: 20px 20px;
    }

    .derecho-redes-sociales .Btn {
        width: 64px;
        height: 64px;
        border-radius: 7px;
    }

    /*################# ESTILO SECCION FOOTER Y COPY ################*/
    /*################# ESTILO SECCION FOOTER Y COPY ################*/
    .seccion_detalle_footer .detalles_footer {
        flex-direction: column;
        gap: 0px;
        padding: 40px 0px;
    }

    .detalles_footer .logo_footer figure img {
        width: 160px;
    }

    .detalles_footer .detalle_footer {
        width: 100%;
        padding: 30px 60px 14px 60px;
    }

    .detalles_footer .detalle_footer h2 {
        margin-bottom: 14px;
    }

    .detalles_footer .detalle_footer p {
        line-height: 20px;
    }

    .detalles_footer .redes_footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .detalles_footer .redes_footer h2 {
        margin-bottom: 25px;
    }

    .section-footer .seccion_copy {
        padding: 10px 10px;
    }

    .section-footer .seccion_copy small {
        font-size: var(--fs-xs);
    }
}


@media (max-width: 767px) {

    /*###################### SECCION DEL NAVBAR ######################*/
    .nav {
        padding: 0 1rem;
    }

    .ZasWeb-logo img {
        width: 70px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /*######## LOGO DE LA EMPRESA ########*/
    /*######## LOGO DE LA EMPRESA ########*/
    .datos-business .logo-nombre-business {
        border-radius: 12px;
    }

    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    .section-bienvenida {
        width: 100%;
        height: 180px;
    }

    .section-bienvenida .detail-bienvenida {
        width: 80%;
        height: 90px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    .cont-acordeon {
        margin-bottom: 30px;
    }

    .cont-acordeon .section-cards {
        transition: max-height 0.3s ease-in-out, padding 0.2s ease-in-out;
        column-gap: 10px;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 31.4%;
        margin: 5px 0px;
    }

    .section-cards .card-ljm .header-card {
        height: 54px;
    }

    .section-cards .card-ljm .foter-card {
        padding: 10px 8px 10px 8px;
        margin-top: 2px;
    }

    .section-cards .card-ljm .ver-mas {
        border: 0;
        border-radius: 10px;
        padding: 10px 20px;
        margin-bottom: 4px;
    }

    /*$$$$$$$$$$$$$$ MODAL 1 $$$$$$$$$$$$$$*/
    .modal .modal-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .modal .modal-content .cont-table-detail {
        width: 90%;
    }

    .modal-content .cont-table-detail .thead-modal {
        display: none;
    }

    .cont-table-detail .tr-detail {
        display: flex;
        flex-direction: column;
        vertical-align: middle;
        box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
    }

    .cont-table-detail .tr-detail .img-producto p {
        font-size: var(--fs-h1);
        font-weight: var(--fw-semibold);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod {
        flex-direction: column;
        gap: 0px;
        padding-left: 0px;
        padding-top: var(--mb-3);
        padding-bottom: var(--mb-3);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod ul {
        width: 100%;
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod div {
        padding-top: var(--mb-3);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod button {
        border-radius: 5px;
        padding: 8px 120px;
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .sect-house-matriz .detail-house-matriz {
        flex-direction: column;
        width: 90%;
    }

    .detail-house-matriz .google-maps {
        width: 100%;
        height: 400px;
        row-gap: 20px;
    }

    .detail-house-matriz .datos-direccion ul {
        width: 84%;
    }

    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    .section-horario-redes .content-horario-redes {
        width: 90%;
        row-gap: 26px;
        flex-direction: column;
    }

    /*########## ESTILO DE LAS REDES ##########*/
    .content-horario-redes .derecho-redes-sociales {
        width: 100%;
    }

    .derecho-redes-sociales .social-card {
        gap: 24px;
    }
}

@media (max-width: 599px) {

    /*###################### SECCION DEL NAVBAR ######################*/
    /*###################### SECCION DEL NAVBAR ######################*/
    .nav {
        padding: 0 1rem;
    }

    .ZasWeb-logo img {
        width: 60px;
        padding-bottom: 6px;
    }

    /*###################### ESTILOS DEL BANNER DE LA EMPRESA ######################*/
    /*###################### ESTILOS DEL BANNER DE LA EMPRESA ######################*/
    .portada-business {
        display: none;
    }

    .portada-business-phone {
        display: block;
    }

    /*######## LOGO DE LA EMPRESA ########*/
    /*######## LOGO DE LA EMPRESA ########*/
    .datos-business .logo-nombre-business {
        max-width: 680px;
        padding: 0rem 0rem;
        border-radius: 10px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 208px;
    }

    .section-cards .buton-isumos button {
        padding: 14px 80px;
        margin-top: var(--mb-2);
        margin-bottom: var(--mb-2);
    }

    .section-cards .modal-detail-lab .modal-content {
        background-size: 0, cover;
    }

    /*######## ESTILO DENTRO MODAL LAPTOP ########*/
    /*######## ESTILO DENTRO MODAL LAPTOP ########*/
    .modal-content .content-detail-lap {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: var(--mb-3);
        gap: 0px;
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod ul {
        width: 100%;
    }

    .modal-content .content-detail-lap .img-lap {
        width: 70%;
    }

    .modal-content .content-detail-lap .detail-lap {
        width: 100%;
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .detail-house-matriz .datos-direccion ul {
        width: 94%;
    }
}


@media (max-width: 511px) {

    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*######## LOGO DE LA EMPRESA ########*/
    .datos-business .logo-nombre-business {
        width: 280px;
    }

    .section-bienvenida .detail-bienvenida {
        width: 90%;
        height: 90px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*####### ESTILO DE LA BARRA DEL ACORDEON ########*/
    .cont-acordeon {
        width: 100%;
        padding: 10px 20px;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 169px;
    }

    .section-cards .buton-isumos button {
        padding: 14px 50px;
        margin-top: var(--mb-1);
        margin-bottom: var(--mb-1);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod ul {
        width: 100%;
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod div {
        padding-top: var(--mb-2);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod button {
        border-radius: 5px;
        padding: 8px 80px;
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .sect-house-matriz .detail-house-matriz {
        width: 100%;
    }

    .detail-house-matriz .datos-direccion ul {
        width: 94%;
    }

    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    /*#################### Estilo Horarios De Atencion Y REDES ####################*/
    .section-horario-redes .content-horario-redes {
        width: 100%;
        row-gap: 26px;
    }

    /*######## ESTILO DENTRO MODAL LAPTOP ########*/
    .modal-content .content-detail-lap {
        gap: 30px;
    }
}


@media (max-width: 424px) {

    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*######## LOGO DE LA EMPRESA ########*/
    /*######## LOGO DE LA EMPRESA ########*/
    .datos-business .logo-nombre-business {
        width: 70%;
    }

    .section-bienvenida {
        width: 100%;
        height: 180px;
    }

    .section-bienvenida .detail-bienvenida {
        width: 90%;
        height: 106px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    .cont-acordeon {
        margin-bottom: 20px;
    }

    .section-productos-ljm {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
    }

    .cont-acordeon {
        width: 100%;
        padding: 10px 8px;
    }

    .cont-acordeon .section-cards {
        column-gap: 4px;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 49.2%;
    }

    .section-cards .buton-isumos button {
        padding: 14px 30px;
        margin-top: var(--mb-1);
        margin-bottom: var(--mb-1);
    }

    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    /*###################### ESTILOS DIRECCION CASA MATRIZ ######################*/
    .detail-house-matriz .datos-direccion ul li i {
        padding-right: 6px;
    }

    .detail-house-matriz .datos-direccion ul li button {
        margin-left: 8px;
        font-size: var(--fs-xs);
        padding: 10px 6px;
    }

    .detail-house-matriz .datos-direccion ul li button i {
        padding-right: 1px;
    }
}

@media (max-width: 374px) {

    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*###################### ESTILOS SOBRE MENSAJE DE BIENVENIDA ######################*/
    /*######## LOGO DE LA EMPRESA ########*/
    /*######## LOGO DE LA EMPRESA ########*/
    .datos-business .logo-nombre-business {
        width: 230px;
        border-radius: 6px;
    }

    .section-bienvenida {
        width: 100%;
        height: 190px;
    }

    .section-bienvenida .detail-bienvenida {
        width: 90%;
        height: 110px;
    }

    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    /*###################### ESTILOS SOBRE SERVICIOS O PRODCUTO ######################*/
    .section-productos-ljm {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .cont-acordeon {
        padding: 10px 16px;
    }

    /*########## ESTILO DE LOS CARDS ##########*/
    .section-cards .card-ljm {
        width: 60vh;
    }

    .section-cards .buton-isumos button {
        padding: 14px 10px;
        margin-top: var(--mb-1);
        margin-bottom: var(--mb-1);
    }

    .cont-table-detail .tr-detail .detail-charastic .content-text-mod button {
        border-radius: 5px;
        padding: 8px 30px;
    }
}