*{padding: 0px;
   margin: 0px;
   /* display: flexbox; */
   font-family: 'Hind Madurai', sans-serif;
   scroll-behavior: smooth;
   box-sizing: border-box;
   color: #fafafa;
   font-family: 'Viga', sans-serif;
   /* border: solid; */
}

body{
   overflow-x: hidden;
}

a{
   text-decoration: none;
}


header{
   top: 0px;
   width: 100%;
   height: 60px;
   /* background: rgb(31, 78, 121); */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   position: fixed;
   transition: 0.3s;
   z-index: 100;
   padding: 0 2vw;
}
.logo{
   height: auto;
   width: 180px;
   display: flex;
   visibility: hidden;
}

.logo img{
   width: 80%;
   margin: auto 0;
}

.menuDerecha{
   display: flex;
   /* width: 35%; */
   /* border: 1px solid red; */
}

.itemMenu{
   text-align: center;
   margin: auto 5px;
   width: 33%;
   text-transform: uppercase;
   font-size: 16px;
   color: white;
   cursor: pointer;
}

.itemMenu:link{
   text-decoration: none ;
}

.itemMenu span{
   position: relative;
   width: auto;
}

.itemMenu span:before{
   content: "";
   position: absolute;
   width: 0;
   left: 0;
   bottom: 0;
   border-bottom: 2px solid #2e74b6;
}
.itemMenu:hover > span{
   color: #2e75b6;;
}

.itemMenu:hover span:before{
   width: 100%;
   transition: 0.3s;
}

.btnMenuResponsive{
   display: none;
}


.headerActive{
   background: #fafafa;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  }
  
  .headerActive .itemMenu span{
     color:black;
     transition: 0s;
   }
   
   .headerActive .itemMenu span:hover{
      color:#2e75b6;
  }
  
  .headerActive .logo{
     visibility: visible;
     transition: 0.5s;
     height: 100%;
  }
  
  .headerActive .btnMenuResponsive{
     filter: invert();
  }


/* --------------Fin MENU ------------------ */

section,
footer{
   position: relative;
   overflow: hidden;
}

.seccion1{
   height: 100vh;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: url(../img/NotebookMedia.jpg) center no-repeat;
}

video{
   max-width: 100vw;
   top: 0;
   position: absolute;
   object-fit: cover;
   object-position: center; 
   left: 0;
   width: 100%;
   height: 100%;
   
}

.degradado{
   position: absolute;
   width: 100%;
   height: 50%;
   top: 0px;
   background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 100%);
   z-index: 0;
}

.contenedorInicio{
  width: auto;
  height:80vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}
.tituloPrincipal{
   width: auto;
}

.tituloPrincipal h2{
   color: rgba(255, 254, 254, 0.486);
}

.tituloPrincipal :nth-child(1){
   animation: desplazar 2s linear;
}

.tituloPrincipal :nth-child(1){
   animation: desplazar 2s linear  forwards, aparecer 5s linear;
}

.tituloPrincipal :nth-child(2){
   opacity: 0;
   animation-name: aparecer;
   animation-duration: 2s; 
   animation-delay: 1s;
   animation-fill-mode: forwards;
   /* animation: aparecer 3s steps(100, end);; */
}

@keyframes aparecer{
   0%{opacity: 0;}
   100%{opacity: 1;}
}

@keyframes desplazar{
   0%{transform: translatey(-50%)}
   100%{transform: translatey(0%);}
}

/* @keyframes desplazar{
   0%{opacity: 0;; transform: translatey(-50%)}
   100%{opacity: 1;  transform: translatey(0%);}
} */


.idea{
   opacity: 0;
   z-index: 1;
   display: flex;
   width: 350px;
   animation: aparecer 2s forwards 2s;
}

.idea img{
   width: 100%;
   filter: drop-shadow(0px 0px 5px rgba(42, 42, 42, 0.377))
}

.buttonCotizar{
   z-index: 1;
   background: #2e74b6b2;
   border: none;
}


.button{
   width: 150px;
   height: 50px;
   display: flex;
   text-decoration:none;
   cursor: pointer;
   left: calc(50% - 75px);
   border-radius: 10px;
   font-size: 100%;
}


