/* HUB · 06-razones (#por-que) — «el anillo de lingotes».
   Base (sin JS · ?reduce · gama baja): rejilla de 5 (escritorio) o lista apilada (celular), sin goteo ni giro.
   .rz--ring (≥900px, JS): anillo CSS 3D de 5 lingotes, titular sticky a la izquierda con índice y controles.
   .rz--mob  (<900px, JS): carrusel plano con la receta única (SPEC §6.2). */
#por-que{overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--ink) 0%,#06101A 40%,var(--ink) 100%)}
#por-que p,#por-que h3,#por-que ul,#por-que ol{margin:0}
#por-que ul,#por-que ol{list-style:none;padding:0}
#por-que .rz-sprite{position:absolute;width:0;height:0;overflow:hidden}
#por-que .rz-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 46% at 66% 46%,rgba(216,166,70,.11) 0%,rgba(216,166,70,0) 70%),
             radial-gradient(70% 40% at 66% 104%,rgba(16,39,58,.6) 0%,rgba(5,9,15,0) 70%)}

/* ---------- Cabecera ---------- */
#por-que .rz-head{margin-bottom:clamp(36px,5vw,64px)}
#por-que .rz-title{margin-top:20px;max-width:11ch;text-wrap:balance}

/* ---------- Lingote (tarjeta) — estilo común a todos los modos ---------- */
#por-que .rz-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;
  padding:clamp(24px,2.2vw,32px);border-radius:22px;border:1px solid var(--line);color:var(--cream);
  background:linear-gradient(162deg,#182C40 0%,#0A1622 48%,#060C14 100%);
  box-shadow:inset 0 1px 0 rgba(243,234,219,.08),0 30px 60px -40px rgba(0,0,0,.9)}
#por-que .rz-card:before{content:"";position:absolute;inset:7px;border-radius:16px;pointer-events:none;
  border:1px solid rgba(216,166,70,.12)}
#por-que .rz-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:18px}
#por-que .rz-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--hair);
  background:radial-gradient(circle at 50% 30%,rgba(244,213,138,.12),rgba(244,213,138,0) 70%)}
#por-que .rz-ico svg{width:26px;height:26px;fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#por-que .rz-n{font-size:clamp(2.6rem,3.6vw,3.4rem);line-height:.9;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85}
#por-que .rz-card__t{font:500 clamp(1.4rem,1.9vw,1.75rem)/1.12 var(--serif);letter-spacing:-.01em;color:var(--cream);text-wrap:balance}
#por-que .rz-card__p{font-size:max(15px,var(--fs-body));line-height:1.55}
@media (min-width:900px){#por-que:not(.rz--ring) .rz-card__t{min-height:2.24em}}
/* Lingotes traseros del anillo: el texto se apaga (sin «texto fantasma» entre la frontal y las laterales) */
#por-que .rz-ico,#por-que .rz-n,#por-que .rz-card__t,#por-que .rz-card__p{opacity:var(--tx,1)}
#por-que .rz-n{opacity:calc(var(--tx,1) * .85)}

/* Canto superior de oro (estático en la base; destila solo en la frontal con giro) */
#por-que .rz-drip{position:absolute;left:18px;right:18px;top:-1px;height:0;pointer-events:none;z-index:2}
#por-que .rz-drip__band{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(216,166,70,0),var(--gold) 18%,var(--gold-2) 50%,var(--gold) 82%,rgba(216,166,70,0));opacity:.55}
#por-que .rz-drop{display:none}

/* ---------- BASE: rejilla de 5 / lista apilada ---------- */
#por-que .rz-ring{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.4vw,22px)}
@media (max-width:1180px){#por-que .rz-ring{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899.98px){
  #por-que .rz-ring{grid-template-columns:minmax(0,1fr);gap:12px}
  #por-que:not(.rz--mob) .rz-card{min-height:0;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:6px;padding:22px 20px}
  #por-que:not(.rz--mob) .rz-card__top{grid-row:1 / span 2;flex-direction:column;align-items:center;padding:0;margin:0;gap:10px}
  #por-que:not(.rz--mob) .rz-n{font-size:1.15rem;opacity:1}
  #por-que:not(.rz--mob) .rz-card__t{font-size:1.3rem}
}
#por-que .rz-hint{display:none}

/* ---------- Controles (comunes) ---------- */
#por-que .rz-ctl:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
#por-que .rz-dots{display:flex;margin-left:-12px}
#por-que .rz-dot{width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
#por-que .rz-dot i{position:relative;display:block;overflow:hidden;width:8px;height:8px;border-radius:99px;background:var(--line-2);transition:width .5s var(--ease),background-color .4s}
#por-que .rz-dot.is-active i{width:28px;background:rgba(244,213,138,.25)}
#por-que .rz-dot b{position:absolute;inset:0;background:var(--gold-grad);transform-origin:left;transform:scaleX(0)}
#por-que .rz-dot.is-active b{transform:scaleX(var(--t,1))}
#por-que.is-paused .rz-dot.is-active b{transform:scaleX(1)}
#por-que .rz-count{font-size:.95rem;color:var(--mute);white-space:nowrap;letter-spacing:.02em}
#por-que .rz-count b{color:var(--gold-2);font-weight:800}
#por-que .rz-count i{font-style:normal;opacity:.6}
#por-que .rz-arrows{display:flex;gap:8px;margin-left:auto}
#por-que .rz-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,9,15,.5);color:var(--cream);
  display:grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s,background-color .3s;-webkit-tap-highlight-color:transparent}
