*{
    font-family: serif;
    margin: 0;
    padding: 0;
   
}
img{
    max-width: 100%;
    
}
p{
    color: rgb(238, 238, 238);
}
.img-1{
    
     width: 50%;
     text-align: right;
    
    
    

}
h2{

    margin-top: 1rem;
    color:  rgb(207, 135, 0);
}
.img-1-1{
    max-width:70% ;
    margin-top: -6em;
    vertical-align: bottom;
}
.main-2{ 
   
    background-image: url('../img/denji/3b106181f1d5e309fd9573fd43d8a3e4.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 20px;
    justify-items: right;
    margin-top: 5rem;
   
}
.h-m{
    display: grid;
    width: 80%;
    margin: 4rem auto;
    gap: 3rem;
    

}
.c_list ul{
    display: grid;
    border-right: 2px solid  rgb(207, 135, 0);
    border-top: 2px solid  rgb(207, 135, 0);
   
    padding: 1rem;
    border-radius: 20px;
    box-shadow: -4px 5px 10px rgba(133, 133, 133, 0.97);
   
}
.cha{ 
    color: rgb(207, 135, 0);
    text-shadow: -1px 1px 0px rgba(212, 212, 212, 0.97);
    justify-content: center;
    text-align: center;
    font-weight: bold;
    margin-bottom: 3rem;
    
}

.c_list ul .icons{
    border-radius: 50%;
    box-shadow: -4px 5px 10px rgba(133, 133, 133, 0.97);
}
.c_list ul li:hover {
        box-shadow: 0px 0px 10px 5px rgba(180, 180, 180, 0.97);
        border-radius: 35px;
        border: 1px solid rgb(207, 135, 0) ;


}
.c_list ul li{
    margin: 1rem 0;
justify-items: center;
text-align: center;
list-style: none;
padding: 1rem;

}
.c_list ul li a i, .c_list ul li a span{
    margin: 1rem 1rem; 
}
.icon_2 span{
        text-decoration: none;

}
.nombre{
    color:  rgb(207, 135, 0);
}
.csm-c, .reze-c, .aki-c, .yoru-c{
    font-weight: bold;
    text-shadow: -1px 1px 0px rgba(201, 201, 201, 0.97);
    text-decoration: none;
    
}
    
.csm-c{
    color: rgb(255, 81, 18);
}
.aki-c{ color: rgb(113, 125, 126);

}
.reze-c{ color: rgb(190, 154, 255);

}
.yoru-c{color: rgb(255, 25, 25);

}
.texto-1 p{
    margin: 2rem 0;
}

footer{
    width: 90%;
    margin-top: 1rem;
    margin: 0 auto;
    padding: 1rem;
    border-top: 3px solid rgb(207, 135, 0) ;
    display: grid;
 
    
}
.texto-footer{
    display: grid;
    align-items: center;
    border-right: 0.5px solid  rgb(207, 135, 0);

}
.texto-footer span{
   color:  rgb(207, 135, 0) ;

}

.vid{
    gap: 2rem;
    margin: 2rem;
    display: grid;
   
}

.vid video{
    max-width: 100%;
    border-radius: 20px;
}
.images{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 80%;
    padding: 2rem;
    border-bottom: 1px solid rgb(207, 135, 0) ;
    gap: 2rem;
}

.images img{
    border-radius: 20px;
    

}

.icon_3 a{
    text-decoration: none;
    margin: 0.3rem;
    color: rgb(207, 135, 0) ;
    
}
.icon_3 i{
    color: rgba(212, 212, 212, 0.97);
}
.backimg{
    background-color: black;
    background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 50% , rgba(0, 0, 0, 0.95) 100%),    
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.5) 50% , rgba(0, 0, 0, 0.8) 100%),
    url('../img/denji/WhatsApp\ Image\ 2026-07-13\ at\ 3.01.14\ PM\ \(2\).jpeg');
    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;  
    background-attachment: fixed;
    min-height: 100vh;
    }

@media (max-width:600px){
       .img-cha{
    display: none;
}

    .main-1{
        order: 1;
    }
    .c_list ul{
         gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .c_list{
        order: 2;
    }
    footer{
           grid-template-columns: 3fr 2fr;
    }
    
    .icon_3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 20%;
    justify-content: center;
    
}
    .vid{
         grid-template-columns: 1fr ;
    }
    





}
@media (max-width:900px) and (min-width:601px){
    .img-cha{
    display: none;
}

    .main-1{
        order: 1;
    }
    .c_list ul{
        gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
    }
    .c_list{
        order: 2;
    }
    footer{
           grid-template-columns: 3fr 2fr;
    }
   
    .vid{
         grid-template-columns: 1fr 1fr ;
    }
    .icon_3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 50% ;
    justify-content: center;
    
}
    
    


    
}
@media (min-width:901px){



.h-m{
    grid-template-columns: 1fr 3fr;
    align-items: start;
      
}
.img-cha{
    justify-items: center;
    align-items: center;
    
    border-bottom: 3px solid  rgb(207, 135, 0);
}
.img-cha img{
     border-radius: 20px;
     margin: 1rem;
     max-width: 90%;
}
.c_list{
     position: sticky;
       top: 20px;
}
footer{
           grid-template-columns: 3fr 1fr;
    }
 
    .vid{
         grid-template-columns: 1fr 1fr 1fr;
    }
    .icon_3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 50% ;
    justify-content: center;
    
}
    





}