/* styles.css */

/* Estilo para el encabezado */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.2); /* Transparente inicialmente */
    color: #fff;
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
    z-index: 1000; /* Asegura que el encabezado esté encima del contenido */
    display: flex;
    justify-content: center;
}

/* Estilo para el encabezado cuando se hace scroll */
.header.scrolled {
    background-color: rgba(51, 51, 51, 0.9); /* Fondo sólido al hacer scroll */
}

/* Estilo para el contenedor del menú */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 10px;
    position: relative; /* Necesario para el posicionamiento del menú */
}

/* Estilo para el ícono del menú en dispositivos móviles */
.menu-toggle {
    display: none; /* Oculta el ícono del menú por defecto */
    font-size: 24px;
    cursor: pointer;
    margin-left: auto; /* Alinea el ícono a la derecha */
}

/* Estilo para los elementos del menú */
.navbar-menu {
    display: flex;
    align-items: center;
    position: relative;
}

/* Estilo para los enlaces del menú */
.navbar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar-menu li {
    position: relative; /* Necesario para el submenú */
}

/* Estilo para los enlaces del menú */
.navbar-menu a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
}

/* Estilo para el submenú */
.submenu {
    display: none; /* Oculta el submenú por defecto */
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(-20px); /* Inicialmente desplazado hacia arriba */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transiciones suaves para la opacidad y la transformación */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #3DAA38;
    padding: 10px;
    list-style: none;
    margin: 0;
    z-index: 1002;
    width: 200px; /* Ajusta el ancho según sea necesario */
    border-radius: 8px; /* Redondea los bordes del submenú */
    overflow: hidden;
}

/* Mostrar submenú al pasar el ratón */
.services:hover .submenu {
    display: block; /* Asegura que el submenú se muestre */
    opacity: 1; /* Hace visible el submenú */
    transform: translateY(0); /* Restaura la posición original */
}

/* Cambiar color de fondo y color de texto al hacer hover */
.submenu a {
    color: #fff; /* Color de texto por defecto */
    text-decoration: none; /* Quita el subrayado de los enlaces */
    display: block; /* Asegura que el área de clic sea el bloque completo */
}

/* Color de fondo y color de texto al pasar el ratón */
.submenu a:hover {
    background-color: rgba(85, 85, 85, 0.8); /* Cambia el color de fondo al pasar el ratón con transparencia */
    color: #fff; /* Cambia el color del texto al pasar el ratón */
    width: 100%;
}

/* Menú responsive */
@media (max-width: 768px) {
    .navbar-menu {
        display: none !important; /* Oculta el menú por defecto en dispositivos móviles */
        flex-direction: column !important;
        position: absolute !important;
        top: 60px !important; /* Coloca el menú debajo del encabezado */
        right: 0;
        background-color: #333;
        width: 100%;
        padding: 10px;
        z-index: 1001 !important; /* Asegura que el menú esté encima de otros elementos */
    }
    
    .navbar-menu.active {
        display: flex !important; /* Muestra el menú desplegable cuando está activo */
    }
    
    .navbar-menu ul {
        display: block !important;
        padding: 0; /* Ajusta el padding para el menú */
    }
    
    .navbar-menu li {
        margin: 10px 0;
    }
    
    .navbar-menu a {
        padding: 10px;
        display: block !important;
    }

    /* Submenú en responsive */
    .submenu {
        display: none !important;
        flex-direction: column;
        background-color: #3DAA38;
    }
    
    .services.active .submenu {
        display: flex !important;
    }
    
    .menu-toggle {
        display: block !important; /* Muestra el ícono del menú en dispositivos móviles */
    }
}


.wrapper0 {
  width: 100%;
  /*background: #000;*/
  overflow: hidden;
}
.box {
  position: absolute;
}
.boxes {
  position: relative;
}

.textItem {
  display: inline-block;
  font-size: 60px;
  white-space: nowrap;
  display: inline-block; /* Necesario para aplicar la rotación correctamente */
 transform: rotate(0deg); /* Rota el texto 45 grados */
 padding-top: 30px;
}