#por-que .rz-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#por-que .rz-btn:hover{border-color:var(--gold);color:var(--gold-2)}
#por-que .rz-btn--pause .rz-btn__pl{display:none}
#por-que .rz-btn--pause[aria-pressed=true] .rz-btn__pa{display:none}
#por-que .rz-btn--pause[aria-pressed=true] .rz-btn__pl{display:block;fill:currentColor;stroke:none}
#por-que .rz-btn--pause[aria-pressed=true]{border-color:var(--hair);color:var(--gold-2)}

/* ---------- Goteo de oro (solo la frontal, solo con giro/carrusel y en pantalla) ---------- */
#por-que.rz--ring .rz-drip__band,#por-que.rz--mob .rz-drip__band{height:3px;opacity:.28;transition:opacity .8s var(--ease),height .8s var(--ease);
  background-image:url(../../../assets/img/gen/hub-oro-liquido-768.webp),linear-gradient(90deg,#C9A050,#F4D58A 50%,#C9A050);
  background-size:260px auto,100% 100%;background-position:30% 50%,0 0;background-repeat:repeat-x,no-repeat;background-blend-mode:screen;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#por-que.rz--ring .rz-card.is-front .rz-drip__band,#por-que.rz--mob .rz-card.is-front .rz-drip__band{opacity:1;height:5px;animation:rz-flow 9s linear infinite;
  box-shadow:0 0 14px rgba(244,213,138,.45)}
#por-que.rz--ring .rz-drip__band,#por-que.rz--mob .rz-drip__band{overflow:hidden}
#por-que.rz--ring .rz-drip__band:after,#por-que.rz--mob .rz-drip__band:after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;opacity:0;
  background:linear-gradient(90deg,rgba(255,246,220,0),rgba(255,246,220,.95) 50%,rgba(255,246,220,0));transform:translateX(-110%)}
#por-que.rz--ring .rz-card.is-front .rz-drip__band:after,#por-que.rz--mob .rz-card.is-front .rz-drip__band:after{opacity:1;animation:rz-glint 3.6s cubic-bezier(.45,0,.25,1) infinite}
@keyframes rz-glint{0%{transform:translateX(-110%)}55%,100%{transform:translateX(360%)}}
#por-que:not(.is-live) .rz-drip__band:after{animation-play-state:paused!important}
#por-que.rz--ring .rz-drop,#por-que.rz--mob .rz-drop{display:block;position:absolute;top:3px;width:12px;height:20px;margin-left:-6px;
  transform-origin:50% 0;transform:scaleY(.15);opacity:0;
  background-image:url(../../../assets/img/gen/hub-oro-liquido-768.webp),linear-gradient(180deg,#F7E2A8 0%,#E0B661 45%,#A77927 100%);
  background-size:120px auto,100% 100%;background-position:60% 30%,0 0;background-blend-mode:screen;
  -webkit-mask:var(--rz-gota) center/100% 100% no-repeat;mask:var(--rz-gota) center/100% 100% no-repeat}
