/*
Custom Css
*/
/*ANIMACION*/

.titulo_animado {
    display: flex;
    font-size: 4rem !important;
    font-weight: bold !important;
}
/*Fin animacion SK*/






/*aNIMACION ELEMENTOS*/
.elemento_a_Animar {
    display: flex;
   
}

.elementos_animados {
    opacity: 0;
    transform: translateY(-100px); /* Comienza más arriba */
}

/* Definimos la animación */
@keyframes bajar {
    0% {
        opacity: 0;
        transform: translateY(-100px); /* Inicia desde arriba */
    }
    80% {
        opacity: 1;
        transform: translateY(10px); /* Hace un pequeño rebote */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Se queda en su posición final */
    }
}
/*Fin animacion elementos*/
.letra_animada {
    opacity: 0;
    transform: translateY(-50px) rotate(-10deg);
    animation: pegar 0.5s forwards;
}

/* Definimos la animación */
@keyframes pegar {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotate(-10deg);
    }
    80% {
        opacity: 1;
        transform: translateY(5px) rotate(5deg);
    }
    100% {
        opacity: 1; /* Se mantiene visible */
        transform: translateY(0) rotate(0);
    }
}

/* Agregamos un retraso diferente a cada letra_animada */
.letra_animada:nth-child(1) { animation-delay: 0.1s; }
.letra_animada:nth-child(2) { animation-delay: 0.2s; }
.letra_animada:nth-child(3) { animation-delay: 0.3s; }
.letra_animada:nth-child(4) { animation-delay: 0.4s; }
.letra_animada:nth-child(5) { animation-delay: 0.5s; }
.letra_animada:nth-child(6) { animation-delay: 0.6s; }
/*letra color blanco*/
.letra_blanca{
 
    text-align:left!important;
    color: #fff;
    font-weight: 400;


}
.letra_izq{
 
    text-align:left!important;
    


}
/*Boton morado*/
.btn-exito {
    color: #fff !important;
    background-color: #4e1987 !important;
    border-color: #3f136e !important;
}

.btn-exito:hover {
    color: #fff !important;
    background-color: #731573fd!important;
    border-color: #6c1469 !important;
}

.btn-check:focus+.btn-exito,
.btn-exito:focus {
    color: #fff !important;
    background-color: #5a1573;
    border-color: #49146c;
    box-shadow: 0 0 0 .25rem rgba(124, 60, 153, 0.5) !important;
}

.btn-check:active+.btn-exito,
.btn-check:checked+.btn-exito,
.btn-exito.active,
.btn-exito:active,
.show>.btn-exito.dropdown-toggle {
    color:#fff !important;
    background-color: #4d146c !important;
    border-color: #4c1365 !important;
}

.btn-check:active+.btn-exito:focus,
.btn-check:checked+.btn-exito:focus,
.btn-exito.active:focus,
.btn-exito:active:focus,
.show>.btn-exito.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(60, 153, 110, .5)
}

.btn-exito.disabled,
.btn-exito:disabled {
    color:#fff !important;
    background-color: #4e1987 !important;
    border-color: #4e1987!important;
}
/*hover*/
.alsar {
    width: 100%;
    
    cursor: pointer;
    transition: transform 0.2s;
}


/*Galria de Imagenes*/
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery-item {
    max-height:680px ;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s;
}


.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    padding: 5%;
    left: 0;
    top: 10%;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0) !important;
    display: flex; /* Usar flexbox para centrar el contenido */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.modal-content {
    max-width: 90%; /* Ajusta el ancho máximo */
    max-height: 80%; /* Ajusta la altura máxima */
    object-fit: contain; /* Mantiene la proporción de la imagen */
}
.fondoTransparente{
    background-color:  rgba(0, 0, 0, 0.485) !important;}
.caption {
    display: none;
   
    text-align: center;
    margin-top: 10px;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}
.carousel-container_mobil{
    display: none;
}
.mobil{
    display: none;
}
@media (min-width: 722px) {
    .alsar:hover {
        transform: scale(1.45);
        z-index: 1000 !important;
      
    }
    .gallery-item:hover {
        transform: scale(1.15);
    }
    
}

@media (max-width: 721px) {
    .letra_izq{
 
        text-align:center!important;
        
    
    
    }
    .letra_blanca_izq{
        text-align: center !important;

    }
    .mobil{
        display: flex;
    }
    .version_web{
        display:none;
    }
    .carousel-container_mobil {
      
        position: relative;
        max-width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .carousel_mobil {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 300%; /* Ajustar al número de imágenes */
    }
    .carousel_mobil img {
        width: 50%;
height: auto;
display: block;
flex: 0 0 100%;
padding: 20%;/* Cada imagen ocupa el 100% del carrusel */
    }
    .prev_mobil, .next_mobil {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 18px;
    }
    .prev_mobil { left: 10px; }
    .next_mobil { right: 10px; }
}

@media (min-width: 1300px) {
    .modal-content {
        max-width: 100% !important; /* Ajusta el ancho máximo */
        max-height: 100% !important; /* Ajusta la altura máxima */
        object-fit: contain; /* Mantiene la proporción de la imagen */
    }
    
}
.lista_punto {
    list-style: none;
    padding: 0;
}

.item_punto {
    margin-top: 10px;
    position: relative;
    padding-left: 20px;
}

.item_punto::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
}

.nota_punto {
    text-align: center;
    color: #A9A9A9;
    font-size: 9px;
}
.letra_withe{
    color: white !important;
}
.inicio_digital{
    background: rgb(2,0,36);
background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 18%, rgba(0,212,255,1) 100%);
}

.impulso_digital{
    background: rgb(2,0,36);
    background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgba(97,9,121,1) 18%, rgba(0,212,255,1) 100%);
}
.impacto_total{
    background: rgb(2,0,36);
    background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgba(187,17,89,1) 18%, rgba(0,212,255,1) 100%);
}
.starter_web{
    background: rgb(2,0,36);
    background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgb(53, 0, 128) 18%, rgba(138,43,226,1) 100%);
    
    

}
.dynamic_web{
    background: rgb(2,0,36);
    background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgb(205, 40, 131) 18%, rgba(148,0,211,1) 80%,rgb(207, 43, 67) 100%);
    

}.premium_web

{background: rgb(2,0,36);
    background: linear-gradient(132deg, rgba(2,0,36,1) 0%, rgb(173, 4, 4) 18%, rgba(148,0,211,1) 80%,rgb(207, 43, 67) 100%);
}
.first_digital{
    background: rgb(36,0,0);
    background: linear-gradient(132deg, rgba(36,0,0,1) 0%, rgb(255, 0, 0) 50%, rgb(255, 2, 108) 100%);
}
.social_pro{
    background: rgb(36,0,0);
    background: linear-gradient(132deg, rgba(36,0,0,1) 0%, rgb(229, 83, 4) 40%, rgb(255, 0, 0) 100%);


}
.branding_total{

    background: rgb(36,0,0);
    background: linear-gradient(132deg, rgba(36,0,0,1) 0%, rgba(255,0,0,1) 40%, rgba(255,20,147,1) 100%);
}
.logos_imagenes{
    background: rgb(0,0,0);
background: linear-gradient(132deg, rgba(0,0,0,1) 0%, rgba(88,24,200,1) 25%, rgba(186,85,211,1) 50%, rgba(255,215,0,1) 100%);

}
.pedidos_adicionales{
    background: rgb(0,0,0);
    background: linear-gradient(132deg, rgba(0,0,0,1) 0%, rgba(50,50,50,1) 40%, rgba(219,112,147,1) 70%, rgba(255,182,193,1) 100%);
}