* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

body{
  font-family: "Montserrat", sans-serif;
  color: #2b2140;
  background: linear-gradient(180deg,#fff0f6 0%, #ffeef6 20%, #fff 100%);
  overflow-x: hidden;
}

/* Fondo */
.bg {
  position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(closest-side at 10% 10%, rgba(255, 200, 230,0.4), transparent 10%),
              radial-gradient(closest-side at 90% 80%, rgba(255, 230, 240,0.6), transparent 10%);
  pointer-events: none;
}

/* Corazones flotando */
.hearts { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.heart {
  position: absolute;
  width: 18px; height: 18px;
  transform: rotate(45deg);
  left: 50%;
  top: 100%;
  opacity: 0.9;
  animation: floatUp linear infinite;
}
.heart:before, .heart:after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  background: linear-gradient(180deg,#ffb3d6,#ff7aa9);
  border-radius: 50%;
}
.heart:before { top: -9px; left: 0; }
.heart:after  { left: 9px; top: 0; }

@keyframes floatUp {
  from { transform: translateY(0) rotate(45deg) scale(0.9); }
  to { transform: translateY(-140vh) rotate(45deg) scale(1.1); opacity: 0; }
}

/* Contenido principal */
.container { max-width: 1100px; margin: 40px auto; padding: 28px; }
header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }

.brand { display:flex; align-items:center; gap:14px; }
.logo {
  width:72px; height:72px; border-radius:18px;
  background: linear-gradient(135deg,#ff9cc0,#ff5fa1);
  display:flex; align-items:center; justify-content:center;
}
.logo h1 { font-family: "Pacifico"; color: white; font-size: 26px; }

.title h2 { font-family: "Pacifico"; font-size: 28px; color: #771a45; }
.title p { color:#6e4a60; font-weight:600; font-size:13px; }

.play-controls { display:flex; gap:10px; }
.play-btn {
  background: linear-gradient(180deg,#ff5fa1,#ff2f6f);
  padding:10px 14px; color:white; border-radius:12px; cursor:pointer;
  border: none; font-weight:700;
}
.play-btn.paused { background: linear-gradient(180deg,#ffd1e6,#ff90c6); color:#5a1633; }

/* Tarjetas */
.card {
  background: rgba(255,255,255,0.9);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(102,51,72,0.08);
}

/* Secciones */
.hero { display:grid; grid-template-columns: 1fr 380px; gap: 18px; align-items:center; }
.hero-left h1 { font-family:"Pacifico"; font-size:48px; color:#7a1840; }
.hero-left p { font-size:16px; color:#6b4a57; }
.badge {
  display:inline-block; padding:8px 12px; border-radius:999px;
  background: linear-gradient(90deg,#ff8fbf,#ff5fa1);
  color:white; font-weight:700; font-size:13px;
}

.portrait {
  width:100%; height:260px; border-radius:16px; overflow:hidden;
  background: linear-gradient(180deg,#fff0f6,#ffeef6);
  display:flex; align-items:center; justify-content:center;
}
.portrait img { width:100%; height:100%; object-fit:cover; }

.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-title h3 { color:#6a2a47; font-weight:700; }
.edit-hint { font-size:13px; color:#7a4a61; }

.story p { font-size:15px; color:#4f3844; line-height:1.6; }

/* Galería */
.gallery-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.thumb { border-radius:12px; overflow:hidden; min-height:110px; background:#fff4f9; }
.thumb img { width:100%; height:100%; object-fit:cover; }

.file-input { display:flex; gap:12px; margin-top:10px; }
.btn { padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:700; }
.btn.secondary { background:#fff1f7; color:#7a2a48; }
.btn.primary { background: linear-gradient(90deg,#ff7aa8,#ff4b7f); color:white; }

/* Carta */
.letter {
  min-height:140px; border-radius:12px; padding:14px; border:1px dashed rgba(160,80,120,0.12);
  background: linear-gradient(180deg,#fff,#fff8fb);
  color:#4a2f3e;
  font-size:15px; line-height:1.6;
}
.letter[contenteditable="true"] { outline: none; }

footer { text-align:center; margin-top:18px; color:#7a4a61; }

@media (max-width:900px){
  .hero { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:480px){
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-left h1 { font-size:36px; }
}