* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Work Sans';
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    width: 100%;
}

html {
    scroll-behavior: smooth;
    width: 100%;
}

/* Header */
header {
    padding: 0;
    margin: 0;
    width: 100%;
    
    
}
header a{
    width: 300px;
}

.logo img {
  width: 250px;
    padding-left: 20px;
    padding-top: 10%;
   
}

#whatsapp img {
    width: 60px;
    height: 60px;
}

#whatsapp {
    position: fixed;
    bottom: 20px;
    right: 0;
    z-index: 999;
}
.container-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.container-whatsapp img {
    width: 60px; /* Ajusta el tamaño del icono según tu preferencia */
    height: 60px;
    cursor: pointer;
}
#custom-tooltip {
    position: absolute;
    bottom: 70px; /* Ajusta la distancia del tooltip al icono */
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    visibility: hidden;
    font-size: 14px;
}

#whatsapp:hover #custom-tooltip {
    visibility: visible;
}

/* Menú */
.contenedor-header {
    background: rgba(148, 62, 206, 0);
    position: fixed;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 99;
    transition: background-color 0.5s ease;
}

.contenedor-header header {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.contenedor-header header ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.contenedor-header header nav ul li {
    position: relative;
}

.contenedor-header header nav ul li a {
    color: #fdfbfb;
    font-size: 20px;
    text-decoration: none;
    transition: color 0.2s;
    margin: 0 15px;
}

.contenedor-header header nav ul li a:hover {
    color: #007bff;
    
}

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 100px;
    color: #fff;
    cursor: pointer;
    padding: 5%;
    display: none;
}

/* Submenu */
#submenu,
#submenu1 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #9532b044;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgb(43, 43, 43);
    white-space: nowrap; /* Asegura que el texto no se divida en dos filas */
}

 #submenu li,
#submenu1 li {
    margin-bottom: 5px;
    text-align: left; /* Justificación a la izquierda */
} 

#submenu a,
#submenu1 a {
    color: #fdfcfc;
    text-decoration: none;
}

#submenu a:hover,
#submenu1 a:hover {
    color: #007bff;
}

.cambiar-fondo .contenedor-header {
    background-color: #270950b3; /* Cambia el color de fondo al hacer scroll */
    width: 100%;
}

.cambiar-fondo .contenedor-header header nav ul li a {
    color: #fcfafa; /* Cambia el color del texto al hacer scroll */
}

.nav-responsive {
    background-color: #5eb7d200;
    color: #007bff;
    cursor: pointer;
    display: none;
}

.botonnav1 {
    width: auto;
    background-color: #faf9fa;
    color: #6190ae;
    padding: 10px 20px;
    margin-right: 20px;
    font-weight: bold;
    border:  1px solid #f6f5f8;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
   
    transform-origin: center; 
    text-decoration: none;
    
}

.botonnav1:hover {
    background-color: #a018b253;
  
    /* Suaviza la transición */
   
    border: 1px solid #f8f7f7;
   
    color: #fcfcfd;
    font-weight: bold;
    display: inline-block;
    transition: none; /* Sin transición para que el texto no se vea afectado */
   
}



.boton-redondo {
    margin-top: 50px;
    padding:25px;
   
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background-color: #3498db00;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease; 
} 

.boton-redondo img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
#marketingDigital  i{
    display:none;
}
#paginasWeb i{
    display:none;
}
/* Inicio */
.inicio {
    position: relative;
    overflow: hidden;
    text-align: start;
    color: rgb(255, 255, 255);
    height: 100%; /* Usar altura completa de la vista */
    width: 100%; /* Usar ancho completo de la vista */
    
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(146, 32, 154, 0.536), #43207c00); /* Colores rosa y azul con transparencia */
    z-index: 1; /* Asegurar que esté delante del video */
}


.container {
    width: 80%;
    max-width: 900px;
    height: 100%;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
}
h1, h2 {
    color: #00060b;
}
h1 {
    text-align: center;
}
p {
    margin-bottom: 15px;
    color: #000408;
}
ul {
    padding-left: 20px;
}
.container li{
    color:#000;
}
/*FOOTER*/
footer {
    background-color: #44207c; /* Fondo azul */
    color: #fff; /* Texto blanco */
    padding: 50px 0; /* Espacio interno */
    
}

.container_footer {
    text-align: center; /* Centrar texto */
}

.container_footer h4 {
    margin-bottom: 20px; /* Separación entre títulos y listas */
}

.container_footer ul {
    list-style: none;
    padding: 0;
}

.container_footer ul li {
    margin-bottom: 10px; /* Separación entre elementos de la lista */
    font-size: 20px;
}


.container_footer ul li a {
    color: #fff; /* Enlaces blancos */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Texto en negrita */
    transition: color 0.3s; /* Transición de color suave */
    position: relative;
}

.container_footer ul li a:hover {
    color: #d15bc9; /* Cambio de color al pasar el mouse */
}


.submenu_footer ul {
    display: none;
    position: absolute;
    background-color: #3498db;
    width: 150px;
    padding: 10px 0;
    left: 100%; /* Mueve el submenú a la derecha */
    top: 0;
    z-index: 1;
}

