/* Tu Umbral 2027 · © 2026 NobaStore. Todos los derechos reservados.
   Obra original protegida por derechos de autor. Prohibida su copia, reventa o distribución. */
:root{
  --violet:#5b2d8e; --violet-d:#2b1350; --violet-s:#8a63c4;
  --green:#1f7a57; --green-s:#3fae82;
  --gold:#9a6f24; --gold-s:#d9b77a; --ink:#241b38; --muted:#4f4566;
  --panel:rgba(246,239,255,.95); --panel2:rgba(238,250,244,.95);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{ font-family:'Jost',sans-serif; color:var(--ink); background:#140a2a; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.sym{ font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol',serif; font-variant-emoji:text; }
.rune{ font-family:'Noto Sans Runic','Segoe UI Historic','Segoe UI Symbol',serif; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
input,textarea{ font:inherit; }

/* fondo */
.bg{ position:fixed; inset:0; z-index:0; background:url(assets/fondo0.jpg) center/cover no-repeat; transition:opacity 1.2s; }
.bg.b2{ background-image:url(assets/fondo1.jpg); opacity:0; }
body.green .bg.b2{ opacity:1; }
.bg-shade{ position:fixed; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 0%,rgba(20,8,45,.1),rgba(20,8,45,.55)); }
#stars{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* estructura */
.wrap{ position:relative; z-index:2; max-width:560px; margin:0 auto; padding:14px 16px 40px; min-height:100vh; display:flex; flex-direction:column; }
.topbar{ display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.8); font-family:'Cinzel'; font-size:10px; letter-spacing:2.5px; padding:4px 2px 10px; }
.topbar button{ font-family:'Cinzel'; font-size:10px; letter-spacing:2px; color:rgba(255,255,255,.7); }
.doors{ display:flex; justify-content:center; gap:6px; margin-bottom:12px; }
.doors button{ width:34px; height:40px; border-radius:17px 17px 4px 4px; border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.6); font-family:'Cinzel'; font-size:9.5px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; transition:all .4s; }
.doors button.done{ background:rgba(217,183,122,.25); border-color:var(--gold-s); color:var(--gold-s); }
.doors button.on{ background:var(--gold-s); border-color:var(--gold-s); color:var(--violet-d); box-shadow:0 0 14px rgba(217,183,122,.7); cursor:default; }
.doors button[disabled]{ opacity:.45; cursor:default; }
.doors button.done:active{ transform:scale(.94); }
#menu{ position:fixed; inset:0; z-index:58; background:rgba(10,4,25,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .35s ease; display:flex; align-items:flex-end; justify-content:center; }
#menu.on{ opacity:1; pointer-events:auto; }
#menu .sheet{ width:min(560px,100%); max-height:82vh; overflow:auto; background:var(--panel); border-radius:30px 30px 0 0; padding:20px 16px calc(22px + env(safe-area-inset-bottom)); transform:translateY(24px); transition:transform .35s ease; box-shadow:0 -10px 30px rgba(10,4,25,.4); }
#menu.on .sheet{ transform:none; }
.mlist{ display:flex; flex-direction:column; gap:6px; }
.mitem{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:12px 16px; border-radius:999px; border:1.2px solid rgba(91,45,142,.22); background:rgba(255,255,255,.8); color:var(--violet-d); font-size:14.5px; text-align:left; }
.mitem small{ font-size:11.5px; color:var(--gold); font-family:'Cinzel'; letter-spacing:1px; }
.mitem.cur{ background:linear-gradient(90deg,var(--violet-d),var(--violet)); color:#fff; border-color:transparent; }
.mitem.cur small{ color:var(--gold-s); }
.mitem[disabled]{ opacity:.45; }
.mitem[disabled] small{ color:var(--muted); }
.sheet.terms p{ font-size:14.5px; line-height:1.5; }

.panel{ position:relative; background:var(--panel); border-radius:50% 50% 24px 24px / 64px 64px 24px 24px; padding:46px 20px 24px; box-shadow:0 12px 40px rgba(8,0,25,.5); animation:rise .6s ease both; }
body.green .panel{ background:var(--panel2); }
.panel::before{ content:""; position:absolute; inset:5px; border-radius:inherit; border:1px solid rgba(184,138,62,.45); pointer-events:none; }
.crown{ position:absolute; left:50%; top:12px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; color:var(--gold); }
.crown i{ display:block; width:36px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.crown i:last-child{ background:linear-gradient(270deg,transparent,var(--gold)); }
.wm{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.wm span{ font-family:'Cinzel'; font-size:62px; letter-spacing:8px; color:rgba(120,80,180,.06); transform:rotate(-32deg); white-space:nowrap; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.eyebrow{ font-family:'Cinzel'; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--green); text-align:center; display:flex; align-items:center; justify-content:center; gap:7px; }
h1,h2,h3{ font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--violet-d); line-height:1.08; }
h2{ font-size:32px; text-align:center; margin:4px 0 8px; }
h3{ font-size:21px; }
p{ font-size:15px; line-height:1.55; }
.lead{ font-family:'Cormorant Garamond'; font-style:italic; font-size:18.5px; line-height:1.4; color:var(--muted); text-align:center; }
.small{ font-size:12.5px; color:var(--muted); }
.center{ text-align:center; }
.mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; } .mt20{ margin-top:20px; } .mt24{ margin-top:24px; }
.sec-t{ font-family:'Cinzel'; font-size:11px; letter-spacing:2px; color:var(--violet); text-transform:uppercase; margin:18px 0 8px; display:flex; align-items:center; gap:7px; }
.sec-t svg{ width:13px; height:13px; color:var(--gold); }

/* botones */
.btn{ display:flex; width:100%; align-items:center; justify-content:center; gap:10px; padding:15px 20px; border-radius:999px; background:linear-gradient(90deg,var(--violet-d),var(--violet)); color:#fff; font-family:'Cinzel'; font-size:13px; letter-spacing:2px; box-shadow:0 4px 16px rgba(60,20,110,.35); transition:transform .15s, opacity .2s; }
.btn:active{ transform:scale(.98); }
.btn.g{ background:linear-gradient(90deg,#14523b,var(--green)); }
.btn.ghost{ background:rgba(91,45,142,.08); color:var(--violet-d); box-shadow:none; border:1px solid rgba(91,45,142,.3); }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn svg{ width:15px; height:15px; color:var(--gold-s); }
.btn.ghost svg{ color:var(--gold); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* opciones */
.opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 14px; border-radius:999px; border:1.3px solid rgba(91,45,142,.3); background:rgba(255,255,255,.75); font-size:14.5px; color:var(--violet-d); transition:all .2s; }
.opt .dot{ width:18px; height:18px; flex:none; border-radius:50%; border:1.6px solid var(--violet-s); transition:all .2s; }
.opt.sel{ border-color:var(--violet); background:linear-gradient(90deg,rgba(91,45,142,.14),rgba(255,255,255,.85)); box-shadow:0 2px 10px rgba(91,45,142,.15); }
.opt.sel .dot{ background:var(--violet); box-shadow:inset 0 0 0 3px #fff; }
.opts{ display:flex; flex-direction:column; gap:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ padding:9px 14px; border-radius:999px; border:1.3px solid rgba(91,45,142,.28); background:rgba(255,255,255,.75); font-size:13.5px; color:var(--violet-d); display:inline-flex; gap:6px; align-items:center; transition:all .2s; }
.chip.sel{ background:var(--violet); color:#fff; border-color:var(--violet); }
.chip .badge{ display:inline-flex; width:19px; height:19px; border-radius:50%; background:var(--gold-s); color:var(--violet-d); font-family:'Cinzel'; font-size:11px; align-items:center; justify-content:center; }
.chip svg{ width:14px; height:14px; }
.field{ width:100%; padding:14px 18px; border-radius:999px; border:1.3px solid rgba(91,45,142,.3); background:rgba(255,255,255,.85); font-size:16px; color:var(--violet-d); text-align:center; outline:none; }
.field:focus{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(91,45,142,.15); }
textarea.field{ border-radius:20px; text-align:left; min-height:150px; resize:vertical; font-family:'Cormorant Garamond'; font-style:italic; font-size:19px; line-height:1.45; }

/* intro */
.intro{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:20px 6px; }
.intro .pre{ font-family:'Cinzel'; font-size:11px; letter-spacing:4px; color:rgba(255,255,255,.8); }
.intro h1{ color:#fff; font-size:56px; font-weight:400; margin-top:16px; }
.intro .year{ font-family:'Cinzel'; font-size:34px; letter-spacing:12px; color:var(--gold-s); padding-left:12px; margin-top:4px; }
.intro .sub{ font-family:'Cormorant Garamond'; font-style:italic; font-size:20px; margin-top:10px; color:#efe4ff; }
.wheel{ width:220px; height:220px; margin:22px auto 6px; }
.wheel .spin{ transform-origin:150px 150px; animation:spin 120s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.poem{ max-width:420px; margin:6px auto 0; }
.poem p{ font-family:'Cormorant Garamond'; font-size:21px; line-height:1.45; color:#f4ecff; opacity:0; animation:fadeL 1.2s ease forwards; text-shadow:0 2px 12px rgba(10,0,30,.6); }
.poem p + p{ margin-top:10px; }
@keyframes fadeL{ from{ opacity:0; transform:translateY(8px); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }
.late{ opacity:0; animation:fadeL 1.2s ease forwards; }
.glass{ background:rgba(20,8,45,.55); border:1px solid rgba(217,183,122,.35); border-radius:24px; padding:16px 18px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.glass p{ color:#efe4ff; font-size:15px; }

/* signos */
.zgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.zbtn{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px 8px; border-radius:30px 30px 12px 12px; background:rgba(255,255,255,.7); border:1.2px solid rgba(91,45,142,.2); transition:all .25s; }
.zbtn .g{ font-size:24px; color:var(--violet); line-height:1; }
.zbtn small{ font-size:11px; color:var(--violet-d); }
.zbtn.sel{ background:linear-gradient(180deg,#2b1350,#5b2d8e); border-color:transparent; box-shadow:0 4px 14px rgba(43,19,80,.35); }
.zbtn.sel .g{ color:var(--gold-s); } .zbtn.sel small{ color:#fff; }
.signcard{ margin-top:16px; border-radius:22px; padding:16px; background:rgba(255,255,255,.75); border:1px solid rgba(91,45,142,.15); animation:rise .5s ease both; }
.signhead{ display:flex; gap:14px; align-items:center; }
.medal{ width:74px; height:74px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; background:radial-gradient(circle at 35% 30%,#7b4fbf,#2b1350 70%); color:var(--gold-s); font-size:36px; box-shadow:0 6px 18px rgba(43,19,80,.35); }
.medal::after{ content:""; position:absolute; inset:4px; border-radius:50%; border:1px solid rgba(217,183,122,.6); }
.tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.tag{ font-size:11.5px; padding:3px 10px; border-radius:999px; background:rgba(91,45,142,.1); color:var(--violet); display:inline-flex; gap:4px; align-items:center; }
.tag.g{ background:rgba(31,122,87,.12); color:var(--green); }
.tag.gold{ background:rgba(184,138,62,.15); color:#7a5518; }
.mini{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.mini div{ border-radius:16px; padding:10px 12px; background:rgba(91,45,142,.06); }
.mini b{ display:block; font-family:'Cinzel'; font-size:9.5px; letter-spacing:1.5px; color:var(--violet); font-weight:500; margin-bottom:2px; }
.mini p{ font-size:13px; line-height:1.4; }
.mini .alt{ color:var(--green); font-style:italic; }
.quote{ margin-top:12px; text-align:center; font-family:'Cormorant Garamond'; font-style:italic; font-size:19px; color:var(--violet-d); line-height:1.35; }

/* oráculo */
.qtag{ display:flex; align-items:center; gap:5px; font-family:'Cinzel'; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:3px; }
.qtag svg{ width:12px; height:12px; }
.round{ border-radius:24px; padding:14px 10px 6px; background:linear-gradient(135deg,rgba(91,45,142,.1),rgba(31,122,87,.08)); border:1px solid rgba(184,138,62,.45); animation:rise .6s ease both; }
.bars{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; align-items:end; height:76px; margin:8px 0 2px; }
.bar{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; }
.bar i{ display:block; width:100%; max-width:28px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,var(--gold-s),var(--violet)); transition:height .5s cubic-bezier(.3,1.4,.5,1); min-height:4px; }
.bar small{ font-family:'Cinzel'; font-size:8px; color:var(--violet); }
.qcard{ border-radius:20px; padding:12px 14px; background:rgba(255,255,255,.75); margin-top:10px; }
.qcard .qh{ display:flex; align-items:center; gap:7px; font-family:'Cormorant Garamond'; font-size:19px; font-weight:600; }
.qcard .qh svg{ width:16px; height:16px; }
.qcard .qh .rune{ font-size:15px; opacity:.75; margin-left:auto; }
.q{ padding:9px 0 4px; border-top:1px solid rgba(42,33,64,.08); margin-top:8px; }
.q p{ font-size:14.5px; line-height:1.35; }
.scale{ display:flex; gap:8px; margin-top:8px; }
.scale button{ flex:1; height:40px; border-radius:999px; border:1.3px solid currentColor; font-family:'Cinzel'; font-size:14px; transition:all .2s; opacity:.85; }
.scale button.sel{ opacity:1; color:#fff !important; }
.scale small{ display:block; font-family:'Jost'; font-size:9px; letter-spacing:.3px; margin-top:-2px; }

/* revelación */
/* Portal cósmico de la revelación */
.portal{ position:relative; width:236px; height:300px; margin:22px auto 16px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.portal.mini{ width:190px; height:240px; margin:4px auto 14px; cursor:default; }
.portal .p-aura{ position:absolute; inset:-34px -40px; border-radius:50%; background:radial-gradient(ellipse at 50% 55%, rgba(243,223,174,.45), rgba(201,120,200,.18) 40%, transparent 70%); filter:blur(6px); opacity:.5; animation:aura 3.4s ease-in-out infinite; transition:opacity 1.2s; }
.portal.open .p-aura{ opacity:1; }
@keyframes aura{ 50%{ transform:scale(1.06); } }
.portal .arch{ position:absolute; inset:0; border-radius:118px 118px 16px 16px; overflow:hidden; background:#12062a; perspective:700px;
  box-shadow:0 0 0 3px #d9b77a, 0 0 0 8px rgba(217,183,122,.18), 0 0 0 9px rgba(217,183,122,.55), 0 14px 40px rgba(20,6,45,.6), 0 0 50px rgba(217,183,122,.3); }
.portal .p-neb{ position:absolute; inset:-45%; background:conic-gradient(from 0deg, #2b1350, var(--cc), #1f6aa0, #f3dfae, #5b2d8e, #c2408a, #1f7a57, #2b1350); filter:blur(26px); opacity:.5; animation:spin 16s linear infinite; transition:opacity 1.4s; }
.portal.open .p-neb{ opacity:1; }
.portal .p-stars{ position:absolute; inset:0; width:100%; height:100%; }
.portal .p-rays{ position:absolute; inset:-35%; background:repeating-conic-gradient(from 0deg, rgba(255,240,200,.38) 0 3deg, transparent 3deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 0 22%, transparent 60%); mask:radial-gradient(circle, #000 0 22%, transparent 60%); opacity:0; animation:spin 50s linear infinite; transition:opacity 1.4s .8s; }
.portal.open .p-rays{ opacity:.9; }
.portal .p-core{ position:absolute; inset:0; background:radial-gradient(circle at 50% 54%, rgba(255,248,225,.98) 0, rgba(243,223,174,.75) 12%, rgba(201,179,255,.32) 32%, transparent 58%); opacity:.15; transition:opacity 1.6s .5s; }
.portal.open .p-core{ opacity:1; }
.portal .p-ring{ position:absolute; left:50%; top:54%; width:210px; height:210px; margin:-105px 0 0 -105px; opacity:0; transform:scale(.6); transition:opacity 1.2s 1.1s, transform 1.6s cubic-bezier(.2,1.2,.4,1) 1.1s; }
.portal .p-ring g.spin{ transform-origin:105px 105px; animation:spin 70s linear infinite; }
.portal.open .p-ring{ opacity:.95; transform:none; }
.portal .p-orbit{ position:absolute; left:50%; top:54%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; border:1px dashed rgba(243,223,174,.45); opacity:0; transition:opacity 1s 1.6s; animation:spin 10s linear infinite; }
.portal .p-orbit span{ position:absolute; top:-13px; left:50%; margin-left:-12px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff6d8, #d9b77a); color:#2b1350; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px #f3dfae; }
.portal.open .p-orbit{ opacity:1; }
/* Medallón 3D: una moneda dorada con grosor real (capas apiladas en profundidad), el símbolo
   del camino en relieve en ambas caras y un giro lento que muestra el canto. */
.portal .p-sym{ position:absolute; left:50%; top:54%; width:96px; height:96px; margin:-48px 0 0 -48px; opacity:0; perspective:420px;
  transform:scale(.15) translateY(30px); transition:transform 1.6s cubic-bezier(.2,1.4,.4,1) 1s, opacity .9s 1s; }
.portal.open .p-sym{ opacity:1; transform:none; }
.portal .p-glow{ position:absolute; inset:-34px; border-radius:50%; background:radial-gradient(circle, rgba(255,248,225,.95) 0, rgba(243,223,174,.6) 28%, var(--cc) 52%, transparent 72%); opacity:.75; filter:blur(4px); animation:glowPulse 3.2s ease-in-out infinite; }
@keyframes glowPulse{ 50%{ opacity:1; transform:scale(1.12); } }
.coin{ position:absolute; inset:0; transform-style:preserve-3d; animation:coinSpin 8s linear infinite; }
.portal.open .coin{ animation:coinIn 1.8s cubic-bezier(.2,.8,.3,1) 1s both, coinSpin 8s linear 2.8s infinite; }
.portal.instant .coin{ animation:coinSpin 8s linear infinite; }
@keyframes coinIn{ from{ transform:rotateX(14deg) rotateY(-540deg); } to{ transform:rotateX(14deg) rotateY(0deg); } }
@keyframes coinSpin{ from{ transform:rotateX(14deg) rotateY(0deg); } to{ transform:rotateX(14deg) rotateY(360deg); } }
.coin .edge{ position:absolute; inset:0; border-radius:50%; }
.coin .cface{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#3a1a66; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 34% 28%, #fffbe8 0, #f6e3b4 22%, #dcb96f 52%, #b88a3e 78%, #8a6420 100%);
  box-shadow:inset 0 0 0 3px #a8792e, inset 0 0 0 5px rgba(255,246,216,.75), inset 0 0 0 9px rgba(184,138,62,.35), inset 0 -8px 14px rgba(110,70,15,.45), inset 0 8px 12px rgba(255,255,255,.45); }
.coin .cface::after{ content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 58%); mix-blend-mode:screen; }
.coin .cface svg{ width:54%; height:54%; filter:drop-shadow(0 1.2px 0 rgba(255,250,230,.9)) drop-shadow(0 -1px 0 rgba(80,40,5,.55)) drop-shadow(0 2px 3px rgba(60,20,80,.35)); }
.c3d{ position:relative; margin:0 auto; perspective:320px; }
.c3d .glow{ position:absolute; inset:-32%; border-radius:50%; background:radial-gradient(circle, rgba(255,248,225,.9) 0, rgba(243,223,174,.45) 38%, transparent 70%); animation:glowPulse 3.2s ease-in-out infinite; }
.coin .cface b{ font-family:'Cinzel'; font-weight:600; color:#3a1a66; text-shadow:0 1.2px 0 rgba(255,250,230,.9), 0 -1px 0 rgba(80,40,5,.5); letter-spacing:1px; }
.portal .p-door{ position:absolute; top:0; bottom:0; width:50%; z-index:3; background:linear-gradient(165deg,#2b1350,#42206f 55%,#1a0b36); transition:transform 2s cubic-bezier(.65,0,.2,1); backface-visibility:hidden; }
.portal .p-door.l{ left:0; transform-origin:left center; box-shadow:inset -1px 0 0 rgba(217,183,122,.8); }
.portal .p-door.r{ right:0; transform-origin:right center; box-shadow:inset 1px 0 0 rgba(217,183,122,.8); }
.portal .p-door svg{ position:absolute; inset:0; width:100%; height:100%; }
.portal.open .p-door.l{ transform:rotateY(-108deg); }
.portal.open .p-door.r{ transform:rotateY(108deg); }
.portal .p-seam{ position:absolute; z-index:4; left:50%; top:8%; bottom:4%; width:3px; margin-left:-1.5px; background:linear-gradient(180deg, transparent, #fff6d8 20%, #f3dfae 80%, transparent); box-shadow:0 0 14px 3px rgba(243,223,174,.75); animation:seam 2.2s ease-in-out infinite; transition:opacity .5s; }
@keyframes seam{ 50%{ box-shadow:0 0 26px 7px rgba(243,223,174,.95); } }
.portal.open .p-seam{ opacity:0; }
.portal .p-key{ position:absolute; z-index:5; left:50%; top:-20px; width:40px; height:40px; margin-left:-20px; color:#f3dfae; filter:drop-shadow(0 0 8px rgba(243,223,174,.9)); }
.portal .p-hint{ position:absolute; z-index:5; left:0; right:0; bottom:-30px; text-align:center; font-family:'Cinzel'; font-size:10px; letter-spacing:2.5px; color:var(--violet); transition:opacity .5s; }
.portal.open .p-hint{ opacity:0; }
.portal.instant *{ transition:none !important; }
.result{ animation:rise .8s ease both; }
.breakdown{ border-radius:18px; background:rgba(255,255,255,.75); padding:10px 14px; margin-top:12px; }
.breakdown div{ display:flex; justify-content:space-between; font-size:14px; padding:4px 0; border-top:1px solid rgba(42,33,64,.07); }
.breakdown div:first-child{ border-top:none; }
.breakdown div.tot{ font-weight:600; color:var(--violet-d); }
.rank{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.rank .r{ display:grid; grid-template-columns:minmax(0,1.25fr) 1fr 22px; gap:8px; align-items:center; font-size:12px; }
.rank .r span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row2 .btn{ font-size:11px; letter-spacing:1px; padding:13px 8px; gap:6px; }
.rank .r i{ display:block; height:8px; border-radius:6px; background:linear-gradient(90deg,var(--violet),var(--gold-s)); }
.rank .r .track{ background:rgba(91,45,142,.1); border-radius:6px; }
.wgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.way{ border-radius:40px 40px 14px 14px; padding:14px 10px 12px; text-align:center; background:rgba(255,255,255,.75); border:1.2px solid rgba(91,45,142,.18); }
.way .ic{ width:38px; height:44px; margin:0 auto 5px; border-radius:19px 19px 6px 6px; background:linear-gradient(180deg,#2b1350,#5b2d8e); color:var(--gold-s); display:flex; align-items:center; justify-content:center; }
.way .ic svg{ width:18px; height:18px; }
.way b{ display:block; font-family:'Cormorant Garamond'; font-size:17px; font-weight:600; color:var(--violet-d); line-height:1.1; }
.way small{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.3; }
.way.sel{ background:linear-gradient(180deg,#2b1350,#4a2479); }
.way.sel b{ color:#fff; } .way.sel small{ color:rgba(255,255,255,.8); }
.way.sel .ic{ background:var(--gold-s); color:var(--violet-d); }

/* cartas y runas */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; perspective:900px; }
.tcard{ position:relative; height:250px; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.4,.2,.2,1); }
.tcard.flip{ transform:rotateY(180deg); }
.tcard .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 10px; }
.tcard .back{ background:linear-gradient(160deg,#2b1350,#5b2d8e); border:2px solid var(--gold-s); color:var(--gold-s); box-shadow:0 8px 20px rgba(43,19,80,.35); }
.tcard .back .inner{ position:absolute; inset:8px; border:1px solid rgba(217,183,122,.5); border-radius:10px; }
.tcard .back > svg{ width:58px; height:58px; }
.tcard.tarot{ height:300px; }
.tcard.tarot .c3d{ margin:10px auto 8px; }
.tcard .back .tlabel{ position:absolute; top:18px; left:0; right:0; font-family:'Cinzel'; font-size:11px; letter-spacing:4px; color:var(--gold-s); }
.tcard .back .c3d{ margin-bottom:6px; }
.tcard .front .num{ font-size:9px; letter-spacing:1.5px; }
.tcard .back small{ font-family:'Cinzel'; font-size:10px; letter-spacing:2px; margin-top:10px; color:rgba(255,255,255,.75); }
.tcard .front{ transform:rotateY(180deg); background:#fffaf0; border:2px solid var(--gold); }
.tcard .front .num{ font-family:'Cinzel'; font-size:10px; letter-spacing:2px; color:var(--gold); }
.tcard .front b{ font-family:'Cormorant Garamond'; font-size:21px; color:var(--violet-d); line-height:1.1; margin:6px 0; font-weight:600; }
.tcard .front p{ font-size:12.5px; line-height:1.35; color:var(--muted); }
.tcard .front .pick{ margin-top:10px; font-family:'Cinzel'; font-size:10.5px; letter-spacing:1.5px; padding:7px 12px; border-radius:999px; background:var(--violet); color:#fff; }
.tcard.chosen .front{ box-shadow:0 0 0 3px var(--gold-s), 0 0 26px rgba(217,183,122,.7); }
.stone{ height:200px; }
.stone .back{ border-radius:50% 50% 46% 46% / 55% 55% 45% 45%; background:radial-gradient(circle at 35% 30%,#8a7aa6,#3a2c55 70%); border:2px solid rgba(217,183,122,.6); }
.stone .back .inner{ display:none; }
.stone .front{ border-radius:50% 50% 46% 46% / 55% 55% 45% 45%; }
.stone .front .rg{ font-size:42px; color:var(--violet); line-height:1; }

/* rituales */
.rit{ display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:center; width:100%; text-align:left; padding:10px 14px 10px 10px; border-radius:44px 18px 18px 44px; background:rgba(255,255,255,.78); border:1.2px solid rgba(31,122,87,.2); margin-top:9px; transition:transform .15s; }
.rit:active{ transform:scale(.99); }
.pct{ width:52px; height:52px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:conic-gradient(var(--gold-s) calc(var(--p)*1%), rgba(91,45,142,.12) 0); position:relative; }
.pct::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }
.pct span{ position:relative; font-family:'Cinzel'; font-size:13px; color:var(--violet-d); }
.rit h4{ font-family:'Cormorant Garamond'; font-size:19px; font-weight:600; color:var(--violet-d); line-height:1.1; }
.rit p{ font-size:12.5px; line-height:1.35; color:var(--muted); margin-top:2px; }
.perfect{ display:flex; flex-direction:column; align-items:center; width:100%; text-align:center; padding:22px 18px 18px; border-radius:90px 90px 24px 24px; background:linear-gradient(170deg,#2b1350,#4a2479 60%,#1f5a45); color:#fff; border:1.5px solid var(--gold-s); animation:rise .7s ease both, halo 3.2s ease-in-out infinite; position:relative; overflow:hidden; }
@keyframes halo{ 0%,100%{ box-shadow:0 8px 26px rgba(43,19,80,.4), 0 0 0 rgba(217,183,122,0); } 50%{ box-shadow:0 8px 26px rgba(43,19,80,.4), 0 0 28px rgba(217,183,122,.55); } }
.perfect .pf-eb{ font-family:'Cinzel'; font-size:10px; letter-spacing:2px; color:var(--gold-s); }
.perfect .pct.big{ width:78px; height:78px; margin:12px 0 6px; }
.perfect .pct.big::before{ background:#2b1350; }
.perfect .pct.big span{ color:#f3dfae; font-size:17px; }
.perfect h3{ color:#fff; font-size:27px; margin-top:2px; }
.perfect p{ color:#efe4ff; font-size:14px; line-height:1.45; margin-top:6px; }
.perfect .pf-why{ color:#c8f2df; font-size:13px; }
.perfect .pf-int{ font-family:'Cormorant Garamond'; font-style:italic; font-size:18px; color:#f3dfae; }
.perfect .pf-go{ margin-top:12px; font-family:'Cinzel'; font-size:11px; letter-spacing:1.5px; padding:9px 16px; border-radius:999px; background:var(--gold-s); color:var(--violet-d); }
.why{ display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.why span{ font-size:10.5px; padding:2px 7px; border-radius:999px; background:rgba(31,122,87,.1); color:var(--green); }
.why span.no{ background:rgba(42,33,64,.06); color:#9a92ab; }
table.mat{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:4px; }
table.mat th{ text-align:left; font-family:'Cinzel'; font-weight:500; font-size:9.5px; letter-spacing:1.2px; color:var(--muted); padding:4px 0; }
table.mat td{ padding:6px 0; border-top:1px solid rgba(42,33,64,.08); vertical-align:top; line-height:1.3; }
table.mat td.alt{ color:var(--green); font-style:italic; padding-left:10px; }
ol.steps{ list-style:none; counter-reset:s; }
ol.steps li{ counter-increment:s; position:relative; padding-left:32px; font-size:14.5px; line-height:1.45; margin-bottom:9px; }
ol.steps li::before{ content:counter(s); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--violet); color:#fff; font-family:'Cinzel'; font-size:11px; display:flex; align-items:center; justify-content:center; }
.box{ border-radius:20px; padding:12px 14px; background:rgba(255,255,255,.75); }
.box.dash{ background:rgba(91,45,142,.06); border:1px dashed rgba(91,45,142,.35); }
.box.gold{ background:linear-gradient(135deg,rgba(91,45,142,.08),rgba(31,122,87,.08)); border:1px solid rgba(184,138,62,.45); }
.bring{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px; }
.bring div{ text-align:center; border-radius:14px; padding:8px 4px; background:rgba(255,255,255,.8); }
.bring b{ display:block; font-family:'Cinzel'; font-size:9px; letter-spacing:1.2px; color:var(--green); font-weight:500; }
.bring span{ display:block; font-family:'Cormorant Garamond'; font-size:15.5px; font-weight:600; color:var(--violet-d); line-height:1.15; margin-top:2px; }
.elem{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid rgba(42,33,64,.07); }
.elem:first-child{ border-top:none; }
.elem .ei{ width:30px; height:30px; flex:none; border-radius:50%; background:rgba(91,45,142,.08); color:var(--violet); display:flex; align-items:center; justify-content:center; }
.elem .ei svg{ width:15px; height:15px; }
.elem.mine{ background:rgba(217,183,122,.18); margin:0 -8px; padding:9px 8px; border-radius:14px; }
.elem.mine .ei{ background:var(--gold-s); color:var(--violet-d); }
.elem b{ font-family:'Cinzel'; font-size:10.5px; letter-spacing:1.4px; color:var(--violet-d); font-weight:500; }
.elem p{ font-size:13.5px; line-height:1.4; }

/* luna */
.moonrow{ display:flex; justify-content:center; gap:14px; margin:6px 0 4px; }
.moonrow div{ text-align:center; font-size:10.5px; font-family:'Cinzel'; letter-spacing:1px; color:var(--muted); }
.moonrow svg{ width:30px; height:30px; display:block; margin:0 auto 4px; color:var(--violet); }
.moonrow .on{ color:var(--violet-d); }
.moonrow .on svg{ color:var(--gold); filter:drop-shadow(0 0 6px rgba(217,183,122,.8)); }
.plan{ margin-top:10px; }
.plan .pi{ display:grid; grid-template-columns:auto 1fr; gap:10px; padding:9px 0; border-top:1px solid rgba(42,33,64,.08); align-items:start; }
.plan .pi:first-child{ border-top:none; }
.plan .pd{ font-family:'Cinzel'; font-size:10px; letter-spacing:1px; color:#fff; background:var(--green); border-radius:999px; padding:4px 9px; white-space:nowrap; }
.plan p{ font-size:14px; line-height:1.4; }
.count{ display:flex; justify-content:center; gap:8px; margin-top:6px; }
.count div{ flex:1; max-width:84px; padding:10px 4px 8px; border-radius:20px 20px 14px 14px; background:rgba(255,255,255,.88); text-align:center; box-shadow:0 0 0 1px rgba(184,138,62,.4), 0 4px 14px rgba(43,19,80,.15); }
.count b{ display:block; font-family:'Cinzel'; font-size:26px; color:var(--violet-d); font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums; }
.count small{ display:block; font-size:9.5px; color:var(--muted); letter-spacing:1.5px; margin-top:2px; }
.count b.tick{ animation:tick .6s ease; }
@keyframes tick{ 0%{ color:var(--gold); text-shadow:0 0 12px rgba(217,183,122,.95); transform:translateY(-3px); } 100%{ transform:none; } }
.count .ny{ max-width:none; }
.cnote{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:7px; }
.intro .count div{ background:rgba(20,8,45,.6); box-shadow:0 0 0 1px rgba(217,183,122,.45); }
.intro .count b{ color:#f3dfae; } .intro .count small, .intro .cnote{ color:rgba(255,255,255,.72); }

/* imágenes cósmicas */
.cosmos{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cosmos svg{ position:absolute; display:block; }
.c-ring{ width:1100px; height:1100px; left:50%; top:50%; margin:-550px 0 0 -550px; opacity:.09; animation:spin 400s linear infinite; }
.c-planet{ width:150px; right:-40px; top:8%; opacity:.8; animation:floaty 10s ease-in-out infinite; }
.c-moon{ width:74px; left:-16px; top:62%; opacity:.65; color:#f1dca8; animation:floaty 13s ease-in-out infinite reverse; filter:drop-shadow(0 0 12px rgba(241,220,168,.6)); }
.cosmo{ position:relative; height:124px; margin:0 -6px 14px; border-radius:62px 62px 18px 18px; overflow:hidden; background:#1d0d3d url(assets/fondo0.jpg) center 35%/cover; box-shadow:inset 0 0 0 1px rgba(217,183,122,.55), 0 6px 18px rgba(20,8,45,.3); }
body.green .cosmo{ background-image:url(assets/fondo1.jpg); }
.cosmo::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 115%, rgba(217,183,122,.3), transparent 62%), linear-gradient(180deg, rgba(20,8,45,.1), rgba(20,8,45,.5)); }
.cosmo svg{ position:relative; width:100%; height:100%; display:block; }
.tw{ animation:tw 3.2s ease-in-out infinite; }
@keyframes tw{ 50%{ opacity:.2; } }
.floaty{ animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 50%{ transform:translateY(-6px); } }
.flick{ transform-box:fill-box; transform-origin:50% 100%; animation:flick 1.1s ease-in-out infinite alternate; }
@keyframes flick{ to{ transform:scale(.86,1.12) rotate(3deg); } }
.boom{ transform-box:fill-box; transform-origin:center; animation:boom 2.6s ease-out infinite; opacity:0; }
@keyframes boom{ 0%{ transform:scale(.15); opacity:0; } 15%{ opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }

/* efectos de clic */
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:60; pointer-events:none; }
.veil{ position:fixed; inset:0; z-index:55; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 42%, rgba(243,223,174,.22), rgba(138,99,196,.1) 40%, transparent 70%); }
.veil.on{ animation:veil 1.4s ease-in-out; }
@keyframes veil{ 0%{ opacity:0; transform:scale(.85); } 40%{ opacity:1; } 100%{ opacity:0; transform:scale(1.2); } }
.static .panel, .static .signcard, .static .advice, .static .round, .static .result{ animation:none; }
.static .perfect{ animation:halo 3.2s ease-in-out infinite; }
.pop{ animation:pop .55s ease-out; }
@keyframes pop{ 0%{ transform:scale(.97); box-shadow:0 0 0 0 rgba(217,183,122,.45); } 100%{ transform:none; box-shadow:0 0 0 10px rgba(217,183,122,0); } }
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-20deg); animation:shine 5s ease-in-out infinite; pointer-events:none; }
.btn.ghost::after{ background:linear-gradient(100deg,transparent,rgba(217,183,122,.25),transparent); }
@keyframes shine{ 0%,72%{ left:-60%; } 100%{ left:130%; } }

/* decreto y consejos */
.decree{ font-family:'Cormorant Garamond'; font-style:italic; font-size:20px; line-height:1.5; color:var(--violet-d); text-align:center; }
.decree mark{ background:none; color:var(--violet); border-bottom:1.5px solid var(--gold-s); padding:0 1px; }
.decree .dl{ display:block; }
.decree .dl + .dl{ margin-top:6px; }
.decree .dl.end{ margin-top:12px; color:var(--violet); font-weight:600; }
details.own{ margin-top:14px; }
details.own summary{ cursor:pointer; list-style:none; text-align:center; font-size:13.5px; color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
details.own summary::-webkit-details-marker{ display:none; }
.letter .prophecy{ text-align:center; font-family:'Cormorant Garamond'; font-style:italic; font-size:21px; line-height:1.4; color:var(--violet); padding:12px 4px; margin-top:14px; border-top:1px solid rgba(184,138,62,.45); border-bottom:1px solid rgba(184,138,62,.45); }
.advice{ display:grid; grid-template-columns:40px 1fr; gap:12px; padding:13px 14px; border-radius:20px; background:rgba(255,255,255,.78); margin-top:9px; animation:rise .6s ease both; }
.advice .ai{ width:40px; height:40px; border-radius:20px 20px 7px 7px; background:linear-gradient(180deg,#2b1350,#5b2d8e); color:var(--gold-s); display:flex; align-items:center; justify-content:center; font-size:18px; }
.advice .ai svg{ width:18px; height:18px; }
.advice b{ display:block; font-family:'Cinzel'; font-size:10px; letter-spacing:1.5px; color:var(--green); font-weight:500; margin-bottom:2px; }
.advice p{ font-size:14.5px; line-height:1.45; }
.advice.special{ background:linear-gradient(135deg,#2b1350,#4a2479); }
.advice.special p{ color:#f1e8ff; } .advice.special b{ color:var(--gold-s); }
.advice.special .ai{ background:var(--gold-s); color:var(--violet-d); }

/* desenlace */
.letter{ font-family:'Cormorant Garamond'; font-size:19.5px; line-height:1.55; color:var(--ink); }
.letter p{ font-family:inherit; font-size:inherit; line-height:inherit; }
.letter p + p{ margin-top:10px; }
.letter .sign{ text-align:right; font-style:italic; color:var(--violet); margin-top:14px; }
canvas#cert{ width:100%; height:auto; border-radius:18px; box-shadow:0 10px 30px rgba(20,8,45,.4); display:block; margin-top:12px; }
.gifts{ border-radius:28px; padding:18px 14px; background:linear-gradient(160deg,rgba(91,45,142,.1),rgba(31,122,87,.08)); border:1px solid rgba(184,138,62,.5); }
.gift{ display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; }
.gift .gnum{ width:34px; height:40px; border-radius:17px 17px 6px 6px; background:linear-gradient(180deg,#2b1350,#5b2d8e); color:var(--gold-s); font-family:'Cinzel'; font-size:15px; display:flex; align-items:center; justify-content:center; }
.gift b{ font-family:'Cormorant Garamond'; font-size:20px; color:var(--violet-d); font-weight:600; line-height:1.15; display:block; }
.gift p{ font-size:13px; line-height:1.4; color:var(--muted); margin-top:3px; }
.gift .gbonus{ color:var(--green); font-size:12.5px; margin-top:6px; }
.gift .gbonus svg{ color:var(--gold); vertical-align:-1px; }
.walls{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 12px; margin-top:12px; }
.walls > div{ min-width:0; }
.walls canvas{ width:100%; height:auto; border-radius:16px; display:block; box-shadow:0 8px 22px rgba(20,8,45,.35); }
.walls .btn{ font-size:10px; letter-spacing:1px; padding:10px 8px; gap:5px; white-space:normal; line-height:1.3; min-height:46px; }
.walls .btn svg{ display:none; }
.fine{ font-size:11px; color:rgba(255,255,255,.65); text-align:center; line-height:1.45; margin-top:8px; }
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(30px); opacity:0; background:rgba(20,8,45,.92); color:#fff; padding:11px 18px; border-radius:999px; font-size:13.5px; z-index:50; transition:all .35s; border:1px solid rgba(217,183,122,.4); max-width:90%; text-align:center; }
.toast.on{ opacity:1; transform:translateX(-50%); }
/* modo liviano: menos efectos pesados en celulares lentos */
.lite .glass, .lite #menu{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.lite .c-ring, .lite .c-planet, .lite .c-moon{ animation:none; }
.lite .portal .p-neb{ filter:blur(12px); }
.lite .btn::after{ display:none; }

/* las palabras destacadas dentro de la descripción de un regalo van en línea, no como título */
.gift p b{ display:inline; font-family:inherit; font-size:inherit; font-weight:600; color:var(--violet-d); line-height:inherit; }

/* botones de color para que cada regalo resalte */
.btn.soft{ background:linear-gradient(90deg,#efe4ff,#dccbf5); color:var(--violet-d); border:1px solid rgba(91,45,142,.35); box-shadow:0 3px 12px rgba(91,45,142,.18); }
.btn.soft svg{ color:var(--violet); }
.btn.violet{ background:linear-gradient(90deg,var(--violet-d),var(--violet)); }
.btn.rose{ background:linear-gradient(90deg,#6b1f4a,#c2408a); box-shadow:0 4px 16px rgba(194,64,138,.35); }
.btn.blue{ background:linear-gradient(90deg,#1a4470,#3d86c2); box-shadow:0 4px 16px rgba(61,134,194,.35); }
.btn.g{ box-shadow:0 4px 16px rgba(31,122,87,.35); }

/* en computador: manito de clic y brillo al pasar el mouse por todo lo que se puede tocar */
[data-act], .tcard, .pick, .zbtn, .chip, .opt, .rit, .perfect, .way, summary{ cursor:pointer; }
button[disabled], .btn[disabled]{ cursor:default; }
@media (hover:hover){
  .btn:not([disabled]):hover{ filter:brightness(1.12); transform:translateY(-1px); box-shadow:0 6px 22px rgba(60,20,110,.4); }
  .tcard .pick:hover{ background:linear-gradient(90deg,var(--violet),#8a63c4); box-shadow:0 0 0 2px #f3dfae, 0 0 16px rgba(217,183,122,.8); transform:scale(1.06); }
  .tcard:not(.flip):hover{ filter:brightness(1.08); }
  .chip:hover, .opt:hover, .zbtn:hover, .rit:hover, .way:hover{ border-color:var(--violet); box-shadow:0 2px 12px rgba(91,45,142,.18); }
  .doors button.done:hover, .mitem:not([disabled]):hover{ filter:brightness(1.15); }
}
.tcard .pick{ transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.tcard .pick::before{ content:"✦"; color:#f3dfae; }

/* accesibilidad: borde visible al navegar con teclado */
:focus-visible{ outline:3px solid #f3dfae; outline-offset:3px; border-radius:12px; }
.btn:focus-visible, .chip:focus-visible, .opt:focus-visible{ outline-color:#5b2d8e; }

/* pantalla de carga */
#loader{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:radial-gradient(ellipse at 50% 40%, #2b1350, #12062a 70%); transition:opacity .7s ease, visibility .7s; }
#loader.off{ opacity:0; visibility:hidden; }
#loader p{ font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-size:20px; color:#f3dfae; letter-spacing:.5px; }
.ld-portal{ position:relative; width:110px; height:140px; border:2px solid #d9b77a; border-radius:55px 55px 10px 10px; box-shadow:0 0 30px rgba(217,183,122,.45), inset 0 0 30px rgba(217,183,122,.25); display:flex; align-items:center; justify-content:center; }
.ld-ring{ position:absolute; width:70px; height:70px; border-radius:50%; border:2px solid rgba(243,223,174,.25); border-top-color:#f3dfae; animation:spin 1.1s linear infinite; }
.ld-star{ font-size:28px; color:#fff4d6; text-shadow:0 0 14px #f3dfae; animation:glowPulse 1.6s ease-in-out infinite; }

/* guardar mi umbral */
.keep{ border-radius:28px; padding:18px 14px; background:linear-gradient(160deg,rgba(31,122,87,.1),rgba(91,45,142,.08)); border:1px solid rgba(31,122,87,.4); text-align:center; }

/* cumpleaños */
.bday{ border-radius:22px; padding:12px 14px; background:rgba(91,45,142,.06); border:1px dashed rgba(91,45,142,.3); }
.bday-row{ display:flex; gap:8px; justify-content:center; }
.bday select{ flex:1; max-width:150px; padding:10px 14px; border-radius:999px; border:1.3px solid rgba(91,45,142,.3); background:#fff; font:inherit; font-size:15px; color:var(--violet-d); }

/* despedida */
.btn.gold{ background:linear-gradient(90deg,#b88a3e,#f3dfae 50%,#b88a3e); color:#2b1350; box-shadow:0 4px 20px rgba(217,183,122,.45); }
.btn.gold svg{ color:#5b2d8e; }
.farewell-cta{ text-align:center; padding:18px 14px 6px; border-top:1px solid rgba(184,138,62,.4); }
.farewell{ padding-top:36px; padding-bottom:30px; }
.farewell .poem p{ font-size:22px; }
.farewell .poem p:first-child{ font-size:30px; color:#f3dfae; font-style:italic; }
.farewell .poem p b{ color:#f3dfae; font-weight:600; }
.farewell-sign{ font-family:'Cormorant Garamond'; font-size:21px; line-height:1.45; color:#f6efff; text-align:center; text-shadow:0 2px 10px rgba(10,4,25,.7); }
.linkish{ display:block; margin-left:auto; margin-right:auto; color:rgba(255,255,255,.85); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Legibilidad ----------
   La letra Cinzel es elegante pero de trazo fino: en tamaños pequeños se pierde. Aquí se suben
   tamaño, grosor y contraste de todas las etiquetas y textos secundarios. */
.eyebrow{ font-size:12px; font-weight:600; letter-spacing:2px; color:#17654a; }
.sec-t{ font-size:12.5px; font-weight:600; letter-spacing:1.6px; color:#4a2280; }
.lead{ font-size:19px; color:#463c5c; }
.small{ font-size:13.5px; line-height:1.5; }
p{ color:var(--ink); }
.topbar, .topbar button{ font-size:11.5px; font-weight:600; letter-spacing:1.8px; color:rgba(255,255,255,.95); text-shadow:0 1px 6px rgba(10,4,25,.7); }
.doors button{ font-size:11px; font-weight:600; color:rgba(255,255,255,.85); }
.doors button.done{ background:rgba(217,183,122,.35); color:#fff4d6; }
.doors button[disabled]{ opacity:.55; }
.btn{ font-size:13.5px; font-weight:600; }
.chip{ font-size:14px; }
.tag{ font-size:12.5px; font-weight:500; }
.tag.gold{ color:#6b4810; }
.mini b{ font-size:11px; font-weight:600; color:#4a2280; }
.mini p{ font-size:14px; }
.zbtn small{ font-size:12px; font-weight:500; }
.qtag{ font-size:11px; font-weight:600; letter-spacing:1px; }
.q p{ font-size:15px; }
.scale button{ font-size:15px; font-weight:600; opacity:1; background:rgba(255,255,255,.7); }
.scale small{ font-size:10.5px; font-weight:500; }
.bar small{ font-size:9.5px; font-weight:600; }
.rank .r{ font-size:13px; }
.way small{ font-size:12.5px; color:var(--muted); }
.tcard .front .num{ font-size:10.5px; font-weight:600; color:var(--gold); }
.tcard .front p{ font-size:13.5px; color:var(--muted); }
.tcard .back small, .tcard .back .tlabel{ font-size:11.5px; font-weight:600; color:#f3dfae; }
.stone .front p{ font-size:12.5px !important; }
.rit p{ font-size:13.5px; }
.why span{ font-size:11.5px; font-weight:500; }
.why span.no{ color:#6f6884; }
.bring b{ font-size:10.5px; font-weight:600; }
.elem b{ font-size:12px; font-weight:600; }
.elem p{ font-size:14px; }
.plan .pd{ font-size:11px; font-weight:600; }
table.mat th{ font-size:10.5px; font-weight:600; color:var(--muted); }
table.mat td{ font-size:14px; }
.count small{ font-size:11px; font-weight:600; }
.cnote{ font-size:12.5px; }
.advice b{ font-size:11.5px; font-weight:600; letter-spacing:1.2px; }
.advice p{ font-size:15px; }
.gift p{ font-size:14px; }
.gift .gbonus{ font-size:13.5px; }
.mitem small{ font-size:12px; font-weight:600; }
.perfect .pf-eb{ font-size:12px; font-weight:600; }
.perfect .pf-why{ font-size:14px; }
.portal .p-hint{ font-size:12px; font-weight:600; color:var(--violet-d); }
.walls .btn{ font-size:10.5px; }
.fine{ font-size:12.5px; color:rgba(255,255,255,.88); text-shadow:0 1px 6px rgba(10,4,25,.8); }
.intro .pre{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.95); }
.intro .sub{ font-size:21px; }
.glass p{ font-size:15.5px; color:#f6efff; }
.box.dash .small, .box .small{ color:#463c5c; }
.cnote, .count small{ color:#463c5c; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } .poem p, .late{ opacity:1; } }