*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body{
    

    font-family: Arial, Helvetica, sans-serif;

    background: #333333; 
  background: -webkit-linear-gradient(to right, #333333, #dd1818); 
  background: linear-gradient(to right, #333333, #dd1818); 
}

.wave > path{
    
    background-color: #dd1818;

}


.titulo{
    color: rgb(15, 19, 19);
    font-size: 30px;
    text-align: center ;
    margin-bottom: 60px;
}

header{
    width: 100%;
    height: 500px;
}

nav{
    text-align: right;
    padding: 30px 50px 0 0;
}

nav > a {
    color: #fff ;
    font-weight: 300;
    text-decoration: none;
    margin-right: 10px;

}


nav > a:hover {

    text-decoration: underline;

}

header .textos-header{
display: flex;
height: 430px;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}

.textos-header h1{
    font-size: 50px;
    color: #170d0d;
    
     
     }
  
  
  .textos-header h2{
    font-size: 30px;
    font-weight: 300;
        color: #170d0d;
      
          
      }
      .textos-header .neon{
            animation: anim 8s
            infinite;
        }
        @keyframes anim{
        0%{
            color: #fff;
        }
        10%{
            color: #eee5e5;
        }
        20%{
            color: #a79898;
        }
        30%{
            color: rgb(125, 191, 191);
        }
        40%{
            color: rgb(71, 158, 158);
        }
        50%{
            color: #0ff;
        }
        60%{
            color: rgb(0, 255, 255);
        }
        70%{
            color: rgb(178, 211, 211);
        }
        80%{
            color: rgb(255, 255, 255);
        }
        90%{
            color: rgb(5, 18, 18);
        }
        
        
    }  

    h1{
        text-align: center;
        color: #fff;
    }

 

    .contenedor__grande{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        height: 500px;
        margin-top: 170px;
        gap: 20px;
       
    
    }
    
    .contenedor__grande .carta{
        

        width: 320px;
        height: 370px;
        border: 1px solid black;
        background: #fff;
        margin: 0 20px;
        border-radius: 10%;
        margin: auto;
        
        
    }

    .carta .sombra__negra{
        width: 260px;
        height: 150px;
        background: #170d0d;
        border-radius: 13%;
        margin: auto;
        margin-top: 20px;
    }

    .carta h1{

        font-size: 22px;
        margin-top: 20px;
        font-weight: 530;
        font-family: 'Times New Roman', Times, serif;
        color: #170d0d;
    }

    .carta h2{
       
        font-size: 18px;
        margin-top: 15px;
        text-align: center;
        font-weight: 530;
        font-family: 'Times New Roman', Times, serif;
    }
    

 

    .enlace{
        width: 250px;
        height: 50px;
        background: #170d0d;
        margin: auto;
        margin-top: 25px;
        border-radius: 20px;
       
               
    }

    .enlace > a{
        text-decoration: none;
        color: #fff;
    }

    .carta .enlace{
        
        text-align: center;
        padding-top: 15px;
        cursor: pointer;
        text-decoration: none;
        
    }

    .enlace2{
        width: 250px;
        height: 50px;
        background: #170d0d;
        margin: auto;
        margin-top: 25px;
        border-radius: 20px;
       
               
    }

    .enlace2 > a{
        text-decoration: none;
        color: #fff;
    }

    .carta .enlace2{
        
        text-align: center;
        padding-top: 15px;
        cursor: pointer;
        text-decoration: none;
        
    }


    footer{
        background: #414141;
        padding: 60px 0 30px 0 ;
        margin: auto;
        overflow: hidden;
        margin-top: 1300px;
    
    }
    .contenedor-footer{
        display: flex;
        width: 90%;
        justify-content: space-evenly;
        margin: auto;
        padding-bottom:50px ;
        border-bottom: 1px solid #ccc ;
    
    }
    
    
    .content-foo{
        text-align: center;
    
    }
    
    
    .content-foo h4{
     color: #fff;
     border-bottom: 3px solid lightblue;
     padding-bottom: 5px;
     margin-bottom: 5px ;
    
    }.content-foo p{
        color: #fff;
    }
    
    
    .titulo-final{
        text-align: center;
        font-size: 24px;
        margin:20px 0 0 0  ;
        color: #9e9797; 
    }

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

        .enlace2{
            width: 250px;
            height: 50px;
            background: #170d0d;
            margin: auto;
            margin-top: 10px;
            border-radius: 20px;
           
                   
        }
    
        .enlace2 > a{
            text-decoration: none;
            color: #fff;
        }
    
        .carta .enlace2{
            
            text-align: center;
            padding-top: 15px;
            cursor: pointer;
            text-decoration: none;
            
        }


        
    }


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

    
        body{
        
            overflow-x: hidden;
        }

        header{
            width: 100%;
            height: 500px;
            overflow-x: hidden;
         
        
        
        }
        nav{
            display: flex;
            justify-content: space-evenly;
            font-size: 13px;
            padding: 30px 0 0 0;
            text-align: center;
          
            }
          
            nav > a{
              margin-right: 5px;
            }
    
            .textos-header h1{
                font-size: 35px;
                color: #170d0d;
                
                 
                 }
              
            
            .textos-header h2{
                font-size: 24px;
                font-weight: 300;
                    color: #170d0d;
                  
                      
                  }
                  .textos-header .neon{
                        animation: anim 8s
                        infinite;
                    }
                    @keyframes anim{
                    0%{
                        color: #fff;
                    }
                    10%{
                        color: #eee5e5;
                    }
                    20%{
                        color: #a79898;
                    }
                    30%{
                        color: rgb(125, 191, 191);
                    }
                    40%{
                        color: rgb(71, 158, 158);
                    }
                    50%{
                        color: #0ff;
                    }
                    60%{
                        color: rgb(0, 255, 255);
                    }
                    70%{
                        color: rgb(178, 211, 211);
                    }
                    80%{
                        color: rgb(255, 255, 255);
                    }
                    90%{
                        color: rgb(5, 18, 18);
                    }
                    
                    
                    
                    }
                    

        footer{
            background: #414141;
            padding: 60px 0 30px 0 ;
            margin: auto;
            overflow: hidden;
            margin-top: 2300px;
        
        }
        .contenedor-footer{
            display: flex;
            flex-direction: column;
            border: none;
            
        
          }

           .contenedor__grande{
                 display: flex;
                
                 flex-wrap: wrap;
                 gap: 30px;
                 margin-top: 170px;
       
                }
       
                .contenedor__grande .carta{

                    width: 335px;
                    height: 400px;
                    border: 1px solid black;
                    background: #fff;
                    margin: 0 20px;
                    border-radius: 10%;
                    margin: auto;
                    
                    
                }
            
                .carta .sombra__negra{
                    width: 260px;
                    height: 150px;
                    background: #170d0d;
                    border-radius: 13%;
                    margin: auto;
                    margin-top: 35px;
                }
            
                .carta h1{
            
                    font-size: 22px;
                    margin-top: 20px;
                    font-weight: 530;
                    font-family: 'Times New Roman', Times, serif;
                    color: #170d0d;
                }
            
                .carta h2{
                    padding:0  32px;
                    font-size: 15px;
                    margin-top: 15px;
                    text-align: center;
                    font-weight: 530;
                    font-family: 'Times New Roman', Times, serif;
                }
         
             
            
                .enlace{
                    width: 250px;
                    height: 50px;
                    background: #170d0d;
                    margin: auto;
                    margin-top: 35px;
                    border-radius: 20px;
                   
                           
                }
            
                .enlace > a{
                    text-decoration: none;
                    color: #fff;
                }
            
                .carta .enlace{
                    
                    text-align: center;
                    padding-top: 15px;
                    cursor: pointer;
                    text-decoration: none;
                    
                }

                .enlace2{
                    width: 250px;
                    height: 50px;
                    background: #170d0d;
                    margin: auto;
                    margin-top: 20px;
                    border-radius: 20px;
                   
                           
                }
            
                .enlace2 > a{
                    text-decoration: none;
                    color: #fff;
                }
            
                .carta .enlace2{
                    
                    text-align: center;
                    padding-top: 15px;
                    cursor: pointer;
                    text-decoration: none;
                    
                }

                .contenedor-footer{
                    
                    flex-direction: column;
                    border: none;
                    
                
                  }
          .content-foo{
            margin-bottom: 20px;
            text-align: center;
            
        
          }
        
          .content-foo h4{
            border:none;
          }
        
          .content-foo p{
            color: #ccc;
            border-bottom:1px solid #f2f2f2;
            padding-bottom: 20px;
          }
        
          .titulo-final{
            font-size:20px ;
          }    
        }