*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --rose:      #e5989b;
  --blush:     #e8c4b8;
  --warm-gray: #9e8f85;
  --ink:       #2a1e16;
  --cream:     #f9f4ee;
  --oro:       #d9b45a;
}

html, body { background:#fff; color:var(--ink); font-family:'Jost',sans-serif; font-weight:300; overflow-x:hidden; }

/* ═══ PAGE FADE / PARTICLES / NAVBAR (igual que el resto del sitio) ═══ */
#page-fade { position:fixed; inset:0; background:#fff; z-index:9999; opacity:0; pointer-events:none; transition:opacity .45s ease; }
#page-fade.fade-out { opacity:1; pointer-events:all; }
body { animation:fadeInPage .5s ease forwards; }
@keyframes fadeInPage { from{opacity:0} to{opacity:1} }
.particle { position:fixed; border-radius:50%; pointer-events:none; z-index:99999; animation:particleBurst .7s ease-out forwards; }
@keyframes particleBurst { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0} }

#navbar { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:1000; width:94%; max-width:1400px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:56px; background:transparent; border-radius:100px; border:1px solid transparent; overflow:visible; opacity:0; transition:opacity .4s ease; }
#navbar.ready { opacity:1; }
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; letter-spacing:3px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.nav-logo em { font-style:italic; color:var(--rose); }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-family:'Jost',sans-serif; font-weight:300; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--warm-gray); text-decoration:none; transition:color .3s; white-space:nowrap; }
.nav-links a:hover { color:var(--ink); }
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:6px; flex-shrink:0; z-index:1002; }
.nav-burger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s,opacity .3s; }
.nav-burger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
.nav-drawer { display:none; position:fixed; inset:0; z-index:9998; background:rgba(249,244,238,.97); backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.nav-drawer.open { display:flex; animation:drawerIn .3s ease forwards; }
@keyframes drawerIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.nav-drawer a { font-family:'Cormorant Garamond',serif; font-size:clamp(32px,8vw,52px); font-weight:300; color:var(--ink); text-decoration:none; letter-spacing:2px; transition:color .2s; }
.nav-drawer a:hover { color:var(--rose); }
.nav-drawer-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:48px; line-height:1; color:var(--warm-gray); cursor:pointer; z-index:9999; padding:12px 18px; min-width:64px; min-height:64px; display:flex; align-items:center; justify-content:center; }
@media (max-width:640px) { .nav-links { display:none !important; } .nav-burger { display:flex; } #navbar { overflow:visible !important; } }

/* ═══ HERO ═══ */
.cartas-hero { min-height:52vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:130px 24px 60px; background:linear-gradient(180deg,#fff 0%,var(--cream) 100%); position:relative; }
.cartas-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 60%,rgba(232,196,184,.3),transparent 70%); pointer-events:none; }
.cartas-eyebrow { font-size:11px; letter-spacing:6px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:20px; position:relative; }
.cartas-title { font-family:'Cormorant Garamond',serif; font-size:clamp(44px,8vw,88px); font-weight:300; line-height:1.05; letter-spacing:-1px; margin-bottom:16px; position:relative; }
.cartas-title em { font-style:italic; color:var(--rose); }
.cartas-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,2vw,21px); color:var(--warm-gray); position:relative; max-width:520px; }

