/* ==========================================================================
   sotowismify · 80-resources (v2) — ruleta 3D de DISQUETES con la cámara dentro del cilindro
   - .rs-stage = perspectiva (sin preserve-3d: aquí sí puede haber overflow y máscara).
   - .rs-tilt  = eje del cilindro (preserve-3d): NUNCA opacity/filter/overflow aquí.
   - .rs-card  = hoja en la pared interior (transform por JS); opacidad por tarjeta. Es plana: el giro del
     disquete es OTRO contexto 3D dentro (.fd-wrap con perspectiva > .fd > .fd-flip, ver «Disquete»).
   - Disquete de 3,5" (17-oct-2026, Iván): cuerpo de plástico (negro mate, grafito, plata; lima solo el primer
     recurso publicado) con chaflán, muescas y agujeros (máscara SVG), obturador de metal cepillado con ventana
     (se abre un poco al pasar el ratón), etiqueta de papel con el recurso (sello lima) o «EMPTY ?» (sello gris).
     Hover / foco / toque = da la vuelta (GSAP) y la cara B muestra la vista previa (.fd-shot) + título + botón.
   - .fd-shot (vista previa) se comparte con el modal (.rsm) y el vuelo FLIP (.rsm-fly): escala con --cw.
   ========================================================================== */
.s-resources { padding-bottom: calc(var(--sec) * 0.55); }
.s-resources .rs-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.s-resources .rs-head-main { display: grid; gap: 18px; justify-items: start; }
.s-resources .rs-title { font-size: clamp(36px, 5.2vw, 76px); max-width: 13ch; }
.s-resources .rs-lead { justify-self: end; max-width: 46ch; }

/* ---------- Escenario ---------- */
.s-resources .rs-ring { position: relative; margin-top: clamp(30px, 4.4vw, 60px); }
.s-resources .rs-from-row { position: relative; z-index: 4; display: flex; justify-content: center; padding: 0 var(--gutter); margin-bottom: -26px; pointer-events: none; }
.s-resources .rs-from {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  min-height: 46px; padding: 6px 20px 6px 7px; border-radius: var(--pill);
  font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; color: var(--fg-1);
  pointer-events: auto; transition: border-color 0.4s ease, color 0.4s ease;
}
.s-resources .rs-from-t { text-wrap: balance; }
.s-resources .rs-from-ico { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--inv-bg); box-shadow: 0 6px 16px rgba(60, 50, 35, 0.22); }
.s-resources .rs-from-ico::before {
  content: ''; position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -3px;
  border-left: 9px solid var(--inv-fg); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.s-resources .rs-from-ico::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(20, 24, 31, 0.4); opacity: 0; }
/* Llega desde YouTube (?ref=yt / utm_source=youtube): la píldora se enciende (sin color) */
.s-resources .rs-from.is-yt { color: var(--fg); border-color: rgba(15, 20, 30, 0.3); }
.s-resources .rs-from.is-yt .rs-from-ico::after { animation: rs-pulse 2.4s var(--ease-out) infinite; }
@keyframes rs-pulse { 0% { opacity: 0.75; scale: 0.82; } 100% { opacity: 0; scale: 1.5; } }