.button span{
   margin: auto;
   color: #fafafa;
}

.button:hover{
   filter: drop-shadow(1px 1px 2px black);
   background: #2e74b6d7;
   border: 0px;
}

.button:hover > .imgEntrar{
   display: initial ;
}


.button2{
   border: 2px solid #2e74b6;
   position: relative;
}

.button2 span{
   margin: auto;
   color: #2e74b6;
}

.button2:hover > span{
   color: white;
}


.button3{
   border: 2px solid #ec615b;
   position: relative;
   background: #ec615b;
}

.button3 span{
   margin: auto;
   color: white;
   text-transform: uppercase;
}
.button3:hover{
   background: #ec615b;
}

/* ------------------------------------------------ */

.notch3{
   position: absolute;
   bottom: 0px;
   left: 0px;
   z-index: 10;
   width: 100%;
   height: 50px;
   overflow:hidden;
   transition: 3s;
}
.notch3:after{
   content:'';
   position:absolute;    
   top: -30px;
   left: calc(50% - 25px);
   width:50px; 
   height:50px;
   transform: rotatey(45deg) rotate(45deg);
   box-shadow: 0px 0px 0px 2500px #fafafa
} 

.contenedorTringulo {
   position: absolute;
   bottom: 15px;
   left: calc(50% - 27px);
   /*  */
    animation: animar 1s linear infinite alternate;
 }

.triangulo{
   width: 55px;
   height: 40px;
   transform: scale(0.8);   /* transform: rotatex(40deg); */
   clip-path: polygon(0 0, 50% 100%, 100% 0);
   background: #fafafa;
   /* background: rgba(31, 78, 121) */
}


@keyframes animar {
   /* from{transform: translateY(5px) scale(0.9); filter: drop-shadow(0px 6px 10px rgba(0, 0, 0, 0.5));} */
   /* from{transform: translateY(5px);} */
   100% {transform: translateY(-25px);}
}


/* ------------------FORMATOS-------------------------- */

h1{
   margin: auto;
   /* font-size: 50px; */
   font-size: 3vw;
   text-align: center;
}

h2{
   margin: auto;
   font-size: 3vw;
   /* font-size: 40px; */
   text-align: center;
   font-weight: lighter;
   text-align: center;
}

h3{
   margin: auto;
   font-size: 25px;
}
p{
   margin: 50px auto;
   font-size: 20px;
   text-align: justify;
}

.clara {
   background: #fafafa;
}

.clara .titulo {
   /* color: #2e75b6; */
   color: black;
}

.clara p {
   color: rgb(105, 103, 103);
}


.oscura {
   background: #2e75b6;

}

.oscura .titulo {
   color: #fafafa;
}

.oscuro p {
   color: #fafafa;
}

.imgPost{
   width: 100%;
}

.contenedorEspaciado{
   position: relative;
   width: 80%;;
   margin: 60px auto;
   display: flex;
   justify-content: center;
}

.contenedorMitad{
   margin: auto;
   width: 45%;

}

.clara .titulo::after,
.oscura .titulo::after{
   display: block;
   margin: .25em auto;
   content: '';
   max-width: 100px;
   height: 4px;
   background-color: #dd5656;
   
}

.seccion2{
   position: relative; 
   overflow: hidden;
   height: auto;
   display: flex;
}

.flecha{
   position: absolute;
   width: 50px;
   height: 50px;
   top: calc(50%);
   cursor: pointer;
   z-index: 10;
   background: url(../img/chevron-left-solid-48.png) center;
}

.izquierda{
   left: 5vw;
}

.derecha{
   right: 5vw;
   transform: rotate(180deg);
}

.contenedorSlider{
   width: 300%;
   /* border: 1px solid red; */
   display: flex;
}

.seccion2 .contenedorEspaciado{
   width: 80vw;
   margin: 60px 10vw;
}


.contenedorBoton{
   height: 60px;
   display: flex;
}

.boton{
   margin: auto;
   display: flex;
   background: #ec615b;
   cursor: pointer;
   height: 50px;
   width: 150px;
   border-radius: 15px;
}

.boton:before{
   position: absolute;
   content: "";
   margin: auto;
   cursor: pointer;
   height: 50px;
   width: 150px;
   border-radius: 15px;
}

