/* ═══════════════════════════════════════════════════════════
   EG · Taller de aniversarios: acciones, visor con video y
   transición estelar, carrusel con marco digital, cartas,
   regalos envueltos, cielo de aniversarios pasados, editor
   y palomita de estrellas.
═══════════════════════════════════════════════════════════ */

@keyframes twinkle { 0%,100%{opacity:0; transform:scale(.6)} 50%{opacity:var(--max,.95); transform:scale(1)} }
@keyframes fotoEntraAniv { from{opacity:0; transform:scale(.6) rotate(-5deg)} to{opacity:1; transform:none} }

/* ═══ ACCIONES BAJO EL CONTADOR ═══ */
.aniv-acciones { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:38px; position:relative; z-index:5; }
.aniv-sorpresa {
  border:none; cursor:pointer; border-radius:100px; padding:16px 44px;
  font-family:'Jost',sans-serif; font-size:13px; letter-spacing:4px; text-transform:uppercase;
  color:#2a1e16; background:linear-gradient(135deg,#ffd985,#e8ab4a);
  box-shadow:0 10px 40px rgba(232,171,74,.45);
  animation:sorpresaLate 2.4s ease-in-out infinite;
}
@keyframes sorpresaLate { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05); box-shadow:0 12px 52px rgba(232,171,74,.65)} }
.aniv-estrella {
  border:none; cursor:pointer; background:none; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.55); font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase;
  transition:color .3s;
}
.aniv-estrella svg { transition:transform .35s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 0 12px rgba(255,217,133,.6)); }
.aniv-estrella:hover { color:#ffd985; }
.aniv-estrella:hover svg { transform:scale(1.18) rotate(8deg); }
.aniv-config {
  border:1px solid rgba(255,255,255,.25); cursor:pointer; background:rgba(255,255,255,.08);
  border-radius:100px; padding:12px 28px; backdrop-filter:blur(8px);
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.8);
  transition:background .3s, color .3s;
}
.aniv-config:hover { background:rgba(255,255,255,.18); color:#fff; }

/* ═══ VISOR DE UNA EDICIÓN ═══ */
#anivVisor { position:fixed; inset:0; z-index:100005; display:none; overflow:hidden; }
#anivVisor.abierto { display:block; }
.av-negro { position:absolute; inset:0; background:#000; opacity:0; transition:opacity 1.4s ease; }
.av-negro.visible { opacity:1; }
.av-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; opacity:0; transition:opacity 1.6s ease; }
.av-video.visible { opacity:1; }
.av-saltar {
  position:absolute; right:26px; bottom:26px; z-index:5; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); backdrop-filter:blur(8px);
  border-radius:100px; padding:10px 22px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  opacity:0; transition:opacity .6s ease;
}
.av-saltar.visible { opacity:1; }

/* transición estelar entre video y sección */
.av-estrellas { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .9s ease;
  background:radial-gradient(ellipse 80% 60% at 50% 30%, rgba(30,22,60,.92), rgba(8,5,18,.98)); }
.av-estrellas.visible { opacity:1; }
.av-estrellas .twinkle {
  position:absolute; border-radius:50%; background:#fff; opacity:0;
  animation:twinkle var(--dur,2s) ease-in-out var(--del,0s) infinite;
  box-shadow:0 0 8px rgba(255,255,255,.8);
}

