* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.5s linear;
}

body {
    position: relative;
    overflow: hidden;
    background-image: url("back.jpg");
    background-size: cover;
    background-position: center;
    animation: backgroundAnimation 20s infinite alternate;
}


@keyframes backgroundAnimation {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
  }


section {
    display: grid;
    place-content: center;
    min-height: 100vh;
}


a {
    text-decoration: none; /* Eliminar subrayado */
    color: #b9a28b;/*links*/
  }
  
  a:hover {
    text-decoration: none; /* Eliminar subrayado en el hover */
    color: #b9a28b;/*links*/
  }


.business-card {
    width: 320px;
    height: 520px;
    position: relative;
    margin:  auto;
}

.business-card .front ,
.business-card .back {
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
    /*border: black 1px solid;
    box-shadow: 10px 5px 5px black;*/
}

.business-card .front {
    /*background-color: #4bb7fb;     o puede ser el de abajo dependiendo si quieres una imagen o color solido
    background-image: url("fondotarjeta.jpg");*/
    color: #242424;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

/*.business-card:hover .front {
    transform: perspective(700px) rotateY(180deg);
}
Cambio de tarjeta de adelante a atras con :hover*/

.business-card .front img {
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
}

.business-card .front .company {
    font-size: 32px;
    font-weight: 600;
    margin-top: 16px;
}

.business-card .front::before {
    content: "";
    border-radius: 50%;
    border: 8px solid #b9a28b none;/*lineas estilo (adelante)*/
    position: absolute;
    top: -25%;
    height: 150%;
    width: 320px;
    transform: rotateZ(25deg);
}

.business-card .back {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #272727;/*color fondo derecha (atras)*/
    transform: perspective(700px) rotateY(-180deg);
}

/*.business-card:hover .back {
    transform: perspective(700px) rotateY(0deg);
}

cambio de tarjeta de atras a adelante con :hover*/

.business-card .back .image ,
.business-card .back .info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.business-card .back .image {
    border-top-right-radius: 5%;
    border-bottom-right-radius: 50%;
    background-color: #b9a28b;/*color fondo izquierdo (atras)*/
    /*background-image: url(fondotarjeta.jpg);  en caso de querer fondo con imagen*/
    color: #010101; /*letras slogan (atras)*/
    align-items: center;
}

.business-card .back .image img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border: 2px solid #242424;/* borde logo (atras)*/
    border-radius: 50%;
    padding: 4px;
    margin-bottom: 16px;
}

.business-card .back .image h1 {
    font-size: 20px;
    font-weight: 600;
    margin-block: 8px;
}

.business-card .back .image h2 {
    font-size: 13px;
    font-weight: 500;
}



.business-card .back .info {
    align-items: flex-start;
    color: #ffd0c7;
}

.business-card .back .info .contact {
    line-height: 31px;
    margin-block: 10px;
}

.business-card .back .info .contact i {
    font-size: 15px;
    margin-right: 16px;

}


.designed-by {
    position: absolute;
    bottom: 10px; /* Ajusta la posición vertical según tu preferencia */
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px; /* Tamaño de fuente para el texto */
    color: #b9a28b; /* Color del texto designed by daniel alcalá*/
}





.business-card.is-flipped .front {
    transform: perspective(700px) rotateY(180deg);
}

.business-card.is-flipped .back {
    transform: perspective(700px) rotateY(0deg);
}







.business-card .front .fa-fingerprint {
    font-size: 50px;
    color: #b9a28b;/*color huella*/
}