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

#card {
   height:500px;
   width:800px;
   margin:5em auto;
   position: fixed;
   top: -15px;
   left: 20%; /* ← mueve la carta más a la izquierda */
   display:flex;
   visibility:hidden;
}

#card h2 {
   font-size:3.2em;
   margin:0;
   color:pink;
   text-align: center;
   font-family: 'Great Vibes', cursive;
}
#card p {
   font-size: 1.6em;
   text-align: justify;
   padding-left: 30px;
   padding-right: 30px;
   font-family: 'Great Vibes', cursive;
}

.side {
   background:#eee;
   height:550px;
   width:400px;
   padding:10px;
}
.side.one {
   width:320px;
   transform:skew(10deg,20deg);
   background:linear-gradient(90deg, #fff, #fff 40%, #ddd);
}
.side.two {
   transform:skew(10deg,-15deg);
   background-color: #fff; /* restaura el color blanco de la hoja */
   /* Si quieres imagen en la cara vacía, deja la siguiente línea y reemplaza la ruta */
   background-image: url('ruta-de-tu-imagen.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   font-family: 'Great Vibes', cursive;
   background-color: #f1e3d3;
   overflow: hidden;
 }
 
 .valentines-day {
   position: relative;
   cursor: pointer;
 }
 
 .envelope {
   position: relative;
   filter: drop-shadow(0 0 25px rgba(0,0,0,.3));
 }
 
 .envelope:before {
   content:"";
   position: absolute;
   width:254px;
   height:254px;
   background-color: #ff9494;
   transform: rotate(-45deg);
   border-radius: 0 15px 0 0;
   left:-37px;
   top:-82px;
 }
 
 .envelope:after {
   content:"";
   position: absolute;
   background-color: #ff9494;
   width:360px;
   height:225px;
   left:-90px;
   top:45px;
 }
 
 .heart {
   position: relative;
   background-color: #e01911;
   display: inline-block;
   height: 180px;
   top:50px;
   left:0;
   transform: rotate(-45deg);
   width:180px;
   filter: drop-shadow(0 -10px 25px rgba(0,0,0,.3));
   transition: .5s;
 }
   
 .heart:before, .heart:after {
   content:"";
   background-color: #e01911;
   border-radius:50%;
   height: 180px;
   width: 180px;
   position: absolute;
   }
   
 .heart:before {
   top:-100px;
   left:0;}
   
 .heart:after {
   left:100px;
   top:0;}
 
 .front {
   position: absolute;
   width:0;
   height:0;
   border-right: 190px solid #fbd2d2;
   border-top: 113px solid transparent;
   border-bottom: 113px solid transparent;
   top:44px;
   left:80px;
   z-index:4;
 }
 
 .front:before {
   content:"";
   position: absolute;
   width:0;
   height:0;
   border-left: 190px solid #fbd2d2;
   border-top: 113px solid transparent;
   border-bottom: 113px solid transparent;
   top:-113px;
   left:-170px;
 }
 
 .front:after {
   width:0;
   height:0;
   position: absolute;
   content:"";
   border-bottom: 150px solid #fce7e9;
   border-right:180px solid transparent;
   border-left: 180px solid transparent;
   top:-36px;
   left:-170px;
 }
 
 .text {
   position: absolute;
   font-family: 'Great Vibes', cursive;
   letter-spacing:5px;
   text-align: center;
   color: white;
   z-index:2;
   top:80px;
   left:15px;
   transition: .5s;
 }
 
 .valentines-day:hover .heart {
   transform: translateY(-50px) rotate(-45deg);
 }
 
 .valentines-day:hover .text {
   transform: translateY(-50px);
 }

/* Cuadro pequeño para imagen al pie de la hoja */
.image-box {
   width: 120px;
   height: 120px;
   border: 2px solid #e5b4c8;
   border-radius: 12px;
   position: absolute;
   bottom: 20px;
   right: 20px;
   overflow: hidden;
   background-color: #fff;
}

.image-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}/* ----- RESPONSIVE: centrar image-box en pantallas pequeñas ----- */
@media (max-width: 600px) {

   #card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      flex-direction: column; /* pone las hojas una debajo de la otra */
      height: auto;
   }

   .side {
      width: 100%;
      transform: none !important; /* elimina inclinación en móvil */
      height: auto;
   }

   .image-box {
      position: relative;
      margin: 20px auto 0 auto; /* CENTRA el cuadro de imagen abajo */
      left: 0;
      right: 0;
      transform: none;
   }
}