/* Diseño 'Carta 3D' (sobre con sello, tarjeta scrapbook) - base del usuario */
:root {
  --bg-color: #0d0f12;
  --envelope-main: #181c24;
  --envelope-inner: #11141a;
  --envelope-border: #2a313d;
  --gold-primary: #d4af37;
  --wax-red: #8b0000;
  --card-bg: #f5f4f0;
  --card-text: #1a1a1a;
  --card-accent: #b31010;
}
.bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(0,0,0,0) 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}
.viewport-3d {
  width: 100%; max-width: 440px; height: 620px;
  position: relative; display: flex;
  align-items: center; justify-content: center;
  z-index: 10; perspective: 1200px;
}

.escena-wrapper {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}

/* Auto-escala en celulares segun altura/anchura para que nada se corte */
@media (max-width: 480px), (max-height: 820px) {
  .escena-wrapper { transform: scale(0.85); }
}
@media (max-width: 380px), (max-height: 720px) {
  .escena-wrapper { transform: scale(0.75); }
}
@media (max-height: 620px) {
  .escena-wrapper { transform: scale(0.65); }
}

.escena {
  width: 360px; height: 250px;
  position: relative; transform-style: preserve-3d;
  transition: transform 0.1s ease-out; cursor: grab;
}
.escena:active { cursor: grabbing; }

/* ENVELOPE WRAPPER */
.sobre-3d {
  position: absolute; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.escena.abierto .sobre-3d { transform: translateY(160px) rotateX(12deg); }

/* 1. REAR INNER WALL */
.env-back {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--envelope-inner) 0%, #090b0e 100%);
  border-radius: 12px; border: 1px solid var(--envelope-border);
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), inset 0 0 30px rgba(0,0,0,0.8);
  transform: translateZ(-2px); overflow: hidden;
}
.env-back::before {
  content: ''; position: absolute; inset: 12px;
  border: 1px dashed rgba(212, 175, 55, 0.25); border-radius: 8px;
  background-image: radial-gradient(rgba(212, 175, 55, 0.1) 1px, transparent 1px);
  background-size: 16px 16px; opacity: 0.6;
}

/* 2. FRONT POCKET FLAPS */
.env-pocket {
  position: absolute; inset: 0;
  transform-style: preserve-3d; pointer-events: none;
  z-index: 40; 
}
.flap-side {
  position: absolute; bottom: 0; width: 52%; height: 100%;
  background: linear-gradient(180deg, #1d222c 0%, #141820 100%);
  border: 1px solid rgba(255,255,255,0.05);
}
.flap-side.izq {
  left: 0; clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 12px 0 0 12px; filter: drop-shadow(4px 0 8px rgba(0,0,0,0.4));
}
.flap-side.der {
  right: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%);
  border-radius: 0 12px 12px 0; filter: drop-shadow(-4px 0 8px rgba(0,0,0,0.4));
}
.flap-bottom {
  position: absolute; bottom: 0; width: 100%; height: 68%;
  background: linear-gradient(0deg, #1a1e27 0%, #131720 100%);
  clip-path: polygon(0 100%, 50% 20%, 100% 100%);
  border-radius: 0 0 12px 12px; filter: drop-shadow(0 -6px 12px rgba(0,0,0,0.5));
}

/* 3. TOP HINGED FLAP */
.env-flap-top {
  position: absolute; top: 0; left: 0; width: 100%; height: 72%;
  transform-origin: top center; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), z-index 0.1s 0.2s;
  z-index: 50; 
}
.env-flap-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #222834 0%, #181d26 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
}
.env-flap-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.15) 0%, transparent 60%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.escena.abierto .env-flap-top {
  transform: rotateX(180deg);
  z-index: 10; 
}

/* 4. REALISTIC WAX SEAL */
.sello-container {
  position: absolute; bottom: -31px; left: 50%;
  transform: translateX(-50%) translateZ(10px);
  z-index: 60; cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, filter 0.3s;
}
.sello-container:hover {
  transform: translateX(-50%) translateZ(15px) scale(1.05); filter: brightness(1.2);
}
.escena.abierto .sello-container {
  transform: translateX(-50%) translateY(40px) translateZ(40px) rotateX(80deg);
  opacity: 0; pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56), opacity 0.4s ease 0.2s;
}
.sello-wax {
  width: 62px; height: 62px;
  background: radial-gradient(circle at 35% 35%, #ad1422 0%, #6e000a 70%, #420005 100%);
  border-radius: 48% 52% 55% 45% / 53% 47% 53% 47%;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6), inset 0 3px 6px rgba(255,255,255,0.4), inset 0 -4px 8px rgba(0,0,0,0.6), 0 0 0 3px rgba(110,0,10,0.5);
  display: flex; align-items: center; justify-content: center;
}
.sello-inner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px dashed rgba(212, 175, 55, 0.6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.sello-monogram {
  font-family: 'Cinzel', serif; font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #ffe29f 0%, #d4af37 50%, #8a640f 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

/* ==================================================== */
/* 5. TARJETA ESTILO SCRAPBOOK - ARREGLO DE CORTES      */
/* ==================================================== */
.carta-3d {
  position: absolute;
  width: 340px; 
  height: auto; 
  min-height: 520px; 
  left: 10px; 
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100px) translateZ(-5px) scale(0.6);
  z-index: 20; 
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.6s ease, opacity 0.4s ease, visibility 0.6s ease;
}

.carta-bg {
  position: absolute; inset: 0;
  background: var(--card-bg); border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 0 60px rgba(0,0,0,0.03);
  overflow: hidden; 
  z-index: 0;
}

.escena.abierto .carta-3d {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-240px) translateZ(100px) scale(1) rotateX(-2deg);
  z-index: 60; 
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, 
              opacity 0.4s ease 0.3s, 
              visibility 0s 0.3s, 
              z-index 0s 0.3s;
}

