html, body{
height:100%;
}
body{
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg,#ff9a9e,#fad0c4);
  text-align:center;
  margin:0;
  padding:0;
  overflow-x:hidden;
  overflow: hidden;
}
h1{
  font-size: 50px;
  margin-top: 0;
}

h2{
  font-size: 45px;
}

p{
  font-size: 35px;
}
.container{
max-width:800px;
margin:auto;
background:white;
padding:30px;
border-radius:20px;
box-shadow:0px 10px 25px rgba(0,0,0,0.2);
margin-top:40px;
}

button{
background:linear-gradient(45deg,#ff4d6d,#ff8fab);
color:white;
border:none;
padding:12px 20px;
margin:10px;
border-radius:30px;
font-size:42px;
cursor:pointer;
transition:0.3s;
box-shadow:0 5px 15px rgba(255,77,109,0.4);
}

button:hover{
transform:scale(1.1);
box-shadow:0 8px 20px rgba(255,77,109,0.6);
}

button:hover{
transform:scale(1.1);
background:#ff2f5a;
}

.heart{
position:fixed;
font-size:30px;
animation:explosion 1s ease-out forwards;
}

@keyframes explosion{

0%{
transform:scale(0);
opacity:1;
}

100%{
transform:translateY(-200px) scale(2);
opacity:0;
}

}
#historia,#pregunta1,#pregunta2,#pregunta3,#pregunta4,#pregunta5{

animation:aparecer 0.5s;

}

@keyframes aparecer{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

body{
background:linear-gradient(135deg,#fcabae);
overflow-x:hidden;
}
.corazon-fondo{
position:fixed;
bottom:-20px;
font-size:22px;
animation-name: subir;
animation-timing-function: linear;
animation-fill-mode: forwards;
pointer-events:auto;
cursor:pointer;

will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}

@keyframes subir{

0%{
transform:translate3d(0,0,0) scale(1);
opacity:0.6;
}

100%{
transform:translate3d(0,-110vh,0) scale(1.5);
opacity:0;
}

}

.corazon-explosion{
animation:explotar 0.5s forwards;
}

@keyframes explotar{

0%{
transform:scale(1) rotate(0deg);
opacity:1;
}

40%{
transform:scale(3) rotate(20deg);
}

70%{
transform:scale(2.5) rotate(-20deg);
}

100%{
transform:scale(0) rotate(360deg);
opacity:0;
}

}
.tarjeta{

background:white;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,0.15);

max-width:750px;

margin:40px auto;

text-align:center;

animation: aparecer 0.5s ease;

}

@keyframes aparecer{

from{
opacity:0;
transform:scale(0.9);
}

to{
opacity:1;
transform:scale(1);
}

}
p{
line-height:1.5;
}

@keyframes flotarTarjeta{
0%{transform:translateY(0)}
50%{transform:translateY(-5px)}
100%{transform:translateY(0)}
}
h1,h2{
text-shadow:0 3px 10px rgba(0,0,0,0.2);
}
.tarjeta{
background:linear-gradient(135deg,#fff5f7,#ffe3ec);
padding:30px;
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,0.15);
position:relative;
overflow:hidden;
border:2px solid rgba(255,255,255,0.5);
}
.tarjeta{
border:2px solid rgba(255,255,255,0.7);
}
.tarjeta{
position:relative;
}

.container1::before{
content:"🎂";
position:absolute;
top:10px;
left:15px;
font-size:80px;
}

.container1::after{
content:"🎉";
position:absolute;
top:10px;
right:15px;
font-size:80px;
}
.tarjeta::before,
.tarjeta::after{
animation:flotarDecoracion 2s infinite ease-in-out;
}

@keyframes flotarDecoracion{

0%{transform:translateY(0)}
50%{transform:translateY(-5px)}
100%{transform:translateY(0)}

}
.container1::before,
.container1::after{
animation:flotarDecoracion 2s infinite ease-in-out;
}

@keyframes flotarDecoracion{

0%{transform:translateY(0)}
50%{transform:translateY(-5px)}
100%{transform:translateY(0)}

}
#final h3{
color:#ff4d6d;
font-size:40px;
margin-top:10px;
}

#final p{
font-size:30px;
}

@keyframes aparecerCarta{

0%{
opacity:0;
transform:scale(0.6) rotateX(-40deg);
}

100%{
opacity:1;
transform:scale(1) rotateX(0deg);
}

}
#carta{
position:fixed;
top:0;
left:0;

width:100%;
height:100vh;

display:flex;
justify-content:center;
align-items:center;

animation: aparecerCarta 1s ease;
}

.sobre{
width:920px;
height:450px;
background:#ffb6c1;
position:relative;
border-radius:10px;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
overflow:visible;
display:flex;
justify-content:center;
align-items:center;
}

.tapa{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ff8fab;
clip-path:polygon(0 0,100% 0,50% 50%);
transform-origin:top;
transition:transform 0.8s;
}

.contenido-carta{
position:absolute;
width:95%;
background:white;
padding:20px;
border-radius:10px;
text-align:center;
bottom:-160px;
left:7.5%;
opacity:0;
transition:0.8s;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.contenido-carta h3{
  font-size: 24px;
}

.sobre.abrir .tapa{
transform:rotateX(180deg);
}

.sobre.abrir .contenido-carta{
bottom:40px;
opacity:1;
}
.oculto {
  display: none;
}

#recuerdos {
  text-align: center;
  margin-top: 0px;
}

.foto {
  margin: 100px 0; /* mas espacio = no aparecen juntas */
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
}

.foto img {
  width: 80%;
  max-width: 800px;
  border-radius: 15px;
}