.textItem2 {
  display: inline-block;
  font-size: 45px;
 white-space: nowrap;
 /* display: inline-block; /* Necesario para aplicar la rotación correctamente */
 transform: rotate(0deg); /* Rota el texto 45 grados */
 padding-top: 0px;
 color: #999;
}


@media screen {
/*PLANTILLA PROYECTOS*/
/*MODAL*/
#ModalGaleria .ContentModal,
#SlideModalGaleria,
#SlideModalGaleria .SlideItems { height: 100%;}
#SlideModalGaleria .SlideItems div { display: flex; align-items: center; justify-content: center;}
#SlideModalGaleria img { max-width: 100%; max-height: 100%;}

/*select*/
#ModalGaleria div.select { opacity: 1; visibility: visible; } 


/*modalgaleria*/
.modalgaleria { overflow: hidden; }
.modalgaleria #ModalGaleria { opacity: 1 !important; visibility: visible !important; }
.modalgaleria #ModalGaleria .ContentModal{ display: block; /*opacity: 1; visibility: visible;*/
                                           -webkit-transform: scale(1);
                                            transform: scale(1); }                                            
/*.............*/
#FlotanteWapp { position: fixed; z-index: 200; right: 16px; bottom: 16px;}
    #FlotanteWapp > p { display: none;}
    #FlotanteWapp a { font-size: 0; display: block; width: 60px; height: 60px; background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 50% 50%; border-radius:50%; margin-bottom: 16px; background-size: 30px auto;
                        box-shadow: 0 0 30px rgba(51,51,51,.3);
                        -webkit-transition: background-color 0.3s var(--easing-classic);
                        transition: background-color 0.3s var(--easing-classic);}
                        
    .Desktop #FlotanteWapp a:hover { background-color: #000;}
    
    #DetalleProyecto {background-color: #F2F2F2;}
        #DetalleProyecto header.general { width: 100%; height: 50px; padding: 0 30px; text-align: right; background: url("../imagenes/filete-tricolor.png") no-repeat 0 0; background-size: 100% 3px;}
            #DetalleProyecto header.general > .btn-verde { border-radius: 0 0 5px 5px; font-size: 0.9rem;}

        .Plantilla {}
            .Plantilla > header { position: relative; overflow: hidden; max-height: 1060px; text-align: left; background-color: #CCCCCC;}        
                #SlideProyectos { width: 100%;}
                
                #HeroVideo { width: 100%;}
                #HeroVideo video { width: 100%;}
                
                #TituloProyecto { position: absolute; z-index: 100; top: 0; left: 0; width: 530px;  padding:0 130px 0 30px;  height: 100%; background: url(".../imagenes/diagonal-interna.svg") no-repeat 100% 0;
                                  display: inline-flex; align-items: center; justify-content: center;}
                    
                    #TituloProyecto div {}
                        #TituloProyecto h1 { font-size: 2.5rem; display: block; max-width: 400px; margin:0;}
                        #TituloProyecto h1 span { font-size: 4.5rem; line-height: 1em !important;}
                        #TituloProyecto h1 span.Ex { font-size: 1.7rem; display: block;
                                                    -webkit-transform: translateY(0);
                                                     transform: translateY(0);}

                        a.BtnConsultaYa { display: block; margin-top: 16px; border-radius: 5px; font-size: 1.35rem;}
                        #AccionesProyecto { display: none;}
                
                

           #DataGeneralProyecto { padding: 70px 0; background-color: #FBFBFB;}
               #DataGeneralProyecto .Content { display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
                   #DataGeneralProyecto .Content header { display: none;}
                   
                     #DataProyecto { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center;}
                         #DataProyecto div { flex:  0 0 auto; margin: 6px 0;  padding: 5px 14px 5px 10px; text-align: center; border-left: 2px solid var(--verde); /*outline: 1px solid red;*/}
                         #DatoAnio { border:none !important;}
                         /*#DatoDesarrollo { max-width: 230px;}*/  
                               
                        #DataProyecto h3 { font-size: 0.8rem; color: var(--grisproyecto);}
                        #DataProyecto h4 { font-size: 1rem;}

           #UbicacionProyecto { display: flex; flex-wrap: wrap; background-color: #fff;}
              #UbicacionProyecto > header { flex: 1;  display: flex; justify-content: flex-end; align-items: center;}                   
                   #UbicacionProyecto > header figure { flex: 1; height: 100%; min-height: 370px;}   
                   
                   #ContentUbicacion { text-align: left; padding: 20px 40px 20px 10px;}
                       #ContentUbicacion h3 { font-size: 1rem; margin: 5px 0;}
                       #ContentUbicacion h4 { font-size: 0.9rem; line-height: 1.5em !important; color: var(--grisproyecto);}           

               #UbicacionMapa { flex: 1;}
                   #UbicacionMapa iframe { width: 100%; height: 100%;}

          #DescipcionProyecto { padding: 70px 0;}
              #DescipcionProyecto header { text-align: center;}
                  #DescipcionProyecto h3 { display: block; font-size: 1rem; color: var(--negro); margin-bottom: 15px;}

              #ContentDescripcion { display: flex; flex-wrap: wrap; margin: 0 auto;}
                  #ContentDescripcion > div { flex: 1; text-align: left; margin: 0 15px; }
                  #ContentDescripcion h4,
                  #ContentDescripcion p { font-size: 0.9rem; text-align: justify; line-height: 1.5em !important;}                 
                                   

         #GaleriaFotos { position: relative; width: 100%; display: block;}
             a.BtnPantallaCompleta { position: absolute; z-index: 200; top: 0; left: 50%; font-size: 0.8rem; margin-left: -100px; padding-left: 45px; background-image: url("../imagenes/icono-fullscreen.svg"); background-repeat: no-repeat; background-position: 15px 50%; border-radius: 0 0 5px 5px;}
             
             #CarrselAmbiente { position: relative; width: 100%; display: block;}
                 li.splide__slide { position: relative; overflow: hidden; }  
                 li.splide__slide figure { width: 100%; /*max-width: 750px;*/}
                 li.splide__slide img { max-width: 100%; display: block;}

                 .splide__arrow { background-color: var(--verde);}
                 .splide__arrow svg { display: none !important;}
                 .splide__arrow--prev { background-image: url("../imagenes/flecha-left.svg"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}
                 .splide__arrow--next { background-image: url("../imagenes/flecha-rigth.svg"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto;}

         #AmenitiesProyecto { padding: 25px 0; background-color: var(--blanco);}
             #AmenitiesProyecto header { display: flex; flex-wrap: wrap;  width: 100%;}
             #AmenitiesProyecto header div { flex: 1; text-align: center; padding: 25px 10px;}

             #AmenitiesProyecto figure { height: 60px; text-align: center; margin: 0 auto 15px auto;}
             #AmenitiesProyecto figure img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto;}
             #AmenitiesProyecto h2 { font-size: 1rem; width: 100%; max-width: 125px; margin: 0 auto;}

         #PlanosProyecto {}             
             #PlanosDespcipcion { display: inline-block; text-align: left; padding: 60px 0; margin: 0 auto;}                 
                 #PlanosDespcipcion > p { text-align: center;}
                 #PlanosDespcipcion > p strong { display: block; font-size: 1rem; color: var(--negro); margin-bottom: 10px;}
                 #PlanosDespcipcion > div { min-height: 70px; padding-left: 60px; background: url("../imagenes/building.svg") no-repeat 0 0; background-size: 40px auto;}
                 #PlanosDespcipcion > div p { font-size: 0.9rem; line-height: 1.5em !important; text-align: justify; color: var(--grisproyecto);}
             
             #UXPlanos { display: flex; flex-wrap: wrap; width: 100%;}
                 #GaleriaPlanos { flex: 1; position: relative; overflow: hidden;}
                     #GaleriaPlanos figure { position: absolute; top: 0; left: 0; width: 100%; opacity: 0;
                                             -webkit-transition: opacity 0.5s var(--easing);
                                             transition: opacity 0.5s var(--easing);}
                     #GaleriaPlanos figure:last-child { position: relative;}                 
                     #GaleriaPlanos img { max-width: 100%; display: block;}
                     #GaleriaPlanos figcaption { display: none;}                         

                 #NavPlanos { flex: 0 0 50px; align-self: flex-start;}
                     #Pisos { text-align: center;}
                         #Pisos > p { margin-bottom: 5px; font-size: 0.8rem;}
                         #NavVistas { width: 40px; text-align: center; padding: 5px 0; background-color: var(--blanco); border:1px solid #707070; border-radius: 30px; margin: 0 auto;}
                             #NavVistas a { position: relative; width: 30px; height: 30px; border-radius: 50%; margin: 0 auto; font-size: 13px; color:var(--negro); /*background-color: var(--blanco);*/
                                                display: flex; align-items: center; justify-content: center;
                                                background-color: #ccc;
                                                -webkit-transform: scale(0.4);
                                                transform: scale(0.4);}

                            #NavVistas a p { position: absolute; top: 0;  left: 40px; /*white-space: nowrap;*/ width: 100px; border-radius: 5px; padding: 5px; background-color: var(--negro);
                                             -webkit-transform: scale(0);
                                              transform: scale(0);}
                                   
                 /*Desktop*/
                 .Desktop #NavVistas a:hover { background-color: var(--negro);}
                 
                 /*select*/
                 #GaleriaPlanos figure.select { opacity: 1;}
                 #NavVistas a.select { background-color: var(--verde); color: var(--blanco);
                                           -webkit-transform: scale(1);
                                           transform: scale(1);}
                                           
                 #NavVistas a.select p {-webkit-transform: scale(1);
                                           transform: scale(1);}
                 /*......*/
                 
           #VideoDestacado { position: relative; flex: 1; padding-bottom: 42%; height: 0; width: 100%; max-width: 1360px; margin: 0 auto;}
               #VideoDestacado iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
                 
                 
        #SustentableProyecto { padding: 50px 0;}
            #SustentableProyecto header { text-align: center;}
                #SustentableProyecto header h2 { display: inline-block; font-size: 2rem; letter-spacing: 3px; padding-bottom: 5px; background: url("../imagenes/filete-tricolor.png") no-repeat 0 100%; background-size: 100% 3px;}
                #SustentableProyecto header p { display: block; padding-top: 5px; font-size: 1.5rem; letter-spacing: 3px;}
            
            #ListaSustentable { display: flex; flex-wrap: wrap; justify-content: center; margin: 30px auto;}
                #ListaSustentable > div { flex: 1 0 250px; margin: 5px; padding: 30px; text-align: center; background-color: var(--blanco);}
                #ListaSustentable figure { width: 120px; height: 130px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
                #ListaSustentable img { max-width: 100%; display: block;}
                #ListaSustentable h3 { font-size: 0.9rem; line-height: 1.5em !important; width: 100%; max-width: 200px; margin: 0 auto; color: #333333;}
                #ListaSustentable h3 strong { font-size: 1rem; color: var(--negro);}
         
        #AccesosWapp { display: inline-flex; flex-wrap: wrap;}
            #AccesosWapp a { flex: 0 0 auto; margin: 0 8px;}        
        
        #MasProyectos { background-color: #DFDFDF; margin-bottom: 5px; padding: 40px 0;}
            #MasProyectos .Content {}
                #MasProyectos .Content > header { display: block; padding:0 70px 30px 70px; } 
                    #MasProyectos h2 { font-size: 1.7rem;}
                    
                #ListaProyectos { max-width: 1500px;margin: 0 auto; padding-left: 30px; padding-right: 30px;}
                   
