/* ═══ 🪄 hechizos de gramática: nav, libro de hechizos y pergamino con sello de lacre ═══ */
main>#v-gramatica{max-width:980px}

/* ── libro de hechizos: grid de sellos (reutiliza .alb-panel/.alb-head/.alb-counter) ── */
#hzGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px;margin-top:18px}
.hz-card{position:relative;aspect-ratio:3/4;border-radius:16px;background:var(--surface);border:1.5px solid #DDD6FE;
  box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;transition:transform .15s,box-shadow .18s}
.hz-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(124,58,237,.16)}
.hz-card:active{transform:scale(.95)}
.hz-card-sello{font-size:1.9rem;line-height:1}
.hz-card-num{position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:50%;background:var(--purple);color:#fff;
  font-size:.68rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.hz-card-tit{font-size:.76rem;font-weight:800;color:var(--deep);text-align:center;line-height:1.25}
.hz-card.vacia{background:#F8F7FE;border:2px dashed #DDD6FE;box-shadow:none;cursor:default;color:#A5A0C8}
.hz-card.vacia .hz-card-lock{font-size:1.5rem;opacity:.55}
.hz-card.vacia .hz-card-num{background:none;color:#A5A0C8;position:static;width:auto;height:auto;font-size:.72rem}
#hechizoOv{display:none;position:fixed;inset:0;z-index:145;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(circle at 50% 30%,#3B2E77 0%,#2E1065 55%,#1E0B45 100%)}
#hechizoOv.on{display:flex;animation:appear .3s ease}

.hz-runa{position:absolute;color:rgba(167,139,250,.22);font-weight:900;font-size:1.4rem;pointer-events:none;
  user-select:none;animation:hzRunaFlota 9s ease-in-out infinite}
@keyframes hzRunaFlota{50%{transform:translateY(-14px) rotate(6deg)}}
.hz-hadas{position:absolute;inset:0;pointer-events:none;z-index:1}
.hz-hada{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFD766;
  box-shadow:0 0 8px 2px rgba(255,215,102,.65);animation:hzHadaBrilla 1.3s ease-out forwards}
@keyframes hzHadaBrilla{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5) translateY(18px)}}

.hz-saltar{position:absolute;top:16px;right:16px;z-index:8;min-height:40px;padding:8px 16px;border:0;border-radius:99px;
  background:rgba(255,255,255,.12);color:#EDE9FE;font-weight:800;font-size:.85rem;cursor:pointer}
.hz-saltar:hover{background:rgba(255,255,255,.2)}

.hz-escena{position:relative;width:min(92vw,540px);display:flex;flex-direction:column;align-items:center;
  max-height:88dvh;justify-content:center}

/* ── pergamino ── */
.hz-pergamino{position:relative;width:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.hz-vara{position:relative;z-index:4;height:22px;width:calc(100% + 30px);margin-left:-15px;border-radius:11px;
  background:linear-gradient(180deg,#A5622D 0%,#7C4520 45%,#5C3115 100%)}
.hz-vara::before,.hz-vara::after{content:'';position:absolute;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#C98A4B,#5C3115)}
.hz-vara::before{left:-6px}.hz-vara::after{right:-6px}
.hz-papel{position:relative;z-index:2;margin:-7px 6px;overflow:hidden;
  background:linear-gradient(180deg,#FBF3DF 0%,#F7ECD2 60%,#F1E3C2 100%);
  border-left:2px solid #E4D3AC;border-right:2px solid #E4D3AC;
  max-height:0;transition:max-height .9s cubic-bezier(.36,1.28,.35,1)}
.hz-papel::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .68 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E")}
.hz-papel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,40,10,.16),transparent 26px),linear-gradient(0deg,rgba(60,40,10,.16),transparent 26px)}
#hechizoOv.abierto .hz-papel{max-height:70dvh;overflow-y:auto}

.hz-hechizo{position:relative;z-index:1;padding:22px 22px 20px;text-align:center;color:#3B2A6B;
  opacity:0;transform:translateY(-8px);transition:opacity .5s ease .45s,transform .5s ease .45s}
#hechizoOv.abierto .hz-hechizo{opacity:1;transform:none}
.hz-eyebrow{font-size:.7rem;font-weight:900;letter-spacing:.2em;color:#8A6D2F;text-transform:uppercase}
.hz-titulo{font-size:clamp(1.3rem,5.5vw,1.8rem);font-weight:900;color:#2E1065;line-height:1.18;margin-top:5px;
  background:linear-gradient(100deg,#2E1065 38%,#8A5CF6 50%,#2E1065 62%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:220% 100%;animation:hzBrilloTitulo 3.4s ease-in-out infinite}
@keyframes hzBrilloTitulo{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hz-explica{margin-top:9px;font-weight:700;font-size:.98rem;line-height:1.45}
.hz-mnemo{margin:11px auto 0;max-width:40ch;background:rgba(124,58,237,.09);border:1.5px dashed rgba(124,58,237,.35);
  border-radius:14px;padding:9px 14px;font-weight:800;font-size:.9rem;color:#2E1065}
.hz-ejemplos{display:flex;flex-direction:column;gap:8px;margin-top:13px}
.hz-ej{display:flex;align-items:center;gap:10px;justify-content:center;background:rgba(255,255,255,.55);
  border-radius:12px;padding:9px 12px;font-weight:800}
.hz-ej small{color:#6B5E96;font-weight:700}
.hz-play{width:36px;height:36px;min-width:36px;border-radius:50%;border:0;background:#7C3AED;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.hz-play svg{width:16px;height:16px}
.hz-btn{margin-top:16px;border:0;border-radius:99px;min-height:50px;padding:12px 28px;cursor:pointer;
  background:linear-gradient(180deg,#8B5CF6,#7C3AED);color:#fff;font-weight:900;font-size:.98rem;
  box-shadow:0 8px 22px rgba(124,58,237,.45)}

/* ── sello de lacre ── */
.hz-sello{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);z-index:6;width:80px;height:80px;min-width:80px;border:0;
  border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 36% 30%,#A855F7 0%,#7C3AED 45%,#5B21B6 80%,#4C1D95 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 3px 6px rgba(255,255,255,.35),inset 0 -5px 10px rgba(0,0,0,.35);
  display:grid;place-items:center;animation:hzSelloLate 2.2s ease-in-out infinite;transition:transform .25s,opacity .3s}
.hz-sello::before{content:'';position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(255,255,255,.4)}
.hz-sello span{font-size:1.7rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
@keyframes hzSelloLate{50%{transform:translate(-50%,-50%) scale(1.07)}}
#hechizoOv.abierto .hz-sello{transform:translate(-50%,-50%) scale(1.6) rotate(18deg);opacity:0;pointer-events:none;animation:none}
.hz-hint{margin-top:50px;color:#D8CFF5;font-weight:800;letter-spacing:.02em;animation:hzHintLate 1.8s ease-in-out infinite;text-align:center}
@keyframes hzHintLate{50%{opacity:.55}}
#hechizoOv.abierto .hz-hint{display:none}

/* rollo cerrado: cilindro de papel enrollado entre las varas */
.hz-canto{position:relative;z-index:1;height:38px;margin:-7px 10px;border-radius:0 0 9px 9px;
  background:repeating-linear-gradient(180deg,#F7ECD2 0 6px,#E6D4A8 6px 8px,#F1E3C2 8px 12px);
  box-shadow:inset 0 6px 8px rgba(60,40,10,.25),inset 0 -6px 8px rgba(60,40,10,.3);
  border-left:2px solid #E4D3AC;border-right:2px solid #E4D3AC}
#hechizoOv.abierto .hz-canto{display:none}

/* prepy maga, esquina inferior */
.hz-prepy{position:absolute;right:clamp(4px,4vw,44px);bottom:0;width:clamp(84px,16vw,130px);z-index:2;pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.4));animation:hzPrepyAsoma 1s cubic-bezier(.2,.9,.3,1.2) both .4s}
@keyframes hzPrepyAsoma{from{transform:translateY(70%)}}
.hz-prepy img{width:100%;display:block}
.hz-gorro{position:absolute;top:-9%;left:19%;width:56%;transform:rotate(-8deg);z-index:2}

@media (min-width:768px){
  .hz-titulo{font-size:1.9rem}
  .hz-prepy{width:150px}
}
@media (prefers-reduced-motion:reduce){
  .hz-runa,.hz-hada,.hz-sello,.hz-hint,.hz-titulo,.hz-prepy{animation:none}
}