body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
            background-image: url(m.png);
           
     
        }

        header {
            
            padding: 5px 2;
        }



/*-----------PRIMER APARTADO---------------*/

.men{
    
    color: white;
           font-family: serif,georgia;
          
            font-size: 20px;
            margin: 5;
}
 
.portada{
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  justify-content: space-around;
    align-items: center;
    padding: 10px;
    min-height: 10vh;
    
    

   background:rgba(0, 0, 0, 0.5);
    padding: 10px;
    box-shadow: 14px 14px 20px black;
    border-radius: 0px 0px 70px 70px;
    
   -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    
}



/* ----------------------------------------------
 * Generated by Animista on 2024-11-30 16:13:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


.presentacion{
    
    display: flex;
   
 
    height: 450px;
    width: 850px;    
   
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    
    
}

.imagen1{
    
   max-width: 300px;
  
    align-content: center;
    border-radius: 50px;
    border: 10px solid #FFFFFF;
    box-shadow: 14px 14px 20px black;;
}

.s1{
    
    max-width: 300px;
    align-content: center;
    border-radius: 50px;
    
    
    justify-items: center;
    
}

.p1{
    
    
    align-self: center;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 40px; 
color: #EBD758;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}



.p2{
    text-align: justify;
    align-self:center;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 25px; 
color: white;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}


/*-----------SEGUNDO APARTADO---------------*/

.linea{
    
    height: 50px;
    background-color: #EBD758;
}

.plinea{
    
     text-align: justify;
    align-self:center;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 25px; 
color: white;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}


.servicios{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;
    
}

.calidad{
    
     
   width: 140px;
    height: 130px;
  margin-top: 10px;
    align-content: center;
    border-radius: 50px;
    border: 10px solid black;
    box-shadow: 14px 14px 20px black;;
    
}



.innovacion{
    
     
width: 140px;
    height: 130px;
   margin-top: 10px;
    align-content: center;
    border-radius: 50px;
    border: 10px solid black;
    box-shadow: 14px 14px 20px black;;
    
}

.compromiso{
    
     
width: 140px;
    height: 130px;
   margin-top: 10px;
    align-content: center;
    border-radius: 50px;
    border: 10px solid black;
    box-shadow: 14px 14px 20px black;;
    
}

.experiencia{
    
     
width: 140px;
    height: 130px;
   margin-top: 10px;
    align-content: center;
    border-radius: 50px;
    border: 10px solid black;
    box-shadow: 14px 14px 20px black;;
    
}


/*-----------TERCER  APARTADO---------------*/


.MyV{
    
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    
   
}


.mision{
    
    display: flex;
    flex-direction: column;
 width: 570px;
   
    margin: 10px;
     background:rgba(0, 0, 0, 0.5);
    padding: 15px;
    
    margin-top: 50px;
    box-shadow: 14px 14px 20px black;
     border-radius: 50px 50px 50px 50px;
}


.vision{
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding: 15px;
   width: 560px;
   
    text-align: center;
     background:rgba(0, 0, 0, 0.5);
 margin-top: 50px;
    box-shadow: 14px 14px 20px black;
   border-radius: 50px 50px 50px 50px;
}


