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


        header {
            
            padding: 5px 2;
        }

     


        


    /*  .div-principal{
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           
           
         width:auto;
          height: 450px;
          background-image: url(m.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        
       }*/


/*-----------PRIMER APARTADO---------------*/
.container{
    display: flex;
    
  
   
    
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    min-height: 10vh;
    position: relative;
     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) 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;
  }
}




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

}

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

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

 p {
            align-self: center;
          text-align: justify;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 28px; 
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;
        }









.lin{
    
    height: 50px;
    bgcolor:
}

.linea{
    
     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 *********************++--*/

.texto{
       
   border-radius: 70px 70px 0px 0px;
   background:rgba(0, 0, 0, 0.5);
    min-height: 10vh;
    padding: 10px;
  margin-left: 10px;
    margin-right: 10px;
  
}

.recientes{
   display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    min-height: 30vh;
    margin-right: 10px;
    margin-left: 10px;
    padding: 50px;
    border-radius: 0px 0px 90px 90px;
     background:rgba(0, 0, 0, 0.5);
    box-shadow: 14px 14px 20px black;
        
    
   
}

.d1{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

section {
    
    margin: 30px;
    display: flex;
    width: 650px;
    height: 430px;
}


section img {
    width: 0px;
    border-radius: 30px;
    flex-grow: 1; 
    object-fit: cover;
    transition: .5s ease;
    opacity: .8;
     border: 5px solid  #1a1a1a;

   
    
}



section img:hover{
    cursor: crosshair;
    width: 300px;
    filter: contrast(120%);
    opacity: 1;
    
    
}




.t{
    display: flex;
   
  
    height: 450px;
    width: 450px;    
   
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    
    
    
}
  
.des{
align-self:center;
font-family: Comic Sans MS;   
font-size: 25px; 
color: white;
}
.R{
    align-self: 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;
    
}


h1{
    align-self: center;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 30px; 
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;
   
    
    
}

/*--*******************---------VIDEOS *********************++--*/




.tituloVideos{
    display: flex;
    height: 100px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    justify-content: center;
    border-radius: 20px;
    padding: 10px;
    background:rgba(0, 0, 0, 0.5);
    box-shadow: 14px 14px 20px black;
    
}

.divVideos{
     display: flex;

    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    
  gap:9px;
    min-height: 30vh;
   
   margin-top: 50px;
    padding: 60px;
   margin-left: 20px;
    margin-right: 20px;
      border-radius: 50px;
     background:rgba(0, 0, 0, 0.5);
    box-shadow: 14px 14px 20px black;
     scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none;
   scroll-behavior: smooth;
}

.divVideos video{
    
    scroll-snap-align: center;
    max-height: 500px;
  scroll-snap-align: start;
    border-radius: 20px;
    margin-right: 20px;
   
 border: 5px solid  #EBD758;
    flex-shrink: 0;
}















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


.contacto{
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    min-height: 10vh;
   align-content: center;
    text-align: center;
    margin: 15px;
    padding: 50px;
    border-radius: 80px; 
    background:rgba(0, 0, 0, 0.5);
    box-shadow: 14px 14px 20px black;
    
}


.con1{
   
    margin: 10px;
   
   display: flex;
    flex-direction: column;
    align-content: center;
   
    
    
}


.con{
    align-self:center;
font-family: Comic Sans MS;   
font-size: 20px; 
color: white;
    
}





.info{
    display: flex;
    flex-direction: row;
   
    text-align: center;
    align-content: center;
    align-items: center;
    
}

.direccion{
    
    display: flex;
    flex-direction: row;
   
    text-align: center;
    align-content: center;
    align-items: center;
    
}


.ubi{
    width: 40px;
    height: 35px;
}

.cel{
    
    align-self: center;
          text-align: center;
    margin-left: 20px;
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 15px; 
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;
    
}
.telefono{
   gap:40px;
  width: 40px;
    height: 35px;

   
}
.con2{
   align-self: center;
          text-align: center;
    margin-left: 20px;
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;
}
.btn-1{
    
   background-color: #EBD758 ;
    border: 10px;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    align-self: center;
          text-align: center;
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;
    
    
}



.espacio{
    height: 30px;
}

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





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

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