.itemsBtn{
   display: flex;
   margin: auto;
}
.spanBtn{
   text-align: center;
   font-size: 18px;
   height: 18px;
}

.imgBtn{
   margin: auto;
   margin-left: 10px;
   height: 24px;
   width: 24px;
}
   
.boton:hover{
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.788);
   transition: 0.5s;
   transform: scale(1.1);
}
.boton:hover .spanBtn{
   transition: 0.5s;
   /* transform: scale(1.1); */
   color: #ffffff;
}

.seccion2 > .imgPost{
   width: 100%;
   display: none;
}

.desplazarIzquierda{
   display: block;
   animation: desplazar2 1s linear, aparecer 1s linear;
}

@keyframes desplazar2{
   0%{transform: translatex(5%)}
   100%{transform: translatex(0%);}
}

/* -------------- seccion3 ----------------- */
.seccion3{
   height: auto;
   display: flex;  
}
.seccion3 .contenedorEspaciado{
   flex-direction: column;
}

.contenedorCentrado{
   width: 70%;
   display: flex;
   flex-direction: column;
   margin: auto;
}

.seccion3 p{
   text-align: center;
}

.contenedorTarjeta{
   margin: auto;
   width: 100%;
   height: auto;
   display: flex;
   flex-wrap: wrap;
}


.tarjeta{
   position: relative;
   width: 28%;
   height: auto;
   background: white;
   box-shadow: 0 0 10px 0 rgba(144, 149, 161, 0.74);
   margin: auto;
   margin-top: 5px;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   /* min-width: 200px; */
}
.tarjeta::before{
   position: absolute;
   content: "";
   left: 10%;
   bottom: 25px;
   width: 80%;
   height: 10px;
   border-radius: 5px;
   box-shadow: 0 0 1px 0px rgba(144, 149, 161, 0.466);
}


.contenedorPlan{
   margin-bottom: 20px;
   height: 60px;
   margin: 30px auto 0px -5%;
   width: 110%;
   display: flex;
   position: relative;
}

.contenedorPlan::before,
.contenedorPlan::after{
   position: absolute;
   content: "";
   width: 5%;
   height: 15px;
   top:100%;
   z-index: -1;
} 

.contenedorPlan::before{
   background: rgba(0, 0, 0, 0.377);
   left: 0;
   clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.contenedorPlan::after{
   background: rgba(0, 0, 0, 0.377);
   left: 95%;
   clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.contenedorPlan1{
   background: linear-gradient(to right, rgb(7, 199, 199) 0%, rgb(11, 172, 172) 100%);
}
   
.contenedorPlan2{
   background: linear-gradient(to right, rgb(94, 158, 56) 0%, rgb(64, 138, 21) 100%);
}
   
.contenedorPlan3{
background: linear-gradient(to right, rgb(231, 137, 14) 0%, rgb(206, 120, 8) 100%);
}

.tarjeta h3{
   margin:auto;
   color: white;
   text-align: center;
}

.tarjeta h2{
   color: black;
   margin: 20px auto;
   position: relative;
   justify-content: center;
   align-items: center;
   display: flex;
   width: 100%;
}

.tarjeta h2:after{
   content: "1 año de hosting gratis";
   position: absolute;
   width: 70%;
   color: rgb(23, 172, 60);
   font-size: 1.5vw;
   bottom: -28px;
}

.tarjeta img{
   width: 50%;
   margin: 10px auto;
   margin-bottom: 0px;
}

.tarjeta a{
   display: none;
}

.tarjeta p{
   width: 80%;
   margin: 0px auto;
}
.tarjeta ul{
   width: 70%;
   margin: 10px auto;
   margin-bottom: 60px;
   list-style: none;
}

.tarjeta li{
   position: relative;
   color: black;
   font-size: 16px;
   padding-top:10px;
   padding-bottom:10px;
   border-bottom: 1px solid rgba(144, 149, 161, 0.616);
   color: rgb(105, 103, 103);
}
.tarjeta:hover{
   box-shadow: 0 0 10px 0 rgba(144, 149, 161, 0.788);
   transform: scale(1.1);
   transition: all 0.2s;
}


.tarjeta:hover::before{
   background:  #fafafa;
}

.tarjeta:hover > h2:after{
 color: white   
 }

.tarjeta:hover  li{
   color: white;
   border-bottom: 1px solid rgba(255, 255, 255, 0.74);
}


.tarjeta:hover > .contenedorPlan{
   background: rgb(255, 255, 255);
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.377);; 
}

.tarjeta1, .tarjeta3{
   transform: scale(0.95);
}

.tarjeta2{
   transform: scale(1);
}

.tarjeta1:hover,
.tarjeta1::before{
   background: rgb(7, 199, 199);
}

.tarjeta2:hover,
.tarjeta2::before{
   background: rgb(94, 158, 56);
}

.tarjeta3:hover,
.tarjeta3::before{
   background: rgb(231, 137, 14)
}

.tarjeta1:hover h3{
   color: rgb(7, 199, 199);
}
.tarjeta2:hover h3{
   color: rgb(94, 158, 56);
}
.tarjeta3:hover h3{
   color: rgb(231, 137, 14)
}

.seccion4{
   width: 100%;
   height: auto;
}
.seccion4 .contenedorEspaciado{
   flex-direction: column;
}

.contenedorEmpresas{
   margin: auto;
   width: 80%;
   height: auto;
   display: flex;
   flex-wrap: wrap;
}  

.contenedorEmpresa{
   background: white;
   width: 30%;
   height: 180px;
   margin: auto;
   border-radius: 10px;
   overflow: hidden;
   display: flex;
   margin-top: 50px;
   transition: 0.5s;
}


.contenedorEmpresa img{
   margin: auto;
   max-width: 80%;
   max-height: 80%;
   filter: grayscale(10);
}

.contenedorEmpresa:hover{
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.568);
transform: scale(1.05);
}