/* cuando aparece */
.foto.visible {
  opacity: 1;
  transform: translateY(0);
}
#puzzle {
  width: 450px;
  height: 750px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(3, 150px);
}

.pieza, .vacio {
  width: 150px;
  height: 150px;
}

.pieza {
  background-image: url("fotoPuzzle.jpg");
  background-size: 450px 750px;
  
  transform: scale(1.01);
}

.vacio {
  background: transparent;
}
#puzzlePantalla {
  min-height: 80vh;
  padding-bottom: 80px;
  opacity: 0;
  transition: 0.5s;
}

#puzzlePantalla.mostrar {
  opacity: 1;
}
[id^="pregunta"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#overlayFinal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.8);
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 30px;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: 0.5s;
}

#overlayFinal.mostrar {
  opacity: 1;
}
#recuerdos{
  overflow: visible;
}
#pagina{
position: relative;
}
.volver-1{
position: absolute;
top: 120px;
left: 20px;
padding: 10px 15px;
border: none;
border-radius: 10px;
background: #ff4d6d;
color: white;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
.volver-2{
position: absolute;
top: 60px;
left: 20px;
padding: 10px 15px;
border: none;
border-radius: 10px;
background: #ff4d6d;
color: white;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
.volver-3{
position: absolute;
top: 50px;
left: 20px;
padding: 10px 15px;
border: none;
border-radius: 10px;
background: #ff4d6d;
color: white;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
.volver-4{
position: absolute;
top: 120px;
left: 20px;
padding: 10px 15px;
border: none;
border-radius: 10px;
background: #ff4d6d;
color: white;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
.volver-5{
position: absolute;
top: 90px;
left: 20px;
padding: 10px 15px;
border: none;
border-radius: 10px;
background: #ff4d6d;
color: white;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
#inicio {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.container1 p {
  max-width: 750px;
  margin: 10px auto;
  text-align: center;

  background: rgba(255,255,255,0.3);
  padding: 15px 20px;
  border-radius: 15px;
}
.tarjeta-poema {
  max-width: 600px;
  margin: 80px auto;

  padding: 40px 30px;

  background: linear-gradient(135deg, #ffe6eb, #ffd1dc);
  border-radius: 20px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.2);

  text-align: center;

  position: relative;
  overflow: hidden;
}
.tarjeta-poema {
    max-width: 680px;
    margin: 60px auto;
    padding: 25px 20px;
    
    background: #f3dada;
    border-radius: 20px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

    text-align: center;
}
.tarjeta-poema p {
    font-size: 30px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic;
}
.boton-volver {
  position: absolute;
  top: 20px;
  left: 20px;
}
.tarjeta2 {
  max-width:750px;
  margin:auto;
  background:white;
  padding:30px;
  border-radius:20px;
  box-shadow:0px 10px 25px rgba(0,0,0,0.2);
  margin-top:40px;
}
.tarjeta2 p {
    font-size: 30px;
    line-height: 1.6;
}

#pagina {
  padding-top: 30px;
  padding-bottom: 30px;
}
#sig1, #sig2, #sig3, #sig4, #sig5, #sig6, #sig7, #sig8{ 
position: absolute;

top: 90%;
right: 60px;

transform: translateY(-50%);

padding: 15px 25px;
font-size: 40px;

z-index: 1000;
}
#finalBtn{
  background: #ff4d6d;
  font-size: 40px;
  border-radius: 10px;
}
/* 🔥 BOTON SIGUIENTE / RESULTADOS */
#sig1, #sig2, #sig3, #sig4, #sig5, #sig6, #sig7, #sig8{ 
  position: absolute;

  background: #ff4d6d;
  color: white;

  padding: 12px 26px;

  border-radius: 10px;
  border: none;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0,0,0,0.25);

  transition: all 0.3s ease;
}

/* hover pro */
#sig1:hover, #sig2:hover, #sig3:hover, #sig4:hover, #sig5:hover, #sig6:hover, #sig7:hover, #sig8:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

/* efecto click */
#sig1:active, #sig2:active, #sig3:active, #sig4:active, #sig5:active, #sig6:active, #sig7:active, #sig8:active {
  transform: scale(0.95);
}


@media (max-width: 600px), (hover: none){
  .contenido-carta{
    width:85%;
  }
  #puzzle{
    zoom:1.6;
    margin-top: 100px;
  }
  [id^="pregunta"] {
    top: 180px; 
  }
  .volver-1{
    top: 190px;
  }
  .volver-4{
    top: 160px;
  }
  #sig1, #sig2, #sig3, #sig4, #sig5, #sig6, #sig7, #sig8{ 
  top: 110%;
  }
  .container1::before{
  font-size:90px;
  }
  .container1::after{
  font-size:90px;
  }

}
@media (hover: hover) and (pointer: fine){
  .sobre{
    width: 1000px;
    height: 500px;
  }
  [id^="pregunta"] {
    top: 60px; 
  }
  .volver-1{
    top: 150px;
  }
  .volver-5{
    top: 20px;
  }
  #sig1, #sig2, #sig3, #sig4, #sig5, #sig6, #sig7, #sig8{ 
  top: 80%;
  right: 30px;
  }
  .tarjeta{
    padding: 10px;
  }

  h2{
  font-size: 35px;
  }

  p{
  font-size: 26px;
  }
  button{
  font-size: 32px;
  }
  #sig1, #sig2, #sig3, #sig4, #sig5, #sig6, #sig7, #sig8{ 
  font-size: 32px;
  }
  .foto{
    zoom:0.7;
    margin-top: 100px;
  }
  
}