/* ═══ SOBRE (componente) ═══ */
.sobre { position:relative; width:230px; height:152px; filter:drop-shadow(0 14px 30px rgba(42,30,22,.18)); }
.sobre-cuerpo { position:absolute; inset:0; border-radius:10px; background:linear-gradient(180deg,#fdf8ef,#f4e9d8); overflow:hidden; }
.sobre-cuerpo::before { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%); }
.sobre-solapa-izq, .sobre-solapa-der {
  position:absolute; bottom:0; width:60%; height:100%;
  background:linear-gradient(180deg,#f9f1e2,#efe2cc);
}
.sobre-solapa-izq { left:0; clip-path:polygon(0 0,100% 50%,100% 100%,0 100%); border-radius:10px 0 0 10px; }
.sobre-solapa-der { right:0; clip-path:polygon(100% 0,0 50%,0 100%,100% 100%); border-radius:0 10px 10px 0; }
.sobre-inferior { position:absolute; inset:0; clip-path:polygon(0 100%,50% 42%,100% 100%); background:linear-gradient(180deg,#f6ecda,#eddfc6); border-radius:10px; }
.sobre-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 .7s cubic-bezier(.6,0,.3,1);
  z-index:3; border-radius:10px 10px 0 0;
}
.sobre.abierto .sobre-tapa { transform:rotateX(178deg); z-index:0; }
.sello { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:4; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.sello svg { display:block; filter:drop-shadow(0 3px 8px rgba(160,60,70,.4)); }

/* CTA escribir */
.cta-escribir { position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; margin:40px auto 90px; cursor:pointer; width:fit-content; border:none; background:none; }
.cta-escribir .sobre { transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.cta-escribir:hover .sobre { transform:translateY(-8px) rotate(-2deg); }
.cta-escribir span { font-family:'Jost',sans-serif; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--warm-gray); transition:color .3s; }
.cta-escribir:hover span { color:var(--rose); }

/* ═══ BUZÓN (admin / novia) ═══ */
.buzon { max-width:1100px; margin:0 auto; padding:20px 40px 120px; }
.buzon-header { text-align:center; margin-bottom:44px; }
.buzon-eyebrow { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--warm-gray); margin-bottom:10px; }
.buzon-title { font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4vw,44px); font-weight:300; }
.buzon-title em { font-style:italic; color:var(--rose); }
.buzon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:34px; justify-items:center; }
.buzon-carta { border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:14px; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.buzon-carta:hover { transform:translateY(-6px); }
.buzon-carta .sobre { width:200px; height:132px; }
.buzon-nombre { font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--ink); }
.buzon-fecha { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--warm-gray); }
.buzon-nueva .sello svg { animation:selloBrilla 2.2s ease-in-out infinite; }
@keyframes selloBrilla { 0%,100%{ filter:drop-shadow(0 3px 8px rgba(160,60,70,.4)); } 50%{ filter:drop-shadow(0 0 16px rgba(229,152,155,.95)); } }
.buzon-vacio { text-align:center; padding:50px 20px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--warm-gray); }

