/* ═══════════════════════════════════════════════════════════
   EG · Favoritos: espacio, nave, galaxias, despegue,
   transición de estrellas y tesoros flotando.
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  font-family:'Jost',sans-serif; font-weight:300; color:#f5eee4; overflow-x:hidden; min-height:100vh;
  background:
    radial-gradient(ellipse 60% 50% at 20% 12%, rgba(48,42,102,.9), transparent 70%),
    radial-gradient(ellipse 65% 55% at 80% 8%, rgba(28,24,72,.92), transparent 72%),
    radial-gradient(ellipse 50% 45% at 55% 45%, rgba(84,58,128,.4), transparent 74%),
    linear-gradient(180deg,#05030f 0%, #0d0824 50%, #1a0f30 100%);
  background-attachment:fixed;
}

#page-fade { position:fixed; inset:0; background:#0d0824; 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 oscuro */
#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; border-radius:100px; border:1px solid transparent; opacity:0; transition:opacity .4s ease; }
#navbar.ready { opacity:1; }
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:20px; letter-spacing:3px; color:#f5eee4; text-decoration:none; }
.nav-logo em { font-style:italic; color:#e5989b; }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(245,238,228,.6); text-decoration:none; transition:color .3s; }
.nav-links a:hover { color:#fff; }
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:6px; z-index:1002; }
.nav-burger span { display:block; width:22px; height:2px; background:#f5eee4; 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(10,7,24,.97); backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.nav-drawer.open { display:flex; }
.nav-drawer a { font-family:'Cormorant Garamond',serif; font-size:clamp(32px,8vw,52px); color:#f5eee4; text-decoration:none; }
.nav-drawer a:hover { color:#e5989b; }
.nav-drawer-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:48px; color:rgba(245,238,228,.6); cursor:pointer; padding:12px 18px; }
@media (max-width:640px) { .nav-links { display:none !important; } .nav-burger { display:flex; } }

/* ═══ ESCENA ═══ */
.fav-espacio { position:relative; min-height:100vh; overflow:hidden; padding:120px 20px 60px; }
.fav-estrellas-fondo { position:absolute; inset:0; pointer-events:none; }
.fav-estrellas-fondo .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); }

.fav-cabecera { position:relative; text-align:center; z-index:3; }
.fav-eyebrow { font-size:11px; letter-spacing:5px; text-transform:uppercase; color:rgba(245,238,228,.45); margin-bottom:14px; }
.fav-titulo { font-family:'Cormorant Garamond',serif; font-size:clamp(40px,7vw,64px); font-weight:300; }
.fav-titulo em { font-style:italic; color:#ffd985; }
.fav-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(15px,2vw,19px); color:rgba(245,238,228,.55); margin-top:12px; }

/* ═══ CONSTELACIONES 3D ═══ */
.fav-galaxias { position:relative; z-index:3; display:flex; justify-content:center; gap:clamp(16px,5vw,80px); margin-top:54px; flex-wrap:wrap; }
.galaxia { position:relative; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:12px; padding:10px; perspective:700px; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.galaxia:hover { transform:scale(1.1); }
.gal-nucleo {
  position:relative; width:clamp(130px,18vw,180px); height:clamp(130px,18vw,180px);
  transform-style:preserve-3d;
  animation:cst3d var(--g3d,10s) ease-in-out infinite alternate;
  transition:filter .5s ease;
}
@keyframes cst3d {
  from { transform:rotateY(-17deg) rotateX(5deg); }
  to   { transform:rotateY(17deg) rotateX(-7deg); }
}
/* nebulosas de colores detrás de cada constelación */
.gal-nucleo::before {
  content:''; position:absolute; inset:-18%; border-radius:50%;
  filter:blur(22px); opacity:.8; transition:opacity .5s ease;
  transform:translateZ(-40px);
}
.gal-cartas .gal-nucleo::before { background:
  radial-gradient(circle at 32% 36%, rgba(229,152,155,.6), transparent 58%),
  radial-gradient(circle at 68% 62%, rgba(255,150,120,.4), transparent 60%),
  radial-gradient(circle at 55% 30%, rgba(255,190,210,.3), transparent 55%); }
.gal-regalos .gal-nucleo::before { background:
  radial-gradient(circle at 34% 38%, rgba(232,171,74,.55), transparent 58%),
  radial-gradient(circle at 66% 60%, rgba(255,214,130,.38), transparent 60%),
  radial-gradient(circle at 58% 28%, rgba(255,240,190,.28), transparent 55%); }
.gal-anivs .gal-nucleo::before { background:
  radial-gradient(circle at 32% 38%, rgba(155,127,212,.6), transparent 58%),
  radial-gradient(circle at 68% 58%, rgba(90,120,220,.4), transparent 60%),
  radial-gradient(circle at 54% 28%, rgba(210,180,255,.3), transparent 55%); }
.gal-nucleo svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:translateZ(24px); }
.gal-nucleo .cst-linea { stroke:rgba(255,255,255,.32); stroke-width:.7; stroke-dasharray:2.4 2.2; }
.gal-nucleo .cst-p { animation:cstPulsa 2.4s ease-in-out infinite; }
.gal-nucleo .cst-halo { animation:cstPulsa 2.4s ease-in-out infinite; }
@keyframes cstPulsa { 0%,100%{opacity:.5} 50%{opacity:1} }
/* iluminación al pasar el cursor */
.gal-cartas:hover .gal-nucleo { filter:drop-shadow(0 0 44px rgba(255,170,190,.9)) brightness(1.35); }
.gal-regalos:hover .gal-nucleo { filter:drop-shadow(0 0 44px rgba(255,214,130,.9)) brightness(1.35); }
.gal-anivs:hover .gal-nucleo { filter:drop-shadow(0 0 44px rgba(200,170,255,.9)) brightness(1.35); }
.galaxia:hover .gal-nucleo::before { opacity:1; }
.gal-nombre { font-family:'Cormorant Garamond',serif; font-size:21px; color:#f5eee4; letter-spacing:1px; }
.gal-conteo { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(245,238,228,.5); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:4px 14px; }
.galaxia:hover .gal-conteo { color:#ffd985; border-color:rgba(255,217,133,.5); }

/* ═══ NAVE ═══ */
.nave-zona { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:70px; }
.nave { position:relative; width:96px; animation:naveFlota 4.5s ease-in-out infinite; transform-origin:center; }
@keyframes naveFlota { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
.nave.despega { animation:none; }
.nv-cuerpo {
  position:relative; width:64px; height:110px; margin:0 auto;
  border-radius:32px 32px 14px 14px;
  background:linear-gradient(105deg,#fdf5ea 20%,#e8d9c8 55%,#bda893);
  box-shadow:inset -8px -6px 16px rgba(90,70,50,.25), 0 16px 40px rgba(0,0,0,.45), 0 0 30px rgba(255,217,133,.18);
}
.nv-ventana {
  position:absolute; left:50%; top:26px; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #cfeaff, #6d92c4 70%, #2c4468);
  border:4px solid #d9c4a8; box-shadow:inset 0 2px 5px rgba(255,255,255,.5);
}
.nv-franja { position:absolute; left:0; right:0; bottom:22px; height:12px; background:#e5989b; opacity:.85; }
.nv-aleta { position:absolute; bottom:0; width:26px; height:44px; background:linear-gradient(180deg,#e5989b,#b45a68); border-radius:12px 12px 4px 4px; box-shadow:0 6px 16px rgba(0,0,0,.3); }
.nv-aleta.izq { left:-8px; transform:rotate(-8deg); }
.nv-aleta.der { right:-8px; transform:rotate(8deg); }
/* fuego difuminado, DETRÁS de la nave */
.nv-cuerpo { z-index:3; }
.nv-aleta { z-index:2; }
.nv-flama { position:absolute; left:50%; top:calc(100% - 22px); transform:translateX(-50%); display:flex; gap:4px; align-items:flex-start; z-index:0; filter:blur(7px); opacity:.95; }
.nv-flama i { display:block; width:14px; border-radius:0 0 14px 14px; background:linear-gradient(180deg,#fff3c8,#ffd985 30%,#ff9a5c 65%,transparent); animation:flama .3s ease-in-out infinite alternate; transform-origin:top center; }
.nv-flama i:nth-child(1){ height:34px; animation-delay:.08s } .nv-flama i:nth-child(2){ height:52px } .nv-flama i:nth-child(3){ height:32px; animation-delay:.16s }
@keyframes flama { from{transform:scaleY(.7) scaleX(.85); opacity:.75} to{transform:scaleY(1.2) scaleX(1.05); opacity:1} }
.nave.despega .nv-flama { filter:blur(9px); }
.nave.despega .nv-flama i { height:88px; filter:brightness(1.35); }

/* turbinas laterales con su propio fueguito difuminado */
.nv-turbina {
  position:absolute; bottom:-8px; width:20px; height:34px; z-index:1;
  border-radius:10px 10px 7px 7px;
  background:linear-gradient(105deg,#d8c9b6 20%,#a8927a 60%,#7c6852);
  box-shadow:inset -4px -3px 8px rgba(60,45,30,.4), 0 6px 14px rgba(0,0,0,.35);
}
.nv-turbina::before { content:''; position:absolute; left:2px; right:2px; top:3px; height:4px; border-radius:4px; background:rgba(255,255,255,.35); }
.nv-turbina.izq { left:2px; transform:rotate(-6deg); }
.nv-turbina.der { right:2px; transform:rotate(6deg); }
.nv-tflama {
  position:absolute; left:50%; top:calc(100% - 4px); transform:translateX(-50%);
  width:11px; height:26px; border-radius:0 0 10px 10px; filter:blur(5px);
  background:linear-gradient(180deg,#ffe9ad,#ff9a5c 55%,transparent);
  animation:flama .28s ease-in-out infinite alternate;
  transform-origin:top center;
}
.nv-turbina.der .nv-tflama { animation-delay:.12s; }
.nave.despega .nv-tflama { height:44px; filter:blur(6px) brightness(1.3); }
.nave-pista { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(245,238,228,.4); }

/* ═══ TRANSICIÓN DE ESTRELLAS ═══ */
#favTransicion { position:fixed; inset:0; z-index:100005; pointer-events:none; }
#favTransicion .tr-estrella {
  position:fixed; z-index:100005; pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(255,231,170,.9));
  transition:transform 1s cubic-bezier(.3,0,.4,1), opacity .8s ease;
}
#favTransicion .tr-estrella svg { width:100%; height:100%; display:block; }
.estrella-pop { position:fixed; z-index:100006; pointer-events:none; transform:translate(-50%,-50%) scale(0); animation:popEstrella .7s cubic-bezier(.34,1.56,.64,1) both; filter:drop-shadow(0 0 22px rgba(255,224,150,.95)); }
@keyframes popEstrella { 0%{transform:translate(-50%,-50%) scale(0) rotate(-140deg)} 100%{transform:translate(-50%,-50%) scale(1) rotate(0)} }

/* ═══ VISTA DE LA SECCIÓN ELEGIDA ═══ */
.fav-vista { position:relative; z-index:4; max-width:960px; margin:30px auto 0; text-align:center; animation:vistaEntra 1s ease both; }
@keyframes vistaEntra { from{opacity:0} to{opacity:1} }
.fav-vista h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,5vw,46px); font-weight:300; margin-bottom:8px; }
.fav-vista .v-sub { font-family:'Cormorant Garamond',serif; font-style:italic; color:rgba(245,238,228,.55); margin-bottom:44px; }
.fav-volver { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:rgba(245,238,228,.8); cursor:pointer; border-radius:100px; padding:11px 26px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:40px; transition:background .3s; backdrop-filter:blur(8px); }
.fav-volver:hover { background:rgba(255,255,255,.16); }
.fav-flotantes { display:flex; flex-wrap:wrap; gap:44px; justify-content:center; align-items:flex-start; padding-bottom:80px; }

/* cada tesoro DERIVA por el espacio (Lissajous: X e Y a ritmos distintos) */
.flota { position:relative; animation:derivaX var(--ddx,7s) ease-in-out var(--fdx,0s) infinite alternate; }
@keyframes derivaX { from{transform:translateX(calc(var(--ax,24px) * -1))} to{transform:translateX(var(--ax,24px))} }
.deriva { position:relative; animation:derivaY var(--ddy,5s) ease-in-out var(--fdy,0s) infinite alternate; }
@keyframes derivaY { from{transform:translateY(-16px) rotate(var(--fr,2deg))} to{transform:translateY(16px) rotate(calc(var(--fr,2deg) * -1))} }
.flota.se-va { transition:opacity .6s ease, transform .6s ease; opacity:0; transform:scale(.4); animation:none; }
.flota .fav-btn { position:absolute; top:-14px; right:-14px; z-index:6; width:38px; height:38px; }
.flota .fav-btn svg { width:20px; height:20px; }

/* carta flotante (reusa .ms-* de Aniv.css) */
.flota .ms-nombre { color:#f5eee4; }

/* aniversario flotante */
.fav-aniv-item { border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; }
.fav-aniv-item svg { filter:drop-shadow(0 0 18px rgba(255,217,133,.8)); }
.fav-aniv-item span { font-family:'Cormorant Garamond',serif; font-size:20px; color:#ffe9ad; }
.fav-aniv-item small { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(245,238,228,.5); }

.fav-vacio { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:rgba(245,238,228,.55); padding:30px 0 70px; }

@media (max-width:640px) {
  .fav-espacio { padding:104px 14px 40px; }
  .fav-galaxias { gap:8px; }
  .fav-flotantes { gap:30px; }
}