/* /srv/portal/aniversario2026/styles.css */
:root{
  --bg0:#06070c;
  --bg1:#0b1020;
  --glow:#7aa2ff;
  --gold:#caa24a;
  --text:#e9ecff;
  --muted:#a9b0d6;

  --env0:#1a1220;
  --env1:#241734;
  --paper:#e9e4d7;

  --frame:#2a1b10;
  --frame2:#3a2414;
  --mat:#e9e4d7;

  --shadow: 0 18px 45px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(122,162,255,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(202,162,74,.12), transparent 55%),
    radial-gradient(800px 500px at 50% 90%, rgba(122,162,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

.stage{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.hint{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 14px;
  font-size:14px;
  color:var(--muted);
  border:1px solid rgba(233,236,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  user-select:none;
}

.scene{
  perspective: 1400px;
  width:min(860px, 92vw);
  display:grid;
  place-items:center;
}

.envelope{
  position:relative;
  width:min(640px, 92vw);
  aspect-ratio: 16 / 10;
  transform-style:preserve-3d;
  border-radius:26px;
  outline:none;
}

.envelope:focus-visible{
  box-shadow: 0 0 0 4px rgba(122,162,255,.35);
}

.env-base{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform: rotateX(10deg) rotateY(-12deg);
  transition: transform 700ms cubic-bezier(.2,.85,.2,1);
}

.envelope:hover .env-base{
  transform: rotateX(12deg) rotateY(-8deg) translateZ(4px);
}

.envelope.open .env-base{
  transform: rotateX(8deg) rotateY(10deg);
}

.env-back{
  position:absolute;
  inset:0;
  border-radius:26px;
  background:
    radial-gradient(900px 450px at 30% 20%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(135deg, var(--env0), var(--env1));
  border:1px solid rgba(233,236,255,.10);
  box-shadow: var(--shadow);
  transform: translateZ(0px);
}

.env-pocket{
  position:absolute;
  left:4%;
  right:4%;
  bottom:6%;
  height:62%;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.0)),
    linear-gradient(135deg, rgba(202,162,74,.10), rgba(122,162,255,.10));
  border:1px solid rgba(233,236,255,.10);
  transform: translateZ(10px);
  overflow:hidden;
}

.env-pocket::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.18), rgba(255,255,255,.05));
  clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
  opacity:.55;
}

.env-pocket::after{
  content:"";
  position:absolute;
  inset:0;
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  border-top:1px solid rgba(233,236,255,.12);
  opacity:.7;
}

.env-flap{
  position:absolute;
  left:4%;
  right:4%;
  top:6%;
  height:58%;
  border-radius:20px;
  background:
    radial-gradient(600px 240px at 50% 15%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, #2a1a3f, #1c122a);
  border:1px solid rgba(233,236,255,.10);
  transform-origin: 50% 0%;
  transform: translateZ(22px) rotateX(0deg);
  transition: transform 900ms cubic-bezier(.2,.85,.2,1);
  clip-path: polygon(0 0, 100% 0, 50% 78%);
}

.envelope.open .env-flap{
  transform: translateZ(22px) rotateX(-165deg);
}

.env-seal{
  position:absolute;
  left:50%;
  top:56%;
  width:66px;
  height:66px;
  transform: translate(-50%, -50%) translateZ(26px);
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(202,162,74,.95), rgba(122,162,255,.45));
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  border:1px solid rgba(233,236,255,.18);
  opacity:.92;
}

/* Insert: initially hidden, then slides up */
.insert{
  position:absolute;
  left:50%;
  bottom:10%;
  width:min(680px, 92vw); /* <-- TU CAMBIO */
  transform: translateX(-50%) translateY(22%) translateZ(80px);
  transition: transform 900ms cubic-bezier(.2,.85,.2,1), opacity 450ms ease;
  opacity:0;
  pointer-events:none;
}

.envelope.open .insert{
  transform: translateX(-50%) translateY(20%) translateZ(120px); /* <-- TU CAMBIO */
  opacity:1;
  pointer-events:auto;
}

/* Card flip (front: drawing, back: PDF) */
.card{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  transform-style:preserve-3d;
  transition: transform 1100ms cubic-bezier(.2,.85,.2,1);
  border-radius:20px;
  outline:none;
}

.card.flipped{
  transform: rotateY(180deg);
}

.face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backface-visibility:hidden;
  border-radius:20px;
}

.front{
  background:
    radial-gradient(900px 450px at 50% 30%, rgba(255,255,255,.06), transparent 60%),
    rgba(255,255,255,.02);
  border:1px solid rgba(233,236,255,.10);
  box-shadow: var(--shadow);
  padding:18px;
  gap:10px;
}

.back{
  transform: rotateY(180deg);
  background:
    radial-gradient(900px 450px at 50% 30%, rgba(202,162,74,.10), transparent 60%),
    rgba(255,255,255,.02);
  border:1px solid rgba(233,236,255,.10);
  box-shadow: var(--shadow);
  padding:14px;
}

/* Frame */
.frame{
  width:100%;
  padding:16px;
  border-radius:18px;
  background: linear-gradient(135deg, var(--frame), var(--frame2));
  box-shadow: 0 14px 35px rgba(0,0,0,.55);
  position:relative;
}

.frame::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:14px;
  border:1px solid rgba(202,162,74,.35);
  pointer-events:none;
}

.mat{
  background: linear-gradient(180deg, var(--mat), #d8d2c4);
  border-radius:14px;
  padding:14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

.art{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  user-select:none;
  -webkit-user-drag:none;
}

.caption{
  text-align:center;
  letter-spacing:.2px;
}
.title{
  font-size:18px;
  font-weight:650;
}
.subtitle{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}
.tap{
  margin-top:2px;
  font-size:12px;
  color:rgba(233,236,255,.70);
  border:1px solid rgba(233,236,255,.10);
  padding:8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.18);
}

/* Ticket / PDF */
.ticket{
  width:100%;
  height:100%;
  border-radius:18px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.50);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
}

.ticket-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 8px 0 8px;
}
.ticket-title{ font-weight:700; font-size:18px; }
.ticket-sub{ font-size:13px; color:var(--muted); }

.pdf-wrap{
  flex:1;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(233,236,255,.10);
  background: rgba(255,255,255,.03);
}
.pdf{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background: transparent;
}
.pdf-fallback{ margin:18px; color:var(--muted); }
.pdf-link{ color: var(--glow); }

.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:2px 6px 6px 6px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border:1px solid rgba(233,236,255,.14);
  background: rgba(122,162,255,.18);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.btn:hover{ background: rgba(122,162,255,.26); }
.btn.secondary{ background: rgba(255,255,255,.06); }
.btn.secondary:hover{ background: rgba(255,255,255,.10); }

.fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block; /* importante para que el canvas tenga tamaño */
  pointer-events:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .env-base, .env-flap, .insert, .card{ transition:none; }
}
EOF