/* la sección en sí */
.av-seccion {
  position:absolute; inset:0; overflow-y:auto; opacity:0; transition:opacity 1.2s ease;
  background:var(--av-fondo,#fdf9f0); color:var(--av-tinta,#2a1e16);
}
.av-seccion.visible { opacity:1; }
.av-cerrar {
  position:fixed; top:22px; right:24px; z-index:9; width:46px; height:46px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.14); color:var(--av-tinta,#2a1e16); backdrop-filter:blur(8px);
  font-size:24px; display:flex; align-items:center; justify-content:center; transition:transform .25s;
}
.av-cerrar:hover { transform:rotate(90deg); }
.av-inner { max-width:820px; margin:0 auto; padding:90px 28px 110px; text-align:center; position:relative; }
.av-eyebrow { font-family:'Jost',sans-serif; font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--av-acento,#e5989b); margin-bottom:18px; }
.av-titulo { font-family:'Cormorant Garamond',serif; font-size:clamp(38px,7vw,68px); font-weight:300; line-height:1.08; margin-bottom:26px; }
.av-texto { font-family:'Jost',sans-serif; font-weight:300; font-size:16px; line-height:2; opacity:.82; white-space:pre-wrap; text-align:center; max-width:640px; margin:0 auto 50px; }
.av-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:22px; color:var(--av-acento,#e5989b); margin:60px 0 26px; }

/* carrusel con marco de foto digital */
.av-marco {
  position:relative; margin:0 auto; max-width:640px; border-radius:22px; padding:16px;
  background:linear-gradient(160deg,#3a3735,#171514 60%,#2a2725);
  box-shadow:0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
}
.av-marco::after { content:''; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:38%; height:14px; border-radius:0 0 14px 14px; background:linear-gradient(180deg,#211f1d,#0e0d0c); }
.av-pantalla { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:#000; }
.av-pantalla img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.av-pantalla img.activa { opacity:1; }
.av-flecha {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border:none; border-radius:50%;
  cursor:pointer; background:rgba(0,0,0,.35); color:#fff; font-size:18px; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; transition:background .25s;
}
.av-flecha:hover { background:rgba(0,0,0,.6); }
.av-flecha.izq { left:12px; } .av-flecha.der { right:12px; }
.av-puntos { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.av-puntos i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .3s, transform .3s; }
.av-puntos i.activo { background:#ffd985; transform:scale(1.3); }

/* cartas dentro de la sección */
.av-cartas { display:flex; flex-wrap:wrap; gap:22px; justify-content:center; }
.av-carta {
  width:190px; cursor:pointer; border:none; text-align:left;
  border-radius:12px; padding:20px 18px 16px; position:relative; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.16); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.av-carta:hover { transform:translateY(-6px) rotate(-1deg); }
.av-carta::before { content:''; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,#e5989b,#e8c4b8); opacity:.6; }
.av-carta h4 { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:400; color:#2a1e16; margin-bottom:6px; }
.av-carta span { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#9e8f85; }

/* ═══ CIELO DE RECUERDOS (fotos y videos como estrellas) ═══ */
.av-recuerdos {
  position:relative; margin:0 auto; max-width:760px; min-height:440px; border-radius:26px; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 22% 18%, rgba(48,42,102,.9), transparent 70%),
    radial-gradient(ellipse 62% 58% at 78% 12%, rgba(28,24,72,.92), transparent 72%),
    linear-gradient(180deg,#0a0718 0%, #171030 60%, #241539 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.07);
}
.av-recuerdos .twinkle { position:absolute; border-radius:50%; background:#fff; opacity:0; animation:twinkle var(--dur,2.4s) ease-in-out var(--del,0s) infinite; box-shadow:0 0 6px rgba(255,255,255,.7); }
.av-recuerdos .luna-mini { position:absolute; top:8%; right:8%; width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 36% 32%, #fffaef, #ecdfc0 62%, #cbb896); box-shadow:0 0 26px rgba(255,244,210,.45); opacity:.85; }

.rec-estrella { position:absolute; border:none; background:none; cursor:pointer; padding:0; transform:translate(-50%,-50%); z-index:3; }
.rec-estrella .rec-svg { display:block; transition:opacity .45s ease, transform .45s ease; filter:drop-shadow(0 0 12px rgba(255,217,133,.7)); animation:acPalpita 3s ease-in-out infinite; }
.rec-estrella:hover .rec-svg { opacity:.15; transform:scale(1.35); }
.rec-prev {
  position:absolute; left:50%; bottom:calc(50% + 6px); transform:translateX(-50%) scale(.5); transform-origin:bottom center;
  width:150px; border-radius:14px; overflow:hidden; opacity:0; pointer-events:none;
  box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 34px rgba(255,217,133,.5);
  transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.rec-estrella:hover .rec-prev { opacity:1; transform:translateX(-50%) scale(1); }
.rec-estrella.prev-abajo .rec-prev { bottom:auto; top:calc(50% + 8px); transform-origin:top center; }
.rec-prev img, .rec-prev video { display:block; width:100%; height:112px; object-fit:cover; }
.rec-prev span { display:block; padding:7px 10px; background:rgba(12,8,24,.92); color:#fdf7ec; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.av-recuerdos .pista { position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(253,247,236,.4); pointer-events:none; }

/* visor de un recuerdo / presentación de regalo (medio flotando con luz trasera) */
.av-visor2 { position:fixed; inset:0; z-index:100008; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px; }
.av-visor2 .fondo { position:absolute; inset:0; cursor:pointer; background:radial-gradient(ellipse 80% 60% at 50% 40%, #221a2e 0%, #0b0710 74%); animation:visorFondoAniv .4s ease both; }
.av-visor2 .escena { position:relative; z-index:2; animation:vis2Levita 6.5s ease-in-out infinite; }
@keyframes vis2Levita { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.av-visor2 .halo { position:absolute; inset:0; filter:blur(58px) saturate(1.6) brightness(1.2); transform:scale(1.24); opacity:.85; pointer-events:none; }
.av-visor2 .halo img, .av-visor2 .halo video { width:100%; height:100%; object-fit:cover; }
.av-visor2 .medio { position:relative; border-radius:16px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); animation:vis2Entra .55s cubic-bezier(.22,1,.36,1) both; }
.av-visor2 .medio img, .av-visor2 .medio video { display:block; max-width:min(86vw,860px); max-height:60vh; width:auto; height:auto; }
@keyframes vis2Entra { from{opacity:0; transform:translateY(30px) scale(.92)} to{opacity:1; transform:none} }
.av-visor2 .info { position:relative; z-index:2; text-align:center; margin-top:30px; max-width:600px; animation:vis2Entra .6s .1s cubic-bezier(.22,1,.36,1) both; }
.av-visor2 .info h3 { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,3.4vw,32px); font-weight:300; color:#fdf7f2; }
.av-visor2 .info p { font-family:'Jost',sans-serif; font-weight:300; font-size:14px; line-height:1.8; color:rgba(253,247,242,.62); margin-top:8px; }
.av-visor2 .cerrar2 { position:absolute; top:22px; right:24px; z-index:5; width:46px; height:46px; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.1); backdrop-filter:blur(8px); color:rgba(255,255,255,.85); font-size:24px; transition:transform .25s; }
.av-visor2 .cerrar2:hover { transform:rotate(90deg); }

/* ═══ BUZÓN ESPACIAL ═══ */
.av-buzon-zona { position:relative; margin:0 auto; max-width:760px; border-radius:26px; padding:44px 20px 40px; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 75% 15%, rgba(48,42,102,.9), transparent 70%),
    linear-gradient(180deg,#0a0718 0%, #191134 60%, #26163c 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.07);
}
.av-buzon-zona .twinkle { position:absolute; border-radius:50%; background:#fff; opacity:0; animation:twinkle var(--dur,2.6s) ease-in-out var(--del,0s) infinite; box-shadow:0 0 6px rgba(255,255,255,.7); }
.buzon-esp { position:relative; width:150px; margin:0 auto; cursor:pointer; border:none; background:none; padding:0; z-index:3; transition:transform .3s; animation:buzonFlota 5s ease-in-out infinite; }
@keyframes buzonFlota { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.buzon-esp:hover { transform:scale(1.05); }
.buzon-esp.tiembla { animation:buzonTiembla .9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes buzonTiembla {
  0%,100%{transform:none} 12%{transform:translate(-5px,2px) rotate(-3deg)} 24%{transform:translate(5px,-2px) rotate(3deg)}
  36%{transform:translate(-6px,1px) rotate(-4deg)} 48%{transform:translate(6px,-1px) rotate(4deg)}
  60%{transform:translate(-5px,2px) rotate(-4deg) scale(1.04)} 75%{transform:translate(5px,-2px) rotate(4deg) scale(1.06)}
  88%{transform:translate(-3px,1px) rotate(-2deg) scale(1.03)}
}
.bz-cuerpo { position:relative; width:150px; height:92px; border-radius:46px 46px 14px 14px; margin:0 auto;
  background:linear-gradient(160deg,#5a4a8c,#372a5e 65%,#241a44);
  box-shadow:inset -14px -12px 30px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.4), 0 0 34px rgba(140,110,220,.28); }
.bz-ranura { position:absolute; left:50%; top:38px; transform:translateX(-50%); width:86px; height:10px; border-radius:6px; background:#0d0920; box-shadow:inset 0 3px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12); }
.bz-sello { position:absolute; left:50%; top:-16px; transform:translateX(-50%); filter:drop-shadow(0 0 12px rgba(255,217,133,.7)); animation:acPalpita 2.8s ease-in-out infinite; }
.bz-poste { width:12px; height:56px; margin:0 auto; background:linear-gradient(90deg,#3c3160,#241a44); border-radius:0 0 6px 6px; }
.bz-base { width:64px; height:10px; margin:-2px auto 0; border-radius:50%; background:radial-gradient(ellipse at center, rgba(140,110,220,.45), transparent 70%); }
.buzon-esp .bz-pista { margin-top:12px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(253,247,236,.5); }

/* sobres que salen volando del buzón */
.av-sobres { position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:26px; justify-content:center; margin-top:34px; min-height:20px; }
.mini-sobre { position:relative; border:none; background:none; cursor:pointer; padding:0; opacity:0; }
.mini-sobre.vuela { animation:sobreVuela .9s cubic-bezier(.34,1.2,.5,1) both; }
@keyframes sobreVuela {
  0%   { opacity:0; transform:translate(var(--dx,0), var(--dy,-160px)) scale(.25) rotate(-30deg); }
  55%  { opacity:1; transform:translate(calc(var(--dx,0)*.3), calc(var(--dy,-160px)*.3)) scale(.85) rotate(10deg); }
  100% { opacity:1; transform:none; }
}
.ms-cuerpo { position:relative; width:118px; height:78px; border-radius:8px; background:linear-gradient(180deg,#fdf8ef,#f4e9d8); overflow:visible; box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .3s; }
.mini-sobre:hover .ms-cuerpo { transform:translateY(-5px) rotate(-2deg); }
.ms-tapa { position:absolute; top:0; left:0; right:0; height:56%; clip-path:polygon(0 0,100% 0,50% 100%); background:linear-gradient(180deg,#f3e7d2,#e9d9bc); transform-origin:top center; transition:transform .6s cubic-bezier(.6,0,.3,1); z-index:3; border-radius:8px 8px 0 0; }
.mini-sobre.abierto .ms-tapa { transform:rotateX(178deg); z-index:0; }
.ms-sello { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:4; transition:opacity .4s; }
.mini-sobre.abierto .ms-sello { opacity:0; }
.ms-nombre { margin-top:10px; font-family:'Cormorant Garamond',serif; font-size:16px; color:#fdf7ec; text-align:center; }

/* papel de la carta abierta (modal) */
.papel-modal { position:fixed; inset:0; z-index:100008; display:flex; align-items:center; justify-content:center; padding:22px; }
.papel-modal .fondo { position:absolute; inset:0; cursor:pointer; background:rgba(14,9,20,.85); backdrop-filter:blur(10px); animation:visorFondoAniv .35s ease both; }
.papel-modal .hoja {
  position:relative; z-index:2; width:min(94vw,560px); max-height:84vh; overflow-y:auto; border-radius:14px; padding:44px 42px 38px;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  animation:papelSaleAniv .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes papelSaleAniv { 0%{opacity:0; transform:translateY(120px) scale(.5)} 55%{opacity:1} 100%{transform:none} }
.papel-modal .hoja::before { content:''; position:absolute; left:0; right:0; top:0; height:7px; background:linear-gradient(90deg,#e5989b,#e8c4b8,#e5989b); opacity:.55; }
.papel-modal h4 { font-family:'Cormorant Garamond',serif; font-size:clamp(24px,4vw,30px); font-weight:400; color:#2a1e16; margin-bottom:12px; }
.papel-modal p { font-family:'Jost',sans-serif; font-weight:300; font-size:14px; line-height:1.9; color:#4a3c30; white-space:pre-wrap; }
.papel-modal .sticker { position:absolute; width:34px; height:34px; pointer-events:none; }
.papel-modal .sticker svg { width:100%; height:100%; }
.papel-modal .cerrar3 { position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px; border:none; border-radius:50%; cursor:pointer; background:rgba(0,0,0,.08); color:#6b5d52; font-size:19px; }

/* ═══ REGALOS: pedestal y destello ═══ */
.rg-pedestal { position:relative; padding:26px 18px 18px; border-radius:20px; background:radial-gradient(ellipse 70% 55% at 50% 20%, rgba(255,217,133,.14), transparent 72%), rgba(0,0,0,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.rg-flash { position:fixed; z-index:100007; width:10px; height:10px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, #fff8e6, rgba(255,217,133,.9) 40%, transparent 70%); animation:rgFlash .55s ease-out forwards; }
@keyframes rgFlash { 0%{transform:scale(1); opacity:1} 100%{transform:scale(34); opacity:0} }

/* ═══ REGALO con modelo GLB real ═══ */
.regalo.rgm { width:172px; padding-top:0; }
.rgm-mv { width:152px; height:152px; margin:0 auto; display:block; pointer-events:none; background:transparent; --poster-color:transparent; }
.regalo.rgm.abierto .rgm-mv { animation:rgmPop .65s cubic-bezier(.34,1.56,.64,1); }
@keyframes rgmPop { 0%{transform:scale(1)} 45%{transform:scale(1.15) translateY(-10px)} 100%{transform:scale(1)} }

/* selector de envoltura (editores) */
.rgm-opciones { display:flex; gap:14px; flex-wrap:wrap; }
.rgm-opcion {
  border:2px solid rgba(158,143,133,.3); border-radius:16px; background:#faf6f1; cursor:pointer;
  padding:8px 10px 10px; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.rgm-opcion:hover { transform:translateY(-3px); }
.rgm-opcion.activo { border-color:#e5989b; box-shadow:0 8px 24px rgba(229,152,155,.3); }
.rgm-opcion model-viewer { width:112px; height:112px; pointer-events:none; background:transparent; }
.rgm-opcion span { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#6b5d52; }
.rgm-opcion { position:relative; }
.rgm-x {
  position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background:#c0605f; color:#fff; font-size:12px; font-style:normal; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.rgm-subir { justify-content:center; min-width:132px; min-height:150px; border-style:dashed; }
.rgm-subir .mas { font-size:34px; color:#e5989b; line-height:1; font-family:'Jost',sans-serif; }

/* ═══ REGALO 3D (caja y bolsa con caras reales) ═══ */
.rg3 { width:172px; }
.rg3-escena { position:relative; width:150px; height:148px; margin:0 auto; perspective:640px; }
.rg3-g {
  position:absolute; left:50%; top:58%; width:0; height:0;
  transform-style:preserve-3d;
  animation:rg3Sway 7s ease-in-out infinite alternate;
}
@keyframes rg3Sway {
  from { transform:rotateX(-16deg) rotateY(20deg); }
  to   { transform:rotateX(-16deg) rotateY(42deg); }
}
.c-cara, .b-cara { position:absolute; transform-style:preserve-3d; backface-visibility:hidden; }

/* ── CAJA: cubo 96 × 74 × 64 ── */
.rg3-cubo { position:absolute; transform-style:preserve-3d; }
.rg3-cubo .c-front {
  width:96px; height:74px; left:-48px; top:-37px; border-radius:4px;
  background:var(--rg); transform:translateZ(32px);
  box-shadow:inset 0 12px 18px rgba(255,255,255,.32), inset 0 -16px 24px rgba(0,0,0,.10);
}
.rg3-cubo .c-side {
  width:64px; height:74px; left:-32px; top:-37px; border-radius:4px;
  background:var(--rg); transform:rotateY(90deg) translateZ(48px);
}
.rg3-cubo .c-side::after { content:''; position:absolute; inset:0; border-radius:4px; background:rgba(50,18,30,.24); }
.cinta-v { position:absolute; top:0; bottom:0; left:50%; width:17px; margin-left:-8.5px; background:var(--li); opacity:.96; box-shadow:inset 2px 0 3px rgba(255,255,255,.35), inset -2px 0 3px rgba(0,0,0,.12); }
.rg3-deco { position:absolute; width:17px; height:17px; opacity:.9; }
.rg3-deco svg { width:100%; height:100%; }

/* tapa (se alza al abrir) */
.rg3-tapa {
  position:absolute; transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.42,-.25,.32,1.1), opacity .5s ease .45s;
}
.rg3-tapa .t-top {
  width:106px; height:72px; left:-53px; top:-36px; border-radius:6px;
  background:var(--rg); transform:rotateX(90deg) translateZ(44px);
  box-shadow:inset 0 0 22px rgba(255,255,255,.4);
}
.rg3-tapa .t-top::after { content:''; position:absolute; inset:0; border-radius:6px; background:rgba(255,255,255,.14); }
.t-top .cinta-a { position:absolute; top:0; bottom:0; left:50%; width:17px; margin-left:-8.5px; background:var(--li); }
.t-top .cinta-b { position:absolute; left:0; right:0; top:50%; height:17px; margin-top:-8.5px; background:var(--li); }
.rg3-tapa .t-lipf {
  width:106px; height:16px; left:-53px; top:-45px; border-radius:3px;
  background:var(--rg); transform:translateZ(37px);
  box-shadow:inset 0 5px 9px rgba(255,255,255,.32);
}
.rg3-tapa .t-lipf::after { content:''; position:absolute; top:0; bottom:0; left:50%; width:17px; margin-left:-8.5px; background:var(--li); }
.rg3-tapa .t-lips {
  width:74px; height:16px; left:-37px; top:-45px; border-radius:3px;
  background:var(--rg); transform:rotateY(90deg) translateZ(53px);
}
.rg3-tapa .t-lips::before { content:''; position:absolute; inset:0; border-radius:3px; background:rgba(50,18,30,.24); }
.rg3-caja-g .rg3-mono { position:absolute; width:56px; left:-28px; top:-82px; transform:translateZ(6px); }

/* apertura de la caja: la tapa vuela y la caja brinca */
.regalo.abierto .rg3-tapa { transform:translate3d(18px,-125px,14px) rotateX(52deg) rotateZ(16deg); opacity:0; }
.regalo.abierto .rg3-escena.es-caja { animation:rg3Alza .75s cubic-bezier(.45,1.7,.4,1) .1s; }
@keyframes rg3Alza { 0%{transform:translateY(0)} 45%{transform:translateY(-17px)} 100%{transform:translateY(0)} }

/* ── BOLSA: prisma acampanado 92 × 98 × 54 ── */
.rg3-bolsa-g .b-front, .rg3-bolsa-g .b-back {
  width:92px; height:98px; left:-46px; top:-44px;
  background:var(--rg); clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
  box-shadow:inset 0 12px 18px rgba(255,255,255,.28), inset 0 -18px 26px rgba(0,0,0,.09);
}
.rg3-bolsa-g .b-front { transform:translateZ(27px); }
.rg3-bolsa-g .b-back { transform:rotateY(180deg) translateZ(27px); }
.rg3-bolsa-g .b-back::after { content:''; position:absolute; inset:0; clip-path:polygon(9% 0,91% 0,100% 100%,0 100%); background:rgba(50,18,30,.2); }
.rg3-bolsa-g .b-side {
  width:54px; height:98px; left:-27px; top:-44px;
  background:var(--rg); clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);
  transform:rotateY(90deg) translateZ(44px);
}
.rg3-bolsa-g .b-side::after { content:''; position:absolute; inset:0; clip-path:polygon(16% 0,84% 0,100% 100%,0 100%); background:rgba(50,18,30,.26); }
.b-asa {
  position:absolute; left:-21px; top:-68px; width:42px; height:26px;
  border:6px solid var(--li); border-bottom:none; border-radius:22px 22px 0 0;
}
.b-asa-f { transform:translateZ(27px); }
.b-asa-b { transform:translateZ(-27px); filter:brightness(.72); }
.b-papel { position:absolute; left:-32px; top:-76px; width:64px; display:flex; gap:3px; justify-content:center; align-items:flex-end; transform:translateZ(6px); transition:transform .7s ease, opacity .7s ease; }
.b-papel i { display:block; width:20px; background:rgba(255,255,255,.9); clip-path:polygon(50% 0,100% 100%,0 100%); }
.b-papel i:nth-child(1){ height:26px; } .b-papel i:nth-child(2){ height:34px; } .b-papel i:nth-child(3){ height:24px; opacity:.85; }
.rg3-bolsa-g .rg3-mono { position:absolute; width:44px; left:-22px; top:-66px; transform:translateZ(28px); }

/* apertura de la bolsa: se sacude y el papel sale volando */
.regalo.abierto .rg3-escena.es-bolsa { animation:rg3Sacude .85s cubic-bezier(.36,.07,.19,.97); }
@keyframes rg3Sacude {
  0%,100% { transform:none; }
  15% { transform:translateX(-7px) rotate(-4deg); }
  30% { transform:translateX(7px) rotate(4deg); }
  45% { transform:translateX(-8px) rotate(-6deg); }
  60% { transform:translateX(8px) rotate(6deg); }
  75% { transform:translateX(-5px) rotate(-3deg) scale(1.03); }
  90% { transform:translateX(4px) rotate(2deg) scale(1.05); }
}
.regalo.abierto .b-papel { transform:translateZ(6px) translateY(-72px) rotate(8deg); opacity:0; }

/* ═══ REGALOS ENVUELTOS (arte CSS) ═══ */
.av-regalos { display:flex; flex-wrap:wrap; gap:34px; justify-content:center; }
.regalo { position:relative; cursor:pointer; width:150px; padding-top:30px; transition:transform .3s; }
.regalo:hover { transform:translateY(-5px); }
.regalo.agitando { animation:regaloAgita .6s ease-in-out; }
@keyframes regaloAgita { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg)} 40%{transform:rotate(5deg)} 60%{transform:rotate(-4deg)} 80%{transform:rotate(4deg)} }

/* caja */
.rg-caja { position:relative; width:120px; margin:0 auto; }
.rg-cuerpo { position:relative; width:120px; height:92px; border-radius:0 0 10px 10px; background:var(--rg,#f2b8c6); box-shadow:inset -14px -12px 26px rgba(0,0,0,.14), 0 14px 30px rgba(0,0,0,.18); }
.rg-cuerpo::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:20px; transform:translateX(-50%); background:var(--li,#d9b45a); opacity:.92; }
.rg-tapa { position:relative; width:136px; height:26px; margin:0 auto -3px; border-radius:8px; background:color-mix(in srgb, var(--rg,#f2b8c6) 78%, #000 8%); box-shadow:0 4px 10px rgba(0,0,0,.14); z-index:2; transition:transform .7s cubic-bezier(.5,-.3,.4,1), opacity .7s ease; }
.rg-tapa::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:20px; transform:translateX(-50%); background:var(--li,#d9b45a); opacity:.92; }
.regalo.abierto .rg-tapa { transform:translateY(-110px) rotate(-24deg); opacity:0; }

/* bolsa */
.rg-bolsa { position:relative; width:112px; margin:0 auto; }
.rg-saco { position:relative; width:112px; height:112px; margin:0 auto; clip-path:polygon(10% 0,90% 0,100% 100%,0 100%); border-radius:0 0 10px 10px; background:var(--rg,#f2b8c6); box-shadow:inset -14px -12px 26px rgba(0,0,0,.14); }
.rg-saco::before { content:''; position:absolute; left:0; right:0; top:0; height:16px; background:rgba(0,0,0,.08); }
.rg-asa { position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:52px; height:34px; border:6px solid var(--li,#d9b45a); border-bottom:none; border-radius:26px 26px 0 0; }
.rg-papel { position:absolute; top:-14px; left:0; right:0; display:flex; justify-content:center; gap:2px; transition:transform .6s ease, opacity .6s ease; }
.rg-papel i { width:22px; height:26px; background:rgba(255,255,255,.85); clip-path:polygon(50% 0,100% 100%,0 100%); }
.rg-papel i:nth-child(2){ height:32px; opacity:.9; } .rg-papel i:nth-child(3){ height:24px; opacity:.8; }
.regalo.abierto .rg-bolsa .rg-saco { transition:transform .6s ease, opacity .6s ease; transform:scale(.86) translateY(14px); opacity:.55; }
.regalo.abierto .rg-papel { transform:translateY(-40px); opacity:0; }

/* decoración */
.rg-mono { position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:64px; z-index:3; pointer-events:none; transition:transform .7s ease, opacity .5s ease; }
.regalo.abierto .rg-mono { transform:translateX(-50%) translateY(-120px) rotate(30deg); opacity:0; }
.rg-deco { position:absolute; inset:0; pointer-events:none; }
.rg-deco span { position:absolute; width:16px; height:16px; opacity:.85; }
.rg-deco span svg { width:100%; height:100%; }

/* sorpresa al abrir */
.rg-sorpresa {
  position:absolute; left:50%; bottom:calc(100% - 22px); transform:translateX(-50%) scale(0); z-index:4;
  width:190px; background:#fff; border-radius:14px; padding:14px; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);
}
.regalo.abierto .rg-sorpresa { transform:translateX(-50%) scale(1); }
.rg-sorpresa img { width:100%; height:110px; object-fit:cover; border-radius:9px; margin-bottom:9px; }
.rg-sorpresa h5 { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:400; color:#2a1e16; }
.rg-sorpresa p { font-family:'Jost',sans-serif; font-size:12px; color:#9e8f85; line-height:1.6; margin-top:4px; }
.rg-etiqueta { text-align:center; margin-top:12px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--av-tinta,#2a1e16); opacity:.55; }

/* confeti */
.confeti-pieza { position:fixed; z-index:100008; pointer-events:none; border-radius:2px; animation:confetiCae 1.4s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confetiCae {
  0%   { transform:translate(0,0) rotate(0); opacity:1; }
  100% { transform:translate(var(--cx), var(--cy)) rotate(var(--cr)); opacity:0; }
}

/* estrellitas de plantilla galaxia */
.av-seccion .twinkle { position:absolute; border-radius:50%; background:#fff; opacity:0; animation:twinkle var(--dur,2.4s) ease-in-out var(--del,0s) infinite; box-shadow:0 0 6px rgba(255,255,255,.7); pointer-events:none; }

/* ═══ CIELO DE ANIVERSARIOS PASADOS ═══ */
#anivCielo { position:fixed; inset:0; z-index:100005; display:none; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 25% 15%, rgba(48,42,102,.95), transparent 70%),
    radial-gradient(ellipse 65% 60% at 75% 10%, rgba(28,24,72,.96), transparent 72%),
    linear-gradient(180deg, #05030f 0%, #0d0824 55%, #160d2c 100%);
}
#anivCielo.abierto { display:block; animation:visorFondoAniv .7s ease both; }
@keyframes visorFondoAniv { from{opacity:0} to{opacity:1} }
#anivCielo .twinkle { position:absolute; border-radius:50%; background:#fff; opacity:0; animation:twinkle var(--dur,2.6s) ease-in-out var(--del,0s) infinite; box-shadow:0 0 6px rgba(255,255,255,.7); }
.ac-titulo { position:absolute; top:9%; left:0; right:0; text-align:center; z-index:3; }
.ac-titulo h2 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(26px,5vw,40px); color:#fdf7ec; }
.ac-titulo p { font-family:'Jost',sans-serif; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:rgba(253,247,236,.5); margin-top:8px; }
.ac-estrella {
  position:absolute; z-index:4; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:acPalpita 2.6s ease-in-out infinite;
}
.ac-estrella svg { filter:drop-shadow(0 0 16px rgba(255,217,133,.8)); }
@keyframes acPalpita { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.ac-estrella:hover { animation:acPalpitaFuerte .7s ease-in-out infinite; }
@keyframes acPalpitaFuerte { 0%,100%{transform:scale(1)} 50%{transform:scale(1.28)} }
.ac-estrella span { font-family:'Cormorant Garamond',serif; font-size:18px; color:#ffe9ad; text-shadow:0 0 12px rgba(255,217,133,.6); }
.ac-cerrar { position:absolute; top:22px; right:24px; z-index:5; width:46px; height:46px; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); font-size:24px; backdrop-filter:blur(8px); }

/* ═══ TALLER (editor del admin) ═══ */
#taller { position:fixed; inset:0; z-index:100006; display:none; overflow-y:auto; background:#f6f0e8; }
#taller.abierto { display:block; }
.tl-top {
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 22px; background:rgba(246,240,232,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,0,0,.07);
}
.tl-top h2 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; color:#2a1e16; margin-right:auto; }
.tl-btn { border:none; cursor:pointer; border-radius:100px; padding:10px 20px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; background:#fff; color:#6b5d52; border:1px solid rgba(0,0,0,.1); transition:all .25s; }
.tl-btn:hover { border-color:#e5989b; color:#2a1e16; }
.tl-btn.primario { background:linear-gradient(135deg,#e5989b,#e8b4a8); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(229,152,155,.35); }
.tl-btn.dorado { background:linear-gradient(135deg,#ffd985,#e8ab4a); color:#2a1e16; border-color:transparent; box-shadow:0 6px 18px rgba(232,171,74,.4); }
.tl-btn.rojo { color:#c0605f; border-color:rgba(192,96,95,.4); }
.tl-btn:disabled { opacity:.5; cursor:default; }
.tl-cuerpo { max-width:860px; margin:0 auto; padding:30px 22px 120px; }
.tl-anios { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.tl-anio { border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; border-radius:100px; padding:9px 20px; font-family:'Cormorant Garamond',serif; font-size:17px; color:#6b5d52; transition:all .25s; }
.tl-anio.activo { background:#2a1e16; color:#fdf7ec; border-color:#2a1e16; }
.tl-estado { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:100px; }
.tl-estado.borrador { background:#f0e6d8; color:#8a7458; }
.tl-estado.publicado { background:#dff0e2; color:#3e7d52; }
.tl-estado.archivado { background:#e8e4e0; color:#8a8079; }

.tl-sec { background:#fff; border-radius:18px; padding:24px; margin-bottom:20px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.tl-sec h3 { font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:400; color:#2a1e16; margin-bottom:16px; }
.tl-sec label { display:block; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:#9e8f85; margin:14px 0 6px; }
.tl-sec input[type="text"], .tl-sec textarea {
  width:100%; padding:12px 14px; font-family:'Jost',sans-serif; font-weight:300; font-size:14px;
  color:#2a1e16; background:#faf6f1; border:1px solid rgba(158,143,133,.3); border-radius:10px; outline:none; resize:vertical;
}
.tl-sec input:focus, .tl-sec textarea:focus { border-color:#e5989b; }

/* plantillas */
.tl-plantillas { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.tl-plantilla { position:relative; border:2px solid transparent; border-radius:14px; overflow:hidden; cursor:pointer; height:86px; transition:transform .25s, border-color .25s; }
.tl-plantilla:hover { transform:translateY(-3px); }
.tl-plantilla.activa { border-color:#e5989b; box-shadow:0 8px 22px rgba(229,152,155,.3); }
.tl-plantilla .nombre { position:absolute; left:0; right:0; bottom:0; padding:6px 10px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; background:rgba(0,0,0,.28); color:#fff; backdrop-filter:blur(4px); }
.tl-plantilla .borrar { position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; font-size:11px; cursor:pointer; }

/* fotos */
.tl-fotos { display:flex; flex-wrap:wrap; gap:12px; }
.tl-foto { position:relative; width:110px; height:110px; border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.tl-foto img { width:100%; height:100%; object-fit:cover; }
.tl-foto .acciones { position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; padding:5px 7px; background:linear-gradient(to top,rgba(0,0,0,.55),transparent); }
.tl-foto .acciones button { border:none; background:none; color:#fff; cursor:pointer; font-size:13px; padding:2px 4px; }
.tl-agregar {
  width:110px; height:110px; border:1.5px dashed rgba(158,143,133,.5); border-radius:12px; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#9e8f85;
  font-family:'Jost',sans-serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; transition:border-color .3s;
}
.tl-agregar:hover { border-color:#e5989b; color:#e5989b; }
.tl-agregar .mas { font-size:26px; color:#e5989b; line-height:1; }

/* listas de cartas y regalos en el taller */
.tl-lista { display:flex; flex-direction:column; gap:10px; }
.tl-item { display:flex; align-items:center; gap:12px; background:#faf6f1; border:1px solid rgba(158,143,133,.25); border-radius:12px; padding:12px 16px; }
.tl-item .info { flex:1; min-width:0; }
.tl-item .info b { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:17px; color:#2a1e16; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-item .info small { font-family:'Jost',sans-serif; font-size:11px; color:#9e8f85; }
.tl-item button { border:none; background:none; cursor:pointer; font-size:15px; color:#9e8f85; padding:4px 6px; transition:color .2s; }
.tl-item button:hover { color:#2a1e16; }
.tl-mini-regalo { transform:scale(.42); transform-origin:left center; width:64px; height:70px; pointer-events:none; }
.tl-mini-regalo .regalo { padding-top:26px; cursor:default; }

/* chips de opciones en modales */
.tl-chips { display:flex; gap:8px; flex-wrap:wrap; }
.tl-chip { border:1px solid rgba(158,143,133,.35); background:#faf6f1; cursor:pointer; border-radius:100px; padding:8px 16px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:1.5px; color:#6b5d52; transition:all .25s; }
.tl-chip.activo { background:#2a1e16; color:#fdf7ec; border-color:#2a1e16; }
.tl-swatch { width:30px; height:30px; border-radius:50%; border:2px solid rgba(0,0,0,.1); cursor:pointer; transition:transform .2s, border-color .2s; }
.tl-swatch.activo { border-color:#2a1e16; transform:scale(1.18); }

/* mini editor de carta (vista previa) */
.tl-carta-prev { position:relative; border-radius:12px; padding:22px 20px; min-height:150px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); overflow:hidden; }
.tl-carta-prev .sticker { position:absolute; width:30px; height:30px; cursor:pointer; }
.tl-carta-prev .sticker svg { width:100%; height:100%; pointer-events:none; }
.tl-carta-prev h4 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:19px; color:#2a1e16; }
.tl-carta-prev p { font-family:'Jost',sans-serif; font-size:12px; color:#6b5d52; line-height:1.7; margin-top:6px; white-space:pre-wrap; }
.tl-stickers-fila { display:flex; gap:8px; flex-wrap:wrap; }
.tl-stickers-fila button { width:40px; height:40px; border:none; background:#faf6f1; border-radius:10px; cursor:pointer; padding:6px; transition:transform .2s; }
.tl-stickers-fila button:hover { transform:scale(1.12); }
.tl-stickers-fila svg { width:100%; height:100%; }

/* ═══ PALOMITA DE ESTRELLAS ═══ */
#palomita { position:fixed; inset:0; z-index:100009; display:none; background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(24,18,50,.96), rgba(6,4,14,.98)); }
#palomita.abierto { display:block; animation:visorFondoAniv .5s ease both; }
#palomita .estrellita { position:absolute; border-radius:50%; background:#ffe9ad; box-shadow:0 0 12px rgba(255,217,133,.9); transition:left 1.1s cubic-bezier(.5,0,.3,1), top 1.1s cubic-bezier(.5,0,.3,1); }
#palomita p { position:absolute; left:0; right:0; top:66%; text-align:center; font-family:'Cormorant Garamond',serif; font-size:clamp(24px,4vw,34px); color:#fdf7ec; opacity:0; transition:opacity .8s ease; }
#palomita p.visible { opacity:1; }

@media (max-width:640px) {
  .tl-top { padding:12px 14px; }
  .tl-cuerpo { padding:22px 14px 100px; }
  .av-inner { padding:80px 18px 90px; }
  .av-marco { padding:10px; }
}