.contenedorEmpresa:hover  img{
   filter: none;
   transition: 0.5s;
   transform: scale(1.1) ;
}
.seccion5{
   background: #fafafa;
   height: auto;
   display: flex  
}

.seccion5 h1, h3{
   color: #2e75b6;
}

.seccion5 p{
   color: rgb(105, 103, 103);
   text-align: justify;
}

.seccion5 a{
   color: #2e75b6;
   cursor: pointer;
}

 /* ------------------------formulario--------------------------- */

.formulario {
   width: 100%;
   margin: auto;
   box-shadow: 0 0 20px 1px rgba(0,0,0,0.3);;
   display: flex;
   flex-direction: column;
}

.contenedorInput{
   position: relative;
   width: 90%;
   margin: auto;
   display: flex;
}

input{
   display: block;
   width: 100%;
   background: rgba(165, 165, 165, 0.1);
   border: 1px solid rgba(0,0,0,0.3);
   margin:auto;
   margin-top: 30px;
   padding: 5px;
   padding-left: 10px;
   color: black;
   font-size: 16px;
}
.input:focus,
textarea:focus{
   outline: 1px solid rgba(0, 0, 0, 0.541);
   background: #dce1e6;
}
.input:focus ~ .label{
   top: 10px;
   color: #2e74b6;
   font-size: 12px;
}
.label {
   position: absolute;
   height: auto;
   top: 36px;
   font-size: 16px;
   padding-left: 10px;
   color: rgba(0,0,0,0.5);
   transition: all 0.2s;
   pointer-events: none;
}

textarea{
   overflow: hidden;
   width: 100%;
   height: auto;
   color: black;
   font-size: 16px;
   resize: none;
   margin:auto;
   margin-top: 30px;
   padding: 10px;
   background: rgba(165, 165, 165, 0.1);
}

