/* No Preguntes · Paso 107 · Biblioteca visual de significados */
#info{
  --np107-bg:#05050a;
  --np107-panel:#0d0c12;
  --np107-panel-soft:#121018;
  --np107-ink:#fff4df;
  --np107-copy:rgba(247,236,218,.72);
  --np107-muted:rgba(247,236,218,.48);
  --np107-gold:#d9b45f;
  --np107-gold-soft:rgba(217,180,95,.18);
  --np107-line:rgba(217,180,95,.18);
  --np107-purple:#8c62b7;
}

#info .np80-meanings-hub{
  width:min(100% - 28px,1280px)!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding:8px 0 74px!important;
  color:var(--np107-ink)!important;
}

/* Hero con identidad propia */
#info .np107-hub-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:clamp(28px,5vw,74px);
  align-items:center;
  min-height:500px;
  margin:8px 0 28px;
  padding:clamp(30px,5vw,68px);
  overflow:hidden;
  border:1px solid var(--np107-line);
  border-radius:34px;
  background:
    radial-gradient(circle at 78% 35%,rgba(129,76,164,.2),transparent 30%),
    radial-gradient(circle at 20% 80%,rgba(217,180,95,.08),transparent 34%),
    linear-gradient(145deg,rgba(18,15,25,.98),rgba(5,5,10,.98));
  isolation:isolate;
}
#info .np107-hub-hero::before{
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(217,180,95,.09);
  border-radius:26px;
  pointer-events:none;
}
#info .np107-hub-copy{position:relative;z-index:2;max-width:720px}
#info .np107-eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 13px;
  color:var(--np107-gold);
  font-size:9px;
  font-weight:800;
  letter-spacing:.25em;
  text-transform:uppercase;
}
#info .np107-eyebrow::before{content:"";width:36px;height:1px;background:var(--np107-gold)}
#info .np107-hub-copy h1{
  max-width:760px;
  margin:0;
  color:var(--np107-ink);
  font-size:clamp(40px,5.5vw,68px)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
#info .np107-hub-intro{display:grid;gap:11px;max-width:720px;margin-top:23px}
#info .np107-hub-intro p{margin:0;color:var(--np107-copy);font-size:15px;line-height:1.72}
#info .np107-hub-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:30px;
  overflow:hidden;
  border:1px solid var(--np107-line);
  border-radius:18px;
  background:var(--np107-line);
}
#info .np107-hub-stats div{padding:15px 14px;background:rgba(7,7,12,.88)}
#info .np107-hub-stats strong{display:block;color:var(--np107-ink);font:600 25px/1 Cinzel,Georgia,serif}
#info .np107-hub-stats span{display:block;margin-top:6px;color:var(--np107-muted);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}

#info .np107-card-fan{position:relative;z-index:2;height:360px;min-width:310px}
#info .np107-card-fan::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:310px;height:310px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(217,180,95,.14);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(217,180,95,.025),0 0 0 76px rgba(217,180,95,.012);
}
#info .np107-card-fan img{
  position:absolute;
  left:50%;top:50%;
  width:170px;height:auto;
  border:1px solid rgba(232,198,116,.42);
  border-radius:12px;
  background:#08080c;
  box-shadow:0 26px 56px rgba(0,0,0,.58);
}
#info .np107-card-fan img:nth-child(1){z-index:3;transform:translate(-50%,-52%) rotate(-2deg)}
#info .np107-card-fan img:nth-child(2){z-index:2;transform:translate(-94%,-44%) rotate(-14deg);opacity:.8}
#info .np107-card-fan img:nth-child(3){z-index:1;transform:translate(-6%,-44%) rotate(14deg);opacity:.8}
#info .np107-card-fan span{
  position:absolute;
  right:6px;bottom:16px;z-index:4;
  max-width:160px;
  padding:10px 12px;
  border:1px solid rgba(217,180,95,.25);
  border-radius:999px;
  background:rgba(5,5,10,.82);
  color:#e7c975;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(10px);
}