.pmv{
    
text-align: center;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 35px; 
color: #EBD758;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}


.pt{
    white-space: pre-wrap;
   text-align: justify;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 20px; 
color: white;
    
}




/*-----------CUARTO  APARTADO---------------*/


.PQ{
    
    
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
     margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
   
     
   
}

.PQcontenido{
    
    display: flex;
    flex-direction: column;
   
    justify-content: center;
    word-wrap: break-word;
   
    width: 800px;
  padding: 15px;
    
    background:rgba(0, 0, 0, 0.5);
  
    box-shadow: 14px 14px 20px black;
    border-radius: 40px 40px 40px 40px;
    
}

/*--*******************---------CUARTO APARTADO *********************++--*/





.fin{
     display: flex;
    background:rgba(0, 0, 0, 0.5);
    flex-direction: row;
    justify-content: space-around;
   
    margin: 15px;
    margin-top: 50px;
    margin-bottom: 35px;
   flex-wrap: wrap;
    padding: 50px;
    box-shadow: 14px 14px 20px black;
   border-radius: 70px;
    
    
}
ul{
    list-style: none;
}

.f1{
   display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    width: 450px;
    height: 420px;
   
}
.espacio{
    height: 20px;
}
.f1 h3{
    
    
          text-align: justify;
font-family: Comic Sans MS; 
    position: relative;
   
font-weight:bold; 
font-size: 28px; 
color: #EBD758;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}


.f1 h3::before{
    
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color:  #EBD758;
    height: 5px;
    box-sizing: border-box;
    width: 260px;
}

.f1 ul li:not(:last-child){
    
    margin-bottom: 10px;
}

.f1 ul li a{
    
    
    
    font-weight: 400px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    text-align: justify;
     
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 20px; 
color: white;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}

.f1 ul li a:hover{
    color: white;
    padding-left: 8px;
}

.f2{
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    
    width: 400px;
  
}

.f2 h3{
    
    
          text-align: justify;
font-family: Comic Sans MS; 
    position: relative;
    
font-weight:bold; 
font-size: 28px; 
color: #EBD758;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}


.f2 h3::before{
    
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color:  #EBD758;
    height: 5px;
    box-sizing: border-box;
    width: 260px;
}


.imagenesredes{
    display: flex;
    flex-direction: row;
    align-items: center;
    
    
}

.face{
    align-self: center;
    height: 40px;
    width: 40px;
    margin: 10px;
}
      
.insta{
    align-self: center;
    height: 40px;
    width: 40px;
    margin: 10px;
}

.wh{
    align-self: center;
    height: 40px;
    width: 40px;
    margin: 10px;
}

       


      

.sec1{
    

    
    align-self: center;
          text-align: center;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 18px; 
color: white;
    text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
    
    
}



/* Botón del menú*/
.menu-toggle {
    display: none;
    background-color: #333;
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
}

/* Ajustes para telefono */
@media (max-width: 900px) {
    .menu {
        display: none; 
        flex-direction: column;
        background-color: #333;
        position: relative; /* Permitir que el menú empuje el contenido hacia abajo */
       
        right:100px;
        width: 100%; 
    }

    .menu-toggle {
        display: block; 
        
    }

    .menu li {
        text-align: left; 
        border-bottom: 1px solid #444;
    }

    .menu li:last-child {
        border-bottom: none;
    }
}

.menu.open {
    display: flex; 
}
 /* Estilos del menú */
h2{
    color: white;
           font-family: serif,georgia;
          
            font-size: 20px;
            margin: 5;
}
        nav {
            background-color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
.menu > li {
  position: relative; 
}
.menu > li > a:hover {
  background-color: #444; 
}

/* Ocultar menu */
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute; /* empujar contenido */
  top: 100%; /* debajo de la galeria */
  left: 0;
  background-color: #444; 
  display: none; 
  z-index: 10;
}

.submenu li {
  border-bottom: 1px solid yellow; 
}

.submenu li:last-child {
  border-bottom: none; 
}

.submenu li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

.submenu li a:hover {
  background-color: #555; 
}

/* Estilos del imagen */
        nav .menu-image {
            
            margin-left: 20px;
        }

        nav .menu-image img {
            max-width: 90px;
            max-height: 90px;
        }

/* Mostrar el submenú al seleciionar galeria*/
.submenu-parent:hover .submenu {
  display: block;
}

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-grow: 1; 
            justify-content: space-around;
        }

        nav ul li {
            flex: 1;
            text-align: center;
        }

        nav ul li a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 10px 0;
            background-color: #333;
            transition: background-color 0.3s ease;
        }

        nav ul li a:hover {
            background-color: gray;
        }

        

        /* query para telefonos menu */
        @media (max-width: 768px) {
            nav ul li a {
                padding: 12px 0;
                font-size: 14px;
            }

            nav .menu-image img {
                max-width: 40px;
                max-height: 40px;
            }
        }
.submenu {
    position: static; /* Submenús  */
  }
}

        @media (max-width: 480px) {
            nav ul li a {
                padding: 10px 0;
                font-size: 12px;
            }
            .submenu {
    position: static; /* Submenús  */
  }
}

            nav .menu-image img {
                max-width: 30px;
                max-height: 30px;
            }
        }