.submenu_footer:hover ul {
    display: block;
}

.submenu_footer ul li {
    text-align: center;
}

.submenu_footer ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

/* Ajustes adicionales para la columna de Páginas Web */
.col-md-4 {
    position: relative; /* Asegura que la columna tenga una posición relativa */
}

.submenu_footer ul {
    left: calc(60% + 10px); /* Desplaza el submenú a la derecha */
    top: 0;
    background-color: #43207c00;
    border:1px solid #fff;
    border-radius: 15px;
}

.social-icon {
   
    align-items: flex-start;  /* Alinea los íconos al principio */
    font-size:20px;  /* Aumenta el tamaño del ícono */
    color: #000;  /* Cambia el color de los íconos a negro, puedes poner otro color */
    text-decoration: none;  /* Elimina el subrayado del enlace */
    margin: 10px 0;  /* Agrega un margen entre los elementos */
}

.social-icon i {
    margin-right: 10px;  /* Agrega espacio entre el ícono y el texto */
}

.container_footer .copyright-text {
    font-size: 14px;
    color: #959da2;  /* Gris suave */
    margin-top: 30px;
    text-align: center;
}

/* Estilo para hacer que el año se actualice automáticamente */
#year {
    font-weight: bold;
    color: #959da2;  /* Cambia el color a negro para hacerlo más destacado */
}


@media screen and (max-width: 980px) {
    .btn-full-width {
        flex: 1 1 auto;
        margin: 5px;
    }


.right-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
    #menu {
      
        padding-right: 30px;
    }
    
    #submenu, #submenu1 {
        position: relative;
        top: 0;
        display:none;
    }
    
    #submenu li {
        font-size: 30px;
    }
    
    #whatsapp img {
        width: 150px;
        height: 150px;
        padding: 10%;
    }

    .nav-responsive i {
        font-size: 40px;
    }
    .contenedor-header header{
        height: 100px;
    }
    .contenedor-header header ul {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(39, 9, 80, 0.9);
        justify-content: center;
        align-items: center;
        z-index: 100;
        overflow-y: auto;
    }

    .logo img{
        width: 70%;
        height: auto;
       
      }

    .nav-responsive {
        display: block;
    }

    .contenedor-header header ul.show {
        display: flex;
    }

    .contenedor-header header nav ul li {
        margin: 20px 0;
        font-size: 30px;
    }

    .contenedor-header header nav ul li a {
        font-size: 25px;
    }

    .contenedor-header header ul li ul {
        position: static;
        display: none;
        width: 100%;
    }

    .contenedor-header header ul.show li ul.show {
        display: block;
        
    }

    .close-menu {
        display: block;
       font-size: 50px;
    }

    .botonnav1{
        display: none;
    }
    
    #contenedorTextoInicio{
        margin: 0;
        padding: 0;
        width: 50vh;
    }
    .subheadline{
        font-size: 6.5em; /* Reduce el tamaño del texto para móviles */
        margin-bottom: 10px;
    }
    .textoPortada {
        font-size: 6.5em; /* Reduce el tamaño del texto para móviles */
        margin-bottom: 10px;
    }

    .custom-row .col-12 {
        flex: 0 0 100%; /* Las columnas ocupan todo el ancho */
        max-width: 100%;
    }
    .service-box h3{
        font-size: 20px;
    }
    
    .service-box h5{
        font-size: 20px;
       
    }
    .service-box a{
        font-size: 20px;
        margin-top: 5%;
       
    }
    .service-box p{
        font-size: 20px;
    }
    .list-unstyled li{
        font-size: 20px;
    }
    .social-icon {
       
        align-items: flex-start;  /* Alinea los íconos al principio */
        font-size:20px;  /* Aumenta el tamaño del ícono */
        color: #000;  /* Cambia el color de los íconos a negro, puedes poner otro color */
        text-decoration: none;  /* Elimina el subrayado del enlace */
        margin: 10px 0;  /* Agrega un margen entre los elementos */
    }
    
    .social-icon i {
        margin-right: 10px;  /* Agrega espacio entre el ícono y el texto */
    }
    .container_footer h4 {
        margin-bottom: 30px; /* Separación entre títulos y listas */
        font-size: 35px;
    }
    
    
    
    .container_footer ul li {
        margin-bottom: 10px; /* Separación entre elementos de la lista */
        font-size: 20px;
    }
    .container_footer .row {
        display: block;  /* Cambia la distribución de filas a bloque */
    }
    
    .container_footer .col-md-4 {
        width: 100%;  /* Hace que cada columna ocupe el 100% del ancho disponible */
        margin-bottom: 20px;  /* Añade espacio entre cada columna */
        margin-top: 5%;
        border-bottom: 2px solid #ccc;  /* Añade una línea de separación */
        padding-bottom: 20px;  /* Añade un espacio debajo de la columna para no pegar la línea al contenido */
    }
    
    /* Opcional: Elimina el borde del último bloque */
    .container_footer .col-md-4:last-child {
        border-bottom: none;  /* Elimina la línea de separación en el último bloque */
    }
    .container_footer .copyright-text {
        font-size: 20px;  /* Ajusta el tamaño de la fuente en pantallas pequeñas */
    }
}