#por-que{--rz-gota:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2.2 0h5.6C6.6 1 6.1 2.4 6.3 3.8 8.6 5.6 9.9 7.6 9.9 9.4A4.9 4.6 0 0 1 .1 9.4C.1 7.6 1.4 5.6 3.7 3.8 3.9 2.4 3.4 1 2.2 0Z'/%3E%3C/svg%3E")}
/* La perla: nace en la punta, se suelta y se desvanece antes de 40px */
#por-que .rz-drip__pearl{display:none}
#por-que.rz--ring .rz-drip__pearl,#por-que.rz--mob .rz-drip__pearl{display:block;position:absolute;top:10px;width:5px;height:6px;margin-left:-2.5px;
  border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;opacity:0;
  background:radial-gradient(circle at 40% 35%,#FFF1C8 0%,#F4D58A 40%,#C9A050 85%);box-shadow:0 0 6px rgba(244,213,138,.5)}
#por-que .rz-drop--1,#por-que .rz-drip__pearl--1{left:37%}
#por-que .rz-drop--2{left:46%;width:7px;height:11px;margin-left:-3.5px}
#por-que .rz-drop--3,#por-que .rz-drip__pearl--3{left:60%}
#por-que .rz-drop--3{width:10px;height:16px;margin-left:-5px}
#por-que .rz-drip__pearl--1{top:21px}
#por-que .rz-drip__pearl--3{top:17px}
@media (min-width:900px){
  #por-que.rz--ring .rz-drop--1{width:13px;height:22px;margin-left:-6.5px}
  #por-que.rz--ring .rz-drop--3{width:11px;height:18px;margin-left:-5.5px}
  #por-que.rz--ring .rz-drip__pearl--1{top:24px}
  #por-que.rz--ring .rz-drip__pearl--3{top:20px}
}
#por-que.rz--ring .rz-card.is-front .rz-drop,#por-que.rz--mob .rz-card.is-front .rz-drop{animation:rz-drip 7.2s cubic-bezier(.45,0,.25,1) infinite}
#por-que.rz--ring .rz-card.is-front .rz-drip__pearl,#por-que.rz--mob .rz-card.is-front .rz-drip__pearl{animation:rz-fall 7.2s cubic-bezier(.5,0,.75,.6) infinite}
#por-que .rz-card.is-front .rz-drop--2{animation-delay:-2.6s}
#por-que .rz-card.is-front .rz-drop--3,#por-que .rz-card.is-front .rz-drip__pearl--3{animation-delay:-4.8s}
#por-que:not(.is-live) .rz-drip__band,#por-que:not(.is-live) .rz-drop,#por-que:not(.is-live) .rz-drip__pearl{animation-play-state:paused!important}
@keyframes rz-flow{to{background-position:290% 50%,0 0}}
@keyframes rz-drip{
  0%{transform:scaleY(.15);opacity:0;background-position:60% 20%,0 0}
  10%{opacity:1}
  50%{transform:scaleY(.8);opacity:1}
  60%{transform:scaleY(1);opacity:1}
  66%{transform:scale(.86,1.22);opacity:1}
  72%{transform:scaleY(.45);opacity:1}
  90%{transform:scaleY(.25);opacity:.7}
  100%{transform:scaleY(.15);opacity:0;background-position:60% 60%,0 0}}
@keyframes rz-fall{
  0%,66%{opacity:0;transform:translateY(0) scale(.7)}
  70%{opacity:1;transform:translateY(2px) scale(1)}
  84%{opacity:0;transform:translateY(26px) scale(.8,1.1)}
  100%{opacity:0;transform:translateY(26px)}}

/* =====================================================================
   ESCRITORIO — el anillo (.rz--ring, ≥900px)
   ===================================================================== */
#por-que.rz--ring{padding-block:clamp(64px,9vh,112px)}
#por-que.rz--ring .rz-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
#por-que.rz--ring .rz-side{position:sticky;top:calc(var(--nav-h) + 4vh)}
#por-que.rz--ring .rz-head{margin-bottom:clamp(28px,4vh,44px)}
#por-que.rz--ring .rz-index:not([hidden]){display:grid;border-top:1px solid var(--line);margin-bottom:clamp(22px,3vh,34px)}
#por-que .rz-index__b{position:relative;display:flex;align-items:center;gap:18px;width:100%;min-height:52px;padding:10px 0;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--cream-2);text-align:left;cursor:pointer;transition:color .4s}
#por-que .rz-index__b .cifra{width:2.2em;font-size:.86rem;color:var(--mute);transition:color .4s}
#por-que .rz-index__b b{font:500 clamp(1.02rem,1.25vw,1.18rem)/1.25 var(--serif);letter-spacing:-.005em}
#por-que .rz-index__b i{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:none}
#por-que .rz-index__b:hover{color:var(--cream)}
#por-que .rz-index__b.is-active{color:var(--cream)}
#por-que .rz-index__b.is-active .cifra{color:var(--gold-2)}
#por-que .rz-index__b.is-active i{transform:scaleX(1);transition:transform .9s var(--ease)}
#por-que.rz--ring .rz-dots{display:none}
#por-que.rz--ring .rz-arrows{margin-left:0;order:-1}
#por-que.rz--ring .rz-count{order:-1;margin-right:auto;font-size:1.05rem}

#por-que.rz--ring .rz-stage{position:relative;height:clamp(520px,70vh,660px);perspective:1500px;perspective-origin:50% 38%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
#por-que.rz--ring .rz-stage.is-drag{cursor:grabbing}
#por-que.rz--ring .rz-stage:focus,#por-que.rz--ring .rz-stage:focus-visible{outline:none}
#por-que.rz--ring .rz-stage:focus-visible .rz-card.is-front{outline:2px solid var(--gold-2);outline-offset:6px}
#por-que.rz--ring .rz-stage{scroll-margin-top:calc(var(--nav-h) + 24px)}
@media (min-width:1366px){#por-que.rz--ring .rz-stage{margin-right:70px}}
#por-que.rz--ring .rz-stage:before{content:"";position:absolute;left:8%;right:8%;bottom:6%;height:26%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(216,166,70,.15) 0%,rgba(216,166,70,.07) 45%,rgba(216,166,70,0) 78%)}
#por-que .rz-orbit{display:none}
#por-que.rz--ring .rz-ring,#por-que.rz--ring .rz-orbit{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateX(-8deg);pointer-events:none}
#por-que.rz--ring .rz-ring>*{pointer-events:auto}
#por-que.rz--ring .rz-orbit i{position:absolute;left:50%;top:46%;width:calc(var(--R,360px) * 2.1);height:calc(var(--R,360px) * 2.1);
  margin:calc(var(--R,360px) * -1.05) 0 0 calc(var(--R,360px) * -1.05);border-radius:50%;border:1px solid rgba(216,166,70,.34);
  background:radial-gradient(closest-side,rgba(216,166,70,.12),rgba(216,166,70,.03) 70%,rgba(216,166,70,0));
  box-shadow:0 0 40px rgba(216,166,70,.12),inset 0 0 60px rgba(216,166,70,.08);
  transform:translate3d(0,calc(var(--ch,400px) / 2 + 26px),calc(var(--R,360px) * -1)) rotateX(90deg)}
#por-que.rz--ring .rz-card__top{margin-bottom:auto}
#por-que.rz--ring .rz-card{position:absolute;left:50%;top:46%;width:var(--cw,300px);height:var(--ch,400px);min-height:0;
  margin:calc(var(--ch,400px) / -2) 0 0 calc(var(--cw,300px) / -2);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity;cursor:pointer;
  transition:border-color .6s var(--ease),box-shadow .8s var(--ease)}
