/* ===== Base (copiado literal de specs/reference/01-original-design.html) ===== */
body{margin:0;background:#1D1129;color:#F7EEF2;font-family:Outfit,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#F2A7BE}
a:hover{color:#E9C46A}
input,textarea{font-family:inherit}
*{box-sizing:border-box}
input::placeholder,textarea::placeholder{color:#9C8AA6}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes sealPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,167,190,.55)}50%{box-shadow:0 0 0 12px rgba(242,167,190,0)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(-110vh);opacity:0}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes flapOpen{from{transform:rotateX(0)}to{transform:rotateX(180deg)}}
@keyframes letterOut{0%{opacity:0;transform:translateY(60px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-40px) rotate(0) scale(1.1)}100%{opacity:1}}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0)}100%{transform:translate3d(var(--dx),110vh,0) rotate(720deg)}}

/* ===== Layout shell ===== */
.page-shell{min-height:100vh;display:flex;flex-direction:column;position:relative}

.site-header{position:sticky;top:0;z-index:5;background:rgba(29,17,41,.82);backdrop-filter:blur(10px);border-bottom:1px solid #3D2A50}
.site-header-inner{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{all:unset;cursor:pointer;font-family:'Bodoni Moda',serif;font-style:italic;font-size:24px;color:#E9C46A}
.spacer{flex:1}
.score-badge{display:flex;align-items:center;gap:10px;font-size:14px;color:#CDBBD3;padding:7px 14px;border:1px solid #3D2A50;border-radius:999px}
.score-badge strong{font-weight:700;color:#E9C46A}
.site-nav{display:flex;gap:6px}
.nav-link{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#F7EEF2;transition:background .2s}
.nav-link:hover{background:#2A1B3A}
.nav-link-primary{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;background:#F2A7BE;color:#2B1B2E;transition:transform .2s}
.nav-link-primary:hover{transform:translateY(-2px)}

main.page-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:0 20px 100px;position:relative;z-index:1}

/* ===== Sparkles / confetti ===== */
.sparkles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sparkle-dot{position:absolute;bottom:-10px;border-radius:50%}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti-bit{position:absolute;top:0}

/* ===== Inicio ===== */
.home-screen{min-height:calc(100vh - 70px);padding:60px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px}
.home-eyebrow{font-size:13px;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:#F2A7BE;animation:fadeUp .8s ease both}
.home-title{margin:0;font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:clamp(72px,16vw,180px);line-height:.9;color:#E9C46A;animation:fadeUp 1s .15s ease both}
.home-subtitle{margin:0;font-family:'Bodoni Moda',serif;font-size:clamp(22px,3vw,30px);line-height:1.35;max-width:24ch;text-wrap:balance;animation:fadeUp 1s .35s ease both}
.home-text{margin:0;font-size:17px;line-height:1.6;color:#CDBBD3;max-width:44ch;text-wrap:pretty;animation:fadeUp 1s .55s ease both}
.home-cta-wrap{animation:fadeUp 1s .75s ease both}
.home-cta{all:unset;cursor:pointer;padding:17px 30px;border-radius:999px;background:#E9C46A;color:#2B1B2E;font-weight:700;font-size:17px;animation:sealPulse 2.4s 1.8s infinite;transition:transform .2s}
.home-cta:hover{transform:scale(1.05)}
.home-envelope{margin-top:30px;width:150px;height:104px;position:relative;animation:fadeUp 1s .95s ease both}
.home-envelope-bob{position:absolute;inset:0;animation:bob 4s ease-in-out infinite}
.envelope-body{position:absolute;inset:0;background:#F6E7EA;border-radius:6px}
.envelope-flap-small{position:absolute;left:0;right:0;top:0;height:62%;background:#E8CDD5;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:6px 6px 0 0}
.envelope-seal-small{position:absolute;left:50%;top:62%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#B83A5E;box-shadow:inset 0 0 0 4px #9E2F4F}

/* ===== Álbum ===== */
.album-screen{padding:56px 0;display:flex;flex-direction:column;gap:34px}
.album-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;animation:fadeUp .6s ease both}
.album-title{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(40px,6vw,64px)}
.album-title em{font-style:italic;color:#E9C46A}
.album-pending{color:#CDBBD3;font-size:15px}
.completed-banner{background:#E9C46A;color:#2B1B2E;border-radius:16px;padding:28px 30px;display:flex;flex-direction:column;gap:6px;animation:pop .7s ease both}
.completed-title{font-family:'Bodoni Moda',serif;font-style:italic;font-size:34px}
.completed-sub{font-size:16px;font-weight:500}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px}
.card-btn{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:14px;animation:fadeUp .7s ease both;transition:transform .25s}
.card-btn:hover{transform:translateY(-6px) rotate(-1deg)}
.card-sealed{aspect-ratio:3/2;position:relative;border-radius:8px;background:#F6E7EA;box-shadow:0 14px 30px rgba(0,0,0,.35);overflow:hidden}
.card-flap{position:absolute;left:0;right:0;top:0;height:60%;background:#E8CDD5;clip-path:polygon(0 0,100% 0,50% 100%)}
.card-seal{position:absolute;left:50%;top:60%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#B83A5E;box-shadow:inset 0 0 0 5px #9E2F4F;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-style:italic;font-size:26px;color:#F6E7EA;animation:sealPulse 2.6s infinite}
.card-number{position:absolute;left:16px;bottom:12px;font-family:'Bodoni Moda',serif;font-size:15px;color:#7A4A5C}
.card-solved{aspect-ratio:3/2;position:relative;border-radius:8px;background:#FFF8F0;box-shadow:0 14px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#2B1B2E;animation:pop .6s ease both}
.card-solved-label{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9E2F4F}
.card-solved-author{font-family:'Bodoni Moda',serif;font-style:italic;font-size:34px}
.card-footer{display:flex;justify-content:space-between;font-size:14px;color:#CDBBD3;padding:0 4px}

/* ===== Carta (juego) ===== */
.letter-screen{padding:36px 0;display:flex;flex-direction:column;gap:30px}
.letter-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation:fadeUp .5s ease both}
.back-link{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:#CDBBD3;transition:color .2s}
.back-link:hover{color:#E9C46A}
.letter-number{font-family:'Bodoni Moda',serif;font-style:italic;font-size:18px;color:#E9C46A}

.letter-open-wrap{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.letter-photos-col{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px;animation:fadeUp .7s ease both}
.envelope-visual{aspect-ratio:3/2;position:relative;border-radius:10px;background:#F6E7EA;box-shadow:0 24px 50px rgba(0,0,0,.4);animation:bob 5s ease-in-out infinite}
.envelope-flap-lg{position:absolute;left:0;right:0;top:0;height:60%;background:#E8CDD5;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0}
.envelope-seal-lg{position:absolute;left:50%;top:60%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#B83A5E;box-shadow:inset 0 0 0 6px #9E2F4F;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-style:italic;font-size:36px;color:#F6E7EA;animation:sealPulse 2.2s infinite}
.mystery-photos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mystery-photo{aspect-ratio:1;border-radius:8px;border:1px solid #3D2A50;background:linear-gradient(100deg,#2A1B3A 30%,#3A2650 50%,#2A1B3A 70%);background-size:200% 100%;animation:shimmer 2.8s linear infinite;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-size:28px;color:#6E5683}
.photos-caption{font-size:14px;color:#CDBBD3;text-align:center}

.letter-info-col{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:30px}
.clues-block{display:flex;flex-direction:column;gap:12px}
.clues-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.clues-title{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:38px}
.clues-value{font-size:14px;color:#E9C46A;font-weight:600}
.clue-row{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:12px;background:#2A1B3A;border:1px solid #3D2A50}
.clue-index{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #E9C46A;color:#E9C46A;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-size:17px}
.clue-text{font-size:17px;line-height:1.5;text-wrap:pretty;animation:slideIn .55s ease both}
.clue-skeleton{flex:1;height:12px;border-radius:6px;background:linear-gradient(100deg,#3D2A50 30%,#56406C 50%,#3D2A50 70%);background-size:200% 100%;animation:shimmer 2.4s linear infinite}
.ask-clue-btn{all:unset;cursor:pointer;align-self:flex-start;font-size:15px;font-weight:600;color:#F2A7BE;padding:6px 0;transition:color .2s}
.ask-clue-btn:hover{color:#E9C46A}

.who-wrote{display:flex;flex-direction:column;gap:14px}
.who-title{font-family:'Bodoni Moda',serif;font-style:italic;font-size:24px}
.options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.option-btn{all:unset;cursor:pointer;text-align:center;padding:16px 12px;border-radius:12px;border:1px solid #F2A7BE;color:#F7EEF2;font-weight:600;font-size:16px;transition:background .2s, color .2s, transform .2s}
.option-btn:hover{background:#F2A7BE;color:#2B1B2E;transform:scale(1.03)}
.option-wrong{text-align:center;padding:16px 12px;border-radius:12px;border:1px dashed #56406C;color:#8A7896;font-size:16px;text-decoration:line-through;animation:shake .5s ease both}
.wrong-hint{font-size:14px;color:#F2A7BE;animation:fadeUp .4s ease both}

/* ===== Carta (resuelta) ===== */
.solved-wrap{display:flex;flex-direction:column;align-items:center;gap:40px}
.solved-card-wrap{width:100%;max-width:640px;position:relative;padding-top:40px;perspective:900px}
.solved-flap{position:absolute;left:0;right:0;top:40px;height:120px;background:#E8CDD5;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;animation:flapOpen .8s ease both;border-radius:10px 10px 0 0}
.solved-article{position:relative;background:#FFF8F0;color:#2B1B2E;border-radius:10px;padding:clamp(28px,5vw,52px);display:flex;flex-direction:column;gap:22px;box-shadow:0 30px 60px rgba(0,0,0,.45);animation:letterOut .9s .5s cubic-bezier(.2,.8,.2,1) both}
.solved-top-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9E2F4F}
.solved-message{margin:0;font-family:'Bodoni Moda',serif;font-size:clamp(21px,2.6vw,26px);line-height:1.55;text-wrap:pretty;white-space:pre-line}
.solved-signoff{font-size:16px;color:#6B4A5A}
.solved-author{font-family:'Bodoni Moda',serif;font-style:italic;font-size:40px;color:#B83A5E;margin-top:-14px}

.solved-photos{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.polaroid{width:min(260px,80vw);animation:dropIn .8s cubic-bezier(.2,.8,.2,1) both}
.polaroid-inner{background:#FFF8F0;padding:12px 12px 42px;border-radius:4px;box-shadow:0 18px 36px rgba(0,0,0,.4);transition:transform .3s}
.polaroid-inner:hover{transform:rotate(0) scale(1.04)}
.polaroid-photo{aspect-ratio:1;background:#1D1129;border-radius:2px;overflow:hidden}
.polaroid-photo img{width:100%;height:100%;object-fit:cover;display:block}

.next-btn{all:unset;cursor:pointer;padding:16px 28px;border-radius:999px;background:#E9C46A;color:#2B1B2E;font-weight:700;animation:fadeUp .6s 1.6s ease both;transition:transform .2s}
.next-btn:hover{transform:scale(1.05)}

/* ===== Password gate ===== */
.lock-screen{padding:60px 0;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.lock-seal{width:92px;height:92px;border-radius:50%;background:#B83A5E;box-shadow:inset 0 0 0 6px #9E2F4F;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-style:italic;font-size:40px;color:#F6E7EA;animation:sealPulse 2.4s infinite}
.lock-title{margin:0;font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:clamp(28px,5vw,40px);color:#E9C46A}
.lock-text{margin:0;color:#CDBBD3;font-size:16px;max-width:40ch}
.lock-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px}
.lock-input{padding:15px 16px;border-radius:12px;border:1px solid #3D2A50;background:#2A1B3A;font-size:16px;color:#F7EEF2;outline-color:#F2A7BE;text-align:center}
.lock-submit{all:unset;cursor:pointer;padding:15px 16px;border-radius:999px;background:#E9C46A;color:#2B1B2E;font-weight:700;font-size:16px;text-align:center;transition:transform .2s}
.lock-submit:hover{transform:scale(1.05)}
.lock-error{color:#F2A7BE;font-size:14px;animation:shake .5s ease both}

/* ===== Escribir ===== */
.write-screen{padding:56px 0;display:flex;flex-direction:column;gap:32px;max-width:680px;margin:0 auto}
.write-form{display:flex;flex-direction:column;gap:30px}
.write-head{display:flex;flex-direction:column;gap:10px;animation:fadeUp .6s ease both}
.write-title{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(38px,6vw,58px)}
.write-title em{font-style:italic;color:#E9C46A}
.write-sub{margin:0;color:#CDBBD3;font-size:17px;line-height:1.6}
.form-group{display:flex;flex-direction:column;gap:8px;animation:fadeUp .6s ease both}
.form-label{font-weight:600}
.form-hint{font-size:14px;color:#CDBBD3}
.text-input,.textarea-input{padding:15px 16px;border-radius:12px;border:1px solid #3D2A50;background:#2A1B3A;font-size:16px;color:#F7EEF2;outline-color:#F2A7BE;width:100%}
.textarea-input{line-height:1.55;resize:vertical}
.photos-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.photo-upload-slot{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px dashed #56406C;display:flex;align-items:center;justify-content:center;font-size:14px;color:#CDBBD3;cursor:pointer;transition:border-color .2s, background .2s;overflow:hidden;text-align:center}
.photo-upload-slot:hover{border-color:#F2A7BE;background:#2A1B3A}
.photo-upload-slot input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo-upload-slot img{width:100%;height:100%;object-fit:cover}
.photo-upload-item{display:flex;flex-direction:column;gap:6px}
.photo-title-input{padding:8px 10px;border-radius:8px;border:1px solid #3D2A50;background:#2A1B3A;font-size:12px;color:#F7EEF2;outline-color:#F2A7BE}
.clue-input-row{display:flex;align-items:center;gap:12px}
.clue-input-index{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #E9C46A;color:#E9C46A;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif}
.clue-input{flex:1;min-width:0;padding:13px 14px;border-radius:12px;border:1px solid #3D2A50;background:#2A1B3A;font-size:15px;color:#F7EEF2;outline-color:#F2A7BE}
.submit-wrap{animation:fadeUp .6s .5s ease both}
.submit-btn{all:unset;cursor:pointer;padding:17px 30px;border-radius:999px;background:#E9C46A;color:#2B1B2E;font-weight:700;font-size:17px;transition:transform .2s}
.submit-btn:hover{transform:scale(1.05)}
.field-error{font-size:13px;color:#F2A7BE}

.sent-screen{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;padding-top:60px}
.sent-envelope{width:200px;height:134px;position:relative;animation:fadeUp .6s ease both}
.sent-seal{position:absolute;left:50%;top:60%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#B83A5E;box-shadow:inset 0 0 0 5px #9E2F4F;animation:pop .6s .5s ease both}
.sent-title{margin:0;font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:48px;color:#E9C46A;animation:fadeUp .6s .8s ease both}
.sent-text{margin:0;color:#CDBBD3;font-size:17px;line-height:1.6;max-width:36ch;animation:fadeUp .6s 1s ease both}
.sent-again{all:unset;cursor:pointer;font-weight:600;color:#F2A7BE;animation:fadeUp .6s 1.2s ease both}

/* ===== PDF download button ===== */
.pdf-btn-wrap{animation:fadeUp .6s ease both}
.pdf-btn{all:unset;cursor:pointer;padding:15px 26px;border-radius:999px;background:#2A1B3A;color:#E9C46A;border:1px solid #E9C46A;font-weight:700;font-size:15px;transition:transform .2s, background .2s}
.pdf-btn:hover{transform:scale(1.03);background:#3D2A50}
.pdf-btn[disabled]{opacity:.6;cursor:wait}

/* ===== Responsive ===== */
@media (max-width: 640px){
  .site-header-inner{padding:12px 16px;gap:10px}
  .brand{font-size:20px}
  .site-nav{gap:4px}
  .nav-link,.nav-link-primary{padding:8px 12px;font-size:13px}
  main.page-main{padding:0 16px 80px}
  .options-grid{grid-template-columns:1fr}
  .letter-open-wrap{gap:28px}
  .score-badge{font-size:12px;padding:6px 10px}
}