/* ═══ ESCRITOR (overlay) ═══ */
#escritor { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; overflow:hidden; }
#escritor.abierto { display:flex; }
.esc-fondo { position:absolute; inset:0; background:radial-gradient(ellipse 90% 70% at 50% 30%,#3d2f33 0%,#1c1316 78%); opacity:0; transition:opacity .5s ease; }
#escritor.abierto .esc-fondo { opacity:1; }

/* sobre de apertura (animación inicial) */
.esc-sobre-intro { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%) scale(1); transition:opacity .5s ease .5s, transform .8s ease; }
.esc-sobre-intro.fuera { opacity:0; pointer-events:none; }

/* papel */
.esc-papel-zona { position:relative; z-index:3; width:min(94vw,680px); max-height:88vh; display:flex; flex-direction:column; }
.papel {
  position:relative; border-radius:14px; overflow-y:auto; overflow-x:hidden;
  padding:52px 54px 46px; flex:1;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  transition:background .5s ease;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255,255,255,.75), transparent 60%),
    var(--papel-color,#fdf9f0);
}
/* al abrir: sale del sobre */
.papel.saliendo { animation:papelSale 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes papelSale { 0%{opacity:0; transform:translateY(130px) scale(.42)} 55%{opacity:1} 100%{transform:none} }
.papel-crema { --papel-color:#fdf9f0; } .papel-rosa { --papel-color:#fdedef; }
.papel-cielo { --papel-color:#edf4fd; } .papel-lila { --papel-color:#f3edfd; }
.papel-menta { --papel-color:#edfdf3; }

.papel-contenido { position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; }
.papel input, .papel textarea { border:none; outline:none; background:transparent; width:100%; color:var(--ink); resize:none; }
.papel input::placeholder, .papel textarea::placeholder { color:rgba(158,143,133,.55); }
.esc-titulo { font-family:'Cormorant Garamond',serif; font-size:clamp(26px,4vw,34px); font-weight:400; margin-bottom:8px; }
.esc-texto { font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.9; min-height:180px; }
.esc-posdata { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--warm-gray); margin-top:8px; }
.esc-nombre { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; text-align:right; color:var(--rose); margin-top:14px; }

/* líneas suaves del papel */
.papel::before { content:''; position:absolute; left:0; right:0; top:0; height:8px; background:linear-gradient(90deg,var(--rose),var(--blush),var(--rose)); opacity:.5; }

/* fotos con marco */
.esc-fotos { display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; position:relative; z-index:2; }
.foto-carta { position:relative; cursor:pointer; animation:fotoEntra .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fotoEntra { from{opacity:0; transform:scale(.7) rotate(-4deg)} to{opacity:1; transform:none} }
.foto-carta img { display:block; width:128px; height:128px; object-fit:cover; }
.marco-polaroid { background:#fff; padding:7px 7px 24px; box-shadow:0 6px 18px rgba(0,0,0,.18); transform:rotate(-1.5deg); }
.marco-dorado { padding:6px; background:linear-gradient(135deg,#e8c874,#c9a244 40%,#f3ddA0 60%,#b8923c); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.marco-dorado img { border:1px solid rgba(255,255,255,.5); }
.marco-rosa { padding:6px; background:#f9d5da; border-radius:12px; box-shadow:0 6px 16px rgba(229,152,155,.35); }
.marco-rosa img { border-radius:7px; }
.marco-noche { padding:6px; background:#2b2440; border-radius:6px; box-shadow:0 6px 18px rgba(43,36,64,.4); }
.marco-simple { border-radius:10px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.16); }

/* selector de marcos */
.marcos-pop { position:absolute; z-index:50; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:#fff; border-radius:14px; padding:12px; display:flex; gap:10px; box-shadow:0 14px 40px rgba(0,0,0,.3); animation:popIn .25s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn { from{opacity:0; transform:translateX(-50%) translateY(8px) scale(.9)} to{opacity:1; transform:translateX(-50%)} }
.marcos-pop .mini { cursor:pointer; border:2px solid transparent; border-radius:8px; padding:3px; transition:border-color .2s; }
.marcos-pop .mini.activo { border-color:var(--rose); }
.marcos-pop .mini img { width:44px; height:44px; object-fit:cover; }
.marcos-pop .mini .foto-carta { animation:none; transform:none; cursor:pointer; }
.marcos-pop .mini .foto-carta img { width:44px; height:44px; }
.marcos-pop .quitar { align-self:center; border:none; background:none; color:#c0605f; font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; padding:0 6px; }

/* stickers */
.sticker { position:absolute; z-index:5; width:38px; height:38px; cursor:grab; user-select:none; touch-action:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)); transition:transform .2s; }
.sticker:active { cursor:grabbing; }
.sticker.seleccionado { outline:2px dashed var(--rose); outline-offset:3px; border-radius:8px; }
.sticker svg { width:100%; height:100%; display:block; pointer-events:none; }
.sticker-x { position:absolute; top:-14px; right:-14px; width:22px; height:22px; border-radius:50%; border:none; background:#c0605f; color:#fff; font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3); }

/* audios en el papel */
.esc-audios { display:flex; flex-direction:column; gap:10px; margin-top:14px; position:relative; z-index:2; }
.audio-chip { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.65); border:1px solid rgba(158,143,133,.25); border-radius:100px; padding:8px 16px; width:fit-content; max-width:100%; }
.audio-chip.incrustando { animation:incrustar .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes incrustar { 0%{opacity:0; transform:translateY(-46px) scale(1.5) rotate(-3deg)} 60%{opacity:1; transform:translateY(4px) scale(.96)} 100%{transform:none} }
.audio-chip .a-play { width:34px; height:34px; border-radius:50%; border:none; background:var(--rose); color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.audio-chip .a-dur { font-size:12px; letter-spacing:1px; color:var(--warm-gray); }
.audio-chip .a-eq { display:flex; gap:2.5px; align-items:flex-end; height:18px; }
.audio-chip .a-eq i { width:3px; border-radius:2px; background:var(--rose); height:5px; }
.audio-chip.sonando .a-eq i { animation:eqBaila .8s ease-in-out infinite; }
.audio-chip .a-eq i:nth-child(2){ animation-delay:.15s } .audio-chip .a-eq i:nth-child(3){ animation-delay:.3s }
.audio-chip .a-eq i:nth-child(4){ animation-delay:.45s } .audio-chip .a-eq i:nth-child(5){ animation-delay:.6s }
@keyframes eqBaila { 0%,100%{height:5px} 50%{height:16px} }
.audio-chip .a-x { border:none; background:none; color:#c0605f; cursor:pointer; font-size:14px; padding:2px 4px; }

/* regalo dentro del papel */
.esc-regalo { display:flex; justify-content:center; padding:14px 0 4px; position:relative; z-index:2; }
.esc-regalo-mini { position:relative; padding-top:26px; }
.esc-regalo-mini .regalo { cursor:pointer; }
.esc-regalo-mini > .a-x {
  position:absolute; top:6px; right:-10px; border:none; cursor:pointer;
  width:26px; height:26px; border-radius:50%; background:#c0605f; color:#fff; font-size:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ═══ BARRA DE HERRAMIENTAS ═══ */
.esc-barra { position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 0 4px; flex-wrap:wrap; }
.herr {
  display:flex; align-items:center; gap:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#f7efe7; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:11px 18px;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  transition:background .25s, transform .25s;
}
.herr:hover { background:rgba(255,255,255,.24); transform:translateY(-2px); }
.herr svg { width:16px; height:16px; }
.herr-enviar { background:linear-gradient(135deg,var(--rose),#e8b4a8); border-color:transparent; color:#fff; box-shadow:0 8px 26px rgba(229,152,155,.4); }
.herr-enviar:disabled { opacity:.6; transform:none; cursor:default; }
.herr-cerrar { background:none; border-color:rgba(255,255,255,.14); }

/* popovers de la barra */
.esc-pop { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 18px 50px rgba(0,0,0,.4); animation:popIn .25s cubic-bezier(.34,1.56,.64,1) both; z-index:60; }
.pop-colores { display:flex; gap:12px; }
.pop-colores button { width:34px; height:34px; border-radius:50%; border:2px solid rgba(0,0,0,.08); cursor:pointer; transition:transform .2s, border-color .2s; }
.pop-colores button.activo { border-color:var(--rose); transform:scale(1.15); }
.pop-stickers { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pop-stickers button { width:46px; height:46px; border:none; background:#faf6f1; border-radius:12px; cursor:pointer; padding:7px; transition:transform .2s, background .2s; }
.pop-stickers button:hover { transform:scale(1.12); background:#f4ece3; }
.pop-stickers svg { width:100%; height:100%; }

/* ═══ GRABADORA ═══ */
.grabadora { position:relative; z-index:4; display:none; align-items:center; justify-content:center; gap:14px; padding:14px 0 4px; }
.grabadora.activa { display:flex; }
.grab-punto { width:12px; height:12px; border-radius:50%; background:#e0524f; animation:grabPulso 1.1s ease-in-out infinite; }
.grabadora.pausada .grab-punto { animation:none; opacity:.45; }
@keyframes grabPulso { 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(224,82,79,.5)} 50%{opacity:.7; box-shadow:0 0 0 7px rgba(224,82,79,0)} }
.grab-eq { width:150px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); }
.grab-tiempo { font-size:13px; letter-spacing:2px; color:#f7efe7; min-width:52px; }
.grab-btn { border:none; cursor:pointer; border-radius:100px; padding:10px 16px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; background:rgba(255,255,255,.14); color:#f7efe7; border:1px solid rgba(255,255,255,.18); transition:background .25s; }
.grab-btn:hover { background:rgba(255,255,255,.26); }
.grab-btn.listo { background:linear-gradient(135deg,var(--rose),#e8b4a8); border-color:transparent; }

/* ═══ ANIMACIÓN DE ENVÍO ═══ */
#envio { position:absolute; inset:0; z-index:10; display:none; align-items:center; justify-content:center; pointer-events:none; }
#envio.activo { display:flex; }
.envio-sobre { position:relative; }
.envio-sobre.entra { animation:sobreEntra .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes sobreEntra { from{opacity:0; transform:scale(1.6)} to{opacity:1; transform:scale(1)} }
.envio-sobre .sello { opacity:0; transform:translate(-50%,-50%) scale(2.4); }
.envio-sobre.sellado .sello { opacity:1; transform:translate(-50%,-50%) scale(1); }
.envio-sobre.agita1 { animation:agita1 .9s ease-in-out both; }
@keyframes agita1 { 0%,100%{transform:none} 20%{transform:translate(-3px,1px) rotate(-1.5deg)} 40%{transform:translate(3px,-1px) rotate(1.5deg)} 60%{transform:translate(-3px,-1px) rotate(-1.5deg)} 80%{transform:translate(3px,1px) rotate(1.5deg)} }
.envio-sobre.agita2 { animation:agita2 .85s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes agita2 {
  0%{transform:none; filter:brightness(1)}
  15%{transform:translate(-7px,3px) rotate(-4deg)} 30%{transform:translate(8px,-4px) rotate(4deg)}
  45%{transform:translate(-9px,-3px) rotate(-6deg) scale(1.04)} 60%{transform:translate(9px,4px) rotate(6deg) scale(1.07)}
  75%{transform:translate(-8px,2px) rotate(-7deg) scale(1.1); filter:brightness(1.35)}
  90%{transform:translate(7px,-3px) rotate(7deg) scale(1.16); filter:brightness(1.8)}
  100%{transform:scale(1.22); filter:brightness(2.4)}
}
.envio-particula { position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; animation:partVuela .95s cubic-bezier(.17,.67,.35,1) forwards; }
@keyframes partVuela { 0%{transform:translate(-50%,-50%) scale(1); opacity:1} 100%{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(.1); opacity:0} }

.estrella-final { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); z-index:12; }
.estrella-final.nace { animation:estrellaNace .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes estrellaNace { 0%{transform:translate(-50%,-50%) scale(0) rotate(-120deg)} 100%{transform:translate(-50%,-50%) scale(1) rotate(0)} }
.estrella-final.vuela { transition:transform 2.4s cubic-bezier(.45,0,.2,1), opacity .5s ease 2.1s; }
.estrella-final svg { display:block; filter:drop-shadow(0 0 22px rgba(255,224,150,.95)) drop-shadow(0 0 60px rgba(255,210,120,.5)); }

/* cielo nocturno pintado */
#cielo { position:absolute; top:0; left:0; right:0; height:62vh; z-index:11; opacity:0; transform:translateY(-12%); transition:opacity 1.6s ease, transform 1.6s ease; pointer-events:none; }
#cielo.visible { opacity:1; transform:none; }
#cielo .cielo-pintura { position:absolute; inset:-80px -60px 0; filter:blur(34px) saturate(1.15);
  background:
    radial-gradient(ellipse 55% 60% at 24% 12%, rgba(48,42,102,.95), transparent 68%),
    radial-gradient(ellipse 60% 66% at 74% 8%,  rgba(28,24,72,.96), transparent 70%),
    radial-gradient(ellipse 45% 50% at 50% 30%, rgba(84,58,128,.72), transparent 72%),
    radial-gradient(ellipse 38% 42% at 12% 46%, rgba(120,82,150,.4), transparent 75%),
    radial-gradient(ellipse 42% 46% at 88% 42%, rgba(60,80,150,.42), transparent 75%),
    radial-gradient(ellipse 80% 55% at 50% 0%,  rgba(16,12,42,.98), transparent 85%);
}
#cielo .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 8px rgba(255,255,255,.9); }
@keyframes twinkle { 0%,100%{opacity:0; transform:scale(.6)} 50%{opacity:var(--max,.95); transform:scale(1)} }
#cielo .luna { position:absolute; top:9%; right:14%; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 38% 35%, #fff9e8, #f0e0b8 70%); box-shadow:0 0 40px rgba(255,244,210,.55); opacity:.9; }

/* mensaje final */
.envio-msj { position:absolute; left:50%; top:58%; transform:translate(-50%,0); text-align:center; opacity:0; transition:opacity .9s ease, transform .9s ease; pointer-events:none; z-index:12; }
.envio-msj.visible { opacity:1; transform:translate(-50%,-14px); pointer-events:auto; }
.envio-msj h3 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(24px,4vw,34px); color:#fdf7ec; margin-bottom:10px; }
.envio-msj p { font-size:13px; letter-spacing:2px; color:rgba(253,247,236,.6); margin-bottom:26px; }
.envio-msj button { border:none; cursor:pointer; border-radius:100px; padding:13px 40px; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--rose),#e8b4a8); box-shadow:0 8px 28px rgba(229,152,155,.4); }

/* ═══ LECTURA DE CARTA (buzón) ═══ */
#lector { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; }
#lector.abierto { display:flex; }
.lector-fondo { position:absolute; inset:0; background:rgba(20,14,16,.82); backdrop-filter:blur(10px); cursor:pointer; }
.lector-zona { position:relative; z-index:2; width:min(94vw,680px); max-height:88vh; display:flex; flex-direction:column; }
.lector-zona .papel { animation:papelSale .8s cubic-bezier(.22,1,.36,1) both; }
.lector-titulo { font-family:'Cormorant Garamond',serif; font-size:clamp(26px,4vw,34px); font-weight:400; margin-bottom:10px; }
.lector-texto { font-size:15px; line-height:1.9; white-space:pre-wrap; }
.lector-posdata { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--warm-gray); margin-top:14px; white-space:pre-wrap; }
.lector-nombre { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; text-align:right; color:var(--rose); margin-top:16px; }
.lector-acciones { display:flex; justify-content:center; gap:12px; padding-top:14px; }
.lector-acciones button { border:none; cursor:pointer; border-radius:100px; padding:11px 24px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; background:rgba(255,255,255,.14); color:#f7efe7; border:1px solid rgba(255,255,255,.2); }
.lector-acciones .rojo { color:#ff9d9a; border-color:rgba(255,157,154,.4); }

/* ═══ ESTADO DE LA EDICIÓN ═══ */
.cartas-estado {
  margin-top:22px; position:relative;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--rose); min-height:14px;
}
.cta-escribir.cerrada { opacity:.45; pointer-events:none; filter:grayscale(.4); }

/* ═══ CHIPS DE AÑO DEL BUZÓN ═══ */
.buzon-anios { display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.buzon-anio {
  border:1px solid rgba(158,143,133,.35); background:rgba(255,255,255,.6); cursor:pointer;
  border-radius:100px; padding:9px 22px;
  font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--warm-gray);
  transition:all .3s ease;
}
.buzon-anio:hover { border-color:var(--rose); color:var(--ink); }
.buzon-anio.activo { background:linear-gradient(135deg,var(--rose),#e8b4a8); color:#fff; border-color:transparent; box-shadow:0 6px 20px rgba(229,152,155,.35); }

/* ═══ CARTA ESPECIAL (brilla) ═══ */
.buzon-carta.especial .sobre { animation:especialBrilla 2.6s ease-in-out infinite; }
@keyframes especialBrilla {
  0%,100% { filter:drop-shadow(0 14px 30px rgba(42,30,22,.18)) drop-shadow(0 0 14px rgba(233,180,90,.55)); }
  50%     { filter:drop-shadow(0 14px 30px rgba(42,30,22,.18)) drop-shadow(0 0 30px rgba(255,215,130,.95)); }
}
.buzon-carta.especial .buzon-nombre { color:#b8862e; }
.buzon-especial-tag {
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:#b8862e; background:linear-gradient(135deg,rgba(255,222,150,.4),rgba(233,180,90,.25));
  border:1px solid rgba(233,180,90,.5); border-radius:100px; padding:5px 14px;
}

/* ═══ CEREMONIA DE APERTURA ESPECIAL ═══ */
#ceremonia { position:fixed; inset:0; z-index:100004; display:none; overflow:hidden; }
#ceremonia.activo { display:block; }
.cer-fondo {
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease;
  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%),
    radial-gradient(ellipse 50% 45% at 50% 40%, rgba(84,58,128,.6), transparent 74%),
    linear-gradient(180deg, #100c26 0%, #1a1030 55%, #241323 100%);
}
#ceremonia.activo .cer-fondo { opacity:1; }
/* al ascender, el espacio profundo llena TODA la página */
.cer-fondo::after {
  content:''; position:absolute; inset:0; opacity:0; transition:opacity 2.2s ease;
  background:
    radial-gradient(ellipse 50% 40% at 70% 25%, rgba(90,60,140,.35), transparent 70%),
    radial-gradient(ellipse 45% 40% at 20% 60%, rgba(40,60,130,.3), transparent 72%),
    linear-gradient(180deg, #05030f 0%, #0b0720 45%, #140b28 100%);
}
#ceremonia.ascenso .cer-fondo::after { opacity:1; }

/* decorado lejano (estrellas de fondo, luna y planetas) con parallax */
.cer-decor { position:absolute; inset:-20vh 0 0 0; transition:transform 2.4s cubic-bezier(.45,0,.25,1); }
#ceremonia.ascenso .cer-decor { transform:translateY(14vh); }
.cer-decor .twinkle {
  position:absolute; border-radius:50%; background:#fff; opacity:0;
  animation:twinkle var(--dur,2.8s) ease-in-out var(--del,0s) infinite;
  box-shadow:0 0 5px rgba(255,255,255,.6);
}
.cer-luna {
  position:absolute; top:10%; right:12%; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #fffaef, #ecdfc0 62%, #cbb896);
  box-shadow:inset -10px -8px 18px rgba(120,100,70,.35), 0 0 44px rgba(255,244,210,.5);
}
.planeta { position:absolute; border-radius:50%; animation:planetaFlota 11s ease-in-out infinite alternate; }
@keyframes planetaFlota { from{transform:translateY(0)} to{transform:translateY(-12px)} }
.pl-saturno {
  left:7%; top:20%; width:76px; height:76px; animation-delay:.8s;
  background:radial-gradient(circle at 35% 30%, #ead9b4, #b59d68 65%, #7e6a42);
  box-shadow:inset -14px -12px 26px rgba(0,0,0,.5), 0 0 34px rgba(232,217,184,.22);
}
.pl-saturno::after {
  content:''; position:absolute; left:50%; top:50%; width:170%; height:42%;
  border:5px solid rgba(228,208,160,.5); border-radius:50%;
  transform:translate(-50%,-50%) rotate(-16deg);
  box-shadow:0 0 14px rgba(228,208,160,.25);
}
.pl-rojo {
  right:14%; top:44%; width:34px; height:34px; animation-delay:2.2s;
  background:radial-gradient(circle at 38% 32%, #e8a58a, #b4573f 68%, #6e2f22);
  box-shadow:inset -6px -5px 12px rgba(0,0,0,.5), 0 0 20px rgba(232,165,138,.25);
}
.pl-azul {
  left:20%; top:62%; width:22px; height:22px; animation-delay:1.4s;
  background:radial-gradient(circle at 38% 32%, #b8d4f0, #5878b0 68%, #2e4470);
  box-shadow:inset -4px -4px 9px rgba(0,0,0,.5), 0 0 18px rgba(140,180,230,.3);
}

/* estrellas CERCANAS (las que vuelan hacia la carta) */
.cer-estrellas { position:absolute; inset:0; }
.cer-estrellas .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 10px rgba(255,255,255,.95);
  transition:left 1.3s cubic-bezier(.5,0,.3,1), top 1.3s cubic-bezier(.5,0,.3,1), opacity .5s ease;
}
.cer-estrellas.converge .twinkle { animation:none; opacity:1; }

.cer-sobre {
  position:absolute; left:50%; top:78%; transform:translate(-50%,-50%) scale(.92);
  transition:top 2.4s cubic-bezier(.45,0,.25,1), transform 2.4s cubic-bezier(.45,0,.25,1);
  filter:drop-shadow(0 0 26px rgba(255,215,130,.75));
}
.cer-sobre.sube { top:22%; transform:translate(-50%,-50%) scale(1.06); }
.cer-sobre .sobre { width:230px; height:152px; }
.cer-flash {
  position:absolute; inset:0; background:radial-gradient(circle at 50% 36%, #fff8e6, #ffedc4 40%, #fff 100%);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.cer-flash.enciende { opacity:1; }
.cer-flash.apaga { transition:opacity .9s ease; opacity:0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:640px) {
  .papel { padding:38px 24px 34px; }
  .esc-barra { gap:7px; }
  .herr { padding:10px 13px; font-size:10px; }
  .foto-carta img { width:104px; height:104px; }
  #cielo { height:55vh; }
}