/* Buscador y filtros */
#info .np80-library-tools{
  position:sticky!important;
  top:12px!important;
  z-index:20!important;
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr) auto!important;
  gap:14px!important;
  align-items:end!important;
  margin:0 0 34px!important;
  padding:14px!important;
  border:1px solid var(--np107-line)!important;
  border-radius:22px!important;
  background:rgba(7,7,12,.92)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(18px)!important;
}
#info .np107-search-field{position:relative}
#info .np80-library-tools label{margin:0 0 7px!important;color:var(--np107-gold)!important;font-size:9px!important;letter-spacing:.14em!important}
#info .np80-library-tools input{
  min-height:48px!important;
  padding:0 16px!important;
  border:1px solid rgba(217,180,95,.2)!important;
  border-radius:14px!important;
  background:#111018!important;
  color:var(--np107-ink)!important;
}
#info .np80-library-tools input::placeholder{color:rgba(247,236,218,.34)}
#info .np80-filter-row{display:flex!important;gap:7px!important;flex-wrap:wrap!important;margin:0!important}
#info .np80-filter-row button{
  min-height:38px!important;
  padding:8px 12px!important;
  border:1px solid rgba(217,180,95,.16)!important;
  border-radius:999px!important;
  background:#121018!important;
  color:rgba(247,236,218,.58)!important;
  font-size:10px!important;
  font-weight:750!important;
}
#info .np80-filter-row button:hover,#info .np80-filter-row button.is-active{
  border-color:rgba(217,180,95,.55)!important;
  background:rgba(217,180,95,.1)!important;
  color:#f1d487!important;
}
#info #np80CardCount{
  min-width:116px;
  margin:0!important;
  padding:11px 12px;
  border-left:1px solid var(--np107-line);
  color:var(--np107-muted)!important;
  font-size:10px!important;
  font-weight:750;
  text-align:right;
  text-transform:uppercase;
}

/* Secciones del mazo */
#info .np107-library-sections{display:grid;gap:58px}
#info .np107-card-section[hidden]{display:none!important}
#info .np107-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--np107-line);
}
#info .np107-section-head small{display:block;color:var(--np107-gold);font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
#info .np107-section-head h2{margin:7px 0 0;color:var(--np107-ink);font-size:clamp(27px,3vw,39px)!important;line-height:1!important}
#info .np107-section-head p{max-width:620px;margin:9px 0 0;color:var(--np107-muted);font-size:11px;line-height:1.55}
#info .np107-section-head>span{flex:0 0 auto;color:rgba(247,236,218,.48);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

#info .np80-card-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:15px!important;
}
#info .np80-card-tile{
  position:relative!important;
  display:flex!important;
  min-width:0!important;
  min-height:0!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid rgba(217,180,95,.16)!important;
  border-radius:19px!important;
  background:linear-gradient(180deg,#13111a,#0b0a0f)!important;
  color:var(--np107-ink)!important;
  text-decoration:none!important;
  transform:none!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
#info .np80-card-tile:hover,#info .np80-card-tile:focus-visible{
  transform:translateY(-5px)!important;
  border-color:rgba(226,190,101,.56)!important;
  box-shadow:0 24px 50px rgba(0,0,0,.32)!important;
  outline:none!important;
}
#info .np107-card-visual{
  position:relative;
  display:block;
  aspect-ratio:220/320;
  overflow:hidden;
  background:#08080c;
}
#info .np107-card-visual::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 54%,rgba(7,7,12,.9) 100%);
  pointer-events:none;
}
#info .np107-card-visual img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 16%!important;
  background:#08080c!important;
  transition:transform .5s ease!important;
}
#info .np80-card-tile:hover .np107-card-visual img{transform:scale(1.035)}
#info .np107-card-status{
  position:absolute;
  left:10px;top:10px;z-index:3;
  padding:7px 9px;
  border:1px solid rgba(217,180,95,.26);
  border-radius:999px;
  background:rgba(5,5,10,.82);
  color:#edcf7d;
  font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  backdrop-filter:blur(8px);
}
#info .np80-card-copy{
  display:flex!important;
  min-height:132px!important;
  flex:1!important;
  flex-direction:column!important;
  padding:15px 14px 14px!important;
}
#info .np80-card-copy small{color:var(--np107-gold)!important;font-size:8px!important;letter-spacing:.14em!important}
#info .np80-card-copy strong{
  margin:7px 0!important;
  color:var(--np107-ink)!important;
  font-family:Cinzel,Georgia,serif!important;
  font-size:16px!important;
  font-weight:600!important;
  line-height:1.1!important;
}
#info .np80-card-copy>span{color:var(--np107-muted)!important;font-size:10px!important;line-height:1.45!important}
#info .np80-card-copy i{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-top:auto!important;
  padding-top:11px!important;
  color:#e5c56f!important;
  font-size:9px!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#info .np80-card-copy i::after{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
#info .np80-card-tile.is-unpublished{opacity:.52!important;filter:saturate(.52)}
#info .np80-card-tile.is-unpublished:hover{transform:none!important;box-shadow:none!important}
#info .np80-card-tile.is-unpublished .np107-card-visual img{filter:grayscale(.34)}
#info .np80-card-copy i.is-soon{color:rgba(247,236,218,.4)!important}