.escena.abierto .carta-bg {
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 20px rgba(255,255,255,0.1);
  transition: box-shadow 1.2s ease 0.3s;
}

.carta-content {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; 
  padding: 25px 20px 30px 20px; 
}

.bg-text-pattern {
  position: absolute; inset: -20px;
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
  opacity: 0.15; pointer-events: none; z-index: 0;
}
.bg-text-pattern span {
  font-family: 'Caveat', cursive; font-size: 42px; color: #888;
  margin: -10px 10px; white-space: nowrap; font-weight: 700;
}

.scrapbook-title {
  font-family: 'Kalam', cursive; font-size: 56px; font-weight: 700;
  color: var(--card-accent); transform: rotate(-6deg);
  margin-top: 10px; margin-bottom: -15px;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.1); z-index: 2;
}

.letters-container {
  display: flex; gap: 6px; z-index: 5; margin-bottom: -20px; position: relative;
}
.circle-letter {
  width: 38px; height: 38px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 20px; color: #111;
  box-shadow: -2px 4px 6px rgba(0,0,0,0.25), inset -1px -2px 3px rgba(0,0,0,0.1);
}
.circle-letter.red { color: var(--card-accent); }
.circle-letter:nth-child(1) { transform: translateY(0px) rotate(-10deg); }
.circle-letter:nth-child(2) { transform: translateY(8px) rotate(5deg); }
.circle-letter:nth-child(3) { transform: translateY(12px) rotate(-5deg); }
.circle-letter:nth-child(4) { transform: translateY(10px) rotate(8deg); }
.circle-letter:nth-child(5) { transform: translateY(4px) rotate(-12deg); }
.circle-letter:nth-child(6) { transform: translateY(-2px) rotate(15deg); }

.photo-frame {
  background: #fff; padding: 10px 10px 30px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transform: rotate(2deg); position: relative; width: 85%;
  z-index: 2; margin-bottom: 20px;
}
.photo-img {
  width: 100%; 
  height: 200px; /* ALTO FIJO ESTRICTO */
  object-fit: cover;
  filter: grayscale(100%) contrast(1.15) brightness(1.05);
  border: 1px solid #eee;
}

.sticker { position: absolute; filter: drop-shadow(2px 4px 5px rgba(0,0,0,0.3)); z-index: 6;}
.sticker-star-1 { width: 45px; top: -15px; left: -20px; transform: rotate(-15deg); }
.sticker-star-2 { width: 40px; bottom: -20px; right: 10px; transform: rotate(25deg); }
.sticker-flowers { width: 120px; bottom: -50px; right: -25px; transform: rotate(5deg); }