/*EXCEPCIONES*/
#id-san-nicolas-3850 #TituloProyecto {width: 650px;}

#id-25-mayo-22 #DatoArquitecto {flex: 0 0 550px;}
}


@media (max-width: 1920px) {
   .Plantilla > header { max-height: none;}
}

@media (max-width: 1850px) {
    #NavVistas a.select p { display: none;}
    #GaleriaPlanos figcaption { display: block; position: absolute; top: 10px; left: 10px; font-size: 1rem; color: var(--blanco);  border-radius: 5px; padding: 5px; background-color: var(--negro);}
    #GaleriaPlanos { margin-right: 30px; border: 1px solid #ccc;}
}

@media (max-width: 1500px) {
    #TituloProyecto { width: 400px; text-align: left; justify-content: flex-start; padding-left: 45px;}
        #TituloProyecto h1 { font-size: 2rem;}
        #TituloProyecto h1 span { font-size: 3.5rem;    }
        #DataGeneralProyecto { padding-top: 45px; padding-bottom: 45px;}        
            
    #ListaProyectos {max-width: 1300px;}
    #MasProyectos .Items { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
    
/*EXCEPCIONES*/
#id-san-nicolas-3850 #TituloProyecto { width: 500px;}

#id-don-bosco-473 #DatoArquitecto,
#id-don-bosco-473 #DatoObra,
#id-don-bosco-473 #DatoDireccion { flex: 0 0 220px; }
}