/* Sutilezas por palo */
#info .np80-card-tile[data-suit="copas"]{--np107-suit:#8ca7d8}
#info .np80-card-tile[data-suit="espadas"]{--np107-suit:#c7cbd7}
#info .np80-card-tile[data-suit="bastos"]{--np107-suit:#d58e57}
#info .np80-card-tile[data-suit="oros"]{--np107-suit:#d7b85f}
#info .np80-card-tile[data-suit] .np107-card-status{border-color:color-mix(in srgb,var(--np107-suit) 55%,transparent);color:var(--np107-suit)}

/* Guía de uso */
#info .np80-hub-guide{
  position:relative;
  margin:70px 0 10px!important;
  padding:clamp(28px,5vw,54px)!important;
  overflow:hidden;
  border:1px solid var(--np107-line)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 84% 20%,rgba(133,79,170,.16),transparent 34%),
    #0d0c12!important;
}
#info .np80-hub-guide h2{margin:0;color:var(--np107-ink)!important;font-size:clamp(28px,3.8vw,43px)!important}
#info .np80-hub-guide>p{max-width:760px;margin:12px 0 24px!important;color:var(--np107-copy)!important;font-size:14px;line-height:1.72}
#info .np107-guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
#info .np107-guide-steps article{padding:18px;border:1px solid rgba(217,180,95,.15);border-radius:17px;background:rgba(7,7,12,.58)}
#info .np107-guide-steps span{display:grid;width:31px;height:31px;place-items:center;border:1px solid rgba(217,180,95,.35);border-radius:50%;color:var(--np107-gold);font:600 13px/1 Cinzel,Georgia,serif}
#info .np107-guide-steps strong{display:block;margin-top:12px;color:var(--np107-ink);font-size:12px}
#info .np107-guide-steps p{margin:7px 0 0;color:var(--np107-muted);font-size:10px;line-height:1.55}
#info .np80-hub-guide .np70-content-links{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
#info .np80-hub-guide .np70-content-links a{border-color:rgba(217,180,95,.15)!important;background:rgba(7,7,12,.5)!important}
#info .np78-reviewed{margin-top:26px!important;color:rgba(247,236,218,.38)!important;text-align:center!important}

@media(max-width:1100px){
  #info .np107-hub-hero{grid-template-columns:1fr minmax(280px,.62fr)}
  #info .np80-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #info .np80-library-tools{grid-template-columns:1fr!important;align-items:stretch!important}
  #info #np80CardCount{border-left:0;border-top:1px solid var(--np107-line);text-align:left}
}
@media(max-width:820px){
  #info .np107-hub-hero{grid-template-columns:1fr;min-height:auto;padding:34px 28px}
  #info .np107-card-fan{height:300px;min-width:0}
  #info .np107-card-fan img{width:145px}
  #info .np80-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #info .np107-guide-steps,#info .np80-hub-guide .np70-content-links{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  #info .np80-meanings-hub{width:min(100% - 16px,620px)!important}
  #info .np107-hub-hero{padding:26px 20px;border-radius:24px}
  #info .np107-hub-copy h1{font-size:clamp(36px,11vw,48px)!important}
  #info .np107-hub-stats{grid-template-columns:repeat(3,1fr)}
  #info .np107-hub-stats div{padding:13px 8px}
  #info .np107-hub-stats strong{font-size:21px}
  #info .np107-hub-stats span{font-size:7px}
  #info .np107-card-fan{height:258px}
  #info .np107-card-fan img{width:126px}
  #info .np80-library-tools{position:relative!important;top:auto!important;margin-bottom:28px!important}
  #info .np80-filter-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #info .np80-filter-row button{width:100%!important}
  #info .np107-section-head{align-items:flex-start;flex-direction:column;gap:8px}
  #info .np80-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #info .np107-card-visual{aspect-ratio:220/300}
  #info .np80-card-copy{min-height:121px!important;padding:12px 11px!important}
  #info .np80-card-copy strong{font-size:14px!important}
  #info .np80-hub-guide{margin-top:52px!important;padding:24px 20px!important}
}
@media(max-width:390px){
  #info .np80-card-grid{grid-template-columns:1fr!important}
  #info .np80-card-tile{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important}
  #info .np107-card-visual{aspect-ratio:auto;height:190px}
  #info .np80-card-copy{min-height:190px!important}
}
@media(prefers-reduced-motion:reduce){
  #info .np80-card-tile,#info .np107-card-visual img{transition:none!important}
}
