body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

header,
footer {
  text-align: center;
  background-color: black;
  color: white;
}

#contenedorPadre {
  display: flex;
  height: 100%;
  background-color: #f0f0f0;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.tarjeta {
    resize: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  width: 350px;
  height: 440px;
  border-radius: 20px;
  box-shadow: -5px 5px 15px rgb(122, 121, 121);
}
#div1{
  animation: llegada-por-derecha 0.50s 0.75ms normal, movimiento-tarjetas 2s 1s ease-in-out infinite;
}

#div2{
  animation: llegada-por-derecha 0.75s 0.75ms normal, movimiento-tarjetas 2s 1s ease-in-out infinite;  
}

#div3{
  animation: llegada-por-derecha 1s 0.75ms normal, movimiento-tarjetas 2s 1s ease-in-out infinite;

}

#div1 img {
  object-fit: cover;
  width: 150px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  margin: 32px;
  animation: movimiento-img 3s ease-in-out infinite;
}

#nombre{
    width: 177px;
    text-align: center;
    color: #005eff;
    font-weight: 900;
    margin-bottom:12px ;
}
h2 {
    margin:0;
    font-size: large;
}

p{
    margin: 5px;
    text-align: center;
    color: rgb(73, 72, 72);
}

.contenedorImgConText {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:4px;
    margin-bottom:8px ;
}

.contenedorImgConText img {
    margin: 0 0 8px 0;
}


hr {
  border: none;
  border-top: 2px solid #ccc;
  margin: 8px;
  width: 100%;
}

#div2, #div3 {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40px 12px 32px;
}

#div3-parte1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 60px;

}

#contenedorDeFaBrands{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-top: 8px;
}

a{
    text-decoration: none;
    text-align: center;
    color: rgb(73, 72, 72);
}

form{
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    gap:16px
}
textarea{
    resize:none;
}

button{
    color: white;
    height: 36px;
    background-color: #005eff;
    border-radius: 8px;
    border:1px solid #005eff;
    cursor: pointer;
}

button:hover{
    background-color: #387ffa;
    border: 1px solid #387ffa;
}

footer a{
    color: #005eff;
}

@media (max-width:1090px) {

    #contenedorPadre{
        display: flex;
        flex-direction: column;
    }
    
}

@keyframes llegada-por-derecha{
    0%{transform: translate(1000px);}
    10%{transform: translate(900px);}
    20%{transform: translate(800px);}
    30%{transform: translate(700px);}
    40%{transform: translate(600px);}
    50%{transform: translate(500px);}    
    60%{transform: translate(400px);}    
    70%{transform: translate(300px);}    
    80%{transform: translate(200px);}    
    90%{transform: translate(100px);}    
    100%{transform: translate(0px);}    
}

@keyframes movimiento-img{
    0%{transform: scale(1.00);}
    25%{transform: scale(1.05);}
    50%{transform: scale(1.10);}
    75%{transform: scale(1.05);}
    100%{transform: scale(1.00);}
}

@keyframes movimiento-tarjetas{
    0%{transform: translateY(0px);}
    12.5%{transform: translateY(1px);}
    25%{transform: translateY(2px);}
    37.5%{transform: translateY(1px);}
    50%{transform: translateY(0px);}
    62.5%{transform: translateY(-1px);}
    75%{transform: translateY(-2px);}    
    87.5%{transform: translateY(-1px);}        
    100%{transform: translateY(0px);}        
}