/* ============ GUÍA DE USO DE UN PACK ============ */
.ic{display:block;width:100%;height:auto;overflow:visible}
.gd{border:0;padding:0;background:transparent;color:var(--ink);width:min(66rem,calc(100vw - 1.6rem));max-width:none;max-height:none;margin:auto;overflow:visible}
.gd::backdrop{background:rgba(13,6,21,.86)}
.gd__card{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);border-radius:34px;background:var(--silver);box-shadow:0 44px 100px -30px rgba(0,0,0,.85);overflow:hidden;max-height:calc(100dvh - 1.6rem)}
.gd__x{position:absolute;top:.9rem;right:.9rem;z-index:6;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--silver);transition:transform .4s var(--ease),background .3s}
.gd__x:hover,.gd__x:focus-visible{transform:rotate(90deg) scale(1.08);background:var(--violet-d)}
.gd__stage{position:relative;display:grid;align-content:end;justify-items:center;padding:3.6rem 1rem 0;background:radial-gradient(80% 70% at 50% 95%,#8b3ddb 0,#4a1a78 46%,#1a0d2a 100%);min-height:30rem}
.gd__glow{position:absolute;left:10%;right:10%;bottom:0;height:55%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,185,79,.22),transparent 72%)}
.gd__bubble{position:relative;z-index:2;width:100%;max-width:21rem;min-height:6.4rem;margin-bottom:1.1rem;padding:1rem 1.2rem 1.1rem;border-radius:26px 26px 26px 8px;background:var(--silver);color:var(--ink);font:italic 400 clamp(1.3rem,2vw,1.6rem)/1.15 var(--serif);box-shadow:0 22px 44px -20px rgba(0,0,0,.7)}
.gd__bubble::after{content:"";position:absolute;right:3rem;bottom:-14px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--silver)}
.gd__cat{position:relative;z-index:1;width:min(84%,16rem);transform-origin:50% 100%}
.gd__cat .gato{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55))}
.gd__panel{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:.9rem;padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,2.4vw,1.8rem);overflow:auto;min-width:0}
.gd__k{color:var(--violet-d)}
.gd__t{font:700 clamp(1.9rem,3.6vw,3.1rem)/.92 var(--disp);text-transform:uppercase;margin:0;padding-right:2.6rem}
.gd__dots{display:flex;gap:.3rem;list-style:none;margin:.2rem 0 .4rem;padding:0}
.gd__dots li{flex:1}
.gd__dots button{display:block;position:relative;width:100%;height:1rem;padding:0;background:none;border:0;cursor:pointer}
.gd__dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;border-radius:9px;background:#cdbfe0;transition:background .3s}
.gd__dots button.is-done::before{background:var(--violet)}.gd__dots button.is-on::before{background:var(--violet-d);height:7px;margin-top:-3.5px}
.gd__body{min-height:12rem}
.gd__lede{font:italic 400 1.3rem/1.3 var(--serif);margin:0 0 1rem}
.gd__items{display:grid;gap:.6rem}
.gd__item{display:grid;grid-template-columns:5rem 1fr;gap:.9rem;align-items:center;padding:.6rem .8rem .6rem .6rem;border-radius:20px;background:#fff}
.gd__ic{background:radial-gradient(closest-side,#f3ecfb,#e1d2f5);border-radius:16px;padding:.35rem}
.gd__it{display:grid;gap:.1rem}.gd__it strong{font:700 1.02rem/1.2 var(--sans)}.gd__it span{font:400 .86rem/1.35 var(--sans);color:#4a3a5a}.gd__it em{font:italic 400 1.02rem/1.25 var(--serif);color:var(--violet-d)}
.gd__row{display:grid;grid-template-columns:minmax(7rem,9.5rem) 1fr;gap:1.3rem;align-items:center}
.gd__vis{display:grid;justify-items:center;align-content:center;gap:.3rem;background:radial-gradient(closest-side,#f3ecfb,#e1d2f5);border-radius:26px;padding:.9rem .8rem}
.gd__vn{margin:0;font:700 .85rem/1.2 var(--sans);text-align:center}
.gd__vis--min{aspect-ratio:1;gap:0}.gd__big{font:700 clamp(4rem,7vw,5.6rem)/.9 var(--disp);color:var(--violet-d)}.gd__sm{font:600 .9rem var(--sans);text-transform:uppercase;letter-spacing:.12em}
.gd__txt p{margin:0 0 .7rem;font:400 1.08rem/1.55 var(--sans)}
.gd__use{font:italic 400 1.15rem/1.3 var(--serif)!important;color:var(--violet-d)}
.gd__hint{min-height:1.2rem;margin:.8rem 0 0;color:var(--violet-d)}
.gd__dl3{margin-top:.4rem}
.gd__nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding-top:.6rem;border-top:1px solid #cdbfe0}
.gd__nav .link-btn{color:var(--ink);min-height:44px}
.gd .btn--ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}.gd .btn--ghost:hover{background:var(--lav)}
@media (prefers-reduced-motion:no-preference){
.ic-flame{animation:icFlame 1.1s ease-in-out infinite alternate}
@keyframes icFlame{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(1.08,1.14) rotate(2.5deg)}}
.ic-smoke{animation:icSmoke 3.2s ease-in-out infinite}
@keyframes icSmoke{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-6px);opacity:.4}}
.ic-spark{animation:gtTw 2.6s ease-in-out infinite}.ic-spark--b{animation-delay:1.1s}
.gd[open]{animation:rgPopIn .75s cubic-bezier(.34,1.56,.64,1) both}
.gd[open]::backdrop{animation:rgPopBd .5s ease both}
.gd[open] .gato{animation:gtPop 1s cubic-bezier(.34,1.56,.64,1) .3s both;transform-origin:50% 100%}
.gd .g-pupil--t{animation:none!important;transition:transform .18s ease-out}
.gd__cat.is-nod{animation:gdNod .55s ease-out}
@keyframes gdNod{0%{transform:none}35%{transform:translateY(-12px) scale(.98,1.04)}70%{transform:translateY(0) scale(1.03,.96)}100%{transform:none}}
.gd__in>*{animation:rgIn .55s var(--ease) both}.gd__in>*:nth-child(2){animation-delay:.08s}.gd__in>*:nth-child(3){animation-delay:.16s}
.gd__item{animation:rgOpt .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i)*.1s + .15s)}
.gd__vis,.gd__ic{animation:icPop .7s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes icPop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
.gd.is-happy .gato{animation:gtJump .62s ease-in-out 5}
.gd.is-happy .g-eyei{animation:gtHappy .35s ease-out forwards}
.gd.is-happy .g-arm{animation:gtWaveFast .36s ease-in-out infinite}
}
@media (max-width:820px){
.gd__card{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto;border-radius:28px}
.gd__stage{grid-template-columns:auto 1fr;justify-items:stretch;align-items:end;gap:.2rem .8rem;padding:3.2rem 1rem 0;min-height:0}
.gd__cat{grid-column:1;grid-row:1;width:6.4rem}
.gd__bubble{grid-column:2;grid-row:1;margin:0 0 .6rem;min-height:4.6rem;font-size:1.2rem;max-width:none;border-radius:22px 22px 22px 8px}
.gd__bubble::after{right:auto;left:-12px;bottom:.9rem;border:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:14px solid var(--silver)}
.gd__glow{display:none}
.gd__panel{overflow:visible}
.gd__row{grid-template-columns:6.4rem 1fr;gap:.9rem}
.gd__item{grid-template-columns:4.2rem 1fr}
.gd__t{padding-right:0}
}
@media (min-width:821px){.gd__body{min-height:20.5rem}.gd__card{min-height:35rem}}
@media (max-width:820px){
.gd{width:100%;max-width:none;margin:auto 0 0}
.gd__card{max-height:92dvh;border-radius:28px 28px 0 0;overflow-y:auto}
}
@media (max-width:820px){
.gd__stage{position:sticky;top:0;z-index:4}
.gd__nav{position:sticky;bottom:0;z-index:3;background:var(--silver);padding:.7rem 0 .3rem;margin-top:.4rem}
}
@media (max-width:820px){.gd__card{display:block}.gd__stage{padding-top:3.2rem}}

/* ============ Ritualic Guías: tarjeta bajo «Añadir al carrito» ============ */
.rg-box{position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;margin:1.4rem 0 0;padding:1.2rem 1.4rem;border-radius:28px;border:1px solid var(--line,rgba(200,166,245,.3));background:linear-gradient(135deg,rgba(139,61,219,.26),rgba(200,166,245,.06));overflow:hidden;color:inherit}
.rg-sp{position:absolute;z-index:-1;color:var(--amber,#d9a45b);pointer-events:none}.rg-sp svg{width:100%;height:100%}.rg-sp--a{right:1.4rem;top:.9rem;width:18px;height:18px}.rg-sp--b{right:4.6rem;bottom:1rem;width:11px;height:11px;color:var(--lav,#c8a6f5)}
.rg-cover{display:block;flex:none;width:clamp(6.6rem,20vw,8.6rem);border-radius:8px;transform:rotate(-4deg);box-shadow:0 24px 36px -16px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.rg-cover img{display:block;width:100%;height:auto;border-radius:8px}
.rg-cover:hover,.rg-cover:focus-visible{transform:rotate(0) translateY(-6px) scale(1.04);box-shadow:0 34px 44px -16px rgba(139,61,219,.7),0 0 0 1px rgba(255,255,255,.18);outline:none}
.rg-info{min-width:0}
.rg-k{margin:0 0 .35rem;font:700 .74rem var(--sans,inherit);letter-spacing:.2em;text-transform:uppercase;color:var(--lav,#c8a6f5)}
.rg-t{margin:0;font:700 clamp(1.5rem,3vw,2rem)/1 var(--disp,inherit);text-transform:uppercase;letter-spacing:.01em}
.rg-d{margin:.55rem 0 0;font:400 .95rem/1.5 var(--sans,inherit);opacity:.85}
.rg-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.75rem 0 0;padding:0}
.rg-chips li{padding:.18rem .65rem;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(200,166,245,.3);font:700 .74rem var(--sans,inherit)}
.rg-act{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.rg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.3rem;border-radius:99px;border:1.5px solid transparent;font:700 .96rem var(--sans,inherit);text-decoration:none;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .3s}
.rg-btn:hover,.rg-btn:focus-visible{transform:translateY(-3px)}
.rg-btn--fill{background:var(--lav,#c8a6f5);color:var(--ink,#100817)}.rg-btn--fill:hover{box-shadow:0 14px 26px -12px rgba(200,166,245,.7)}
.rg-btn--ghost{background:transparent;border-color:var(--lav,#c8a6f5);color:var(--silver,#e6dff0)}.rg-btn--ghost:hover{background:rgba(200,166,245,.16)}
.rg-btn--ink{background:var(--lav,#c8a6f5);color:var(--ink,#100817)}
.gd .rg-btn--ghost{border-color:var(--ink,#100817);color:var(--ink,#100817)}.gd .rg-btn--ghost:hover{background:var(--lav,#c8a6f5)}
@keyframes rgPopIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes rgPopBd{from{opacity:0}to{opacity:1}}
@keyframes rgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rgOpt{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
.rg-cover{animation:rgFloat 5s ease-in-out infinite}
@keyframes rgFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
.rg-sp{animation:gtTw 3s ease-in-out infinite}.rg-sp--b{animation-delay:1.2s}
}
@media (max-width:520px){.rg-box{grid-template-columns:1fr;justify-items:start}.rg-cover{width:7.6rem}.rg-btn{flex:1 1 100%}}

/* v1.1.0 · en ordenador, el listado hace scroll y los botones («Anterior», PDF, «Siguiente») quedan siempre a la vista */
@media (min-width:821px){
  .gd__card{grid-template-rows:minmax(0,1fr)}
  .gd__panel{min-height:0;overflow:hidden;grid-template-rows:auto auto auto minmax(0,1fr) auto}
  .gd__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9a3d6 transparent;padding-right:.4rem;margin-right:-.4rem}
}