:root{
  --bg1:#0b1220;
  --bg2:#0f1a33;

  --paper:#fff7ef;
  --ink:#1b1b1b;

  --env:#e9c6a7;
  --env2:#d9b28f;

  --shadow: rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#fff;
  background: radial-gradient(1200px 800px at 50% 30%, var(--bg2), var(--bg1));
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  gap:18px;
  text-align:center;
}

.title{
  margin:0;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.95;
}

.sub{
  margin:0;
  font-size:14px;
  opacity:.7;
}

/* Envelope button */
.envelope{
  position:relative;
  width:min(360px, 90vw);
  height:min(235px, 58vw);
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  outline:none;
  transform: translateZ(0);
}

/* Layers */
.envelope__back{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--env), var(--env2));
  border-radius:16px;
  box-shadow: 0 18px 40px var(--shadow);
}

/* front triangles */
.envelope__front{
  position:absolute; inset:0;
  border-radius:16px;
  overflow:hidden;
}
.envelope__front::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,0,0,.06) 50%) left/50% 100% no-repeat,
    linear-gradient(225deg, transparent 50%, rgba(0,0,0,.08) 50%) right/50% 100% no-repeat;
}

/* flap */
.envelope__flap{
  position:absolute;
  left:0; right:0;
  top:0;
  height:56%;
  background: linear-gradient(180deg, #f2d2b6, #ddb08a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0%;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.15));
}

/* Letter container */
.letter{
  position:absolute;
  left:50%;
  bottom:16px;
  width:88%;
  height:92%;
  transform: translateX(-50%);
  pointer-events:auto;
}

/* Paper */
.letter__paper{
  position:absolute;
  inset:auto 0 0 0;
  margin:auto;
  background: var(--paper);
  color: var(--ink);
  border-radius:14px;
  height:78%;
  padding:16px 16px 12px;
  box-shadow: 0 16px 30px rgba(0,0,0,.25);
  transform: translateY(48%) scale(.98);
  opacity:0;

  transition:
    transform 900ms cubic-bezier(.2,.9,.2,1),
    opacity 450ms ease;
}

.letter__hint{
  display:block;
  font-size:22px;
  margin-bottom:10px;
}

/* SCROLL AREA: aquí está la magia */
.letter__scroll{
  pointer-events:auto;
  display:block;
  height: calc(100% - 22px - 10px - 22px); /* total - (footer/hint/padding aprox) */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-right:6px; /* espacio para scrollbar */
}

/* El texto */
.letter__text{
  display:block;
  font-size:16px;
  line-height:1.5;
  white-space:pre-wrap; /* respeta saltos */
  word-break: break-word;
}

/* Footer */
.letter__footer{
  display:block;
  margin-top:10px;
  font-size:12px;
  opacity:.65;
}

/* Open state */
.envelope.open .envelope__flap{
  transform: rotateX(180deg);
}

.envelope.open .letter__paper{
  transform: translateY(-6%) scale(1);
  opacity:1;
}

/* Tap feedback on mobile */
.envelope:active{
  transform: scale(.995);
}

/* Mejora para pantallas pequeñas */
@media (max-width: 380px){
  .letter__paper{ padding:14px 14px 10px; }
  .letter__text{ font-size:15px; }

.envelope__back{ z-index: 1; }
.envelope__front{ z-index: 2; }
.envelope__flap{ z-index: 3; }
.letter{ z-index: 4; }

}