/* v20 — Carta abierta + Niebla rosa + Buzón secreto */
:root{--bg:#fff5fb;--bg2:#ffe9f4;--text:#6a355c;--muted:#9b5f8b;--pink1:#ffd1e6;--pink2:#ffb7d5;--pink3:#ff86b7;--white:#fff;--border:#ffd6ea;--shadow:0 18px 50px rgba(255,134,183,.25);--radius:18px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);line-height:1.9;-webkit-overflow-scrolling:touch}
.card{background:var(--white);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;width:min(1100px,92%);margin:18px auto}
.title{font-family:'Nunito',sans-serif;font-weight:800;color:#e05a96;text-align:center;margin:6px 0 10px 0}
.muted{color:var(--muted)}.center{text-align:center}
.btn{display:inline-block;background:linear-gradient(120deg,var(--pink3),var(--pink2));border:0;color:#75204f;padding:.9rem 1.1rem;border-radius:14px;font-weight:800;box-shadow:var(--shadow);transition:transform .2s}
.btn.small{padding:.6rem .9rem;font-size:1rem}
.btn:hover{transform:translateY(-2px)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Micro-animaciones */
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.pop-in{animation:pop .6s ease both}
.hover-lift{transition:transform .25s} .hover-lift:hover{transform:translateY(-4px)}

/* Fog (niebla rosa) */
#fogLayer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fog{position:absolute;filter:blur(40px);opacity:.18;border-radius:50%;mix-blend-mode:screen;animation:fogMove var(--dur,40s) linear infinite}
@keyframes fogMove{
  0%{transform:translate3d(var(--xStart,0),var(--yStart,0),0) scale(var(--s,1))}
  50%{transform:translate3d(var(--xMid,0),var(--yMid,0),0) scale(var(--s,1.05))}
  100%{transform:translate3d(var(--xEnd,0),var(--yEnd,0),0) scale(var(--s,1))}
}

/* Stickers */
#stickersLayer{position:fixed;inset:0;pointer-events:none;z-index:1}
.sticker{position:absolute;opacity:.14;filter:saturate(120%);animation:floaty 7s ease-in-out infinite}
.sticker img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:2px solid #ffd6ea;box-shadow:0 6px 16px rgba(255,134,183,.25)}

/* Controles */
.dark-toggle, .rain-toggle{
  position:fixed;z-index:300;background:#fff;border:2px solid var(--border);border-radius:50%;
  width:52px;height:52px;display:grid;place-items:center;box-shadow:var(--shadow);font-size:20px;font-weight:800;color:#6a355c
}
.dark-toggle{left:14px;bottom:14px}
.rain-toggle{right:14px;bottom:14px}
.rain-toggle[aria-pressed="false"]{opacity:.6}

/* Gate */
.locked{overflow:hidden}
.gate{position:fixed;inset:0;background:rgba(255,230,243,.98);display:grid;place-items:center;z-index:400}
.gate__box{background:#fff;border:2px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:22px 18px;width:min(560px,92vw);text-align:center}
.gate__img{max-width:min(260px,70vw);border-radius:18px;border:2px solid var(--border);margin-bottom:8px}
.gate__timer{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.gate__timer div{background:#fff;border:2px solid var(--border);border-radius:16px;padding:12px 14px;min-width:92px;text-align:center;box-shadow:var(--shadow)}
.gate__timer span{display:block;font-weight:800;font-size:clamp(22px,6vw,38px);color:#e05a96}
.gate__timer small{color:#996b8e}

/* Carta abierta */
.carta--open{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.carta__page{min-height:260px;background:#fff;border:2px solid var(--border);box-shadow:var(--shadow);padding:16px;border-radius:16px}
.carta__img{width:100%;border-radius:12px;border:2px solid var(--border);margin:8px 0}

/* Calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0}
.cal .day{padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff;text-align:center}
.cal .heart{position:relative}
.cal .heart::after{content:"❤";position:absolute;right:6px;bottom:4px;font-size:14px;color:#e05a96}

/* Timeline */
.timeline__wrap{width:min(1100px,92%);margin:0 auto;display:grid;gap:12px}
.timeline .item{background:#fff;border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:12px;animation:pop .6s ease both}
.timeline .item img{width:100%;border-radius:12px;margin-top:8px}

/* Gallery */
.card--gallery{padding:18px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.frame{display:flex;flex-direction:column;gap:8px}
.frame .inner{height:260px;position:relative;transform-style:preserve-3d;transition:transform .7s ease;perspective:1000px}
.frame .front,.frame .back{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden;border:2px solid var(--border);box-shadow:var(--shadow);background:#fff}
.frame .front img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.frame:hover .front img{transform:scale(1.05)}
.frame .back{display:grid;place-items:center;padding:12px;transform:rotateY(180deg)}
.flip.active .inner{transform:rotateY(180deg)}
.frame .caption{background:#fff;border:1px dashed rgba(224,90,150,.35);border-radius:10px;padding:8px}

/* Buzón secreto */
.mailbox{display:grid;place-items:center;margin:6px auto 12px auto;cursor:pointer}
.envelope{position:relative;width:min(360px,80vw);height:220px}
.envelope__body{position:absolute;inset:0;background:#ffe1ef;border:2px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.envelope__flap{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,#ffc0da,#ff9dc3);border:2px solid var(--border);border-bottom:0;border-top-left-radius:12px;border-top-right-radius:12px;transform-origin:top;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.envelope__seal{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);background:#fff;border:2px solid var(--border);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow);color:#e05a96;font-size:20px;font-weight:800}
.mailbox.open .envelope__flap{transform:rotateX(160deg)}
.mailbox__content{background:#fff;border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.mail__message{font-size:1.05rem}
.mail__image{width:100%;border-radius:12px;border:2px solid var(--border)}
.mail__actions{display:flex;justify-content:center;gap:8px;margin-top:10px}

/* Notes */
.notes__board{width:min(1100px,92%);margin:10px auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.note{min-height:110px;padding:10px;border-radius:10px;box-shadow:var(--shadow);border:1px dashed rgba(224,90,150,.35);animation:pop .5s ease both}

/* Poema */
.poem__box{width:min(900px,92%);margin:10px auto}
.poem__output{background:#fff;border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow);min-height:160px;padding:16px;white-space:pre-wrap;font-family:'Poppins',ui-monospace,Consolas,monospace;line-height:1.8;position:relative}
.poem__output::after{content:'';position:absolute;width:2px;height:1.2em;background:#e05a96;right:16px;bottom:16px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.poem__actions{display:flex;justify-content:center;margin-top:10px}

/* Since */
.since__timer{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.since__timer div{background:#fff;border:2px solid var(--border);border-radius:16px;padding:12px 14px;min-width:92px;text-align:center;box-shadow:var(--shadow)}
.since__timer span{display:block;font-weight:800;font-size:clamp(22px,6vw,38px);color:#e05a96}
.since__timer small{color:var(--muted)}

/* Dark mode */
.dark{--bg:#1a0f17; --bg2:#23121f; --text:#f6e9f3; --muted:#caa1c1; --pink1:#5a2c4b; --pink2:#7a3d63; --pink3:#b0558b; --white:#241321; --border:#3a2038; --shadow:0 18px 50px rgba(0,0,0,.45)}
.dark .title{color:#ffb7d5}
.dark .card, .dark .gate__box, .dark .poem__output, .dark .mailbox__content{background:var(--white)}
.dark .note{border-color:rgba(255,183,213,.25)}

.footer{padding:20px;text-align:center;color:var(--muted)}


/* === Per-section unlock overlay === */
.lock-wrap{position:relative}
.lock-overlay{
  position:absolute;inset:0;z-index:50;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(255,230,243,.85), rgba(255,240,246,.9));
  border-radius:16px;border:2px dashed rgba(224,90,150,.35);
  text-align:center;padding:18px;backdrop-filter:saturate(140%) blur(2px);
}
.lock-overlay__inner{
  background:#fff;border:2px solid var(--border);border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow);max-width:min(520px,92vw);
}
.lock-title{font-weight:800;color:#e05a96;margin:4px 0 2px 0}
.lock-timer{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.lock-timer div{background:#fff;border:2px solid var(--border);border-radius:12px;padding:8px 10px;min-width:70px}
.lock-timer span{display:block;font-weight:800;font-size:clamp(18px,5vw,28px);color:#e05a96}
.lock-timer small{color:var(--muted)}
.dark .lock-overlay{background:linear-gradient(180deg, rgba(32,16,28,.85), rgba(40,18,32,.9))}
.locked-section{}


/* v21.1 — Capa fija para corazones (evita scroll infinito) */
#heartsLayer{position:fixed; inset:0; pointer-events:none; z-index:150}
.rain-heart{
  position:absolute; /* ahora absolutas dentro de #heartsLayer */
  top:-24px; left:0;
}



/* 📱 Ajustes Responsive */
@media (max-width: 768px) {
  .card {
    width: 95%;
    padding: 12px;
  }

  .carta--open {
    grid-template-columns: 1fr; /* una sola columna en móvil */
  }

  .gate__box {
    width: 95%; /* que ocupe más ancho en pantallas pequeñas */
    padding: 16px;
  }

  .title {
    font-size: 1.4rem; /* títulos más pequeños */
  }

  .btn {
    font-size: 1rem;
    padding: 0.7rem 1rem;
  }

  .gate__timer div {
    min-width: 70px;
    padding: 10px;
  }

  .gate__timer span {
    font-size: clamp(18px, 5vw, 28px);
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1.2rem;
  }

  body {
    line-height: 1.6;
  }

  .btn {
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
  }
}