/* --- Card base con 3D sutil y look minimalista gris claro --- */
:root{
  --gray-bg: #e9e9e9;
  --gray-border: #d0d0d0;
  --gray-shadow-light: rgba(0,0,0,.08);
  --gray-shadow-dark: rgba(0,0,0,.15);
  --ink: #333333;
  --ink-dim: rgba(0,0,0,.7);
  --shadow-1: 0 3px 8px var(--gray-shadow-light);
  --shadow-2: 0 14px 28px var(--gray-shadow-dark);
}

.rotor{
  position: relative;
  height: 200px;
  border-radius: 18px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

.rotor-inner{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transform-style: preserve-3d;
  background: var(--gray-bg);
  border: 1px solid var(--gray-border);
  transition:
    transform 280ms cubic-bezier(.2,.8,.2,1),
    box-shadow 280ms cubic-bezier(.2,.8,.2,1);
}

/* Contorno estático simple */
.rotor-inner::before,
.rotor-inner::after{
  content:none;
}

/* Efecto 3D suave */
.rotor:hover .rotor-inner,
.rotor:focus-within .rotor-inner{
  transform:rotateX(-2deg) rotateY(4deg) translateZ(6px) scale(1.01);
  box-shadow:var(--shadow-2);
}

/* --- FRONT: título --- */
.rotor-face{
  position:absolute;
  inset:0;
  padding:16px;
  transform-style:preserve-3d;
}

.rotor-front{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transform:translateZ(22px) scale(1);
  transition:opacity 220ms ease,transform 220ms ease;
  pointer-events:auto;
  z-index:2;
}

.rotor-title{
  margin:0;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.1rem;
  color:var(--ink);
}

/* --- BACK: opciones --- */
.rotor-back{
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:start;
  justify-items:stretch;
  opacity:0;
  transform:translateZ(28px) scale(.985);
  transition:opacity 240ms ease,transform 240ms ease;
  pointer-events:none;
  z-index:1;
  background: var(--gray-bg);
}

.rotor-header{
  position:sticky;
  top:0;
  padding:12px 16px;
  border-bottom:1px solid var(--gray-border);
  font-weight:700;
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.8);
  color:var(--ink);
  z-index:2;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}

.rotor-content{
  overflow-y:auto;
  padding:10px 12px 14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.3) transparent;
  z-index:1;
}
.rotor-content::-webkit-scrollbar{width:8px;}
.rotor-content::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2);
  border-radius:8px;
}

/* Enlaces internos */
.rotor-content .nav .nav-link{
  display:block;
  text-decoration:none;
  padding:10px 8px;
  border-radius:10px;
  transition:background 160ms ease,opacity 160ms ease;
  opacity:.9;
  position:relative;
  z-index:3;
  color:var(--ink);
  font-weight:500;
}
.rotor-content .nav .nav-link:hover{
  background:rgba(0,0,0,.05);
  opacity:1;
}

/* --- Interacción: fade/scale --- */
.rotor:hover .rotor-front,
.rotor:focus-within .rotor-front{
  opacity:0;
  transform:translateZ(22px) scale(.9);
  pointer-events:none;
  z-index:1;
}

.rotor:hover .rotor-back,
.rotor:focus-within .rotor-back{
  opacity:1;
  transform:translateZ(28px) scale(1);
  pointer-events:auto;
  z-index:2;
}

/* Accesibilidad */
.rotor[tabindex="0"]:focus{
  outline:2px dashed rgba(0,0,0,.4);
  outline-offset:4px;
  border-radius:20px;
}

@media (prefers-reduced-motion:reduce){
  .rotor-inner,
  .rotor-front,
  .rotor-back{transition:none;}
}