#por-que.rz--ring .rz-card:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:rgba(5,9,15,.62);opacity:calc(1 - var(--f,1));transition:opacity .2s}
#por-que.rz--ring .rz-card.is-front,#por-que.rz--mob .rz-card.is-front{border-color:rgba(216,166,70,.55);cursor:default;
  box-shadow:inset 0 1px 0 rgba(244,213,138,.18),0 40px 90px -40px rgba(216,166,70,.38),0 30px 60px -40px rgba(0,0,0,.9)}
#por-que.rz--ring .rz-card.is-front:before,#por-que.rz--mob .rz-card.is-front:before{border-color:rgba(216,166,70,.26)}
#por-que.rz--ring .rz-card__t{font-size:clamp(1.5rem,1.9vw,1.85rem)}
#por-que.rz--ring .rz-title{font-size:clamp(2.6rem,4.4vw,4.6rem);max-width:12ch}
#por-que.rz--ring .rz-index__b{min-height:48px}
#por-que.rz--ring .rz-hint{display:flex;position:absolute;left:50%;bottom:0;transform:translateX(-50%);align-items:center;gap:8px;
  font:600 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);transition:opacity .8s}
#por-que .rz-hint svg{width:16px;height:16px;fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#por-que.rz--ring .rz-hint__m{display:none}
#por-que .rz-hint.is-off{opacity:0}