@media (max-width: 1300px) {
     #DataGeneralProyecto .Content { max-width: none; padding: 0 30px;}      
}

@media (max-width: 1200px) {          
    #PlanosDespcipcion { padding-left: 30px;}
        #UXPlanos { margin-bottom: 50px;}        
        #VideoDestacado {flex: 1 1 100%; padding-bottom: 42%;}  
        
        #GaleriaPlanos {  margin-left: 30px; margin-right: 30px; border: 1px solid #ccc;}
    
    #VideoDestacado { padding-bottom: 56%;}
}

@media (max-width: 1110px) {
    #ListaProyectos {max-width: 800px;}
}

@media (max-width: 1100px) {          
    #UbicacionProyecto > header,
    #UbicacionMapa { flex: 1 1 100%;}    
    #UbicacionMapa { height: 300px;}
    
    #AmenitiesProyecto header div { flex: 1 0 145px;}
    
    #MasProyectos { padding-bottom: 25px;}
        #MasProyectos .Content > header {padding-bottom: 10px;}    
        #ListaProyectos {} 
        #MasProyectos .Items { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 0 auto;}
            #MasProyectos h2 br { display: none;}
}

@media (max-width: 1023px) {    
    
    #TituloProyecto { display: none;}  
    
    #DataGeneralProyecto { padding-top: 35px;}
        #DataGeneralProyecto .Content { justify-content: flex-start; align-items: flex-start;}
            #DataGeneralProyecto .Content header { display: block; flex: 1 1 100%; max-width: none; text-align: left; margin: 0 0 24px 0; padding-left: 0; padding-bottom: 5px; background: url("../imagenes/filete-tricolor.png") no-repeat 0 100%; background-size: 100% 3px;}           
                #DataGeneralProyecto .Content header p { font-size: 0.8rem; letter-spacing: 5px; color: var(--grisproyecto);}
                #DataGeneralProyecto .Content header h2 { font-size: 2.8rem; color: var(--grisproyecto);}
                #DataGeneralProyecto .Content header h2 br { display: none;}                       
                #DataGeneralProyecto .Content header .Ex { display: block; font-size: 1.5rem; padding-bottom: 16px; color: var(--grisproyecto);}

            #DataProyecto { flex: 1 1 100%; flex-wrap: wrap;  margin-top: 5px;}
                #DataProyecto div { flex: 1 1 50% !important;  max-width: none !important; text-align: left; margin: 0 0 16px 0; padding: 0 16px 0 0; border: none;}            
                #DataProyecto h4 { margin-top: 2px;}
                 
            #FlotanteWapp { position: relative; z-index: 0; right: auto; bottom: auto; margin: 24px 0 0 0;}  
                #FlotanteWapp > p { display:block; margin-bottom: 16px; text-align: left; font-size: 1.5rem; font-weight: 300;}

                #FlotanteWapp a {display: block; width: 100% !important; height: auto; padding: 10px 10px 10px 35px; border-radius: 5px; font-size: 1.3rem; font-weight: 600; color: var(--blanco); background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 10px 50%; box-shadow: none; cursor: pointer; 
                                 -webkit-transition: background-color 0.3s var(--easing-classic);
                                 transition: background-color 0.3s var(--easing-classic);}
                
                .Desktop #FlotanteWapp a:hover { background-color: #000;}
   
       a.BtnPantallaCompleta { display: none;}
       
       #SustentableProyecto { padding-bottom: 25px;}
}

