/*Estilo del título del header*/
.bienvenida{
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-repeat: no-repeat;
    background-image: url('../assets/header1.png');
    background-size: cover;
    background-position: center center;
    min-height: 360px;
    max-height: 360px;
    color: white;
    /* text-shadow: 2px 2px 2px #605f63; */
}

/* Añade más tamaño al área del header */
.container-titulo{
    padding-top: 1rem !important;
}

/* Ubica el título de bienvenida más al centro del header */
.titulo-bienvenida{
    margin-top: 5rem !important;
}

/*Estilos del botón del header */
.titulo-bienvenida > a {
    background-color: #ffbb06;
    border-color: #ffbb06;
    border-radius: 0;
    color: white;
    font-family: "Raleway", sans-serif;
    font-weight: bold;
}

/*Estilos del botón del header al pasar el mouse*/
.titulo-bienvenida a:hover{
    background-color: #ff9b00;
    border-color:#ff9b00;
    transition: cubic-bezier(0.075, 0.82, 0.165, 0.5);
    color: white;
}

/*Estilo del título del párrafo de la página de ESD*/
.titulo-parrafo{
    text-align: center;
    font-family: "Raleway", sans-serif;
    font-weight: 550;
    font-size: 3rem;
    color: rgb(96, 95, 99);
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: normal;
}

/*Estilo del título del párrafo de la página de ESD*/
.titulo-parrafo span{
    color: #1892ca;
}

.titulo-azul {
    color: #1892ca;
}

/* Área en blanco como separador */
.empty-space{
    height: 1.5rem;
}

.texto-importante{
    font-size: 2.5rem !important;
}

/* Estilos del párrafo genérico */
.parrafo{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: inherit;
    margin-bottom: 0;
    padding-bottom: 0;
}

.primary-gray{
    color: #605f63 !important;
}

/* Estilo de las cards de la página de material ESD */
.card {
    max-height: 17rem;
    width: auto;
    margin-bottom: 2rem;
    padding: 1rem;
    color: #1982ca !important;
}

.card-body{
    max-height: 10rem !important;
}

/* Estilos para cuando se pasa el mouse sobre una card */
/* .card:hover{
    border: 1px solid rgb(0,0,0,0.45) !important;    
    border-top: 6px solid black !important;
    color: rgba(29,79,117,0.9) !important;
} */

/* Estilos para el texto del footer de las cards */
.card-footer h2{
    color: inherit;
}

/* Estilos para el texto del footer de las cards */
.card-footer p{
    color: #605f63;
}

/* Estilo para usar todo el ancho en el footer de las tarjetas ya que se convirtieron en botones */
.card-footer{
    width: 100%;
    background-color: white;
    border: none;
}

/* Elimina el estilo de link en los footer de las cards principales */
.producto>a {
    text-decoration: none;
}

/* Fija el ancho para las cards en las modales */
.modal .card{
    width: 100%;
    height: auto !important;
}

/* Reduce la distancia al borde del modal para tener más espacio */
.container-modal{
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Tamaño del título del footer de las cards del modal */
.titulo-plantilla-modal{
    font-size: 1rem;
}

/* Disminuir la distancia entre título y cards del modal */
.modal .modal-header{
    padding-bottom: 0;
}

/* Tamaño mínimo y máximo de las imágenes en los modales */
.modal-img{
    min-height: 85%;
    max-height: 85%;
}

/* Ajustes para resoluciones pequeñas, para centrar el modal y eliminar espaciones en blanco del card modal */
@media (max-width: 576px) {
    .modal-md, .modal-lg {
        /* ajusta el card al tamaño del contenido eliminando espacion */
        max-width: min-content;
        /* Se centra el modal en pantalla */
        margin-left: auto;
        margin-right: auto;
    }
}

.desc-beneficios{
    font-size: 1.1rem;
    font-weight: 400;
}

.contenedor-beneficios{
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
}

.contenedor-porque{
    margin-top: 3rem;
    margin-bottom: 0rem;
}

/* TEMPORAL estilo para ajustar la imagen de fondo del index.html */
.cuerpo-index img{
    max-width: 100%;
}

/* Estilos del footer de las páginas */
.footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    background-color: #2c2c2c !important;
}

/* Estilo imágen página 404 */
.img404{
    display: flex;
    margin: auto;
    max-width: 50vw !important;
}

/* Estilos de la página index */