.handwritten-msg {
  font-family: 'Caveat', cursive; font-size: 26px; color: #111;
  text-align: center; line-height: 1.1; width: 90%;
  transform: rotate(-3deg); margin-top: auto; z-index: 2;
  font-weight: 600; text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.card-actions {
  display: flex; gap: 10px; width: 100%; margin-top: 25px;
  position: relative; z-index: 10; opacity: 1;
}
.btn-card {
  flex: 1; padding: 12px 10px; border-radius: 20px; border: none;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
.btn-card-primary { background: var(--card-accent); color: #fff; }
.btn-card-secondary { background: #e0e0e0; color: #333; }

.textura-papel::after {
  /* v30 · grano de papel con un mosaico PNG diminuto: antes era un filtro SVG (feTurbulence) con mix-blend-mode, muy pesado en celulares y era la causa principal del lag al abrir el sobre */
  content: ''; position: absolute; inset: 0; opacity: 0.55;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAARZ0lEQVR42i2ZZ44kaQOiH97wJm2ZdiOt9v7X+qa7qyp9ZEaGZ3/MHgEBQoBcMrNFLNyADYWOVMAZiIzWzvXBzmeZnYMiD+q9xgzMyj3pQsAUzplUcaJwijixImhG3Hnhf1TuiLSQe8MnNY2+MfoRK6dzQ8SLOk8M6tkwE/uXTMvoWX+ccGbxjou2Thk8a/CFWvaNgVdHag3SmY694SIoGP1kT/CikRQ0UzvTg0mpb0S+a6XP2Dk54qnFr8z64M0PtUQa/Q8RhR6UpJz1jR45ByZymzWNX0A7Gm0QpuPFKR+80HqjhbsWnxm1dqLcQSlW5EkJs36wuPGNNzkn0wsDD++48aAm1YXKMzMiJeEu0/sbEQdedWDvUY0LyR1PxZ5Z9MODzhaZIkZ6UhZDrIzeNa1md9phL9Qanah1q9h7dYFCO/8m9UCvlVJl9I7cMSujVceZYBNjDpr41/KRkUkJAq29V+AnT8WsWSmn9opfbJixBi9UTIqd6hsViQqdSJl5Kneg91H8tHlo7YmZXiN7S51LYh1JbYIWFg9MrBnZ6MTavXBLqdkdOWsu2vqgdw6O2ejCyh+gnNExASlQ05CQGiaJ0YGFgbXmYJgUe+GuEjujZ/Sdni9vWbFipvOiggK01sGvbrVQa2RhqzUtKOYo+c6oShAZvrOjAuWq1Tni6JGzb7pKNO50VqaODuQ1iQZveGJWBH0ZXrlT6ouala+6EzF7z0mxv+lER+5SkW+KWNyTkKjlzY0WYhc8FHlW7IVMR69oeGfiQUWsBnsj8eGEjYIvQXuC92pUMXJlYVKqIyk9gZV/83DtPTEDv9hroidzzp0zkzvnGGsAPohZWGhoXevpmpQYk6jkzgmIdWbrmtFHrzQSuaeQKyKkmIkXX6nUIAYy8IOfTPwlVu5MMUdLs1cqOfpVD8fqXSpmoKEmc8eg3guvOrtS7ISbEjI/GFgzcmGDVRL8oKGi5qlr0KygzBUR838yc0fhmk5v+q1RCRuvedA5VrCZfeYdc9cJq/uPEHqu9LJngj5dEpFqVOWLr/oPeySIeNC748FOHXC3xP/laNSzJTASeLpnx51JwWs9jNZg01KRq+HqleSURnLPLw3cgJVjnf0K+nCQ2XEmJpAjJhf6zYqBQERL5JEXdVT+4iUwuqckoSB4RcpEykWvEjstnrV26zsPdXpqQi7UcCMmp9CbftO4QxxovdaHWr+pIsK2SyICJwZufPOG2HZCyYY1sOKLQlnAKpgIfNo6cPOLVkQsXrvxk1eu6pm0c+7RX67p/It3Jq4OfPLDhV698KJCE1tfuTh27FYbMtuJ92zJ/UFDR0HCwFko8l9+gJvYkKph6xOde1ayHyT0Kljc6ou9UcMXWyU8mIi4u2YkVzBaeBCRcqLwoo6dMp5kyEellD6Q+UyuhIySSDORtxyEIk7seQQN3Im96J0178rdk6h27NEJL+ScNTJ7z8WByR3BIy0Nez+Uc9PKPTOBgs5bmcYXpywyBWKtRAsFG44EJo/eK+LVoxcn6nSLLUyq0We9EBgUOXLG/0AR373jTi7rTMbIoM4bzVS+6Lf/YeHmSN/pLEW8EnskB92pKHzRixLEogX7Bxdl3HkgInay5SACldYEt9rQEOh80aCD0Jo1M1etiBDy6IiMAtO7IXitv/7tWAfDpNHiJMs6a/HTf5zx5oy/9I44G36r4ObFCzOj/hDxhztBvPnBpDdmUp7uiRh4ZVJPhwmuVTD5SwW5W2ZWtDxZqTUUNPzEtFgPr6j1yatPijzLDkzsdWTyljtvenokkJCzcGTWTxra4Fhb7f3lhMBNERuV3DU4s0m9Ac60skunQq/Est4JftPEg4Qz0pWchEg3tr5q7ZmMHQPfGB15z8Q7o2flss66EMi15URNIn5xY03rgZycM7kCFZGtI5UXXcjcIXIm1pq5eaPZrQpGD8oouWMSpywMiFTBPRMR1uw9PSUDT5mOPWfvgEUZH7zSOQnIr+7IyJSQ6puehgtHHsQcVVJ51g92LCRkPIlVcSMmuNCGmJnUiUvOEjFBwXfF7JSTMXHjqgdW6YSS0TUZF8yVHZ9c9QiMnGiJ6G1Bi2RGb3Rxz4bOK0Z6YsQiURlfnKnkRnDrhMFrLTTacMNK/WTrUp/uuZAhNgyceGrE7pnp/3OLU7b+ySLvECmzOtaWZowddMWYlK1nnZ2rdMKXZuda+VM4KDcKrLGPRCrJ3Kv3CunDkTZeOKj2xJqbJgIbniQ+8V1XXnhyZyAhEbnfQBePVMxaEXEno2PNhwNbjYZMvS+UjFq8p6djw8KDFRNBs+8yJQtPZqe880nEQMVMypnvWHCgdK0/DtoTcWXwQq059l4JH94LHt76SKmaoydl7PlS75ybIidEiJE14qafPNzTKebhF+7CE7Fwqy2SnSrzlgmYqZjILH33oNlvmug9KLF5Y3QchO/sGDzwVKdXrnxS6htnpBWzztr4qS9m7kp8VyuBG+0pmXlT4uC9Kp3p2Tgi9oVgAycarK06PfVgVu+7BkqvWMiV6ENPEO8eZAruTmQCi3MeZEp8FY6BUjdmfmHflDkB0OSIRoUzXV1y18Y3rX1j5E1Xp2qwEwp1njSRkbiU+SJnofBdATsnYQ60PCl94V21J+eUnIh0o9ebZ+2olXrjFf/jqdmW+ODoSI2CpdaZrlpotWJUReBBh70hoyKl1ey1N044EPPu1muXbHgjp9JFF/mnxMEVKOfgXLbJNJE60kzN7Ctip0+vNbpRws5S6xUnbf2HgjVipiNXZvhipaP3DCqdAI3k//rWgW/+S6x3/yYioge2QXfLKyWIjJxAolQbjySInsln1Wz1m4nFKa+ujZ7EulIReCdj0Y1YgyIvjFQ0SDM9ET2LWkptdOHONzekJJ6VMSO98UIeO8eIVoWvFMgQ60TMSSsWB3b+UOU3PQl6eqvOMZOfTARP1IrcE+vunE9WFIpsW732vtOrYrG0+Icmi0IrGgJirQc3DU6Deo1KHTxp818TpKNWRO6MUX/00A9PdC4wUuOGGx1v+q4nmWafFFF5RaFYRj6w0Ru1I3IWnnzXmYSTYxZd/cdPDtQsxitbY2AG7jwV8cfWXjGtA1tyfRGo/OQPET0PMlaO2Kl2wW933qjlxpaLJ12YKDwQETFx90W/9VDsmQMZCaMemtlIgt6zRi3MpLwHXv20JBd8Z2DkSKEPH7wQ8eZRO0trDaz4YKRU7DuldsyKPLIIv2p2UIIo1fGmJzvE1jG1Ru8dcVJBR4z57sQbXUi95YbdBHoiFv9i5sgLCzBTEisi900lC99psL5UIy60qtQ6VepeqfGiyYsetE51JldnIVZchDMn6tU5ZwI/PTFQC1684qZKL9oGz3qyUc+BRC29v2kionTvlRZHzvhicU7Nigh55MoTPCk4kZV5IqImo3FMx00Rs55eM2lQxciWuwdGlWrpCK5J9Jd35AtjrP988FRGTaDny4nWOjtBLEh3T6yUudNfpxIpA99A4kTiijMFJ0pP1DowOyHS3ZUWjzo6VU/EnoXgVi/M+uAbH04xmeR7YFHgi9KvXvzhnJ1iTsS6q6Xk6ZsScu5K/a7YrTNSIzv1P5o1aEes2IMGnYiYKZUizZw0eq+FFdaXZi9UvgGvzI6E/vjhVq34Se8nle784MMVgGqD6TURkTJ71OybUr8Kf+jVrVIWYgcS/XHClqdGWos3XchJaNjxxXfPLHS6O2dFxA0RSDVSsXChM7Fnrah05t0fvKlhcceDSVtPRMhH9jqzUsJKE41if/DLR9XMHPVqM+jTgRen6ug8sxCxU0zu/0atd8+06onYgg8EFicsDOSaYg1OuSMftGBXQOFGP93ryd2V5KcjYs2euCl3S86dwImVtiRYG0PlvyRO1VLp4UIHrxi1oWXnhZKEB3amkZ+IgZmEWP/Fr0aeXpES+yZz0o3cCw1b14heBd/UkArtPAIJDw38pHVjUzuoYuKFntqT7g7qXKrUjrPNortmGmKkAy0PFovAwmBpH/PikxKOxKTaclbiWA8Syx1W7oSb5FeOymzFrpXSs2XyiyaDVPIv1orMJnEAb/TlT6xAQ+4VVzCsebDWmbtXyrxQaPZBFBZ7OvW80PnEnlxHCosL7/TEGlj7qBd/UKhmJKZxhfTpXIO3GjyRqvJIo4GtJ0qd/MoIdCqYnDDp4hWzGksvdDxtvfqmOhiljLIX2x3/YE68MXFXrocyRZYXbX3Qm1p6Xwge9KnIBWvPaj1pUe8LDYv3liKdWEkKNKRuubKQ+rtKSr9rw4EVpWqCdn4EbFQxsGZhx4VFAiJSwByI1NB4YvGVHRet/NRAzac2MimFZm8c6amZSBdiImpSZv9VrrMWz3xKgi8ddPRM7cmDnzy8gKgIwGIkduBJDxLuNkE/6f2gZCbTyW90tMwspJhUBU/3LJQ8SPV0IbvW4kytS92dSO7UseWLmB2xe3WMZMx+0f/44RYFUvasWMiouTrQ8d/+kaj0p4MGGp6YWa3OGoFKgUqFD9yYGUi10HnH6B2tB/4l0acfggMpExN7lyxM3Nhgl17pzg/+aCIJFnePbNm6ZRF6EFxjEm8U9OV3zQy6UXL2u3NmLa50YmL2O7NyXVipVKQ9vVBO5NhbNsxE5E5tz9wpuFLxQaqZE7kP5B50k/8PZ9k1CXdt+HKh1E8CQZ1XPBj1zY0iG9FJ7iQniug9smYkqGQgcaZPr2m1UPlEYK2c2XfNbLk5YaTU4loPziQET/zQiRCYqUiJ1WH+ZVTMk4qW2gUXer36qMgzKCHyih9E2hmXylST0XJx71Zncp2VePZIpErBXwRNvHhwT6lFjVt6t8DWZq2zFxZ5z4YPZmWM3nOlkB1rdkPQxJ7E1sE5s7Y+KfWGOzd2Kv2hmBGz+BfwJFFMQ0rKwRAjZcgzF950IHOt2E9qXZm94sZG+B4reGZLQ8KKVuH/Pz2pMhZXZDqQ+icDd2LFNgNPpNK/9ctXtupccyfSyYlHRUw+KqGWfPFWByr943/ZEDH4RqZ/iVyQEPQg1jq29PSV2qkixchPfaNl7V45B7XOEQMPjX4QSMnJ6DgiBlpi7lQ8+OaagskjvVaedXaqjMEldy56c6QvvTqoJ+ZFR8/KyemZApUfqkiU+cuxS71aPLmT0PGdmo61ZuyZjEExo2AELYiUmI3EThcF3UgVs3PD6O8UThwpV+LIUuNXH8EzkQMxlTv3dP4SG+94KiLQMLB3T6bOLUH2Vp2fbNS4JlJq8VsvzC51orTpiZX4Qa7cUvAXYiAi1uK97h40GWp1HqhI6Cg1kzgSPuobV98DiQJw9oOY2YNqEk/sJOeSIdPD5kpia0Gc6JhYuVdChz0Qa+TKxEUlo/a8a/RON0fM/BBaXPOdlIwtLaWfyH+p/JuYTfDIFfmbMlreiP3BX82K2NDzRUrmlawVN55cVPgnpRI/NRErIlKlxhvEDE6UcqZnR2wxs2MkdULPl1J6RM2kXpH+kdk510P88pGtZt8lIvYO/KGULFZafAImSkVeaECBjWOlPDySMDBSK2Jxo5ozJa3ftPiuLa1LfREIrDk7EINiN4qZLBY2ErOfMTM5s2/a+KrCV7WWNow89HRHIjE6ssko6GmYVfAvtSbu/MOZwbkgIucXvSMtXFQ5Vs7sTLUjRmJiVfTkxM70yUqj7aBJU0zGlS0VM4WN+S/HW945aCFi4AdBkzsNDGTMwMqDZv/iL3sSZv8lYsFcmP2TQEHvMzsijmTkWrvD1D6C7q6oWGh0p3Yi1o6JFbunodbWHejEiztN3iE9LR568ahP7zSw9cxDBfKsxqZWhN3RIlWYxA0bzfRGK3d68uorTyUO5FyBWKlj9R619Tk4Y6OYJwNr1gyKZb55YqLmqL8MZHSGhQKxuAcWWsfkVEoVfDWqMT8sCkeyBgITCWjw4KtGRQ5sdONdqXJmJeTsiMj+H8+1eNNtgdbWAAAAAElFTkSuQmCC"); background-size: 64px 64px; background-repeat: repeat;
  pointer-events: none;
}

.hint-text {
  position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  color: rgba(212, 175, 55, 0.8); text-transform: uppercase;
  transition: opacity 0.4s; pointer-events: none; display: flex; align-items: center; gap: 8px;
}
.hint-text i { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.escena.abierto ~ .hint-text { opacity: 0; }
/* Integración v7 */
body.carta-page{background:radial-gradient(circle at 50% 30%,#1a202c 0%,#080a0f 100%);font-family:'Outfit',sans-serif;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#e2e8f0;-webkit-tap-highlight-color:transparent}
.floating-toolbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:100}
.tool-btn{width:40px;height:40px;display:grid;place-items:center;background:rgba(24,28,36,.82);border:1px solid rgba(212,175,55,.3);color:#fff;border-radius:50%;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,border-color .2s}
.tool-btn:hover{transform:translateY(-2px);border-color:#d4af37}.tool-btn svg{width:17px;height:17px}.tool-btn[hidden]{display:none}
.hint-text svg{width:16px;height:16px;animation:pulse 1.5s infinite}
.photo-img.color{filter:none}.photo-cap{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-family:'Caveat',cursive;font-size:22px;color:#111;font-weight:600}
.handwritten-msg{min-height:116px;white-space:pre-line}.btn-card svg{width:14px;height:14px;display:inline;vertical-align:-2px;margin-right:4px}
#pv{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:100;font-size:12px;padding:.4rem 1rem;border-radius:999px;background:#d4af37;color:#000;font-weight:600;white-space:nowrap}
/* v8: letras más visibles */
.bg-text-pattern{opacity:.06}
.scrapbook-title{font-size:62px;text-shadow:2px 2px 0 #fff,3px 3px 0 rgba(0,0,0,.14)}
.circle-letter{width:42px;height:42px;font-size:24px}
.photo-cap{font-size:26px;font-weight:700}
.handwritten-msg{font-size:30px;line-height:1.18;font-weight:700;color:#000;min-height:132px;width:94%;background:rgba(255,255,255,.8);padding:10px 14px;border-radius:8px;text-shadow:none}
.btn-card{font-size:13px}
.hint-text{font-size:14px;color:#f2d675;text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* v9: temas por escenario, barra con etiquetas, modales legibles */
body.carta-page{background:radial-gradient(circle at 50% 30%,var(--b1),var(--b2))}
.bg-glow{background:radial-gradient(circle,color-mix(in srgb,var(--gold-primary) 16%,transparent) 0%,transparent 70%)}
.env-back{background:linear-gradient(135deg,var(--e2) 0%,var(--b2) 100%)}
.flap-side{background:linear-gradient(180deg,var(--e1),var(--e2))}.flap-bottom{background:linear-gradient(0deg,var(--e2),var(--e1))}
.env-flap-bg{background:linear-gradient(180deg,var(--e1),var(--e2))}
.sello-wax{background:radial-gradient(circle at 35% 35%,var(--wl) 0%,var(--wd) 70%,#1a0005 100%)}
.sticker-flowers [fill="#ff4d4d"]{fill:var(--card-accent)}.sticker-flowers [fill="#ff6666"]{fill:color-mix(in srgb,var(--card-accent) 65%,#fff)}
.sticker-flowers [stroke="#d4af37"]{stroke:var(--gold-primary)}.sticker-flowers [fill="#d4af37"]{fill:var(--gold-primary)}.sticker-flowers [fill="#800000"]{fill:var(--wd)}
.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;z-index:100}
.pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:999px;font:600 13px 'Outfit',sans-serif;color:#fff;background:rgba(8,10,16,.78);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .2s,background .2s}
.pill:hover{background:#000;transform:translateY(-2px)}.pill svg{width:16px;height:16px}.pill[hidden]{display:none}.pill-accent{background:var(--gold-primary);color:#111;border-color:transparent}.pill-accent:hover{background:var(--gold-primary);filter:brightness(1.1)}
.dock{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 10px;z-index:100;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s,transform .5s}
.dock.show{opacity:1;transform:none;pointer-events:auto}
.modal{color:#111827}.modal .card{background:#fff;color:#111827;border:1px solid #e5e7eb}.modal h2,.modal h3{color:#111827}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#475569;font-weight:600}
.modal #sE{color:#b91c1c;font-weight:600}.modal #sH{color:#475569}.modal #sM{color:#0f172a;font-size:1.05rem}
.modal .input{color:#0f172a;background:#fff;border-color:#94a3b8}.modal .btn-dark{background:#0f172a;color:#fff}

/* .pick: botones de opción (panel Agitar/Soplar y selector de plantillas de fondo). Se conservan; solo se quitó el uso de la trivia */
.modal .pick{display:block;width:100%;text-align:left;padding:.95rem 1.1rem;border:2px solid #cbd5e1;background:#f8fafc;color:#0f172a;font-weight:500;font-size:1rem;border-radius:16px}
.modal .pick:hover:not(:disabled){border-color:var(--card-accent);background:#fff}.modal .pick:disabled{cursor:default}

/* v21: los stickers (rosas, tulipanes, girasoles, estrellas...) quedan DETRÁS de los nombres.
   "Nombre de quien la recibe · de [De parte de]" vive en .photo-cap: se sube por encima de cualquier sticker
   (!important por si otra hoja de estilos lo pisa) y lleva un halo blanco para leerse aunque pase una flor por detrás. */
.photo-frame .sticker{z-index:3!important;pointer-events:none}
.photo-frame .photo-cap{z-index:20!important;pointer-events:none;
  text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff}
.photo-frame .sticker-flowers{width:112px;bottom:-46px;right:-26px}


/* ===== v22 · POLAROID FLOTANTE ===== */
.photo-frame{
  background:#ffffff;
  padding:12px 12px 62px;               /* cartucho inferior ancho */
  border:1px solid rgba(15,23,42,.10);
  border-radius:3px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.18),
    0 10px 18px rgba(0,0,0,.22),
    0 28px 48px -8px rgba(0,0,0,.42);   /* sombra proyectada profunda */
  transform:rotate(2deg) translateY(0);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;
  will-change:transform;
}
.photo-frame .photo-img{border:1px solid rgba(0,0,0,.08)}

/* brillo de papel fotográfico (debajo de stickers z:3 y del nombre z:20) */
.photo-frame::after{
  content:"";position:absolute;inset:12px 12px 62px;
  background:linear-gradient(135deg,rgba(255,255,255,.26) 0%,transparent 38%);
  pointer-events:none;z-index:1;
}

/* el nombre se centra en el cartucho; el halo blanco de v21 se mantiene */
.photo-frame .photo-cap{bottom:14px;line-height:1.1}

/* "despegada" del fondo: solo en dispositivos con hover */
@media (hover:hover){
  .photo-frame:hover{
    transform:rotate(.5deg) translateY(-10px) scale(1.025);
    box-shadow:
      0 2px 4px rgba(0,0,0,.2),
      0 22px 32px rgba(0,0,0,.28),
      0 46px 70px -10px rgba(0,0,0,.5);
  }
}
@media (prefers-reduced-motion:reduce){
  .photo-frame{transition-duration:.01s!important}
}


/* ===== v27 · Panel "Interacciones", enlace de marca y doble toque ===== */
.dock{display:none!important}   /* el dock viejo queda oculto: sus botones los activa el panel */
/* Botón de la barra superior */
.acc-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 11px;border-radius:999px;font:700 13px 'Outfit',sans-serif;color:#1a1205;background:linear-gradient(135deg,#f2d675,#d4af37);border:1px solid rgba(255,255,255,.4);box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .5s,transform .5s}
.acc-btn.show{opacity:1;transform:none;pointer-events:auto}
.acc-btn svg{width:17px;height:17px;flex:none}.acc-btn .s{display:none}
.acc-btn.pulse{animation:accp 1.2s ease-out 3}
@keyframes accp{0%{box-shadow:0 0 0 0 rgba(242,214,117,.75)}100%{box-shadow:0 0 0 16px rgba(242,214,117,0)}}
@media (max-width:360px){.acc-btn .l{display:none}.acc-btn .s{display:inline}}
/* Panel */
.acc-back{position:fixed;inset:0;z-index:109;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .25s}
.acc-back.open{opacity:1;pointer-events:auto}
.acc-panel{position:fixed;left:12px;right:12px;top:calc(62px + env(safe-area-inset-top,0px));max-width:400px;z-index:110;padding:14px;border-radius:22px;color:#fff;font-family:'Outfit',sans-serif;background:rgba(12,14,22,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform-origin:24px -8px;transform:translateY(-10px) scale(.96);opacity:0;pointer-events:none;transition:opacity .22s,transform .28s cubic-bezier(.2,.9,.3,1.1)}
.acc-panel.open{opacity:1;transform:none;pointer-events:auto}
.acc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.acc-h b{font-size:14px;font-weight:600;color:#f2d675;letter-spacing:.01em}
.acc-x{width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:13px;cursor:pointer}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:calc(100dvh - 150px);overflow-y:auto}
.acc-t{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:11px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font-family:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.acc-t:last-child:nth-child(odd){grid-column:1/-1}
.acc-t:hover,.acc-t:focus-visible{background:rgba(255,255,255,.11);border-color:rgba(242,214,117,.6);outline:0}
.acc-t:active{transform:scale(.97)}
.acc-t.on{border-color:#f2d675;background:rgba(242,214,117,.16)}
.acc-t.pulse{animation:acct 1.3s ease-in-out infinite}
@keyframes acct{0%,100%{box-shadow:0 0 0 0 rgba(242,214,117,0)}50%{box-shadow:0 0 0 4px rgba(242,214,117,.35)}}
.acc-i{flex:0 0 34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#f2d675,#b98a24);color:#1a1205}
.acc-i svg{width:18px;height:18px}
.acc-tx b{display:block;font-size:13px;font-weight:600;line-height:1.15}
.acc-tx small{display:block;margin-top:2px;font-size:11px;line-height:1.25;color:rgba(255,255,255,.62)}
/* Variante dentro del celular de vista previa */
.acc-btn.in-phone{position:absolute;left:8px;top:8px;height:28px;padding:0 11px 0 8px;font-size:10.5px;gap:5px;z-index:35}
.acc-btn.in-phone svg{width:13px;height:13px}
.acc-btn.in-phone .l{display:inline}.acc-btn.in-phone .s{display:none}
.acc-back.in-phone{position:absolute;z-index:39}
.acc-panel.in-phone{position:absolute;left:6px;right:6px;top:42px;max-width:none;padding:9px;border-radius:16px;z-index:40;transform-origin:20px -6px}
.in-phone .acc-h{margin-bottom:7px}.in-phone .acc-h b{font-size:10.5px}.in-phone .acc-x{width:20px;height:20px;font-size:10px}
.in-phone .acc-grid{gap:5px;max-height:none}
.in-phone .acc-t{padding:7px;gap:6px;border-radius:12px}.in-phone .acc-i{flex-basis:24px;height:24px;border-radius:9px}.in-phone .acc-i svg{width:13px;height:13px}
.in-phone .acc-tx b{font-size:10.5px}.in-phone .acc-tx small{font-size:8.5px}
/* Enlace de marca: pequeño, en la esquina, no estorba */
.brand-mini{position:fixed;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:90;padding:4px 6px;font:500 10.5px/1 'Outfit',sans-serif;letter-spacing:.03em;color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.65);text-decoration:none;transition:color .2s}
.brand-mini b{font-weight:600;color:rgba(242,214,117,.75)}
.brand-mini:hover,.brand-mini:focus-visible{color:#fff;text-decoration:underline}.brand-mini:hover b{color:#f2d675}
/* Doble toque: palabras flotantes */
.dt-zone{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.dt-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:140}
.dt-layer.in-box{position:absolute;z-index:30}
.dt-word{position:absolute;left:0;top:0;display:inline-block;padding:.5em .95em;max-width:min(78vw,300px);opacity:0;white-space:normal;text-align:center;
 font:700 clamp(13px,3.6vw,18px)/1.25 'Outfit',sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);
 border:1px solid rgba(255,255,255,.55);border-radius:20px;
 background:linear-gradient(135deg,color-mix(in srgb,var(--card-accent,#d4af37) 92%,#fff),color-mix(in srgb,var(--card-accent,#d4af37) 70%,#000));
 box-shadow:0 8px 26px color-mix(in srgb,var(--card-accent,#d4af37) 45%,transparent);will-change:transform,opacity}
.dt-ring{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid var(--card-accent,#d4af37);pointer-events:none;opacity:0}
.dt-hint{white-space:nowrap;position:fixed;left:50%;bottom:calc(46px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);z-index:141;padding:7px 14px;border-radius:999px;font:600 12px 'Outfit',sans-serif;color:#fff;background:rgba(8,10,16,.78);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .45s,transform .45s}
.dt-hint.on{opacity:1;transform:translate(-50%,0)}
.dt-wobble{animation:dtw .7s ease-in-out}
@keyframes dtw{0%,100%{transform:rotate(0)}15%{transform:rotate(-3deg)}30%{transform:rotate(3deg)}45%{transform:rotate(-2deg)}60%{transform:rotate(2deg)}80%{transform:rotate(-1deg)}}
/* Vista previa del celular: marca y pista */
.pv-brand{position:absolute;right:11px;bottom:7px;z-index:25;pointer-events:none;font:500 8px/1 'Outfit',sans-serif;letter-spacing:.03em;color:rgba(255,255,255,.62);text-shadow:0 1px 2px rgba(0,0,0,.65)}
.pv-brand b{font-weight:600;color:rgba(242,214,117,.75)}
.pv-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:25;padding:5px 11px;border-radius:999px;font:600 10px 'Outfit',sans-serif;color:#fff;background:rgba(8,10,16,.7);border:1px solid rgba(255,255,255,.25);white-space:nowrap;cursor:pointer}
@media (prefers-reduced-motion:reduce){.dt-wobble,.acc-btn.pulse,.acc-t.pulse{animation:none}}

/* v28 · Modo oficina: en celulares queda solo una pequeña letra "X" */
.pill-ofi .ofi-x{display:none}
@media (max-width:640px),(pointer:coarse){
 .pill-ofi{width:30px;height:30px;min-width:0;padding:0;justify-content:center;gap:0;font:700 12px 'Outfit',sans-serif;opacity:.6}
 .pill-ofi svg,.pill-ofi i,.pill-ofi .ofi-t{display:none}
 .pill-ofi .ofi-x{display:inline}
 .pill-ofi:active{opacity:1}
}

/* v29 · Botón Sonido / Mudo (ícono SVG propio: nunca queda vacío) */
.pill-snd svg{width:16px;height:16px;flex:none}
.pill-snd.off{opacity:.8}.pill-snd.off svg{color:#f2d675}
@media (max-width:640px),(pointer:coarse){
 .pill-snd{width:36px;height:36px;min-width:0;padding:0;justify-content:center;gap:0}
 .pill-snd .snd-t{display:none}
}
.pill-snd.in-phone{position:absolute;right:8px;top:8px;z-index:35;width:auto;height:28px;padding:0 10px 0 8px;gap:5px;font:600 10.5px 'Outfit',sans-serif;border-radius:999px;color:#fff;background:rgba(8,10,16,.78);border:1px solid rgba(255,255,255,.3);cursor:pointer;display:inline-flex;align-items:center}
.pill-snd.in-phone svg{width:13px;height:13px}
.pill-snd.in-phone .snd-t{display:inline}