@media (max-width: 920px) { 
    #DescipcionProyecto h3 { margin-bottom: 0;}
    #ContentDescripcion > div { flex: 1 1 100%; margin: 10px 0; }
}

@media (max-width: 800px) {
    #PlanosDespcipcion { margin-right: 30px; padding-left: 0; padding-right: 0;}
    
    #GaleriaPlanos { flex: 1 1 100%; margin-right: 0; margin-left: 0;}
    #NavPlanos { flex: 0 0 300px; margin: 0 auto; }
        #Pisos { padding: 0 15px; margin: 15px 0;}
        #Pisos > p { display: none;}
        #NavVistas { display: flex; border: none; background: none;}
        #Pisos nav { width: auto;}
        .Interacciones a { flex:0 0 30px;}          
}

@media (max-width: 686px) {
    #UbicacionProyecto > header { order: 2; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
       #UbicacionProyecto > header figure { display: none;}
       #ContentUbicacion { flex: 1 1 100%; padding: 30px;}  
        
    #UbicacionMapa { order: 1;}    
    
    #PlanosDespcipcion > p { text-align: left;}
    #PlanosDespcipcion > div { padding-left: 0; background: none; min-height: 0;}
    #DescipcionProyecto h3 { text-align: left;}
    #ContentUbicacion h4,
    #PlanosDespcipcion p:last-child { text-align: justify;}
    
    #MasProyectos .Content { padding-bottom: 25px;}
    #MasProyectos .Items { max-width: 350px;}     
}