.s-resources .rs-stage {
  --cw: 220px;
  position: relative; width: 100%; height: var(--sh, clamp(540px, 72vh, 700px));
  overflow: hidden; perspective: 900px; perspective-origin: 50% 50%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; outline: none;
  cursor: grab !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.s-resources .rs-stage.is-dragging { cursor: grabbing !important; }
.has-cursor .s-resources .rs-stage.is-cursor-zone { cursor: none !important; }
.s-resources .rs-stage:focus-visible::after {
  content: ''; position: absolute; inset: 14px 8%; border-radius: 28px; pointer-events: none;
  border: 1px solid rgba(20, 24, 31, 0.5); box-shadow: inset 0 0 0 3px rgba(20, 24, 31, 0.05);
}
.s-resources .rs-tilt { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.s-resources .rs-proxy { position: absolute; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
.s-resources .rs-empty { position: absolute; left: 50%; top: 50%; translate: -50% -50%; text-align: center; max-width: 34ch; }

/* ---------- Tarjeta = disquete de 3,5" + pie (título y descripción) ---------- */
.s-resources .rs-card {
  position: absolute; left: 0; top: 0; width: var(--cw); transform-origin: 0 0;
  visibility: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
}
.s-resources .rs-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-resources .rs-stage.is-dragging .rs-body { pointer-events: none; }
.s-resources .rs-name {
  margin-top: 20px; max-width: 96%; min-height: 2.5em;
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: opacity 0.45s ease;
}
.s-resources .rs-desc {
  margin-top: 6px; max-width: 94%; height: 3em;
  font-size: 12px; line-height: 1.5; color: var(--fg-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: opacity 0.45s ease;
}
.s-resources .rs-card:not(.is-front) :is(.rs-name, .rs-desc) { opacity: 0.5; }
@media (hover: hover) { .s-resources .rs-card:hover :is(.rs-name, .rs-desc) { opacity: 1; } }

/* ---------- Disquete ----------
   .fd-wrap (zona de hover fija, perspectiva) > .fd (GSAP: elevación + inclinación con el ratón; preserve-3d)
   > .fd-flip (GSAP: rotationY 0 ↔ ±180; preserve-3d) > .fd-a (cara A, el botón) + .fd-b (cara B, rotateY 180).
   Nada de opacity/filter/overflow en .fd ni en .fd-flip (preserve-3d): la sombra, el brillo y los recortes van en
   las caras. Geometría en una rejilla de 90 × 93 (un 3,5" real mide 90 × 94 mm): todo en % o con --cw (ancho). */
.s-resources {
  /* cuerpo con chaflán arriba a la derecha, muescas laterales y los dos agujeros (protección y HD) */
  --fd-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 93' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M2.4 0H86L90 4V6H88.9V9H90V90.6Q90 93 87.6 93H2.4Q0 93 0 90.6V9H1.1V6H0V2.4Q0 0 2.4 0ZM3.2 84.4H7.2V88.6H3.2ZM82.8 84.4H86.8V88.6H82.8Z'/%3E%3C/svg%3E");
  /* la misma silueta vista por detrás (cara B): chaflán arriba a la izquierda */
  --fd-mask-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 93' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M87.6 0H4L0 4V6H1.1V9H0V90.6Q0 93 2.4 93H87.6Q90 93 90 90.6V9H88.9V6H90V2.4Q90 0 87.6 0ZM3.2 84.4H7.2V88.6H3.2ZM82.8 84.4H86.8V88.6H82.8Z'/%3E%3C/svg%3E");
  /* obturador con su ventana (rejilla 50 × 31) */
  --fd-shutter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 31' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H50V29.6Q50 31 48.6 31H1.4Q0 31 0 29.6ZM9.2 5H18.8Q20 5 20 6.2V24.8Q20 26 18.8 26H9.2Q8 26 8 24.8V6.2Q8 5 9.2 5Z'/%3E%3C/svg%3E");
  --fd-metal:
    linear-gradient(97deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.24) 74%, rgba(255, 255, 255, 0) 86%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 1px, rgba(0, 0, 0, 0.045) 1px 2px, rgba(255, 255, 255, 0) 2px 3px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #e2e2e2 0%, #b3b3b3 34%, #c9c9c9 56%, #8c8c8c 100%);
}
.s-resources .fd-wrap {
  --mx: 32%; --my: 18%;
  --fd-body: radial-gradient(130% 95% at 14% 4%, #3a3a3c 0%, #1c1c1e 40%, #0e0e10 100%);
  --fd-emb: rgba(255, 255, 255, 0.2); --fd-emb-sh: rgba(0, 0, 0, 0.75);
  --fd-rec: rgba(0, 0, 0, 0.5); --fd-rim: rgba(255, 255, 255, 0.16);
  --fd-on: #f3f2ee; --fd-on-2: rgba(243, 242, 238, 0.62);
  --fd-cta-bg: #f3f2ee; --fd-cta-fg: #14181f;
  position: relative; width: 100%; aspect-ratio: 90 / 93; perspective: 1100px; perspective-origin: 50% 40%;
}
.s-resources .fd--graphite {
  --fd-body: radial-gradient(130% 95% at 14% 4%, #66666a 0%, #3f3f43 40%, #2a2a2d 100%);
  --fd-emb: rgba(255, 255, 255, 0.24); --fd-rec: rgba(0, 0, 0, 0.42); --fd-rim: rgba(255, 255, 255, 0.2);
}
.s-resources .fd--silver {
  --fd-body: linear-gradient(158deg, #f2f2f2 0%, #cdcdcd 28%, #a9a9a9 58%, #c6c6c6 80%, #9c9c9c 100%);
  --fd-emb: rgba(255, 255, 255, 0.7); --fd-emb-sh: rgba(0, 0, 0, 0.3);
  --fd-rec: rgba(0, 0, 0, 0.3); --fd-rim: rgba(255, 255, 255, 0.7);
  --fd-on: #14181f; --fd-on-2: rgba(20, 24, 31, 0.66);
  --fd-cta-bg: #14181f; --fd-cta-fg: #f3f2ee;
}
.s-resources .fd--lime {
  --fd-body: radial-gradient(130% 95% at 14% 4%, #e8ff8a 0%, #c9fd1c 30%, #c2fc03 52%, #a3d600 100%);
  --fd-emb: rgba(255, 255, 255, 0.55); --fd-emb-sh: rgba(40, 60, 0, 0.45);
  --fd-rec: rgba(16, 28, 0, 0.42); --fd-rim: rgba(255, 255, 255, 0.6);
  --fd-on: #14181f; --fd-on-2: rgba(20, 24, 31, 0.7);
  --fd-cta-bg: #14181f; --fd-cta-fg: #f3f2ee;
}
.s-resources .fd { position: absolute; inset: 0; transform-style: preserve-3d; }
.s-resources .fd-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.s-resources .fd-face {
  position: absolute; inset: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.s-resources .fd-a:focus-visible { outline: none; }
.s-resources .fd-b { transform: rotateY(180deg); pointer-events: none; }
.s-resources .fd-wrap.is-flipped .fd-b { pointer-events: auto; }
.s-resources .fd-wrap.is-flipped .fd-a { pointer-events: none; }
/* sombra (la silueta real recorta: la sombra va en una caja redondeada debajo) */
.s-resources .fd-face::before {
  content: ''; position: absolute; inset: 0.8% 0.6% 0.4%; border-radius: 3.2% / 3.1%; pointer-events: none;
  box-shadow: 0 36px 54px -28px rgba(40, 34, 24, 0.52), 0 14px 24px -14px rgba(40, 34, 24, 0.34), 0 2px 5px -1px rgba(40, 34, 24, 0.24);
}
/* foco de teclado: anillo alrededor del disquete (la cara enfocada gira) */
.s-resources .fd-wrap::after {
  content: ''; position: absolute; inset: -24px -12px -10px; border-radius: 16px; pointer-events: none;
  border: 2px solid var(--fg); opacity: 0; transition: opacity 0.2s ease;
}
.s-resources .fd-wrap:has(.fd-a:focus-visible)::after { opacity: 1; }

/* cuerpo de plástico + brillo fijo + brillo especular que sigue al ratón (los tres con la silueta) */
.s-resources :is(.fd-body, .fd-gloss, .fd-spec, .rs-sheen) {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--fd-mask) 0 0 / 100% 100% no-repeat; mask: var(--fd-mask) 0 0 / 100% 100% no-repeat;
}
.s-resources .fd-b :is(.fd-body, .fd-gloss, .fd-spec) { -webkit-mask-image: var(--fd-mask-b); mask-image: var(--fd-mask-b); }
.s-resources .fd-body {
  background: var(--fd-body);
  box-shadow: inset 0 1px 0 var(--fd-rim), inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(0, 0, 0, 0.3), inset 0 -1.5px 0 rgba(0, 0, 0, 0.35);
}
.s-resources .fd-gloss {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 22%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(330deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 24%);
}
.s-resources .fd-spec {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 18%, rgba(255, 255, 255, 0) 42%);
  opacity: 0; transition: opacity 0.5s ease;
}
.s-resources .fd-wrap.is-hover .fd-spec { opacity: 1; }
.s-resources .rs-sheen {
  z-index: 6;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.26) 50%, transparent 100%) -150% 0 / 45% 100% no-repeat;
}

/* cara A: canal del obturador, disco (se ve al abrirlo), obturador metálico, flecha, HD, agujeros, etiqueta */
.s-resources .fd-rec {
  position: absolute; left: 21.6%; width: 69.6%; top: 0; height: 35.5%; border-radius: 0 0 2.2% 2.2% / 0 0 5% 5%;
  background: var(--fd-rec); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.s-resources .fd-media {
  position: absolute; left: 42.6%; width: 14.6%; top: 4.6%; height: 24.2%; border-radius: 3px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 48%, rgba(255, 255, 255, 0) 66%),
    repeating-radial-gradient(circle at 50% 175%, #2a2a2b 0 1px, #161617 1px 2.6px),
    #18181a;
}
.s-resources .fd-sh { position: absolute; left: 23.3%; width: 55.6%; top: 0; height: 33.9%; filter: drop-shadow(0 1.2px 1.2px rgba(0, 0, 0, 0.5)); }
.s-resources .fd-plate {
  position: absolute; inset: 0; background: var(--fd-metal); box-shadow: inset 0 0 0 0.7px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  -webkit-mask: var(--fd-shutter) 0 0 / 100% 100% no-repeat; mask: var(--fd-shutter) 0 0 / 100% 100% no-repeat;
}
/* bisel de la ventana (se mueve con el obturador) */
.s-resources .fd-win {
  position: absolute; left: 16%; width: 24%; top: 16.1%; height: 67.8%; border-radius: 8% / 5%;
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.7), inset 0 0 0 0.6px rgba(0, 0, 0, 0.55), 0 0.6px 0 rgba(255, 255, 255, 0.5);
}
.s-resources .fd-arrow {
  position: absolute; left: 7%; top: 7.4%; width: 6.2%; height: 5.4%;
  background: var(--fd-emb); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.s-resources .fd-hd {
  /* bajo la flecha, en la parte oscura del cuerpo (fuera del obturador y del chaflán) */
  position: absolute; left: 6.2%; top: 14.6%;
  font-family: var(--font); font-size: calc(var(--cw) * 0.06); font-weight: 900; line-height: 1; letter-spacing: -0.06em;
  color: var(--fd-emb); text-shadow: 0 -1px 0 var(--fd-emb-sh);
}
.s-resources .fd-hole {
  position: absolute; top: 90.75%; width: 4.45%; height: 4.52%; border-radius: 1.5px; pointer-events: none;
  box-shadow: inset 0 0 0 0.7px rgba(0, 0, 0, 0.55), inset 0 1.6px 1.4px rgba(0, 0, 0, 0.45);
}
.s-resources .fd-hole--wp { left: 3.55%; }
.s-resources .fd-hole--hd { left: 92%; }
.s-resources .fd-b .fd-hole--wp { left: 92%; }
.s-resources .fd-b .fd-hole--hd { left: 3.55%; }
/* corredera de protección contra escritura (medio agujero tapado) */
.s-resources .fd-hole--wp::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 0 0 1.5px 1.5px;
  background: #2b2b2d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* hueco de la etiqueta y etiqueta de papel */
.s-resources .fd-lrec {
  position: absolute; left: 9.2%; right: 9.2%; top: 37.6%; bottom: 1.4%; border-radius: 2.2% / 2.6%;
  background: var(--fd-rec); box-shadow: inset 0 1.5px 2.5px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.s-resources .fd-label {
  --ink: #14181f;
  position: absolute; left: 11.1%; right: 11.1%; top: 39.8%; bottom: 3.2%;
  display: flex; flex-direction: column; overflow: hidden;
  padding: calc(var(--cw) * 0.04) calc(var(--cw) * 0.045) calc(var(--cw) * 0.034);
  border-radius: 1.6% / 2%; color: var(--ink); font-family: var(--mono);
  background:
    repeating-linear-gradient(94deg, rgba(20, 24, 31, 0.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(4deg, rgba(20, 24, 31, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fdfcf9 0%, #f4f1ea 100%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.6px rgba(0, 0, 0, 0.32), inset 0 -6px 10px -8px rgba(60, 50, 35, 0.18);
}
.s-resources .fd-lt {
  display: flex; justify-content: space-between; gap: 6px; white-space: nowrap;
  font-size: calc(var(--cw) * 0.031); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: rgba(20, 24, 31, 0.6);
}
.s-resources .fd-lt b { font-weight: 700; color: var(--ink); }
.s-resources .fd-rule { flex: none; height: 0; margin-top: calc(var(--cw) * 0.022); border-top: 1px solid rgba(20, 24, 31, 0.24); }
.s-resources .fd-lm { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(var(--cw) * 0.042); }
.s-resources .fd-seal {
  position: relative; flex: none; display: grid; place-items: center; width: calc(var(--cw) * 0.15); aspect-ratio: 1; border-radius: 50%;
  background: #c2fc03; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 31, 0.28), 0 0 0 calc(var(--cw) * 0.009) #fbfaf6, 0 0 0 calc(var(--cw) * 0.013) rgba(20, 24, 31, 0.2);
  font-family: var(--font); font-size: calc(var(--cw) * 0.082); font-weight: 900; line-height: 1; letter-spacing: -0.04em;
}
.s-resources .fd-seal b { font-weight: inherit; translate: -0.02em 0.02em; }
.s-resources .fd-ttl {
  font-family: var(--font); font-size: calc(var(--cw) * 0.05); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.s-resources .fd-lb { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.s-resources .fd-code { font-size: calc(var(--cw) * 0.068); font-weight: 700; line-height: 0.86; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.s-resources .fd-tech {
  font-size: calc(var(--cw) * 0.026); font-weight: 500; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: right; color: rgba(20, 24, 31, 0.62); white-space: nowrap;
}
/* vacío: etiqueta sin escribir (líneas), sello «EMPTY», interrogación a rotulador y «Próximamente» */
.s-resources .fd-label.is-empty {
  background:
    repeating-linear-gradient(94deg, rgba(20, 24, 31, 0.016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f2f0eb 0%, #e8e5de 100%);
}
.s-resources .is-empty .fd-lm {
  position: relative; justify-content: space-between; padding: 0 calc(var(--cw) * 0.012);
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--cw) * 0.074 - 1px), rgba(20, 24, 31, 0.12) calc(var(--cw) * 0.074 - 1px) calc(var(--cw) * 0.074));
  background-position: 0 calc(var(--cw) * 0.02);
}
.s-resources .fd-stamp {
  display: inline-block; padding: 0.2em 0.34em 0.16em 0.42em; rotate: -7deg;
  font-family: var(--font); font-size: calc(var(--cw) * 0.088); font-weight: 900; line-height: 1; letter-spacing: 0.1em; color: rgba(20, 24, 31, 0.84);
  border: calc(var(--cw) * 0.008) solid currentColor; border-radius: calc(var(--cw) * 0.014);
  box-shadow: inset 0 0 0 calc(var(--cw) * 0.007) #efece6, inset 0 0 0 calc(var(--cw) * 0.012) currentColor;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.82) 38%, #000 52%, rgba(0, 0, 0, 0.86) 80%, #000 100%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.82) 38%, #000 52%, rgba(0, 0, 0, 0.86) 80%, #000 100%);
}
.s-resources .fd-seal--q { background: #d6d5d1; box-shadow: inset 0 0 0 1px rgba(20, 24, 31, 0.22), 0 0 0 calc(var(--cw) * 0.009) #efece6, 0 0 0 calc(var(--cw) * 0.013) rgba(20, 24, 31, 0.16); }
.s-resources .fd-q { display: block; overflow: visible; }
.s-resources .fd-seal .fd-q { width: 62%; height: 74%; translate: 4% 2%; }
:is(.s-resources, .rsm, .rsm-fly) .fd-q path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5.4; }
.s-resources .is-empty .fd-code { color: rgba(20, 24, 31, 0.34); }
.s-resources .is-empty .fd-tech b { font-weight: 700; color: var(--ink); }

/* cara B: labio del obturador + caja con la vista previa + título + botón */
.s-resources .fd-lip {
  position: absolute; left: 21.1%; width: 55.6%; top: 0; height: 7.4%; border-radius: 0 0 3px 3px;
  background: var(--fd-metal); box-shadow: 0 1.2px 1.4px rgba(0, 0, 0, 0.45);
}
.s-resources .fd-bin {
  position: absolute; left: 7.4%; right: 7.4%; top: 11.6%; bottom: 7.4%;
  display: flex; flex-direction: column; gap: calc(var(--cw) * 0.034);
}
.s-resources .fd-bin .fd-shot { position: relative; flex: 1 1 auto; min-height: 0; }
.s-resources .fd-b-ttl {
  flex: none; font-family: var(--font); font-size: calc(var(--cw) * 0.052); font-weight: 750; line-height: 1.16; letter-spacing: -0.02em; color: var(--fd-on);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s-resources .fd-b-ttl i {
  display: block; margin-bottom: 0.35em; font-style: normal; font-family: var(--mono); font-size: 0.6em; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fd-on-2);
}
.s-resources .is-empty .fd-b-ttl { -webkit-line-clamp: 3; }
.s-resources .fd-cta {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: calc(var(--cw) * 0.13); padding: 0 calc(var(--cw) * 0.055) 0 calc(var(--cw) * 0.06); border-radius: 999px;
  background: var(--fd-cta-bg); color: var(--fd-cta-fg); text-decoration: none; cursor: pointer;
  font-family: var(--mono); font-size: calc(var(--cw) * 0.037); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, color 0.3s ease;
}
.s-resources .fd-cta .arrow { transition: translate 0.4s var(--ease); }
.s-resources .fd-cta:focus-visible { outline: 2px solid var(--fd-on); outline-offset: 3px; }
@media (hover: hover) {
  .s-resources .fd-cta:hover { background: #c2fc03; color: #14181f; }
  .s-resources .fd--lime .fd-cta:hover { background: #fbfaf6; }
  .s-resources .fd-cta:hover .arrow { translate: 4px 0; }
}

/* Caja de vista previa: cara B, portada del detalle (modal) y vuelo FLIP — todo escala con --cw */
:is(.s-resources, .rsm, .rsm-fly) .fd-shot {
  display: block; overflow: hidden; border-radius: calc(var(--cw) * 0.035); background: #111113;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:is(.s-resources, .rsm, .rsm-fly) .fd-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
:is(.s-resources, .rsm, .rsm-fly) .fd-shot.is-empty,
:is(.s-resources, .rsm, .rsm-fly) .fd-shot.is-type {
  display: grid; place-items: center; color: #f3f2ee; text-align: center;
  background:
    radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.3px) 0 0 / calc(var(--cw) * 0.05) calc(var(--cw) * 0.05),
    radial-gradient(120% 90% at 30% 0%, #2c2c2f 0%, #131315 60%, #0c0c0d 100%);
}
:is(.s-resources, .rsm, .rsm-fly) .fd-shot-in { display: grid; justify-items: center; gap: calc(var(--cw) * 0.018); }
:is(.s-resources, .rsm, .rsm-fly) .fd-shot .fd-q { width: calc(var(--cw) * 0.12); height: calc(var(--cw) * 0.17); color: #f3f2ee; }
:is(.s-resources, .rsm, .rsm-fly) .fd-shot-e { font-family: var(--font); font-size: calc(var(--cw) * 0.07); font-weight: 900; letter-spacing: 0.14em; line-height: 1; padding-left: 0.14em; }
:is(.s-resources, .rsm, .rsm-fly) .fd-shot-s { font-family: var(--mono); font-size: calc(var(--cw) * 0.03); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243, 242, 238, 0.66); padding-left: 0.2em; }
:is(.s-resources, .rsm, .rsm-fly) .fd-shot-l { font-family: var(--font); font-size: calc(var(--cw) * 0.5); font-weight: 900; line-height: 1; letter-spacing: -0.06em; color: #c2fc03; }

/* Sin animación (prefers-reduced-motion): la cara B no gira, aparece con un fundido encima de la A */
@media (prefers-reduced-motion: reduce) {
  .s-resources .fd-b { transform: none; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
  .s-resources .fd-wrap.is-flipped .fd-b { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
}

/* ---------- Controles ---------- */
.s-resources .rs-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: clamp(6px, 1.2vw, 16px); }
.s-resources .rs-nav { display: inline-flex; align-items: center; gap: 10px; }
.s-resources .rs-btn {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--glass-bg); border: 1px solid var(--line-2);
  box-shadow: 0 10px 26px rgba(60, 50, 35, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.35s ease, background 0.35s ease, translate 0.45s var(--ease);
}
.s-resources .rs-prev::before, .s-resources .rs-next::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -6px;
  border-top: 1.5px solid var(--fg); border-right: 1.5px solid var(--fg); rotate: 45deg; transition: translate 0.45s var(--ease);
}
.s-resources .rs-prev::before { margin-left: -2.5px; rotate: -135deg; }
.s-resources .rs-play { width: 40px; height: 40px; margin-left: 6px; }
.s-resources .rs-play::before, .s-resources .rs-play::after {
  content: ''; position: absolute; top: 50%; width: 2px; height: 11px; margin-top: -5.5px; border-radius: 2px; background: var(--fg-1);
}
.s-resources .rs-play::before { left: calc(50% - 4px); }
.s-resources .rs-play::after { left: calc(50% + 2px); }
.s-resources .rs-play.is-paused::before {
  left: 50%; width: 0; height: 0; margin: -5.5px 0 0 -3px; border-radius: 0; background: none;
  border-left: 9px solid var(--fg-1); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;
}
.s-resources .rs-play.is-paused::after { display: none; }
@media (hover: hover) {
  .s-resources .rs-btn:hover { border-color: rgba(15, 20, 30, 0.3); background: var(--bg-1); translate: 0 -2px; }
  .s-resources .rs-next:hover::before { translate: 3px -3px; }
  .s-resources .rs-prev:hover::before { translate: -3px 3px; }
}
.s-resources .rs-count { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 74px; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.s-resources .rs-cur { display: inline-block; overflow: hidden; padding: 0.15em 0; margin: -0.15em 0; color: var(--fg); }
.s-resources .rs-cur-n { display: inline-block; }
.s-resources .rs-sep { color: var(--fg-4); }
.s-resources .rs-hint { color: var(--fg-4); }
.s-resources .rs-hint-m { display: none; }
@media (hover: none) {
  .s-resources .rs-hint-d { display: none; }
  .s-resources .rs-hint-m { display: inline; }
}
/* Canal pendiente de URL: texto, sin interacción */
.s-resources .rs-channel { color: var(--fg-3); cursor: default; }
.s-resources .rs-channel::before { opacity: 0.2; }

/* ---------- Puente: caja exterior + caja interior ---------- */
.s-resources .rs-bridge-wrap { margin-top: clamp(40px, 6vw, 84px); }
.s-resources .rs-bridge { padding: 10px; border-radius: 26px; }
.s-resources .rs-bridge-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 48px;
  padding: clamp(22px, 3.2vw, 40px); border-radius: 17px;
}
.s-resources .rs-bridge-t { font-size: clamp(22px, 2.7vw, 36px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; color: var(--fg); max-width: 21ch; text-wrap: balance; }
.s-resources .rs-bridge-cta { display: grid; justify-items: end; gap: 10px; text-align: right; }
.s-resources .rs-bridge-micro { max-width: 34ch; }

/* ---------- Respaldo (sin JS / si falla la ruleta) ---------- */
.s-resources .rs-fallback { display: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 16px; margin-top: 34px; }
/* sin JS, cada recurso también es un disquete: cuerpo con chaflán, obturador metálico y etiqueta de papel */
.s-resources .rs-fb {
  position: relative; display: grid; align-content: start; padding: 31% 9% 9%; min-height: 0;
  color: #14181f; background: radial-gradient(130% 95% at 14% 4%, #3a3a3c 0%, #1c1c1e 40%, #0e0e10 100%);
  border-radius: 8px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.s-resources .rs-fb:nth-child(3n + 2) { background: radial-gradient(130% 95% at 14% 4%, #66666a 0%, #3f3f43 40%, #2a2a2d 100%); }
.s-resources .rs-fb:nth-child(3n) { background: linear-gradient(158deg, #f2f2f2 0%, #cdcdcd 28%, #a9a9a9 58%, #c6c6c6 80%, #9c9c9c 100%); }
.s-resources .rs-fb[data-status='live'] { background: radial-gradient(130% 95% at 14% 4%, #e8ff8a 0%, #c9fd1c 30%, #c2fc03 52%, #a3d600 100%); }
.s-resources .rs-fb-sh {
  position: absolute; left: 23%; width: 54%; top: 0; height: 24%; border-radius: 0 0 4px 4px;
  background: var(--fd-metal); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.s-resources .rs-fb-sh::after { content: ''; position: absolute; left: 16%; width: 24%; top: 16%; bottom: 16%; border-radius: 3px; background: #1c1c1e; box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.7); }
.s-resources .rs-fb-label {
  position: relative; display: grid; align-content: start; gap: 8px; padding: 14px 14px 16px; border-radius: 3px;
  background: linear-gradient(180deg, #fdfcf9 0%, #f4f1ea 100%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.s-resources .rs-fb-tag { color: rgba(20, 24, 31, 0.62); }
.s-resources .rs-fb-title { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: #14181f; }
.s-resources .rs-fb-title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-resources .rs-fb-desc { font-size: 12.5px; line-height: 1.55; color: rgba(20, 24, 31, 0.68); }
.s-resources .rs-fb[data-status='soon'] .rs-fb-label { background: linear-gradient(180deg, #f2f0eb 0%, #e8e5de 100%); }
.s-resources .rs-fb-soon { color: #14181f; font-weight: 600; }
@media (max-width: 560px) {
  .s-resources .rs-fb { padding-top: 86px; }
  .s-resources .rs-fb-sh { height: 66px; }
}
.s-resources .rs-fb[data-status='soon'] .rs-fb-label::after {
  content: 'EMPTY ?'; content: 'EMPTY ?' / ''; justify-self: start; margin-top: 4px; padding: 3px 8px 2px 10px; rotate: -4deg;
  font-size: 13px; font-weight: 900; letter-spacing: 0.12em; color: rgba(20, 24, 31, 0.8);
  border: 2px solid currentColor; border-radius: 3px;
}
.s-resources .rs-noscript { margin-top: 14px; }
.no-js .s-resources .rs-fallback,
.s-resources.is-fallback .rs-fallback,
.s-resources.sw-nofx:not(.is-ready) .rs-fallback,
html.sw-nofx:not(.sw-booted) .s-resources .rs-fallback { display: grid; }
.no-js .s-resources :is(.rs-stage, .rs-nav, .rs-hint),
.s-resources.is-fallback :is(.rs-stage, .rs-nav, .rs-hint),
.s-resources.sw-nofx:not(.is-ready) :is(.rs-stage, .rs-nav, .rs-hint),
html.sw-nofx:not(.sw-booted) .s-resources :is(.rs-stage, .rs-nav, .rs-hint) { display: none; }
.no-js .s-resources .rs-from-row,
.s-resources.is-fallback .rs-from-row,
.s-resources.sw-nofx:not(.is-ready) .rs-from-row,
html.sw-nofx:not(.sw-booted) .s-resources .rs-from-row { margin-bottom: 0; }

/* ---------- Detalle (contenido del modal de core) ---------- */
.rsm { position: relative; display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 26px; align-items: start; }
.rsm-cover {
  --cw: 184px;
  position: relative; width: var(--cw); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px;
  box-shadow: 0 28px 52px -22px rgba(60, 50, 35, 0.45), 0 10px 22px -14px rgba(60, 50, 35, 0.2), 0 0 0 1px rgba(15, 20, 30, 0.08);
}
.rsm-body { display: grid; gap: 12px; padding-right: 28px; }
.rsm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rsm-step { color: var(--fg-3); }
.rsm-step b { color: var(--fg); font-weight: 600; }
.rsm-title { font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--fg); text-wrap: balance; }
.rsm-desc { font-size: 13.5px; line-height: 1.65; color: var(--fg-2); }
.rsm-soon { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; }
.rsm-soon-t { font-size: 13px; font-weight: 600; color: var(--fg); }
.rsm-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) {
  .rsm { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rsm-cover { --cw: 136px; }
  .rsm-body { padding-right: 0; }
  .rsm-ctas .btn { flex: 1 1 auto; }
}
.rsm-cover .fd-shot, .rsm-fly .fd-shot { position: absolute; inset: 0; border-radius: inherit; }
/* Vuelo FLIP de la portada (clon fijo en <body>, fuera de #smooth-content) */
.rsm-fly {
  position: fixed; z-index: 450; pointer-events: none; overflow: hidden; border-radius: 12px;
  box-shadow: 0 36px 80px -24px rgba(60, 50, 35, 0.45); will-change: transform;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .s-resources .rs-head { grid-template-columns: minmax(0, 1fr); }
  .s-resources .rs-lead { justify-self: start; }
  .s-resources .rs-bridge-in { grid-template-columns: minmax(0, 1fr); }
  .s-resources .rs-bridge-cta { justify-items: start; text-align: left; }
}
@media (max-width: 700px) {
  .s-resources .rs-from { font-size: 12.5px; padding-right: 16px; }
  .s-resources .rs-from-row { margin-bottom: -18px; }
  .s-resources .rs-name { font-size: 14px; }
  .s-resources .rs-desc { font-size: 11.5px; }
  .s-resources .rs-controls { justify-content: center; }
  .s-resources .rs-hint { order: 3; width: 100%; text-align: center; }
  .s-resources .rs-channel { order: 2; }
  .s-resources .rs-nav { width: 100%; justify-content: center; }
  .s-resources .rs-bridge .btn { width: 100%; }
  .s-resources .rs-bridge-cta { justify-items: stretch; }
}
/* Píldora en móvil: el texto «muy pronto» (por defecto, sin JS y con 0 recursos live) ocupa 2-3 líneas
   equilibradas a todo el ancho; radio fijo = cápsula con 1-2 líneas y caja redondeada con 3. */
@media (max-width: 700px) {
  .s-resources .rs-from { border-radius: 24px; }
}
/* Con recursos live, el texto corto en EN pide 2 líneas: cápsula compacta (ES cabe en 1) */
@media (max-width: 420px) {
  html[lang='en'] .s-resources.has-live .rs-from-t { max-width: 26ch; }
}
@media (prefers-reduced-motion: reduce) {
  .s-resources .rs-btn, .s-resources .fd-spec { transition: none !important; }
  .s-resources .rs-play { display: none; }
}

/* Arrastrar desde cualquier punto de la ruleta: mano (abierta / cerrada al arrastrar) + píldora «Arrastra» del cursor */
.s-resources .rs-stage, .has-cursor .s-resources .rs-stage.is-cursor-zone { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v-1a2 2 0 0 0-4 0v1a2 2 0 0 0-4 0v8l-1.6-1.6a2 2 0 0 0-2.8 2.8L7 20a5 5 0 0 0 4 2h3a6 6 0 0 0 6-6v-5a2 2 0 0 0-4 0' fill='%23fff' stroke='%2314181f' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 12, grab !important; }
.s-resources .rs-stage.is-dragging, .has-cursor .s-resources .rs-stage.is-cursor-zone.is-dragging { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M18 12v-1a2 2 0 0 0-4 0v-1a2 2 0 0 0-4 0v1a2 2 0 0 0-4 0v3l-1 0a2 2 0 0 0-1 3.4L7 20a5 5 0 0 0 4 2h3a6 6 0 0 0 6-6v-2a2 2 0 0 0-2-2z' fill='%23fff' stroke='%2314181f' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 12, grabbing !important; }
.s-resources .rs-stage :is(a, img) { -webkit-user-drag: none; user-drag: none; }
.s-resources .rs-stage .fd-cta { cursor: pointer !important; }
/* con la mano, fuera el punto del cursor y la píldora más pequeña, al lado de la mano */
body:has(.s-resources .rs-stage.is-cursor-zone) .cursor-dot { opacity: 0; }
body:has(.s-resources .rs-stage.is-cursor-zone) .cursor-label { font-size: 9.5px; }

/* logo de la plataforma (Shopify) en el sello lima, en tinta */
.s-resources .fd-seal-logo { width: 54%; height: 54%; color: #14181f; display: block; }