/* ═══════════════════════════════════════════════════════════════
   Libro 3D "Oposiciones Destacadas" — portada de pergamino,
   lomo de color con texto vertical + bandera, y canto de páginas.
   Usado en la home (carrusel de oposiciones destacadas).
   ═══════════════════════════════════════════════════════════════ */

.opshelf-section { position: relative; }
.opshelf-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 6px; }
.opshelf-title { font-family:'Instrument Serif', Georgia, serif; font-size: clamp(26px, 3.4vw, 40px); color:#f4f4f5; letter-spacing:-.02em; margin:0; }
.opshelf-action { font-size:12px; font-weight:600; color:#c9c9d1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:7px 13px; border-radius:9px; text-decoration:none!important; white-space:nowrap; transition:background .2s,border-color .2s; }
.opshelf-action:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }

/* Bandeja oscura; los libros sobresalen por arriba */
.opshelf-tray {
  position:relative; margin-top:34px; padding: 0 46px;
  background:rgba(18,20,24,.72); border:1px solid rgba(255,255,255,.06);
  border-radius:22px; box-shadow: inset 0 1px rgba(255,255,255,.04), 0 26px 60px -30px rgba(0,0,0,.9);
}
.opshelf-rail {
  display:flex; gap:34px; align-items:flex-end; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 0 4px 26px; margin-top:-34px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.opshelf-rail::-webkit-scrollbar { display:none; }

/* Flechas */
.opshelf-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer; color:#d4d4d8; font-size:20px; line-height:1;
  background:transparent; border:none; transition:color .2s, background .2s; }
.opshelf-nav:hover { color:#fff; background:rgba(255,255,255,.08); }
.opshelf-nav.prev { left:8px; } .opshelf-nav.next { right:8px; }

/* Puntos de paginación */
.opshelf-dots { display:flex; justify-content:center; gap:7px; padding-bottom:16px; }
.opshelf-dot { width:34px; height:4px; border-radius:99px; background:rgba(255,255,255,.16); border:none; padding:0; cursor:pointer; transition:background .25s; }
.opshelf-dot.is-active { background:#e9e9ee; }

/* ── El libro ─────────────────────────────────────────────────── */
.opbook { flex:0 0 auto; scroll-snap-align:center; text-decoration:none!important; display:block;
  perspective: 1400px; width: 172px;
  /* la sombra va AQUÍ: un filter sobre el elemento 3D aplanaría el preserve-3d y ocultaría el lomo */
  filter: drop-shadow(12px 18px 20px rgba(0,0,0,.6)); }
.opbook-3d { position:relative; width:100%; height:236px; transform-style:preserve-3d;
  transform: rotateY(-26deg) rotateX(6deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.opbook:hover .opbook-3d { transform: rotateY(-12deg) rotateX(3deg) translateY(-6px); }

/* Canto de páginas: bloque de hojas asomando por arriba y por la derecha */
.opbook-pages { position:absolute; top:-6px; right:-6px; bottom:6px; left:6px; border-radius:2px 5px 5px 2px;
  background:linear-gradient(90deg,#d9d0bd 0%,#f6f2e7 18%,#fffdf8 60%,#e6ddca 100%);
  transform: translateZ(11px); z-index:1;
  background-image:repeating-linear-gradient(90deg, rgba(90,75,45,.10) 0 1px, transparent 1px 3px); }

/* Portada de pergamino */
.opbook-cover { position:absolute; inset:0; border-radius:2px 6px 6px 2px; overflow:hidden;
  transform: translateZ(13px); z-index:2;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.42), transparent 55%),
    linear-gradient(160deg,#efe6d2 0%,#e3d7bd 42%,#d8caac 100%);
  box-shadow: inset 12px 0 18px -10px rgba(0,0,0,.5), inset 0 0 40px rgba(120,95,55,.18);
  padding: 22px 14px 14px 26px; display:flex; flex-direction:column; align-items:center; }
/* manchas sutiles de papel viejo */
.opbook-cover::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: radial-gradient(closest-side at 78% 18%, rgba(150,120,70,.16), transparent),
              radial-gradient(closest-side at 20% 72%, rgba(140,110,60,.14), transparent); }

.opbook-title { position:relative; font-family:'Instrument Serif', Georgia, serif; font-weight:700;
  color:#1d232e; text-align:center; line-height:1.02; letter-spacing:-.01em;
  font-size: 21px; text-transform:uppercase; margin-top:4px; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.opbook-sub { position:relative; margin-top:10px; width:100%; }
/* líneas de "texto" del temario */
.opbook-lines { position:relative; margin-top:12px; width:100%; display:grid; gap:4px; }
.opbook-lines i { display:block; height:2px; border-radius:2px; background:rgba(45,40,30,.28); }
.opbook-lines i:nth-child(3n) { width:82%; } .opbook-lines i:nth-child(4n) { width:91%; }

/* Lomo de color */
.opbook-spine { position:absolute; left:0; top:0; width:26px; height:100%; transform-origin:left center;
  transform: rotateY(-90deg) translateZ(13px); border-radius:3px 0 0 3px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:11px 0; box-shadow: inset -6px 0 12px rgba(0,0,0,.45); }
.opbook-spine .flag { width:15px; height:10px; border-radius:1px; box-shadow:0 0 0 1px rgba(0,0,0,.25);
  background:linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%); flex:0 0 auto; }
/* el scaleX(-1) compensa que del lomo vemos su cara trasera: sin él, el texto sale en espejo */
.opbook-spine .stext { writing-mode:vertical-rl; transform:rotate(180deg) scaleX(-1); color:rgba(255,255,255,.92);
  font-size:8.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
  overflow:hidden; max-height:150px; text-shadow:0 1px 2px rgba(0,0,0,.5); }

@media (max-width:640px){
  .opshelf-tray { padding:0 30px; }
  .opbook { width:142px; } .opbook-3d { height:196px; }
  .opbook-title { font-size:17px; } .opshelf-rail { gap:22px; }
}
