@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');

.carta{
    display: flex;
    /* align-items: center; */
    justify-content: center;

    margin-top: 200px;
    /* margin-left: 400px; */
    
}


.carta_seccion{
    display: none; 
}

.carta {
  transform-style: preserve-3d;
  opacity: 0;
  transform: 
    scale(0.3)
    rotateY(260deg)
    ;
  transition: transform 0.85s ease-out, opacity 0.5s linear;
  background-color: rgb(224, 199, 133);
  border-radius: 25px;

  overflow: hidden;
}
.carta::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url("/img/infraestructure/fondoagrietado.avif") center/cover no-repeat;
    opacity: 0.3;
    pointer-events: none;
}

.carta.aparecer {
  opacity: 1;
  transform: 
  scale(1)
  rotateY(360deg)
  ;
}




/* (195, 163, 90) DORADO OSCURO*/
/* Dorado medio (detalles y texto) → rgb(224, 199, 133) */

/* Dorado brillante → rgb(241, 216, 139) */


.texto_sobre_la_imagen{
    position: absolute;
    z-index: 500;
    color: rgb(195, 163, 90);
    /* z-index: 2; */
}
.texto_sobre_la_imagen p{

    text-shadow: 2px 2px 30px black;
}
.texto_sobre_la_imagen .adivinaste{

    font-family: "Fugaz One", sans-serif;
    font-weight: 400;
    font-style: normal;
    /* color: aliceblue; */
    margin: 0;
    padding: 0;
    text-align: center;
    margin-top: 30px;
    margin-bottom: -20px;
    
}


.character_name{
    /* color: aliceblue; */
    font-family: "Fugaz One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 75px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    text-align: center;
    line-height: 0.8;
    margin-top: 25px;
    
}


article{
    padding: 0px;
    transition: all .3s ease;
    margin: 0;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* width: 400px; */
    height: 100%;
}

article img:first-child {
    border-radius: 24px;
    
    box-shadow: 0 60px 60px -60px rgba(0, 0, 0, 0.5);
    height: 100%;
    object-fit: cover;
    width: 100%;


    /* border: 3px solid blanchedalmond; */
}
article img:last-child{
    position: absolute;
    width: 250px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(25%);
    transition: .3s ease;
    opacity: 0;
    /* transform: translateX(5px); */
    
    
}




article::before{
    content: '';
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    border-radius: 25px;
    background-image: 
        linear-gradient(to bottom,
            transparent 10%,
            rgba(0,0,0,0.5) 50%,
            rgba(0,0,0) 95%
        );
    opacity: 0;
    transition: all .3s ease;
   
}


article:hover::before{
    opacity: 1;
}
article:hover img:last-child{
    opacity: 1;
    transform: 
    translateY(0%)
    /* scale(1.5); */
    
}


.divblanco{
    background-color: aliceblue;
}






/* BORDE */





.imagen-hover{
    
}

.box{
    /*ACA SE LABURA LO QUE ES LA DIMENSION DE LA CARTA, cuidado con el width y el heighy es facil de romper*/
    width: 400px;
    height: 481px;
    /* height: 600px; */
    
    position: relative;
    box-shadow: 5px 5px 15px  #0008;
    border-radius: 25px;
    color: #aaa;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    overflow: hidden;
    padding: 6px;
    /* background-color: #ff0000; */
}

.box::before,
.box::after{
    content: "";
    z-index: -1;
    position: absolute;
    height: 150%;
    width: 150%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* (195, 163, 90) DORADO OSCURO*/
/* Dorado medio (detalles y texto) → rgb(224, 199, 133) */

/* Dorado brillante → rgb(241, 216, 139) */
.box::before{
    background:conic-gradient(rgb(195, 163, 90) 20deg, transparent 120deg);
    animation: rotateCarta 4s infinite linear;
    
}

.box::after{
    background: #222;
    height: 95%;
    width: 95%;
    box-shadow: 5px 5px 15px #0008 inset;
    border-radius: 25px;
}
 
@keyframes rotateCarta{
    100%{
        transform: translate(-50%,-50%)
        rotate(-360deg);
    }
}