/* Estilos imagen principal del index */
.bg-00 {
    /* background-image: url('https://mycrm.intcomex.com/sugarcrm/images/xam/landing/2022/feb/XAM-iws/images/iws-bg-00.png'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}

.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 3rem !important;
}

.primary-orange {
    color: #ff5d24 !important;
}

.primary-yellow {
    color: #ff9b00 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.primary-blue {
    color: #177AB0 !important;
}

.bg-01 {
    /* background-image: url('https://mycrm.intcomex.com/sugarcrm/images/xam/landing/2022/feb/XAM-iws/images/iws-bg-01.png'); */
    background-image: url('../assets/header1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-02 {
    background-image: url('https://mycrm.intcomex.com/sugarcrm/images/xam/landing/2022/feb/XAM-iws/images/iws-bg-02.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(33,37,41, 1) !important;
}

.text-light {
    --bs-text-opacity: 1;
    color: rgba(248,249,250, 1) !important;
}

.titulo-1 {
    color: #1d5175;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2em;
    font-size: 5rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.titulo-2{
    font-weight: 400;
    font-style: normal;
    line-height: 1.4em;
    text-align: center;
    font-size: 2rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.titulo-3 {
    color: #ff9b00;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4em;
    text-align: center;
    font-size: 2.5rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.raya{
    max-width: 9rem;
    margin-left: auto;
    margin-right: auto;
}

.raya img{
    max-width: 100%;
}

.parrafo-grande{
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.4em;
    text-align: center;
    font-size: 1.5rem;
}

.parrafo-grande-2 {
    font-weight: 500;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.4em;
    text-align: center;
    font-size: 2.3rem;
}

.bottom-block{
    height: 9rem;
    max-height: 8rem;
    display: flex;
}

.boton{
    margin: auto;
    border-radius: 3px;
    padding-right: 3rem;
    padding-left: 3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgb(255, 187, 0);
    font-size: 1.5rem;
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.boton a {
    text-decoration: none;
    color: white;
}

.boton :hover{
    text-decoration: none;
    color: white;
}

.font-2{
    font-size: 2rem !important;
}

.font-4{
    font-size: 4rem !important;
}

.font-3{
    font-size: 3rem !important;
}

.img-catalogo{
    display: flex;
    align-items: flex-end;
}

/*Clase para ocultar elemento*/
.elementoAnimado {
    opacity: 0;
}

/*Clase para mostrar elemento animado*/
.aparecerHaciaArriba{
    animation: mostrarArriba 1s;
}

/*animación para hacer aparecer elemento*/
@keyframes mostrarArriba{
    0%{
        transform: translateY(80px);
    }
    100%{
        transform: translateY(0px)
    }
}

.bloque-banderas img{
    max-width: 80%;
    min-width: 80%;
}

.bloque-banderas div {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.btn-center{
    display: flex;
    justify-content: center;
}

.btn-yellow{
    background-color: #ff9b00;
    color: white;
    font-family: "Raleway", sans-serif;
    font-weight: bold;
}

.numero-pasos{
    font-size: 15rem;
    color: #83c4e3;
    font-weight: 700;
    font-family: sans-serif;
}

.pasos-como{
    font-size: 10rem;
    color: #177AB0;
    font-weight: 700;
    font-family: "Raleway",sans-serif;
}

.ml-n-5{
    margin-left: -5rem !important;
}

.mb-n-2{
    margin-bottom: -2rem !important;
}

.mt-n-2{
    margin-top: -2rem !important;
}

.mt-n-3 {
    margin-top: -3rem !important;
}

.mt-n-4 {
    margin-top: -4rem !important;
}

.btn-blue{
    background-color: #177AB0;
    color: white;
}

.bloque-banderas a:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.card-marca{
    border: none !important;
    max-height: 210px !important;
}

.card-marca img{
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-height: 150px !important;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
}

.card-marca:hover, .card-soporte:hover {
    border: none !important;
}

.card-marca a, .card-soporte a {
   text-decoration: none; 
}

.card-soporte {
    border: none !important;
    padding: 0;
}

.card-soporte .card-body{
    border:1px #8f8f91 solid;
    border-radius: 1rem;
    max-height: 11rem !important;
}

.area-faq{
    background-image: url('../assets/faq.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.contenedor-video{
    background-image: url('../assets/laptop.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: max-content;
    height: max-content;
    padding-top: 2.5rem;
    margin-left: -2rem;
}

.contenedor-video video{
    padding: 20px 50px 90px 50px;
    max-width: 100%;
}

.btn{
    border-radius: 3px !important;
}