@media (max-width: 550px) {
    #DataProyecto div { flex: 1 1 100% !important; padding-right: 0;}
    
    #DescipcionProyecto { padding: 35px 0;} 
    #AccesosWapp a { flex: 1 1 100%; margin:8px 0;}    
}

@media (max-width: 500px) { 
        
        #DescipcionProyecto .Viewport { padding:0 30px;}
        
        #AmenitiesProyecto header div { padding-top: 10px; padding-bottom: 18px;}        
            #AmenitiesProyecto h2 { font-size: 0.9rem;}
            #AmenitiesProyecto figure { height: 45px;}        
        
        #PlanosDespcipcion { padding:40px 10px; margin-right: 0;}
        
        #QuickContacto p span { display: block;}        
        
        #DatosEmpresa figure { margin-bottom: 16px;}
   
   #MasProyectos h2 { font-size: 1.3rem;}
  
   #MasProyectos .Items { max-width: none;} 
   .Items header img { margin: 0;}
   #ListaProyectos {padding-left: 15px; padding-right: 15px;}
}


/*Estilos generales del boton whatsapp*/
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: breathe 2s ease-in-out infinite;
}

/*Estilos solo al icono whatsapp*/
.whatsapp-btn i {
  color: #fff;
  font-size: 24px;
  animation: beat 2s ease-in-out infinite;
  text-decoration: none;
}

/*Estilos con animation contorno respirando*/
@keyframes breathe {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/*Estilos de animacion del icono latiendo*/
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}