/* ============================================================
   QUIERO CONOCERTE — hoja de estilos
   Paleta: papel crema, rosa chicle, lavanda, amarillo mantequilla, azul cielo
   Tipografía: Baloo 2 (display, redondeada, con carácter) + Quicksand (cuerpo)
   Concepto: diario/scrapbook digital, washi tape, stickers, garabatos
   ============================================================ */

:root{
  --paper:   #fff8ef;
  --paper-2: #fdeee0;
  --ink:     #3a2e2a;
  --pink:    #ff5fa2;
  --pink-2:  #ffd6e8;
  --lav:     #b79cff;
  --lav-2:   #e6dcff;
  --yellow:  #ffd84a;
  --sky:     #79d6ff;
  --green:   #8fe3b0;
  --line:    #3a2e2a;
  --shadow:  rgba(58, 46, 42, 0.18);
  --radius:  22px;
  --font-display: "Baloo 2", "Segoe UI", sans-serif;
  --font-body: "Quicksand", "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
}

body{
  background-image:
    radial-gradient(circle, rgba(58,46,42,0.07) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  overflow-x: hidden;
}

h1, h2, h3, .display{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

button{
  font-family: var(--font-body);
  cursor: pointer;
}

a { color: inherit; }

/* ---------- capa decorativa fija ---------- */
.doodle-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.doodle{
  position: absolute;
  font-size: 2rem;
  opacity: 0.35;
  filter: saturate(1.1);
  animation: float 7s ease-in-out infinite;
}
@keyframes float{
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
@media (prefers-reduced-motion: reduce){
  .doodle{ animation: none; }
}

/* ---------- contenedor principal ---------- */
#app{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 48px;
}

.stage{
  width: 100%;
  max-width: 480px;
  position: relative;
}

/* ---------- tarjeta tipo "página de diario" ---------- */
.card{
  background: #fffdf9;
  border: 2.5px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 26px 28px;
  position: relative;
  box-shadow: 8px 8px 0 var(--shadow);
  transform: rotate(var(--tilt, -0.6deg));
  animation: pop-in 0.42s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop-in{
  from{ opacity: 0; transform: translateY(14px) rotate(var(--tilt, -0.6deg)) scale(.97); }
  to{ opacity: 1; transform: translateY(0) rotate(var(--tilt, -0.6deg)) scale(1); }
}

/* washi tape corners */
.card::before, .card::after{
  content: "";
  position: absolute;
  width: 70px;
  height: 26px;
  background: repeating-linear-gradient(45deg, var(--pink-2), var(--pink-2) 6px, #ffeef6 6px, #ffeef6 12px);
  border: 1.5px dashed var(--pink);
  opacity: 0.9;
}
.card::before{ top: -14px; left: 18px; transform: rotate(-8deg); }
.card::after{ top: -14px; right: 18px; transform: rotate(7deg); background: repeating-linear-gradient(45deg, var(--lav-2), var(--lav-2) 6px, #f4efff 6px, #f4efff 12px); border-color: var(--lav); }

.sticker-badge{
  position: absolute;
  top: -22px;
  left: -14px;
  background: var(--yellow);
  border: 2.5px solid var(--line);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transform: rotate(-12deg);
  box-shadow: 3px 3px 0 var(--shadow);
}

.eyebrow{
  display: inline-block;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-family: var(--font-display);
  margin-bottom: 14px;
}

.pregunta-num{
  font-size: 0.85rem;
  color: #8a7a72;
  margin-bottom: 4px;
}

.pregunta-texto{
  font-size: 1.5rem;
  margin: 6px 0 20px;
}

.subtexto{
  font-size: 1.15rem;
  font-family: var(--font-display);
  color: var(--pink);
  margin-bottom: 18px;
}

/* ---------- inputs ---------- */
textarea.respuesta-input{
  width: 100%;
  min-height: 92px;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  resize: none;
  background: var(--paper);
  outline: none;
}
textarea.respuesta-input:focus{
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-2);
}

.opciones-lista{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opcion-btn{
  border: 2px solid var(--line);
  background: var(--paper);
  border-radius: 14px;
  padding: 13px 16px;
  text-align: left;
  font-size: 1.02rem;
  font-family: var(--font-body);
  font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.opcion-btn:hover{ background: var(--pink-2); }
.opcion-btn:active{ transform: scale(0.97); }
.opcion-btn.selected{ background: var(--pink); color: #fff; }

/* ---------- botones principales ---------- */
.btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  width: 100%;
  justify-content: center;
  background: var(--pink);
  color: #fff;
  border: 2.5px solid var(--line);
  border-radius: 16px;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  box-shadow: 4px 4px 0 var(--line);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--line); }
.btn-primary:active{ transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--line); }
.btn-primary:disabled{ opacity: .45; cursor: not-allowed; transform:none; box-shadow: 4px 4px 0 var(--line); }

.btn-secondary{
  background: var(--paper);
  color: var(--ink);
}

.text-input{
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 1.05rem;
  font-family: var(--font-body);
  outline: none;
  background: var(--paper);
}
.text-input:focus{ border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-2); }

/* ---------- progreso ---------- */
.progreso-wrap{
  margin-bottom: 18px;
  text-align: center;
}
.progreso-label{
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.progreso-corazones{
  font-size: 1.3rem;
  letter-spacing: 2px;
}
.progreso-frase{
  font-size: 0.82rem;
  color: #8a7a72;
  margin-top: 4px;
}

/* ---------- pantalla de dato desbloqueado ---------- */
.reveal-box{
  text-align: center;
  padding: 10px 0 2px;
}
.reveal-emoji{ font-size: 2.6rem; }
.reveal-title{ font-family: var(--font-display); font-size: 1.2rem; margin: 6px 0 2px; }
.reveal-sub{ color: #8a7a72; font-size: 0.95rem; }

/* ---------- pantalla intro/nombre ---------- */
.intro-title{
  font-size: 2rem;
  text-align: center;
  color: var(--pink);
  margin-bottom: 6px;
}
.intro-sub{
  text-align: center;
  font-size: 1rem;
  color: #6b5c54;
  margin-bottom: 22px;
}

/* ---------- juego: atrapa corazones ---------- */
.game-area{
  position: relative;
  width: 100%;
  height: 320px;
  border: 2.5px dashed var(--pink);
  border-radius: 18px;
  background: var(--paper-2);
  overflow: hidden;
  margin: 10px 0 16px;
}
.game-item{
  position: absolute;
  font-size: 1.9rem;
  background: none;
  border: none;
  transform: translate(-50%,-50%);
  animation: pop-item .25s ease;
}
@keyframes pop-item{ from{ transform: translate(-50%,-50%) scale(0);} to{ transform: translate(-50%,-50%) scale(1);} }
.game-hud{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 6px;
}

/* ---------- manual para mimarte ---------- */
.manual-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1.5px dashed #d8c8bd;
  padding: 10px 0;
}
.manual-item:last-child{ border-bottom: none; }
.manual-emoji{ font-size: 1.6rem; }
.manual-label{ font-family: var(--font-display); font-size: 0.85rem; color: #8a7a72; }
.manual-valor{ font-size: 1.02rem; }

/* ---------- responsive ---------- */
@media (max-width: 400px){
  .card{ padding: 26px 18px 22px; }
  .pregunta-texto{ font-size: 1.3rem; }
}

/* ---------- utilidades ---------- */
.center{ text-align: center; }
.mt-8{ margin-top: 8px; }
.mt-16{ margin-top: 16px; }
.hidden{ display: none !important; }
.small{ font-size: 0.85rem; color: #8a7a72; }