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

        header {
            
            padding: 5px 2;
        }

.introduccionGaleriaclosets{
    
    display: flex;
    flex-direction: column;
    
    align-content: flex-start;
    justify-content: flex-start;
    
    margin: 15px;
    padding: 10px;
    border-radius: 50px 50px 50px 50px;
     background:rgba(0, 0, 0, 0.5);
    box-shadow: 14px 14px 20px black;
    
    -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both;
	        animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) o.2s 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;
  }
}


 
.intro{
   

          text-align: justify;
font-family: Comic Sans MS; 
   
font-weight:bold; 
font-size: 25px; 
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;
}

.introP{
     text-align: justify;
font-family: Comic Sans MS; 
    position: relative;
    
font-weight:bold; 
font-size: 19px; 
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;
    
}
 
 
  /* ********* CLOSETS***********/


.closets{
    display: flex;
    flex-direction: column;
    
    align-content: center;
    justify-content:center;
    
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 14px 14px 20px black;
    margin-left: 20px;
    margin-right: 20px;
    padding: 10px;
    border-radius: 50px;
     background:rgba(0, 0, 0, 0.5);
    
    -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both;
	        animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) o.2s 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;
  }
}


 
.tituloClosets{
text-align: justify;
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;
    
}
.imagenesClosets{
    
   margin: 20px;
    
     border-radius: 50px 50px 50px 50px;
     background:rgba(0, 0, 0, 0.5);
    
    overflow:hidden;
    justify-content: center;
    display: grid;
    padding: 20px;
   
 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 360px;
    gap:30px;
}

.imagenesClosets img{
    
    height:100%;
    width: 100%;
   
   
    align-self: center;
    border-radius: 50px;
   border: 5px solid black;
    box-shadow: 14px 14px 5px black;
   
}




  /*--*******************--------- FINN APARTADO *********************++--*/


.espacio{
    height: 30px;
}


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

ul{
    list-style: none;
}



.n2{
   display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    width: 450px;
    height: 420px;
   
}

.n2 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;
}

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

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

.n2 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;
}

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



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

.n3 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;
}


.n3 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-content: 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;
}

       


      h2 {
            color: white;
           font-family: serif,georgia;
          
            font-size: 20px;
            margin: 5;
            
        }

.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;
    
    
}

.m{
    
    display: flex;
    flex-direction: row;
    background-color: #333;
    width: 100%;
    justify-content: space-between;
}
       








/* 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;
            }
        }