/* =====================================================================
   CELULAR — carrusel plano (.rz--mob, <900px) · receta única SPEC §6.2
   ===================================================================== */
#por-que.rz--mob .rz-side{display:contents}
#por-que.rz--mob .rz-grid{display:flex;flex-direction:column}
#por-que.rz--mob .rz-head{order:1;margin-bottom:28px}
#por-que.rz--mob .rz-stage{order:2;position:relative;margin-inline:calc(var(--gut) * -1)}
#por-que.rz--mob .rz-ctl{order:3;margin-top:14px}
#por-que.rz--mob .rz-index{display:none}
#por-que.rz--mob .rz-ring{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:18px var(--gut) 26px;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
#por-que.rz--mob .rz-ring::-webkit-scrollbar{display:none}
#por-que.rz--mob .rz-card{flex:0 0 min(78vw,380px);min-height:0;justify-content:flex-start;scroll-snap-align:start;scroll-snap-stop:always;
  border-color:rgba(216,166,70,.3);transition:border-color .6s var(--ease),box-shadow .8s var(--ease),opacity .6s}
#por-que.rz--mob .rz-card:not(.is-front){opacity:.78}
#por-que.rz--mob .rz-card__top{padding-bottom:18px;margin-bottom:4px;border-bottom:1px solid rgba(216,166,70,.18)}
#por-que.rz--mob .rz-ring:after{content:"";flex:0 0 max(1px,calc(100vw - min(78vw,380px) - 12px - var(--gut) * 2))}
#por-que.rz--mob .rz-hint{display:inline-flex;position:absolute;right:var(--gut);top:-12px;z-index:3;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;background:rgba(5,9,15,.78);border:1px solid var(--hair);
  font:600 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);
  opacity:0;transform:translateX(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
#por-que.rz--mob .rz-hint.is-on{opacity:1;transform:none}
#por-que.rz--mob .rz-hint__d{display:none}
@media (max-width:380px){
  #por-que.rz--mob{padding-top:44px}
  #por-que.rz--mob .rz-head{margin-bottom:26px}
  #por-que.rz--mob .rz-title{margin-top:12px}
  #por-que.rz--mob .rz-ring{padding-top:22px;padding-bottom:16px}
  #por-que.rz--mob .rz-hint{top:-18px}
  #por-que.rz--mob .rz-card{padding:22px 20px;gap:10px}
  #por-que.rz--mob .rz-card__top{padding-bottom:14px}
  #por-que.rz--mob .rz-ico{width:48px;height:48px}
  #por-que.rz--mob .rz-ctl{margin-top:8px}
}
@media (max-width:420px){
  #por-que.rz--mob .rz-ctl{column-gap:8px}
  #por-que.rz--mob .rz-arrows{width:100%;margin-left:0;justify-content:flex-end}
  #por-que.rz--mob .rz-arrows [data-rz-pause]{margin-right:auto}
}
@media (max-width:899.98px){#por-que .rz-title{max-width:none}}

/* Celular: sin hueco vacío bajo los controles antes de «Preguntas» */
@media (max-width:767px){#por-que,#por-que.rz--mob{padding-bottom:32px}}