.input{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.submit {
   background: rgba(0,0,0,0.7);
   color: white;
   padding: 10px 20px;
   cursor: pointer;
   border: none;
}
.validado label{
   top: 10px;
   color: #2e74b6;
   font-size: 12px;
}

.seccion5 .contenedorBoton{
   margin: 30px auto;
}

.seccion5 .contenedorBoton .buttonEnviarActivo {
   background: #2e74b6;
}

.seccion5 .contenedorBoton .buttonEnviarActivo span {
   color: white
}

 /* ------------------------formulario--------------------------- */

footer{
   background: rgb(32, 32, 32);;
   height: auto;
   display: block;
}
footer .contenedorFooter{
   width: 90%;
   height: auto;
   display: flex;
   margin: auto;
   justify-content: center;
}
footer .contenedorFooter:nth-child(2){
   border-top: 1px solid  #cccccc;
   display: flex;
}

footer .contenedorFooter span{
   margin: 10px 0;
   color: #2e74b6;
   text-align: center;
   /* width: auto; */
}

footer .contenedorFooter:nth-child(2) > span:nth-child(2):before{
   content: "| ";
   margin-left: 5px;
}

footer .contenedorFooter span a{
   margin: auto;
   color: #cccccc;
}


footer .contenedorFooter span a:link{
   text-decoration: none;
}

/* ------------------conocenos---------------------- */
.seccionConocenos{
   height: 80vh;
   background: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80") top no-repeat;
   background-size: cover;
   background-attachment: fixed;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.seccionConocenos .idea{
   animation: none;
   opacity: 1;
}


.seccionConocenos .degradado{
   height: 80%;
}

.clara p a{
   color: #2e74b6;
}

.nuestroTrabajo{
   flex-direction: column;

}
.seccionNuestroTrabajo .contenedortodosPasos{
   flex-direction: column;
   height: auto;
   width: 70px;
   margin: auto;
}
.seccionNuestroTrabajo .button{
   position: relative;
   left: 0;
   margin: auto;
   width: 70px;
   height: 70px;
   border-radius: 50%;
}
.seccionNuestroTrabajo .button img{
   width: 48px;
   height: 48px;
   margin: auto;
}

.contenedorPasos{
   display: flex;
   width: 75%;
   margin: 20px auto;
   height: 80%;
   position: relative;
   background: #eeeeee;
   box-shadow: 1px 1px 5px black;
   border-radius: 15px;
   transform: rotateX(90deg);
   height: 0;
}

.contenedorImgPasos{
   width: 25%;
   position: relative;
   z-index: 1;
   display: flex;
   background: white;
   border-radius: 15px;
   height: 100%;
   margin: auto;
   overflow: hidden;
}

.seccionNuestroTrabajo .contenedortodosPasosActivo{
   width: auto;
}

.seccionNuestroTrabajo .contenedortodosPasosActivo  .contenedorPasos{
   transform: rotateX(0deg);
   height: auto;
}

.contenedorImgPasos img{
   width: 100%;
   margin: auto;;
}

.contenedorTexto{
      display: flex;
      flex-direction: column;
      width: 70%;
      height: 100%;
}

.contenedorTexto p{
   margin: 10px auto;
}

.contenedorTexto h2{
   color: #2e74b6;
   text-align: left;
   margin-left: 0;
}


@media screen and (max-width: 900px){
   .tarjeta{
      margin: 20px auto;
      width: 28%;
      max-height: 300px;
   }

   .tarjeta ul{
      display:  none;
   }

   .tarjeta a{
      display: initial;
      text-align: center;
      margin-bottom:  50px;
   }
   .tarjeta:hover{
      max-height: none;
   }

   .tarjeta:hover > ul{   
      display: initial;
      transition: 1s
   }

   .tarjeta:hover > a{   
      display: none;
   }

   .btnMenuResponsive{
      display: block;
      margin: auto 0;
      cursor: pointer;
   }
   .btnMenuResponsive img{
      width: 36px;
   }

   .menuDerecha{
      position: fixed;
      flex-direction: column;
      background: #fafafa;
      box-shadow: 1px 5px 5px rgb(0 0 0 / 50%);
      top:60px;
      width: 30%;
      height: 100%;
      right: -100%;
      transition: 0.3s;
   }

   .menuActivo{
      right: 0
   }

   .itemMenu{
      height: 50px;
      width: 80%;
      margin: 10px auto;
      display: flex;
   }

   .itemMenu:hover{
      background: #2e74b656;
      border-radius: 15px;
   }

   .itemMenu span{
      margin: auto;
      width: auto;
      font-size:16px;
      color: black
   }

}

@media screen and (max-width: 750px){

   .menuDerecha{
      width: 50%;
   }

   .contenedorEspaciado{
      flex-direction: column;
   }
   .contenedorMitad{
      width: 100%;
   }  
   .contenedorCentrado {
      width: 100%
   }
   .contenedorTarjeta{
      width: 100%;
   }

   .tarjeta h2:after{
      font-size: 2vw;
      line-height: 2vh;
      width: 80%;
   }

   .tarjeta h3{
      font-size: 18px;
   }

   .flecha{
      top: calc(70%);
   }

   .seccion2 .contenedorBoton {
      position: absolute;
      bottom: -60px;
      left: calc(50% - 75px);
      z-index: 10;
   }

   footer .contenedorEspaciado{
      flex-direction: initial;
   }

   .seccionFooter{
      width: 45%;
   }

   footer .contenedorFooter:nth-child(2){
      flex-direction: column;
   }
   
   footer .contenedorFooter:nth-child(2) > span:nth-child(2):before{
      content: "";
   }

   .contenedorPasos{
      flex-direction: column;
   }

   .contenedorPasos:nth-child(2n){
      flex-direction: column-reverse;
   }

   .contenedorImgPasos{
      width: 80%;
      margin: 10px auto;
   }

   .contenedorTexto {
      width: 80%;
   }

   .contenedorTexto h2 {
      text-align:center;
      font-size: 8vw;
      margin: auto;
  }
}



@media screen and (orientation: portrait){
   h1{
      font-size: 5vw;
   }
}
@media screen and (max-width: 550px) and (orientation: portrait){
   

   .menuDerecha{
      padding-top: 50px;
      width: 100%;
   }


   .tituloPrincipal{
      width: 90vw;
      left: calc(50% - 45vw);
   }

   .tituloPrincipal h1{
      /* font-size: 36px; */
      font-size: 10vw;
      margin-bottom: 10px;
   }
   .tituloPrincipal h2{
      color: rgba(255, 254, 254, 0.486);
   }

   .idea img{
      width: 70%;
      margin: auto;
   }

   h1, h2{
      font-size: 10vw;
   }
   p, a{
      font-size: 16px
   };

   .contenedorBoton{
      position: absolute;
      bottom: -60px;
      left: calc(50% - 75px);
   }

   .flecha{
      top: calc(75%);
      }

   .tarjeta{
      margin: 20px auto;
      width: 80%;
      max-height: 400px;
   }

   .tarjeta:hover{   
      margin: 50px auto;
   }

   .tarjeta h2:after{
      font-size: 4vw;
      line-height: 2vh;
      width: 80%;
   }

   .tarjeta ul{
      display:  none;
   }

   .tarjeta:hover > ul{   
      display: initial;
      transition: 1s
   }

   .contenedorEmpresa{
      background: white;
      width: 80%;
      height: 150px;
      margin: auto;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      margin-top: 50px;
   }
   
   .contenedorEmpresa img{
      margin: auto;
      max-width: 80%;
      max-height: 80%;
      filter: grayscale(10);
   }

   .seccion5 .contenedorBoton {
      position: relative;
        margin: 30px auto;
        bottom: 0;
        left: 0;
     }

   .seccionFooter{
      width: 80%;
   }

   .contenedorImagenPrincipal{
      margin-top: calc(50vh - 250px);
   }
}


#modal{
   position: fixed;
   width: 100vw;
   height: 100vh;
   z-index: 10;
   display: none;
   top: 0;
   background: rgba(0, 0, 0, 0.61);
   backdrop-filter: blur(4px);
}

.modalActivo{
   display: flex !important;
}
.contenidoModal{
   width: 300px;
   height: 300px;
   max-width: 90vw;
   max-height: 90vw;
   background: #fafafa;;
   margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   text-align: center;
   box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);
   border-radius: 24px;
   position: relative;

} 

.contenidoModal span{
   width: 90%;
   color: black;
   text-align: center;
   margin: none !important;
}
.contenidoModal img{
   width: 50%;
}

.contenidoModal .cerrarModal{
   width: 50px;
   height: 50px;
   position: absolute;
   right: 10px;
   top: 10px;
   cursor: pointer;
   filter: invert(100%);
}
.contenidoModal .cerrarModal:hover{
   transform: scale(1.2);
}